:root{--ink:#d9eeeb;--muted:#8cadac;--edge:rgba(129,220,204,.15);--accent:#8ddbc8;--teal:#32a9a2;--bg:#051b25}*{box-sizing:border-box}html,body{padding:0;margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 70% 45%,#1b5360 0%,#07323f 47%,#03121e 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);font-size:13px}button,input{font:inherit}button{cursor:pointer}#viewport{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 53% 45%,transparent 20%,rgba(0,11,21,.28) 94%)}.topbar{height:75px;z-index:3;position:absolute;top:0;left:0;right:0;padding:16px 27px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid rgba(157,221,218,.12);background:linear-gradient(180deg,rgba(1,19,26,.66),rgba(2,24,33,.14));pointer-events:none}.brand{display:flex;gap:12px;align-items:center;min-width:310px}.symbol{width:37px;height:37px;filter:drop-shadow(0 0 10px rgba(113,237,213,.29))}.brandname{font-weight:780;letter-spacing:2px;font-size:16px}.brandname span{color:var(--accent);padding:0 2px}.subtitle{font-size:9px;letter-spacing:2.5px;color:var(--muted);margin-top:5px}.headmid{flex:1;max-width:425px;margin-left:-40px}.section-label,.eyebrow{font-size:9px;letter-spacing:2.2px;font-weight:750;color:#7bd8c8}.headtitle{font-size:12px;letter-spacing:1.2px;font-weight:710;margin-top:6px}.topmeta{display:flex;align-items:center;gap:20px;justify-content:end;min-width:255px}.indicator{color:#b3e9ce;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.2px}.indicator i{width:8px;height:8px;border-radius:50%;background:#79e2b1;box-shadow:0 0 13px #55d5b7}.version{font-size:10px;color:var(--muted);letter-spacing:1px}.glass{background:linear-gradient(135deg,rgba(6,30,40,.92),rgba(7,35,45,.77));backdrop-filter:blur(18px);border:1px solid var(--edge);box-shadow:0 12px 65px rgba(0,13,19,.20),inset 0 1px rgba(235,255,255,.025)}.control-panel{position:absolute;top:92px;bottom:49px;left:20px;width:337px;padding:20px 23px 16px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(170,236,220,.25) transparent;border-radius:9px;z-index:2}.panel-intro .eyebrow{display:flex;justify-content:space-between;color:#a0e1d1}.eyebrow span{color:#628e8e}.panel-intro h1{font-size:32px;line-height:1.07;letter-spacing:-1.5px;font-weight:670;margin:16px 0 10px}.panel-intro h1 em{font-style:normal;color:#9be7d8}.panel-intro p{font-size:11.5px;line-height:1.7;color:#91b4b5;max-width:280px;margin-bottom:17px}.separator{border-bottom:1px solid var(--edge);margin-bottom:15px}.section-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.7px;color:#97d1c8;font-weight:800;margin:9px 0 13px}.section-heading.extra{margin-top:18px}.section-num{color:#678d8f}.control{margin-bottom:11px}.control-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.control-head label{font-size:11px;color:#bed2d1}.control-head output{font-size:11px;color:#a7eeda;font-weight:720;font-variant-numeric:tabular-nums}.range-edge{display:flex;justify-content:space-between;color:#678d92;font-size:9px;margin-top:0}.control input[type=range]{width:100%;height:15px;cursor:pointer;margin:6px 0 0;appearance:none;background:transparent}.control input[type=range]::-webkit-slider-runnable-track,.speed-row input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:5px;background:linear-gradient(90deg,#83d5bf,#3a777e 66%,#234950)}.control input[type=range]::-webkit-slider-thumb,.speed-row input[type=range]::-webkit-slider-thumb{appearance:none;margin-top:-5px;width:13px;height:13px;border:3px solid #a8ebd7;background:#16414b;box-shadow:0 0 0 3px rgba(100,226,199,.09);border-radius:50%}.control input[type=range]::-moz-range-thumb,.speed-row input[type=range]::-moz-range-thumb{border:2px solid #b8fff0;background:#16414b;border-radius:100%;width:11px;height:11px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.preset{border:1px solid rgba(101,164,171,.22);background:rgba(13,53,63,.54);color:#93acb0;border-radius:4px;padding:9px 4px;font-weight:650;font-size:10px}.preset.selected,.preset:hover{border-color:#74d9c6;background:rgba(71,160,149,.20);color:#c5ffed}.speed-row{display:flex;justify-content:space-between;align-items:center;margin-top:17px;font-size:11px;color:#bcd4d4}.speed-row>div{display:flex;gap:8px;align-items:center}.speed-row input{width:104px;appearance:none;background:transparent}.speed-row output{color:#a5e4cf;font-variant-numeric:tabular-nums;min-width:40px}.actions{display:flex;gap:6px;margin-top:14px}.actions button{border:1px solid var(--edge);border-radius:4px;padding:11px 9px;background:#20424a;color:#d0e8e4;font-size:11px;font-weight:720;letter-spacing:.1px}.actions button.primary{flex:1;background:#a2e7cf;color:#0a3337;border-color:#a2e7cf}.actions button:hover{filter:brightness(1.1)}.panel-foot{font-size:8px;letter-spacing:1.25px;color:#557e83;margin-top:15px;text-align:center}.panel-foot span{color:#b0e5d9}.telemetry{position:absolute;right:26px;top:96px;width:270px;z-index:2;border-radius:8px;padding:19px 21px}.telemetry .eyebrow{display:flex;justify-content:space-between}.pulse{width:7px;height:7px;background:#7ce2aa;border-radius:50%;box-shadow:0 0 12px #65eea2}.meter-title{font-size:13px;font-weight:740;margin-top:20px;color:#c5eeea}.meter-reading{display:flex;align-items:baseline;gap:12px;margin-top:2px}.meter-reading strong{font-weight:530;font-variant-numeric:tabular-nums;font-size:58px;letter-spacing:-3px;line-height:1.2;color:#adf0d8}.meter-reading span{font-size:9px;letter-spacing:1px;color:#9cc7bd;max-width:65px;line-height:1.6}.micro{font-size:9px;line-height:1.7;color:#82a6a6;border-bottom:1px solid var(--edge);padding-bottom:17px}.micro span{display:block;color:#5da6a6;margin-top:3px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 8px;margin:19px 0 16px}.metric-key{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:8.5px;letter-spacing:.6px;color:#8ea9ae}.metric strong{display:block;font-size:18px;margin-top:7px;font-weight:650;font-variant-numeric:tabular-nums}.metric small{font-size:9px;font-weight:400;color:#84aaa9}.bullet{width:7px;height:7px;border-radius:50%;display:inline-block}.bullet.incoming{background:#f7b85f}.bullet.lee{background:#78dec0}.bullet.probe{background:#f77883}.simclock{border-top:1px solid var(--edge);padding-top:13px;font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:1.3px;color:#c4f1df}.running-tag{float:right;color:#719699;font-family:inherit;font-size:9px;margin-top:3px}.trace{position:absolute;z-index:2;right:26px;bottom:75px;width:420px;border-radius:8px;padding:16px 18px 12px}.trace-head{display:flex;justify-content:space-between;align-items:center}.trace-title{font-size:15px;font-weight:680;margin:5px 0 8px}.trace-title span{font-family:Georgia,serif;color:#8fe3d2;font-style:italic}.csv{font-size:8px;letter-spacing:1.1px;padding:7px 8px;border-radius:3px;background:#153b47;border:1px solid rgba(148,217,196,.25);color:#a5d5c9}.csv:hover{border-color:#abffe3}#traceCanvas{width:100%;height:106px;display:block}.trace-legend{display:flex;gap:15px;align-items:center;justify-content:flex-start;color:#95b8b8;font-size:10px;margin-top:6px}.trace-legend span{display:flex;gap:6px;align-items:center}.view-tools{position:absolute;top:93px;left:380px;z-index:2;display:flex;gap:8px}.view-tools button{border:1px solid rgba(172,229,223,.20);background:rgba(7,34,42,.72);border-radius:5px;padding:9px 12px;color:#b2d5cf;letter-spacing:1px;font-size:10px}.view-tools button:hover{background:rgba(25,73,79,.88)}.overlay-hint{position:absolute;bottom:75px;left:381px;z-index:2;font-size:9px;letter-spacing:1.3px;color:rgba(195,230,216,.82);text-shadow:0 2px 5px #00212b}.overlay-hint span{font-size:15px;color:#b1ffe3;margin-right:5px}.overlay-hint b{padding:0 10px;color:#62c8b4}.bottomline{position:fixed;bottom:0;left:0;right:0;height:36px;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:0 27px;border-top:1px solid rgba(117,206,201,.12);background:rgba(2,15,24,.73);font-size:9px;letter-spacing:1.3px;color:#718e91;pointer-events:none}.bottomline i{color:#a9d8a6;font-size:7px;margin:0 4px}#fallback:not([hidden]){position:fixed;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:min(500px,90vw);padding:26px;background:#153844;border:1px solid #b2d9d3;border-radius:10px;color:white;line-height:1.65}@media(max-height:850px){.control-panel{top:83px;bottom:42px;padding-top:15px}.panel-intro h1{font-size:25px;margin:10px 0}.panel-intro p{line-height:1.45;margin-bottom:12px}.control{margin-bottom:7px}.section-heading.extra{margin-top:13px}.telemetry{top:85px}.trace{bottom:55px}.overlay-hint{bottom:58px}}@media(max-width:1050px){.headmid{display:none}.brand{min-width:0}.control-panel{width:305px;left:11px}.view-tools{left:332px}.overlay-hint{left:336px;max-width:400px;line-height:1.8}.telemetry{right:10px;width:235px}.trace{right:10px;width:330px}}@media(max-width:730px){html,body{overflow:auto;min-height:850px}.topbar{position:relative;height:70px;padding:12px}.topmeta{min-width:0}.version{display:none}.brandname{font-size:12px}.subtitle{font-size:7px}.control-panel{top:80px;left:10px;width:min(310px,calc(100% - 20px));height:460px;bottom:auto}.telemetry{top:560px;left:10px;right:auto;width:min(310px,calc(100% - 20px))}.trace{top:930px;left:10px;bottom:auto;width:calc(100% - 20px)}.view-tools{top:83px;left:auto;right:10px;flex-direction:column}.overlay-hint{display:none}.bottomline{display:none}#viewport{height:1180px;position:absolute}}