:root{--bg-0: #04080F;--bg-1: #080E1A;--bg-2: #0D1625;--panel-bg: rgba(8, 14, 26, .85);--border: rgba(0, 229, 255, .12);--border-hi: rgba(0, 229, 255, .35);--accent: #00E5FF;--accent-dim:rgba(0, 229, 255, .2);--good: #39FF14;--good-dim: rgba(57, 255, 20, .15);--warning: #FFB300;--warn-dim: rgba(255, 179, 0, .15);--danger: #FF3131;--danger-dim:rgba(255, 49, 49, .15);--high: #00E5FF;--text-1: #E8F4F8;--text-2: rgba(232, 244, 248, .55);--text-3: rgba(232, 244, 248, .3);--font-hud: "Orbitron", monospace;--font-mono: "Share Tech Mono", monospace;--rad: 6px;--rad-lg: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg-0);color:var(--text-1);font-family:var(--font-mono);overflow:hidden}.grid-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);pointer-events:none}#app{position:relative;z-index:2;display:flex;flex-direction:column;height:100vh;padding:.75rem 1rem;gap:.75rem}.topbar{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.2rem;background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--rad);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-shrink:0}.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--font-hud);font-weight:700;font-size:1.1rem;letter-spacing:.1em;white-space:nowrap}.logo-icon{color:var(--accent);font-size:1.3rem;animation:spin-slow 8s linear infinite;display:inline-block}.logo-eye{color:var(--accent)}.level-block{display:flex;align-items:center;gap:.8rem;flex:1}.level-label{font-family:var(--font-hud);font-size:.55rem;color:var(--text-2);letter-spacing:.15em}.level-num{font-family:var(--font-hud);font-size:1.6rem;font-weight:900;color:var(--accent);line-height:1;min-width:2ch;text-shadow:0 0 20px var(--accent)}.xp-bar-wrap{flex:1}.xp-bar-track{height:6px;background:#00e5ff1a;border-radius:3px;overflow:hidden;border:1px solid var(--border)}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#00FFD1);border-radius:3px;transition:width .5s ease;box-shadow:0 0 8px var(--accent)}.xp-text{font-size:.65rem;color:var(--text-2);margin-top:.2rem}.streak-block{text-align:right;flex-shrink:0}.streak-val{font-family:var(--font-hud);font-size:1.6rem;font-weight:700;color:var(--warning);text-shadow:0 0 15px var(--warning);line-height:1}.streak-label{font-size:.55rem;color:var(--text-2);letter-spacing:.12em;margin-top:.15rem}.main-grid{display:grid;grid-template-columns:220px 1fr 220px;gap:.75rem;flex:1;min-height:0}.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--rad-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1rem;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.panel-label{font-family:var(--font-hud);font-size:.55rem;letter-spacing:.2em;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:.25rem}.stat-block{text-align:center}.stat-val{font-family:var(--font-hud);font-size:3rem;font-weight:900;line-height:1;color:var(--accent);text-shadow:0 0 30px var(--accent);transition:color .4s ease,text-shadow .4s ease}.stat-unit{font-size:.75rem;color:var(--text-2);margin-top:.1rem}.stat-desc{font-size:.6rem;letter-spacing:.15em;color:var(--text-3);margin-top:.3rem}.rate-bar-wrap{padding:0 .25rem}.rate-zones{display:flex;justify-content:space-between;font-size:.55rem;color:var(--text-3);margin-bottom:.2rem}.rate-track{position:relative;height:8px;border-radius:4px;display:flex;overflow:visible;border:1px solid var(--border)}.rate-zone-critical{background:#ff313180;flex:5;border-radius:4px 0 0 4px}.rate-zone-low{background:#ffb30066;flex:5}.rate-zone-optimal{background:#39ff1473;flex:5}.rate-zone-high{background:#00e5ff59;flex:5;border-radius:0 4px 4px 0}.rate-needle{position:absolute;top:-4px;width:3px;height:16px;background:#fff;border-radius:1.5px;box-shadow:0 0 8px #fff;left:0%;transition:left .4s ease}.rate-label-row{display:flex;justify-content:space-between;font-size:.5rem;margin-top:.3rem;letter-spacing:.08em}.divider{border:none;border-top:1px solid var(--border);margin:.25rem 0}.stat-row{display:flex;gap:.5rem}.stat-inline{flex:1;text-align:center}.stat-num{font-family:var(--font-hud);font-size:1.1rem;font-weight:600;color:var(--text-1)}.stat-caption{font-size:.5rem;letter-spacing:.12em;color:var(--text-3);margin-top:.15rem}.center-panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--rad-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;position:relative;padding:1.5rem 1rem 1rem}.start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;width:100%;height:100%}.start-eye-icon{font-size:3rem;color:var(--accent);animation:pulse-glow 2s ease-in-out infinite}.start-title{font-family:var(--font-hud);font-size:2.2rem;font-weight:900;letter-spacing:.15em}.start-title span{color:var(--accent)}.start-sub{font-size:.85rem;color:var(--text-2);line-height:1.6}.start-facts{display:flex;gap:1.5rem;padding:.75rem 1.5rem;background:#00e5ff0d;border:1px solid var(--border);border-radius:var(--rad)}.fact-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}.fact-num{font-family:var(--font-hud);font-size:1.1rem;font-weight:700;color:var(--accent)}.fact-txt{font-size:.6rem;color:var(--text-2);text-align:center;max-width:80px}.btn-start{display:flex;align-items:center;gap:.75rem;padding:.9rem 2rem;font-family:var(--font-hud);font-size:.85rem;font-weight:600;letter-spacing:.15em;color:var(--bg-0);background:var(--accent);border:none;border-radius:var(--rad);cursor:pointer;box-shadow:0 0 30px #00e5ff66,inset 0 1px #fff3;transition:all .2s}.btn-start:hover{background:#3ef;box-shadow:0 0 50px #00e5ff99,inset 0 1px #ffffff4d;transform:translateY(-1px)}.btn-start:active{transform:translateY(0)}.btn-icon{font-size:1.1rem}.privacy-note{font-size:.6rem;color:var(--text-3)}.tracking-screen{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;position:relative}.eye-container{position:relative;width:320px;height:200px}#eyeCanvas{position:relative;z-index:2;border-radius:50%}.eye-ring{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;border-radius:50%;border:1px solid var(--accent-dim);animation:rotate-ring 6s linear infinite;pointer-events:none}.eye-ring:before{content:"";position:absolute;top:-2px;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}.eye-ring-2{top:-22px;right:-22px;bottom:-22px;left:-22px;border:1px solid rgba(0,229,255,.06);animation-direction:reverse;animation-duration:10s}.status-msg{font-family:var(--font-hud);font-size:.75rem;letter-spacing:.12em;color:var(--text-2);text-align:center;padding:.3rem 1rem;border:1px solid var(--border);border-radius:var(--rad);background:#00e5ff08;transition:color .4s ease,border-color .4s ease;max-width:400px}.blink-flash{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:var(--rad-lg);opacity:0;background:#00e5ff14;border:1px solid rgba(0,229,255,.3)}.blink-flash.flash{animation:flash-anim .15s ease-out forwards}.cam-wrap{position:absolute;bottom:0;right:0;width:100px;height:72px;border-radius:var(--rad);overflow:hidden;border:1px solid var(--border)}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.cam-label{position:absolute;top:4px;left:6px;font-size:.45rem;letter-spacing:.15em;color:var(--good);background:#0009;padding:1px 4px;border-radius:2px}.blink-reminder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s}.blink-reminder.visible{opacity:1}.reminder-text{font-family:var(--font-hud);font-size:3rem;font-weight:900;color:var(--danger);text-shadow:0 0 40px var(--danger);animation:pulse-reminder 1s ease-in-out infinite}.chart-wrap{width:100%;padding:.5rem .75rem;background:#00e5ff05;border:1px solid var(--border);border-radius:var(--rad);margin-top:auto}.chart-label{font-size:.5rem;letter-spacing:.15em;color:var(--text-3);margin-bottom:.3rem}#rateChart{width:100%;display:block}.achievements-list{display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;flex:1}.achievements-list::-webkit-scrollbar{width:3px}.achievements-list::-webkit-scrollbar-track{background:transparent}.achievements-list::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}.ach-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem;border-radius:var(--rad);border:1px solid transparent;transition:all .3s}.ach-item.unlocked{background:#00e5ff0a;border-color:var(--border)}.ach-item.locked{opacity:.3;filter:grayscale(1)}.ach-item.newly-unlocked{border-color:var(--accent);background:var(--accent-dim);animation:ach-glow .8s ease-out}.ach-icon{font-size:1.2rem;flex-shrink:0;margin-top:.1rem}.ach-info{flex:1;min-width:0}.ach-name{font-family:var(--font-hud);font-size:.6rem;font-weight:600;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ach-desc{font-size:.55rem;color:var(--text-2);margin-top:.15rem;line-height:1.3}.ach-xp{font-family:var(--font-hud);font-size:.5rem;color:var(--accent);margin-top:.2rem}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:100}.toast{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;background:var(--bg-2);border:1px solid var(--accent);border-radius:var(--rad);box-shadow:0 0 20px #00e5ff33;font-size:.75rem;animation:toast-in .3s ease-out;max-width:280px}.toast.level-up{border-color:var(--good);box-shadow:0 0 20px #39ff144d}.toast-icon{font-size:1.2rem;flex-shrink:0}.toast-body{display:flex;flex-direction:column}.toast-title{font-family:var(--font-hud);font-size:.65rem;font-weight:600;letter-spacing:.08em}.toast-desc{font-size:.6rem;color:var(--text-2);margin-top:.1rem}.xp-popup{position:fixed;z-index:200;font-family:var(--font-hud);font-size:1rem;font-weight:700;color:var(--good);text-shadow:0 0 15px var(--good);pointer-events:none;animation:xp-float 1.2s ease-out forwards}.hidden{display:none!important}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-glow{0%,to{text-shadow:0 0 10px var(--accent);opacity:1}50%{text-shadow:0 0 30px var(--accent),0 0 60px var(--accent);opacity:.85}}@keyframes rotate-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flash-anim{0%{opacity:1}to{opacity:0}}@keyframes pulse-reminder{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.85}}@keyframes toast-in{0%{transform:translate(30px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes xp-float{0%{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}@keyframes ach-glow{0%{box-shadow:0 0 #00e5ff00}50%{box-shadow:0 0 20px #00e5ff66}to{box-shadow:0 0 #00e5ff00}}.rate-critical .rate-display,.rate-critical .status-msg{color:var(--danger);text-shadow:0 0 20px var(--danger)}.rate-low .rate-display,.rate-low .status-msg{color:var(--warning);text-shadow:0 0 20px var(--warning)}.rate-below .rate-display,.rate-below .status-msg{color:var(--warning);text-shadow:0 0 15px var(--warning)}.rate-optimal .rate-display,.rate-optimal .status-msg{color:var(--good);text-shadow:0 0 20px var(--good)}.rate-high .rate-display,.rate-high .status-msg{color:var(--high);text-shadow:0 0 20px var(--high)}.alert-section{border-top:1px solid var(--border);padding-top:.75rem;flex-shrink:0;display:flex;flex-direction:column;gap:.45rem}.alert-header{display:flex;align-items:center;justify-content:space-between}.alert-title{font-family:var(--font-hud);font-size:.55rem;letter-spacing:.2em;color:var(--accent)}.alert-badge{font-family:var(--font-hud);font-size:.5rem;letter-spacing:.1em;padding:2px 6px;border-radius:3px;border:1px solid var(--border);color:var(--text-3);transition:all .3s}.alert-badge.active{border-color:var(--danger);color:var(--danger);box-shadow:0 0 8px #ff313140}.alert-badge.warmup{border-color:var(--warning);color:var(--warning)}.alert-desc{font-size:.55rem;color:var(--text-3)}.interval-group{display:flex;gap:.3rem}.interval-btn{flex:1;padding:.3rem .1rem;font-family:var(--font-hud);font-size:.55rem;letter-spacing:.05em;background:transparent;border:1px solid var(--border);border-radius:var(--rad);color:var(--text-2);cursor:pointer;transition:all .15s;white-space:nowrap}.interval-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.interval-btn.active{background:#ff31311f;border-color:var(--danger);color:var(--danger);box-shadow:0 0 8px #ff313126}.interval-btn[data-ms=""].active{background:#00e5ff0f;border-color:var(--border-hi);color:var(--text-2);box-shadow:none}.alert-status{font-size:.55rem;color:var(--text-3);line-height:1.4;min-height:1.2em}.alert-status.firing{color:var(--danger);animation:pulse-glow-danger .6s ease-out}@keyframes pulse-glow-danger{0%{text-shadow:0 0 8px var(--danger)}to{text-shadow:none}}@media (max-width: 900px){.main-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.achievements-panel{max-height:200px}body{overflow:auto}}