:root{color:#24211d;font-synthesis:none;text-rendering:optimizelegibility;--ink:#24211d;--muted:#726b61;--paper:#fffdf8;--cream:#f5efe4;--line:#ddd4c6;--red:#c64b40;--red-dark:#9d352d;--green:#16775b;--green-dark:#0d5b44;--gold:#e4a93d;background:#f5efe4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{background:radial-gradient(circle at 8% 4%, #e4a93d26, transparent 30%), linear-gradient(180deg, #fffaf0 0%, var(--cream) 100%);min-width:320px;min-height:100dvh;margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #2f79bf}.app-shell{width:100%;max-width:620px;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:14px;margin:0 auto;display:flex}.topbar,.stroke-header,.settings-header{justify-content:space-between;align-items:center;display:flex}.topbar h1,.stroke-header h2,.settings-header h2{margin:0;font-family:Georgia,Times New Roman,serif;line-height:1}.topbar h1{letter-spacing:-.04em;font-size:clamp(2rem,8vw,3rem)}.eyebrow{color:var(--red);letter-spacing:.16em;text-transform:uppercase;margin:0 0 4px;font-size:.72rem;font-weight:800}.icon-button{width:48px;height:48px;color:var(--ink);background:var(--paper);border:1px solid var(--line);cursor:pointer;border-radius:50%;place-items:center;padding:11px;display:grid;box-shadow:0 5px 18px #41301d14}.icon-button svg,.tool-button svg,.secondary-button svg,.next-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px}.practice-card{background:var(--paper);border:1px solid var(--line);border-radius:30px;flex:1;grid-template-rows:auto minmax(0,1fr) 52px auto;place-items:center;min-height:0;padding:14px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 55px #4e3a201f}.practice-card:before{content:"";pointer-events:none;border:1px solid #c64b401c;border-radius:22px;position:absolute;inset:10px}.prompt-label{color:var(--muted);letter-spacing:.05em;font-size:.82rem;font-weight:700}.character{text-align:center;color:#111;-webkit-user-select:none;user-select:none;width:100%;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:clamp(9rem,56vw,20rem);font-weight:500;line-height:.92}.answer-space{place-items:center;height:52px;display:grid}.answer{align-items:baseline;gap:10px;display:flex}.answer-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700}.answer strong{color:var(--red-dark);font-family:Georgia,serif;font-size:2rem}.learning-tools{grid-template-columns:1fr 1fr;align-items:center;width:100%;display:grid}.tool-button{min-height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:8px;padding:8px 14px;font-weight:700;display:flex}.tool-button svg{width:20px}.audio-error{color:var(--red-dark);text-align:center;grid-column:1/-1;margin:2px 0 0;font-size:.72rem;font-weight:700}.controls{grid-template-columns:1fr 1fr;gap:12px;min-height:76px;display:grid}.answer-button,.next-button{color:#fff;cursor:pointer;border:0;border-radius:20px;justify-content:center;align-items:center;gap:10px;min-height:76px;padding:12px 13px;transition:transform .15s,filter .15s;display:flex;box-shadow:0 9px 20px #27211929}.answer-button:active,.next-button:active{transform:scale(.97)}.answer-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:31px;height:31px}.answer-button span{flex-direction:column;align-items:flex-start;display:flex}.answer-button strong{font-size:1rem}.answer-button small{opacity:.78;font-size:.7rem}.unsure-button{background:linear-gradient(145deg, #d66459, var(--red-dark))}.confident-button{background:linear-gradient(145deg, #21896a, var(--green-dark))}.next-button{background:var(--green);grid-column:1/-1;font-size:1.05rem;font-weight:800}.next-button svg{width:22px}.progress-note{color:var(--muted);text-align:center;margin:-4px 0 0;font-size:.76rem}.modal-backdrop,.stroke-overlay{z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#24211d8c;justify-content:center;align-items:flex-end;padding:18px;display:flex;position:fixed;inset:0}.stroke-overlay{z-index:20;align-items:center}.settings-panel,.stroke-panel{background:var(--paper);border-radius:28px;width:min(100%,570px);padding:22px;box-shadow:0 22px 70px #00000040}.settings-panel{max-height:calc(100dvh - 36px);overflow-y:auto}.stroke-panel{max-height:calc(100dvh - 36px);overflow:auto}.settings-header h2,.stroke-header h2{font-size:2rem}.series-field{border:0;margin:24px 0 0;padding:0}.series-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.series-heading>span{font-weight:800}.text-button{color:var(--green-dark);cursor:pointer;background:0 0;border:0;padding:7px 10px;font-size:.78rem;font-weight:800}.series-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.series-option{border:1px solid var(--line);cursor:pointer;background:#f8f3e9;border-radius:13px;align-items:center;gap:9px;min-width:0;padding:10px;display:flex}.series-option:has(input:checked){background:#edf7f2;border-color:#8dbdab}.series-option input{width:20px;height:20px;accent-color:var(--green);flex:none}.series-option input:disabled{opacity:.65}.series-option span{gap:1px;min-width:0;display:grid}.series-option strong{font-size:.82rem}.series-option small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.series-help{color:var(--muted);margin-top:9px;line-height:1.4;display:block}.setting-copy{background:#f5efe4;border-radius:18px;margin:20px 0;padding:18px}.setting-copy p,.confirm-box p{color:var(--muted);margin:6px 0 0;line-height:1.5}.danger-button,.secondary-button{cursor:pointer;border-radius:14px;min-height:48px;padding:10px 18px;font-weight:800}.danger-button{color:var(--red-dark);background:0 0;border:1px solid #d8a29d}.danger-button.solid{color:#fff;background:var(--red-dark);border-color:var(--red-dark)}.secondary-button{color:var(--ink);border:1px solid var(--line);background:#fff}.confirm-box{background:#fff1ef;border-radius:18px;padding:17px}.confirm-actions{gap:10px;margin-top:16px;display:flex}.stroke-canvas{aspect-ratio:1;border:1px solid var(--line);background-color:#fff;background-image:linear-gradient(#eee8dd 1px,#0000 1px),linear-gradient(90deg,#eee8dd 1px,#0000 1px);background-size:50% 50%;border-radius:22px;place-items:center;width:100%;margin:18px 0 14px;display:grid;overflow:hidden}.stroke-canvas svg{width:94%;height:94%}.stroke-line{fill:none;stroke:#171512;stroke-width:4.2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100px;opacity:0;animation:1.05s linear forwards draw-stroke}@keyframes draw-stroke{0%{stroke-dashoffset:100px;opacity:1}to{stroke-dashoffset:0;opacity:1}}.stroke-status{color:var(--muted);text-align:center;font-weight:700}.stroke-status.error{color:var(--red-dark)}.drawing-note{color:var(--muted);text-align:center;margin:-4px 0 12px;font-size:.78rem;font-weight:700}.replay-button{justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.replay-button:disabled{opacity:.45;cursor:not-allowed}.attribution{color:var(--muted);text-align:center;margin:14px 0 0;font-size:.68rem}.attribution a{color:inherit}.answer-enter-active,.answer-leave-active,.modal-enter-active,.modal-leave-active{transition:opacity .18s,transform .18s}.answer-enter-from,.answer-leave-to{opacity:0;transform:translateY(6px)}.modal-enter-from,.modal-leave-to{opacity:0}@media (height>=800px){.app-shell{gap:18px}.practice-card{padding:20px}}@media (height<=650px){.app-shell{gap:8px;padding-top:9px;padding-bottom:9px}.topbar h1{font-size:1.75rem}.topbar .eyebrow,.progress-note{display:none}.icon-button{width:42px;height:42px}.practice-card{border-radius:24px;grid-template-rows:auto minmax(0,1fr) 42px auto}.character{font-size:clamp(7rem,48vw,14rem)}.answer-space{height:42px}.answer strong{font-size:1.6rem}.controls,.answer-button,.next-button{min-height:62px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}