html{background:#080d17}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 12% 2%,#1867844d,#0000 34rem),radial-gradient(circle at 92% 28%,#59288b38,#0000 38rem),#080d17;min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}::selection{color:#06100e;background:#77e4c8}:root{--ink:#e9edf7;--muted:#9aa6ba;--panel:#101726db;--panel-border:#ffffff1a;--accent:#77e4c8}*{box-sizing:border-box}.app-shell{width:min(1440px,100%);min-height:100vh;margin:0 auto;padding:clamp(24px,5vw,72px)}.hero{grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);align-items:end;gap:24px 64px;margin-bottom:clamp(28px,4vw,52px);display:grid}.eyebrow,.chart-kicker{color:var(--accent);letter-spacing:.16em;overflow-wrap:anywhere;text-transform:uppercase;margin:0 0 12px;font-size:.72rem;font-weight:700}.hero .eyebrow{grid-column:1/-1;margin-bottom:-8px}.hero h1{max-width:720px;color:var(--ink);letter-spacing:-.065em;overflow-wrap:anywhere;margin:0;font-size:clamp(2.7rem,7vw,6.8rem);font-weight:620;line-height:.88}.hero-copy{max-width:650px;color:var(--muted);overflow-wrap:anywhere;margin:0 0 6px;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.6}.chart-card{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px;overflow:hidden;box-shadow:0 28px 80px #00000057}.chart-toolbar{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;gap:20px;min-height:96px;padding:20px clamp(20px,3vw,36px);display:flex}.chart-kicker{margin-bottom:6px}.chart-heading,.chart-actions{min-width:0}.chart-toolbar h2{color:var(--ink);overflow-wrap:anywhere;margin:0;font-size:clamp(1.35rem,2vw,1.85rem);font-weight:580}.chart-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:20px;display:flex}.hover-status{min-width:130px;color:var(--muted);text-align:right;overflow-wrap:anywhere;margin:0;font-size:.88rem}button{color:var(--ink);font:inherit;cursor:pointer;background:#ffffff12;border:1px solid #ffffff24;border-radius:10px;padding:10px 14px;font-size:.85rem;transition:border-color .14s,background .14s}button:not(:disabled):hover{background:#77e4c81a;border-color:#77e4c899}button:disabled{opacity:.48;cursor:not-allowed}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}canvas:focus-visible{outline:4px solid var(--accent);outline-offset:-4px}kbd{color:var(--muted);border:1px solid #fff3;border-radius:4px;margin-left:5px;padding:2px 5px;font:.72rem ui-monospace,SFMono-Regular,Consolas,monospace}.chart-viewport{background:#090e19;width:100%;height:clamp(340px,58vh,680px);min-height:280px}.interaction-guide{border-top:1px solid var(--panel-border);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(26px,4vw,44px);display:grid}.interaction-guide>div{padding:24px clamp(12px,2.4vw,32px) 0}.interaction-guide>div:first-child{padding-left:0}.interaction-guide span{color:var(--accent);font:.72rem ui-monospace,SFMono-Regular,Consolas,monospace}.interaction-guide h3{color:var(--ink);margin:12px 0 6px;font-size:1rem}.interaction-guide p{color:var(--muted);margin:0;font-size:.88rem;line-height:1.55}@media (width<=760px){.hero{grid-template-columns:minmax(0,1fr)}.hero .eyebrow{grid-column:auto}.chart-toolbar,.chart-actions{align-items:flex-start}.chart-actions{flex-direction:column-reverse;justify-content:flex-start;gap:8px}.hover-status{text-align:left}}@media (width<=540px){.app-shell{padding:20px 14px 32px}.chart-toolbar{flex-direction:column;align-items:flex-start}.chart-actions,.chart-heading,.hover-status{width:100%;min-width:0}.chart-actions button{width:100%}.interaction-guide{grid-template-columns:1fr;gap:22px}.interaction-guide>div,.interaction-guide>div:first-child{padding:0}}@media (prefers-reduced-motion:reduce){button{transition:none}}