:root {
  /* Typography compliance tokens from DESIGN.md: Space Grotesk* Grotesk* IBM Plex Mono* Inter*. */
  --navy: #071426;
  --black: #020712;
  --gunmetal: #5D6878;
  --steel: #C7D0DC;
  --cyan: #35F3FF;
  --magenta: #FF4FD8;
  --amber: #FFB84D;
  --cream: #F2E8D0;
  --display: 'Space Grotesk', 'Arial Black', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --sticker: 'Bungee', Impact, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
}

.hull-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(53,243,255,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 30%, rgba(255,79,216,.18) 0 1px, transparent 1.4px),
    linear-gradient(rgba(199,208,220,.045) 50%, transparent 50%);
  background-size: 23px 31px, 37px 41px, 100% 5px;
}

.machine-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: 9px;
  padding: 10px 8px;
  border: 1px solid rgba(199,208,220,.28);
  border-radius: 999px;
  background: rgba(2,7,18,.72);
  box-shadow: inset 0 0 18px rgba(53,243,255,.08), 0 18px 40px rgba(0,0,0,.5);
}
.machine-nav a {
  color: var(--steel);
  text-decoration: none;
  font: 600 .62rem var(--mono);
  writing-mode: vertical-rl;
  letter-spacing: .12em;
  padding: 8px 5px;
  border-radius: 12px;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.machine-nav a.active { color: var(--black); background: var(--cyan); box-shadow: 0 0 18px rgba(53,243,255,.75); }

.console {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 6%, rgba(53,243,255,.22), transparent 23vw),
    radial-gradient(circle at 85% 28%, rgba(255,79,216,.13), transparent 22vw),
    linear-gradient(90deg, rgba(199,208,220,.035) 1px, transparent 1px) 0 0 / 68px 68px,
    var(--black);
}

.machine-floor {
  position: relative;
  min-height: 104vh;
  padding: clamp(24px, 5vw, 72px);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.machine-floor + .machine-floor { margin-top: -12vh; }
.machine-floor::before {
  content: attr(data-floor);
  position: absolute;
  left: clamp(18px, 3vw, 42px);
  top: 50%;
  color: rgba(199,208,220,.16);
  font: 700 clamp(7rem, 18vw, 18rem)/1 var(--display);
  transform: translateY(-50%) rotate(-90deg);
  z-index: -1;
}

.cabinet-frame, .floor-plate {
  position: relative;
  width: min(1180px, 100%);
  min-height: min(760px, 86vh);
  border: 1px solid rgba(199,208,220,.42);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(199,208,220,.13), transparent 22%),
    linear-gradient(180deg, rgba(7,20,38,.96), rgba(2,7,18,.98));
  box-shadow:
    inset 0 0 0 10px rgba(93,104,120,.18),
    inset 0 0 0 11px rgba(199,208,220,.12),
    0 35px 80px rgba(0,0,0,.62),
    0 -5px 0 rgba(53,243,255,.12);
  overflow: hidden;
}
.cabinet-frame::before, .floor-plate::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(199,208,220,.22);
  border-radius: 24px;
  pointer-events: none;
}
.cabinet-frame::after, .floor-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,184,77,.06) 18px 22px);
  mask: linear-gradient(#000 0 0) left top / 180px 100% no-repeat, linear-gradient(#000 0 0) right bottom / 220px 50% no-repeat;
  pointer-events: none;
}

.status-strip {
  position: absolute;
  top: 28px;
  left: 34px;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--steel);
  font: 600 .75rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: blink 1.7s infinite; }
.delay-a { animation-delay: .35s; background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.delay-b { animation-delay: .75s; background: var(--magenta); box-shadow: 0 0 18px var(--magenta); }

.wordmark-rig {
  position: absolute;
  left: clamp(26px, 7vw, 92px);
  top: 18%;
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, .8vw, 9px);
  filter: drop-shadow(0 22px 0 rgba(0,0,0,.35));
}
.letter-part {
  display: inline-grid;
  place-items: center;
  width: clamp(48px, 10vw, 120px);
  height: clamp(72px, 13vw, 158px);
  color: var(--black);
  background: linear-gradient(145deg, var(--cream), var(--steel) 48%, var(--gunmetal));
  border: 3px solid rgba(242,232,208,.9);
  border-radius: 26px 26px 18px 18px;
  font: 700 clamp(3rem, 10vw, 9rem)/1 var(--display);
  letter-spacing: -.12em;
  box-shadow: inset -10px -12px 0 rgba(2,7,18,.25), inset 8px 8px 0 rgba(255,255,255,.18), 0 0 28px rgba(53,243,255,.12);
  animation: dropSnap 1.35s cubic-bezier(.2,1.4,.24,1) both;
}
.p-two { animation-delay: .11s; }
.u-part { animation-delay: .22s; color: var(--cyan); background: linear-gradient(145deg, var(--navy), var(--gunmetal)); }
.z-one { animation-delay: .34s; color: var(--magenta); }
.z-two { animation-delay: .45s; color: var(--amber); }
.l-part { animation-delay: .55s; }
.wordmark-rig small { color: var(--cyan); font: 700 clamp(1.2rem, 3vw, 3rem) var(--display); margin-left: .25em; text-shadow: 0 0 20px var(--cyan); }

.boot-copy {
  position: absolute;
  left: clamp(32px, 7vw, 96px);
  bottom: clamp(36px, 8vw, 96px);
  max-width: 680px;
}
h1, h2 { font-family: var(--display); margin: 0 0 18px; letter-spacing: -.055em; line-height: .92; }
h1 { font-size: clamp(3.3rem, 8.6vw, 8.4rem); }
h2 { font-size: clamp(2.1rem, 5.2vw, 5.2rem); }
p { color: rgba(242,232,208,.78); font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.7; margin: 0 0 16px; }
.mono-chip, .metal-label {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px solid rgba(53,243,255,.32);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53,243,255,.06);
  font: 600 .72rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.p-handle { position: absolute; right: 10%; bottom: 12%; width: 150px; height: 220px; border: 16px solid var(--magenta); border-left-width: 34px; border-radius: 42px; opacity: .55; filter: drop-shadow(0 0 28px rgba(255,79,216,.45)); animation: hoverPiece 3.8s ease-in-out infinite; }
.p-handle span { position: absolute; left: 36px; top: 42px; width: 56px; height: 58px; border: 14px solid var(--magenta); border-radius: 50%; }

.floor-plate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; padding: clamp(28px, 5vw, 70px); align-items: center; }
.title-plate {
  position: absolute;
  top: 28px;
  left: 34px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(199,208,220,.36);
  background: linear-gradient(180deg, rgba(93,104,120,.8), rgba(7,20,38,.85));
  box-shadow: 0 12px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.title-plate span { color: var(--cream); font: 700 clamp(1.1rem, 2vw, 1.65rem) var(--display); letter-spacing: -.03em; }
.title-plate b { color: var(--cyan); font: 600 .82rem var(--mono); }
.magenta b { color: var(--magenta); }
.amber-title b { color: var(--amber); }

.rail-board { grid-column: 1 / 8; min-height: 470px; position: relative; border-radius: 28px; border: 1px solid rgba(199,208,220,.28); background: linear-gradient(90deg, rgba(53,243,255,.08) 1px, transparent 1px) 0 0 / 54px 54px, rgba(2,7,18,.42); box-shadow: inset 0 0 40px rgba(53,243,255,.08); }
.rail-board::before, .elastic-rail::before { content: ""; position: absolute; left: 8%; right: 8%; top: 48%; height: 8px; border-radius: 20px; background: linear-gradient(90deg, var(--cyan), var(--gunmetal), var(--amber)); box-shadow: 0 0 26px rgba(53,243,255,.3); }
.code-tile { position: absolute; min-width: 210px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(199,208,220,.42); background: linear-gradient(145deg, rgba(199,208,220,.2), rgba(7,20,38,.94)); color: var(--cream); font: 600 .86rem var(--mono); box-shadow: 0 18px 30px rgba(0,0,0,.38); transition: transform .45s cubic-bezier(.17,1.6,.3,1), border-color .3s ease; }
.code-tile:hover { transform: translateY(-12px) scale(1.04) rotate(-2deg); border-color: var(--cyan); }
.snap-tile { left: 8%; top: 22%; transform: rotate(-4deg); }
.socketed { right: 9%; top: 42%; color: var(--cyan); }
.amber { left: 28%; bottom: 16%; color: var(--amber); transform: rotate(3deg); }
.u-socket { position: absolute; right: 12%; bottom: 12%; width: 170px; height: 130px; border: 18px solid var(--cyan); border-top: 0; border-radius: 0 0 70px 70px; opacity: .52; box-shadow: 0 0 25px rgba(53,243,255,.35); }
.narrative-card { grid-column: 8 / 13; padding: clamp(24px, 4vw, 44px); border-radius: 28px; border: 1px solid rgba(199,208,220,.35); background: rgba(7,20,38,.72); box-shadow: 0 22px 50px rgba(0,0,0,.45), inset 0 0 0 8px rgba(93,104,120,.13); }

.duotone-window { grid-column: 1 / 8; position: relative; height: 520px; border-radius: 30px; overflow: hidden; border: 1px solid rgba(199,208,220,.42); background: var(--navy); box-shadow: inset 0 0 0 12px rgba(2,7,18,.5), 0 35px 60px rgba(0,0,0,.46); }
.photo-slice { position: absolute; top: 8%; bottom: 8%; width: 30%; border-radius: 22px; background-image: radial-gradient(circle at 50% 28%, rgba(242,232,208,.62), transparent 16%), radial-gradient(ellipse at 55% 58%, rgba(199,208,220,.55), transparent 28%), linear-gradient(135deg, rgba(53,243,255,.95), rgba(7,20,38,.82) 45%, rgba(255,79,216,.75)); background-blend-mode: screen, multiply, normal; filter: contrast(1.15) saturate(1.35); transition: transform .65s cubic-bezier(.2,1.45,.22,1); }
.slice-a { left: 9%; transform: translateY(22px) rotate(-3deg); }
.slice-b { left: 35%; transform: translateY(-18px) rotate(2deg); background-image: radial-gradient(circle at 48% 28%, rgba(242,232,208,.45), transparent 15%), radial-gradient(ellipse at 52% 60%, rgba(255,184,77,.52), transparent 30%), linear-gradient(135deg, rgba(255,184,77,.88), rgba(7,20,38,.85) 48%, rgba(53,243,255,.5)); }
.slice-c { right: 9%; transform: translateY(31px) rotate(4deg); }
.duotone-window:hover .photo-slice { transform: translateY(0) rotate(0deg); }
.lens { position: absolute; right: 11%; top: 13%; width: 118px; height: 118px; border-radius: 50%; border: 2px solid var(--cyan); background: radial-gradient(circle, rgba(53,243,255,.32), rgba(2,7,18,.62)); box-shadow: 0 0 30px rgba(53,243,255,.45); display: grid; place-items: center; color: var(--cyan); font: 600 .76rem var(--mono); text-transform: uppercase; }
.side-card { grid-column: 8 / 13; transform: translateY(55px); }
.z-bridge { position: absolute; right: 9%; bottom: 10%; width: 210px; height: 120px; opacity: .75; }
.z-bridge i { position: absolute; height: 12px; width: 120px; background: var(--magenta); box-shadow: 0 0 20px rgba(255,79,216,.55); }
.z-bridge i:nth-child(1) { left: 0; top: 0; }
.z-bridge i:nth-child(2) { left: 38px; top: 48px; transform: rotate(-35deg); }
.z-bridge i:nth-child(3) { right: 0; bottom: 0; }

.builder-plate { align-content: center; }
.artifact-row { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 30px); margin-top: 62px; }
.artifact-card { position: relative; min-height: 360px; padding: 28px; border-radius: 28px; border: 1px solid rgba(199,208,220,.34); background: linear-gradient(145deg, rgba(93,104,120,.34), rgba(7,20,38,.92)); box-shadow: 0 26px 46px rgba(0,0,0,.42), inset 0 0 0 8px rgba(2,7,18,.28); transition: transform .5s cubic-bezier(.18,1.55,.2,1), box-shadow .35s ease; overflow: hidden; }
.artifact-card::before { content: ""; position: absolute; width: 72px; height: 72px; right: -18px; top: 42%; border-radius: 50%; background: var(--black); border: 1px solid rgba(199,208,220,.32); }
.artifact-card::after { content: attr(data-hidden); position: absolute; left: 24px; right: 24px; bottom: 22px; padding: 10px 12px; border-radius: 12px; color: var(--black); background: var(--cyan); font: 600 .68rem var(--mono); transform: translateY(24px); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.artifact-card:hover { transform: translateY(-18px) rotate(var(--tilt, -1deg)); box-shadow: 0 36px 60px rgba(0,0,0,.5), 0 0 26px rgba(53,243,255,.16); }
.artifact-card:hover::after { transform: translateY(0); opacity: 1; }
.tall { margin-top: -34px; --tilt: 1.2deg; }
.offset { margin-top: 38px; --tilt: -1.7deg; }
.arcade-sticker { position: absolute; right: 24px; top: 24px; color: var(--black); background: var(--amber); transform: rotate(8deg); padding: 4px 8px; border-radius: 8px; font: 400 .68rem var(--sticker); }
.arcade-sticker.mag { background: var(--magenta); }
.elastic-rail { grid-column: 2 / 12; position: relative; height: 100px; }
.elastic-rail span { position: absolute; top: 36px; width: 24px; height: 24px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); animation: boltRun 3.8s ease-in-out infinite; }
.elastic-rail span:nth-child(1) { left: 12%; }
.elastic-rail span:nth-child(2) { left: 46%; animation-delay: .4s; background: var(--magenta); box-shadow: 0 0 22px var(--magenta); }
.elastic-rail span:nth-child(3) { right: 12%; animation-delay: .8s; background: var(--amber); box-shadow: 0 0 22px var(--amber); }

.final-plate { min-height: 82vh; }
.final-copy { grid-column: 1 / 7; padding-top: 60px; }
.empty-socket { grid-column: 8 / 12; justify-self: center; position: relative; width: min(330px, 80vw); height: 330px; border-radius: 52px; border: 3px solid rgba(53,243,255,.62); background: radial-gradient(circle, rgba(53,243,255,.14), rgba(2,7,18,.72) 60%); box-shadow: inset 0 0 45px rgba(53,243,255,.22), 0 0 40px rgba(53,243,255,.25); display: grid; place-items: center; }
.hover-tile { width: 154px; height: 154px; display: grid; place-items: center; border-radius: 30px; background: linear-gradient(145deg, var(--cream), var(--steel)); color: var(--black); font: 700 6rem var(--display); animation: unsolvedHover 2.9s ease-in-out infinite; box-shadow: 0 25px 30px rgba(0,0,0,.4), inset -10px -12px 0 rgba(2,7,18,.18); }
.socket-glow { position: absolute; inset: 28px; border-radius: 42px; border: 1px dashed var(--cyan); animation: pulseSocket 2.4s infinite; }
.mail-plate { grid-column: 1 / 7; align-self: end; width: max-content; color: var(--black); background: var(--cream); text-decoration: none; padding: 16px 24px; border-radius: 16px; font: 700 clamp(1.2rem, 2vw, 1.8rem) var(--display); box-shadow: 0 14px 0 rgba(93,104,120,.5); transition: transform .32s cubic-bezier(.2,1.5,.3,1); }
.mail-plate:hover { transform: translateY(-8px) rotate(-1deg); }

.machine-floor.in-view .floor-plate, .machine-floor.in-view .cabinet-frame { animation: plateSlide .9s cubic-bezier(.2,1.25,.24,1) both; }
.machine-floor.in-view .title-plate { animation: wobbleLabel .9s .2s cubic-bezier(.2,1.65,.25,1) both; }

@keyframes blink { 0%, 100% { opacity: .25; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.15); } }
@keyframes dropSnap { 0% { opacity: 0; transform: translateY(-120vh) rotate(-18deg) scale(.8); } 72% { opacity: 1; transform: translateY(18px) rotate(5deg) scale(1.04); } 86% { transform: translateY(-10px) rotate(-2deg) scale(.98); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } }
@keyframes hoverPiece { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-18px) rotate(-3deg); } }
@keyframes plateSlide { from { transform: translateY(84px) scale(.985); opacity: .55; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes wobbleLabel { 0% { transform: translateY(-22px) rotate(-5deg); opacity: 0; } 60% { transform: translateY(5px) rotate(3deg); opacity: 1; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes boltRun { 0%, 100% { transform: translateX(-16px) scale(.85); } 50% { transform: translateX(16px) scale(1.18); } }
@keyframes unsolvedHover { 0%, 100% { transform: translateY(-26px) rotate(-5deg); } 50% { transform: translateY(10px) rotate(4deg); } }
@keyframes pulseSocket { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.03); } }

@media (max-width: 880px) {
  .machine-nav { right: 8px; }
  .machine-floor { padding: 20px 12px; min-height: 100vh; }
  .cabinet-frame, .floor-plate { min-height: 860px; border-radius: 24px; }
  .floor-plate { grid-template-columns: 1fr; padding: 88px 20px 28px; }
  .wordmark-rig { top: 13%; left: 22px; }
  .boot-copy { left: 24px; right: 24px; bottom: 48px; }
  .p-handle { opacity: .24; right: -30px; }
  .rail-board, .narrative-card, .duotone-window, .side-card, .artifact-row, .elastic-rail, .final-copy, .empty-socket, .mail-plate { grid-column: 1; }
  .artifact-row { grid-template-columns: 1fr; margin-top: 20px; }
  .tall, .offset, .side-card { margin-top: 0; transform: none; }
  .duotone-window { height: 430px; }
  .empty-socket { width: 280px; height: 280px; }
}