:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{background:#f7efe1;min-height:100%}body{min-width:320px}#root{min-height:100dvh}*{box-sizing:border-box}:root{--paper:#f7efe1;--paper-2:#fffaf1;--ink:#211713;--muted:#765f50;--line:#58392633;--cinnabar:#a83d22;--cinnabar-dark:#762817;--jade:#557a65;--gold:#b48648;--shadow:0 24px 70px #3d23152e}body{min-height:100dvh;color:var(--ink);background:radial-gradient(circle at 20% 0,#b7401f38,#0000 28rem),radial-gradient(circle at 82% 18%,#43695133,#0000 24rem),linear-gradient(145deg,#ead8bd 0%,#f7efe1 42%,#e5d3b5 100%);margin:0;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body:before{content:"";pointer-events:none;opacity:.36;mix-blend-mode:multiply;background-image:linear-gradient(#5436240a 1px,#0000 1px),linear-gradient(90deg,#54362409 1px,#0000 1px);background-size:28px 28px;position:fixed;inset:0}button,input,select{font:inherit}button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fffaf1b8;border-radius:999px;padding:.78rem 1rem;transition:transform .15s,border-color .15s,background .15s;box-shadow:0 8px 24px #3f271814}button:hover{border-color:#a83d2273;transform:translateY(-1px)}button.primary{background:linear-gradient(180deg, #bc5130, var(--cinnabar));color:#fff9f2;border-color:#76281773}button.danger{color:#fff7f0;background:#5c241b}button.ghost{box-shadow:none;background:0 0}.appShell{width:min(100%,520px);min-height:100dvh;padding:18px 14px calc(104px + env(safe-area-inset-bottom,0px));margin:0 auto;position:relative}.screen{background:linear-gradient(180deg, #fffbf4f5, #f6ebd9f0), var(--paper);min-height:calc(100dvh - 136px);box-shadow:var(--shadow);border:1px solid #5f3f2938;border-radius:34px;align-content:start;gap:18px;padding:20px 20px 112px;display:grid;position:relative;overflow:hidden}h1,h2,h3{color:var(--ink);margin:0;line-height:1.04}h1,h2,.hanzi,.brushChar,.completionSeal,.miniCharacter span{font-family:Songti SC,STSong,Kaiti SC,Georgia,serif}h1{letter-spacing:-.08em;max-width:8ch;font-size:clamp(2.35rem,11vw,4.2rem)}h2{letter-spacing:-.04em;font-size:1.75rem}h3{font-size:1.05rem}p{color:var(--muted);margin:0;line-height:1.5}small,.eyebrow{color:#8a6043}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800}.sub{color:var(--muted)}.inkScene{pointer-events:none;opacity:.9;position:absolute;inset:0}.sun{background:#ae3a1f1f;border:1px solid #ae3a1f24;border-radius:50%;width:96px;height:96px;position:absolute;top:54px;right:44px}.mountain{clip-path:polygon(0 80%,18% 55%,32% 72%,48% 36%,66% 70%,80% 46%,100% 78%,100% 100%,0 100%);background:#2d3e3614;height:190px;position:absolute;bottom:48%;left:-10%;right:-10%}.m2{opacity:.7;bottom:43%;transform:scaleX(1.2)}.m3{opacity:.45;bottom:37%;transform:scaleX(1.45)}.brushChar{color:#2117130b;font-size:9rem;position:absolute;top:180px;right:-12px;transform:rotate(-8deg)}.homeHero{z-index:1;grid-template-columns:1fr auto;align-items:start;gap:18px;padding-top:10px;display:grid}.homeHero p{max-width:24rem;margin-top:12px}.ring{--value:0%;aspect-ratio:1;background:conic-gradient(var(--jade) var(--value), #557a6521 0);border-radius:50%;place-items:center;width:94px;padding:8px;display:grid}.ring>div{background:var(--paper-2);text-align:center;border-radius:50%;align-content:center;place-items:center;width:100%;height:100%;display:grid}.ring b{font-size:1.1rem}.ring span{color:var(--muted);font-size:.68rem;display:block}.dailyCard,.summaryHero{z-index:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffaf1c7;border:1px solid #5f3f2929;border-radius:28px;padding:18px;box-shadow:inset 0 1px #ffffffb3,0 18px 34px #3a231514}.dailyCard{justify-content:space-between;align-items:center;gap:16px;margin-top:24px;display:flex}.dailyCard h2{margin:4px 0}.miniCharacter{background:linear-gradient(#fffdf7,#f1dfc8);border:1px solid #5f3f2924;border-radius:26px;align-content:center;place-items:center;min-width:96px;height:112px;display:grid}.miniCharacter span{font-size:3.5rem;line-height:1}.miniCharacter small{color:var(--cinnabar);font-weight:800}.metricRow{z-index:1;grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.metricRow div{background:#fffaf19e;border:1px solid #5f3f2924;border-radius:20px;padding:12px}.metricRow small,.metricRow b{display:block}.metricRow b{font-size:1.45rem}.actionStack{z-index:1;grid-template-columns:1fr 1fr;gap:10px;display:grid}.actionStack .brushButton{grid-column:1/-1;padding:1rem;font-size:1.05rem}.screenTop,.studyTop{z-index:1;justify-content:space-between;align-items:flex-start;gap:12px;display:flex;position:relative}.studyTop{align-items:center}.studyTop div{text-align:center;display:grid}.studyTop span{color:var(--muted);font-size:.86rem}.familyTabs{grid-template-columns:1fr 1fr;gap:10px;display:grid}.familyTabs button{text-align:left;border-radius:22px;gap:4px;display:grid}.familyTabs button.active{background:#fffaf1f5;border-color:#a83d228c;box-shadow:inset 0 0 0 1px #a83d221a}.familyTabs span{color:var(--muted);font-size:.8rem;line-height:1.35}.lessonList{gap:12px;display:grid}.lessonTile{text-align:left;background:#fffbf4b8;border-radius:26px;grid-template-columns:auto 1fr;gap:12px;display:grid}.lessonTile.selected{background:#f1f8efb8;border-color:#557a65a6}.lessonTile.locked{opacity:.72}.lessonSeal{width:44px;height:44px;color:var(--cinnabar);background:#ede0cd;border-radius:50%;place-items:center;font-weight:900;display:grid}.lessonCopy{gap:5px;display:grid}.lessonCopy>div:first-child{justify-content:space-between;gap:8px;display:flex}.lessonCopy p,.lessonCopy span{font-size:.86rem}.lessonBar{background:#557a6524;border-radius:999px;height:7px;overflow:hidden}.lessonBar i{background:linear-gradient(90deg, var(--jade), #7f9e72);border-radius:inherit;height:100%;display:block}.studyScreen{min-height:calc(100dvh - 136px)}.flashcard{text-align:center;background:linear-gradient(#fffdf7,#f2e4d0);border:1px solid #5f3f2929;border-radius:34px;align-content:center;justify-items:center;min-height:430px;padding:18px;display:grid;box-shadow:inset 0 1px #ffffffe6,0 20px 48px #432b1b1a}.strokeRow{opacity:.18;gap:8px;margin-bottom:10px;display:flex}.strokeRow span{border:1px solid;place-items:center;width:28px;height:28px;font-family:Songti SC,serif;display:grid}.hanzi{letter-spacing:-.08em;font-size:clamp(7rem,35vw,11rem);line-height:.95}.smallHanzi{font-size:4rem}.pinyin{color:var(--cinnabar);letter-spacing:.04em;font-size:1.18rem;font-weight:800}.answerPanel{gap:14px;width:100%;display:grid}.defs{color:var(--ink);gap:6px;font-size:1.08rem;display:grid}.promptDef{font-size:1.6rem}.exampleBox{background:#fffaf1cc;border:1px solid #5f3f2921;border-radius:22px;gap:4px;padding:14px;display:grid}.exampleBox b{font-size:1.15rem}.exampleBox span{color:var(--cinnabar)}.revealButton{padding:1rem}.grades{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.grades button{border-radius:20px;gap:2px;padding:.7rem .35rem;display:grid}.grades small{font-size:.68rem}.again{background:#f3d9d0}.hard{background:#f2e0bd}.good{background:#dfe9d9}.easy{background:#d5eadf}.cardMeta{color:var(--muted);text-align:center;font-size:.86rem}.emptyState{text-align:center;align-content:center;place-items:center;gap:12px;min-height:420px;display:grid}.completionSeal{width:82px;height:82px;color:var(--cinnabar);background:#a83d221c;border:1px solid #a83d222e;border-radius:50%;place-items:center;font-size:3rem;display:grid}.summaryHero{grid-template-columns:auto 1fr 1fr;align-items:center;gap:14px;display:grid}.summaryHero b{font-size:2rem;display:block}.summaryHero span{color:var(--muted);font-size:.82rem}.problemList{gap:10px;display:grid}.problemRow{background:#fffaf19e;border:1px solid #5f3f291f;border-radius:18px;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:12px;display:grid}.problemRow b{font-family:Songti SC,serif;font-size:1.5rem}.problemRow p{text-align:right;font-size:.88rem}.settingsScreen label{color:var(--muted);gap:6px;display:grid}.settingsScreen input,.settingsScreen select{width:100%;color:var(--ink);background:#fffaf1c7;border:1px solid #5f3f292e;border-radius:16px;padding:.75rem}.settingsScreen .checkRow{grid-template-columns:auto 1fr;align-items:center}.settingsScreen .checkRow input{width:auto}.dock{left:50%;bottom:max(14px, env(safe-area-inset-bottom,0px));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:10;background:#2c1f18b8;border-radius:999px;grid-template-columns:repeat(4,1fr);gap:6px;width:min(492px,100% - 28px);padding:8px;display:grid;position:fixed;transform:translate(-50%);box-shadow:0 18px 48px #00000038}.dock button{color:#fff9f0b8;box-shadow:none;background:0 0;border-color:#0000;border-radius:999px;padding:.72rem .4rem}.dock button.active{color:#fff9f0;background:#fff9f029}@media (width>=760px){.appShell{width:min(100%,1120px);padding:32px 28px 120px}.screen{width:min(100%,520px);min-height:820px;margin:0 auto}.appShell:before{content:"HanLoop";color:#2117130b;letter-spacing:-.08em;font-family:Songti SC,Georgia,serif;font-size:clamp(5rem,12vw,11rem);position:fixed;top:9vh;left:5vw}}@media (width<=390px){.appShell{padding-inline:10px}.screen{border-radius:28px;padding:16px 16px 104px}.homeHero{grid-template-columns:1fr}.ring{width:76px}.dailyCard{margin-top:12px}.grades{grid-template-columns:repeat(2,1fr)}.actionStack{grid-template-columns:1fr}}.studyScreen .dock button.active{background:0 0}