/* OCTO Charts styles. Depends on tokens.css. */
.oc{position:relative;width:100%}
.oc svg{display:block;width:100%;height:auto;overflow:visible}
.oc text{font-family:var(--font-ui);fill:var(--fg-2)}
.oc .oc-ax{font:500 10px/1 var(--font-mono);fill:var(--viz-axis);letter-spacing:.02em}
.oc .oc-lab{font:500 11px/1 var(--font-ui);fill:var(--fg-2)}
.oc .oc-val{font:600 11px/1 var(--font-mono);fill:var(--fg);font-variant-numeric:tabular-nums}
.oc .oc-cap{font:500 9px/1 var(--font-ui);fill:var(--fg-3);letter-spacing:.14em;text-transform:uppercase}
.oc .oc-big{font:700 24px/1 var(--font-display);fill:var(--fg);font-variant-numeric:tabular-nums}
.oc .oc-xl{font-size:34px}
.oc .oc-mid{font:700 18px/1 var(--font-display);fill:var(--fg)}
.oc-grid line{stroke:var(--viz-grid);stroke-width:1}
.oc-track{fill:none;stroke:rgba(160,180,255,.08)}
.oc-inner{fill:rgba(63,216,255,.035);stroke:rgba(160,180,255,.14);stroke-dasharray:2 3}
.oc-halo line{stroke:rgba(160,180,255,.22);stroke-width:1}
.oc-well{fill:rgba(120,140,255,.06);stroke:rgba(160,180,255,.08)}
.oc-seg-line{stroke:rgba(5,9,18,.55);stroke-width:1}
.oc-prev{fill:rgba(234,240,255,.22)}
.oc-ring-mk{fill:rgba(5,9,18,.85);stroke:rgba(234,240,255,.55);stroke-width:1.2}
.oc-mk{filter:drop-shadow(0 0 4px rgba(var(--emit-cyan),.9))}
.oc-tick{stroke:rgba(160,180,255,.18);stroke-width:1.4}
.oc-tick.lit{stroke:var(--cyan-300)}
.oc-cross{opacity:0;transition:opacity var(--d-1) var(--ease-out);pointer-events:none}
.oc-cross.on{opacity:1}
.oc-cross line{stroke:rgba(234,240,255,.4);stroke-dasharray:3 3}
.oc-hit{cursor:crosshair;outline:none}
.oc-hit:focus-visible{stroke:var(--stroke-focus);stroke-width:2}
.oc-seg,.oc-cell{transition:opacity var(--d-2) var(--ease-out),filter var(--d-2)}
.oc svg:hover .oc-seg:not(:hover){opacity:.45}
.oc-cell:hover,.oc-cell:focus{stroke:#fff;stroke-width:1.5}

/* draw in */
.oc-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.3s var(--ease-out)}
.oc.in .oc-draw{stroke-dashoffset:0}
.oc .oc-col{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease-out)}
.oc .oc-hb{transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.oc .oc-cell,.oc .oc-area,.oc .oc-cap-tick,.oc .oc-mk,.oc .oc-ring-mk,.oc .oc-dot{opacity:0;transition:opacity .8s var(--ease-out) .4s}
.oc.in .oc-col{transform:scaleY(1)}
.oc.in .oc-hb{transform:scaleX(1)}
.oc.in .oc-cell,.oc.in .oc-area,.oc.in .oc-mk,.oc.in .oc-ring-mk,.oc.in .oc-dot{opacity:1}
.oc.in .oc-cap-tick{opacity:.9}

/* ranked list */
.oc-rank ol{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.oc-rank li{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding-bottom:9px;outline:none}
.oc-rank .oc-no{font:600 10px/1 var(--font-mono);color:var(--cyan-300);padding:4px 7px;border:1px solid rgba(var(--emit-cyan),.4);border-radius:4px;background:rgba(var(--emit-cyan),.08)}
.oc-rank li:nth-child(n+4) .oc-no{color:var(--fg-3);border-color:var(--stroke-2);background:none}
.oc-rank .oc-k{font:500 13px/1.2 var(--font-ui);color:var(--fg)}
.oc-rank .oc-v{font:600 13px/1 var(--font-mono);color:var(--fg);font-variant-numeric:tabular-nums}
.oc-rank li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:rgba(160,180,255,.08)}
.oc-rank i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);border-radius:2px;background:var(--energy);box-shadow:0 0 10px rgba(var(--emit-cyan),.5);z-index:1;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) var(--d)}
.oc-rank.in i{transform:scaleX(1)}
.oc-rank li:hover .oc-k,.oc-rank li:focus .oc-k{color:var(--cyan-300)}

/* tooltip */
.oc-tip{position:fixed;z-index:999;pointer-events:none;min-width:110px;padding:9px 12px;border-radius:var(--r-sm);background:rgba(8,12,26,.92);border:1px solid rgba(var(--emit-cyan),.35);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 18px rgba(var(--emit-cyan),.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 12px/1.45 var(--font-ui);color:var(--fg-2);opacity:0;transform:translateY(4px);transition:opacity var(--d-1),transform var(--d-1)}
.oc-tip.on{opacity:1;transform:none}
.oc-tip b{display:block;color:var(--fg);font-weight:600;margin-bottom:2px}
.oc-tip span{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px}
.oc-tip i{width:8px;height:8px;border-radius:2px;display:inline-block}

@media (prefers-reduced-motion:reduce){.oc *{transition:none!important}}
.oc-spark svg{height:44px;margin-top:10px}