:root{--bg:#f4f1ea;--surface:#fffdf8;--surface-2:#ece7dc;--text:#1d1f24;--muted:#6b6a66;--border:#ddd6c8;--accent:#2f5d50;--accent-ink:#fff;--visual:#2f6fb3;--audio:#c2602d;--good:#2e8b57;--bad:#c0392b;--square:#2f5d50;--shadow:0 1px 2px #0000000d, 0 4px 16px #0000000d;--radius:16px;--font:ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#16181d;--surface:#1f2228;--surface-2:#2a2e36;--text:#eceae4;--muted:#9a9890;--border:#343842;--accent:#6fbfa4;--accent-ink:#0f1a16;--visual:#6aa7e8;--audio:#ec9461;--good:#5cc98a;--bad:#ef6b5b;--square:#6fbfa4;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#16181d;--surface:#1f2228;--surface-2:#2a2e36;--text:#eceae4;--muted:#9a9890;--border:#343842;--accent:#6fbfa4;--accent-ink:#0f1a16;--visual:#6aa7e8;--audio:#ec9461;--good:#5cc98a;--bad:#ef6b5b;--square:#6fbfa4;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}#app{max-width:560px;height:100%;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);margin:0 auto}.view{flex-direction:column;height:100%;display:none}.view[data-active]{display:flex}.scroll{-webkit-overflow-scrolling:touch;flex:1;padding-bottom:24px;overflow-y:auto}.topbar{justify-content:space-between;align-items:center;gap:8px;padding:12px 0;display:flex}.brand{letter-spacing:-.01em;margin:0;font-size:1.35rem}.topbar-title{margin:0;font-size:1.1rem}.topbar-actions{gap:4px;display:flex}.icon-btn{background:0 0;border:0;border-radius:12px;place-items:center;width:44px;height:44px;font-size:1.4rem;display:grid}.icon-btn:active{background:var(--surface-2)}.icon-btn svg{width:22px;height:22px}.icon-btn-spacer{width:44px}.hero{text-align:center;padding:28px 0 16px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0;font-size:.72rem;font-weight:600}.hero-level{font-variant-numeric:tabular-nums;color:var(--accent);margin:8px 0;font-size:6rem;font-weight:700;line-height:1}.hero-sub{color:var(--muted);margin:0}.progress-card,.card,.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.progress-card{margin:12px 0;padding:16px}.progress-head{color:var(--muted);justify-content:space-between;margin-bottom:12px;font-size:.9rem;display:flex}.round-dots{grid-template-columns:repeat(12,1fr);gap:6px;display:grid}.round-dots i{background:var(--surface-2);border-radius:5px;height:10px}.round-dots i.done{background:var(--accent)}.tiles{grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0;display:grid}.tiles-4{grid-template-columns:repeat(4,1fr);gap:8px}.tiles-4 .tile{padding:10px 4px}.tiles-4 .tile-value{font-size:1.2rem}.tiles-4 .tile-label{font-size:.64rem}@media (width<=340px){.tiles-4{grid-template-columns:repeat(2,1fr)}}.tile{text-align:center;flex-direction:column;gap:4px;padding:14px 8px;display:flex}.tile-value{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}.tile-label{color:var(--muted);font-size:.72rem}.cta-wrap{flex-direction:column;gap:8px;margin-top:auto;padding:16px 0 20px;display:flex}.btn{background:var(--surface-2);text-align:center;border:1px solid #0000;border-radius:14px;padding:12px 18px;font-weight:600}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-ghost{border-color:var(--border);background:0 0}.btn-danger{border-color:var(--bad);color:var(--bad);background:0 0}.btn-lg{padding:16px 20px;font-size:1.08rem}.btn-sm{width:100%;margin-top:8px;padding:10px 14px;font-size:.92rem}.file-btn{cursor:pointer;display:block}.view-play{-webkit-user-select:none;user-select:none}.play-top{justify-content:space-between;align-items:center;padding:12px 0 8px;display:flex}.play-meta{text-align:center;flex-direction:column;display:flex}.play-level{font-size:1.1rem;font-weight:700}.play-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem}.play-progress{background:var(--surface-2);border-radius:2px;height:4px;overflow:hidden}.play-progress-bar{background:var(--accent);width:0;height:100%;transition:width .3s}.board-wrap{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-height:0;display:flex}.board{aspect-ratio:1;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,52vh,420px);padding:6px;display:grid}.cell{color:var(--accent-ink);background:0 0;border-radius:14px;place-items:center;min-height:0;font-size:clamp(2rem,9vh,4.5rem);font-weight:800;line-height:1;transition:background-color 80ms;display:grid;overflow:hidden}.board.grid-on .cell{background:var(--surface);border:1px solid var(--border)}.cell.lit{background:var(--square)!important;border-color:var(--square)!important}.cross{color:var(--muted);opacity:.6;font-size:1.6rem}.play-hint{min-height:1.4em;color:var(--muted);text-align:center;margin:0;font-size:.9rem}.answer-row{grid-template-columns:1fr 1fr;gap:12px;padding:12px 0 20px;display:grid}.answer-row.swapped{direction:rtl}.answer-row.swapped>*{direction:ltr}.answer{border:2px solid var(--border);background:var(--surface);touch-action:manipulation;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:104px;font-size:1.05rem;font-weight:700;transition:background-color .1s,border-color .1s;display:flex}.answer svg{width:28px;height:28px}.answer kbd{color:var(--muted);font-size:.7rem;font-weight:500}@media (pointer:coarse){.answer kbd{display:none}}#btn-position{color:var(--visual)}#btn-sound{color:var(--audio)}#btn-position.pressed{background:var(--visual);border-color:var(--visual);color:#fff}#btn-sound.pressed{background:var(--audio);border-color:var(--audio);color:#fff}.answer.correct{background:var(--good)!important;border-color:var(--good)!important;color:#fff!important}.answer.wrong{background:var(--bad)!important;border-color:var(--bad)!important;color:#fff!important}.answer.missed{border-style:dashed;border-color:var(--bad)!important}.result-wrap{text-align:center;flex-direction:column;height:100%;padding-top:32px;display:flex}.result-title{margin:6px 0 20px;font-size:1.7rem}.scores{justify-content:center;gap:24px;display:flex}.score{width:140px;height:140px;position:relative}.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{stroke:var(--surface-2);stroke-width:10px}.ring-fg{stroke-width:10px;stroke-dasharray:326.7;stroke-dashoffset:326.7px;transition:stroke-dashoffset .8s ease-out}.ring-visual{stroke:var(--visual)}.ring-audio{stroke:var(--audio)}.score-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.score-value{font-variant-numeric:tabular-nums;font-size:1.8rem;font-weight:700}.score-label{color:var(--muted);font-size:.8rem}.result-detail{color:var(--muted);white-space:pre-line;margin:16px 0 0;font-size:.88rem;line-height:1.5}.level-change{background:var(--surface-2);border-radius:999px;margin:18px auto 0;padding:10px 16px;font-weight:600;display:inline-block}.level-change.up{background:color-mix(in srgb, var(--good) 18%, transparent);color:var(--good)}.level-change.down{background:color-mix(in srgb, var(--bad) 15%, transparent);color:var(--bad)}.rules-note{color:var(--muted);margin-top:18px;font-size:.76rem}.level-picker{justify-content:center;align-items:center;gap:12px;margin-top:16px;display:flex}.stepper{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:6px;display:flex}.stepper span{font-variant-numeric:tabular-nums;min-width:2ch;font-size:1.2rem;font-weight:700}.card{margin:12px 0;padding:16px}.card h3{margin:0 0 4px;font-size:1rem}.card-head{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;display:flex}.muted{color:var(--muted)}.small{font-size:.84rem}.center{text-align:center}.chart svg{stroke-width:1px;width:100%;height:auto;display:block}.chart .axis{stroke:var(--border)}.chart .lbl{fill:var(--muted);stroke:none;font-size:10px;font-family:var(--font)}.chart .empty{fill:var(--muted);stroke:none;font-size:12px}.legend{color:var(--muted);align-items:center;gap:4px;font-size:.75rem;display:flex}.sw{border-radius:2px;width:10px;height:3px;margin-left:6px;display:inline-block}.sw-visual{background:var(--visual)}.sw-audio{background:var(--audio)}.calendar{text-align:center;grid-template-columns:repeat(7,1fr);gap:4px;font-size:.78rem;display:grid}.calendar .dow{color:var(--muted);padding-bottom:2px;font-size:.68rem}.calendar .day{aspect-ratio:1;background:var(--surface-2);color:var(--muted);border-radius:8px;place-items:center;display:grid}.calendar .day.partial{background:color-mix(in srgb, var(--accent) 30%, var(--surface-2));color:var(--text)}.calendar .day.done{background:var(--accent);color:var(--accent-ink);font-weight:700}.calendar .day.today{outline:2px solid var(--text);outline-offset:-2px}.calendar .blank{background:0 0}.rounds-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.84rem}.rounds-table th{text-align:left;color:var(--muted);padding:4px 4px 8px;font-weight:500}.rounds-table td{border-top:1px solid var(--border);padding:6px 4px}.rounds-table .up{color:var(--good)}.rounds-table .down{color:var(--bad)}.settings h3{margin-bottom:8px}.row{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.row:first-of-type{border-top:0}.row>span{flex-direction:column;gap:2px;display:flex}.row small{color:var(--muted);font-size:.8rem}.row-col{flex-direction:column;align-items:stretch}.row-col input[type=range]{width:100%;accent-color:var(--accent)}.advanced.locked{opacity:.45;pointer-events:none}.segmented{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;gap:2px;padding:3px;display:inline-flex}.segmented button{color:var(--muted);background:0 0;border:0;border-radius:9px;padding:7px 12px;font-size:.88rem;font-weight:600}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}.segmented-full{display:flex}.segmented-full button{flex:1}.locked-section{opacity:.45;pointer-events:none}.select{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;max-width:55%;padding:8px}.switch{appearance:none;background:var(--surface-2);border:1px solid var(--border);border-radius:15px;flex-shrink:0;width:50px;height:30px;transition:background .2s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0000004d}.switch:checked{background:var(--accent);border-color:var(--accent)}.switch:checked:after{transform:translate(20px)}.steps{margin:0 0 12px;padding-left:20px;line-height:1.5}.steps li{margin-bottom:10px}kbd{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:.8em}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));background:var(--text);color:var(--bg);opacity:0;pointer-events:none;border-radius:12px;max-width:calc(100% - 32px);padding:10px 16px;font-size:.9rem;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}.dialog{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);max-width:min(360px,100% - 32px);padding:20px}.dialog::backdrop{background:#0006}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.debug-panel{left:8px;right:8px;top:calc(env(safe-area-inset-top) + 64px);z-index:10;color:#9fe8b0;white-space:pre-wrap;pointer-events:none;background:#000000c7;border-radius:8px;max-height:30vh;margin:0;padding:8px;font:11px/1.35 ui-monospace,monospace;position:fixed;overflow:hidden}@media (prefers-reduced-motion:reduce){*{transition:none!important}}