:root{--bg:#081017;--panel:#0e1922;--panel2:#111f2a;--text:#edf5f7;--muted:#91a4ad;--line:#20333d;--accent:#62e6a5;--accent2:#62b9e6;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.narrow{max-width:850px}.hero{padding:72px 0 64px;background:radial-gradient(circle at 80% 10%,#143547 0,transparent 38%),linear-gradient(180deg,#0b151d,#081017);border-bottom:1px solid var(--line)}
.brand{font-size:25px;font-weight:900;letter-spacing:-1px}.brand span{color:var(--accent)}.kicker,.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.13em;font-size:.78rem;text-transform:uppercase}
h1{font-size:clamp(3rem,7vw,6.5rem);line-height:.95;letter-spacing:-.055em;margin:.35em 0 .25em;max-width:950px}h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.035em;margin:.15em 0 .7em}h3{margin-top:0}
.lead,.intro{max-width:780px;color:#bfd0d7;font-size:1.15rem}.hero nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}.hero nav a{color:var(--text);text-decoration:none;border:1px solid var(--line);padding:9px 14px;border-radius:999px}.hero nav a:hover{border-color:var(--accent);color:var(--accent)}
.section{padding:70px 0}.section.alt{background:#0a141b;border-block:1px solid var(--line)}.card,.result-card,.comparison-card,.matrix>div,.placeholder{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}.result-layout,.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.verified-badge{display:inline-block;background:rgba(98,230,165,.12);color:var(--accent);border:1px solid rgba(98,230,165,.4);padding:7px 11px;border-radius:999px;font-weight:800}.result-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.compression-big{font-size:clamp(2.8rem,6vw,5rem);line-height:1;font-weight:900;letter-spacing:-.05em;color:var(--accent)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}.note{color:var(--muted);font-size:.9rem}
.table-wrap,.matrix,.benchmark-matrix-table,.bm-grid{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}.matrix table,.benchmark-matrix-table table{min-width:650px}.ok,.pass{color:var(--accent);font-weight:800}footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted)}footer .wrap{display:flex;justify-content:space-between;gap:20px}footer strong{color:var(--text)}
@media(max-width:650px){.wrap{width:min(calc(100% - 28px),var(--max))}.hero{padding-top:48px}.section{padding:52px 0}.result-heading{display:block}.verified-badge{margin-top:12px}footer .wrap{display:block}}


/* Compression-level benchmark UX */
[data-stcp-compression-levels] .clb-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 22px}
[data-stcp-compression-levels] .clb-label{color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-right:4px}
[data-stcp-compression-levels] .clb-controls button{appearance:none;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:inherit;font-size:.86rem;font-weight:750;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
[data-stcp-compression-levels] .clb-controls button:hover{border-color:var(--accent)}
[data-stcp-compression-levels] .clb-controls button.active{background:var(--accent);color:#071117;border-color:var(--accent);box-shadow:0 0 0 2px rgba(98,230,165,.18)}
[data-stcp-compression-levels] .clb-transport{margin-top:28px}
[data-stcp-compression-levels] .clb-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
[data-stcp-compression-levels] table{min-width:860px}
[data-stcp-compression-levels] th,[data-stcp-compression-levels] td{transition:background .12s,box-shadow .12s}
[data-stcp-compression-levels] th.selected,[data-stcp-compression-levels] td.selected{background:rgba(98,230,165,.105);box-shadow:inset 2px 0 rgba(98,230,165,.34),inset -2px 0 rgba(98,230,165,.34)}
[data-stcp-compression-levels] thead th.selected{color:var(--accent);box-shadow:inset 2px 0 rgba(98,230,165,.34),inset -2px 0 rgba(98,230,165,.34),inset 0 2px var(--accent)}
[data-stcp-compression-levels] .clb-default{display:block;color:var(--accent);font-size:.64rem;letter-spacing:.08em;margin-top:2px}
[data-stcp-compression-levels] .clb-delta{display:block;margin-top:3px;font-size:.74rem;font-weight:800;white-space:nowrap}
[data-stcp-compression-levels] .clb-delta.improved{color:#62e6a5}
[data-stcp-compression-levels] .clb-delta.worse{color:#ff7b7b}
[data-stcp-compression-levels] .clb-delta.neutral{color:var(--muted)}
[data-stcp-compression-levels] .clb-note{color:var(--muted);font-size:.9rem;margin-top:18px}

/* OFF baseline delta: semantic color stays green/red, label is visually separated. */
[data-stcp-compression-levels] .clb-delta-off {
  margin-top: 1px;
  opacity: .92;
}

/* Benchmark matrix extrema: best = light green, worst = light blue. */
[data-stcp-benchmark-matrix] td.matrix-best{background:rgba(98,230,165,.14)}
[data-stcp-benchmark-matrix] td.matrix-worst{background:rgba(98,185,230,.14)}