:root{--bg: #fffdf8;--ink: #2b2b2b;--accent: #5ba3d0;--muted: rgba(43, 43, 43, .45);--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{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--round-font)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.level-select{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vmin,28px);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);overflow:hidden;-webkit-tap-highlight-color:transparent}.level-title{flex:0 0 auto;margin:0;font-size:clamp(18px,4.5vmin,40px);font-weight:800}.level-cards{flex:1 1 auto;min-height:0;width:min(100%,820px);display:grid;gap:clamp(8px,2vmin,20px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}@media (orientation: landscape){.level-cards{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);width:min(100%,1180px)}}.level-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;min-height:0;min-width:0;overflow:hidden;padding:clamp(6px,1.6vmin,16px);background:#fff;border:3px solid var(--accent);border-radius:20px;font-family:var(--round-font);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,background .12s ease-out}.level-card:active{transform:scale(.97);background:#f4faff}.level-thumb{flex:1 1 0;min-height:0;width:100%;height:100%;display:block}.level-thumb line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}.level-thumb path{fill:var(--ink)}.level-name{font-size:clamp(18px,3.4vmin,28px);font-weight:800}.level-range{font-size:clamp(20px,3.6vmin,30px);font-weight:700;color:var(--accent)}.level-hint{font-size:clamp(13px,2.4vmin,18px);color:var(--muted)}#stage{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;overscroll-behavior:none}.progress{margin:0;padding:.4em .2em;text-align:center;font-size:clamp(16px,3.2vmin,28px);font-weight:700;color:var(--muted);letter-spacing:.08em}.scene-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.scene{width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.staff-line,.ledger-line{stroke:var(--ink);stroke-width:3;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:4}.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:12;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:0 0 auto;display:flex;justify-content:center;padding:.4em 0 .8em;min-height:1px}.next-btn{padding:.5em 2em;background:var(--accent);border:none;border-radius:9999px;font-family:var(--round-font);font-size:clamp(20px,4vmin,34px);font-weight:800;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out}.next-btn:active{transform:scale(.97)}.finished-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fffdf8eb;opacity:0;visibility:hidden;transition:opacity .24s ease-out,visibility 0s linear .24s}.finished-overlay.is-visible{opacity:1;visibility:visible;transition:opacity .24s ease-out}.finished-card{text-align:center}.finished-title{margin:0;font-size:clamp(48px,12vmin,120px);font-weight:800;color:var(--accent)}.finished-score{margin:.4em 0 0;font-size:clamp(20px,4.4vmin,34px);font-weight:700;color:var(--ink)}.finished-actions{display:flex;flex-wrap:wrap;gap:clamp(12px,3vmin,24px);justify-content:center;margin-top:clamp(20px,5vmin,44px)}.action-btn{padding:.5em 1.4em;background:var(--accent);border:3px solid var(--accent);border-radius:9999px;font-family:var(--round-font);font-size:clamp(16px,3.4vmin,26px);font-weight:700;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out}.action-ghost{background:#fff;color:var(--accent)}.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}}