/* GRADE tokens — research/the-matrix.md. Inside: green base (sets, costume, filters). Outside: bluer, dark. */
:root {
  --g-ground: #050b08;
  --g-ink: #cfe8d4;
  --g-dim: #5f8a69;
  --g-line: #16301f;
  --live: #3cff7a;          /* the one accent: a live request. Nothing else is this colour */
  --live-ink: #031208;
  --c-ground: #090d12;
  --c-plate: #0f151c;
  --c-ink: #c4ccd3;
  --c-dim: #66727d;
  --c-line: #1f2a33;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --pad: clamp(18px, 5vmin, 72px);
}
html { background: var(--g-ground); color: var(--g-ink); }
html[data-world="cold"] { background: var(--c-ground); }
body { margin: 0; background: transparent; font: 400 16px/1.55 var(--mono); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--live); color: var(--live-ink); }

#rain { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
main, .bar-top, .progress { position: relative; z-index: 2; }

.display { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.86; margin: 0; }
.line { display: block; overflow: clip; padding-bottom: 0.04em; } .line > span { display: block; }
.kicker { font: 400 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-dim); margin: 0 0 1.4em; }

/* buttons: a terminal selection, square, inverse on hover */
.btn { display: inline-block; font: 400 15px/1 var(--mono); padding: 15px 20px 14px; text-decoration: none; border: 1px solid currentColor; }
.btn-live { background: var(--live); color: var(--live-ink); border-color: var(--live); }
.btn-live::before { content: "▌"; margin-right: 0.5em; animation: blink 1.06s steps(1) infinite; }
.btn-quiet { color: var(--g-ink); border-color: var(--g-line); }
.btn-quiet:hover, .btn-quiet:focus-visible { background: var(--g-ink); color: var(--g-ground); }
.btn-live:hover, .btn-live:focus-visible { background: var(--g-ink); border-color: var(--g-ink); }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }
@keyframes blink { 50% { opacity: 0; } }

/* chrome */
.bar-top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); z-index: 20; font-size: 13px; letter-spacing: 0.08em; pointer-events: none; background: linear-gradient(var(--g-ground) 30%, transparent); }
html[data-world="cold"] .bar-top { background: linear-gradient(var(--c-ground) 30%, transparent); }
.bar-top > * { pointer-events: auto; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 400; letter-spacing: 0.3em; }
.mark-col { width: 3px; height: 18px; background: linear-gradient(var(--live), transparent); }
.bar-top nav { display: flex; gap: 22px; }
.bar-top nav a { text-decoration: none; color: var(--g-dim); }
.bar-top nav a:hover { color: var(--g-ink); }
.bar-top .nav-key { color: var(--live); }
html[data-world="cold"] .bar-top nav a { color: var(--c-dim); }
html[data-world="cold"] .bar-top { color: var(--c-ink); }
html[data-world="cold"] .bar-top .nav-key { color: var(--live); }

.progress { position: fixed; right: 10px; top: 72px; bottom: 24px; width: 2px; z-index: 20; }
.progress-fill { position: absolute; left: 0; top: 0; width: 2px; height: 100%; transform-origin: 0 0; transform: scaleY(var(--p, 0)); background: linear-gradient(transparent, var(--g-dim) 70%, var(--live)); }
.progress-head { position: absolute; left: -2px; width: 6px; height: 6px; background: var(--live); top: calc(var(--p, 0) * 100% - 6px); }

/* loader — shot one */
.loader { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.loader .iris { position: absolute; inset: 0; }
.iris-zero { font-family: var(--display); font-weight: 900; font-stretch: 62%; }
.term { position: absolute; left: var(--pad); top: 42vh; font-size: clamp(14px, 1.6vw, 20px); color: var(--g-ink); }
.term p { margin: 0 0 0.6em; }
.prompt { color: var(--g-dim); }
.caret { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.18em; background: var(--live); margin-left: 2px; animation: blink 1.06s steps(1) infinite; }
.term-out { color: var(--g-dim); opacity: 0; } .term-out b { color: var(--live); font-weight: 400; }
html.reduced-motion .loader, html.no-js .loader { display: none; }

/* frames */
.frame { box-sizing: border-box; padding: calc(var(--pad) + 40px) var(--pad) calc(var(--pad) + var(--safe-bottom)); }

/* 1 arrival */
.arrival .frame { display: grid; align-content: end; }
.hero { position: relative; }
.arrival h1 { font-size: clamp(60px, min(13vw, 20svh), 230px); color: var(--g-ink); }
.arrival h1 .line:last-child span { color: #86c793; }
.hero-sub { max-width: 34em; margin: 2em 0 2.2em; font-size: clamp(14px, 1.15vw, 17px); color: var(--g-ink); text-shadow: 0 0 12px var(--g-ground), 0 0 4px var(--g-ground); }
.hero-act { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-foot { position: absolute; right: var(--pad); bottom: calc(var(--pad) + var(--safe-bottom)); margin: 0; max-width: 19em; font-size: 12px; color: var(--g-dim); text-align: right; }
.lead-tag { position: absolute; left: 0; top: 0; margin: 0; font-size: 12px; white-space: nowrap; color: var(--live); pointer-events: none; will-change: transform; }
.lead-tag .lead-id { background: var(--live); color: var(--live-ink); padding: 3px 6px; }
.lead-tag .lead-to { margin-left: 6px; }
/* a dark scrim behind reading copy, so the rain never sits under words */
.hero::before, .problem-copy::before, .bt-copy::before, .see-copy::before {
  content: ""; position: absolute; inset: -14% -18% -10% -14%; z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 11, 8, 0.94), rgba(5, 11, 8, 0.7) 60%, transparent);
}

/* 2 problem */
.problem .frame { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 4vw; }
.problem-copy { position: relative; }
.problem h2 { font-size: clamp(44px, min(8.4vw, 12svh), 150px); }
.problem h2 .line:last-child span { color: var(--g-dim); }
.problem-copy p { max-width: 30em; margin-top: 1.6em; }
.incident { position: relative; margin: 0; font: 400 clamp(11px, 0.95vw, 14px)/1.9 var(--mono); color: var(--g-dim); background: rgba(5, 11, 8, 0.9); border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); padding: 18px 0; white-space: pre; overflow-x: auto; }
.incident b { color: var(--g-ink); font-weight: 400; }
.incident .t { color: #35553d; }

/* 3 bullet time */
.bullet .frame { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); grid-template-rows: 1fr auto; gap: 2vh 3vw; align-items: center; }
.bt-copy { position: relative; grid-row: 1 / 3; align-self: end; }
.bt-copy h2 { font-size: clamp(40px, min(6.2vw, 11svh), 112px); }
.bt-copy h2 .line:last-child span { color: #86c793; }
.bt-copy p:last-child { max-width: 28em; margin-top: 1.4em; }
.bt-set { position: relative; height: clamp(170px, calc(100svh - 300px), min(62vh, 46vw)); perspective: 1300px; perspective-origin: 50% 45%; }
.bt-plane { position: absolute; left: 50%; top: 50%; width: 1000px; height: 600px; margin: -300px 0 0 -500px; transform-style: preserve-3d; }
.bt-routes { position: absolute; inset: 0; overflow: visible; }
.bt-routes path { fill: none; stroke: var(--g-line); stroke-width: 2; }
.bt-routes path.route-on { stroke: var(--live); stroke-width: 3; }
.bt-routes path.route-down { stroke: #2a3a2e; stroke-dasharray: 4 8; }
.bt-routes path.trunk { stroke: var(--g-dim); stroke-width: 3; }
.bt-node { position: absolute; transform: translate(-50%, -50%); font-size: 18px; padding: 10px 14px; border: 1px solid var(--g-dim); background: var(--g-ground); white-space: nowrap; }
.bt-app { left: 70px; top: 300px; }
.bt-gate { left: 520px; top: 300px; border-color: var(--g-ink); color: var(--g-ink); letter-spacing: 0.2em; transform: translate(-50%, -50%) translateZ(10px); }
.bt-prov { position: absolute; transform: translate(-50%, -50%); font-size: 18px; padding: 8px 12px; border: 1px solid var(--g-dim); background: var(--g-ground); color: var(--g-ink); white-space: nowrap; }
.bt-prov.on { border-color: var(--live); color: var(--live); }
.bt-prov.down { color: #3d5443; border-color: #23352a; text-decoration: line-through; }
.bt-rings { position: absolute; inset: 0; transform-style: preserve-3d; }
.bt-ring { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid var(--g-ink); }
.bt-packet { position: absolute; transform-style: preserve-3d; display: grid; gap: 4px; font-size: 15px; white-space: nowrap; }
.bt-packet span { color: var(--g-dim); font-size: 13px; }
.bt-packet b { background: var(--live); color: var(--live-ink); font-weight: 400; padding: 6px 10px; justify-self: start; box-shadow: 0 0 24px rgba(60, 255, 122, 0.45); }
.bt-panel { grid-column: 2; font-size: 14px; }
.bt-hint { margin: 0 0 10px; color: var(--g-dim); }
.bt-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-toggle { font: 400 14px/1 var(--mono); color: var(--g-ink); background: var(--g-ground); border: 1px solid var(--g-line); padding: 11px 14px; cursor: pointer; }
.bt-toggle kbd { font: inherit; color: var(--g-dim); margin-right: 8px; }
.bt-toggle[aria-pressed="true"] { color: #4a6650; text-decoration: line-through; border-style: dashed; }
.bt-toggle:hover { border-color: var(--g-ink); }
.bt-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.bt-read { margin: 14px 0 0; color: var(--g-ink); }
.bt-route { color: var(--live); }

/* 4 seeing */
.seeing .frame { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); gap: 4vw; align-items: center; }
.see-copy { position: relative; }
.see-copy h2 { font-size: clamp(40px, min(6.4vw, 11svh), 116px); }
.see-copy p { max-width: 26em; margin-top: 1.4em; }
.demo-note { color: var(--g-dim); }
.see-count { font-size: 14px; color: var(--g-dim); }
.see-count .odo { display: inline-block; font: 800 clamp(34px, 3.8vw, 60px)/1 var(--display); font-stretch: 62%; color: var(--g-ink); vertical-align: -0.12em; min-width: 5.2em; }
.log { font-size: clamp(10.5px, 0.92vw, 13.5px); background: rgba(5, 11, 8, 0.92); border-top: 1px solid var(--g-line); }
.log-row { display: grid; grid-template-columns: 7.6em 7.4em 9.6em 1fr 4.6em 4em 4.6em; gap: 1em; padding: 7px 10px; border-bottom: 1px solid #0d1d13; white-space: nowrap; color: var(--g-dim); }
.log-row > span { overflow: hidden; text-overflow: clip; }
.log-head { color: #35553d; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85em; }
.log-row.is-lead { color: var(--live-ink); background: var(--live); }
.log-row .err { color: var(--g-ink); }

/* the world outside: cold, dark, bluer */
.control, .pricing, .credits { color: var(--c-ink); }
.control .frame { max-width: 1240px; margin: 0 auto; padding-top: 22vh; padding-bottom: 12vh; }
.doc-head { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 9vh; }
.control .kicker, .pricing .kicker { color: var(--c-dim); }
.doc-head h2 { font-size: clamp(48px, 8vw, 132px); color: var(--c-ink); max-width: 9em; }
.doc-lede { max-width: 36em; margin-top: 1.6em; color: var(--c-dim); }
.spec { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 3vw; padding: 34px 0; border-top: 1px solid var(--c-line); }
.spec h3 { margin: 0; font: 800 clamp(26px, 2.6vw, 40px)/0.95 var(--display); font-stretch: 62%; text-transform: uppercase; color: var(--c-ink); }
.spec p { margin: 0 0 18px; max-width: 40em; }
/* a monitor: the only place green appears out here — the code, read on a screen */
.monitor { margin: 0; padding: 18px 20px; background: #020604; color: #a9dcb2; border: 1px solid #1a2620; box-shadow: inset 0 0 40px rgba(60, 255, 122, 0.05); font: 400 clamp(12px, 1vw, 14px)/1.7 var(--mono); white-space: pre; overflow-x: auto; }
.monitor .c { color: #4f7a5a; }
.monitor b { color: var(--live); font-weight: 400; }
.trace s { color: #6f8a76; }
.trace .hop-a { color: #5f7d67; }

.pricing .frame { max-width: 1240px; margin: 0 auto; padding-block: 14vh 16vh; }
.price-line { font-size: clamp(40px, 6.6vw, 112px); max-width: 13em; color: var(--c-ink); }
.price-line em { font-style: normal; color: #ffffff; }
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 3vw; margin: 9vh 0 0; }
.terms div { border-top: 1px solid var(--c-line); padding-top: 16px; }
.terms dt { color: var(--c-dim); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.terms dd { margin: 0; }

.exit .frame { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); grid-template-rows: auto auto; gap: 4vh 4vw; align-content: center; color: var(--c-ink); }
.exit h2 { font-size: clamp(48px, 7.4vw, 128px); }
.exit-copy p { color: var(--c-dim); margin-top: 1.2em; }
.terminal { font-size: clamp(12px, 1.1vw, 16px); padding: 28px 30px; min-height: 9.5em; }
.terminal .del { color: #5f7d67; } .terminal .add { color: var(--live); }
.terminal .run { color: #a9dcb2; }
.terminal .resp b { color: var(--live-ink); background: var(--live); padding: 1px 6px; }
.exit-act { grid-column: 2; display: flex; gap: 12px; flex-wrap: wrap; }
html[data-world="cold"] .btn-quiet { color: var(--c-ink); border-color: var(--c-line); }
html[data-world="cold"] .btn-quiet:hover { background: var(--c-ink); color: var(--c-ground); }

.credits .frame { max-width: 1240px; margin: 0 auto; padding-block: 10vh 8vh; font-size: 14px; }
.roll { color: var(--c-dim); margin: 0 0 6vh; font: inherit; }
.cred-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 12em)); gap: 3vw; }
.cred-grid h4 { margin: 0 0 12px; color: var(--c-dim); font: 400 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.cred-grid a { display: block; text-decoration: none; padding: 4px 0; }
.cred-grid a:hover { color: var(--live); }
.fine { margin-top: 8vh; color: var(--c-dim); font-size: 12px; max-width: 46em; }

/* the CRT collapse between worlds: driven by the reel (seeing → exit clip) */
.seeing .frame { transform-origin: 50% 50%; }

/* phones: a vertical cut, not a squeeze */
@media (max-width: 760px) {
  .bar-top nav a:not(.nav-key) { display: none; }
  .hero-foot { display: none; }
  .problem .frame, .bullet .frame, .seeing .frame, .exit .frame { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .problem .frame { align-content: end; gap: 3vh; }
  .incident { font-size: 10.5px; }
  .bullet .frame { grid-template-rows: auto auto auto; gap: 1.6vh; padding-top: 76px; }
  .bt-copy { grid-row: auto; }
  .bt-copy p:last-child { font-size: 13.5px; }
  .bt-set { height: 30vh; order: 2; }
  .bt-panel { grid-column: 1; order: 3; font-size: 13px; }
  .bt-panel .keys { display: none; }
  .bt-toggle { padding: 10px 11px; font-size: 13px; }
  .see-count .odo { min-width: 0; }
  .log-row { grid-template-columns: 7.6em 1fr 4em; }
  .log-row > span:nth-child(3), .log-row > span:nth-child(4), .log-row > span:nth-child(5), .log-row > span:nth-child(7) { display: none; }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .exit-act { grid-column: 1; }
  .terminal { font-size: 10.5px; padding: 16px; }
  .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress { right: 4px; }
}