:root{color-scheme:dark;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:#060d18;color:#dfeaf9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse 85% 76% at 50% -20%,#12263d 0,transparent 65%),#060d18;font-size:13px}.shell{max-width:1710px;margin:auto;padding:22px clamp(16px,3vw,45px) 24px}.topbar{display:flex;align-items:center;gap:14px;padding:7px 0 22px;border-bottom:1px solid #1a2b3e;margin-bottom:22px}.brandmark{display:grid;place-items:center;width:45px;height:45px;border:1px solid #30566a;color:#91ddff;border-radius:12px;font-size:29px;background:radial-gradient(circle,#1b3349,#101a2b)}.brand h1{font-family:'Space Grotesk',sans-serif;font-size:28px;letter-spacing:.115em;margin:3px 0 -3px;font-weight:700}.brand h1 span{color:#91ddff}.eyebrow,.section-top,.kicker,.small-label,.group-title,.status,.build,.orbit-hint,.footnote,footer,.metrics span{font-family:'Space Grotesk',sans-serif;letter-spacing:.11em}.eyebrow{font-size:9px;color:#7790a9}.small-dot{color:#5acee3;padding:0 5px}.header-right{margin-left:auto;text-align:right}.status{font-size:10px;color:#b3d9e4;font-weight:600}.status-light{display:inline-block;width:7px;height:7px;border-radius:50%;background:#52d7bb;margin-right:7px;box-shadow:0 0 14px #40d3d3}.build{font-size:9px;color:#6c859e;margin-top:8px}.build span{color:#4f6a7b}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 337px;gap:20px;align-items:stretch}.viewer{min-height:710px;position:relative;border:1px solid #253950;border-radius:14px;overflow:hidden;background:#071321;box-shadow:0 12px 75px #0007}.canvas-host{position:absolute;inset:0}.canvas-host canvas{width:100%;height:100%;display:block}.viewer:before{content:'';pointer-events:none;position:absolute;z-index:2;inset:0;border:1px solid #b3efff0b;border-radius:13px}.viewer-top,.viewer-bottom{position:absolute;z-index:3;left:25px;right:25px;display:flex;justify-content:space-between;pointer-events:none;align-items:flex-start}.viewer-top{top:23px}.kicker{color:#aecbe3;font-size:10px;font-weight:600}.slash{color:#4a788d;padding:0 7px}.live-pill{font-size:9px;letter-spacing:.14em;font-weight:700;color:#91d9ce;border:1px solid #3b6d6d;background:#102e33b8;padding:8px 11px;border-radius:4px}.pulse-dot{display:inline-block;width:6px;height:6px;background:#74edcd;border-radius:50%;margin-right:7px;box-shadow:0 0 8px #74edcd}.viewer-bottom{bottom:24px;align-items:end}.small-label{color:#5c9fb9;font-size:9px}.viewer-bottom strong{display:block;font-family:'Space Grotesk';font-size:18px;margin-top:5px}.viewer-bottom small{display:block;color:#8199b2;font-size:11px;margin-top:3px}.orbit-hint{font-size:9px;color:#7d9fbc}.compass{position:absolute;right:24px;top:73px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;color:#83a5bb;font:9px 'Space Grotesk';pointer-events:none}.compass b{font-size:27px;color:#85b8ce;font-weight:400}.inspector{border:1px solid #1a2d42;background:linear-gradient(140deg,#101c2b,#0d1725 47%,#0b1623);border-radius:13px;padding:23px 23px 14px;min-width:0}.inspect-heading{display:flex;justify-content:space-between;align-items:start;padding-bottom:19px}.section-top{font-size:9px;font-weight:700;color:#92d1e6}.section-top span{color:#57798d;margin-left:7px}.inspect-heading h2{font-family:'Space Grotesk';font-size:23px;letter-spacing:-.025em;margin:7px 0 2px;font-weight:600}.inspect-heading p{color:#6c859d;font-size:11px;margin:0}.hex{font-size:30px;color:#5fa1b8}.group-title{display:flex;gap:10px;align-items:center;font-size:9px;color:#89a7c0;font-weight:700;border-top:1px solid #203249;padding-top:16px;margin-top:2px;margin-bottom:15px}.group-title span{font-size:9px;border:1px solid #30526c;color:#9ce0ed;border-radius:3px;padding:3px 5px}.control{margin-bottom:16px}.control label{display:flex;justify-content:space-between;margin-bottom:9px;color:#a0b5c8;font-size:11px}.control output{color:#b9dff2;font-family:'Space Grotesk'}.control select{appearance:none;width:100%;background:#111f30;border:1px solid #284058;color:#d6e5f2;border-radius:6px;padding:10px 12px;font-family:inherit;font-size:11px;outline:none}.control select:focus{border-color:#4bb4d5}input[type=range]{appearance:none;width:100%;height:3px;border-radius:5px;background:linear-gradient(90deg,#62c9e6,#2d637d);cursor:pointer;margin:7px 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#d8f8ff;border:3px solid #3b9dbd;box-shadow:0 0 12px #4da8c8}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#d8f8ff;border:3px solid #3b9dbd}.color-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#a0b5c8;margin:12px 0 19px}.color-row>div{display:flex;gap:8px;align-items:center;font:10px 'Space Grotesk';color:#b9dff2}.color-row input{width:31px;height:27px;border:1px solid #35566e;border-radius:5px;background:transparent;padding:1px;cursor:pointer}.transport{display:grid;grid-template-columns:1fr 40px 40px;gap:7px;margin-bottom:8px}button{font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;color:#b7d2e8;border:1px solid #294057;background:#12253a;border-radius:6px;min-height:38px}button:hover{background:#18344d;border-color:#4c8dad}button:focus-visible{outline:2px solid #81d8f4;outline-offset:2px}.transport button.primary{background:linear-gradient(110deg,#4caecd,#2b829f);color:#ebfcff;border:0;font-size:11px}.transport button.primary:hover{filter:brightness(1.12)}.secondary-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}.secondary-buttons button{min-height:34px;font-size:10px}.backdrops{display:flex;gap:5px;justify-content:space-between;margin-bottom:12px}.bg-option{min-height:30px;font-size:10px;flex:1;display:flex;align-items:center;gap:5px;justify-content:center}.bg-option i{width:11px;height:11px;border:1px solid #47627d;border-radius:2px}.bg-option.selected{border-color:#5db2d7;color:#d3f3fd}.audio-btn{width:100%;background:transparent;border:1px solid #355269;color:#a9d6e8;font-size:10px;min-height:35px}.audio-btn.enabled{background:#163f43;border-color:#409e8d;color:#9ef1d6}.metrics{margin-top:17px;border-top:1px solid #253548;display:grid;grid-template-columns:repeat(3,1fr);padding-top:16px;gap:6px}.metrics>div{border-right:1px solid #253548;padding-right:6px}.metrics>div:last-child{border-right:0}.metrics span{display:block;color:#6889a2;font-size:8px}.metrics strong{display:block;margin-top:6px;color:#d4f6ff;font-family:'Space Grotesk';font-size:22px;font-weight:600}.footnote{margin-top:17px;color:#66859a;font-size:9px;line-height:1.7}.footnote code{font-size:10px;color:#86bccc}.foot-dot{color:#5bcbb3}footer{display:flex;justify-content:space-between;color:#536f85;font-size:9px;margin-top:18px;gap:10px}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.viewer{min-height:560px}.inspector{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.inspect-heading,.group-title,.metrics,.footnote{grid-column:1/-1}}@media(max-width:650px){.shell{padding:14px}.brand h1{font-size:21px}.brandmark{width:37px;height:37px;font-size:23px}.eyebrow{font-size:7px}.header-right .build{display:none}.status{font-size:8px}.topbar{margin-bottom:12px}.viewer{min-height:440px}.viewer-top,.viewer-bottom{left:13px;right:13px}.viewer-top{top:14px}.viewer-bottom{bottom:15px}.orbit-hint,.compass{display:none}.viewer-bottom strong{font-size:15px}.inspector{display:block}.footnote,.metrics,.group-title,.inspect-heading{grid-column:auto}footer{font-size:7px}}
