:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#edf0ef;background:#0e141a;font-synthesis:none}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:1px solid #394651;color:#c9d1d7;background:#1a2630;transition:.16s ease}button:hover{background:#283b49;border-color:#b68145;color:#fff}button:focus-visible,input:focus-visible{outline:2px solid #e7a74d;outline-offset:2px}
.app-shell{display:flex;width:100%;height:100dvh;min-height:440px}.visual-area{position:relative;flex:1;min-width:0;background:#151d24;overflow:hidden}#viewport{display:block;width:100%;height:100%;touch-action:none;outline:none}
.visual-area:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,15,.73),transparent 22%,transparent 65%,rgba(5,10,15,.7));z-index:1}
.topbar{position:absolute;z-index:2;top:0;left:0;right:0;height:85px;display:flex;align-items:center;gap:12px;padding:20px 31px;border-bottom:1px solid #74839129}
.brand-mark{width:42px;height:42px;border:2px solid #e6ac52;display:flex;align-items:center;justify-content:center;color:#e4b063;font-weight:950;font-size:24px;letter-spacing:-4px;padding-right:5px}.brand-mark span{font-size:13px;align-self:start;letter-spacing:0}.brand-text{font-size:15px;font-weight:900;letter-spacing:2px}.brand-text span,.panel-footer span span{color:#e9a84b}.brand-text small{display:block;font-size:9px;color:#8ea0aa;letter-spacing:1.85px;margin-top:2px}.topbar-right{margin-left:auto;font-size:10px;color:#c7d0d4;letter-spacing:1.7px}.topbar-right .sep{color:#576879;padding:0 8px}
.live-dot{display:inline-block;width:7px;height:7px;background:#f3b45d;border-radius:50%;box-shadow:0 0 14px #e2a044;vertical-align:middle;margin-right:8px;animation:breathe 2s infinite}@keyframes breathe{50%{opacity:.45}}
.hero-intro{position:absolute;z-index:2;top:117px;left:35px;pointer-events:none}.eyebrow{font-family:ui-monospace,monospace;font-size:10px;font-weight:700;color:#e5ac54;letter-spacing:2px;margin:0 0 10px}.eyebrow span{color:#7d8c94}.hero-intro h1{font-size:clamp(43px,5vw,78px);letter-spacing:-4px;font-weight:900;margin:0;line-height:1}.hero-intro h1 span{color:#e9ab56}.headline{font-size:13px;font-weight:800;letter-spacing:2px;margin:12px 0 8px;color:#e4eaeb}.headline span{color:#e7b56b}.subline{max-width:550px;color:#b2bdc4;font-size:9px;letter-spacing:1.1px}
.screen-label{position:absolute;z-index:2;bottom:94px;left:35px;color:#dce7e6;font-size:10px;letter-spacing:1.7px}.bottom-center{position:absolute;z-index:2;bottom:35px;left:35px;color:#adb9c2;font-size:9px;letter-spacing:1.7px}.bottom-center span{color:#e5ad58;margin:0 9px}.view-switch{position:absolute;right:30px;bottom:35px;z-index:2;display:flex;gap:5px}.view-switch button{padding:10px 12px;font-family:ui-monospace,monospace;font-size:10px;font-weight:800;letter-spacing:.5px;background:#14212ddc}.view-switch button span{color:#91a4b1;font-weight:500;padding-left:7px}.view-switch .selected,.presets .selected,.action-grid .selected{background:#c38d42;color:#0b151c;border-color:#f0b863}.view-switch .selected span{color:#293744}
.side-panel{position:relative;z-index:3;width:368px;min-width:368px;background:#111b23;box-shadow:-11px 0 44px #070c11bb;border-left:1px solid #334350;display:flex;flex-direction:column}.panel-top{height:90px;padding:23px 22px 13px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2b3943}.panel-top .eyebrow{margin:0 0 7px}.panel-top h2{font-size:20px;line-height:1;margin:0;font-weight:900;letter-spacing:-.4px}.panel-top h2 span{color:#d39b52}.panel-top button{font-size:25px;min-width:34px;background:transparent;border:0;color:#a3b3c0}
.status-bar{margin:16px 21px 17px;padding:12px 14px;background:#213329;border:1px solid #3c6048;display:flex;align-items:center;font-size:10px;letter-spacing:1.1px}.status-bar strong{color:#c8f2b5;font-size:10px}.status-bar .pause-btn{font-size:9px;font-weight:800;letter-spacing:.8px;margin-left:auto;padding:7px 8px;background:#2b4536;border-color:#527454;color:#ccf3bd}.status-bar .live-dot{background:#a3dc90;box-shadow:0 0 9px #92ce7f}.status-bar .idle{color:#eed5ac}
.section-title{margin:0;padding:0 21px;color:#9caab5;font-family:ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:1.4px}.presets{padding:12px 21px 21px;display:grid;grid-template-columns:repeat(2,1fr);gap:7px;border-bottom:1px solid #2b3943}.presets button{padding:12px 5px;font-size:10px;font-weight:800;letter-spacing:.4px}.scroll-body{padding:19px 21px 24px;overflow:auto;scrollbar-color:#435461 #121b23;scrollbar-width:thin;flex:1}.scroll-body>.section-title{padding:0}.with-number{color:#d39c4e;margin:4px 0 21px}.with-number span{color:#abb8bd;margin-left:11px}.control{margin-bottom:19px}.control label{display:flex;justify-content:space-between;align-items:center;color:#c5cfd5;font-size:10px;font-weight:700;letter-spacing:.8px;margin-bottom:11px}.control output{font-family:ui-monospace,monospace;color:#f0ba71;font-size:12px;font-weight:800;letter-spacing:0}input[type=range]{width:100%;height:4px;margin:0;accent-color:#e6ad5a;cursor:pointer}input[type=checkbox]{accent-color:#d5a15b;width:17px;height:17px;cursor:pointer}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;border-bottom:1px solid #26323b;font-size:10px;font-weight:700;letter-spacing:.75px;color:#b4bfc5}.toggle-row+.with-number{margin-top:21px}
.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid #2b3b46;background:#2b3b46}.telemetry-grid>div{background:#14222c;padding:15px 11px}.telemetry-grid small{display:block;color:#8798a5;font-size:9px;letter-spacing:1px;margin-bottom:9px}.telemetry-grid strong{font-family:ui-monospace,monospace;font-size:24px;font-weight:800;color:#f3f4ee}.telemetry-grid em{font-size:10px;color:#d09c54;font-style:normal}.disclaimer{font-size:9px;line-height:1.6;color:#87949c;margin:12px 0 23px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.action-grid button{font-family:ui-monospace,monospace;font-size:10px;padding:12px 7px;font-weight:700}.asset-identity{display:flex;flex-direction:column;gap:8px;margin-top:23px;padding:14px 0;border-top:1px solid #293843;color:#788b9a;font-size:9px;letter-spacing:1px}.asset-identity code{color:#c6a475;font-size:10px;letter-spacing:0;overflow-wrap:anywhere}.panel-footer{border-top:1px solid #2d3c48;color:#788c99;padding:14px 22px;display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:1px}.panel-footer>span:first-child{color:#d0dcde;font-weight:900}
body.panel-hidden .side-panel{width:0;min-width:0;overflow:hidden}#reopen-panel{display:none;position:absolute;top:93px;right:20px;z-index:5;font-size:11px;letter-spacing:1px;padding:13px;color:#e8bb7d}body.panel-hidden #reopen-panel{display:block}.loading{pointer-events:none;position:absolute;inset:0;background:#101b23;display:flex;z-index:10;align-items:center;justify-content:center;flex-direction:column;transition:opacity .65s}.loading.done{opacity:0}.loading-bar{height:3px;width:140px;background:#d99c51;box-shadow:0 0 30px #eda950}.loading p{color:#c9ad84;font:10px ui-monospace,monospace;letter-spacing:1.9px;margin-top:18px}
dialog{max-width:550px;width:calc(100% - 30px);border:1px solid #b78c4c;background:#16232d;color:#dfebed;box-shadow:0 25px 80px #000b;padding:24px;line-height:1.6;font-size:13px}dialog::backdrop{background:#081019c7}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.modal-head h2{font-size:16px;color:#e6b574}.modal-head button{font-size:20px;padding:4px 10px}
@media(max-width:1100px){.side-panel{width:332px;min-width:332px}.hero-intro h1{font-size:47px}.view-switch{bottom:75px;right:15px}.view-switch button{padding:8px 7px}.view-switch button span{display:none}.bottom-center{max-width:370px;line-height:1.8}}
@media(max-width:740px){.app-shell{display:block}.visual-area{height:52dvh;min-height:330px}.side-panel{width:100%;min-width:0;height:48dvh;min-height:270px}.topbar{padding:12px 18px;height:60px}.brand-mark{width:33px;height:33px}.brand-text{font-size:12px}.brand-text small{font-size:7px}.topbar-right{display:none}.hero-intro{top:82px;left:17px}.hero-intro h1{font-size:42px}.headline{font-size:10px}.subline{font-size:8px;max-width:290px;line-height:1.4}.screen-label{left:17px;bottom:71px}.bottom-center{left:17px;bottom:19px;font-size:8px;max-width:240px}.view-switch{right:10px;bottom:15px}.panel-top{height:66px;padding:14px 18px}.panel-top h2{font-size:17px}.status-bar{margin:10px 18px}.presets{padding:8px 18px 12px}.presets button{padding:8px 2px}.scroll-body{padding:15px 18px}.panel-footer{display:none}body.panel-hidden .side-panel{height:0}body.panel-hidden .visual-area{height:100dvh}}