:root {color-scheme:dark;--bg:#080c13;--panel:#101721;--panel2:#121b26;--stroke:#24303d;--text:#e8f1f6;--muted:#78899b;--accent:#74e4f6;--warn:#ff9452}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;letter-spacing:.012em}
button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:76px;min-height:76px;background:#0c131c;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:15px}
.brand{display:flex;align-items:center;gap:14px}.brand-mark{border:1px solid #4b8094;width:34px;height:34px;display:grid;place-items:center;transform:rotate(45deg)}.brand-mark span{width:17px;height:17px;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 13px #5bddff77}.brand-name{font-weight:800;font-size:15px;letter-spacing:.16em}.brand-name span{color:#4d6574}.brand-sub{color:var(--muted);font-size:9px;letter-spacing:.22em;margin-top:5px}.dot{color:var(--accent)}.header-right{display:flex;gap:13px;align-items:center}.tag{border:1px solid var(--stroke);border-radius:3px;padding:8px 10px;color:#96b3c3;letter-spacing:.12em;font-size:9px}.live{font-size:10px;color:#b9e9d9;letter-spacing:.12em}.live i,.pulse-led{display:inline-block;width:7px;height:7px;background:#67d9bd;border-radius:50%;box-shadow:0 0 10px #65e7bb}.live i{margin-right:7px}
.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 342px;min-height:calc(100vh - 76px)}.viewport-panel{display:flex;flex-direction:column;min-width:0;background:#0a1018}.canvas-wrap{position:relative;flex:1;min-height:520px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#27394b,#090e16 70%)}canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-heading{pointer-events:none;position:absolute;left:30px;top:28px}.view-overline{font-size:10px;letter-spacing:.22em;color:var(--accent)}h1{font-size:clamp(27px,3vw,43px);margin:9px 0 3px;font-weight:800;letter-spacing:.055em;line-height:1.0}h1 em{color:var(--warn);font-style:normal}.viewport-heading p{font-size:11px;letter-spacing:.045em;color:#a2b5c2}.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#94dfe233;font-size:27px;pointer-events:none}.view-hint{position:absolute;left:30px;bottom:73px;font-size:9px;color:#8b9dab;letter-spacing:.15em}.kbd{display:inline-block;border:1px solid #526475b3;padding:5px 7px;border-radius:3px;margin:0 5px 0 8px;color:#c1ced7}.kbd:first-child{margin-left:0}.hud-right{position:absolute;right:28px;top:35px;text-align:right;display:grid;gap:15px}.hud-right div{display:grid;gap:3px}.hud-right span{color:#778a9b;font-size:9px;letter-spacing:.18em}.hud-right b{font-size:12px;letter-spacing:.12em;font-weight:500;color:#d9edf2}.view-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 28px;background:linear-gradient(to bottom,#0a101900,#090f18dc);border-top:1px solid #5264752e}.live-line{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.15em;color:#b8d0db}.pulse-led{width:6px;height:6px}.readouts{display:flex;gap:25px;color:#91a5b4;font-size:10px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.transport{padding:20px 28px;background:#0f1721;border-top:1px solid var(--stroke);display:flex;gap:35px;align-items:center}.transport-group{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}.transport button{border:1px solid #334658;background:#172433;color:#d7e8f1;padding:11px 14px;border-radius:4px;font-weight:700;font-size:11px}.transport .primary{background:linear-gradient(105deg,#6dd5eb,#8cf1f5);color:#0a1623;border-color:#7bd4e7;box-shadow:0 0 15px #3de4ff22}.transport .primary span{margin-right:5px}.timeline{min-width:125px;flex:1}.progress-copy{display:flex;justify-content:space-between;color:#8ea7b7;font-size:9px;letter-spacing:.13em;margin-bottom:8px}.progress-copy strong{color:var(--accent)}input[type=range]{width:100%;appearance:none;height:4px;background:#2e4354;border-radius:5px;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #67e6fb88;border:2px solid #10202b}.spec-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--stroke);background:#0c131c;padding:17px 28px;gap:14px}.spec-strip>div{border-right:1px solid #2c3946;display:grid;gap:7px}.spec-strip>div:last-child{border:0}.spec-strip span{color:var(--accent);font-size:9px;letter-spacing:.18em}.spec-strip b{font-size:10px;font-weight:600;letter-spacing:.08em;color:#bbced9}
.control-panel{background:#101720;border-left:1px solid var(--stroke);min-height:0}.panel-head{padding:27px 26px 23px;border-bottom:1px solid var(--stroke);background:linear-gradient(145deg,#172431,#111823)}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:.16em}.eyebrow span{float:right;font-size:15px}.panel-head h2{font-size:24px;line-height:1.2;margin:10px 0 6px;letter-spacing:-.02em}.panel-head p{font-size:11px;color:#8ea2af;line-height:1.6;margin:0}.panel-head code{color:#c0d7e7}.panel-body{padding:18px 26px 28px}.section-title{font-size:10px;font-weight:800;color:#cbdce5;letter-spacing:.17em;display:flex;justify-content:space-between;margin-bottom:22px}.section-title span{color:#648294}.dividing{border-top:1px solid var(--stroke);padding-top:22px;margin-top:25px}.field{margin-bottom:19px}.field label{display:block;color:#8e9fae;font-size:9px;font-weight:700;letter-spacing:.14em;margin-bottom:8px}select{width:100%;height:39px;border:1px solid #334353;background:#172432;color:#cddce8;border-radius:4px;padding:0 10px;cursor:pointer}.slider-field{margin:19px 0}.slider-field label{display:flex;justify-content:space-between;align-items:center;color:#aebdc9;font-size:11px;margin-bottom:11px}.slider-field output{font-size:10px;color:var(--accent);font-variant-numeric:tabular-nums}.check-line{display:flex;align-items:center;justify-content:space-between;color:#afbeca;font-size:11px;cursor:pointer;padding:10px 0}.check-line input{position:absolute;opacity:0}.switch{width:37px;height:19px;background:#2d404f;border-radius:20px;position:relative;transition:background .2s}.switch:before{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#8a9dab;left:3px;top:3px;transition:transform .2s}.check-line input:checked+.switch{background:#238494}.check-line input:checked+.switch:before{transform:translateX(18px);background:#bfffff}.audio-btn,.copy-btn{width:100%;height:39px;border:1px solid #3d7586;background:#183440;color:#a1e9f4;text-align:left;padding:0 12px;font-size:11px;font-weight:700;border-radius:4px}.audio-btn span{float:right;font-size:9px;letter-spacing:.14em}.audio-note{color:#7892a1;font-size:10px;line-height:1.6;margin:11px 0 17px}.copy-btn{border-color:#334658;background:#19232f;color:#c4d2de;text-align:center}.footer-note{border-top:1px solid var(--stroke);margin-top:25px;padding-top:22px;color:#69808d;line-height:2.1;font-size:9px;letter-spacing:.13em}.footer-note span{padding:0 4px;color:#47677a}
@media(max-width:1120px){.main-grid{grid-template-columns:minmax(0,1fr) 315px}.transport{flex-wrap:wrap;gap:15px}.timeline{width:100%;flex:auto}.spec-strip b{font-size:9px}}@media(max-width:800px){.topbar{height:64px;min-height:64px;padding:0 16px}.header-right .tag{display:none}.main-grid{display:flex;flex-direction:column}.canvas-wrap{min-height:480px;height:58vh;flex:none}.control-panel{border-left:0;border-top:1px solid var(--stroke)}.viewport-heading{left:16px;top:20px}.view-hint{left:16px;bottom:60px;letter-spacing:.06em}.hud-right{right:16px;top:24px}.hud-right div:nth-child(2){display:none}.view-bottom{padding:0 16px}.transport{padding:15px}.spec-strip{padding:15px;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.spec-strip>div:nth-child(2){border:0}.panel-body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.panel-body>.section-title,.field,.audio-note,.audio-btn,.copy-btn,.footer-note,.check-line{grid-column:span 2}.field{grid-column:span 1}.panel-head{padding:21px 20px}.panel-body{padding:20px}}
@media(max-width:500px){.brand-name{font-size:12px}.brand-sub{font-size:8px;letter-spacing:.08em}.live{font-size:0}.live i{margin:0}.viewport-heading p{font-size:10px;max-width:220px;line-height:1.4}.hud-right div:first-child{display:none}.canvas-wrap{height:54vh;min-height:420px}.view-hint{font-size:8px}.kbd{padding:4px;margin-right:2px}.transport button{padding:9px 10px;font-size:10px}.spec-strip{font-size:8px}.readouts{gap:9px;font-size:9px}}