.perf-hero{background:var(--teal);color:var(--white);padding:clamp(1rem,2.3vw,2rem) 0}
.perf-hero .eyebrow{color:#edd09c;margin-bottom:.35rem}
.perf-hero h1{font-size:clamp(1.85rem,4vw,3.65rem);line-height:1.16;margin-bottom:.4rem;text-wrap:balance}
.perf-hero p:not(.eyebrow){font-size:1rem;color:#f0eee1;margin-bottom:.55rem}
.perf-jumps{display:flex;gap:.6rem 1rem;flex-wrap:wrap;list-style:none;margin:1.6rem 0 0;padding:0}
.perf-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .9rem;border:1px solid #b6c3b9;text-decoration:none;color:inherit}
.perf-jumps a:hover{background:#fffdf6;color:#143e3c}
.perf-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;list-style:none;margin:2rem 0 1.25rem;padding:1px;background:var(--line)}
.perf-pipeline li{padding:clamp(1.1rem,2vw,1.8rem);background:var(--white)}
.perf-pipeline h3,.perf-metrics h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.perf-pipeline p:last-child,.perf-metrics p:last-child,.perf-compare-grid p:last-child{margin-bottom:0}
.perf-step-icon{width:60px;height:54px;color:var(--teal);margin:0 0 1.2rem}
.perf-note{font-size:.88rem;color:var(--muted,#4c625d);max-width:78ch}
.perf-compare{background:var(--soft);border-block:1px solid var(--line)}
.perf-selector{margin-top:1.5rem;border:0;padding:0;min-inline-size:0}
.perf-selector legend{font-weight:700;margin-bottom:.65rem}
.perf-selector input[type=radio]{inline-size:1rem;block-size:1rem;accent-color:var(--teal);margin:0 .2rem 0 0;vertical-align:middle}
.perf-selector label{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .65rem .3rem .2rem;cursor:pointer;font-weight:700}
.perf-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0 0}
.perf-compare-grid .card{display:flex;flex-direction:column}
.perf-compare-grid h3{font-size:clamp(1.5rem,3vw,2.35rem)}
.perf-demo-view{display:grid;min-height:136px;place-items:center;margin:0 0 1rem;background:#eeeee5;border:1px solid var(--line);overflow:hidden}
.perf-demo-view[aria-hidden=true]{user-select:none}
.perf-demo-view .perf-fiber{inline-size:min(100%,420px);block-size:auto;aspect-ratio:8 / 3}
.perf-disc{display:none}
#perf-section:checked~.perf-compare-grid .perf-long,#perf-section:checked~.perf-compare-grid .perf-whole-label,#perf-whole:checked~.perf-compare-grid .perf-section-label{display:none}
#perf-section:checked~.perf-compare-grid .perf-disc{display:block}
.perf-compare-grid .perf-section-label,.perf-compare-grid .perf-whole-label{margin:.7rem 0 0;font-size:.9rem;color:#465953}
.perf-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.perf-metric-ref{display:block;margin:.25rem 0 .85rem;font-size:.86rem;font-weight:700;color:var(--teal)}
.perf-evidence{border-top:1px solid var(--line);background:var(--white)}
.perf-evidence .grid{grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.perf-evidence ul{padding-left:1.2rem}
.perf-evidence li+li{margin-top:.55rem}
.perf-next{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0}
@media(max-width:860px){.perf-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.perf-pipeline,.perf-metrics,.perf-evidence .grid,.perf-compare-grid{grid-template-columns:1fr}.perf-demo-view{min-height:112px}}