.hv{margin-top:var(--space-l);border:1px solid var(--rule);border-radius:var(--radius);background:var(--ground);font-family:var(--font-mono);font-size:var(--step--1);line-height:1.45;color:var(--ink);min-width:0}
.hv .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hv-case{margin:0;padding:var(--space-xs) var(--space-s);border-bottom:1px solid var(--rule);font-size:var(--step--2);letter-spacing:.04em;color:var(--muted);overflow-wrap:anywhere;min-height:2.9em;max-width:none}
.hv-grid{display:grid;grid-template-columns:minmax(0,1fr) 18rem}
.hv-stage{position:relative;height:clamp(19rem,46vh,32rem);min-width:0}
.hv-stage canvas{display:block;width:100%;height:100%}
.hv-legend{position:absolute;left:var(--space-xs);bottom:var(--space-2xs);right:var(--space-xs);margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center;font-size:var(--step--2);color:var(--muted);pointer-events:none}
.hv-lg{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.hv-lg.un{background:#212822}.hv-lg.vis{background:#577566}.hv-lg.dis{border:1.5px solid #577566}.hv-lg.com{background:var(--verdigris);box-shadow:0 0 6px rgba(127,174,152,.55)}
.hv-panel{border-left:1px solid var(--rule);padding:var(--space-s);min-width:0;font-size:var(--step--2)}
.hv-now{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xs) var(--space-s);margin:0 0 var(--space-s)}
.hv .k,.hv-counts dt{display:block;color:var(--muted);font-size:var(--step--2);letter-spacing:.04em}
.hv-now b{font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.hv-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 var(--space-s)}
.hv-counts div{border:1px solid var(--rule);border-radius:var(--radius);padding:4px 7px;min-width:0}
.hv-counts dd{margin:0;font-size:var(--step--1);color:var(--verdigris);font-variant-numeric:tabular-nums}
.hv-focus{min-height:5em;max-width:none;border-left:2px solid var(--rule-strong);padding:2px 0 2px var(--space-xs);overflow-wrap:anywhere}
.hv .bar{height:3px;background:var(--rule);margin-top:5px;overflow:hidden}
.hv .bar i{display:block;height:100%;background:#577566;transition:width .6s ease}
.hv-controls{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;padding:var(--space-xs) var(--space-s);border-top:1px solid var(--rule)}
.hv-controls button,.hv-controls select{min-height:var(--target);min-width:var(--target);font:inherit;font-size:var(--step--1);color:var(--ink);background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius);padding:0 var(--space-xs);cursor:pointer}
.hv-controls button:focus-visible,.hv-controls select:focus-visible,.hv-scrub input:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.hv-scrub{flex:1 1 12rem;display:flex;min-width:0}
.hv-scrub input{width:100%;accent-color:var(--verdigris);min-height:var(--target)}
.hv-pos{color:var(--muted);font-size:var(--step--2);min-width:6.5em;text-align:right;font-variant-numeric:tabular-nums}
.hv-controls label:last-child{min-width:0;max-width:100%}
.hv-controls #trace-sel{max-width:min(26rem,100%)}
@media (max-width:820px){
  .hv-grid{grid-template-columns:minmax(0,1fr)}
  .hv-stage{height:clamp(17rem,48vh,24rem)}
  .hv-panel{border-left:0;border-top:1px solid var(--rule)}
  .hv-scrub{flex:1 1 100%;order:-1}
  .hv-controls label:last-child{flex:1 1 100%}
  .hv-controls #trace-sel{width:100%;max-width:100%}
}
@media (prefers-reduced-motion:reduce){.hv *{transition:none!important}}