:root {
  /* Typography compliance tokens from DESIGN.md: IBM Plex Mono Monoo Mono** primary wordmark IBM Plex Mono. Monoo. Mono**. Behind large titles expressive short phrases Space Mono Monoo */
  --graphite: #111827;
  --slate: #263241;
  --mist: #B8C2CC;
  --frost: #E8EEF3;
  --cyan: #7DD3FC;
  --lavender: #B4A7FF;
  --blush: #F6A6C8;
  --cream: #FFF7DF;
  --rail: rgba(232, 238, 243, .08);
  --line: rgba(184, 194, 204, .18);
  --grid-x: 0px;
  --grid-y: 0px;
  --tilt: 0deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--graphite);
  color: var(--mist);
  font-family: "IBM Plex Mono", "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: hidden;
}

.grid-shift {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 31px, var(--line) 32px, transparent 33px),
    linear-gradient(0deg, transparent 31px, var(--line) 32px, transparent 33px),
    radial-gradient(circle at 62% 24%, rgba(125, 211, 252, .12), transparent 28%),
    radial-gradient(circle at 18% 77%, rgba(246, 166, 200, .09), transparent 30%),
    linear-gradient(135deg, var(--graphite), #151f2b 48%, var(--slate));
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  background-position: var(--grid-x) var(--grid-y), var(--grid-x) var(--grid-y), center, center, center;
  z-index: -3;
  transition: background-position .8s ease;
}

.grid-shift::before {
  content: "";
  position: absolute;
  inset: 9% 7% 7% 12%;
  border: 1px solid rgba(232, 238, 243, .11);
  border-radius: 34px;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .06), 0 0 80px rgba(125, 211, 252, .05);
}

.pixel-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.pixel {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--mist);
  opacity: .18;
  animation: pixelBlink 4.8s ease-in-out infinite;
}

.stage-rail {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 88px;
  padding: 14px 10px;
  border: 1px solid rgba(232, 238, 243, .15);
  border-radius: 28px;
  background: rgba(17, 24, 39, .68);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}
.rail-mark {
  color: var(--frost);
  letter-spacing: .22em;
  font-size: 11px;
  text-align: center;
  margin: 4px 0 20px;
}
.rail-link {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(184, 194, 204, .72);
  text-decoration: none;
  writing-mode: vertical-rl;
  margin: 13px auto;
  min-height: 62px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: lowercase;
  transition: color .25s ease, transform .25s ease;
}
.rail-link span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(184, 194, 204, .35);
  box-shadow: 0 0 0 4px transparent;
  transition: background .25s ease, box-shadow .25s ease;
}
.rail-link:hover, .rail-link.active { color: var(--frost); transform: scale(1.06); }
.rail-link.active span { background: var(--cyan); box-shadow: 0 0 16px rgba(125, 211, 252, .75); }
.status-glyph {
  position: relative;
  width: 42px;
  height: 42px;
  margin: 17px auto 2px;
  border: 1px solid rgba(125, 211, 252, .42);
  border-radius: 50%;
  background: rgba(125, 211, 252, .08);
  animation: breathe 3.4s ease-in-out infinite;
}
.status-glyph i, .status-glyph b { position: absolute; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; top: 15px; }
.status-glyph i { left: 12px; } .status-glyph b { right: 12px; }
.status-glyph::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 12px; height: 6px; border-bottom: 2px solid var(--blush); border-radius: 0 0 12px 12px; }

.desk { width: 100%; }
.scene {
  min-height: 100vh;
  position: relative;
  padding: 9vh 7vw 9vh 150px;
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(420px, 1fr);
  gap: 5vw;
  align-items: center;
}
.scene::before {
  content: attr(data-scene);
  position: absolute;
  right: 4vw;
  top: 28px;
  font-family: "Azeret Mono", monospace;
  color: rgba(184, 194, 204, .25);
  letter-spacing: .4em;
  font-size: 10px;
}
.scene-copy { position: relative; z-index: 3; }
.kicker {
  font-family: "Azeret Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--cyan);
  font-size: 11px;
}
h1 {
  font-family: "IBM Plex Mono", monospace;
  color: var(--frost);
  font-weight: 500;
  letter-spacing: .08em;
  font-size: clamp(38px, 6vw, 92px);
  line-height: .98;
  margin: 18px 0;
  text-shadow: 0 0 42px rgba(125, 211, 252, .13);
}
h2 {
  font-family: "Space Mono", monospace;
  color: var(--frost);
  font-weight: 700;
  text-transform: lowercase;
  font-size: clamp(36px, 6vw, 84px);
  letter-spacing: -.055em;
  line-height: .98;
  margin: 16px 0 20px;
}
p { line-height: 1.8; font-size: 15px; max-width: 560px; }
.aside { color: rgba(232, 238, 243, .78); }

.avatar-board {
  position: relative;
  min-height: 72vh;
  transform: rotate(var(--tilt));
  transition: transform .9s ease;
}
.avatar-svg { width: min(72vh, 100%); max-width: 760px; display: block; margin: auto; overflow: visible; }
.avatar-svg path, .avatar-svg circle, .avatar-svg ellipse, .avatar-svg rect {
  fill: none;
  stroke: rgba(232, 238, 243, .46);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.construction-lines * { stroke: rgba(184, 194, 204, .26); stroke-dasharray: 8 12; animation: draft 16s linear infinite; }
.hair-splines path { stroke: var(--lavender); stroke-width: 3; stroke-dasharray: 620; stroke-dashoffset: 620; animation: assemble 3.8s ease forwards, drift 5s ease-in-out infinite 4s; filter: url(#glow); }
.face-lines * { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 210; stroke-dashoffset: 210; animation: assemble 2.6s ease forwards 1.2s; }
.body-rig * { stroke: rgba(246, 166, 200, .72); stroke-dasharray: 520; stroke-dashoffset: 520; animation: assemble 3s ease forwards 1.8s; }
.orbit-paths * { stroke: rgba(125, 211, 252, .24); stroke-dasharray: 10 16; animation: draft 22s linear infinite reverse; }
.nodes * { stroke: var(--cream); }
.node { transform-box: fill-box; transform-origin: center; animation: nodeBreathe 3.5s ease-in-out infinite; cursor: pointer; }
.node:hover { filter: drop-shadow(0 0 13px rgba(255, 247, 223, .7)); }

.annotation {
  position: absolute;
  padding: 8px 12px;
  border: 1px solid rgba(232, 238, 243, .22);
  border-radius: 999px;
  color: var(--frost);
  background: rgba(38, 50, 65, .72);
  font-size: 11px;
  letter-spacing: .2em;
  opacity: 0;
  transform: translateY(10px) scale(.94);
  animation: tagIn .7s ease forwards;
}
.tag-mood { left: 8%; top: 49%; animation-delay: 2.6s; }
.tag-schedule { right: 18%; top: 13%; animation-delay: 2.9s; }
.tag-collab { right: 4%; top: 43%; animation-delay: 3.2s; }
.tag-clip { left: 19%; bottom: 10%; animation-delay: 3.5s; }
.tag-costume { right: 10%; bottom: 14%; animation-delay: 3.8s; }
.sticky-note {
  position: absolute;
  left: 9%;
  bottom: 23%;
  width: 150px;
  padding: 16px;
  color: var(--slate);
  background: var(--cream);
  border-radius: 6px 18px 7px 14px;
  font-family: "Azeret Mono", monospace;
  font-size: 12px;
  transform: rotate(-4deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.layer-scene { grid-template-columns: minmax(320px, 480px) minmax(460px, 1fr); }
.vector-panel {
  min-height: 520px;
  position: relative;
  border: 1px solid rgba(232, 238, 243, .14);
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(232,238,243,.08), rgba(38,50,65,.22));
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .06), 0 30px 90px rgba(0, 0, 0, .2);
  overflow: hidden;
}
.vector-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 39px, rgba(184,194,204,.11) 40px), linear-gradient(0deg, transparent 39px, rgba(184,194,204,.11) 40px);
  background-size: 40px 40px;
  opacity: .65;
}
.vector-panel svg { position: absolute; inset: 9%; width: 82%; height: 82%; overflow: visible; }
.vector-panel svg path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 12 14; animation: draft 18s linear infinite; }
.expression {
  position: absolute;
  z-index: 2;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 238, 243, .24);
  border-radius: 34px;
  background: rgba(17, 24, 39, .62);
  color: var(--frost);
  font-family: "Space Mono", monospace;
  font-size: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.expression small { position: absolute; bottom: 14px; font: 10px "Azeret Mono", monospace; letter-spacing: .18em; color: var(--cyan); }
.expression:hover, .costume-chip:hover, .helper-sprite:hover, .moon:hover { transform: scale(1.1) rotate(-2deg); box-shadow: 0 20px 55px rgba(125, 211, 252, .16); }
.calm { left: 11%; top: 14%; } .bright { right: 13%; top: 24%; } .focus { left: 38%; bottom: 13%; }
.chat-particles i {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 15px;
  border: 1px solid var(--blush);
  border-radius: 14px 14px 14px 3px;
  animation: floaty 5s ease-in-out infinite;
}
.chat-particles i:nth-child(1){ left:18%; bottom:21%; } .chat-particles i:nth-child(2){ left:30%; top:20%; animation-delay:.7s; } .chat-particles i:nth-child(3){ right:27%; bottom:27%; animation-delay:1.4s; } .chat-particles i:nth-child(4){ right:15%; top:14%; animation-delay:2.1s; } .chat-particles i:nth-child(5){ left:52%; top:45%; animation-delay:2.8s; } .chat-particles i:nth-child(6){ left:14%; top:53%; animation-delay:3.5s; }

.calendar-orbit::after, .radar::after { content: ""; position: absolute; inset: 70px; border: 1px dashed rgba(125, 211, 252, .32); border-radius: 50%; animation: slowRotate 24s linear infinite; }
.moon, .costume-chip, .helper-sprite {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.moon { width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 247, 223, .1); border: 1px solid var(--cream); color: var(--cream); font: 12px "Azeret Mono", monospace; }
.moon-a { left: 20%; top: 19%; } .moon-b { right: 18%; top: 31%; } .moon-c { left: 45%; bottom: 13%; }
.costume-chip { padding: 15px 18px; border-radius: 16px; font-size: 11px; letter-spacing: .12em; color: var(--graphite); }
.costume-chip.cyan { left: 10%; bottom: 21%; background: var(--cyan); } .costume-chip.blush { right: 12%; bottom: 22%; background: var(--blush); } .costume-chip.lavender { left: 42%; top: 13%; background: var(--lavender); }
.microphone { position: absolute; inset: 0; margin: auto; width: 72px; height: 116px; border: 2px solid var(--frost); border-radius: 36px 36px 28px 28px; opacity: .7; }
.microphone::before { content:""; position:absolute; left:50%; top:100%; width:2px; height:52px; background:var(--frost); } .microphone::after { content:""; position:absolute; left:20px; right:20px; bottom:-56px; height:2px; background:var(--frost); }
.microphone span { position:absolute; left:18px; right:18px; top:20px; height:2px; background:var(--cyan); box-shadow:0 14px 0 var(--cyan), 0 28px 0 var(--cyan); }

.radar-ring { position: absolute; inset: 50%; border: 1px solid rgba(232,238,243,.2); border-radius: 50%; transform: translate(-50%, -50%); }
.r1 { width: 150px; height: 150px; } .r2 { width: 280px; height: 280px; } .r3 { width: 410px; height: 410px; }
.helper-sprite { width: 84px; height: 84px; border-radius: 28px; background: rgba(180, 167, 255, .12); border: 1px solid var(--lavender); color: var(--lavender); font: 28px "Space Mono", monospace; }
.sprite-a { left: 16%; top: 18%; } .sprite-b { right: 15%; top: 16%; } .sprite-c { left: 49%; bottom: 14%; }

.scene-curtain { display: grid; place-items: center; grid-template-columns: 1fr; }
.curtain-card {
  width: min(820px, 88vw);
  min-height: 520px;
  border: 1px solid rgba(255, 247, 223, .24);
  border-radius: 48px;
  padding: clamp(30px, 6vw, 70px);
  background: radial-gradient(circle at 50% 70%, rgba(255,247,223,.12), transparent 26%), linear-gradient(135deg, rgba(38,50,65,.78), rgba(17,24,39,.82));
  box-shadow: 0 40px 120px rgba(0,0,0,.32);
  text-align: center;
}
.curtain-card p { margin-left: auto; margin-right: auto; }
.settled-constellation { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
.settled-constellation span { border: 1px solid rgba(232,238,243,.24); border-radius: 999px; padding: 11px 16px; color: var(--cream); background: rgba(255,247,223,.08); animation: nodeBreathe 3s ease-in-out infinite; }

@keyframes assemble { to { stroke-dashoffset: 0; } }
@keyframes draft { to { stroke-dashoffset: -240; } }
@keyframes drift { 50% { transform: translateY(6px); } }
@keyframes breathe { 50% { transform: scale(1.08); box-shadow: 0 0 24px rgba(125,211,252,.28); } }
@keyframes nodeBreathe { 50% { transform: scale(1.08); } }
@keyframes tagIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes floaty { 50% { transform: translate(8px, -14px) scale(1.08); } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes pixelBlink { 50% { opacity: .48; transform: scale(1.4); } }

@media (max-width: 900px) {
  .stage-rail { left: 12px; width: 68px; }
  .scene, .layer-scene { grid-template-columns: 1fr; padding: 110px 24px 70px 96px; }
  .avatar-board { min-height: 54vh; }
  .vector-panel { min-height: 460px; }
  h1 { font-size: clamp(34px, 11vw, 72px); word-break: break-word; }
}