:root{--bg: #fff8f0;--panel: #ffffff;--accent: #ff7043;--accent-dark: #e64a19;--success: #43a047;--text: #1a1a2e;--text-muted: #888;--border: #e4e4e4;--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px;--shadow-card: 0 4px 24px rgba(0, 0, 0, .07);--shadow-btn: 0 2px 10px rgba(0, 0, 0, .14);--header-h: 60px;--footer-h: 64px;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);font-family:Nunito,Segoe UI,sans-serif;color:var(--text);overflow:hidden;touch-action:manipulation;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:100%}#root{height:100dvh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;font-weight:700;transition:transform .1s ease,opacity .15s ease,box-shadow .15s ease}button:active{transform:scale(.94);opacity:.85}.setup-panel{display:flex;flex-direction:column;height:100dvh;max-width:780px;width:100%;margin:0 auto;padding:var(--safe-top) calc(20px + var(--safe-right)) var(--safe-bottom) calc(20px + var(--safe-left))}.setup-header{padding:28px 0 16px;text-align:center;flex-shrink:0}.setup-title{margin:0 0 6px;font-size:clamp(1.4rem,4vw,2rem)}.setup-subtitle{margin:0;color:var(--text-muted);font-size:.95rem}.setup-body{flex:1;overflow-y:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:20px;padding-bottom:12px}.setup-section{display:flex;flex-direction:column;gap:8px}.setup-label{font-weight:800;font-size:.95rem}.setup-textarea{font-family:Nunito,"Noto Serif SC",sans-serif;font-size:1.1rem;line-height:1.9;padding:14px 16px;border:2px solid var(--border);border-radius:var(--radius-md);resize:none;background:#fff;outline:none;transition:border-color .15s;user-select:text;-webkit-user-select:text;touch-action:auto}.setup-textarea:focus{border-color:var(--accent)}.setup-error{color:#e53935;font-size:.9rem;margin:0}.setup-hint{color:var(--text-muted);font-size:.83rem;margin:0;line-height:1.5}.setup-settings{background:#fff;border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:16px}.settings-title{margin:0 0 4px;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.settings-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.settings-label{font-size:.95rem;flex:1;min-width:140px}.toggle-btn{padding:7px 20px;border-radius:20px;font-size:.85rem;min-width:64px;min-height:36px}.toggle-btn.on{background:var(--success);color:#fff}.toggle-btn.off{background:#e0e0e0;color:#666}.settings-range{flex:1;accent-color:var(--accent);min-width:100px;touch-action:pan-x}.settings-range-val{font-weight:800;min-width:36px;text-align:right;font-size:.9rem}.color-swatches{display:flex;gap:10px;flex-wrap:wrap}.color-swatch{width:36px;height:36px;border-radius:50%;border:3px solid transparent;box-shadow:0 2px 6px #00000038;transition:transform .12s,border-color .12s;flex-shrink:0}.color-swatch.selected{border-color:var(--text);transform:scale(1.22)}.color-swatch:active{transform:scale(.9)}.pen-sizes{display:flex;gap:8px}.pen-size-btn{padding:8px 18px;border-radius:var(--radius-sm);background:#eee;color:var(--text);font-size:.9rem;min-height:40px}.pen-size-btn.selected{background:var(--accent);color:#fff}.setup-footer{padding:16px 0 28px;display:flex;justify-content:center;flex-shrink:0}.start-btn{background:var(--accent);color:#fff;padding:16px 52px;border-radius:40px;font-size:1.2rem;box-shadow:var(--shadow-btn);letter-spacing:.02em}.start-btn:hover{background:var(--accent-dark)}.practice-view{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.practice-header{height:calc(var(--header-h) + var(--safe-top));padding-top:var(--safe-top);display:flex;align-items:center;justify-content:space-between;padding-left:calc(20px + var(--safe-left));padding-right:calc(20px + var(--safe-right));background:#fff;border-bottom:2px solid var(--border);flex-shrink:0;gap:12px}.practice-main{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0;overflow:hidden}@media (orientation: portrait),(max-width: 640px){.practice-main{grid-template-columns:1fr;grid-template-rows:2fr 3fr}}.reference-panel{display:flex;align-items:center;justify-content:center;background:#fff;border-right:2px solid var(--border);padding:16px;overflow:hidden}@media (orientation: portrait),(max-width: 640px){.reference-panel{border-right:none;border-bottom:2px solid var(--border);padding:12px}}.canvas-panel{display:flex;align-items:center;justify-content:center;background:#f8f8f8;padding:16px;overflow-y:auto;padding-bottom:calc(16px + var(--safe-bottom))}@media (orientation: portrait),(max-width: 640px){.canvas-panel{align-items:flex-start;padding-bottom:calc(12px + var(--safe-bottom))}}.progress-dots{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap;overflow:hidden}.progress-dot{width:13px;height:13px;border-radius:50%;background:#ccc;border:2px solid transparent;flex-shrink:0;transition:background .2s,transform .2s}.progress-dot.done{background:var(--success)}.progress-dot.skipped{background:#aaa}.progress-dot.current{background:#2563eb;transform:scale(1.3);animation:dot-pulse 1.6s ease-in-out infinite}@keyframes dot-pulse{0%,to{box-shadow:0 0 #2563eb80}50%{box-shadow:0 0 0 6px #2563eb00}}.progress-label{font-size:.85rem;color:var(--text-muted);white-space:nowrap;margin-left:4px;font-weight:700}.reference-display{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);background:#fff;flex-shrink:0}.reference-pinyin{position:relative;z-index:1;font-size:clamp(.9rem,2.5vw,1.3rem);color:var(--text-muted);letter-spacing:.06em;margin-bottom:4px;font-weight:700}.reference-char{position:relative;z-index:1;line-height:1;font-weight:700;color:var(--text)}.reference-char.is-chinese{font-family:"Noto Serif SC",serif}.reference-char.is-latin{font-family:Nunito,sans-serif;font-weight:900}.canvas-wrapper{display:flex;flex-direction:column;align-items:center;gap:14px}.hanzi-border{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);flex-shrink:0}.latin-canvas-container{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);flex-shrink:0;background:#fff}.ghost-canvas,.locked-canvas,.draw-canvas{position:absolute;top:0;left:0;display:block}.ghost-canvas,.locked-canvas{pointer-events:none}.canvas-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;min-height:44px}.canvas-hint{margin:0;font-size:.95rem;color:var(--text-muted)}.latin-progress-text{font-weight:800;color:var(--text)}.mistake-count{color:#e53935;font-weight:700}.canvas-done{margin:0;font-size:1rem;font-weight:800;color:var(--success)}.btn-watch,.btn-try,.btn-clear,.btn-done,.btn-next,.btn-try-again,.btn-skip,.btn-fullscreen,.btn-speak{border-radius:var(--radius-md);font-size:1rem;min-height:44px;padding:10px 22px;min-width:80px;box-shadow:var(--shadow-btn)}.btn-speak{background:#e8f5e9;color:#1b5e20;min-width:44px;padding:10px 12px;font-size:1.15rem}.btn-watch{background:#e3f2fd;color:#1565c0}.btn-try{background:var(--accent);color:#fff}.btn-clear{background:#fce4ec;color:#c62828}.btn-done{background:var(--success);color:#fff}.btn-next{background:var(--accent);color:#fff}.btn-next-secondary{background:#eee;color:var(--text);box-shadow:none}.btn-try-again{background:#fff3e0;color:#e65100}.btn-skip{background:#eee;color:var(--text);box-shadow:none;min-width:unset}.btn-fullscreen{background:transparent;font-size:1.3rem;padding:8px 12px;min-width:unset;box-shadow:none;color:var(--text-muted)}.latin-result{display:flex;flex-direction:column;align-items:center;gap:8px}.latin-score-stars{display:flex;gap:6px}.latin-score-stars .star{font-size:2rem;line-height:1;transition:color .2s}.latin-score-label{margin:0;font-size:1rem;font-weight:800}.latin-score-label.good{color:var(--success)}.latin-score-label.needs-work{color:#e65100}.latin-result-actions{display:flex;gap:10px;margin-top:2px}.scoring-hint{animation:fade-pulse 1s ease-in-out infinite alternate}@keyframes fade-pulse{0%{opacity:.5}to{opacity:1}}.summary-view{display:flex;flex-direction:column;align-items:center;height:100dvh;padding:calc(32px + var(--safe-top)) calc(20px + var(--safe-right)) calc(40px + var(--safe-bottom)) calc(20px + var(--safe-left));gap:28px;overflow-y:auto;touch-action:pan-y}.summary-header{text-align:center}.summary-trophy{font-size:3.5rem;margin-bottom:8px;line-height:1}.summary-title{margin:0 0 8px;font-size:clamp(1.5rem,4vw,2.2rem)}.summary-subtitle{margin:0 0 8px;font-size:1rem;color:var(--text-muted)}.summary-stars-line{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:.9rem}.summary-session-stars{font-weight:800;color:var(--accent)}.summary-total-stars{color:var(--text-muted)}.summary-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:100%;max-width:680px}.summary-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:16px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:90px;transition:opacity .2s}.summary-card.skipped{opacity:.45}.summary-card-char{font-family:"Noto Serif SC",Nunito,sans-serif;font-size:2.4rem;line-height:1}.star-row{display:flex;gap:4px}.star{font-size:1.3rem;line-height:1}.star.filled{color:gold}.star.empty{color:#ddd}.summary-skipped-label{font-size:.8rem;color:var(--text-muted)}.summary-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.btn-practice-again,.btn-new-list{padding:14px 36px;border-radius:40px;font-size:1.1rem;box-shadow:var(--shadow-btn);min-height:52px}.btn-practice-again{background:var(--accent);color:#fff}.btn-new-list{background:#eee;color:var(--text)}@media (max-width: 640px){:root{--header-h: 52px;--footer-h: 56px}.practice-header{padding-left:calc(12px + var(--safe-left));padding-right:calc(12px + var(--safe-right))}.reference-panel,.canvas-panel{padding:8px}.canvas-wrapper{gap:10px}.canvas-controls{gap:8px}.setup-panel{padding-left:calc(14px + var(--safe-left));padding-right:calc(14px + var(--safe-right))}.setup-header{padding:16px 0 10px}.start-btn{width:100%;padding:16px 24px}.setup-footer{padding:12px 0 calc(16px + var(--safe-bottom))}}