:root{--bg:#0b0d10;--fg:#e8edf2;--dim:#8794a3;--acc:#ff8a3d;--line:#232a33}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 ui-monospace,Menlo,Consolas,monospace}
main{max-width:960px;margin:0 auto;padding:24px 16px}
h1{font-size:44px;margin:0 0 8px}h1 span{color:var(--acc)}
.lede,.note{color:var(--dim)}
.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:16px 0}
select,button{background:#151a20;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:inherit}
.plotwrap{position:relative;max-width:900px}
canvas{width:100%;height:auto;aspect-ratio:1;background:#080a0c;border:1px solid var(--line);border-radius:8px;cursor:crosshair;display:block}
.tip{position:absolute;pointer-events:none;background:#151a20;border:1px solid var(--acc);border-radius:6px;padding:6px 8px;font-size:13px;max-width:260px;z-index:2}
.tip[hidden]{display:none}
button[hidden]{display:none}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.stats div{border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.stats b{display:block;font-size:22px;color:var(--acc)}
ul{list-style:none;padding:0;margin:0}
li{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)}
li .yrs{color:var(--acc);min-width:110px}li .id{color:var(--dim);margin-left:auto}
footer{max-width:960px;margin:0 auto;padding:16px;color:var(--dim)}
footer a{color:var(--dim)}