.bench-title{margin:var(--space-6) 0 var(--space-4);font:600 clamp(1.5rem, 3vw, 2rem) / 1.15 var(--font-display)}.vh{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.page>.controls,.page>.code-section,.stage{gap:var(--space-3);padding:var(--space-4);border:1px solid var(--silver);grid-template-columns:minmax(0,1fr);margin-block-end:var(--space-4);display:grid}.stage-wrap{--stage-height:336px}@media (width>=960px) and (height>=760px){.stage-wrap{z-index:2;position:sticky;inset-block-start:var(--space-2)}.stage{background:var(--bg)}}.stage-bar{gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.stage-status{font:400 .75rem/1.4 var(--font-mono);color:var(--dim)}.stage-screen{--host-bg:var(--lightningcss-light,oklch(98% .006 250))var(--lightningcss-dark,oklch(21% .03 258));--host-side:var(--lightningcss-light,oklch(90% .014 250))var(--lightningcss-dark,oklch(18% .03 258));min-height:var(--stage-height);border:1px solid var(--rule);background:var(--host-bg);border-radius:8px;grid-template-columns:112px minmax(0,1fr);font:.875rem/1.5 system-ui,sans-serif;display:grid;position:relative;overflow:hidden}.stage-screen .sf-guide,.stage-screen .stage-ring{position:absolute}.stage-ring{inset:0}.stage-screen .sf-guide[inert] .sf-button{opacity:.5;cursor:not-allowed}.stage-note{opacity:.8;margin:0;font-size:.8125rem;font-style:italic}.host-side{gap:var(--space-2);padding:var(--space-3);background:var(--host-side);border-inline-end:1px solid var(--rule);align-content:start;display:grid}.host-side span,.host-filters span{padding:var(--space-1) var(--space-2);border-radius:4px}.current{background:color-mix(in oklch, var(--silver) 16%, transparent);font-weight:600}.host-main{gap:var(--space-3);padding:var(--space-4);align-content:start;display:grid}.host-title{margin:0;font-size:1.25rem;font-weight:700}.host-bar{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.host-target{display:inline-flex;position:relative}.host-button{padding:var(--space-1) var(--space-4);color:var(--bg);background:var(--silver);border:0;border-radius:4px;font:600 .875rem/1.5 system-ui,sans-serif}.host-filters{gap:var(--space-1);display:flex}.host-filters span{border:1px solid var(--rule)}.host-list{margin:0;padding:0;list-style:none}.host-list li{padding-block:var(--space-2);border-block-end:1px solid var(--rule)}.controls{align-content:start}.presets,.choice{gap:var(--space-2);border:0;margin:0;padding:0;display:grid}.presets legend,.choice legend{padding:0;font-weight:600}.preset-options,.choice-options{gap:var(--space-1);flex-wrap:wrap;display:flex}.preset,.choice-options span,.seg button,.copy,.tabs button{min-block-size:24px;padding:0 var(--space-2);border:1px solid var(--rule);color:var(--dim);font:400 .75rem/1.4 var(--font-mono);cursor:pointer;background:0 0;border-radius:4px;align-items:center;display:inline-flex}.preset{min-block-size:32px;padding-inline:var(--space-3)}.group{gap:var(--space-3);border-block-start:1px solid var(--rule);padding-block-start:var(--space-3);display:grid}.group .label small{font:400 .75rem/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--dim);margin-inline-start:var(--space-2)}.choices{gap:var(--space-3) var(--space-6);grid-template-columns:repeat(auto-fit,minmax(176px,1fr));display:grid}.choice-options label{position:relative}.choice-options input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.choice-options input:checked+span,.preset[aria-pressed=true],.seg [aria-pressed=true],.tabs [aria-selected=true]{background:var(--silver);border-color:var(--silver);color:var(--bg)}.choice-options input:focus-visible+span,.preset:focus-visible,.seg button:focus-visible,.copy:focus-visible,.tabs button:focus-visible,.code-panel pre:focus-visible{outline:3px solid var(--silver);outline-offset:2px}.choice-options label:hover span,.preset:hover,.seg button:hover,.copy:hover,.tabs button:hover{border-color:var(--silver);color:var(--ink)}.choice-options input:checked:hover+span,.preset[aria-pressed=true]:hover,.seg [aria-pressed=true]:hover,.tabs [aria-selected=true]:hover{color:var(--bg)}@media (prefers-reduced-motion:no-preference){.preset,.choice-options span,.seg button,.copy,.tabs button{transition:background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out}}.hint{color:var(--dim);margin:0;font-size:.8125rem;line-height:1.4}.code-bar{gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.tabs,.code-tools,.seg{gap:var(--space-1);flex-wrap:wrap;align-items:center;display:flex}.seg{gap:0}.seg button{border-radius:0}.seg button:first-child{border-start-start-radius:4px;border-end-start-radius:4px}.seg button:last-child{border-start-end-radius:4px;border-end-end-radius:4px}.code-tools{gap:var(--space-3)}.code-panel pre{padding:var(--space-3) var(--space-4);border:1px solid var(--rule);font:400 .75rem/1.6 var(--font-mono);white-space:pre;border-radius:4px;margin:0;overflow-x:auto}.row{inline-size:max-content;min-inline-size:100%;display:block}.mark{inline-size:2ch;color:var(--dim);display:inline-block}.row-added{background:color-mix(in oklch, var(--action) 38%, transparent)}.row-removed{color:var(--dim);background:oklch(60% .2 25/.22)}@media (width<=640px){.stage-screen{--stage-height:400px;grid-template-columns:72px minmax(0,1fr)}.stage-wrap{--stage-height:400px}}
