:root{--wood-dark:#7a4a1d;--wood:#8a5a2b;--wood-light:#f6ead8;--deck:#fdf6ea;--bead:#d98a3d;--bead-dark:#a85f1c;--bead-active:#2f7d5c;--bead-active-dark:#1d5a41;--ink:#33251a;--ink-soft:#6c5844;--focus:#1565c0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;background:linear-gradient(#fdf8f0 0%,#f1e3cc 100%);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{justify-content:center;min-height:100vh;padding:16px;display:flex}.app{flex-direction:column;gap:20px;width:100%;max-width:880px;display:flex}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.app-heading{min-width:200px}.app-title{color:var(--wood-dark);margin:0;font-size:clamp(1.4rem,4vw,2rem)}.app-subtitle{color:var(--ink-soft);margin:4px 0 0;font-size:.95rem}.header-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.sound-toggle{border:2px solid var(--wood);min-height:48px;color:var(--wood-dark);cursor:pointer;background:#fff;border-radius:999px;padding:0 16px;font-size:1rem;font-weight:600}.sound-toggle[aria-pressed=true]{background:var(--wood);color:#fff}.sound-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.lang-toggle{gap:8px;display:inline-flex}.lang-toggle__button{border:2px solid var(--wood);min-width:64px;min-height:48px;color:var(--wood-dark);cursor:pointer;background:#fff;border-radius:999px;padding:0 16px;font-size:1rem;font-weight:600}.lang-toggle__button.is-active{background:var(--wood);color:#fff}.lang-toggle__button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.app-main{flex-direction:column;align-items:center;gap:16px;display:flex}.soroban{filter:drop-shadow(0 8px 18px #7a4a1d2e);touch-action:none;-webkit-user-select:none;user-select:none;width:100%;max-width:720px;height:auto}.soroban-frame{fill:var(--wood-light);stroke:var(--wood-dark);stroke-width:8px}.soroban-inner{fill:var(--deck)}.soroban-bar{fill:var(--wood-dark)}.rod-line{stroke:var(--wood);stroke-width:5px;stroke-linecap:round}.bead{fill:var(--bead);stroke:var(--bead-dark);stroke-width:3px;transition:y .14s ease-out,fill .14s ease-out,stroke .14s ease-out}.bead--active{fill:var(--bead-active);stroke:var(--bead-active-dark)}.bead--highlight{stroke:var(--focus);stroke-width:6px;animation:.7s ease-in-out infinite alternate player-pulse}.rod-halo{fill:#1565c014;stroke:var(--focus);stroke-width:2px}@keyframes player-pulse{0%{opacity:.7}to{opacity:1}}@media (prefers-reduced-motion:reduce){.bead--highlight{animation:none}}.zone{fill:#0000;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}.zone:focus-visible{outline:3px solid var(--focus);outline-offset:-4px;stroke:var(--focus);stroke-width:4px}.frame-hint{color:var(--ink-soft);text-align:center;margin:0;font-size:.85rem}.app-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.undo-button{border:2px solid var(--wood);min-width:48px;min-height:48px;color:var(--wood-dark);cursor:pointer;background:#fff;border-radius:999px;padding:0 20px;font-size:1rem;font-weight:600}.undo-button:disabled{opacity:.45;cursor:default}.undo-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.readout{border:2px solid var(--wood-light);background:#fff;border-radius:16px;align-items:baseline;gap:12px;padding:10px 24px;display:flex}.readout__label{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}.readout__value{font-variant-numeric:tabular-nums;color:var(--wood-dark);font-size:clamp(1.8rem,6vw,2.6rem);font-weight:700}.app-footer{color:var(--ink-soft);text-align:center;margin-top:auto;padding:8px 0 16px;font-size:.8rem}.app-footer p{margin:0}.player{border:2px solid var(--wood-light);background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:720px;padding:16px;display:flex}.player__title{color:var(--wood-dark);margin:0;font-size:1.05rem}.player__intro{color:var(--ink-soft);text-align:center;margin:0;font-size:.85rem}.player__form{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px;display:flex}.player__field{color:var(--ink-soft);text-align:center;flex-direction:column;gap:4px;font-size:.8rem;display:flex}.player__input{border:2px solid var(--wood);width:96px;min-height:48px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:center;background:#fff;border-radius:12px;padding:0 12px;font-size:1.15rem;font-weight:700}.player__op{gap:8px;display:inline-flex}.player__op-button{border:2px solid var(--wood);min-width:48px;min-height:48px;color:var(--wood-dark);cursor:pointer;background:#fff;border-radius:999px;font-size:1.25rem;font-weight:700}.player__op-button.is-active{background:var(--wood);color:#fff}.player__submit{border:2px solid var(--bead-active-dark);background:var(--bead-active);color:#fff;cursor:pointer;border-radius:999px;min-height:48px;padding:0 22px;font-size:1rem;font-weight:700}.player__input:focus-visible,.player__op-button:focus-visible,.player__submit:focus-visible,.player__button:focus-visible,.player__speed-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.player__error{color:#a33218;text-align:center;margin:0;font-size:.9rem;font-weight:600}.player__stage{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.player__equation{color:var(--wood-dark);font-variant-numeric:tabular-nums;margin:0;font-size:clamp(1.15rem,4vw,1.5rem);font-weight:700}.player__status{color:var(--ink-soft);margin:0;font-size:.85rem}.player__technique{border:2px solid var(--wood);background:var(--wood-light);color:var(--wood-dark);border-radius:999px;margin:0;padding:4px 14px;font-size:.85rem;font-weight:700}.player__narration{min-height:1.6em;color:var(--ink);text-align:center;margin:0;font-size:1.05rem}.player__controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.player__button{border:2px solid var(--wood);min-height:48px;color:var(--wood-dark);cursor:pointer;background:#fff;border-radius:999px;padding:0 18px;font-size:.95rem;font-weight:600}.player__button:disabled{opacity:.45;cursor:default}.player__speed{color:var(--ink-soft);align-items:center;gap:10px;font-size:.9rem;display:flex}.player__speed-input{width:150px;min-height:48px;accent-color:var(--bead-active)}.player__speed-value{min-width:3ch;color:var(--wood-dark);font-weight:700}@media (min-width:900px){#app{padding:32px}}@media (max-width:480px){#app{padding:10px}.app{gap:12px}.app-subtitle{font-size:.85rem}.readout{padding:8px 16px}.player{padding:12px}.player__input{width:80px}.player__narration{font-size:1rem}.player__speed-input{width:120px}}.view-nav{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.view-tab{color:#33414d;font:inherit;cursor:pointer;background:#fff;border:1px solid #cfd6dd;border-radius:999px;padding:8px 14px;font-size:.9rem}.view-tab--active{color:#1d5339;background:#e7f3ec;border-color:#2f6f4f;font-weight:600}.panel{background:#fbfcfd;border:1px solid #e2e7ec;border-radius:14px;flex-direction:column;gap:12px;padding:16px;display:flex}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.panel-title{margin:0;font-size:1.1rem}.panel-subtitle{color:#55636f;margin:0 0 6px;font-size:.9rem}.panel-body{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.panel-lead{margin:0;font-size:1rem}.panel-meta{color:#55636f;margin:0;font-size:.88rem}.panel-field{color:#55636f;flex-direction:column;gap:4px;font-size:.85rem;display:flex}.panel-input{width:140px;font:inherit;text-align:right;border:1px solid #cfd6dd;border-radius:10px;padding:10px 12px;font-size:1.2rem}.primary-button,.ghost-button,.link-button{font:inherit;cursor:pointer}.primary-button{color:#fff;background:#2f6f4f;border:none;border-radius:10px;padding:10px 18px;font-size:1rem}.primary-button:disabled{cursor:default;background:#b9c6bd}.ghost-button{color:#33414d;background:#fff;border:1px solid #cfd6dd;border-radius:10px;padding:10px 18px}.link-button{color:#2f6f4f;background:0 0;border:none;padding:4px;text-decoration:underline}.panel-actions{flex-wrap:wrap;gap:10px;display:flex}.panel-feedback{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.feedback{margin:0;font-size:1rem}.feedback--ok{color:#1d5339}.feedback--no{color:#a23b2c}.drill-expression{letter-spacing:.04em;margin:0;font-size:1.6rem}.anzan-stage{background:#eef3f6;border-radius:12px;justify-content:center;align-items:center;width:100%;min-height:96px;display:flex}.anzan-number{color:#23303a;font-size:3rem;font-weight:600}.anzan-idle{color:#7d8b96;font-size:1.2rem}.levels__grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;width:100%;display:grid}.level-chip{text-align:left;font:inherit;cursor:pointer;background:#fff;border:1px solid #cfd6dd;border-radius:10px;flex-direction:column;gap:2px;padding:10px;display:flex}.level-chip--active{background:#e7f3ec;border-color:#2f6f4f}.level-chip__number{font-size:.95rem;font-weight:600}.level-chip__focus{color:#55636f;font-size:.78rem}.calendar{width:100%}.calendar__grid{grid-template-columns:repeat(7,1fr);gap:4px;margin:0;padding:0;list-style:none;display:grid}.calendar__day{aspect-ratio:1;color:#7d8b96;background:#eef3f6;border-radius:6px;justify-content:center;align-items:center;font-size:.72rem;display:flex}.calendar__day--active{color:#fff;background:#2f6f4f;font-weight:600}.stats-table{border-collapse:collapse;width:100%;font-size:.9rem}.stats-table th,.stats-table td{text-align:right;border-bottom:1px solid #e2e7ec;padding:6px 8px}.stats-table thead th:first-child,.stats-table tbody th{text-align:left}