:root{--bg:#05060f;--bg-2:#0a0f26;--panel:#0d122cbd;--panel-solid:#0d122c;--line:#818cf83d;--line-strong:#a78bfa80;--text:#e9edff;--muted:#a3acd2;--cyan:#22d3ee;--violet:#a855f7;--blue:#3b82f6;--pink:#e879f9;--red:#ff4d6d;--green:#34d399;--gold:#fbbf24;--radius:16px;--font:Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.5;overflow-x:hidden}h1,h2,h3,p{margin:0}button,input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}kbd{border:1px solid var(--line-strong);text-align:center;color:#dbe2ff;background:#6366f124;border-bottom-width:2px;border-radius:6px;min-width:1.7em;padding:.05em .5em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;display:inline-block}code{color:var(--cyan);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.screen{isolation:isolate;flex-direction:column;min-height:100%;padding:clamp(1rem,3vw,2.5rem);display:flex;position:relative}.boot{justify-content:center;align-items:center;gap:1.5rem}.backdrop{z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%, #0f1745 0%, var(--bg-2) 38%, var(--bg) 78%);position:fixed;inset:0;overflow:hidden}.screen>main,.screen>.page-head,.screen>.lib,.screen>.settings-grid,.screen>.howto-grid,.screen>.calib-shell,.screen>.results-card,.screen>.panel,.screen>.banner,.screen>.logo-mark,.screen>.spinner-wrap{z-index:1;position:relative}.backdrop-rings{background:repeating-radial-gradient(circle,#0000 0 9vmax,#6366f10f 9vmax calc(9vmax + 1px));width:150vmax;height:150vmax;animation:40s linear infinite drift;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.backdrop-glow{background:radial-gradient(40% 35% at 20% 80%,#a855f729,#0000 70%),radial-gradient(35% 30% at 85% 20%,#22d3ee1f,#0000 70%);animation:9s ease-in-out infinite alternate breathe;position:absolute;inset:0}.backdrop-home .backdrop-veil{filter:blur(8px);background:radial-gradient(45% 35% at 20% 30%,#22d3ee24,#0000 70%),radial-gradient(40% 40% at 80% 25%,#a855f729,#0000 72%),radial-gradient(50% 40% at 55% 75%,#e879f91a,#0000 70%);animation:14s ease-in-out infinite alternate home-veil;position:absolute;inset:-20%}.backdrop-home .backdrop-motes{position:absolute;inset:0}.backdrop-home .backdrop-motes span{opacity:0;background:currentColor;border-radius:50%;width:5px;height:5px;animation:11s ease-in-out infinite home-mote;position:absolute;box-shadow:0 0 10px}.backdrop-home .backdrop-motes span:first-child{color:#22d3ee;animation-duration:10s;animation-delay:0s;top:78%;left:12%}.backdrop-home .backdrop-motes span:nth-child(2){color:#a855f7;width:3px;height:3px;animation-duration:13s;animation-delay:1.2s;top:88%;left:22%}.backdrop-home .backdrop-motes span:nth-child(3){color:#e879f9;animation-duration:12s;animation-delay:2.4s;top:82%;left:35%}.backdrop-home .backdrop-motes span:nth-child(4){color:#60a5fa;width:4px;height:4px;animation-duration:14s;animation-delay:.6s;top:90%;left:48%}.backdrop-home .backdrop-motes span:nth-child(5){color:#22d3ee;animation-duration:11s;animation-delay:3.1s;top:84%;left:61%}.backdrop-home .backdrop-motes span:nth-child(6){color:#a855f7;width:3px;height:3px;animation-duration:15s;animation-delay:1.8s;top:92%;left:74%}.backdrop-home .backdrop-motes span:nth-child(7){color:#e879f9;animation-duration:12.5s;animation-delay:4s;top:80%;left:86%}.backdrop-home .backdrop-motes span:nth-child(8){color:#3b82f6;width:4px;height:4px;animation-duration:16s;animation-delay:2.8s;top:70%;left:8%}.backdrop-home .backdrop-motes span:nth-child(9){color:#c084fc;animation-duration:13.5s;animation-delay:5.2s;top:95%;left:28%}.backdrop-home .backdrop-motes span:nth-child(10){color:#22d3ee;width:3px;height:3px;animation-duration:10.5s;animation-delay:3.7s;top:76%;left:55%}.backdrop-home .backdrop-motes span:nth-child(11){color:#a855f7;animation-duration:14.5s;animation-delay:.9s;top:98%;left:68%}.backdrop-home .backdrop-motes span:nth-child(12){color:#60a5fa;width:4px;height:4px;animation-duration:12s;animation-delay:4.6s;top:72%;left:92%}.results-fs,.game-fs{z-index:30;position:fixed;top:clamp(1rem,3vw,2.5rem);right:clamp(1rem,3vw,2.5rem)}.screen>.page-head.home-toolbar{z-index:30;pointer-events:none;margin-bottom:0;position:absolute;top:clamp(1rem,3vw,2.5rem);left:clamp(1rem,3vw,2.5rem);right:clamp(1rem,3vw,2.5rem)}.home-toolbar .head-actions{pointer-events:auto}.home-toolbar-spacer{visibility:hidden;pointer-events:none}@keyframes drift{to{transform:translate(-50%,-50%)scale(1.12)}}@keyframes breathe{0%{opacity:.6}to{opacity:1}}@keyframes home-veil{0%{opacity:.55;transform:translate(-3%,1%)scale(1.02)}to{opacity:.95;transform:translate(3%,-2%)scale(1.08)}}@keyframes home-mote{0%{opacity:0;transform:translate(0,0)scale(.6)}15%{opacity:.75}70%{opacity:.35}to{opacity:0;transform:translate(12px,-55vh)scale(1)}}.btn{--btn-bg:#6366f11f;border:1px solid var(--line-strong);background:var(--btn-bg);min-height:44px;color:var(--text);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.1rem;padding:.6rem 1.2rem;font-weight:600;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){background:#7c3aed47;border-color:#c4b5fd;transform:translateY(-1px);box-shadow:0 6px 24px -8px #8b5cf6b3}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn small{opacity:.8;font-size:.75rem;font-weight:500}.btn-primary{background:linear-gradient(135deg,#7c3aed 0%,#2563eb 55%,#0891b2 100%);border-color:#c4b5fdb3;box-shadow:0 0 28px -6px #7c3aedcc}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#8b5cf6 0%,#3b82f6 55%,#06b6d4 100%)}.btn-ghost{border-color:var(--line);color:var(--text);background:#080c2073}.btn-back{letter-spacing:.04em;flex-direction:row;gap:.4rem}.btn-back svg{flex:none;display:block}@media (width<=900px){.btn-back{background:#080c2099;border-radius:10px;place-items:center;gap:0;width:38px;min-width:38px;height:38px;min-height:38px;padding:0;display:inline-grid}.btn-back:hover:not(:disabled){border-color:var(--line-strong);box-shadow:none;background:#7c3aed59;transform:none}.btn-back-label{display:none}}.btn-ghost:hover:not(:disabled){border-color:var(--line-strong);color:var(--text);box-shadow:none;background:#6366f12e}.btn-danger{color:#ffb3c1;background:#ff4d6d1a;border-color:#ff4d6d99}.btn-danger:hover:not(:disabled){border-color:var(--red);background:#ff4d6d40;box-shadow:0 6px 24px -8px #ff4d6db3}.btn-lg{min-height:52px;padding:.7rem 1.6rem;font-size:1.05rem}.btn-xl{letter-spacing:.04em;min-height:64px;padding:.8rem 1.2rem;font-size:1.1rem}a.btn{text-decoration:none}.badge{border:1px solid var(--line);letter-spacing:.04em;color:#d5dcff;white-space:nowrap;background:#6366f11f;border-radius:999px;align-items:center;gap:.35rem;padding:.15rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.banner{border:1px solid var(--line);background:#6366f11a;border-radius:12px;padding:.75rem 1rem;font-size:.92rem}.banner-error{color:#ffd1da;background:#ff4d6d1f;border-color:#ff4d6d99}.banner-warn{color:#fde9a8;background:#fbbf241a;border-color:#fbbf248c}.home{text-align:center}.home-top{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:calc(100svh - 2*clamp(1rem,3vw,2.5rem));display:flex}.home-title{flex-direction:column;align-items:center;gap:.45rem;font-size:1rem;font-weight:600;display:flex}.home-hero{flex-direction:column;align-items:center;gap:.55rem;display:flex}.logo-mark{filter:drop-shadow(0 0 22px #8b5cf699)}.wordmark{text-transform:uppercase;text-align:center;letter-spacing:.18em;margin-right:-.18em;font-size:clamp(2.1rem,6.5vw,3.6rem);font-weight:900;line-height:1;display:block}.wordmark-arc{background:linear-gradient(90deg,#22d3ee,#60a5fa);color:#0000;filter:drop-shadow(0 0 18px #22d3ee8c);-webkit-background-clip:text;background-clip:text}.wordmark-light{background:linear-gradient(90deg,#c084fc,#e879f9);color:#0000;filter:drop-shadow(0 0 18px #c084fc99);-webkit-background-clip:text;background-clip:text}.tagline{color:var(--muted);letter-spacing:.08em;font-size:1rem}.home-menu{flex-direction:column;gap:.85rem;width:min(340px,100%);display:flex}.home-menu .btn-xl{letter-spacing:.14em;text-transform:uppercase;width:100%;min-height:52px;padding:.65rem 1.2rem;font-size:1.05rem}.home-menu-play{letter-spacing:.18em;min-height:68px;margin-bottom:.2rem;font-size:1.25rem}.home-menu-play small{letter-spacing:.04em;text-transform:none;font-size:.78rem}.donate-widget{border-top:1px solid var(--line);text-align:center;flex-direction:column;align-items:center;gap:.7rem;width:min(340px,100%);margin-top:.35rem;padding-top:1rem;display:flex}.donate-title{letter-spacing:.04em;color:var(--text);margin:0;font-size:.92rem;font-weight:600}.donate-hint{color:var(--muted);margin:0;font-size:.78rem;line-height:1.4}.donate-link{border:1px solid var(--line);min-height:40px;color:var(--text);letter-spacing:.06em;background:#080c2073;border-radius:12px;justify-content:center;align-items:center;gap:.45rem;padding:.45rem 1.1rem;font-size:.88rem;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.donate-link:hover{color:#f5d0fe;background:#e879f929;border-color:#e879f98c}.donate-link svg{flex:none}.page-head{grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-bottom:1.1rem;display:grid}.page-head h1{letter-spacing:.04em;text-align:center;font-size:clamp(1.3rem,3vw,1.9rem)}.page-head>:first-child{justify-self:start}.head-actions{flex-wrap:wrap;justify-self:end;gap:.6rem;display:flex}.icon-btn{border:1px solid var(--line);width:38px;height:38px;color:var(--text);cursor:pointer;pointer-events:auto;background:#080c2099;border-radius:10px;place-items:center;transition:background .15s,border-color .15s;display:inline-grid}.icon-btn:hover:not(:disabled){border-color:var(--line-strong);background:#7c3aed59}.icon-btn:disabled{opacity:.4;cursor:default}.icon-btn svg{display:block}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.25rem 1.4rem}.panel h2{letter-spacing:.06em;text-transform:uppercase;color:#c7d2fe;margin-bottom:.9rem;font-size:1.05rem}.panel-section{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem}.panel-section h3{margin-bottom:.6rem}.badge-best{border-color:var(--gold);color:#1b1303;background:linear-gradient(135deg,#fde68a,#fbbf24);font-size:.85rem}.badge-fc{border-color:var(--cyan);color:#031a20;background:linear-gradient(135deg,#a5f3fc,#22d3ee);font-size:.85rem}.banner .btn{margin-top:.5rem}.storage-banner{z-index:20;text-align:center;color:#fde9a8;background:#78350feb;border-bottom:1px solid #fbbf2480;padding:.5rem 1rem;font-size:.88rem;position:sticky;top:0}.error-list{color:#ffd1da;background:#ff4d6d1a;border:1px solid #ff4d6d99;border-radius:12px;margin:.75rem 0 0;padding:.75rem 1rem .75rem 2rem;font-size:.92rem}.ok-line{color:var(--green);margin:.4rem 0;font-size:.92rem}.spinner-wrap{color:var(--muted);align-items:center;gap:.6rem;display:inline-flex}.spinner{border:2px solid #a5b4fc40;border-top-color:var(--cyan);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.field{margin-bottom:1rem}.field-head{justify-content:space-between;gap:1rem;margin-bottom:.3rem;font-weight:600;display:flex}.field-head output{color:var(--cyan);font-variant-numeric:tabular-nums}.field-hint{color:var(--muted);margin-top:.3rem;font-size:.85rem}.field-toggle{justify-content:space-between;align-items:center;gap:1rem;display:flex}.field-toggle label{font-weight:600}.field-row{grid-template-columns:1fr 1fr;gap:1rem;display:grid}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:28px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#a855f78c,#3b82f673);border:1px solid #818cf859;border-radius:999px;height:6px}input[type=range]::-moz-range-track{background:linear-gradient(90deg,#a855f78c,#3b82f673);border:1px solid #818cf859;border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--violet);background:#e9d5ff;border-radius:50%;width:20px;height:20px;margin-top:-8px;box-shadow:0 0 12px #a855f7cc}input[type=range]::-moz-range-thumb{border:2px solid var(--violet);background:#e9d5ff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 12px #a855f7cc}input[type=range]:focus-visible{outline:2px solid var(--cyan,#22d3ee);outline-offset:2px;border-radius:8px}.switch{appearance:none;border:1px solid var(--line-strong);cursor:pointer;background:#6366f126;border-radius:999px;flex:none;width:46px;height:26px;transition:background .2s;position:relative}.switch:after{content:"";background:#cbd5ff;border-radius:50%;width:20px;height:20px;transition:transform .2s,background .2s;position:absolute;top:2px;left:2px}.switch:checked{background:linear-gradient(135deg,#7c3aed,#0891b2)}.switch:checked:after{background:#fff;transform:translate(20px)}select,.text-field input,input[type=file]{border:1px solid var(--line-strong);width:100%;color:var(--text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#080c20eb;border-radius:10px;padding:.55rem .75rem}select{appearance:none;cursor:pointer;padding-right:2.2rem}.select-wrap{width:100%;display:grid;position:relative}.select-wrap select{width:100%}.select-chevron{pointer-events:none;color:var(--muted);position:absolute;top:50%;right:.7rem;transform:translateY(-50%)}select option{color:#e9edff;background-color:#0d122c}.text-field{flex-direction:column;gap:.3rem;font-size:.9rem;font-weight:600;display:flex}.text-field input{font-weight:400}input[type=file]::file-selector-button{border:1px solid var(--line-strong);color:var(--text);cursor:pointer;background:#7c3aed40;border-radius:8px;margin-right:.8rem;padding:.35rem .8rem}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#02030cc7;place-items:center;padding:1rem;animation:.18s ease-out fade-in;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line-strong);background:linear-gradient(180deg, #121a45 0%, var(--panel-solid) 60%);border-radius:20px;width:min(520px,100%);max-height:calc(100vh - 2rem);padding:1.6rem;animation:.22s ease-out pop-in;overflow-y:auto;box-shadow:0 30px 80px -20px #000c,0 0 60px -20px #7c3aed99}.modal-wide{width:min(680px,100%)}.modal-title{letter-spacing:.02em;margin-bottom:.8rem;font-size:1.4rem}.modal>p{margin-bottom:.9rem}.modal-actions{flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;display:flex}.icon-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:1.35rem;display:grid}.icon-action{border:1px solid var(--line);color:var(--text);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:#080c208c;border-radius:14px;justify-items:center;gap:.45rem;margin:0;padding:.85rem .5rem .75rem;font-size:.82rem;font-weight:600;transition:background .15s,border-color .15s,color .15s,transform .15s;display:grid}.icon-action svg{display:block}.icon-action:hover:not(:disabled){border-color:var(--line-strong);background:#7c3aed47;transform:translateY(-1px)}.icon-action-primary{background:linear-gradient(135deg,#7c3aed73,#0891b247);border-color:#c4b5fda6;box-shadow:0 0 24px -8px #7c3aedbf}.icon-action-primary:hover:not(:disabled){background:linear-gradient(135deg,#8b5cf68c,#06b6d452)}.icon-action-exit:hover:not(:disabled){color:#ffb3c1;background:#ff4d6d2e;border-color:#ff4d6d8c}.inline-actions{flex-wrap:wrap;gap:.6rem;margin:.7rem 0;display:flex}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:translateY(10px)scale(.98)}}.welcome{text-align:left}.welcome-actions{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.4rem;display:grid}.welcome-actions .btn{text-align:center;justify-content:center;width:100%}.welcome-skip{text-align:center;color:var(--muted);margin:.9rem 0 0;font-size:.9rem}.link-btn{appearance:none;font:inherit;color:var(--cyan);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.link-btn:hover{color:#a5f3fc}.link-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}@media (width<=420px){.welcome-actions{grid-template-columns:1fr}}.lib{flex-direction:column;gap:1rem;width:min(900px,100%);margin:0 auto;display:flex}.songs{gap:.7rem;margin:0;padding:0;list-style:none;display:grid}.song{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,background .15s,box-shadow .15s}.song:hover{border-color:var(--line-strong)}.song-open{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet), 0 8px 28px -14px #a855f7bf;background:linear-gradient(135deg,#7c3aed29,#0891b214)}.song-row{align-items:center;gap:.85rem;padding:.75rem 1.05rem .75rem .8rem;display:flex}.song-main{text-align:left;cursor:pointer;min-width:0;color:inherit;font:inherit;background:0 0;border:0;flex:1;grid-template-columns:minmax(0,1fr) auto 5.5rem;align-items:center;gap:.35rem 1.1rem;padding:.15rem 0;display:grid}.song-text{min-width:0;display:grid}.song-title{text-overflow:ellipsis;white-space:nowrap;font-weight:700;line-height:1.25;overflow:hidden}.song-artist{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;line-height:1.3;overflow:hidden}.song-facts{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;grid-template-columns:2.4rem 4.2rem 3rem;align-items:center;gap:.5rem;font-size:.82rem;display:grid}.song-dur,.song-bpm{text-align:right}.song-facts .level-dots{justify-content:flex-end}.song-best{text-align:right;font-variant-numeric:tabular-nums;color:#c7d2fe;white-space:nowrap;font-size:.82rem}.song-detail{gap:.9rem;padding:.15rem 1.05rem 1.05rem calc(1.65rem + 28px);animation:.18s ease-out song-in;display:grid}@keyframes song-in{0%{opacity:0;transform:translateY(-4px)}}.song-meta{color:var(--muted);font-size:.92rem;line-height:1.45}.song-pick{gap:.7rem;display:grid}.difficulty-tabs{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.4rem;display:grid}.diff-chip{border:1px solid var(--line);min-height:48px;color:inherit;font:inherit;text-align:center;cursor:pointer;background:#080c2099;border-radius:10px;justify-items:center;gap:.12rem;padding:.45rem .35rem;line-height:1.2;transition:border-color .15s,background .15s;display:grid}.diff-chip b{font-size:.92rem;font-weight:700}.diff-lv{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:.7rem}.diff-chip:hover{border-color:var(--line-strong)}.diff-chip-active{border-color:var(--violet);background:#7c3aed40}.diff-easy b{color:var(--green)}.diff-normal b{color:var(--cyan)}.diff-hard b{color:#c084fc}.diff-expert b{color:var(--red)}.song-play{width:100%;min-height:48px;padding:.55rem 1.3rem}@media (width>=700px){.song-pick{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem}.difficulty-tabs{flex-wrap:wrap;gap:.5rem;display:flex}.diff-chip{text-align:left;justify-items:start;min-width:7rem;padding:.5rem 1.05rem}.song-play{width:auto}}.song-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1rem;display:flex}.song-record{color:#c7d2fe;font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;font-size:.82rem;display:flex}.song-record-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}.song-tools{gap:.4rem;display:flex}.btn-sm{border-radius:9px;padding:.3rem .7rem;font-size:.82rem}.preview-btn{border:1px solid var(--line-strong);color:#e0e7ff;cursor:pointer;background:#0f172ab3;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;padding:0;transition:background .15s,border-color .15s,color .15s,transform .15s;display:grid}.preview-btn svg{width:12px;height:12px;display:block}.preview-btn .spinner{width:14px;height:14px}.preview-btn:hover{background:var(--cyan);border-color:var(--cyan);color:#04121c;transform:scale(1.08)}.preview-btn:hover .spinner{border-color:#04121c #04121c40 #04121c40}.preview-btn-on{background:var(--violet);border-color:var(--violet);color:#fff}.level-dots{gap:4px;display:inline-flex}.lv{background:var(--cyan);border-radius:50%;width:8px;height:8px;box-shadow:0 0 8px}.lv-easy{background:var(--green);color:var(--green)}.lv-normal{background:var(--cyan);color:var(--cyan)}.lv-hard{background:var(--violet);color:var(--violet)}.lv-expert{background:var(--red);color:var(--red)}.empty-card{border:1px dashed var(--line-strong);border-radius:14px;justify-items:start;gap:.6rem;padding:1.2rem;display:grid}.empty-card p{color:var(--muted);font-size:.92rem}.grade{font-weight:900}.grade-SS{color:var(--gold);text-shadow:0 0 12px #fbbf24b3}.grade-S{color:var(--cyan)}.grade-A{color:var(--green)}.grade-B{color:var(--blue)}.grade-C{color:var(--violet)}.grade-D{color:#fb923c}.grade-F{color:var(--red)}.dropzone{text-align:center;border:2px dashed var(--line-strong);background:#080c2080;border-radius:16px;justify-items:center;gap:.7rem;padding:2rem 1rem;transition:border-color .15s,background .15s;display:grid}.dropzone-active{border-color:var(--cyan);background:#22d3ee14}.import-form{gap:1rem;display:grid}.file-line{border:1px solid var(--line);background:#080c2099;border-radius:10px;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:.6rem .8rem;display:flex}.chart-choice{border:1px solid var(--line);border-radius:14px;gap:.7rem;padding:.8rem 1rem 1rem;display:grid}.chart-choice legend{color:var(--muted);padding:0 .4rem;font-size:.85rem}.radio{cursor:pointer;align-items:flex-start;gap:.7rem;display:flex}.radio input{accent-color:var(--violet);margin-top:.35rem}.radio span{display:grid}.radio small{color:var(--muted)}.beatmap-pick{gap:.5rem;display:grid}.help{color:var(--muted);font-size:.88rem}.help summary{cursor:pointer;color:#c7d2fe}.help pre{border:1px solid var(--line);color:#c7d2fe;background:#020410cc;border-radius:10px;padding:.7rem;font-size:.8rem;overflow-x:auto}.game-root{cursor:default;-webkit-user-select:none;user-select:none;background:radial-gradient(90% 80%,#0d1440 0%,#070a1e 52%,#03040c 100%);position:fixed;inset:0;overflow:hidden}.game-canvas{position:absolute;inset:0}.screen.boot[aria-busy=true]{z-index:30;min-height:0;position:fixed;inset:0}.hud{pointer-events:none;justify-content:space-between;align-items:flex-start;padding:clamp(.8rem,2vw,1.6rem);display:flex;position:absolute;inset:0}.hud-score{font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 0 20px #8b5cf6b3;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;line-height:1}.hud-song{color:var(--muted);margin-top:.4rem;font-size:.9rem}.hud-song span{color:var(--cyan);margin-left:.4rem}.hud-right{align-items:center;gap:1.4rem;display:flex}.hud-stat{text-align:right;line-height:1.2;display:grid}.hud-stat span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}.hud-stat b{font-variant-numeric:tabular-nums;font-size:1.25rem}.hud-buttons{opacity:.55;gap:.4rem;transition:opacity .2s;display:flex}.hud-buttons:hover,.hud-buttons:focus-within{opacity:1}.hud-combo{text-align:center;line-height:1;position:absolute;bottom:clamp(1.4rem,6vh,3.5rem);left:50%;transform:translate(-50%)}.hud-combo b{font-variant-numeric:tabular-nums;text-shadow:0 0 24px #22d3eeb3;font-size:clamp(2.2rem,6vw,4rem);font-weight:900;animation:.14s ease-out combo-pop;display:block}.hud-combo span{color:var(--muted);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}@keyframes combo-pop{0%{transform:scale(1.25)}}.countdown{text-align:center;pointer-events:none;gap:.2rem;display:grid;position:absolute;top:16%;left:50%;transform:translate(-50%)}.countdown span{color:#fff;text-shadow:0 0 40px #22d3eee6,0 0 80px #a855f7b3;font-size:clamp(4rem,12vw,8rem);font-weight:900;line-height:1;animation:1s ease-out count-pop}.countdown small{color:var(--muted);letter-spacing:.4em;text-transform:uppercase}@keyframes count-pop{0%{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}to{opacity:.55}}.game-overlay{z-index:10;background:#03040c99;place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.overlay-panel{text-align:center;justify-items:center;gap:.8rem;max-width:480px;display:grid}.overlay-panel h2{text-transform:none;letter-spacing:0;color:var(--text);margin:0;font-size:1.5rem}.game-fail{z-index:12;text-align:center;background:radial-gradient(55% 45% at 50% 40%,#7f1d1d47,#0000 72%),radial-gradient(80% 70%,#0f17458c,#03040ceb);place-content:center;justify-items:center;gap:.55rem;padding:clamp(1.25rem,4vw,2.5rem);display:grid;position:absolute;inset:0}.game-fail-mark{filter:drop-shadow(0 0 22px #f8717147);margin-bottom:.55rem;animation:2.8s ease-in-out infinite fail-pulse}.game-fail-kicker{color:#fda4a4;letter-spacing:.22em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}.game-fail-title{letter-spacing:.02em;max-width:18ch;color:var(--text);text-wrap:balance;margin:0;font-size:clamp(1.7rem,4.5vw,2.45rem);font-weight:800;line-height:1.15}.game-fail-meta{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.92rem}.game-fail-msg{color:#c4c9e0;text-wrap:pretty;max-width:34rem;margin:.35rem 0 .55rem;line-height:1.5}.game-fail-actions{flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:.35rem;display:flex}@keyframes fail-pulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}@media (prefers-reduced-motion:reduce){.game-fail-mark{animation:none}}.game-root.touch-play{--touch-kbd-height:calc(11.5rem + env(safe-area-inset-bottom,0px))}.game-root.touch-play .game-canvas{bottom:var(--touch-kbd-height)}.game-root.touch-play .hud-combo{bottom:calc(var(--touch-kbd-height) + .6rem)}.game-root.touch-play .hud-buttons{opacity:1}.touch-kbd{z-index:6;height:var(--touch-kbd-height,11.5rem);padding:.55rem 1rem max(.65rem, env(safe-area-inset-bottom,0px));box-sizing:border-box;border-top:1px solid var(--line);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#0c1028eb,#060816fa),#060816fa;place-items:center;display:grid;position:absolute;bottom:0;left:0;right:0}.touch-kbd-cluster{grid-template-rows:repeat(2,minmax(3.4rem,4rem));grid-template-columns:repeat(3,minmax(4.4rem,5.4rem));gap:.45rem;width:max-content;max-width:100%;display:grid}.touch-kbd-key{color:#e9edff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;background:linear-gradient(#242a4ef2,#101430fa);border:1px solid #a78bfa66;border-radius:10px;place-items:center;margin:0;padding:0;transition:background .1s,border-color .1s,box-shadow .1s,transform .1s;display:grid;box-shadow:0 2px #00000059}.touch-kbd-key:disabled{opacity:.35;cursor:default}.touch-kbd-key:not(:disabled):active,.touch-kbd-key:not(:disabled):focus-visible{box-shadow:none;background:#7c3aed8c;border-color:#c4b5fd;transform:translateY(1px)}.touch-kbd-up{grid-area:1/2}.touch-kbd-left{grid-area:2/1}.touch-kbd-down{grid-area:2/2}.touch-kbd-right{grid-area:2/3}@media (orientation:landscape) and (height<=500px){.game-root.touch-play{--touch-kbd-height:calc(7.6rem + env(safe-area-inset-bottom,0px))}.touch-kbd-cluster{grid-template-rows:repeat(2,minmax(2.6rem,3.1rem));grid-template-columns:repeat(3,minmax(3.6rem,4.4rem));gap:.35rem}}.results{justify-content:center;align-items:center}.results-card{border:1px solid var(--line-strong);background:linear-gradient(#141a46d9,#0a0e24e6);border-radius:24px;gap:1.2rem;width:min(760px,100%);padding:clamp(1.4rem,4vw,2.4rem);animation:.4s ease-out pop-in;display:grid;box-shadow:0 30px 80px -30px #000000e6,0 0 80px -30px #7c3aedb3}.results-kicker{text-align:center;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}.results-top{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1rem,4vw,2.5rem);display:flex}.grade-big{text-shadow:0 0 40px;font-size:clamp(5rem,16vw,9rem);font-weight:900;line-height:1}.results-score{min-width:0}.score-big{font-variant-numeric:tabular-nums;font-size:clamp(2.2rem,7vw,4rem);font-weight:800;line-height:1.05}.results-badges{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}@media (width<=560px){.results-top{text-align:center;flex-direction:column}.results-badges{justify-content:center}}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin:0;display:grid}.stats-grid>div{border:1px solid var(--line);text-align:center;background:#080c2099;border-radius:14px;padding:.7rem .5rem}.stats-grid dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}.stats-grid dd{font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;font-size:1.5rem;font-weight:800}.stats-grid .stat-of{color:var(--muted);font-size:1rem;font-weight:700}@media (width>=640px){.stats-grid-wide-combo{grid-template-columns:1fr 1.7fr 1fr 1fr 1fr}}.stat-perfect dd{color:#fff;text-shadow:0 0 12px #ffffff80}.stat-good dd{color:#67e8f9}.stat-miss dd{color:var(--red)}.results-card .icon-actions{margin-top:.2rem}.settings-grid{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:1rem;width:min(820px,100%);margin:0 auto;display:grid}@media (width>=1000px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:min(1100px,100%)}}.settings .panel{flex-direction:column;padding:1.15rem 1.3rem 1.25rem;display:flex}.settings .panel h2{margin-bottom:.55rem;font-size:.92rem}.settings .field{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(140px,200px) 5.25rem;align-items:center;gap:.25rem 1rem;margin:0;padding:.8rem 0;display:grid}.settings .panel h2+.field{border-top:0;padding-top:.2rem}.settings .field-head{display:contents}.settings .field-head label{grid-area:1/1;font-weight:600}.settings .field-head output{text-align:right;white-space:nowrap;grid-area:1/3}.settings .field input[type=range]{grid-area:1/2;height:28px}.settings .field .select-wrap{grid-area:1/2/auto/4}.settings .field .select-wrap select{min-height:40px;padding:.5rem 2.2rem .5rem .7rem;font-size:.92rem}.settings .field .field-hint{grid-area:2/1/auto/-1;margin:0;font-size:.82rem;line-height:1.4}.settings .field:has(.select-wrap){grid-template-columns:minmax(0,1fr);align-items:stretch;row-gap:.4rem}.settings .field:has(.select-wrap) .field-head label{grid-area:1/1}.settings .field:has(.select-wrap) .select-wrap{grid-area:2/1;width:100%}.settings .field:has(.select-wrap) .field-hint{grid-row:3}.settings .field-toggle{align-items:center;gap:1rem;display:flex}.settings .panel>.field-hint{margin:.45rem 0 0}.settings .inline-actions{gap:.55rem;margin:.7rem 0 .15rem}.settings .panel .muted,.settings .panel .ok-line{margin:.45rem 0;font-size:.9rem}@media (width<=560px){.settings .field{grid-template-columns:minmax(0,1fr) auto}.settings .field-head output{grid-column:2}.settings .field input[type=range]{grid-area:2/1/auto/-1}.settings .field .field-hint{grid-row:3}.settings .field:has(.select-wrap) .select-wrap{grid-row:2}.settings .field:has(.select-wrap) .field-hint{grid-row:3}}.panel-wide{grid-column:1/-1}.controls-panel{text-align:center;align-items:center}.control-pad-wrap{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;width:100%;display:flex}.control-pad-wrap>.field-hint{text-align:center;max-width:24rem;margin:0;font-size:.82rem}.control-pad{--pad:min(280px, 78vw);--orbit-y:35%;--orbit-x:36.5%;width:var(--pad);aspect-ratio:1;height:auto;margin:.35rem auto .15rem;position:relative}.settings .control-pad{--pad:min(320px, 100%);--orbit-y:35%;--orbit-x:36.5%}.settings .key-btn{min-width:3.2rem;min-height:44px;padding:.3rem .8rem;font-size:1.05rem}.settings .controls-panel .btn{margin-top:.35rem}.control-pad-ring{border:2px solid #818cf88c;border-radius:50%;place-items:center;display:grid;position:absolute;inset:26%;box-shadow:0 0 28px #8b5cf647,inset 0 0 22px #22d3ee1a}.control-pad-core{background:radial-gradient(circle at 40% 35%,#e9edff 0%,#94a3b8 45%,#334155 100%);border-radius:50%;width:30%;height:30%;box-shadow:0 0 16px #e9edff59}.control-pad-slot{justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.control-pad-up{left:50%;top:calc(50% - var(--orbit-y))}.control-pad-down{left:50%;top:calc(50% + var(--orbit-y))}.control-pad-left{left:calc(50% - var(--orbit-x));top:50%}.control-pad-right{left:calc(50% + var(--orbit-x));top:50%}.control-pad-left{--lane:#22d3ee}.control-pad-up{--lane:#a855f7}.control-pad-down{--lane:#3b82f6}.control-pad-right{--lane:#e879f9}.key-btn{border:1px solid color-mix(in srgb, var(--lane,var(--line-strong)) 70%, white 10%);background:color-mix(in srgb, var(--lane,#6366f1) 22%, transparent);min-width:3.2rem;min-height:40px;color:var(--text);cursor:pointer;box-shadow:0 0 14px color-mix(in srgb, var(--lane,#6366f1) 35%, transparent);border-bottom-width:3px;border-radius:10px;padding:.25rem .75rem;font-family:inherit;font-size:.95rem;font-weight:700}button.key-btn:hover{border-color:color-mix(in srgb, var(--lane,#c4b5fd) 85%, white);filter:brightness(1.08)}.key-btn-static{cursor:default;justify-content:center;align-items:center;display:inline-flex}.key-btn-active{border-color:var(--cyan);background:#22d3ee38;animation:1s ease-in-out infinite blink}@keyframes blink{50%{box-shadow:0 0 18px #22d3ee99}}.howto-grid{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:1rem;width:min(960px,100%);margin:0 auto;display:grid}@media (width>=900px){.howto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.howto-grid .panel{flex-direction:column;height:100%;padding:1.15rem 1.3rem 1.25rem;display:flex}.howto-pad-panel{text-align:center}.howto-pad-panel .muted{margin-bottom:.5rem}.howto .control-pad{--pad:min(300px, 100%);--orbit-y:35%;--orbit-x:36.5%}.howto-steps{color:#cfd6f5;flex:1;align-content:start;gap:.85rem;margin:0;padding-left:1.25rem;line-height:1.5;display:grid}.howto-steps kbd{margin:0 .15rem}.legal .legal-doc{color:#cfd6f5;gap:.85rem;width:min(760px,100%);margin:0 auto;line-height:1.55;display:grid}.legal .legal-doc h2{letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:.55rem 0 0;font-size:1rem}.legal .legal-doc p,.legal .legal-doc ul{margin:0}.legal .legal-doc ul{gap:.35rem;padding-left:1.2rem;display:grid}.legal .legal-doc a{color:var(--cyan)}.legal .legal-updated{margin-bottom:.25rem}.calibration .page-head{width:100%}.calib-shell{width:min(760px,100%);margin:0 auto}.calib-intro{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:1.5rem 2rem;padding:1.4rem 1.5rem 1.5rem;display:grid}.calib-visual{aspect-ratio:1;width:min(240px,100%);margin:0 auto;position:relative}.calib-orbit{border:1px solid #818cf847;border-radius:50%;position:absolute;inset:8%}.calib-orbit span{background:#a855f7;border-radius:50%;width:10px;height:10px;position:absolute;box-shadow:0 0 12px #a855f7b3}.calib-orbit span:first-child{background:#a855f7;top:0;left:50%;transform:translate(-50%,-40%)}.calib-orbit span:nth-child(2){background:#22d3ee;top:50%;left:0;transform:translate(-40%,-50%)}.calib-orbit span:nth-child(3){background:#e879f9;top:50%;right:0;transform:translate(40%,-50%)}.calib-orbit span:nth-child(4){background:#3b82f6;bottom:0;left:50%;transform:translate(-50%,40%)}.calib-target{border:2px solid #818cf88c;border-radius:50%;place-items:center;display:grid;position:absolute;inset:28%;box-shadow:0 0 28px #8b5cf659}.calib-target-core{background:radial-gradient(circle at 40% 35%,#fff 0%,#c4b5fd 55%,#7c3aed 100%);border-radius:50%;width:34%;height:34%;box-shadow:0 0 18px #e9edff73}.calib-intro-copy{justify-items:start;gap:.9rem;display:grid}.calib-lead{letter-spacing:.01em;font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:700;line-height:1.3}.calib-points{color:#cfd6f5;gap:.4rem;margin:0;padding-left:1.15rem;display:grid}.calib-offset{color:var(--muted);margin:0;font-size:.95rem}.calib-offset strong{color:var(--cyan);font-variant-numeric:tabular-nums;font-weight:700}.calib-stage{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);justify-items:center;gap:1.25rem;padding:1.6rem 1rem 1.4rem;display:grid}.calib-pad{aspect-ratio:1;cursor:pointer;touch-action:manipulation;width:min(280px,72vw);color:inherit;background:0 0;border:0;border-radius:50%;place-items:center;display:grid;position:relative}.calib-pad-ring{border:2px solid #818cf88c;border-radius:50%;position:absolute;inset:18%;box-shadow:0 0 30px #8b5cf659}.calib-pulse{will-change:transform, opacity;background:radial-gradient(circle,#22d3eef2,#a855f773 65%,#0000);border-radius:50%;position:absolute;inset:28%;box-shadow:0 0 50px #22d3ee8c}.calib-pad-label{z-index:1;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 10px #000;font-variant-numeric:tabular-nums;font-weight:800;position:relative}.calib-pad-lead .calib-pad-label{letter-spacing:0;font-size:2.4rem}.calib-beats{flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:22rem;margin:0;padding:0;list-style:none;display:flex}.calib-beat{background:#080c20b3;border:1px solid #a78bfa73;border-radius:50%;width:12px;height:12px;transition:background .15s,border-color .15s,transform .15s}.calib-beat-warm{opacity:.55}.calib-beat-now{border-color:var(--cyan);transform:scale(1.15);box-shadow:0 0 10px #22d3ee8c}.calib-beat-hit{background:linear-gradient(135deg,#8b5cf6,#22d3ee);border-color:#0000}.calib-status{color:var(--muted);font-variant-numeric:tabular-nums}.calib-status strong{color:var(--text);font-size:1.15rem}.calib-done{text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);justify-items:center;gap:.85rem;padding:1.6rem 1.4rem 1.4rem;display:grid}.calib-result-label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}.calib-result{color:var(--cyan);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:0;font-size:clamp(2rem,5vw,2.8rem);font-weight:800}.calib-meter{width:min(100%,28rem);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;grid-template-columns:auto minmax(0,18rem) auto;align-items:center;gap:.65rem;margin:.3rem 0 .2rem;font-size:.78rem;display:grid}.calib-meter-track{border:1px solid var(--line);background:linear-gradient(90deg,#22d3ee59,#6366f133,#e879f966);border-radius:999px;height:10px;position:relative}.calib-meter-needle{background:#fff;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #ffffffb3}.calib-done-note{max-width:34rem;line-height:1.45}.calib-actions{flex-wrap:wrap;justify-content:center;gap:.65rem;margin-top:.4rem;display:flex}@media (width<=760px){.calib-intro{text-align:center;grid-template-columns:1fr;justify-items:center}.calib-intro-copy{justify-items:center}.calib-points{text-align:left}}@media (width<=600px){.song-main{grid-template-columns:minmax(0,1fr) auto}.song-facts{grid-area:2/1/auto/-1;grid-template-columns:auto auto auto;justify-content:start;gap:.8rem}.song-dur,.song-bpm{text-align:left}.song-best{grid-area:1/2}.song-detail{padding-left:.9rem}.page-head{gap:.55rem}.page-head h1{min-width:0;font-size:clamp(1.05rem,4.6vw,1.35rem)}.field-row{grid-template-columns:1fr}.hud-stat:nth-of-type(2){display:none}.hud-right{gap:.7rem}}[data-reduced-motion=true] *,[data-reduced-motion=true] :before,[data-reduced-motion=true] :after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}[data-reduced-motion=true] .btn:hover:not(:disabled),[data-reduced-motion=true] .preview-btn:hover{transform:none}