/* == main.css == */
/* == HyperAudio CSS — unified token-based layer == */
/* == STYLE BLOCK 1 (original) == */
/* == HyperAudio — monochrome "engine room" theme == */
:root{
--bg:#000;--surface:#0c0c0c;--elev:#121212;--deep:#050505;--bd:rgba(255,255,255,0.08);--bd2:rgba(255,255,255,0.15);--tx:#f4f4f4;
--tx2:#b0b0b0;--mut:#9a9a9a;--ctl:rgba(255,255,255,0.22);--grid:rgba(255,255,255,0.035);--glow:rgba(255,255,255,0.06);
--violet:#f4f4f4;--green:#e6e6e6;--blue:#cfcfcf;--amber:#bdbdbd;--err:#ff7a7a;--focus:#fff;--pri-bg:#fff;--pri-tx:#000;
--pri-hover:#e4e4e4;--hl:rgba(255,255,255,0.28);--panel-a:rgba(22,22,22,0.86);--panel-b:rgba(8,8,8,0.94);--s-harman:#c8c8c8;
--s-auto:#7a7a7a;--b1:#7c7c7c;--b2:#919191;--b3:#a6a6a6;--b4:#bbbbbb;--b5:#d0d0d0;--b6:#e5e5e5;--b7:#fafafa;--r1:8px;--r2:12px;
--r3:20px;--rc:16px;--r-xs:6px;--r-sm:9px;--r-md:12px;--r-lg:16px;--r-xl:20px;
--e1:inset 0 1px 0 color-mix(in srgb,var(--tx) 9%,transparent);
--e2:inset 0 1px 0 color-mix(in srgb,var(--tx) 11%,transparent),0 1px 2px rgba(0,0,0,0.45),0 8px 18px -12px rgba(0,0,0,0.8);
--e4:0 0 0 1px var(--bd2),0 24px 48px -20px rgba(0,0,0,0.85);--gap:16px;--cpad:20px;--pp:32px;
--sh:inset 0 1px 0 rgba(255,255,255,0.05),0 24px 60px -34px rgba(0,0,0,0.95);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
--s6:32px;--s7:48px;--f0:12px;--f1:14px;--f2:16px;--f3:clamp(18px,1.2vw + 12px,22px);--f4:clamp(38px,3.4vw + 20px,68px);
--t:0.2s ease;--sw:252px;--hh:64px;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

:root[data-theme="light"]{
--bg:#efeee9;--surface:#faf9f6;--elev:#f6f5f1;--deep:#f2f1ec;--bd:rgba(40,36,28,0.09);--bd2:rgba(40,36,28,0.16);--tx:#1c1b19;
--tx2:#4a4843;--mut:#5c5a55;--ctl:rgba(40,36,28,0.26);--grid:rgba(60,52,40,0.03);--glow:rgba(255,252,240,0.9);--violet:#1c1b19;
--green:#262521;--blue:#333;--amber:#4a4a4a;--err:#c0392b;--focus:#000;--pri-bg:#23221f;--pri-tx:#faf9f6;--pri-hover:#3a3934;
--hl:rgba(40,36,28,0.1);--panel-a:rgba(250,249,246,0.94);--panel-b:rgba(245,244,239,0.94);--s-harman:#3a3a3a;--s-auto:#8a8a8a;
--b1:#747474;--b2:#636363;--b3:#535353;--b4:#434343;--b5:#333;--b6:#232323;--b7:#111;
--sh:0 1px 2px rgba(40,36,28,0.04),0 18px 44px -30px rgba(40,36,28,0.22);--e1:inset 0 1px 0 rgba(255,255,255,0.9);
--e2:inset 0 1px 0 #fff,0 1px 2px rgba(40,36,28,0.07),0 6px 14px -8px rgba(40,36,28,0.18);
--e4:0 0 0 1px var(--bd2),0 20px 44px -18px rgba(40,36,28,0.3)}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 14px);-webkit-text-size-adjust:100%}

body{
margin:0;background-color:var(--bg);color:var(--tx);font:400 var(--f1) / 1.6 var(--sans);font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;background-size:50px 50px}

body::before{
content:"";position:fixed;inset:0;pointer-events:none;
background:radial-gradient( ellipse 70% 50% at 50% -5%,var(--glow),transparent 65% )}

::selection{background:var(--tx);color:var(--bg)}

h1,h2,h3,h4,p{margin:0}

code,pre,.mono{font-family:var(--mono)}

code{
font-size:0.86em;background:var(--deep);border:1px solid var(--bd2);border-radius:var(--r-xs);padding:1px 6px;
overflow-wrap:anywhere;color:var(--tx)}

a{color:var(--tx)}

svg.ic{flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

.btn:focus-visible,.ibtn:focus-visible,.seg button:focus-visible,.legend button:focus-visible{
outline-offset:3px;box-shadow:0 0 0 5px color-mix(in srgb,var(--bg) 100%,transparent)}

:focus:not(:focus-visible){outline:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
position:absolute;left:8px;top:-60px;background:var(--elev);padding:8px 12px;z-index:100;border:1px solid var(--bd2);
border-radius:var(--r-pill)}

.skip:focus{top:8px}

/* == header == */
header.top{
position:sticky;top:0;z-index:40;height:var(--hh);gap:var(--s3);padding-top:env(safe-area-inset-top);
background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px)}

.brand{display:flex;gap:12px;min-width:0;flex:none}

.logo{color:var(--tx)}

.brand b{font-size:17px;font-weight:800;letter-spacing:-0.035em;display:block;line-height:1.05}

.brand small{color:var(--mut);font:500 10px var(--mono);letter-spacing:0.14em;text-transform:uppercase}

.chips{margin-left:auto;display:flex;gap:var(--s2);align-items:center;min-width:0;flex:0 1 auto}

.chip{
display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd2);border-radius:var(--r-pill);
background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--tx2);font:500 10.5px var(--mono);letter-spacing:0.12em;
text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

.chip i{width:6px;height:6px;border-radius:50%;background:var(--tx);flex:none}

#hdrProfile{color:var(--tx)}

@keyframes ping{
0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tx) 55%,transparent)}
80%,100%{box-shadow:0 0 0 7px transparent}
}

#menuBtn{display:none}

/* == shell / nav == */
.shell{position:relative;grid-template-columns:var(--sw) minmax(0,1fr)}

nav.side{
position:sticky;top:var(--hh);height:calc(100vh - var(--hh));overflow:auto;border-right:1px solid var(--bd);
background:linear-gradient( 180deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 92%,transparent) )}

nav.side ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}

nav a{
display:flex;align-items:center;gap:12px;color:var(--tx2);text-decoration:none;border:1px solid transparent;transition:var(--t)}

nav a svg.ic{width:16px;height:16px;opacity:0.8}

nav a:hover{background:color-mix(in srgb,var(--tx) 4%,transparent);color:var(--tx)}

nav a[aria-current="true"]{
color:var(--tx);background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 8%,var(--surface)),var(--surface) )}

nav a[aria-current="true"] svg.ic{opacity:1}

.scrim{
position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:44;opacity:0;pointer-events:none;transition:var(--t);
backdrop-filter:blur(2px)}

.scrim.on{opacity:1;pointer-events:auto}

main{width:100%;gap:var(--s4)}

/* == panels == */
section.panel{
position:relative;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--bd);
border-radius:var(--r-xl);box-shadow:var(--sh);padding:var(--pp);min-width:0;animation:rise 0.7s cubic-bezier(0.2,0.8,0.2,1) both}

section.panel::before{
content:"";position:absolute;top:-1px;left:14%;right:14%;height:1px;
background:linear-gradient(90deg,transparent,var(--hl),transparent);pointer-events:none}

section.panel:nth-of-type(2){animation-delay:0.06s}

section.panel:nth-of-type(3){animation-delay:0.12s}

@keyframes rise{
from{opacity:0;transform:translateY(14px)}
}

#overview{
padding:var(--pp);
background:radial-gradient( ellipse 60% 80% at 85% 0%,var(--glow),transparent 60% ),linear-gradient(180deg,var(--panel-a),var(--panel-b))}

.eyebrow{font:500 10px/1.5 var(--mono);text-transform:uppercase;color:var(--mut)}

.badge{
display:inline-flex;align-items:center;gap:6px;font:500 10px var(--mono);letter-spacing:0.14em;text-transform:uppercase;
padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--bd2);color:var(--tx2);background:var(--elev);
white-space:nowrap}

.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0.8}

.b-v,.b-g{color:var(--tx)}

.b-a,.b-b{color:var(--tx2)}

.badge.act{background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg)}

/* == hero == */
.tag{
display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-pill);border:1px solid var(--bd2);background:var(--elev);
color:var(--tx2);font:500 10.5px var(--mono);letter-spacing:0.14em;text-transform:uppercase}

.tag i{width:6px;height:6px;border-radius:50%;background:var(--tx);animation:ping 2.2s infinite}

.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px}

.hero h1{font-size:var(--f4);font-weight:800;letter-spacing:-0.055em;line-height:0.95}

.hero h1 .dim{display:block}

.hero .lead{font-size:15px;line-height:1.6}

.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* == buttons == */
.btn{
min-width:0;overflow-wrap:anywhere;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:44px;padding:0 20px;border-radius:var(--r-pill);border:1px solid var(--ctl);
background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--tx);font:600 var(--f1) var(--sans);cursor:pointer;
transition:var(--t);text-align:center}

.btn svg.ic{width:16px;height:16px}

.btn:hover{border-color:color-mix(in srgb,var(--tx) 35%,transparent);background:var(--elev)}

.btn:disabled{opacity:0.6;cursor:progress}

.btn.pri{
background:var(--pri-bg);border-color:var(--pri-bg);color:var(--pri-tx);
box-shadow:0 8px 26px -12px color-mix(in srgb,var(--tx) 45%,transparent)}

.btn.pri:hover{background:var(--pri-hover);border-color:var(--pri-hover)}

.btn.sm{min-height:var(--hit);padding:0 var(--space-4);font-size:12.5px}

.btn[aria-busy="true"] svg.ic{animation:spin 1s linear infinite}

@keyframes spin{
to{transform:rotate(360deg)}
}

.btn[data-state="done"]{border-color:var(--tx);background:var(--elev);color:var(--tx)}

.btn[data-state="error"]{border-color:var(--err);color:var(--err)}

.btn.pri[data-state="done"]{background:var(--elev);color:var(--tx);border-color:var(--tx);box-shadow:none}

.btn.file{font:500 11.5px var(--mono);letter-spacing:-0.01em}

.st{
font:500 10px var(--mono);text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:6px;
min-height:22px}

.st svg.ic{width:13px;height:13px}

.st[data-state="busy"]{color:var(--tx2)}

.st[data-state="busy"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tx);animation:ping 1s infinite}

.st[data-state="done"]{color:var(--tx)}

.st[data-state="error"]{color:var(--err)}

/* == charts == */
.chartbox{position:relative;background:var(--deep);padding:10px;box-shadow:var(--e1)}

.chartbox svg{width:100%;touch-action:pan-y;font-family:var(--mono)}

.chartbox:focus-visible{outline-offset:1px}

.tip{
position:absolute;pointer-events:none;z-index:5;background:color-mix(in srgb,var(--surface) 92%,transparent);
backdrop-filter:blur(8px);font-size:var(--f0);box-shadow:var(--e4);display:none}

.tip b{display:block;margin-bottom:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase}

.tip div{display:flex;justify-content:space-between;gap:10px}

.tip div b{margin:0;letter-spacing:0;text-transform:none}

.tip i{display:inline-block;margin-right:6px}

.legend{display:flex;gap:6px;margin-top:12px}

.legend button{
display:inline-flex;align-items:center;gap:8px;background:var(--elev);border-radius:var(--r-pill);color:var(--tx2);
text-transform:uppercase;cursor:pointer;transition:var(--t)}

.legend button:hover{color:var(--tx)}

.legend svg{width:22px;height:8px}

.legend .chip{font-size:10px}

.note{font-size:var(--f0);color:var(--mut);margin-top:12px;display:flex;gap:8px;align-items:flex-start;line-height:1.55}

.note .ic{width:14px;height:14px;margin-top:2px}

/* == stats == */
.grid{display:grid;gap:var(--s3)}

.g-stat{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}

@media (min-width: 1180px){
.g-stat{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{flex-direction:column;gap:12px}
}

.stat{
position:relative;display:flex;gap:var(--s3);
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 3%,var(--surface)),var(--surface) );border:1px solid var(--bd);
border-radius:var(--r-md);min-width:0;transition:var(--t);overflow:hidden}

.stat::before{
content:"";position:absolute;top:0;left:18%;right:18%;height:1px;
background:linear-gradient(90deg,transparent,var(--hl),transparent)}

.stat:hover{border-color:var(--bd2)}

.stat > .ic{
width:30px;height:30px;padding:7px;border-radius:var(--r-sm);border:1px solid var(--bd2);background:var(--elev);color:var(--tx);
margin:0}

.stat dl{margin:0;min-width:0}

.stat dt{font:500 10px var(--mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--mut)}

.stat dd{margin:0}

.stat .v{font-weight:700;letter-spacing:-0.025em;line-height:1.25;margin:4px 0 3px;overflow-wrap:anywhere}

.stat .d{font-size:11.5px;color:var(--tx2);overflow-wrap:break-word;line-height:1.45}

/* == cards == */
.card{
position:relative;background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 2.5%,var(--surface)),var(--surface) );
border:1px solid var(--bd);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0;
transition:border-color 0.25s,box-shadow 0.25s}

.card:hover{border-color:var(--bd2)}

.card.sel::before{
content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,var(--tx),transparent)}

.card h3{font-size:16px;font-weight:700;letter-spacing:-0.02em;line-height:1.3}

.card .top{display:flex;gap:var(--s3);align-items:flex-start}

.card .top .badge{margin-left:auto;flex:none}

.badge[hidden]{display:none}

.fico{display:grid;place-items:center;flex:none}

.fico svg.ic{width:17px;height:17px}

.card .top > div{min-width:0}

.card p{color:var(--tx2);font-size:var(--f1);line-height:1.6}

.meta{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;font-size:12.5px;margin:0;padding-top:14px;
border-top:1px dashed var(--bd)}

.meta dt{font:500 10px var(--mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}

.meta dd{margin:0;font-weight:600;overflow-wrap:anywhere}

.meta > div{min-width:0}

.good{color:var(--tx)}

.good::before{content:"● ";font-size:9px;vertical-align:2px}

.off{color:var(--mut)}

details.pv{border-top:1px solid var(--bd);padding-top:var(--s2)}

details.pv summary{
cursor:pointer;display:flex;align-items:center;gap:6px;min-height:var(--hit);color:var(--tx2);font:500 10px var(--mono);
letter-spacing:0.12em;text-transform:uppercase;list-style:none}

details.pv summary::-webkit-details-marker{display:none}

details.pv summary svg{transition:var(--t)}

details[open].pv summary svg{transform:rotate(90deg)}

.code{
background:var(--deep);border:1px solid var(--bd);border-radius:var(--r-md);padding:16px;font:12.5px/1.7 var(--mono);
color:var(--tx2);overflow:auto;max-height:340px;white-space:pre;margin:0}

.code.wrap{white-space:pre-wrap;overflow-wrap:anywhere}

.code::-webkit-scrollbar{width:8px;height:8px}

.code::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:var(--r-pill)}

.cp{background:var(--deep);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden}

.cp header{
display:flex;align-items:center;gap:var(--s2);padding:12px 14px;
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 4%,var(--surface)),var(--surface) );
border-bottom:1px solid var(--bd)}

.cp header h3{font-size:13.5px;font-weight:700;letter-spacing:-0.01em}

.cp .code{border:0;border-radius:0}

.term .code{color:var(--tx2);max-height:none;padding:18px}

.term header h3{font:500 11.5px var(--mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--tx2)}

.t-ok{color:var(--mut)}

/* == tables == */
table{width:100%;border-collapse:collapse;font-size:var(--f1)}

th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--bd);vertical-align:top}

th{font:500 10px var(--mono);color:var(--mut);white-space:nowrap;background:color-mix(in srgb,var(--tx) 2%,transparent)}

#cmpTable td:last-child,#cmpTable th:last-child{background:color-mix(in srgb,var(--tx) 6%,transparent);color:var(--tx)}

#cmpTable th:last-child{color:var(--tx)}

#cmpTable tbody tr:last-child td{border-bottom:0}

tbody tr{transition:background 0.15s}

tbody tr:hover{background:color-mix(in srgb,var(--tx) 3%,transparent)}

.cards{display:none}

.seg{display:inline-flex;gap:2px;border:1px solid var(--ctl);border-radius:var(--r-pill);background:var(--surface);flex-wrap:wrap}

.seg button{
padding:0 var(--space-4);background:none;border:0;border-radius:var(--r-pill);color:var(--tx2);cursor:pointer;transition:var(--t)}

.seg button:hover{color:var(--tx)}

.seg button[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-tx);font-weight:600}

.chk{display:grid;place-items:center;width:40px;height:40px;margin:-8px -6px;cursor:pointer}

.cat{display:inline-flex;align-items:center;gap:7px}

.cat i{width:9px;height:9px;border-radius:3px;flex:none}

.chip .cat i{animation:none;box-shadow:none}

ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}

ol.steps li{
counter-increment:s;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s3);align-items:start;line-height:1.65}

ol.steps li::before{
content:counter(s,decimal-leading-zero);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
background:var(--elev);border:1px solid var(--bd2);font:600 10px var(--mono);color:var(--tx)}

.card.sel ol.steps li::before{background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg)}

ol.steps li > div{overflow-wrap:anywhere}

/* == toasts / footer == */
.toasts{
position:fixed;right:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom));z-index:60;display:grid;gap:var(--s2);
max-width:min(380px,calc(100vw - 32px))}

.toast{
display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
border:1px solid var(--bd2);box-shadow:var(--e4);animation:in 0.25s ease}

.toast svg.ic{width:22px;height:22px;padding:4px;background:var(--pri-bg);color:var(--pri-tx)}

.toast.err svg.ic{background:var(--err);color:#000}

@keyframes in{
from{opacity:0;transform:translateY(8px)}
}

/* == responsive == */
@media (max-width: 760px){}

@media (pointer: coarse){
.btn,.btn.sm,.legend button,.seg button,details.pv summary,.fbtn{min-height:var(--hit)}
.btn.sm[aria-label]{min-width:var(--hit)}
.chk{width:var(--hit);height:var(--hit)}
nav a{min-height:48px}
}

@media (max-width: 1180px){
:root{--pp:28px}
}

@media (max-width: 1023px){
.hero{grid-template-columns:minmax(0,1fr)}
}

@media (max-width: 900px){
.shell{grid-template-columns:minmax(0,1fr)}
#menuBtn{display:grid}
nav.side{
position:fixed;z-index:45;top:0;left:0;bottom:0;width:min(300px,86vw);height:auto;background:var(--bg);
transform:translateX(-102%);transition:transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
padding-top:calc(var(--s4) + env(safe-area-inset-top))}
nav.side.open{transform:none}
.chip.hp{display:none}
main{padding:var(--s5)}
}

@media (max-width: 760px){
main{padding:var(--s3);gap:var(--s3)}
section.panel,#overview{border-radius:var(--r-lg)}
.cp header{padding:12px}
.cp header h3{min-width:100%}
.legend button{flex:1 1 auto;justify-content:flex-start}
.cards{display:grid;gap:var(--s3)}
.chip{font-size:10px}
.brand small{display:none}
.hero .btn,.card .row .btn{flex:1 1 100%}
header.top{padding:0 var(--s3)}
}

@media (max-width: 480px){
:root{--pp:16px}
.hero h1{margin:16px 0 14px}
.seg button{flex:1 1 0;padding:0 8px}
.row > .btn.sm:not([aria-label]){flex:1 1 auto}
}

@media (max-width: 360px){
header.top{gap:var(--s2);padding:0 var(--s2)}
.brand b{font-size:17px}
#hdrProfile{max-width:118px}
.g-stat{grid-template-columns:1fr!important}
.stat{flex-direction:row!important}
main{padding:var(--s2)}
}

@media (max-width: 420px){
.meta{grid-template-columns:1fr}
.chip.hp{display:none}
.g-stat{gap:var(--s2)}
.stat{flex-direction:column;gap:8px;padding:var(--s3)}
.stat .v{font-size:var(--f1)}
.g-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
#hdrProfile{max-width:150px}
}

@media (prefers-reduced-motion: reduce){}

/* == v3 premium component layer == */
header.top{gap:16px;padding:0 24px}

.brand{text-decoration:none;color:var(--tx);gap:12px;align-items:center;border-radius:var(--r-md)}

.logo{
border-radius:var(--r-md);display:grid;place-items:center;
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 10%,var(--surface)),var(--surface) );border:1px solid var(--bd2);
box-shadow:var(--e1)}

.logo svg{width:22px;height:22px}

.chips{gap:10px}

.chip{height:36px;padding:0 14px;gap:9px;line-height:1}

.chip svg.ic{width:14px;height:14px}

.chip i{animation:none;box-shadow:none}

.chip-live i,.tag i,.nc-head .pulse{
position:relative;width:8px;height:8px;border-radius:50%;background:var(--tx);flex:none;animation:none;box-shadow:none}

.chip-live i::after,.tag i::after,.nc-head .pulse::after{
content:"";position:absolute;inset:0;border-radius:50%;background:var(--tx);
animation:halo 2.4s cubic-bezier(0.2,0.6,0.3,1) infinite}

@keyframes halo{
0%{transform:scale(1);opacity:0.55}
100%{transform:scale(2.6);opacity:0}
}

#themeBtn svg.ic{width:17px;height:17px}

#themeBtn .t-sun{display:none}

:root[data-theme="light"] #themeBtn .t-sun{display:block}

:root[data-theme="light"] #themeBtn .t-moon{display:none}

nav.side{
display:flex;flex-direction:column;gap:22px;padding:20px 14px 16px;
background:linear-gradient( 180deg,color-mix(in srgb,var(--surface) 70%,transparent),color-mix(in srgb,var(--bg) 92%,transparent) )}

nav.side ul{gap:2px}

nav a{
position:relative;gap:12px;padding:6px 10px 6px 6px;min-height:44px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;
letter-spacing:-0.005em}

nav a .ni{
width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;border:1px solid var(--bd);
background:color-mix(in srgb,var(--tx) 3%,transparent);transition:var(--t);flex:none}

nav a .ni svg.ic{width:15px;height:15px;opacity:0.85}

nav a .nl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

nav a:hover .ni{border-color:var(--bd2);background:var(--elev)}

nav a[aria-current="true"]{
background:linear-gradient( 90deg,color-mix(in srgb,var(--tx) 9%,transparent),color-mix(in srgb,var(--tx) 2%,transparent) );
border-color:var(--bd);box-shadow:none}

nav a[aria-current="true"]::before{
content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--tx);
box-shadow:0 0 12px color-mix(in srgb,var(--tx) 60%,transparent)}

nav a[aria-current="true"] .ni{
background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg);
box-shadow:0 6px 18px -6px color-mix(in srgb,var(--tx) 50%,transparent)}

nav a[aria-current="true"] .ni svg.ic{opacity:1}

@keyframes eq{
0%,100%{transform:scaleY(0.45)}
50%{transform:scaleY(1)}
}

.sh{grid-template-columns:40px minmax(0,1fr) auto;column-gap:16px}

.tag{height:30px;padding:0 13px;gap:10px}

.hw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.hw-card .top{align-items:center}

.hw-card h3{font-size:17px;margin-top:3px}

.specs{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;background:var(--bd);border:1px solid var(--bd);
border-radius:var(--r-md);overflow:hidden}

.specs div{background:var(--surface);padding:11px 12px;min-width:0}

.specs dt{font:500 10px var(--mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}

.specs dd{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sig{display:grid;gap:4px;font-size:13.5px;color:var(--tx2);line-height:1.55}

.app-card{
grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;
padding:16px 16px 16px 20px}

.app-id{display:flex;align-items:center;gap:14px;min-width:0}

.app-id h3{font-size:17px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fico-inv{background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg)}

.app-verify{
display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:var(--r-pill);
border:1px dashed var(--bd2);color:var(--tx2);font-size:12.5px;white-space:nowrap}

.app-verify b{color:var(--tx);font-weight:600}

.app-verify svg.ic{width:15px;height:15px;color:var(--tx)}

.app-links{display:flex;gap:8px}

.app-links .btn{text-decoration:none}

.app-links .btn svg.ic{width:14px;height:14px}

.cp header{flex-wrap:nowrap;gap:8px;min-height:60px}

.cp header h3{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cp header .btn{flex:none}

.cp header .btn.sm[aria-label^="Download"]{width:var(--hit);padding:0}

@media (pointer: coarse){
.cp header .btn.sm[aria-label^="Download"]{width:44px}
}

@media (max-width: 1280px){
.specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 420px){
.cp header{flex-wrap:wrap}
.cp header h3{flex-basis:100%}
}

.cp header h3 small{
font:500 10px var(--mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--mut);margin-left:8px;vertical-align:1px}

.cp header .badge{display:none}

.stat .v{font-size:17px}

.stat dt{margin-bottom:2px}

.shell{z-index:auto}

body::before{z-index:-1}

.btn.file{max-width:100%;overflow-wrap:normal}

.btn.file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width: 480px){
.btn.file{font-size:10.5px;padding:0 16px}
}

footer{justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 4px 40px}

@media (max-width: 1180px){
.app-card{grid-template-columns:minmax(0,1fr) auto}
.app-verify{grid-column:1/-1;grid-row:2;justify-self:start}
}

@media (max-width: 1100px){
.specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 900px){
nav.side{gap:18px;padding:16px 14px}
nav a[aria-current="true"]::before{left:-14px}
header.top{padding:0 16px}
}

@media (max-width: 760px){
.hw{grid-template-columns:1fr}
.app-card{grid-template-columns:1fr;gap:14px;padding:16px}
.app-verify{grid-row:auto;white-space:normal;height:auto;padding:9px 14px;border-radius:var(--r-md)}
footer{justify-content:center}
}

@media (max-width: 480px){
.chip{height:34px;padding:0 12px}
}

@media (max-width: 360px){
.logo{display:none}
.app-links{flex-direction:column}
}

@media (prefers-reduced-motion: reduce){
.meter i,.chip-live i::after,.tag i::after,.nc-head .pulse::after{animation:none!important}
}

/* == v4: tiles, downloads hub, premium code views == */
/* == downloads hub == */
.dl-legend{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2)}

.dl-legend b{color:var(--tx);font-weight:600}

.rec-dot{width:8px;height:8px;border-radius:50%}

.dl-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}

.dl-group{
border:1px solid var(--bd);border-radius:var(--r-lg);
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 3%,var(--surface)),var(--surface) );overflow:hidden}

.dl-group[hidden]{display:none}

.dl-gc{margin-left:auto;font:500 10px var(--mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--mut)}

.dl-list{list-style:none;margin:0;padding:6px}

.dl-row{
position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"ic main act" "ic meta act";
column-gap:12px;row-gap:6px;align-items:center;transition:background 0.2s}

.dl-row + .dl-row::before{content:"";position:absolute;top:0;left:58px;right:10px;height:1px;background:var(--bd)}

.dl-row[hidden]{display:none}

.dl-ic{
grid-area:ic;border-radius:var(--r-md);place-items:center;border:1px solid var(--bd2);background:var(--elev);color:var(--tx)}

.dl-name{font:600 12.5px/1.35 var(--mono);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rec-tag{border-radius:var(--r-pill)}

.dl-row.rec .dl-ic{background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg)}

.btn.pri-soft{
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 12%,var(--surface)),var(--elev) );border-color:var(--bd2)}

/* == premium PEQ / GraphicEQ == */
.cp{background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 3%,var(--surface)),var(--deep) );box-shadow:var(--sh)}

.cp.has-view > .code{display:none}

.pv{padding:16px;display:grid;gap:14px}

.geq-card .pv-head,.cp:has(#geq_iem) .pv-head{grid-template-columns:repeat(4,minmax(0,1fr))}

.pv-spark{width:100%;height:100%;min-height:52px;border-radius:var(--r-md);border:1px solid var(--bd);background:var(--deep)}

@media (max-width: 1100px){
.dl-groups{grid-template-columns:1fr}
}

@media (max-width: 600px){
.pv-head,.cp:has(#geq_iem) .pv-head{grid-template-columns:repeat(2,minmax(0,1fr))}
.pv-spark{grid-column:1/-1;height:56px}
.dl-row{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"ic main" "ic meta" "act act"}
.seg#dlSeg{width:100%}
}

.peq-grid .cp header,.cp.has-view header{flex-wrap:wrap;row-gap:10px}

@media (max-width: 600px){
.pv{padding:12px}
.pv-head,.cp:has(#geq_iem) .pv-head{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp:has(#geq_iem) .pv-head{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 900px){
header.top .chip{display:none}
header.top .chips{gap:0}
}

.onoff{flex:none;font:700 9px/1 var(--mono);letter-spacing:0.12em;padding:3px 6px;border-radius:var(--r-xs)}

.onoff.on{background:var(--pri-bg);color:var(--pri-tx)}

.onoff.off{border:1px solid var(--bd2);color:var(--mut)}

.fx{border-top:1px dashed var(--bd);padding-top:14px;display:grid;gap:10px}

.fx-l li:not(:last-child)::after{
content:"";position:absolute;left:51px;top:38px;bottom:-6px;width:1px;background:linear-gradient(var(--bd2),transparent)}

.li-on,.fx-l li.on .fx-i{background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg)}

@media (max-width: 420px){
.fx-l li:not(:last-child)::after{left:23px}
}

.dl-ic{
position:relative;width:40px;height:40px;flex-direction:column;gap:1px;display:flex;align-items:center;justify-content:center}

.dl-ic em{font:700 9px/1 var(--mono);letter-spacing:0.12em;font-style:normal}

.dl-ic svg.ic{width:15px;height:15px}

.dl-row{grid-template-columns:40px minmax(0,1fr) auto}

.dl-row[data-kind="wav"] .dl-ic{
background:var(--pri-bg);color:var(--pri-tx);border:1px solid var(--pri-bg);
box-shadow:0 6px 16px -8px color-mix(in srgb,var(--tx) 40%,transparent)}

.dl-row[data-kind="eel"] .dl-ic{
background:transparent;color:var(--tx);border:1px dashed color-mix(in srgb,var(--tx) 50%,transparent)}

.dl-row.rec .dl-ic{box-shadow:0 0 0 3px color-mix(in srgb,var(--tx) 14%,transparent)}

.dl-row.rec[data-kind="eel"] .dl-ic{
background:transparent;color:var(--tx);border-color:color-mix(in srgb,var(--tx) 50%,transparent)}

.dl-row.rec[data-kind="wav"] .dl-ic{background:var(--pri-bg);color:var(--pri-tx)}

.dl-row[data-kind="wav"] .dl-name .ext{color:var(--tx2)}

.dl-row::after{
content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;opacity:0;transition:opacity 0.2s}

.dl-row[data-kind="wav"]::after{background:var(--tx)}

.dl-row[data-kind="eel"]::after{background:repeating-linear-gradient(var(--tx) 0 3px,transparent 3px 6px)}

.dl-row:hover::after{opacity:1}

@media (max-width: 600px){
.dl-row{grid-template-columns:40px minmax(0,1fr)}
.dl-row + .dl-row::before{left:10px}
}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}

.faq-i{
border:1px solid var(--bd);border-radius:var(--r-lg);
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 2.5%,var(--surface)),var(--surface) );
transition:border-color 0.2s,box-shadow 0.2s}

.faq-i:hover{border-color:var(--bd2)}

.faq-i[open]{box-shadow:0 18px 40px -28px rgba(0,0,0,0.8)}

.faq-i summary{
list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr) 32px;gap:12px;align-items:center;
padding:14px 14px 14px 16px;cursor:pointer;min-height:64px;border-radius:var(--r-lg)}

.faq-i summary::-webkit-details-marker{display:none}

.faq-n{font:500 10px var(--mono);color:var(--mut)}

.faq-q{display:grid;gap:4px;min-width:0}

.faq-q b{font-size:14px;font-weight:700;letter-spacing:-0.02em;line-height:1.3}

.faq-x{
width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;border:1px solid var(--bd2);
background:var(--elev);transition:transform 0.25s,background 0.2s}

.faq-x svg.ic{width:14px;height:14px}

.faq-i[open] .faq-x{background:var(--pri-bg);color:var(--pri-tx);border-color:var(--pri-bg)}

.faq-a{padding:0 16px 16px 56px}

.faq-a p{margin:0;font-size:13.5px;line-height:1.65;color:var(--tx2);max-width:62ch}

@media (max-width: 1100px){
.faq{grid-template-columns:1fr}
}

@media (max-width: 480px){
.faq-i summary{grid-template-columns:minmax(0,1fr) 32px;padding:14px}
.faq-n{display:none}
.faq-a{padding:0 14px 14px}
}

@media (prefers-reduced-motion: reduce){
.faq-x,.fx-ch svg.ic{transition:none}
}

.faq-i[open] .faq-x{transform:none}

.faq-x svg.ic{transition:transform 0.25s}

.faq-i[open] .faq-x svg.ic{transform:rotate(45deg)}

/* == v6: mobile spacing refinement == */
@media (max-width: 760px){
main{gap:12px}
.card{padding:14px;gap:14px}
.grid{gap:10px}
.st[data-state="ready"]{display:none}
.row{gap:10px}
.chk{margin:-8px 0 -8px -8px}
.app-links{display:flex;gap:8px}
.app-links .btn{flex:1 1 0;min-width:0;white-space:nowrap;padding:0 12px;font-size:12.5px}
.app-links .btn span{overflow:hidden;text-overflow:ellipsis}
.steps code{overflow-wrap:anywhere}
.steps li{gap:10px}
footer{padding:24px 16px 32px;line-height:2}
}

@media (max-width: 380px){
main{padding:8px}
}

@media (max-width: 340px){
.app-links{flex-wrap:wrap}
.app-links .btn{flex:1 1 100%}
}

@media (max-width: 420px){
.app-links .btn{padding:0 10px;font-size:11.5px;gap:6px}
.app-links .btn svg.ic{width:12px;height:12px}
}

@media (max-width: 760px){
.app-links .btn:first-child{flex:0 0 auto;padding:0 16px}
.app-links .btn:last-child{flex:1 1 auto}
}

:root[data-theme="light"] body::before{
background:radial-gradient( ellipse 80% 55% at 50% -10%,rgba(255,253,245,0.95),transparent 70% ),radial-gradient( ellipse 60% 40% at 100% 100%,rgba(226,222,210,0.35),transparent 70% )}

:root[data-theme="light"] header.top{background:color-mix(in srgb,var(--bg) 82%,transparent)}

.sh{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:0;margin-bottom:28px}

@media (max-width: 760px){}

@media (max-width: 900px){
header.top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
header.top .brand{justify-self:center;min-width:0}
header.top .chips{justify-self:end}
header.top .logo{background:none;border:0;box-shadow:none;width:auto;height:auto;border-radius:0}
header.top .logo svg{width:24px;height:24px}
}

@media (max-width: 360px){}

.lm{
display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--bd);
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 2.5%,var(--surface)),var(--surface) );transition:border-color 0.2s}

.lm:hover{border-color:var(--bd2)}

@media (max-width: 760px){
.lm{padding:14px}
}

#eqSeg{flex-wrap:wrap}

.geq-grid .cp:not(.geq-wide) header h3{flex:1 1 100%}

.geq-grid .cp:not(.geq-wide) header .vt{margin-right:auto}

/* == v8: unified design-system layer == */
@media (max-width: 1280px){
:root{--pp:28px}
}

@media (max-width: 760px){
:root{--pp:20px;--gap:12px;--cpad:16px;--r-xl:18px;--r-lg:14px}
}

@media (max-width: 400px){
:root{--pp:16px;--cpad:14px}
}

html.nav-lock,html.nav-lock body{overflow:hidden}

section.panel,#overview{border-radius:var(--r-xl)}

.card,.cp,.lm,.dl-group,.nav-card,.faq-i,.stat{border-radius:var(--r-lg);border:1px solid var(--bd)}

.card,.lm{padding:var(--cpad)}

.stat{padding:calc(var(--cpad) - 4px)}

.faq-i{box-shadow:none}

.faq-i[open]{border-color:var(--bd2)}

.card:hover,.lm:hover,.faq-i:hover{border-color:var(--bd2)}

.kv,.specs,.chartbox,.tw,.geq,.pm > div,.pfile,.lm-t,.lm-o,.pv-stat,.dl-row,.pr-list{border-radius:var(--r-md)}

.grid,.lm-grid,.pg-grid,.geq-grid,.peq-grid{gap:var(--gap)}

.fico,.lm-i,.dl-ic{
width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--bd2);background:var(--elev);box-shadow:var(--e1)}

.stat > .ic,.pm-i,.fx-i,.faq-x{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--bd2);box-shadow:var(--e1)}

.faq-i[open] .faq-x{box-shadow:none}

.dl-row[data-kind="wav"] .dl-ic{border-style:solid}

svg.ic{stroke-width:1.75}

.btn svg.ic,nav a svg.ic,.dl-ic svg.ic,.fico svg.ic{width:16px;height:16px;stroke-width:1.9}

.chip svg.ic,.st svg.ic,.pm-i svg.ic,.fx-i svg.ic,.fx-ch svg.ic,.faq-x svg.ic,.lm-oi svg.ic,.app-links .btn svg.ic,.app-verify svg.ic,.stat > .ic svg.ic,nav a .ni svg.ic{
width:14px;height:14px;stroke-width:2.05}

.eyebrow,.pm dt,.kv span,.lm-t span,.lm-o span,.pv-stat span,.pg-c,.dl-gc,.fx-c,.lm-n,.st,.vt button{
font-size:10px;letter-spacing:0.12em;font-weight:500}

th{font-size:10px!important}

td{font-size:13px}

.ptag,.onoff,.ftype{font-size:9px;letter-spacing:0.1em}

.chip,.badge,.legend button,.seg button,.tag{font-size:10.5px;letter-spacing:0.1em}

.card h3,.lm h3,.lm-h h3{font-size:17px;line-height:1.3;letter-spacing:-0.02em;font-weight:700}

.pm dd,.kv b,.lm-t b,.pv-stat b,.specs b{font-size:13.5px;line-height:1.4}

.card p,.faq-a{font-size:14px;line-height:1.6}

.stat .d,.dl-sub,.lm-o em{font-size:12.5px;line-height:1.5}

.btn{font-weight:600}

@media (max-width: 760px){
.card h3,.lm h3{font-size:16px}
.card p,.faq-a{font-size:13.5px}
}

.pfile-n,.dl-name,.btn.file span,.fx-t{
white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}

.btn.file{height:auto;min-height:44px;padding-block:9px;text-align:left}

.dl-name .ext{white-space:nowrap}

@media (max-width: 900px),(pointer: coarse){
.btn,.btn.sm,.seg button,.legend button,.vt button,#zIn,#zOut,#zReset,.ibtn,#menuBtn,#themeBtn{min-height:44px}
#zIn,#zOut,.ibtn,#menuBtn,#themeBtn{min-width:44px}
.seg{padding:3px}
.brand{min-height:44px}
}

@media (max-width: 900px){
header.top{grid-template-columns:44px minmax(0,1fr) 44px}
#menuBtn,#themeBtn{width:44px;height:44px}
}

.toast,.tip{box-shadow:var(--e4)}

@media (max-width: 900px),(pointer: coarse){
.cp header .btn.sm,.btn.sm{min-width:44px}
}

@media (min-width: 1700px){
#eelGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

main dd{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;overflow-wrap:anywhere}

/* == STYLE BLOCK 2 (original) == */
:root{
--acc:#f5b84b;--acc-bg:color-mix(in srgb,var(--acc) 13%,transparent);--acc-bd:color-mix(in srgb,var(--acc) 55%,transparent);
--tbh:62px}

:root[data-theme="light"]{--acc:#9a5f00}

.shell{display:block;min-width:0}

main{display:block;min-width:0;max-width:1080px;margin:0 auto;padding:28px var(--pp,28px) 120px}

section.flow,.steps3 > li,.get-grid > *,.cmp-hook{min-width:0}

.eyebrow,.tag,.kv span,.stat dt,.navhead{
font-family:var(--sans)!important;text-transform:none!important;letter-spacing:0.01em!important}

section.flow{padding:44px 0;border-top:1px solid var(--bd)}

section.flow:first-child{border-top:0;padding-top:12px}

.sec-h h2,.flow > h2{font-size:var(--f3);letter-spacing:-0.02em;margin:0 0 6px}

#setup h1{font-size:clamp(30px,4.2vw,46px);letter-spacing:-0.045em;line-height:1.02;margin:0 0 12px}

.lead{color:var(--tx2);max-width:58ch;font-size:15px;line-height:1.6}

.cmp-hook{margin:28px 0 8px}

.cmp-top{display:flex;gap:6px 16px;justify-content:space-between;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}

.cmp-top h2{font-size:16px;margin:0}

.hint{color:var(--mut);font-size:12.5px}

.tgt{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

.tgt[hidden]{display:none}

.tgt button{
display:inline-flex;align-items:center;gap:8px;min-height:var(--hit);padding:0 var(--space-4);border:1px solid var(--bd2);
border-radius:var(--r-pill);background:var(--surface);color:var(--tx2);font:500 13px var(--sans);cursor:pointer}

.tgt button svg{width:22px;height:8px}

.tgt button:hover{color:var(--tx)}

.tgt button[aria-pressed="true"]{border-color:var(--acc-bd);color:var(--tx);background:var(--acc-bg)}

.steps3{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}

.steps3 > li{padding:28px 0;border-top:1px solid var(--bd)}

.st-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}

.st-n{
flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--bd2);
font:600 13px var(--mono);color:var(--tx2)}

.st-h h2{font-size:18px;letter-spacing:-0.015em;margin:0}

.st-h .sub{color:var(--tx2);font-size:13.5px;margin-top:2px}

.why{font-weight:500;margin-left:8px;text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap}

.why:hover{color:var(--tx)}

.outs{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.out-c,.snd-c{
position:relative;text-align:left;color:var(--tx);background:var(--surface);border:1px solid var(--bd2);border-radius:var(--rc);
cursor:pointer;font:inherit;transition:border-color 0.2s,background 0.2s}

.out-c{display:flex;gap:14px;align-items:center;padding:18px;min-height:84px}

.out-c .ic{width:26px;height:26px;flex:none;color:var(--tx2)}

.out-c b{display:block;font-size:16px}

.out-c small{color:var(--tx2);font-size:13px}

.out-c em{margin-left:auto;font:500 12px var(--mono);color:var(--mut);font-style:normal}

.out-c:hover,.snd-c:hover{border-color:var(--ctl)}

[aria-pressed="true"].out-c,[aria-pressed="true"].snd-c{
border-color:var(--acc);background:linear-gradient(180deg,var(--acc-bg),transparent 70%),var(--surface);
box-shadow:0 0 0 1px var(--acc-bd)}

[aria-pressed="true"].out-c .ic{color:var(--acc)}

.snd{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}

.snd-c{display:flex;flex-direction:column;gap:10px;padding:16px;min-height:150px}

.snd-h{display:flex;align-items:center;gap:8px;justify-content:space-between}

.snd-h b{font-size:15px}

.act{font-style:normal;font:600 11px var(--sans);padding:2px 8px;border-radius:var(--r-pill);background:var(--acc);color:#000}

.snd-c .pv-spark{width:100%;height:56px;display:block}

.snd-c .pv-spark path:last-of-type{stroke:var(--tx2)}

[aria-pressed="true"].snd-c .pv-spark path:last-of-type{stroke:var(--acc)}

.snd-d{color:var(--tx2);font-size:13.5px;line-height:1.45}

.get-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}

.f-row{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--bd)}

.f-row:first-child{padding-top:0}

.fi{
flex:none;width:44px;height:36px;border:1px solid var(--bd2);border-radius:var(--r-sm);display:grid;place-items:center;
font:600 11px var(--mono);color:var(--tx2)}

.f-row b{font:600 13px var(--mono);overflow-wrap:anywhere;display:block}

.f-row span.d{color:var(--tx2);font-size:12.5px}

#fsNote{font-size:12.5px}

.btn.big{min-height:52px;width:100%;font-size:15px}

.ver{display:flex;gap:8px;align-items:flex-start;color:var(--tx2);font-size:12.5px;margin:12px 0}

.ver .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--acc)}

.lnk{
color:var(--tx);font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:4px;
text-decoration-color:var(--acc)}

.prog{display:flex;align-items:center;gap:14px;margin:0 0 6px;flex-wrap:wrap}

.bar{flex:1;min-width:140px;height:6px;border-radius:var(--r-pill);background:var(--bd2);overflow:hidden}

.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width 0.3s}

#progTxt{font:500 12.5px var(--mono);color:var(--tx2)}

ol.todo{list-style:none;margin:8px 0 0;padding:0}

ol.todo > li{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--bd)}

.ck{flex:none;position:relative;width:28px;height:28px;margin-top:2px;cursor:pointer;display:block}

.ck input{z-index:1;position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}

.ck .box{
pointer-events:none;position:absolute;inset:0;border:1.5px solid var(--ctl);border-radius:8px;display:grid;place-items:center;
transition:0.2s}

.ck .box svg{width:16px;height:16px;stroke:var(--on-acc);opacity:0}

.ck input:checked + .box{background:var(--acc);border-color:var(--acc)}

.ck input:checked + .box svg{opacity:1}

.ck input:focus-visible + .box{outline:2px solid var(--focus);outline-offset:3px}

.ck-b h3{font-size:16px;margin:0 0 3px}

.ck-b p{color:var(--tx2);font-size:13.5px;margin:0 0 10px;max-width:60ch}

li.dn .ck-b h3{color:var(--tx2);text-decoration:line-through;text-decoration-color:var(--ctl)}

.vals{display:flex;flex-wrap:wrap;gap:8px}

.val{
display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd2);border-radius:var(--r-pill);padding:3px 4px 3px 12px;
font-size:12.5px;max-width:100%}

.val > span{color:var(--mut)}

.val code{background:none;border:0;padding:0;font:600 12px var(--mono);overflow-wrap:anywhere}

.val.nc{padding-right:12px}

.cp-b{
width:var(--hit);height:var(--hit);display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:var(--elev);
color:var(--tx2);cursor:pointer;flex:none}

.cp-b:hover{color:var(--tx)}

.cp-b[data-state="done"]{background:var(--acc);color:#000}

.done[hidden]{display:none}

.ck-b{flex:1;min-width:0}

#fsSeg button{text-transform:none;font-family:var(--sans);letter-spacing:0}

.done{
margin-top:18px;padding:22px;border:1px solid var(--acc-bd);border-radius:var(--rc);background:var(--acc-bg);display:flex;
gap:14px;align-items:center;flex-wrap:wrap}

.done .ic{width:28px;height:28px;color:var(--acc)}

.done b{font-size:17px;display:block}

.done span{color:var(--tx2);font-size:13.5px}

details.lab > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:56px}

details.lab > summary::-webkit-details-marker{display:none}

details.lab > summary h2{margin:0;font-size:var(--f3)}

details.lab > summary p{color:var(--tx2);font-size:13.5px;margin:2px 0 0}

details.lab > summary .ic{transition:transform 0.2s;margin-left:auto}

details.lab[open] > summary .ic{transform:rotate(90deg)}

.dl-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}

.dl-tools input{
flex:1;min-width:180px;min-height:42px;padding:0 14px;border:1px solid var(--bd2);border-radius:var(--r-pill);
background:var(--surface);color:var(--tx);font:14px var(--sans)}

.rec-tag{background:var(--acc)!important;color:var(--on-acc)!important;letter-spacing:0!important;text-transform:none!important}

.rec-dot{box-shadow:0 0 0 3px var(--acc-bg)!important}

.dl-row.rec .dl-ic,.dl-row.rec[data-kind="wav"] .dl-ic,.dl-row.rec[data-kind="eel"] .dl-ic{
background:var(--acc-bg)!important;color:var(--acc)!important;border-color:var(--acc-bd)!important;box-shadow:none!important}

.dl-more{grid-column:1/-1}

.dl-more summary{cursor:pointer;color:var(--tx2);font-size:12.5px;min-height:var(--hit);display:flex;align-items:center;gap:6px}

.dl-more[open] summary svg{transform:rotate(90deg)}

.dl-more .code{max-height:260px;margin-top:8px}

.dl-more p{color:var(--tx2);font-size:12.5px;margin:6px 0}

.faq-i[open] > summary .faq-n{color:var(--acc)}

@media (max-width: 1420px){
header.top .chips .chip{display:none}
}

@media (max-width: 900px){
main{padding-bottom:calc(var(--tbh) + 120px)}
header.top .chips .chip-live{display:none}
.brand small{display:none}
}

@media (max-width: 760px){
.outs{grid-template-columns:1fr}
.out-c{padding:16px}
.out-c em{display:none}
.get-grid{grid-template-columns:1fr;gap:18px}
main{padding-left:16px;padding-right:16px}
.snd{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.snd::-webkit-scrollbar{display:none}
.snd-c{flex:0 0 78%;scroll-snap-align:center}
section.flow{padding:32px 0}
.why{display:block;margin:4px 0 0}
.btn.sm{flex:0 0 auto}
}

/* == STYLE BLOCK 3 (original) == */
:root{--accent:var(--pri-bg);--hit:44px}

html{overflow-x:clip}

body{text-rendering:optimizeLegibility}

h1,h2,h3{text-wrap:balance}

p{text-wrap:pretty}

svg.ic{width:18px;height:18px;vertical-align:-0.2em}

.btn svg.ic,.seg svg.ic{width:16px;height:16px}

.btn,.seg,.seg button,.legend button,.skip,.fbtn,details.pv summary{border-radius:var(--radius-sm)}

.seg{padding:3px}

.seg button{min-height:var(--hit)}

.toast{
border-radius:var(--radius-md);padding:10px 14px 10px 10px;border-left:3px solid var(--border-strong);font-size:13px;
line-height:1.45;overflow-wrap:anywhere}

.toast.err{border-left-color:var(--danger)}

.toast svg.ic{border-radius:var(--radius-sm)}

.toasts{left:var(--s4);justify-items:end;pointer-events:none}

.toast{pointer-events:auto}

@media (max-width: 900px){
.toasts{left:var(--s3);right:var(--s3);bottom:calc(var(--s3) + env(safe-area-inset-bottom));max-width:none;justify-items:stretch}
}

header.top{padding-left:max(var(--s5),env(safe-area-inset-left));padding-right:max(var(--s5),env(safe-area-inset-right))}

.brand,.brand-t,.brand-t b{flex:none;min-width:max-content;white-space:nowrap;overflow:visible}

header.top .chips,#hdrProfile{min-width:0}

@media (max-width: 900px){
header.top{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
}

:focus-visible{border-radius:var(--radius-sm)}

.btn:focus-visible,.ibtn:focus-visible,.seg button:focus-visible,.legend button:focus-visible,nav a:focus-visible,summary:focus-visible{
outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--focus) 22%,transparent)}

.card:hover,.btn:hover{transform:none}

input,select,textarea{
font:inherit;color:var(--tx);background:var(--surface-sunken);border:1px solid var(--border-strong);
border-radius:var(--radius-sm);min-height:var(--hit);padding:0 12px;max-width:100%}

input::placeholder{color:var(--text-muted);opacity:1}

input:focus-visible{border-color:var(--focus)}

.btn:disabled,.btn[disabled]{opacity:0.45;cursor:not-allowed;filter:saturate(0.6)}

.btn[aria-busy="true"]{opacity:0.9;cursor:progress}

.code,pre{max-width:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.code{line-height:1.65;tab-size:4}

.cp,.card,.panel,.dl-row,.ftab-w{min-width:0;max-width:100%}

.ftab-w,.legend,.seg,.vt{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}

.legend{gap:var(--s2)}

.chartbox{overflow:hidden;contain:layout paint}

.chartbox svg{display:block;max-width:100%;height:auto}

.chartbox svg text{
font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--surface);stroke-width:2px;stroke-linejoin:round}

.tip{line-height:1.4;font-variant-numeric:tabular-nums;will-change:transform}

.tip div{gap:12px}

@media (max-width: 900px){
main{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
.chartbox svg text{font-size:max(9px,1em)}
}

@media (max-width: 480px){
.btn{padding:0 14px}
.card{padding:14px}
.legend{flex-wrap:nowrap}
.legend button{flex:0 0 auto}
.seg{display:flex;width:100%}
}

@media (pointer: coarse){
.btn,.seg button,.legend button,.fbtn,nav a,.ibtn{min-height:var(--hit)}
}

@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}

@media (forced-colors: active){
.btn,.card,.chip,.seg button[aria-pressed="true"]{border:1px solid CanvasText}
:focus-visible{outline:2px solid Highlight}
}

/* == STYLE BLOCK 4 (original) == */
[hidden]{display:none!important}

header.top{
display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:space-between;gap:12px;
height:calc(60px + env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 84%,transparent);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--bd);
box-shadow:0 1px 0 color-mix(in srgb,var(--tx) 4%,transparent),0 12px 28px -22px rgba(0,0,0,0.6)}

header.top::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
background:linear-gradient( 90deg,transparent,color-mix(in srgb,var(--tx) 22%,transparent) 50%,transparent );opacity:0.55}

header.top .brand{justify-self:auto!important;flex:0 0 auto;gap:11px;padding:4px 6px 4px 0}

header.top .logo{
display:grid!important;width:34px!important;height:34px!important;border-radius:10px!important;
background:linear-gradient( 160deg,color-mix(in srgb,var(--tx) 14%,var(--surface)),var(--surface) )!important;
border:1px solid var(--bd2)!important;
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tx) 14%,transparent),0 6px 14px -8px rgba(0,0,0,0.7)!important}

header.top .logo svg{width:20px!important;height:20px!important}

header.top .chips{margin-left:auto!important;justify-self:auto!important;gap:8px!important}

@media (max-width: 900px){
header.top{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}

@media (max-width: 380px){
header.top .logo{width:32px!important;height:32px!important}
}

#dlEmpty{
flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;margin:8px 0 0;padding:28px 20px;
border:1px dashed var(--bd2);border-radius:var(--r-lg);color:var(--tx2);font-size:14px;font-weight:500;line-height:1.5;
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 3%,transparent),transparent )}

#dlEmpty::before{
content:"";width:40px;height:40px;border-radius:12px;border:1px solid var(--bd2);background:var(--elev) center/18px no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
margin-bottom:4px}

#dlEmpty::after{
content:"Try a shorter term, or switch the filter to All.";font:500 11px/1.5 var(--mono);letter-spacing:0.04em;color:var(--mut)}

footer{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px;margin-top:var(--s6);
padding:22px 4px calc(36px + env(safe-area-inset-bottom));border-top:0;position:relative;font:500 10.5px/1.6 var(--mono);
letter-spacing:0.1em;text-transform:uppercase;color:var(--mut);text-align:left}

footer::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient( 90deg,transparent,var(--bd2) 20%,var(--bd2) 80%,transparent )}

footer span:first-child{color:var(--tx2);font-weight:600;display:inline-flex;align-items:center;gap:8px}

footer span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tx);opacity:0.7}

footer span:last-child{text-align:right;text-wrap:balance}

@media (max-width: 760px){
footer{
grid-template-columns:1fr;justify-items:center;text-align:center;
padding-bottom:calc(var(--tbh,64px) + 28px + env(safe-area-inset-bottom))}
footer span:last-child{text-align:center}
}

.dl-groups > *{border-radius:var(--r-lg)}

.dl-row{border:1px solid transparent;padding:12px}

.dl-row:hover{border-color:var(--bd)}

.dl-act .btn,.card > .row .btn,.card .btn.sm{border-radius:10px;font-weight:600;letter-spacing:0.01em}

.dl-act .btn:not(.ghost){
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 9%,var(--surface)),var(--surface) );border-color:var(--bd2);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tx) 10%,transparent),0 4px 12px -8px rgba(0,0,0,0.6)}

.st{font-size:10.5px;letter-spacing:0.1em;margin-top:4px}

details.pv{margin-top:2px}

details.pv summary{border-radius:10px;padding:0 6px;transition:background 0.2s,color 0.2s}

details.pv summary:hover{background:color-mix(in srgb,var(--tx) 4%,transparent);color:var(--tx)}

@media (max-width: 600px){
.dl-row{
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 2.5%,var(--surface)),var(--surface) );border-color:var(--bd);
margin-bottom:8px}
}

/* == STYLE BLOCK 5 (original) == */
/* == v4: accent chips, hero, deployment, system, chart chrome == */
:root{--acc-ink:#ffd592;--acc-soft:color-mix(in srgb,var(--acc) 12%,var(--surface))}

:root[data-theme="light"]{--acc-ink:#7a4700;--acc-soft:color-mix(in srgb,var(--acc) 10%,var(--surface))}

.act,.badge.act,.rec-tag,.dl-row.rec .rec-tag{
display:inline-flex!important;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px!important;border-radius:999px;
background:var(--acc-soft)!important;color:var(--acc-ink)!important;border:1px solid var(--acc-bd)!important;
font:600 10px/1 var(--mono)!important;letter-spacing:0.12em!important;text-transform:uppercase!important;white-space:nowrap;
box-shadow:none!important}

.act::before,.rec-tag::before,.badge.act::before{
content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);
box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}

.rec-tag{display:none!important}

.dl-row.rec .rec-tag{display:inline-flex!important;margin-left:8px}

.rec-dot{background:var(--acc)!important}

.getbar,.snd-c[aria-pressed="true"],.out-c[aria-pressed="true"]{border-color:var(--acc-bd)}

[aria-pressed="true"].out-c,[aria-pressed="true"].snd-c{
background:linear-gradient( 180deg,color-mix(in srgb,var(--acc) 9%,transparent),transparent 62% ),var(--surface)!important;
box-shadow:0 0 0 1px var(--acc-bd),0 18px 36px -26px color-mix(in srgb,var(--acc) 55%,transparent)!important}

#overview{padding:clamp(20px,4vw,40px)}

#overview::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient( 60% 70% at 88% 10%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 70% )}

.hero{
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;gap:clamp(24px,4vw,56px)!important;align-items:center!important;
position:relative;z-index:1}

.hero h1{font-size:clamp(40px,6.4vw,72px);margin:20px 0 16px}

.hero h1 .dim{
background:linear-gradient( 90deg,var(--acc),color-mix(in srgb,var(--tx) 40%,var(--bg)) );-webkit-background-clip:text;
background-clip:text;color:transparent}

.hero .tag{border-color:var(--acc-bd);background:var(--acc-soft);color:var(--acc-ink)}

.hero .tag i,.hero .tag i::after{background:var(--acc)}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 26px}

.hero-cta .btn{text-decoration:none}

.hero-facts{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--bd);border-radius:var(--r-md);
background:color-mix(in srgb,var(--tx) 2.5%,transparent);overflow:hidden}

.hero-facts > div{padding:12px 14px;border-left:1px solid var(--bd);min-width:0}

.hero-facts > div:first-child{border-left:0}

.hero-facts dt{font:500 9.5px/1.4 var(--mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--mut)}

.hero-facts dd{margin:4px 0 0;font:700 16px/1.2 var(--mono);letter-spacing:-0.02em;color:var(--tx);overflow-wrap:anywhere}

.hero-viz{
margin:0;position:relative;border:1px solid var(--bd2);border-radius:var(--r-lg);padding:14px 14px 10px;
background:linear-gradient( 180deg,color-mix(in srgb,var(--tx) 4%,var(--deep)),var(--deep) );
box-shadow:var(--e2),0 30px 60px -40px rgba(0,0,0,0.8);min-width:0}

.hero-viz svg{max-height:340px}

.hero-viz figcaption{
display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 4px 2px;
border-top:1px solid var(--bd);margin-top:6px}

.hv-read{font:500 12px var(--mono);color:var(--tx2)}

.hv-read b{color:var(--acc-ink)}

@media (max-width: 1023px){
.hero{grid-template-columns:minmax(0,1fr)!important}
}

@media (max-width: 480px){
.hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-facts > div:nth-child(3){border-left:0}
.hero-facts > div:nth-child(n + 3){border-top:1px solid var(--bd)}
.hero-cta .btn{flex:1 1 100%}
}

#h-setup{font-size:clamp(28px,4vw,42px);letter-spacing:-0.045em;line-height:1.05;margin:0 0 12px}

.chartbox{
background:radial-gradient( 120% 90% at 50% 0%,color-mix(in srgb,var(--tx) 4%,transparent),transparent 60% ),var(--deep);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tx) 7%,transparent)}

.chartbox svg text{font-size:10.5px;letter-spacing:0.02em}

.tip{
background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--bd2);
box-shadow:0 18px 40px -16px rgba(0,0,0,0.75),inset 0 1px 0 color-mix(in srgb,var(--tx) 8%,transparent);
backdrop-filter:blur(12px)}

.tip > b{font:600 11px var(--mono)}

.tip div b{font-family:var(--mono);font-size:12px}

.tip small{color:var(--mut);font-weight:500}

.tip i{width:9px;height:3px;border-radius:2px;vertical-align:middle}

/* == STYLE BLOCK 6 (original) == */
:root{--on-acc:#000}

:root[data-theme="light"]{--on-acc:#fff}

i.act,.cp-b[data-state="done"]{color:var(--on-acc)!important}

.sec-h{
display:flex;gap:var(--s3) var(--s4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--s5)}

.sec-h > div:first-child{flex:1;min-width:min(100%,240px)}

.sec-h h2,.sec-h h3{font-size:var(--f3);letter-spacing:-0.02em;line-height:1.2;margin:0 0 6px;font-weight:700}

.sec-h p{color:var(--tx2);font-size:var(--f1);line-height:1.5;max-width:60ch;margin:0}

.sys-wrap{display:block;scroll-margin-top:calc(var(--hh) + 16px)}

.sys-wrap > section.flow:first-child{border-top:1px solid var(--bd);padding-top:44px}

section.flow{scroll-margin-top:calc(var(--hh) + 16px)}

.card,.cp,.lm,.dl-group,.faq-i,.stat{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg)}

.card::before,.card.sel::before{display:none}

.card:hover,.cp:hover,.faq-i:hover{border-color:var(--bd2)}

.card.sel{border-color:var(--acc);box-shadow:none}

.cp.term{border-radius:var(--r-lg);border:1px solid var(--bd)}

.fico{width:36px;height:36px;border-radius:var(--r-md);background:var(--elev);border:1px solid var(--bd2);color:var(--tx)}

.fico svg.ic,.stat > svg.ic{width:16px;height:16px;stroke-width:1.7}

.badge,.chip,.act,.tag{border-radius:var(--r-sm)}

.badge.b-a{background:var(--acc-bg);color:var(--acc);border-color:var(--acc-bd)}

.btn,.seg,.tgt button,.legend button,.dl-tools input,.tabs-l,.val,.out-c,.snd-c,.done,.getbar{border-radius:var(--r-md)}

.seg button,.tabs-l button,.cp-b{border-radius:var(--r-sm)}

.logo{width:36px;height:36px}

.logo svg.ic{width:22px;height:22px;stroke-width:1.5}

header.top .logo svg.ic{width:24px;height:24px}

.chartbox{touch-action:pan-y}

.unav{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;padding:24px;
text-align:center;border:1px dashed var(--bd2);border-radius:var(--r-md);color:var(--tx2)}

.unav b{color:var(--tx)}

.unav span{font-size:var(--f0);color:var(--mut)}

.unav .ic{width:22px;height:22px}

.tip .pin{margin-top:6px;color:var(--mut);font-size:11px}

.tip .tsw{vertical-align:middle}

.hero-viz svg{width:100%;height:auto;display:block}

.legend{overflow:visible;flex-wrap:wrap;align-items:center}

.legend button,.legend .chip{flex:0 1 auto;width:auto;max-width:100%;white-space:normal;height:auto;min-width:0}

.legend .chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;overflow:visible}

.legend .chip .cat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

.legend .cat i{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}

@media print{
:root,:root[data-theme="dark"]{
--bg:#fff;--surface:#fff;--elev:#fff;--tx:#000;--tx2:#222;--mut:#444;--bd:#bbb;--bd2:#999;--acc:#000;--acc-bg:#eee;--acc-bd:#000}
body{background:#fff!important;color:#000}
body::before,body::after{display:none!important}
body > *:not(.shell),.shell > main > *:not(#deploy),.getbar,.tabbar,header.top,.toasts,.skip{display:none!important}
main{padding:0!important;max-width:none}
section.flow{border:0;padding:0}
#deploy .seg,#deploy #depPrint,#deploy .cp-b,#deploy .lnk{display:none!important}
#deploy .card{break-inside:avoid;border:1px solid #999;background:#fff;color:#000;padding:10px}
#deploy h2::after{content:" · HyperAudio"}
}

/* == STYLE BLOCK 7 (original) == */
:root{
--surface-raised:var(--elev);--surface-sunken:var(--deep);--text:var(--tx);--text-secondary:var(--tx2);--text-muted:var(--mut);
--border-subtle:var(--bd);--border-strong:var(--bd2);--accent-soft:var(--acc-bg);--success:#4caf7a;--warning:#d9a441;
--danger:#e5675b;--shadow-sm:0 1px 2px rgba(0,0,0,0.18);--shadow-md:0 6px 18px -8px rgba(0,0,0,0.35);
--shadow-lg:0 18px 40px -16px rgba(0,0,0,0.5);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-pill:999px;--space-1:4px;
--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--ease:cubic-bezier(0.2,0.7,0.2,1);--dur:0.16s;
--ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus)}

:root[data-theme="light"]{
--success:#1f7a4a;--warning:#8a5a00;--danger:#b3261e;--shadow-sm:0 1px 2px rgba(40,36,28,0.08);
--shadow-md:0 6px 18px -8px rgba(40,36,28,0.2);--shadow-lg:0 18px 40px -16px rgba(40,36,28,0.28)}

.btn,.seg,.tgt button,.legend button,.dl-tools input,.val,.out-c,.snd-c,.tabs-l,.getbar,.done,.ibtn{
border-radius:var(--radius-md)}

.seg button,.tabs-l button,.cp-b,.badge,.chip,.act,.tag,.rec-tag,.legend .chip{border-radius:var(--radius-sm)}

.card,.cp,.lm,.dl-group,.faq-i,.stat,.cp.term,.unav{border-radius:var(--radius-lg)}

.bar,.bar i{border-radius:var(--radius-pill)}

.card,.cp,.lm,.dl-group,.faq-i,.stat{box-shadow:var(--shadow-sm)}

.card.sel,.out-c[aria-pressed="true"],.snd-c[aria-pressed="true"]{box-shadow:0 0 0 1px var(--acc-bd)}

.btn,.ibtn,.seg button,.tabs-l button,.legend button,.tgt button,.out-c,.snd-c,.card,.dl-row,.cp-b,.faq-i,nav a,.tabbar a{
transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease)}

.btn:focus-visible,.ibtn:focus-visible,.seg button:focus-visible,.legend button:focus-visible,.tgt button:focus-visible,.out-c:focus-visible,.snd-c:focus-visible,summary:focus-visible,a:focus-visible,.cp-b:focus-visible,.tabs-l button:focus-visible{
outline:2px solid var(--focus)!important;outline-offset:2px!important;box-shadow:var(--ring)}

.btn:hover:not(:disabled),.ibtn:hover,.legend button:hover,.tgt button:hover{border-color:var(--ctl)}

.btn:disabled,.btn[aria-busy="true"]{opacity:0.6;cursor:progress}

@media (hover: none){
.btn:hover,.card:hover{transform:none}
}

@media (pointer: coarse){
.btn,.seg button,.legend button,.tgt button,.tabs-l button,.out-c,.snd-c,.cp-b{min-height:44px}
.cp-b{min-width:44px}
}

.eyebrow,.tag,.navhead,.stat dt,.kv span,.pm dt,.specs dt,.dl-gc,.faq-n,.sec-h .eyebrow{text-transform:none;letter-spacing:0.02em}

.legend button,.chip,.badge{text-transform:none;letter-spacing:0.02em;font:500 12px/1.3 var(--sans)}

.legend .cat,.chip code,.dl-size,.val code,.f-row b,.dl-name,code,pre,.t-k{font-family:var(--mono)}

.seg button{text-transform:none;letter-spacing:0;font:500 13px var(--sans)}

th{text-transform:none;letter-spacing:0.02em;font-size:11.5px}

p,.faq-a,.ck-b p,.sec-h p{line-height:1.6}

.f-t{display:block;font:600 14px/1.35 var(--sans);color:var(--tx);margin-bottom:2px}

.dl-name{font-weight:500;color:var(--tx2);font-size:12px}

.dl-name .ext{color:var(--acc);font-weight:600}

.dl-row{border-radius:var(--radius-md)}

.dl-row:hover{background:var(--surface-raised)}

.dl-row.rec{background:color-mix(in srgb,var(--acc) 6%,transparent);box-shadow:inset 2px 0 0 var(--acc)}

.rec-tag{font:600 11px/1.4 var(--sans)!important;padding:1px 8px}

#dlEmpty{display:flex}

#dlEmpty[hidden]{display:none}

.f-row b,.dl-name{overflow-wrap:anywhere}

header.top .brand,header.top .brand-t,header.top .brand-t b{
flex:0 0 auto;min-width:max-content;overflow:visible;white-space:nowrap;text-overflow:clip}

#hdrProfile{min-width:0;max-width:min(240px,34vw)}

#hdrProfile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

@media (max-width: 480px){
header.top{padding-left:var(--space-3);padding-right:var(--space-2);gap:var(--space-2)}
}

@media (max-width: 360px){
header.top .logo{display:none}
}

html,body{overflow-x:clip}

main,section,.card,.cp,.dl-row,.chartbox{min-width:0;max-width:100%}

pre,.code{max-width:100%;overflow:auto}

.tw,.ftab-w,.legend,.seg,.vt,.tabs-l{max-width:100%}

.chartbox{max-width:100%}

.tip span{overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){}

/* == site.css == */
/* == v5 additions on top of main.css == */
.all-dl{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

.evt th,.evt td{padding:12px 12px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}

.evt td:first-child{font-weight:600;white-space:normal}

.ev-notes{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--tx2);font-size:13.5px}

.ev-notes b{color:var(--tx)}

.sha{font:500 11.5px var(--mono);color:var(--mut);overflow-wrap:anywhere}

.ver .cp-b{vertical-align:middle}

.pfacts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}

.pfacts li{
display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--tx2);border-top:1px solid var(--bd);
padding-top:8px}

.pfacts b{color:var(--tx);font-weight:600;text-align:right}

#fsNote{display:block;margin-bottom:12px;color:var(--mut)}

a.btn,a.btn:hover{text-decoration:none}

.dl-gc{white-space:nowrap}

.ver .sha{white-space:nowrap}

#verLine span{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.ver .cp-b{margin-left:0}

.apply-grid{display:grid;gap:20px;align-items:start}

@media (min-width: 900px){
.apply-grid{grid-template-columns:minmax(220px,300px) 1fr;gap:32px}
.appfig{position:sticky;top:84px}
}

.appfig{margin:0}

.appfig img{display:block;width:100%;height:auto}

.pin{
position:absolute;right:10px;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-acc);
font:700 12px/22px var(--mono);text-align:center;transform:translateY(-50%)}

.appfig figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--mut)}

.todo li.nx .ck-b h3{color:var(--tx)}

.todo li.nx .box{border-color:var(--acc)}

.evb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin:8px 0 0;font-size:12.5px}

.evb small{flex:1 1 100%;color:var(--mut);font-size:12px;line-height:1.5}

.verify{margin:12px 0;font-size:13px;color:var(--tx2)}

.verify dl{grid-template-columns:auto 1fr;gap:8px 12px}

.verify dt{color:var(--mut)}

.verify code{overflow-wrap:anywhere}

/* == touch targets: expand hit area without changing the look == */
.cp-b,.ck{position:relative}

.cp-b::after{content:"";position:absolute;inset:-7px}

.btn.sm,.seg button,summary,.dl-more summary{min-height:44px}

.tw{
background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
background-attachment:local,local,scroll,scroll}

@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;
scroll-behavior:auto!important}
}

/* == visual refinement == */
html{
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;
text-size-adjust:100%}

h1,h2,h3{text-wrap:balance}

h1,h2{letter-spacing:-0.03em}

p,li,figcaption{text-wrap:pretty}

code,.stat .v,.evt td,.dl-size,.chip,#progTxt,.dl-gc{font-variant-numeric:tabular-nums}

::selection{background:color-mix(in srgb,var(--acc) 35%,transparent)}

:root{
--glow:color-mix(in srgb,var(--acc) 7%,transparent);
--lift:0 1px 0 rgba(255,255,255,0.04) inset,0 1px 2px rgba(0,0,0,0.5),0 18px 40px -22px rgba(0,0,0,0.9)}

[data-theme="light"]{
--glow:color-mix(in srgb,var(--acc) 9%,transparent);
--lift:0 1px 0 rgba(255,255,255,0.7) inset,0 1px 2px rgba(40,36,28,0.06),0 20px 40px -26px rgba(40,36,28,0.3)}

body{
background-image:radial-gradient( 900px 420px at 50% -6%,var(--glow),transparent 70% );background-repeat:no-repeat;
background-attachment:fixed}

.snd-c,.out-c,.dl-group,.stat,.appfig-i,.tw{box-shadow:var(--lift)}

.snd-c,.out-c,.dl-row{transition:border-color 0.18s,box-shadow 0.18s,transform 0.18s}

@media (hover: hover){
.snd-c:hover,.out-c:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--bd2));transform:translateY(-1px)}
}

.snd-c[aria-pressed="true"],.out-c[aria-pressed="true"]{
box-shadow:var(--lift),0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent),0 14px 36px -20px color-mix(in srgb,var(--acc) 60%,transparent)}

.btn.pri{
background:linear-gradient( 180deg,color-mix(in srgb,var(--on-acc,#000) 0%,var(--tx)) 0%,color-mix(in srgb,var(--tx) 88%,var(--bg)) 100% );
box-shadow:0 1px 0 rgba(255,255,255,0.35) inset,0 10px 26px -12px color-mix(in srgb,var(--acc) 70%,transparent)}

.btn.pri:hover{box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 14px 32px -12px color-mix(in srgb,var(--acc) 85%,transparent)}

.btn:active{transform:translateY(1px)}

.brand .logo{
background:var(--grad-logo);border-color:var(--bd-on-dark);color:var(--acc);
box-shadow:0 8px 20px -10px color-mix(in srgb,var(--acc) 60%,transparent)}

[data-theme="light"] .brand .logo{background:linear-gradient(180deg,#2a2112,#14100a)}

.eyebrow{letter-spacing:0.14em}

.todo li.nx .box{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}

.pin{box-shadow:0 0 0 3px rgba(0,0,0,0.35),0 4px 10px rgba(0,0,0,0.4)}

html{scrollbar-color:var(--bd2) transparent}

@media (prefers-reduced-motion: reduce){
.snd-c:hover,.out-c:hover,.btn:active{transform:none}
}

/* == v6 == */
.tip .dl{color:var(--acc)}

.pg{max-width:880px;margin:0 auto;padding:20px 16px 96px}

.pg h1{margin:8px 0 8px}

.pg .lead{color:var(--tx2)}

.sel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}

.sel select,.fq select{
width:100%;padding:12px;border-radius:var(--r-md);border:1px solid var(--bd2);background:var(--deep);color:var(--tx);font:inherit}

.cmpg{display:grid;gap:12px;margin:16px 0}

@media (min-width: 640px){
.cmpg{grid-template-columns:1fr 1fr}
}

.pick{padding:var(--space-3) var(--space-4);border:1px solid var(--bd);border-radius:var(--r-md)}

.pick b{display:block}

.pick span{color:var(--tx2);font-size:14px}

.fq{display:grid;gap:12px;margin:12px 0}

.fq label{display:grid;gap:4px;font-size:14px;color:var(--tx2)}

.why{margin:12px 0;padding-left:20px;color:var(--tx2);font-size:14px}

.why li{margin:3px 0}

.ver-l{list-style:none;padding:0;display:grid;gap:12px}

.ver-l li{padding:var(--space-3) var(--space-4);border:1px solid var(--bd);border-radius:var(--r-md)}

.ver-l li.legacy{
border-style:dashed;opacity:0.9;background:repeating-linear-gradient( 135deg,transparent 0 8px,var(--bd) 8px 9px )}

.ver-l li.v1{border-color:var(--mut)}

.ver-l li.v2{border-color:var(--s-raw)}

.ver-l small{color:var(--mut)}

.ver-l ul{margin:8px 0 0;padding-left:20px;font-size:14px}

a[href="./"],a[href$="EVIDENCE.html"],a[href$="OPEN.html"],a[href$="CHANGELOG.html"],.act a,.act button,button[data-k="all"]{
color:var(--tx)}

[data-theme="light"] .act,[data-theme="light"] .act *,[data-theme="light"] .rec .dl-ic > em{color:var(--tx)!important}

[data-theme="dark"] .act,[data-theme="dark"] .act *,[data-theme="dark"] .rec .dl-ic > em{color:var(--tx)!important}

.rec{
margin-bottom:12px;border-radius:var(--r-md);padding:16px;background:var(--surface);border:1px solid var(--bd);
transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease}

.rec:last-child{margin-bottom:0}

.rec:hover{border-color:var(--acc);box-shadow:var(--shadow-hover);transform:translateY(-1px)}

/* == REDESIGNED FILES & EVIDENCE CARDS == */
/* == EVIDENCE TABLE (Horizontal Scroll) == */
.tw{
width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);border:1px solid var(--bd);
background:var(--surface);margin-top:16px}

.evt{width:100%;border-collapse:collapse;text-align:left;font-size:14px;min-width:800px}

.evt th{
background:var(--bg);color:var(--mut);font:600 11px var(--mono);letter-spacing:0.05em;text-transform:uppercase;padding:16px 20px;
border-bottom:1px solid var(--bd);white-space:nowrap}

.evt td{padding:16px 20px;border-bottom:1px solid var(--bd);color:var(--tx);vertical-align:middle}

.evt tr:last-child td{border-bottom:none}

.evt tr:hover td{background:color-mix(in srgb,var(--tx) 3%,transparent)}

.evt td svg{width:20px;height:20px;display:block}

/* == Files + Evidence in the Hardware card language == */
.dl-groups:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.fc:not(#_){padding:var(--space-4);gap:var(--space-3);overflow:visible}

.fc .top{align-items:center;flex-wrap:nowrap}

.fc .top > div{min-width:0;flex:1 1 140px}

.fc .top .btn{flex:none}

.fc .eyebrow .dl-gc{margin:0;font:inherit;letter-spacing:inherit;color:inherit}

.fc-rec:not(#_){
display:none;margin:8px 0 0;width:fit-content;align-items:center;gap:8px;height:24px;padding:0 12px;border-radius:var(--r-pill);
font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}

.fc.rec .fc-rec:not(#_){display:inline-flex}

:root[data-theme="light"] .fc-rec:not(#_){color:var(--acc-ink)}

.fc.rec{
border-color:color-mix(in srgb,var(--acc) 45%,var(--bd));
box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 14%,transparent),0 24px 50px -34px color-mix(in srgb,var(--acc) 55%,transparent)}

.fc.rec .fico{
color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--bd2));
background:color-mix(in srgb,var(--acc) 10%,var(--elev))}

.fc-l:not(#_){
list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r-md);
overflow:hidden}

.fc-f:not(#_){
display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:none;gap:12px;align-items:center;padding:12px 12px;
background:var(--surface);margin:0;border-radius:0}

.fc-f:not(#_)::before{display:none}

.fc-f > *:not(#_){grid-area:auto}

.fc-f:hover{background:color-mix(in srgb,var(--tx) 3%,var(--surface))}

.fc-f .dl-ic{width:40px;height:40px}

.fc-fm{min-width:0;display:grid;gap:3px}

.fc-fm .dl-name{overflow-wrap:anywhere}

.fc-fs{font-size:12px;line-height:1.35;color:var(--mut)}

.fc-f .btn{min-width:0;min-height:var(--hit)}

.fc-sha{margin:0}

.fc-sha summary{display:flex;align-items:center;gap:8px;min-height:var(--hit);cursor:pointer;color:var(--tx2);font-size:12.5px}

.fc-sums:not(#_){grid-template-columns:1fr;margin-top:8px}

.fc-sums dd:not(#_){white-space:normal;overflow:visible}

.fc-sums .sha{font-size:10.5px;line-height:1.5;word-break:break-all;color:var(--tx2)}

.ev-grid{margin-bottom:12px}

.ev-pc .specs{grid-template-columns:repeat(2,minmax(0,1fr))}

.ev-pc .specs div:last-child:nth-child(odd){grid-column:1/-1}

.ev-pc .specs dd small{font:500 10px var(--mono);color:var(--mut);margin-left:4px;text-transform:uppercase;letter-spacing:.08em}

.ev-read{margin-bottom:8px}

.ev-read .ev-notes{margin:0;padding:0 0 0 20px;display:grid;gap:12px;font-size:13.5px;line-height:1.6;color:var(--tx2)}

.ev-read .ev-notes b{color:var(--tx)}

.evx-tiers{gap:12px}

.evx-t.card:not(#_){padding:var(--space-4);gap:var(--space-3)}

.evx-t .bar{margin-top:2px}

.evx-mx .tw:not(#_){border:0;background:none;padding:0;box-shadow:none}

.evx-mx .evx-lg{padding-top:4px}

.evx-mx .evx-note{margin:0}

@media (max-width:760px){
.dl-groups:not(#_){grid-template-columns:1fr}
.fc-f:not(#_){gap:12px;padding:12px}
}

@media (max-width:560px){
.fc-f .btn:not(#_){width:var(--hit);min-height:var(--hit);padding:0;justify-content:center}
.fc-f .btn span{display:none}
.fc:not(#_){padding:16px}
}

.rjd{
display:grid;gap:12px;padding:12px;border:1px solid var(--bd2);border-radius:var(--r-lg,18px);
background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--tx) 3%),var(--surface));box-shadow:var(--lift)}

.rjd-c{
border:1px solid var(--bd);border-radius:var(--r-md);background:color-mix(in srgb,var(--bg) 55%,transparent);overflow:hidden}

.rjd-c header{
display:flex;align-items:center;gap:12px;padding:var(--space-3);background:color-mix(in srgb,var(--acc) 9%,var(--surface));
border-bottom:1px solid var(--bd)}

.rjd-c h3{margin:0;font:600 13.5px/1.2 var(--sans);letter-spacing:-.005em;flex:1;min-width:0}

.rjd-i{
width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-sm);
background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);flex:none}

.rjd-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.rjd-t{
width:34px;height:20px;border-radius:var(--r-pill);background:var(--acc);position:relative;flex:none;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

.rjd-t::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--on-acc)}

.rjd-n{
display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--on-acc);
font:700 11px/1 var(--mono);font-style:normal;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}

.rjd-c header .rjd-n{order:3}

.rjd-c header .rjd-t{order:4}

.rjd-r{display:grid;gap:3px;padding:12px 12px;border-top:1px solid color-mix(in srgb,var(--bd) 70%,transparent);position:relative}

.rjd-r:first-of-type{border-top:0}

.rjd-r span{font-size:12px;color:var(--tx2)}

.rjd-r b{font:600 12.5px/1.35 var(--mono);color:var(--tx);overflow-wrap:anywhere}

.rjd-r .rjd-n{display:none}

.rjd-real{margin-top:12px}

.rjd-real summary{cursor:pointer;color:var(--tx2);font-size:12px;min-height:var(--hit);display:flex;align-items:center}

.rjd-real img{
display:block;width:100%;height:auto;max-width:300px;margin:8px 0;border-radius:var(--r-md);border:1px solid var(--bd2)}

.rjd-real span{display:block;color:var(--mut);font-size:11.5px}

/* == charts v2: steel / amber / ivory == */
:root{--s-raw:#8FA4C2;--ch-tgt:#E3DBC8}

:root[data-theme="light"]{--s-raw:#5A7394;--ch-tgt:#4B4435}

.chartbox{
background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--tx) 3%,var(--deep)),var(--deep));
border:1px solid var(--bd2);border-radius:var(--r-lg,16px);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tx) 8%,transparent),var(--e2,none)}

.chartbox svg text{font-family:var(--mono)}

.tip{
background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);
-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid color-mix(in srgb,var(--tx) 14%,transparent);
border-radius:var(--r-md);padding:var(--space-3);
box-shadow:var(--shadow-pop),inset 0 1px 0 color-mix(in srgb,var(--tx) 8%,transparent);min-width:168px}

.tip > b{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--bd);color:var(--acc);letter-spacing:.14em}

.tip div{font-size:11.5px;line-height:1.7;color:var(--tx2);align-items:center}

.tip div b{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--tx);font-weight:600}

.tip div > span{display:inline-flex;align-items:center;white-space:nowrap}

.tip .tsw{display:inline-block;width:16px;height:8px;margin-right:8px;flex:none}

.tip .dl{margin-top:4px;padding-top:8px;border-top:1px dashed var(--bd2)}

.legend{gap:8px}

.legend button{
min-height:34px;padding:0 16px 0 12px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--bd2);
font:600 10px var(--mono);letter-spacing:.1em;box-shadow:var(--e1)}

.legend button:hover{border-color:color-mix(in srgb,var(--tx) 30%,transparent)}

.legend button[aria-pressed="false"]{text-decoration:none}

.legend button[aria-pressed="false"] svg{opacity:.5}

#heroSvg text{font-family:var(--mono);letter-spacing:.02em}

/* == polish pass: rhythm, radii, grids, hit areas == */
:where(h2,h3){line-height:1.3}

.dcard:not(#_),.card.hw-card:not(#_),.tw:not(#_),.stat:not(#_),.app-card:not(#_),.faq-i:not(#_){border-radius:var(--r-lg)}

@media (min-width:640px){
.g-stat:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))}
}

#heroOut{text-wrap:balance}

.lnk,.verify a,a[href$="SHA256SUMS.txt"]:not(.btn){display:inline-block;padding-block:8px}

@media (hover:none),(max-width:768px){
.lnk,.verify a,a[href$="SHA256SUMS.txt"]:not(.btn){padding-block:var(--space-3)}
}

:root{--v7-radius-xl:var(--r-2xl);--v7-radius-lg:var(--r-lg);--v7-radius-md:var(--r-md);--v7-content-width:var(--content-max)}

body.n-on .shell,body.n-on main{min-width:0}

body.n-on main#main{max-width:var(--v7-content-width);gap:clamp(24px,3vw,36px)}

#overview{overflow:hidden;border-radius:var(--v7-radius-xl)}

#overview .hero{align-items:center;gap:clamp(24px,4vw,56px)}

#overview .hero-copy{min-width:0}

#overview .hero h1{max-width:11ch;text-wrap:balance}

#overview .hero .lead{max-width:49ch;margin-top:20px;font-size:clamp(15px,1.25vw,18px);line-height:1.65;text-wrap:pretty}

#overview .tag{min-height:32px;letter-spacing:.08em}

#overview .hero-facts{max-width:590px;margin-top:28px}

#overview .hero-viz{
min-width:0;padding:clamp(12px,2vw,20px);border:1px solid var(--bd);border-radius:var(--v7-radius-lg);
background:color-mix(in srgb,var(--surface) 78%,transparent)}

#overview .hero-viz svg{max-width:100%}

#setup .sec-h{align-items:end}

#setup .sec-h > div{max-width:72ch}

#setup .sec-h h2,.flow .sec-h h2{letter-spacing:-.035em;text-wrap:balance}

#setup .steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px;margin:24px 0 0;padding:0}

#setup .steps3 > li{
min-width:0;height:100%;padding:clamp(16px,1.7vw,24px);border:1px solid var(--bd2);border-radius:var(--v7-radius-lg);
background:var(--surface);box-shadow:var(--e1)}

#setup .st-h{align-items:flex-start;gap:12px}

#setup .st-h h2{line-height:1.3;letter-spacing:-.025em}

#setup .st-h .sub{margin-top:4px;line-height:1.5}

#outs{display:grid;gap:12px}

#outs .out-c{min-height:76px;border-radius:var(--v7-radius-md);text-align:left}

#snd{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:12px;overflow:visible;padding:2px;
scroll-snap-type:none}

#snd .snd-c{
min-width:0;min-height:180px;padding:var(--space-3);border-radius:var(--v7-radius-md);text-align:left;scroll-snap-align:unset}

#snd .snd-h{align-items:center;flex-wrap:wrap;gap:8px}

#snd .snd-d{min-height:4.5em;line-height:1.5;text-wrap:pretty}

.profile-metrics{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2);
padding-top:var(--space-2);border-top:1px solid var(--bd)}

.profile-metrics span{display:grid;gap:2px;min-width:0}

.profile-metrics b{font:600 12px/1.3 var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}

.profile-metrics small{color:var(--mut);font:500 9px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase}

#step3 .get-grid{grid-template-columns:1fr;gap:16px}

#step3 .get-grid > div:last-child{min-width:0}

#step3 #getBtn{width:100%;justify-content:center;min-height:50px;margin-top:12px}

#step3 .verify{margin-top:12px}

#setup .cmp-hook{
margin-top:20px;border:1px solid var(--bd2);border-radius:var(--v7-radius-lg);background:var(--surface);
padding:clamp(16px,2vw,24px)}

#setup .cmp-top{align-items:baseline;flex-wrap:wrap;gap:8px 20px}

#setup .cmp-top h2{font-size:18px;letter-spacing:-.025em}

#apply .apply-grid{align-items:start;gap:clamp(16px,2.5vw,28px)}

#apply .todo > li{border-radius:var(--v7-radius-md)}

#files .dl-tools{align-items:center}

#files .dl-groups{align-items:start}

#files .fc{border-radius:var(--v7-radius-lg)}

#evidence .evx-t,#evidence .evx-mx,#evidence .ev-read{border-radius:var(--v7-radius-lg)}

#evidence .ev-read .ev-notes{max-width:88ch}

#status .stat,#hardware .hw-card,#hardware .app-card,#faq .faq-i{border-radius:var(--v7-radius-md)}

#faq .faq-i summary{min-height:64px}

body.n-pg main.pg{max-width:1040px;gap:24px}

body.n-pg main.pg > .lead{max-width:68ch;font-size:16px;line-height:1.65}

body.n-pg .fq,body.n-pg .sel{gap:12px}

body.n-pg .fq label{display:grid;gap:8px;color:var(--tx2);font-size:12px;font-weight:600}

body.n-pg .fq select,body.n-pg .sel select{width:100%;min-height:48px;border-radius:var(--v7-radius-md)}

body.n-pg .pick,body.n-pg .cmpg,body.n-pg .pg-about{border-radius:var(--v7-radius-lg)}

.use-profile{
display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:12px;padding:0 16px;
border:1px solid var(--tx);border-radius:var(--r-pill);background:var(--tx);color:var(--bg);font-size:13px;font-weight:700;
text-decoration:none}

.use-profile:hover{opacity:.86}

@media (max-width: 1050px){
#setup .steps3{grid-template-columns:1fr}
#setup .steps3 > li{height:auto}
#step3 .get-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

@media (max-width: 760px){
#overview{padding:clamp(20px,5vw,28px)}
#overview .hero{grid-template-columns:minmax(0,1fr)}
#overview .hero h1{max-width:9ch}
#overview .hero-viz{margin-top:4px}
#snd{grid-template-columns:repeat(2,minmax(0,1fr))}
#snd .snd-c:last-child:nth-child(odd){grid-column:1 / -1}
#step3 .get-grid{grid-template-columns:1fr}
#files .dl-tools{display:grid}
}

@media (max-width: 480px){
#snd{grid-template-columns:1fr}
#snd .snd-c,#snd .snd-c:last-child:nth-child(odd){grid-column:auto;min-height:0}
#overview .hero-cta{display:grid;grid-template-columns:1fr}
#overview .hero-cta .btn{justify-content:center}
}

@media (prefers-reduced-motion: reduce){
#overview *,#setup *,#apply *,#files *,#evidence *{
scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important}
}

/* == v7.1 fixes (found in the rendered audit) == */
#outs{grid-template-columns:repeat(2,minmax(0,1fr))}

#outs .out-c{min-width:0}

#outs .out-c em{white-space:nowrap}

@media (min-width: 1051px){
#setup .steps3{
grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"s1 s3" "s2 s3";grid-template-rows:auto 1fr}
#setup .steps3 > li{height:auto}
#setup .steps3 > li{align-self:start}
#setup #step1{grid-area:s1}
#setup #step2{grid-area:s2}
#setup #step3{grid-area:s3;position:sticky;top:16px}
}

@media (max-width: 760px){
#outs{grid-template-columns:1fr}
}

#getSt:empty{display:none}

.verify summary{
display:flex;align-items:center;gap:8px;min-height:44px;color:var(--tx2);font-size:13.5px;font-weight:600;cursor:pointer;
list-style:none}

.verify summary::-webkit-details-marker{display:none}

.verify summary::before{
content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(-45deg);transition:transform .15s ease}

.verify[open] summary::before{transform:rotate(45deg)}

.verify summary:hover{color:var(--tx)}

.verify dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:12px 0 0;font-size:12.5px}

.verify dd{margin:0;overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){
.verify summary::before{transition:none}
}

ol.why,ul.why{display:block;margin:12px 0;font-size:14px;font-weight:400;line-height:1.55;text-decoration:none;white-space:normal}

#res{display:flex;flex-direction:column;align-items:flex-start;gap:4px}

#res .use-profile{margin-top:12px}

.evrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.evc{
display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:2px 8px;border:1px solid var(--bd2);
border-radius:var(--r-pill);color:var(--tx2);font:600 10.5px/1.3 var(--mono);letter-spacing:.03em;white-space:nowrap}

.evc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mut)}

.evc[data-s="ok"]::before{background:var(--tx)}

.evc[data-s="calc"]::before{background:transparent;border:1.5px solid var(--tx2)}

.evc[data-s="warn"]::before{background:var(--amber)}

.evc[data-s="bad"]::before{background:var(--err)}

.evc[data-s="exp"]{border-style:dashed;color:var(--tx)}

.evc[data-s="exp"]::before{background:var(--amber)}

.cmp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px}

.cmp-ovl{display:inline-flex;align-items:center;gap:8px;color:var(--tx2);font-size:12px;font-weight:600}

.cmp-ovl select{
min-height:var(--hit);max-width:100%;padding:0 12px;border:1px solid var(--bd2);border-radius:var(--v7-radius-md);
background:var(--surface);color:var(--tx);font:inherit}

.sticky-dock{display:none}

@media (max-width: 760px){
.sticky-dock:not([hidden]){
position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:var(--z-dock);display:flex;align-items:center;
justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border:1px solid var(--bd2);border-radius:var(--v7-radius-lg);
background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:var(--e4)}
.sticky-dock .dk-t{display:grid;gap:2px;min-width:0}
.sticky-dock .dk-t b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.sticky-dock .dk-s{overflow:hidden;color:var(--mut);font:500 10.5px/1.3 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.sticky-dock .btn{flex:none;min-height:44px}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
}

@media (prefers-reduced-motion: reduce){
.sticky-dock{transition:none}
}

/* == v8 micro-polish == */
:where(h1,h2,h3,h4){line-height:1.2}

code,kbd,samp{line-height:1;vertical-align:baseline}

.legend button{position:relative}

.legend button::after{content:"";position:absolute;inset:-5px 0}

a,button,summary,.btn,.nb,.nl,.n-chip,.snd-c,.out-c,.rec,.file-card,.fc,.ft-l a,.legend button,.seg button{
transition:var(--tr-ui)}

@media (hover:hover){
.fc:hover,.rec:hover,.file-card:hover{box-shadow:var(--shadow-hover)}
.lnk:hover,.pnav a:hover,.v6ev a:hover{color:var(--tx)}
.nb:hover,.sb-tg:hover,.mh-m:hover,.mh-th:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--bd2))}
}

.btn:active,.nb:active,.sb-tg:active,.mh-m:active,.mh-th:active,.n-chip:active,.snd-c:active,.out-c:active,.rec:active,.file-card:active,.ft-l a:active,.legend button:active,.seg button:active{
transform:scale(.98)}

:focus-visible{outline:2px solid var(--acc)!important;outline-offset:2px!important}

.ck input:focus-visible + .box{outline-color:var(--acc)}

@media (forced-colors:active){
:focus-visible{outline-color:Highlight!important}
}

@media (max-width:760px){
body:has(.sticky-dock:not([hidden])) .toasts{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
.btn:active,.nb:active,.snd-c:active,.out-c:active,.rec:active,.file-card:active,.legend button:active,.seg button:active{
transform:none}
}

/* == v8 Touch Target Overrides == */
.btn.sm,.vt button,.chip[role="button"],.chip[tabindex="0"]{
min-height:var(--hit)!important;display:inline-flex;align-items:center;justify-content:center}

/* == v8.1 second pass == */
.legend button[aria-pressed="false"]{opacity:.65}

.fc-l :focus-visible,.rjd-c :focus-visible,.tw :focus-visible,.appfig-i :focus-visible,.verify :focus-visible{
outline-offset:-2px!important}

.tw:focus-visible{outline-offset:-2px!important}

@media (max-width:767px){
html{scroll-padding-top:calc(var(--hh,60px) + env(safe-area-inset-top,0px) + var(--space-2))}
}

@media (max-width:760px){
body:has(.sticky-dock:not([hidden])){padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

code,.sha,.dl-size,.dl-gc,.evt td,.profile-metrics b{font-variant-numeric:tabular-nums;font-feature-settings:"zero" 0}

.evt-b,.evc,.fc-rec,.sb-badge{letter-spacing:.05em}

/* == v8.2 checkbox hit area == */
.ck input{inset:-8px}

/* == v8.2 checkbox hit area == */
.ck input{inset:-8px;width:auto;height:auto}

@media (max-width:767px){
#setup #step2 #snd{scroll-padding-inline:var(--pp,16px);gap:var(--space-3)}
#setup #step2 #snd .snd-c,#setup #step2 #snd .snd-c:last-child:nth-child(odd){flex:0 0 min(80%,300px)}
#setup #step2 #snd .snd-c[aria-pressed="true"]{
box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 70%,transparent),0 12px 28px -16px color-mix(in srgb,var(--acc) 60%,transparent)}
}

/* == v8.5 mobile responsiveness pass == */
html{-webkit-tap-highlight-color:transparent}

a,button,summary,select,label,[role="button"]{touch-action:manipulation}

img,video,canvas{max-width:100%;height:auto}

pre{max-width:100%;overflow-x:auto}

body{overflow-x:clip}

.tip{max-width:calc(100vw - 24px)}

@media (hover:none){
.rec:hover,.file-card:hover,.fc:hover,.snd-c:hover,.out-c:hover{transform:none}
}

@media (max-width:767px){
html:has(.sb[data-open="true"]){overflow:hidden}
select,input,textarea{font-size:16px}
.cmp-ovl select{font-size:16px}
#overview .hero h1{font-size:clamp(34px,11vw,56px);letter-spacing:-.045em}
body.n-pg main.pg > h1{letter-spacing:-.03em}
.pg{padding-inline:max(var(--space-4),env(safe-area-inset-left))}
}

@media (max-width:480px){
.sel{grid-template-columns:1fr}
.all-dl{display:grid;grid-template-columns:1fr}
.all-dl .btn{justify-content:center;width:100%}
.verify dl{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
.verify dt{margin-top:var(--space-2)}
}

@media (max-width:359px){
.pg{padding-inline:var(--space-3)}
#overview{padding:var(--space-4)}
.btn{white-space:normal;text-align:center}
}

@media (max-height:480px) and (orientation:landscape){
.mh{position:static}
html{scroll-padding-top:var(--space-2)}
.sticky-dock:not([hidden]){left:auto;width:min(360px,50vw);right:max(12px,env(safe-area-inset-right,0px))}
body:has(.sticky-dock:not([hidden])){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* == v9 theme: OKLCH tokens, WCAG-checked by tools/contrast.py == */
@supports (color:light-dark(red,blue)) and (color:oklch(.5 .1 80)){
:root:root{
color-scheme:dark;accent-color:var(--acc);--bg:light-dark(oklch(.955 .006 85),oklch(.15 .004 85));
--surface:light-dark(oklch(.985 .004 85),oklch(.19 .004 85));--elev:light-dark(oklch(.97 .005 85),oklch(.23 .005 85));
--deep:light-dark(oklch(.94 .006 85),oklch(.125 .004 85));--tx:light-dark(oklch(.22 .008 85),oklch(.95 .005 85));
--tx2:light-dark(oklch(.38 .01 85),oklch(.8 .008 85));--mut:light-dark(oklch(.48 .012 85),oklch(.7 .01 85));
--ctl:light-dark(oklch(.6 .01 85),oklch(.55 .008 85));--acc:light-dark(oklch(.5 .12 70),oklch(.82 .14 82));
--acc-ink:light-dark(oklch(.42 .11 65),oklch(.9 .09 85));--on-acc:light-dark(oklch(.99 .003 85),oklch(.15 .01 85));
--err:light-dark(oklch(.5 .17 27),oklch(.75 .15 25));--ok:light-dark(oklch(.48 .12 150),oklch(.78 .15 150));
--warn:light-dark(oklch(.52 .13 50),oklch(.78 .15 55));--info:light-dark(oklch(.48 .1 245),oklch(.78 .09 245));
--bd:color-mix(in oklab,var(--tx) 10%,transparent);--bd2:color-mix(in oklab,var(--tx) 18%,transparent);--amber:var(--warn);
--success:var(--ok);--warning:var(--warn);--danger:var(--err);--focus:var(--acc)}
:root:root[data-theme="light"]{color-scheme:light}
}

/* == /v9 theme == */
/* == v9 type + layout scale (1.2 at 360px to 1.333 at 1280px) == */
:root{
--fs-xs:.75rem;--fs-s:.875rem;--fs-0:clamp(1rem,.951rem + .22vw,1.125rem);--fs-1:clamp(1.2rem,1.148rem + .23vw,1.333rem);
--fs-2:clamp(1.44rem,1.308rem + .59vw,1.777rem);--fs-3:clamp(1.728rem,1.477rem + 1.12vw,2.369rem);
--fs-4:clamp(2.074rem,1.65rem + 1.88vw,3.157rem);--fs-5:clamp(2.488rem,1.815rem + 2.99vw,4.209rem);--fw-ui:500;--fw-strong:600;
--fw-head:700;--fw-display:800;--ls-head:-.025em;--ls-display:-.04em;--ls-caps:.08em;--measure:68ch;
--gutter:clamp(1rem,.6rem + 1.6vw,2rem)}

body{font-size:var(--fs-0);line-height:1.6}

h1,h2,h3{font-weight:var(--fw-head);line-height:1.2;letter-spacing:var(--ls-head)}

h4{font-weight:var(--fw-strong)}

#overview .hero h1{font-size:var(--fs-5);font-weight:var(--fw-display);line-height:1.02;letter-spacing:var(--ls-display)}

body.n-pg main.pg > h1{font-size:var(--fs-4);line-height:1.1;letter-spacing:var(--ls-display)}

#setup .sec-h h2,.flow .sec-h h2{font-size:var(--fs-3)}

#setup .st-h h2{font-size:var(--fs-1)}

.pg{padding-inline:var(--gutter)}

:where(p,li,.lead){max-width:var(--measure)}

@media (max-width:767px){
#setup #step2{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
#setup #step2 .st-h{margin-bottom:var(--space-3)}
#setup #step2 #snd{
position:relative;display:flex;gap:var(--space-3);margin:0;padding:var(--space-2) 0 var(--space-4);overflow-x:auto;
overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0;overscroll-behavior-x:contain;scrollbar-width:none;
background:none;border:0;border-radius:0;box-shadow:none}
#setup #step2 #snd::-webkit-scrollbar{display:none}
#setup #step2 #snd .snd-c,#setup #step2 #snd .snd-c:last-child:nth-child(odd){
flex:0 0 min(84%,300px);grid-column:auto;min-height:0;scroll-snap-align:start}
#setup #step2 #snd .snd-c[aria-pressed="true"]{
box-shadow:var(--lift),0 14px 28px -20px color-mix(in srgb,var(--acc) 60%,transparent)}
#setup #step2 #snd .snd-c:focus-visible{outline-offset:-2px!important}
}

/* == v13 compare overlay: no overflow at 320px == */
@media (max-width:480px){
.cmp-ovl{display:flex;flex-wrap:wrap;align-items:center;width:100%;min-width:0;gap:var(--space-2)}
.cmp-ovl select{flex:1 1 9rem;width:auto;min-width:0;max-width:100%}
}