:root{color-scheme:dark;--bg:#06121c;--panel:#0c1d2a;--edge:#213749;--text:#e7f4f7;--quiet:#8caab8;--cyan:#70daca;--gold:#ebb979}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg);font:14px/1.5 Inter,system-ui,Arial,sans-serif}button,select,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:var(--gold)}
.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:22px clamp(18px,3vw,52px);display:flex;justify-content:space-between;align-items:center;gap:20px;background:#0b1d2b;border-bottom:1px solid var(--edge)}.brand{font-weight:800;font-size:11px;letter-spacing:3px;color:#f2f6f9}.brand span:not(.divider){color:#71e1c7}.brand .divider{padding:0 12px;color:#496a77}.header h1{font-size:clamp(19px,2.2vw,31px);line-height:1.25;margin:8px 0 3px;letter-spacing:-.5px}.subtitle{font-size:12px;color:var(--quiet)}.header-actions{display:flex;align-items:center;gap:22px;font-size:11px}.pill{border:1px solid #2a6b6a;color:#73d4c5;padding:8px 12px;border-radius:4px;letter-spacing:1px;font-weight:700;white-space:nowrap}
.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:640px;flex:1}.viewport{min-height:640px;position:relative;overflow:hidden}.viewport #stage{position:absolute;inset:0}.viewport canvas{display:block;touch-action:none}.corner{position:absolute;left:25px;padding:9px 13px;background:#06131dcf;border:1px solid #284757;border-radius:6px;color:#a8c6d1;font-size:10px;letter-spacing:.5px;pointer-events:none;max-width:75%}.corner.top-left{top:23px}.corner.bottom-left{bottom:26px}.live-dot{display:inline-block;width:7px;height:7px;background:#43d9b4;border-radius:100%;margin-right:8px;box-shadow:0 0 11px #44dfb6}.orbit-hint{position:absolute;bottom:29px;right:23px;color:#93afbe;font-size:10px;pointer-events:none}.loading{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);color:#d5e9f0;background:#081c2af0;padding:15px 22px;border-radius:9px;border:1px solid #365568;max-width:90%;text-align:center}.loading[hidden]{display:none}
.panel{background:var(--panel);border-left:1px solid var(--edge);padding:20px;overflow-y:auto;max-height:calc(100vh - 130px)}.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:1px;color:#d3e8ef}.status{font-size:8px;color:#5bd7b4;border:1px solid #235c54;border-radius:4px;padding:5px}.main-action{display:flex;gap:8px;margin:19px 0!important}.run{background:#267d77;color:white;border:1px solid #37bbaa;border-radius:6px;padding:11px 15px;flex:1;font-weight:800}.run.active{background:#9b4f45;border-color:#d98469}.alt,.buttons button{background:#152a3b;border:1px solid #314e5b;color:#bcd3df;border-radius:6px;padding:8px 10px}.group{padding:14px 0;border-top:1px solid var(--edge)}.group-title{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#7d9fac;margin-bottom:14px}.control{margin-bottom:14px}.control label{display:flex;justify-content:space-between;gap:10px;color:#b2cbd5;font-size:12px;margin-bottom:7px}.control strong{color:#f7d6a9;font-variant-numeric:tabular-nums}.control strong small{font-weight:500}.control input[type=range]{width:100%;accent-color:#57c6bb;height:4px;margin:0;cursor:pointer}.field-label{display:block;font-size:11px;color:#b2cbd5;margin:9px 0 5px}select{background:#142b3b;border:1px solid #365566;color:#c4e0ea;border-radius:5px;padding:8px 10px;width:100%;font-size:12px}select option{background:#122638}.toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:#bcd4db;margin:12px 0;cursor:pointer}.toggle input{accent-color:#50bdae;width:16px;height:16px}.buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.buttons button:hover,.alt:hover{background:#254255}.metrics{padding-bottom:0}.metric{display:flex;flex-direction:column;gap:1px;padding:10px 12px;background:#102635;border:1px solid #254153;border-radius:5px;margin-bottom:7px}.metric small{color:#99bdc8;font-size:10px}.metric strong{font-size:19px;letter-spacing:-.5px;color:#d4e5ed}.metric.primary{background:#113a3b;border-color:#236c6a}.metric.primary strong{color:#66f2d1}.notice{font-size:10px;color:#819baa;line-height:1.65;border-top:1px solid var(--edge);padding-top:15px}footer{background:#091a27;border-top:1px solid var(--edge);padding:15px 28px;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:11px;color:#7894a5}footer strong{color:#d1e5ee}footer p{max-width:860px;margin:4px 0 0}footer>span{white-space:nowrap;font-size:10px;letter-spacing:1px}
@media(max-width:1050px){.main{grid-template-columns:minmax(0,1fr) 290px}.panel{padding:14px}.orbit-hint{display:none}}@media(max-width:740px){.header{padding:14px 18px}.header-actions{display:none}.main{display:flex;flex-direction:column}.viewport{min-height:min(67vh,540px)}.panel{max-height:none;border-left:0;border-top:1px solid var(--edge);padding:20px}.group{max-width:600px}footer>span{display:none}.corner{left:10px}.corner.top-left{top:12px}.corner.bottom-left{bottom:12px}.status{font-size:9px}}