:root{color-scheme:dark;--bg:#09121e;--panel:#0f1d2b;--line:#273d53;--muted:#8da5ba;--bright:#eef8ff;--cyan:#64dfed;--blue:#4f94b6}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--bright);font-family:'DM Sans',system-ui,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.app{min-height:100vh;display:flex;flex-direction:column}.top{height:91px;padding:0 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:rgba(9,19,30,.9)}.brand{display:flex;align-items:center;gap:15px}.brand-mark{width:42px;height:42px;border:1px solid #5db7cf;border-radius:11px;color:#83e4ee;display:grid;place-items:center;font:700 25px 'Space Grotesk';background:linear-gradient(145deg,#163951,#0b1b2c)}.brand-name{font:700 27px 'Space Grotesk';letter-spacing:-1px}.brand-name span{font-weight:400;color:#86dcea}.overline,.eyebrow{color:#9ed4e8;letter-spacing:2.1px;font-size:10px;font-weight:700}.header-right{display:flex;align-items:center;gap:30px}.metric{display:flex;flex-direction:column;gap:7px}.metric span{font-size:9px;letter-spacing:1.6px;color:var(--muted)}.metric strong{font-family:'Space Grotesk';font-size:15px;letter-spacing:.5px}.live{font-size:10px;letter-spacing:1.2px;color:#8bf4cd;border:1px solid #33594e;padding:10px 12px;border-radius:7px}.beacon{display:inline-block;width:7px;height:7px;background:#6befba;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #5bdca7}.main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 358px;min-height:680px}.viewport{min-width:0;position:relative;background:radial-gradient(ellipse at 48% 42%,#17293d,#0a1320 68%);display:flex;flex-direction:column;border-right:1px solid var(--line)}.canvas-top{display:flex;align-items:center;justify-content:space-between;margin:24px 26px 0;position:relative;z-index:2}.canvas-top #view-label{font:600 10px 'Space Grotesk';letter-spacing:1.1px;color:#a4bfd0;border:1px solid #354b5b;border-radius:4px;padding:9px 12px}.stage-wrap{flex:1;min-height:450px;position:relative;overflow:hidden}#stage,#effects{position:absolute;inset:0;width:100%;height:100%}#stage{cursor:grab;touch-action:none}#stage:active{cursor:grabbing}#effects{pointer-events:none}#labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.floating-label{position:absolute;white-space:nowrap;transform:translate(-50%,-160%);background:rgba(8,27,41,.86);padding:6px 8px;border:1px solid #3a7a91;border-radius:4px;color:#ade8f3;font-size:10px;letter-spacing:.3px;box-shadow:0 4px 12px #07101a}.floating-label:after{content:'';position:absolute;left:50%;bottom:-12px;height:12px;border-left:1px solid #5ab2cc}.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#6e9bb0;opacity:.35;pointer-events:none;font-size:15px}.view-controls{display:flex;align-items:center;gap:9px;justify-content:center;margin:0 25px 14px;z-index:2}.segmented{display:flex;padding:4px;gap:3px;background:#102235;border:1px solid #294055;border-radius:10px}.segmented button{border:0;background:transparent;color:#a3b7c9;border-radius:7px;padding:11px 15px;font-size:12px;white-space:nowrap}.segmented button.active{background:#176175;color:#e6fbff;box-shadow:0 2px 9px #041621}.icon-button{width:42px;height:42px;color:#c6e0f0;background:#15293d;border:1px solid #345066;border-radius:9px;font-size:23px}.canvas-footer{padding:13px 25px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #273a4c}.small-pill{font-size:11px;color:#83d7ed}.help{color:#6f8da8;font-size:10px;letter-spacing:.7px}.sidebar{background:#0d1926;padding:22px 19px 26px;overflow-y:auto;max-height:calc(100vh - 126px)}.sidebar-title{display:flex;align-items:flex-end;justify-content:space-between;margin:0 4px 21px}.sidebar-title h2{font:700 22px 'Space Grotesk';margin:7px 0 0;letter-spacing:-.6px}.accent{color:#67d8ee}.id-tag{font:12px 'Space Grotesk';color:#7fbfd8;border:1px solid #385368;border-radius:6px;padding:7px}.panel{border:1px solid #2d4356;border-radius:11px;background:linear-gradient(150deg,#152737,#101e2d);padding:16px;margin-bottom:13px}.panel-title{font:700 11px 'Space Grotesk';letter-spacing:1.25px;color:#e3f0f7;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel-title span{font:600 9px 'DM Sans';letter-spacing:1px;color:#6bdcc7}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.stats>div{background:#0b1a2b;border:1px solid #223b50;border-radius:7px;padding:11px}.stats span{display:block;font-size:9px;letter-spacing:1px;color:#80a3bb;margin-bottom:5px}.stats strong{font:600 24px 'Space Grotesk';color:#f4faff}.stats small{font-size:10px;margin-left:5px;color:#8fb3c7}.control-row{display:flex;gap:8px;margin-bottom:15px}.control-row button{flex:1;border-radius:6px;font-size:12px;font-weight:700;height:38px;border:1px solid #2d5d72}.primary{background:#2c9bb3;color:#061922}.secondary{background:#142a3b;color:#b9e3ef}.slider-header{display:flex;justify-content:space-between;margin:11px 0 5px;color:#9eb8cc;font-size:12px}.slider-header output{color:#b0e8f5}input[type=range]{width:100%;accent-color:#5dd4e8;height:18px;cursor:pointer}.component input[type=search]{width:100%;padding:10px 12px;background:#0a1826;border:1px solid #315068;border-radius:7px;color:#e7f5fa;font-size:12px;outline:none}.component input[type=search]:focus{border-color:#6cd9e9}.part-empty{text-align:center;padding:21px 14px 7px;color:#8fa9be}.part-orb{display:inline-block;width:28px;height:28px;border:1px solid #5387a0;border-radius:50%;box-shadow:0 0 20px #133853;margin:0 auto 8px}.part-empty h3{font-size:14px;color:#d5e8f1;margin:5px 0}.part-empty p{font-size:12px;line-height:1.65}.part-eyebrow{font-size:9px;color:#7dc8da;letter-spacing:1.5px;margin-top:17px}.component h3{font:600 17px 'Space Grotesk';word-break:break-word;margin:8px 0 10px}.part-pill{font-size:10px;background:#163e4d;border:1px solid #24556a;padding:4px 8px;border-radius:20px;color:#9ee7ed}.description{font-size:12px;line-height:1.65;color:#aebfd0;margin:14px 0}.part-spec{display:flex;align-items:flex-start;justify-content:space-between;border-top:1px solid #293e50;padding:10px 0;gap:8px;font-size:11px}.part-spec span{color:#7da0b7}.part-spec b{font-weight:600;text-align:right}.group-button{margin:0 5px 7px 0;padding:7px 9px;border-radius:5px;background:#183b4d;color:#a9d6e4;border:1px solid #2b5d6e;font-size:11px}.group-button.muted{background:#15202d;color:#6c8194;opacity:.45;text-decoration:line-through}.check{display:flex;align-items:center;gap:8px;font-size:12px;color:#b4cede;margin-top:12px}.check input{accent-color:#4bafc4}.disclaimer{font-size:10px;line-height:1.7;color:#69879d;padding:4px 6px}.foot{padding:13px 32px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.8px;color:#7897b0}#no-webgl{position:absolute;inset:50px;padding:24px;background:#091321;z-index:10}#no-webgl img{width:100%;max-height:70%;object-fit:contain}
@media(max-width:1050px){.main{grid-template-columns:minmax(0,1fr) 318px}.sidebar{padding:17px}.segmented button{padding:10px}.header-right{gap:14px}}
@media(max-width:810px){.main{display:block}.viewport{min-height:670px;border-right:none}.sidebar{max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}.sidebar-title,.disclaimer{grid-column:1/-1}.panel{margin-bottom:0}.header-right .metric{display:none}.canvas-top{margin:18px}.canvas-footer{padding:14px}.help{display:none}.foot{font-size:9px}}
@media(max-width:550px){.top{height:77px;padding:0 15px}.brand-name{font-size:22px}.brand-mark{width:35px;height:35px}.live{font-size:8px;padding:7px}.viewport{min-height:520px}.stage-wrap{min-height:340px}.canvas-top{margin:12px 12px 0}.canvas-top #view-label{font-size:8px;padding:8px}.view-controls{margin:0 7px 12px;gap:4px}.segmented{gap:0}.segmented button{font-size:10px;padding:9px 6px}.icon-button{width:34px;height:34px}.sidebar{display:block;padding:13px}.panel{margin-bottom:12px}.foot{display:none}.floating-label{font-size:8px;padding:4px 5px}}