: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:radial-gradient(120% 55% at 50% 100%,#47bfff59,#863bff47 42%,#0000 72%),linear-gradient(#05030d 0%,#140a30 35%,#2b1354 58%,#4a1f7a 80%,#2a1348 100%);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-silhouette{color:#0a0612;z-index:0;width:100%;height:22%;position:absolute;bottom:-1px;left:0;right: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}.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}}
