@layer theme,base,theory-ui,chord-practice-ui,guitar-ui;@layer page{:root[data-page=interval-game] .practice-stage{border-radius:calc(var(--radius-lg) - 6px);background:linear-gradient(#ffffff0a,#ffffff05);border:1px solid #ffffff0f;margin-top:22px;padding:18px;transition:border-color .18s,box-shadow .18s}:root[data-page=interval-game] #quiz-card.is-correct .practice-stage{border-color:#4ecca380;box-shadow:0 0 0 1px #4ecca338,0 20px 40px #4ecca31a}:root[data-page=interval-game] #quiz-card.is-wrong .practice-stage{border-color:#e9456080;box-shadow:0 0 0 1px #e945602e,0 20px 40px #e945601a}:root[data-page=interval-game] .practice-stage .piano-wrap,:root[data-page=interval-game] .practice-stage .fretboard-wrap{margin-top:14px}:root[data-page=interval-game] .playback-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;display:flex}:root[data-page=interval-game] .piano-key.is-veiled,:root[data-page=interval-game] .fret-cell.is-veiled .fret-note-dot{filter:blur(.3px)}:root[data-page=interval-game] .answer-area{gap:10px;margin-top:22px;display:grid}:root[data-page=interval-game] .answer-area.layout-count{grid-template-columns:repeat(auto-fit,minmax(52px,1fr))}:root[data-page=interval-game] .answer-area.layout-choice{grid-template-columns:repeat(2,minmax(0,1fr))}:root[data-page=interval-game] .choice-btn{color:#fff;cursor:pointer;text-align:left;background:linear-gradient(#243a6f 0%,#1c2d55 100%);border:none;border-radius:18px;padding:16px 14px;transition:transform .14s,box-shadow .14s,background .14s,opacity .14s;box-shadow:inset 0 1px #ffffff29,0 14px 30px #0003}:root[data-page=interval-game] .choice-btn:hover,:root[data-page=interval-game] .choice-btn:focus-visible{outline:none;transform:translateY(-2px)}:root[data-page=interval-game] .choice-btn:disabled{cursor:not-allowed;opacity:.88}:root[data-page=interval-game] .choice-btn.is-correct{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%)}:root[data-page=interval-game] .choice-btn.is-wrong{background:linear-gradient(180deg, var(--danger-strong) 0%, var(--danger) 100%)}:root[data-page=interval-game] .choice-name{font-size:1rem;font-weight:800;display:block}:root[data-page=interval-game] .choice-sub{color:#ffffffb8;margin-top:3px;font-size:.78rem;display:block}:root[data-page=interval-game] .count-btn{color:#fff;cursor:pointer;background:linear-gradient(#243a6f 0%,#1c2d55 100%);border:none;border-radius:14px;min-height:56px;font-size:1.05rem;font-weight:800;transition:transform .14s,box-shadow .14s,background .14s,opacity .14s;box-shadow:inset 0 1px #ffffff29,0 10px 22px #0003}:root[data-page=interval-game] .count-btn:hover,:root[data-page=interval-game] .count-btn:focus-visible{outline:none;transform:translateY(-2px)}:root[data-page=interval-game] .count-btn:disabled{cursor:not-allowed;opacity:.88}:root[data-page=interval-game] .count-btn.is-correct{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%)}:root[data-page=interval-game] .count-btn.is-wrong{background:linear-gradient(180deg, var(--danger-strong) 0%, var(--danger) 100%)}@media (width<=760px){:root[data-page=interval-game] .answer-area.layout-choice{grid-template-columns:1fr}:root[data-page=interval-game] .playback-row{flex-direction:column;align-items:stretch}:root[data-page=interval-game] .playback-row .mode-toggle{justify-content:center}}}