:root{--bg:#05040a;--border:rgba(147,128,220,0.12);--border-hi:rgba(168,140,255,0.35);--text:#ececf5;--text-soft:#b8b4cf;--text-mute:#7b7798;
--accent:oklch(0.66 0.22 268);--accent-hi:oklch(0.76 0.22 268);--accent-bg:oklch(0.24 0.10 268 / 0.4);--gop:oklch(0.66 0.18 25);
--font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;--font-display:"Instrument Serif","Inter",serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--r-lg:16px}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-feature-settings:"ss01","cv11";line-height:1.5;-webkit-font-smoothing:antialiased;touch-action:manipulation;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 90% 62% at 50% 112%,oklch(0.18 0.18 268/0.32),transparent 62%),radial-gradient(ellipse 70% 55% at 50% 40%,transparent 0%,oklch(0.06 0.05 268/0.38) 60%,#05040a 95%),#05040a}
.bg::before,.bg::after{content:"";position:absolute;inset:-200px;opacity:.65;animation:drift 180s linear infinite;
background-image:radial-gradient(1px 1px at 20% 30%,#d9d3ff 40%,transparent),radial-gradient(1.2px 1.2px at 70% 10%,#b8b2ff 40%,transparent),radial-gradient(1px 1px at 40% 80%,#ffffff 40%,transparent),radial-gradient(1.3px 1.3px at 85% 60%,#e0d8ff 40%,transparent),radial-gradient(1px 1px at 10% 70%,#c9c2ff 40%,transparent),radial-gradient(1.1px 1.1px at 55% 45%,#e8e2ff 40%,transparent),radial-gradient(1px 1px at 30% 10%,#ffffff 40%,transparent),radial-gradient(1.2px 1.2px at 90% 90%,#d9d3ff 40%,transparent);background-size:800px 800px}
.bg::after{background-size:1200px 1200px;animation-duration:300s;animation-direction:reverse;filter:blur(.4px)}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-200px,-120px,0)}}
.nebula{position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.18;pointer-events:none;animation:float 22s ease-in-out infinite}
.n1{width:720px;height:520px;top:-10%;right:-10%;background:oklch(0.58 0.23 268)}
.n2{width:620px;height:480px;top:28%;left:-10%;background:oklch(0.55 0.22 228);animation-duration:28s;animation-direction:reverse}
.n3{width:540px;height:420px;top:72%;right:8%;background:oklch(0.56 0.24 298);animation-duration:34s}
@keyframes float{50%{transform:translate(30px,-20px) scale(1.08)}}
.top{text-align:center;padding:12px 16px 8px}
.controls{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.chip{min-height:48px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:oklch(0.14 0.04 268/0.5);color:var(--text-soft);font:500 13px var(--font-sans);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--border-hi);color:var(--text);background:oklch(0.18 0.07 268/0.6);transform:translateY(-1px)}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5vw,56px);letter-spacing:-0.028em;line-height:1.05;margin:0 0 8px}
h1 em{font-style:normal;background:linear-gradient(120deg,var(--accent-hi),oklch(0.85 0.09 308));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font:400 11.5px var(--font-mono);color:var(--text-mute);margin:0 auto 6px;max-width:760px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.legend{font:400 10.5px var(--font-mono);color:var(--text-mute);margin:0 auto;max-width:760px;letter-spacing:.02em}
.ret-key{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gop);vertical-align:middle;margin-right:6px}
#chart{position:relative;margin:8px 0 0;width:100%}
.links{position:absolute;left:0;top:0;pointer-events:none}
.box{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 6px;border-radius:var(--r-lg);
border:1px solid color-mix(in oklab,var(--c) 70%,transparent);background:linear-gradient(180deg,color-mix(in oklab,var(--c) 30%,transparent),color-mix(in oklab,var(--c) 14%,transparent)),oklch(0.12 0.03 268/0.55);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);cursor:pointer;font:inherit;text-align:center;overflow:hidden;transition:border-color .2s,transform .2s}
.box:hover{border-color:var(--c);transform:translateY(-1px)}
.box:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-bg)}
.box.open{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.box.sel{box-shadow:0 0 0 4px var(--accent-bg),inset 0 0 0 1px var(--c)}
.box .nm{font:600 12px var(--font-sans);line-height:1.15;white-space:nowrap}
.box .nm+.nm{margin-top:-4px}
.box .pd{font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);line-height:1}
.box .id{font:400 10px var(--font-mono);color:var(--text-mute);white-space:nowrap;line-height:1}
.box .am{font:500 10.5px var(--font-mono);color:var(--text-soft);white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.box.root .nm{font-size:15px}
.pill{position:absolute;transform:translate(-50%,-100%);z-index:5;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:7px 10px;border-radius:999px;border:1px solid rgba(150,170,255,0.28);background:rgba(4,7,24,0.64);backdrop-filter:blur(8px);color:rgba(246,248,255,0.92);font:500 11px var(--font-sans);box-shadow:0 10px 28px rgba(0,0,0,0.28)}
.cap{position:absolute;font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);pointer-events:none;white-space:nowrap}
footer{text-align:center;padding:8px 16px 16px}
.foot{font:400 10px var(--font-mono);color:var(--text-mute);margin:0}
.box .rv{font:500 10px var(--font-mono);white-space:nowrap;line-height:1}