:root{--bg:#07070f;--panel:#ffffff0d;--line:#ffffff1f;--text:#f2f2f7;--dim:#f2f2f78c;--neon:#ff4d8d;--neon2:#3fe0c8;--gold:#ffd84d}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;margin:0;padding:0;font-family:Noto Sans Thai,system-ui,-apple-system,Segoe UI,sans-serif}body{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font-family:inherit}.shell{background:radial-gradient(1200px 600px at 50% -10%,#ff4d8d2e,#0000 60%),radial-gradient(900px 500px at 90% 20%,#3fe0c81f,#0000 60%);flex-direction:column;align-items:center;gap:20px;min-height:100dvh;padding:24px 16px 40px;display:flex}.logo{text-align:center;margin-top:12px}.logo h1{letter-spacing:4px;background:linear-gradient(92deg, var(--neon), var(--gold) 55%, var(--neon2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(34px,9vw,62px);font-weight:900}.logo p{color:var(--dim);margin:6px 0 0;font-size:13px}.card{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:18px;width:min(560px,100%);padding:18px}.drop{border:2px dashed var(--line);text-align:center;background:#ffffff05;border-radius:20px;width:min(560px,100%);padding:34px 18px;transition:border-color .15s,background .15s}.drop.over{border-color:var(--neon);background:#ff4d8d14}.drop h2{margin:0 0 6px;font-size:18px}.drop p{color:var(--dim);margin:0;font-size:13px;line-height:1.7}.btn{color:#10101a;background:linear-gradient(92deg, var(--gold), #ffb03a);border:0;border-radius:999px;padding:12px 26px;font-size:15px;font-weight:700;transition:transform .12s}.btn:active{transform:scale(.97)}.btn.ghost{color:var(--text);border:1px solid var(--line);background:0 0}.btn.big{width:100%;padding:16px;font-size:17px}.btn:disabled{opacity:.45;cursor:default}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.spread{justify-content:space-between}.diffGrid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.diffGrid.two{grid-template-columns:repeat(2,1fr)}.diffGrid.two .diffBtn{letter-spacing:1px;padding:16px 10px;font-size:16px}.diffGrid.two .diffBtn small{margin-top:5px;font-size:11px;line-height:1.5}.diffBtn{border:1px solid var(--line);color:var(--text);background:#ffffff08;border-radius:12px;padding:12px 6px;font-size:14px;font-weight:700;transition:transform .12s,border-color .12s}.diffBtn:active{transform:scale(.96)}.diffBtn[data-on="1"]{border-color:currentColor}.diffBtn small{opacity:.6;color:var(--text);margin-top:3px;font-size:10px;font-weight:500;display:block}.songList{gap:8px;max-height:46vh;display:grid;overflow-y:auto}.songRow{border:1px solid var(--line);cursor:pointer;background:#ffffff08;border-radius:12px;align-items:center;gap:12px;padding:10px 12px;transition:border-color .12s,background .12s,transform .12s;display:flex}.songRow:hover{border-color:var(--neon);background:#ff4d8d12}.songRow:active{transform:scale(.99)}.songPlay{background:linear-gradient(135deg, var(--neon), var(--gold));color:#10101a;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:13px;display:grid}.songInfo{flex:1;min-width:0}.songInfo b{white-space:nowrap;text-overflow:ellipsis;font-size:14px;display:block;overflow:hidden}.songInfo span{color:var(--dim);margin-top:2px;font-size:11px;display:block}.songDel{border:1px solid var(--line);width:30px;height:30px;color:var(--dim);background:0 0;border-radius:8px;flex:none;font-size:13px}.songDel:hover{color:#ff8a9c;border-color:#ff8a9c}.pinInput{border:1px solid var(--line);width:100%;color:var(--text);letter-spacing:6px;text-align:center;background:#ffffff0a;border-radius:12px;padding:14px 16px;font-family:inherit;font-size:22px}.pinInput:focus{border-color:var(--neon);outline:none}.linkBtn{color:var(--dim);background:0 0;border:0;padding:4px 2px;font-size:12.5px;text-decoration:underline}.linkBtn:hover{color:var(--text)}.dotOk{color:var(--neon2);font-style:normal}.dotCloud{color:var(--dim);font-style:normal}.drop.small{padding:18px 16px}.drop.small h2{font-size:15px}.drop.small p{font-size:11.5px}.field{margin:14px 0}.field label{color:var(--dim);justify-content:space-between;margin-bottom:6px;font-size:13px;display:flex}.field input[type=range]{width:100%;accent-color:var(--neon)}.meta{color:var(--dim);font-size:13px;line-height:1.9}.meta b{color:var(--text);font-weight:700}.bar{background:#ffffff1a;border-radius:999px;height:8px;overflow:hidden}.bar>i{background:linear-gradient(90deg, var(--neon), var(--gold));height:100%;transition:width .15s linear;display:block}.err{color:#ff8a9c;margin-top:10px;font-size:13px}.playWrap{touch-action:none;-webkit-user-select:none;user-select:none;background:#07070f;position:fixed;inset:0}.playCanvas{width:100%;height:100%;display:block}.quitBtn{border:1px solid var(--line);color:var(--text);background:#0006;border-radius:999px;padding:8px 16px;font-size:13px;position:absolute;bottom:14px;left:12px}.keyHint{pointer-events:none;gap:6px;display:flex;position:absolute;bottom:14px;right:12px}.keyHint span{border:1px solid var(--line);width:26px;height:26px;color:var(--dim);border-radius:7px;place-items:center;font-size:11px;display:grid}.keyHint span.wide{width:auto;padding:0 10px}@media (pointer:coarse){.keyHint{display:none}}.gradeBig{text-align:center;background:linear-gradient(92deg, var(--gold), var(--neon));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(72px,22vw,130px);font-weight:900;line-height:1}.scoreBig{text-align:center;letter-spacing:1px;font-size:34px;font-weight:800}.tally{grid-template-columns:repeat(2,1fr);gap:8px 18px;margin-top:14px;display:grid}.tally div{border-bottom:1px solid var(--line);justify-content:space-between;padding:7px 0;font-size:14px;display:flex}.tally b{font-weight:700}.best{text-align:center;color:var(--gold);margin-top:12px;font-size:13px}.tip{color:var(--dim);font-size:12px;line-height:1.8}