:root { --ink:#dfe9ed; --muted:#81949f; --cyan:#5cdad2; --line:#263442; --surface:#0f1821; --panel:#101a23; color-scheme:dark; font-family: Inter, ui-sans-serif, system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html,body {padding:0; margin:0; min-height:100%; background:#080e16; color:var(--ink);} button,input,select {font:inherit;} button{cursor:pointer;} .application {min-height:100vh; display:flex; flex-direction:column; }
.topbar {height:72px; background:#0a121b; border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;z-index:2;}
.identity{display:flex;align-items:center;gap:14px}.identity .mark{width:37px;height:37px;display:grid;place-items:center;border:1px solid #5cdad266;transform:rotate(45deg);color:#5cdad2}.mark span{display:block;transform:rotate(-45deg);font-size:25px}.identity strong{display:block;font-weight:780;letter-spacing:3px;font-size:17px}.identity small{color:#7997a4;letter-spacing:2px;font-size:9px;display:block;margin-top:3px}.topright{display:flex;align-items:center;gap:15px;color:#7d8f9e;letter-spacing:1.6px;font-weight:650;font-size:10px}.indicator,.live-dot{height:7px;width:7px;border-radius:50%;background:#67ead2;box-shadow:0 0 12px #67ead2}.separator{color:#3f5964}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 344px;min-height:calc(100vh - 72px);}
.viewer{position:relative;min-height:660px;overflow:hidden;background:#090f17}.viewer:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 28%,#050b1290 90%);pointer-events:none;}#viewport{position:absolute;inset:0;}#viewport canvas{height:100%;width:100%;display:block}.viewer-head{position:absolute;top:42px;left:45px;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2.3px;color:#61c9c2;font-weight:760}.viewer-head h1{font-size:clamp(23px,2.5vw,39px);font-weight:540;letter-spacing:-1.2px;line-height:1.17;margin:13px 0 14px}.viewer-head h1 em{font-style:normal;color:#71d0cb}.viewer-head p{max-width:260px;color:#859ca7;font-size:12px;line-height:1.7}.viewer-badge{position:absolute;right:36px;top:44px;display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1.6px;color:#aec8cb;z-index:1}.reticle{position:absolute;width:21px;height:21px;pointer-events:none;border-color:#43657270;border-style:solid;z-index:1}.reticle-tl{top:20px;left:22px;border-width:1px 0 0 1px}.reticle-tr{top:20px;right:22px;border-width:1px 1px 0 0}.reticle-bl{bottom:20px;left:22px;border-width:0 0 1px 1px}.reticle-br{bottom:20px;right:22px;border-width:0 1px 1px 0}.viewport-foot{position:absolute;left:45px;right:45px;bottom:38px;display:flex;align-items:flex-end;gap:36px;z-index:1;pointer-events:none}.readout{border-top:1px solid #466a716b;min-width:100px;padding-top:9px}.readout>span{display:block;font-size:9px;letter-spacing:1.8px;color:#899ea7}.readout strong{font-size:28px;font-weight:450;font-variant-numeric:tabular-nums}.readout strong small{font-size:11px;color:#7a929e;margin-left:3px}.viewport-hint{margin-left:auto;white-space:nowrap;font-size:10px;letter-spacing:1px;color:#718893;padding-bottom:9px}.error{position:absolute;left:15%;right:15%;top:43%;background:#251c1d;color:#ffc0c0;padding:24px;border:1px solid #9d6666;z-index:20;font-size:13px;line-height:1.6}
.sidebar{background:#101922;border-left:1px solid #293943;display:flex;flex-direction:column}.panel-section{padding:23px 26px;border-bottom:1px solid var(--line)}.panel-intro{padding-top:34px;padding-bottom:23px}.panel-intro h2{font-size:21px;letter-spacing:-.4px;font-weight:550;margin:10px 0 5px}.panel-intro p{font-size:11px;line-height:1.6;color:#879aa2;margin:0}.panel-intro code{color:#afc2c7;font-size:10px}.section-label{font-size:10px;letter-spacing:1.8px;color:#61858e;font-weight:760;margin-bottom:20px}.section-label span{color:#bad0d6;margin-left:8px}.field{display:block;margin-bottom:18px}.field:last-child{margin-bottom:0}.field-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:11px;color:#b7cbd1}.field output{color:#69e4d7;font-size:11px;font-variant-numeric:tabular-nums}.field input[type="range"]{width:100%;appearance:none;height:3px;border-radius:5px;background:#32434d;outline:none;display:block;margin:14px 0 4px;accent-color:#6de5d6}.field input[type="range"]::-webkit-slider-thumb{appearance:none;border:3px solid #101922;background:#7cebdc;box-shadow:0 0 0 1px #78dbc9;height:15px;width:15px;border-radius:50%}.select-field{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:11px;color:#b1c6cf;margin-bottom:14px}.select-field:last-child{margin-bottom:0}.select-field input[type="color"]{width:48px;height:26px;border:1px solid #4c666f;background:transparent;border-radius:2px;padding:1px;cursor:pointer}.select-field select{appearance:none;background:#14232e;color:#c8dadd;border:1px solid #38505b;font-size:10px;letter-spacing:.3px;padding:9px;max-width:200px;width:100%;outline:none}.sidebar>.panel-section .select-field:has(select){display:block;color:#97afb9}.sidebar>.panel-section .select-field select{margin-top:8px;display:block;max-width:none}.inline-fields{display:flex;gap:18px;justify-content:space-between;margin-bottom:18px}.inline-fields .select-field{flex:1;white-space:nowrap}.audio-button{width:100%;background:#142d32;border:1px solid #406b6b;color:#a9e7df;padding:12px 11px;text-align:left;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1.2px;font-weight:700}.audio-button:hover{background:#184046}.sound-symbol{font-size:18px}.status-chip{font-size:9px;padding:3px 5px;margin-left:auto;background:#273e41}.compact{margin-top:18px;margin-bottom:0}.panel-bottom{padding:24px 26px;margin-top:auto}.transport{display:flex;gap:8px;margin-bottom:8px}.transport button{flex:1;padding:12px 5px;border:1px solid #3f5862;background:#15232d;color:#c3d5d8;font-size:10px;letter-spacing:.6px}.transport button:hover{border-color:#85d6d2;background:#203440}.transport button.primary{background:#7be0d5;color:#062022;border-color:#7be0d5;font-weight:800}.transport.alt button{font-size:9px;min-height:36px}.info-note{font-size:10px;color:#788c99;line-height:1.7;margin:14px 0 0}
@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 313px}.viewer-head{left:30px}.viewer-foot{left:30px;right:30px;gap:20px}.viewport-hint{display:none}}@media(max-width:750px){.topbar{height:60px;padding:0 16px}.topright{display:none}.workspace{display:flex;flex-direction:column}.viewer{min-height:520px;height:58vh}.viewer-head{top:28px;left:22px}.viewer-badge{top:26px;right:22px;font-size:8px}.viewer-head p{max-width:210px}.viewer-head h1{font-size:26px}.viewport-foot{left:22px;right:22px;bottom:22px;gap:16px}.readout{min-width:75px}.readout strong{font-size:23px}.sidebar{border-top:1px solid var(--line)}.panel-section,.panel-bottom{padding-left:22px;padding-right:22px}}