:root {
  /* Compliance markers from DESIGN.md typography: IBM Plex Mono** for tiny rule IDs; Space Grotesk** for section titles. */
  --mirror-black: #07070A;
  --liquid-chrome: #E8EEF2;
  --smoked-steel: #8C959D;
  --deep-gunmetal: #191B21;
  --electric-cyan: #00D5FF;
  --hazard-red: #FF2E2E;
  --acid-green: #B7FF00;
  --display: "Archivo Black", Impact, sans-serif;
  --grotesk: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Noto Sans KR", "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--mirror-black); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--liquid-chrome);
  background:
    radial-gradient(circle at 82% 8%, rgba(0,213,255,.22), transparent 18rem),
    linear-gradient(135deg, var(--mirror-black), var(--deep-gunmetal) 42%, var(--mirror-black));
  font-family: var(--body);
  overflow-x: hidden;
}

.site-shell { position: relative; isolation: isolate; }
.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  padding: clamp(18px, 3vw, 42px);
  border-bottom: 8px solid var(--mirror-black);
  background: linear-gradient(115deg, rgba(232,238,242,.05), transparent 35%), var(--deep-gunmetal);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 4px solid var(--mirror-black);
  pointer-events: none;
  z-index: 0;
}

.chapter-number {
  position: absolute;
  top: 24px;
  right: 32px;
  font-family: var(--grotesk);
  font-size: clamp(4rem, 13vw, 12rem);
  font-weight: 700;
  line-height: .72;
  color: transparent;
  -webkit-text-stroke: 4px var(--smoked-steel);
  opacity: .55;
  z-index: 1;
}

.machine-label, .rule-id, .corner-label, .tank-label {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

.hero-word {
  grid-column: 1 / 8;
  grid-row: 1 / 5;
  align-self: start;
  position: relative;
  z-index: 4;
  padding: clamp(18px, 3vw, 34px);
  border: 7px solid var(--mirror-black);
  background:
    linear-gradient(100deg, #ffffff 0%, var(--liquid-chrome) 18%, var(--smoked-steel) 21%, #ffffff 34%, var(--liquid-chrome) 54%, #707982 56%, var(--liquid-chrome) 73%, #ffffff 100%);
  color: var(--mirror-black);
  box-shadow: 18px 18px 0 var(--hazard-red), -10px 28px 0 var(--acid-green);
  transform: rotate(-1.5deg);
}

.hero-word h1 {
  margin: .04em 0 0;
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 14rem);
  line-height: .76;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-shadow: 5px 5px 0 var(--liquid-chrome), 10px 10px 0 var(--mirror-black);
}

.hero-word p, .plate p, .verdict-split p, .collision-copy p {
  font-family: var(--grotesk);
  font-size: clamp(1rem, 2vw, 1.55rem);
  font-weight: 700;
}

.spear {
  position: absolute;
  height: clamp(44px, 8vw, 92px);
  background: linear-gradient(90deg, var(--hazard-red) 0 12%, var(--mirror-black) 12% 18%, var(--liquid-chrome) 18% 58%, #fff 58% 68%, var(--smoked-steel) 68% 100%);
  border: 6px solid var(--mirror-black);
  clip-path: polygon(0 37%, 78% 37%, 78% 0, 100% 50%, 78% 100%, 78% 63%, 0 63%);
  box-shadow: 0 0 0 8px rgba(0,213,255,.22), 16px 16px 0 var(--mirror-black);
}

.spear-main { width: 90vw; left: -15vw; top: 54vh; transform: rotate(-24deg); z-index: 3; }

.shield-main {
  grid-column: 8 / 13;
  grid-row: 2 / 8;
  position: relative;
  z-index: 2;
  margin-right: -18vw;
  border: 8px solid var(--mirror-black);
  background:
    conic-gradient(from 35deg, #fff, var(--liquid-chrome), var(--smoked-steel), #fff, var(--deep-gunmetal), var(--liquid-chrome), #fff);
  clip-path: polygon(13% 0, 88% 8%, 100% 50%, 67% 100%, 16% 78%, 0 28%);
  display: grid;
  place-items: center;
  color: var(--mirror-black);
  font-family: var(--body);
  font-size: clamp(7rem, 22vw, 19rem);
  font-weight: 900;
  transform: rotate(7deg);
  transition: filter .35s, transform .35s;
}

.shield-main i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 5px solid var(--mirror-black);
  background: var(--electric-cyan);
  border-radius: 50%;
}
.shield-main i:nth-child(2) { top: 12%; left: 22%; }
.shield-main i:nth-child(3) { top: 17%; right: 24%; }
.shield-main i:nth-child(4) { bottom: 18%; left: 24%; }
.shield-main i:nth-child(5) { bottom: 18%; right: 31%; }

.corner-label { position: absolute; left: 4vw; bottom: 3vh; color: var(--acid-green); z-index: 5; writing-mode: vertical-rl; }

.bubble-stream, .tank-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.bubble {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  bottom: var(--y);
  border: 3px solid var(--electric-cyan);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 9%, rgba(255,255,255,.3) 10% 18%, rgba(0,213,255,.16) 19% 100%);
  box-shadow: 0 0 24px rgba(0,213,255,.75), inset 0 0 12px rgba(255,255,255,.45);
  animation: rise var(--duration) linear infinite;
  transform: translate(var(--push-x, 0), var(--push-y, 0)) scale(var(--squash, 1));
}

@keyframes rise {
  from { translate: 0 12vh; opacity: .1; }
  14% { opacity: 1; }
  to { translate: 0 -118vh; opacity: .05; }
}

.border-runner::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 7px solid transparent;
  background: linear-gradient(90deg, var(--electric-cyan), var(--hazard-red), var(--acid-green), var(--electric-cyan)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderRace 2.7s linear infinite;
}
.border-runner.reverse::after, .claim-card:hover::after { animation-direction: reverse; }
@keyframes borderRace { to { filter: hue-rotate(360deg); transform: rotate(360deg); } }

.plate, .collision-copy, .verdict-split {
  position: relative;
  z-index: 2;
  border: 6px solid var(--mirror-black);
  padding: clamp(18px, 3vw, 42px);
  color: var(--mirror-black);
  background: linear-gradient(118deg, #fff, var(--liquid-chrome) 17%, var(--smoked-steel) 20%, #fff 36%, var(--liquid-chrome) 70%, #78818a);
  box-shadow: 16px 16px 0 var(--mirror-black);
}
.plate h2, .collision-copy h2, .verdict-split h2 {
  font-family: var(--display);
  font-size: clamp(3.3rem, 9vw, 10rem);
  line-height: .82;
  margin: .2em 0;
  text-transform: uppercase;
  letter-spacing: -.055em;
}

.plate-claim { grid-column: 2 / 10; grid-row: 3 / 7; transform: rotate(2.5deg); }
.chrome-strip { position: absolute; border: 5px solid var(--mirror-black); background: var(--hazard-red); }
.strip-a { width: 54vw; height: 8vh; right: -9vw; top: 14vh; transform: rotate(-13deg); box-shadow: 12px 12px 0 var(--acid-green); }
.glyph-mark { position: absolute; left: 64vw; bottom: 8vh; z-index: 3; color: var(--electric-cyan); font-family: var(--body); font-weight: 900; font-size: clamp(5rem, 15vw, 14rem); -webkit-text-stroke: 5px var(--mirror-black); cursor: pointer; }

.chamber-counter { background: linear-gradient(118deg, var(--liquid-chrome) 0 45%, var(--mirror-black) 45% 48%, var(--deep-gunmetal) 48%); }
.plate-counter { grid-column: 4 / 12; grid-row: 2 / 6; transform: rotate(-4deg); box-shadow: -16px 16px 0 var(--hazard-red); }
.warning-ribbon { grid-column: 1 / 7; grid-row: 7 / 8; align-self: center; z-index: 3; background: var(--acid-green); color: var(--mirror-black); border: 6px solid var(--mirror-black); font-family: var(--display); font-size: clamp(1.4rem, 3vw, 3rem); padding: 12px 20px; transform: rotate(4deg); }
.fracture-line { position: absolute; inset: 12vh 45vw 0 auto; width: 9vw; background: repeating-linear-gradient(140deg, transparent 0 20px, var(--hazard-red) 21px 31px, transparent 32px 50px); clip-path: polygon(50% 0, 80% 12%, 38% 22%, 76% 35%, 30% 48%, 72% 63%, 24% 77%, 60% 100%, 34% 100%, 0 76%, 48% 62%, 12% 48%, 54% 34%, 18% 20%); }

.collision-svg { grid-column: 1 / 13; grid-row: 1 / 9; width: 100%; height: 100%; z-index: 1; filter: drop-shadow(14px 14px 0 var(--mirror-black)); }
.svg-spear { fill: url(#none); fill: var(--liquid-chrome); stroke: var(--mirror-black); stroke-width: 14; }
.svg-shield { fill: var(--smoked-steel); stroke: var(--mirror-black); stroke-width: 16; }
.stress { fill: none; stroke: var(--electric-cyan); stroke-width: 12; stroke-linejoin: bevel; stroke-dasharray: 34 22; animation: dashStress 1.1s linear infinite; }
@keyframes dashStress { to { stroke-dashoffset: -112; } }
.collision-copy { grid-column: 2 / 8; grid-row: 5 / 8; align-self: end; transform: rotate(-2deg); background: var(--hazard-red); color: var(--liquid-chrome); }

.bubble-tank { grid-column: 2 / 9; grid-row: 1 / 8; position: relative; z-index: 2; border: 8px solid var(--mirror-black); background: linear-gradient(100deg, rgba(0,213,255,.1), rgba(232,238,242,.9) 34%, rgba(25,27,33,.72)); clip-path: polygon(0 7%, 88% 0, 100% 30%, 86% 100%, 8% 91%); overflow: hidden; box-shadow: 20px 20px 0 var(--mirror-black); }
.tank-label { position: absolute; top: 24px; left: 30px; color: var(--mirror-black); z-index: 4; }
.tank-wall { position: absolute; z-index: 3; color: var(--mirror-black); background: rgba(183,255,0,.9); border: 5px solid var(--mirror-black); font-family: var(--grotesk); font-weight: 700; padding: 12px 18px; }
.wall-one { left: 8%; top: 24%; transform: rotate(-9deg); }
.wall-two { right: 7%; top: 48%; transform: rotate(7deg); background: var(--electric-cyan); }
.wall-three { left: 28%; bottom: 14%; transform: rotate(3deg); background: var(--hazard-red); color: var(--liquid-chrome); }
.plate-bubble { grid-column: 8 / 13; grid-row: 4 / 8; transform: rotate(4deg); }

.chamber-verdict { background: linear-gradient(90deg, var(--hazard-red) 0 49%, var(--mirror-black) 49% 51%, var(--electric-cyan) 51% 100%); }
.verdict-split { display: flex; flex-direction: column; justify-content: center; min-height: 58vh; }
.split-left { grid-column: 1 / 7; grid-row: 2 / 8; transform: rotate(-2deg); background: var(--liquid-chrome); }
.split-right { grid-column: 7 / 13; grid-row: 1 / 7; transform: rotate(2deg); background: var(--deep-gunmetal); color: var(--liquid-chrome); border-color: var(--mirror-black); }
.glyph-button { position: absolute; left: 50%; top: 55%; translate: -50% -50%; z-index: 5; width: clamp(150px, 20vw, 260px); height: clamp(150px, 20vw, 260px); border: 8px solid var(--mirror-black); border-radius: 50%; background: var(--acid-green); color: var(--mirror-black); font-family: var(--body); font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; box-shadow: 12px 12px 0 var(--mirror-black); cursor: pointer; transition: transform .25s, background .25s, color .25s; }
.glyph-button:active { transform: scale(.92) rotate(8deg); }

.cursor-mark { position: fixed; left: 0; top: 0; width: 20px; height: 20px; border: 4px solid var(--acid-green); background: var(--mirror-black); z-index: 30; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%) rotate(45deg); }
.is-active .plate, .is-active .hero-word, .is-active .verdict-split { animation: plateSnap .65s cubic-bezier(.2,1.7,.45,1) both; }
@keyframes plateSnap { from { translate: 0 70px; scale: .96; } to { translate: 0 0; scale: 1; } }
.swap-conflict .spear, .swap-conflict .svg-spear { filter: hue-rotate(150deg) saturate(1.4); }
.swap-conflict .shield-main, .swap-conflict .svg-shield { filter: hue-rotate(-135deg) saturate(1.6); transform: rotate(-4deg) scale(1.03); }

@media (max-width: 760px) {
  .chamber { grid-template-columns: repeat(6, 1fr); padding: 16px; }
  .hero-word, .plate-claim, .plate-counter, .bubble-tank, .plate-bubble, .collision-copy, .split-left, .split-right { grid-column: 1 / 7; }
  .hero-word { grid-row: 1 / 4; }
  .shield-main { grid-column: 3 / 7; grid-row: 4 / 8; margin-right: -32vw; }
  .plate-counter, .plate-claim { grid-row: 2 / 6; }
  .plate-bubble { grid-row: 6 / 9; }
  .bubble-tank { grid-row: 1 / 6; }
  .split-left { grid-row: 1 / 5; }
  .split-right { grid-row: 5 / 9; }
  .cursor-mark { display: none; }
}