:root{
    --bg:#050807;--bg2:#070d09;--panel:rgba(9,15,11,.86);--panel2:rgba(12,20,14,.72);
    --line:#1d2b22;--line2:#2c4433;--ink:#e9f6ea;--muted:#8fa698;--dim:#6b8175;
    --acid:#d6ff3f;--acid2:#a8e82f;--acid-soft:rgba(214,255,63,.14);
    --ice:#78e7ff;--ice-soft:rgba(120,231,255,.12);--teal:#39d6a8;
    --warn:#ff6b3d;--red:#ff3d5a;--violet:#b78bff;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
    --sans:"Archivo",system-ui,-apple-system,sans-serif;
    --gap:clamp(12px,1.3vw,20px);
    --ui-zoom:1.2;
  }
  html[data-theme="ice"]{
    --bg:#04080b;--bg2:#061018;--panel:rgba(7,17,24,.86);--panel2:rgba(9,23,32,.72);
    --line:#15303a;--line2:#1f4a5a;--ink:#e8f8ff;--muted:#8fb0bf;--dim:#6b8b99;
    --acid:#6fe3ff;--acid2:#35b7d6;--acid-soft:rgba(111,227,255,.14);
    --ice:#b78bff;--ice-soft:rgba(183,139,255,.12);--teal:#39d6a8;
    --warn:#ffb03d;--red:#ff4d6d;--violet:#b78bff;
  }
  html[data-theme="violet"]{
    --bg:#08050d;--bg2:#0d0714;--panel:rgba(15,9,22,.86);--panel2:rgba(22,13,32,.72);
    --line:#2a1b3d;--line2:#432a5e;--ink:#f3eaff;--muted:#b39ac9;--dim:#8a7099;
    --acid:#c77dff;--acid2:#a855f7;--acid-soft:rgba(199,125,255,.15);
    --ice:#ff7ad9;--ice-soft:rgba(255,122,217,.12);--teal:#4de3c0;
    --warn:#ff9f43;--red:#ff4d7a;--violet:#ff7ad9;
  }
  html[data-theme="solar"]{
    --bg:#0b0703;--bg2:#120c05;--panel:rgba(20,13,5,.86);--panel2:rgba(28,18,7,.72);
    --line:#3a2a12;--line2:#5c431d;--ink:#fff6e5;--muted:#c6af8b;--dim:#95805c;
    --acid:#ffb703;--acid2:#fb8500;--acid-soft:rgba(255,183,3,.15);
    --ice:#8ecae6;--ice-soft:rgba(142,202,230,.12);--teal:#52b788;
    --warn:#ff6b3d;--red:#e63946;--violet:#c77dff;
  }
  html[data-theme="mono"]{
    --bg:#060606;--bg2:#0a0a0a;--panel:rgba(14,14,14,.88);--panel2:rgba(20,20,20,.75);
    --line:#242424;--line2:#3a3a3a;--ink:#f4f4f4;--muted:#b4b4b4;--dim:#8a8a8a;
    --acid:#ffffff;--acid2:#cfcfcf;--acid-soft:rgba(255,255,255,.12);
    --ice:#bdbdbd;--ice-soft:rgba(189,189,189,.1);--teal:#d6d6d6;
    --warn:#ffb86b;--red:#ff6b6b;--violet:#cfcfcf;
  }
  html[data-density="compact"]{--gap:clamp(8px,.9vw,12px)}
  html[data-density="spacious"]{--gap:clamp(18px,1.7vw,28px)}
  html[data-density="compact"] .card{padding:14px}
  html[data-density="spacious"] .card{padding:24px}
  html[data-bg="dots"] body::after{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.18) 70%,rgba(0,0,0,.5));animation:none}
  html[data-bg="scanlines"] body::after{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);background-size:auto;mask-image:none;animation:none;opacity:.55}
  html[data-bg="off"] body::after{display:none}
  html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  *{box-sizing:border-box}
  html{background:var(--bg);scroll-behavior:smooth}
  body{margin:0;color:var(--ink);font-family:var(--sans);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;zoom:var(--ui-zoom)}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(1100px 680px at 10% -10%,rgba(214,255,63,.075),transparent 62%),radial-gradient(900px 620px at 104% 108%,rgba(120,231,255,.06),transparent 64%),radial-gradient(700px 500px at 50% 50%,rgba(57,214,168,.02),transparent 70%)}
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:104px 104px;mask-image:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.25) 70%,rgba(0,0,0,.75));animation:gridDrift 70s linear infinite;opacity:.8}
  @keyframes gridDrift{to{background-position:104px 0,0 104px}}
  ::selection{background:rgba(214,255,63,.28);color:#fff}
  a{color:inherit}
  .wrap{position:relative;z-index:2;width:min(1560px,100%);margin:0 auto;padding:0 clamp(16px,3vw,54px)}

  .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(16px,3vw,54px);border-bottom:1px solid var(--line);background:rgba(5,8,7,.82);backdrop-filter:blur(14px)}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
  .glyph{width:30px;height:30px;border:1px solid var(--acid);position:relative;flex:0 0 auto;background:linear-gradient(135deg,var(--acid-soft),transparent 62%);box-shadow:0 0 20px rgba(214,255,63,.07)}
  .glyph::before,.glyph::after{content:"";position:absolute;background:var(--acid);opacity:.9}
  .glyph::before{left:6px;right:6px;top:50%;height:1px}
  .glyph::after{top:6px;bottom:6px;left:50%;width:1px}
  .glyph i{position:absolute;left:2px;right:2px;height:1px;background:var(--acid);top:3px;animation:glyphScan 2.8s ease-in-out infinite;box-shadow:0 0 8px var(--acid)}
  @keyframes glyphScan{0%,100%{top:3px;opacity:.12}50%{top:calc(100% - 4px);opacity:1}}
  .brand b{display:block;font-size:13px;letter-spacing:.18em;font-weight:900;white-space:nowrap}
  .brand b em{font-style:normal;color:var(--acid)}
  .brand span{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
  .top-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .live{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(214,255,63,.3);background:rgba(214,255,63,.05);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acid);white-space:nowrap;transition:.3s}
  .live i{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:pulse 2s ease-in-out infinite}
  .live.stale{color:var(--warn);border-color:rgba(255,107,61,.34);background:rgba(255,107,61,.055)}
  .live.stale i{background:var(--warn);box-shadow:0 0 10px var(--warn)}
  .live.off{color:var(--red);border-color:rgba(255,61,90,.38);background:rgba(255,61,90,.06)}
  .live.off i{background:var(--red);box-shadow:0 0 10px var(--red);animation:none}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line2);background:rgba(9,15,11,.72);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:.2s}
  .btn:hover,.btn:focus-visible{border-color:var(--acid);color:var(--acid);background:rgba(214,255,63,.05);outline:none}
  .btn.acid{color:var(--acid);border-color:rgba(214,255,63,.34);background:rgba(214,255,63,.06)}

  .hero{position:relative;z-index:2;padding:clamp(46px,7vw,100px) 0 26px}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--acid);display:flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--acid);display:inline-block}
  h1{margin:18px 0 0;font-size:clamp(42px,8.2vw,126px);line-height:.9;letter-spacing:-.045em;font-weight:900;max-width:12ch}
  h1 em{font-style:normal;color:var(--acid);text-shadow:0 0 44px rgba(214,255,63,.16)}
  .lede{max-width:62ch;margin:24px 0 0;color:var(--muted);font-size:clamp(13px,1.25vw,16px);line-height:1.7}
  .lede b{color:var(--ink);font-weight:600}
  .hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
  .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line2);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .badge.ok{color:var(--teal);border-color:rgba(57,214,168,.34);background:rgba(57,214,168,.05)}
  .badge.warn{color:var(--warn);border-color:rgba(255,107,61,.36);background:rgba(255,107,61,.05)}
  .badge.bad{color:var(--red);border-color:rgba(255,61,90,.4);background:rgba(255,61,90,.06)}
  .badge.acid{color:var(--acid);border-color:rgba(214,255,63,.3);background:rgba(214,255,63,.04)}
  .badge.ice{color:var(--ice);border-color:rgba(120,231,255,.3);background:rgba(120,231,255,.04)}

  .vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:42px}
  .vit{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));padding:16px 16px 12px;min-width:0;overflow:hidden}
  .vit::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(214,255,63,.05),transparent 34%,transparent 68%,rgba(120,231,255,.03));pointer-events:none}
  .vit .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
  .vit .v{position:relative;z-index:1;margin-top:8px;font-family:var(--mono);font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.05em;color:var(--ink)}
  .vit .v em{font-style:normal;color:var(--acid);font-size:.52em;letter-spacing:0;margin-left:2px}
  .vit .s{position:relative;z-index:1;margin-top:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vit canvas{display:block;width:100%;height:38px;margin-top:10px}

  .strip{position:relative;z-index:2;margin:26px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(6,10,8,.7);overflow:hidden;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
  .strip-track{display:inline-flex;gap:24px;padding:8px 0;white-space:nowrap;animation:ticker 52s linear infinite;will-change:transform}
  .strip-track b{color:var(--acid);font-weight:500}
  .strip-track .sep{color:var(--acid);opacity:.45;font-style:normal}
  @keyframes ticker{to{transform:translateX(-50%)}}

  .section-head{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:16px;margin:clamp(44px,6vw,78px) 0 18px;border-bottom:1px solid var(--line);padding-bottom:12px}
  .section-head h2{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .section-head h2 b{color:var(--acid);font-weight:500}
  .section-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

  .grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
  .card{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));padding:18px;min-width:0;overflow:hidden}
  .card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(214,255,63,.045),transparent 34%,transparent 68%,rgba(120,231,255,.028));pointer-events:none}
  .card::after{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-top:1px solid var(--acid);border-left:1px solid var(--acid);opacity:.45;pointer-events:none}
  .card>*{position:relative;z-index:1}
  .card header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
  .card header h3{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .card header h3 b{color:var(--acid);font-weight:500}
  .card header span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .headline{font-size:clamp(17px,1.7vw,24px);font-weight:800;line-height:1.1;letter-spacing:-.015em}
  .card .headline em{font-style:normal;color:var(--acid)}
  .card .sub{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.7}
  .kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px}
  .kv>div{background:rgba(8,13,10,.72);padding:8px 9px;min-width:0}
  .kv .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kv .v{margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kv .v em{font-style:normal;color:var(--acid)}
  .kv.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bar{position:relative;height:5px;background:#131f17;overflow:hidden;margin-top:8px}
  .bar>i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--acid2),var(--acid));box-shadow:0 0 10px rgba(214,255,63,.25);transition:width .8s cubic-bezier(.2,.8,.2,1)}
  .bar.ice>i{background:linear-gradient(90deg,#3aa8c4,var(--ice));box-shadow:0 0 10px rgba(120,231,255,.22)}
  .bar.teal>i{background:linear-gradient(90deg,#249a78,var(--teal));box-shadow:0 0 10px rgba(57,214,168,.22)}
  .bar.warn>i{background:linear-gradient(90deg,#c94a24,var(--warn));box-shadow:0 0 10px rgba(255,107,61,.22)}
  .card.cpu{grid-column:span 4}
  .card.gpu{grid-column:span 4}
  .card.memory{grid-column:span 4}
  .card.power{grid-column:span 3}
  .card.displays{grid-column:span 5}
  .card.storage{grid-column:span 4}
  .card.platform{grid-column:span 5}
  .card.audio{grid-column:span 3}
  .card.thermal{grid-column:span 4}
  .card.network{grid-column:span 4}
  .card.inventory{grid-column:span 4}

  .disp-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
  .disp{display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid var(--line);background:rgba(8,13,10,.6)}
  .disp .dot{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);flex:0 0 auto}
  .disp .nm{min-width:0;flex:1 1 auto;font-family:var(--mono);font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .disp .nm small{display:block;margin-top:2px;font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
  .disp .meta{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
  .disp-map{position:relative;height:150px;margin-top:12px;border:1px solid var(--line);background:rgba(6,10,8,.6);overflow:hidden}
  .disp-map canvas{display:block;width:100%;height:100%}
  .list{display:flex;flex-direction:column;gap:1px;margin-top:12px}
  .li{display:flex;align-items:center;gap:10px;padding:8px 9px;background:rgba(8,13,10,.62);border:1px solid transparent}
  .li .dot{width:5px;height:5px;border-radius:50%;background:var(--acid);flex:0 0 auto;box-shadow:0 0 7px rgba(214,255,63,.5)}
  .li .nm{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .li .nm small{display:block;margin-top:2px;font-size:10px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .li .vl{text-align:right;flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .li .vl b{display:block;font-weight:500;color:var(--ink)}
  .li .vl em{display:block;margin-top:2px;font-style:normal;font-size:10px;color:var(--dim)}
  .fans{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
  .fan{display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid var(--line);background:rgba(8,13,10,.62)}
  .fan .blades{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--acid);border-radius:50%;position:relative;animation:spin var(--spin,1.6s) linear infinite}
  .fan .blades::before,.fan .blades::after{content:"";position:absolute;left:50%;top:1px;bottom:1px;width:1px;background:var(--acid);opacity:.7}
  .fan .blades::after{transform:rotate(90deg)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .fan .info{min-width:0}
  .fan .info b{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fan .info span{display:block;margin-top:2px;font-family:var(--mono);font-size:10px;color:var(--dim);white-space:nowrap}
  .chiprow{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
  .trace{position:relative;z-index:2;margin-top:var(--gap);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));padding:18px;overflow:hidden}
  .trace header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .trace header h3{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .trace header h3 b{color:var(--acid);font-weight:500}
  .trace header span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .legend{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:5px}
  .legend i{width:8px;height:2px;display:inline-block}
  .legend .c i{background:var(--acid)}.legend .g i{background:var(--ice)}.legend .m i{background:var(--teal)}
  #trace{display:block;width:100%;height:clamp(180px,24vh,280px)}
  .footer{position:relative;z-index:2;margin-top:clamp(48px,7vw,90px);border-top:1px solid var(--line);padding:22px 0 34px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .footer b{color:var(--muted);font-weight:500}
  .footer a{color:var(--acid);text-decoration:none}
  .footer a:hover{text-decoration:underline}
  .empty{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:10px 0}

  /* ── easter eggs ─────────────────────────────────────────────── */
  .egg-toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;display:flex;flex-direction:column-reverse;gap:8px;width:min(460px,calc(100vw - 32px));pointer-events:none}
  .egg-toast{border:1px solid rgba(214,255,63,.38);background:rgba(6,11,8,.97);box-shadow:0 20px 60px rgba(0,0,0,.6);padding:12px 15px;font-family:var(--mono);opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1)}
  .egg-toast.on{opacity:1;transform:none}
  .egg-toast b{display:block;color:var(--acid);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
  .egg-toast span{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.65;letter-spacing:.02em}
  .egg-pill{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid rgba(214,255,63,.3);background:rgba(6,11,8,.92);color:var(--acid);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);opacity:.62;transition:opacity .25s,border-color .25s}
  .egg-pill[hidden]{display:none}
  .egg-pill:hover,.egg-pill:focus-visible{opacity:1;border-color:var(--acid);outline:none}
  .egg-pill .lamp{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:pulse 2s ease-in-out infinite}
  .egg-pill.complete{color:#ffd24a;border-color:rgba(255,210,74,.55)}
  .egg-pill.complete .lamp{background:#ffd24a;box-shadow:0 0 12px #ffd24a}
  .egg-dot{position:fixed;left:6px;bottom:6px;z-index:60;width:14px;height:14px;padding:0;border:0;background:transparent;color:var(--acid);opacity:.05;cursor:default;transition:opacity .2s}
  .egg-dot::before{content:"";display:block;width:3px;height:3px;margin:auto;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
  .egg-dot:hover{opacity:.75;cursor:pointer}
  .egg-hint{padding:0 0 0 6px;border:0;background:transparent;color:var(--dim);font-family:var(--mono);font-size:11px;cursor:pointer;opacity:.28;transition:.2s}
  .egg-hint:hover,.egg-hint:focus-visible{opacity:1;color:var(--acid);outline:none}
  .fineprint{cursor:default;transition:.25s}
  .fineprint.revealed{color:var(--acid);text-shadow:0 0 16px rgba(214,255,63,.45)}
  .fineprint-secret{color:var(--acid);opacity:.75}
  .glyph.awake{border-color:var(--ink);box-shadow:0 0 28px rgba(214,255,63,.45)}
  .glyph.awake i{animation-duration:.7s}
  .egg-panel{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(3,6,4,.84);backdrop-filter:blur(10px);font-family:var(--sans);color:var(--ink)}
  .egg-panel[hidden]{display:none}
  .egg-sheet{width:min(800px,100%);max-height:min(86vh,780px);overflow:auto;padding:clamp(18px,3vw,30px);border:1px solid var(--line2);background:linear-gradient(160deg,rgba(12,20,14,.99),rgba(6,11,8,.995));box-shadow:0 40px 120px rgba(0,0,0,.72)}
  .egg-sheet header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
  .egg-sheet h2{margin:0;font-size:clamp(19px,3vw,27px);letter-spacing:-.02em}
  .egg-sheet h2 b{display:block;margin-bottom:6px;color:var(--acid);font-family:var(--mono);font-size:.5em;font-weight:500;letter-spacing:.24em}
  .egg-close{padding:8px 11px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .egg-close:hover,.egg-close:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}
  .egg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
  .egg-card{padding:13px;border:1px solid var(--line);background:rgba(9,15,11,.7)}
  .egg-card.found{border-color:rgba(214,255,63,.34);background:rgba(214,255,63,.045)}
  .egg-card .idx{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
  .egg-card .nm{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
  .egg-card.found .nm{color:var(--acid)}
  .egg-card .tx{margin-top:7px;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--muted)}
  .egg-card.locked .tx{color:var(--dim)}
  .egg-progress{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .egg-progress .meter{flex:1;height:3px;background:var(--line);overflow:hidden}
  .egg-progress .meter i{display:block;height:100%;width:0;background:var(--acid);transition:width .45s}
  #beastRain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.17}
  body.beast-mode .top{border-bottom-color:rgba(214,255,63,.42)}
  body.beast-mode .live{border-color:rgba(214,255,63,.55)}
  body.beast-mode h1 em{animation:beastGlitch 3.6s steps(1) infinite}
  @keyframes beastGlitch{0%,90%,100%{transform:none;text-shadow:0 0 44px rgba(214,255,63,.16)}91%{transform:translate(-2px,1px) skewX(-6deg);text-shadow:-3px 0 var(--red),3px 0 var(--ice)}93%{transform:translate(2px,-1px) skewX(5deg)}95%{transform:none}}
  body.roar{animation:roarShake .55s ease-in-out}
  @keyframes roarShake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}
  #eggGhost{position:fixed;z-index:65;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acid);opacity:0;transition:opacity .5s;text-shadow:0 0 14px var(--acid)}
  #eggGhost.on{opacity:.45}
  #eggStill{position:fixed;inset:0;z-index:75;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity 1s;font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--acid);background:radial-gradient(circle at center,rgba(214,255,63,.07),transparent 62%)}
  #eggStill.on{opacity:1}
  body.archivist{--acid:#ffd24a;--acid2:#e8b52f;--acid-soft:rgba(255,210,74,.14)}

  /* ── settings / playground ───────────────────────────────────── */
  .gear-btn svg{width:14px;height:14px;flex:0 0 auto}
  dialog.beast-dialog{border:1px solid var(--line2);background:linear-gradient(160deg,var(--bg2),var(--bg));color:var(--ink);font-family:var(--sans);padding:0;box-shadow:0 40px 120px rgba(0,0,0,.72)}
  dialog.beast-dialog::backdrop{background:rgba(3,6,4,.8);backdrop-filter:blur(9px)}
  .settings-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(470px,100%);max-width:100%;height:100%;max-height:100%;border:0;border-left:1px solid var(--line2);animation:drawerIn .28s cubic-bezier(.16,1,.3,1)}
  .settings-dialog[open]{display:flex;flex-direction:column}
  @keyframes drawerIn{from{transform:translateX(34px);opacity:0}to{transform:none;opacity:1}}
  .settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:rgba(5,8,7,.6);position:sticky;top:0;z-index:2}
  .settings-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
  .settings-head h2 b{display:block;margin-bottom:5px;color:var(--acid);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em}
  .settings-body{padding:18px 20px 36px;overflow:auto;flex:1;overscroll-behavior:contain}
  .set-sec{margin-top:24px}
  .set-sec:first-child{margin-top:0}
  .set-sec>h3{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--acid)}
  .set-card{border:1px solid var(--line);background:rgba(9,15,11,.62);padding:6px 14px}
  .set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
  .set-row:last-child{border-bottom:0}
  .set-row .lbl{min-width:0}
  .set-row .lbl b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:500}
  .set-row .lbl span{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:.04em;color:var(--dim)}
  .switch{position:relative;width:40px;height:22px;flex:0 0 auto}
  .switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
  .switch i{position:absolute;inset:0;border:1px solid var(--line2);border-radius:100px;background:rgba(5,8,7,.7);transition:.2s}
  .switch i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--dim);transition:.2s}
  .switch input:checked+i{border-color:var(--acid);background:var(--acid-soft)}
  .switch input:checked+i::after{left:21px;background:var(--acid);box-shadow:0 0 9px var(--acid)}
  .switch input:focus-visible+i{outline:1px solid var(--acid);outline-offset:2px}
  .seg{display:flex;border:1px solid var(--line2);background:rgba(5,8,7,.6);flex:0 0 auto}
  .seg button{padding:7px 9px;border:0;background:transparent;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .seg button+button{border-left:1px solid var(--line)}
  .seg button.on{color:var(--acid);background:var(--acid-soft)}
  .seg button:hover{color:var(--acid)}
  .themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
  .theme-swatch{display:flex;flex-direction:column;gap:7px;padding:9px;border:1px solid var(--line2);background:rgba(9,15,11,.55);cursor:pointer;text-align:left;transition:.2s}
  .theme-swatch:hover{border-color:var(--dim)}
  .theme-swatch.on{border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid)}
  .theme-swatch .dots{display:flex;gap:3px}
  .theme-swatch .dots i{width:11px;height:11px;border-radius:50%;display:block}
  .theme-swatch b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .theme-swatch.on b{color:var(--acid)}
  .theme-custom{grid-column:span 3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);background:rgba(9,15,11,.55)}
  .theme-custom label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .theme-custom input[type=color]{width:52px;height:28px;padding:2px;border:1px solid var(--line2);background:transparent;cursor:pointer}
  .range-row{display:flex;align-items:center;gap:12px;flex:0 0 46%}
  .range-row input[type=range]{width:100%;accent-color:var(--acid);cursor:pointer}
  .range-row output{min-width:38px;text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--acid)}
  .play-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .play-tile{padding:13px;border:1px solid var(--line2);background:rgba(9,15,11,.58);text-align:left;cursor:pointer;transition:.2s}
  .play-tile:hover,.play-tile:focus-visible{border-color:var(--acid);background:var(--acid-soft);outline:none}
  .play-tile b{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--acid)}
  .play-tile span{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--dim)}
  .set-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .set-action{padding:9px 12px;border:1px solid var(--line2);background:rgba(9,15,11,.6);color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:.2s}
  .set-action:hover,.set-action:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}
  .set-action.acid{color:var(--acid);border-color:var(--acid)}
  .set-action.danger:hover{border-color:var(--red);color:var(--red)}
  .set-note{margin-top:14px;font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--dim);letter-spacing:.04em}
  body.inspect-on .card,body.inspect-on .vit{cursor:zoom-in}
  body.inspect-on .card:hover,body.inspect-on .vit:hover{border-color:var(--line2);box-shadow:0 0 0 1px rgba(214,255,63,.16),0 18px 50px rgba(0,0,0,.25)}
  body.tilt-on .card{transform-style:preserve-3d;transition:transform .18s ease-out}
  body.tilt-on .card.tilting{transition:none}
  .inspect-dialog{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;margin:0;animation:dialogIn .2s ease-out}
  .inspect-dialog[open]{display:flex;flex-direction:column}
  @keyframes dialogIn{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}
  .inspect-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(20px,3vw,40px);border-bottom:1px solid var(--line)}
  .inspect-head h2{margin:0;font-size:clamp(24px,2vw,32px);letter-spacing:-.02em}
  .inspect-head h2 b{display:block;margin-bottom:5px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--acid)}
  .inspect-tools{display:flex;align-items:center;gap:8px}
  .inspect-tab{padding:10px 15px;border:1px solid var(--line2);background:transparent;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .inspect-tab.on{color:var(--acid);border-color:var(--acid);background:var(--acid-soft)}
  .inspect-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(18px,2.4vw,34px);overflow:auto}
  .inspect-visual{flex:1;min-height:fit-content;display:flex;flex-direction:column}
  .inspect-visual[hidden]{display:none}
  .inspect-stage{flex:1;min-height:fit-content;display:flex;flex-direction:column}
  .inspect-stage .card,.inspect-stage .vit{flex:1;min-height:fit-content;width:100%;max-width:none;padding:clamp(28px,3vw,48px);border-color:var(--line2);cursor:default;box-shadow:none;transform:none!important}
  .inspect-stage .card .headline{font-size:clamp(42px,5vw,84px)}
  .inspect-stage .card .sub{font-size:17px;line-height:1.6}
  .inspect-stage .card .kv .k{font-size:12.5px}
  .inspect-stage .card .kv .v{font-size:22.5px;line-height:1.45}
  .inspect-stage .card .disp-map{height:clamp(400px,40vh,620px)}
  .inspect-stage .card .disp .nm{font-size:18px}
  .inspect-stage .card .li .nm{font-size:18px}
  .inspect-stage .card .fan .info b{font-size:14px}
  .inspect-stage .vit .v{font-size:clamp(80px,9vw,150px)}
  .inspect-stage .vit .s{font-size:17px}
  .inspect-stage .vit .k{font-size:13px}
  .inspect-stage .card header h3{font-size:15px}
  .inspect-stage .card header span{font-size:12px}
  .inspect-stage .trace header h3{font-size:15px}
  .inspect-stage .trace header span{font-size:12px}
  .inspect-stage .badge{font-size:12px;padding:6px 10px}
  .inspect-stage .vit canvas{height:120px}
  .inspect-stage .trace{flex:1;display:flex;flex-direction:column;width:100%;padding:clamp(24px,2.6vw,40px)}
  .inspect-stage .trace canvas{flex:1;height:auto;min-height:clamp(380px,55vh,720px)}
  .inspect-json{margin:0;padding:18px;border:1px solid var(--line);background:rgba(5,8,7,.75);font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--muted);white-space:pre-wrap;word-break:break-word;max-height:40vh;overflow:auto}
  /* the readable facts view */
  .inspect-facts{display:flex;flex-direction:column;gap:14px;max-height:74vh;overflow:auto}
  .fact-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .fact-hero .fact{background:#080d0a;padding:12px 13px;display:flex;flex-direction:column;gap:5px}
  .fact-hero .fk{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .fact-hero .fv{font-family:var(--mono);font-size:19px;color:var(--acid);line-height:1.15;word-break:break-word}
  .fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .fact-grid .fact{background:#070c09;padding:8px 11px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;min-width:0}
  .fact-grid .fk{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fact-grid .fv{font-family:var(--mono);font-size:11.5px;color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fact-more{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;padding:2px}
  .inspect-raw{display:flex;flex-direction:column;gap:8px}
  .inspect-raw-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .inspect-note{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
  .lab-dialog{width:min(900px,94vw);max-width:94vw;max-height:92vh;margin:auto;animation:dialogIn .2s ease-out}
  .lab-dialog[open]{display:flex;flex-direction:column}
  .lab-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
  .lab-head h2{margin:0;font-size:18px;letter-spacing:-.02em}
  .lab-head h2 b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--acid)}
  .lab-body{padding:16px 18px 20px;overflow:auto}
  .lab-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
  .lab-controls label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .lab-controls input[type=range]{width:110px;accent-color:var(--acid)}
  .lab-controls output{font-family:var(--mono);font-size:10.5px;color:var(--acid);min-width:30px}
  .lab-help{margin-top:10px;font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--dim);letter-spacing:.04em}
  .core-stage{position:relative;height:clamp(340px,54vh,540px);display:grid;place-items:center;perspective:1100px;touch-action:none;cursor:grab;overflow:hidden;background:radial-gradient(circle at 50% 44%,var(--acid-soft),transparent 62%)}
  .core-stage.dragging{cursor:grabbing}
  .core-cube{position:relative;width:200px;height:200px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(28deg);will-change:transform}
  .core-face{position:absolute;width:200px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--acid);background:linear-gradient(135deg,var(--acid-soft),rgba(5,8,7,.82));box-shadow:inset 0 0 50px var(--acid-soft);backface-visibility:visible;font-family:var(--mono);color:var(--acid)}
  .core-face::before{content:"";position:absolute;inset:8px;border:1px solid var(--line2);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px;opacity:.55}
  .core-face b{position:relative;z-index:1;font-size:27px;letter-spacing:-.03em}
  .core-face span{position:relative;z-index:1;margin-top:7px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .core-face.f1{transform:translateZ(100px)}
  .core-face.f2{transform:rotateY(180deg) translateZ(100px)}
  .core-face.f3{transform:rotateY(90deg) translateZ(100px)}
  .core-face.f4{transform:rotateY(-90deg) translateZ(100px)}
  .core-face.f5{transform:rotateX(90deg) translateZ(100px)}
  .core-face.f6{transform:rotateX(-90deg) translateZ(100px)}
  #fxParticles{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s}
  html.particles-on #fxParticles{opacity:.72}
  #cursorAura{position:fixed;left:0;top:0;width:440px;height:440px;margin:-220px 0 0 -220px;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle,var(--acid-soft),transparent 62%);mix-blend-mode:screen}
  html.aura-on #cursorAura{opacity:1}

  @media(max-width:1100px){
    .card.cpu,.card.gpu,.card.memory,.card.power,.card.displays,.card.storage,.card.platform,.card.audio,.card.thermal,.card.network,.card.inventory{grid-column:span 6}
    .card.displays,.card.platform{grid-column:span 12}
  }
  @media(max-width:720px){
    .vitals{grid-template-columns:1fr 1fr}
    .card{grid-column:span 12 !important}
    .top-right .btn{display:none}
    .top-right .gear-btn{display:inline-flex}
    .gear-btn span{display:none}
    .brand span{display:none}
    .top .live{display:none}
    h1{font-size:clamp(38px,15vw,74px)}
    .fans{grid-template-columns:1fr}
    .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
    .theme-custom{grid-column:span 2}
    .play-grid{grid-template-columns:1fr}
    .range-row{flex:0 0 52%}
    .inspect-stage .card,.inspect-stage .vit{padding:24px}
    .inspect-stage .card .headline{font-size:clamp(38px,10vw,56px)}
    .inspect-stage .card .kv .v{font-size:19px}
    .inspect-stage .card header{flex-wrap:wrap;row-gap:8px}
    .inspect-stage .card header span{white-space:normal}
    .inspect-stage .card .disp{flex-wrap:wrap}
    .inspect-stage .card .disp .meta{width:100%;justify-content:flex-start}
    .inspect-stage .card .disp-map{height:200px}
    .inspect-stage .trace{padding:20px}
  }
  @media(max-width:480px){
    .top{padding:12px 14px;gap:10px}
    .brand{gap:9px}
    .glyph{width:27px;height:27px}
    .brand b{font-size:12px;letter-spacing:.13em}
    .top-right{gap:8px}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  }

/* ═══════════════════════════════════════════════════════════════
   Playground — Lab für moderne Web-Technologien
   ═══════════════════════════════════════════════════════════════ */
  .labnav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
  .labtab{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line2);background:rgba(9,15,11,.6);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:.2s}
  .labtab:hover,.labtab:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}
  .labtab.on{border-color:var(--acid);color:var(--acid);background:rgba(214,255,63,.07)}
  .labtab i{width:6px;height:6px;border-radius:50%;background:var(--line2);flex:0 0 auto}
  .labtab.on i{background:var(--acid);box-shadow:0 0 8px var(--acid)}
  .labtab i.ok{background:var(--teal);box-shadow:0 0 8px var(--teal)}
  .labtab i.no{background:var(--dim)}
  .labpanel{display:none;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));margin-top:var(--gap);overflow:hidden}
  .labpanel.on{display:block}
  .labpanel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
  .labpanel-head h3{font-size:15px;font-weight:800;letter-spacing:-.01em}
  .labpanel-head h3 b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;display:block;margin-bottom:4px}
  .labpanel-body{padding:18px;display:grid;gap:16px}
  .labpanel-body.split{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .labnote{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--muted);letter-spacing:.02em}
  .labnote code{color:var(--acid);background:rgba(214,255,63,.08);padding:1px 5px;border:1px solid rgba(214,255,63,.2)}
  .labstage{position:relative;border:1px solid var(--line);background:#04060a;overflow:hidden;min-height:260px;height:clamp(260px,42vh,420px)}
  .labstage canvas{display:block;width:100%;height:100%}
  .labstage .lab-hud{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--acid);text-shadow:0 0 12px rgba(0,0,0,.9);pointer-events:none;text-transform:uppercase}
  .labstage .lab-badge{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-shadow:0 0 12px rgba(0,0,0,.9);pointer-events:none}
  .labside{display:flex;flex-direction:column;gap:12px;min-width:0}
  .labside .set-row{padding:0;border:0}
  .labctl{display:flex;flex-direction:column;gap:6px}
  .labctl label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px}
  .labctl label output{color:var(--acid)}
  .labbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line2);background:rgba(9,15,11,.7);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:.2s}
  .labbtn:hover,.labbtn:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}
  .labbtn.on{border-color:var(--acid);color:var(--acid);background:rgba(214,255,63,.07)}
  .labrow{display:flex;flex-wrap:wrap;gap:8px}
  .labfeed{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--muted);max-height:180px;overflow:auto;border:1px solid var(--line);padding:10px 12px;background:rgba(4,6,10,.6);word-break:break-word}
  .labfeed b{color:var(--acid);font-weight:500}
  .labfeed .warn{color:var(--warn)}
  .labfeed .err{color:var(--red)}
  .labfeed .ok{color:var(--teal)}
  .code-area{width:100%;min-height:170px;background:#04060a;border:1px solid var(--line2);color:var(--ink);font-family:var(--mono);font-size:12px;line-height:1.6;padding:12px;resize:vertical;tab-size:2}
  .code-area:focus{outline:none;border-color:var(--acid)}
  .featgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
  .feat{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);background:rgba(6,10,8,.5)}
  .feat .fm{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--acid);flex:0 0 auto;min-width:62px}
  .feat .ft{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)}
  .feat .ft b{display:block;color:var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}

/* CSS-Feature-Demo */
  .csdemo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
  .csdemo>div{border:1px solid var(--line);padding:14px;min-height:120px;position:relative;overflow:hidden;background:rgba(6,10,8,.5)}
  .csdemo h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acid);margin-bottom:8px}
  .csdemo p{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted)}
  .csdemo .has{container-type:inline-size}
  .csdemo .has>span{font-family:var(--mono);font-size:11px;color:var(--ice)}
  @container (max-width:220px){ .csdemo .has>span::after{content:" — narrow container"} }
  .csdemo .has2{position:relative}
  .csdemo .has2::after{content:"HOVER ME";position:absolute;inset:auto 10px 10px auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);transition:.25s}
  .csdemo .has2:hover::after{color:var(--acid);text-shadow:0 0 14px rgba(214,255,63,.6)}
  .csdemo .grad{height:74px;background:linear-gradient(115deg,var(--acid),var(--ice) 40%,var(--teal) 70%,var(--violet));background-size:300% 300%;animation:gradShift 7s ease infinite}
  @keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  .csdemo .scrollanim{height:120px;overflow-y:auto;border:1px solid var(--line);scroll-timeline-name:scroller;scroll-timeline-axis:block}
  .csdemo .scrollanim>div{height:220px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--acid);border-bottom:1px solid var(--line);animation:scrollFade linear both;animation-timeline:scroller;animation-range:entry 0% cover 40%}
  @keyframes scrollFade{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}
  .csdemo .textwrap p{text-wrap:balance}
  .csdemo .colormix{background:color-mix(in oklab,var(--acid) 26%,transparent);border:1px solid color-mix(in oklab,var(--acid) 45%,transparent)}
  .csdemo .nesting{background:var(--panel2);border:1px solid var(--line2)}
  .csdemo .nesting>div{padding:10px;font-family:var(--mono);font-size:11px;color:var(--muted);&>span{color:var(--acid);&::before{content:"// nested & ";color:var(--dim)}}}
  .csdemo .popover{anchor-name:--demo-anchor;margin-top:8px}
  .csdemo .anchorbtn{anchor-name:--demo-anchor;padding:7px 11px;border:1px solid var(--acid);background:rgba(214,255,63,.08);color:var(--acid);font-family:var(--mono);font-size:11px;cursor:pointer}
  .csdemo .popover{position:absolute;position-anchor:--demo-anchor;margin:0;inset:auto auto;top:calc(anchor(bottom));left:anchor(left);padding:10px;border:1px solid var(--acid);background:#0a120e;color:var(--ink);font-family:var(--mono);font-size:11px;width:max-content;max-width:240px;z-index:5}
  .csdemo .popover:not(:popover-open){display:none}
  .csdemo details{border:1px solid var(--line);padding:0}
  .csdemo summary{cursor:pointer;padding:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--acid);list-style:none}
  .csdemo details p{padding:0 10px 10px}
  .csdemo .viewt{border:1px solid var(--line2);padding:12px;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .csdemo .viewt.on{animation:viewT .6s ease}
  @keyframes viewT{from{opacity:.2;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ── Command Palette ───────────────────────────────────────── */
  .palette{position:fixed;inset:0;z-index:95;display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
  .palette.on{display:flex}
  .palette-scrim{position:absolute;inset:0;background:rgba(3,6,4,.72);backdrop-filter:blur(6px)}
  .palette-box{position:relative;width:min(620px,100%);border:1px solid var(--line2);background:linear-gradient(180deg,#0c1410,#080d0a);box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:hidden}
  .palette-box header{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
  .palette-box header svg{color:var(--acid);flex:0 0 auto}
  .palette-box input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font-family:var(--mono);font-size:14px;padding:0}
  .palette-box input:focus{outline:none}
  .palette-box input::placeholder{color:var(--dim)}
  .palette-list{max-height:min(52vh,420px);overflow:auto}
  .palette-item{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid rgba(29,43,34,.5);cursor:pointer}
  .palette-item:last-child{border-bottom:0}
  .palette-item .pi-ic{width:22px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--acid);flex:0 0 auto}
  .palette-item .pi-tx{flex:1;min-width:0}
  .palette-item .pi-nm{font-size:13px;color:var(--ink)}
  .palette-item .pi-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-top:2px}
  .palette-item .pi-key{font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line2);padding:2px 6px;flex:0 0 auto}
  .palette-item.sel{background:rgba(214,255,63,.08)}
  .palette-item.sel .pi-nm{color:var(--acid)}
  .palette-empty{padding:26px 15px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
  .palette-foot{display:flex;gap:14px;padding:9px 15px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
  .palette-foot b{color:var(--muted);font-weight:500}

/* ── Sensor-Gruppen (Thermals) ─────────────────────────────── */
  .sensorbars{display:flex;flex-direction:column;gap:7px;margin-top:12px}
  .sbar{display:grid;grid-template-columns:78px 1fr 62px;gap:10px;align-items:center}
  .sbar .sl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sbar .st{height:6px;background:#131f17;position:relative;overflow:hidden}
  .sbar .st i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--teal),var(--acid));transition:width .6s cubic-bezier(.2,.8,.2,1)}
  .sbar.hot .st i{background:linear-gradient(90deg,var(--warn),var(--red))}
  .sbar .sv{font-family:var(--mono);font-size:11px;color:var(--ink);text-align:right}
  .sbar .sv small{display:block;color:var(--dim);font-size:9.5px;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .note-inline{font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .note-inline b{color:var(--acid);font-weight:500}

/* ── Stats-Ticker / Achievements ───────────────────────────── */
  .ach{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .ach span{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--line2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .ach span.on{border-color:var(--acid);color:var(--acid);background:rgba(214,255,63,.06)}
  .ach span i{width:5px;height:5px;border-radius:50%;background:var(--line2)}
  .ach span.on i{background:var(--acid);box-shadow:0 0 8px var(--acid)}

/* ── Keyboard-Help ─────────────────────────────────────────── */
  .keyhelp{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;padding:20px}
  .keyhelp.on{display:flex}
  .keyhelp .kh-box{position:relative;width:min(560px,100%);border:1px solid var(--line2);background:linear-gradient(180deg,#0c1410,#080d0a);padding:22px;box-shadow:0 40px 120px rgba(0,0,0,.7)}
  .keyhelp h2{font-size:17px;font-weight:800;margin-bottom:4px}
  .keyhelp h2 b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);font-weight:400;display:block;margin-bottom:5px}
  .keyhelp dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin-top:18px;align-items:baseline}
  .keyhelp dt{font-family:var(--mono);font-size:11px;color:var(--acid);border:1px solid var(--line2);padding:3px 7px;justify-self:start;white-space:nowrap}
  .keyhelp dd{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0}
  .keyhelp .kh-close{position:absolute;right:14px;top:14px}

/* ── Webcam-/Clipboard-/Share-Mikrowidgets ─────────────────── */
  .hintbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line2);background:rgba(6,11,8,.94);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;opacity:0;pointer-events:none;transition:.35s}
  .hintbar.on{opacity:1;pointer-events:auto}
  .hintbar b{color:var(--acid);font-weight:500}
  .hintbar button{background:transparent;border:1px solid var(--line2);color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:4px 8px;cursor:pointer;text-transform:uppercase}
  .hintbar button:hover{border-color:var(--acid);color:var(--acid)}

/* ── Erdbeer / Easter-Egg-Styles ───────────────────────────── */
  .egg-rain{position:fixed;inset:0;z-index:75;pointer-events:none;opacity:0;transition:opacity .5s}
  .egg-rain.on{opacity:1}
  .egg-rain canvas{width:100%;height:100%}
  .egg-marquee{position:fixed;left:0;right:0;bottom:0;z-index:74;background:var(--acid);color:#050807;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:7px 0;overflow:hidden;transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .egg-marquee.on{transform:none}
  .egg-marquee span{display:inline-block;white-space:nowrap;animation:eggSlide 22s linear infinite;padding-left:100%}
  @keyframes eggSlide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
  .egg-rainbow{filter:hue-rotate(calc(var(--egg-hue,0) * 1deg))}
  .egg-prism{position:fixed;inset:0;z-index:73;pointer-events:none;opacity:0;background:conic-gradient(from var(--egg-hue,0deg),var(--acid),var(--ice),var(--teal),var(--violet),var(--acid));mix-blend-mode:screen;transition:opacity .6s}
  .egg-prism.on{opacity:.22}
  .egg-glow{position:fixed;inset:0;z-index:72;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(60% 50% at 50% 100%,rgba(214,255,63,.16),transparent 70%)}
  .egg-glow.on{opacity:1}
  .egg-tiltworld{transform-style:preserve-3d;perspective:1200px}
  .egg-tiltworld>*{transform:translateZ(0)}
  .egg-pixel{position:fixed;inset:0;z-index:74;pointer-events:none;image-rendering:pixelated;opacity:0;transition:opacity .4s;background-repeat:repeat;background-size:6px 6px}
  .egg-pixel.on{opacity:.14}

  @media(max-width:1100px){
    .labpanel-body.split{grid-template-columns:1fr}
  }
  @media(max-width:720px){
    .labnav{gap:6px}
    .labtab{padding:7px 10px;font-size:10px}
    .labpanel-head{padding:14px}
    .labpanel-body{padding:14px}
    .palette{padding:8vh 12px 12px}
    .keyhelp dl{grid-template-columns:1fr;gap:4px}
    .keyhelp dt{margin-top:8px}
    .sbar{grid-template-columns:64px 1fr 56px}
  }

/* ═══════════════════════════════════════════════════════════════
   v2 additions — skip link, hero CTA, lab intro, achievements
   ═══════════════════════════════════════════════════════════════ */
  .skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--acid);color:#050807;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
  .skip:focus{left:12px;top:12px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .hero-cta .btn{padding:11px 16px}
  .live em{font-style:normal;opacity:.7;margin-left:6px}
  .live em:empty{display:none}
  .flash-target{animation:flashTarget 1.2s ease}
  @keyframes flashTarget{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px var(--acid),0 0 42px rgba(214,255,63,.3)}}
  .lab-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:22px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));padding:22px;margin-bottom:var(--gap)}
  .lab-intro-main h3{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
  .lab-intro-main p{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:12px;max-width:62ch}
  .lab-intro-main p:last-child{margin-bottom:0}
  .lab-intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
  .lab-intro-grid .chip{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border:1px solid var(--line);background:rgba(6,10,8,.5)}
  .lab-intro-grid .chip b{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--acid);font-weight:500}
  .lab-intro-grid .chip span{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--muted)}
  .lab-intro-grid .chip.off b{color:var(--dim)}
  .ach-wrap{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));padding:20px}
  .ach{counter-reset:egg}
  .zero-glitch{animation:zeroGlitch 1.4s steps(2,end)}
  @keyframes zeroGlitch{0%{transform:none;filter:none}20%{transform:scale(1.6) rotate(12deg);filter:invert(1)}50%{transform:scale(.4) rotate(-20deg)}100%{transform:none;filter:none}}

  /* new theme: ember */
  html[data-theme="ember"]{
    --bg:#0d0705;--bg2:#160d08;--panel:rgba(22,13,7,.86);--panel2:rgba(30,18,9,.72);
    --line:#3a2416;--line2:#5e3c22;--ink:#fff1e2;--muted:#d2a87f;--dim:#a08260;
    --acid:#ff8a3d;--acid2:#ffb703;--acid-soft:rgba(255,138,61,.15);
    --ice:#ffd166;--ice-soft:rgba(255,209,102,.12);--teal:#7bd389;
    --warn:#ffb703;--red:#ef4444;--violet:#e879f9;
  }

  /* ── data / focus modes ────────────────────────────────────── */
  html[data-focus="on"] .top,
  html[data-focus="on"] .footer,
  html[data-focus="on"] .strip,
  html[data-focus="on"] .section-head span,
  html[data-focus="on"] .card header span,
  html[data-focus="on"] .hero-cta,
  html[data-focus="on"] .lab-intro,
  html[data-focus="on"] .ach-wrap{display:none}
  html[data-focus="on"] .hero{padding-top:clamp(30px,5vw,60px)}
  html[data-focus="on"] h1{font-size:clamp(34px,5.4vw,80px)}
  html[data-focus="on"] .grid{gap:var(--gap)}

  html[data-terse="on"] .card .sub,
  html[data-terse="on"] .card .kv .k,
  html[data-terse="on"] .vitals .s,
  html[data-terse="on"] .section-head span{display:none}
  html[data-terse="on"] .card{padding:14px}
  html[data-terse="on"] .grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

  /* ── overlays ──────────────────────────────────────────────── */
  body.scanline-on::after{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);background-size:auto;mask-image:none;animation:none;opacity:.6}
  body.grain-on::before{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:3px 3px;mask-image:none;animation:gridDrift 9s steps(4) infinite;opacity:.35;mix-blend-mode:overlay}
  html[data-rainbow="on"] body{filter:hue-rotate(calc(var(--egg-hue,0) * 1deg));animation:rainbowSpin 14s linear infinite}
  @keyframes rainbowSpin{to{filter:hue-rotate(360deg)}}
  html[data-rainbow="on"] *{animation-duration:inherit}
  body.cursor-on,body.cursor-on *{cursor:crosshair}
  html[data-hc="on"],html[data-hc="on"] body{--muted:#c3d4c9;--dim:#a8bcae;--line:#3a5442;--line2:#52775e}
  body.hush *,body.hush *::before,body.hush *::after{animation:none!important;transition:none!important}
  body.hush{background:#000}
  body.archivist .egg-pill{box-shadow:0 0 0 2px var(--acid),0 0 40px rgba(214,255,63,.6)}
  body.beast-mode .top{border-bottom-color:rgba(214,255,63,.42)}
  body.beast-mode .live{border-color:rgba(214,255,63,.55)}

  @media(max-width:1100px){
    .lab-intro{grid-template-columns:1fr}
    .lab-intro-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  }
  @media(max-width:720px){
    .hero-cta .btn{flex:1 1 auto;justify-content:center}
    .lab-intro{padding:16px}
    .lab-intro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ach-wrap{padding:14px}
    .top-right .btn:not(.gear-btn){display:none}
  }

/* ═══════════════════════════════════════════════════════════════
   v3 — deep space lab + third-wave easter eggs
   ═══════════════════════════════════════════════════════════════ */

  /* null island — a coordinate readout from nowhere */
  #nullIsland{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);z-index:88;padding:26px 38px;border:1px solid var(--acid);background:rgba(4,6,10,.96);font-family:var(--mono);text-align:center;opacity:0;pointer-events:none;transition:.45s cubic-bezier(.16,1,.3,1);box-shadow:0 0 90px rgba(214,255,63,.22)}
  #nullIsland.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
  #nullIsland b{display:block;font-size:34px;color:var(--acid);letter-spacing:.1em;line-height:1}
  #nullIsland span{display:block;margin-top:10px;font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}

  /* the eye — something blinking back */
  #eggEye{position:fixed;inset:0;z-index:86;pointer-events:none;opacity:0;transition:opacity .5s;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(120,231,255,.10),transparent 42%)}
  #eggEye.on{opacity:1}
  #eggEye::after{content:"◉";font-size:120px;color:var(--ice);text-shadow:0 0 60px rgba(120,231,255,.7);animation:eyeBlink 2.4s ease-in-out infinite}
  @keyframes eyeBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}

  /* entropy — the interface briefly loses control */
  body.entropy *{animation:entropyJitter .09s steps(2,end) infinite!important}
  @keyframes entropyJitter{
    0%{transform:translate(0,0)}
    25%{transform:translate(-2px,1px) skewX(4deg)}
    50%{transform:translate(2px,-2px) skewX(-3deg)}
    75%{transform:translate(-1px,-1px)}
    100%{transform:translate(1px,2px)}
  }
  body.entropy::before{filter:hue-rotate(180deg)}

/* ═══════════════════════════════════════════════════════════════
   v4 — radical themes
   These change the LAYOUT, not just the colours. Each one restyles
   the page structure: borders become fills, the grid becomes a list,
   the cards become rows, the whole document becomes a terminal.
   ═══════════════════════════════════════════════════════════════ */

/* ── MONO: the page becomes a terminal ─────────────────────────── */
  html[data-theme="mono"]{
    --bg:#08080a;--bg2:#0d0d10;--panel:#0a0a0d;--panel2:#0e0e12;
    --line:#22222a;--line2:#3a3a46;--ink:#f2f2f5;--muted:#a8a8b4;--dim:#7a7a86;
    --acid:#c8ff3d;--acid2:#9ee000;--acid-soft:rgba(200,255,61,.12);
    --ice:#7ae0ff;--ice-soft:rgba(122,224,255,.1);--teal:#5fe3b0;
    --warn:#ffb703;--red:#ff5470;--violet:#c39cff;
    --sans:"JetBrains Mono",ui-monospace,monospace;
    --gap:0px;
  }
  html[data-theme="mono"] body::before,html[data-theme="mono"] body::after{display:none}
  html[data-theme="mono"] .wrap{width:min(1100px,100%)}
  html[data-theme="mono"] .top{background:#0a0a0d;border-bottom:1px solid var(--line2)}
  html[data-theme="mono"] .hero{padding:32px 0 12px}
  html[data-theme="mono"] h1{font-size:clamp(26px,4vw,46px);letter-spacing:0;line-height:1.15;text-transform:none}
  html[data-theme="mono"] h1 em{color:var(--acid);text-shadow:none}
  html[data-theme="mono"] .hero-cta,.hero-cta .btn{margin-top:0}
  html[data-theme="mono"] .vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line2)}
  html[data-theme="mono"] .vit{border:0;border-right:1px solid var(--line2);background:transparent;padding:12px 14px}
  html[data-theme="mono"] .vit:last-child{border-right:0}
  html[data-theme="mono"] .vit::before{display:none}
  html[data-theme="mono"] .vit .v{font-size:26px}
  html[data-theme="mono"] .strip{background:#0a0a0d;border-radius:0}
  html[data-theme="mono"] .grid{grid-template-columns:1fr!important;gap:0;border:1px solid var(--line2)}
  /* The cards carry explicit span values from the 12-column grid; in a
     single-column layout they have to span the full width instead.
     min-width:0 stops the content from pushing the column wider. */
  html[data-theme="mono"] .grid>*{grid-column:1/-1!important;min-width:0}
  html[data-theme="mono"] .card{border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 14px}
  html[data-theme="mono"] .card:last-child{border-bottom:0}
  html[data-theme="mono"] .card::before{display:none}
  html[data-theme="mono"] .card:hover{background:#101016}
  html[data-theme="mono"] .card .headline{font-size:15px;color:var(--acid)}
  html[data-theme="mono"] .bar{height:3px;background:#1a1a22}
  html[data-theme="mono"] .trace{border:1px solid var(--line2);background:transparent;border-radius:0}
  html[data-theme="mono"] .section-head{border-bottom:1px dashed var(--line2);padding-bottom:6px}
  html[data-theme="mono"] .section-head h2{font-size:13px;letter-spacing:.2em}
  html[data-theme="mono"] .kv,html[data-theme="mono"] .kv{background:transparent;border:0;gap:0}
  html[data-theme="mono"] .kv>div{border-bottom:1px dotted var(--line);padding:4px 0;background:transparent}
  html[data-theme="mono"] .footer{border-top:1px solid var(--line2);font-size:11px}
  html[data-theme="mono"] .glyph{border-radius:0;box-shadow:none}
  html[data-theme="mono"] .btn{border-radius:0;background:transparent}
  html[data-theme="mono"] .beast-dialog,.beast-dialog *{border-radius:0!important}
  html[data-theme="mono"] .beast-dialog{border:1px solid var(--line2);background:#08080a}

/* ── BRUTAL: oversized, loud, no curves ────────────────────────── */
  html[data-theme="brutal"]{
    --bg:#f4f1ea;--bg2:#e8e4da;--panel:#fffdf7;--panel2:#f0ece1;
    --line:#111;--line2:#111;--ink:#0a0a0a;--muted:#3a3a38;--dim:#5c5c58;
    --acid:#ff2e00;--acid2:#d40000;--acid-soft:rgba(255,46,0,.14);
    --ice:#0057ff;--ice-soft:rgba(0,87,255,.12);--teal:#00875a;
    --warn:#ff8c00;--red:#e00000;--violet:#7b00ff;
    --sans:"Archivo",system-ui,sans-serif;
    --gap:0px;
  }
  html[data-theme="brutal"] body{background:var(--bg)}
  html[data-theme="brutal"] body::before{display:none}
  html[data-theme="brutal"] body::after{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px);background-size:auto;mask-image:none;animation:none;opacity:.6}
  html[data-theme="brutal"] .wrap{width:min(1320px,100%)}
  html[data-theme="brutal"] .top{background:var(--ink);border-bottom:4px solid var(--acid)}
  html[data-theme="brutal"] .top .brand b{color:var(--bg)}
  html[data-theme="brutal"] .top .brand b em{color:var(--acid)}
  html[data-theme="brutal"] .live{border-width:2px;border-color:var(--ink);color:var(--ink);background:transparent}
  html[data-theme="brutal"] .live i{background:var(--acid)}
  html[data-theme="brutal"] .glyph{border-width:3px;border-color:var(--ink);background:var(--acid);box-shadow:6px 6px 0 var(--ink)}
  html[data-theme="brutal"] .glyph::before,html[data-theme="brutal"] .glyph::after{background:var(--ink)}
  html[data-theme="brutal"] .glyph i{background:var(--ink);box-shadow:none}
  /* The zoom factor applies to the whole body, so vw-based sizes have
     to be divided by it — otherwise the headline grows past the
     viewport and pushes the layout apart. */
  html[data-theme="brutal"] h1{font-weight:900;font-size:clamp(34px,7vw,104px);letter-spacing:-.055em;line-height:.86;text-transform:uppercase}
  html[data-theme="brutal"] h1 em{color:var(--acid);text-shadow:6px 6px 0 var(--ink)}
  html[data-theme="brutal"] .eyebrow{color:var(--ink);font-weight:700}
  html[data-theme="brutal"] .eyebrow::before{background:var(--ink);height:3px}
  html[data-theme="brutal"] .lede{color:var(--ink);max-width:52ch}
  html[data-theme="brutal"] .btn{border-width:3px;border-color:var(--ink);border-radius:0;font-weight:700;background:var(--panel);box-shadow:4px 4px 0 var(--ink)}
  html[data-theme="brutal"] .btn:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
  html[data-theme="brutal"] .btn.acid{background:var(--acid);color:#fff}
  html[data-theme="brutal"] .vitals{gap:0}
  html[data-theme="brutal"] .vit{border:3px solid var(--ink);background:var(--panel);box-shadow:6px 6px 0 var(--ink)}
  html[data-theme="brutal"] .vit::before{display:none}
  html[data-theme="brutal"] .vit .v{font-size:clamp(26px,3.4vw,46px);font-weight:900}
  html[data-theme="brutal"] .strip{border:3px solid var(--ink);background:var(--acid);color:var(--ink);font-weight:700}
  html[data-theme="brutal"] .strip-track .sep{color:var(--ink);opacity:1}
  html[data-theme="brutal"] .section-head h2{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(19px,2.6vw,34px)}
  html[data-theme="brutal"] .section-head h2 b{color:var(--acid);-webkit-text-stroke:1px var(--ink)}
  html[data-theme="brutal"] .grid{gap:18px}
  html[data-theme="brutal"] .card{border:3px solid var(--ink);background:var(--panel);box-shadow:8px 8px 0 var(--ink);padding:20px}
  html[data-theme="brutal"] .card::before{display:none}
  html[data-theme="brutal"] .card:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink)}
  html[data-theme="brutal"] .card .headline{font-weight:900;text-transform:uppercase}
  html[data-theme="brutal"] .badge{border:2px solid var(--ink);font-weight:700}
  html[data-theme="brutal"] .bar{height:10px;border:2px solid var(--ink);background:transparent}
  html[data-theme="brutal"] .bar>i{background:var(--acid)}
  html[data-theme="brutal"] .trace{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
  html[data-theme="brutal"] .kv{background:transparent;border:2px solid var(--ink)}
  html[data-theme="brutal"] .kv>div{background:var(--panel)}
  html[data-theme="brutal"] .footer{border-top:4px solid var(--ink);color:var(--ink)}
  html[data-theme="brutal"] .beast-dialog{border:3px solid var(--ink);border-radius:0;box-shadow:10px 10px 0 var(--ink)}
  html[data-theme="brutal"] .beast-dialog *{border-radius:0!important}

/* ── DEPTH: everything floats, glass and layers ────────────────── */
  html[data-theme="depth"]{
    --bg:#060910;--bg2:#0a1018;--panel:rgba(20,30,48,.55);--panel2:rgba(14,22,38,.42);
    --line:rgba(140,190,255,.14);--line2:rgba(140,190,255,.3);--ink:#eaf4ff;--muted:#a3bcd8;--dim:#7d95b0;
    --acid:#7df9ff;--acid2:#3ad6e8;--acid-soft:rgba(125,249,255,.16);
    --ice:#b78bff;--ice-soft:rgba(183,139,255,.14);--teal:#5fffc4;
    --warn:#ffc46b;--red:#ff6b8a;--violet:#c9a0ff;
    --gap:clamp(14px,1.4vw,24px);
  }
  html[data-theme="depth"] body{background:#060910}
  html[data-theme="depth"] body::before{
    background:
      radial-gradient(900px 500px at 15% 0%,rgba(125,249,255,.14),transparent 60%),
      radial-gradient(800px 600px at 90% 100%,rgba(183,139,255,.13),transparent 62%),
      radial-gradient(600px 400px at 50% 40%,rgba(95,255,196,.06),transparent 70%);
  }
  html[data-theme="depth"] body::after{
    background-image:linear-gradient(rgba(125,249,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(125,249,255,.05) 1px,transparent 1px);
    background-size:64px 64px;mask-image:none;animation:none;opacity:.5;
  }
  html[data-theme="depth"] .top{background:rgba(10,16,24,.62);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid var(--line)}
  html[data-theme="depth"] .hero{padding-top:clamp(60px,9vw,120px)}
  html[data-theme="depth"] h1{font-weight:300;letter-spacing:-.03em;line-height:.95}
  html[data-theme="depth"] h1 em{
    background:linear-gradient(100deg,var(--acid),var(--ice) 45%,var(--teal));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:none;
  }
  html[data-theme="depth"] .vit,html[data-theme="depth"] .card{
    background:var(--panel);backdrop-filter:blur(18px) saturate(140%);
    border:1px solid var(--line);border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  }
  html[data-theme="depth"] .vit:hover,html[data-theme="depth"] .card:hover{
    border-color:rgba(125,249,255,.34);
    box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 0 1px rgba(125,249,255,.16),inset 0 1px 0 rgba(255,255,255,.09);
    transform:translateY(-4px);
  }
  html[data-theme="depth"] .vit::before,html[data-theme="depth"] .card::before{
    background:linear-gradient(140deg,rgba(125,249,255,.09),transparent 46%);
  }
  html[data-theme="depth"] .strip{background:rgba(10,16,24,.5);backdrop-filter:blur(14px);border-radius:14px;margin:22px 0 0;border:1px solid var(--line)}
  html[data-theme="depth"] .trace{background:var(--panel);backdrop-filter:blur(18px);border-radius:18px;border:1px solid var(--line)}
  html[data-theme="depth"] .panel,html[data-theme="depth"] .beast-dialog{
    background:var(--panel);backdrop-filter:blur(22px) saturate(150%);
    border:1px solid var(--line);border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  }
  html[data-theme="depth"] .btn{background:rgba(20,30,48,.5);backdrop-filter:blur(12px);border-radius:11px;border-color:var(--line2)}
  html[data-theme="depth"] .btn.acid{background:rgba(125,249,255,.14);color:var(--acid)}
  html[data-theme="depth"] .badge{border-radius:9px;background:rgba(255,255,255,.04)}
  html[data-theme="depth"] .kv>div,html[data-theme="depth"] .bar{background:rgba(255,255,255,.02)}
  html[data-theme="depth"] .section-head h2{font-weight:300;letter-spacing:-.02em}

/* ── GRID: everything is a grid, like a schematic ──────────────── */
  html[data-theme="grid"]{
    --bg:#04070a;--bg2:#070c12;--panel:rgba(8,14,20,.72);--panel2:rgba(10,18,26,.6);
    --line:#123040;--line2:#1d4a61;--ink:#dff2ff;--muted:#7fa8bf;--dim:#5b8095;
    --acid:#00e5ff;--acid2:#00b4d8;--acid-soft:rgba(0,229,255,.13);
    --ice:#7c6bff;--ice-soft:rgba(124,107,255,.12);--teal:#2ee6a8;
    --warn:#ffb03d;--red:#ff5470;--violet:#c07bff;
    --gap:clamp(10px,1vw,18px);
  }
  html[data-theme="grid"] body::before{display:none}
  html[data-theme="grid"] body::after{
    background-image:
      linear-gradient(rgba(0,229,255,.13) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,229,255,.13) 1px,transparent 1px),
      linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px);
    background-size:120px 120px,120px 120px,24px 24px,24px 24px;
    mask-image:none;animation:none;opacity:.85;
  }
  html[data-theme="grid"] .wrap{width:min(1400px,100%)}
  html[data-theme="grid"] .card,html[data-theme="grid"] .vit{
    border:1px solid var(--line2);
    background-image:
      linear-gradient(rgba(0,229,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,229,255,.045) 1px,transparent 1px);
    background-size:16px 16px;
    box-shadow:inset 0 0 0 1px rgba(0,229,255,.05);
  }
  html[data-theme="grid"] .card::after,html[data-theme="grid"] .vit::after{
    content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;
    border-right:1px solid var(--acid);border-bottom:1px solid var(--acid);
  }
  html[data-theme="grid"] .card::before,html[data-theme="grid"] .vit::before{display:none}
  html[data-theme="grid"] .card header h3{border-bottom:1px dashed var(--line2);padding-bottom:6px}
  html[data-theme="grid"] .card .headline{color:var(--acid);text-shadow:0 0 18px rgba(0,229,255,.35)}
  html[data-theme="grid"] .kv{gap:1px;background:var(--line);border:1px solid var(--line)}
  html[data-theme="grid"] .kv>div{background:#060a0e}
  html[data-theme="grid"] .section-head h2 b{color:var(--acid)}
  html[data-theme="grid"] .trace{border-color:var(--line2)}
  html[data-theme="grid"] .glyph{border-color:var(--acid);box-shadow:0 0 22px rgba(0,229,255,.28)}
  html[data-theme="grid"] .btn{border-color:var(--line2)}
  html[data-theme="grid"] .badge{background:rgba(0,229,255,.06)}

/* ── v4 settings redesign ─────────────────────────────────────── */
  .settings-dialog{width:min(620px,100%)}
  .set-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:rgba(5,8,7,.4);position:sticky;top:0;z-index:1;overflow-x:auto;scrollbar-width:none}
  .set-tabs::-webkit-scrollbar{display:none}
  .set-tab{all:unset;cursor:pointer;padding:12px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border-bottom:2px solid transparent;white-space:nowrap;transition:.18s}
  .set-tab:hover{color:var(--muted)}
  .set-tab.on{color:var(--acid);border-bottom-color:var(--acid)}
  .set-tab:focus-visible{outline:1px solid var(--acid);outline-offset:-2px}
  .set-pane{display:none}
  .set-pane.on{display:block;animation:paneIn .26s cubic-bezier(.2,.8,.2,1) both}
  @keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .seg.wide{display:flex;width:100%}
  .seg.wide button{flex:1 1 0;text-align:center}
  .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-custom{grid-column:span 2}
  .theme-swatch{position:relative}
  .theme-swatch .tdesc{display:block;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--dim);letter-spacing:.02em;text-transform:none}
  .theme-swatch.on .tdesc{color:var(--muted)}
  .set-note{font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--dim);margin:12px 0 0;letter-spacing:.02em}
  .play-grid{grid-template-columns:1fr 1fr}
  @media(max-width:560px){
    .play-grid{grid-template-columns:1fr}
    .set-tab{padding:11px 12px;font-size:10px}
  }

/* ═══════════════════════════════════════════════════════════════
   Brutal theme — legibility pass
   The base stylesheet paints the inner surfaces with dark translucent
   fills. On a light theme those fills stay dark, so the text on them
   (which is still the light-theme ink) becomes unreadable. Every
   surface gets an explicit light fill here.
   ═══════════════════════════════════════════════════════════════ */
  html[data-theme="brutal"] .strip{background:var(--acid);color:var(--ink)}
  html[data-theme="brutal"] .strip-track{color:var(--ink)}
  html[data-theme="brutal"] .strip-track b{color:var(--ink)}
  html[data-theme="brutal"] .strip-track .sep{color:var(--ink);opacity:.55}
  html[data-theme="brutal"] .disp{background:var(--panel);border:2px solid var(--ink)}
  html[data-theme="brutal"] .disp .nm{color:var(--ink)}
  html[data-theme="brutal"] .disp .nm small{color:var(--muted)}
  html[data-theme="brutal"] .disp .nm small:hover{color:var(--ink)}
  html[data-theme="brutal"] .disp .badge{background:var(--panel);border-color:var(--ink);color:var(--ink)}
  html[data-theme="brutal"] .disp .badge.acid{background:var(--acid);color:#fff;border-color:var(--ink)}
  html[data-theme="brutal"] .disp .badge.ice{background:var(--ice);color:var(--ink);border-color:var(--ink)}
  html[data-theme="brutal"] .disp .badge.ok{background:var(--teal);color:var(--ink);border-color:var(--ink)}
  html[data-theme="brutal"] .li{background:var(--panel)}
  html[data-theme="brutal"] .li .nm{color:var(--ink)}
  html[data-theme="brutal"] .li .nm small{color:var(--muted)}
  html[data-theme="brutal"] .li .vl{color:var(--muted)}
  html[data-theme="brutal"] .li .vl b{color:var(--ink)}
  html[data-theme="brutal"] .li .vl em{color:var(--muted)}
  html[data-theme="brutal"] .kv>div{background:var(--panel)}
  html[data-theme="brutal"] .kv .v{color:var(--ink)}
  html[data-theme="brutal"] .kv .k{color:var(--muted)}
  html[data-theme="brutal"] .disp-map{background:#e6e2d8}
  html[data-theme="brutal"] .fan{background:var(--panel)}
  html[data-theme="brutal"] .fan .info b{color:var(--ink)}
  html[data-theme="brutal"] .fan .info span{color:var(--muted)}
  html[data-theme="brutal"] .badge{background:var(--panel);color:var(--ink);border-color:var(--ink)}
  html[data-theme="brutal"] .badge.acid{background:var(--acid);color:#fff}
  html[data-theme="brutal"] .badge.ice{background:var(--ice);color:var(--ink)}
  html[data-theme="brutal"] .badge.ok{background:var(--teal);color:var(--ink)}
  html[data-theme="brutal"] .badge.warn{background:var(--warn);color:var(--ink)}
  html[data-theme="brutal"] .badge.bad{background:var(--red);color:#fff}
  html[data-theme="brutal"] .card .sub,html[data-theme="brutal"] .card header span,
  html[data-theme="brutal"] .kv .k,html[data-theme="brutal"] .vit .k,
  html[data-theme="brutal"] .vit .s,html[data-theme="brutal"] .section-head span{color:var(--muted)}
  html[data-theme="brutal"] .card header h3 b{color:var(--muted)}
  html[data-theme="brutal"] .trace header span{color:var(--muted)}
  html[data-theme="brutal"] .lede{color:var(--ink)}
  html[data-theme="brutal"] .lede b{color:var(--ink)}
  html[data-theme="brutal"] .hero-meta .badge{background:var(--panel)}
  html[data-theme="brutal"] .top .live{background:var(--panel)}
  html[data-theme="brutal"] .top .btn{background:var(--panel)}
  html[data-theme="brutal"] .top .btn.acid{background:var(--acid);color:#fff}
  html[data-theme="brutal"] .footer{color:var(--muted)}
  html[data-theme="brutal"] .footer b{color:var(--ink)}
  html[data-theme="brutal"] .egg-pill{background:var(--panel);color:var(--ink)}
  html[data-theme="brutal"] .sbar .sl{color:var(--muted)}
  html[data-theme="brutal"] .sbar .sv{color:var(--ink)}
  html[data-theme="brutal"] .sbar .sv small{color:var(--muted)}
  html[data-theme="brutal"] .note-inline{color:var(--muted);border-top-color:var(--ink)}
  html[data-theme="brutal"] .note-inline b{color:var(--ink)}
  html[data-theme="brutal"] .chiprow .badge{background:var(--panel)}
  html[data-theme="brutal"] .egg-card{background:var(--panel)}
  html[data-theme="brutal"] .egg-card .nm{color:var(--ink)}
  html[data-theme="brutal"] .egg-card .tx{color:var(--muted)}
  html[data-theme="brutal"] .egg-card .idx{color:var(--muted)}
  html[data-theme="brutal"] .beast-dialog{background:var(--panel);color:var(--ink)}
  html[data-theme="brutal"] .beast-dialog h3,
  html[data-theme="brutal"] .beast-dialog h2{color:var(--ink)}
  html[data-theme="brutal"] .set-card{background:var(--panel)}
  html[data-theme="brutal"] .set-row .lbl b{color:var(--ink)}
  html[data-theme="brutal"] .set-row .lbl span{color:var(--muted)}
  html[data-theme="brutal"] .seg{background:var(--panel)}
  html[data-theme="brutal"] .seg button{color:var(--muted)}
  html[data-theme="brutal"] .seg button.on{background:var(--acid);color:#fff}
  html[data-theme="brutal"] .theme-swatch{background:var(--panel)}
  html[data-theme="brutal"] .theme-swatch b{color:var(--ink)}
  html[data-theme="brutal"] .play-tile{background:var(--panel)}
  html[data-theme="brutal"] .play-tile b{color:var(--acid)}
  html[data-theme="brutal"] .play-tile span{color:var(--muted)}
  html[data-theme="brutal"] .set-action{background:var(--panel);color:var(--muted)}
  html[data-theme="brutal"] .labtab{background:var(--panel);color:var(--muted)}
  html[data-theme="brutal"] .labbtn{background:var(--panel);color:var(--muted)}
  html[data-theme="brutal"] .labfeed{background:#e6e2d8;color:var(--muted)}
  html[data-theme="brutal"] .lab-intro{background:var(--panel)}
  html[data-theme="brutal"] .lab-intro-main p{color:var(--ink)}
  html[data-theme="brutal"] .lab-intro-main .labnote{color:var(--muted)}
  html[data-theme="brutal"] .lab-intro-grid .chip{background:var(--panel)}
  html[data-theme="brutal"] .lab-intro-grid .chip b{color:var(--acid)}
  html[data-theme="brutal"] .lab-intro-grid .chip span{color:var(--muted)}
  html[data-theme="brutal"] .ach-wrap{background:var(--panel)}
  html[data-theme="brutal"] .ach span{background:var(--panel);color:var(--muted)}
  html[data-theme="brutal"] .ach span.on{border-color:var(--acid);color:var(--acid)}

  /* A table for slices that are arrays of records — the display list
     reads far better as rows than as a wall of key/value pairs. */
  .fact-table{display:flex;flex-direction:column;font-family:var(--mono);font-size:11px;border:1px solid var(--line);overflow-x:auto}
  .fact-table .ft-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);gap:12px;padding:7px 11px;border-bottom:1px solid rgba(29,43,34,.5);align-items:baseline;min-width:max-content}
  .fact-table .ft-row:last-child{border-bottom:0}
  .fact-table .ft-row:not(.ft-head):hover{background:rgba(214,255,63,.035)}
  .fact-table .ft-head{color:var(--dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase;position:sticky;top:0;background:#080d0a;z-index:1}
  .fact-table .ft-head span:first-child{color:var(--acid)}
  .fact-table .ft-idx{color:var(--dim);min-width:26px!important}
  .fact-table .ft-na{color:var(--dim)}

  /* The dot that leads to nowhere. Almost invisible, but it breathes. */
  #nullDot{
    position:fixed;left:50%;bottom:26vh;z-index:20;
    width:7px;height:7px;border-radius:50%;
    background:var(--acid);opacity:.16;
    cursor:pointer;transition:transform .2s;
  }
  #nullDot:hover{transform:scale(2.4);opacity:.9}
  #nullDot[hidden]{display:none}

  /* Fan bars: RPM per fan, scaled against the fastest one, with a
     spinner that turns at a rate following the real RPM. */
  .fanbars{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .fanbar{display:grid;grid-template-columns:30px 84px 1fr 68px 38px;gap:9px;align-items:center}
  .fanbar-blades{
    position:relative;width:26px;height:26px;border-radius:50%;flex:0 0 26px;
    border:1px solid var(--line2);
    background:
      radial-gradient(circle at 50% 50%,#0d1711 0 28%,transparent 29%),
      repeating-conic-gradient(from 0deg,var(--acid) 0 12deg,rgba(214,255,63,.08) 12deg 45deg);
    animation:fanSpin var(--spin,1.2s) linear infinite;
    box-shadow:0 0 12px rgba(214,255,63,.08);
  }
  .fanbar-blades::after{
    content:"";position:absolute;inset:42%;border-radius:50%;
    background:var(--acid);box-shadow:0 0 6px var(--acid);
  }
  .fanbar:not(.on) .fanbar-blades{animation:none;opacity:.32}
  @keyframes fanSpin{to{transform:rotate(360deg)}}
  .fanbar .fb-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fanbar .fb-l small{display:block;font-size:9px;letter-spacing:.1em;color:var(--dim);opacity:.7}
  .fanbar .fb-bar{height:6px;background:#131f17;position:relative;overflow:hidden}
  .fanbar .fb-bar i{position:absolute;inset:0 auto 0 0;background:var(--teal);transition:width .7s cubic-bezier(.2,.8,.2,1)}
  .fanbar.on .fb-bar i{background:linear-gradient(90deg,var(--teal),var(--acid))}
  .fanbar .fb-v{font-family:var(--mono);font-size:11px;color:var(--ink);text-align:right;white-space:nowrap}
  .fanbar:not(.on) .fb-v{color:var(--dim)}
  .fanbar .fb-d{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-align:right;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   Terminal — a live readout of the same data the page renders
   ═══════════════════════════════════════════════════════════════ */
  .terminal{
    position:relative;z-index:2;margin:30px 0 0;
    border:1px solid var(--line2);background:rgba(4,7,5,.9);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
  }
  .term-head{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);background:rgba(8,13,10,.9)}
  .term-dots{display:flex;gap:6px}
  .term-dots i{width:9px;height:9px;border-radius:50%;background:var(--line2);display:block}
  .term-dots i:nth-child(1){background:#ff5f57}
  .term-dots i:nth-child(2){background:#febc2e}
  .term-dots i:nth-child(3){background:#28c840}
  .term-title{flex:1;min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .term-clear{all:unset;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:3px 9px;transition:.2s}
  .term-clear:hover,.term-clear:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}
  .term-out{
    height:clamp(190px,26vh,280px);overflow-y:auto;padding:14px 16px;
    font-family:var(--mono);font-size:12px;line-height:1.75;
    scrollbar-width:thin;scrollbar-color:#2a3a2e transparent;
  }
  .term-out .tblock{margin-bottom:2px}
  .term-out .tcmd{margin-top:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .tprompt{color:var(--teal);white-space:nowrap}
  .tsigil{color:var(--acid);font-weight:700}
  .tinput{color:var(--ink)}
  .thead{margin:8px 0 3px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acid)}
  .tline{color:var(--muted)}
  .thint{display:block;margin-top:8px;color:var(--dim);font-size:11px;letter-spacing:.02em}
  .terr{color:var(--red)}
  .trow{display:flex;gap:14px;align-items:baseline;padding:1px 0}
  .trow .tk{flex:0 0 108px;color:var(--dim);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trow .tv{flex:1;min-width:0;color:var(--ink);word-break:break-word}
  .trow.cur .tk{color:var(--acid)}
  .trow .tv b{color:var(--acid);font-weight:500}
  .tbar{display:inline-block;width:74px;height:5px;background:#131f17;position:relative;overflow:hidden;vertical-align:middle;margin-left:8px}
  .tbar i{position:absolute;inset:0 auto 0 0;transition:width .6s}
  .tbadge{display:inline-block;padding:1px 7px;border:1px solid currentColor;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
  .tbadge.ok{color:var(--teal)}
  .tbadge.warn{color:var(--warn)}
  .tcores{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px;margin-top:6px}
  .tcore{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;font-size:11px}
  .tcore .tcn{color:var(--dim);font-size:10.5px}
  .tcore .tct{color:var(--muted);font-size:10.5px}
  .tjson{margin:6px 0 0;padding:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);font-size:10.5px;line-height:1.6;color:var(--muted);white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto}
  .term-in{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--line);background:rgba(8,13,10,.95)}
  .term-in input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font-family:var(--mono);font-size:12px;padding:0}
  .term-in input:focus{outline:none}
  .term-in input::placeholder{color:var(--dim)}
  @media(max-width:720px){
    .term-out{height:clamp(160px,24vh,220px)}
    .trow .tk{flex:0 0 84px}
    .tbar{width:52px}
  }

  /* The data tab has no card to click, so it says how to dismiss. */
  .inspect-dismiss{
    margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);
  }

  /* The panel type badge: the most interesting fact about a display and
     not something EDID can tell you. */
  .badge.panel{background:rgba(183,139,255,.12);border-color:rgba(183,139,255,.4);color:var(--violet)}
  html[data-theme="brutal"] .badge.panel{background:var(--violet);color:#fff;border-color:var(--ink)}
  html[data-theme="mono"] .badge.panel{background:transparent;color:var(--violet);border-color:var(--violet)}