:root{--bg:#fffdf8;--ink:#2b2b2b;--accent:#5ba3d0;--muted:#2b2b2b73;--correct:#3fae6b;--wrong:#e0584f;--round-font:"Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Zen Maru Gothic", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--round-font);margin:0}[hidden]{display:none!important}.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}.level-select{padding:calc(env(safe-area-inset-top) + 2vmin) calc(env(safe-area-inset-right) + 3vmin) calc(env(safe-area-inset-bottom) + 2vmin) calc(env(safe-area-inset-left) + 3vmin);-webkit-tap-highlight-color:transparent;flex-direction:column;justify-content:center;align-items:center;gap:clamp(12px,3vmin,28px);display:flex;position:fixed;inset:0;overflow:hidden}.level-title{flex:none;margin:0;font-size:clamp(18px,4.5vmin,40px);font-weight:800}.level-cards{flex:auto;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2vmin,20px);width:min(100%,820px);min-height:0;display:grid}@media (orientation:landscape){.level-cards{grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,1180px)}}.level-card{border:3px solid var(--accent);min-width:0;min-height:0;font-family:var(--round-font);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:.15em;padding:clamp(6px,1.6vmin,16px);transition:transform .12s ease-out,background .12s ease-out;display:flex;overflow:hidden}.level-card:active{background:#f4faff;transform:scale(.97)}.level-thumb{flex:1 1 0;width:100%;height:100%;min-height:0;display:block}.level-thumb line{stroke:var(--ink);stroke-width:3px;stroke-linecap:round}.level-thumb path{fill:var(--ink)}.level-name{font-size:clamp(18px,3.4vmin,28px);font-weight:800}.level-range{color:var(--accent);font-size:clamp(20px,3.6vmin,30px);font-weight:700}.level-hint{color:var(--muted);font-size:clamp(13px,2.4vmin,18px)}#stage{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:none;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.progress{text-align:center;color:var(--muted);letter-spacing:.08em;margin:0;padding:.4em .2em;font-size:clamp(16px,3.2vmin,28px);font-weight:700}.scene-wrap{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.scene{touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%}.staff-line,.ledger-line{stroke:var(--ink);stroke-width:3px;stroke-linecap:round}.clef,.note-head{fill:var(--ink)}.start-dot{fill:var(--accent)}.end-dot{fill:var(--accent);opacity:.55}.name-pill{fill:#fff;stroke:var(--accent);stroke-width:4px}.name-text{fill:var(--accent);font-family:var(--round-font);font-size:96px;font-weight:800}.link-line,.drag-line{stroke:var(--accent);stroke-width:12px;stroke-linecap:round;fill:none}.drag-line{opacity:.7}.link-line.is-correct{stroke:var(--correct)}.link-line.is-wrong{stroke:var(--wrong)}.judge-mark{font-size:86px}.judge-mark.is-correct{fill:var(--correct)}.judge-mark.is-wrong{fill:var(--wrong)}.controls{flex:none;justify-content:center;min-height:1px;padding:.4em 0 .8em;display:flex}.next-btn.is-hidden{visibility:hidden;pointer-events:none}.next-btn{background:var(--accent);font-family:var(--round-font);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:9999px;padding:.5em 2em;font-size:clamp(20px,4vmin,34px);font-weight:800;transition:transform .12s ease-out}.next-btn:active{transform:scale(.97)}.finished-overlay{opacity:0;visibility:hidden;background:#fffdf8eb;justify-content:center;align-items:center;transition:opacity .24s ease-out,visibility 0s linear .24s;display:flex;position:absolute;inset:0}.finished-overlay.is-visible{opacity:1;visibility:visible;transition:opacity .24s ease-out}.finished-card{text-align:center}.finished-title{color:var(--accent);margin:0;font-size:clamp(48px,12vmin,120px);font-weight:800}.finished-score{color:var(--ink);margin:.4em 0 0;font-size:clamp(20px,4.4vmin,34px);font-weight:700}.finished-actions{flex-wrap:wrap;justify-content:center;gap:clamp(12px,3vmin,24px);margin-top:clamp(20px,5vmin,44px);display:flex}.action-btn{background:var(--accent);border:3px solid var(--accent);font-family:var(--round-font);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:9999px;padding:.5em 1.4em;font-size:clamp(16px,3.4vmin,26px);font-weight:700;transition:transform .12s ease-out}.action-ghost{color:var(--accent);background:#fff}.action-btn:active{transform:scale(.97)}@media (prefers-reduced-motion:reduce){.level-card,.next-btn,.action-btn,.finished-overlay{transition:none}.level-card:active,.next-btn:active,.action-btn:active{transform:none}}