:root{--bg:#000;--panel:#0e1013;--line:#232830;--text:#dde1e6;--muted:#7a838e;--yellow:#ffd400;--z1:#7c8a96;--z2:#4f9bd9;--z3:#58b368;--z4:#e4b63c;--z5:#ef7f3a;--z6:#e14b4b;--ok:#58b368;--warn:#ffd400;--bad:#e5322d;--info:#4f9bd9}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Barlow,system-ui,sans-serif}#app{height:100%}.num{font-variant-numeric:tabular-nums;font-family:Barlow Condensed,Barlow,sans-serif;font-weight:600}button{border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:0 0;border-radius:6px;padding:7px 14px;font-weight:500}button:hover{border-color:var(--muted)}button:focus-visible{outline:2px solid var(--z2);outline-offset:2px}button.primary{background:var(--z2);border-color:var(--z2);color:#06121c;font-weight:600}input,select{border:1px solid var(--line);color:var(--text);font:inherit;background:#05070a;border-radius:6px;padding:8px 10px}label{color:var(--muted);flex-direction:column;gap:4px;font-size:14px;display:flex}a{color:var(--z2);text-decoration:none}.screen{max-width:960px;height:100%;margin:0 auto;padding:24px 32px;overflow-y:auto}.screen h1{margin-bottom:4px;font-size:28px;font-weight:600}.screen h2{color:var(--text);margin:28px 0 12px;font-size:17px;font-weight:600}.screen p.hint{color:var(--muted);margin-bottom:20px;font-size:14px}.nav{align-items:center;gap:16px;margin-bottom:24px;font-size:14px;display:flex}.nav a.active{color:var(--text);font-weight:600}.nav-icon{border:1px solid var(--line);width:30px;height:30px;color:var(--muted);border-radius:999px;justify-content:center;align-items:center;margin-left:auto;text-decoration:none;display:inline-flex}.nav-icon:hover,.nav-icon.active{color:var(--text);border-color:var(--muted)}.hero{background-image:linear-gradient(#05030d8c 0%,#05030d14 30%,#0000 55%),url(/hero-login.jpg);background-position:50%;background-size:cover;position:relative;overflow:hidden}.hero:before{content:"";opacity:.05;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.hero-content{z-index:1;position:relative}.glass-card{-webkit-backdrop-filter:blur(18px);background:#0e0c188c;border:1px solid #ffffff14;border-radius:20px;box-shadow:0 20px 60px #00000080}.entry-pill{text-align:center;text-shadow:0 2px 14px #000000a6;z-index:2;background:0 0;border:1px solid #0000;border-radius:22px;flex-direction:column;align-items:center;min-width:220px;max-width:320px;padding:16px 26px;transition:background .3s,border-color .3s,box-shadow .3s;display:flex;position:absolute;top:7%;left:50%;transform:translate(-50%)}.entry-pill.active{-webkit-backdrop-filter:blur(14px);text-shadow:none;background:#0a081466;border-color:#ffffff1a;box-shadow:0 12px 40px #00000059}.entry-pill .brand{letter-spacing:.5px;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.entry-pill .tag{opacity:.55;margin-top:2px;font-size:11.5px}.entry-pill label{text-align:left;opacity:.7;margin-top:10px;font-size:12px;display:block}.entry-pill input{box-sizing:border-box;color:#eee;background:#00000047;border:1px solid #ffffff24;border-radius:10px;width:100%;margin-top:4px;padding:9px 12px;font-size:13px}.entry-pill input::placeholder{color:#fff6}.ghost-btn{color:#fff;text-underline-offset:4px;cursor:pointer;background:0 0;border:none;margin-top:14px;padding:4px 0;font-size:13px;font-weight:600;-webkit-text-decoration:underline #ffffff80;text-decoration:underline #ffffff80}.ghost-btn:hover{text-decoration-color:#fff}.entry-fields{opacity:0;width:100%;max-height:0;transition:max-height .35s,opacity .3s,margin-top .35s;overflow:hidden}.entry-fields.open{opacity:1;max-height:320px;margin-top:4px}.entry-fields button.primary{width:100%;margin-top:14px}.music-toggle{-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;z-index:2;background:#0a081459;border:1px solid #ffffff40;border-radius:999px;width:34px;height:34px;font-size:14px;position:absolute;top:7%;right:5%}.track-credit{opacity:.4;color:#fff;text-shadow:0 1px 6px #0009;white-space:nowrap;z-index:2;font-size:11px;position:absolute;bottom:3%;left:50%;transform:translate(-50%)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 20px}.grid-form{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;display:grid}.row-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.list{flex-direction:column;gap:8px;display:flex}.list-item{background:var(--panel);border:1px solid var(--line);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.list-item .meta{color:var(--muted);font-size:13px}.toggle-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.toggle-row:last-child{border-bottom:none}.status-dot{background:var(--muted);border-radius:50%;width:9px;height:9px;margin-right:7px;display:inline-block}.status-dot.connected{background:var(--ok)}.status-dot.error{background:var(--bad)}.status-dot.connecting,.status-dot.reconnecting{background:var(--warn)}.error-box{border:1px solid var(--bad);color:#ffb4b0;background:#2a1414;border-radius:8px;margin-top:12px;padding:10px 14px;font-size:14px}.callout{border:1px dashed var(--line);color:var(--muted);background:#0e1013;border-radius:8px;margin-top:12px;padding:10px 14px;font-size:13px}.app{grid-template-rows:auto 1fr 26vh auto;gap:10px;height:100vh;padding:12px 18px 14px;display:grid}.top{color:var(--muted);align-items:center;gap:20px;font-size:15px;display:flex}.top .title{color:var(--text);font-size:17px;font-weight:600}.sensor{align-items:center;gap:7px;display:flex}.top .clock{color:var(--text);margin-left:auto;font-size:22px}.top .clock span{color:var(--muted);font-size:15px}.bias{gap:4px}.bias b{color:var(--text);text-align:center;min-width:52px;font-size:20px}.bias button{padding:3px 10px;font-size:18px;line-height:1}.bias b.down{color:var(--warn)}.stage{background:var(--panel);text-align:center;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:20px 40px;transition:background .3s;display:flex;position:relative}.stage .headline{letter-spacing:-.01em;font-size:clamp(48px,8vw,120px);font-weight:600;line-height:1}.stage .detail{color:var(--muted);margin-top:16px;font-size:clamp(20px,2.6vw,34px);font-weight:500}.stage .why{color:var(--muted);opacity:.8;font-size:13px;position:absolute;bottom:14px;right:20px}.stage.idle .headline{color:var(--muted)}.stage.idle .detail{color:#4e565f}.stage.info{background:#000}.stage.info .headline{color:var(--info)}.stage.info .detail{color:var(--text)}.stage.warn{background:#000}.stage.warn .headline{color:var(--yellow);font-size:clamp(64px,10vw,150px)}.stage.warn .detail{color:var(--text)}.stage.go{background:var(--yellow)}.stage.go .headline,.stage.go .detail,.stage.go .why{color:#000}.stage.bad{background:var(--bad)}.stage.bad .headline,.stage.bad .detail,.stage.bad .why{color:#fff}.stage.warn,.stage.bad,.stage.go{animation:.5s shake}.stage.pause{outline:2px dashed var(--line);outline-offset:-8px;background:#000}.stage.pause .headline{color:var(--text)}.stage.pause .detail{color:var(--muted)}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.graph{background:var(--panel);border-radius:10px;position:relative}.graph canvas{width:100%;height:100%;display:block}.graph .legend{color:var(--muted);gap:16px;font-size:13px;display:flex;position:absolute;top:8px;left:14px}.legend i{vertical-align:middle;width:18px;height:3px;margin-right:6px;display:inline-block}.nums{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:10px;display:grid}.card{background:var(--panel);border-radius:10px;flex-direction:column;justify-content:center;padding:12px 20px 10px;display:flex}.card .label{color:var(--muted);font-size:15px}.card .row{align-items:baseline;gap:14px;display:flex}.card .v{font-size:clamp(64px,7.5vw,108px);line-height:.95;transition:color .3s}.card .sub{color:var(--muted);font-size:18px}.card .sub b{color:var(--text);font-weight:600}.zone{color:#10181f;border-radius:4px;align-self:center;padding:2px 9px;font-size:15px;font-weight:600}.erg{color:var(--muted);background:#1b2027;border-radius:4px;align-self:center;padding:2px 7px;font-size:12px}.card.iv .v{font-size:clamp(44px,5vw,72px)}.card.iv .next{color:var(--muted);margin-top:4px;font-size:15px}.card.iv .next b{color:var(--text);font-weight:500}.count{background:#000;justify-content:center;align-items:center;display:none;position:fixed;inset:0;overflow:hidden}.count.on{display:flex}.count .ring{border:8px solid var(--yellow);opacity:0;border-radius:50%;width:min(70vh,70vw);height:min(70vh,70vw);position:absolute}.count .ring.go{animation:1s ease-out ring}@keyframes ring{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.15)}}.count .n{color:var(--yellow);font-size:min(62vh,52vw);line-height:1}.count .n.go{animation:1s cubic-bezier(.2,.8,.2,1) pop}@keyframes pop{0%{opacity:.3;transform:scale(1.35)}30%{opacity:1;transform:scale(1)}to{opacity:.9;transform:scale(.92)}}.count .what{color:var(--muted);text-align:center;font-size:clamp(24px,3.5vw,44px);position:absolute;bottom:12vh}.count .what b{color:var(--yellow);margin-top:6px;font-size:1.3em;display:block}.rules{border:1px solid var(--line);width:300px;color:var(--muted);z-index:5;background:#0e1013;border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.5;display:none;position:fixed;top:60px;right:18px}.rules.on{display:block}.rules h4{color:var(--text);margin-bottom:4px;font-size:14px;font-weight:600}#limits.rules{width:360px;right:330px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
