:root{color-scheme:dark;--bg:#07101b;--p:#0b1827;--line:#1b3549;--sub:#8199ad;--bright:#e2f5ff;--acc:#64e5db;--gold:#dfb96b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--bright)}body{background-image:radial-gradient(ellipse at 48% 38%,#13324a66,transparent 62%)}header{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#091521c9}.brand{display:flex;gap:15px;align-items:center}.brand .mark{font-size:39px;color:var(--acc)}small,.brand small,h2,h3,.view-head strong,.seed,.live{letter-spacing:.14em}.brand small{font-size:10px;color:var(--acc)}h1{font-size:25px;line-height:1;margin:3px 0;font-weight:720;letter-spacing:.08em}h1 b{font-weight:300;color:var(--gold)}.header-right{display:flex;gap:24px;align-items:center}.seed,.live{font-size:10px;color:#a9bccc}.live i{display:inline-block;width:7px;height:7px;background:#51eabd;border-radius:50%;box-shadow:0 0 14px #51eabd;margin-right:8px}.shell{display:grid;grid-template-columns:minmax(245px,290px) minmax(420px,1fr) minmax(240px,278px);min-height:calc(100vh - 126px)}.panel{padding:25px 22px;background:#0a1926d9;overflow:auto}.controls{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}h2{font-size:11px;color:var(--acc);margin:0 0 20px}h3{font-size:10px;color:#d4dfe9;margin:0 0 12px}section{min-width:0}.panel section{padding:21px 0;border-bottom:1px solid var(--line)}.panel section:last-of-type{border-bottom:0}.segmented{display:flex;flex-wrap:wrap;gap:6px}.segmented button{background:#11243a;border:1px solid #234156;color:#acc1d1;cursor:pointer;border-radius:6px;padding:8px 10px;font-size:11px;flex-grow:1}.segmented button.active,.segmented button:hover{border-color:#60d9d0;background:#154444;color:#d7fff4}.line{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:12px;color:#adc1d0}.line output{color:var(--acc);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#57dace;margin:12px 0 19px}select{background:#12263b;color:#deeff9;border:1px solid #2b485c;border-radius:6px;padding:8px;max-width:100%;cursor:pointer}.rowfield{display:grid;gap:7px;margin-bottom:15px;font-size:12px;color:#acc3d2}.toggles label,.group-list label{display:flex;gap:9px;align-items:center;margin:10px 0;font-size:12px;cursor:pointer;color:#c2d2df}.toggles input,.group-list input{accent-color:#52dacf}.group-list{max-height:280px;overflow:auto;scrollbar-color:#365269 #0b1927}.group-list span{font-size:10px;color:#627f91;margin-left:auto}.hint{color:var(--sub);font-size:12px}.reset,.ghost{background:#153046;color:#d0e9f5;border:1px solid #2e5c73;border-radius:6px;padding:11px 12px;width:100%;cursor:pointer;margin-top:14px}.reset:hover,.ghost:hover{background:#23536a}.visual{display:flex;flex-direction:column;min-width:0}.view-head{height:72px;display:flex;justify-content:space-between;align-items:center;padding:15px 25px;gap:8px}.view-head strong{display:block;font-size:11px;color:var(--acc)}.view-head span{font-size:11px;color:var(--sub)}.view-stat{text-align:right}.view-stat b{display:block;color:var(--gold);font-size:12px}#viewport{flex:1;min-height:530px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#214257 0%,#0e2334 42%,#071321 85%)}#fallbackCanvas,#threeCanvas{position:absolute;inset:0;width:100%;height:100%}#threeCanvas{pointer-events:none}#threeCanvas.active{pointer-events:auto}#threeCanvas canvas{display:block;width:100%;height:100%}.screen-top,.screen-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;color:#a6e5e5;font-size:10px;letter-spacing:.08em;pointer-events:none}.screen-top{top:19px}.screen-bottom{bottom:18px;color:#7b9ba9}.scale{color:#5fe6d4}#diagramLabels{position:absolute;inset:0;pointer-events:none}.floating-label{position:absolute;border-left:2px solid var(--acc);padding:3px 9px;background:#071522b5;color:#c0f9f1;font-size:10px;white-space:nowrap;box-shadow:0 3px 12px #0004}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#1d394c;border-top:1px solid #1d394c}.mini-stats>div{padding:15px;background:#091a2a}.mini-stats small{display:block;font-size:9px;color:var(--sub)}.mini-stats strong{font-size:11px;letter-spacing:.03em}.inspector-visual{height:180px;border:1px solid var(--line);border-radius:8px;background:radial-gradient(circle,#235269 0%,#112838 47%,#0b1826 85%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.hex{font-size:91px;line-height:1;color:#67d8d9;text-shadow:0 0 23px #21bfdd80}#selectedTag{font-size:9px;color:#72ddce;letter-spacing:.15em}.inspector>h3{font-size:19px;letter-spacing:0;margin:20px 0 8px}.inspector>p{font-size:12px;color:#b0c7d2;min-height:64px}.metadata>div{padding:12px 0;border-top:1px solid var(--line)}.metadata small{display:block;color:#7795a7;font-size:9px}.metadata strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}.sciencebox{margin-top:25px;border:1px solid #265664;background:#102c3a;padding:15px;border-radius:7px}.sciencebox p{font-size:11px;color:#acccd5}.sciencebox a{font-size:11px;color:#74e7df;text-decoration:none}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.12em;color:#5a869b;padding:13px 24px;border-top:1px solid var(--line)}@media(max-width:1200px){.shell{grid-template-columns:235px 1fr}.inspector{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:180px 1fr 1fr;gap:12px;align-items:start}.inspector h2{grid-column:1/-1}.inspector-visual{height:145px}.inspector>h3{margin:0}.inspector .sciencebox{margin:0}}@media(max-width:780px){header{height:68px;padding:0 15px}.header-right .seed{display:none}.shell{display:flex;flex-direction:column}.visual{order:0}#viewport{height:460px;min-height:460px}.controls{order:1;border-right:0;border-top:1px solid var(--line)}.inspector{order:2;display:block}.view-head{height:63px;padding:11px 15px}.panel{padding:18px}.screen-top,.screen-bottom{left:11px;right:11px;font-size:9px}.mini-stats strong{font-size:9px}.mini-stats>div{padding:10px}footer{flex-wrap:wrap}}