*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#cfeaff;-webkit-font-smoothing:antialiased}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block;width:100%;height:100%}#hud{position:fixed;left:28px;bottom:24px;pointer-events:none;-webkit-user-select:none;user-select:none;mix-blend-mode:screen}#hud .title{font-size:13px;letter-spacing:.5em;font-weight:600;opacity:.85;text-shadow:0 0 12px rgba(80,200,255,.55)}#hud .hint{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.45;margin-top:8px}#splash{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#143c5a59,#000000d9 70%),#0004088c;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:10;cursor:pointer;transition:opacity .6s ease,visibility 0s linear 0s;-webkit-user-select:none;user-select:none}#splash.hidden{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s;pointer-events:none}.splash-card{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}.splash-title{font-size:18px;letter-spacing:.7em;font-weight:600;color:#d8f1ff;text-shadow:0 0 16px rgba(100,220,255,.7)}.splash-play{width:96px;height:96px;border-radius:50%;border:1.5px solid rgba(140,230,255,.6);background:radial-gradient(circle at center,#50b4f02e,#0000 70%),#00000040;color:#d8f1ff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:0 0 24px #50c8ff59,inset 0 0 16px #50c8ff2e}.splash-play:hover{transform:scale(1.05);border-color:#b4f0fff2;box-shadow:0 0 36px #78dcff8c,inset 0 0 22px #78dcff47}.splash-play svg{filter:drop-shadow(0 0 6px rgba(140,230,255,.8));margin-left:4px}.splash-hint{font-size:10.5px;letter-spacing:.32em;opacity:.55;text-align:center;max-width:420px}.splash-hint.error{color:#ff8a9a;opacity:.95;text-shadow:0 0 8px rgba(255,90,110,.6)}#fullscreen-btn{position:fixed;top:22px;right:70px;z-index:11;width:38px;height:38px;border-radius:50%;border:1px solid rgba(140,230,255,.35);background:#00000059;color:#cfeaff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#fullscreen-btn:hover{border-color:#b4f0ffd9;box-shadow:0 0 14px #78dcff73;transform:scale(1.06)}#settings{position:fixed;top:22px;right:22px;z-index:11;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#cfeaff;pointer-events:none}.settings-toggle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(140,230,255,.35);background:#00000059;color:#cfeaff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto}.settings-toggle:hover{border-color:#b4f0ffd9;box-shadow:0 0 14px #78dcff73;transform:scale(1.06)}.settings-panel{width:240px;padding:14px 16px 16px;border-radius:10px;border:1px solid rgba(140,230,255,.28);background:#020c14b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 24px #2864a040;transform-origin:top right;transition:opacity .2s ease,transform .2s ease;pointer-events:auto}#settings.collapsed .settings-panel{opacity:0;transform:scale(.92) translateY(-6px);pointer-events:none}.settings-title{font-size:10px;letter-spacing:.4em;font-weight:600;opacity:.7;margin-bottom:12px;color:#d8f1ff;text-shadow:0 0 8px rgba(100,220,255,.45)}.settings-row{margin-bottom:10px}.settings-row:last-child{margin-bottom:0}.settings-label{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.18em;margin-bottom:4px;opacity:.85}.settings-val{font-variant-numeric:tabular-nums;font-size:10.5px;color:#9bdcff;opacity:.95}.settings-row input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:#8ce6ff2e;border-radius:2px;outline:none;cursor:pointer}.settings-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#cfeaff;border:1px solid rgba(120,220,255,.9);box-shadow:0 0 8px #78dcffb3;cursor:pointer;transition:transform .1s ease}.settings-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.settings-row input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#cfeaff;border:1px solid rgba(120,220,255,.9);box-shadow:0 0 8px #78dcffb3;cursor:pointer}#debug-hud{position:fixed;top:22px;left:22px;z-index:5;width:220px;padding:12px 14px 8px;border-radius:8px;border:1px solid rgba(140,230,255,.25);background:#020c14a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:Segoe UI,system-ui,monospace;color:#cfeaff;font-size:10.5px;letter-spacing:.12em;-webkit-user-select:none;user-select:none;pointer-events:none;transition:opacity .2s ease}#debug-hud.hidden{opacity:0;pointer-events:none}#debug-hud .dh-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}#debug-hud .dh-label{width:44px;opacity:.75;font-weight:600}#debug-hud .dh-bar{position:relative;flex:1;height:7px;background:#8ce6ff1f;border-radius:2px;overflow:hidden}#debug-hud .dh-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#4ec3ff,#cfefff);box-shadow:0 0 6px #8ce6ffb3;transition:width 60ms linear}#debug-hud .dh-dot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,#fff,#80e8ff 60%,#50c8ff00);box-shadow:0 0 12px #8ce6fff2;opacity:.15;transition:opacity 80ms linear,transform 80ms linear}#debug-hud .dh-dot.huge-dot{background:radial-gradient(circle,#fff,#ffd17e,#ffa05000);box-shadow:0 0 16px #ffc878f2}#debug-hud .dh-time{font-variant-numeric:tabular-nums;font-size:10.5px;opacity:.85;margin-right:auto;margin-left:4px}#debug-hud .dh-bpm{margin-left:auto;font-variant-numeric:tabular-nums;font-size:9.5px;opacity:.7}#debug-hud .dh-header{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(140,230,255,.18)}#debug-hud .dh-section-row{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(140,230,255,.12)}#debug-hud .dh-section{font-variant-numeric:tabular-nums;font-size:10.5px;margin-right:auto;margin-left:4px;opacity:.85}#debug-hud .dh-mood{font-size:9.5px;letter-spacing:.22em;font-weight:600;padding:2px 7px;border-radius:3px;border:1px solid rgba(140,230,255,.35);background:#50c8ff1a}#debug-hud .dh-mood.mood-calm{color:#aae3ff;border-color:#aae3ff73}#debug-hud .dh-mood.mood-build{color:#d8f1ff;border-color:#d8f1ff8c;background:#78dcff2e}#debug-hud .dh-mood.mood-drop{color:#ffd17e;border-color:#ffd17e8c;background:#ffb4502e}#debug-hud .dh-mood.mood-breakdown{color:#c9a4ff;border-color:#c9a4ff8c;background:#a078f02e}#debug-hud .dh-mood.mood-outro{color:#8aa6c4;border-color:#8aa6c473;background:#506e9629}#credits{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:transparent;z-index:12;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.8s ease-out,visibility 0s linear 1.8s;-webkit-user-select:none;user-select:none}#credits.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 1.8s ease-out,visibility 0s linear 0s}.credits-stack{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.credits-title{font-size:22px;letter-spacing:.55em;font-weight:600;color:#d8f1ff;text-shadow:0 0 20px rgba(120,220,255,.75);margin-bottom:14px}.credits-line{display:flex;align-items:baseline;gap:18px;font-size:11.5px;letter-spacing:.18em;font-weight:400}.credits-label{color:#6da9c8;width:92px;text-align:right;opacity:.82;font-weight:600}.credits-value{color:#d8f1ff;font-weight:500;letter-spacing:.1em}a.credits-link{color:#9ce0ff;text-decoration:none;border-bottom:1px solid rgba(156,224,255,.45);padding-bottom:1px;transition:color .15s ease,border-color .15s ease}a.credits-link:hover{color:#fff;border-bottom-color:#fff}.credits-replay{margin-top:26px;font-size:10.5px;letter-spacing:.32em;font-weight:600;color:#9ce0ff;background:transparent;border:0;padding:4px 0;cursor:pointer;opacity:.72;transition:color .15s ease,opacity .15s ease,text-shadow .15s ease}.credits-replay:hover{color:#fff;opacity:1;text-shadow:0 0 12px rgba(180,240,255,.7)}#debug-hud .dh-hint{margin-top:4px;font-size:8.5px;letter-spacing:.25em;opacity:.45;text-align:right}