:root{color-scheme:dark;--bg:#080e16;--panel:#0e1722;--line:#263545;--text:#e4eef6;--sub:#8398a8;--cyan:#70d7ff;--highlight:#1c88c9;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 53% -10%,#1b2e41 0%,#080e16 44%);color:var(--text)}button,input,select{font:inherit}button,select{cursor:pointer}.layout{min-height:100vh;display:flex;flex-direction:column;max-width:1800px;margin:auto;padding:0 24px}.topbar{height:89px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.branding{display:flex;align-items:center;gap:16px}.brand-mark{width:43px;height:43px;display:grid;place-items:center;border:1px solid #37759b;border-radius:12px;color:#83dfff;font-size:27px;background:#152b3e;box-shadow:0 0 28px #0b7ac21e}.eyebrow{font-weight:750;letter-spacing:2.2px;font-size:10px;color:#75a5c5}h1{font-size:20px;letter-spacing:1.2px;margin:4px 0 0;font-weight:800}h1 span{color:#a4bac9;font-weight:400;letter-spacing:.2px}.topright{display:flex;gap:20px;align-items:center}.pill{font-size:10px;letter-spacing:1.6px;border:1px solid #24516a;padding:8px 11px;border-radius:20px;color:#8cdcff}.led{display:inline-block;background:#42f0bf;width:7px;height:7px;border-radius:50%;margin-right:8px;box-shadow:0 0 8px #42f0bf}.version{color:#8194a2;font-size:11px;letter-spacing:1.2px}.main{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:17px;padding-top:20px;flex:1}.viewer-panel,.inspector{border:1px solid var(--line);background:linear-gradient(145deg,#121e2a,#0b131d 55%);border-radius:13px;overflow:hidden}.viewer-panel{display:flex;flex-direction:column;min-height:690px}.viewer-caption{display:flex;justify-content:space-between;padding:17px 20px;font-size:10px;color:#86aac3;letter-spacing:1.7px;font-weight:700;border-bottom:1px solid #263545}.viewport{flex:1;position:relative;min-height:480px;background:radial-gradient(ellipse at center,#112639 0%,#070c15 72%);overflow:hidden}.viewport canvas{display:block;width:100%;height:100%}.crosshair{pointer-events:none;position:absolute;inset:50% auto auto 50%;opacity:.35}.crosshair span{position:absolute;background:#689db2}.crosshair span:first-child{width:1px;height:16px;top:-8px}.crosshair span:last-child{height:1px;width:16px;left:-8px}.viewer-note{pointer-events:none;position:absolute;bottom:17px;left:20px;color:#7690a2;letter-spacing:1.2px;font-size:10px}.viewer-note span{padding:0 6px;color:#36758f}.transport{display:flex;gap:9px;align-items:center;padding:14px;border-top:1px solid var(--line);flex-wrap:wrap}.transport button{background:#172635;color:#d5e4ee;border:1px solid #345065;border-radius:7px;padding:9px 14px;font-size:12px;transition:.15s}.transport button:hover{border-color:#7acbea;background:#22445d}.transport button.primary{background:#1476a8;border-color:#399ac3;color:white;font-weight:700}.transport-end{display:flex;align-items:center;margin-left:auto;gap:18px}.playback{font-size:10px;letter-spacing:1px;color:#65c2c9;white-space:nowrap}.info-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.info-strip>div{padding:17px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.info-strip>b{font-size:10px}.info-strip b{font-size:10px;letter-spacing:1.5px;color:#9bcae6}.info-strip small{font-size:11px;color:#7792a6}.inspector{padding:21px 20px 18px}.section-title{font-size:11px;font-weight:800;color:#b5c9d8;letter-spacing:1.3px;display:flex;justify-content:space-between;margin-bottom:27px}.section-title span{color:#46cda8;font-size:9px;letter-spacing:.6px}.control{margin-bottom:22px}.control label,.row-controls label{display:flex;justify-content:space-between;color:#b9cbd8;font-size:11px;letter-spacing:.15px;margin-bottom:10px}.control output{font-variant-numeric:tabular-nums;color:#77d7f5;font-weight:700}.control select,.row-controls select{width:100%;height:37px;background:#121f2d;color:#dce9f2;border:1px solid #375064;border-radius:6px;padding:0 9px;font-size:12px}.control input[type=range]{width:100%;accent-color:#51c5eb;cursor:pointer}.divider{height:1px;background:#2b3948;margin:23px 0}.row-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0}.row-controls label{margin:0}.row-controls input[type=color]{width:44px;height:29px;border:1px solid #456478;background:transparent;padding:2px;border-radius:5px}.row-controls select{width:134px}.disclaimer{margin-top:24px;font-size:10px;line-height:1.7;color:#778a98}footer{display:flex;justify-content:space-between;color:#657d8f;letter-spacing:1.3px;font-size:9px;padding:20px 4px;gap:20px}@media(max-width:1000px){.main{grid-template-columns:1fr}.viewer-panel{min-height:580px}.inspector{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}.section-title,.divider,.disclaimer{grid-column:1/-1}}@media(max-width:660px){.layout{padding:0 10px}.topbar{height:auto;min-height:85px}.version,.topright{display:none}h1{font-size:16px}h1 span{display:block;font-size:12px}.viewer-panel{min-height:480px}.viewport{min-height:350px}.inspector{grid-template-columns:1fr}.transport-end{margin-left:0}.info-strip>div{padding:12px 8px}.info-strip small{font-size:9px}footer span:last-child{display:none}}