:root{color-scheme:dark;--bg:#06141d;--surface:#081c29eb;--line:#244653;--muted:#7f9baa;--water:#66eddf;--amber:#f8bc68;--fg:#e8f5f5;--thin:1px solid #24434fb0}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--water);outline-offset:3px}canvas#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:linear-gradient(#123b52,#0e2631)}#lens{pointer-events:none;position:fixed;inset:0;background:linear-gradient(90deg,#02111bcc,transparent 35%,transparent 63%,#02111bba),linear-gradient(0deg,#04141ca8,transparent 23%,transparent 70%,#071e29a6)}.topbar{position:absolute;z-index:3;top:0;left:0;right:0;height:72px;border-bottom:var(--thin);background:#071822f2;display:flex;align-items:center;gap:12px;padding:0 25px;backdrop-filter:blur(18px)}.brand-mark{color:var(--water);border:1px solid #247f85;padding:5px;display:flex}.brand{min-width:275px;display:flex;flex-direction:column;gap:5px}.brand strong{font-size:13px;letter-spacing:.16em}.slash{color:var(--water)}.brand small{color:#8ba6b2;font-size:9px;letter-spacing:.18em}.tag{color:#58e5d6;border:1px solid #2b6471;padding:2px 5px;margin-left:8px}.top-middle{margin:auto;display:flex;align-items:center;gap:12px;letter-spacing:.11em;font-size:10px;color:#b4c8ce}.top-middle i{height:12px;border-left:1px solid #42606c}.status-dot,.dotlive{color:#77e6be}.status-dot{width:7px;height:7px;background:#60e8a5;border-radius:50%;box-shadow:0 0 12px #60e8a5}.top-right{display:flex;gap:7px}.ghost,.secondary{background:transparent;color:#cce5e9;border:1px solid #365663;padding:9px 12px;font-size:11px;letter-spacing:.08em}.secondary{color:var(--water);border-color:#387982}.panel{position:absolute;z-index:2;top:88px;bottom:100px;overflow:auto;scrollbar-width:thin;scrollbar-color:#31515b transparent;background:var(--surface);border:var(--thin);box-shadow:0 14px 50px #0004;backdrop-filter:blur(24px)}.leftpanel{left:17px;width:310px;padding:19px 19px 16px}.rightpanel{right:17px;width:304px;padding:19px 18px}.panel-caption,.panel-subheader{font-size:10px;letter-spacing:.18em;font-weight:700;color:#c4d8e0;display:flex;align-items:center;justify-content:space-between}.panel-caption span,.panel-subheader span{font-size:9px;letter-spacing:.09em;color:#6d9ca8}.dotlive{font-size:8px!important;color:#50dba0!important}.leftpanel h1{font-size:25px;line-height:1.14;letter-spacing:-.035em;font-weight:700;margin:23px 0 10px}.leftpanel h1 em{font-style:normal;color:var(--water)}.intro{color:#8ba9b4;font-size:11.5px;line-height:1.75;margin:0 0 17px}.stats2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric{border:1px solid #284955;background:#0a2632a8;min-height:90px;padding:11px;display:flex;flex-direction:column}.metric.hero{grid-column:span 2;height:114px;position:relative;background:linear-gradient(110deg,#0d3441,#0b2834)}.metric small{font-size:8px;letter-spacing:.14em;color:#85b0bb}.metric strong{margin:8px 0 1px;color:#e7ffff;font-size:22px;font-weight:680;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.metric.hero strong{font-size:32px;color:var(--water)}.metric span{font-size:10px;color:#90b4be}.panel-subheader{padding:20px 0 11px;border-bottom:1px solid #294854;margin-bottom:11px}.panel-subheader.tight{padding-top:23px}.stage{display:grid;grid-template-columns:21px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #213c49;font-size:10px}.stage .number{color:var(--water);font-family:monospace;font-size:10px}.stage .meter{grid-column:2 / 4;height:3px;background:#183a45}.stage .meter>div{height:100%;background:linear-gradient(90deg,#257d87,#6fe8d8);transition:width .7s}.stage .name{color:#c9d9df}.stage .read{font-family:monospace;font-size:9px;color:#76dcce}.graph-key{display:flex;gap:16px;margin-bottom:8px;color:#8daab2;font-size:9px}.key{display:inline-block;width:13px;height:3px;vertical-align:middle;margin-right:5px}.key.water{background:var(--water)}.key.amber{background:var(--amber)}#history{width:100%;height:113px;display:block}.left-footer{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:12px;border-top:var(--thin);font-size:9px;color:#8dabb3;letter-spacing:.07em}.left-footer span:first-child{font-size:17px;color:#5eeee0;font-variant-numeric:tabular-nums}.preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset-buttons button{font-size:9px;letter-spacing:.07em;padding:10px 3px;color:#8fb3bd;background:#102d3b;border:1px solid #28505c}.preset-buttons button.chosen{border-color:#42bcba;color:#82eee4;background:#12414a}.control-row{display:flex;flex-direction:column;gap:5px;margin:13px 0 14px}.control-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#b6cbd0}.control-top strong{color:var(--water);font-family:monospace;font-size:11px}.control-note{display:flex;justify-content:space-between;font-size:9px;color:#6c8c9a}.control-row input,.speedrow input{width:100%;accent-color:var(--water);height:5px;cursor:pointer}.divider{border-top:1px solid #31515a;margin:14px 0 4px}.switchrow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #24414c;padding:12px 0}.switchrow div{display:flex;flex-direction:column;gap:3px}.switchrow strong{font-size:10px;letter-spacing:.08em;font-weight:600}.switchrow small{font-size:9px;color:#7f9fad}.toggle{position:relative;width:36px;height:20px;display:inline-flex}.toggle input{opacity:0;width:0;height:0}.toggle span{background:#3c5862;width:36px;height:20px;border-radius:20px;transition:.15s}.toggle span:before{content:"";position:absolute;width:14px;height:14px;top:3px;left:3px;background:#e0eaf0;border-radius:50%;transition:.15s}.toggle input:checked+span{background:#198f96}.toggle input:checked+span:before{transform:translateX(16px);background:#e8ffff}.statusbox{padding:13px 10px;background:#0b2d34;color:#aadad3;border-left:2px solid #42daba;font-size:10px;line-height:1.6}.statusbox.warning{background:#30271a;border-color:#efb269;color:#f4d1aa}.speedrow{margin:13px 0;display:flex;align-items:center;gap:12px}.speedrow>div{width:95px;display:flex;flex-direction:column}.speedrow small{font-size:9px;color:#7c9ba5}.speedrow strong{font-size:14px;color:#69dfd2}.fullbtn{width:100%;background:#1b5a62;color:#d2ffff;border:1px solid #2a9090;padding:11px 6px;letter-spacing:.12em;font-size:9px;font-weight:650}.fullbtn:hover,.ghost:hover,.secondary:hover{background:#256d71}.bottomnav{position:absolute;z-index:2;bottom:15px;left:345px;right:339px;background:#061922ed;border:1px solid #294953;padding:12px 15px 10px;backdrop-filter:blur(24px)}.nav-heading{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.15em;color:#d6e7e7}.nav-heading span{color:#538a93;font-size:9px}.nav-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:9px 0}.nav-buttons button{background:#102c38;border:1px solid #2b5360;color:#9dbbc1;padding:7px 0;font-size:9px;white-space:nowrap}.nav-buttons button.active{background:#174d55;border-color:#6fe2db;color:#e0ffff}.nav-note{text-align:center;font-size:8px;letter-spacing:.12em;color:#72929d}.nav-note span{color:#50ccca}.overlay-top{position:absolute;z-index:1;top:93px;left:350px;right:344px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;color:#cce9ec;text-shadow:0 1px 10px #001}.orientation span{color:#73a8b5;margin-left:10px}.clock span{color:var(--water);margin-left:8px}.selection{position:absolute;z-index:4;left:350px;bottom:145px;max-width:330px;border:1px solid #397883;background:#071c27e9;padding:18px;box-shadow:0 10px 35px #0007}.selection.hidden{display:none}.selection>button{position:absolute;right:12px;top:8px;background:none;color:white;border:0;font-size:21px}.selection small{font-size:9px;letter-spacing:.14em;color:#72dece}.selection h2{font-size:20px;line-height:1.2;margin:11px 0}.selection p{font-size:12px;line-height:1.6;color:#afc7ce}.selection #sel-stats{font-family:monospace;font-size:10px;color:#56dccd}#toast{position:absolute;z-index:10;left:50%;top:90px;transform:translateX(-50%);background:#124653;border:1px solid #63cacb;box-shadow:0 7px 40px #0007;color:white;padding:10px 16px;font-size:12px;display:none}dialog{width:min(560px,90vw);background:#091f2c;border:1px solid #3a8e96;color:#dbe8ec;line-height:1.8;padding:30px}dialog::backdrop{background:#00131dd9;backdrop-filter:blur(5px)}dialog h2{color:#72e9de}dialog p{font-size:13px}.closehelp{float:right;color:white;background:none;border:0;font-size:26px}@media(max-width:1150px){.top-middle{display:none}.leftpanel{width:270px}.rightpanel{width:275px}.bottomnav{left:296px;right:292px}.overlay-top{left:299px;right:294px}}@media(max-width:850px){.leftpanel{width:240px;left:8px;padding:11px;bottom:116px}.rightpanel{width:235px;right:8px;padding:11px;bottom:116px}.brand{min-width:205px}.brand strong{font-size:10px}.topbar{padding:0 9px}.top-right .ghost span{display:none}.bottomnav{left:256px;right:252px}.nav-buttons{grid-template-columns:1fr 1fr}.nav-note{display:none}.overlay-top{display:none}.selection{left:256px;bottom:177px}}@media(max-width:680px){.topbar{height:55px}.brand{min-width:0}.brand small{display:none}.brand-mark{padding:1px}.top-right{margin-left:auto}.top-right .ghost{display:none}.panel{top:auto;bottom:0;height:38%;width:48%;left:1%;right:auto;padding:10px;opacity:.96}.rightpanel{left:auto;right:1%}.leftpanel h1,.intro,.stats2 .metric:not(.hero),.stage-list,.graph-key,#history,.panel-subheader,.switchrow,.statusbox{display:none}.leftpanel h1{display:block;font-size:18px;margin:12px 0}.leftpanel .metric.hero{height:85px}.leftpanel .metric.hero strong{font-size:24px}.rightpanel .preset-buttons{grid-template-columns:1fr 1fr}.rightpanel .control-row{margin:5px 0}.bottomnav{left:1%;right:1%;bottom:39%;padding:5px}.nav-heading,.nav-note{display:none}.nav-buttons{display:flex;overflow-x:auto}.nav-buttons button{padding:7px;min-width:90px}.selection{left:2%;bottom:48%;max-width:90%}}