:root{--bg:#0f1420;--panel:#182135;--panel-2:#212c45;--line:#2c3a58;--text:#e8edf7;--dim:#93a2c0;--accent:#4aa8ff;--accent-dark:#2b6fd6;--ok:#35c07a;--ng:#e0576b;--flag:#f0b429;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.6}.app{max-width:720px;margin:0 auto;padding:16px 16px 48px}.app-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.app-head h1{margin:0;font-size:18px}.tabs{background:var(--panel);border-radius:999px;gap:4px;padding:4px;display:flex}.tabs button{color:var(--dim);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 14px;font-size:14px}.tabs button.on{background:var(--accent-dark);color:#fff}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;padding:16px}.card h2{color:var(--dim);margin:16px 0 8px;font-size:14px}.card h2:first-child{margin-top:0}.row{align-items:center;gap:8px;display:flex}.row.wrap{flex-wrap:wrap}button{font:inherit;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 14px}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent-dark);border-color:var(--accent)}button.primary.big{width:100%;padding:14px;font-size:16px}button.ghost{color:var(--dim);background:0 0}button.ghost.danger{color:var(--ng);border-color:#0000}input[type=search],select{font:inherit;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px}input[type=search]{flex:1;min-width:180px}.vol-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.vol{border:1px solid var(--line);cursor:pointer;background:var(--panel-2);border-radius:10px;grid-template-columns:auto 1fr;grid-template-areas:"cb name""cb sub""cb count";align-items:center;gap:0 8px;padding:10px;display:grid}.vol.on{border-color:var(--accent);background:#1c2f4d}.vol input{grid-area:cb}.vol-name{grid-area:name;font-size:14px;font-weight:600}.vol-sub{color:var(--dim);text-overflow:ellipsis;white-space:nowrap;grid-area:sub;font-size:11px;overflow:hidden}.vol-count{color:var(--dim);grid-area:count;font-size:11px}.pill{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-size:14px;display:inline-flex}.pill:has(input:checked){border-color:var(--accent);background:#1c2f4d}.start-bar{background:var(--panel);border:1px solid var(--line);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex;position:sticky;bottom:0}.player{margin-bottom:16px}.player-frame{aspect-ratio:16/9;border:1px solid var(--line);background:#000;border-radius:12px;position:relative;overflow:hidden}.player-host{width:100%;height:100%}.player-host iframe{border:0;width:100%;height:100%}.player-cover{color:var(--dim);background:linear-gradient(160deg,#1b2740,#101728);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.player-cover-icon{font-size:40px}.player-cover-text{font-size:13px}.player-controls{flex-wrap:nowrap;align-items:center;gap:8px;margin-top:8px;display:flex}.player-controls>button{white-space:nowrap;flex:none}.player-controls .btn-toggle{text-align:center;min-width:7.5em}.volume{flex:auto;justify-content:flex-end;align-items:center;gap:6px;min-width:0;margin-left:auto;display:flex}.volume input{flex:0 110px;width:110px;min-width:40px;max-width:100%}@media (width<=400px){.player-controls>button{padding:8px 10px;font-size:14px}.player-controls .btn-toggle{min-width:7em}}.player-error{color:var(--ng);font-size:13px}.study-head{margin-bottom:12px}.progress{background:var(--panel-2);border-radius:2px;height:4px;overflow:hidden}.progress-bar{background:var(--accent);height:100%;transition:width .2s}.study-meta{color:var(--dim);justify-content:space-between;align-items:center;margin-top:6px;font-size:13px;display:flex}.choices{gap:8px;display:grid}.choice{text-align:left;align-items:center;gap:10px;padding:12px 14px;display:flex}.choice-no{background:var(--panel);width:22px;height:22px;color:var(--dim);border-radius:6px;flex:none;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.choice.correct{border-color:var(--ok);background:#14361f}.choice.wrong{border-color:var(--ng);background:#3a1a22}.choice:disabled{opacity:1}.detail{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-top:12px;padding:16px}.song-title{margin:4px 0 12px;font-size:22px}.detail dl{grid-template-columns:84px 1fr;gap:4px 12px;margin:0 0 12px;display:grid}.detail dt{color:var(--dim);font-size:13px}.detail dd{margin:0}.pre{white-space:pre-wrap}.flags{gap:8px;margin-top:12px;display:flex}.flags .flag{flex:1}.flag.on{border-color:var(--ok);background:#16311f}.flag.on.check{border-color:var(--flag);background:#37290d}.nav{gap:8px;margin-top:12px;display:flex}.nav button{flex:1}.result{text-align:center}.score{font-size:24px;font-weight:700}.wrong-list{text-align:left;padding:0;list-style:none}.wrong-list li{border-bottom:1px solid var(--line);padding:4px 0}.result-actions{flex-direction:column;gap:8px;margin-top:16px;display:flex}.result-actions button{width:100%;padding:12px}.stats{align-items:center;gap:16px;margin-bottom:12px;font-size:14px;display:flex}.stats strong{font-size:20px}.stats button{margin-left:auto}.track-list{flex-direction:column;gap:6px;display:flex}.track-row{background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex}.track-main{flex-direction:column;flex:1;min-width:0;display:flex}.track-title{color:var(--text);font-weight:600;text-decoration:none}.track-title:hover{text-decoration:underline}.track-flags{gap:6px;display:flex}.track-flags .flag{filter:grayscale()opacity(.5);padding:6px 10px}.track-flags .flag.on{filter:none}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.small{font-size:12px}.dim{color:var(--dim)}.app-foot{color:var(--dim);text-align:center;margin-top:32px;font-size:12px}a{color:var(--accent)}