:root{--color-bg:#1a1a2e;--color-surface:#16213e;--color-accent:#e94560;--color-text:#f0f0f0;--color-text-muted:#a0a0b0;--color-border:#2a2a4a;--font-stack:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-stack);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;line-height:1.6}#root{min-height:100dvh}.app-shell{max-width:480px;min-height:100dvh;padding:env(safe-area-inset-top) var(--space-md) env(safe-area-inset-bottom);flex-direction:column;margin:0 auto;display:flex}.app-header{text-align:center;padding:var(--space-xl) 0 var(--space-lg)}.app-title{color:var(--color-accent);letter-spacing:-.02em;font-size:2rem;font-weight:700}.app-subtitle{color:var(--color-text-muted);margin-top:var(--space-xs);font-size:1rem}.app-main{justify-content:center;gap:var(--space-md);flex-direction:column;flex:1;display:flex}.smoke-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.smoke-card__heading{margin-bottom:var(--space-sm);font-size:1.25rem;font-weight:600}.smoke-card__body{color:var(--color-text-muted);font-size:.95rem}.app-footer{text-align:center;padding:var(--space-lg) 0 var(--space-md);color:var(--color-text-muted);font-size:.8rem}.app-footer__home-link,.char-page__home-link{margin-top:var(--space-md)}.char-page__home-link{width:100%}.onboarding-modal{z-index:50;padding:var(--space-md);background-color:#000000ad;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.onboarding-modal__panel{width:min(100%,720px);max-height:calc(100dvh - 2rem);padding:var(--space-lg);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:auto;box-shadow:0 24px 80px #00000059}.onboarding-modal__actions{margin-bottom:var(--space-lg);justify-content:flex-end;align-items:center;display:flex}.onboarding-modal__skip{min-height:44px;padding:var(--space-xs) var(--space-md);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;background-color:#0000}.onboarding-modal__writers{gap:var(--space-md);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.onboarding-modal__writers.is-mobile{justify-content:center;display:flex}.onboarding-writer{align-items:center;gap:var(--space-sm);flex-direction:column;min-width:0;display:flex}.onboarding-writer__pinyin{min-height:1.25rem;color:var(--color-text);font-size:.95rem;font-weight:700;line-height:1}.onboarding-writer__character{color:var(--color-accent);font-size:1.75rem;line-height:1}.onboarding-writer__surface{border-radius:var(--radius-md);background-color:#fbf6ec;border:1px solid #dfd4c1;justify-content:center;align-items:center;max-width:100%;display:flex;overflow:hidden}.onboarding-writer__mount{width:100%;height:100%}.onboarding-writer__status{min-height:1.25rem;color:var(--color-text-muted);font-size:.85rem}.onboarding-writer.is-complete .onboarding-writer__status{color:#8fe3a1}.onboarding-modal__progress{justify-content:center;gap:var(--space-sm);margin-top:var(--space-lg);display:flex}.onboarding-modal__dot{background-color:var(--color-border);border-radius:999px;width:.55rem;height:.55rem}.onboarding-modal__dot.is-active{background-color:var(--color-accent)}.onboarding-domain{flex-direction:column;justify-content:center;align-items:center;min-height:280px;animation:3s ease-in-out forwards onboarding-domain-float;display:flex}.onboarding-domain__name{width:min(100%,34rem);color:var(--color-text);letter-spacing:0;justify-content:center;align-items:baseline;font-size:clamp(2rem,9vw,4.5rem);font-weight:800;line-height:1;display:flex}.onboarding-domain__base{transform-origin:50%;justify-content:center;animation:2.4s ease-in-out forwards onboarding-domain-base;display:inline-flex}.onboarding-domain__part{animation:1.15s ease-in-out forwards onboarding-domain-part;display:inline-block}.onboarding-domain__part--xie{--part-start-x:-.8rem}.onboarding-domain__part--han{--part-start-x:0}.onboarding-domain__part--zi{--part-start-x:.8rem}.onboarding-domain__suffix{color:var(--color-accent);opacity:0;margin-left:-.04em;animation:1s ease-out 1.65s forwards onboarding-domain-suffix;transform:translate(.25rem)}@keyframes onboarding-domain-part{0%{opacity:0;transform:translateX(var(--part-start-x))}35%{opacity:1;transform:translateX(var(--part-start-x))}to{opacity:1;transform:translate(0)}}@keyframes onboarding-domain-base{0%{opacity:0;transform:translate(0)scale(.94)}45%{opacity:1;transform:translate(0)scale(1)}to{opacity:1;transform:translate(clamp(-1.7rem,-4vw,-.8rem))scale(1)}}@keyframes onboarding-domain-suffix{0%{opacity:0;transform:translate(.25rem)}to{opacity:1;transform:translate(0)}}@keyframes onboarding-domain-float{0%{opacity:0;transform:translateY(1rem)}18%,78%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.85rem)}}.char-page{max-width:480px;min-height:100dvh;padding:env(safe-area-inset-top) var(--space-md) env(safe-area-inset-bottom);flex-direction:column;align-items:center;margin:0 auto;display:flex}.char-page__loading,.char-page__error{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--color-text-muted)}.char-page__error{color:var(--color-accent)}.char-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;padding:var(--space-xl) var(--space-lg);text-align:center;margin-top:var(--space-lg)}.char-card__character{color:var(--color-text);margin-bottom:var(--space-md);font-size:clamp(120px,40vw,200px);font-weight:400;line-height:1}.char-card__pinyin{color:var(--color-accent);margin-bottom:var(--space-xs);font-size:1.75rem;font-weight:600}.char-card__meaning{color:var(--color-text);margin-bottom:var(--space-lg);font-size:1.1rem}.char-card__meta{gap:var(--space-sm);text-align:left;flex-direction:column;display:flex}.char-card__meta-row{padding:var(--space-xs) 0;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.char-card__meta-row:last-child{border-bottom:none}.char-card__meta-row dt{color:var(--color-text-muted);font-size:.9rem}.char-card__meta-row dd{color:var(--color-text);font-size:.95rem;font-weight:500}.char-page__actions{gap:var(--space-sm);width:100%;margin-top:var(--space-lg);flex-direction:column;display:flex}.btn{min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-lg);font-size:1rem;font-weight:600;font-family:var(--font-stack);border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;text-decoration:none;transition:opacity .15s;display:flex}.btn:active{opacity:.8}.btn--primary{background-color:var(--color-accent);color:#fff}.btn--secondary,.btn--save{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn--save:disabled{opacity:.6;cursor:default}.practice-page{max-width:480px;min-height:100dvh;padding:env(safe-area-inset-top) var(--space-md) env(safe-area-inset-bottom);flex-direction:column;align-items:center;margin:0 auto;display:flex}.practice-header{text-align:center;padding:var(--space-lg) 0 var(--space-sm)}.practice-char-display{color:var(--color-accent);font-size:2rem;font-weight:700;line-height:1}.practice-stroke-count{color:var(--color-text-muted);margin-top:var(--space-xs);font-size:.85rem}.practice-mode-toggle{gap:var(--space-xs);margin-bottom:var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:3px;display:flex}.practice-mode-btn{min-height:44px;padding:var(--space-xs) var(--space-lg);font-size:.95rem;font-weight:600;font-family:var(--font-stack);color:var(--color-text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;flex:1;transition:background-color .15s,color .15s}.practice-mode-btn.is-active{background-color:var(--color-accent);color:#fff}.practice-canvas-area{margin-bottom:var(--space-md);justify-content:center;align-items:center;display:flex;position:relative}.tianzige{pointer-events:none;z-index:0;position:absolute;top:0;left:0}.tianzige-border{fill:none;stroke:var(--color-border);stroke-width:2px;rx:4}.tianzige-line{stroke:var(--color-border);stroke-width:1px;stroke-dasharray:5 5;opacity:.6}.practice-canvas-wrapper{z-index:1;position:relative}.practice-writer-mount{justify-content:center;align-items:center;display:flex}.practice-animation,.practice-tracing{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.practice-controls{align-items:center;gap:var(--space-sm);flex-direction:column;width:100%;display:flex}.practice-btn{min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-xl);font-size:1rem;font-weight:600;font-family:var(--font-stack);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.practice-btn:active{opacity:.8}.practice-btn:disabled{opacity:.5;cursor:default}.practice-btn--primary{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.practice-speed-control{align-items:center;gap:var(--space-sm);justify-content:center;width:100%;display:flex}.practice-speed-label{color:var(--color-text-muted);font-size:.9rem}.practice-speed-buttons{gap:var(--space-xs);display:flex}.practice-btn--speed{min-height:36px;padding:var(--space-xs) var(--space-md);font-size:.85rem;font-weight:500}.practice-btn--speed.is-active{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.practice-reduced-motion-note{color:var(--color-text-muted);text-align:center;padding:var(--space-sm) var(--space-md);font-size:.9rem}.practice-hint-text{color:var(--color-text-muted);text-align:center;font-size:.85rem}.practice-quiz-feedback{text-align:center}.practice-progress-text{color:var(--color-text);font-size:1rem;font-weight:600}.practice-mistake-text{color:var(--color-accent);margin-top:var(--space-xs);font-size:.85rem}.practice-quiz-complete{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.practice-success-text{color:var(--color-accent);font-size:1.5rem;font-weight:700}.practice-complete-stats{color:var(--color-text-muted);font-size:.9rem}.practice-loading-text{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--color-text-muted)}.practice-unsupported{align-items:center;gap:var(--space-md);padding:var(--space-xl) var(--space-md);text-align:center;flex-direction:column;display:flex}.practice-unsupported-text{color:var(--color-text);max-width:280px;font-size:1rem}.practice-link{min-height:44px;padding:var(--space-xs) var(--space-md);font-size:.95rem;font-weight:500;font-family:var(--font-stack);color:var(--color-accent);border-radius:var(--radius-sm);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.practice-nav{gap:var(--space-lg);padding:var(--space-md) 0;display:flex}.scan-cta-section{align-items:center;gap:var(--space-md);padding:var(--space-xl) 0;flex-direction:column;display:flex}.scan-cta{padding:var(--space-lg) var(--space-xl);min-height:56px;font-size:1.25rem}.scan-file-input{opacity:0;clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.scan-preview{border-radius:var(--radius-md);border:1px solid var(--color-border);max-width:100%;max-height:240px;margin:0 auto var(--space-md);object-fit:contain;display:block}.scan-loading-section,.scan-preview-section,.scan-candidates-section,.scan-no-results-section,.scan-error-section{align-items:center;gap:var(--space-md);padding:var(--space-md) 0;flex-direction:column;display:flex}.scan-loading-text{color:var(--color-text-muted);text-align:center;font-size:1rem}.scan-candidates-heading{color:var(--color-text-muted);text-align:center;font-size:.95rem}.scan-preview-frame{border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-surface);max-width:100%;display:inline-block;position:relative;overflow:hidden}.scan-preview-image{object-fit:contain;-webkit-user-select:none;user-select:none;max-width:100%;max-height:360px;display:block}.scan-preview-actions{justify-content:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.scan-ocr-meta{max-width:32rem;color:var(--color-text-muted);text-align:center;margin:0;font-size:.85rem;line-height:1.5}.scan-low-confidence{max-width:32rem;padding:var(--space-sm) var(--space-md);color:#6d4b00;border-radius:var(--radius-md);text-align:center;background-color:#fff6d8;border:1px solid #ead28a;margin:0;font-size:.9rem;line-height:1.45}.scan-candidates{justify-content:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.scan-candidate{min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-lg);font-size:1.75rem;font-family:var(--font-stack);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;transition:background-color .15s,border-color .15s;display:flex}.scan-candidate:active{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.scan-no-results-text{color:var(--color-text);text-align:center;font-size:1rem}.scan-error-text{color:var(--color-accent);text-align:center;font-size:1rem}.scan-manual-section{padding:var(--space-lg) 0;border-top:1px solid var(--color-border)}.scan-manual-form{gap:var(--space-sm);flex-direction:column;display:flex}.scan-manual-label{color:var(--color-text-muted);font-size:.95rem}.scan-manual-row{gap:var(--space-sm);display:flex}.scan-manual-input{min-height:44px;padding:var(--space-sm) var(--space-md);font-size:1.25rem;font-family:var(--font-stack);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;flex:1;transition:border-color .15s}.scan-manual-input:focus{border-color:var(--color-accent)}.scan-manual-submit{min-height:44px;padding:var(--space-sm) var(--space-lg)}.scan-manual-error{color:var(--color-accent);font-size:.85rem}.scan-manual-status,.scan-manual-translation,.scan-manual-source,.scan-manual-dictionary-meta{color:var(--color-text-muted);margin:0;font-size:.85rem;line-height:1.45}.scan-manual-dictionary-meta{font-size:.8rem}.scan-manual-source{text-transform:uppercase;letter-spacing:.03em;font-size:.78rem}.scan-manual-results{gap:var(--space-sm);flex-direction:column;align-items:flex-start;display:flex}.scan-manual-results .scan-candidates{justify-content:flex-start}.scan-review-link{min-height:44px;padding:var(--space-xs) var(--space-md);font-size:.9rem;font-weight:500;font-family:var(--font-stack);color:var(--color-accent);border-radius:var(--radius-sm);margin-bottom:var(--space-xs);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.review-empty{align-items:center;gap:var(--space-lg);padding:var(--space-xl) 0;text-align:center;flex-direction:column;display:flex}.review-empty__text{color:var(--color-text-muted);max-width:280px;font-size:1rem}.review-list{gap:var(--space-md);flex-direction:column;padding:0;list-style:none;display:flex}.review-item{align-items:center;gap:var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);display:flex}.review-item__char{color:var(--color-text);text-align:center;flex-shrink:0;min-width:3rem;font-size:2.5rem;line-height:1}.review-item__actions{gap:var(--space-xs);flex-wrap:wrap;flex:1;justify-content:flex-end;display:flex}.review-item__btn{min-height:44px;padding:var(--space-xs) var(--space-md);font-size:.9rem}.review-home-link{margin-top:var(--space-md)}@media (min-width:768px){.app-shell{max-width:720px}.app-title{font-size:2.5rem}.char-page,.practice-page{max-width:600px}}