:root{--fg:#bfe9ff;--dim:#4d6b80;--font:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace}html,body{height:100%;color:var(--fg);font-family:var(--font);background:#020308;margin:0;overflow:hidden}#app canvas{display:block}.brand{letter-spacing:.18em;text-transform:uppercase;pointer-events:none;font-size:12px;position:fixed;top:16px;left:20px}.brand b{color:#e8f8ff;text-shadow:0 0 12px #39c6ff;font-size:15px}.brand .sub{color:var(--dim);margin-left:.9em}.live{color:#ffd6da;vertical-align:2px;background:#ff3b4e1a;border:1px solid #ff3b4e73;border-radius:2px;align-items:center;gap:6px;margin-left:.9em;padding:2px 7px 2px 6px;font-size:10px;display:inline-flex}.live em{font-style:normal}.live i{background:#ff3b4e;border-radius:50%;width:7px;height:7px;animation:1.6s ease-in-out infinite beat;box-shadow:0 0 8px #ff3b4e}.live.off{color:#ffd9a0;background:#ffb52e14;border-color:#ffb52e73}.live.off i{box-shadow:none;background:#ffb52e;animation:none}@keyframes beat{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}@media (prefers-reduced-motion:reduce){.live i{animation:none}}.hud{pointer-events:none;letter-spacing:.04em;font-size:11px;position:fixed;inset:0}.panel{-webkit-backdrop-filter:blur(6px);opacity:0;background:linear-gradient(#060e18b8,#0409108c);border:1px solid #50c8ff24;border-radius:3px;padding:12px 14px;transition:opacity .8s,transform .8s;position:absolute;transform:translateY(6px);box-shadow:inset 0 0 24px #008cff0f}.hud.on .panel{opacity:1;transform:none}.label{color:var(--dim);text-transform:uppercase;letter-spacing:.16em;margin-bottom:4px;font-size:10px}.big{color:#eafaff;text-shadow:0 0 18px #3cc8ff8c;font-variant-numeric:tabular-nums;font-size:46px;line-height:1}.big small{color:var(--dim);font-size:14px}.mid{color:#dff6ff;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px}.row{gap:22px;margin-top:12px;display:flex}.stats{top:48px;left:20px}.mix{width:270px;top:48px;right:20px}.mix ul{gap:7px;margin:8px 0 0;padding:0;list-style:none;display:grid}.mix li{grid-template-columns:1fr auto;row-gap:3px;display:grid}.mix .name{color:var(--c);text-shadow:0 0 8px var(--c)}.mix .val{color:#cfeaf7;font-variant-numeric:tabular-nums}.mix .bar{background:#ffffff0d;grid-column:1/-1;height:3px}.mix .bar i{background:var(--c);height:100%;box-shadow:0 0 8px var(--c);transition:width 1s;display:block}.stack{gap:1px;height:6px;margin-top:6px;display:flex}.stack i{transition:flex 1s;box-shadow:0 0 6px}.curve{width:340px;bottom:34px;left:20px}.curve svg{width:100%;height:80px;display:block;overflow:visible}.curve .fc{fill:none;stroke:#4d6b80;stroke-width:1px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.curve .real{fill:none;stroke:#39d4ff;stroke-width:1.6px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #39d4ff)}.curve .area{fill:#39d4ff14}.curve .now{stroke:#ffffff59;stroke-width:1px;vector-effect:non-scaling-stroke}.curve .dot{stroke:#fff;stroke-width:6px;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px #39d4ff)}.axis{color:var(--dim);justify-content:space-between;margin-top:4px;font-size:9px;display:flex}.legend{float:right;text-transform:none;letter-spacing:.04em}.legend i{vertical-align:middle;width:12px;height:0;margin:0 3px 0 8px;display:inline-block}.l-real{border-top:2px solid #39d4ff}.l-fc{border-top:1px dashed #4d6b80}.meta{color:var(--dim);align-items:center;gap:10px;font-size:10px;display:flex;position:absolute;bottom:12px;right:20px}.meta b{color:#9fd6ef;font-weight:400}.warn{color:#ffb52e;border:1px solid #ffb52e66;border-radius:2px;padding:2px 6px}@media (max-width:700px){.brand .sub{display:none}.hud{font-size:10px}.panel{padding:9px 11px}.stats{inset:auto 10px 234px}.stats .row{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;display:grid}.big{font-size:30px}.mid{white-space:normal;font-size:12px}.mix{width:auto;inset:auto 10px 140px}.mix ul{grid-template-columns:repeat(3,1fr);gap:4px 8px;font-size:9px}.mix li{display:block}.mix .val,.mix .bar{display:none}.curve{width:auto;bottom:30px;left:10px;right:10px}.curve svg{height:56px}.meta{flex-wrap:wrap;justify-content:space-between;font-size:9px;bottom:8px;left:10px;right:10px}}@media (max-width:700px) and (max-height:640px){.mix,.curve{display:none}.stats{bottom:30px}}.recenter{z-index:2;font:inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);cursor:pointer;opacity:0;visibility:hidden;background:#060e18b3;border:1px solid #50c8ff40;border-radius:3px;padding:6px 12px;font-size:10px;transition:opacity .3s,visibility .3s;position:fixed;top:11px;right:20px}.recenter.show{opacity:1;visibility:visible}.recenter:hover,.recenter:focus-visible{border-color:#50c8ffb3;outline:none;box-shadow:0 0 12px #39d4ff59}#app canvas{cursor:grab;touch-action:none}#app canvas:active{cursor:grabbing}