:root{font-family:Avenir Next,Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#183b37;background:#f5f1e8;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #173f3a;--ink-soft: #4f6c67;--paper: #f5f1e8;--paper-deep: #e9e2d3;--card: rgba(255, 253, 248, .9);--terracotta: #d65a3a;--terracotta-dark: #a9432b;--gold: #e7b84b;--blue: #2f91a6;--green: #2c9a75;--red: #c84a45;--shadow: 0 18px 55px rgba(40, 55, 50, .1)}*{box-sizing:border-box}html{min-height:100%;background:var(--paper);-webkit-text-size-adjust:100%}body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;overscroll-behavior:none;background:radial-gradient(circle at 12% 8%,rgba(231,184,75,.18),transparent 28rem),radial-gradient(circle at 94% 80%,rgba(47,145,166,.12),transparent 32rem),var(--paper)}button,label{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible,.file-button:focus-within{outline:3px solid rgba(47,145,166,.45);outline-offset:3px}.shell{width:min(100%,780px);min-height:100svh;margin:0 auto;padding:calc(24px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}.brand-row,.study-header{display:flex;align-items:center;gap:14px}.brand-row{margin-bottom:30px}.brand-row>.icon-button{margin-left:auto}.brand-mark{display:grid;width:54px;height:54px;place-items:center;border-radius:17px;color:#fffaf0;background:var(--ink);box-shadow:0 9px 22px #173f3a33;font:600 29px/1 PingFang SC,Songti SC,serif}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(27px,4vw,35px);letter-spacing:-.035em}h2{margin-bottom:10px}h3{margin-bottom:6px;font-size:17px}p{line-height:1.55}.eyebrow{margin:0 0 3px;color:var(--terracotta-dark);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.muted{color:var(--ink-soft)}.notice{margin:-8px 0 22px;padding:13px 16px;border:1px solid rgba(44,154,117,.25);border-radius:14px}.success-notice{color:#14684d;background:#2c9a751a}.hero-card{position:relative;overflow:hidden;padding:clamp(28px,6vw,52px);border:1px solid rgba(23,63,58,.08);border-radius:30px;background:var(--card);box-shadow:var(--shadow)}.hero-card:after{position:absolute;top:-58px;right:-48px;width:210px;height:210px;border:38px solid rgba(214,90,58,.08);border-radius:50%;content:"";pointer-events:none}.due-number{margin:6px 0 -8px;color:var(--terracotta);font-size:clamp(76px,15vw,118px);font-weight:700;line-height:1;letter-spacing:-.08em}.hero-card h2{font-size:25px}.hero-card p{max-width:520px}.hero-card .large{margin-top:14px}.primary-button,.secondary-button,.text-button,.danger-button,.rating-button,.file-button{min-height:50px;border-radius:15px;border:0;padding:12px 21px;font-weight:700;cursor:pointer;touch-action:manipulation}.primary-button{color:#fff;background:var(--terracotta);box-shadow:0 8px 18px #d65a3a38}.primary-button:active{background:var(--terracotta-dark);transform:translateY(1px)}.primary-button:disabled{color:#8a928e;background:#dedbd2;box-shadow:none;cursor:default}.primary-button.large{min-width:min(100%,270px);min-height:58px;font-size:17px}.primary-button [lang]{margin-left:7px;font:600 23px PingFang SC,Songti SC,serif}.secondary-button,.file-button{color:var(--ink);background:#e3ded2}.text-button{color:var(--ink-soft);background:transparent}.danger-button{color:#fff;background:var(--red)}.icon-button{display:grid;flex:0 0 auto;width:48px;height:48px;place-items:center;border:0;border-radius:50%;color:var(--ink);background:#ffffff8c;font-size:24px;cursor:pointer}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.stats-grid article{display:flex;min-height:96px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(23,63,58,.08);border-radius:20px;background:#fffdf899}.stats-grid strong{font-size:28px}.stats-grid span{color:var(--ink-soft);font-size:13px}.policy-card{display:flex;gap:15px;align-items:flex-start;padding:20px;border-radius:20px;background:#173f3a0f}.policy-card p{margin-bottom:0;color:var(--ink-soft);font-size:14px}.policy-icon{display:grid;flex:0 0 auto;width:34px;height:34px;place-items:center;border-radius:50%;color:#fff;background:#a7aaa3;font-weight:700}.policy-icon.ready{background:var(--green)}.install-help{margin:18px 5px 0;color:var(--ink-soft);font-size:14px}.install-help summary{min-height:44px;padding-top:12px;color:var(--ink);font-weight:600;cursor:pointer}.study-screen{display:flex;width:min(100%,920px);min-height:100svh;margin:0 auto;padding:calc(15px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));flex-direction:column}.study-header{width:100%;max-width:720px;margin:0 auto 10px}.study-header.compact{margin-bottom:28px}.study-heading{flex:1;min-width:0;text-align:center}.study-heading h1{overflow:hidden;font-size:clamp(22px,4vw,31px);text-overflow:ellipsis;white-space:nowrap}.session-count{flex:0 0 48px;color:var(--ink-soft);text-align:right;font-size:14px;font-weight:600}.back-button{font-size:34px;font-weight:300}.progress-track{width:min(100%,720px);height:4px;margin:0 auto 12px;overflow:hidden;border-radius:3px;background:#173f3a1a}.progress-track span{display:block;height:100%;border-radius:inherit;background:var(--terracotta);transition:width .3s ease}.gesture-coach{display:flex;width:min(100%,720px);margin:0 auto 8px;padding:10px 12px 10px 15px;gap:14px;align-items:center;justify-content:space-between;border-radius:14px;color:var(--ink-soft);background:#2f91a61a;font-size:12px;line-height:1.4}.gesture-coach strong{color:var(--ink)}.gesture-coach button{min-height:34px;border:0;border-radius:10px;padding:5px 11px;color:var(--ink);background:#ffffffb3;font-weight:700}.practice-area{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center}.teaching-prompt{display:flex;min-height:76px;margin-bottom:5px;flex-wrap:wrap;gap:3px 10px;align-items:baseline;justify-content:center;color:var(--ink-soft)}.teaching-prompt>strong{color:var(--terracotta-dark);font-size:20px}.teaching-prompt>span{flex-basis:100%;text-align:center;font-size:14px}.teaching-character{color:var(--terracotta);font:600 clamp(32px,5vw,44px)/1.2 "PingFang SC","Songti SC",serif}.recall-prompt{display:flex;min-height:58px;max-width:min(100%,540px);margin-bottom:7px;flex-direction:column;align-items:center;justify-content:center;text-align:center}.recall-prompt small{margin-top:3px;color:var(--ink-soft);font-size:11px;font-weight:600}.recall-prompt strong{color:var(--terracotta-dark);font-size:24px;line-height:1.25}.recall-prompt span{display:-webkit-box;margin-top:2px;overflow:hidden;color:var(--ink-soft);font-size:14px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.canvas-frame{position:relative;width:min(100%,540px,calc(100svh - 265px));min-width:260px;aspect-ratio:1;overflow:hidden;border:1px solid rgba(23,63,58,.18);border-radius:24px;background:#fffdf8c2;box-shadow:0 12px 40px #2b3a3414}#hanzi-target{position:relative;z-index:2;width:100%;height:100%;touch-action:none}#hanzi-target svg,#hanzi-target canvas,#freewrite-canvas{display:block;width:100%;height:100%;touch-action:none}#freewrite-canvas{position:relative;z-index:2}.writing-grid{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(45deg,transparent calc(50% - .5px),rgba(23,63,58,.09) 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),rgba(23,63,58,.09) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),rgba(23,63,58,.1) 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),rgba(23,63,58,.1) 50%,transparent calc(50% + .5px))}.canvas-complete{border-color:#2c9a757a;animation:complete-glow .85s ease-out}@keyframes complete-glow{0%{box-shadow:0 0 #2c9a7561;transform:scale(.992)}55%{box-shadow:0 0 0 12px #2c9a7514}to{box-shadow:0 12px 40px #2b3a3414;transform:scale(1)}}.live-status{min-height:48px;padding:13px 16px 6px;color:var(--ink-soft);text-align:center;font-size:15px;font-weight:500}.live-status.is-correct{color:#1c785a}.live-status.is-mistake{color:var(--red)}.live-status.is-hint{color:var(--blue)}.trouble-note,.clean-note{margin:-5px 0 5px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700}.trouble-note{color:#8a651b;background:#e7b84b29}.clean-note{color:#1c785a;background:#2c9a751f}.study-actions{display:flex;width:min(100%,600px);min-height:62px;margin:8px auto 0;gap:10px;align-items:center;justify-content:center}.study-actions>button{flex:1;max-width:220px}.rating-intro{display:flex;width:100%;justify-content:space-between;gap:10px;color:var(--ink-soft);font-size:13px}.recommendation{color:var(--terracotta-dark);font-weight:700}.rating-grid{display:grid;width:100%;grid-template-columns:repeat(4,1fr);gap:8px}.rating-button{position:relative;display:flex;min-width:0;padding:10px 6px;flex-direction:column;color:var(--ink);background:#ffffffa6;border:1px solid rgba(23,63,58,.11)}.rating-button strong{font-size:14px}.rating-button span{margin-top:3px;color:var(--ink-soft);font-size:12px;font-weight:500}.rating-button.recommended{border:2px solid var(--terracotta);background:#d65a3a12}.rating-1 strong{color:var(--red)}.rating-2 strong{color:#9d7420}.rating-3 strong{color:#287d65}.rating-4 strong{color:#277e91}.automatic-grade{display:grid;width:min(100%,390px);min-height:68px;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 18px;padding:12px 18px;border:1px solid rgba(23,63,58,.1);border-radius:17px;color:var(--ink-soft);background:#ffffff9e;font-size:13px}.automatic-grade strong{grid-column:2;grid-row:1 / 3;font-size:20px}.automatic-grade .rating-1{color:var(--red)}.automatic-grade .rating-2{color:#9d7420}.automatic-grade .rating-3{color:#287d65}.automatic-grade .rating-4{color:#277e91}.advance-note{color:var(--ink-soft);font-size:12px}.canvas-actionable{cursor:pointer}.data-screen{width:min(100%,680px)}.data-card,.about-card{margin-bottom:16px;padding:25px;border:1px solid rgba(23,63,58,.08);border-radius:22px;background:var(--card)}.data-card .primary-button,.data-card .file-button{display:inline-grid;margin:8px 7px 0 0;place-items:center}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.preferences-card{padding-bottom:8px}.setting-row{display:grid;min-height:76px;grid-template-columns:1fr auto;gap:18px;align-items:center;border-top:1px solid rgba(23,63,58,.09);cursor:pointer}.setting-row>span{display:flex;min-width:0;flex-direction:column}.setting-row strong{font-size:15px}.setting-row small{margin-top:3px;color:var(--ink-soft);font-size:13px;line-height:1.4}.setting-row input{position:absolute;width:1px;height:1px;opacity:0}.toggle{position:relative;width:48px;height:29px;border-radius:20px;background:#c9c7bf;transition:background .16s ease}.toggle:after{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0000002e;content:"";transition:transform .16s ease}.setting-row input:checked+.toggle{background:var(--green)}.setting-row input:checked+.toggle:after{transform:translate(19px)}.setting-row input:focus-visible+.toggle{outline:3px solid rgba(47,145,166,.4);outline-offset:3px}.input-setting select{min-height:42px;max-width:155px;border:1px solid rgba(23,63,58,.16);border-radius:12px;padding:7px 30px 7px 11px;color:var(--ink);background:#ffffffb8;font-family:inherit;font-size:13px;font-weight:600}.input-setting select:focus-visible{outline:3px solid rgba(47,145,166,.4);outline-offset:2px}.diagnostic-list{display:grid;gap:8px;margin:14px 0}.diagnostic-row{display:grid;grid-template-columns:2.4rem 1fr minmax(9rem,auto);gap:10px;align-items:center}.diagnostic-row>span{font-size:1.5rem;text-align:center}.diagnostic-row small{color:var(--muted)}.diagnostic-row select{min-width:0}.danger-zone{margin-top:28px;border-color:#c84a4533}.about-card{display:grid;grid-template-columns:120px 1fr;gap:5px 15px;color:var(--ink-soft);font-size:14px;background:transparent}.about-card p{margin-bottom:8px}@media(max-width:520px){.shell{padding-left:16px;padding-right:16px}.hero-card{border-radius:24px}.stats-grid{gap:7px}.stats-grid article{min-height:82px}.stats-grid strong{font-size:23px}.policy-card{padding:17px}.study-screen{padding-left:12px;padding-right:12px}.study-header{gap:7px}.study-heading h1{font-size:21px}.canvas-frame{border-radius:18px}.study-actions{flex-wrap:wrap}.rating-intro{padding:0 4px}.rating-grid{gap:5px}.rating-button{min-height:55px;border-radius:12px}}@media(orientation:landscape)and (max-height:650px){.study-screen{display:grid;grid-template-columns:1fr minmax(280px,46vh) 1fr;grid-template-rows:auto 1fr;gap:8px 18px}.study-header{grid-column:1 / -1}.progress-track{display:none}.practice-area{grid-column:2;grid-row:2}.canvas-frame{width:min(46vh,420px)}.teaching-prompt{position:absolute;top:12px;left:18px;width:calc((100vw - 46vh)/2 - 44px)}.study-actions{grid-column:3;grid-row:2;align-self:center;flex-direction:column}.rating-intro{flex-direction:column}.rating-grid{grid-template-columns:repeat(2,minmax(90px,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.extra-study-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.daily-limit{display:flex;align-items:center;gap:12px;margin:14px 0 8px;font-weight:600}.daily-limit select{min-height:44px;padding:8px 16px;border:1px solid var(--ink-soft);border-radius:12px;font:inherit;color:var(--ink);background:var(--paper)}.offline-status{text-align:center;font-size:13px;color:var(--ink-soft)}.selection-screen .study-header{margin-bottom:24px}.selection-screen textarea{display:block;box-sizing:border-box;width:100%;margin-top:10px;padding:12px;border:1px solid rgba(23,63,58,.25);border-radius:12px;font:inherit;font-size:26px;color:var(--ink);background:#fffc}.selection-screen textarea::placeholder{font-size:16px}.character-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}.character-choice{min-height:48px;border:1px solid rgba(23,63,58,.16);border-radius:10px;background:#fff9;color:var(--ink);font-size:24px}.character-choice[aria-pressed=true]{background:var(--green);color:#fff}#selection-error{color:#9b302c;min-height:1.4em}.save-error{position:fixed;z-index:100;top:16px;left:50%;transform:translate(-50%);box-sizing:border-box;width:min(580px,calc(100% - 32px));padding:24px;display:flex;flex-wrap:wrap;gap:14px;border:2px solid #9b302c;border-radius:16px;background:#fff7ed;box-shadow:0 12px 80px #0005}.save-error strong,.save-error span{width:100%}.save-error button{min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid currentColor;background:#fff;font:inherit}