:root, html[data-theme="dark"]{
  --bg:#0c0d0b; --bg2:#13140f; --panel:#181a13; --panel2:#1f2118;
  --ink:#ece7d9; --muted:#a39e8d; --faint:#6f6b5d;
  --gold:#d8a23b; --clay:#c2603a; --line:#2c2e22;
  --hi:#d76b4b; --mod:#d8a23b; --lo:#7fae84;
  --bgrad1:rgba(216,162,59,.10); --bgrad2:rgba(194,96,58,.08);
  --ctlbg:rgba(12,13,11,.92); --classbg:#3a2a0c; --classink:#f1d99a; --classline:#5a430f;
}
html[data-theme="light"]{
  --bg:#f4f1e7; --bg2:#fbf9f1; --panel:#fffdf6; --panel2:#efece0;
  --ink:#211f18; --muted:#5b5749; --faint:#8a8573;
  --gold:#9a7414; --clay:#a8492334; --line:#dcd6c4;
  --clay:#a84923;
  --hi:#b8472a; --mod:#9a7414; --lo:#3f7a48;
  --bgrad1:rgba(154,116,20,.10); --bgrad2:rgba(168,73,35,.07);
  --ctlbg:rgba(251,249,241,.92); --classbg:#e8d9ad; --classink:#5a430f; --classline:#cbb87e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
    radial-gradient(1200px 600px at 80% -5%, var(--bgrad1), transparent 60%),
    radial-gradient(900px 500px at -10% 15%, var(--bgrad2), transparent 55%),
    var(--bg);
  color:var(--ink);font-family:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-size:15.5px;transition:background .25s,color .25s;}
:root{--display:'Cormorant Garamond',Georgia,serif;--body:'Hanken Grotesk',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;}
a{color:var(--gold)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 80px}
.classbar{position:sticky;top:0;z-index:50;background:var(--classbg);color:var(--classink);
  text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  padding:6px 8px;border-bottom:1px solid var(--classline);text-transform:uppercase}
.hero{padding:56px 0 28px;border-bottom:1px solid var(--line);position:relative}
.eyebrow{font-family:var(--mono);color:var(--gold);letter-spacing:.32em;font-size:12px;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;margin:.1em 0 .15em;letter-spacing:.01em}
.hero h1 .thin{color:var(--gold);font-style:italic;font-weight:500}
.hero .sub{color:var(--muted);font-size:1.05rem;max-width:64ch}
.hero .meta-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.hero .meta-row b{color:var(--muted);font-weight:500}
.env{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin:30px 0 8px}
.env .card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.env h3{font-family:var(--display);font-size:1.5rem;font-weight:600;margin:0 0 .5rem;color:var(--gold)}
.env p{color:var(--muted);margin:.3rem 0}
.env ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--muted)}
.env li{margin:.28rem 0}
.env .rmh-note{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:14px;border-top:1px dashed var(--line);padding-top:12px;line-height:1.5}
.controls{position:sticky;top:31px;z-index:40;background:var(--ctlbg);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:26px 0 22px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ctl-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.search input{flex:1;background:none;border:none;color:var(--ink);font-family:var(--body);font-size:14.5px;outline:none}
.search .mag{color:var(--faint)}
.btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.gold{background:linear-gradient(180deg,#e7b34c,#c98a26);color:#1a1405;border-color:#e7b34c;font-weight:700}
.btn.gold:hover{filter:brightness(1.08);color:#1a1405}
.btn.on{border-color:var(--lo);color:var(--lo)}
.fpills{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.fpill{font-family:var(--mono);font-size:11px;letter-spacing:.05em;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:5px 12px;cursor:pointer}
.fpill.active{background:var(--gold);color:#1a1405;border-color:var(--gold);font-weight:700}
/* Collapsible filter cloud: once a tag is picked the list folds to the active
   pill + this toggle, lifting the matching scenarios into view. */
.fpill-toggle{order:-1;font-family:var(--mono);font-size:11px;letter-spacing:.05em;background:transparent;color:var(--gold);border:1px dashed var(--gold);border-radius:20px;padding:5px 12px;cursor:pointer}
.fpill-toggle:hover{background:rgba(216,162,59,.12)}
.fpill-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fpills.collapsed .fpill:not(.active){display:none}
.scenario{scroll-margin-top:120px}
.ctl-opts{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ctl-opts label{display:flex;gap:7px;align-items:center;cursor:pointer}
.ctl-opts input{accent-color:var(--gold)}
.index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.idx-link{font-family:var(--body);font-size:12.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer;transition:.15s}
.idx-link:hover{border-color:var(--gold);color:var(--ink)}
.idx-link .mono{color:var(--gold);margin-right:6px}
.scenario{border:1px solid var(--line);border-radius:16px;margin:0 0 18px;overflow:hidden;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.sc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;user-select:none;background:linear-gradient(180deg, rgba(216,162,59,.06), transparent)}
.sc-head:hover{background:linear-gradient(180deg, rgba(216,162,59,.11), transparent)}
.sc-head-main{display:flex;gap:18px;align-items:flex-start}
.sc-num{font-size:1.9rem;color:var(--gold);font-weight:700;line-height:1;opacity:.85;border-right:2px solid var(--line);padding-right:16px}
.sc-op{font-size:10.5px;letter-spacing:.2em;color:var(--clay);text-transform:uppercase}
.sc-title{font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1.08;margin:.12em 0 .3em}
.sc-tags{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.sc-head-side{display:flex;align-items:center;gap:14px;text-align:right;min-width:0}
.rmh{font-size:10px;color:var(--faint);max-width:240px;line-height:1.45;letter-spacing:.04em}
.sc-caret,.q-caret{transition:transform .2s;color:var(--gold);font-size:1.1rem}
.scenario.collapsed .sc-caret{transform:rotate(-90deg)}
.sc-body{padding:6px 22px 24px;border-top:1px solid var(--line)}
.scenario.collapsed .sc-body{display:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.block{margin:18px 0}
.bh{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.bh-note{color:var(--faint);text-transform:none;letter-spacing:.02em;font-size:10px}
.lead{color:var(--gold);font-weight:600}
.block p{margin:.4rem 0;color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl td,.tbl th{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cell-key{color:var(--muted);white-space:nowrap;font-weight:600}
.tbl .mono{color:var(--gold)}
.diff td:first-child{font-weight:600;color:var(--ink)}
.lk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:5px}
.lk-high{background:rgba(215,107,75,.18);color:var(--hi);border:1px solid rgba(215,107,75,.4)}
.lk-mod{background:rgba(216,162,59,.16);color:var(--mod);border:1px solid rgba(216,162,59,.4)}
.lk-low{background:rgba(127,174,132,.14);color:var(--lo);border:1px solid rgba(127,174,132,.35)}
.diff-wrap{position:relative}
.reveal-btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--panel2);color:var(--clay);border:1px dashed var(--clay);border-radius:9px;padding:10px 15px;cursor:pointer;transition:.15s;display:inline-flex;gap:8px;align-items:center}
.reveal-btn:hover{background:rgba(216,162,59,.08);color:var(--gold);border-color:var(--gold)}
.rb-eye{font-size:13px}
.diff-hidden{display:none}
.diff-hidden.revealed{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.vital{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.vital-label{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.vital-val{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-top:2px}
.qblock .qa{border:1px solid var(--line);border-radius:11px;margin:.5rem 0;overflow:hidden;background:var(--panel)}
.q-toggle{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;cursor:pointer;background:none;border:none;color:var(--ink);font-family:var(--body);font-size:14.5px;padding:13px 15px}
.q-toggle:hover{background:rgba(216,162,59,.06)}
.q-num{color:var(--clay);font-weight:700;font-size:12px;padding-top:2px}
.q-text{flex:1}
.answer{display:none;padding:0 16px 15px 44px;color:var(--ink);font-size:14px;border-top:1px solid var(--line);background:rgba(127,174,132,.05)}
.answer.show{display:block}
.ans-tag{display:inline-block;font-size:9.5px;letter-spacing:.14em;color:var(--lo);background:rgba(127,174,132,.12);border:1px solid rgba(127,174,132,.3);border-radius:5px;padding:2px 8px;margin:12px 0 8px}
.qa.open .q-caret{transform:rotate(180deg)}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:6px 0 6px 26px;border-bottom:1px solid var(--line);color:var(--ink);font-size:13.8px}
.checklist li:before{content:"\25B8";position:absolute;left:4px;color:var(--gold)}
.pearls{margin:0;padding-left:1.15rem;color:var(--ink)}
.pearls li{margin:.4rem 0;font-size:13.8px}
.resolution{background:linear-gradient(180deg,rgba(194,96,58,.07),transparent);border:1px solid var(--line);border-radius:12px;padding:6px 18px 14px}
.resolution .bh{color:var(--clay)}
.refs{margin-top:46px;border-top:2px solid var(--line);padding-top:30px}
.refs-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.refs h2{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--gold);margin:0}
.refs .disc{color:var(--faint);font-family:var(--mono);font-size:11px;margin:8px 0 0;letter-spacing:.04em;max-width:70ch}
.refs-body{display:none;margin-top:22px}
.refs-body.open{display:block;animation:fade .25s ease}
.ref-block{margin:0 0 18px}
.ref-block h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin:0 0 .4rem}
.ref-block ul{margin:0;padding-left:1.1rem}
.ref-block li{margin:.35rem 0;color:var(--muted);font-size:13px;line-height:1.5}
.ref-block a{word-break:break-all;font-size:12px}
.footer{margin-top:40px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.8}
.noresult{display:none;text-align:center;color:var(--muted);padding:40px;font-style:italic}
@media print{
  html[data-theme="light"],html[data-theme="dark"]{--bg:#fff;--bg2:#fff;--panel:#fff;--panel2:#fff;--ink:#111;--muted:#333;--faint:#666;--line:#bbb;--gold:#8a6a12;--clay:#9c4a25}
  body{background:#fff !important;color:#111;font-size:10.5pt}
  .classbar{position:static;color:#7a5a10;background:#fff;border-bottom:1px solid #999}
  .controls,.index,.idx-link,.sc-caret,.q-caret,.reveal-btn,.fpill-toggle{display:none !important}
  .fpills.collapsed .fpill{display:inline-block !important}
  .hero{padding:8px 0}.hero h1{font-size:26pt}
  .scenario{break-inside:avoid;border:1px solid #999;margin-bottom:10pt;background:#fff !important}
  .sc-body{display:block !important}.scenario.collapsed .sc-body{display:block !important}
  .diff-hidden{display:block !important}
  .answer{display:block !important;background:#f3f6ef;color:#1c2a17;border:1px solid #cfe0c8;border-radius:6px;margin:4px 0;padding:6px 10px 8px 14px}
  body.hide-answers-print .answer{display:none !important}
  .refs-body{display:block !important}
  .vital-val{color:#111}a{color:#1a4d8a}.sc-head{background:#f3efe2}.wrap{max-width:none;padding:0 6px}
}
@media (max-width:760px){
  .env,.grid2{grid-template-columns:1fr}.controls{top:31px}
  .sc-head-side .rmh{display:none}.sc-num{font-size:1.4rem;padding-right:12px}.sc-title{font-size:1.4rem}
}

/* ===================================================================== */
/* SPM chrome — topbar, COCOM switcher, panels (added to the original)   */
/* ===================================================================== */
.spm-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 18px;background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
.spm-brand{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--gold);white-space:nowrap;display:flex;align-items:center;gap:8px}
.spm-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.spm-brand small{color:var(--faint);font-size:9.5px;letter-spacing:.18em;font-weight:500}
.cocom-seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.cocom-seg button{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:8px 15px;background:var(--panel2);color:var(--muted);border:none;cursor:pointer;transition:.15s}
.cocom-seg button:hover{color:var(--ink)}
.cocom-seg button.on{background:var(--gold);color:#1a1405;font-weight:700}
.spm-search{flex:1;min-width:170px;max-width:430px;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.spm-search input{flex:1;background:none;border:none;color:var(--ink);font-family:var(--body);font-size:14px;outline:none}
.spm-search .mag{color:var(--faint)}
.spm-tools{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-left:auto}
.spm-tools .btn{padding:8px 11px}
.cocom-panel{display:none}
.cocom-panel.active{display:block;animation:fade .25s ease}
.panel-controls{position:sticky;top:53px;z-index:30;background:var(--ctlbg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:18px 0;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.panel-controls .fpills{margin-top:0}
.footer a{color:var(--gold)}
@media(max-width:760px){ .spm-search{order:5;max-width:none;flex-basis:100%} .spm-tools{margin-left:0} }

/* ===== Hub-style top-right sound toggle (EQ bars when on, flat line off) ===== */
.sound-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:33px;padding:0;cursor:pointer;
  border-radius:9px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);transition:border-color .15s,color .15s}
.sound-toggle:hover{border-color:var(--gold);color:var(--ink)}
.snd-ico{width:27px;height:15px}
.snd-line{stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;opacity:1;transition:opacity .2s}
.snd-bars{opacity:0;transition:opacity .2s}
.snd-bars .b{fill:var(--gold);transform-box:fill-box;transform-origin:center;transform:scaleY(.4)}
.sound-toggle.on .snd-line{opacity:0}
.sound-toggle.on .snd-bars{opacity:1}
.sound-toggle.on .b{animation:eq .9s ease-in-out infinite}
.sound-toggle.on .b1{animation-delay:0s}.sound-toggle.on .b2{animation-delay:.18s}
.sound-toggle.on .b3{animation-delay:.36s}.sound-toggle.on .b4{animation-delay:.12s}.sound-toggle.on .b5{animation-delay:.28s}
@keyframes eq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .sound-toggle.on .b{animation:none;transform:scaleY(.8)} }