/* Hallmark · genre: playful editorial · macrostructure: floating workbench · theme: studied-DNA (source: Jacky Zhong public reference) · design-system: design.md · designed-as-app
 * contrast: pass (40–41) · nav: N9 edge-aligned · footer: none · slop: pass (42–45)
 * honest: pass (46) · chrome: preserved-user-concept (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49–57)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
:root {
  color-scheme: dark;
  --black: #060706;
  --carbon: #0b0c0b;
  --graphite: #151714;
  --panel: #101210;
  --line: rgba(238, 233, 220, 0.17);
  --bone: #e9e3d7;
  --bone-soft: #b9b3a8;
  --lime: #d7ff24;
  --lime-soft: rgba(215, 255, 36, 0.28);
  --orange: #ff5a28;
  --orange-soft: rgba(255, 90, 40, 0.3);
  --serif: "Bodoni 72", "Didot", "Times New Roman", "Noto Serif SC", serif;
  --sans: "Inter", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --pixel: "Cascadia Mono", "Courier New", "Microsoft YaHei", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--black);
  color: var(--bone);
  font-family: var(--sans);
}

body {
  min-height: 100vh;
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.app {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 15% 52%, rgba(215, 255, 36, 0.065), transparent 28%),
    radial-gradient(circle at 88% 55%, rgba(255, 90, 40, 0.075), transparent 27%),
    linear-gradient(180deg, #070807 0%, #040504 100%);
}

.app::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(233, 227, 215, 0.14);
  border-radius: 28px;
  pointer-events: none;
  z-index: 30;
}

/* Bright pastoral backdrop: a separate oversized layer keeps Gaussian blur
   continuous at every viewport edge without softening the desk itself. */
.pastoral-background {
  position: absolute;
  z-index: 0;
  inset: -24px;
  pointer-events: none;
  background: url("assets/pastoral-background-v2.png") center 48% / cover no-repeat;
  filter: blur(12px);
  transform: scale(1.035);
  transform-origin: center;
  will-change: filter;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.masthead {
  position: absolute;
  top: 54px;
  left: 64px;
  right: 64px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transition: opacity 600ms ease, transform 600ms ease;
}

.monogram {
  color: var(--bone);
  font-family: var(--serif);
  font-size: 28px;
  text-decoration: none;
  letter-spacing: -0.06em;
}

.identity {
  margin: 0;
  color: var(--bone-soft);
  font-size: 11px;
  letter-spacing: 0.36em;
}

.masthead nav {
  justify-self: end;
  display: flex;
  gap: 34px;
}

.masthead nav button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  font-size: 10px;
  letter-spacing: 0.5em;
  cursor: pointer;
}

.masthead nav button::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 6px;
  background: var(--lime);
  transition: width 200ms ease;
}

.masthead nav button:hover::after {
  width: calc(100% - 0.5em);
}

.hero-copy {
  position: absolute;
  top: 9.4vh;
  left: 50%;
  z-index: 2;
  width: min(90vw, 1420px);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  transition: opacity 650ms ease, transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--bone-soft);
  font-size: 9px;
  letter-spacing: 0.42em;
}

.hero-copy h1 {
  margin: 0;
  color: #102e32;
  font-family: var(--serif);
  font-size: clamp(66px, 9.2vw, 154px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-shadow:
    0 1px 0 rgba(255, 252, 241, 0.34),
    0 7px 22px rgba(7, 24, 27, 0.18);
  white-space: nowrap;
}

.computer-stage {
  position: absolute;
  top: 27vh;
  left: 50%;
  z-index: 5;
  width: min(92vw, 1450px);
  height: min(70vh, 700px);
  min-height: 520px;
  transform: translateX(-50%);
  transform-origin: 50% 58%;
  transition:
    width 900ms cubic-bezier(0.16, 1, 0.3, 1),
    height 900ms cubic-bezier(0.16, 1, 0.3, 1),
    top 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.computer-stage::after {
  content: "";
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 3%;
  height: 32%;
  z-index: -3;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.025), transparent),
    linear-gradient(180deg, rgba(21, 19, 15, 0.5), #090a09 62%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  transform: perspective(600px) rotateX(62deg);
  transform-origin: center bottom;
}

.monitor-wrap {
  position: absolute;
  left: 50%;
  top: 2%;
  width: min(69vw, 1040px);
  aspect-ratio: 16 / 11.2;
  transform: translateX(-53%);
  transition: left 900ms cubic-bezier(0.16, 1, 0.3, 1), top 900ms cubic-bezier(0.16, 1, 0.3, 1), width 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.monitor {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 16 / 9.8;
  padding: 12px;
  border: 1px solid #4a4b46;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 25%),
    linear-gradient(180deg, #242622, #111310 75%, #242620);
  box-shadow:
    0 46px 80px rgba(0, 0, 0, 0.58),
    inset 0 0 0 2px rgba(255, 255, 255, 0.025),
    0 0 80px rgba(215, 255, 36, 0.025);
}

.monitor-topline {
  position: absolute;
  top: -20px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  color: rgba(233, 227, 215, 0.42);
  font: 8px var(--pixel);
  letter-spacing: 0.28em;
}

.monitor-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
}

.monitor-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: #090a09;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.8);
}

.screen-home,
.retro-os {
  position: absolute;
  inset: 0;
}

.screen-home {
  overflow: hidden;
  opacity: 1;
  transition: opacity 240ms ease;
}

.screen-grid {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  background-image: radial-gradient(circle, rgba(233, 227, 215, 0.25) 0.75px, transparent 0.8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, black, transparent);
}

.desktop-intro {
  position: absolute;
  left: 8%;
  top: 11%;
  display: flex;
  flex-direction: column;
  max-width: 47%;
}

.pixel-kicker {
  color: var(--lime);
  font: 8px var(--pixel);
  letter-spacing: 0.2em;
}

.desktop-intro strong {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.55vw, 42px);
  font-weight: 400;
  line-height: 1.15;
}

.desktop-intro small {
  margin-top: 13px;
  color: rgba(233, 227, 215, 0.48);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.desktop-icons {
  position: absolute;
  right: 7%;
  top: 14%;
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 14px;
  width: 35%;
}

.desktop-icon {
  display: flex;
  min-height: 104px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(233, 227, 215, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--bone);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms, transform 180ms, background 180ms;
}

.desktop-icon:hover {
  border-color: var(--lime);
  background: rgba(215, 255, 36, 0.055);
  transform: translateY(-3px);
}

.desktop-icon > span:last-child {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.icon-shape {
  display: block;
  width: 28px;
  height: 23px;
  border: 1px solid var(--bone-soft);
}

.icon-folder {
  position: relative;
  border-radius: 2px;
  background: rgba(215, 255, 36, 0.12);
}

.icon-folder::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -1px;
  width: 13px;
  height: 7px;
  border: 1px solid var(--bone-soft);
  border-bottom: 0;
  background: #11130f;
}

.icon-file {
  border-color: var(--orange);
  background: rgba(255, 90, 40, 0.12);
  transform: skewY(-4deg);
}

.icon-app {
  border-radius: 50%;
  border-color: var(--lime);
  box-shadow: inset 0 0 0 7px rgba(215, 255, 36, 0.08);
}

.screen-status {
  position: absolute;
  left: 8%;
  right: 7%;
  bottom: 7%;
  display: flex;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid rgba(233, 227, 215, 0.1);
  color: rgba(233, 227, 215, 0.46);
  font: 8px var(--pixel);
  letter-spacing: 0.16em;
}

.monitor-neck {
  position: absolute;
  left: 42%;
  top: 82%;
  z-index: 1;
  width: 16%;
  height: 16%;
  background: linear-gradient(90deg, #151613, #373833 50%, #151613);
  clip-path: polygon(20% 0, 80% 0, 95% 100%, 5% 100%);
  box-shadow: 0 24px 30px #000;
}

.monitor-base {
  position: absolute;
  left: 33%;
  top: 96%;
  z-index: 2;
  width: 34%;
  height: 3.5%;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(180deg, #3d3e39, #151613);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.65);
}

.computer-tower {
  position: absolute;
  right: 3%;
  top: 29%;
  width: 12.5%;
  min-width: 125px;
  height: 52%;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #454640;
  border-radius: 13px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 25%),
    linear-gradient(90deg, #171916, #262721 58%, #111310);
  box-shadow:
    0 35px 50px rgba(0, 0, 0, 0.6),
    18px 10px 45px rgba(255, 90, 40, 0.07);
  transition: right 900ms cubic-bezier(0.16, 1, 0.3, 1), top 900ms cubic-bezier(0.16, 1, 0.3, 1), width 900ms cubic-bezier(0.16, 1, 0.3, 1), height 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 900ms ease, filter 900ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tower-slits {
  position: absolute;
  inset: 9% 18% 20%;
  opacity: 0.65;
  background: repeating-linear-gradient(90deg, #070807 0 3px, transparent 3px 8px);
}

.tower-power {
  position: absolute;
  left: 18%;
  bottom: 12%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--lime);
}

.computer-tower small {
  position: absolute;
  right: 14%;
  bottom: 10%;
  color: rgba(233, 227, 215, 0.35);
  font: 7px var(--pixel);
  letter-spacing: 0.18em;
}

.keyboard {
  position: absolute;
  left: 31%;
  bottom: 1.2%;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 3px;
  width: 43%;
  height: 9%;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid #454640;
  border-radius: 8px 8px 17px 17px;
  background: linear-gradient(180deg, #30312d, #151714);
  box-shadow: 0 16px 25px rgba(0, 0, 0, 0.7);
  transform: perspective(340px) rotateX(30deg);
  transition: left 900ms cubic-bezier(0.16, 1, 0.3, 1), bottom 900ms cubic-bezier(0.16, 1, 0.3, 1), width 900ms cubic-bezier(0.16, 1, 0.3, 1), height 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 900ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.keyboard span {
  min-width: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: #0e100e;
  box-shadow: inset 0 -1px 0 #383a35;
}

.keyboard span:nth-child(13n),
.keyboard span:nth-child(29n) {
  background: #7c9218;
  box-shadow: inset 0 0 10px var(--lime-soft);
}

.mouse {
  position: absolute;
  right: 18.5%;
  bottom: 1.8%;
  z-index: 12;
  width: 75px;
  height: 104px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #484a44;
  border-radius: 48% 48% 46% 46%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.06) 50%, transparent 51%),
    linear-gradient(160deg, #30322e, #111310 70%);
  box-shadow:
    0 16px 25px rgba(0, 0, 0, 0.65),
    0 0 0 0 rgba(215, 255, 36, 0);
  transform: perspective(120px) rotateX(10deg);
  cursor: pointer;
  transition: transform 220ms, box-shadow 220ms;
}

.mouse:hover {
  transform: perspective(120px) rotateX(10deg) translateY(-4px);
  box-shadow:
    0 20px 30px rgba(0, 0, 0, 0.7),
    0 0 34px rgba(215, 255, 36, 0.18);
}

.mouse-wheel {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 7px;
  height: 18px;
  border-radius: 5px;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  transform: translateX(-50%);
}

.mouse-glow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 50px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime);
  filter: blur(18px);
  opacity: 0.35;
  transform: translateX(-50%);
}

.entry-hint {
  position: absolute;
  right: 25%;
  bottom: -2%;
  z-index: 8;
  margin: 0;
  color: var(--bone-soft);
  font-size: 9px;
  letter-spacing: 0.3em;
  animation: breathe 2.4s ease-in-out infinite;
  transition: opacity 300ms;
}

.entry-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid rgba(233, 227, 215, 0.3);
  border-radius: 50%;
  color: var(--lime);
}

@keyframes breathe {
  0%,
  100% { opacity: 0.48; }
  50% { opacity: 1; }
}

.desk-accessories {
  position: absolute;
  left: 5%;
  top: 42%;
  width: 13%;
  height: 40%;
  transition: opacity 500ms;
}

.pen-cup {
  position: absolute;
  left: 25%;
  bottom: 0;
  width: 64px;
  height: 95px;
  border-radius: 7px 7px 15px 15px;
  background: linear-gradient(90deg, #121411, #292b26);
  box-shadow: 0 18px 25px #000;
}

.pen-cup i {
  position: absolute;
  bottom: 78%;
  width: 7px;
  height: 70px;
  border-radius: 3px;
  background: #2b2e28;
  transform-origin: bottom;
}

.pen-cup i:nth-child(1) {
  left: 20px;
  background: var(--lime);
  transform: rotate(-7deg);
}

.pen-cup i:nth-child(2) {
  left: 36px;
  transform: rotate(8deg);
}

.pen-cup i:nth-child(3) {
  left: 44px;
  height: 61px;
  background: var(--orange);
  transform: rotate(14deg);
}

.wire-object {
  position: absolute;
  left: -10%;
  top: -20%;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(215, 255, 36, 0.35);
  transform: rotate(28deg);
}

.wire-object::before,
.wire-object::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 90, 40, 0.45);
  transform: rotate(38deg);
}

.wire-object::after {
  inset: 35%;
  border-color: rgba(233, 227, 215, 0.25);
}

.geometry {
  position: absolute;
  z-index: 1;
  top: 31%;
  width: 120px;
  height: 300px;
  color: rgba(233, 227, 215, 0.25);
  pointer-events: none;
  transition: opacity 500ms;
}

.geometry--left { left: 4.5%; }
.geometry--right { right: 4.5%; }

.geo-cross {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
}

.geo-cross::before,
.geo-cross::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.geo-cross::before { top: 14px; width: 30px; height: 1px; }
.geo-cross::after { left: 14px; width: 1px; height: 30px; }

.geo-orbit {
  position: absolute;
  top: 100px;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(215, 255, 36, 0.32);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(25deg);
}

.geo-cube {
  position: absolute;
  top: 208px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 90, 40, 0.32);
  transform: rotate(42deg);
}

.geo-axis {
  position: absolute;
  top: 110px;
  width: 100px;
  border-top: 1px solid currentColor;
  transform: rotate(-15deg);
}

.geo-axis::after {
  content: "";
  position: absolute;
  right: 17px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.outer-items {
  position: absolute;
  inset: -3% -1% 0;
  z-index: 10;
  pointer-events: none;
  transition: filter 420ms ease, opacity 420ms ease, transform 600ms ease;
}

.outer-item {
  position: absolute;
  display: flex;
  width: 148px;
  min-height: 132px;
  padding: 18px 17px 16px;
  flex-direction: column;
  justify-content: space-between;
  color: #111;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%) rotate(var(--rotation, -2deg));
  transition: box-shadow 180ms, filter 180ms, opacity 180ms;
}

.outer-item:active { cursor: grabbing; }

.outer-item[data-type="card"] {
  width: 180px;
  min-height: 120px;
  border-radius: 5px;
  transform: translate(-50%, -50%) rotate(var(--rotation, 1deg));
}

.outer-item[data-color="lime"] { background: var(--lime); }
.outer-item[data-color="orange"] { background: var(--orange); }
.outer-item[data-color="bone"] { background: var(--bone); }
.outer-item[data-color="graphite"] {
  color: var(--bone);
  border: 1px solid rgba(233, 227, 215, 0.2);
  background: #181a17;
}

.outer-item::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.35;
}

.outer-item h3 {
  margin: 0 0 18px;
  font: 700 14px/1.3 var(--sans);
}

.outer-item p {
  margin: 0;
  white-space: pre-wrap;
  font: 11px/1.55 var(--sans);
}

.outer-item small {
  margin-top: 18px;
  font: 8px var(--pixel);
  letter-spacing: 0.12em;
  opacity: 0.58;
}

.outer-item.is-selected {
  box-shadow:
    0 0 0 3px var(--bone),
    0 0 0 6px var(--lime),
    0 18px 34px rgba(0, 0, 0, 0.5);
}

.outer-item .delete-item {
  position: absolute;
  top: -10px;
  right: -10px;
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(233, 227, 215, 0.4);
  border-radius: 50%;
  background: #090a09;
  color: var(--bone);
  cursor: pointer;
}

.outer-item:hover .delete-item { display: block; }

.outer-connections {
  position: absolute;
  inset: -3% -1% 0;
  z-index: 9;
  width: 102%;
  height: 103%;
  overflow: visible;
  pointer-events: none;
  transition: filter 420ms ease, opacity 420ms ease;
}

.outer-connections path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  filter: drop-shadow(0 0 4px rgba(215, 255, 36, 0.3));
}

.outer-connections circle {
  fill: var(--black);
  stroke: var(--lime);
  stroke-width: 1.4;
}

.workspace-toolbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(233, 227, 215, 0.2);
  border-radius: 12px;
  background: rgba(12, 14, 12, 0.88);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.workspace-toolbar[hidden] { display: none; }

.workspace-toolbar button {
  padding: 9px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--bone-soft);
  font-size: 10px;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.workspace-toolbar button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bone);
}

.workspace-toolbar button.is-active {
  background: var(--lime);
  color: #080908;
}

.mode-switch {
  display: flex;
  padding: 3px;
  border: 1px solid rgba(233, 227, 215, 0.13);
  border-radius: 8px;
}

.mode-switch button { min-width: 68px; }

.tool-glyph {
  margin-right: 6px;
  color: var(--lime);
}

.toolbar-divider {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: rgba(233, 227, 215, 0.14);
}

.workspace-toolbar .muted-action {
  color: rgba(233, 227, 215, 0.36);
}

.mode-guide {
  position: fixed;
  left: 45px;
  bottom: 42px;
  z-index: 40;
  max-width: 240px;
}

.mode-guide[hidden] { display: none; }

.mode-guide span {
  color: var(--lime);
  font: 8px var(--pixel);
  letter-spacing: 0.22em;
}

.mode-guide p {
  margin: 8px 0 0;
  color: rgba(233, 227, 215, 0.52);
  font-size: 10px;
  line-height: 1.6;
}

.computer-stage.entered {
  top: 17vh;
  width: min(98vw, 1580px);
  height: min(81vh, 810px);
}

body.workspace-entered .hero-copy {
  opacity: 0.09;
  transform: translateX(-50%) translateY(-4vh) scale(1.04);
}

body.workspace-entered .masthead {
  opacity: 0.45;
  transform: translateY(-12px);
}

body.workspace-entered .entry-hint { opacity: 0; pointer-events: none; }

.retro-os {
  display: none;
  overflow: hidden;
  background: #11140e;
  font-family: var(--pixel);
  image-rendering: pixelated;
}

.retro-wallpaper {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background:
    linear-gradient(135deg, transparent 35%, rgba(215, 255, 36, 0.08) 35.2%, transparent 35.6%),
    radial-gradient(circle at 65% 35%, rgba(255, 90, 40, 0.14), transparent 25%),
    #10130e;
}

.retro-wallpaper span {
  position: absolute;
  border: 1px solid rgba(215, 255, 36, 0.28);
}

.retro-wallpaper span:nth-child(1) {
  left: 43%;
  top: 22%;
  width: 20%;
  aspect-ratio: 1;
  transform: rotate(35deg);
}

.retro-wallpaper span:nth-child(2) {
  right: 8%;
  top: 18%;
  width: 12%;
  aspect-ratio: 1;
  border-color: rgba(255, 90, 40, 0.32);
  border-radius: 50%;
}

.retro-wallpaper span:nth-child(3) {
  right: 22%;
  bottom: 12%;
  width: 28%;
  height: 1px;
  border: 0;
  border-top: 1px solid rgba(233, 227, 215, 0.2);
  transform: rotate(-18deg);
}

.retro-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  height: 31px;
  padding: 10px 13px 0;
  border-bottom: 1px solid rgba(215, 255, 36, 0.16);
  color: rgba(233, 227, 215, 0.62);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.retro-desktop {
  position: absolute;
  inset: 31px 0 34px;
}

.retro-icon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  width: 68px;
  padding: 4px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bone);
  font-size: 8px;
  text-shadow: 1px 1px #000;
  cursor: default;
  transform: translate(-50%, -50%);
}

.retro-icon:hover,
.retro-icon:focus {
  border-color: var(--lime);
  background: rgba(215, 255, 36, 0.1);
  outline: 0;
}

.pixel-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 24px;
  filter: drop-shadow(2px 2px 0 #000);
}

.pixel-folder {
  border: 2px solid #171a13;
  background: var(--lime);
  box-shadow: inset -4px -4px 0 #8ca410;
}

.pixel-folder::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -2px;
  width: 15px;
  height: 7px;
  border: 2px solid #171a13;
  border-bottom: 0;
  background: var(--lime);
}

.pixel-file {
  border: 2px solid #171a13;
  background: var(--bone);
  box-shadow: inset -4px -4px 0 #817c73;
}

.pixel-file::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  border-left: 8px solid transparent;
  border-bottom: 8px solid #171a13;
}

.pixel-app {
  border: 2px solid #171a13;
  background:
    linear-gradient(90deg, var(--orange) 50%, #b52e10 50%),
    var(--orange);
  box-shadow: inset -4px -4px 0 #8c250c;
}

.retro-window {
  position: absolute;
  left: 27%;
  top: 13%;
  z-index: 20;
  width: 64%;
  min-width: 360px;
  height: 69%;
  border: 2px solid #060706;
  background: #c7c3b7;
  color: #11130f;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, 0.55),
    0 0 0 2px #7b796f;
}

.retro-window[hidden] { display: none; }

.retro-window__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  padding-left: 8px;
  background: linear-gradient(90deg, #282c20, #6e8410);
  color: #fff;
  font-size: 8px;
  letter-spacing: 0.12em;
  cursor: move;
}

.window-controls {
  display: flex;
  gap: 2px;
  padding-right: 3px;
}

.window-controls button {
  width: 20px;
  height: 19px;
  padding: 0;
  border: 1px solid #1c1d18;
  background: #d5d0c3;
  color: #111;
  line-height: 15px;
  cursor: pointer;
}

.retro-window__body {
  height: calc(100% - 48px);
  padding: 19px 20px;
  overflow: auto;
  background:
    linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    #d7d2c5;
  background-size: 100% 4px;
  font: 10px/1.7 var(--pixel);
}

.retro-window__body h2,
.retro-window__body h3 {
  margin: 0;
  font-family: var(--pixel);
}

.retro-window__body h2 {
  margin-bottom: 14px;
  font-size: 18px;
  letter-spacing: -0.05em;
}

.retro-window__body h3 {
  margin: 18px 0 7px;
  padding: 4px 7px;
  background: #181a16;
  color: var(--lime);
  font-size: 9px;
}

.retro-window__body p {
  margin: 7px 0;
}

.retro-window__body ul {
  margin: 7px 0;
  padding-left: 19px;
}

.retro-window__body li { margin-bottom: 4px; }

.retro-window__body .window-lead {
  padding: 12px;
  border: 1px solid #3c3d36;
  background: #ebe6da;
  font-size: 11px;
}

.retro-window__body .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.retro-window__body .tag {
  padding: 3px 6px;
  background: var(--orange);
  color: #111;
  font-size: 8px;
}

.retro-window__body .file-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

.retro-window__body .file-cell {
  min-height: 72px;
  padding: 9px;
  border: 1px solid #6f6d65;
  background: #c2beb3;
}

.retro-window__body a {
  color: #2e3700;
  text-decoration: underline;
}

.retro-window__status {
  display: flex;
  justify-content: space-between;
  height: 22px;
  padding: 6px 7px;
  border-top: 2px solid #77756d;
  background: #b9b5aa;
  font-size: 7px;
}

.retro-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 3px 4px;
  border-top: 2px solid #7d7a70;
  background: #bbb7ac;
  color: #161713;
  font-size: 7px;
}

.retro-taskbar > span {
  margin-left: 12px;
  opacity: 0.65;
}

.retro-taskbar button {
  height: 26px;
  border: 2px outset #e4dfd2;
  background: #bbb7ac;
  color: #111;
  font: 8px var(--pixel);
  cursor: pointer;
}

.retro-taskbar button:active {
  border-style: inset;
}

.start-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  background: var(--lime);
  box-shadow: 5px 0 var(--orange), 0 5px #73776e, 5px 5px #171915;
}

.taskbar-actions {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 40;
  opacity: 0.09;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.28) 4px
  );
}

body.inner-mode .screen-home {
  opacity: 0;
  pointer-events: none;
}

body.inner-mode .retro-os { display: block; }

body.inner-mode .outer-items,
body.inner-mode .outer-connections {
  filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.inner-mode .outer-items {
  transform: none;
}

body.inner-mode .monitor-wrap {
  left: 49.5%;
  top: -2%;
  width: min(84vw, 1260px);
  transform: translateX(-50%);
}

body.inner-mode .computer-tower {
  right: -1%;
  opacity: 0.42;
  filter: blur(1px);
}

body.inner-mode .keyboard {
  bottom: -5%;
  opacity: 0.35;
}

body.inner-mode .mouse {
  right: 12%;
  bottom: -4%;
  opacity: 0.35;
  pointer-events: none;
}

body.inner-mode .desk-accessories { opacity: 0.15; }

.custom-inner-icon {
  cursor: grab;
}

.zoom-meter {
  position: fixed;
  right: 42px;
  bottom: 40px;
  z-index: 55;
  display: none;
  width: 130px;
  color: var(--bone);
}

body.inner-mode .zoom-meter { display: block; }

.zoom-meter span {
  display: block;
  width: 0;
  height: 3px;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  transition: width 100ms linear;
}

.zoom-meter small {
  display: block;
  margin-top: 7px;
  color: rgba(233, 227, 215, 0.45);
  font: 7px var(--pixel);
  letter-spacing: 0.2em;
}

.item-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: 1px solid rgba(233, 227, 215, 0.25);
  border-radius: 12px;
  background: #111310;
  color: var(--bone);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75);
}

.item-dialog::backdrop {
  background: rgba(2, 3, 2, 0.78);
  backdrop-filter: blur(8px);
}

.item-dialog form { padding: 24px; }

.item-dialog header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}

.item-dialog header h2 {
  margin: 7px 0 0;
  font: 400 30px var(--serif);
}

.item-dialog header > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(233, 227, 215, 0.18);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.item-dialog label {
  display: block;
  margin-top: 14px;
  color: rgba(233, 227, 215, 0.55);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.item-dialog input[type="text"],
.item-dialog input:not([type]),
.item-dialog textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(233, 227, 215, 0.17);
  border-radius: 5px;
  outline: 0;
  background: #090a09;
  color: var(--bone);
  resize: vertical;
}

.item-dialog input:focus,
.item-dialog textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-soft);
}

.color-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: rgba(233, 227, 215, 0.55);
  font-size: 10px;
}

.color-field label { margin: 0; cursor: pointer; }
.color-field input { position: absolute; opacity: 0; }
.color-field i {
  display: block;
  width: 25px;
  height: 25px;
  border: 2px solid transparent;
  border-radius: 50%;
}
.color-field input:checked + i { border-color: #fff; }
.color-field i.lime { background: var(--lime); }
.color-field i.orange { background: var(--orange); }
.color-field i.bone { background: var(--bone); }
.color-field i.graphite { background: #2b2e29; }

.item-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.item-dialog footer button {
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.dialog-secondary {
  border: 1px solid rgba(233, 227, 215, 0.18);
  background: transparent;
}

.dialog-primary {
  border: 1px solid var(--lime);
  background: var(--lime);
  color: #080908;
}

.toast {
  position: fixed;
  top: 40px;
  left: 50%;
  z-index: 80;
  padding: 10px 15px;
  border: 1px solid rgba(233, 227, 215, 0.2);
  border-radius: 8px;
  background: rgba(12, 14, 12, 0.88);
  color: var(--bone);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 200ms, transform 200ms;
  backdrop-filter: blur(12px);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1050px) {
  .app {
    min-height: 620px;
  }

  .masthead {
    left: 42px;
    right: 42px;
  }

  .identity {
    display: none;
  }

  .masthead {
    grid-template-columns: 1fr 1fr;
  }

  .computer-stage {
    top: 29vh;
    width: 98vw;
  }

  .monitor-wrap {
    width: 76vw;
  }

  .computer-tower {
    right: 1%;
    min-width: 95px;
  }

  .desk-accessories {
    opacity: 0.45;
  }

  .workspace-toolbar {
    max-width: calc(100vw - 30px);
    overflow-x: auto;
  }

  .mode-guide {
    display: none;
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .app {
    min-height: 760px;
  }

  .app::before {
    inset: 10px;
    border-radius: 18px;
  }

  .masthead {
    top: 30px;
    left: 28px;
    right: 28px;
  }

  .masthead nav {
    gap: 15px;
  }

  .masthead nav button {
    font-size: 8px;
    letter-spacing: 0.25em;
  }

  .hero-copy {
    top: 13vh;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 15vw, 82px);
    white-space: normal;
  }

  .computer-stage,
  .computer-stage.entered {
    top: 31vh;
    width: 120vw;
    height: 500px;
    transform: translateX(-50%) scale(0.8);
  }

  .monitor-wrap,
  body.inner-mode .monitor-wrap {
    left: 50%;
    width: 95vw;
    transform: translateX(-50%);
  }

  .computer-tower {
    right: -9%;
  }

  .keyboard {
    left: 25%;
    width: 50%;
  }

  .mouse {
    right: 14%;
  }

  .desktop-intro {
    left: 5%;
  }

  .desktop-icons {
    right: 4%;
    width: 41%;
  }

  .desktop-icon {
    min-height: 78px;
    padding: 9px;
  }

  .retro-window {
    left: 8%;
    top: 12%;
    width: 84%;
    min-width: 0;
  }

  .workspace-toolbar {
    bottom: 12px;
  }

  .workspace-toolbar .muted-action,
  .workspace-toolbar #clearSelection {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* interaction-v2 */
.geometry,
.desk-accessories,
.retro-taskbar { display: none !important; }

.outer-items { z-index: 10; }
.outer-item {
  --paper: #d9ff26;
  --paper-shadow: #8aa512;
  --lift: 0px;
  --scale: 1;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.22) 0 1px, transparent 1.6px),
    repeating-linear-gradient(102deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.025) 1px 3px),
    linear-gradient(145deg, color-mix(in srgb, var(--paper) 96%, white), var(--paper));
  background-size: 13px 13px, 5px 5px, auto;
  box-shadow:
    0 2px 1px rgba(255,255,255,.25) inset,
    1px 2px 0 var(--paper-shadow),
    4px 8px 0 rgba(0,0,0,.12),
    0 22px 34px rgba(0,0,0,.36);
  transform: translate(-50%, -50%) translateY(var(--lift)) rotate(var(--rotation, -2deg)) scale(var(--scale));
  transform-origin: 50% 70%;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms ease, filter 180ms, opacity 180ms;
}

.outer-item[data-color="lime"] { --paper:#d9ff26; --paper-shadow:#819911; }
.outer-item[data-color="orange"] { --paper:#ff5a36; --paper-shadow:#9d2a19; }
.outer-item[data-color="bone"],
.outer-item[data-color="graphite"] { --paper:#e9e3d7; --paper-shadow:#9d978d; color:#111; border-color:rgba(255,255,255,.2); }

.outer-item::before {
  content:"";
  position:absolute;
  z-index:2;
  top:-1px;
  right:-1px;
  width:26px;
  height:26px;
  background: linear-gradient(225deg, rgba(9,10,9,.18) 0 48%, color-mix(in srgb, var(--paper) 78%, white) 50% 100%);
  clip-path: polygon(0 0,100% 0,100% 100%);
  filter: drop-shadow(-2px 3px 1px rgba(0,0,0,.15));
}
.outer-item::after {
  right:9px;
  bottom:7px;
  width:calc(100% - 18px);
  height:4px;
  border:0;
  background:rgba(0,0,0,.07);
  filter:blur(3px);
}
.outer-item:hover { --lift:-11px; --scale:1.025; box-shadow:0 2px 1px rgba(255,255,255,.3) inset,2px 3px 0 var(--paper-shadow),6px 14px 0 rgba(0,0,0,.1),0 30px 38px rgba(0,0,0,.45); }
.outer-item.is-dragging { --lift:-20px; --scale:1.045; cursor:grabbing; transition:none; filter:saturate(1.08); }
.outer-item.is-landing { animation:stickyLand 430ms cubic-bezier(.16,1.5,.3,1); }
@keyframes stickyLand {
  0% { transform:translate(-50%,-50%) translateY(-18px) rotate(var(--rotation)) scale(1.045); }
  55% { transform:translate(-50%,-50%) translateY(3px) rotate(var(--rotation)) scale(.985); }
  78% { transform:translate(-50%,-50%) translateY(-2px) rotate(var(--rotation)) scale(1.008); }
  100% { transform:translate(-50%,-50%) translateY(0) rotate(var(--rotation)) scale(1); }
}

body.inner-mode .monitor-wrap { z-index:40; }
body.inner-mode .monitor { position:relative; z-index:41; }
body.inner-mode .outer-items,
body.inner-mode .outer-connections { z-index:2; pointer-events:none !important; }
body.inner-mode .outer-item { pointer-events:none !important; }
body.inner-mode .computer-tower,
body.inner-mode .keyboard,
body.inner-mode .mouse { z-index:1; pointer-events:none; }

.retro-desktop { inset:31px 0 0; }
.retro-actions {
  position:absolute;
  z-index:28;
  top:38px;
  right:9px;
  display:flex;
  gap:5px;
}
.retro-actions::before {
  content:"FILE OPS";
  align-self:center;
  margin-right:4px;
  color:rgba(231,255,169,.48);
  font:6px var(--pixel);
  letter-spacing:.12em;
}
.retro-actions button,
.pixel-danger,
.folder-delete {
  border:1px solid #0b0d09;
  border-radius:0;
  background:#c9c5b9;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #65645d;
  color:#111;
  font:7px var(--pixel);
  cursor:pointer;
}
.retro-actions button { padding:5px 7px; }
.retro-actions button:active,
.pixel-danger:active,
.folder-delete:active { box-shadow:inset 1px 1px #65645d,inset -1px -1px #fff; }
.retro-window { height:74%; }
.retro-window__body { height:calc(100% - 48px); }

.custom-inner-icon { z-index:7; }
.inner-delete {
  position:absolute;
  z-index:3;
  top:-7px;
  right:-6px;
  display:none;
  width:18px;
  height:18px;
  padding:0;
  border:1px solid #090a08;
  background:var(--orange);
  color:#111;
  font:9px var(--pixel);
  line-height:16px;
  cursor:pointer;
}
.custom-inner-icon:hover .inner-delete { display:block; }
.custom-inner-icon.is-drop-target .pixel-folder { filter:brightness(1.35) drop-shadow(0 0 5px var(--lime)); }

.folder-description {
  margin:0 0 12px;
  padding:10px;
  border:1px solid #706e66;
  background:#e5e0d4;
}
.folder-dropzone {
  min-height:110px;
  padding:6px;
  border:1px dashed #6d6b63;
}
.folder-dropzone.is-drop-target { border-color:#1f2900; background:rgba(215,255,36,.2); }
.folder-entry {
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:4px 6px;
  border-bottom:1px dotted #858279;
  cursor:default;
}
.folder-entry:hover { background:#c7c3b7; }
.folder-entry .pixel-icon { position:relative; width:23px; height:19px; }
.folder-delete { width:22px; height:22px; padding:0; background:#ff7659; }
.pixel-danger { margin-top:18px; padding:7px 9px; background:#ff7659; }
.empty-folder { padding:26px 8px; text-align:center; color:#5d5b54; }

.zoom-meter {
  display:block;
  opacity:.82;
  pointer-events:none;
}
.zoom-meter small { color:rgba(233,227,215,.62); }

@media (max-width:720px) {
  .retro-actions { top:35px; right:5px; }
  .retro-actions::before { display:none; }
  .retro-actions button { padding:5px; font-size:6px; }
  .outer-item { width:128px; min-height:116px; padding:14px; }
  .zoom-meter { right:18px; bottom:20px; }
}
.custom-inner-icon.is-dragging { z-index:30; filter:drop-shadow(0 12px 8px rgba(0,0,0,.45)); }

/* interaction-v3 */
.entry-hint{display:none!important}
.outer-item{--twist:0deg;--sink:0px;transform:translate(-50%,-50%) translateY(var(--sink)) rotate(calc(var(--rotation) + var(--twist)))!important;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s!important}
.outer-item:hover{--lift:0px;--scale:1;transform:translate(-50%,-50%) rotate(var(--rotation))!important}
.outer-item::before{top:auto!important;left:auto!important;right:-1px!important;bottom:-1px!important;width:46px!important;height:38px!important;border-radius:100% 0 0 0;background:linear-gradient(135deg,transparent 0 48%,color-mix(in srgb,var(--paper) 68%,white) 50% 76%,var(--paper-shadow) 100%)!important;clip-path:polygon(0 100%,100% 0,100% 100%)!important;filter:drop-shadow(-4px -2px 3px rgba(0,0,0,.22))!important}
.outer-item.is-pressed,.outer-item.is-dragging{--twist:4deg;--sink:-1px;filter:saturate(1.04);transition:none!important}
.outer-item.is-landing{animation:stickySettle .42s cubic-bezier(.2,1.3,.3,1)!important}
@keyframes stickySettle{0%{transform:translate(-50%,-50%) translateY(-1px) rotate(calc(var(--rotation) + 4deg))}55%{transform:translate(-50%,-50%) translateY(5px) rotate(calc(var(--rotation) - 1deg))}100%{transform:translate(-50%,-50%) translateY(0) rotate(var(--rotation))}}
.outer-item h3{font-weight:700!important}.outer-item p{font-weight:400!important}
.mouse{overflow:visible;width:82px;height:112px;border-radius:48% 48% 43% 43%;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent 34%,rgba(0,0,0,.22) 72%),linear-gradient(160deg,#42443e,#121410 72%);box-shadow:0 8px 0 #090a08,0 22px 20px rgba(0,0,0,.72),inset 0 2px 2px rgba(255,255,255,.18);transform:perspective(240px) rotateX(42deg) rotateZ(-6deg);transform-origin:50% 100%}
.mouse::after{content:"";position:absolute;z-index:-1;left:5%;right:5%;bottom:-14px;height:25px;border-radius:50%;background:rgba(0,0,0,.72);filter:blur(9px)}
.mouse:hover{transform:perspective(240px) rotateX(42deg) rotateZ(-6deg);box-shadow:0 8px 0 #090a08,0 22px 20px rgba(0,0,0,.72),inset 0 2px 2px rgba(255,255,255,.18)}
.tower-power{padding:0;cursor:pointer;transition:box-shadow .2s,background .2s}.screen-off .tower-power{background:#333;box-shadow:0 0 0 1px #111}
.window-layer{position:absolute;inset:0;z-index:26;pointer-events:none}.window-layer>.retro-window{pointer-events:auto}
.retro-window{min-width:260px;min-height:190px;resize:both;overflow:hidden;height:auto;display:flex;flex-direction:column}.retro-window__body{flex:1;height:auto!important;min-height:0}.retro-window.is-active{box-shadow:7px 9px 0 rgba(0,0,0,.58),0 0 0 2px var(--lime)}
.retro-window.is-maximized{left:1%!important;top:32px!important;width:98%!important;height:calc(100% - 38px)!important;resize:none}
.window-title-group{display:flex;align-items:center;min-width:0;gap:5px}.window-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.window-back{width:20px!important}.window-back[hidden]{display:none}.window-controls button{cursor:pointer}
.window-file-tools{display:flex;justify-content:space-between;align-items:center;margin:-8px -8px 12px;padding:6px 8px;border:1px solid #777;background:#c2beb3;font:7px var(--pixel)}
.window-file-tools button,.folder-entry__actions button{margin-left:4px;padding:4px 6px;border:1px solid #111;background:#dad5c9;box-shadow:inset 1px 1px #fff,inset -1px -1px #777;font:7px var(--pixel);cursor:pointer}.window-file-tools [data-delete],.folder-entry__actions [data-delete]{background:var(--orange)}
.markdown-view blockquote{margin:0 0 14px;padding:11px 12px;border:1px solid #4d4d47;background:#eee9dd;font:11px/1.65 var(--sans)}
.markdown-view h1,.markdown-view h2,.markdown-view h3{display:block;margin:16px 0 8px!important;padding:6px 8px!important;background:#151713!important;color:var(--lime)!important;font:9px/1.4 var(--pixel)!important;letter-spacing:.03em!important}
.markdown-view p{font:11px/1.7 var(--sans)}.markdown-view strong{font-weight:800}.markdown-view em{font-style:italic}.markdown-view ul,.markdown-view ol{padding-left:22px;font:10px/1.6 var(--sans)}.md-tag{display:inline-block;margin:2px;padding:3px 6px;background:var(--orange);color:#111;font:7px var(--pixel)}
.folder-description{max-height:155px;overflow:auto}.folder-dropzone{display:flex;flex-direction:column;gap:3px}.folder-entry{display:grid!important;grid-template-columns:30px minmax(0,1fr) auto!important;min-height:42px!important;padding:6px!important}.folder-entry .pixel-icon{width:24px!important;height:20px!important;margin:0!important}.folder-entry__label{display:flex;min-width:0;flex-direction:column}.folder-entry__label b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-entry__label small{font-size:6px;color:#5b5b55}.folder-entry__actions{display:flex;align-items:center}
.inner-icon-actions{position:absolute;z-index:5;top:-8px;right:-9px;display:none}.custom-inner-icon:hover .inner-icon-actions{display:flex}.inner-icon-actions button{width:19px;height:19px;padding:0;border:1px solid #111;background:#d7d2c5;font:8px var(--pixel);cursor:pointer}.inner-icon-actions [data-delete]{background:var(--orange)}
.pixel-folder,.folder-entry .pixel-folder{border:2px solid #171a13!important;background:var(--lime)!important;box-shadow:inset -4px -4px 0 #8ca410!important}.pixel-folder::before,.folder-entry .pixel-folder::before{top:-7px!important;left:-2px!important;width:15px!important;height:7px!important;border:2px solid #171a13!important;border-bottom:0!important;background:var(--lime)!important}
body.inner-mode .monitor-wrap{z-index:32;left:50%;top:-9%;width:min(96vw,1440px);transform:translateX(-50%)}body.inner-mode .monitor{z-index:33}body.inner-mode .outer-items,body.inner-mode .outer-connections{z-index:46!important;pointer-events:none!important;opacity:0;visibility:hidden;filter:none}body.inner-mode .outer-item{pointer-events:none!important}body.inner-mode .computer-tower{transform:translateX(160vw);opacity:0}body.inner-mode .keyboard{transform:translateY(70vh);opacity:0}body.inner-mode .mouse{transform:translate(120vw,60vh);opacity:0}
.monitor-screen{background:#020302}.screen-home,.retro-os{transform-origin:50% 50%}.powering-off .screen-home,.powering-off .retro-os{animation:crtOff .52s forwards}.screen-off .screen-home,.screen-off .retro-os{opacity:0!important;transform:scale(0,.02)!important;pointer-events:none!important}.powering-on .screen-home,.powering-on .retro-os{animation:crtOn .62s both}
.monitor-screen::after{content:"";position:absolute;z-index:100;inset:0;pointer-events:none;opacity:0;background:#fff}.powering-off .monitor-screen::after{animation:screenFlash .52s}.powering-on .monitor-screen::after{animation:screenFlash .45s reverse}
@keyframes crtOff{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1,.025);filter:brightness(3)}72%{transform:scale(.05,.02);opacity:1}100%{transform:scale(0,.02);opacity:0}}@keyframes crtOn{0%{transform:scale(0,.02);opacity:0}35%{transform:scale(.08,.025);opacity:1;filter:brightness(3)}65%{transform:scale(1,.035)}100%{transform:scale(1);filter:brightness(1)}}@keyframes screenFlash{0%,100%{opacity:0}45%{opacity:.85}}
@media(max-width:720px){body.inner-mode .monitor-wrap{top:0;width:108vw}.retro-window{min-width:220px}.window-file-tools{align-items:flex-start;gap:5px}.folder-description{max-height:110px}}
/* sticky-note-v4: layered paper, curl and physical drag states */
.outer-item {
  --paper-top:#e5ff62; --paper-mid:#d5fb24; --paper-bottom:#bde700;
  --paper-edge:#748d00; --paper-back:#9ebd12;
  --twist:0deg; --sink:0px; --lift:0px; --paper-depth:7px;
  width:164px; min-height:150px; padding:0; isolation:isolate;
  border:0!important; border-radius:3px 3px 11px 4px;
  background:transparent!important; box-shadow:none!important;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.34));
  transform:translate(-50%,-50%) translateY(calc(var(--sink) + var(--lift))) perspective(700px) rotateX(-1.5deg) rotateZ(calc(var(--rotation) + var(--twist)))!important;
  transform-origin:52% 82%; transform-style:preserve-3d;
  transition:transform 240ms cubic-bezier(.2,.82,.2,1),filter 240ms ease!important;
}
.outer-item[data-color="lime"] { --paper-top:#e9ff79; --paper-mid:#d8ff25; --paper-bottom:#b9e500; --paper-edge:#718900; --paper-back:#a8ca18; }
.outer-item[data-color="orange"] { --paper-top:#ff9a78; --paper-mid:#ff5a36; --paper-bottom:#e63b1f; --paper-edge:#8f2316; --paper-back:#c73520; }
.outer-item[data-color="bone"] { --paper-top:#fffdf5; --paper-mid:#eee8dc; --paper-bottom:#d2c9ba; --paper-edge:#8f877a; --paper-back:#b7ad9e; }
.outer-item[data-color="graphite"] { --paper-top:#51564e; --paper-mid:#2d312c; --paper-bottom:#171a17; --paper-edge:#080908; --paper-back:#1b1e1a; color:#f1eee6; }
.outer-item::before {
  content:""; position:absolute; z-index:-3; left:8%!important; right:3%!important;
  top:auto!important; bottom:-19px!important; width:auto!important; height:25px!important;
  border-radius:50%!important; background:rgba(0,0,0,.62)!important; clip-path:none!important;
  filter:blur(12px)!important; opacity:.7; transform:translateZ(-14px) rotate(-2deg);
  transition:bottom 240ms,filter 240ms,opacity 240ms,transform 240ms;
}
.outer-item::after {
  content:""; position:absolute; z-index:-2; inset:8px 5px -9px 7px!important;
  width:auto!important; height:auto!important; border:0!important; border-radius:4px 4px 12px 6px;
  background:rgba(0,0,0,.28)!important; filter:blur(5px)!important; opacity:.72!important;
  transform:translateZ(-8px) skewX(-1deg);
}
.sticky-volume,.sticky-paper,.sticky-grain { position:absolute; inset:0; pointer-events:none; }
.sticky-volume {
  z-index:-1; border-radius:3px 3px 11px 5px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 18%),var(--paper-edge);
  transform:translate3d(2px,var(--paper-depth),-2px);
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.15);
}
.sticky-paper {
  z-index:0; overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:3px 3px 10px 4px;
  background:radial-gradient(ellipse at 23% 8%,rgba(255,255,255,.44),transparent 31%),linear-gradient(104deg,transparent 0 56%,rgba(0,0,0,.045) 74%,rgba(255,255,255,.1) 100%),linear-gradient(172deg,var(--paper-top) 0%,var(--paper-mid) 54%,var(--paper-bottom) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 1px 0 0 rgba(255,255,255,.18),inset -3px -5px 8px rgba(0,0,0,.1);
  transform:translateZ(1px);
}
.sticky-paper::after {
  content:""; position:absolute; right:-3px; bottom:-3px; width:58px; height:52px;
  border-radius:100% 0 0 0; background:radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.28),transparent 58%); filter:blur(2px);
}
.sticky-grain {
  z-index:1; border-radius:inherit; opacity:.28; mix-blend-mode:soft-light;
  background:repeating-radial-gradient(circle at 17% 29%,rgba(255,255,255,.38) 0 .45px,transparent .7px 3px),repeating-linear-gradient(93deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px);
  background-size:9px 11px,5px 5px; transform:translateZ(2px);
}
.sticky-copy { position:relative; z-index:3; padding:19px 18px 51px; transform:translateZ(4px); }
.outer-item h3 { margin:0 0 15px; font-weight:680!important; letter-spacing:-.025em; }
.outer-item p { font-weight:400!important; color:color-mix(in srgb,currentColor 86%,transparent); }
.outer-item small { position:absolute; z-index:4; left:18px; right:44px; bottom:14px; margin:0; transform:translateZ(5px); }
.sticky-fold {
  position:absolute; z-index:6; right:-1px; bottom:-1px; width:49px; height:43px; overflow:hidden;
  border-radius:100% 0 3px 0; pointer-events:none;
  background:radial-gradient(ellipse at 18% 14%,rgba(255,255,255,.58),transparent 34%),linear-gradient(142deg,var(--paper-back) 0 43%,color-mix(in srgb,var(--paper-mid) 72%,white) 68%,var(--paper-edge) 100%);
  box-shadow:-5px -4px 8px rgba(0,0,0,.19),inset 2px 2px 2px rgba(255,255,255,.28),inset -3px -3px 4px rgba(0,0,0,.18);
  transform:translateZ(9px) rotate(-1deg); transform-origin:100% 100%;
}
.sticky-fold::after { content:""; position:absolute; inset:0; border-radius:inherit; border-top:1px solid rgba(255,255,255,.3); background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16)); }
.outer-item:hover {
  --lift:0px; filter:drop-shadow(0 18px 14px rgba(0,0,0,.36)) brightness(1.015);
  transform:translate(-50%,-50%) perspective(700px) rotateX(-1.5deg) rotateZ(var(--rotation))!important;
}
.outer-item.is-pressed,.outer-item.is-dragging {
  --twist:3.5deg; --lift:-8px; --paper-depth:9px; cursor:grabbing;
  filter:drop-shadow(8px 28px 19px rgba(0,0,0,.43)) saturate(1.045); transition:none!important;
}
.outer-item.is-pressed::before,.outer-item.is-dragging::before { bottom:-31px!important; opacity:.48; filter:blur(16px)!important; transform:translateX(8px) scale(1.08) rotate(-3deg); }
.outer-item.is-pressed .sticky-fold,.outer-item.is-dragging .sticky-fold { transform:translateZ(12px) rotate(2deg) scale(1.035); }
.outer-item.is-landing { animation:stickySettleV4 .46s cubic-bezier(.2,1.28,.3,1)!important; }
@keyframes stickySettleV4 {
  0% { transform:translate(-50%,-50%) translateY(-8px) perspective(700px) rotateX(-1deg) rotateZ(calc(var(--rotation) + 3.5deg)); filter:drop-shadow(8px 28px 19px rgba(0,0,0,.43)); }
  58% { transform:translate(-50%,-50%) translateY(4px) perspective(700px) rotateX(-3deg) rotateZ(calc(var(--rotation) - .8deg)); filter:drop-shadow(0 11px 8px rgba(0,0,0,.38)); }
  78% { transform:translate(-50%,-50%) translateY(-1px) perspective(700px) rotateX(-1deg) rotateZ(calc(var(--rotation) + .25deg)); }
  100% { transform:translate(-50%,-50%) translateY(0) perspective(700px) rotateX(-1.5deg) rotateZ(var(--rotation)); filter:drop-shadow(0 18px 14px rgba(0,0,0,.34)); }
}
.outer-item.is-selected { filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--lime)) drop-shadow(0 18px 14px rgba(0,0,0,.38)); }
.outer-item .delete-item { z-index:10; transform:translateZ(12px); }
@media (max-width:720px) { .outer-item { width:134px; min-height:124px; } .sticky-copy { padding:15px 15px 46px; } .outer-item small { left:15px; bottom:11px; } .sticky-fold { width:42px; height:37px; } }
/* sticky-note-v5: Casebook-inspired layered sheets and velocity sway */
@property --sway { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.outer-item {
  --sway:0deg;
  --paper-depth:3px;
  --paper-path:polygon(1.2% .6%,98.7% 0,100% 96.8%,97.1% 99.7%,1.1% 100%,0 3.1%);
  filter:drop-shadow(1px 16px 13px rgba(0,0,0,.32));
  transform:translate(-50%,-50%) translateY(calc(var(--sink) + var(--lift))) perspective(760px) rotateX(-.8deg) rotateZ(calc(var(--rotation) + var(--twist) + var(--sway)))!important;
  will-change:auto;
}
.outer-item[data-shape="1"] { --paper-path:polygon(.4% 1.8%,97.8% 0,100% 3.7%,99.1% 98.6%,2.2% 100%,0 96.2%); }
.outer-item[data-shape="2"] { --paper-path:polygon(2% 0,99.4% 1.1%,100% 97.9%,96.4% 100%,0 98.7%,.7% 3.4%); }
.outer-item::before { z-index:-10; }
.outer-item::after { z-index:-9; inset:7px 4px -6px 6px!important; opacity:.56!important; filter:blur(4px)!important; }
.sticky-underlay {
  position:absolute; inset:2px; pointer-events:none; clip-path:var(--paper-path);
  background:linear-gradient(165deg,color-mix(in srgb,var(--paper-back) 80%,white),var(--paper-edge));
  box-shadow:0 7px 12px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.2);
  transform-origin:50% 72%;
}
.underlay-a { z-index:-4; opacity:.62; transform:translate(-5px,6px) rotate(-2.1deg) scale(.985); }
.underlay-b { z-index:-3; opacity:.78; transform:translate(5px,4px) rotate(1.35deg) scale(.992); }
.sticky-volume { z-index:-2; clip-path:var(--paper-path); transform:translate3d(1px,var(--paper-depth),-2px); opacity:.78; }
.sticky-paper,.sticky-grain { clip-path:var(--paper-path); }
.sticky-paper { border-radius:1px 2px 7px 2px; background:radial-gradient(ellipse at 23% 8%,rgba(255,255,255,.32),transparent 35%),linear-gradient(108deg,transparent 0 58%,rgba(0,0,0,.035) 76%,rgba(255,255,255,.07) 100%),linear-gradient(174deg,var(--paper-top) 0%,var(--paper-mid) 58%,var(--paper-bottom) 100%); }
.sticky-grain { opacity:.19; }
.sticky-fold { width:42px; height:36px; border-radius:100% 0 2px 0; box-shadow:-4px -3px 7px rgba(0,0,0,.17),inset 2px 2px 2px rgba(255,255,255,.22),inset -2px -2px 3px rgba(0,0,0,.14); }
.outer-item:hover {
  --lift:0px;
  filter:drop-shadow(1px 16px 13px rgba(0,0,0,.34)) brightness(1.01);
  transform:translate(-50%,-50%) perspective(760px) rotateX(-.8deg) rotateZ(calc(var(--rotation) + var(--sway)))!important;
}
.outer-item.is-pressed,.outer-item.is-dragging {
  --twist:0deg; --lift:-7px; --paper-depth:4px;
  filter:drop-shadow(9px 27px 18px rgba(0,0,0,.42)) saturate(1.035);
  transform:translate(-50%,-50%) translateY(var(--lift)) perspective(760px) rotateX(-2deg) rotateZ(calc(var(--rotation) + var(--sway)))!important;
}
.outer-item.is-pressed .underlay-a,.outer-item.is-dragging .underlay-a { transform:translate(-7px,8px) rotate(-3deg) scale(.98); }
.outer-item.is-pressed .underlay-b,.outer-item.is-dragging .underlay-b { transform:translate(7px,6px) rotate(2.2deg) scale(.988); }
.outer-item.is-pressed .sticky-fold,.outer-item.is-dragging .sticky-fold { transform:translateZ(10px) rotate(calc(1deg + var(--sway))) scale(1.02); }
.outer-item.is-landing { animation:casebookSettle .48s cubic-bezier(.18,1.2,.28,1)!important; }
@keyframes casebookSettle {
  0% { transform:translate(-50%,-50%) translateY(-7px) perspective(760px) rotateX(-2deg) rotateZ(calc(var(--rotation) + var(--sway))); filter:drop-shadow(9px 27px 18px rgba(0,0,0,.42)); }
  58% { transform:translate(-50%,-50%) translateY(3px) perspective(760px) rotateX(-1.8deg) rotateZ(calc(var(--rotation) - .55deg)); filter:drop-shadow(0 10px 8px rgba(0,0,0,.37)); }
  80% { transform:translate(-50%,-50%) translateY(-.6px) perspective(760px) rotateX(-.6deg) rotateZ(calc(var(--rotation) + .16deg)); }
  100% { transform:translate(-50%,-50%) translateY(0) perspective(760px) rotateX(-.8deg) rotateZ(var(--rotation)); filter:drop-shadow(1px 16px 13px rgba(0,0,0,.32)); }
}
@media (max-width:720px) { .sticky-fold { width:36px; height:31px; } }
/* experience-v6: single-paper notes, unified OS icons and window mechanics */
.sticky-underlay,.sticky-volume,.sticky-fold { display:none!important; }
.outer-item {
  --paper-path:polygon(.8% 1.2%,98.9% .2%,100% 97.4%,98.1% 99.5%,1.4% 100%,0 2.6%);
  --paper-depth:0px;
  border-radius:1px!important;
  filter:drop-shadow(1px 10px 9px rgba(0,0,0,.27));
  transition:left 190ms cubic-bezier(.18,.72,.2,1),top 190ms cubic-bezier(.18,.72,.2,1),transform 310ms cubic-bezier(.16,.78,.2,1),filter 260ms ease!important;
}
.outer-item[data-shape="1"] { --paper-path:polygon(.3% 1.7%,98.2% .3%,99.8% 3.1%,99.2% 98.7%,1.8% 100%,0 96.9%); }
.outer-item[data-shape="2"] { --paper-path:polygon(1.6% .2%,99.3% 1%,100% 98.1%,97% 99.8%,.2% 98.9%,.6% 2.9%); }
.outer-item::after { display:none!important; }
.outer-item::before { left:7%!important;right:4%!important;bottom:-14px!important;height:18px!important;background:rgba(0,0,0,.48)!important;filter:blur(10px)!important;opacity:.58; }
.sticky-paper {
  border:0!important;border-radius:1px!important;
  background:radial-gradient(ellipse at 22% 8%,rgba(255,255,255,.25),transparent 37%),linear-gradient(176deg,var(--paper-top),var(--paper-mid) 64%,var(--paper-bottom));
  box-shadow:inset 0 1px rgba(255,255,255,.38),inset -2px -3px 5px rgba(0,0,0,.055),0 1px rgba(0,0,0,.16);
}
.sticky-paper::after { display:none; }
.sticky-grain { opacity:.12; }
.outer-item:hover { filter:drop-shadow(1px 10px 9px rgba(0,0,0,.29)); }
.outer-item.is-pressed,.outer-item.is-dragging {
  --lift:-4px;
  filter:drop-shadow(7px 19px 13px rgba(0,0,0,.34));
  transition:left 170ms cubic-bezier(.12,.58,.18,1),top 170ms cubic-bezier(.12,.58,.18,1),transform 260ms cubic-bezier(.12,.65,.16,1),filter 240ms ease!important;
}
.outer-item.is-pressed::before,.outer-item.is-dragging::before { bottom:-23px!important;opacity:.4;filter:blur(13px)!important; }
.outer-item.is-landing { animation:paperSettleV6 .62s cubic-bezier(.16,1.05,.26,1)!important; }
@keyframes paperSettleV6 {
  0% { transform:translate(-50%,-50%) translateY(-4px) perspective(900px) rotateZ(calc(var(--rotation) + var(--sway)));filter:drop-shadow(7px 19px 13px rgba(0,0,0,.34)); }
  68% { transform:translate(-50%,-50%) translateY(1.5px) perspective(900px) rotateZ(calc(var(--rotation) - .24deg));filter:drop-shadow(0 8px 7px rgba(0,0,0,.28)); }
  100% { transform:translate(-50%,-50%) translateY(0) perspective(900px) rotateZ(var(--rotation));filter:drop-shadow(1px 10px 9px rgba(0,0,0,.27)); }
}
.sticky-media { position:relative;z-index:3;height:116px;margin:13px 13px 0;overflow:hidden;background:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.14);transform:translateZ(2px); }
.sticky-media img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.sticky-media .sticky-doodle { object-fit:fill;mix-blend-mode:multiply; }
.outer-item.has-media { width:204px;min-height:244px; }
.outer-item.has-media .sticky-copy { padding-top:15px; }
.note-media-tools { margin-top:18px;padding:14px;border:1px solid rgba(233,227,215,.16);border-radius:7px;background:#090a09; }
.note-media-row,.doodle-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;color:rgba(233,227,215,.58);font-size:10px;letter-spacing:.08em; }
.media-upload,.media-ghost { margin:0!important;padding:8px 10px;border:1px solid rgba(233,227,215,.2);border-radius:5px;background:#151713;color:var(--bone);font:9px var(--sans);cursor:pointer; }
.media-upload input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.media-ghost { background:transparent; }
.note-image-preview { height:112px;margin-top:12px;overflow:hidden;border:1px solid rgba(233,227,215,.15); }
.note-image-preview img { width:100%;height:100%;object-fit:cover; }
.doodle-heading { margin-top:14px; }
#noteDoodle { display:block;width:100%;height:150px;margin-top:9px;border:1px solid rgba(233,227,215,.17);border-radius:5px;background:#e8e4d9;cursor:crosshair;touch-action:none; }
.item-dialog { width:min(94vw,590px); }
.keyboard { display:none!important; }
.monitor-wrap { z-index:5; }
.computer-tower { z-index:1!important;right:1%;top:34%; }
body:not(.workspace-entered) .masthead,body:not(.workspace-entered) .hero-copy,body:not(.workspace-entered) .outer-items,body:not(.workspace-entered) .outer-connections,body:not(.workspace-entered) .computer-tower,body:not(.workspace-entered) .mouse,body:not(.workspace-entered) .monitor-neck,body:not(.workspace-entered) .monitor-base,body:not(.workspace-entered) .computer-stage::after { opacity:0!important;pointer-events:none!important; }
body:not(.workspace-entered) .monitor-wrap { left:50%;top:5%;width:min(82vw,1180px);transform:translateX(-50%); }
body.workspace-entered:not(.inner-mode) .computer-tower { opacity:1;transform:translateX(0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1); }
.mouse { opacity:0;transform:translateX(230px) perspective(240px) rotateX(42deg) rotateZ(-6deg);transition:opacity .75s ease,transform 1.15s cubic-bezier(.16,1,.3,1),box-shadow .25s!important; }
body.workspace-entered:not(.inner-mode) .mouse { opacity:1;transform:translateX(0) perspective(240px) rotateX(42deg) rotateZ(-6deg); }
body.workspace-entered:not(.inner-mode) .mouse:hover { transform:translateX(0) perspective(240px) rotateX(42deg) rotateZ(-6deg); }
.pixel-icon { width:42px!important;height:34px!important;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.58))!important; }
.pixel-folder,.folder-entry .pixel-folder {
  border:0!important;border-radius:3px 3px 4px 4px!important;
  background:linear-gradient(180deg,#ffd86c 0 28%,#ffc94d 29%,#f2ad25 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.65),inset 0 -3px rgba(180,112,13,.22),0 1px 0 #8a5a13!important;
}
.pixel-folder::before,.folder-entry .pixel-folder::before { top:-7px!important;left:2px!important;width:18px!important;height:9px!important;border:0!important;border-radius:3px 3px 0 0!important;background:#ffd568!important; }
.pixel-folder::after { content:"";position:absolute;left:0;right:0;bottom:0;height:72%;border-radius:3px;background:linear-gradient(175deg,#ffe28a,#f5b52f);box-shadow:inset 0 1px rgba(255,255,255,.55); }
.pixel-file,.folder-entry .pixel-file {
  width:32px!important;height:42px!important;border:1px solid #aaa69d!important;border-radius:1px!important;
  background:linear-gradient(135deg,#fff 0 72%,#d9d7d0 100%)!important;box-shadow:inset -3px -3px rgba(0,0,0,.055),2px 3px 2px rgba(0,0,0,.38)!important;
  clip-path:polygon(0 0,72% 0,100% 25%,100% 100%,0 100%);
}
.pixel-file::before { content:"";position:absolute;right:0;top:0;width:28%;height:25%;background:#d7d5cf;clip-path:polygon(0 0,100% 100%,0 100%);box-shadow:-1px 1px #aaa69d; }
.pixel-file::after { display:none!important; }
.desktop-icon { align-items:center;justify-content:center;gap:15px;text-align:center; }
.desktop-icon > span:last-child { font-size:12px!important;line-height:1.35; }
.retro-icon { width:98px!important;gap:10px!important;font-size:11px!important;line-height:1.35;text-align:center; }
.inner-icon-actions,.folder-entry__actions { display:none!important; }
.folder-entry { grid-template-columns:48px minmax(0,1fr)!important;min-height:58px!important;padding:9px 10px!important;align-items:center; }
.folder-entry .pixel-icon { margin:0 auto!important; }
.folder-entry__label b { font-size:12px;line-height:1.35; }
.folder-entry__label small { margin-top:3px;font-size:7px!important; }
.window-layer { z-index:80!important; }
.retro-actions { z-index:32!important; }
.retro-window { resize:none!important;overflow:hidden!important; }
.retro-window.is-maximized { z-index:999!important; }
.window-resize { position:absolute;z-index:50;display:block;background:transparent; }
.resize-n,.resize-s { left:9px;right:9px;height:9px; }
.resize-n { top:-5px;cursor:n-resize; }.resize-s { bottom:-5px;cursor:s-resize; }
.resize-e,.resize-w { top:9px;bottom:9px;width:9px; }
.resize-e { right:-5px;cursor:e-resize; }.resize-w { left:-5px;cursor:w-resize; }
.resize-ne,.resize-nw,.resize-se,.resize-sw { width:14px;height:14px; }
.resize-ne { top:-6px;right:-6px;cursor:ne-resize; }.resize-nw { top:-6px;left:-6px;cursor:nw-resize; }
.resize-se { right:-6px;bottom:-6px;cursor:se-resize; }.resize-sw { left:-6px;bottom:-6px;cursor:sw-resize; }
.outer-connections path { stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7; }
@media (max-width:720px) { .outer-item.has-media { width:174px;min-height:218px; }.sticky-media { height:96px; }.pixel-icon { transform:scale(.9); }.retro-icon { width:82px!important;font-size:10px!important; } }
/* window-resize-hitbox-fix */
.resize-n,.resize-s { left:8px;right:8px;height:10px; }
.resize-n { top:0; }.resize-s { bottom:0; }
.resize-e,.resize-w { top:8px;bottom:8px;width:10px; }
.resize-e { right:0; }.resize-w { left:0; }
.resize-ne,.resize-nw,.resize-se,.resize-sw { width:15px;height:15px; }
.resize-ne { top:0;right:0; }.resize-nw { top:0;left:0; }
.resize-se { right:0;bottom:0; }.resize-sw { left:0;bottom:0; }.window-controls,.window-title-group { position:relative;z-index:70; }

/* experience-v7: invisible scroll tracks, elastic notes and curved CRT glass */
* { scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { width:0; height:0; display:none; }

body:not(.workspace-entered) .hero-copy,
body:not(.workspace-entered) .outer-items,
body:not(.workspace-entered) .outer-connections { opacity:1!important; pointer-events:auto!important; }
body:not(.workspace-entered) .outer-connections { pointer-events:none!important; }

.outer-item.is-pressed,.outer-item.is-dragging {
  --lift:-9px;
  transform:translate(-50%,-50%) translateY(var(--lift)) perspective(760px) rotateZ(calc(var(--rotation) + var(--sway))) scale(1.018)!important;
  transition:transform 260ms cubic-bezier(.12,.7,.18,1),filter 260ms ease!important;
}
.outer-item.is-landing {
  animation:paperSettleV7 .88s cubic-bezier(.18,.82,.2,1)!important;
  transition:left 330ms cubic-bezier(.16,.74,.18,1),top 330ms cubic-bezier(.16,.74,.18,1)!important;
}
@keyframes paperSettleV7 {
  0% { transform:translate(-50%,-50%) translateY(-9px) perspective(760px) rotateZ(calc(var(--rotation) + var(--sway))) scale(1.018);filter:drop-shadow(8px 22px 14px rgba(0,0,0,.36)); }
  48% { transform:translate(-50%,-50%) translateY(-5px) perspective(760px) rotateZ(calc(var(--rotation) + .7deg)) scale(1.01);filter:drop-shadow(5px 16px 11px rgba(0,0,0,.33)); }
  78% { transform:translate(-50%,-50%) translateY(1.2px) perspective(760px) rotateZ(calc(var(--rotation) - .16deg)) scale(.997);filter:drop-shadow(1px 8px 7px rgba(0,0,0,.27)); }
  100% { transform:translate(-50%,-50%) translateY(0) perspective(760px) rotateZ(var(--rotation)) scale(1);filter:drop-shadow(1px 10px 9px rgba(0,0,0,.27)); }
}
.sticky-media.is-doodle-only { overflow:visible;background:transparent;box-shadow:none; }
.sticky-media.is-doodle-only .sticky-doodle { mix-blend-mode:multiply; }

.item-dialog label,.color-field,.note-media-row,.doodle-heading { font-size:13px;line-height:1.5; }
.item-dialog .pixel-kicker { font-size:10px; }
.item-dialog input[type="text"],.item-dialog input:not([type]),.item-dialog textarea { font-size:15px;line-height:1.55; }
.media-upload,.media-ghost,.item-dialog footer button { font-size:13px; }



/* experience-v8: readable type scale */
/* Site chrome */
.identity { font-size:14px; }
.masthead nav button { font-size:13px; }
.eyebrow { font-size:12px; }
.monitor-topline { font-size:11px; }
.computer-tower small { font-size:10px; }
.toast { font-size:14px; }

/* Screen home */
.pixel-kicker { font-size:11px; }
.desktop-intro small { font-size:14px;line-height:1.55; }
.desktop-icon > span:last-child { font-size:15px!important;line-height:1.45; }
.screen-status { font-size:11px; }

/* Notes and outside-mode controls */
.outer-item h3 { font-size:18px;line-height:1.35; }
.outer-item p { font-size:15px;line-height:1.6; }
.outer-item small { font-size:10px;line-height:1.35; }
.workspace-toolbar button { font-size:14px;padding:11px 14px; }
.mode-guide { max-width:320px; }
.mode-guide span { font-size:12px;line-height:1.5; }
.mode-guide p { font-size:14px;line-height:1.65; }

/* Pixel desktop */
.retro-topbar { height:38px;padding:11px 15px 0;font-size:12px; }
.retro-desktop { inset:38px 0 0; }
.retro-actions { top:46px; }
.retro-actions::before { font-size:10px; }
.retro-actions button { padding:7px 10px;font-size:12px; }
.retro-icon { width:118px!important;gap:12px!important;font-size:15px!important;line-height:1.45; }

/* Window frame and content */
.retro-window__bar { height:35px;padding-left:10px;font-size:13px;letter-spacing:.06em; }
.window-controls button { width:29px;height:27px;font-size:15px;line-height:22px; }
.window-back { min-width:28px;min-height:25px;font-size:16px; }
.retro-window__body { padding:20px 22px;font-size:15px;line-height:1.75; }
.retro-window__status { height:28px;padding:7px 9px;font-size:10px; }
.window-file-tools { margin:-8px -8px 15px;padding:9px 10px;font-size:12px;line-height:1.45; }
.window-file-tools button,.folder-entry__actions button { padding:6px 9px;font-size:12px; }
.markdown-view blockquote { font-size:15px;line-height:1.75; }
.markdown-view h1,.markdown-view h2,.markdown-view h3 { padding:8px 10px!important;font-size:14px!important;line-height:1.5!important; }
.markdown-view p { font-size:15px;line-height:1.75; }
.markdown-view ul,.markdown-view ol { font-size:14px;line-height:1.7; }
.md-tag { padding:4px 7px;font-size:11px; }
.folder-description { max-height:210px;padding:13px; }
.folder-entry { grid-template-columns:58px minmax(0,1fr)!important;min-height:76px!important;padding:11px 12px!important; }
.folder-entry__label b { font-size:16px;line-height:1.45; }
.folder-entry__label small { margin-top:5px;font-size:11px!important;line-height:1.35; }
.empty-folder { font-size:14px; }

/* Editors */
.item-dialog { width:min(94vw,650px); }
.item-dialog header h2 { font-size:34px; }
.item-dialog .pixel-kicker { font-size:12px; }
.item-dialog label,.color-field,.note-media-row,.doodle-heading { font-size:15px; }
.item-dialog input[type="text"],.item-dialog input:not([type]),.item-dialog textarea { font-size:17px; }
.media-upload,.media-ghost,.item-dialog footer button { font-size:15px; }

@media (max-width:720px) {
  .identity { font-size:12px; }
  .masthead nav button { font-size:12px; }
  .desktop-intro small,.mode-guide p { font-size:13px; }
  .retro-icon { width:96px!important;font-size:13px!important; }
  .retro-window__body { padding:14px;font-size:14px; }
  .markdown-view p,.markdown-view blockquote { font-size:14px; }
  .folder-entry__label b { font-size:14px; }
}


/* experience-v9: stable stage and interactive desk printer */
/* Optical centering with slightly more breathing room between letters. */
.hero-copy { left:49.25%;width:min(96vw,1800px); }
.hero-copy h1 { font-size:clamp(64px,8.65vw,146px);letter-spacing:-.035em; }

/* Home and outside mode share one coordinate system. */
.computer-stage,.computer-stage.entered {
  top:17vh;width:min(98vw,1580px);height:min(81vh,810px);
}
body:not(.workspace-entered) .monitor-wrap {
  left:50%;top:2%;width:min(69vw,1040px);transform:translateX(-53%);
}
body:not(.workspace-entered) .monitor-neck,
body:not(.workspace-entered) .monitor-base {
  opacity:1!important;pointer-events:none!important;
}
body:not(.workspace-entered) .computer-tower,
body:not(.workspace-entered) .mouse { opacity:0!important;pointer-events:none!important; }

.desk-printer {
  --printer-angle:-11deg;
  position:absolute;left:3.1%;top:47%;z-index:18;
  width:clamp(138px,10.2vw,190px);aspect-ratio:1.16;
  padding:0;border:0;background:transparent;color:#111;cursor:pointer;
  transform:translateY(-50%) rotate(var(--printer-angle));transform-origin:50% 58%;
  transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .25s ease;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.52));
}
.desk-printer:hover { transform:translateY(-52%) rotate(calc(var(--printer-angle) + 1.5deg));filter:drop-shadow(0 27px 25px rgba(0,0,0,.58)); }
.desk-printer:focus-visible { outline:2px solid var(--lime);outline-offset:8px; }
.printer-shadow { position:absolute;z-index:0;left:3%;right:-5%;bottom:-10%;height:24%;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(13px);transform:skewX(-12deg); }
.printer-top { position:absolute;z-index:4;left:10%;top:2%;width:80%;height:34%;border:1px solid #555850;border-radius:12px 12px 5px 5px;background:linear-gradient(145deg,#4b4e47,#20231f 62%,#121411);box-shadow:inset 2px 2px rgba(255,255,255,.09),inset -3px -4px rgba(0,0,0,.34),0 7px 7px rgba(0,0,0,.28);transform:perspective(260px) rotateX(28deg); }
.printer-top::before { content:"";position:absolute;left:17%;right:17%;top:21%;height:44%;border:1px solid #090a08;border-radius:2px;background:linear-gradient(180deg,#070806,#181a16);box-shadow:inset 0 2px 4px #000; }
.printer-top i:first-child { position:absolute;left:24%;right:24%;top:-12%;height:29%;border:1px solid #74766e;border-bottom:0;background:linear-gradient(180deg,#dbd6ca,#8f918a); }
.printer-top i:last-child { position:absolute;right:9%;top:13%;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px var(--lime); }
.printer-shell { position:absolute;z-index:3;left:0;right:0;top:27%;height:62%;overflow:hidden;border:1px solid #565950;border-radius:10px 12px 17px 15px;background:linear-gradient(155deg,#454842 0 12%,#252823 43%,#111310 100%);box-shadow:inset 2px 2px rgba(255,255,255,.085),inset -7px -9px 13px rgba(0,0,0,.34),0 2px #090a08; }
.printer-slot { position:absolute;left:11%;right:11%;top:21%;height:19%;border:1px solid #050605;border-radius:3px;background:#070807;box-shadow:inset 0 5px 7px #000,0 1px rgba(255,255,255,.08); }
.printer-controls { position:absolute;right:9%;top:52%;display:flex;gap:5px; }
.printer-controls i { width:7px;height:7px;border:1px solid #060706;border-radius:50%;background:#777970;box-shadow:inset 1px 1px rgba(255,255,255,.25); }
.printer-controls i:first-child { background:var(--orange); }
.printer-mark { position:absolute;left:10%;bottom:11%;color:rgba(233,227,215,.52);font:10px var(--pixel);letter-spacing:.08em; }
.printed-card {
  position:absolute;z-index:2;left:50%;top:39%;display:block;
  width:124%;aspect-ratio:1.72;padding:13px 14px;
  border:1px solid rgba(255,255,255,.62);border-radius:2px;
  background:linear-gradient(135deg,#f0eadf 0 72%,#d7ff24 72% 100%);
  color:#111;text-align:left;box-shadow:0 8px 18px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform:translate(-50%,-20%) scaleY(.12);transform-origin:50% 0;
}
.printed-card::after { content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(97deg,transparent 0 3px,rgba(0,0,0,.05) 3px 4px); }
.card-index,.card-role,.card-school,.card-slogan { position:relative;z-index:1;display:block;font-family:var(--pixel); }
.card-index { font-size:9px;letter-spacing:.15em;color:#55574f; }
.printed-card strong { position:relative;z-index:1;display:block;margin-top:8px;font:700 17px/1.05 var(--sans);letter-spacing:.02em; }
.printed-card strong em { font-style:normal;font-weight:500;font-size:13px; }
.card-role { margin-top:9px;font-size:10px;line-height:1.35;letter-spacing:.04em; }
.card-school { position:absolute;left:14px;bottom:13px;font-size:8px;letter-spacing:.05em; }
.card-slogan { position:absolute;right:-15%;bottom:43%;font-size:9px;font-weight:700;letter-spacing:.08em;transform:rotate(90deg); }
.desk-printer.is-printing { animation:printerPulse .46s ease 2; }
.desk-printer.is-printing .printed-card { animation:printCard 1.5s cubic-bezier(.2,.72,.18,1) forwards; }
.desk-printer.is-printing .printer-top i:last-child { animation:printerLed .24s steps(2) 6; }
.desk-printer.has-printed:not(.is-printing) .printed-card { opacity:1;transform:translate(-42%,70%) rotate(5deg); }
body.inner-mode .desk-printer { opacity:0;pointer-events:none;transform:translate(-90%, -50%) rotate(-18deg); }
@keyframes printerPulse { 0%,100%{transform:translateY(-50%) rotate(var(--printer-angle))} 45%{transform:translateY(-49%) rotate(calc(var(--printer-angle) - .8deg))} }
@keyframes printerLed { 0%,49%{opacity:.2}50%,100%{opacity:1} }
@keyframes printCard {
  0%{opacity:0;transform:translate(-50%,-22%) scaleY(.1)}
  18%{opacity:1}
  48%{transform:translate(-50%,2%) scaleY(.62)}
  76%{transform:translate(-47%,43%) scaleY(1) rotate(1deg)}
  100%{opacity:1;transform:translate(-42%,70%) rotate(5deg)}
}
@media(max-width:1050px){.desk-printer{left:1.4%;width:130px}.printer-mark{font-size:8px}.printed-card{width:132%}}
@media(max-width:720px){.desk-printer{display:none}.hero-copy{left:50%}.hero-copy h1{font-size:clamp(43px,13vw,78px);letter-spacing:-.04em}}


/* experience-v10: right-weighted desktop and physical card stack */
body { background:#171a15; }
.app {
  background:radial-gradient(circle at 76% 48%,rgba(215,255,36,.085),transparent 30%),radial-gradient(circle at 17% 64%,rgba(255,90,40,.07),transparent 29%),linear-gradient(135deg,#242820 0%,#181b16 48%,#11140f 100%);
}
.ambient-grid { opacity:.25; }
.app::before { border-color:rgba(238,233,220,.22); }

.hero-copy { left:4.7%;top:14.5vh;width:42vw;max-width:760px;transform:none;text-align:left; }
.hero-copy h1 { max-width:100%;font-size:clamp(68px,7.3vw,126px);letter-spacing:-.025em;line-height:.86;white-space:normal; }
.eyebrow { margin-bottom:24px; }
body.workspace-entered .hero-copy { transform:translateY(-2vh) scale(1.02);transform-origin:left top; }

.computer-stage,.computer-stage.entered { left:66%;top:15vh;width:min(112vw,1780px);height:min(84vh,840px);transform:translateX(-50%); }
.monitor-wrap,body:not(.workspace-entered) .monitor-wrap { left:50%;top:2%;width:min(76vw,1220px);transform:translateX(-53%); }

.desk-printer { left:3.4%;top:58%;width:clamp(190px,13.2vw,250px); }
.printer-mark { display:none!important; }
.printer-shell { height:66%; }
.printer-slot { left:10%;right:10%;top:18%;height:21%; }
.business-card-layer { position:absolute;z-index:22;inset:0;overflow:visible;pointer-events:none;transition:opacity .55s,filter .55s; }
.business-card {
  position:absolute;display:block;width:238px;aspect-ratio:1.72;padding:17px 18px;
  border:1px solid rgba(255,255,255,.72);border-radius:3px;
  background:linear-gradient(135deg,#f1eadf 0 72%,#d7ff24 72% 100%);color:#111;text-align:left;
  box-shadow:0 6px 10px rgba(0,0,0,.34);cursor:grab;pointer-events:auto;touch-action:none;
  transform:translate(-50%,-50%) perspective(700px) rotateX(28deg) rotateZ(var(--card-rotation));transform-origin:50% 55%;
  transition:left .48s cubic-bezier(.16,1,.3,1),top .48s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
.business-card::after { content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(97deg,transparent 0 3px,rgba(0,0,0,.055) 3px 4px); }
.business-card .card-index,.business-card .card-role,.business-card .card-school,.business-card .card-slogan { position:relative;z-index:1;display:block;font-family:var(--pixel); }
.business-card .card-index { font-size:11px;letter-spacing:.14em;color:#55574f; }
.business-card strong { position:relative;z-index:1;display:block;margin-top:10px;font:700 22px/1.04 var(--sans);letter-spacing:.01em; }
.business-card strong em { font-style:normal;font-weight:500;font-size:16px; }
.business-card .card-role { margin-top:11px;font-size:12px;line-height:1.35;letter-spacing:.035em; }
.business-card .card-school { position:absolute;left:18px;bottom:16px;font-size:10px;letter-spacing:.04em; }
.business-card .card-slogan { position:absolute;right:-12%;bottom:43%;font-size:10px;font-weight:700;letter-spacing:.07em;transform:rotate(90deg); }
.business-card.is-printing-card { pointer-events:none;transition:none; }
.business-card.is-dragging-card { cursor:grabbing;transition:none;transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(calc(var(--card-rotation) + var(--drag-tilt))) scale(1.055);box-shadow:18px 30px 32px rgba(0,0,0,.46); }
.business-card.is-card-landing { animation:businessCardLand .7s cubic-bezier(.2,.78,.18,1); }
.business-card.is-expanded { transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(0) scale(1.6);box-shadow:0 35px 80px rgba(0,0,0,.66);cursor:zoom-out; }
.business-card:not(.is-expanded):not(.is-dragging-card) { cursor:zoom-in; }
body.inner-mode .business-card-layer { opacity:.16;filter:blur(10px);pointer-events:none; }
body.inner-mode .business-card { pointer-events:none; }
@keyframes businessCardLand {
  0%{transform:translate(-50%,-50%) translateY(-25px) perspective(700px) rotateX(0) rotateZ(var(--card-rotation)) scale(1.04);box-shadow:14px 28px 28px rgba(0,0,0,.46)}
  72%{transform:translate(-50%,-50%) translateY(5px) perspective(700px) rotateX(21deg) rotateZ(var(--card-rotation)) scale(.995);box-shadow:0 7px 13px rgba(0,0,0,.31)}
  100%{transform:translate(-50%,-50%) translateY(0) perspective(700px) rotateX(28deg) rotateZ(var(--card-rotation)) scale(1);box-shadow:0 6px 10px rgba(0,0,0,.34)}
}
@media(max-width:1050px){.hero-copy{left:4%;width:39vw}.hero-copy h1{font-size:clamp(58px,7.1vw,90px)}.computer-stage,.computer-stage.entered{left:68%}.desk-printer{left:2%;width:175px}.business-card{width:210px}}
@media(max-width:720px){.hero-copy{left:6%;top:10vh;width:88vw}.computer-stage,.computer-stage.entered{left:60%;top:28vh;width:128vw}.business-card{width:190px}}


/* experience-v11: paced print, centered inner computer and blurred legacy desktop */
/* Keep the left statement completely clear in home and outside modes. */
.computer-stage,.computer-stage.entered { left:88%; }

/* Entering the operating system recenters the complete computer group. */
body.inner-mode .computer-stage {
  left:50%;top:4vh;width:min(100vw,1680px);height:min(96vh,900px);transform:translateX(-50%);
}
body.inner-mode .monitor-wrap {
  left:50%;top:0;width:min(86vw,1380px);transform:translateX(-50%);
}
body.inner-mode .computer-tower {
  right:-1.5%;top:31%;opacity:1;filter:none;transform:translateX(0);transition:right 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1),opacity .8s ease,filter .8s ease,transform 1s cubic-bezier(.16,1,.3,1);
}
body.inner-mode .mouse {
  right:-1.5%;bottom:1%;opacity:1;transform:translateX(0) perspective(240px) rotateX(42deg) rotateZ(-6deg);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);
}

/* A soft, non-interactive echo of the classic hill-and-sky desktop. */
body.inner-mode .retro-wallpaper {
  z-index:0;opacity:.7;filter:blur(9px) saturate(.78);transform:scale(1.055);
  background:
    radial-gradient(ellipse at 77% 112%,#2f722d 0 35%,transparent 35.6%),
    radial-gradient(ellipse at 20% 116%,#63a84a 0 46%,transparent 46.7%),
    linear-gradient(180deg,#3789c2 0 52%,#a9cee2 58%,#6ca44a 59% 100%);
}
body.inner-mode .retro-wallpaper::after {
  content:"";position:absolute;left:13%;top:13%;width:34%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.78),rgba(255,255,255,.18) 58%,transparent 72%);filter:blur(15px);
}
body.inner-mode .retro-wallpaper span { display:none; }

/* Cards settle without a second positional transition back to the printer. */
.business-card.is-printing-card { transition:none!important; }
.business-card .card-index { font-size:12px;color:#4d5048; }
.business-card strong { margin-top:14px;font-size:28px; }
.business-card .card-role { margin-top:17px;font-size:14px; }
.business-card .card-school { left:18px;bottom:17px;font-size:12px; }
.business-card .card-slogan { display:none; }

@media(max-width:1050px){.computer-stage,.computer-stage.entered{left:88%}body.inner-mode .computer-stage{left:50%}.hero-copy{width:44vw}}
@media(max-width:720px){.computer-stage,.computer-stage.entered{left:72%}body.inner-mode .computer-stage{left:50%}}


/* experience-v12: surface-aware cards, centered outside mode and desktop trash */
/* Home stays right-weighted; the first scroll recenters the computer. */
.computer-stage { left:88%; }
.computer-stage.entered { left:50%; }
body.workspace-entered .monitor-wrap { left:50%;transform:translateX(-50%); }
body.inner-mode .computer-stage { left:50%; }

/* Brighter classic desktop: muted teal-blue, clear files, no wallpaper blur. */
.monitor-screen { background:#101916;box-shadow:inset 0 0 28px rgba(0,0,0,.46); }
.screen-home { background:radial-gradient(circle at 32% 32%,rgba(103,151,139,.16),transparent 42%),linear-gradient(145deg,#18251f,#101713); }
body.inner-mode .retro-os { background:#5f8583; }
body.inner-mode .retro-wallpaper {
  opacity:1;filter:none;transform:none;
  background:linear-gradient(145deg,#789d9a 0%,#648b89 48%,#4e7475 100%);
}
body.inner-mode .retro-wallpaper::after { content:none; }
body.inner-mode .retro-wallpaper span { display:none; }

/* Printing begins behind the shell so the card actually emerges from the slot. */
.business-card-layer { z-index:17; }
.desk-printer { z-index:19; }
.business-card {
  background:linear-gradient(90deg,#ff5a28 0 9px,#f3ecdf 9px 76%,#e6ded1 76% 100%);
  border-color:rgba(255,90,40,.72);box-shadow:0 6px 10px rgba(0,0,0,.34);
}
.business-card::before { content:"";position:absolute;right:8.5%;top:16%;width:30px;height:30px;border:2px solid rgba(255,90,40,.72);border-radius:50%;box-shadow:inset 0 0 0 6px rgba(255,90,40,.1); }
.business-card::after { opacity:.1; }
.business-card .card-index { color:#d9441d;font:600 12px/1.2 var(--sans);letter-spacing:.18em; }
.business-card strong { color:#151713;font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:30px;font-weight:700;letter-spacing:.08em; }
.business-card .card-role { color:#34352f;font-family:var(--sans);font-size:13px;letter-spacing:.08em; }
.business-card .card-school { color:#55564f;font-family:var(--sans);font-size:11px;letter-spacing:.08em; }
.business-card:not(.is-on-desk):not(.is-expanded):not(.is-printing-card) { transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(var(--card-rotation)); }
.business-card.is-dragging-card { transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(calc(var(--card-rotation) + var(--drag-tilt))) scale(1.055); }
.business-card.is-card-landing { animation:surfaceCardLand var(--drop-duration,.82s) cubic-bezier(.18,.72,.18,1);transition:left var(--drop-duration,.82s) cubic-bezier(.2,.72,.18,1),top var(--drop-duration,.82s) cubic-bezier(.3,.64,.2,1)!important; }
.business-card.is-on-desk { transform:translate(-50%,-50%) perspective(700px) rotateX(28deg) rotateZ(var(--card-rotation)); }
.business-card.is-discarding { opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(95deg)!important;transition:left .58s cubic-bezier(.3,.7,.2,1),top .58s cubic-bezier(.3,.7,.2,1),transform .58s cubic-bezier(.3,.7,.2,1),opacity .48s ease!important;pointer-events:none; }
@keyframes surfaceCardLand {
  0%{transform:translate(-50%,-50%) translateY(-18px) perspective(700px) rotateX(0) rotateZ(var(--card-rotation)) scale(1.045);box-shadow:15px 28px 29px rgba(0,0,0,.45)}
  70%{transform:translate(-50%,-50%) translateY(-4px) perspective(700px) rotateX(5deg) rotateZ(var(--card-rotation)) scale(1.015);box-shadow:8px 17px 18px rgba(0,0,0,.4)}
  91%{transform:translate(-50%,-50%) translateY(5px) perspective(700px) rotateX(34deg) rotateZ(var(--card-rotation)) scale(.99);box-shadow:0 4px 7px rgba(0,0,0,.3)}
  100%{transform:translate(-50%,-50%) perspective(700px) rotateX(28deg) rotateZ(var(--card-rotation));box-shadow:0 6px 10px rgba(0,0,0,.34)}
}

.desk-trash { position:absolute;left:19%;top:73%;z-index:20;width:92px;height:118px;pointer-events:auto;transform:rotate(7deg);transition:transform .3s,filter .3s;filter:drop-shadow(0 16px 13px rgba(0,0,0,.4)); }
.trash-shadow { position:absolute;left:8%;right:-9%;bottom:-7%;height:18%;border-radius:50%;background:rgba(0,0,0,.48);filter:blur(8px); }
.trash-lid { position:absolute;z-index:3;left:-5%;top:4%;width:110%;height:17%;border:1px solid #73766e;border-radius:8px;background:linear-gradient(#656960,#282b26);box-shadow:inset 0 2px rgba(255,255,255,.13),0 3px 4px rgba(0,0,0,.4); }
.trash-lid::before { content:"";position:absolute;left:38%;top:-8px;width:24%;height:8px;border:1px solid #777a72;border-bottom:0;border-radius:5px 5px 0 0;background:#3a3d37; }
.trash-body { position:absolute;z-index:2;left:5%;right:5%;top:18%;bottom:2%;overflow:hidden;border:1px solid #62655e;border-radius:4px 4px 18px 18px;background:linear-gradient(100deg,#242722,#55584f 45%,#1b1e1a);box-shadow:inset 4px 0 rgba(255,255,255,.035),inset -8px -4px rgba(0,0,0,.28);clip-path:polygon(4% 0,96% 0,86% 100%,14% 100%); }
.trash-body i { position:absolute;top:8%;bottom:8%;width:2px;background:rgba(255,255,255,.12);transform:skewX(-3deg); }.trash-body i:nth-child(1){left:31%}.trash-body i:nth-child(2){left:50%}.trash-body i:nth-child(3){left:69%}
.desk-trash.is-trash-target { transform:rotate(2deg) scale(1.12);filter:drop-shadow(0 0 18px var(--orange)) drop-shadow(0 18px 15px rgba(0,0,0,.45)); }
body.inner-mode .desk-trash { opacity:0;pointer-events:none;transform:translate(-60%,30%) rotate(18deg);transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1); }
@media(max-width:1050px){.computer-stage{left:88%}.computer-stage.entered{left:50%}.desk-trash{left:19%;width:78px;height:102px}}
@media(max-width:720px){.desk-trash{display:none}.computer-stage{left:72%}.computer-stage.entered{left:50%}}


/* experience-v13: paper-ball throwing, refined geometry and smoother mode travel */
/* Slower, GPU-friendly travel between home, outside and inside modes. */
.outer-items,.outer-connections { transition:opacity .18s linear,visibility 0s linear; }
body.inner-mode .outer-items,body.inner-mode .outer-connections { transition:opacity .18s linear,visibility 0s linear .18s; }
.retro-os { display:block!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .78s ease,visibility 0s linear .78s; }
body.inner-mode .retro-os { opacity:1;visibility:visible;pointer-events:auto;transition:opacity .88s ease; }
.screen-home { transition:opacity .78s ease; }

/* Outside mode keeps only the monitor, notes and the small bin. */
body.workspace-entered .desk-printer { opacity:0;pointer-events:none;transform:translate(-105%,-48%) rotate(-22deg); }
body.workspace-entered .business-card-layer { opacity:0;pointer-events:none;transform:translate(-24%,18%);transition:opacity .72s ease,transform 1.05s cubic-bezier(.16,1,.3,1); }
body.workspace-entered .computer-tower { opacity:0!important;transform:translateX(95vw)!important;pointer-events:none!important; }
body.workspace-entered .mouse { opacity:0!important;transform:translate(95vw,42vh) perspective(240px) rotateX(42deg)!important;pointer-events:none!important; }

/* The physical desk surface now sits at the printed-card landing height. */
.app::after { content:"";position:absolute;z-index:0;left:0;right:0;top:82%;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.11));border-top:1px solid rgba(238,233,220,.09); }

/* Restrained geometric card: bone paper with small lime and orange accents. */
.business-card { overflow:hidden;background:linear-gradient(135deg,#f2ecdf 0 88%,var(--lime) 88% 100%);border-color:rgba(31,33,29,.24);box-shadow:0 5px 9px rgba(0,0,0,.32); }
.business-card::before { right:10%;top:15%;width:34px;height:34px;border:2px solid var(--orange);border-radius:2px;box-shadow:11px 10px 0 -8px var(--lime);transform:rotate(9deg); }
.business-card::after { opacity:.08;background:repeating-linear-gradient(97deg,transparent 0 3px,rgba(0,0,0,.05) 3px 4px); }
.business-card .card-index { color:#5a5b54;font:600 11px/1.2 var(--sans);letter-spacing:.2em; }
.business-card strong { color:#161814;font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:29px;font-weight:700;letter-spacing:.1em; }
.business-card .card-role { color:#3c3e38;font-family:var(--sans);font-size:12px;letter-spacing:.1em; }
.business-card .card-school { color:#62635c;font-family:var(--sans);font-size:10px;letter-spacing:.09em; }
.business-card.is-card-landing { animation:none!important; }

/* Paper-ball flight and landing are shared by cards and printed documents. */
.business-card.is-ball-flying { transition:none!important;transform:translate(-50%,-50%) rotate(var(--ball-spin)) scale(.96);box-shadow:8px 16px 15px rgba(0,0,0,.35);pointer-events:none; }
.business-card.is-ball-landing { animation:ballLand .62s cubic-bezier(.2,.72,.18,1); }
.business-card.is-swallowed { opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(180deg);transition:opacity .4s,transform .45s cubic-bezier(.3,.7,.2,1)!important; }
@keyframes ballLand { 0%{transform:translate(-50%,-50%) translateY(-18px) scale(1.05)}62%{transform:translate(-50%,-50%) translateY(5px) scale(.93)}82%{transform:translate(-50%,-50%) translateY(-3px) scale(1.02)}100%{transform:translate(-50%,-50%) translateY(0) scale(1)} }

.throw-trajectory { position:absolute;z-index:190;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none;transition:opacity .16s; }
.throw-trajectory.is-visible { opacity:1; }
.throw-trajectory path { fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 9;filter:drop-shadow(0 0 5px rgba(255,90,40,.55)); }
.confetti-layer { position:absolute;z-index:230;inset:0;pointer-events:none;overflow:hidden; }
.confetti-layer i { position:absolute;width:7px;height:11px;background:var(--confetti);animation:confettiBurst 1s cubic-bezier(.12,.72,.18,1) forwards; }
@keyframes confettiBurst { 0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}70%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) rotate(240deg)}100%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy) + 42px)) rotate(420deg)} }

/* Smaller, cleaner bin with two restrained geometric accents. */
.desk-trash { left:42%;top:80%;width:66px;height:86px;transform:rotate(4deg);filter:drop-shadow(0 10px 9px rgba(0,0,0,.36));transition:left 1.05s cubic-bezier(.16,1,.3,1),top 1.05s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),opacity .65s; }
.trash-lid { left:-4%;top:3%;width:108%;height:15%;border-radius:5px;background:linear-gradient(180deg,#62665e,#2c2f2a); }
.trash-body { left:7%;right:7%;top:16%;bottom:1%;border-radius:3px 3px 14px 14px;clip-path:polygon(5% 0,95% 0,85% 100%,15% 100%);background:linear-gradient(100deg,#262923,#50544c 50%,#1c1f1b); }
.trash-body::before { content:"";position:absolute;left:16%;top:25%;width:68%;height:2px;background:var(--lime);box-shadow:0 9px var(--orange);opacity:.72;transform:rotate(-8deg); }
.trash-body i { display:none; }
.desk-trash.is-open .trash-lid { transform:translate(-8px,-10px) rotate(-28deg);transform-origin:8% 50%; }
.desk-trash.is-aimed { filter:drop-shadow(0 0 12px var(--lime)) drop-shadow(0 10px 9px rgba(0,0,0,.4)); }
.desk-trash.is-hit { animation:trashImpact .68s cubic-bezier(.2,.8,.2,1); }
@keyframes trashImpact { 0%,100%{transform:rotate(4deg)}28%{transform:rotate(-8deg) translateY(3px) scale(1.06)}55%{transform:rotate(9deg) translateY(-2px) scale(.97)} }
body.workspace-entered .desk-trash { left:4%;top:78%;width:54px;height:72px;opacity:1;pointer-events:auto;transform:rotate(-3deg); }
body.inner-mode .desk-trash { opacity:0;pointer-events:none;transform:translate(-70%,25%) rotate(16deg); }
.outer-item.is-note-discarding { opacity:0!important;transform:translate(-50%,-50%) scale(.08) rotate(80deg)!important;filter:blur(2px);transition:opacity .45s,transform .5s cubic-bezier(.3,.7,.2,1)!important; }
@media(max-width:720px){.desk-trash{display:none}.throw-trajectory{display:none}}


/* experience-v14: aligned folders, slingshot trajectory and tactile paper */
/* One folder silhouette: tab and body overlap by two pixels with no stray seam. */
.pixel-folder,.folder-entry .pixel-folder { position:relative!important;overflow:visible!important;border:0!important;border-radius:4px 4px 5px 5px!important;background:linear-gradient(180deg,#ffd86b,#efad2b)!important;box-shadow:inset 0 1px rgba(255,255,255,.62),inset 0 -3px rgba(170,101,10,.18),0 2px 3px rgba(0,0,0,.32)!important; }
.pixel-folder::before,.folder-entry .pixel-folder::before { content:""!important;position:absolute!important;z-index:0!important;left:0!important;top:-8px!important;width:20px!important;height:10px!important;border:0!important;border-radius:4px 4px 0 0!important;background:linear-gradient(180deg,#ffdb70,#f4b838)!important;box-shadow:inset 0 1px rgba(255,255,255,.58)!important; }
.pixel-folder::after,.folder-entry .pixel-folder::after { content:""!important;position:absolute!important;z-index:1!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;border-radius:4px 4px 5px 5px!important;background:linear-gradient(175deg,#ffe28a,#f3b32f)!important;box-shadow:inset 0 1px rgba(255,255,255,.55)!important; }

/* The outside workspace brings the tower and mouse back beside the centered monitor. */
body.workspace-entered:not(.inner-mode) .computer-tower { right:1%;top:34%;z-index:4;opacity:1!important;filter:none!important;transform:translateX(0)!important;pointer-events:auto!important;transition:right 1.15s cubic-bezier(.16,1,.3,1),top 1.15s cubic-bezier(.16,1,.3,1),opacity 1s ease,filter 1s ease,transform 1.15s cubic-bezier(.16,1,.3,1)!important; }
body.workspace-entered:not(.inner-mode) .mouse { right:2%;bottom:6%;z-index:4;opacity:1!important;transform:translateX(0) perspective(240px) rotateX(42deg) rotateZ(-6deg)!important;pointer-events:auto!important;transition:opacity 1s ease,transform 1.15s cubic-bezier(.16,1,.3,1)!important; }

/* The print travels in a slow S-curve. Its final transform is committed before the animation is removed. */
.business-card.is-printing-card { transition:none!important; }

/* experience-v15: frame-based paper physics and irregular tactile paper */
/* The two restrained accents are overlapping triangles, never boxes. */
.business-card { background:linear-gradient(135deg,#f2ecdf 0 90%,var(--lime) 90% 100%)!important; }
.business-card::before { left:auto!important;right:3.5%!important;top:auto!important;bottom:7%!important;width:42px!important;height:37px!important;border:0!important;border-radius:0!important;background:var(--orange)!important;clip-path:polygon(100% 0,100% 100%,0 76%);box-shadow:none!important;transform:translate(-10px,-5px) rotate(-7deg)!important;opacity:.83; }
.business-card.is-card-dropping { transition:none!important;pointer-events:none;will-change:left,top,transform; }

.business-card.is-ball-flying,.business-card.is-bin-bouncing { transition:none!important;will-change:left,top,transform;pointer-events:none; }

/* The lid visibly swings toward the left; the ball is animated between lid and body. */
.desk-trash .trash-lid { transition:transform .34s cubic-bezier(.2,.75,.2,1); }
.desk-trash.is-open .trash-lid { transform:translate(-23px,-10px) rotate(-34deg)!important;transform-origin:10% 50%!important; }
.desk-trash.is-hit { animation:trashImpactV2 .98s cubic-bezier(.2,.8,.2,1)!important; }
@keyframes trashImpactV2 { 0%,100%{transform:rotate(4deg)}23%{transform:rotate(-7deg) translateY(2px) scale(1.04)}43%{transform:rotate(6deg) translateY(-2px) scale(.98)}63%{transform:rotate(-4deg) translateY(1px) scale(1.02)}82%{transform:rotate(3deg)} }

/* Outside mode keeps the mouse close to the lower-right edge of the monitor. */
body.workspace-entered:not(.inner-mode) .mouse { right:7%!important;bottom:-1%!important;z-index:6!important; }


/* experience-v16: unified surface, brighter room and consistent motion */
html,body { background:#292d24!important; }
.app { background:radial-gradient(circle at 73% 43%,rgba(215,255,36,.115),transparent 34%),radial-gradient(circle at 16% 61%,rgba(255,90,40,.105),transparent 31%),linear-gradient(135deg,#363a30 0%,#292d24 49%,#20241d 100%)!important; }
.app::after,.computer-stage::after { display:none!important; }
.ambient-grid { opacity:.3!important; }
.app::before { border-color:rgba(238,233,220,.28)!important; }
.monitor-screen { background:#18231e!important;box-shadow:inset 0 0 24px rgba(0,0,0,.28)!important; }
.screen-home { background:radial-gradient(circle at 30% 30%,rgba(125,174,156,.22),transparent 45%),linear-gradient(145deg,#2b3a32,#1c2822)!important; }
.hero-copy h1 { letter-spacing:.012em!important; }

.business-card.is-ball-resting { transition:none!important;animation:none!important; }

/* Folder description and directory are one document with one scrollbar. */
.retro-window__body { overflow:auto!important; }
.folder-description { max-height:none!important;overflow:visible!important;margin-bottom:16px!important; }
.folder-dropzone { min-height:110px!important;padding:0!important;border:0!important;background:transparent!important; }
.folder-dropzone.is-drop-target { background:rgba(215,255,36,.14)!important;box-shadow:inset 0 0 0 2px rgba(31,41,0,.55); }
.folder-entry { padding-left:4px!important;padding-right:4px!important; }


/* experience-v17: camera-focus transition and folded crumple motion */
.masthead nav { transition:opacity .55s ease,transform .75s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s; }
body.inner-mode .masthead nav { opacity:0;visibility:hidden;pointer-events:none;transform:translate(28px,-10px);transition:opacity .42s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s; }

/* Focusing into the screen pushes the foreground paper away from the focal point. */
.outer-items,.outer-connections { transform-origin:50% 50%;transition:opacity .18s linear,visibility 0s linear!important;will-change:auto; }
body.inner-mode .outer-items,body.inner-mode .outer-connections { transform:none!important;opacity:0!important;visibility:hidden!important;filter:none!important;pointer-events:none!important;transition:opacity .18s linear,visibility 0s linear .18s!important; }

/* The physical accessories leave the focal plane slowly instead of snapping away. */
body.inner-mode .computer-tower { transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity 1.42s ease!important; }
body.inner-mode .mouse { transition:transform 1.95s cubic-bezier(.16,1,.3,1),opacity 1.48s ease!important; }

/* experience-v18: slower accessory departure during screen focus */
body.inner-mode .computer-tower { transition:transform 3.2s cubic-bezier(.2,.18,.25,1),opacity 2.2s ease!important; }
body.inner-mode .mouse { transition:transform 3.3s cubic-bezier(.2,.18,.25,1),opacity 2.3s ease!important; }


/* experience-v19: physical card limits, desktop context menu and richer pixel workspace */
.identity { transition:opacity .45s ease,transform .65s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s; }
body.inner-mode .identity { opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s ease,transform .6s ease,visibility 0s linear 0s; }

/* Preserve the outside coordinates while tower and mouse travel straight outward. */
body.inner-mode .computer-tower { right:1%!important;top:34%!important; }
body.inner-mode .mouse { right:7%!important;bottom:-1%!important; }

/* Folder rows use the exact same silhouette and proportions as desktop folders. */
.folder-entry .pixel-folder { width:42px!important;height:34px!important;border:0!important;border-radius:4px 4px 5px 5px!important;background:linear-gradient(180deg,#ffd86b,#efad2b)!important;box-shadow:inset 0 1px rgba(255,255,255,.62),inset 0 -3px rgba(170,101,10,.18),0 2px 3px rgba(0,0,0,.32)!important; }
.folder-entry .pixel-folder::before { left:0!important;top:-8px!important;width:20px!important;height:10px!important;border:0!important;border-radius:4px 4px 0 0!important;background:linear-gradient(180deg,#ffdb70,#f4b838)!important; }
.folder-entry .pixel-folder::after { left:0!important;right:0!important;top:0!important;bottom:0!important;background:linear-gradient(175deg,#ffe28a,#f3b32f)!important; }

/* New items are created from a classic right-click desktop menu. */
body.inner-mode .retro-actions { display:none!important; }
.retro-context-menu[hidden] { display:none!important; }
.retro-context-menu { position:absolute;z-index:1200;width:184px;padding:5px;border:2px outset #e7e2d6;background:#d8d3c7;color:#12140f;box-shadow:8px 10px 0 rgba(0,0,0,.26);font:14px/1.3 var(--pixel); }
.retro-context-menu button { display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:6px 9px;border:0;background:transparent;color:#151711;text-align:left;cursor:pointer; }
.retro-context-menu button:hover,.retro-context-menu button:focus-visible { outline:0;background:#22312a;color:#fff; }
.context-mini-file { width:17px;height:22px;background:#fff;clip-path:polygon(0 0,72% 0,100% 25%,100% 100%,0 100%);box-shadow:1px 2px 0 rgba(0,0,0,.28); }
.context-mini-folder { position:relative;width:24px;height:18px;border-radius:2px;background:linear-gradient(#ffe083,#efb233);box-shadow:1px 2px 0 rgba(0,0,0,.28); }
.context-mini-folder::before { content:"";position:absolute;left:0;top:-5px;width:10px;height:6px;border-radius:2px 2px 0 0;background:#ffd769; }

/* A deeper sage desktop with restrained lime/orange pixel geometry. */
body.inner-mode .retro-os { background:#526b61!important; }
body.inner-mode .retro-wallpaper { opacity:1!important;filter:none!important;transform:none!important;background:radial-gradient(circle at 78% 23%,rgba(255,111,63,.28) 0 7%,transparent 7.5%),radial-gradient(circle at 25% 76%,rgba(215,255,36,.16) 0 11%,transparent 11.5%),linear-gradient(145deg,#819b8f 0%,#647f73 43%,#465f56 100%)!important; }
body.inner-mode .retro-wallpaper::before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(120deg,rgba(0,0,0,.65),transparent 72%); }
body.inner-mode .retro-wallpaper::after { content:""!important;position:absolute;right:10%;top:16%;width:118px;height:118px;border:1px solid rgba(215,255,36,.34);border-radius:0;transform:rotate(18deg);background:transparent!important;filter:none!important;box-shadow:34px 28px 0 -31px var(--orange),-27px 42px 0 -25px rgba(215,255,36,.7); }


/* experience-v20: pixel printer app, inline desktop creation and physical documents */
.system-printer-icon { appearance:none;border:1px solid transparent;background:transparent;color:#fff;font-family:var(--pixel);cursor:pointer; }
.system-printer-icon:hover,.system-printer-icon:focus-visible { border-color:var(--lime);background:rgba(215,255,36,.1);outline:0; }
.pixel-printer-icon { position:relative!important;width:48px!important;height:34px!important;border:1px solid #1d211b!important;border-radius:3px!important;background:linear-gradient(180deg,#e9e4d9 0 27%,#777c72 28% 70%,#343832 71%)!important;box-shadow:inset 2px 2px rgba(255,255,255,.5),inset -3px -3px rgba(0,0,0,.22),3px 4px 2px rgba(0,0,0,.34)!important;clip-path:none!important; }
.pixel-printer-icon::before { content:""!important;position:absolute!important;left:7px!important;right:7px!important;top:-9px!important;width:auto!important;height:14px!important;border:1px solid #777!important;border-radius:1px!important;background:#f7f4eb!important;box-shadow:none!important; }
.pixel-printer-icon::after { content:""!important;position:absolute!important;left:9px!important;right:9px!important;bottom:-8px!important;height:13px!important;border:1px solid #aaa69d!important;background:linear-gradient(#fff,#ddd9cf)!important;clip-path:none!important; }
.pixel-printer-icon i { position:absolute;z-index:3;right:7px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 5px var(--lime); }
.desktop-inline-name { position:relative;z-index:20;width:112px;margin-top:-2px;padding:3px 4px;border:1px solid #111;background:#fff;color:#111;font:14px/1.25 var(--pixel);text-align:center;outline:2px solid var(--lime);outline-offset:1px; }

.printer-app { display:flex;min-height:100%;flex-direction:column;color:#20231d; }
.printer-app__head { display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px;align-items:center;padding:17px 18px;border:1px solid #87877e;background:linear-gradient(135deg,#eee9dd,#d4d0c4); }
.printer-app__head small { color:#5a5d54;font-size:10px;letter-spacing:.16em; }
.printer-app__head h2 { margin:5px 0 4px!important;font-size:22px!important;letter-spacing:.02em!important; }
.printer-app__head p { margin:0;font-size:13px; }
.printer-app__glyph { position:relative;width:78px;height:57px;border:2px outset #ded9cc;border-radius:4px;background:linear-gradient(#777c72 0 26%,#353932 27% 78%,#181b17 79%);box-shadow:7px 8px 0 rgba(0,0,0,.2); }
.printer-app__glyph::before { content:"";position:absolute;left:13px;right:13px;top:-14px;height:25px;border:1px solid #999;background:#fbf9f2; }
.printer-app__glyph::after { content:"";position:absolute;left:15px;right:15px;bottom:-12px;height:23px;border:1px solid #aaa;background:#fff; }
.printer-app__glyph i { position:absolute;right:11px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 7px #8cad00; }
.printer-file-list { display:flex;flex:1;flex-direction:column;margin-top:14px;border-top:1px solid #8d8a80; }
.printer-file-row { display:grid;grid-template-columns:24px 48px minmax(0,1fr);align-items:center;gap:11px;min-height:68px;padding:8px 12px;border-bottom:1px dotted #8c887e;cursor:pointer; }
.printer-file-row:hover { background:rgba(215,255,36,.17); }
.printer-file-row input { width:17px;height:17px;accent-color:#708800; }
.printer-file-row .pixel-file { transform:scale(.76);transform-origin:center; }
.printer-file-row b,.printer-file-row small { display:block; }
.printer-file-row b { font-size:15px; }
.printer-file-row small { margin-top:3px;color:#66685f;font-size:9px;letter-spacing:.12em; }
.printer-app__footer { display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding:11px 12px;border:1px solid #85857b;background:#c6c2b7;font-size:10px; }
.printer-app__footer button { padding:9px 14px;border:2px outset #ece8dc;background:#d7ff24;color:#161812;font:700 12px var(--pixel);cursor:pointer; }
.printer-app__footer button:active { border-style:inset; }
.printer-app__footer button:disabled { filter:grayscale(1);opacity:.5;cursor:not-allowed; }
.printer-empty { padding:34px;text-align:center;color:#666; }

.printed-document { position:absolute;width:220px;height:300px;padding:22px 20px 24px;overflow:hidden;border:1px solid rgba(46,48,43,.25);border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,.025),transparent 4%),#faf8f1;color:#24251f;box-shadow:0 8px 15px rgba(0,0,0,.38);transform:translate(-50%,-50%) perspective(700px) rotateX(28deg) rotateZ(var(--document-rotation));transform-origin:50% 55%;pointer-events:none; }
.printed-document::before { content:"";position:absolute;right:13px;top:13px;width:31px;height:25px;background:linear-gradient(145deg,var(--lime) 0 50%,transparent 51%),linear-gradient(35deg,var(--orange) 0 34%,transparent 35%);opacity:.7; }
.printed-document::after { content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(43,44,39,.025) 6px); }
.printed-document__meta { position:relative;z-index:1;font:8px var(--pixel);letter-spacing:.14em;color:#777970; }
.printed-document h2 { position:relative;z-index:1;margin:13px 0 16px;padding-bottom:10px;border-bottom:2px solid #22251f;font:700 22px/1.2 "Noto Serif SC","Songti SC",serif; }
.printed-document__content { position:relative;z-index:1;max-height:190px;overflow:hidden;font:9px/1.55 var(--sans); }
.printed-document__content h1,.printed-document__content h2,.printed-document__content h3 { margin:8px 0 4px;padding:0;border:0;background:none;color:#222;font:700 11px/1.35 var(--sans); }
.printed-document__content p,.printed-document__content blockquote,.printed-document__content ul,.printed-document__content ol { margin:4px 0;font-size:9px;line-height:1.5; }
.printed-document__content blockquote { padding-left:7px;border-left:2px solid var(--orange); }
.printed-document > small { position:absolute;z-index:2;right:15px;bottom:12px;font:7px var(--pixel);letter-spacing:.14em;color:#777; }
.printed-document.is-printing-document { transition:none!important; }
.printed-document.is-printed-document { transform:translate(-50%,-50%) perspective(700px) rotateX(28deg) rotateZ(var(--document-rotation)); }
body.workspace-entered .printed-document { pointer-events:none; }

/* experience-v21: printed files share the tactile paper system */
[data-system-app="printer"] .retro-window__body { overflow:hidden!important; }
.printer-app { height:100%;min-height:0;overflow:hidden; }
.printer-file-list { min-height:0;overflow:auto;overscroll-behavior:contain; }
.printer-app__footer { position:sticky;z-index:8;bottom:0;flex:0 0 auto;margin-top:0;box-shadow:0 -8px 18px rgba(31,32,27,.14); }

/* Printed documents deliberately use neutral ink: no orange status tag. */
.printed-document { --paper-ink:#252720;--paper-fold:#d7ff24; }
.printed-document::before { background:linear-gradient(145deg,var(--paper-fold) 0 50%,transparent 51%),linear-gradient(35deg,#c9c7bd 0 34%,transparent 35%); }
.printed-document__content blockquote { border-left-color:#92968a; }
.printed-document .md-tag { border:1px solid #aaa99f!important;background:#e9e6dc!important;color:#35372f!important; }
.printed-document.is-printed-document { pointer-events:auto;cursor:grab; }
.printed-document.is-dragging-card { z-index:10000;cursor:grabbing;transition:none!important;transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(calc(var(--document-rotation) + var(--drag-tilt,0deg))) scale(1.025);box-shadow:0 25px 28px rgba(0,0,0,.43); }
.printed-document.is-card-dropping { pointer-events:none;transition:none!important; }
.printed-document.is-ball-flying,.printed-document.is-bin-bouncing { transition:none!important;will-change:left,top,transform;pointer-events:none; }
.printed-document.is-ball-resting { transition:none!important;animation:none!important; }
body.workspace-entered .printed-document.is-paper-ball,body.workspace-entered .printed-document.is-dragging-card { pointer-events:auto; }
/* experience-v22: larger snap-grid desktop and expressive printed paper */
.custom-inner-icon,.system-printer-icon {
  width:142px!important;
  gap:15px!important;
  font-size:18px!important;
  line-height:1.35!important;
  letter-spacing:.01em;
  text-align:center;
}
.custom-inner-icon { transition:left .32s cubic-bezier(.2,.86,.2,1),top .32s cubic-bezier(.2,.86,.2,1),filter .2s ease; }
.custom-inner-icon.is-dragging { transition:none!important; }
.custom-inner-icon.is-snapping { filter:drop-shadow(0 8px 7px rgba(0,0,0,.32)); }
.custom-inner-icon > .pixel-folder { width:56px!important;height:45px!important;border-radius:5px 5px 6px 6px!important; }
.custom-inner-icon > .pixel-folder::before { top:-10px!important;left:3px!important;width:25px!important;height:12px!important;border-radius:4px 4px 0 0!important; }
.custom-inner-icon > .pixel-file { width:43px!important;height:56px!important; }
.system-printer-icon > .pixel-printer-icon { width:64px!important;height:47px!important;border-radius:5px!important; }
.system-printer-icon > .pixel-printer-icon::before { left:10px!important;right:10px!important;top:-13px!important;height:31px!important; }
.system-printer-icon > .pixel-printer-icon::after { left:12px!important;right:12px!important;bottom:-11px!important;height:18px!important; }
.system-printer-icon > .pixel-printer-icon i { right:9px;top:16px;width:7px;height:7px; }
.desktop-inline-name { width:132px;font-size:17px; }

/* Editorial paper layout: warm stock, black type and two restrained signal colours. */
.printed-document {
  border-color:rgba(49,48,42,.33);
  background:
    linear-gradient(90deg,rgba(255,255,255,.5),transparent 6%),
    linear-gradient(180deg,#fcfaf3,#f2eee3);
  box-shadow:inset 4px 0 0 rgba(255,90,40,.78),inset 0 -1px rgba(38,40,34,.08),0 9px 17px rgba(0,0,0,.4);
}
.printed-document::before {
  right:12px;top:12px;width:42px;height:34px;opacity:.88;
  background:
    linear-gradient(145deg,var(--lime) 0 48%,transparent 49%),
    linear-gradient(35deg,transparent 0 35%,var(--orange) 36% 68%,transparent 69%);
  transform:rotate(2deg);
}
.printed-document__meta { color:#d84927;font-size:8px;letter-spacing:.18em; }
.printed-document > h2 { margin-top:12px;padding:0 46px 11px 0;border-bottom:2px solid #282a24;font-size:21px;line-height:1.12;letter-spacing:.025em; }
.printed-document__content { max-height:194px;color:#34352f;font-size:9px;line-height:1.58; }
.printed-document__content h1,.printed-document__content h2,.printed-document__content h3 {
  margin:8px 0 5px!important;padding:4px 6px!important;border:0!important;border-left:3px solid var(--orange)!important;
  background:#272a24!important;color:#eef0e8!important;font-size:10px!important;letter-spacing:.04em;
}
.printed-document__content blockquote { margin:6px 0;padding:5px 7px;border-left:3px solid var(--orange);background:rgba(255,90,40,.07); }
.printed-document__content li::marker { color:#d84d2b; }
.printed-document .md-tag { border-color:#a1b92b!important;background:rgba(215,255,36,.25)!important;color:#34372d!important; }
.printed-document > small { color:#d84d2b; }

@media (max-width:720px) {
  .custom-inner-icon,.system-printer-icon { width:78px!important;gap:8px!important;font-size:12px!important; }
  .custom-inner-icon > .pixel-folder { width:39px!important;height:32px!important; }
  .custom-inner-icon > .pixel-folder::before { top:-8px!important;width:21px!important;height:10px!important; }
  .custom-inner-icon > .pixel-file { width:31px!important;height:41px!important; }
  .system-printer-icon > .pixel-printer-icon { width:45px!important;height:34px!important; }
}
/* experience-v23: quieter print labels */
.printed-document::before { right:13px;top:13px;width:30px;height:23px; }
.printed-document__meta { font-size:6.5px;letter-spacing:.16em; }
.printed-document > h2 { padding-right:36px; }
.printed-document .md-tag { padding:1px 4px!important;font-size:6.5px!important;letter-spacing:.08em!important; }
.printed-document > small { font-size:6px;letter-spacing:.11em; }
/* experience-v24: paged physical printing */
.print-measure { position:fixed!important;left:-9999px!important;top:0!important;visibility:hidden!important;transform:none!important;clip-path:none!important;pointer-events:none!important; }
.print-measure .printed-document__content { height:194px!important;max-height:none!important;overflow:auto!important; }
.printer-page-summary { display:flex;flex-direction:column;gap:3px; }
.printer-page-summary b { font:700 13px var(--pixel);color:#25281f; }
.printer-page-summary small { color:#5e6157;font-size:9px;letter-spacing:.08em; }
.desk-printer.is-printing .printer-controls i { background:var(--lime)!important;box-shadow:0 0 8px rgba(215,255,36,.9),inset 1px 1px rgba(255,255,255,.35)!important; }
.printed-document.is-long-document::before { display:none!important; }
.printed-document.is-long-document > h2 { margin-top:5px;padding-right:0; }
.printed-document.is-long-document .printed-document__content { max-height:210px; }
/* experience-v25: aligned desktop cells and firework ribbons */
.custom-inner-icon,.system-printer-icon { height:130px!important;box-sizing:border-box;justify-content:flex-start; }
.custom-inner-icon > .pixel-file { margin:0; }
.custom-inner-icon > .pixel-folder { margin:10px 0 1px; }
.system-printer-icon > .pixel-printer-icon { margin:13px 0 -4px; }
.custom-inner-icon > span:last-child,.system-printer-icon > span:last-child { margin-top:0; }

.confetti-layer i {
  width:4px;height:20px;
  border-radius:1px;
  box-shadow:0 1px 2px rgba(0,0,0,.22);
  transform-origin:50% 50%;
  animation-name:confettiFirework;
  animation-timing-function:cubic-bezier(.16,.7,.22,1);
  animation-fill-mode:forwards;
}
@keyframes confettiFirework {
  0% { opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(0deg); }
  7% { opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(24deg); }
  38% { opacity:1;transform:translate(calc(-50% + var(--burst-x-mid)),calc(-50% + var(--burst-y-mid))) rotate(calc(var(--spin)*.42)); }
  54% { opacity:1;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) rotate(calc(var(--spin)*.61)); }
  76% { opacity:.94;transform:translate(calc(-50% + var(--drift-x-mid)),calc(-50% + var(--drift-y-mid))) rotate(calc(var(--spin)*.82)); }
  100% { opacity:0;transform:translate(calc(-50% + var(--fall-x)),calc(-50% + var(--fall-y))) rotate(var(--spin)); }
}
@media (max-width:720px) {
  .custom-inner-icon,.system-printer-icon { height:72px!important; }
  .custom-inner-icon > .pixel-folder { margin:8px 0 1px; }
  .system-printer-icon > .pixel-printer-icon { margin:13px 0 -6px; }
}
/* experience-v26: gravity-driven ribbons */
.confetti-layer i { animation:none;box-shadow:0 2px 3px rgba(0,0,0,.3);will-change:transform,opacity; }
/* experience-v28: desktop-native scale and a complete monitor silhouette */
/* The former frame was only a decorative line; removing it keeps the composition open. */
.app::before { display:none!important; }

@media (min-width:901px) {
  /* Reduce the physical scene without changing browser zoom or typography. */
  .computer-stage,
  .computer-stage.entered {
    width:min(101vw,1602px);
    height:min(75.6vh,756px);
  }

  .monitor-wrap,
  body:not(.workspace-entered) .monitor-wrap,
  body.workspace-entered:not(.inner-mode) .monitor-wrap {
    width:min(68.4vw,1098px);
  }

  body.inner-mode .computer-stage {
    width:min(90vw,1512px);
    height:min(86.4vh,810px);
  }

  body.inner-mode .monitor-wrap {
    width:min(77.4vw,1242px);
  }

  /* Paper, printer and bin share the same roughly ten-percent reduction. */
  .outer-item {
    width:148px;
    min-height:135px;
  }

  .outer-item.has-media {
    width:184px;
    min-height:220px;
  }

  .sticky-media {
    height:104px;
    margin:12px 12px 0;
  }

  .desk-printer {
    width:clamp(171px,11.88vw,225px);
  }

  .desk-trash {
    width:59px;
    height:77px;
  }

  body.workspace-entered .desk-trash {
    width:49px;
    height:65px;
  }
}

/* experience-v29: balanced desktop scale and three-line statement */
@media (min-width:901px) {
  .hero-copy h1 {
    font-size:clamp(66px,6.6vw,120px);
    line-height:.84;
  }

  .computer-stage,
  .computer-stage.entered {
    width:min(104vw,1660px);
    height:min(79vh,790px);
  }

  .monitor-wrap,
  body:not(.workspace-entered) .monitor-wrap,
  body.workspace-entered:not(.inner-mode) .monitor-wrap {
    top:2%;
    width:min(82vw,118.5vh,1390px);
  }

  body.inner-mode .computer-stage {
    top:2vh;
    width:min(94vw,1580px);
    height:min(90vh,850px);
  }

  body.inner-mode .monitor-wrap {
    top:max(3%,calc(50vh - 510px));
    width:min(84vw,128vh,1390px);
  }

  .desk-trash {
    width:64px;
    height:84px;
  }

  body.workspace-entered .desk-trash {
    width:52px;
    height:69px;
  }
}

/* experience-v30: landscape notes and one-piece desktop folders */
@media (min-width:901px) {
  .outer-item {
    width:210px;
    min-height:184px;
  }

  .outer-item.has-media {
    width:228px;
    min-height:200px;
  }

  .outer-item.has-media .sticky-media {
    height:86px;
    margin:11px 11px 0;
  }
}

.custom-inner-icon[data-kind="folder"] > .pixel-folder {
  position:relative!important;
  width:56px!important;
  height:45px!important;
  margin:10px 0 1px!important;
  border-radius:5px 5px 6px 6px!important;
}

.custom-inner-icon[data-kind="folder"] > .pixel-folder::before {
  z-index:0!important;
  left:0!important;
  top:-10px!important;
  width:28px!important;
  height:12px!important;
  border-radius:4px 4px 0 0!important;
}

.custom-inner-icon[data-kind="folder"] > .pixel-folder::after {
  z-index:1!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:5px 5px 6px 6px!important;
}

/* experience-v31: persistent print accents and click hierarchy */
.printed-document:not(.is-paper-ball) {
  box-shadow:
    inset 5px 0 0 var(--orange),
    inset 0 -1px rgba(38,40,34,.08),
    0 9px 17px rgba(0,0,0,.4)!important;
}

.printed-document.is-dragging-card:not(.is-paper-ball) {
  transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(calc(var(--document-rotation) + var(--drag-tilt,0deg))) scale(.74)!important;
  box-shadow:
    inset 5px 0 0 var(--orange),
    inset 0 -1px rgba(38,40,34,.08),
    0 25px 28px rgba(0,0,0,.43)!important;
}

.printed-document:not(.is-paper-ball)::before,
.printed-document.is-long-document:not(.is-paper-ball)::before {
  display:block!important;
  right:12px!important;
  top:12px!important;
  width:38px!important;
  height:30px!important;
  opacity:.94!important;
  background:
    linear-gradient(145deg,var(--lime) 0 52%,transparent 53%),
    linear-gradient(35deg,transparent 0 38%,var(--orange) 39% 72%,transparent 73%)!important;
}

.printed-document.is-printed-document:not(.is-paper-ball):not(.is-expanded):not(.is-dragging-card):not(.is-card-dropping):not(.is-crumpling) {
  transform:translate(-50%,-50%) perspective(700px) rotateX(28deg) rotateZ(var(--document-rotation)) scale(.72)!important;
}

.printed-document.is-expanded:not(.is-paper-ball) {
  z-index:12000!important;
  cursor:zoom-out!important;
  transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateZ(0) scale(1.48)!important;
  box-shadow:
    inset 5px 0 0 var(--orange),
    0 34px 70px rgba(0,0,0,.62)!important;
}

.business-card.is-expanded:not(.is-paper-ball) { cursor:zoom-out!important; }
.business-card:not(.is-paper-ball):not(.is-expanded) { cursor:pointer; }

/* experience-v32: centered paper focus with click-away return */
.business-card-layer.is-paper-focus-mode {
  z-index:500!important;
}

.paper-focus-backdrop {
  position:absolute;
  z-index:11900;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(16,18,14,.34);
  backdrop-filter:blur(3px);
  cursor:zoom-out;
  pointer-events:auto;
  animation:paperFocusFade .28s ease both;
}

@keyframes paperFocusFade {
  from { opacity:0; }
  to { opacity:1; }
}

.throwable-paper:not(.is-paper-ball):not(.is-printing-card):not(.is-printing-document):not(.is-dragging-card):not(.is-card-dropping) {
  transition:left .48s cubic-bezier(.16,1,.3,1),top .48s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1),box-shadow .4s ease!important;
}

.business-card.is-expanded:not(.is-paper-ball),
.printed-document.is-expanded:not(.is-paper-ball) {
  pointer-events:auto!important;
}

.business-card.is-expanded:not(.is-paper-ball),
.printed-document.is-expanded:not(.is-paper-ball) {
  transform-origin:50% 50%!important;
}


/* experience-v34: quieter type scale and switchable terminal desktop */
@media (min-width:901px) {
  .outer-item {
    width:198px;
    min-height:172px;
  }
  .outer-item.has-media {
    width:214px;
    min-height:188px;
  }
  .outer-item.has-media .sticky-media {
    height:80px;
    margin:10px 10px 0;
  }
  .sticky-copy { padding:17px 16px 47px; }
  .outer-item h3 { font-size:16.5px;line-height:1.32; }
  .outer-item p { font-size:14px;line-height:1.55; }
  .outer-item small { left:16px;bottom:13px;font-size:9px;line-height:1.3; }

  .custom-inner-icon,.system-printer-icon {
    width:132px!important;
    height:120px!important;
    gap:12px!important;
    font-size:16.5px!important;
  }
  .custom-inner-icon > .pixel-folder {
    width:52px!important;
    height:42px!important;
    margin-top:9px!important;
  }
  .custom-inner-icon > .pixel-folder::before {
    top:-9px!important;
    width:26px!important;
    height:11px!important;
  }
  .custom-inner-icon > .pixel-file { width:40px!important;height:52px!important; }
  .system-printer-icon > .pixel-printer-icon { width:59px!important;height:44px!important; }
}

.retro-window__bar { font-size:12px; }
.retro-window__body { padding:18px 20px;font-size:14px;line-height:1.68; }
.retro-window__status { font-size:9px; }
.window-file-tools { font-size:11px; }
.window-file-tools button,.folder-entry__actions button { font-size:11px; }
.markdown-view blockquote,.markdown-view p { font-size:14px;line-height:1.68; }
.markdown-view h1,.markdown-view h2,.markdown-view h3 { font-size:13px!important;line-height:1.45!important; }
.markdown-view ul,.markdown-view ol { font-size:13px;line-height:1.65; }
.folder-entry { min-height:70px!important;padding:9px 10px!important; }
.folder-entry__label b { font-size:15px;line-height:1.4; }
.folder-entry__label small { font-size:10px!important; }
.item-dialog header h2 { font-size:32px; }
.item-dialog label,.item-dialog .color-field,.item-dialog .note-media-row,.item-dialog .doodle-heading { font-size:14px; }
.item-dialog input[type="text"],.item-dialog input:not([type]),.item-dialog textarea { font-size:16px; }
.item-dialog .media-upload,.item-dialog .media-ghost,.item-dialog footer button { font-size:14px; }

body.code-desktop-mode .monitor-screen {
  background:#020704!important;
  box-shadow:inset 0 0 38px rgba(0,0,0,.78),inset 0 0 4px rgba(163,255,89,.18)!important;
}
body.code-desktop-mode .screen-home,
body.code-desktop-mode .retro-os {
  background:
    radial-gradient(circle at 78% 18%,rgba(215,255,36,.055),transparent 28%),
    repeating-linear-gradient(0deg,rgba(121,255,105,.022) 0 1px,transparent 1px 4px),
    #030805!important;
  color:#b8ff9b;
}
body.code-desktop-mode .screen-grid {
  opacity:.32;
  background-image:linear-gradient(rgba(121,255,105,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(121,255,105,.1) 1px,transparent 1px);
}
body.code-desktop-mode .retro-wallpaper {
  opacity:.14;
  filter:hue-rotate(36deg) saturate(1.8);
}
body.code-desktop-mode .retro-topbar {
  border-bottom-color:rgba(140,255,105,.36);
  background:rgba(0,12,5,.8);
  color:#a6ff7b;
  text-shadow:0 0 8px rgba(121,255,105,.42);
}
body.code-desktop-mode .retro-topbar span:first-child::before { content:"> root@kong-mile:~/desktop  ";color:var(--lime); }
body.code-desktop-mode .desktop-intro .pixel-kicker,
body.code-desktop-mode .desktop-intro strong { color:#c7ffad; }
body.code-desktop-mode .desktop-intro small { color:rgba(184,255,155,.58); }

body.code-desktop-mode .custom-inner-icon,
body.code-desktop-mode .system-printer-icon {
  width:166px!important;
  height:67px!important;
  padding:10px 12px!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:3px!important;
  border:1px solid rgba(137,255,101,.3)!important;
  border-radius:3px;
  background:linear-gradient(100deg,rgba(32,73,36,.34),rgba(3,12,6,.84))!important;
  color:#d9ffd0!important;
  font-family:var(--pixel)!important;
  text-align:left!important;
  text-shadow:none!important;
  box-shadow:inset 3px 0 0 rgba(215,255,36,.7),0 7px 18px rgba(0,0,0,.28);
}
body.code-desktop-mode .custom-inner-icon:hover,
body.code-desktop-mode .custom-inner-icon:focus,
body.code-desktop-mode .system-printer-icon:hover,
body.code-desktop-mode .system-printer-icon:focus {
  border-color:var(--lime)!important;
  background:rgba(42,91,41,.58)!important;
  box-shadow:inset 3px 0 0 var(--orange),0 0 16px rgba(179,255,82,.18);
}
body.code-desktop-mode .custom-inner-icon > .pixel-icon,
body.code-desktop-mode .system-printer-icon > .pixel-icon { display:none!important; }
body.code-desktop-mode .custom-inner-icon::before,
body.code-desktop-mode .system-printer-icon::before {
  display:block;
  color:#86ff65;
  font:10px/1.2 var(--pixel);
  letter-spacing:.06em;
}
body.code-desktop-mode .custom-inner-icon[data-kind="folder"]::before { content:"> [DIR]  可打开文件夹"; }
body.code-desktop-mode .custom-inner-icon[data-kind="file"]::before { content:"> [MD]   可阅读文件"; }
body.code-desktop-mode .system-printer-icon::before { content:"> [SYS]  输出设备"; }
body.code-desktop-mode .custom-inner-icon > span:last-child,
body.code-desktop-mode .system-printer-icon > span:last-child {
  width:100%;
  margin:0!important;
  overflow:hidden;
  color:#eef9e9;
  font:13px/1.4 var(--pixel);
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.code-desktop-mode .custom-inner-icon[data-kind="folder"] > span:last-child::after { content:" /";color:var(--lime); }

body.code-desktop-mode .desktop-icon {
  border:1px solid rgba(137,255,101,.28);
  border-radius:2px;
  background:rgba(2,12,5,.66);
  color:#d9ffd0;
  text-shadow:none;
}
body.code-desktop-mode .desktop-icon .pixel-icon { display:none!important; }
body.code-desktop-mode .desktop-icon::before { color:#86ff65;font:9px var(--pixel); }
body.code-desktop-mode .desktop-icon[data-kind="folder"]::before { content:"> [DIR] 可打开文件夹"; }
body.code-desktop-mode .desktop-icon[data-kind="file"]::before { content:"> [MD] 可阅读文件"; }
body.code-desktop-mode .desktop-icon > span:last-child { font-family:var(--pixel);font-size:12px!important; }

body.code-desktop-mode .retro-window:not([data-system-app]) {
  border-color:#17271a;
  background:#071009;
  color:#cbf9be;
  box-shadow:6px 7px 0 rgba(0,0,0,.62),0 0 0 1px rgba(134,255,101,.42);
}
body.code-desktop-mode .retro-window:not([data-system-app]) .retro-window__bar {
  background:linear-gradient(90deg,#07150a,#173019);
  color:#baff9f;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .retro-window__body {
  background:repeating-linear-gradient(0deg,rgba(130,255,99,.025) 0 1px,transparent 1px 4px),#050b06;
  color:#cbe9c3;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .retro-window__status,
body.code-desktop-mode .retro-window:not([data-system-app]) .window-file-tools {
  border-color:rgba(135,255,102,.2);
  background:#09130b;
  color:#8eff6c;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .window-file-tools button {
  border-color:rgba(135,255,102,.42);
  background:#0c1c0f;
  color:#baff9f;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .markdown-view blockquote {
  border-color:rgba(135,255,102,.28);
  background:#0a150c;
  color:#d8ead3;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .markdown-view h1,
body.code-desktop-mode .retro-window:not([data-system-app]) .markdown-view h2,
body.code-desktop-mode .retro-window:not([data-system-app]) .markdown-view h3 {
  background:#0c1c0f!important;
  color:#a8ff87!important;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .folder-entry {
  position:relative;
  grid-template-columns:66px minmax(0,1fr)!important;
  border-bottom:1px solid rgba(135,255,102,.16);
  color:#d4f0cc;
}
body.code-desktop-mode .retro-window:not([data-system-app]) .folder-entry > .pixel-icon { display:none!important; }
body.code-desktop-mode .retro-window:not([data-system-app]) .folder-entry::before {
  color:#83ff63;
  font:10px var(--pixel);
}
body.code-desktop-mode .retro-window:not([data-system-app]) .folder-entry[data-kind="folder"]::before { content:"[DIR]"; }
body.code-desktop-mode .retro-window:not([data-system-app]) .folder-entry[data-kind="file"]::before { content:"[MD]"; }
body.code-desktop-mode .retro-window:not([data-system-app]) .folder-entry__label small { color:rgba(172,255,147,.5); }

body.code-desktop-mode .tower-power {
  background:var(--lime);
  box-shadow:0 0 0 1px #111,0 0 14px rgba(215,255,36,.88);
}
.desktop-mode-switching .monitor-screen::after {
  opacity:0;
  background:var(--lime);
  animation:desktopModeFlash .52s ease both;
}
@keyframes desktopModeFlash {
  0%,100% { opacity:0; }
  42% { opacity:.2; }
  58% { opacity:.08; }
}
/* experience-v35: interactive terminal tree instead of code-themed icon cards */
.code-desktop-tree { display:none; }
body.code-desktop-mode #customInnerItems { display:none; }
body.code-desktop-mode .code-desktop-tree {
  position:absolute;
  inset:4% 5% 5%;
  z-index:6;
  display:block;
  overflow:auto;
  padding:20px 24px 34px;
  border:1px solid rgba(111,255,93,.2);
  border-radius:2px;
  background:
    repeating-linear-gradient(0deg,rgba(93,255,76,.027) 0 1px,transparent 1px 4px),
    linear-gradient(105deg,rgba(0,20,6,.96),rgba(0,6,2,.98));
  color:#baff9e;
  box-shadow:inset 0 0 34px rgba(0,0,0,.68),0 12px 30px rgba(0,0,0,.2);
  font-family:var(--pixel);
  text-shadow:0 0 7px rgba(92,255,76,.2);
}
.code-desktop-tree > header {
  padding-bottom:10px;
  border-bottom:1px solid rgba(111,255,93,.2);
  color:#81ff67;
  font-size:13px;
  line-height:1.5;
}
.code-desktop-tree > header span { color:#d7ff24; }
.code-desktop-tree > header b { color:#73cfff;font-weight:600; }
.code-tree-help { margin:10px 0 15px;color:rgba(180,255,158,.48);font:10px/1.55 var(--pixel); }
.code-tree-root { display:flex;flex-direction:column;gap:2px; }
.code-tree-branch { display:flex;flex-direction:column;gap:2px; }
.code-tree-node { position:relative;padding-left:calc(var(--tree-depth,0) * 22px); }
.code-tree-node::before {
  content:"";
  position:absolute;
  left:calc(var(--tree-depth,0) * 22px + 7px);
  top:-3px;
  bottom:-3px;
  border-left:1px dotted rgba(111,255,93,.16);
}
.code-tree-toggle,.code-tree-printer {
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  min-height:40px;
  padding:7px 10px;
  grid-template-columns:22px 52px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:#d6f5cf;
  font-family:var(--pixel);
  text-align:left;
  cursor:pointer;
}
.code-tree-toggle:hover,.code-tree-toggle:focus-visible,.code-tree-printer:hover,.code-tree-printer:focus-visible {
  outline:1px solid rgba(139,255,104,.42);
  background:rgba(78,145,67,.16);
}
.code-tree-caret { color:#d7ff24;font-size:18px;transition:transform .24s ease;transform-origin:45% 52%; }
.code-tree-node.is-folder.is-open > .code-tree-toggle .code-tree-caret { transform:rotate(90deg); }
.code-tree-type { color:#70e4ff;font-size:10px;letter-spacing:.04em; }
.code-tree-node.is-file .code-tree-type { color:#ff7957; }
.code-tree-name { overflow:hidden;color:#c5ffb4;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap; }
.code-tree-node.is-file .code-tree-name { color:#e3eee0; }
.code-tree-action { color:rgba(190,255,173,.35);font-size:8px;letter-spacing:.08em; }
.code-tree-node.is-open > .code-tree-toggle { background:rgba(75,141,65,.12); }
.code-tree-node > .code-tree-branch {
  margin:1px 0 5px 17px;
  padding-left:5px;
  border-left:1px solid rgba(111,255,93,.14);
  animation:terminalBranchOpen .3s cubic-bezier(.16,.8,.2,1) both;
}
.code-file-content {
  margin:2px 10px 10px 82px;
  padding:13px 15px 15px;
  overflow:hidden;
  border-left:2px solid rgba(215,255,36,.62);
  background:rgba(0,0,0,.42);
  color:#c9dfc3;
  font-family:var(--sans);
  text-shadow:none;
  animation:terminalBranchOpen .32s cubic-bezier(.16,.8,.2,1) both;
}
.code-file-command { margin:-2px 0 11px;color:#74ff65;font:10px/1.5 var(--pixel); }
.code-file-content blockquote { margin:0 0 12px;padding:10px 12px;border:1px solid rgba(112,255,90,.2);background:rgba(57,105,50,.12);color:#d7ead2;font-size:13px;line-height:1.65; }
.code-file-content h1,.code-file-content h2,.code-file-content h3 { margin:13px 0 7px!important;padding:6px 8px!important;border-left:2px solid var(--orange)!important;background:rgba(35,74,36,.28)!important;color:#a9ff90!important;font:12px/1.45 var(--pixel)!important; }
.code-file-content p { margin:7px 0;color:#d6e5d2;font-size:13px;line-height:1.68; }
.code-file-content ul,.code-file-content ol { margin:7px 0;padding-left:22px;color:#d6e5d2;font-size:12px;line-height:1.65; }
.code-file-content .md-tag { padding:2px 5px;background:rgba(255,90,40,.84);font-size:9px; }
.code-tree-printer { margin-top:6px;grid-template-columns:22px 52px minmax(0,1fr) auto; }
.code-tree-printer > span:first-child { color:#d7ff24;font-size:18px; }
.code-tree-printer b { color:#f17b57;font-size:10px; }
.code-tree-printer > span:nth-child(3) { color:#c5ffb4;font-size:13px; }
.code-tree-printer small { color:rgba(190,255,173,.35);font-size:8px; }
@keyframes terminalBranchOpen {
  from { opacity:0;transform:translateY(-7px);clip-path:inset(0 0 100% 0); }
  to { opacity:1;transform:translateY(0);clip-path:inset(0); }
}

/* The outer screen previews the same hierarchy as compact terminal rows. */
body.code-desktop-mode .desktop-icons {
  right:6%;
  top:12%;
  display:flex;
  width:38%;
  flex-direction:column;
  gap:5px;
}
body.code-desktop-mode .desktop-icon {
  min-height:43px;
  padding:8px 11px;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  border:0;
  border-left:2px solid rgba(215,255,36,.55);
  border-radius:0;
  background:rgba(0,12,4,.46);
  text-align:left;
}
body.code-desktop-mode .desktop-icon:hover { transform:translateX(5px);background:rgba(44,96,40,.28); }
body.code-desktop-mode .desktop-icon::before { flex:0 0 150px; }
body.code-desktop-mode .desktop-icon > span:last-child { overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap; }

@media (max-width:720px) {
  body.code-desktop-mode .code-desktop-tree { inset:3%;padding:13px 12px 24px; }
  .code-desktop-tree > header { font-size:10px; }
  .code-tree-toggle,.code-tree-printer { grid-template-columns:16px 42px minmax(0,1fr);padding:6px;gap:5px; }
  .code-tree-action,.code-tree-printer small { display:none; }
  .code-tree-name,.code-tree-printer > span:nth-child(3) { font-size:10px; }
  .code-file-content { margin-left:48px;padding:10px; }
}
/* experience-v36: keep the original business-card print and landing motion isolated */
.business-card.is-settled:not(.is-expanded):not(.is-focus-returning):not(.is-dragging-card):not(.is-card-dropping):not(.is-crumpling):not(.is-paper-ball) {
  transition:none!important;
}
.business-card.is-focus-returning:not(.is-paper-ball) {
  transition:left .48s cubic-bezier(.16,1,.3,1),top .48s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1),box-shadow .4s ease!important;
}
/* experience-v37: full-black terminal canvas and restored compact print geometry */
body.code-desktop-mode .retro-os,
body.code-desktop-mode .retro-desktop,
body.code-desktop-mode .monitor-screen {
  background:#000!important;
}
body.code-desktop-mode .retro-wallpaper { display:none!important; }
body.code-desktop-mode .code-desktop-tree {
  inset:0;
  padding:4% 5% 6%;
  border:0;
  border-radius:0;
  background:repeating-linear-gradient(0deg,rgba(93,255,76,.025) 0 1px,transparent 1px 4px),#000;
  box-shadow:inset 0 0 42px rgba(29,91,28,.12);
}
.code-tree-caret {
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  line-height:1;
  transform-origin:50% 50%!important;
}
.code-tree-node.is-folder.is-open > .code-tree-toggle .code-tree-caret { transform:rotate(90deg); }
.business-card:not(.is-paper-ball) { width:202px; }
/* experience-v38: dark convex CRT hardware, true tree collapse and terminal printer */
.code-tree-branch[hidden],.code-file-content[hidden] { display:none!important; }

.monitor {
  padding:clamp(20px,2.05vw,34px) clamp(22px,2.35vw,39px) clamp(28px,2.7vw,45px);
  border:2px solid #3d403a;
  border-radius:42px 42px 54px 54px / 38px 38px 48px 48px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.1),transparent 18%),
    linear-gradient(102deg,#2d302b 0,#171a17 46%,#090b0a 78%,#252823 100%);
  box-shadow:
    0 42px 78px rgba(0,0,0,.68),
    inset 3px 3px 2px rgba(255,255,255,.07),
    inset -7px -8px 12px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.8);
}
.monitor::after {
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:12px;
  height:8px;
  opacity:.7;
  border-radius:50%;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(0,0,0,.62) 10px 14px);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  pointer-events:none;
}
.monitor-screen {
  border:2px solid rgba(0,0,0,.88)!important;
  border-radius:7% / 6%!important;
  background:#07100b;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.035),
    inset 0 0 58px rgba(0,0,0,.86),
    0 0 0 4px #0b0d0b,
    0 0 0 7px rgba(82,86,77,.34)!important;
  transform:translateZ(0) perspective(1200px) scale(1.004);
}
.monitor-screen::before {
  content:"";
  position:absolute;
  z-index:96;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 88% 78% at 50% 48%,transparent 61%,rgba(0,0,0,.25) 80%,rgba(0,0,0,.62) 100%),
    linear-gradient(118deg,rgba(255,255,255,.075),transparent 19% 74%,rgba(255,255,255,.018));
  box-shadow:inset 9px 7px 18px rgba(255,255,255,.025),inset -12px -10px 20px rgba(0,0,0,.34);
  pointer-events:none;
}
body.inner-mode .monitor-neck,body.inner-mode .monitor-base {
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(80px) scale(.7)!important;
  pointer-events:none!important;
}
body.inner-mode .monitor {
  padding:clamp(17px,1.5vw,25px) clamp(19px,1.8vw,30px) clamp(22px,2vw,33px);
  border-radius:48px / 42px;
}
body.inner-mode .monitor-screen { border-radius:7.5% / 6.5%!important; }
body.inner-mode .screen-home,body.inner-mode .retro-os {
  transform:perspective(1000px) scale(1.024);
  transform-origin:50% 50%;
}
body.inner-mode .retro-desktop { inset:38px 0 0; }

/* Code-mode printer window uses the same terminal language. */
body.code-desktop-mode .retro-window[data-system-app="printer"] {
  border-color:#132717;
  background:#020704;
  color:#c9f4bf;
  box-shadow:7px 8px 0 rgba(0,0,0,.68),0 0 0 1px rgba(120,255,92,.38);
}
body.code-desktop-mode .retro-window[data-system-app="printer"] .retro-window__bar {
  background:linear-gradient(90deg,#061208,#173419);
  color:#b6ff9c;
}
body.code-desktop-mode .retro-window[data-system-app="printer"] .retro-window__body {
  background:repeating-linear-gradient(0deg,rgba(103,255,82,.026) 0 1px,transparent 1px 4px),#010502!important;
  color:#c9e9c2;
}
body.code-desktop-mode .retro-window[data-system-app="printer"] .retro-window__status {
  border-color:rgba(120,255,92,.22);
  background:#061008;
  color:#8cff6a;
}
body.code-desktop-mode .printer-app { color:#c9e9c2; }
body.code-desktop-mode .printer-app__head {
  border-color:rgba(120,255,92,.24);
  background:linear-gradient(100deg,rgba(29,70,31,.35),rgba(0,5,2,.92));
}
body.code-desktop-mode .printer-app__head small { color:#7dff61; }
body.code-desktop-mode .printer-app__head h2 { color:#d8ffd0!important; }
body.code-desktop-mode .printer-app__head p { color:rgba(210,242,203,.68); }
body.code-desktop-mode .printer-app__glyph {
  border-color:#345438;
  background:linear-gradient(#263f29 0 26%,#0b140d 27% 78%,#030704 79%);
  box-shadow:7px 8px 0 rgba(0,0,0,.45),0 0 18px rgba(105,255,81,.07);
}
body.code-desktop-mode .printer-app__glyph::before,body.code-desktop-mode .printer-app__glyph::after {
  border-color:#4e6651;
  background:#dce7d8;
}
body.code-desktop-mode .printer-file-list { border-top-color:rgba(120,255,92,.25); }
body.code-desktop-mode .printer-file-row {
  border-bottom-color:rgba(120,255,92,.2);
  background:rgba(0,10,3,.42);
}
body.code-desktop-mode .printer-file-row:hover { background:rgba(63,133,55,.2); }
body.code-desktop-mode .printer-file-row b { color:#d7f7cf; }
body.code-desktop-mode .printer-file-row small { color:rgba(145,255,118,.5); }
body.code-desktop-mode .printer-file-row input { accent-color:#9dff70; }
body.code-desktop-mode .printer-app__footer {
  border-color:rgba(120,255,92,.3);
  background:#061008;
  box-shadow:0 -10px 20px rgba(0,0,0,.45);
}
body.code-desktop-mode .printer-page-summary b { color:#adff91; }
body.code-desktop-mode .printer-page-summary small { color:rgba(190,255,171,.5); }
body.code-desktop-mode .printer-app__footer button {
  border:1px solid #8ab94f;
  background:#d7ff24;
  box-shadow:0 0 14px rgba(215,255,36,.13);
}
/* Matching dark 1990s tower: boxier shell and stacked drive bays. */
.computer-tower {
  border-radius:7px;
  border-color:#454940;
  background:linear-gradient(112deg,rgba(255,255,255,.08),transparent 17%),linear-gradient(90deg,#20231f,#101310 72%,#292c26);
  box-shadow:0 34px 52px rgba(0,0,0,.66),inset 3px 2px rgba(255,255,255,.035),inset -5px -4px rgba(0,0,0,.3);
}
.tower-slits { inset:10% 13% 29%;opacity:1;background:none; }
.tower-slits::before,.tower-slits::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:19%;
  border:1px solid #050605;
  border-radius:2px;
  background:linear-gradient(#30332d,#111310 42%,#080908 54%,#1e211c);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 7px 10px rgba(0,0,0,.25);
}
.tower-slits::before { top:0; }
.tower-slits::after { top:27%;height:14%; }
/* experience-v39: full-layer glass warp, compact printer head and code-tree CRUD */
.crt-filter-defs { position:fixed;left:-9999px;top:-9999px;pointer-events:none; }
body.inner-mode .retro-os {
  inset:2.4% 2.8% 2.8%;
  overflow:hidden;
  border-radius:6.5% / 5.5%;
  filter:none;
  transform:perspective(820px) rotateX(.45deg) scale(.992);
  transform-origin:50% 50%;
}
body.inner-mode .retro-os::after {
  content:"";
  position:absolute;
  z-index:2000;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 84% 78% at 50% 48%,transparent 62%,rgba(0,0,0,.1) 78%,rgba(0,0,0,.36) 100%);
  box-shadow:inset 10px 7px 19px rgba(255,255,255,.018),inset -13px -11px 24px rgba(0,0,0,.28);
  pointer-events:none;
}

.code-tree-toggle { padding-right:146px; }
.code-tree-action { display:none; }
.code-tree-actions {
  position:absolute;
  z-index:5;
  right:10px;
  top:7px;
  display:flex;
  gap:6px;
  opacity:.68;
  transition:opacity .18s ease;
}
.code-tree-node:hover > .code-tree-actions,.code-tree-node:focus-within > .code-tree-actions { opacity:1; }
.code-tree-actions button {
  min-width:44px;
  padding:5px 7px;
  border:1px solid rgba(120,255,92,.32);
  border-radius:2px;
  background:#071309;
  color:#aaff8f;
  font:9px/1 var(--pixel);
  cursor:pointer;
}
.code-tree-actions button:hover,.code-tree-actions button:focus-visible { border-color:var(--lime);background:#17301a;outline:0; }
.code-tree-actions [data-code-delete] { border-color:rgba(255,90,40,.45);color:#ff8462; }
.code-tree-actions [data-code-delete]:hover { border-color:var(--orange);background:rgba(255,90,40,.12); }

/* A shorter printer introduction leaves most of the window to the queue. */
.printer-app__head {
  grid-template-columns:64px minmax(0,1fr);
  gap:13px;
  padding:10px 12px;
}
.printer-app__head small { font-size:8px; }
.printer-app__head h2 { margin:3px 0!important;font-size:18px!important; }
.printer-app__head p { font-size:11px;line-height:1.45; }
.printer-app__glyph { width:56px;height:42px;box-shadow:4px 5px 0 rgba(0,0,0,.2); }
.printer-app__glyph::before { left:10px;right:10px;top:-9px;height:18px; }
.printer-app__glyph::after { left:11px;right:11px;bottom:-8px;height:16px; }
.printer-app__glyph i { right:8px;top:13px;width:6px;height:6px; }
.printer-file-list { margin-top:8px; }

body.code-desktop-mode .retro-window[data-system-app="printer"] {
  border:2px solid rgba(130,255,99,.58);
  box-shadow:9px 11px 0 rgba(0,0,0,.72),0 0 0 2px rgba(28,69,31,.72),0 0 28px rgba(117,255,87,.1);
}
body.code-desktop-mode .retro-window[data-system-app="printer"] .retro-window__bar {
  border-bottom:1px solid rgba(130,255,99,.48);
  background:linear-gradient(90deg,#0b2410,#061008 72%);
}

@media (max-width:720px) {
  .code-tree-toggle { padding-right:100px; }
  .code-tree-actions { right:5px;gap:3px; }
  .code-tree-actions button { min-width:38px;padding:4px;font-size:8px; }
  body.inner-mode .retro-os { inset:2.2%; }
}
body.inner-mode .item-dialog[open] {
  filter:none;
  transform:scale(.99);
  transform-origin:50% 50%;
}
.color-field[hidden],
.note-media-tools[hidden],
.note-image-preview[hidden] {
  display:none!important;
}
/* experience-v40: convex CRT safe-area correction */
body.inner-mode .retro-topbar {
  left:1.2%;
  right:1.2%;
  padding-left:22px;
  padding-right:22px;
}
body.inner-mode .retro-desktop {
  left:1.25%;
  right:1.25%;
  bottom:1.4%;
}
body.inner-mode .window-layer {
  inset:1.1% 1.25% 1.4%;
}
body.inner-mode .retro-actions {
  right:2.2%;
}
/* experience-v41: seamless convex viewport across all three navigation levels */
body.inner-mode .retro-os {
  inset:1.05% 1.2% 1.15%;
}
body.inner-mode .retro-desktop {
  left:.6%;
  right:.6%;
  bottom:.8%;
}
body.inner-mode .window-layer {
  inset:.65% .7% .8%;
}
body:not(.inner-mode) .screen-home {
  inset:1.05%;
  overflow:hidden;
  border-radius:6.5% / 5.5%;
  filter:none;
  transform:scale(.995);
  transform-origin:50% 50%;
}
/* experience-v42: smooth glass dome, without pixel-stepped displacement */
body.inner-mode .retro-os,
body:not(.inner-mode) .screen-home,
body.inner-mode .item-dialog[open] {
  image-rendering:auto!important;
}
.monitor-screen::before {
  background:
    radial-gradient(ellipse 76% 68% at 42% 31%,rgba(255,255,255,.065),rgba(255,255,255,.018) 35%,transparent 58%),
    radial-gradient(ellipse 90% 82% at 50% 48%,transparent 61%,rgba(0,0,0,.22) 80%,rgba(0,0,0,.58) 100%),
    linear-gradient(118deg,rgba(255,255,255,.055),transparent 20% 76%,rgba(255,255,255,.014));
  box-shadow:
    inset 10px 8px 22px rgba(255,255,255,.032),
    inset -13px -11px 25px rgba(0,0,0,.31);
}
/* experience-v43: stronger dome with high-resolution, post-warp antialiasing */
.monitor-screen::before {
  background:
    radial-gradient(ellipse 74% 66% at 41% 30%,rgba(255,255,255,.085),rgba(255,255,255,.024) 34%,transparent 59%),
    radial-gradient(ellipse 90% 82% at 50% 48%,transparent 58%,rgba(0,0,0,.24) 79%,rgba(0,0,0,.64) 100%),
    linear-gradient(118deg,rgba(255,255,255,.068),transparent 20% 76%,rgba(255,255,255,.018));
}
/* experience-v44: optical glass dome and continuous one-pixel lines */
body.inner-mode .retro-os,
body:not(.inner-mode) .screen-home {
  border-radius:7.2% / 6.6%;
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.035),
    inset 0 0 58px rgba(0,0,0,.22);
}
.monitor-screen::before {
  opacity:1;
  background:
    radial-gradient(ellipse 66% 44% at 34% 9%,rgba(255,255,255,.115),rgba(255,255,255,.036) 34%,transparent 72%),
    radial-gradient(ellipse 108% 96% at 50% 48%,transparent 54%,rgba(3,8,5,.14) 70%,rgba(0,0,0,.47) 88%,rgba(0,0,0,.72) 100%),
    linear-gradient(112deg,rgba(255,255,255,.085),transparent 17% 73%,rgba(255,255,255,.022)),
    linear-gradient(90deg,rgba(255,255,255,.026),transparent 8% 91%,rgba(0,0,0,.12));
  box-shadow:
    inset 17px 12px 30px rgba(255,255,255,.043),
    inset -21px -17px 38px rgba(0,0,0,.42),
    inset 0 0 76px rgba(0,0,0,.25);
}
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.04),
    inset 0 0 68px rgba(0,0,0,.78),
    0 0 0 4px #0b0d0b,
    0 0 0 7px rgba(82,86,77,.34),
    0 18px 34px rgba(0,0,0,.32)!important;
}
/* A soft companion stroke keeps one-pixel terminal rules continuous after projection. */
body.code-desktop-mode .retro-topbar,
body.code-desktop-mode .code-desktop-tree > header,
body.code-desktop-mode .retro-window__bar,
body.code-desktop-mode .retro-window__status,
body.code-desktop-mode .folder-entry {
  -webkit-font-smoothing:antialiased;
}
/* Terminal hairlines stay visually slim but use two sampled rows/columns under the lens. */
body.code-desktop-mode .retro-topbar,
body.code-desktop-mode .code-desktop-tree > header {
  border-bottom-width:2px;
  border-bottom-color:rgba(111,255,93,.13);
}
body.code-desktop-mode .code-tree-node::before,
body.code-desktop-mode .code-tree-node > .code-tree-branch {
  border-left-width:2px;
  border-left-color:rgba(111,255,93,.11);
}
body.code-desktop-mode .retro-window__bar {
  border-bottom-width:2px;
}
/* experience-v46: a cleaner terminal surface under the curved glass */
body.code-desktop-mode .retro-os,
body.code-desktop-mode .retro-desktop,
body.code-desktop-mode .code-desktop-tree {
  background:#020603!important;
  background-image:
    radial-gradient(ellipse 68% 54% at 46% 38%,rgba(82,255,73,.025),transparent 72%)!important;
}
body.code-desktop-mode .retro-topbar {
  border-bottom:0!important;
  background:linear-gradient(180deg,rgba(3,15,6,.96),rgba(2,8,4,.88))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
body.code-desktop-mode .code-desktop-tree {
  border:0!important;
  box-shadow:none!important;
}
body.code-desktop-mode .code-desktop-tree > header {
  border-bottom:0!important;
  padding-bottom:12px;
  background:linear-gradient(90deg,rgba(92,255,68,.045),transparent 72%);
}
body.code-desktop-mode .code-tree-toggle,
body.code-desktop-mode .code-tree-printer {
  outline:0!important;
  border:0!important;
  box-shadow:none!important;
}
body.code-desktop-mode .code-tree-toggle:hover,
body.code-desktop-mode .code-tree-toggle:focus-visible,
body.code-desktop-mode .code-tree-printer:hover,
body.code-desktop-mode .code-tree-printer:focus-visible {
  outline:0!important;
  background:linear-gradient(90deg,rgba(107,205,90,.18),rgba(49,108,47,.07) 72%,transparent)!important;
  box-shadow:inset 3px 0 rgba(215,255,36,.52)!important;
}
body.code-desktop-mode .code-tree-node.is-open > .code-tree-toggle {
  background:linear-gradient(90deg,rgba(75,141,65,.14),transparent 78%);
}
body.code-desktop-mode .code-tree-node::before,
body.code-desktop-mode .code-tree-node > .code-tree-branch {
  border-left-color:rgba(111,255,93,.08)!important;
}
body.code-desktop-mode .retro-window__body,
body.code-desktop-mode .retro-window[data-system-app="printer"] .retro-window__body {
  background-color:#020603!important;
  background-image:radial-gradient(ellipse 72% 58% at 44% 34%,rgba(84,255,73,.025),transparent 74%)!important;
}
/* experience-v47: refined classic desktop without disturbing terminal mode */
body.inner-mode:not(.code-desktop-mode) .retro-window {
  border:0;
  background:#c9c5ba;
  box-shadow:
    0 0 0 3px rgba(17,20,15,.92),
    0 0 0 5px rgba(190,225,33,.58),
    11px 14px 0 rgba(0,0,0,.38),
    0 18px 34px rgba(0,0,0,.2);
}
body.inner-mode:not(.code-desktop-mode) .retro-window__bar {
  border-bottom:0;
  background:linear-gradient(100deg,#25291f 0%,#43511c 58%,#687d14 100%);
  box-shadow:0 6px 15px rgba(0,0,0,.09);
}
body.inner-mode:not(.code-desktop-mode) .retro-window__body {
  background:
    radial-gradient(ellipse 82% 64% at 42% 32%,rgba(255,255,255,.18),transparent 70%),
    #d9d5ca!important;
  background-size:auto!important;
}
body.inner-mode:not(.code-desktop-mode) .retro-window__status {
  border-top:0;
  background:#bbb7ac;
  box-shadow:inset 0 5px 12px rgba(0,0,0,.035);
}
body.inner-mode:not(.code-desktop-mode) .window-file-tools {
  border:0;
  background:linear-gradient(90deg,#c4c0b5,#cfcbc0);
  box-shadow:inset 4px 0 rgba(87,101,23,.45),0 5px 12px rgba(0,0,0,.055);
}
body.inner-mode:not(.code-desktop-mode) .folder-description,
body.inner-mode:not(.code-desktop-mode) .markdown-view blockquote {
  border:0;
  background:#ebe7dc;
  box-shadow:inset 4px 0 rgba(255,90,40,.38),0 5px 14px rgba(0,0,0,.055);
}
body.inner-mode:not(.code-desktop-mode) .folder-entry {
  border-bottom:0!important;
  border-radius:3px;
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}
body.inner-mode:not(.code-desktop-mode) .folder-entry:hover {
  background:linear-gradient(90deg,rgba(92,106,39,.14),rgba(255,255,255,.12) 72%,transparent);
  box-shadow:inset 4px 0 rgba(215,255,36,.56);
  transform:translateX(2px);
}
body.inner-mode:not(.code-desktop-mode) .retro-wallpaper::before {
  opacity:.32;
}
body.inner-mode:not(.code-desktop-mode) .retro-wallpaper::after {
  opacity:.48;
  border-width:2px!important;
  filter:blur(.18px);
}
/* experience-v48: classic desktop micro-polish */
body.inner-mode:not(.code-desktop-mode) .retro-window {
  border-radius:4px;
  overflow:hidden!important;
}
body.inner-mode:not(.code-desktop-mode) .retro-window.is-active {
  box-shadow:
    0 0 0 3px rgba(17,20,15,.94),
    0 0 0 5px rgba(205,239,38,.72),
    12px 15px 0 rgba(0,0,0,.36),
    0 22px 38px rgba(0,0,0,.24);
}
body.inner-mode:not(.code-desktop-mode) .retro-window__bar {
  min-height:42px;
  height:42px;
  padding:0 5px 0 16px;
  letter-spacing:.075em;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 7px 18px rgba(0,0,0,.1);
}
body.inner-mode:not(.code-desktop-mode) .window-title-group {
  gap:9px;
}
body.inner-mode:not(.code-desktop-mode) .window-title {
  font-weight:700;
  text-shadow:0 1px rgba(0,0,0,.46);
}
body.inner-mode:not(.code-desktop-mode) .window-controls {
  gap:4px;
  padding-right:0;
}
body.inner-mode:not(.code-desktop-mode) .window-controls button,
body.inner-mode:not(.code-desktop-mode) .window-back {
  width:34px;
  min-width:34px;
  height:32px;
  min-height:32px;
  border:0;
  border-radius:2px;
  background:linear-gradient(180deg,#e3dfd4,#c7c2b6);
  color:#171914;
  box-shadow:inset 0 1px rgba(255,255,255,.85),inset 0 -2px rgba(80,78,70,.18),0 2px 5px rgba(0,0,0,.18);
  font-weight:800;
}
body.inner-mode:not(.code-desktop-mode) .window-controls button:hover,
body.inner-mode:not(.code-desktop-mode) .window-back:hover {
  background:linear-gradient(180deg,#efff9a,#d4f42f);
  transform:translateY(-1px);
}
body.inner-mode:not(.code-desktop-mode) .window-controls .window-close:hover {
  background:linear-gradient(180deg,#ff8a69,#ff5a32);
}
body.inner-mode:not(.code-desktop-mode) .retro-window__body {
  padding:24px 26px;
  scrollbar-color:rgba(74,80,44,.42) transparent;
  scrollbar-width:thin;
}
body.inner-mode:not(.code-desktop-mode) .window-file-tools {
  min-height:54px;
  margin:-3px -3px 20px;
  padding:11px 14px 11px 17px;
  border-radius:3px;
  letter-spacing:.04em;
}
body.inner-mode:not(.code-desktop-mode) .window-file-tools > span {
  color:#3d4430;
  font-weight:800;
}
body.inner-mode:not(.code-desktop-mode) .window-file-tools button,
body.inner-mode:not(.code-desktop-mode) .folder-entry__actions button {
  min-height:32px;
  padding:7px 11px;
  border:0;
  border-radius:2px;
  background:#e3dfd4;
  box-shadow:inset 0 0 0 2px rgba(31,33,27,.5),inset 0 1px rgba(255,255,255,.78);
  transition:transform .14s ease,filter .14s ease;
}
body.inner-mode:not(.code-desktop-mode) .window-file-tools button:hover,
body.inner-mode:not(.code-desktop-mode) .folder-entry__actions button:hover {
  filter:brightness(1.05);
  transform:translateY(-1px);
}
body.inner-mode:not(.code-desktop-mode) .window-file-tools [data-delete],
body.inner-mode:not(.code-desktop-mode) .folder-entry__actions [data-delete] {
  background:linear-gradient(180deg,#ff7658,#f04d29);
}
body.inner-mode:not(.code-desktop-mode) .folder-description,
body.inner-mode:not(.code-desktop-mode) .markdown-view blockquote {
  margin-bottom:20px;
  padding:16px 18px 16px 21px;
  border-radius:3px;
  color:#30332b;
}
body.inner-mode:not(.code-desktop-mode) .markdown-view h1,
body.inner-mode:not(.code-desktop-mode) .markdown-view h2,
body.inner-mode:not(.code-desktop-mode) .markdown-view h3 {
  margin-top:18px!important;
  padding:9px 13px!important;
  border-radius:2px;
  background:linear-gradient(90deg,#151914,#20251e)!important;
  box-shadow:inset 4px 0 var(--lime),0 5px 12px rgba(0,0,0,.08);
}
body.inner-mode:not(.code-desktop-mode) .folder-dropzone {
  gap:6px;
}
body.inner-mode:not(.code-desktop-mode) .folder-entry {
  min-height:68px!important;
  padding:9px 12px!important;
  gap:13px;
}
body.inner-mode:not(.code-desktop-mode) .folder-entry__label b {
  color:#252820;
  letter-spacing:.01em;
}
body.inner-mode:not(.code-desktop-mode) .folder-entry__label small {
  color:rgba(53,58,44,.58);
  letter-spacing:.055em;
}
body.inner-mode:not(.code-desktop-mode) .retro-window__status {
  min-height:30px;
  height:30px;
  padding:8px 12px;
  color:rgba(32,35,28,.72);
  letter-spacing:.075em;
}
body.inner-mode:not(.code-desktop-mode) .retro-wallpaper {
  filter:saturate(.92) contrast(.98)!important;
}
/* Keep the live UI unfiltered; the monitor overlays provide the glass treatment. */
body.inner-mode:not(.code-desktop-mode) .retro-os,
body:not(.inner-mode) .screen-home {
  filter:none!important;
}
body.inner-mode.code-desktop-mode .retro-os {
  filter:none!important;
}

/* Dialogs sit above the curved screen, so keep their rounded silhouette unwarped. */
body.inner-mode .item-dialog[open] {
  overflow:auto;
  filter:none!important;
  background-clip:padding-box;
}

/* Keep note editing compact enough to show every control without dialog scrolling. */
.item-dialog[open]:has(#noteMediaTools:not([hidden])) {
  width:min(90vw,540px);
}
.item-dialog:has(#noteMediaTools:not([hidden])) form { padding:18px 20px; }
.item-dialog:has(#noteMediaTools:not([hidden])) header { margin-bottom:12px; }
.item-dialog:has(#noteMediaTools:not([hidden])) header h2 { font-size:28px; }
.item-dialog:has(#noteMediaTools:not([hidden])) label { margin-top:9px; }
.item-dialog:has(#noteMediaTools:not([hidden])) input[type="text"],
.item-dialog:has(#noteMediaTools:not([hidden])) input:not([type]),
.item-dialog:has(#noteMediaTools:not([hidden])) textarea {
  margin-top:5px;
  padding:8px 10px;
  font-size:14px;
  line-height:1.4;
}
.item-dialog:has(#noteMediaTools:not([hidden])) textarea { height:92px;min-height:72px; }
.item-dialog:has(#noteMediaTools:not([hidden])) .color-field { margin-top:11px; }
.item-dialog:has(#noteMediaTools:not([hidden])) .note-media-tools {
  margin-top:11px;
  padding:10px;
}
.item-dialog:has(#noteMediaTools:not([hidden])) .media-upload,
.item-dialog:has(#noteMediaTools:not([hidden])) .media-ghost { padding:6px 8px; font-size:12px; }
.item-dialog:has(#noteMediaTools:not([hidden])) .note-image-preview {
  height:72px;
  margin-top:8px;
}
.item-dialog:has(#noteMediaTools:not([hidden])) .doodle-heading { margin-top:9px; }
.item-dialog:has(#noteMediaTools:not([hidden])) #noteDoodle {
  height:96px;
  margin-top:6px;
}
.item-dialog:has(#noteMediaTools:not([hidden])) footer { margin-top:14px; }
.item-dialog:has(#noteMediaTools:not([hidden])) footer button {
  padding:8px 14px;
  font-size:13px;
}
/* Quiet, hand-drawn discovery marks: visible only until each interaction is tried. */
.interaction-hint {
  position:fixed;
  z-index:20050;
  pointer-events:none;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .16s ease,transform .22s ease;
}
.interaction-hint.is-visible { opacity:1;transform:translateY(0); }
.interaction-hint .hint-ring-svg {
  position:absolute;
  left:-8%;
  top:-10%;
  width:116%;
  height:120%;
  overflow:visible;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.72));
}
.interaction-hint .hint-pointer-svg {
  position:absolute;
  overflow:visible;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.72));
}
.interaction-hint path {
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.interaction-hint .hint-ring-b { opacity:.42;stroke-width:1.05; }
.interaction-hint .hint-arrow { stroke-width:1.45; }
.interaction-hint > span {
  position:absolute;
  left:0;
  top:0;
  padding:3px 6px;
  color:rgba(255,255,255,.94);
  font:italic 500 11px/1.35 var(--sans);
  letter-spacing:.055em;
  white-space:nowrap;
  text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.9);
  transform:rotate(-2deg);
}


@media (prefers-reduced-motion:reduce) {
  .interaction-hint { transition:none; }
}

@media (hover:none),(max-width:720px) {
  .interaction-hint { display:none!important; }
}
.zoom-meter small { display:none!important; }


/* business card contact */
.business-card .card-school { bottom:30px; }
.business-card .card-email { position:absolute;left:18px;bottom:14px;z-index:1;display:block;color:#4e514a;font-family:var(--sans);font-size:9px;line-height:1;letter-spacing:.045em;text-transform:lowercase; }


/* Outside → inside: keep the desktop's native ratio and animate only compositor properties. */
@media (min-width:901px) {
  body.inner-mode .computer-stage {
    top:15vh;
    width:min(104vw,1660px);
    height:min(79vh,790px);
  }
  body.inner-mode .monitor-wrap {
    top:38vh;
    width:min(82vw,118.5vh,1390px);
    transform:translate(-50%,-50%) scale(1.12);
    transform-origin:50% 50%;
  }
}
/* Keep the inactive desktop out of the render tree until inner mode is entered. */
body:not(.inner-mode) .retro-os {
  visibility:hidden!important;
  opacity:0;

  pointer-events:none;
  filter:none!important;
}
.monitor-wrap.is-mode-traveling {
  transition:none!important;
}
.monitor-motion-shell { position:absolute;inset:0;z-index:5;transform-origin:0 0;pointer-events:none; }
.monitor-motion-shell .monitor-wrap { pointer-events:auto; }
body.inner-mode .monitor-motion-shell { z-index:32; }
.monitor-motion-shell.is-mode-traveling { will-change:transform; }
.computer-stage.is-mode-traveling { transition:none!important; }
.monitor-wrap { transition:none!important; }
body.inner-mode .computer-stage,body.inner-mode .computer-tower,body.inner-mode .mouse,body.inner-mode .outer-items,body.inner-mode .outer-connections { transition:none!important; }
body.inner-mode .outer-items {
  visibility:visible!important;
  opacity:.28!important;
  filter:none!important;
  transform:none!important;
}
body.inner-mode .outer-item { filter:blur(8px) saturate(.78)!important; pointer-events:none!important; }
/* Restore the stable layered transition used by the earlier smooth build. */
.outer-items,.outer-connections { transition:transform 1.24s cubic-bezier(.2,.65,.25,1),opacity 1.02s ease-out!important; }
body.inner-mode .computer-stage { transition:none!important; }
body.inner-mode .computer-tower { transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity 1.42s ease!important; }
body.inner-mode .mouse { transition:transform 1.95s cubic-bezier(.16,1,.3,1),opacity 1.48s ease!important; }
body.inner-mode .outer-items { transform:scale(1.18)!important; opacity:.2!important; filter:none!important; pointer-events:none!important; }
body.inner-mode .outer-item { transition:transform 1.24s cubic-bezier(.2,.65,.25,1),filter 1.12s ease-out,opacity 1.02s ease-out!important; transform:translate(-50%,-50%) scale(1.22) rotate(var(--rotation,0deg))!important; filter:blur(11px) saturate(.72)!important; pointer-events:none!important; }
/* The shared inner/outer FLIP path owns monitor geometry while crossing. */
body .computer-stage.is-mode-traveling,
body .monitor-wrap.is-mode-traveling {
  transition:none!important;
}

/* Lightweight convex glass: the whole desktop shares one composited perspective plane. */
.monitor-screen {
  --lens-x:42%;
  --lens-y:28%;
  border-radius:8% / 7%!important;
  isolation:isolate;
  perspective:1200px;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.045),
    inset 0 0 58px rgba(0,0,0,.46),
    inset 14px 0 24px rgba(0,0,0,.18),
    inset -14px 0 24px rgba(0,0,0,.22)!important;
}
body:not(.powering-off):not(.powering-on):not(.screen-off) .screen-home,
body:not(.powering-off):not(.powering-on):not(.screen-off) .retro-os {
  transform:scale(1.018,1.028)!important;
  transform-origin:50% 50%;
  transition:opacity .24s ease-out!important;
  backface-visibility:hidden;
}
.monitor-screen::before {
  opacity:1!important;
  background:
    radial-gradient(ellipse 72% 48% at var(--lens-x) var(--lens-y),rgba(255,255,255,.115),rgba(255,255,255,.036) 34%,transparent 70%),
    radial-gradient(ellipse 94% 86% at 50% 48%,transparent 57%,rgba(0,0,0,.16) 77%,rgba(0,0,0,.54) 100%),
    linear-gradient(90deg,rgba(255,255,255,.055),transparent 7%,transparent 92%,rgba(0,0,0,.18)),
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 9%,transparent 90%,rgba(0,0,0,.24))!important;
  filter:none!important;
  transition:opacity .18s ease-out!important;
}
.crt-filter-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}
body:not(.inner-mode):not(.screen-off) .screen-home,
body.inner-mode:not(.screen-off) .retro-os {
  filter:url(#crtConvexLight)!important;
}
body .monitor-motion-shell.is-mode-traveling .screen-home,
body .monitor-motion-shell.is-mode-traveling .retro-os {
  filter:none!important;
}

/* Final CRT geometry must win over the earlier two-layer normalization. */
body .monitor,
body.inner-mode .monitor {
  padding:clamp(28px,2.35vw,39px) clamp(30px,2.6vw,44px) clamp(72px,6.4vw,96px)!important;
  border-radius:28px 28px 34px 34px / 25px 25px 31px 31px!important;
}
body .monitor-screen,
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  border-color:rgba(32,31,27,.76)!important;
  border-radius:6.5% / 6%!important;
}
body:not(.inner-mode):not(.screen-off) .screen-home,
body.inner-mode:not(.screen-off) .retro-os {
  filter:none!important;
}

/* Chunky late-90s CRT shell: broad plastic bezel and a deep, clean lower chin. */
.monitor,
body.inner-mode .monitor {
  padding:clamp(28px,2.35vw,39px) clamp(30px,2.6vw,44px) clamp(72px,6.4vw,96px)!important;
  border:2px solid #625f54!important;
  border-radius:28px 28px 34px 34px / 25px 25px 31px 31px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.22),transparent 18%),
    linear-gradient(112deg,#aaa593 0%,#928d7d 46%,#777366 78%,#9b9686 100%)!important;
  box-shadow:
    0 46px 82px rgba(0,0,0,.62),
    inset 3px 3px 2px rgba(255,255,255,.24),
    inset -8px -9px 14px rgba(48,45,38,.38),
    0 0 0 1px rgba(19,20,17,.72)!important;
}
.monitor::after {
  display:none!important;
}
.monitor::before {
  content:"";
  position:absolute;
  z-index:5;
  left:7%;
  right:7%;
  bottom:clamp(20px,2vw,31px);
  height:clamp(24px,2.2vw,34px);
  border-top:1px solid rgba(55,53,46,.32);
  background:
    radial-gradient(circle at 93% 58%,#5f5c52 0 7px,#b9b3a1 8px 11px,transparent 12px),
    radial-gradient(circle at 88.5% 58%,#d7ff24 0 2px,rgba(74,74,61,.5) 3px 4px,transparent 5px);
  opacity:.78;
  pointer-events:none;
}
.monitor-screen,
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  border-color:rgba(32,31,27,.76)!important;
  border-radius:6.5% / 6%!important;
}
.monitor-neck {
  background:linear-gradient(90deg,#5e5b51,#9b9685 50%,#555248)!important;
}
.monitor-base {
  background:linear-gradient(180deg,#9a9584,#5b584e)!important;
}

/* Two visual layers only: the chassis and one continuous convex glass surface. */
.monitor,
body.inner-mode .monitor {
  padding:clamp(18px,1.75vw,29px)!important;
  border-radius:44px 44px 52px 52px / 40px 40px 48px 48px!important;
}
.monitor-screen,
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:8% / 7%!important;
}
body:not(.inner-mode) .screen-home,
body.inner-mode .retro-os {
  inset:0!important;
  border-radius:inherit!important;
  box-shadow:none!important;
}

/* Keep one permanent convex surface so changing desktop modes cannot reshape an inner layer. */
.monitor-screen,
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  filter:url(#crtConvexLight)!important;
}
body:not(.inner-mode) .screen-home,
body.inner-mode .retro-os,
body .monitor-motion-shell.is-mode-traveling .screen-home,
body .monitor-motion-shell.is-mode-traveling .retro-os {
  filter:none!important;
}

/* Final CRT geometry must remain identical in outer and inner modes. */
body .monitor,
body.inner-mode .monitor {
  padding:clamp(28px,2.35vw,39px) clamp(30px,2.6vw,44px) clamp(72px,6.4vw,96px)!important;
  border-radius:28px 28px 34px 34px / 25px 25px 31px 31px!important;
}
body .monitor-screen,
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  border-color:rgba(32,31,27,.76)!important;
  border-radius:6.5% / 6%!important;
}

/* A squarer CRT body, with the fixed glass clipping one permanently warped content plane. */
body .monitor {
  aspect-ratio:1.48!important;
}
body .monitor-screen,
body.inner-mode .monitor-screen,
body:not(.inner-mode) .monitor-screen {
  filter:none!important;
  overflow:hidden!important;
}
body .screen-home,
body .retro-os,
body:not(.inner-mode):not(.screen-off) .screen-home,
body.inner-mode:not(.screen-off) .retro-os {
  filter:url(#crtConvexLight)!important;
  transform:scale(1.035,1.05)!important;
  transform-origin:50% 50%!important;
}
@media (min-width:901px) {
  body.workspace-entered:not(.inner-mode) .monitor-wrap {
    top:-3vh!important;
    width:min(69vw,1080px)!important;
  }
  body.inner-mode .monitor-wrap {
    top:33vh!important;
    width:min(72vw,104vh,1220px)!important;
  }
}

/* The tower and mouse use the same aged warm-gray plastic as the CRT shell. */
body .computer-tower {
  border-color:#625f54!important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.2),transparent 22%),
    linear-gradient(96deg,#aaa593,#8e8979 58%,#716d61)!important;
  box-shadow:
    0 35px 52px rgba(0,0,0,.52),
    inset 3px 3px 2px rgba(255,255,255,.2),
    inset -7px -8px 12px rgba(48,45,38,.34)!important;
}
body .computer-tower .tower-slits {
  background:repeating-linear-gradient(90deg,#555247 0 3px,transparent 3px 8px)!important;
  opacity:.52;
}
body .mouse {
  border-color:#625f54!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.2),transparent 36%,rgba(54,51,44,.16) 74%),
    linear-gradient(160deg,#aaa593,#817c6d 72%)!important;
  box-shadow:
    0 8px 0 #5d594e,
    0 22px 22px rgba(0,0,0,.58),
    inset 0 2px 2px rgba(255,255,255,.28)!important;
}

/* Smooth mode travel: layout snaps once, then the scene moves only on compositor layers. */
body .computer-stage,
body .computer-stage.entered,
body.inner-mode .computer-stage,
body .monitor-wrap,
body.inner-mode .monitor-wrap {
  transition:none!important;
  will-change:auto!important;
}
body .computer-stage.is-mode-traveling,
body .monitor-motion-shell.is-mode-traveling {
  will-change:transform!important;
}
body .monitor-motion-shell {
  transition:none!important;
}

/* Surrounding objects keep one stable route while clearing or returning. */
body .computer-tower,
body.inner-mode .computer-tower {
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .62s ease-out!important;
  backface-visibility:hidden;
}
body .mouse,
body.inner-mode .mouse {
  transition:transform .92s cubic-bezier(.16,1,.3,1),opacity .64s ease-out!important;
  backface-visibility:hidden;
}
body .outer-items,
body.inner-mode .outer-items,
body .outer-connections,
body.inner-mode .outer-connections {
  transition:opacity .7s ease-out!important;
}
body.inner-mode .outer-items {
  transform:none!important;
}
body .outer-item,
body.inner-mode .outer-item {
  transition:transform 1.18s cubic-bezier(.2,.65,.25,1),filter 1.06s ease-out,opacity .72s ease-out!important;
  backface-visibility:hidden;
}

/* Expose both parts of the CRT stand instead of burying the neck in the chassis. */
body .monitor-neck {
  left:42.5%!important;
  top:95%!important;
  width:15%!important;
  height:14%!important;
  z-index:1!important;
  clip-path:polygon(25% 0,75% 0,92% 100%,8% 100%)!important;
  background:linear-gradient(90deg,#575348 0%,#969080 25%,#aaa493 50%,#827d6f 76%,#4d4a41 100%)!important;
  box-shadow:0 25px 30px rgba(0,0,0,.62),inset 2px 0 rgba(255,255,255,.15),inset -4px 0 rgba(36,34,29,.24)!important;
}
body .monitor-base {
  left:32%!important;
  top:105.5%!important;
  width:36%!important;
  height:4.6%!important;
  z-index:2!important;
  border-radius:50% 50% 12px 12px / 70% 70% 24% 24%!important;
  background:linear-gradient(180deg,#aaa493 0%,#858071 48%,#4f4c43 100%)!important;
  box-shadow:0 18px 24px rgba(0,0,0,.7),inset 0 2px rgba(255,255,255,.18)!important;
}

@media (min-width:901px) {
  body.workspace-entered:not(.inner-mode) .monitor-wrap {
    top:-10vh!important;
  }
  body.inner-mode .monitor-wrap {
    top:35.2vh!important;
    width:min(72vw,131vh,1250px)!important;
  }
}

/* A subdued beige late-90s tower: stacked drives, service panel and vented intake. */
body .computer-tower {
  width:13.2%!important;
  min-width:150px!important;
  height:54%!important;
  overflow:hidden!important;
  border:1px solid #514e45!important;
  border-radius:9px 9px 5px 5px!important;
  background:
    linear-gradient(118deg,rgba(255,255,255,.13),transparent 22%),
    linear-gradient(96deg,#918c7d 0%,#7e796c 56%,#666257 100%)!important;
  box-shadow:
    20px 30px 30px rgba(0,0,0,.64),
    4px 48px 58px rgba(0,0,0,.48),
    inset 3px 3px 2px rgba(255,255,255,.13),
    inset -8px -7px 13px rgba(40,38,33,.38)!important;
}
body .computer-tower::before {
  content:"";
  position:absolute;
  z-index:1;
  left:9%;
  right:9%;
  top:53%;
  height:19%;
  border:1px solid rgba(55,52,45,.55);
  border-radius:2px 2px 14px 14px / 2px 2px 7px 7px;
  background:linear-gradient(165deg,#878274,#6e6a5f 78%);
  box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 -5px 8px rgba(42,40,35,.2);
  pointer-events:none;
}
body .computer-tower::after {
  content:"";
  position:absolute;
  z-index:2;
  left:12%;
  right:12%;
  bottom:5.5%;
  height:17%;
  border-top:1px solid rgba(48,46,40,.42);
  background:radial-gradient(circle,#4b483f 0 1.2px,transparent 1.6px) 0 0 / 8px 8px;
  opacity:.72;
  pointer-events:none;
}
body .computer-tower .tower-slits {
  inset:7% 10% auto!important;
  height:42%!important;
  opacity:1!important;
  background:none!important;
}
body .computer-tower .tower-slits::before {
  top:0!important;
  height:25%!important;
  border:1px solid #575349!important;
  border-radius:2px!important;
  background:
    linear-gradient(180deg,transparent 47%,#4c4941 48% 54%,transparent 55%),
    linear-gradient(180deg,#a29c8c,#777267)!important;
  box-shadow:inset 0 2px rgba(255,255,255,.16),0 4px 5px rgba(0,0,0,.2)!important;
}
body .computer-tower .tower-slits::after {
  top:34%!important;
  height:18%!important;
  border:1px solid #565249!important;
  border-radius:2px!important;
  background:
    linear-gradient(180deg,transparent 36%,#4e4b43 37% 45%,transparent 46%),
    linear-gradient(180deg,#999384,#736f63)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 4px 5px rgba(0,0,0,.18)!important;
}
body .computer-tower .tower-power {
  z-index:4!important;
  left:46%!important;
  bottom:24%!important;
  width:14px!important;
  height:14px!important;
  border:1px solid #4e4b42!important;
  background:linear-gradient(145deg,#aaa493,#6e6a5e)!important;
  box-shadow:inset 1px 1px rgba(255,255,255,.22),0 2px 3px rgba(0,0,0,.45)!important;
}
body .computer-tower .tower-power::after {
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  right:-13px;
  top:4px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 7px rgba(215,255,36,.7);
}
body .computer-tower small {
  z-index:4!important;
  right:9%!important;
  bottom:2.5%!important;
  color:rgba(230,224,208,.28)!important;
}

/* A neutral blue-graphite room keeps the beige hardware and paper accents coherent. */
html,
body {
  background:#1d2324!important;
}
.app {
  background:
    radial-gradient(ellipse at 62% 47%,rgba(218,210,192,.075),transparent 39%),
    linear-gradient(145deg,#272e2f 0%,#1d2324 54%,#171c1d 100%)!important;
}
.ambient-grid {
  opacity:.18!important;
}

/* Both outer states align the full stand to the viewport edge; JS supplies the exact shift. */
body:not(.workspace-entered) .monitor-wrap {
  transform:translateX(-53%) translateY(var(--stand-shift-y,0px))!important;
}
body.workspace-entered:not(.inner-mode) .monitor-wrap {
  width:min(62vw,980px)!important;
  transform:translateX(-50%) translateY(var(--stand-shift-y,0px))!important;
}

/* Keep the two exterior views at one visual scale, without changing their travel path. */
body:not(.workspace-entered) .monitor-wrap,
body.workspace-entered:not(.inner-mode) .monitor-wrap {
  width:min(62vw,980px)!important;
}

/* Bring the mouse back into the computer's working area in the exterior view. */
body.workspace-entered:not(.inner-mode) .mouse {
  right:13%!important;
}

/* A compact information index adds substance without competing with the slogan. */
.hero-index {
  display:grid;
  gap:6px;
  width:min(300px,25vw);
  margin-top:clamp(14px,2.2vh,24px);
  padding-top:clamp(10px,1.5vh,16px);
  border-top:1px solid rgba(215,255,36,.34);
  color:rgba(234,231,216,.7);
  font-family:var(--mono);
  font-size:clamp(9px,.67vw,11px);
  letter-spacing:.08em;
}
.hero-index span {
  display:grid;
  grid-template-columns:4.4em 1fr;
  align-items:baseline;
  gap:12px;
}
.hero-index b {
  color:var(--lime);
  font-weight:700;
  letter-spacing:.18em;
}
.hero-index i {
  color:inherit;
  font-style:normal;
  white-space:nowrap;
}

/* Connection rendering was retired; keep stale cached markup harmless. */
.outer-connections {
  display:none!important;
}

@media (max-width:900px) {
  .hero-index {
    width:min(290px,68vw);
    font-size:10px;
  }
}

/* Restore the physical printer and lift the complete homepage copy above it. */
body:not(.workspace-entered) .desk-printer {
  left:3.4%!important;
  top:58%!important;
}
@media (min-width:721px) {
  body:not(.workspace-entered) .hero-copy {
    top:9.5vh!important;
  }
}

/* Make the glass bulge easier to read while preserving one stable content plane. */
body .screen-home,
body .retro-os,
body:not(.inner-mode):not(.screen-off) .screen-home,
body.inner-mode:not(.screen-off) .retro-os {
  transform:scale(1.052,1.078)!important;
}
.monitor-screen::before {
  background:
    radial-gradient(ellipse 68% 44% at 44% 30%,rgba(255,255,255,.15),rgba(255,255,255,.045) 34%,transparent 68%),
    radial-gradient(ellipse 92% 84% at 50% 48%,transparent 52%,rgba(0,0,0,.2) 76%,rgba(0,0,0,.62) 100%),
    linear-gradient(90deg,rgba(255,255,255,.07),transparent 8%,transparent 91%,rgba(0,0,0,.23)),
    linear-gradient(180deg,rgba(255,255,255,.065),transparent 9%,transparent 88%,rgba(0,0,0,.3))!important;
}

/* One physical 200vw track: the message wall follows the complete desk instead of covering it. */
.outside-track {
  position:absolute;
  inset:0 auto 0 0;
  z-index:10;
  display:flex;
  width:200vw;
  height:100vh;
  transform:translate3d(0,0,0);
  transition:transform 1.02s cubic-bezier(.22,.72,.18,1);
  will-change:auto;
}
.outside-track.is-sliding { will-change:transform; }
.outside-panel {
  position:relative;
  flex:0 0 100vw;
  width:100vw;
  height:100vh;
}
.outside-desk-panel { overflow:visible;z-index:2; }
.felt-board { z-index:3;pointer-events:none; }
body.message-board-open .outside-desk-panel { pointer-events:none; }
body.message-board-open .felt-board { pointer-events:auto; }
body.message-board-open .outside-track { transform:translate3d(-100vw,0,0); }
body.inner-mode .outside-track { transform:translate3d(0,0,0); }
body.message-board-open .outside-desk-panel,
body.message-board-open .felt-board { visibility:visible; }
body.message-board-open .felt-board { opacity:1; }

.felt-board { overflow:hidden;background:transparent; }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.felt-canvas-shell { position:absolute;inset:0; }
#feltCanvas { display:block;width:100%;height:100%;touch-action:none;cursor:default; }
.felt-canvas-hotspot {
  position:absolute;
  z-index:2;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:transparent;
  cursor:pointer;
}
.felt-canvas-hotspot:focus-visible { outline:3px solid var(--lime);outline-offset:4px; }

.felt-editor {
  width:min(92vw,620px);
  height:min(86dvh,680px);
  max-height:680px;
  overflow:hidden;
  overscroll-behavior:contain;
  padding:0;
  border:0;
  border-radius:18px;
  background:#ece6d8;
  color:#171918;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.felt-editor::backdrop { background:rgba(11,14,14,.65);backdrop-filter:blur(7px); }
.felt-editor form { box-sizing:border-box;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:16px;height:100%;padding:24px;overscroll-behavior:contain; }
.felt-editor header,.felt-editor footer { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.felt-editor header span { color:#66703d;font:8px var(--pixel);letter-spacing:.18em; }
.felt-editor h2 { margin:5px 0 0;font:600 30px var(--serif); }
.felt-editor button { border:0;border-radius:9px;cursor:pointer;transition:transform 120ms ease,background-color 120ms ease,color 120ms ease; }
.felt-editor button:active { transform:scale(.96); }
#feltEditorClose { width:42px;height:42px;background:transparent;font-size:28px; }
.felt-editor-modes { display:flex;gap:8px; }
.felt-editor-modes button,.felt-editor-modes button[aria-selected="false"] { flex:1;padding:11px;background:rgba(19,23,22,.08);color:#59605d; }
.felt-editor-modes button[aria-selected="true"] { background:#171b19;color:#eef2dd; }
.felt-editor button:focus-visible,.felt-editor textarea:focus-visible,.felt-editor input:focus-visible { outline:2px solid #344522;outline-offset:3px; }
.felt-editor-pages { position:relative;min-height:0;overflow:hidden;border-radius:13px;background:#f8f3e8;box-shadow:inset 0 0 0 1px rgba(20,23,22,.14); }
.felt-editor-page { box-sizing:border-box;width:100%;height:100%;min-height:0;padding:16px;overflow:hidden; }
.felt-editor-page[hidden] { display:none!important; }
.felt-markdown-field { display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;font-size:12px;font-weight:700; }
#feltMarkdown { box-sizing:border-box;width:100%;height:100%;min-height:0;resize:none;padding:16px;border:0;border-radius:9px;background:#f0eadf;color:#171918;font:15px/1.7 var(--sans); }
.felt-doodle-field { position:relative;grid-template-columns:68px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:14px;place-items:center; }
.felt-doodle-field > .felt-doodle-toolbar { box-sizing:border-box;display:flex;width:68px;height:100%;min-height:0;flex-direction:column;justify-content:flex-start;gap:7px;padding:8px;border-radius:10px;background:#e7e0d3;box-shadow:inset 0 0 0 1px rgba(28,31,29,.08);overflow:visible; }
.felt-doodle-field:not([hidden]) { display:grid; }
.felt-image-field { position:relative;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);gap:0;align-items:stretch; }
.felt-image-field:not([hidden]) { display:grid; }
.felt-image-upload { display:grid;place-content:center;place-items:center;gap:9px;min-height:100%;padding:20px;border:2px dashed rgba(27,31,29,.28);border-radius:10px;background:#f0eadf;color:#232724;cursor:pointer;font-size:15px;font-weight:700;transition-property:background-color,border-color,scale;transition-duration:140ms; }
.felt-image-upload small { color:#79756d;font-size:10px;font-weight:500;letter-spacing:.08em; }
.felt-image-upload.is-dragover { border-color:#344522;background:#e1e9ce;scale:.99; }
.felt-image-upload.has-image { opacity:.08; }
.felt-image-upload input { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.felt-image-preview { pointer-events:none;position:absolute;inset:12px;display:grid;place-items:center;min-height:0;padding:0;overflow:hidden;border-radius:8px;background:transparent;color:#716c62;font-size:12px; }
.felt-image-preview img { display:block;max-width:100%;max-height:100%;border-radius:7px;box-shadow:0 7px 18px rgba(25,20,15,.16),0 0 0 1px rgba(0,0,0,.1); }
.felt-tool-button { position:relative;display:grid;place-items:center;align-content:center;gap:2px;width:52px;min-height:44px;padding:4px!important;background:rgba(20,23,22,.07)!important;color:#353936;box-shadow:inset 0 0 0 1px rgba(20,23,22,.05); }
.felt-tool-button svg { width:19px;height:19px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.felt-tool-button span { font:600 9px/1 var(--sans);letter-spacing:.02em; }
.felt-tool-button[aria-pressed="true"] { background:#222724!important;color:#f3f1e8;box-shadow:0 4px 10px rgba(22,24,22,.16); }
.felt-tool-button:disabled { cursor:default;opacity:.38;transform:none; }
.felt-tool-divider { width:36px;height:1px;margin:1px auto;background:rgba(26,29,27,.14); }
.felt-tool-size { position:absolute;z-index:12;inset-inline-start:76px;top:10px;box-sizing:border-box;display:grid;grid-template-columns:minmax(96px,1fr) 26px;align-items:center;gap:5px;width:164px;padding:10px 11px;border-radius:11px;background:#f3eee4;color:#555b57;font:600 9px/1.2 var(--sans);box-shadow:0 12px 28px rgba(28,25,20,.22),inset 0 0 0 1px rgba(30,31,28,.1);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-8px) scale(.96);transform-origin:left center;transition-property:opacity,transform,visibility;transition-duration:140ms,140ms,0s;transition-delay:0s,0s,140ms;transition-timing-function:cubic-bezier(.2,0,0,1); }
.felt-tool-size[data-tool="eraser"] { top:61px; }
.felt-tool-size.is-open { opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0) scale(1);transition-delay:0s; }
.felt-tool-size span { grid-column:1/-1; }
.felt-tool-size input { width:100%;height:22px;margin:0;accent-color:#2d3b28;cursor:pointer; }
.felt-tool-size output { min-width:22px;color:#202420;font:600 9px/1 var(--pixel);font-variant-numeric:tabular-nums;text-align:center; }
.felt-doodle-save { display:none;margin-block-start:auto;background:#344522!important;color:#f4f7e9; }
.felt-tool-button .icon-collapse { display:none; }
.felt-tool-button[aria-pressed="true"] .icon-expand { display:none; }
.felt-tool-button[aria-pressed="true"] .icon-collapse { display:block; }
#feltDoodleCanvas { display:block;grid-column:2;width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;border-radius:9px;background:#f0eadf;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px rgba(30,28,24,.05); }
#feltDoodleCanvas.is-erasing { cursor:cell; }
.felt-editor.is-doodle-expanded { width:min(96vw,1120px);height:94dvh;max-height:none;border-radius:14px; }
.felt-editor.is-doodle-expanded form { grid-template-rows:auto minmax(0,1fr);gap:12px;padding:18px; }
.felt-editor.is-doodle-expanded .felt-editor-modes,
.felt-editor.is-doodle-expanded .felt-paper-colors,
.felt-editor.is-doodle-expanded footer { display:none; }
.felt-editor.is-doodle-expanded .felt-editor-pages { display:grid;place-items:stretch;background:#ded8ca; }
.felt-editor.is-doodle-expanded .felt-doodle-field { width:100%;height:100%;padding:12px; }
.felt-editor.is-doodle-expanded .felt-doodle-save { display:grid; }
.felt-editor.is-doodle-expanded #feltDoodleCanvas { width:auto;height:100%;max-width:100%;max-height:calc(94dvh - 116px);box-shadow:0 12px 34px rgba(30,25,18,.18); }
.felt-paper-colors { display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0; }
.felt-paper-colors[hidden] { display:none; }
.felt-paper-colors legend { margin-bottom:9px;font-size:12px;font-weight:700; }
.felt-paper-colors input { position:absolute;opacity:0; }
.felt-paper-colors span { display:grid;place-items:center;min-width:58px;height:38px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(20,23,22,.12);cursor:pointer;font-size:11px; }
.felt-paper-colors input:checked + span { outline:2px solid #171918;outline-offset:2px; }
.felt-paper-colors .is-bone { background:#eee7d7; }.felt-paper-colors .is-coral { background:#ff7055; }.felt-paper-colors .is-lime { background:#d9ff39; }
.felt-paper-colors .is-yellow { background:#f4dc52; }.felt-paper-colors .is-blue { background:#91c9e8; }.felt-paper-colors .is-pink { background:#efaaa8; }.felt-paper-colors .is-mint { background:#a9d9bd; }.felt-paper-colors .is-lavender { background:#c7b7df; }
.felt-custom-color { position:relative;display:flex;align-items:center;gap:5px; }
.felt-custom-color #feltCustomColor { position:static;width:38px;height:38px;padding:2px;opacity:1;border:0;border-radius:8px;background:transparent;cursor:pointer; }
.felt-editor footer { justify-content:flex-end;align-items:center; }
.felt-editor footer button { padding:12px 18px;background:rgba(20,23,22,.08); }
.felt-editor footer .felt-editor-save { background:#171b19;color:#eff4dd; }

body.workspace-entered:not(.inner-mode) .zoom-meter { display:block; }
body.message-board-open .workspace-toolbar { display:none; }
body.felt-editor-open { overflow:hidden; }
.felt-editor-footer-spacer { flex:1; }
.felt-editor-delete { color:#a33f35;background:rgba(163,63,53,.08)!important;box-shadow:inset 0 0 0 1px rgba(163,63,53,.25)!important; }
.felt-editor-delete:hover { background:rgba(163,63,53,.14)!important; }

@media(max-width:560px) {
  .mode-guide { left:20px;bottom:22px;max-width:calc(100vw - 40px); }
  .felt-editor form { padding:18px; }
  .felt-paper-colors span { min-width:58px; }
  .felt-editor { height:min(90dvh,650px); }
  .felt-doodle-field { grid-template-columns:60px minmax(0,1fr);gap:8px;padding:10px; }
  .felt-doodle-field > .felt-doodle-toolbar { width:60px;padding:6px 4px;gap:5px; }
  .felt-tool-button { width:52px; }
  .felt-tool-size { inset-inline-start:64px;width:min(164px,calc(100vw - 118px)); }
  .felt-editor.is-doodle-expanded { width:96vw;height:94dvh; }
}
@media(prefers-reduced-motion:reduce) {
  .outside-track { transition-duration:.01ms; }
  .visitor-receipt__backing,.visitor-receipt__roller,.visitor-receipt__paper-reveal,.visitor-receipt__paper header,.visitor-receipt__paper dl div,.visitor-receipt__paper footer { transition-duration:.01ms!important;transition-delay:0s!important; }
}

/* Smaller tactile notes shared with the felt-wall paper language. */
.outer-item {
  box-sizing:border-box;
  width:176px!important;
  min-height:176px!important;
  aspect-ratio:1;
  padding:0!important;
  overflow:hidden;
  clip-path:none!important;
  border-radius:2px!important;
  background:#eee7d7!important;
  box-shadow:3px 10px 16px rgba(17,18,16,.3),inset 0 0 0 1px rgba(50,43,34,.08)!important;
}
.outer-item[data-color="orange"] { background:#f38a64!important; }
.outer-item[data-color="lime"] { background:#cde95d!important; }
.outer-item[data-color="bone"] { background:#eee7d7!important; }
.outer-item .sticky-paper { display:none!important; }
.outer-item .sticky-grain {
  position:absolute;inset:0;z-index:0;display:block!important;pointer-events:none;
  opacity:.5;background:repeating-linear-gradient(2deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),repeating-linear-gradient(93deg,rgba(65,52,40,.025) 0 1px,transparent 1px 8px);
}
.outer-item .sticky-copy { position:relative;z-index:1;box-sizing:border-box;height:100%;padding:22px 20px 36px!important; }
.outer-item h3 { margin:0 0 11px!important;font:700 19px/1.3 "Noto Serif SC","Songti SC",serif!important; }
.outer-item p { margin:0!important;font:500 14px/1.58 var(--sans)!important; }
.outer-item small { z-index:1;left:20px!important;bottom:14px!important;font-size:8px!important;opacity:.48; }
.outer-item .delete-item { z-index:3;right:7px!important;top:6px!important; }
.outer-item.is-dragging { box-shadow:9px 19px 24px rgba(17,18,16,.38),inset 0 0 0 1px rgba(50,43,34,.08)!important;will-change:transform; }

/* The receipt is a centered paper strip, not a new page. */
.visitor-receipt {
  position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;align-items:center;padding-top:3vh;
  visibility:hidden;pointer-events:none;background:rgba(12,15,14,0);transition-property:background-color,visibility;transition-duration:220ms,0s;transition-delay:0s,760ms;
}
.visitor-receipt.is-open { visibility:visible;pointer-events:auto;background:rgba(12,15,14,.34);transition-delay:0s; }
.visitor-receipt__backing { position:absolute;z-index:1;top:calc(3vh + 4px);left:50%;width:min(390px,92vw);height:90px;border-radius:17px 17px 9px 9px;background:linear-gradient(105deg,#4a3024,#755039 24%,#35231c 58%,#68432f);box-shadow:0 15px 27px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.12);opacity:0;transform:translate(-50%,-8px);transition-property:transform,opacity;transition-duration:140ms;transition-timing-function:ease-out;pointer-events:none;will-change:transform,opacity; }
.visitor-receipt__roller { position:relative;z-index:3;width:min(390px,92vw);height:94px;flex:0 0 94px;opacity:0;transform:translateY(-8px);transition-property:transform,opacity;transition-duration:140ms;transition-delay:0s;transition-timing-function:ease-out;pointer-events:none;will-change:transform,opacity; }
.visitor-receipt.is-open .visitor-receipt__backing,.visitor-receipt.is-open .visitor-receipt__roller { opacity:1;transform:translateY(0);transition-duration:280ms;transition-delay:0s;transition-timing-function:cubic-bezier(.2,.78,.18,1); }
.visitor-receipt.is-open .visitor-receipt__backing { transform:translate(-50%,0); }
.visitor-receipt__roller::after { content:"";position:absolute;z-index:2;left:35px;right:35px;bottom:8px;height:56px;border-radius:22px 6px 6px 22px;background:linear-gradient(180deg,#fffefa 0%,#f4f0e7 24%,#ddd7cb 67%,#b9b1a4 100%);box-shadow:0 6px 9px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.82),inset 0 -6px 8px rgba(91,80,62,.15); }
.visitor-receipt__roller span { position:absolute;z-index:1;left:21px;right:24px;bottom:33px;height:7px;border-radius:5px;background:linear-gradient(180deg,#c8a45f,#9b7132 56%,#694719);box-shadow:0 2px 3px rgba(0,0,0,.24); }
.visitor-receipt__roller span::before,.visitor-receipt__roller span::after { content:"";position:absolute;top:-1px;width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,#c5a15e,#805a24); }.visitor-receipt__roller span::before { left:-3px; }.visitor-receipt__roller span::after { right:-3px; }
.visitor-receipt__roller i:last-child { position:absolute;z-index:3;right:24px;bottom:8px;width:21px;height:56px;border-radius:50%;background:linear-gradient(90deg,#aaa397,#706b62);box-shadow:inset -4px 0 6px rgba(54,48,40,.3),-1px 0 rgba(255,255,255,.35); }
.visitor-receipt__roller i:last-child::after { content:"";position:absolute;inset:15px 6px;border-radius:50%;background:#554a3d;box-shadow:inset 2px 0 3px rgba(0,0,0,.36); }
.visitor-receipt__roller i:first-child { position:absolute;z-index:4;right:8px;bottom:32px;width:27px;height:8px;border-radius:0 5px 5px 0;background:linear-gradient(180deg,#c7a35e,#956a2e 58%,#674619);box-shadow:0 1px 2px rgba(0,0,0,.22); }
.visitor-receipt__paper-reveal { position:relative;z-index:2;box-sizing:border-box;width:min(331px,86vw);height:548px;flex:0 0 548px;margin-top:-27px;margin-left:11px;overflow:hidden;opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0);transition-property:opacity,transform,clip-path;transition-duration:130ms,130ms,.01ms;transition-delay:0s;transition-timing-function:ease-out;will-change:opacity,transform,clip-path; }
.visitor-receipt__paper-reveal:focus-visible { outline:3px solid #d4dc48;outline-offset:5px; }
.visitor-receipt.is-open .visitor-receipt__paper-reveal { opacity:1;transform:translateY(0);clip-path:inset(0);transition-duration:720ms,720ms,720ms;transition-delay:300ms;transition-timing-function:cubic-bezier(.16,.72,.16,1); }
.visitor-receipt.is-ready .visitor-receipt__paper-reveal { overflow:visible;clip-path:none;touch-action:none;cursor:grab; }
.visitor-receipt.is-pulling .visitor-receipt__paper-reveal,.visitor-receipt.is-tearing .visitor-receipt__paper-reveal { overflow:visible;clip-path:none;cursor:grabbing; }
.visitor-receipt.is-closing .visitor-receipt__backing { opacity:0;transform:translate(-50%,-4px);transition-duration:120ms; }
.visitor-receipt.is-closing .visitor-receipt__roller { opacity:0;transform:translateY(-4px);transition-duration:120ms; }
.visitor-receipt.is-closing .visitor-receipt__paper-reveal { opacity:0;transform:translateY(-4px);clip-path:inset(0);transition-duration:120ms,120ms,.01ms;transition-delay:0s; }
.visitor-receipt__paper-stub {
  position:absolute;z-index:2;inset:0 0 auto;height:40px;box-sizing:border-box;border-bottom:1px dashed rgba(48,47,41,.48);
  background-color:#f5f2e9;background-image:linear-gradient(105deg,rgba(74,64,48,.025),transparent 32%,rgba(255,255,255,.2) 68%,rgba(72,62,49,.018));
  pointer-events:none;
}
.visitor-receipt__paper {
  position:absolute;inset:40px 0 0;z-index:1;box-sizing:border-box;width:100%;height:calc(100% - 40px);padding:7px 32px 43px;overflow:hidden;
  color:#292a26;background:#f5f2e9;
  filter:drop-shadow(0 25px 25px rgba(0,0,0,.36));
  transform:translate3d(var(--receipt-drag-x,0),var(--receipt-drag-y,0),0) rotate(var(--receipt-drag-rotate,0deg));transform-origin:50% 0;
  transition-property:transform,opacity;transition-duration:180ms;transition-timing-function:cubic-bezier(.2,.78,.18,1);will-change:transform,opacity;
  clip-path:polygon(0 0,100% 0,100% 98.2%,98.5% 100%,97% 98.2%,95.5% 100%,94% 98.2%,92.5% 100%,91% 98.2%,89.5% 100%,88% 98.2%,86.5% 100%,85% 98.2%,83.5% 100%,82% 98.2%,80.5% 100%,79% 98.2%,77.5% 100%,76% 98.2%,74.5% 100%,73% 98.2%,71.5% 100%,70% 98.2%,68.5% 100%,67% 98.2%,65.5% 100%,64% 98.2%,62.5% 100%,61% 98.2%,59.5% 100%,58% 98.2%,56.5% 100%,55% 98.2%,53.5% 100%,52% 98.2%,50.5% 100%,49% 98.2%,47.5% 100%,46% 98.2%,44.5% 100%,43% 98.2%,41.5% 100%,40% 98.2%,38.5% 100%,37% 98.2%,35.5% 100%,34% 98.2%,32.5% 100%,31% 98.2%,29.5% 100%,28% 98.2%,26.5% 100%,25% 98.2%,23.5% 100%,22% 98.2%,20.5% 100%,19% 98.2%,17.5% 100%,16% 98.2%,14.5% 100%,13% 98.2%,11.5% 100%,10% 98.2%,8.5% 100%,7% 98.2%,5.5% 100%,4% 98.2%,2% 100%,0 98.2%);
}
.visitor-receipt__paper::before { content:none; }
.visitor-receipt__paper::after { content:none; }
.visitor-receipt.is-pulling .visitor-receipt__paper { transition-duration:0s; }
.visitor-receipt.is-tearing .visitor-receipt__paper { opacity:0;transition-duration:190ms;transition-timing-function:ease-out; }
.visitor-receipt__texture { position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;opacity:.9; }
.visitor-receipt__paper header,.visitor-receipt__paper dl,.visitor-receipt__paper footer { position:relative;z-index:1; }
.visitor-receipt__paper header,.visitor-receipt__paper dl div,.visitor-receipt__paper footer { opacity:1;transform:none; }
.visitor-receipt__paper header { text-align:center;border-bottom:1px dashed rgba(38,39,35,.45);padding-bottom:22px; }
.visitor-receipt__paper header small { font:600 8px/1 var(--pixel);letter-spacing:.14em;color:#686a61; }
.visitor-receipt__paper h2 { margin:13px 0 9px;font:700 24px/1.25 "Noto Serif SC","Songti SC",serif; }
.visitor-receipt__paper header p { margin:0;color:#72736b;font-size:10px; }
.visitor-receipt__paper dl { display:grid;gap:0;margin:25px 0 28px; }
.visitor-receipt__paper dl div { display:flex;align-items:baseline;justify-content:space-between;padding:13px 4px;border-bottom:1px dotted rgba(45,46,41,.28); }
.visitor-receipt__paper dt { font-size:13px;letter-spacing:.08em; }
.visitor-receipt__paper dd { display:flex;align-items:baseline;gap:6px;margin:0;font-variant-numeric:tabular-nums; }
.visitor-receipt__paper dd b { font:600 24px/1 var(--mono); }
.visitor-receipt__paper dd span { color:#6c6d66;font-size:10px; }
.visitor-receipt__paper footer { display:grid;gap:20px;text-align:center;color:#62645c;font:600 7px/1 var(--pixel);letter-spacing:.12em; }
.visitor-receipt__paper footer i { display:block;height:35px;background:repeating-linear-gradient(90deg,#272824 0 2px,transparent 2px 4px,#272824 4px 5px,transparent 5px 8px,#272824 8px 12px,transparent 12px 14px);opacity:.82; }

@media(max-width:720px) {
  .outer-item { width:158px!important;min-height:158px!important; }
  .outer-item .sticky-copy { padding:14px 13px 27px!important; }
  .visitor-receipt { padding-top:3vh; }
  .visitor-receipt__paper-reveal { height:480px;flex-basis:480px; }
  .visitor-receipt__paper { height:calc(100% - 40px); }
}

/* Portfolio content is read-only until this device is verified as the owner. */
body.portfolio-readonly #workspaceToolbar,
body.portfolio-readonly .retro-actions,
body.portfolio-readonly .code-tree-actions,
body.portfolio-readonly .window-file-tools > div,
body.portfolio-readonly .retro-context-menu {
  display:none!important;
}
body.portfolio-readonly .outer-item,
body.portfolio-readonly .outer-item:hover {
  cursor:default!important;
}

/* Print and business-card repair v24. */
.printed-document:not(.is-paper-ball)::before,
.printed-document.is-long-document:not(.is-paper-ball)::before {
  content:none!important;
  display:none!important;
}

.printed-document {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  width:220px;
  height:300px;
  padding:18px 18px 28px;
}

.printed-document__meta {
  flex:0 0 auto;
  font-size:6.5px;
  line-height:1.25;
  letter-spacing:.13em;
  white-space:nowrap;
}

.printed-document > h2,
.printed-document.is-long-document > h2 {
  flex:0 0 auto;
  margin:7px 0 8px!important;
  padding:0 0 8px!important;
  font-size:17px!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:balance;
}

.printed-document__content,
.printed-document.is-long-document .printed-document__content {
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:hidden;
  color:#34352f;
  font-size:8.5px;
  line-height:1.55;
  overflow-wrap:break-word;
  word-break:normal;
}

.printed-document__content h1,
.printed-document__content h2,
.printed-document__content h3 {
  margin:6px 0 4px!important;
  padding:3px 5px!important;
  font-size:9px!important;
  line-height:1.35!important;
  letter-spacing:.02em!important;
  text-wrap:balance;
  break-after:avoid;
}

.printed-document__content p,
.printed-document__content blockquote,
.printed-document__content ul,
.printed-document__content ol {
  margin:3px 0!important;
  font-size:8.5px!important;
  line-height:1.55!important;
}

.printed-document__content ul,
.printed-document__content ol {
  padding-left:15px;
}

.printed-document__content li {
  margin:1px 0;
  break-inside:avoid;
}

.printed-document__content blockquote {
  padding:4px 6px!important;
}

.printed-document > small {
  right:14px;
  bottom:10px;
  font-size:6px;
  line-height:1;
  letter-spacing:.1em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.print-measure .printed-document__content {
  flex:none!important;
  width:184px!important;
  height:194px!important;
  max-height:none!important;
  overflow:auto!important;
}

.business-card:not(.is-paper-ball) {
  box-sizing:border-box;
  width:218px;
  min-height:127px;
  aspect-ratio:1.72;
  padding:17px 18px;
}

.business-card strong {
  margin-top:2px!important;
  max-width:72%;
  color:#161814;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:25px!important;
  font-weight:700;
  line-height:1.08!important;
  letter-spacing:.075em!important;
  white-space:nowrap;
}

.business-card .card-role {
  margin-top:8px!important;
  max-width:76%;
  font-size:10.5px!important;
  line-height:1.3!important;
  letter-spacing:.045em!important;
  white-space:nowrap;
}

.business-card .card-school {
  position:absolute;
  left:18px;
  bottom:29px!important;
  font-size:9px!important;
  line-height:1.1;
  letter-spacing:.045em!important;
  white-space:nowrap;
}

.business-card .card-email {
  left:18px;
  bottom:13px;
  max-width:76%;
  font-size:8px;
  line-height:1;
  letter-spacing:.035em;
  white-space:nowrap;
}

.business-card.is-expanded:not(.is-paper-ball) {
  transform:translate(-50%,-50%) perspective(700px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.75)!important;
  transform-origin:50% 50%!important;
}

/* One paper-ball system shared by business cards and printed documents. */
.throwable-paper.is-crumpling {
  animation:crumplePaper .82s cubic-bezier(.2,.62,.12,1) forwards!important;
  transform-origin:50% 50%;
  pointer-events:none;
}

.throwable-paper.is-crumpling > * {
  animation:fadeCrumpleInk .55s ease-in forwards!important;
}

.throwable-paper.is-paper-ball {
  box-sizing:border-box!important;
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:var(--ball-radius,46% 52% 44% 50%)!important;
  clip-path:var(--ball-shape)!important;
  background:
    radial-gradient(ellipse 46% 34% at var(--patch-x,30%) var(--patch-y,34%),rgba(255,90,40,.17),transparent 58%),
    radial-gradient(ellipse 41% 49% at var(--patch-x2,70%) var(--patch-y2,68%),rgba(215,255,36,.15),transparent 61%),
    linear-gradient(var(--crease-a,38deg),transparent 41%,rgba(63,62,54,.26) 44%,rgba(255,255,255,.64) 46%,transparent 50%),
    linear-gradient(var(--crease-b,128deg),transparent 46%,rgba(71,69,60,.2) 49%,rgba(255,255,255,.34) 51%,transparent 55%),
    radial-gradient(ellipse 53% 38% at var(--curve-x,38%) var(--curve-y,37%),rgba(255,255,255,.96),rgba(227,223,210,.44) 47%,transparent 62%),
    #ece8dc!important;
  box-shadow:
    inset 9px 7px 13px rgba(255,255,255,.9),
    inset -11px -12px 16px rgba(54,52,45,.35),
    6px 12px 10px rgba(0,0,0,.4)!important;
  filter:hue-rotate(var(--paper-hue,0deg)) contrast(1.06) drop-shadow(2px 4px 3px rgba(0,0,0,.2));
  cursor:grab;
  pointer-events:auto;
}

.throwable-paper.is-paper-ball:not(.is-ball-flying):not(.is-bin-bouncing) {
  transform:translate(-50%,-50%) rotate(var(--ball-spin,var(--ball-rest,0deg)))!important;
}

.business-card.is-paper-ball {
  width:58px!important;
  height:58px!important;
}

.printed-document.is-paper-ball {
  width:64px!important;
  height:64px!important;
}

.throwable-paper.is-paper-ball > * {
  display:none!important;
}

.throwable-paper.is-paper-ball::before,
.throwable-paper.is-paper-ball::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  transform:none!important;
}

.throwable-paper.is-paper-ball::before {
  inset:5px!important;
  opacity:.88!important;
  border-radius:45% 53% 47% 51%!important;
  background:
    radial-gradient(ellipse 71% 34% at var(--curve-x,38%) var(--curve-y,37%),transparent 31%,rgba(48,46,40,.34) 40%,rgba(255,255,255,.55) 46%,transparent 56%),
    radial-gradient(ellipse 48% 68% at var(--patch-x2,70%) var(--patch-y2,68%),transparent 36%,rgba(60,58,50,.27) 43%,rgba(255,255,255,.25) 48%,transparent 56%)!important;
}

.throwable-paper.is-paper-ball::after {
  inset:3px!important;
  opacity:.64!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at var(--crease-x,27%) var(--crease-y,63%),rgba(44,42,36,.34) 0 1px,transparent 1.8px),
    radial-gradient(circle at var(--patch-x,30%) var(--patch-y2,68%),rgba(54,52,45,.25) 0 1.2px,transparent 2px),
    radial-gradient(ellipse 47% 9% at var(--patch-x2,70%) var(--patch-y,34%),transparent 32%,rgba(58,56,48,.28) 43%,rgba(255,255,255,.24) 49%,transparent 60%),
    linear-gradient(var(--crease-c,76deg),transparent 42%,rgba(52,50,43,.22) 46%,rgba(255,255,255,.27) 49%,transparent 53%)!important;
}

@keyframes fadeCrumpleInk {
  0%,18% { opacity:1; }
  100% { opacity:0; }
}

@keyframes crumplePaper {
  0% {
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    border-radius:3px;
  }
  22% {
    transform:translate(-50%,-50%) translate(4px,-3px) perspective(700px) rotateX(18deg) rotateY(27deg) rotateZ(calc(var(--card-rotation,0deg) + 5deg)) scale(.68,.74) skewY(4deg);
    clip-path:polygon(0 0,86% 0,100% 25%,96% 100%,3% 94%);
  }
  45% {
    transform:translate(-50%,-50%) translate(-5px,3px) perspective(700px) rotateX(10deg) rotateY(-42deg) rotateZ(-8deg) scale(.47,.51) skewX(-6deg);
    clip-path:polygon(10% 0,100% 8%,89% 100%,0 83%,5% 32%);
  }
  68% {
    transform:translate(-50%,-50%) translate(3px,2px) perspective(700px) rotateX(35deg) rotateY(18deg) rotateZ(16deg) scale(.34,.37);
    clip-path:polygon(4% 14%,78% 0,100% 58%,76% 100%,7% 87%);
  }
  100% {
    transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateY(0) rotateZ(var(--ball-rest,0deg)) scale(.255);
    border-radius:var(--ball-radius,46% 52% 44% 50%);
    clip-path:var(--ball-shape);
  }
}

/* Mobile readability: enlarge the working screen while preserving the same physical composition. */
@media (max-width:720px) {
  body.workspace-entered:not(.inner-mode) .monitor-wrap {
    width:min(82vw,500px)!important;
  }
  body:not(.workspace-entered) .monitor-wrap {
    width:min(68vw,420px)!important;
  }
  body.inner-mode .monitor-wrap {
    width:116vw!important;
  }
  body.code-desktop-mode .code-desktop-tree {
    inset:2.5%;
    padding:14px 13px 24px;
  }
  body.code-desktop-mode .code-desktop-tree > header,
  body.code-desktop-mode .code-tree-name,
  body.code-desktop-mode .code-tree-printer > span:nth-child(3) {
    font-size:11.5px;
  }
  body.code-desktop-mode .code-tree-toggle,
  body.code-desktop-mode .code-tree-printer {
    min-height:38px;
    padding-block:7px;
  }
  .felt-editor::backdrop { backdrop-filter:none; }
}

/* Wide desktop parity: grow the computer and its physical notes together. */
@media (min-width:1600px) {
  body:not(.workspace-entered) .monitor-wrap,
  body.workspace-entered:not(.inner-mode) .monitor-wrap {
    width:min(68vw,1220px)!important;
  }
  body.workspace-entered:not(.inner-mode) .outer-item {
    width:218px!important;
    min-height:218px!important;
  }
  body.workspace-entered:not(.inner-mode) .outer-item .sticky-copy {
    padding:27px 25px 43px!important;
  }
  body.workspace-entered:not(.inner-mode) .outer-item h3 {
    font-size:23px!important;
  }
  body.workspace-entered:not(.inner-mode) .outer-item p {
    font-size:17px!important;
  }
  body.workspace-entered:not(.inner-mode) .outer-item small {
    left:25px!important;
    bottom:17px!important;
    font-size:10px!important;
  }
  body.inner-mode .monitor-wrap {
    width:min(78vw,1420px)!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .code-tree-branch,
  .code-file-content { animation:none!important; }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* motion-direction-v25: an editorial playground with one continuous physical scene. */
html,
body { overflow-x:clip; }

.scene-atmosphere {
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  transition-property:opacity;
  transition-duration:var(--dur-scene-shift);
  transition-timing-function:var(--ease-out);
}

.scene-atmosphere::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(112deg,transparent 0 39%,color-mix(in oklch,var(--color-scene-glow) 34%,transparent) 47%,transparent 58%),
    radial-gradient(circle at 72% 18%,color-mix(in oklch,var(--color-scene-lime) 10%,transparent),transparent 27%);
  mix-blend-mode:soft-light;
  opacity:.72;
  transform:translate3d(calc(var(--pointer-x,0) * -12px),calc(var(--pointer-y,0) * -8px),0);
  transition:transform 80ms linear;
}

.scene-beam {
  position:absolute;
  width:54vw;
  height:135vh;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--color-scene-glow) 26%,transparent),transparent);
  filter:blur(28px);
  opacity:0;
  transform-origin:50% 0;
}

.scene-beam-a { inset-block-start:-28vh;inset-inline-start:6vw;rotate:-22deg; }
.scene-beam-b { inset-block-start:-42vh;inset-inline-end:-15vw;rotate:26deg;opacity:0; }
.scene-ready .scene-beam-a { animation:beamEnter 1400ms var(--ease-out) 220ms both; }
.scene-ready .scene-beam-b { animation:beamEnterSoft 1700ms var(--ease-out) 420ms both; }

.scene-cursor-light {
  position:absolute;
  inset-inline-start:var(--cursor-x,50%);
  inset-block-start:var(--cursor-y,48%);
  width:36rem;
  max-width:68vw;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklch,var(--color-scene-glow) 34%,transparent),transparent 67%);
  mix-blend-mode:soft-light;
  opacity:.5;
  translate:-50% -50%;
  transition:inset-inline-start 90ms linear,inset-block-start 90ms linear,opacity var(--dur-medium) ease;
}

@keyframes beamEnter { from { opacity:0;scale:.86;translate:-8% -5%; } to { opacity:.72;scale:1;translate:0 0; } }
@keyframes beamEnterSoft { from { opacity:0;scale:.82;translate:7% -4%; } to { opacity:.35;scale:1;translate:0 0; } }

.pastoral-background {
  filter:blur(10px) saturate(1.04) contrast(1.025)!important;
  transform:translate3d(calc(var(--pointer-x,0) * -7px),calc(var(--pointer-y,0) * -4px),0) scale(1.045)!important;
  transition-property:filter,opacity;
  transition-duration:var(--dur-scene-shift);
  transition-timing-function:var(--ease-out);
}

.ambient-grid {
  opacity:.23;
  background-size:40px 40px;
  transform:translate3d(calc(var(--pointer-x,0) * 4px),calc(var(--pointer-y,0) * 3px),0);
}

.scene-chrome {
  position:fixed;
  inset:34px 44px auto;
  z-index:90;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  color:var(--color-scene-ink);
  opacity:0;
  translate:0 -12px;
  transition-property:color,opacity,translate;
  transition-duration:var(--dur-medium),720ms,720ms;
  transition-timing-function:ease,var(--ease-out),var(--ease-out);
}

.scene-ready .scene-chrome { opacity:1;translate:0 0; }
.scene-signature { display:flex;align-items:baseline;gap:12px;width:max-content;color:inherit;text-decoration:none; }
.scene-signature > span { font:800 18px/1 var(--font-body);letter-spacing:-.07em; }
.scene-signature small { font:600 8px/1 var(--font-label);letter-spacing:.13em;opacity:.66;white-space:nowrap; }
.scene-nav { display:flex;gap:6px;padding:4px;border-radius:var(--radius-pill);background:color-mix(in oklch,var(--color-paper-soft) 62%,transparent);box-shadow:0 10px 32px color-mix(in oklch,var(--color-shadow) 48%,transparent);backdrop-filter:blur(12px); }
.scene-nav button {
  min-height:34px;
  padding:0 13px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:inherit;
  font:600 11px/1 var(--font-body);
  white-space:nowrap;
  cursor:pointer;
  transition-property:background-color,color,scale;
  transition-duration:160ms;
  transition-timing-function:var(--ease-out);
}
.scene-nav button:hover { background:color-mix(in oklch,var(--color-paper-soft) 72%,transparent); }
.scene-nav button:active { scale:.96; }
.scene-nav button[aria-current="page"] { background:var(--color-scene-ink);color:var(--color-paper-soft); }
.scene-nav button:focus-visible,.scene-signature:focus-visible { outline:2px solid var(--color-focus);outline-offset:3px; }

.hero-copy {
  inset-block-start:9.6vh!important;
  inset-inline-start:4.6vw!important;
  width:min(74vw,1180px)!important;
  min-width:0;
  transform:translate3d(calc(var(--pointer-x,0) * -5px),calc(var(--pointer-y,0) * -3px),0)!important;
  text-align:start!important;
  transition-property:opacity,filter;
  transition-duration:640ms;
}

.hero-index {
  display:flex;
  width:min(47vw,680px);
  justify-content:space-between;
  gap:24px;
  margin:0 0 12px;
  color:var(--color-scene-ink);
  font:650 8px/1 var(--font-label);
  letter-spacing:.14em;
  opacity:0;
  translate:0 -9px;
}
.hero-index span { white-space:nowrap; }

.hero-copy h1 {
  display:grid;
  width:min-content;
  color:var(--color-scene-ink)!important;
  font-family:var(--font-body)!important;
  font-size:clamp(4.6rem,10.3vw,10.2rem)!important;
  font-weight:800!important;
  letter-spacing:-.085em!important;
  line-height:.74!important;
  text-shadow:0 1px 0 color-mix(in oklch,var(--color-paper-soft) 42%,transparent),0 12px 35px color-mix(in oklch,var(--color-shadow) 34%,transparent)!important;
  white-space:nowrap;
  overflow-wrap:anywhere;
}

.hero-copy h1 > span {
  display:block;
  opacity:0;
  clip-path:inset(0 0 100% 0);
  translate:0 -42px;
}
.hero-copy h1 > span:nth-child(2) { margin-inline-start:7.5vw; }
.hero-copy h1 > span:nth-child(3) { color:var(--color-scene-orange); }
.scene-ready .hero-index { opacity:1;translate:0 0;transition:opacity 540ms 160ms ease,translate 700ms 160ms var(--ease-out); }
.scene-ready .hero-copy h1 > span { animation:headlineReveal 880ms var(--ease-out) both; }
.scene-ready .hero-copy h1 > span:nth-child(1) { animation-delay:100ms; }
.scene-ready .hero-copy h1 > span:nth-child(2) { animation-delay:190ms; }
.scene-ready .hero-copy h1 > span:nth-child(3) { animation-delay:280ms; }
@keyframes headlineReveal { to { opacity:1;clip-path:inset(-5% -2% -8% -2%);translate:0 0; } }

.monitor-motion-shell { opacity:0;filter:blur(8px); }
.scene-ready .monitor-motion-shell { opacity:1;filter:blur(0);transition:opacity 900ms 360ms ease,filter 1100ms 360ms var(--ease-out)!important; }

.scene-ready .desk-printer,.scene-ready .mouse,.scene-ready .computer-tower,.scene-ready .outer-item { animation:objectResolve 720ms var(--ease-out) both; }
.scene-ready .desk-printer { animation-delay:470ms; }
.scene-ready .computer-tower { animation-delay:550ms; }
.scene-ready .mouse { animation-delay:620ms; }
.scene-ready .outer-item { animation-delay:360ms; }
@keyframes objectResolve { from { opacity:0;filter:blur(9px) saturate(.6); } to { opacity:1;filter:none; } }

/* Once a note has been touched, its one-shot scene entrance must never replay after landing. */
.scene-ready .outer-item.is-interaction-ready:not(.is-landing) {
  animation:none!important;
  opacity:1;
}

body.workspace-entered .hero-copy { opacity:.16!important;filter:blur(2px); }
body.inner-mode .hero-copy { opacity:0!important; }
body[data-scene="board"] .scene-chrome,body[data-scene="2"] .scene-chrome { color:var(--color-paper-soft); }
body[data-scene="board"] .scene-nav,body[data-scene="2"] .scene-nav { background:color-mix(in oklch,var(--color-scene-night) 72%,transparent); }
body[data-scene="board"] .scene-nav button[aria-current="page"],body[data-scene="2"] .scene-nav button[aria-current="page"] { background:var(--color-scene-lime);color:var(--color-scene-night); }
body[data-scene="board"] .scene-atmosphere { opacity:.52; }
body[data-scene="2"] .scene-atmosphere { opacity:.4; }
body[data-scene="board"] .scene-cursor-light { opacity:.22; }

.outside-track { transition-duration:.86s!important;transition-timing-function:cubic-bezier(.2,.72,.18,1)!important;backface-visibility:hidden; }
.outside-track.is-sliding { will-change:transform; }
body.scene-sliding .pastoral-background::before,
body.scene-sliding .pastoral-background::after { animation-play-state:paused; }
body.scene-sliding .scene-cursor-light { opacity:0; }

/* The landscape moves as one continuous environment; no foreground glyph particles. */
.pastoral-background {
  overflow:hidden;
  background:none!important;
}
.pastoral-background::before,
.pastoral-background::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
.pastoral-background::before {
  inset:-5%;
  background:url("assets/pastoral-background-v2.png") center 48% / cover no-repeat;
  will-change:transform;
  animation:pastoralLoop 14s var(--ease-in-out) infinite alternate;
}
.pastoral-background::after {
  inset:-24% -36%;
  background:
    radial-gradient(circle at 32% 35%,color-mix(in oklch,var(--color-scene-glow) 30%,transparent),transparent 24%),
    radial-gradient(circle at 68% 62%,color-mix(in oklch,var(--color-scene-lime) 9%,transparent),transparent 31%);
  mix-blend-mode:soft-light;
  opacity:.34;
  filter:blur(24px);
  will-change:transform,opacity;
  animation:pastoralLightLoop 18s var(--ease-in-out) infinite alternate;
}
@keyframes pastoralLoop {
  from { transform:translate3d(-3.6%,-1.15%,0) scale(1.05); }
  to { transform:translate3d(3.8%,1.35%,0) scale(1.095); }
}
@keyframes pastoralLightLoop {
  from { transform:translate3d(-11%,-.5%,0);opacity:.2; }
  to { transform:translate3d(11%,-2.75%,0);opacity:.52; }
}

.mode-guide {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:min(360px,calc(100vw - 48px));
  padding:8px 11px 8px 8px;
  border:1px solid color-mix(in oklch,var(--color-scene-ink) 20%,transparent);
  border-inline-start:4px solid var(--color-scene-lime);
  border-radius:7px;
  background:var(--color-paper-soft);
  box-shadow:0 8px 20px color-mix(in oklch,var(--color-shadow) 42%,transparent);
  pointer-events:none;
  animation:modeGuideEnter 260ms var(--ease-out) both;
}
.mode-guide span {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding-inline:7px;
  border-radius:4px;
  background:var(--color-scene-ink);
  color:var(--color-scene-lime)!important;
  white-space:nowrap;
}
.mode-guide p {
  margin:0;
  color:color-mix(in oklch,var(--color-scene-ink) 78%,transparent)!important;
  font-size:11px;
  line-height:1.4;
}
@keyframes modeGuideEnter { from { opacity:0;translate:0 8px; } to { opacity:1;translate:0 0; } }

.markdown-view a {
  color:#174f8f;
  font-weight:750;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.markdown-view a:hover { color:#0c315a; }
.markdown-view a:focus-visible { outline:2px solid currentColor;outline-offset:3px;border-radius:2px; }
body.code-desktop-mode .code-file-content a { color:var(--color-scene-lime); }
body.code-desktop-mode .code-file-content a:hover { color:var(--color-paper-soft); }

body.workspace-entered:not(.inner-mode) .desk-printer,
body.workspace-entered:not(.inner-mode) .desk-trash {
  visibility:hidden;
  opacity:0!important;
  pointer-events:none!important;
}

body.inner-mode .desktop-icon,body.inner-mode .custom-inner-icon { animation:archiveItemEnter 520ms var(--ease-out) both; }
body.inner-mode .desktop-icon:nth-child(2),body.inner-mode .custom-inner-icon:nth-child(2) { animation-delay:70ms; }
body.inner-mode .desktop-icon:nth-child(3),body.inner-mode .custom-inner-icon:nth-child(3) { animation-delay:140ms; }
@keyframes archiveItemEnter { from { opacity:0;translate:0 12px;filter:blur(4px); } to { opacity:1;translate:0 0;filter:none; } }

@media (max-width:900px) {
  .scene-chrome { inset:20px 20px auto; }
  .scene-signature small { display:none; }
  .scene-nav { gap:2px;padding:3px; }
  .scene-nav button { min-height:32px;padding-inline:9px;font-size:10px; }
  .hero-copy { inset-block-start:9.2vh!important;inset-inline-start:20px!important;width:calc(100vw - 40px)!important; }
  .hero-index { width:100%; }
  .hero-copy h1 { font-size:clamp(3.65rem,15vw,7rem)!important;line-height:.78!important; }
  .hero-copy h1 > span:nth-child(2) { margin-inline-start:5vw; }
}

@media (max-width:560px) {
  .scene-chrome { grid-template-columns:auto 1fr;gap:10px;align-items:center; }
  .scene-signature > span { font-size:16px; }
  .scene-nav { justify-self:end; }
  .scene-nav button { padding-inline:7px;font-size:9px; }
  .hero-index span:last-child { display:none; }
  .hero-copy { inset-block-start:10.5vh!important; }
  .hero-copy h1 { font-size:clamp(3.35rem,17.2vw,5.2rem)!important;letter-spacing:-.085em!important;white-space:normal; }
  .hero-copy h1 > span { width:max-content;max-width:100%; }
  .scene-beam { width:90vw; }
  .scene-cursor-light { display:none; }
  body:not(.workspace-entered) .computer-stage { top:40vh!important; }
}

@media (prefers-reduced-motion:reduce) {
  .pastoral-background,.ambient-grid,.hero-copy { transform:none!important; }
  .scene-beam { display:none; }
  .scene-cursor-light { display:none; }
  .pastoral-background::before,.pastoral-background::after { animation:none!important; }
  .pastoral-background::before { transform:scale(1.065)!important; }
  .pastoral-background::after { transform:none!important;opacity:.3!important; }
  .scene-chrome,.hero-index,.hero-copy h1 > span,.monitor-motion-shell { opacity:1!important;translate:0 0!important;clip-path:none!important;filter:none!important; }
  .screen-home,.desk-printer,.mouse,.computer-tower,.outer-item,.felt-canvas-shell,.desktop-icon,.custom-inner-icon { animation:none!important; }
  .outside-track { transition-duration:150ms!important; }
  .mode-guide { animation:none!important; }
}