:root {
  /* Font compliance tokens: IBM Plex Mono* Mono** from Google Fonts for boot messages; Space Grotesk* Grotesk** from Google Fonts for body copy. */
  --plaster: #F4E7D3;
  --terracotta: #C76F4A;
  --clay: #8F3F2C;
  --cream: #FFF4DE;
  --coffee: #2A1B17;
  --sage: #6F8A72;
  --green: #7CFF6B;
  --cyan: #65E7FF;
  --magenta: #FF4FA3;
  --border: 8px solid var(--coffee);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--plaster);
  color: var(--coffee);
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.noise,
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.noise {
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(143,63,44,.24) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(42,27,23,.18) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 49%, rgba(255,244,222,.28) 50%, transparent 51%);
  background-size: 19px 21px, 31px 29px, 7px 100%;
  mix-blend-mode: multiply;
}

.scanline {
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(101,231,255,.25) 6px, transparent 8px);
  transform: translateY(-100%);
  animation: scanDrift 8s linear infinite;
}

.room {
  min-height: 100vh;
  padding: clamp(24px, 4vw, 62px);
  position: relative;
  display: grid;
  align-items: center;
}

.cabinet-seam { box-shadow: 13px 13px 0 var(--clay), inset 0 0 0 4px rgba(255,244,222,.22); }

.boot-room { background: linear-gradient(135deg, var(--plaster), #ead3bb); }

.terracotta-frame {
  border: var(--border);
  background: var(--terracotta);
  min-height: 72vh;
  padding: clamp(20px, 4vw, 54px);
  display: grid;
  align-content: center;
  position: relative;
  transform: rotate(-.45deg);
}

.boot-meta {
  position: absolute;
  top: 22px;
  left: 28px;
  padding: 7px 12px;
  background: var(--cream);
  border: 3px solid var(--coffee);
  font-size: clamp(10px, 1vw, 13px);
}

.wordmark {
  margin: 0;
  color: var(--cream);
  font-family: "Archivo Black", Impact, system-ui, sans-serif;
  font-size: clamp(58px, 15vw, 214px);
  letter-spacing: -.09em;
  line-height: .76;
  text-transform: lowercase;
  text-shadow: 7px 7px 0 var(--clay);
  overflow: hidden;
}

.boot-part {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px) skewX(-8deg);
  filter: blur(5px);
}

.part-sim.booted { animation: bootIn .62s cubic-bezier(.2,.9,.2,1) forwards, tinyGlitch .36s .72s steps(2) both; }
.part-idiot.booted { animation: bootIn .8s .55s cubic-bezier(.2,.9,.2,1) forwards, rgbGlitch .5s 1.3s steps(3) both; }
.part-com.booted {
  animation: stampIn .58s 1.45s cubic-bezier(.2,.9,.2,1) forwards;
  background: var(--cream);
  color: var(--coffee);
  border: 5px solid var(--coffee);
  letter-spacing: -.06em;
  padding: .02em .06em .07em;
  margin-left: .04em;
  box-shadow: 5px 5px 0 var(--clay);
}

.cursor-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
  letter-spacing: .03em;
}

.cursor-block,
.prompt-cursor {
  width: 18px;
  height: 28px;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  animation: blink 1s steps(2) infinite;
}

.idiot-circuit { width: 100%; height: clamp(90px, 16vw, 180px); margin-top: 24px; overflow: visible; }
.trace { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 14; stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.trace-main { stroke: var(--green); filter: drop-shadow(0 0 9px var(--green)); }
.trace-wrong { stroke: var(--magenta); opacity: 0; filter: drop-shadow(0 0 12px var(--magenta)); }
.trace-pad, .trace-bulb { fill: var(--cream); stroke: var(--coffee); stroke-width: 7; }
.trace-bulb { filter: drop-shadow(0 0 0 transparent); }
.circuit-active .trace-main { animation: drawTrace 2.2s .3s ease-out forwards; }
.circuit-active .trace-wrong { animation: wrongTrace 1.2s 1.4s ease-out forwards; }
.circuit-active .trace-bulb { animation: bulbGlow .8s 2.42s ease-out forwards; }

.floppy-strip {
  position: absolute;
  left: clamp(26px, 6vw, 86px);
  bottom: clamp(24px, 3vw, 48px);
  background: var(--cream);
  border: 4px solid var(--coffee);
  padding: 10px 18px;
  transform: rotate(.7deg);
  box-shadow: 6px 6px 0 var(--clay);
}

.section-label {
  position: absolute;
  top: 28px;
  left: 34px;
  background: var(--cream);
  border: 3px solid var(--coffee);
  padding: 8px 12px;
  z-index: 3;
}

.drawer-room { background: var(--cream); }
.drawer-grid {
  display: grid;
  grid-template-columns: 1.35fr .75fr .55fr;
  grid-template-rows: 38vh 28vh;
  gap: clamp(14px, 2vw, 28px);
  width: 100%;
}

.drawer-block {
  border: var(--border);
  padding: clamp(18px, 3vw, 38px);
  position: relative;
  overflow: hidden;
  box-shadow: 8px 8px 0 rgba(42,27,23,.18), inset 0 0 0 4px rgba(42,27,23,.06);
}

.drawer-block h2,
.thought-copy h2,
.crash-copy h2,
.desktop-diorama h2 {
  font-family: "Archivo Black", Impact, system-ui, sans-serif;
  font-size: clamp(48px, 10vw, 150px);
  letter-spacing: -.08em;
  line-height: .82;
  margin: 0 0 22px;
}

.drawer-block p,
.thought-copy p,
.crash-copy p,
.desktop-diorama p {
  max-width: 54ch;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.2;
}

.giant { grid-row: span 2; }
.clay { background: var(--terracotta); color: var(--cream); }
.cream { background: var(--cream); }
.sage { background: var(--sage); color: var(--cream); }
.pause-panel { background: var(--plaster); display: grid; place-items: center; color: rgba(42,27,23,.35); font-size: clamp(38px, 8vw, 118px); }
.label-stack { transform: rotate(1.1deg); }
.circuit-column { transform: rotate(-.8deg); }
.jitter-block.is-jittering { animation: blockJitter .28s steps(2) 1; }

.misprint {
  display: inline-block;
  color: var(--green);
  background: var(--coffee);
  padding: 6px 11px;
  margin-bottom: 22px;
  box-shadow: 0 0 16px rgba(124,255,107,.5);
}
.misprint.swapped::after { content: attr(data-swap); color: var(--magenta); margin-left: 8px; }
.receipt { border: 3px dashed var(--coffee); background: var(--plaster); padding: 18px; line-height: 1.7; }
.dot-field, .bread-dots { position: absolute; inset: 18px; opacity: .35; background-image: radial-gradient(circle, var(--cream) 0 3px, transparent 4px); background-size: 26px 26px; }
.chip { position: absolute; inset: 38px 28px auto; height: 92px; background: var(--coffee); border-radius: 12px; display: flex; justify-content: space-around; padding: 14px; z-index: 2; }
.chip span { width: 10px; background: var(--green); box-shadow: 0 0 10px var(--green); }

.breadboard-room { background: linear-gradient(90deg, var(--plaster) 0 58%, #e8c6ad 58%); }
.breadboard-layout {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: clamp(22px, 4vw, 58px);
  border: var(--border);
  background: var(--cream);
  min-height: 76vh;
  padding: clamp(22px, 4vw, 52px);
}
.thought-copy { align-self: end; padding-top: 80px; }
.board {
  position: relative;
  min-height: 520px;
  background: var(--sage);
  border: var(--border);
  overflow: hidden;
  box-shadow: inset 18px 18px 0 rgba(255,244,222,.12);
}
.cabinet-circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.cabinet-trace { fill: none; stroke: var(--green); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 9px var(--green)); stroke-dasharray: 900; stroke-dashoffset: 900; }
.board.in-view .cabinet-trace { animation: drawTrace 2.8s ease-out forwards; }
.board.in-view .route-b { animation-delay: .3s; stroke: var(--magenta); }
.board.in-view .route-c { animation-delay: .7s; }
.pad { fill: var(--cream); stroke: var(--coffee); stroke-width: 6; }
.p4 { fill: var(--green); filter: drop-shadow(0 0 18px var(--green)); }
.dip-chip { position: absolute; right: 42px; bottom: 42px; background: var(--coffee); color: var(--cream); border: 5px solid var(--cream); padding: 18px 24px; z-index: 3; box-shadow: 9px 9px 0 var(--clay); }

.crash-room {
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 4vw, 60px);
  background: var(--terracotta);
  color: var(--cream);
}
.crt-window { border: var(--border); background: #203331; box-shadow: 0 0 46px rgba(101,231,255,.32), 14px 14px 0 var(--clay); overflow: hidden; transform: rotate(-.7deg); }
.crt-bar { height: 44px; background: var(--cream); color: var(--coffee); border-bottom: 6px solid var(--coffee); display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.crt-bar span { width: 17px; height: 17px; border: 3px solid var(--coffee); background: var(--magenta); }
.crt-bar span:nth-child(2) { background: var(--green); }
.crt-bar span:nth-child(3) { background: var(--cyan); }
.crt-content { min-height: 56vh; padding: clamp(22px, 4vw, 50px); color: var(--cyan); font-size: clamp(18px, 2.4vw, 34px); text-shadow: 0 0 12px rgba(101,231,255,.7); background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 3px, transparent 4px 8px); }
.glitch-line { position: relative; display: inline-block; color: var(--green); }
.glitch-line::before, .glitch-line::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; }
.glitch-line.active::before { color: var(--cyan); animation: shearGlitch .45s steps(2) 2; }
.glitch-line.active::after { color: var(--magenta); animation: shearGlitch .37s steps(2) 2 reverse; }
.warning-mascot { width: 96px; height: 86px; margin-top: 26px; background: var(--magenta); color: var(--cream); display: grid; place-items: center; font: 70px/1 "Archivo Black"; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 16px var(--magenta)); animation: mascotNod 2.2s ease-in-out infinite; }

.reboot-room { background: var(--plaster); }
.desktop-diorama {
  border: var(--border);
  background: var(--cream);
  min-height: 78vh;
  padding: clamp(22px, 4vw, 58px);
  position: relative;
  overflow: hidden;
  box-shadow: 16px 16px 0 var(--clay);
}
.cabinet-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; height: 180px; margin-bottom: 34px; }
.cabinet-mini div { background: var(--terracotta); border: 6px solid var(--coffee); box-shadow: inset 0 -22px 0 rgba(143,63,44,.55); }
.cabinet-mini div:nth-child(2) { transform: translateY(18px) rotate(1deg); background: var(--sage); }
.cabinet-mini div:nth-child(3) { transform: translateY(-8px); background: var(--plaster); }
.final-circuit { max-width: 560px; }
.final-trace { fill: none; stroke: var(--green); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px var(--green)); stroke-dasharray: 850; stroke-dashoffset: 850; animation: drawTrace 3s ease-out infinite alternate; }
.final-bulb { fill: var(--green); filter: drop-shadow(0 0 22px var(--green)); animation: blink 1.5s steps(2) infinite; }
.ok-prompt { position: absolute; right: clamp(22px, 5vw, 78px); bottom: clamp(24px, 5vw, 74px); display: flex; gap: 12px; align-items: center; font-size: clamp(30px, 5vw, 82px); color: var(--coffee); }

.room-nav {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 8px;
}
.room-nav button {
  background: var(--cream);
  color: var(--coffee);
  border: 3px solid var(--coffee);
  padding: 7px 10px;
  box-shadow: 4px 4px 0 var(--clay);
  cursor: pointer;
  font: inherit;
  transition: transform .18s ease, background .18s ease;
}
.room-nav button:hover,
.room-nav button.active { background: var(--green); transform: translate(-4px, -2px); }

@keyframes bootIn { to { opacity: 1; transform: translateY(0) skewX(0); filter: blur(0); } }
@keyframes stampIn { 0% { opacity: 0; transform: translateY(-50px) rotate(-8deg) scale(1.12); } 70% { opacity: 1; transform: translateY(6px) rotate(2deg) scale(.96); } 100% { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); } }
@keyframes tinyGlitch { 30% { transform: translateX(10px); color: var(--cyan); } 60% { transform: translateX(-6px); color: var(--magenta); } }
@keyframes rgbGlitch { 25% { text-shadow: -9px 0 0 var(--cyan), 9px 0 0 var(--magenta); transform: translateY(0) skewX(7deg); } 75% { text-shadow: 9px 0 0 var(--cyan), -9px 0 0 var(--magenta); } }
@keyframes drawTrace { to { stroke-dashoffset: 0; } }
@keyframes wrongTrace { 0% { opacity: 0; stroke-dashoffset: 700; } 35% { opacity: 1; } 70% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: .18; stroke-dashoffset: 0; } }
@keyframes bulbGlow { to { fill: var(--green); filter: drop-shadow(0 0 22px var(--green)); } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes scanDrift { to { transform: translateY(100%); } }
@keyframes blockJitter { 20% { transform: translate(8px, -3px) rotate(-1deg); } 50% { transform: translate(-6px, 4px) rotate(1.4deg); } 80% { transform: translate(3px, 0) skewX(-5deg); } }
@keyframes shearGlitch { 0% { opacity: .85; transform: translate(0); clip-path: inset(0 0 70% 0); } 50% { opacity: .9; transform: translate(12px, -2px); clip-path: inset(42% 0 22% 0); } 100% { opacity: 0; transform: translate(-8px, 2px); clip-path: inset(75% 0 0 0); } }
@keyframes mascotNod { 50% { transform: rotate(5deg) translateY(5px); } }

@media (max-width: 900px) {
  .drawer-grid, .breadboard-layout, .crash-room { grid-template-columns: 1fr; grid-template-rows: auto; }
  .drawer-grid { display: block; }
  .drawer-block { min-height: 270px; margin-bottom: 18px; }
  .board { min-height: 430px; }
  .room-nav { top: auto; bottom: 12px; left: 12px; right: 12px; transform: none; grid-template-columns: repeat(5, 1fr); }
  .room-nav button { padding: 6px 4px; font-size: 11px; }
  .ok-prompt { position: static; margin-top: 20px; }
}