:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#071018; color:#d7e5eb; --line:rgba(176,213,230,.12); --dim:#8296a4; --bright:#56d7f1; --surface:#0b1722; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; background:radial-gradient(ellipse 65% 40% at 45% -30%,rgba(41,132,151,.09),transparent),#071018; }
button,select,input { font: inherit; }
button { cursor:pointer; }
.app-shell { max-width:1900px; min-height:100vh; margin:0 auto; display:flex; flex-direction:column; }
.topbar { height:72px; flex:none; padding:0 36px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:flex; gap:13px; align-items:center; letter-spacing:.1em; font-size:15px; }
.logo-sigil { color:#51ddec; font-size:35px; font-weight:300; line-height:1; filter:drop-shadow(0 0 7px #0dd2ff55); }
.logo small { display:block; color:#738a97; font-size:8px; margin-top:4px; letter-spacing:.22em; }
.soft { color:#6dd3e6; font-weight:400; }
.top-meta { display:flex; gap:19px; align-items:center; color:#90a7b2; font-size:10px; letter-spacing:.17em; }
.pill { border:1px solid #1c5660; background:#0b2b32; padding:8px 11px; color:#76e5ed; border-radius:2px; }
.dot,.live-dot { display:inline-block; width:6px;height:6px; background:#66eadb;border-radius:50%;margin:0 3px 1px 7px;box-shadow:0 0 10px #56d8c9; }
.main-layout { display:grid; grid-template-columns:minmax(0, 1fr) 336px; gap:0; min-height:calc(100vh - 116px); }
.workspace { min-width:0; padding:34px 36px 26px; }
.workspace-header { display:flex; justify-content:space-between; gap:20px; align-items:end; padding-bottom:28px; }
.eyebrow { color:#80c9d4; font-size:10px;letter-spacing:.2em;font-weight:700; }
.eyebrow span { color:#40535e; padding:0 12px; }
h1 { font-size:clamp(25px,2.8vw,40px); margin:11px 0 7px; font-weight:680;letter-spacing:-.035em; } h1 span { color:#b8c5ce; font-weight:300; }
.workspace-header p { margin:0; color:#8e9ca8;font-size:12px;letter-spacing:.055em; }
.head-mark { border-left:1px solid #21404d;padding-left:17px;color:#567784;font-size:9px;line-height:1.55;letter-spacing:.16em;min-width:108px; }
.head-mark span { color:#72d9e6; }
.viewer { position:relative;min-height:390px;height:min(59vh,720px);background:radial-gradient(circle at 50% 43%,#163748 0,#071825 48%,#061019 75%);border:1px solid #1c3b49;overflow:hidden; box-shadow:0 16px 60px #0004,inset 0 0 80px #0004; }
.viewport { position:absolute;inset:0;touch-action:none; }
.viewport canvas { width:100%;height:100%;display:block; }
.viewer-top,.viewer-bottom { z-index:2;pointer-events:none;position:absolute;left:19px;right:19px;display:flex;align-items:center;gap:12px;letter-spacing:.15em;font-size:9px;color:#94afbb; }
.viewer-top { top:18px; }.viewer-bottom { bottom:19px; }.viewer-bottom kbd { border:1px solid #376071;color:#b4e4ec;padding:3px 5px;margin-left:5px;font:inherit; }.grow { flex:1; }.divider-h { color:#45747f; }
.viewer-left-tag {position:absolute;z-index:2;top:85px;left:22px;color:#507e90;font-size:9px;line-height:1.9;letter-spacing:.15em;pointer-events:none;}
.viewer-legend {position:absolute;z-index:2;right:23px;top:79px;font-size:9px;letter-spacing:.08em;color:#9db3bf;display:flex;align-items:center;gap:7px;pointer-events:none;}
.indicator {width:5px;height:5px;border-radius:50%;display:inline-block;}.indicator.cyan {background:#5ee4ff;box-shadow:0 0 7px #5ee4ff;}.indicator.orange {background:#ffbe78;box-shadow:0 0 7px #ffbe78;margin-left:12px;}
.reticle {pointer-events:none;position:absolute;width:24px;height:24px;border-color:#3d7d89;opacity:.4;z-index:1;}.reticle-a {left:17px;bottom:47px;border-left:1px solid;border-bottom:1px solid;}.reticle-b {right:17px;bottom:47px;border-right:1px solid;border-bottom:1px solid;}
.error {position:absolute;z-index:4;left:12%;right:12%;top:36%;background:#1d2330ee;padding:24px;color:#ffcbad;border:1px solid #b05f51;line-height:1.65;}
.transport {display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 0 24px;border-bottom:1px solid var(--line);}.transport-group {display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.btn { border:1px solid #25424e; padding:11px 16px; background:#10222e; color:#a8c1ce; font-size:11px;font-weight:650;letter-spacing:.025em;transition:all .15s ease; min-height:37px;border-radius:3px; }.btn:hover { border-color:#5eaebc; color:white; background:#163443; }.btn-primary {background:#52cce7;color:#07242e;border-color:#52cce7;}.btn-primary:hover {background:#8feaff;color:#042330;}.btn-accent {border-color:#ae7e50;color:#ffd2a4;background:#35261c;}.btn-accent:hover {background:#59402b;border-color:#ffcf90;}
.bottom-strip { display:grid;grid-template-columns:repeat(4,1fr);padding-top:21px;gap:18px;}.bottom-strip>div{border-left:1px solid #235061;padding-left:12px;}.micro-label{display:block;color:#698594;font-size:9px;letter-spacing:.15em;margin-bottom:7px;}.bottom-strip strong{font-size:11px;font-weight:500;color:#b8ced6;}
.inspector {min-width:0;background:#091722;border-left:1px solid var(--line);}.inspect-head{height:65px;border-bottom:1px solid var(--line);padding:0 23px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.11em;font-weight:650;color:#c9dfeb;}.inspect-gear {color:#5e9aa8;font-size:16px;}.inspect-body {padding:0 24px 32px;}.section-label {padding:23px 0 15px;color:#72cbdb;font-size:10px;letter-spacing:.13em;font-weight:700;border-bottom:1px solid #1a3440;margin-bottom:18px;display:flex;justify-content:space-between;}.section-label span{color:#4c6572;}.field {margin-bottom:17px;}.field label {display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:#95afbb;font-size:10px;letter-spacing:.1em;font-weight:600;}.field output {font-size:11px;color:#72dce9;font-weight:700;letter-spacing:0;}.field select {width:100%;background:#122431;border:1px solid #2a4150;color:#cde1eb;font-size:11px;padding:10px 9px;outline:0;border-radius:2px;}.field select:focus{border-color:#65d0e4;}.split {display:grid;grid-template-columns:1fr 1fr;gap:12px;}.split>div {min-width:0;}.field input[type=color]{width:100%;height:37px;padding:4px;background:#152a37;border:1px solid #2b4653;border-radius:2px;cursor:pointer;}.field input[type=range] {width:100%;margin:0;accent-color:#54cce0;cursor:pointer;}
.toggle-line {position:relative;display:flex;align-items:center;justify-content:space-between;color:#9ab4c0;font-size:10px;letter-spacing:.04em;cursor:pointer;}.toggle-line small {display:block;color:#5b7988;font-size:9px;margin-top:6px;}.toggle-line input{position:absolute;opacity:0;right:0;}.toggle-ui {width:34px;height:19px;background:#243845;position:relative;border-radius:12px;transition:background .2s;flex:none;}.toggle-ui:after {content:"";position:absolute;width:13px;height:13px;background:#8295a0;border-radius:50%;left:3px;top:3px;transition:transform .2s;}.toggle-line input:checked+.toggle-ui{background:#216d7a;}.toggle-line input:checked+.toggle-ui:after {background:#6be1ed;transform:translateX(15px);}.note {display:flex;gap:12px;margin-top:26px;padding:13px;background:#122834;border:1px solid #274454;color:#91adbb;font-size:10px;line-height:1.7;}.note strong {color:#b9dde7;}.note code{color:#8de0e8;}.note-icon{border:1px solid #6599a5;width:16px;height:16px;display:inline-grid;place-items:center;color:#8bd4e0;border-radius:50%;flex:none;}
footer {border-top:1px solid var(--line);height:44px;padding:0 36px;display:flex;align-items:center;gap:12px;color:#5a7481;font-size:9px;letter-spacing:.12em;}
@media(max-width:1200px) {.main-layout{grid-template-columns:minmax(0,1fr) 305px}.workspace{padding:29px 23px}.inspector .inspect-body{padding:0 18px 25px}.viewer-legend{display:none}.btn{padding:11px 12px}}
@media(max-width:900px) {.main-layout{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid var(--line)}.inspect-body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.section-label,.note{grid-column:1/-1}.viewer{height:52vh;min-height:350px}.topbar{padding:0 18px}.workspace{padding:22px 18px}.bottom-strip{grid-template-columns:1fr 1fr}.head-mark{display:none}}
@media(max-width:520px) {.top-meta .build-id{display:none} h1{font-size:25px}.workspace-header{padding-bottom:19px}.workspace-header p{font-size:10px}.viewer{min-height:340px}.viewer-left-tag,.viewer-bottom span:nth-child(2),.viewer-bottom span:nth-child(3){display:none}.viewer-top,.viewer-bottom{font-size:8px}.transport{gap:14px}.transport-group{width:100%}.btn{flex:1}.inspect-body{display:block!important}.section-label,.note{display:flex}.bottom-strip{gap:14px}.topbar{height:61px} footer{padding:0 18px;font-size:8px}.head-mark{display:none}}