:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}canvas{display:block;width:100%;height:100%}#ui-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding-top:2rem;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.4) 100%)}h1{position:absolute;top:1.5rem;left:1.5rem;font-size:3rem;margin:0;text-transform:uppercase;letter-spacing:.2em;text-shadow:0 0 10px rgba(0,255,255,.5)}#mode-select{position:absolute;top:1.5rem;left:50%;transform:translate(-50%);display:flex;gap:.6rem;pointer-events:auto}#mode-select button{padding:.55rem 1rem;font-size:.95rem;background:transparent;border:2px solid #00ffcc;color:#0fc;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;transition:all .25s ease;border-radius:4px}#mode-select button.active,#mode-select button:hover{background:#0fc;color:#000;box-shadow:0 0 16px #0fc}#music-toggle{position:absolute;top:1.5rem;right:1.5rem;padding:.55rem 1rem;font-size:.9rem;background:#0006;border:1px solid rgba(0,255,204,.7);color:#0fc;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;pointer-events:auto;transition:all .25s ease}#music-toggle.active,#music-toggle:hover{background:#0fc;color:#000;box-shadow:0 0 16px #0fc}#mode-tracker{border-color:#ffb347;color:#ffb347}#mode-tracker.active,#mode-tracker:hover{background:#ffb347;color:#000;box-shadow:0 0 16px #ffb347}#tracker-controls{position:absolute;top:5.25rem;left:50%;transform:translate(-50%);display:none;gap:.5rem;flex-direction:column;align-items:center;padding:.65rem .85rem;background:#0000008c;border:1px solid rgba(255,179,71,.45);box-shadow:0 0 18px #ffb34733;border-radius:8px;pointer-events:auto}.control-row{display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:#e8e8e8}.pill-group{display:flex;align-items:center;gap:.35rem}.pill{padding:.35rem .7rem;background:transparent;border:1px solid rgba(255,179,71,.6);color:#ffb347;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border-radius:999px;transition:all .15s ease;font-size:.75rem}.pill.active,.pill:hover{background:#ffb347;color:#000;box-shadow:0 0 12px #ffb34766}.tracker-size{border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#000}.tracker-size[data-size=small]{width:60px;height:60px;font-size:.8rem}.tracker-size[data-size=medium]{width:80px;height:80px;font-size:.9rem}.tracker-size[data-size=large]{width:110px;height:110px;font-size:1rem}#start-btn{position:absolute;left:50%;bottom:16rem;transform:translate(-50%);padding:1rem 3rem;font-size:1.5rem;background:transparent;border:2px solid #00ffcc;color:#0fc;cursor:pointer;pointer-events:auto;text-transform:uppercase;transition:all .3s ease;border-radius:4px}#start-btn:hover{background:#0fc;color:#000;box-shadow:0 0 20px #0fc}#start-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;color:#0fc;background:transparent}#instructions{position:absolute;left:50%;bottom:13rem;transform:translate(-50%);font-size:1rem;opacity:.7;text-align:center;width:min(80vw,480px)}#countdown{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(0,0,0,.6);display:none;pointer-events:none}#tracker-summary{background:#000c;border:1px solid rgba(0,255,204,.4);box-shadow:0 0 26px #00ffcc40;border-radius:10px;padding:1.2rem 1.4rem;width:280px;display:none;pointer-events:auto;text-align:center;color:#e8f8f5}#tracker-summary h3{margin:0 0 .6rem;letter-spacing:.06em;text-transform:uppercase;font-size:1rem;color:#0fc}#summary-values{display:flex;justify-content:space-between;margin-bottom:.8rem}.summary-row{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.9rem}.summary-row strong{font-size:1.1rem;color:#fff}#summary-chart{position:relative;width:160px;height:160px;margin:0 auto}#summary-chart-fill{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#0fc 0deg 0deg,#ffffff1a 0deg);filter:drop-shadow(0 0 16px rgba(0,255,204,.35))}#summary-chart-center{position:absolute;inset:18px;border-radius:50%;background:#000000e6;display:flex;align-items:center;justify-content:center;color:#0fc;font-size:1.4rem;font-weight:700}#summary-percent{margin:0}#tracker-results{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;gap:1rem;align-items:flex-start;pointer-events:none}#start-btn.tracker-summary-visible{bottom:8rem}#tracker-results>div{pointer-events:auto}#distance-panel{background:#000c;border:1px solid rgba(0,255,204,.4);box-shadow:0 0 26px #00ffcc40;border-radius:10px;padding:1rem 1.2rem .8rem;width:320px;color:#e8f8f5;display:none}#distance-panel h3{margin:0 0 .5rem;letter-spacing:.06em;text-transform:uppercase;font-size:1rem;color:#0fc;text-align:center}#distance-meta{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;margin-bottom:.2rem}#distance-chart{width:100%;height:180px;overflow:visible}#distance-chart-line{fill:none;stroke:#0fc;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;opacity:.9}#distance-axis-x,#distance-axis-y{stroke:#ffffff4d;stroke-width:1}#distance-label-x,#distance-label-y{fill:#ffffffb3;font-size:.75rem}.distance-tick{stroke:#fff3;stroke-width:1}.distance-tick-label{fill:#ffffff80;font-size:.65rem}#stats-box{position:absolute;top:2rem;right:2rem;width:240px;padding:1rem 1.25rem;background:#0000008c;border:1px solid rgba(0,255,204,.4);box-shadow:0 0 18px #0fc3;border-radius:8px;pointer-events:auto}#stats-box h2{margin:0 0 .5rem;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#0fc}#stats-box p{margin:.2rem 0;font-size:.95rem;display:flex;justify-content:space-between;color:#e0e0e0}#stats-box.finished{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:280px;padding:1.5rem 1.75rem;background:#000000bf;box-shadow:0 0 28px #00ffcc40}#reset-btn{margin-top:.75rem;width:100%;padding:.75rem 1rem;font-size:.95rem;background:transparent;border:1px solid rgba(0,255,204,.6);color:#0fc;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:all .2s ease;border-radius:6px;pointer-events:auto}#reset-btn:hover{background:#0fc;color:#000;box-shadow:0 0 16px #00ffcc59}#tracker-target{position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff4d,#0009);border:2px solid rgba(255,179,71,.9);box-shadow:0 0 20px #ffb34799;display:none;pointer-events:auto}#tracker-target.hovering{border-color:#00ff8c;box-shadow:0 0 24px #00ff8ccc}#tracker-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}#tracker-path-line{fill:none;stroke:#ffb347e6;stroke-width:2;filter:drop-shadow(0 0 12px rgba(255,179,71,.6))}#intro-overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:auto}#intro-card{width:min(700px,90vw);max-height:80vh;overflow-y:auto;background:#050a0ce6;border:1px solid rgba(0,255,204,.4);box-shadow:0 0 28px #00ffcc40;border-radius:10px;padding:1.5rem;color:#e8f4f6;pointer-events:auto}#intro-card h2{margin:0 0 .75rem;letter-spacing:.08em;color:#0fc}#intro-card h3{margin:1rem 0 .35rem;letter-spacing:.05em;color:#7cf7ff}#intro-card ul{margin:0 0 .5rem 1rem;padding:0;list-style:disc;color:#cfe6e9}.intro-section{margin-top:.5rem}#intro-close{margin-top:1rem;padding:.8rem 1.5rem;font-size:1rem;background:#0fc;color:#000;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;border-radius:6px;transition:transform .2s ease,box-shadow .2s ease}#intro-close:hover{transform:translateY(-1px);box-shadow:0 0 18px #00ffcc59}#leaderboard-toggle{position:absolute;bottom:1.5rem;left:1.5rem;padding:.55rem 1rem;font-size:.9rem;background:#0006;border:1px solid rgba(0,255,204,.7);color:#0fc;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;pointer-events:auto;transition:all .25s ease;z-index:4}#leaderboard-toggle:hover{background:#0fc;color:#000;box-shadow:0 0 16px #0fc}#leaderboard-overlay{position:absolute;inset:0;background:#0009;display:none;z-index:4}#leaderboard-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;border:1px solid rgba(0,255,204,.4);box-shadow:0 0 26px #00ffcc40;border-radius:10px;padding:1.2rem 1.4rem;width:320px;display:none;pointer-events:auto;text-align:left;color:#e8f8f5;z-index:5}#leaderboard-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}#leaderboard-header h3{margin:0;letter-spacing:.08em;text-transform:uppercase;font-size:1rem;color:#0fc}#leaderboard-header p{margin:.1rem 0 0;font-size:.85rem;color:#bdeee4}#leaderboard-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem;margin:.65rem 0 .5rem}#leaderboard-close{position:absolute;top:.5rem;right:.5rem;background:transparent;border:1px solid rgba(0,255,204,.4);color:#0fc;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:.9rem;line-height:1}.lb-tab{padding:.4rem .5rem;border-radius:6px;border:1px solid rgba(0,255,204,.4);background:#0006;color:#bdeee4;cursor:pointer;text-align:center;font-size:.8rem;letter-spacing:.03em;transition:all .2s ease}.lb-tab.active,.lb-tab:hover{background:#0fc;color:#000;box-shadow:0 0 12px #0fc6}#leaderboard-list{margin:.2rem 0 0 1rem;padding:0;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}#leaderboard-list li{display:flex;justify-content:space-between;gap:.5rem;font-size:.9rem;color:#e8f8f5}#leaderboard-list .lb-name{flex:1 1 auto}#leaderboard-list .lb-time{color:#0fc;font-weight:700}#leaderboard-status{margin-top:.35rem;font-size:.8rem;color:#9fdcd1}