*{box-sizing:border-box}body{color:#1a1a2e;background:#f4f2ec;margin:0;font-family:Segoe UI,Hiragino Sans,Yu Gothic,system-ui,sans-serif}.app{flex-direction:column;align-items:center;gap:16px;max-width:420px;margin:0 auto;padding:24px 16px 48px;display:flex}.site-header{border-bottom:1px solid #ddd8c9;flex-direction:column;align-items:center;gap:2px;width:100%;padding-bottom:10px;display:flex}.site-name{letter-spacing:.08em;font-size:1.05rem;font-weight:700}.site-tagline{color:#6b6657;font-size:.8rem}h1{margin:0;font-size:1.4rem}.mode-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.btn{color:#1a1a2e;cursor:pointer;background:#fff;border:1px solid #b9b4a5;border-radius:8px;padding:8px 14px;font-size:.95rem}.btn:hover:not(:disabled){background:#eee9dd}.btn:disabled{opacity:.5;cursor:default}.btn-mode.active{color:#fff;background:#1a1a2e;border-color:#1a1a2e}.prompt{align-items:baseline;gap:12px;display:flex}.prompt-romaji{font-size:3rem;font-weight:700;line-height:1}.prompt-script{color:#6b6657;font-size:1rem}.drawpad{touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;aspect-ratio:1;background:#fff;border:2px solid #b9b4a5;border-radius:12px;width:min(300px,100vw - 32px);height:auto}.grid-line{stroke:#e8e4d8;stroke-width:1px}.ref-hint path{fill:#d8d3c4}.ref-answer path{fill:#7cc98a}.tool-row{gap:8px;display:flex}.quiz-error{color:#b3261e;margin:0}.feedback-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;min-height:40px;display:flex}.feedback{margin:0;font-size:1.05rem;font-weight:600}.feedback.muted{color:#6b6657;font-weight:400}.btn-next{color:#fff;background:#1a1a2e;border-color:#1a1a2e}.btn-next:hover:not(:disabled){background:#33334d}.stats{color:#6b6657;margin:0;font-size:.9rem}