/* play/styles/base.css */
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'AIM Brand'; src: url('../assets/fonts/aim-brand-mono-700.woff2') format('woff2'); font-weight: 700; font-display: block; }

:root {
  /* text scale: «крупнее» by default (Alex 13.10: read easier), the menu switches 1 / 1.12 / 1.24; cards scale their text by --fs-card */
  --fs: 1.12; --fs-card: 1.08;
  --ink-0: #050407;
  --ink-1: #0c0a11;
  --ink-2: #14111b;
  --ink-3: #1d1827;
  --line: rgba(244, 244, 239, 0.1);
  --line-2: rgba(244, 244, 239, 0.2);
  --paper: #f4f4ef;
  --paper-2: #c9c6cf;
  --muted: #7d7887;
  --red: #bf0909;
  --red-hot: #ff2b3c;
  --red-deep: #5a0710;
  --violet: #7b55ad;
  --violet-hot: #a77bff;
  --violet-deep: #2a1d44;
  --cyan: #1fb6d1;
  --cyan-deep: #0b4651;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: 'AIM Brand', 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --card-w: 168px;
  --card-h: 236px;
  /* one hue per station, the same on cards, pads and charts */
  --st-signal: #1fb6d1;
  --st-context: #6f86ff;
  --st-decision: #a77bff;
  --st-delivery: #ff2b3c;
  --st-retro: #e9e4d6;
  /* run progress: 0 at the first node, 1 at the boss (set by main.js) */
  --heat: 0;
  --t-fast: .16s;
  --t-mid: .26s;
}
.st-signal { --stc: var(--st-signal); }
.st-context { --stc: var(--st-context); }
.st-decision { --stc: var(--st-decision); }
.st-delivery { --stc: var(--st-delivery); }
.st-retro { --stc: var(--st-retro); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink-0); color: var(--paper); font-family: var(--mono); font-size: calc(14px * var(--fs)); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--violet); color: var(--paper); }

.glyph-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5, 4, 7, 0.85) 100%),
    linear-gradient(180deg, rgba(42, 29, 68, 0.25), transparent 30%, transparent 70%, rgba(90, 7, 16, 0.18));
}
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .22; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }

.brace { color: var(--muted); }
.brace b { color: var(--paper); font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--line-2); font-size: calc(10px * var(--fs)); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--paper); cursor: pointer; letter-spacing: .08em; text-transform: lowercase; transition: background .18s var(--ease), border-color .18s, transform .12s; }
.btn:hover { background: var(--ink-3); border-color: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--red); border-color: var(--red-hot); box-shadow: 0 0 0 1px rgba(255,43,60,.25), 0 10px 30px -10px rgba(191,9,9,.7); }
.btn.primary:hover { background: #d40f12; }
.btn.danger { border-color: var(--red-hot); color: var(--paper); }
.btn.danger:hover { background: rgba(255,43,60,.18); }
.btn.violet { background: var(--violet-deep); border-color: var(--violet-hot); }
.btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.btn kbd { font-size: calc(10px * var(--fs)); padding: 1px 5px; border: 1px solid currentColor; opacity: .6; }

/* Reduced motion: no loops, no drift, state changes land instantly. Glitch stays a single frame. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scanlines { display: none; }
}

/* v0.4 «сумерки», the default: a lighter field behind dark cards and panels, softer vignette, clearer secondary text.
   «ночь» (menu → тёмная тема) keeps the first look. */
html[data-text="normal"] { --fs: 1; --fs-card: 1; }
html[data-text="big"] { --fs: 1.24; --fs-card: 1.16; }
html[data-theme="dusk"] { --muted: #948ea2; --paper-2: #d6d2dc; --line: rgba(244, 244, 239, 0.13); --line-2: rgba(244, 244, 239, 0.24); }
html[data-theme="dusk"], html[data-theme="dusk"] body { background: #2a2338; }
html[data-theme="dusk"] body { background: radial-gradient(120% 90% at 50% 40%, #41365a 0%, #322a46 50%, #241e33 100%) fixed; }
html[data-theme="dusk"] .vignette { background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(10, 8, 15, 0.45) 100%),
    linear-gradient(180deg, rgba(123, 85, 173, 0.16), transparent 30%, transparent 70%, rgba(191, 9, 9, 0.08)); }
html[data-theme="dusk"] .glyph-field { opacity: .8; }
html[data-theme="dusk"] .scanlines { opacity: .12; }
/* a phone held upright (web/src/ui/fit.js): one plate at the bottom, shown only while the phone is upright */
.upright-plate { display: none; }
html.upright-phone .upright-plate { display: flex; align-items: center; gap: 14px; position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 600; padding: 22px 26px; font-size: 34px; color: var(--paper); background: rgba(20, 15, 30, .96); border: 2px solid var(--violet-hot); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
html.upright-phone .upright-plate span { font-size: 54px; color: var(--violet-hot); }
html.upright-phone .upright-plate button { margin-left: auto; background: none; border: 2px solid var(--line); color: var(--paper); font-size: 40px; width: 64px; height: 64px; cursor: pointer; }

/* play/styles/card.css */
/* Request 57 / OB-122: dark cards, role accents, no filled role artwork or frames. */
.card {
  --accent: var(--violet-hot); --accent-deep: var(--violet-deep); --s: 1;
  --paper: #fff8ef; --paper-2: #e3dce9; --muted: #bdb4c8;
  --st-signal: #a9caff; --st-context: #d5baff; --st-decision: #f2d28a; --st-delivery: #ffb5a9; --st-retro: #a9e5bf;
  position: relative; width: calc(var(--card-w) * var(--s)); height: calc(var(--card-h) * var(--s));
  display: grid; grid-template-rows: auto minmax(calc(48px * var(--s)), 1fr) auto auto auto;
  font-size: calc(11px * var(--s)); color: var(--paper); border: 0; outline: 0;
  border-radius: calc(3px * var(--s)) calc(3px * var(--s)) calc(9px * var(--s)) calc(9px * var(--s));
  background: #120f1b;
  box-shadow: 0 calc(18px * var(--s)) calc(28px * var(--s)) calc(-16px * var(--s)) #000d;
  overflow: hidden; transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid), opacity var(--t-fast), filter var(--t-mid);
}
.card::before { content: none; }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-mid); background: radial-gradient(ellipse at var(--mx,50%) var(--my,25%), #ffffff0c, transparent 62%); }
.card:hover::after, .card.lift::after { opacity: 1; }
.card.kind-action { --accent: var(--paper-2); --accent-deep: #20202a; }
.card.kind-status { --accent: #c4bbc8; --accent-deep: #17151c; --stc: #c4bbc8; }
.card.kind-crisis { --accent: #ff8b91; --accent-deep: #631e33; }
.card.rarity-signature .name { color: color-mix(in srgb, var(--hc) 35%, var(--paper)); }
.card .hd { position: relative; display: flex; align-items: center; gap: calc(7px * var(--s)); padding: calc(10px * var(--s)) calc(10px * var(--s)) calc(5px * var(--s)); min-width: 0; }
.card .cost { flex: none; min-width: calc(20px * var(--s)); display: flex; justify-content: center; align-items: center; gap: calc(2px * var(--s)); font: 800 calc(20px * var(--s))/1 var(--brand); color: var(--paper); }
.card .cost::before { content: '◆'; font-size: calc(7px * var(--s)); color: var(--role-ink, var(--paper-2)); }
.card .cost.free { color: #8cdde9; }
.card .name { min-width: 0; font: 700 calc(13.5px * var(--s) * var(--fs-card))/1.13 var(--brand); letter-spacing: -.025em; text-transform: lowercase; overflow-wrap: anywhere; text-wrap: balance; }
.card .name .plus { color: var(--role-ink, var(--violet-hot)); font-size: .75em; margin-left: 1px; }
.card .lvl { margin-left: auto; flex: none; font-size: calc(7px * var(--s)); letter-spacing: .3px; color: var(--muted); }
.card .lvl.l2 { color: var(--violet-hot); }
.card .lvl.l3, .card .lvl.sig { color: var(--hc, var(--role-ink, var(--paper))); }
.card .lvl.sig { font-size: calc(11px * var(--s)); }
.card .rar { margin-left: auto; color: var(--accent); font-size: calc(10px * var(--s)); }
.card .art { position: relative; margin: 0; border: 0; outline: 0; box-shadow: none; overflow: hidden; display: grid; place-items: center; background: none; }
.card .art pre { margin: 0; font: calc(7px * var(--s))/1 var(--mono); letter-spacing: 0; color: color-mix(in srgb, var(--role-ink, var(--stc, var(--accent))) 28%, transparent); }
.card .art pre .a1 { color: color-mix(in srgb, var(--role-ink, var(--stc, var(--accent))) 60%, transparent); }
.card .art pre .a2 { color: var(--role-ink, var(--stc, var(--accent))); }
.card .art pre .a3 { color: var(--paper); font-weight: 700; text-shadow: 0 0 calc(7px * var(--s)) var(--role-ink, var(--stc, var(--accent))); }
.card .type { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3px * var(--s)) calc(6px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) 0; color: var(--muted); font-size: calc(8px * var(--s)); line-height: 1.15; }
.card .type .kw { font-size: calc(7.5px * var(--s)); color: var(--paper-2); }
.card .card-station { margin-left: auto; color: var(--stc, var(--muted)); font-size: calc(8px * var(--s)); }
.card .text { padding: calc(5px * var(--s)) calc(10px * var(--s)) calc(3px * var(--s)); color: var(--paper); font-size: calc(11.5px * var(--s) * var(--fs-card)); line-height: 1.3; text-wrap: pretty; }
.card .stats { display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(7px * var(--s)); min-height: calc(24px * var(--s)); font-size: calc(10px * var(--s)); border: 0; }
.card .stat { display: inline-flex; align-items: baseline; gap: calc(3px * var(--s)); color: var(--paper-2); font-size: calc(8.5px * var(--s)); letter-spacing: -.025em; }
.card .stat b { font-size: calc(17px * var(--s)); font-weight: 800; color: var(--role-ink, var(--paper)); }
.card .stat.pow b { color: var(--role-ink, #532590); }
.card:not(.kind-crisis) .tx-energy { color: #ffb6a2; }
.card:not(.kind-crisis) .tx-trust { color: #d9c0ff; }
.card .stat.life { margin-left: auto; flex: none; }
.card .pips { display: inline-flex; gap: calc(2px * var(--s)); }
.card .pips i { width: calc(3px * var(--s)); height: calc(7px * var(--s)); background: var(--paper-2); opacity: .7; }
.card .pips i.off { opacity: .15; }
.card .stats .mini-ring { flex: none; width: calc(30px * var(--s)); height: calc(14px * var(--s)); }
.card .stats .aff { font-size: calc(8px * var(--s)); color: var(--paper-2); }
.mini-ring ellipse { fill: none; stroke: #f4f4ef38; stroke-width: 1; }
.mini-ring circle { fill: #f4f4ef40; }
.mini-ring circle.on { fill: var(--stc, var(--paper)); }
.mini-ring circle.st-signal { fill: var(--st-signal); }
.mini-ring circle.st-context { fill: var(--st-context); }
.mini-ring circle.st-decision { fill: var(--st-decision); }
.mini-ring circle.st-delivery { fill: var(--st-delivery); }
.mini-ring circle.st-retro { fill: var(--st-retro); }
.card .zoom, .card .crisis-choice { position: absolute; right: calc(7px * var(--s)); top: calc(100% + 3px * var(--s)); z-index: 6; width: calc(22px * var(--s)); height: calc(22px * var(--s)); padding: 0; display: grid; place-items: center; font: calc(14px * var(--s))/1 var(--mono); color: var(--paper); background: #100b19b8; border: 0; border-radius: 50%; cursor: zoom-in; opacity: 0; transition: opacity var(--t-fast); }
.card:hover .zoom, .card:focus-within .zoom, .card.selected .zoom, .card .crisis-choice { opacity: 1; }
.card .zoom:hover, .card .crisis-choice:hover { color: var(--cyan); background: #292039; }
.card .zoom:focus-visible, .card .crisis-choice:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.card .crisis-choice { cursor: crosshair; color: var(--cyan); }
@media (hover:none), (pointer:coarse) { .card .zoom { opacity: 1; min-width: 32px; min-height: 32px; } .card .crisis-choice { min-width: 32px; min-height: 32px; } }
/* Keyboard focus remains explicit. Selected cards lift and brighten without a new frame. */
.card.disabled { filter: saturate(.3) brightness(.65); }
.card.unaffordable .cost { color: var(--muted); }
.card.selected { transform: translateY(-26px) scale(1.04); filter: brightness(1.16); box-shadow: 0 24px 36px -16px #000; }
.card:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.card.unseen { filter: saturate(.3) brightness(.78); }
.card.unseen:hover { filter: none; }
/* Availability fades the illustration while rule text keeps its measured contrast. */
.card:not(.kind-crisis):is(.disabled,.unseen) { filter: none; }
.card:not(.kind-crisis):is(.disabled,.unseen) .art { opacity: .55; filter: saturate(.3); }
.card:not(.kind-crisis).unseen:hover .art { opacity: 1; filter: none; }
/* Request 57, orchestrator review 16.10: restore the 0.5.7 anatomy without a perimeter frame. */
.card[data-role]:not(.kind-crisis)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(4px * var(--s)); background: var(--role-ink); z-index: 2; pointer-events: none; box-shadow: none; }
.card:not(.kind-crisis) .cost { width: calc(24px * var(--s)); height: calc(24px * var(--s)); min-width: calc(24px * var(--s)); display: grid; place-items: center; font-size: calc(16px * var(--s)); color: #050407; background: color-mix(in srgb, var(--role-ink, #c4bbc8) 80%, #fff8ef); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.card:not(.kind-crisis) .cost::before { content: none; }
.card.kind-action .cost { clip-path: circle(50%); }
.card:not(.kind-crisis) .art { margin: 0 calc(7px * var(--s)); background: #09070f; border: 1px dotted color-mix(in srgb, var(--role-ink, #c4bbc8) 45%, transparent); }
.card:not(.kind-crisis) .art pre { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 75%, transparent); }
.card:not(.kind-crisis) .art pre .a1 { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 60%, #fff8ef); }
.card:not(.kind-crisis) .art pre .a2 { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 25%, #fff8ef); }
.card:not(.kind-crisis) .art pre .a3 { color: #fff8ef; text-shadow: 0 0 calc(4px * var(--s)) color-mix(in srgb, var(--role-ink, #c4bbc8) 45%, transparent); }
.card:not(.kind-crisis) .art .card-station { position: absolute; left: calc(3px * var(--s)); bottom: calc(3px * var(--s)); margin: 0; padding: 0 calc(3px * var(--s)); font-size: calc(8px * var(--s)); line-height: 1.15; color: var(--stc, var(--role-ink)); background: #09070f; }
.card:not(.kind-crisis) .type { color: var(--role-ink); font-size: calc(9px * var(--s)); letter-spacing: .035em; }
.card:not(.kind-crisis) .type .kind { font-weight: 700; text-transform: uppercase; }
.card:not(.kind-crisis) .type .kw { color: var(--role-ink); }
.card:not(.kind-crisis) .type .kw.sig { flex-basis: 100%; font-weight: 700; text-transform: uppercase; }
/* A crisis floats as a threat mark, timer and consequence. */
.card.kind-crisis { --paper: #fff4ec; --paper-2: #ffcec2; --muted: #ffa8a0; --role-ink: #ff413c; --st-signal: #a5d7ff; --st-context: #e6c5ff; --st-decision: #ffd4a9; --st-delivery: #ffb9a9; --st-retro: #c8f6d3; isolation: isolate; background: radial-gradient(ellipse at 42% 42%, #e41937a6, #a30b2738 55%, transparent 78%); border-radius: 0; box-shadow: none; grid-template-rows: auto minmax(calc(32px * var(--s)),1fr) auto auto auto; overflow: visible; }
.card.kind-crisis::before { content: ''; position: absolute; z-index: -1; inset: calc(8px * var(--s)) calc(-5px * var(--s)); background: linear-gradient(145deg, #ff342b45, #be112a80 45%, #ff40302b); clip-path: polygon(5% 9%, 76% 0, 69% 14%, 100% 38%, 89% 48%, 100% 88%, 30% 100%, 36% 88%, 0 65%, 11% 54%); }
.card.kind-crisis::after { content: none; }
.card.kind-crisis .hd { padding-right: calc(34px * var(--s)); }
.card.kind-crisis .zoom, .card.kind-crisis .crisis-choice { top: calc(5px * var(--s)); right: calc(6px * var(--s)); }
.card.kind-crisis .name { color: #fff0ef; font-size: calc(14px * var(--s) * var(--fs-card)); }
.card.kind-crisis .rar { display: none; }
.card.kind-crisis .art { background: none; overflow: hidden; justify-items: start; padding-left: calc(4px * var(--s)); }
.card.kind-crisis .art pre { font-size: calc(6.4px * var(--s)); opacity: 1; transform: translateX(calc(-4px * var(--s))); }
.card.kind-crisis .art pre .a1 { color: #ff4e4b; }.card.kind-crisis .art pre .a2 { color: #ff7770; }.card.kind-crisis .art pre .a3 { color: #ffd1bd; text-shadow: 0 0 10px #ff2b3c; }
.card.kind-crisis .threat-mark { position: absolute; z-index: 2; left: calc(27px * var(--s)); top: 50%; transform: translateY(-50%); height: calc(43px * var(--s)); max-height: 100%; color: #ffefdf; filter: drop-shadow(0 0 14px #ff1f35); }
.card.kind-crisis .threat-mark .pi { width: calc(38px * var(--s)); height: 100%; color: inherit; }
.card.kind-crisis .type { gap: calc(4px * var(--s)); padding-top: 0; font-size: calc(9px * var(--s)); }
.card.kind-crisis .type .mini-ring { width: calc(27px * var(--s)); height: calc(14px * var(--s)); }
.card.kind-crisis .crisis-station { color: #ffd1bf; }
.card.kind-crisis .type .kw { margin-left: auto; font-size: calc(7px * var(--s)); color: var(--muted); }
.card.kind-crisis .text { font-size: calc(11.3px * var(--s) * var(--fs-card)); line-height: 1.3; text-shadow: 0 1px 5px #000; }
.card.kind-crisis .stats { position: static; padding-top: calc(4px * var(--s)); flex-wrap: wrap; }
.card.kind-crisis .hp { order: 2; flex-basis: 100%; height: calc(2px * var(--s)); margin-top: calc(3px * var(--s)); position: relative; background: #f4f4ef15; }
.card.kind-crisis .hp i { position: absolute; inset: 0 auto 0 0; background: #ffa2a5; transition: width .4s var(--ease); }
.card.kind-crisis .hp-n { margin-left: auto; gap: calc(4px * var(--s)); align-items: center; }
.card.kind-crisis .hp-n b { font-size: calc(17px * var(--s)); color: #ffc1c1; }
.card.kind-crisis .hp-n small { color: var(--muted); font-size: calc(9px * var(--s)); }
.card.kind-crisis .hp-n .pi { width: calc(12px * var(--s)); height: calc(12px * var(--s)); color: #ffa2a5; }
.card.kind-crisis .timer { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: calc(12px * var(--s)); display: inline-flex; align-items: center; gap: calc(3px * var(--s)); font: 800 calc(32px * var(--s))/1 var(--brand); color: var(--paper); }
.card.kind-crisis .timer .pi { width: calc(13px * var(--s)); height: calc(16px * var(--s)); color: #d7b0c2; }
.card.kind-crisis .timer.hot { color: #ff929b; animation: threat-tick 1.6s ease-in-out infinite; }
@keyframes threat-tick { 50% { opacity: .65; } }
@media (prefers-reduced-motion:reduce) { .card.kind-crisis .timer.hot { animation: none; } }

/* play/styles/landing.css */
/* {turnover} landing for apps.aimindset.org: the game's ink, red and violet, the same glyph field behind */
html { scroll-behavior: smooth; }
body.landing { margin: 0; min-height: 100vh; overflow-x: hidden; overflow-y: auto; background: radial-gradient(120% 80% at 70% 0%, #1a0d2b 0%, var(--ink-0) 55%); color: var(--paper-2); font-family: var(--mono); }
body.landing #field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; z-index: 0; }

/* Short overview: the full reference and version history live on the project board. */
.compact-landing .band-sec { padding-block: 64px; scroll-margin-top: 72px; }
.compact-landing .band-sec.paper { padding-block: 80px; }
.compact-landing .path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact-landing .built-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-landing .practice-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.compact-landing .agent-feature { border-top: 2px solid var(--violet-hot); }
.compact-landing .ag-cmd { overflow-wrap: anywhere; white-space: normal; }
.compact-landing .sec-head { max-width: 82ch; }
@media (max-width: 700px) {
  .compact-landing .band-sec, .compact-landing .band-sec.paper { padding-block: 42px; }
  .compact-landing .path { grid-template-columns: 1fr; }
  .compact-landing .path li { padding-right: 0; }
  .compact-landing .frame-bar { flex-wrap: wrap; }
}
.landing main, .landing header, .landing footer { position: relative; z-index: 1; }
.landing .kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.landing .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line-2); background: rgba(12,10,17,.8); color: var(--paper); text-decoration: none; font: inherit; font-size: 13px; letter-spacing: .04em; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-mid); cursor: pointer; }
.landing .btn:hover { transform: translateY(-2px); border-color: var(--paper); }
.landing .btn.primary { background: var(--red); border-color: var(--red-hot); box-shadow: 0 0 28px -6px rgba(255,43,60,.7); }
.landing .btn.primary:hover { background: var(--red-hot); }
.landing .btn.big { padding: 15px 24px; font-size: 14px; }
.landing .btn.small { padding: 7px 14px; font-size: 12px; }

.lnav { position: sticky; top: 0; display: flex; align-items: center; gap: 22px; padding: 14px 4vw; background: linear-gradient(180deg, rgba(5,4,7,.92), rgba(5,4,7,.6)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); z-index: 10 !important; }
.lnav a { color: var(--paper-2); text-decoration: none; font-size: 12px; }
.lnav a:hover { color: var(--paper); }
.lnav .back { color: var(--muted); }
.lnav nav { display: flex; gap: 18px; margin-left: auto; }
.lnav .lang { display: inline-flex; border: 1px solid var(--line-2); }
.lnav .lang button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 11px; padding: 4px 9px; cursor: pointer; }
.lnav .lang button.on { background: var(--paper); color: var(--ink-0); }

.hero-sec { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3.2vw; align-items: center; min-height: calc(100vh - 60px); padding: 2vh 4vw 6vh; max-width: 1560px; margin: 0 auto; }
.hero-copy h1 { margin: 14px 0 18px; font-family: var(--brand); font-size: clamp(48px, 5.6vw, 104px); line-height: .9; color: var(--paper); letter-spacing: -.02em; text-shadow: 5px 0 0 rgba(255,43,60,.55), -4px 0 0 rgba(31,182,209,.35), 0 0 60px rgba(167,123,255,.25); animation: glitch 6s steps(1) infinite; }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(3px) skewX(-4deg); } 95% { transform: translateX(-2px); } 97% { transform: translateX(1px) skewX(2deg); } }
.hero-copy .sub { margin: -6px 0 18px; font-family: var(--brand); font-size: clamp(17px, 1.5vw, 23px); line-height: 1.2; color: var(--violet-hot); text-transform: lowercase; }
.hero-copy .lede { max-width: 56ch; font-size: 15px; line-height: 1.7; color: var(--paper-2); margin: 0 0 26px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.facts { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.facts span { display: flex; flex-direction: column; }
.facts b { font-family: var(--brand); font-size: 30px; color: var(--paper); }
.facts i { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-ring { position: relative; }
.hero-ring canvas { display: block; width: 100%; aspect-ratio: 1.2; transform: perspective(1200px) rotateX(18deg); }
.ring-caption { margin-top: 6px; text-align: center; font-size: 11px; color: var(--muted); }

.demo-sec { max-width: 1180px; margin: 0 auto 10vh; padding: 0 4vw; }
.frame { border: 1px solid rgba(167,123,255,.35); background: #07040c; box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 0 80px -30px rgba(167,123,255,.35); }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.frame-bar span { margin-left: 10px; }
.demo-load { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.demo-load img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .6s var(--ease), opacity .3s; }
.demo-load:hover img { transform: scale(1.02); opacity: .55; }
.demo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 26px; background: var(--red); border: 1px solid var(--red-hot); color: var(--paper); font: inherit; font-size: 15px; letter-spacing: .06em; box-shadow: 0 0 50px -6px rgba(255,43,60,.8); }
.frame iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: #000; }
.demo-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

.band-sec { max-width: 1180px; margin: 0 auto; padding: 9vh 4vw; border-top: 1px solid var(--line); opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.band-sec.in, .demo-sec.in { opacity: 1; transform: none; }
.sec-head { max-width: 760px; margin-bottom: 34px; }
.sec-head h2 { margin: 8px 0 12px; font-family: var(--brand); font-size: clamp(30px, 3.6vw, 52px); line-height: 1; color: var(--paper); text-transform: lowercase; text-shadow: 3px 0 0 rgba(255,43,60,.4); }
.sec-head p { margin: 0; font-size: 14px; line-height: 1.7; }
.sec-head .sec-cta { display: inline-block; margin-top: 14px; padding: 8px 14px; border: 1px solid rgba(31,182,209,.55); color: var(--cyan); font-size: 13px; text-decoration: none; letter-spacing: .02em; }
.sec-head .sec-cta:hover { background: rgba(31,182,209,.12); color: var(--paper); }

.stations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.st { padding: 14px; border: 1px solid color-mix(in srgb, var(--stc) 40%, transparent); border-top: 3px solid var(--stc); background: linear-gradient(180deg, color-mix(in srgb, var(--stc) 10%, transparent), rgba(7,4,12,.7)); }
.st b { color: var(--stc); font-size: 14px; font-weight: 500; }
.st p { margin: 8px 0 0; font-size: 12px; line-height: 1.55; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 30px 0; }
.rules b { display: block; color: var(--paper); font-size: 13px; margin-bottom: 6px; }
.rules p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.fan { display: flex; justify-content: center; padding: 30px 0 10px; }
.fan .card { margin: 0 -18px; transform: rotate(var(--r)) translateY(calc(var(--i) * 0px)); transition: transform var(--t-mid) var(--ease); box-shadow: 0 30px 50px -25px #000; }
.fan .card:hover { transform: rotate(0) translateY(-22px) scale(1.06); z-index: 2; }
.fan-note { text-align: center; font-size: 12px; color: var(--muted); }

.leaders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.leader { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--hc) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 9%, rgba(14,9,24,.8)), rgba(7,4,12,.9)); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid); }
.leader:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--hc) 60%, #000); }
.leader .lp { position: relative; display: grid; place-items: center; padding: 6px 0; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--hc) 18%, #120a20), #05030a 80%); overflow: hidden; }
.leader .lp canvas { max-width: 100%; height: auto !important; }
.leader .role { position: absolute; left: 8px; top: 8px; padding: 2px 7px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #07040c; background: var(--hc); }
.leader .lk { font-size: 11px; color: var(--hc); }
.leader .lk i { font-style: normal; color: var(--stc); }
.leader h3 { margin: 0; font-family: var(--brand); font-size: 20px; line-height: 1.05; color: var(--paper); text-transform: lowercase; }
.leader .bio { margin: 0; font-size: 12px; line-height: 1.55; }
.leader .style { margin: 0; font-size: 11.5px; color: var(--hc); }
.leader .ab { margin: 0; font-size: 11.5px; }
.leader .ab b { color: var(--paper); font-weight: 500; }
.leader .rate { margin-top: auto; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: ch; border-left: 1px solid var(--line); }
.chapters li { position: relative; padding: 16px 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(42,29,68,.18), transparent); }
.chapters li.mood-tense { background: linear-gradient(180deg, rgba(123,85,173,.16), transparent); }
.chapters li.mood-crunch { background: linear-gradient(180deg, rgba(191,9,9,.2), transparent); }
.chapters i { font-style: normal; font-size: 10px; color: var(--red-hot); letter-spacing: .1em; }
.chapters b { display: block; margin: 4px 0 2px; font-size: 15px; color: var(--paper); font-weight: 500; text-transform: lowercase; }
.chapters small { display: block; font-size: 10.5px; color: var(--cyan); margin-bottom: 8px; }
.chapters p { margin: 0; font-size: 12px; line-height: 1.55; }
.threads-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.th { flex: 1 1 260px; padding: 10px 12px; border: 1px solid rgba(31,182,209,.3); background: rgba(31,182,209,.05); }
.th b { display: block; color: var(--cyan); font-size: 12px; font-weight: 500; }
.th small { font-size: 11.5px; line-height: 1.5; }
.plots-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.plots-row:empty { display: none; }
.plots-h { grid-column: 1 / -1; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-hot); }
.plot { padding: 14px 16px 16px; border: 1px solid rgba(139,92,246,.35); border-left: 3px solid var(--red-hot); background: linear-gradient(180deg, rgba(123,85,173,.14), transparent); }
.plot b { display: block; font-size: 15px; margin-bottom: 4px; }
.plot small { display: block; font-size: 11.5px; line-height: 1.5; opacity: .75; margin-bottom: 8px; }
.plot p { margin: 0; font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) { .plots-row { grid-template-columns: 1fr; } }

.modes-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mode-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-decoration: none; color: var(--paper-2); border: 1px solid rgba(167,123,255,.3); background: linear-gradient(160deg, rgba(42,29,68,.55), rgba(7,4,12,.85)); transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); }
.mode-tile:hover { transform: translateY(-4px); border-color: var(--paper); box-shadow: 0 24px 40px -24px rgba(255,43,60,.6); }
.mode-tile .mk { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mode-tile b { font-family: var(--brand); font-size: 30px; color: var(--paper); text-transform: lowercase; line-height: 1; }
.mode-tile p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.mode-tile.m-season { border-color: rgba(255,43,60,.5); background: linear-gradient(160deg, rgba(191,9,9,.3), rgba(7,4,12,.85)); }
.mode-tile.m-trial b { color: var(--cyan); }
.mode-tile.m-fight b { color: var(--violet-hot); }

.labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.lb { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border: 1px solid rgba(167,123,255,.3); background: rgba(42,29,68,.25); transform: rotate(-1.5deg); }
.lb:nth-child(even) { transform: rotate(1.2deg); }
.lb b { font-size: 18px; color: var(--violet-hot); }
.lb i { font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.lb small { font-size: 11px; color: var(--muted); }

.built-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.built-grid div { padding: 16px; border: 1px solid var(--line); background: rgba(12,10,17,.6); }
.built-grid b { display: block; font-family: var(--brand); font-size: 32px; color: var(--paper); }
.built-grid i { font-style: normal; font-size: 11.5px; line-height: 1.5; }
.built-links a { color: var(--violet-hot); font-size: 13px; }

.landing .btn.ghost { background: transparent; border-color: transparent; color: var(--paper-2); padding-left: 6px; padding-right: 6px; text-decoration: underline; text-decoration-color: rgba(167,123,255,.6); text-underline-offset: 5px; }
.landing .btn.ghost:hover { border-color: var(--violet-hot); color: var(--paper); }

/* the game itself in the first screen: 1440×900 scaled into the frame by landing.js */
.hero-live { margin: 0; }
.hero-live .frame { position: relative; }
.frame-bar .live-dot { width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; background: var(--red-hot); box-shadow: 0 0 10px var(--red-hot); animation: pulse 1.6s ease-in-out infinite; }
.frame-bar .live-dot + span { margin-left: 6px; }
@keyframes pulse { 50% { opacity: .3; } }
.frame-bar .frame-full { margin-left: auto; color: var(--paper-2); text-decoration: none; font-size: 11px; }
.frame-bar .frame-full:hover { color: var(--paper); }
.live-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.live-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .6s; }
.live-wrap iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; aspect-ratio: auto; max-width: none; border: 0; transform-origin: 0 0; background: #000; opacity: 0; transition: opacity .8s; }
.live-wrap.on iframe { opacity: 1; }
.live-wrap.on img, .live-wrap.on .demo-play { opacity: 0; pointer-events: none; }
.live-wrap .demo-play { cursor: pointer; transition: opacity .4s; }
.hero-live figcaption { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--muted); max-width: 80ch; }

/* why: three readers */
.why-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.why { padding: 20px; border: 1px solid var(--line); border-top: 3px solid var(--red-hot); background: linear-gradient(180deg, rgba(191,9,9,.1), rgba(7,4,12,.75)); }
.why:nth-child(2) { border-top-color: var(--violet-hot); background: linear-gradient(180deg, rgba(123,85,173,.14), rgba(7,4,12,.75)); }
.why:nth-child(3) { border-top-color: var(--cyan); background: linear-gradient(180deg, rgba(31,182,209,.08), rgba(7,4,12,.75)); }
.why .who { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.why b { display: block; margin: 8px 0 10px; font-family: var(--brand); font-size: 22px; line-height: 1.1; color: var(--paper); text-transform: lowercase; }
.why p { margin: 0; font-size: 13px; line-height: 1.65; }

/* the world */
.world-lede { color: var(--paper) !important; font-size: 16px !important; }
.world-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.world-text p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; }
.factions { display: grid; gap: 8px; }
.fac { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--fc, var(--violet-hot)); background: rgba(12,10,17,.6); }
.fac b { color: var(--fc, var(--violet-hot)); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.fac p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.fac.f-team { --fc: #ff2b3c; } .fac.f-members { --fc: #1fb6d1; } .fac.f-partners { --fc: #ffb02e; } .fac.f-agents { --fc: #a77bff; } .fac.f-market { --fc: #e9e4d6; }

/* the rules: the live ring next to the stations */
.ring-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.ring-grid .stations { grid-template-columns: 1fr; gap: 8px; }
.ring-grid .st { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; border-top-width: 1px; border-left: 3px solid var(--stc); padding: 10px 14px; }
.ring-grid .st p { margin: 0; }

/* how a season plays */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--violet-hot); }
.path li { position: relative; padding: 20px 18px 22px 0; }
.path li::before { content: ''; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; background: var(--ink-0); border: 2px solid var(--violet-hot); transform: rotate(45deg); }
.path li:nth-child(n+5) { border-top: 1px dashed rgba(167,123,255,.35); margin-top: 18px; }
.path li:nth-child(n+5)::before { border-color: var(--red-hot); top: -9px; }
.path i { display: block; margin-top: 8px; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.path b { display: block; margin: 6px 0; font-size: 16px; color: var(--paper); font-weight: 500; text-transform: lowercase; }
.path p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; }
.path small { font-size: 10.5px; color: var(--cyan); }
.path small code { font: inherit; color: var(--paper-2); }

/* growth */
.grow-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gw { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1px solid rgba(167,123,255,.28); background: linear-gradient(180deg, rgba(42,29,68,.4), rgba(7,4,12,.8)); }
.gw .gi { font-family: var(--brand); font-size: 26px; color: #ffb02e; }
.gw b { font-size: 14px; color: var(--paper); font-weight: 500; text-transform: lowercase; }
.gw p { margin: 0; font-size: 12px; line-height: 1.6; }
.ladder { margin: 8px 0 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.5; }
.ladder li { padding: 3px 0; border-top: 1px solid var(--line); }
.ladder b { color: var(--red-hot); margin-right: 6px; }

.modes-row .mode-tile.m-fixed b { color: #ffb02e; }
.modes-row .mode-tile.m-tut b { color: var(--paper); }
.modes-row .mode-tile.m-watch { border-style: dashed; }
.modes-row .mode-tile.m-watch b { color: var(--red-hot); }

.lfoot { display: flex; align-items: center; gap: 18px; padding: 30px 4vw 40px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lfoot img { height: 28px; opacity: .8; }
.lfoot a { margin-left: auto; color: var(--paper-2); text-decoration: none; }

@media (max-width: 1000px) {
  .hero-sec { grid-template-columns: 1fr; min-height: 0; padding-top: 6vh; }
  .stations, .leaders, .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapters, .built-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules, .modes-row, .why-row, .world-grid, .ring-grid { grid-template-columns: 1fr; }
  .path, .grow-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path li:nth-child(n+3) { border-top: 1px dashed rgba(167,123,255,.35); margin-top: 18px; }
  .lnav nav { display: none; }
  .fan .card { margin: 0 -40px; }
}
@media (max-width: 640px) {
  body.landing { overflow-x: clip; }
  .fan .card { --s: .82 !important; margin: 0 -30px; }
  .fan .card:nth-child(n+5) { display: none; }
  .path, .grow-row { grid-template-columns: 1fr; }
  .fac { grid-template-columns: 1fr; gap: 4px; }
  .ring-grid .st { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .band-sec { opacity: 1; transform: none; } .hero-copy h1 { animation: none; } }

/* three things in plain words (grow section) */
.plain3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.plain3 .pl { border: 1px solid rgba(167,123,255,.35); background: rgba(12,8,22,.55); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.plain3 .pg { font-family: var(--mono, 'JetBrains Mono', monospace); color: #bfa6ff; letter-spacing: .06em; font-size: 13px; }
.plain3 b { color: #f4f4ef; font-size: 15px; }
.plain3 p { margin: 0; color: #c9c6cf; line-height: 1.55; font-size: 13px; }
.plain3 code { color: #1fb6d1; font-family: inherit; }
@media (max-width: 900px) { .plain3 { grid-template-columns: 1fr; } }

/* ---------- v0.4.7: paper bands with a cut edge, grain, leaders as cut-out figures, live cards, the history ---------- */
:root { --pp: #f6f2fa; --pp-2: #e9e1f2; --pp-ink: #150e21; --pp-ink2: #3a3049; --pp-muted: #6c6180; --pp-red: #c3122e; --pp-violet: #5f37c4; --pp-cyan: #087a8f;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0 0.14 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0 0.14 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the dark bands get a film of grain and scanlines */
body.landing::after { content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; background: var(--grain), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); opacity: .32; mix-blend-mode: overlay; }
.band-sec { position: relative; }
.band-sec.paper { isolation: isolate; border-top: 0; color: var(--pp-ink2); padding-top: 12vh; padding-bottom: 12vh; }
.paper-wrap { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); filter: drop-shadow(0 -4px 0 var(--red-hot)) drop-shadow(0 5px 0 rgba(139,92,246,.85)) drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.paper-bg { position: absolute; inset: 0; background: var(--grain-light), radial-gradient(rgba(95,55,196,.1) 1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(170deg, var(--pp) 0%, var(--pp-2) 100%); }
.band-sec.paper .sec-head h2 { color: var(--pp-ink); text-shadow: 3px 0 0 rgba(195,18,46,.35), -2px 0 0 rgba(8,122,143,.3); }
.band-sec.paper .kicker { color: var(--pp-muted); }
.band-sec.paper .sec-head p { color: var(--pp-ink2); }
.band-sec.paper a { color: var(--pp-violet); }
.band-sec.paper .why { background: rgba(255,255,255,.55); border-color: rgba(21,14,33,.16); box-shadow: 6px 6px 0 rgba(21,14,33,.9); }
.band-sec.paper .why:nth-child(2), .band-sec.paper .why:nth-child(3) { background: rgba(255,255,255,.55); }
.band-sec.paper .why b { color: var(--pp-ink); }
.band-sec.paper .why .who { color: var(--pp-muted); }
.band-sec.paper .why p { color: var(--pp-ink2); }
.band-sec.paper .path li::before { background: var(--pp); border-color: var(--pp-violet); }
.band-sec.paper .path li:nth-child(n+5)::before { border-color: var(--pp-red); }
.band-sec.paper .path { border-top-color: var(--pp-violet); }
.band-sec.paper .path b { color: var(--pp-ink); }
.band-sec.paper .path p { color: var(--pp-ink2); }
.band-sec.paper .path i { color: var(--pp-muted); }
.band-sec.paper .path small { color: var(--pp-cyan); }
.band-sec.paper .path small code { color: var(--pp-ink); }
.band-sec.paper .plain3 .pl, .band-sec.paper .gw { background: rgba(255,255,255,.5); border-color: rgba(21,14,33,.18); box-shadow: 5px 5px 0 rgba(21,14,33,.85); }
.band-sec.paper .plain3 .pg { color: var(--pp-violet); }
.band-sec.paper .plain3 b, .band-sec.paper .gw b { color: var(--pp-ink); }
.band-sec.paper .plain3 p, .band-sec.paper .gw p { color: var(--pp-ink2); }
.band-sec.paper .plain3 code { color: var(--pp-cyan); }
.band-sec.paper .gw .gi { color: var(--pp-red); }
.band-sec.paper .ladder li { border-top-color: rgba(21,14,33,.15); }
.band-sec.paper .ladder b { color: var(--pp-red); }
.band-sec.paper .built-grid div { background: var(--pp-ink); border-color: var(--pp-ink); color: #d9d2e6; box-shadow: 5px 5px 0 var(--pp-red); }
.band-sec.paper .built-grid b { color: #fff; }
.band-sec.paper .built-links a { color: var(--pp-violet); }

/* leaders as cut-out figures: a dark cut card with an offset red edge and a paper label */
.cutout { position: absolute; right: 3vw; top: -64px; z-index: 2; margin: 0; width: 230px; pointer-events: none; transform: translateY(var(--py, 0px)) rotate(var(--rot, 2deg)); filter: drop-shadow(6px 7px 0 var(--hc, var(--red-hot))) drop-shadow(0 22px 26px rgba(0,0,0,.55)); transition: transform .2s linear; }
.cutout .cut { padding: 16px 10px 26px; background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--hc, #8b5cf6) 28%, #160c26), #05030a 85%); clip-path: polygon(4% 3%, 22% 0, 47% 4%, 71% 1%, 96% 5%, 100% 31%, 97% 58%, 100% 86%, 93% 100%, 64% 96%, 37% 100%, 8% 97%, 0 72%, 3% 44%, 0 17%); }
.cutout canvas { display: block; margin: 0 auto; max-width: 100%; height: auto !important; }
.cutout figcaption { position: absolute; left: -14px; bottom: -14px; transform: rotate(-3deg); padding: 5px 10px 6px; background: var(--paper); color: #0b0812; font-size: 11px; line-height: 1.25; border-left: 4px solid var(--hc, var(--red-hot)); box-shadow: 3px 3px 0 #0b0812; }
.cutout figcaption b { display: block; font-family: var(--brand); font-size: 15px; text-transform: lowercase; }
.cutout figcaption span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #4a4058; }
.cutout.h-founder { --hc: var(--red-hot); } .cutout.h-operator { --hc: var(--cyan); } .cutout.h-architect { --hc: var(--violet-hot); } .cutout.h-facilitator { --hc: #e3b45c; }
.band-sec .sec-head { position: relative; z-index: 1; }
.cutout .sig { position: absolute; right: -58px; bottom: 18px; transform: rotate(calc(var(--rot, 2deg) * -2.4)); filter: drop-shadow(4px 5px 0 rgba(11,8,18,.85)); }
.cutout .sig .card { position: relative; }
@media (max-width: 1500px) { .cutout .sig { right: -6px; bottom: -34px; } }
@supports (animation-timeline: view()) {
  .cutout { transition: none; animation: fig-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes fig-drift { from { translate: 0 46px; } to { translate: 0 -46px; } }
}
@media (max-width: 1100px) { .cutout { display: none; } }

/* the fan: dealt again on «↻», each card with the version it came in */
.fan.dealt .card { animation: deal .55s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes deal { from { opacity: 0; transform: translateY(40px) rotate(calc(var(--r) * 3)); } }
.fan .card .since { position: absolute; z-index: 3; right: 8px; top: 46px; white-space: nowrap; padding: 1px 6px; font-size: 9px; letter-spacing: .06em; color: var(--paper-2); background: rgba(7,4,12,.9); border: 1px solid var(--line-2); pointer-events: none; }
.fan .card .since.new { color: #0b0812; background: var(--cyan); border-color: var(--cyan); }
.new-fights { max-width: 920px; margin: 0 auto 18px; padding: 14px 18px; border: 1px solid var(--line-2, rgba(255,255,255,.14)); background: rgba(10,6,18,.55); }
.new-fights h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-hot); }
.new-fights ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.new-fights li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; font-size: 12px; }
.new-fights li i { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.new-fights li.t-elite i { color: var(--violet-hot, #a78bfa); } .new-fights li.t-boss i { color: var(--red-hot); }
.new-fights li b { font-family: var(--brand); font-size: 14px; text-transform: lowercase; }
.new-fights li small { grid-column: 1 / -1; color: var(--muted); line-height: 1.45; }
.fan-bar { display: flex; gap: 16px; justify-content: center; align-items: center; margin: 4px 0 14px; font-size: 12px; color: var(--muted); }
.fan-shuffle { padding: 6px 14px; border: 1px solid var(--line-2); background: rgba(12,10,17,.8); color: var(--paper); font: inherit; cursor: pointer; }
.fan-shuffle:hover { border-color: var(--cyan); color: var(--cyan); }

/* the history of the build: notes on a spine, lanes by role, a red stamp for every public version */
.devlog-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -10px 0 26px; font-size: 11.5px; color: var(--pp-ink2); }
.devlog-legend span { display: inline-flex; align-items: center; gap: 7px; }
.devlog-legend i { width: 12px; height: 12px; background: var(--lc); transform: rotate(45deg); }
.devlog { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin: 0 0 40px; }
.devlog::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: repeating-linear-gradient(180deg, var(--pp-ink) 0 10px, transparent 10px 16px); }
.dl { --lc: var(--pp-violet); position: relative; margin: 0 0 22px; padding: 14px 16px 14px; background: rgba(255,255,255,.62); border: 1px solid rgba(21,14,33,.16); border-top: 3px solid var(--lc); box-shadow: 5px 5px 0 rgba(21,14,33,.85); transform: rotate(var(--tilt, -.5deg)); color: var(--pp-ink2); }
.dl.left { grid-column: 1; } .dl.right { grid-column: 2; --tilt: .6deg; margin-top: 46px; margin-bottom: -24px; }
.dl::after { content: ''; position: absolute; top: 18px; width: 14px; height: 14px; background: var(--lc); border: 2px solid var(--pp); transform: rotate(45deg); }
.dl.left::after { right: -41px; } .dl.right::after { left: -41px; }
.l-research { --lc: var(--pp-cyan); } .l-lead { --lc: var(--pp-violet); } .l-agent { --lc: #b04ad6; } .l-check { --lc: #c77d12; } .l-ops { --lc: var(--pp-ink); } .l-sound { --lc: #2f9e6e; } .l-rel { --lc: var(--pp-red); }
.dl-when { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-muted); }
.dl-who { margin: 5px 0 6px; font-family: var(--brand); font-size: 18px; line-height: 1.1; color: var(--pp-ink); text-transform: lowercase; }
.dl-who i { display: inline-block; margin-right: 4px; padding: 1px 6px; font: 600 9.5px/1.5 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--lc); vertical-align: 3px; }
.dl-what { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6; }
.dl-res { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--pp-ink); font-weight: 600; }
.stamp { margin: 12px -4px 0; padding: 10px 12px; border: 2px solid var(--pp-red); color: var(--pp-red); background: rgba(195,18,46,.05); transform: rotate(-1.2deg); }
.stamp > b { font-family: var(--brand); font-size: 22px; margin-right: 8px; }
.stamp > span { font-size: 12.5px; color: var(--pp-ink); }
.stamp small { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .06em; color: var(--pp-muted); }
.cards-delta { display: flex; flex-wrap: wrap; gap: 4px 5px; margin-top: 7px; align-items: center; }
.cards-delta em { flex-basis: 100%; font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); margin-top: 3px; }
.cards-delta i { font-style: normal; font-size: 11px; padding: 1px 7px; border: 1px solid rgba(21,14,33,.25); background: #fff; color: var(--pp-ink); }
.cards-delta i.add { border-color: var(--pp-cyan); color: var(--pp-cyan); }
.cards-delta i.more { color: var(--pp-muted); }
.band-sec.paper.in .dl { animation: note-in .6s var(--ease) both; animation-delay: calc(var(--n) * 60ms); }
@keyframes note-in { from { opacity: 0; transform: translateY(16px) rotate(0); } }
@media (max-width: 900px) {
  .devlog { grid-template-columns: 1fr; } .devlog::before { left: 8px; }
  .dl.left, .dl.right { grid-column: 1; margin: 0 0 18px 30px; }
  .dl.left::after, .dl.right::after { left: -29px; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .fan.dealt .card, .band-sec.paper.in .dl { animation: none; } .cutout { transition: none; animation: none; } }
.modes-row .mode-tile.m-incident { border-color: rgba(255,43,60,.45); background: linear-gradient(160deg, rgba(74,12,20,.55), rgba(7,4,12,.88)); }
.modes-row .mode-tile.m-incident b { color: var(--red-hot); }
.modes-row .mode-tile.m-help { border-style: dashed; }
/* 14.10: the page reads bigger on a desktop – body text 14–17 px */
@media (min-width: 900px) {
  .hero-copy .lede { font-size: 17px; }
  .landing .kicker { font-size: 11px; }
  .landing .btn.big { font-size: 15px; }
  .lnav a { font-size: 13px; }
  .sec-head p, .world-text p { font-size: 16px; }
  .why p { font-size: 15px; }
  .st b { font-size: 15px; } .st p { font-size: 13.5px; }
  .rules b { font-size: 15px; } .rules p { font-size: 14px; }
  .leader .bio { font-size: 13.5px; } .leader .style, .leader .ab { font-size: 13px; }
  .chapters b { font-size: 16px; } .chapters p { font-size: 13.5px; }
  .th b { font-size: 13px; } .th small { font-size: 13px; }
  .mode-tile p { font-size: 14px; } .mode-tile b { font-size: 32px; }
  .fac p, .path p { font-size: 14px; } .gw p { font-size: 13.5px; }
  .plain3 p { font-size: 14.5px; } .plain3 b { font-size: 16px; }
  .dl-what, .dl-res { font-size: 14px; }
  .hero-live figcaption, .ring-caption, .fan-note, .demo-note { font-size: 13px; }
}

/* ---------- 15.10: four leaders as four figures, play with your agent, the history in lines, versions in a table ---------- */
.leader.h-founder { --hc: #ff2b3c; } .leader.h-operator { --hc: #1fb6d1; } .leader.h-architect { --hc: #a77bff; } .leader.h-facilitator { --hc: #e9c98f; }
.leaders { align-items: start; gap: 20px; }
.leader { position: relative; overflow: hidden; isolation: isolate; gap: 10px; padding: 16px 16px 18px; border: 0;
  background: linear-gradient(165deg, color-mix(in srgb, var(--hc) 24%, #140a22) 0%, #0a0612 56%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 55%, transparent), inset 0 3px 0 var(--hc); }
.leader:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--hc), inset 0 3px 0 var(--hc), 0 30px 50px -30px color-mix(in srgb, var(--hc) 70%, #000); }
.leader .l-sign { position: absolute; right: -16px; bottom: -52px; z-index: -1; font-size: 230px; line-height: 1; color: var(--hc); opacity: .12; pointer-events: none; }
.leader.h-founder { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.leader.h-operator { margin-top: 44px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 55%, transparent), inset 6px 0 0 var(--hc); }
.leader.h-architect { margin-top: 14px; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.leader.h-facilitator { margin-top: 62px; border-radius: 44px 44px 44px 6px; }
.leader .lp { border-color: color-mix(in srgb, var(--hc) 35%, transparent); }
.leader.h-operator .lp { background: repeating-linear-gradient(0deg, rgba(31,182,209,.09) 0 2px, transparent 2px 6px), radial-gradient(70% 60% at 50% 40%, rgba(31,182,209,.2), #05030a 80%); }
.leader.h-architect .lp { background: linear-gradient(rgba(167,123,255,.13) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(167,123,255,.13) 1px, transparent 1px) 0 0 / 14px 14px, radial-gradient(70% 60% at 50% 40%, rgba(167,123,255,.22), #05030a 80%); }
.leader.h-facilitator .lp { border-radius: 999px 999px 14px 14px; }
.leader.h-facilitator .role { left: 50%; top: auto; bottom: 8px; transform: translateX(-50%); }
.leader h3 { font-size: 24px; color: var(--hc); }
.leader .lk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.leader .lk .diff { margin-left: auto; letter-spacing: 2px; color: var(--hc); }
.leader .bio { font-style: italic; color: var(--paper-2); }
.leader .lbk { padding: 8px 10px; background: rgba(5,3,10,.62); border-left: 2px solid var(--hc); }
.leader .lbk small { display: block; margin-bottom: 3px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hc); }
.leader .lbk b { display: block; color: var(--paper); font-size: 14px; font-weight: 500; }
.leader .lbk p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--paper-2); }
.leader .lbk code { color: var(--paper); background: none; padding: 0; font-size: inherit; }
.leader .lbk.sig { border-left-style: dashed; }
@media (max-width: 1000px) { .leader.h-operator, .leader.h-architect, .leader.h-facilitator { margin-top: 0; } }

.agents-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.ag-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ag { position: relative; padding: 16px 18px 16px 66px; border: 1px solid rgba(167,123,255,.32); background: linear-gradient(160deg, rgba(42,29,68,.5), rgba(7,4,12,.88)); }
.ag-n { position: absolute; left: 16px; top: 12px; font-family: var(--brand); font-size: 30px; color: var(--red-hot); }
.ag > b { display: block; margin-bottom: 8px; font-family: var(--brand); font-size: 21px; color: var(--paper); text-transform: lowercase; }
.ag p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }
.ag-cmd { display: block; padding: 9px 11px; font-size: 12.5px; color: #9ff1ff; background: #05030a; border: 1px dashed rgba(31,182,209,.45); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.ag-lim { display: flex; gap: 22px; }
.ag-lim span { display: flex; align-items: baseline; gap: 8px; }
.ag-lim em { font-style: normal; font-family: var(--brand); font-size: 42px; line-height: 1; color: var(--cyan); }
.ag-lim i { font-style: normal; font-size: 12px; color: var(--muted); }
.seals { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 26px; align-items: center; }
.seal:nth-child(3) { grid-column: 1; grid-row: 1 / span 2; }
.seal:nth-child(1), .seal:nth-child(2) { grid-column: 2; }
.seal { position: relative; margin: 0; text-align: center; transform: rotate(calc((var(--i) - 1) * 5deg)) translateY(calc((var(--i) - 1) * 18px)); transition: transform .35s var(--ease); }
.seal:hover { z-index: 2; transform: rotate(0) scale(1.08); }
.seal img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(191,9,9,.45), 0 26px 40px -18px rgba(0,0,0,.85), 0 0 60px -12px rgba(167,123,255,.4); }
.seal figcaption { margin-top: 12px; font-size: 11px; letter-spacing: .1em; white-space: nowrap; color: var(--muted); }
.ag-note { margin: 26px 0 0; max-width: 84ch; font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .agents-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .seals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .seal:nth-child(3) { grid-column: 1 / -1; grid-row: 1; padding: 0 8%; } .seal:nth-child(1) { grid-column: 1; grid-row: 2; } .seal:nth-child(2) { grid-column: 2; grid-row: 2; } .seal { transform: none; } .seal figcaption { white-space: normal; } .ag { padding-left: 54px; } .ag-n { left: 12px; font-size: 24px; } }

.devlog { display: block; columns: 2; column-gap: 48px; margin: 0 0 40px; }
.devlog::before { display: none; }
.dl-day { break-after: avoid; margin: 16px 0 4px; padding-bottom: 4px; font-family: var(--brand); font-size: 19px; color: var(--pp-ink); border-bottom: 2px solid var(--pp-ink); }
.dl-day:first-child { margin-top: 0; }
.dl-row { --lc: var(--pp-violet); break-inside: avoid; display: grid; grid-template-columns: 20px 52px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 4px; border-bottom: 1px dashed rgba(21,14,33,.18); font-size: 13px; line-height: 1.45; color: var(--pp-ink); cursor: help; }
.dl-row:hover { background: rgba(255,255,255,.65); }
.dl-g { font-style: normal; font-weight: 700; text-align: center; color: var(--lc); }
.dl-t { font-size: 10.5px; letter-spacing: .08em; color: var(--pp-muted); }
.dl-v { padding: 1px 7px; font-family: var(--brand); font-size: 13px; font-weight: 400; color: #fff; background: var(--pp-red); transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--pp-ink); }
.l-story { --lc: #b0571c; }
.devlog-legend i { width: auto; height: auto; background: none; transform: none; font-style: normal; font-weight: 700; color: var(--lc); }
.devlog-legend b { padding: 0 5px; font-family: var(--brand); font-weight: 400; color: #fff; background: var(--pp-red); }
.band-sec.paper.in .dl-row { animation: note-in .5s var(--ease) both; animation-delay: calc(var(--n) * 18ms); }
@media (max-width: 900px) { .devlog { columns: 1; } }
@media (min-width: 900px) { .dl-row { font-size: 14px; } }

.ver-wrap { overflow-x: auto; border-top: 2px solid var(--red-hot); }
.ver { width: 100%; border-collapse: collapse; font-size: 13px; }
.ver th { padding: 10px; text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.ver td { padding: 10px; vertical-align: baseline; color: var(--paper-2); border-bottom: 1px solid var(--line); }
.ver td.v { font-family: var(--brand); font-size: 18px; color: var(--paper); white-space: nowrap; }
.ver td.d, .ver td.e { white-space: nowrap; font-size: 12px; color: var(--muted); }
.ver td.c { white-space: nowrap; font-size: 12px; color: var(--cyan); }
.ver td.n { min-width: 16ch; max-width: 30ch; color: var(--paper); }
.ver td.n a { margin-left: 6px; font-size: 11px; color: var(--violet-hot); }
.ver td.m span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ver td code { font-size: 11px; color: var(--muted); }
.ver tr.now td { background: rgba(191,9,9,.13); } .ver tr.now td.v { color: var(--red-hot); }
.ver tbody tr:hover td { background: rgba(167,123,255,.09); }
@media (max-width: 700px) {
  .ver thead { display: none; }
  .ver tr { display: grid; grid-template-columns: auto auto 1fr; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ver td { padding: 0; border: 0; }
  .ver td.n, .ver td.m { grid-column: 1 / -1; white-space: normal; }
  .ver td.e { display: none; }
  .ver tr.now { background: rgba(191,9,9,.13); } .ver tr.now td { background: none; }
}

/* Request 50: real actions with a readable causal chain and a large recording. */
.agent-door { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-top: 24px; border: 1px solid var(--violet-hot); background: linear-gradient(110deg, rgba(167,123,255,.24), rgba(5,3,10,.8)); color: var(--paper); text-decoration: none; box-shadow: 5px 5px 0 rgba(167,123,255,.16); }
.agent-door:hover, .agent-door:focus-visible { border-color: var(--cyan); background-color: rgba(31,182,209,.1); }
.agent-door-mark { font-size: 36px; color: var(--cyan); }
.agent-door b { display: block; font: 25px/1.15 var(--brand); }
.agent-door small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--paper-2); }
.agent-door > span:last-child { margin-left: auto; font-size: 28px; }
#agentCopyStatus { display: inline-block; margin: 8px; color: var(--cyan); font-size: 12px; }
.combat-examples { display: grid; gap: 58px; margin: 36px 0 48px; }
.combat-example { --example-color: var(--cyan); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 22px 30px; padding: 28px; border: 1px solid var(--line-2); border-top: 3px solid var(--example-color); background: radial-gradient(ellipse at 0 0, rgba(31,182,209,.08), transparent 70%), #09060f; }
.example-crisis { --example-color: #ff6161; }
.example-tool { --example-color: var(--violet-hot); }
.example-index { color: var(--example-color); font: 32px/1 var(--brand); }
.example-copy h3 { margin: 12px 0 16px; font: 32px/1.12 var(--brand); color: var(--paper); }
.example-copy > p { font-size: 14px; line-height: 1.65; margin-bottom: 24px; }
.example-stats { display: grid; gap: 12px; margin: 0; }
.example-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--line-2); padding-bottom: 8px; }
.example-stats dt { color: var(--paper-2); font-size: 12px; }
.example-stats dd { margin: 0; font: 28px/1.1 var(--brand); color: var(--example-color); white-space: nowrap; }
.example-media { margin: 0; align-self: center; min-width: 0; }
.example-media video { display: block; width: 100%; height: auto; aspect-ratio: 8/5; background: #05030a; border: 1px solid var(--line-2); }
.example-media figcaption { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.example-toggle { padding: 7px 10px; color: var(--paper); border: 1px solid var(--example-color); background: transparent; font: inherit; cursor: pointer; }
.example-chain { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; grid-column: 1/-1; list-style: none; margin: 0; padding: 18px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.example-chain li { position: relative; align-content: center; font-size: 14px; line-height: 1.5; color: var(--example-color); }
.example-chain li:not(:last-child)::after { content: '→'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--paper); }
.example-note { grid-column: 1/-1; margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.ring-reference { margin-bottom: 30px; border-bottom: 1px solid var(--line-2); }
.ring-reference summary { cursor: pointer; padding: 16px 0; color: var(--paper-2); }
@media (max-width: 1000px) { .combat-example { grid-template-columns: minmax(0,1fr); } .example-stats { grid-template-columns: repeat(3,minmax(0,1fr)); } .example-stats > div { display: block; } .example-stats dd { margin-top: 8px; } }
@media (max-width: 640px) { .combat-example { padding: 18px 12px; gap: 20px; } .example-copy h3 { font-size: 29px; } .example-stats dt { font-size: 10px; } .example-stats dd { font-size: 25px; } .example-chain { grid-template-columns: minmax(0,1fr); gap: 22px; } .example-chain li:not(:last-child)::after { content: '↓'; top: auto; bottom: -22px; right: auto; left: 0; transform: none; } .agent-door { padding: 14px 12px; gap: 10px; } .agent-door b { font-size: 23px; } .agent-door-mark { font-size: 28px; } }
@media (max-width: 640px) {
  .example-stats { grid-template-columns: minmax(0,1fr); }
  .example-stats > div { display: flex; }
  .example-stats dt { font-size: 12px; }
  .example-stats dd { margin-top: 0; font-size: 28px; }
}

.demo-scope { border-left: 3px solid var(--violet-hot); padding: 10px 16px; margin: 20px 0; background: rgba(167,123,255,.08); }
.demo-scope > b { font: 21px/1.3 var(--brand); color: var(--paper); }
.demo-scope p { font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.facts-scope { margin: 26px 0 -18px; color: var(--muted); font-size: 11px; }
.preview-tile { cursor: default; }
.season-teasers { margin: 22px 0; }
.season-teasers summary { cursor: pointer; color: var(--violet-hot); padding: 12px 0; }
.plot small { display: block; margin-top: 10px; color: var(--muted); }
.seals:has(.seal:only-child) { display: block; max-width: 430px; justify-self: center; }
.seal:only-child { transform: none; }
.agent-clients { margin-top: 36px; }
.agent-clients > h3 { font: 28px/1.2 var(--brand); }
.agent-client-status, .agent-client p { font-size: 13px; line-height: 1.6; }
.agent-client { border-top: 1px solid var(--line-2); padding: 14px 0; }
.agent-client summary { cursor: pointer; color: var(--paper); font-size: 17px; }
.agent-client section { margin: 20px 0; max-width: 920px; }
.agent-client pre { padding: 16px; background: #09060f; border: 1px solid var(--line-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.agent-client code { font: inherit; }
.recipe-sources { display: flex; flex-wrap: wrap; gap: 12px; }
.recipe-status { color: var(--cyan); }
.agent-doc-link { margin-top: 20px; font-size: 13px; }
.agent-replay-slot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.agent-replay-slot h3 { font: 28px/1.2 var(--brand); }
.agent-replay-slot p { max-width: 950px; font-size: 14px; line-height: 1.65; }
.agent-replay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0; }
.agent-replay-actions > a:last-child { font-size: 13px; }
.agent-replay-frame iframe { display: block; width: 100%; height: 850px; border: 1px solid var(--line-2); background: #08070e; }
@media(max-width:640px) { .agent-replay-frame iframe { height: 900px; } }
/* Reserve the deferred history's space; the first screen loads without its index or images. */
#landingHistory { min-height:700px; }
@media(max-width:640px){ #landingHistory { min-height:1000px; } }

/* play/styles/project-history.css */
.project-history { color:var(--paper,#eee8f4); font:14px/1.6 var(--mono,monospace); min-width:0; }
.project-history h2 { font:32px/1.2 var(--brand,monospace); margin:0 0 16px; }
.project-history h3 { font-size:18px; margin:22px 0 10px; }
.project-history p { max-width:82ch; }
.project-history .ph-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:24px 0; }
.project-history .ph-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.project-history button,.project-history select { font:inherit; color:inherit; background:#171020; border:1px solid #5e4b73; padding:9px 13px; cursor:pointer; min-height:42px; }
.project-history button[aria-selected=true] { background:#342047; border-color:#bf99ff; }
.project-history button:focus-visible,.project-history select:focus-visible,.project-history .ph-scroll:focus-visible { outline:2px solid #ff6370; outline-offset:3px; }
.project-history .ph-language { display:flex; gap:4px; margin-left:auto; }
.project-history .ph-scroll { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid #42334f; }
.project-history table { width:100%; border-collapse:collapse; min-width:700px; font-size:14px; line-height:1.55; }
.project-history th,.project-history td { text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid #42334f; }
.project-history thead th { background:#21152d; font-weight:500; white-space:nowrap; }
.project-history tbody th { font-weight:500; min-width:110px; }
.project-history td { color:var(--paper-2,#cebedc); }
.project-history small { display:block; font-size:12px; color:var(--muted,#b09abd); line-height:1.5; margin-top:6px; }
.project-history ul { margin:8px 0; padding-left:18px; }
.project-history li+li { margin-top:6px; }
.project-history pre { font:12px/1.5 var(--mono,monospace); white-space:pre-wrap; overflow-wrap:anywhere; min-width:140px; max-width:440px; max-height:260px; overflow:auto; margin:0; }
.project-history code { overflow-wrap:anywhere; }
.project-history .ph-change { margin:16px 0; padding:14px 0; border-top:1px solid #59416c; }
.project-history summary { cursor:pointer; font-size:16px; color:var(--paper,#eee8f4); padding:8px 0; }
.project-history details details { margin:8px 0; }
.project-history .ph-image-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin-top:18px; }
.project-history figure { margin:0; min-width:0; }
.project-history figure img { display:block; width:100%; height:auto; background:#100b18; border:1px solid #44314f; }
.project-history figcaption { font-size:16px; margin-bottom:10px; }
.project-history .ph-missing { color:var(--muted,#b09abd); padding:20px 0; }
.project-history .ph-more { display:inline-block; margin:18px 0; font-size:16px; color:#c1a3ff; }
@media(max-width:760px){ .project-history .ph-image-pair { grid-template-columns:minmax(0,1fr); }.project-history h2 { font-size:27px; }.project-history .ph-controls { gap:10px; }.project-history .ph-language { margin-left:0; }.project-history table { min-width:680px; }.project-history .ph-tabs { width:100%; } }
.project-history .ph-image-open { display:inline-block; font-size:13px; margin-top:5px; color:#c1a3ff; }
#project-history { scroll-margin-top:100px; }
.project-history .ph-shortcuts { display:flex; flex-wrap:wrap; gap:10px 22px; margin:14px 0 24px; }
.project-history .ph-shortcuts a { color:#c1a3ff; font-size:14px; }
.project-history .ph-compact-pair { margin-bottom:24px; }
.project-history { padding:24px 20px; background:rgba(14,10,21,.97); border:1px solid #42334f; }
@media(max-width:760px){ .project-history { padding:18px 12px; } }
.project-history .ph-balance-controls { margin:16px 0 24px; }
.project-history .ph-balance-controls[hidden] { display:none; }
.project-history .ph-balance-controls label { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.project-history .ph-cohort { width:min(100%,560px); max-width:100%; min-width:0; }
.project-history .ph-baseline { border-left:3px solid #a77bff; padding-left:14px; margin:22px 0; }