:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#eef0f6;--surface:#fff;--surface-2:#f4f5f9;--line:#d9dce7;--ink:#1b1e29;--ink-soft:#5b6178;--accent:#c8304e;--accent-2:#c94a1c;--accent-ink:#fff;--lane-interval:#7445d6;--lane-chord:#2367cc;--lane-noteId:#0f8274;--tile-ink:#fff;--ok:#17744b;--ok-bg:#e2f4ea;--no:#a83c25;--no-bg:#fbe9e3;--streak:#b86e00;--shadow-raised:0 1px 2px #1b1e290f, 0 8px 24px #1b1e291a;--r-card:20px;--r-answer:16px;--r-chip:12px;--r-pill:999px;--lane:var(--accent);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans KR,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#1b1e29;--surface:#232735;--surface-2:#2c3142;--line:#363c50;--ink:#eef0f7;--ink-soft:#9ba2b9;--accent:#ff5a72;--accent-2:#ff8a4c;--accent-ink:#1b1e29;--lane-interval:#a77bff;--lane-chord:#4f9dff;--lane-noteId:#2ec5b3;--ok:#45d095;--ok-bg:#1f3a33;--no:#ffa07a;--no-bg:#3d2a2a;--streak:#ffb547;--shadow-raised:none}}[data-lane=interval]{--lane:var(--lane-interval)}[data-lane=chord]{--lane:var(--lane-chord)}[data-lane=noteId]{--lane:var(--lane-noteId)}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;margin:0}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}h1,h2,p{margin:0}svg{flex-shrink:0}.page{flex-direction:column;gap:18px;max-width:560px;margin:0 auto;padding:12px 16px 48px;display:flex}.page.center{text-align:center;justify-content:center;align-items:center;min-height:80dvh}.topbar{justify-content:space-between;align-items:center;gap:8px;min-height:44px;display:flex}.brand,.title{letter-spacing:-.02em;font-weight:700;line-height:1.3}.brand{font-size:22px}.title{font-size:28px}.lead{font-size:17px}.hint{color:var(--ink-soft);font-size:13px}.ghost{color:var(--ink-soft);background:0 0;border:none;align-items:center;gap:6px;min-height:44px;padding:8px 4px;font-size:15px;display:inline-flex}.ghost:hover{color:var(--ink)}.primary,.secondary{border-radius:var(--r-pill);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 22px;font-weight:700;display:inline-flex}.primary{background:linear-gradient(100deg, var(--accent), var(--accent-2));color:var(--accent-ink);box-shadow:var(--shadow-raised)}.primary:hover{filter:brightness(1.06)}.secondary{border-color:var(--line);background:0 0}.secondary:hover{border-color:var(--ink-soft)}.block{width:100%}.big{min-height:56px;padding:14px 36px;font-size:17px}.row{gap:10px;display:flex}.row>*{flex:1}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);flex-direction:column;gap:10px;padding:18px;display:flex}.card h2{align-items:center;gap:8px;font-size:17px;font-weight:700;display:flex}.card.lane-edge{background:linear-gradient(var(--lane) 0 0) left / 4px 100% no-repeat, var(--surface)}.card.subtle{background:var(--surface-2);border-color:#0000}.bullets{flex-direction:column;gap:8px;margin:0;padding-left:1.1em;display:flex}@property --ring{syntax:"<color>";inherits:true;initial-value:#0000}.disc{--ring:var(--lane);--disc-fill:1;aspect-ratio:1;background:conic-gradient(var(--ring) calc(var(--disc-fill) * 360deg), var(--line) 0);width:200px;box-shadow:var(--shadow-raised);border-radius:50%;flex-shrink:0;padding:6px;transition:--ring .3s}.disc.ok{--ring:var(--ok)}.disc.sm{width:96px;padding:4px}.disc-face{background:var(--surface);width:100%;height:100%;color:var(--lane);border-radius:50%;place-items:center;display:grid}.wave{justify-content:center;align-items:center;gap:3px;height:36px;display:flex}.wave>span{width:4px;height:var(--h);border-radius:var(--r-pill);background:var(--line);transition:background-color .2s}.wave.on>span{background:var(--lane);animation:wave .9s ease-in-out calc(var(--i) * -.13s) infinite alternate}.wave.slow>span{background:var(--ink-soft);animation-duration:2.4s}@keyframes wave{0%{transform:scaleY(.35)}to{transform:scaleY(1)}}.track{grid-template-columns:repeat(10,1fr);gap:4px;margin:0;padding:0;list-style:none;display:grid}.track>li{border-radius:var(--r-pill);background:var(--line);height:8px}.track>li.done{background:var(--lane)}.track>li.now{box-shadow:inset 0 0 0 2px var(--accent)}.streak-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);justify-content:space-between;align-items:center;gap:8px;padding:4px 8px 4px 16px;display:flex}.streak-text{font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-weight:500;display:inline-flex}.streak-text svg{color:var(--streak)}.streak-card .ghost{white-space:nowrap}.modes{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.mode-card{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);align-items:flex-start;gap:14px;width:100%;padding:14px;display:flex}.mode-card:not(:disabled):hover{border-color:var(--lane)}.mode-card:disabled{opacity:.6}.mode-tile{border-radius:var(--r-chip);width:52px;height:52px;color:var(--tile-ink);background:linear-gradient(135deg, var(--lane), color-mix(in srgb, var(--lane), black 38%));flex-shrink:0;place-items:center;display:grid}.mode-card:disabled .mode-tile{background:var(--surface-2);color:var(--ink-soft)}.mode-body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.mode-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.mode-title{letter-spacing:-.01em;font-size:17px;font-weight:700}.mode-level{color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px}.mode-why{color:var(--ink-soft);font-size:13px}.mode-bar{border-radius:var(--r-pill);background:var(--line);height:4px;margin-top:6px;overflow:hidden}.mode-bar>span{border-radius:inherit;background:var(--lane);height:100%;display:block}.badge{border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-soft);white-space:nowrap;padding:0 8px;font-size:13px;font-weight:500}.options{flex-wrap:wrap;gap:8px;display:flex}.options.column{flex-direction:column}.option{background:var(--surface-2);border-radius:var(--r-chip);text-align:left;border:2px solid #0000;flex-direction:column;gap:2px;min-height:44px;padding:9px 14px;display:flex}.option.inline{flex-direction:row;align-items:center;gap:8px}.option strong{font-weight:500}.option.selected{border-color:var(--accent);font-weight:700}.option.selected strong{font-weight:700}.option.selected .hint{font-weight:400}.progress-text{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:15px;font-weight:500}.stage{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:8px 0 4px;display:flex}.stage .disc,.loading .disc{width:168px}.stage .disc-face svg,.loading .disc-face svg{width:60px;height:60px}.stage-pool{flex-direction:column;align-items:center;gap:6px;display:flex}.chips{flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;display:flex}.chips>li{border-radius:var(--r-chip);border:1px solid var(--lane);padding:2px 10px;font-size:13px;font-weight:500}.replay{color:var(--ink-soft);background:0 0;border:none;flex-direction:column;align-items:center;gap:6px;padding:0;font-size:13px;font-weight:500;display:flex}.replay-circle{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:72px;height:72px;color:var(--accent-ink);box-shadow:var(--shadow-raised);border-radius:50%;place-items:center;display:grid}.replay:disabled .replay-circle{background:var(--surface);color:var(--lane);box-shadow:inset 0 0 0 1px var(--line)}.replay:focus-visible{outline:none}.replay:focus-visible .replay-circle{outline:3px solid var(--accent);outline-offset:3px}.answers{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.answers.many{grid-template-columns:repeat(3,1fr)}.answer{border:1px solid var(--line);border-radius:var(--r-answer);background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:64px;padding:13px 6px;display:flex;position:relative}.answer:not(:disabled):hover{border-color:var(--lane)}.answer>svg{position:absolute;top:8px;right:8px}.answer-name{font-size:17px;font-weight:700}.answer-sub{color:var(--ink-soft);font-size:13px}.answer.correct,.answer.wrong{border-width:2px;padding:12px 5px}.answers.many .answer-name{font-size:15px}.answers.many .answer>svg{width:14px;height:14px;top:5px;right:5px}.answer.correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}.answer.wrong{background:var(--no-bg);border-color:var(--no);color:var(--no)}.answer.correct .answer-sub,.answer.wrong .answer-sub{color:inherit}.answer:disabled:not(.correct):not(.wrong){opacity:.6}.feedback{border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(var(--tone) 0 0) top / 100% 4px no-repeat, var(--surface);flex-direction:column;gap:10px;padding:18px;display:flex}.feedback h2{color:var(--tone);font-size:17px;font-weight:700}.feedback.ok{--tone:var(--ok)}.feedback.no{--tone:var(--no)}.feedback strong{margin-right:6px;font-weight:700}.compare{gap:8px;display:flex}.compare button{border-radius:var(--r-chip);background:var(--surface-2);border:none;flex:1;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:10px;font-weight:500;display:inline-flex}.compare button svg{color:var(--accent)}.did-you-know{border-top:1px solid var(--line);padding-top:10px;font-size:13px}.intro-head{align-items:center;gap:16px;display:flex}.score{justify-content:center;padding:8px 0;display:flex}.score .disc-face{color:var(--ink);flex-wrap:wrap;place-content:center;align-items:baseline;gap:4px;display:flex}.score-num{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:48px;font-weight:700;line-height:1}.score-total{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:17px}.result-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.result-list>li{border-top:1px solid var(--line);padding:10px 0}.result-list>li:first-child{border-top:none;padding-top:0}.card h2 svg{color:var(--lane)}.unlock{border-bottom:1px solid var(--line);padding:10px 0}.unlock:last-of-type{border-bottom:none}.stats{grid-template-columns:repeat(3,1fr);padding:16px 8px;display:grid}.stat{text-align:center;flex-direction:column;align-items:center;gap:2px;display:flex}.stat+.stat{border-left:1px solid var(--line)}.stat-num{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;line-height:1.2}.stat-label{color:var(--ink-soft);font-size:13px}.week{grid-template-columns:repeat(7,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.week-day{flex-direction:column;align-items:center;gap:4px;display:flex}.week-count{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:13px}.week-track{border-bottom:2px solid var(--line);align-items:flex-end;width:12px;height:96px;display:flex}.week-track>span{border-radius:var(--r-pill);background:color-mix(in srgb, var(--ink-soft) 30%, transparent);width:100%;min-height:8px}.week-day.today .week-track>span{background:var(--accent)}.week-day.today .week-label{font-weight:700}.week-label{font-size:13px}.acc-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.acc-row{grid-template-columns:5.5em 1fr 7em;align-items:center;gap:10px;display:grid}.acc-name{font-weight:500}.acc-bar{background:var(--line);border-radius:var(--r-pill);height:6px;overflow:hidden}.acc-bar>span{border-radius:inherit;background:var(--lane);height:100%;display:block}.acc-value{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;font-size:15px}.update-bar{z-index:10;padding:4px 16px calc(4px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;font-size:15px;display:flex;position:fixed;bottom:0;left:0;right:0}.update-bar-space{height:80px}.update-bar-action{min-height:44px;color:var(--accent);background:0 0;border:none;align-items:center;gap:6px;padding:8px 12px;font-weight:700;display:inline-flex}.store-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.store-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:6px 0;display:flex}.store-row:first-child{border-top:none}.store-main{flex-direction:column;gap:2px;display:flex}.store-name{align-items:center;gap:8px;font-weight:500;display:inline-flex}.store-ready{color:var(--ok);text-align:right;align-items:center;gap:4px;font-size:13px;display:inline-flex}.store-action{white-space:nowrap;min-height:44px;padding:8px 16px}.store-action:disabled{color:var(--ink-soft)}.loading{flex-direction:column;align-items:center;gap:20px;display:flex}.load-failed{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:360px;display:flex}.load-failed h1{font-weight:700}.load-failed .hint{margin-bottom:8px}@media (prefers-reduced-motion:reduce){.wave.on>span{animation:none}.disc{transition:none}}