/* Looks: the visitor-chosen looks shared with the CF Archive and Solar Sponge (ElectricityDashboard/prototypes/shared/looks.css),
   set by looks.js as data-look on <html>. No data-look is this site's own look, defined in index.html. Each look is a full
   replacement set of the same tokens plus the structural rules that give it character; rules for markup this page does
   not have simply match nothing. */

/* ---- Ledger: CF Archive's default, a record book. The only look with light and dark versions. ---- */
:root[data-look="ledger"]{
  --ground:#f4f5f7; --surface:#fff; --sunk:#eaedf1; --raise:#fff;
  --ink:#17202b; --ink-soft:#4a5665; --ink-faint:#5f6a77;
  --rule:#d8dce2; --rule-strong:#b9c0c9;
  --accent:#a86a06; --accent-soft:#f6ecd9; --cf-accent-ink:#7d4e04;
  --win:#2a6b5d;  --win-soft:#e2efeb;
  --placed:#3f5b8a; --placed-soft:#e6ecf6;
  --caution:#8f3a31; --caution-soft:#f7e6e3;
  --serif:"IBM Plex Serif",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:2px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root[data-look="ledger"]:not([data-theme="light"]){
  --ground:#12171e; --surface:#1a212a; --sunk:#151b23; --raise:#202935;
  --ink:#e6eaef; --ink-soft:#a8b3c0; --ink-faint:#8a96a2;
  --rule:#2c3642; --rule-strong:#3d4a59;
  --accent:#e0a83c; --accent-soft:#2b2517; --cf-accent-ink:#f0c76f;
  --win:#6fc0a9; --win-soft:#1b2a26;
  --placed:#8fadde; --placed-soft:#1c2434;
  --caution:#e08a7e; --caution-soft:#2b1d1b;
  color-scheme:dark;
}}
:root[data-look="ledger"][data-theme="dark"]{
  --ground:#12171e; --surface:#1a212a; --sunk:#151b23; --raise:#202935;
  --ink:#e6eaef; --ink-soft:#a8b3c0; --ink-faint:#8a96a2;
  --rule:#2c3642; --rule-strong:#3d4a59;
  --accent:#e0a83c; --accent-soft:#2b2517; --cf-accent-ink:#f0c76f;
  --win:#6fc0a9; --win-soft:#1b2a26;
  --placed:#8fadde; --placed-soft:#1c2434;
  --caution:#e08a7e; --caution-soft:#2b1d1b;
  color-scheme:dark;
}

/* ---- Almanac: a sports statistics site. White, small, every cell ruled. ------- */
:root[data-look="almanac"]{
  --ground:#fff; --surface:#fff; --sunk:#eef1f5; --raise:#fff;
  --ink:#111; --ink-soft:#3d4450; --ink-faint:#5a6270;
  --rule:#d6dbe3; --rule-strong:#9aa4b2;
  --accent:#17365d; --accent-soft:#dfe5ee; --cf-accent-ink:#0b47a8;
  --win:#1d6b3a; --win-soft:#e1f1e6;
  --placed:#17365d; --placed-soft:#dfe5ee;
  --caution:#b00020; --caution-soft:#fbe4e8;
  --mark:#d49500; --mark-ink:#7a5200;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Verdana,Geneva,Tahoma,sans-serif;
  --mono:Verdana,Geneva,Tahoma,sans-serif;
  --r:0;
  color-scheme:light;
  body{font-size:12.5px;line-height:1.4}
  .shell{max-width:none;padding-top:0}
  header.top{background:#17365d;color:#fff;border:0;gap:.5rem;
             margin:0 calc(-1*var(--gutter)) 1rem;padding:.7rem var(--gutter) 0}
  :is(h1,header nav a[aria-current]){font-size:1.5rem;letter-spacing:0}
  header.top .eyebrow,header.top .sub{color:#c9d6e8}
  header.top .sub{font-size:.8rem}
  header.top .figs{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;background:none;border:0;overflow:visible}
  header.top .fig{background:none;padding:0;flex-direction:row;align-items:baseline;gap:.35rem}
  header.top .fig b{font-size:.85rem;color:#fff;letter-spacing:0}
  header.top .fig span{color:#c9d6e8;font-size:.78rem}
  .modes{gap:0;background:#0f2742;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter)}
  .mode{background:none;border:0;color:#dbe5f3;font-weight:700;font-size:.8rem;padding:.45rem .8rem}
  .mode[aria-pressed="true"]{background:#fff;color:#17365d;border:0}
  header.top :focus-visible{outline-color:#fff}
  .eyebrow,.fig span,.f label,.look,thead th,.sgrid h3,.kv dt,.tally i,.dk{text-transform:none;letter-spacing:0}
  .f label,.look,thead th,.kv dt,.sgrid h3{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
  .look{color:#c9d6e8}
  .scroll{border-color:var(--rule-strong)}
  table{font-size:1em}
  thead th{background:#dfe5ee;color:#111;border:1px solid var(--rule-strong);padding:.22rem .45rem}
  td{border:1px solid var(--rule);padding:.2rem .45rem}
  tbody tr:nth-child(even),tbody tr:nth-child(even) td.nm{background:#f3f5f8}
  tbody tr:hover,tbody tr:hover td.nm{background:#fff7c2}
  td.nm{color:var(--cf-accent-ink);text-decoration:underline;font-weight:400}
  td.rk.top{color:var(--ink)}
  dialog.sheet{border-top:3px solid #17365d}
  .detail h2,.dossier h2{letter-spacing:0}
}

/* ---- Telnet: the game's own screen. One fixed-width font, sixteen colours. ---- */
:root[data-look="telnet"]{
  --fixed:var(--mono);
  --ground:#0a0a0a; --surface:#0a0a0a; --sunk:#181818; --raise:#101010;
  --ink:#c8c8c8; --ink-soft:#a8a8a8; --ink-faint:#8a8a8a;
  --rule:#333; --rule-strong:#555;
  --accent:#ffff55; --accent-soft:#2b2b00; --cf-accent-ink:#ffff55;
  --win:#55ff55; --win-soft:#0d2b0d;
  --placed:#55ffff; --placed-soft:#062b2b;
  --caution:#ff5555; --caution-soft:#2f0e0e;
  --serif:Consolas,"Cascadia Mono","Lucida Console","DejaVu Sans Mono",monospace;
  --sans:Consolas,"Cascadia Mono","Lucida Console","DejaVu Sans Mono",monospace;
  --mono:Consolas,"Cascadia Mono","Lucida Console","DejaVu Sans Mono",monospace;
  --r:0;
  color-scheme:dark;
  body{font-size:14px;line-height:1.45}
  header.top{border-bottom:1px dashed var(--rule-strong)}
  :is(h1,header nav a[aria-current]){font-size:1rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.3em;line-height:1.45}
  :is(h1,header nav a[aria-current])::before{content:"*** "} :is(h1,header nav a[aria-current])::after{content:" ***"}
  .figs{display:flex;flex-wrap:wrap;gap:.1rem 2ch;background:none;border:0;overflow:visible}
  .fig{background:none;padding:0;flex-direction:row;gap:1ch;align-items:baseline}
  .fig b{font-size:1em;font-weight:400;color:var(--placed);letter-spacing:0}
  .fig span{font-size:1em;text-transform:none;letter-spacing:0}
  .modes{gap:.2rem 1.5ch}
  .mode{background:none;border:0;padding:0;font-size:1em;font-weight:400;color:var(--ink)}
  .mode::before{content:"["} .mode::after{content:"]"}
  .mode[aria-pressed="true"]{background:var(--win);color:#0a0a0a;border:0;font-weight:400}
  .f input,.f select,.look select,.pktools input{border:0;border-bottom:1px solid var(--rule-strong);
      background:var(--ground);padding-inline:0}
  .scroll{border:0}
  table{font-size:1em}
  thead th{background:var(--ground);color:var(--accent);border-bottom:1px dashed var(--rule-strong);
      font-size:1em;font-weight:400;text-transform:none;letter-spacing:0;padding:.15rem 1ch}
  td{border-bottom:0;padding:.08rem 1ch}
  td.nm{color:var(--placed);font-weight:400}
  .btn{border-style:dashed}
  .pill{background:none;padding:0;font-size:1em;font-weight:400;letter-spacing:0}
  .pill::before{content:"["} .pill::after{content:"]"}
  dialog.sheet{border-top:1px dashed var(--win);box-shadow:none}
  .detail h2{font-weight:700}
  .dossier h2{font-size:1.5rem;letter-spacing:0;line-height:1.3}
  .tally b{font-size:1.3rem;letter-spacing:0}
  .pksearch input{font-size:1.1rem;border-bottom:1px dashed var(--rule-strong)}
  .out{background:none;padding-left:0}
  .head2 .verb{font-size:1em;font-weight:400;letter-spacing:0}
  .head2 .verb .nm3{color:var(--placed);font-weight:400}
}

/* ---- Field Report: a typed after-action file in a manila folder. -------------- */
:root[data-look="report"]{
  --fixed:var(--mono);
  --ground:#e7dcbf; --surface:#ece2c8; --sunk:#d9cca9; --raise:#efe6cd;
  --ink:#1d1b16; --ink-soft:#45402f; --ink-faint:#5c553e;
  --rule:#b0a37c; --rule-strong:#1d1b16;
  --accent:#1f3f7a; --accent-soft:#d3d6cc; --cf-accent-ink:#1a3566;
  --win:#3c4127; --win-soft:#d2d0a8;
  --placed:#6b4a1e; --placed-soft:#e0cfa6;
  --caution:#9c1f17; --caution-soft:#ecc9b4;
  --serif:"Special Elite","Courier New",monospace;
  --sans:"Courier Prime","Courier New",monospace;
  --mono:"Courier Prime","Courier New",monospace;
  --r:0;
  color-scheme:light;
  body{background:#6f6a4d}
  .shell{background:var(--ground);margin-block:1.5rem 3rem;padding-top:0;
         box-shadow:0 2px 0 #cfc3a2,0 4px 0 #b9ad8c,0 18px 30px -12px rgba(0,0,0,.6)}
  header.top{background:#3c4127;color:#e7dcbf;border:0;
             margin:0 calc(-1*var(--gutter)) 1.2rem;padding:1.2rem var(--gutter) 0}
  :is(h1,header nav a[aria-current]){font-family:"Stardos Stencil","Special Elite",monospace;text-transform:uppercase;letter-spacing:.08em}
  header.top .eyebrow,header.top .sub,.look{color:#cfc7a6}
  header.top .figs{display:flex;flex-wrap:wrap;gap:0;background:none;border:1px solid #cfc7a6;
             width:max-content;max-width:100%}
  header.top .fig{background:none;border-right:1px solid #cfc7a6;flex:1 1 auto}
  header.top .fig:last-child{border-right:0}
  header.top .fig span{color:#cfc7a6}
  .modes{gap:.2rem;align-items:flex-end}
  .mode{background:#565c38;border:0;color:#e7dcbf;border-radius:5px 5px 0 0;text-transform:uppercase;
        font-size:.78rem;letter-spacing:.06em;padding:.45rem .8rem .35rem}
  .mode[aria-pressed="true"]{background:var(--ground);color:var(--ink);border:0;padding-top:.65rem}
  header.top :focus-visible{outline-color:#e7dcbf}
  .scroll{border-color:var(--rule)}
  thead th{background:var(--sunk);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  td,.hrow,.pkstart li{border-bottom-style:dotted}
  .row{border-bottom:1px dotted var(--rule)}
  td.nm{text-transform:uppercase}
  .out{background:none;border:1px solid currentColor;padding-block:.08rem}
  .detail h2,.dossier h2{text-transform:uppercase;letter-spacing:.05em;font-weight:400}
  dialog.sheet{border-top:3px solid #3c4127}
}

/* ---- Dashboard: a modern web app. Rounded cards and a gradient header. -------- */
:root[data-look="dash"]{
  --ground:#f3f2fb; --surface:#fff; --sunk:#f4f3fc; --raise:#fff;
  --ink:#1c1b2e; --ink-soft:#4f4d68; --ink-faint:#67657f;
  --rule:#e6e4f5; --rule-strong:#cdc9ea;
  --accent:#5a3ff0; --accent-soft:#eeebff; --cf-accent-ink:#4a31d6;
  --win:#0b6b47; --win-soft:#dcf7ec;
  --placed:#2157b8; --placed-soft:#e3edff;
  --caution:#b02a30; --caution-soft:#fde5e6;
  --mark:#e0a100; --mark-ink:#8a5a00;
  --serif:"Plus Jakarta Sans",system-ui,"Segoe UI",sans-serif;
  --sans:"Plus Jakarta Sans",system-ui,"Segoe UI",sans-serif;
  --mono:"Plus Jakarta Sans",system-ui,"Segoe UI",sans-serif;
  --r:10px;
  color-scheme:light;
  header.top{background:linear-gradient(135deg,#6b4df5,#2a62d6);color:#fff;border:0;border-radius:24px;
             padding:1.6rem 1.6rem 1.3rem;gap:1.1rem;box-shadow:0 20px 40px -22px rgba(80,60,220,.6)}
  :is(h1,header nav a[aria-current]){font-weight:800;letter-spacing:-.03em}
  header.top .eyebrow,header.top .sub,.look{color:rgba(255,255,255,.92)}
  header.top .figs{background:none;border:0;gap:.8rem}
  header.top .fig{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
             border-radius:16px;padding:.8rem 1rem}
  header.top .fig b{font-size:1.6rem;font-weight:800}
  header.top .fig span{color:rgba(255,255,255,.92);font-size:.82rem}
  .mode{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:999px;padding:.5rem 1rem;font-weight:600}
  .mode[aria-pressed="true"]{background:#fff;color:var(--cf-accent-ink);border:0}
  header.top :focus-visible{outline-color:#fff}
  .eyebrow,.fig span,.f label,.look,thead th,.pill,.sgrid h3,.kv dt,.tally i,.out,.tag,.dk{
      text-transform:none;letter-spacing:0}
  .f label,.look,thead th,.kv dt,.sgrid h3{font-size:.78rem;font-weight:600}
  .f input,.f select,.pktools input{padding:.5rem .7rem;background:var(--surface);border-color:var(--rule-strong)}
  .scroll{border:0;border-radius:18px;box-shadow:0 10px 30px -18px rgba(40,30,120,.35)}
  thead th{background:var(--surface);padding:.7rem .8rem}
  td{padding:.55rem .8rem}
  .pill,.chip,.btn,.seg,.out{border-radius:999px}
  .pill{font-size:.72rem;padding:.12rem .6rem}
  .out{font-size:.72rem;padding-inline:.7rem;text-align:center}
  .btn{padding-inline:.9rem}
  .share,.sb .tr,.rb .tr{border-radius:999px}
  .career i,.gbars i{border-radius:3px 3px 0 0}
  .note,.caution{border-left:0;border-radius:12px}
  dialog.sheet{border-top:0;border-radius:24px 24px 0 0}
  .dossier h2{font-weight:800}
}

/* ---- Tome: a fantasy spellbook. Parchment, blackletter, crimson and gold. ----- */
:root[data-look="tome"]{
  --ground:#ead9ad; --surface:#f1e3bd; --sunk:#e0cc98; --raise:#f3e7c6;
  --ink:#33210f; --ink-soft:#553d1f; --ink-faint:#684a16;
  --rule:#c9ae6c; --rule-strong:#8c6a1e;
  --accent:#8c6a1e; --accent-soft:#e6d096; --cf-accent-ink:#6a4c0c;
  --win:#2f5d2a; --win-soft:#d3d8a4;
  --placed:#2f4a7a; --placed-soft:#d2d3b8;
  --caution:#7a1414; --caution-soft:#e8c39c;
  --mark:#c8860a;
  --serif:"IM Fell English",Georgia,serif;
  --sans:"IM Fell English",Georgia,serif;
  --mono:"Cinzel",Georgia,serif;
  --r:3px;
  color-scheme:light;
  body{background:#22160c radial-gradient(ellipse at 50% 0,#4a321c,#1c120a 70%) fixed;font-size:16.5px}
  .shell{background:var(--ground) radial-gradient(ellipse at 50% 20%,#f3e4bd,#dcc48f 90%);
         margin-block:1.5rem 3rem;border:6px double var(--rule-strong);
         box-shadow:0 24px 50px -10px rgba(0,0,0,.8),inset 0 0 80px rgba(110,70,20,.3)}
  header.top{border-bottom:1px solid var(--rule-strong);text-align:center}
  .titlebar{justify-content:center;position:relative}
  .look{position:absolute;right:0;top:0;text-align:left}
  :is(h1,header nav a[aria-current]){font-family:"UnifrakturCook","IM Fell English",serif;font-size:clamp(2.2rem,6vw,3.8rem);
     font-weight:700;letter-spacing:0;color:#7a1414;text-shadow:1px 1px 0 #d9b25a}
  header.top .sub{margin-inline:auto;font-style:italic;font-size:1rem}
  header.top .figs{background:none;border:0;border-top:1px solid var(--rule-strong);
             border-bottom:1px solid var(--rule-strong)}
  header.top .fig{background:none;align-items:center}
  header.top .fig b{color:#7a1414}
  .modes{justify-content:center;gap:.5rem}
  .mode{background:linear-gradient(#f0deb0,#d2b678);border:1px solid var(--rule-strong);color:var(--ink);
        box-shadow:0 2px 0 var(--rule-strong);font-family:var(--mono);font-size:.8rem;letter-spacing:.04em}
  .mode[aria-pressed="true"]{background:linear-gradient(#8f1c1c,#5e0f0f);color:#f3dc9a;border-color:#3a0808}
  .scroll{border:3px double var(--rule-strong)}
  td.nm{font-family:var(--mono);color:#7a1414}
  .detail h2,.dossier h2{font-family:"UnifrakturCook","IM Fell English",serif;color:#7a1414;
     font-weight:700;letter-spacing:0}
  .detail h2{font-size:1.7rem}
  dialog.sheet{border-top:6px double var(--rule-strong)}
  @media (max-width:900px){ .look{position:static;margin-inline:auto} .titlebar{flex-direction:column;align-items:center} }
  /* a centred row that scrolls sideways cannot be scrolled back to its first tab */
  @media (max-width:640px){ .modes{justify-content:flex-start} }
}
/* ---- Retro VHS: a rented tape on a CRT. Scanlines, neon, the VCR's own font. -- */
:root[data-look="vhs"]{
  --fixed:var(--mono);
  --ground:#0d0a1f; --surface:#141030; --sunk:#0a0818; --raise:#1b1640;
  --ink:#ece8ff; --ink-soft:#bdb6e4; --ink-faint:#9a92c8;
  --rule:#2c2560; --rule-strong:#4d4299;
  --accent:#3fe0ff; --accent-soft:#0e2c3f; --cf-accent-ink:#7aeaff;
  --win:#5cff9d; --win-soft:#0f2d22;
  --placed:#ff6ad5; --placed-soft:#3a1238;
  --caution:#ff5470; --caution-soft:#3a1020;
  --mark:#ffd23f; --mark-ink:#ffe27a;
  --serif:VT323,"Share Tech Mono",Consolas,monospace;
  --sans:"Share Tech Mono",Consolas,monospace;
  --mono:VT323,"Share Tech Mono",Consolas,monospace;
  --r:0;
  color-scheme:dark;
  body{background:radial-gradient(ellipse at 50% 30%,#1a1340,#07051a 75%) fixed}
  /* scanlines and a tube vignette over everything; never catches a click */
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
      background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.22) 2px 3px),
                 radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55))}
  header.top{border-bottom:2px solid var(--placed);box-shadow:0 2px 0 var(--accent)}
  :is(h1,header nav a[aria-current]){font-size:clamp(2.4rem,6vw,4rem);font-weight:400;text-transform:uppercase;letter-spacing:.06em;
     text-shadow:-2px 0 #ff2a6d,2px 0 #3fe0ff}
  :is(h1,header nav a[aria-current])::before{content:"\25B6  ";color:var(--win);text-shadow:none}
  .detail h2,.dossier h2{font-weight:400;text-transform:uppercase;letter-spacing:.04em;
     text-shadow:-1px 0 #ff2a6d,1px 0 #3fe0ff}
  .fig b,.tally b{font-weight:400;letter-spacing:.02em;color:var(--accent)}
  .mode{background:none;border:1px solid var(--rule-strong);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
  .mode[aria-pressed="true"]{background:var(--placed);color:#0d0a1f;border-color:var(--placed)}
  td.nm{color:var(--cf-accent-ink)}
  thead th{background:var(--sunk);color:var(--placed)}
  dialog.sheet{border-top:2px solid var(--placed);box-shadow:0 -2px 0 var(--accent)}
  @media (prefers-reduced-motion:no-preference){
    :is(h1,header nav a[aria-current])::before{animation:vhsblink 1.2s steps(1) infinite}
  }
}
@keyframes vhsblink{50%{opacity:0}}

/* ---- Liquid Morph: pastel blobs that slowly change shape. --------------------- */
:root[data-look="liquid"]{
  --ground:#f1eefc; --surface:#fff; --sunk:#ece8fb; --raise:#fff;
  --ink:#1d1840; --ink-soft:#4a4475; --ink-faint:#5c5686;
  --rule:#e0dbf5; --rule-strong:#c3bbea;
  --accent:#7b3fe4; --accent-soft:#efe6fd; --cf-accent-ink:#5f27c4;
  --win:#0f7a5c; --win-soft:#dcf5ec;
  --placed:#b52c70; --placed-soft:#fbe3ef;
  --caution:#c0263b; --caution-soft:#fde4e7;
  --mark:#e08a00; --mark-ink:#8a5300;
  --serif:Syne,system-ui,sans-serif; --sans:Syne,system-ui,sans-serif; --mono:Syne,system-ui,sans-serif;
  --r:18px;
  color-scheme:light;
  body{background:#f1eefc radial-gradient(circle at 10% 10%,#e3d6ff,transparent 40%),
       radial-gradient(circle at 90% 30%,#d4f3ff,transparent 40%),
       radial-gradient(circle at 40% 90%,#ffe0f0,transparent 45%) fixed}
  header.top{background:linear-gradient(120deg,#d2c3ff,#bdeeff 50%,#ffd0ea);border:0;
             padding:1.6rem 1.9rem;border-radius:48px 120px 64px 140px / 40px 60px 50px 70px}
  header.top .eyebrow,header.top .sub,.look{color:var(--ink-soft)}
  :is(h1,header nav a[aria-current]){font-weight:800;letter-spacing:-.03em}
  .figs{background:none;border:0;gap:.6rem}
  .fig{background:rgba(255,255,255,.65);border-radius:28px 18px 32px 16px}
  .fig b{font-weight:800}
  .mode{border-radius:999px;border-color:transparent;background:rgba(255,255,255,.6)}
  .mode[aria-pressed="true"]{background:linear-gradient(120deg,#7b3fe4,#b52c70);color:#fff;border-color:transparent}
  .scroll{border:0;border-radius:24px;box-shadow:0 14px 34px -20px rgba(80,40,180,.5)}
  .pill,.chip,.btn,.seg,.out{border-radius:999px}
  dialog.sheet{border-top:0;border-radius:32px 32px 0 0}
  @media (prefers-reduced-motion:no-preference){ header.top,.fig{animation:liquidmorph 12s ease-in-out infinite alternate} }
}

/* ---- Neon Glow: tubes on a black wall. ----------------------------------------- */
:root[data-look="neon"]{
  --ground:#07060d; --surface:#0e0c18; --sunk:#0a0912; --raise:#151226;
  --ink:#f3f0ff; --ink-soft:#c4bfe0; --ink-faint:#a29cc4;
  --rule:#241f3d; --rule-strong:#3d3566;
  --accent:#00f0ff; --accent-soft:#06262c; --cf-accent-ink:#6ff7ff;
  --win:#39ff88; --win-soft:#0a2a18;
  --placed:#ff3df2; --placed-soft:#2e0b2c;
  --caution:#ff4f6d; --caution-soft:#2e0c14;
  --mark:#ffe14d; --mark-ink:#fff09a;
  --serif:"Tilt Neon",system-ui,sans-serif; --sans:"Tilt Neon",system-ui,sans-serif;
  --r:6px;
  color-scheme:dark;
  header.top{border-bottom:1px solid var(--placed);box-shadow:0 6px 14px -8px var(--placed)}
  :is(h1,header nav a[aria-current]){font-weight:400;color:#fff;text-shadow:0 0 4px #fff,0 0 12px #ff3df2,0 0 28px #ff3df2,0 0 48px #ff3df2}
  .fig b{color:var(--accent);text-shadow:0 0 10px currentColor}
  .mode{background:none;border-color:var(--accent);color:var(--cf-accent-ink);box-shadow:0 0 8px rgba(0,240,255,.35)}
  .mode[aria-pressed="true"]{background:var(--accent);color:#07060d;box-shadow:0 0 16px var(--accent)}
  .scroll{border-color:var(--placed);box-shadow:0 0 18px rgba(255,61,242,.35)}
  thead th{color:var(--accent);text-shadow:0 0 6px rgba(0,240,255,.6)}
  td.nm{color:var(--cf-accent-ink)}
  dialog.sheet{border-top:2px solid var(--accent);box-shadow:0 0 24px rgba(0,240,255,.4)}
  @media (prefers-reduced-motion:no-preference){ :is(h1,header nav a[aria-current]){animation:neonflicker 6s infinite} }
}

/* ---- Y2K Chrome: brushed silver, glossy aqua buttons, chrome type. ------------ */
:root[data-look="chrome"]{
  --ground:#dfe3ea; --surface:#f4f6f9; --sunk:#e6e9ef; --raise:#fff;
  --ink:#121826; --ink-soft:#3a4456; --ink-faint:#4d596d;
  --rule:#c3c9d4; --rule-strong:#8d97a8;
  --accent:#0050d8; --accent-soft:#dbe6fb; --cf-accent-ink:#0040b0;
  --win:#0a7a45; --win-soft:#d9f1e4;
  --placed:#7a1fd1; --placed-soft:#ece0fa;
  --caution:#c41c3b; --caution-soft:#fadde3;
  --mark:#d68a00; --mark-ink:#7a4f00;
  --serif:Orbitron,"Exo 2",sans-serif; --sans:"Exo 2",system-ui,sans-serif; --mono:"Exo 2",system-ui,sans-serif;
  --r:12px;
  color-scheme:light;
  body{background:linear-gradient(180deg,#eef1f6,#c9cfd9) fixed}
  :is(h1,header nav a[aria-current]){font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:transparent;
     background:linear-gradient(180deg,#fff 0%,#c7ced9 45%,#5b6577 50%,#e3e8ef 58%,#9aa4b3 100%);
     -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px #2a3242}
  .figs{background:none;border:0;gap:.5rem}
  .fig{background:linear-gradient(#fff,#e2e6ec);border:1px solid #a9b2c0;border-radius:12px;box-shadow:inset 0 1px 0 #fff}
  .mode{background:linear-gradient(#fdfdfe,#d5dae2 50%,#bcc4cf 51%,#e8ebf0);border:1px solid #7d8798;
        border-radius:999px;color:var(--ink);text-shadow:0 1px 0 #fff}
  .mode[aria-pressed="true"]{background:linear-gradient(#7db2ff,#1a5fd6 50%,#0d47b0 51%,#3f86f0);
        color:#fff;border-color:#0a3a90;text-shadow:0 -1px 0 rgba(0,0,0,.4)}
  .scroll{border-color:#8d97a8;border-radius:14px;box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(20,30,50,.4)}
  thead th{background:linear-gradient(#fafbfc,#d5dae2)}
  .pill,.chip,.btn,.seg{border-radius:999px}
  dialog.sheet{border-top:3px solid #8d97a8}
}

/* ---- Holographic: pearl white with a rainbow foil that drifts. ---------------- */
:root[data-look="holo"]{
  --fixed:var(--mono);
  --ground:#f5f3fa; --surface:#fdfcff; --sunk:#efedf7; --raise:#fff;
  --ink:#1b1a2b; --ink-soft:#474466; --ink-faint:#5a5778;
  --rule:#e2def0; --rule-strong:#bdb6d8;
  --accent:#5b3fd9; --accent-soft:#ebe6fc; --cf-accent-ink:#4a2fc0;
  --win:#0d7457; --win-soft:#daf3ea;
  --placed:#1a63b8; --placed-soft:#e0ecfa;
  --caution:#c02a4a; --caution-soft:#fce2e8;
  --mark:#c88300; --mark-ink:#7a4f00;
  --serif:"Space Grotesk",system-ui,sans-serif; --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --r:14px;
  --holo:linear-gradient(115deg,#ffc2ea,#c2d1ff,#c2fff2,#fff6c2,#ffc2ea);
  color-scheme:light;
  header.top{background:var(--holo);background-size:300% 300%;border:0;border-radius:20px;padding:1.4rem 1.6rem}
  header.top .eyebrow,header.top .sub,.look{color:var(--ink-soft)}
  :is(h1,header nav a[aria-current]){font-weight:700;color:transparent;background:linear-gradient(90deg,#5b2bc9,#1a63b8,#0d7457,#5b2bc9);
     background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
  .figs{background:none;border:0;gap:.5rem}
  .fig{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);border-radius:14px}
  .mode{border-radius:999px}
  .mode[aria-pressed="true"]{background:var(--holo);color:var(--ink);border-color:var(--rule-strong)}
  .scroll{border-radius:16px;box-shadow:0 0 0 1px #fff,0 10px 30px -18px rgba(90,60,200,.45)}
  thead th{background:linear-gradient(90deg,#fbe9f6,#e9effd,#e6fbf5)}
  .pill,.chip,.btn,.seg,.out{border-radius:999px}
  dialog.sheet{border-top:4px solid;border-image:var(--holo) 1}
  @media (prefers-reduced-motion:no-preference){
    header.top{animation:holoshift 10s ease-in-out infinite alternate}
    :is(h1,header nav a[aria-current]){animation:holoshift 6s linear infinite alternate}
  }
}

/* ---- Paper Cutout: coloured card shapes stuck on kraft paper. ------------------ */
:root[data-look="paper"]{
  --ground:#e9dcc4; --surface:#fffdf7; --sunk:#f3ead7; --raise:#fffdf7;
  --ink:#2b2118; --ink-soft:#554536; --ink-faint:#64533f;
  --rule:#e1d3b8; --rule-strong:#b39c76;
  --accent:#c2410c; --accent-soft:#fbe0d3; --cf-accent-ink:#9a3412;
  --win:#2e7d32; --win-soft:#dcefd5;
  --placed:#1f5f99; --placed-soft:#dbe8f5;
  --caution:#b91c1c; --caution-soft:#f8dcd7;
  --mark:#e3a008; --mark-ink:#7a5200;
  --serif:"Patrick Hand",Nunito,sans-serif; --sans:Nunito,system-ui,sans-serif; --mono:Nunito,system-ui,sans-serif;
  --r:4px;
  --cut:2px 3px 0 rgba(60,40,20,.18),4px 8px 14px -6px rgba(60,40,20,.35);
  color-scheme:light;
  header.top{border-bottom:2px dashed var(--rule-strong)}
  :is(h1,header nav a[aria-current]){width:max-content;max-width:100%;background:var(--accent);color:#fff;font-weight:400;
     padding:.2rem .8rem;transform:rotate(-1.5deg);box-shadow:var(--cut)}
  .figs{background:none;border:0;gap:.8rem}
  .fig{box-shadow:var(--cut);transform:rotate(-1deg)}
  .fig:nth-child(even){transform:rotate(1.2deg)}
  .mode{border:0;box-shadow:var(--cut)}
  .mode[aria-pressed="true"]{background:var(--placed);color:#fff;transform:rotate(-1deg)}
  .scroll{border:0;box-shadow:var(--cut)}
  thead th{background:var(--sunk)}
  .detail h2,.dossier h2{font-family:var(--serif);font-weight:400}
  dialog.sheet{border-top:0;box-shadow:var(--cut)}
}

/* ---- Isometric: extruded blocks on an isometric grid. -------------------------- */
:root[data-look="iso"]{
  --ground:#eef2f7; --surface:#fff; --sunk:#e6ebf2; --raise:#fff;
  --ink:#14213d; --ink-soft:#3d4b66; --ink-faint:#56637d;
  --rule:#d5dce7; --rule-strong:#a9b5c8;
  --accent:#2563eb; --accent-soft:#dde8fd; --cf-accent-ink:#1d4fc4;
  --win:#0f766e; --win-soft:#d6f1ee;
  --placed:#7c3aed; --placed-soft:#ece3fd;
  --caution:#be123c; --caution-soft:#fde0e7;
  --mark:#f59e0b; --mark-ink:#8a5200;
  --serif:Rubik,system-ui,sans-serif; --sans:Rubik,system-ui,sans-serif; --mono:Rubik,system-ui,sans-serif;
  --r:2px;
  --ex:1px 1px 0 #a9b5c8,2px 2px 0 #a9b5c8,3px 3px 0 #a9b5c8,4px 4px 0 #a9b5c8,5px 5px 0 #a9b5c8,6px 6px 0 #a9b5c8;
  color-scheme:light;
  body{background:repeating-linear-gradient(30deg,transparent 0 27px,rgba(37,99,235,.07) 27px 28px),
       repeating-linear-gradient(150deg,transparent 0 27px,rgba(37,99,235,.07) 27px 28px),#eef2f7 fixed}
  :is(h1,header nav a[aria-current]){font-weight:800;transform:skewX(-8deg);color:var(--accent);
     text-shadow:1px 1px 0 #1d4fc4,2px 2px 0 #1a45ad,3px 3px 0 #173c97,4px 4px 0 #143380}
  .figs{background:none;border:0;gap:1rem;padding:0 6px 6px 0}
  .fig{border:1px solid #a9b5c8;box-shadow:var(--ex)}
  .fig b{font-weight:800}
  .mode{border-color:#a9b5c8;box-shadow:1px 1px 0 #a9b5c8,2px 2px 0 #a9b5c8,3px 3px 0 #a9b5c8}
  .mode[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:#1d4fc4;
        transform:translate(2px,2px);box-shadow:1px 1px 0 #1d4fc4}
  .scroll{border-color:#a9b5c8;box-shadow:var(--ex);margin-right:6px}
  dialog.sheet{border-top:3px solid var(--accent)}
}

/* ---- ASCII Art: a plain-text printout. Every border drawn in characters. ------- */
:root[data-look="ascii"]{
  --ground:#fbfbf7; --surface:#fbfbf7; --sunk:#efefe8; --raise:#fff;
  --ink:#111; --ink-soft:#333; --ink-faint:#555;
  --rule:#bbb; --rule-strong:#111;
  --accent:#1a1aa6; --accent-soft:#e2e2f5; --cf-accent-ink:#1a1aa6;
  --win:#116611; --win-soft:#ddeedd;
  --placed:#7a2a8a; --placed-soft:#efe0f2;
  --caution:#b00000; --caution-soft:#f6dddd;
  --mark:#9a6a00; --mark-ink:#6b4a00;
  --serif:"IBM Plex Mono",ui-monospace,monospace; --sans:"IBM Plex Mono",ui-monospace,monospace;
  --r:0;
  color-scheme:light;
  body{font-size:14px}
  header.top{border-bottom:0}
  header.top::after{content:"================================================================================================================================================================";
      display:block;overflow:hidden;white-space:nowrap;color:var(--ink-faint);line-height:1}
  :is(h1,header nav a[aria-current]){font-weight:600;text-transform:uppercase;letter-spacing:.1em}
  :is(h1,header nav a[aria-current])::before{content:"+-- "} :is(h1,header nav a[aria-current])::after{content:" --+"}
  .figs{background:none;border:1px dashed var(--ink);gap:0}
  .fig{background:none}
  .fig span::before{content:"# "}
  .fig b{font-weight:400}
  .mode{background:none;border:0;padding-inline:.2rem;color:var(--ink)}
  .mode::before{content:"< "} .mode::after{content:" >"}
  .mode[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
  .scroll{border:1px dashed var(--ink)}
  thead th{background:var(--ground);border-bottom:1px dashed var(--ink);text-transform:none;letter-spacing:0}
  td{border-bottom-style:dotted}
  td.nm{font-weight:400;color:var(--cf-accent-ink)}
  .pill{background:none;padding:0;letter-spacing:0}
  .pill::before{content:"("} .pill::after{content:")"}
  .btn{border-style:dashed}
  dialog.sheet{border-top:1px dashed var(--ink);box-shadow:none}
}

/* ---- Comic Book: halftone dots, ink outlines, punchy captions. ----------------- */
:root[data-look="comic"]{
  --ground:#fff6d6; --surface:#fff; --sunk:#fff1b8; --raise:#fff;
  --ink:#111; --ink-soft:#2d2d2d; --ink-faint:#474747;
  --rule:#c9bfa0; --rule-strong:#111;
  --accent:#0057d9; --accent-soft:#d9e7ff; --cf-accent-ink:#0047b3;
  --win:#13803a; --win-soft:#d8f3df;
  --placed:#8a16c7; --placed-soft:#f0ddfb;
  --caution:#d6001c; --caution-soft:#ffe0e3;
  --mark:#f2b600; --mark-ink:#7a5600;
  --serif:Bangers,Impact,sans-serif; --sans:"Comic Neue","Comic Sans MS",sans-serif; --mono:"Comic Neue","Comic Sans MS",sans-serif;
  --r:6px;
  color-scheme:light;
  body{background:#fff6d6 radial-gradient(#f3d98a 1.2px,transparent 1.4px) 0 0/10px 10px fixed}
  header.top{border-bottom:4px solid #111}
  :is(h1,header nav a[aria-current]){font-weight:400;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.04em;color:#ffcc00;
     -webkit-text-stroke:2px #111;text-shadow:4px 4px 0 #111}
  .figs{background:none;border:0;gap:.8rem}
  .fig{border:3px solid #111;box-shadow:4px 4px 0 #111;border-radius:6px}
  .fig b{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.03em}
  .fig span{color:var(--ink-soft);font-weight:700}
  .mode{background:#fff;border:3px solid #111;box-shadow:3px 3px 0 #111;color:#111;
        font-family:var(--serif);font-size:1rem;font-weight:400;letter-spacing:.05em}
  .mode[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:#111}
  .scroll{border:3px solid #111;box-shadow:6px 6px 0 #111;border-radius:6px}
  thead th{background:#ffcc00;color:#111;border-bottom:3px solid #111;font-family:var(--serif);
           font-size:.95rem;font-weight:400;letter-spacing:.05em}
  .detail h2,.dossier h2{font-family:var(--serif);font-weight:400;letter-spacing:.04em}
  .btn{border:2px solid #111;box-shadow:2px 2px 0 #111;color:#111}
  dialog.sheet{border:3px solid #111;border-top-width:6px}
}

/* ---- Blueprint: white pencil on drafting blue, on a measured grid. ------------- */
:root[data-look="blueprint"]{
  --fixed:var(--mono);
  --ground:#0f3a6e; --surface:#123f77; --sunk:#0d3363; --raise:#164784;
  --ink:#eaf3ff; --ink-soft:#bcd4f2; --ink-faint:#a3c1e6;
  --rule:#2f5f99; --rule-strong:#8fb6e6;
  --accent:#ffd166; --accent-soft:#2a4a6e; --cf-accent-ink:#ffe08a;
  --win:#7cf0b4; --win-soft:#144a52;
  --placed:#9fd3ff; --placed-soft:#18508a;
  --caution:#ff9a8a; --caution-soft:#4a2f5a;
  --mark:#ffb347; --mark-ink:#ffcd85;
  --serif:"Architects Daughter",cursive; --sans:"Share Tech Mono",Consolas,monospace; --mono:"Share Tech Mono",Consolas,monospace;
  --r:0;
  color-scheme:dark;
  body{background:
       linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px) 0 0/100px 100px,
       linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0/100px 100px,
       linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/20px 20px,
       linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/20px 20px,#0f3a6e fixed}
  header.top{border-bottom:1px solid var(--ink)}
  :is(h1,header nav a[aria-current]){font-weight:400;letter-spacing:.04em}
  .figs{background:none;border:0;gap:.6rem}
  .fig{background:rgba(15,58,110,.7);border:1px dashed rgba(234,243,255,.6)}
  .fig b{font-weight:400}
  .mode{background:none;border-color:var(--rule-strong);color:var(--ink)}
  .mode[aria-pressed="true"]{background:var(--accent);color:#0f3a6e;border-color:var(--accent)}
  .scroll{border-color:var(--rule-strong)}
  thead th{color:var(--cf-accent-ink)}
  .detail h2,.dossier h2{font-family:var(--serif);font-weight:400}
  dialog.sheet{border-top:1px solid var(--ink)}
}

/* ---- Pixel Art: an 8-bit game screen. Notched pixel borders, a fantasy palette.  */
:root[data-look="pixel"]{
  --ground:#0f1424; --surface:#1d2b53; --sunk:#16213f; --raise:#243466;
  --ink:#fff1e8; --ink-soft:#c2c3c7; --ink-faint:#b4aed0;
  --rule:#2f3f73; --rule-strong:#5f6da0;
  --accent:#29adff; --accent-soft:#133a5e; --cf-accent-ink:#7cc9ff;
  --win:#00e436; --win-soft:#0e3b2a;
  --placed:#ff77a8; --placed-soft:#4a1f3a;
  --caution:#ff4d6d; --caution-soft:#4a1428;
  --mark:#ffec27; --mark-ink:#ffec27;
  --serif:"Press Start 2P",monospace; --sans:"Pixelify Sans",monospace; --mono:"Pixelify Sans",monospace;
  --r:0;
  --px:0 -4px 0 0 var(--rule-strong),0 4px 0 0 var(--rule-strong),-4px 0 0 0 var(--rule-strong),4px 0 0 0 var(--rule-strong);
  color-scheme:dark;
  :is(h1,header nav a[aria-current]){font-size:clamp(1.1rem,3.4vw,1.9rem);font-weight:400;line-height:1.5;letter-spacing:0;
     color:#ffec27;text-shadow:3px 3px 0 #7e2553}
  header.top{border-bottom:4px solid var(--rule-strong)}
  .figs{background:none;border:0;gap:1rem;padding:4px}
  .fig{border:0;box-shadow:var(--px)}
  .mode{border:0;box-shadow:var(--px);margin:4px}
  .mode[aria-pressed="true"]{background:var(--accent);color:#0f1424;
        box-shadow:0 -4px 0 0 var(--accent),0 4px 0 0 var(--accent),-4px 0 0 0 var(--accent),4px 0 0 0 var(--accent)}
  .scroll{border:0;box-shadow:var(--px);margin:4px}
  .detail h2,.dossier h2{font-size:1.1rem;font-weight:400;line-height:1.5;letter-spacing:0}
  dialog.sheet{border-top:4px solid var(--accent)}
}

/* ---- Neo-Brutalism: thick black lines, hard shadows, loud flat colour. ---------- */
:root[data-look="brutal"]{
  --fixed:var(--mono);
  --ground:#fef3c7; --surface:#fff; --sunk:#fff7d6; --raise:#fff;
  --ink:#000; --ink-soft:#222; --ink-faint:#3d3d3d;
  --rule:#d4cba8; --rule-strong:#000;
  --accent:#2f4ff0; --accent-soft:#dfe5ff; --cf-accent-ink:#1f3be0;
  --win:#007a4d; --win-soft:#c9f7df;
  --placed:#c41f6f; --placed-soft:#ffd6ea;
  --caution:#d01b1b; --caution-soft:#ffd9d9;
  --mark:#ffb800; --mark-ink:#7a5200;
  --serif:"Archivo Black",Impact,sans-serif; --sans:"Space Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --r:0;
  color-scheme:light;
  header.top{border-bottom:3px solid #000}
  :is(h1,header nav a[aria-current]){width:max-content;max-width:100%;font-weight:400;font-size:clamp(2rem,5.5vw,3.6rem);text-transform:uppercase;
     letter-spacing:-.02em;background:#ff90e8;padding:.2rem .6rem;border:3px solid #000;box-shadow:6px 6px 0 #000}
  .figs{background:none;border:0;gap:.8rem;padding:0 4px 4px 0}
  .fig{border:3px solid #000;box-shadow:4px 4px 0 #000;background:#ffde59}
  .fig:nth-child(4n+2){background:#90e0ff} .fig:nth-child(4n+3){background:#ff90e8} .fig:nth-child(4n){background:#b5f5a8}
  .fig span{color:#000}
  .mode{background:#fff;border:3px solid #000;box-shadow:3px 3px 0 #000;color:#000;font-weight:700}
  .mode[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:#000;transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
  .scroll{border:3px solid #000;box-shadow:6px 6px 0 #000;margin-right:6px}
  thead th{background:#ffde59;color:#000;border-bottom:3px solid #000}
  .btn{border:2px solid #000;box-shadow:2px 2px 0 #000;color:#000}
  .detail h2,.dossier h2{font-family:var(--serif);font-weight:400}
  dialog.sheet{border:3px solid #000}
}
@keyframes liquidmorph{to{border-radius:120px 48px 140px 64px / 60px 40px 70px 50px}}
@keyframes neonflicker{0%,19%,21%,62%,64%,100%{opacity:1} 20%,63%{opacity:.55}}
@keyframes holoshift{from{background-position:0% 50%} to{background-position:100% 50%}}

/* ---- Particles: deep night with slow drifting specks behind everything. -------- */
:root[data-look="particles"]{
  --ground:#0b1022; --surface:#121a36; --sunk:#0e1530; --raise:#18224a;
  --ink:#eef2ff; --ink-soft:#b8c2e6; --ink-faint:#97a3cf;
  --rule:#24305c; --rule-strong:#3c4a85;
  --accent:#7dd3fc; --accent-soft:#0f2c44; --cf-accent-ink:#a5e3fe;
  --win:#6ee7b7; --win-soft:#0f3329;
  --placed:#c4b5fd; --placed-soft:#2a2350;
  --caution:#fb7185; --caution-soft:#3a1626;
  --mark:#fcd34d; --mark-ink:#fde68a;
  --serif:Outfit,system-ui,sans-serif; --sans:Outfit,system-ui,sans-serif; --mono:Outfit,system-ui,sans-serif;
  --r:10px;
  color-scheme:dark;
  /* behind the content (z-index -1), never catches a click; tile sizes divide the drift so it loops cleanly */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
      background:
        radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#a5e3fe,transparent),
        radial-gradient(1.5px 1.5px at 170px 150px,#c4b5fd,transparent),radial-gradient(1px 1px at 60px 180px,#fff,transparent),
        radial-gradient(2px 2px at 90px 40px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 240px 220px,#7dd3fc,transparent),
        radial-gradient(1.5px 1.5px at 200px 60px,#fff,transparent);
      background-size:200px 200px,200px 200px,200px 200px,200px 200px,300px 300px,300px 300px,300px 300px}
  :is(h1,header nav a[aria-current]){font-weight:700;letter-spacing:-.02em;text-shadow:0 0 18px rgba(125,211,252,.45)}
  .figs{background:none;border:0;gap:.6rem}
  .fig{background:rgba(18,26,54,.75);border:1px solid var(--rule-strong);border-radius:12px}
  .fig b{font-weight:700;color:var(--cf-accent-ink)}
  .mode{background:rgba(18,26,54,.75);border-radius:999px}
  .mode[aria-pressed="true"]{background:var(--accent);color:#0b1022;border-color:var(--accent)}
  .scroll{border-color:var(--rule-strong);border-radius:12px}
  .pill,.chip,.btn,.seg,.out{border-radius:999px}
  @media (prefers-reduced-motion:no-preference){ body::before{animation:particlesdrift 70s linear infinite} }
}

/* ---- Kinetic Type: huge type that breathes in weight and width. ---------------- */
:root[data-look="kinetic"]{
  --ground:#f7f7f2; --surface:#fff; --sunk:#efefe8; --raise:#fff;
  --ink:#0a0a0a; --ink-soft:#333; --ink-faint:#555;
  --rule:#ddd; --rule-strong:#0a0a0a;
  --accent:#0038ff; --accent-soft:#e0e7ff; --cf-accent-ink:#002dcc;
  --win:#0a7a3e; --win-soft:#dcf3e5;
  --placed:#7a2fd6; --placed-soft:#efe3fd;
  --caution:#d1002e; --caution-soft:#ffe0e6;
  --mark:#ff6a00; --mark-ink:#9a4000;
  --serif:Anybody,system-ui,sans-serif; --sans:Anybody,system-ui,sans-serif; --mono:Anybody,system-ui,sans-serif;
  --r:0;
  color-scheme:light;
  header.top{border-bottom:4px solid var(--ink)}
  :is(h1,header nav a[aria-current]){font-size:clamp(2.4rem,7vw,5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
  .fig{background:none}
  .figs{background:none;border:0;border-top:2px solid var(--ink)}
  .fig b{font-size:1.8rem;font-weight:900;font-stretch:120%;letter-spacing:-.03em}
  .fig span{font-weight:700}
  .mode{background:none;border:2px solid var(--ink);color:var(--ink);font-weight:700;text-transform:uppercase;
        transition:font-stretch .25s,letter-spacing .25s}
  .mode:hover{font-stretch:140%;letter-spacing:.04em}
  .mode[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  thead th{font-weight:800;font-stretch:120%}
  .detail h2,.dossier h2{font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
  @media (prefers-reduced-motion:no-preference){ :is(h1,header nav a[aria-current]){animation:kineticflex 4s ease-in-out infinite alternate} }
}

/* ---- Clay 3D: soft puffy shapes pressed out of pastel clay. -------------------- */
:root[data-look="clay"]{
  --ground:#eef0fb; --surface:#f7f8ff; --sunk:#e8eaf8; --raise:#fff;
  --ink:#1f2340; --ink-soft:#4a4f75; --ink-faint:#5a5f85;
  --rule:#dfe2f3; --rule-strong:#b9bedf;
  --accent:#6c4ef5; --accent-soft:#ebe6ff; --cf-accent-ink:#5235d6;
  --win:#13795b; --win-soft:#d8f3e8;
  --placed:#c2357a; --placed-soft:#fde3ef;
  --caution:#cc2b3c; --caution-soft:#fde2e5;
  --mark:#e89a00; --mark-ink:#8a5600;
  --serif:Fredoka,system-ui,sans-serif; --sans:Fredoka,system-ui,sans-serif; --mono:Fredoka,system-ui,sans-serif;
  --r:22px;
  --clay:8px 8px 16px rgba(110,120,180,.25),-6px -6px 14px rgba(255,255,255,.9),
         inset 2px 2px 4px rgba(255,255,255,.8),inset -3px -3px 6px rgba(110,120,180,.18);
  color-scheme:light;
  header.top{border:0}
  :is(h1,header nav a[aria-current]){font-weight:700;color:var(--accent);text-shadow:2px 2px 0 #d8d0ff,4px 4px 8px rgba(108,78,245,.3)}
  .figs{background:none;border:0;gap:1rem;padding:6px}
  .fig{border-radius:22px;box-shadow:var(--clay)}
  .fig b{font-weight:700}
  .mode{border:0;border-radius:999px;box-shadow:var(--clay)}
  .mode[aria-pressed="true"]{background:var(--accent);color:#fff;
        box-shadow:inset 3px 3px 6px rgba(40,20,140,.45),inset -2px -2px 5px rgba(255,255,255,.3)}
  .scroll{border:0;border-radius:24px;box-shadow:var(--clay);margin:6px}
  .pill,.chip,.btn,.seg,.out{border-radius:999px}
  .btn{border:0;box-shadow:var(--clay)}
  dialog.sheet{border-top:0;border-radius:32px 32px 0 0}
}

/* ---- Split-Flap: an airport departures board. Seamed tiles that flip in. ------- */
:root[data-look="flap"]{
  --fixed:var(--mono);
  --ground:#111; --surface:#1b1b1b; --sunk:#141414; --raise:#222;
  --ink:#f5f5f0; --ink-soft:#c9c9c0; --ink-faint:#a3a39a;
  --rule:#2c2c2c; --rule-strong:#4a4a4a;
  --accent:#ffcf33; --accent-soft:#332a08; --cf-accent-ink:#ffdb66;
  --win:#4ade80; --win-soft:#0f2e1c;
  --placed:#7dd3fc; --placed-soft:#0f2a38;
  --caution:#ff6b6b; --caution-soft:#3a1414;
  --mark:#ff9f1c; --mark-ink:#ffc266;
  --serif:Oswald,"Arial Narrow",sans-serif; --sans:"Roboto Mono",ui-monospace,monospace; --mono:"Roboto Mono",ui-monospace,monospace;
  --r:3px;
  /* the hinge line across the middle of every flap */
  --flap:linear-gradient(#272727 0 48%,#000 48% 52%,#1e1e1e 52%);
  color-scheme:dark;
  :is(h1,header nav a[aria-current]){width:max-content;max-width:100%;background:var(--flap);color:var(--accent);padding:.2rem .6rem;
     font-weight:600;text-transform:uppercase;letter-spacing:.12em;border-radius:3px}
  .figs{background:none;border:0;gap:.4rem}
  .fig{background:var(--flap);border-radius:3px;transform-origin:top}
  .fig b{color:var(--accent);font-weight:700}
  .mode{background:var(--flap);border:0;color:var(--ink);text-transform:uppercase;letter-spacing:.08em}
  .mode[aria-pressed="true"]{background:var(--accent);color:#111}
  thead th{background:#000;color:var(--accent)}
  td.nm{text-transform:uppercase}
  .detail h2,.dossier h2{text-transform:uppercase;letter-spacing:.1em;font-weight:600}
  @media (prefers-reduced-motion:no-preference){
    :is(h1,header nav a[aria-current]),.fig{animation:flapin .45s cubic-bezier(.5,0,.6,1.4) both}
    .fig:nth-child(2){animation-delay:.08s} .fig:nth-child(3){animation-delay:.16s}
    .fig:nth-child(4){animation-delay:.24s} .fig:nth-child(5){animation-delay:.32s}
    .fig:nth-child(n+6){animation-delay:.4s}
  }
}

/* ---- Hand-Drawn: pen on a ruled notebook. Wobbly boxes, scribbled underlines. -- */
:root[data-look="sketch"]{
  --ground:#fdfbf4; --surface:#fffefa; --sunk:#f5f1e4; --raise:#fff;
  --ink:#222; --ink-soft:#444; --ink-faint:#575757;
  --rule:#d9d2bd; --rule-strong:#222;
  --accent:#1d4ed8; --accent-soft:#e0e8fb; --cf-accent-ink:#1a40b0;
  --win:#157a3a; --win-soft:#dcf1e2;
  --placed:#8b2fc9; --placed-soft:#f1e2fa;
  --caution:#c8102e; --caution-soft:#fbdfe3;
  --mark:#e0a100; --mark-ink:#7a5500;
  --serif:Caveat,"Segoe Print",cursive; --sans:Kalam,"Segoe Print",cursive; --mono:Kalam,"Segoe Print",cursive;
  --r:0;
  --wob:255px 15px 225px 15px / 15px 225px 15px 255px;
  color-scheme:light;
  body{background:#fdfbf4 repeating-linear-gradient(transparent 0 27px,#ebe4cf 27px 28px)}
  header.top{border-bottom:2px solid var(--ink)}
  :is(h1,header nav a[aria-current]){font-size:clamp(2.2rem,6vw,3.6rem);font-weight:700;letter-spacing:0;
     text-decoration:underline wavy var(--accent) 2px;text-underline-offset:.18em}
  .figs{background:none;border:0;gap:.8rem}
  .fig{border:2px solid var(--ink);border-radius:var(--wob)}
  .fig b{font-weight:700}
  .mode{background:var(--surface);border:2px solid var(--ink);border-radius:var(--wob);color:var(--ink)}
  .mode[aria-pressed="true"]{background:var(--accent-soft);color:var(--cf-accent-ink);border-color:var(--accent)}
  .scroll{border:2px solid var(--ink);border-radius:14px 4px 16px 6px / 6px 16px 4px 14px}
  thead th{border-bottom:2px solid var(--ink)}
  .btn{border:2px solid var(--ink);border-radius:var(--wob)}
  .detail h2,.dossier h2{font-family:var(--serif);font-weight:700;letter-spacing:0}
  dialog.sheet{border-top:2px solid var(--ink)}
}

/* ---- Physics: the page drops into place and things spring when you touch them.  */
:root[data-look="physics"]{
  --ground:#f4f6fb; --surface:#fff; --sunk:#eceff6; --raise:#fff;
  --ink:#15192b; --ink-soft:#40465f; --ink-faint:#5a6078;
  --rule:#dde1ec; --rule-strong:#b3bacd;
  --accent:#0b66e4; --accent-soft:#e0ebfd; --cf-accent-ink:#0952b8;
  --win:#0b7a4b; --win-soft:#d9f3e7;
  --placed:#8a3ffc; --placed-soft:#efe5ff;
  --caution:#d12d3d; --caution-soft:#fde2e5;
  --mark:#f5a300; --mark-ink:#8a5a00;
  --serif:Lexend,system-ui,sans-serif; --sans:Lexend,system-ui,sans-serif; --mono:Lexend,system-ui,sans-serif;
  --r:14px;
  color-scheme:light;
  :is(h1,header nav a[aria-current]){font-weight:800;letter-spacing:-.03em}
  .figs{background:none;border:0;gap:.7rem}
  .fig{border:1px solid var(--rule);border-radius:14px;box-shadow:0 6px 0 var(--rule-strong)}
  .fig b{font-weight:800}
  .mode{border-radius:999px;box-shadow:0 4px 0 var(--rule-strong)}
  .mode:active{transform:translateY(3px) scale(1.04,.92);box-shadow:0 1px 0 var(--rule-strong)}
  .mode[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--cf-accent-ink);box-shadow:0 4px 0 var(--cf-accent-ink)}
  .scroll{border-radius:16px}
  .pill,.chip,.btn,.seg,.out{border-radius:999px}
  @media (prefers-reduced-motion:no-preference){
    :is(h1,header nav a[aria-current]),.fig,.mode{animation:physdrop .9s both}
    .fig:nth-child(2),.mode:nth-child(2){animation-delay:.06s} .fig:nth-child(3),.mode:nth-child(3){animation-delay:.12s}
    .fig:nth-child(4),.mode:nth-child(4){animation-delay:.18s} .fig:nth-child(5),.mode:nth-child(5){animation-delay:.24s}
    .fig:nth-child(n+6),.mode:nth-child(n+6){animation-delay:.3s}
    .fig:hover,.mode:hover{animation:physwobble .6s}
  }
}

/* ---- Bauhaus: primary colours, black bars, circle-square-triangle. ------------- */
:root[data-look="bauhaus"]{
  --ground:#f2ece0; --surface:#faf6ee; --sunk:#ebe3d3; --raise:#fff;
  --ink:#111; --ink-soft:#333; --ink-faint:#4f4f4f;
  --rule:#d8cfbd; --rule-strong:#111;
  --accent:#1f4fbf; --accent-soft:#dde5f7; --cf-accent-ink:#1a42a0;
  --win:#1d6b3a; --win-soft:#d9eddf;
  --placed:#7a3e9d; --placed-soft:#efe3f5;
  --caution:#c4231a; --caution-soft:#f8ddda;
  --mark:#f2b705; --mark-ink:#7a5a00;
  --serif:Jost,"Futura","Century Gothic",sans-serif; --sans:Jost,"Futura","Century Gothic",sans-serif; --mono:Jost,"Futura","Century Gothic",sans-serif;
  --r:0;
  color-scheme:light;
  header.top{border-bottom:6px solid #111}
  :is(h1,header nav a[aria-current]){font-weight:800;text-transform:uppercase;letter-spacing:.02em}
  :is(h1,header nav a[aria-current])::before{content:"";display:inline-block;width:.75em;height:.75em;border-radius:50%;background:#d42a20;margin-right:.25em}
  :is(h1,header nav a[aria-current])::after{content:"";display:inline-block;width:.75em;height:.75em;margin-left:.25em;
            background:linear-gradient(135deg,#1f4fbf 50%,#f2b705 50%)}
  .figs{background:#111;border:2px solid #111;gap:2px}
  .fig{border-top:6px solid #d42a20}
  .fig:nth-child(3n+2){border-top-color:#1f4fbf} .fig:nth-child(3n){border-top-color:#f2b705}
  .fig b{font-weight:700}
  .mode{background:var(--surface);border:2px solid #111;color:#111;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
  .mode[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:#111}
  .scroll{border:2px solid #111}
  thead th{background:#111;color:#f2ece0}
  .detail h2,.dossier h2{text-transform:uppercase;font-weight:800}
  dialog.sheet{border-top:6px solid #111}
}

/* ---- Art Deco: black lacquer and gold leaf, a sunburst, stepped frames. -------- */
:root[data-look="deco"]{
  --ground:#0d0d0f; --surface:#15151a; --sunk:#101014; --raise:#1c1c22;
  --ink:#f3ead2; --ink-soft:#d4c8a6; --ink-faint:#b3a780;
  --rule:#2b2a24; --rule-strong:#8c7434;
  --accent:#d4af37; --accent-soft:#2b2512; --cf-accent-ink:#e8c766;
  --win:#7fcf9a; --win-soft:#13291c;
  --placed:#8fb8de; --placed-soft:#182433;
  --caution:#e07a6e; --caution-soft:#2e1814;
  --mark:#f0c75e; --mark-ink:#f6d98a;
  --serif:Limelight,Georgia,serif; --sans:"Josefin Sans",system-ui,sans-serif; --mono:"Josefin Sans",system-ui,sans-serif;
  --r:0;
  color-scheme:dark;
  header.top{border-bottom:4px double var(--accent);
      background:repeating-conic-gradient(from 270deg at 50% 100%,rgba(212,175,55,.08) 0 4deg,transparent 4deg 8deg)}
  :is(h1,header nav a[aria-current]){font-weight:400;color:var(--accent);text-transform:uppercase;letter-spacing:.14em}
  :is(h1,header nav a[aria-current])::before{content:"\25C6  "} :is(h1,header nav a[aria-current])::after{content:"  \25C6"}
  .figs{background:none;border:0;gap:.6rem}
  .fig{border:1px solid var(--accent);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px var(--rule-strong)}
  .fig b{color:var(--cf-accent-ink)}
  .fig span{letter-spacing:.18em}
  .mode{background:none;border:1px solid var(--rule-strong);color:var(--cf-accent-ink);text-transform:uppercase;letter-spacing:.15em}
  .mode[aria-pressed="true"]{background:var(--accent);color:#0d0d0f;border-color:var(--accent)}
  .scroll{border:1px solid var(--accent);box-shadow:0 0 0 4px var(--ground),0 0 0 5px var(--rule-strong);margin:5px}
  thead th{color:var(--cf-accent-ink);border-bottom:1px solid var(--accent);letter-spacing:.15em}
  .detail h2,.dossier h2{font-family:var(--serif);font-weight:400;color:var(--accent);letter-spacing:.08em}
  dialog.sheet{border-top:4px double var(--accent)}
}
@keyframes particlesdrift{to{background-position:0 -600px,0 -600px,0 -600px,0 -600px,0 -900px,0 -900px,0 -900px}}
@keyframes kineticflex{from{font-weight:300;font-stretch:75%} to{font-weight:900;font-stretch:125%}}
@keyframes flapin{from{transform:perspective(400px) rotateX(-90deg)} to{transform:none}}
@keyframes physdrop{
  0%{transform:translateY(-110vh);animation-timing-function:cubic-bezier(.5,0,1,1)}
  55%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.5,1)}
  72%{transform:translateY(-18px);animation-timing-function:cubic-bezier(.5,0,1,1)}
  86%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.5,1)}
  93%{transform:translateY(-5px);animation-timing-function:cubic-bezier(.5,0,1,1)}
  100%{transform:translateY(0)}
}
@keyframes physwobble{25%{transform:rotate(-4deg) scale(1.03)} 50%{transform:rotate(3deg)} 75%{transform:rotate(-1.5deg)}}

/* ---- Wasteland Terminal: a green phosphor wrist computer after the bombs. ------ */
:root[data-look="wasteland"]{
  --fixed:var(--mono);
  --ground:#031a0b; --surface:#06230f; --sunk:#021407; --raise:#0a2e15;
  --ink:#41ff8f; --ink-soft:#2fd877; --ink-faint:#23b863;
  --rule:#0f4a24; --rule-strong:#1f8a47;
  --accent:#a6ffcb; --accent-soft:#0f3d20; --cf-accent-ink:#c8ffe0;
  --win:#b4ff3c; --win-soft:#1d3a08;
  --placed:#3cf0ff; --placed-soft:#08333a;
  --caution:#ffb641; --caution-soft:#3a2a08;
  --mark:#fff36b; --mark-ink:#fff7a6;
  --serif:VT323,"Share Tech Mono",Consolas,monospace;
  --sans:"Share Tech Mono",Consolas,monospace;
  --mono:"Share Tech Mono",Consolas,monospace;
  --r:0;
  color-scheme:dark;
  body{background:radial-gradient(ellipse at 50% 40%,#073a18,#010d05 80%) fixed;
       text-shadow:0 0 4px rgba(65,255,143,.35)}
  /* scanlines and a curved-glass vignette; never catches a click */
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
      background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.25) 2px 3px),
                 radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6))}
  header.top{border-bottom:2px solid var(--ink)}
  :is(h1,header nav a[aria-current]){font-size:clamp(2.2rem,6vw,3.6rem);font-weight:400;text-transform:uppercase;letter-spacing:.08em;
     text-shadow:0 0 8px rgba(65,255,143,.7)}
  :is(h1,header nav a[aria-current])::after{content:"_"}
  .figs{background:none;border:1px solid var(--rule-strong);gap:0}
  .fig{background:none}
  .fig b{font-weight:400;text-shadow:0 0 6px rgba(65,255,143,.6)}
  .mode{background:none;border:1px solid var(--rule-strong);color:var(--ink);text-transform:uppercase;letter-spacing:.1em}
  .mode[aria-pressed="true"]{background:var(--accent);color:var(--ground);border-color:var(--accent);text-shadow:none}
  .scroll{border-color:var(--ink);box-shadow:0 0 12px rgba(65,255,143,.25)}
  thead th{background:var(--sunk);color:var(--ink);border-bottom:1px solid var(--rule-strong)}
  td.nm{color:var(--cf-accent-ink);font-weight:400}
  .detail h2,.dossier h2{font-weight:400;text-transform:uppercase;letter-spacing:.06em}
  dialog.sheet{border-top:2px solid var(--ink)}
  @media (prefers-reduced-motion:no-preference){
    :is(h1,header nav a[aria-current])::after{animation:vhsblink 1s steps(1) infinite}
    body::after{animation:wastelandflicker 5s infinite}
  }
}
@keyframes wastelandflicker{0%,96%,100%{opacity:1} 97%{opacity:.8} 98%{opacity:1} 99%{opacity:.85}}