:root{color-scheme:dark;--bg:#08131f;--panel:#0a1927;--card:#0b1d2b;--line:#294153;--line2:#1b3042;--text:#dce9ef;--muted:#7d96a8;--aqua:#48ddce;--amber:#f6ac70;--blue:#73aee1;--rounded:10px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 48% -40%,#264153 0,transparent 46%),var(--bg);min-width:320px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}.application{min-height:100vh;display:flex;flex-direction:column;max-width:2200px;margin:auto}
.masthead{height:112px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:19px 32px 19px 31px;border-bottom:1px solid #284153;background:linear-gradient(90deg,#0c1d2a 0%,#0d1c28 61%,#0a1926 100%)}
.brandlock{display:flex;align-items:center;gap:13px;min-width:225px}.brandmark{height:43px;width:43px;border:1px solid #2e6a77;background:#0b3340;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:10px 9px;gap:3px;transform:rotate(45deg);box-shadow:0 0 0 4px #102633}.brandmark i{height:13px;border-radius:2px;background:#39c5bf}.brandmark i:first-child{height:8px}.brandmark i:last-child{height:19px}.brandmark b{background:#e6ae78;height:24px;border-radius:2px}.brandtext{display:grid;gap:5px}.brandtext strong{font-weight:850;letter-spacing:1.25px;font-size:15px}.brandtext strong span{color:var(--aqua)}.brandtext small{font-size:8px;letter-spacing:1.25px;color:#8c9da9;font-weight:760}
.heading{flex:1;min-width:0;padding-left:6px}.eyebrow,.section-mini{font:800 10px/1.3 ui-monospace,Consolas,monospace;letter-spacing:1.7px;color:#6fb5c3}.slash{margin:0 7px;color:#4b7484}.main-title{font-size:30px;line-height:1.03;font-weight:860;letter-spacing:1.5px;margin:6px 0}.main-title>span:first-child{color:#73dbd4}.title-number{font-size:20px;letter-spacing:1px;color:#c3bcae;font-weight:540;margin-left:12px}.tagline{color:#a0b0bf;font-size:9px;letter-spacing:2.2px;font-weight:780}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;white-space:nowrap}.badge{padding:9px 13px;border:1px solid #2f796a;color:#75e6d6;background:#102c30;font:780 10px ui-monospace,Consolas,monospace;letter-spacing:1px}.pulse-dot{display:inline-block;background:#58e1c7;height:7px;width:7px;border-radius:100%;box-shadow:0 0 12px #59e7ca;margin-right:7px}.edition{font:700 9px ui-monospace,monospace;color:#7d92a4;letter-spacing:1px}.edition-dot{padding:0 4px;color:#43727d}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 356px;flex:1;min-height:0}.left-column{min-width:0;display:flex;flex-direction:column;gap:13px;padding:14px 15px 16px}.viewport-card{border:1px solid #2a4355;background:var(--panel);min-width:0}.view-header{height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid #233a4e}.view-header>div:first-child{display:flex;flex-direction:column;gap:4px}.view-header strong{font-size:13px;font-weight:750}.view-right{font:750 9px ui-monospace,Consolas,monospace;letter-spacing:1.25px;color:#90a8b6}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px}.dot.cyan{background:var(--aqua)}
.canvas-frame{height:clamp(325px,42.4vh,580px);position:relative;background:radial-gradient(ellipse at 52% 51%,#1b4052 0%,#102638 40%,#091523 100%);overflow:hidden}.canvas-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(49,182,198,.045),transparent 40%),repeating-linear-gradient(0deg,transparent,transparent 36px,rgba(103,167,186,.025) 37px);z-index:1;pointer-events:none}.canvas-frame canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.canvas-frame canvas:active{cursor:grabbing}.corner-top{position:absolute;left:20px;top:20px;pointer-events:none;z-index:2}.view-id{font:820 10px ui-monospace,monospace;letter-spacing:1.5px;color:#c0dde7}.view-id span{padding:0 7px;color:#518696}.view-id.minor{margin-top:8px;font-size:9px;color:#7295a8}.readout-overlay{position:absolute;right:21px;top:18px;display:grid;gap:5px;text-align:right;pointer-events:none;z-index:2}.readout-overlay .smalllabel{font:800 9px ui-monospace,Consolas,monospace;letter-spacing:1.6px;color:#83a7b7}.readout-overlay #modeLabel{font:770 12px ui-monospace,monospace;letter-spacing:.9px;color:#d1f2ed}.matrix{font:650 8px ui-monospace,monospace;letter-spacing:.75px;color:#8ba4ae}.tiny-cyan{color:#4fddcb}.vlabel{position:absolute;pointer-events:none;color:#bad9e4;font:700 10px ui-monospace,monospace;letter-spacing:1px;z-index:2;filter:drop-shadow(0 1px 4px #091521)}.vlabel strong{color:#7ae8df;margin-left:5px}.vlabel .leader{height:1px;width:33px;background:#519ca6;display:inline-block;margin:0 8px 3px 0}.vlabel-a{left:48%;top:32%}.vlabel-b{left:14%;top:66%}.vlabel-c{right:11%;top:67%}.canvas-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:47px;padding:0 18px;background:linear-gradient(transparent,#06121ce6);color:#7c9eaa;font:760 9px ui-monospace,monospace;letter-spacing:1.2px;z-index:2}.mini-sep{color:#4d7b86;margin:0 8px}.overlay-button{border:1px solid #46677a;background:#0e2b39cb;color:#d6e9ee;padding:7px 9px;font:760 9px ui-monospace,monospace;letter-spacing:1px}.overlay-button:hover{background:#214758}.fallback{position:absolute;inset:0;background:#071923eb;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:25px}.fallback span{max-width:400px;color:#a9b8c5;font-size:13px}.fallback[hidden]{display:none}
.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.metric{border:1px solid #294457;background:linear-gradient(160deg,#102638,#0c1b2b 70%);padding:15px 15px 11px;min-width:0;box-shadow:0 1px 1px #0002}.metric-head{font:800 9px ui-monospace,monospace;letter-spacing:1.1px;color:#92a7b7;display:flex;align-items:center;justify-content:space-between;gap:5px}.metric-head span{color:#50758a}.metric-value{font:700 clamp(16px,1.5vw,25px)/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;color:#e4eff3;margin:17px 0 10px;letter-spacing:-1px;white-space:nowrap}.metric-value.emph{color:#59e2d2}.metric-bottom{display:flex;align-items:center;justify-content:space-between;font:660 9px ui-monospace,monospace;color:#7d9dab;gap:7px}.metric-indicator{white-space:nowrap;color:#8ca6b3;font-size:8px;letter-spacing:.3px}.metric-indicator i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#56d2c5;margin-right:4px}.metric-indicator.alert{color:#ffb27e}.metric-indicator.alert i{background:#ffaf78}
.graph-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:238px}.graph-card{background:#0a1a29;border:1px solid #284356;min-width:0;display:flex;flex-direction:column;overflow:hidden}.graph-head{height:56px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #213b4d}.graph-head>span:first-child{font:800 10px ui-monospace,monospace;color:#5b9cac}.graph-head>div{display:grid;gap:4px;flex:1}.graph-head strong{font-size:10px;letter-spacing:1.5px}.graph-head small{font:650 9px ui-monospace,monospace;color:#829dab}.graph-legend{font:820 9px ui-monospace,monospace;letter-spacing:.5px}.graph-legend.aqua{color:#6ae5d7}.graph-legend.blue{color:#94bdf2}.graph-card>canvas{width:100%;height:142px;display:block}.graph-caption{display:flex;justify-content:space-between;gap:5px;padding:8px 14px;color:#638699;font:710 8px ui-monospace,monospace;letter-spacing:.5px}.graph-caption .key{color:#bf946b}.graph-caption .key i{display:inline-block;width:14px;border-top:1px dashed #df9e6a;vertical-align:middle;margin-right:5px}
.control-panel{background:linear-gradient(130deg,#0c2131 0%,#091927 50%);border-left:1px solid #2b4453;min-width:0;display:flex;flex-direction:column;max-height:calc(100vh - 150px);position:sticky;top:0}.panel-intro{height:74px;flex:0 0 auto;padding:14px 20px;border-bottom:1px solid #264051;display:flex;justify-content:space-between;align-items:center}.panel-intro h2{font-size:18px;font-weight:720;margin:5px 0 0}.panel-serial{font:770 10px ui-monospace,monospace;color:#547a90;padding:7px;border:1px solid #335267}.panel-inner{padding:0 19px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2d5966 transparent;flex:1}.section-block{padding:18px 0 21px;border-bottom:1px solid #274052}.section-block:last-child{border-bottom:0}.control-section-title{font:820 10px ui-monospace,monospace;letter-spacing:1.1px;color:#c4d5e0;margin:0 0 16px}.control-section-title span{color:#45cabd;margin-right:7px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{border:1px solid #355569;min-height:39px;display:flex;align-items:center;justify-content:center;gap:8px;font:820 10px ui-monospace,monospace;letter-spacing:.75px;transition:background .16s,border .16s}.btn-primary{background:#2bafa8;border-color:#53e1d3;color:#061b22}.btn-primary:hover{background:#70e0d8}.btn-plain{color:#b6d1dc;background:#1b3445}.btn-plain:hover,.btn-dark:hover{background:#294f60}.btn-amber{color:#2d1b10;background:#efab75;border-color:#fec698}.btn-amber:hover{background:#ffd0a5}.btn-dark{color:#c2deeb;background:#102c3c}.btn-dark.is-active{color:#ffd3aa;border-color:#c99b70;background:#453021}.mini-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.valve-button{height:61px;background:#0d2535;color:#d1dfe6;border:1px solid #325064;text-align:left;padding:10px;display:grid;grid-template-columns:9px 1fr;column-gap:8px;align-content:center;row-gap:6px}.status-led{width:7px;height:7px;background:#61dbb9;border-radius:100%;box-shadow:0 0 7px #61dbb94d;grid-column:1;align-self:center}.status-led.aqua{background:#e2b78b}.status-led.closed{background:#ff897c}.valve-button strong{font:760 9px ui-monospace,monospace;letter-spacing:.1px;white-space:nowrap;grid-column:2}.valve-button>span:last-child{grid-column:2;font:810 9px ui-monospace,monospace;color:#73cfbd}.speed-line{margin-top:15px;display:flex;align-items:center;justify-content:space-between;color:#879eaf;font:770 9px ui-monospace,monospace;letter-spacing:1px}.segmented{display:flex;border:1px solid #38546a;background:#0c2333;padding:3px}.segmented button{border:0;background:transparent;color:#81a0af;padding:5px 9px;font:760 10px ui-monospace,monospace}.segmented button.selected{background:#305565;color:#d8f4ef}
.presets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.presets button{padding:9px 4px;border:1px solid #365164;background:#102839;color:#8ea9b8;font:760 9px ui-monospace,monospace;letter-spacing:.2px;white-space:nowrap}.presets button.active{background:#194c50;color:#70e1d4;border-color:#53b8ae}.presets button:hover{border-color:#70c4c5}.slider-group{display:block;margin:0 0 18px}.slider-group:last-child{margin:0}.slider-header{display:flex;align-items:center;justify-content:space-between;gap:7px;font:740 10px ui-monospace,Consolas,monospace;color:#a4b8c6}.slider-header strong{color:#d5efe9;font:760 11px ui-monospace,Consolas,monospace;white-space:nowrap}.slider-group input{width:100%;display:block;accent-color:#54d8ce;margin:13px 0 7px;cursor:pointer;height:6px;appearance:none;background:linear-gradient(to right,#4fd4c9 var(--percent,50%),#234456 var(--percent,50%));border-radius:4px}.slider-group input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;border:2px solid #9af5e9;background:#116d70;box-shadow:0 0 0 4px #174956}.slider-group input::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:2px solid #9af5e9;background:#116d70}.slider-ticks{display:flex;align-items:center;justify-content:space-between;color:#5e8698;font:690 9px ui-monospace,monospace}.slider-ticks span:nth-child(2){color:#81a0ad}.export-btn{width:100%;border:1px solid #3a6976;background:#133a48;color:#bcece8;padding:13px;display:grid;grid-template-columns:26px 1fr 14px;gap:8px;align-items:center;text-align:left}.export-btn>span:first-child{font-size:24px;color:#58dfce}.export-btn strong{font:770 10px ui-monospace,monospace;letter-spacing:.7px}.export-btn small{display:block;margin-top:5px;font:650 9px ui-monospace,monospace;color:#88a8b7}.export-btn:hover{background:#1c5257}.readme{font:500 11px/1.65 ui-sans-serif,sans-serif;color:#809bad;margin:13px 0 0}.panel-footer{height:48px;flex:0 0 auto;display:flex;gap:7px;align-items:center;padding:12px 20px;border-top:1px solid #2e4657;font:700 9px ui-monospace,monospace;color:#7d9caf}.panel-footer strong{color:#b4d5d9;margin-right:auto}.tiny-square{height:7px;width:7px;background:#4fd5c2}.site-footer{min-height:37px;padding:12px 30px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#607e92;font:710 9px ui-monospace,monospace;letter-spacing:.55px;background:#07111b;border-top:1px solid #233c4d}.site-footer>span:nth-child(2){color:#81bbaa}.site-footer>span span:not(.mini-sep){color:#385a70}
@media(max-width:1250px){.metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}.vlabel{display:none}.main-title{font-size:26px}.brandlock{min-width:190px}.layout{grid-template-columns:minmax(0,1fr) 325px}.metric-value{font-size:23px}}
@media(max-width:900px){.masthead{padding:17px;height:auto;flex-wrap:wrap;gap:18px}.heading{order:3;flex-basis:100%;padding:0}.header-right{margin-left:auto}.layout{display:block}.control-panel{position:static;max-height:none;border-left:0;border-top:1px solid #274458}.panel-inner{overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.site-footer{flex-wrap:wrap}.canvas-frame{height:440px}}
@media(max-width:600px){.brandlock{min-width:0}.brandtext strong{font-size:12px}.brandtext small{font-size:7px}.header-right .edition{display:none}.left-column{padding:8px;gap:8px}.canvas-frame{height:350px}.view-right{display:none}.graph-row{grid-template-columns:1fr}.panel-inner{display:block}.metric{padding:11px}.metric-head{font-size:8px}.metric-value{font-size:18px}.metric-bottom{font-size:8px}.main-title{font-size:27px}.tagline{line-height:1.6}.site-footer{font-size:8px;padding:10px}}