.hkl{border:1px solid var(--dbc-border);border-radius:var(--dbc-radius);background:var(--dbc-surface);font-size:var(--sl-text-sm);--hkl-hot:#ea580c;--hkl-rest:#94a3b8;--hkl-over:#dc2626;margin-block:1.5rem;padding:1rem}.hkl button{font:inherit;cursor:pointer}.hkl button:focus-visible,.hkl .hkl-range:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.hkl .hkl-controls{flex-wrap:wrap;gap:.75rem 1.25rem;display:flex}.hkl .hkl-group{flex-direction:column;gap:.3rem;min-width:0;display:flex}.hkl .hkl-group--wide{flex:100%}.hkl .hkl-label{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3)}.hkl .hkl-label strong{color:var(--sl-color-white);font-family:var(--sl-font-mono)}.hkl .hkl-seg{border:1px solid var(--dbc-border-strong);border-radius:.5rem;flex-wrap:wrap;align-self:flex-start;display:inline-flex;overflow:hidden}.hkl .hkl-seg button{color:var(--sl-color-gray-3);background:0 0;border:0;padding:.3rem .7rem}.hkl .hkl-seg button[aria-pressed=true]{background:color-mix(in srgb, var(--sl-color-accent) 14%, transparent);color:var(--sl-color-white);border-color:var(--sl-color-accent);font-weight:600}.hkl .hkl-range{width:100%;max-width:28rem;accent-color:var(--sl-color-accent)}.hkl .hkl-fixes{flex-wrap:wrap;gap:.5rem;display:flex}.hkl .hkl-fix{border:1px solid var(--dbc-border-strong);border-radius:var(--dbc-radius-btn);color:var(--sl-color-gray-2);background:0 0;padding:.35rem .8rem}.hkl .hkl-fix[aria-pressed=true]{border-color:var(--dbc-gain);background:color-mix(in srgb, var(--dbc-gain) 18%, transparent);color:var(--sl-color-white);font-weight:600}.hkl .hkl-fix[aria-pressed=true]:before{content:"✓ "}.hkl .hkl-chart{border:1px solid var(--dbc-border-strong);border-radius:var(--dbc-radius);background:var(--sl-color-black);margin-top:1rem;padding:.75rem}.hkl .hkl-scroll{overflow-x:auto}.hkl .hkl-bars{grid-template-columns:repeat(var(--hkl-n,8), minmax(0, 1fr));gap:.35rem;height:11rem;display:grid}.hkl .hkl-bars--dense{gap:2px}.hkl .hkl-col{text-align:center;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:.2rem;min-width:0;display:grid}.hkl .hkl-pct,.hkl .hkl-name{font-family:var(--sl-font-mono);color:var(--sl-color-gray-3);white-space:nowrap;font-size:.65rem;line-height:1.1;overflow:hidden}.hkl .hkl-bars--dense .hkl-pct{visibility:hidden}.hkl .hkl-bars--dense .hkl-col--over .hkl-pct{visibility:visible;overflow:visible}.hkl .hkl-col--over .hkl-pct{color:var(--hkl-over);font-weight:700}.hkl .hkl-track{border-bottom:2px solid var(--dbc-border-strong);background:color-mix(in srgb, var(--sl-color-gray-5) 35%, transparent);border-radius:.25rem .25rem 0 0;position:relative;overflow:hidden}.hkl .hkl-rest,.hkl .hkl-hotseg{transition:height .35s var(--dbc-ease), bottom .35s var(--dbc-ease), background-color .2s;position:absolute;bottom:0;left:0;right:0}.hkl .hkl-rest{background:var(--hkl-rest)}.hkl .hkl-hotseg{background:var(--hkl-hot)}.hkl .hkl-col--warm .hkl-rest{background:#f59e0b}.hkl .hkl-col--over .hkl-rest,.hkl .hkl-col--over .hkl-hotseg{background:var(--hkl-over)}.hkl .hkl-col--over .hkl-hotseg{background:repeating-linear-gradient(135deg, var(--hkl-over) 0 4px, #991b1b 4px 8px)}.hkl .hkl-col--clip .hkl-track{border-top:3px dotted var(--hkl-over)}.hkl .hkl-cap{left:0;right:0;bottom:var(--hkl-capline,62.5%);border-top:2px dashed var(--sl-color-white);opacity:.75;pointer-events:none;position:absolute}.hkl .hkl-bars--dense .hkl-name{overflow:visible}.hkl .hkl-legend{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3);flex-wrap:wrap;gap:.35rem 1rem;margin:.6rem 0 0;display:flex}.hkl .hkl-swatch{vertical-align:-.1rem;border-radius:.15rem;width:.75rem;height:.75rem;margin-right:.3rem;display:inline-block}.hkl .hkl-swatch--hot{background:var(--hkl-hot)}.hkl .hkl-swatch--rest{background:var(--hkl-rest)}.hkl .hkl-swatch--cap{border-top:2px dashed var(--sl-color-white);vertical-align:.2rem;height:0}.hkl .hkl-stats{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem;margin:.75rem 0 0;display:grid}.hkl .hkl-stat{border:1px solid var(--dbc-border-strong);border-radius:var(--dbc-radius);background:var(--sl-color-black);padding:.5rem .6rem}.hkl .hkl-stat--big{border-color:#2563eb}.hkl .hkl-stat dt{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3)}.hkl .hkl-stat dd{font-family:var(--sl-font-mono);font-size:var(--sl-text-lg);color:var(--sl-color-white);margin:.1rem 0 0;font-weight:700}.hkl .hkl-stat dd.hkl-bad{color:var(--dbc-cost)}.hkl .hkl-hot{color:var(--sl-color-gray-2);margin:.75rem 0 0}.hkl .hkl-log{color:var(--sl-color-gray-3);margin:.4rem 0 0}.hkl .hkl-log--bad{color:var(--dbc-cost)}@media (prefers-reduced-motion:reduce){.hkl .hkl-rest,.hkl .hkl-hotseg{transition:none}}