:root{--rice:#fbf7ee;--rice-deep:#f4e9d0;--paper:#fffdf7;--paper-warm:#fbf1df;--ink:#2d3d52;--ink-soft:#5c6b7e;--pencil:#a5a89f;--line:#2d3d5224;--line-soft:#2d3d5214;--jade:#8fbfa8;--jade-deep:#5b8e76;--jade-soft:#e1eee7;--sky:#9ec2d6;--sky-deep:#6b96ae;--sky-soft:#e3eef4;--blossom:#e8b7b1;--blossom-deep:#bf7e78;--blossom-soft:#f8e5e1;--amber:#e6bf7e;--amber-deep:#b58748;--amber-soft:#f7ebd0;--plum:#b19bb5;--plum-soft:#ece3ee;--shadow-paper:0 1px 0 #fff9 inset, 0 8px 24px #2d3d520f, 0 1px 0 #2d3d520a;--shadow-card:0 1px 0 #fff9 inset, 0 14px 36px #2d3d521a, 0 2px 0 #2d3d520f;--shadow-lift:0 22px 50px #2d3d5229, 0 6px 12px #2d3d5214;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:26px;--r-pill:999px;--font-display:"Newsreader", "Source Serif 4", "Times New Roman", serif;--font-body:"Nunito", "Plus Jakarta Sans", system-ui, sans-serif;--font-hand:"Caveat", "Kalam", cursive;--font-zh:"Noto Serif SC", "Songti SC", serif;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-soft:cubic-bezier(.16, 1, .3, 1);--ease-ink:cubic-bezier(.25, 1, .5, 1);--ease-bounce:cubic-bezier(.175, .885, .32, 1.275);--glass-blur-sm:8px;--glass-blur-md:16px;--glass-blur-lg:24px;--glass-bg:#fffdf7b8;--glass-border:#ffffff80;--glass-shadow:0 8px 32px #2d3d520d, 0 1px 0 #2d3d5208;--glass-rice:linear-gradient(135deg, #fffdf7c2 0%, #fbf7eead 50%, #fffdf7c7 100%);--grain-opacity:.42;--dur-fast:.15s;--dur-base:.22s;--dur-slow:.35s;--body-bg:radial-gradient(60% 50% at 8% 6%, #8fbfa838 0%, transparent 60%), radial-gradient(45% 40% at 95% 10%, #e8b7b12e 0%, transparent 65%), radial-gradient(55% 50% at 90% 95%, #9ec2d629 0%, transparent 65%), radial-gradient(40% 35% at 6% 95%, #e6bf7e29 0%, transparent 65%), linear-gradient(180deg, #fcf7ec 0%, #fbf7ee 60%, #f7efdf 100%)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}html{background:var(--rice)}body{font-family:var(--font-body);color:var(--ink);background:var(--body-bg);font-feature-settings:"ss01" on, "cv11" on;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh;overflow-x:hidden}:root[data-text-size=small] body{font-size:14px}:root[data-text-size=normal] body{font-size:16px}:root[data-text-size=large] body{font-size:18px}:root[data-reduce-motion=true] *,:root[data-reduce-motion=true] :before,:root[data-reduce-motion=true] :after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}body:before{content:"";pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:multiply;z-index:0;background-image:radial-gradient(#2d3d5212 .6px,#0000 1.1px),linear-gradient(#2d3d5206 1px,#0000 1px),linear-gradient(90deg,#2d3d5206 1px,#0000 1px);background-size:6px 6px,48px 48px,48px 48px;position:fixed;inset:0}:root[data-time-theme=morning]{--rice:#faf8f2;--rice-deep:#f5efe0;--paper:#fffefa;--paper-warm:#faf2e5;--ink:#2d3d52;--ink-soft:#5c6b7e;--line:#2d3d5224;--line-soft:#2d3d5214;--glass-bg:#fffefab8;--glass-border:#ffffff8c;--glass-shadow:0 8px 32px #2d3d520a;--body-bg:radial-gradient(60% 50% at 8% 6%, #8fbfa840 0%, transparent 60%), radial-gradient(45% 40% at 95% 10%, #e8b7b138 0%, transparent 65%), linear-gradient(180deg, #fffdf6 0%, #faf8f2 60%, #faf2e5 100%)}:root[data-time-theme=afternoon]{--rice:#f4f8fa;--rice-deep:#eaf0f4;--paper:#fcfdfe;--paper-warm:#eef4f8;--ink:#1e2d3e;--ink-soft:#4b5a6e;--line:#1e2d3e1f;--line-soft:#1e2d3e0f;--glass-bg:#fcfdfea6;--glass-border:#fff9;--glass-shadow:0 8px 32px #1e2d3e0d;--body-bg:radial-gradient(60% 50% at 10% 8%, #9ec2d64d 0%, transparent 65%), radial-gradient(55% 50% at 90% 95%, #8fbfa833 0%, transparent 60%), linear-gradient(180deg, #fcfdfe 0%, #f4f8fa 60%, #eaf0f4 100%)}:root[data-time-theme=evening]{--rice:#faf3e8;--rice-deep:#f4e5ce;--paper:#fffdf9;--paper-warm:#faf0df;--ink:#332a22;--ink-soft:#6e5d4f;--line:#6e5d4f26;--line-soft:#6e5d4f14;--glass-bg:#fffdf9ad;--glass-border:#ffffff80;--glass-shadow:0 8px 32px #6e5d4f0f;--body-bg:radial-gradient(65% 55% at 92% 12%, #e6bf7e52 0%, transparent 70%), radial-gradient(50% 40% at 6% 92%, #e8b7b147 0%, transparent 65%), linear-gradient(180deg, #fffdf9 0%, #faf3e8 60%, #f4e5ce 100%)}:root[data-time-theme=night]{--rice:#181f2a;--rice-deep:#10151e;--paper:#202938;--paper-warm:#263143;--ink:#f0f4f8;--ink-soft:#a0aec0;--line:#ffffff1f;--line-soft:#ffffff0f;--pencil:#718096;--sky-soft:#1a2935;--jade-soft:#1c2e25;--blossom-soft:#2e2221;--amber-soft:#2e2920;--glass-bg:#2029389e;--glass-border:#ffffff26;--glass-shadow:0 8px 32px #0003;--body-bg:radial-gradient(50% 45% at 50% 0%, #e6bf7e26 0%, transparent 65%), radial-gradient(60% 50% at 10% 90%, #2d3d5266 0%, transparent 65%), linear-gradient(180deg, #181f2a 0%, #10151e 100%)}:root[data-time-theme=night] .paper-warm{background:linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);border-color:#ffffff1a}:root[data-time-theme=night] body:before{opacity:.18;mix-blend-mode:overlay;background-image:radial-gradient(#ffffff0d .6px,#0000 1.1px),linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px)}:root[data-time-theme=night] .btn-soft{color:#f0f4f8;background:#202938;border-color:#ffffff26}:root[data-time-theme=night] .btn-soft:hover{background:#263143;border-color:#ffffff40}:root[data-time-theme=night] .chip{color:#a0aec0;background:#ffffff14;border-color:#ffffff26}:root[data-time-theme=night] .home-shell{background:#20293873!important;border-color:#ffffff26!important;box-shadow:0 16px 36px #0000004d,inset 0 1px #ffffff1a!important}:root[data-time-theme=night] .home-card{background:#202938!important;border-color:#ffffff14!important;box-shadow:inset 0 1px #ffffff0d,0 4px 12px #00000026!important}:root[data-time-theme=night] .home-card.card-warm{background:linear-gradient(#202938 0%,#263143 100%)!important}:root[data-time-theme=night] .home-card.card-accent-hour{background:linear-gradient(#202938 0%,#262e3b 100%)!important}:root[data-time-theme=night] .home-card.card-accent-hsk{background:linear-gradient(#202938 0%,#222c3b 100%)!important}:root[data-time-theme=night] .home-card.card-accent-jade{background:linear-gradient(#202938 0%,#1c2e25 100%)!important}:root[data-time-theme=night] .home-card.card-accent-sky{background:linear-gradient(#202938 0%,#1a2935 100%)!important}:root[data-time-theme=night] .home-card.card-accent-blossom{background:linear-gradient(#202938 0%,#2e2221 100%)!important}:root[data-time-theme=night] .home-card.card-accent-amber{background:linear-gradient(#202938 0%,#2e2920 100%)!important}:root[data-time-theme=night] .day-cell.day-empty{background:#1a2330!important;border-color:#ffffff26!important}:root[data-time-theme=night] .day-cell.day-today{border-color:var(--amber)!important;background:#33271a!important}:root[data-time-theme=night] .day-cell.day-done{border-color:var(--jade)!important;background:#162e22!important}.t-display{font-family:var(--font-display);letter-spacing:-.012em;font-weight:500}.t-display-i{font-family:var(--font-display);font-style:italic;font-weight:400}.t-hand{font-family:var(--font-hand);font-weight:500}.t-zh{font-family:var(--font-zh);font-weight:500}.t-mono-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" on}.playwrite-gb-j-resume{font-optical-sizing:auto;font-family:Playwrite GB J,cursive;font-style:normal;font-weight:400}h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);letter-spacing:-.012em;margin:0;font-weight:500}p{margin:0}button{color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}.paper{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;box-shadow:inset 0 1px #fff9,0 8px 24px #2d3d520d,0 1px #2d3d5208}.paper-warm{border:1px solid var(--line);border-radius:var(--r-lg);transition:background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;background:linear-gradient(#fffdf6 0%,#fbf1df 100%);box-shadow:inset 0 1px #fff9,0 8px 24px #2d3d520d,0 1px #2d3d5208}.washi{position:relative}.washi:before,.washi:after{content:"";background:var(--c,var(--jade-soft));opacity:.9;pointer-events:none;border:1px dashed #2d3d522e;border-radius:3px;width:56px;height:18px;position:absolute}.btn{border-radius:var(--r-pill);height:44px;font-family:var(--font-body);letter-spacing:.01em;cursor:pointer;transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease, background var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease;background:var(--paper);color:var(--ink);white-space:nowrap;border:1.5px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:14px;font-weight:700;display:inline-flex}.btn:hover{transform:translateY(-2px)scale(1.025)}.btn:active{transform:translateY(1px)scale(.96)}.btn-primary{background:var(--jade);color:#fffef8;border-color:var(--jade-deep);box-shadow:0 3px 0 var(--jade-deep), 0 8px 20px #5b8e7638, inset 0 1px 0 #ffffff4d}.btn-primary:hover{box-shadow:0 4px 0 var(--jade-deep), 0 12px 24px #5b8e7647, inset 0 1px 0 #fff6;background:#9cc9b3}.btn-primary:active{box-shadow:0 1px 0 var(--jade-deep), 0 4px 8px #5b8e7629}.btn-soft{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(120%);color:var(--ink);border-color:var(--glass-border);box-shadow:0 2px #2d3d520d,0 1px 2px #2d3d5208}.btn-soft:hover{background:#5b8e7614;border-color:#5b8e764d;box-shadow:0 3px #2d3d5214,0 4px 12px #2d3d520f}.btn-soft:active{box-shadow:0 1px #2d3d520a}.btn-ghost{color:var(--ink-soft);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--ink);background:#5b8e760f}.btn-icon{border-radius:var(--r-pill);background:var(--glass-bg);width:40px;height:40px;-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(120%);border:1px solid var(--glass-border);color:var(--ink);box-shadow:var(--glass-shadow);justify-content:center;align-items:center;padding:0;display:inline-flex}.btn-icon:hover{background:#5b8e7614;border-color:#5b8e764d}.chip{border-radius:var(--r-pill);background:var(--glass-bg);height:28px;-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(120%);color:var(--ink-soft);border:1px solid var(--glass-border);white-space:nowrap;transition:background var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-spring), color var(--dur-base) ease, transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) ease;cursor:pointer;align-items:center;gap:6px;padding:0 12px;font-size:12px;font-weight:700;display:inline-flex;box-shadow:0 1px 2px #2d3d5208}.chip:hover{color:var(--ink);background:#5b8e7614;border-color:#5b8e764d;transform:translateY(-1px)}.chip:active{transform:translateY(1px)scale(.96)}.chip.active{background:var(--jade-soft);color:var(--jade-deep);border-color:var(--jade-deep);transform:translateY(-1px);box-shadow:inset 0 1px #fff6,0 2px 6px #5b8e761f}.chip-jade{color:var(--jade-deep);-webkit-backdrop-filter:blur(var(--glass-blur-sm));background:#8fbfa826;border-color:#5b8e7640}.chip-sky{color:var(--sky-deep);-webkit-backdrop-filter:blur(var(--glass-blur-sm));background:#9ec2d626;border-color:#6b96ae40}.chip-amber{color:var(--amber-deep);-webkit-backdrop-filter:blur(var(--glass-blur-sm));background:#e6bf7e26;border-color:#b5874840}.chip-blossom{color:var(--blossom-deep);-webkit-backdrop-filter:blur(var(--glass-blur-sm));background:#e8b7b126;border-color:#bf7e7840}.chip-plum{color:#6f5677;-webkit-backdrop-filter:blur(var(--glass-blur-sm));background:#b19bb526;border-color:#6f567740}#root{min-height:100vh}.app-shell{grid-template-columns:232px 1fr;gap:28px;max-width:1180px;margin:0 auto;padding:24px 32px 240px;display:grid;position:relative}@media (width<=900px){.app-shell{grid-template-columns:1fr;gap:16px;padding:16px 16px 100px}.sidenav{display:none!important}}.app-main{min-width:0}.sidenav{background:var(--glass-bg);height:fit-content;-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(140%);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--glass-shadow);transition:background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;padding:22px 16px;position:sticky;top:24px}.sidenav-brand{border-bottom:1px dashed var(--line);align-items:center;gap:10px;margin-bottom:12px;padding:0 6px 18px;display:flex}.sidenav-brand .brand-mark{background:linear-gradient(135deg, var(--jade) 0%, var(--sky) 100%);color:#fffef8;width:36px;height:36px;font-family:var(--font-zh);border-radius:10px;place-items:center;font-size:18px;display:grid;box-shadow:inset 0 0 0 2px #ffffff80}.sidenav-brand .brand-name{font-family:var(--font-display);color:var(--ink);font-size:15px;font-weight:500;line-height:1.1}.sidenav-brand .brand-sub{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin-top:2px;font-size:10.5px}.nav-item{border-radius:var(--r-md);width:100%;color:var(--ink-soft);transition:background var(--dur-base) var(--ease-spring), transform var(--dur-fast) var(--ease-spring), color var(--dur-base) ease;text-align:left;white-space:nowrap;align-items:center;gap:12px;margin-bottom:2px;padding:10px 12px;font-size:13.5px;font-weight:600;display:flex}.nav-item:hover{color:var(--ink);background:#5b8e7614;transform:translate(3px)}.nav-item:active{transform:scale(.97)translate(1px)}.nav-item.active{background:var(--jade-soft);color:var(--jade-deep);box-shadow:inset 0 1px #fff6,0 2px 8px #5b8e7614}.nav-item .nav-icon{place-items:center;width:22px;height:22px;display:grid}.bottomnav{width:calc(100% - 32px);max-width:520px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--glass-rice);-webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(200%) brightness(1.06);outline-offset:-1px;z-index:999;border:1px solid #ffffff8c;border-bottom-color:#ffffff4d;border-radius:28px;outline:1px solid #2d3d5212;transition:box-shadow .3s;display:none;position:fixed;bottom:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 2px #ffffffb3,inset 0 -1px #ffffff4d,0 8px 32px #2d3d5224,0 2px 8px #2d3d5214,0 0 0 .5px #2d3d520d}@media (width<=900px){.bottomnav{justify-content:space-around;align-items:center;display:flex}}.bottomnav .nav-item{letter-spacing:-.01em;text-align:center;transition:background .22s var(--ease-spring), transform .18s var(--ease-spring), color .18s ease;color:var(--ink-soft);border-radius:18px;flex-direction:column;flex:1;align-items:center;gap:3px;margin:0;padding:7px 4px 6px;font-size:9.5px;font-weight:700;position:relative;overflow:hidden}.bottomnav .nav-item:hover{background:#5b8e7614;transform:translateY(-1px)}.bottomnav .nav-item:active{transform:scale(.93)translateY(0)}.bottomnav .nav-item.active{color:var(--jade-deep);background:linear-gradient(160deg,#e1eee7eb 0%,#d1e6dacc 100%);transform:translateY(-1.5px);box-shadow:inset 0 1px #fffc,0 2px 10px #5b8e762e,0 0 0 1px #5b8e7624}.bottomnav .nav-item.active .nav-icon{filter:drop-shadow(0 0 4px #5b8e7666)}@keyframes navTap{0%{transform:scale(1)translateY(-1.5px)}40%{transform:scale(.9)translateY(0)}70%{transform:scale(1.04)translateY(-2px)}to{transform:scale(1)translateY(-1.5px)}}.bottomnav .nav-item.active{animation:navTap .32s var(--ease-spring)}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.topbar-greeting{flex:auto;min-width:0}.topbar-greeting .hello{font-family:var(--font-display);letter-spacing:-.012em;color:var(--ink);text-wrap:balance;font-size:28px;font-weight:500;line-height:1.15}.topbar-greeting .hello em{color:var(--jade-deep);font-style:italic}.topbar-greeting .sub{color:var(--ink-soft);margin-top:4px;font-size:13px}.topbar-compact{gap:3px;display:grid}.topbar-compact .compact-date{font-optical-sizing:auto;color:var(--ink-soft);font-family:Playwrite GB J,cursive;font-size:15px;font-style:normal;font-weight:400}.topbar-compact .compact-title{font-size:26px;line-height:1.08}.topbar-compact .compact-title em{color:var(--jade-deep);font-style:italic}.topbar-compact .compact-sub{color:var(--ink-soft);font-size:13px}.topbar-stats{align-items:center;gap:10px;display:flex}.stat-pill{border-radius:var(--r-pill);background:var(--glass-bg);height:40px;-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(120%);border:1px solid var(--glass-border);color:var(--ink);box-shadow:var(--glass-shadow);transition:background var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-spring);align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:700;display:inline-flex}.stat-pill:hover{transform:translateY(-1px)}.stat-pill .stat-icon{font-size:14px}.stat-pill .stat-num{font-family:var(--font-display);font-weight:600}.screen{opacity:1}.screen[data-animate="1"]{animation:.28s ease-out both fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.hanzi-stage{aspect-ratio:1;border-radius:var(--r-xl);border:1px solid var(--line);width:100%;box-shadow:inset 0 0 0 1px #fff9, inset 0 -6px 14px #2d3d520a, var(--shadow-paper);background:linear-gradient(#fffdf6 0%,#faf1dc 100%);position:relative;overflow:hidden}.grid-mi{background-image:linear-gradient(#bf7e7852 1px,#0000 1px),linear-gradient(90deg,#bf7e7852 1px,#0000 1px),linear-gradient(45deg,#0000 49.7%,#bf7e7838 50%,#0000 50.3%),linear-gradient(-45deg,#0000 49.7%,#bf7e7838 50%,#0000 50.3%);background-position:50%,50%,0 0,0 0;background-size:50% 50%,50% 50%,100% 100%,100% 100%;border:1.5px solid #bf7e7880;border-radius:6px;position:absolute;inset:8%}.grid-tian .grid-mi{background-image:linear-gradient(#bf7e7852 1px,#0000 1px),linear-gradient(90deg,#bf7e7852 1px,#0000 1px)}.hanzi-svg,.hanzi-stage svg:not(.sparkle){position:absolute;inset:0;width:100%!important;height:100%!important}.guide-stroke{fill:#2d3d521a}.done-stroke{fill:var(--jade-deep);transition:fill .3s}.drawing-stroke{fill:var(--sky-deep)}@keyframes inkDrop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes modeFlash{0%{opacity:0}35%{opacity:1}to{opacity:.58}}.hanzi-stage{transition:box-shadow .35s}.hanzi-stage[data-mode=trace]{box-shadow:inset 0 0 0 1px #fff9, inset 0 -6px 14px #8fbfa81a, var(--shadow-paper)}.hanzi-stage[data-mode=ghost]{box-shadow:inset 0 0 0 1px #fff9, inset 0 -6px 14px #9ec2d629, var(--shadow-paper)}.hanzi-stage[data-mode=challenge]{box-shadow:inset 0 0 0 1px #fff9, inset 0 -6px 14px #e6bf7e33, var(--shadow-paper)}.sparkle{pointer-events:none;width:14px;height:14px;animation:1s ease-out forwards sparkleOut;position:absolute}@keyframes sparkleOut{0%{opacity:0;transform:scale(.3)rotate(0)}30%{opacity:1;transform:scale(1)rotate(45deg)}to{opacity:0;transform:scale(.6)translateY(-30px)rotate(120deg)}}@keyframes ghostCountdown{0%{opacity:0;transform:scale(1.4)}25%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.diary-spread{border:1px solid var(--line);background:linear-gradient(90deg,#fbf1df 0%,#f6e6cb 49%,#2d3d5229 49.6% 50.4%,#f6e6cb 50.8%,#fbf1df 100%);border-radius:6px 18px 18px 6px;padding:32px;position:relative;box-shadow:-4px 0 12px #2d3d521a,0 14px 36px #2d3d521f,inset 0 0 0 1px #ffffff80}.sticker{outline:2px solid var(--ink-soft);outline-offset:-10px;border:2px dashed #ffffffb3;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:relative;box-shadow:0 6px 16px #2d3d522e}.postcard{aspect-ratio:3/2;background:var(--paper);border:1px solid var(--line);border-radius:6px;position:relative;overflow:hidden;box-shadow:0 10px 28px #2d3d5226,inset 0 0 0 1px #fff9}.postcard-locked{filter:grayscale(.85)brightness(.96);opacity:.68}.postcard-progress-chip{border-radius:var(--r-pill);height:24px;color:var(--ink);background:#fffdf7e0;border:1px solid #fffdf7b8;align-items:center;padding:0 9px;font-size:11px;font-weight:800;display:inline-flex;position:absolute;bottom:8px;left:8px;box-shadow:0 4px 12px #2d3d5229}.collection-header{justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:14px;display:flex}.collection-title{min-width:0}.collection-tabs{flex:none;gap:8px;display:flex}.recognize-config{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:18px;display:grid}.recognize-modes{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.recognize-preview{border-radius:18px;padding:18px}.recognize-preview-char{aspect-ratio:1;background:var(--paper-warm);border:1px solid var(--line);font-family:var(--font-zh);color:var(--ink);border-radius:12px;place-items:center;font-size:28px;display:grid}.recognize-preview-row{border-top:1px dashed var(--line);color:var(--ink-soft);justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;font-size:13px;display:flex}.recognize-preview-row strong{color:var(--ink)}@media (width<=900px){.topbar{margin-bottom:12px}.topbar-compact .compact-title{font-size:23px}.collection-header{gap:12px;display:grid}.collection-tabs{scrollbar-width:none;margin:0 -16px;padding:2px 16px 8px;overflow-x:auto}.collection-tabs::-webkit-scrollbar{display:none}.diary-spread{padding:20px}.recognize-config,.recognize-modes{grid-template-columns:1fr}.writing-canvas-column{margin-bottom:12px}.writing-canvas-column .hanzi-stage{width:min(100%,100svh - 250px,72vw);max-width:none;height:min(100%,100svh - 250px,72vw);max-height:none;margin-inline:auto}}.flex{display:flex}.col{flex-direction:column}.center{justify-content:center;align-items:center}.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.scrollx{scrollbar-width:none;gap:12px;padding-bottom:6px;display:flex;overflow-x:auto}.scrollx::-webkit-scrollbar{display:none}.divider-dashed{border:0;border-top:1px dashed var(--line);margin:16px 0}.option-btn{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-paper);color:var(--ink);font-family:var(--font-body);cursor:pointer;transition:all .2s var(--ease-soft);justify-content:center;align-items:center;gap:8px;font-weight:600;display:flex}.option-btn:hover:not(:disabled){background:var(--paper-warm);box-shadow:var(--shadow-card);border-color:#2d3d524d;transform:translateY(-2px)}.option-btn:active:not(:disabled){transform:translateY(1px)}.option-btn:disabled{cursor:default}.option-btn.correct{font-weight:700;background:var(--jade-soft)!important;color:var(--jade-deep)!important;border-color:var(--jade-deep)!important;box-shadow:0 0 0 1px var(--jade-deep)!important}.option-btn.wrong{font-weight:700;background:var(--blossom-soft)!important;color:var(--blossom-deep)!important;border-color:var(--blossom-deep)!important;box-shadow:0 0 0 1px var(--blossom-deep)!important}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-3px)}}.hanzi-dissolve{animation:hanziDissolve 1.2s var(--ease-ink) forwards}@keyframes hanziDissolve{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}30%{filter:blur(1.5px)}to{opacity:0;filter:blur(10px);transform:translateY(-90px)scale(.8)}}.hanzi-particle{pointer-events:none;z-index:5;animation:1.2s cubic-bezier(.1,.8,.25,1) forwards particleFly;position:absolute}@keyframes particleFly{0%{opacity:1;transform:translate(0)rotate(0)scale(1)}80%{opacity:.8}to{transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0);opacity:0}}.completion-actions{justify-content:center;gap:10px;margin-top:18px;display:flex}@media (width<=480px){.completion-actions{flex-direction:column-reverse;align-items:stretch}.completion-actions .btn{justify-content:center;width:100%}}.overlay{-webkit-backdrop-filter:blur(var(--glass-blur-sm));backdrop-filter:blur(var(--glass-blur-sm));z-index:60;background:#2d3d5257;justify-content:center;align-items:center;padding:22px;animation:.2s fade;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.share-modal{border:1px solid var(--line);border-radius:var(--r-xl);width:min(1040px,100%);max-height:92vh;box-shadow:var(--shadow-lift);background:linear-gradient(#fffdf6,#fbf1df);padding:26px 28px;animation:.28s cubic-bezier(.2,.8,.3,1) rise;position:relative;overflow-y:auto}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}.close-x{background:var(--paper);border:1px solid var(--line);width:32px;height:32px;color:var(--ink-soft);z-index:2;border-radius:50%;font-size:13px;position:absolute;top:16px;right:18px}.close-x:hover{background:var(--rice-deep)}.sm-head h2{font-family:var(--font-display);font-size:24px;font-weight:600}.sm-head p{color:var(--ink-soft);max-width:560px;margin-top:4px;font-size:13.5px}.sm-body{grid-template-columns:1.8fr 1fr;align-items:start;gap:26px;margin-top:20px;display:grid}.canvas-wrap{border-radius:var(--r-md);box-shadow:var(--shadow-lift);background:var(--rice);position:relative;overflow:hidden}.canvas-wrap canvas{width:100%;height:auto;display:block}.canvas-wrap.busy canvas{filter:blur(1px)saturate(.9)}.render-veil{font-family:var(--font-hand);color:var(--ink-soft);background:#fbf7ee99;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:20px;display:flex;position:absolute;inset:0}.panda-mini{font-size:30px;animation:1s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-4px)rotate(4deg)}}.sm-controls{flex-direction:column;gap:16px;display:flex}.ctl{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}.ctl-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.ctl-row label{font-size:13.5px;font-weight:700}.ctl-label{margin-bottom:10px;font-size:13.5px;font-weight:700;display:block}.ctl-note{color:var(--ink-soft);margin-top:8px;font-size:11.5px;line-height:1.45}.name-input{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--rice);width:100%;color:var(--ink);margin-top:10px;padding:9px 12px;font-family:inherit;font-size:14px}.name-input:disabled{opacity:.45}.name-input:focus{border-color:var(--amber-deep);background:var(--paper);outline:none}.tg{border-radius:var(--r-pill);background:var(--rice-deep);border:1px solid var(--line);width:42px;height:24px;transition:background .18s;position:relative}.tg.on{background:var(--jade-deep);border-color:var(--jade-deep)}.tg-knob{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .18s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #2d3d524d}.tg.on .tg-knob{transform:translate(18px)}.cap-list{flex-direction:column;gap:7px;max-height:188px;display:flex;overflow-y:auto}.cap-chip{text-align:left;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--rice);flex-direction:column;align-items:flex-start;gap:1px;padding:8px 11px;transition:all .14s;display:flex}.cap-chip:hover{background:var(--paper);border-color:var(--amber)}.cap-chip.on{background:var(--amber-soft);border-color:var(--amber-deep)}.cap-zh{font-family:var(--font-zh);color:var(--ink);font-size:14px;line-height:1.3}.cap-au{font-family:var(--font-display);color:var(--ink-soft);font-size:11.5px;font-style:italic}.sm-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;display:flex}.btn-primary{border-radius:var(--r-pill);background:var(--jade-deep);color:#fff;min-height:44px;padding:13px 24px;font-size:14.5px;font-weight:800;box-shadow:0 6px 14px #5b8e7659}.btn-primary:hover{transform:translateY(-1px)}.btn-ghost{border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--ink);align-items:center;gap:7px;min-height:44px;padding:13px 22px;font-size:14px;font-weight:700;display:flex}.btn-ghost:hover{background:var(--rice-deep)}.share-hint{color:var(--ink-soft);font-size:12.5px;font-style:italic;font-family:var(--font-display);max-width:320px}@media (width<=760px){.sm-body{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.panda-mini{animation:none}}.hanzi-ink-bleed svg{filter:url(#ink-bleed)}:root[data-reduce-motion=true] .hanzi-ink-bleed svg{filter:none!important}@keyframes inkSettle{0%{filter:url(#ink-bleed)blur(.4px);opacity:.92}60%{filter:url(#ink-bleed)blur();opacity:1}to{filter:url(#ink-bleed);opacity:1}}.hanzi-ink-bleed.ink-settle svg{animation:inkSettle var(--dur-slow) var(--ease-ink) both}:root[data-reduce-motion=true] .hanzi-ink-bleed.ink-settle svg{animation:none!important}@keyframes plantWobbleHover{0%{transform:rotate(0)scale(1)}25%{transform:rotate(-6deg)scale(1.05,.95)}50%{transform:rotate(4deg)scale(.96,1.04)}75%{transform:rotate(-2deg)scale(1.01,.99)}to{transform:rotate(0)scale(1)}}@keyframes plantWobbleClick{0%{transform:scale(1)translateY(0)}30%{transform:scale(1.18,.8)translateY(6px)}55%{transform:scale(.88,1.12)translateY(-10px)}75%{transform:scale(1.04,.96)translateY(2px)}90%{transform:scale(.98,1.02)translateY(-1px)}to{transform:scale(1)translateY(0)}}@keyframes pandaHappyJump{0%,to{transform:translateY(0)scale(1)}25%{transform:translateY(6px)scale(1.15,.82)}50%{transform:translateY(-22px)scale(.88,1.15)}70%{transform:translateY(3px)scale(1.04,.96)}85%{transform:translateY(-1px)scale(.98,1.02)}}.garden-pot-cell:not(.locked):hover .plant-bob,.garden-detail-plant:hover .plant-bob{animation:.8s cubic-bezier(.25,.8,.25,1.25) both plantWobbleHover}.garden-pot-cell:not(.locked):active .plant-bob,.garden-detail-plant:active .plant-bob{animation:plantWobbleClick .6s var(--ease-bounce) both}.panda-bounce{animation:pandaHappyJump .75s var(--ease-bounce) both}@media (prefers-reduced-motion:reduce){.garden-pot-cell:not(.locked):hover .plant-bob,.garden-detail-plant:hover .plant-bob,.garden-pot-cell:not(.locked):active .plant-bob,.garden-detail-plant:active .plant-bob,.panda-bounce{animation:none!important;transform:none!important}}:root[data-reduce-motion=true] .garden-pot-cell:not(.locked):hover .plant-bob,:root[data-reduce-motion=true] .garden-detail-plant:hover .plant-bob,:root[data-reduce-motion=true] .garden-pot-cell:not(.locked):active .plant-bob,:root[data-reduce-motion=true] .garden-detail-plant:active .plant-bob,:root[data-reduce-motion=true] .panda-bounce{animation:none!important;transform:none!important}.class-setup-card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);animation:fadeUp .4s var(--ease-soft) both;padding:32px 28px;position:relative;overflow:hidden}.class-header{font-family:var(--font-display);text-align:center;margin-bottom:24px;font-weight:600;display:inline-block;position:relative;left:50%;transform:translate(-50%)}.class-header:after{content:"";background:var(--jade-soft);border-radius:var(--r-pill);z-index:-1;opacity:.65;width:100%;height:6px;position:absolute;bottom:-4px;left:0}.color-seal{cursor:pointer;transition:all .2s var(--ease-spring);border:2px solid #0000;justify-content:center;align-items:center;display:inline-flex;box-shadow:0 2px 4px #00000014}.color-seal:hover{transform:scale(1.2)rotate(4deg)}.color-seal.active{border-color:var(--ink);box-shadow:0 4px 8px #00000024, 0 0 0 2px var(--paper);transform:scale(1.25)rotate(-6deg)}.score-card{border-radius:var(--r-md);background:var(--paper);border:1.5px solid var(--line);box-shadow:var(--shadow-paper);transition:all .25s var(--ease-spring);align-items:center;gap:8px;padding:8px 16px;display:flex}.score-card.active{box-shadow:var(--shadow-card);transform:translateY(-2px)scale(1.05)}.timer-container{background:var(--line-soft);border-radius:var(--r-pill);width:100%;height:6px;margin-bottom:18px;position:relative;overflow:hidden}.timer-bar{background:linear-gradient(90deg, var(--jade) 0%, var(--sky) 100%);border-radius:var(--r-pill);height:100%;transition:width .1s linear}.timer-bar.warning{background:var(--blossom-deep);animation:1s infinite alternate glowPulse}.crown-indicator{font-size:16px;animation:1s cubic-bezier(.25,.8,.25,1) infinite alternate bounce;display:inline-block}.pop-correct{animation:springPop .5s var(--ease-bounce) both}.shake-wrong{animation:.5s ease-in-out both headShake}@keyframes springPop{0%{transform:scale(1)}30%{transform:scale(.9)}60%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes headShake{0%{transform:translate(0)}6.5%{transform:translate(-6px)rotateY(-9deg)}18.5%{transform:translate(5px)rotateY(7deg)}31.5%{transform:translate(-3px)rotateY(-5deg)}43.5%{transform:translate(2px)rotateY(3deg)}50%{transform:translate(0)}}@keyframes glowPulse{0%{box-shadow:0 0 4px #bf7e7866}to{box-shadow:0 0 12px #bf7e78cc}}.podium-container{justify-content:center;align-items:flex-end;gap:24px;max-width:500px;min-height:280px;margin:40px auto 24px;display:flex}.podium-column{animation:slideUp .6s var(--ease-soft) both;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.podium-block{border-radius:var(--r-md) var(--r-md) 0 0;width:100%;box-shadow:var(--shadow-card);transition:height .8s var(--ease-spring);border:2px solid #fff3;border-bottom:none;flex-direction:column;justify-content:center;align-items:center;padding:16px;display:flex;position:relative;overflow:hidden}.podium-block:before{content:"";pointer-events:none;background:linear-gradient(#ffffff26 0%,#0000 100%);height:35%;position:absolute;top:0;left:0;right:0}.podium-medal{filter:drop-shadow(0 4px 6px #0000001f);margin-bottom:8px;font-size:38px;animation:2s infinite alternate bounce}.podium-team-name{color:var(--paper);text-shadow:0 1.5px 3px #0000004d;text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:90%;font-size:16px;font-weight:700;overflow:hidden}.podium-team-score{font-family:var(--font-display);color:var(--paper);text-shadow:0 1.5px 3px #0000004d;margin-top:4px;font-size:20px;font-weight:600}.flower-confetti-canvas{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.browser-screen{max-width:960px;margin:0 auto;padding:8px 20px 48px}.browser-header{flex-direction:column;gap:14px;margin-bottom:20px;display:flex}.browser-brand{align-items:center;gap:14px;display:flex}.browser-brand-zh{font-family:var(--font-zh);color:var(--jade-deep);text-shadow:0 2px 8px #5b8e762e;font-size:42px;font-weight:700;line-height:1}.browser-title{font-family:var(--font-display);color:var(--ink);font-size:22px;font-weight:500}.browser-sub{color:var(--ink-soft);font-size:13px;font-style:italic;font-family:var(--font-display);margin-top:2px}.browser-search-wrap{align-items:center;display:flex;position:relative}.search-icon{color:var(--pencil);pointer-events:none;position:absolute;left:14px}.browser-search{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-pill);width:100%;color:var(--ink);padding:10px 40px;font-size:14px;transition:border-color .2s,box-shadow .2s}.browser-search:focus{border-color:var(--jade);box-shadow:0 0 0 3px #8fbfa82e}.browser-search::placeholder{color:var(--pencil)}.search-clear{color:var(--pencil);border-radius:var(--r-pill);background:0 0;padding:4px 6px;font-size:13px;position:absolute;right:12px}.search-clear:hover{color:var(--ink-soft)}.level-tabs{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.level-tab{border-radius:var(--r-pill);background:var(--paper);border:1.5px solid var(--line);color:var(--ink-soft);align-items:center;gap:6px;padding:7px 16px;font-size:13px;font-weight:600;transition:all .18s;display:flex}.level-tab:hover{border-color:var(--jade);color:var(--jade-deep)}.level-tab.active{background:var(--jade-soft);border-color:var(--jade);color:var(--jade-deep)}.level-tab.empty{opacity:.5}.tab-count{background:var(--line-soft);border-radius:var(--r-pill);color:var(--ink-soft);padding:1px 7px;font-size:11px}.level-tab.active .tab-count{color:var(--jade-deep);background:#5b8e7624}.word-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;display:grid}.word-card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);cursor:pointer;box-shadow:var(--shadow-card);padding:18px 16px 14px;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}.word-card:hover{border-color:var(--jade);transform:translateY(-2px);box-shadow:0 16px 40px #2d3d5221}.word-card:active{box-shadow:var(--shadow-card);transform:translateY(0)}.word-card.completed{border-color:var(--jade);background:linear-gradient(135deg, var(--paper) 0%, var(--jade-soft) 100%)}.wc-badge{background:var(--jade-deep);color:#fff;border-radius:var(--r-pill);padding:2px 7px;font-size:10px;font-weight:700;line-height:1.4;position:absolute;top:10px;right:10px}.wc-zh{font-family:var(--font-zh);color:var(--ink);margin-bottom:6px;font-size:32px;font-weight:500;line-height:1.1}.wc-pinyin{color:var(--sky-deep);margin-bottom:4px;font-size:12px;font-weight:600}.wc-meaning{color:var(--ink-soft);margin-bottom:3px;font-size:12px}.wc-hanviet{font-family:var(--font-display);color:var(--pencil);font-size:11px;font-style:italic}.empty-state{text-align:center;color:var(--ink-soft);flex-direction:column;grid-column:1/-1;align-items:center;gap:10px;padding:60px 20px;font-size:15px;display:flex}.empty-icon{font-size:36px}.empty-sub{color:var(--pencil);font-size:13px;font-family:var(--font-display);font-style:italic}.load-more-wrap{text-align:center;padding:28px 0 0}.btn-load-more{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-pill);color:var(--ink-soft);padding:10px 24px;font-size:14px;font-weight:600;transition:all .18s}.btn-load-more:hover{border-color:var(--jade);color:var(--jade-deep)}.writing-screen{flex-direction:column;min-height:100vh;display:flex}.writing-topbar{-webkit-backdrop-filter:blur(var(--glass-blur-md));backdrop-filter:blur(var(--glass-blur-md));border-bottom:1px solid var(--line-soft);z-index:10;background:#fffdf7d1;justify-content:space-between;align-items:center;padding:14px 20px;display:flex;position:sticky;top:0}.btn-back-nav{color:var(--ink-soft);border-radius:var(--r-md);background:0 0;align-items:center;gap:6px;padding:6px 10px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.btn-back-nav:hover{background:var(--jade-soft);color:var(--jade-deep)}.writing-topbar-word{align-items:center;gap:10px;display:flex}.wtb-zh{font-family:var(--font-zh);color:var(--ink);font-size:24px;font-weight:700}.wtb-level{background:var(--jade-soft);color:var(--jade-deep);border-radius:var(--r-pill);padding:3px 9px;font-size:11px;font-weight:700}.writing-topbar-xp{font-family:var(--font-display);color:var(--amber-deep);font-size:14px;font-style:italic;font-weight:500}.writing-layout{flex:1;grid-template-columns:260px 1fr 200px;align-items:start;gap:24px;width:100%;max-width:1100px;margin:0 auto;padding:24px 20px 40px;display:grid}.info-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);flex-direction:column;gap:6px;padding:24px 20px;display:flex}.info-zh{font-family:var(--font-zh);color:var(--ink);letter-spacing:.02em;font-size:56px;font-weight:700;line-height:1}.info-pinyin{color:var(--sky-deep);margin-top:2px;font-size:15px;font-weight:700}.info-hanviet{font-family:var(--font-display);color:var(--pencil);letter-spacing:.04em;font-size:13px;font-style:italic}.info-meaning{color:var(--ink-soft);margin-bottom:4px;font-size:14px}.btn-audio{background:var(--sky-soft);color:var(--sky-deep);border-radius:var(--r-md);align-items:center;gap:7px;width:fit-content;margin-bottom:8px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.btn-audio:hover{background:var(--sky);color:#fff}.info-chars-list{border-top:1px dashed var(--line);flex-direction:column;gap:6px;margin-top:4px;padding-top:12px;display:flex}.info-chars-label{color:var(--pencil);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-size:11px;font-weight:600}.info-char-row{border-radius:var(--r-md);border:1px solid #0000;align-items:center;gap:10px;padding:7px 10px;transition:all .2s;display:flex}.info-char-row.current{background:var(--amber-soft);border-color:var(--amber)}.info-char-row.done{background:var(--jade-soft);border-color:var(--jade-soft)}.icr-char{font-family:var(--font-zh);color:var(--ink);min-width:28px;font-size:24px;font-weight:500}.icr-pinyin{color:var(--ink-soft);flex:1;font-size:12px}.icr-done{color:var(--jade-deep);font-size:13px;font-weight:700}.writing-center{flex-direction:column;align-items:center;gap:18px;display:flex}.writing-center .canvas-wrap{aspect-ratio:1;width:min(100%,340px)}.hints-panel{flex-direction:column;gap:14px;display:flex;position:sticky;top:24px}.sub-tabs-nav{width:fit-content;box-shadow:var(--shadow-card);background:#e1eee76b;border:1px solid #8fbfa861;border-radius:999px;margin:0 auto 20px;padding:4px;display:flex}.sub-tabs-nav .sub-tab{height:34px;color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;padding:0 22px;font-size:13px;font-weight:700;transition:all .22s;display:inline-flex}.sub-tabs-nav .sub-tab.active{background:var(--jade-soft);color:var(--jade-deep);box-shadow:0 2px 8px #5b8e7629}.word-tray{width:100%;-webkit-backdrop-filter:blur(var(--glass-blur-md)) saturate(160%);border-radius:var(--r-xl);background:#e1eee76b;border:1.5px solid #8fbfa861;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 10px;display:flex;box-shadow:0 6px 24px #2d3d5212,inset 0 1px #ffffffb3}.tray-cells{flex:1;align-items:center;gap:8px;display:flex}.tray-cell{border-radius:var(--r-md);min-width:56px;transition:all .28s var(--ease-spring);border:2px solid #0000;flex-direction:column;align-items:center;gap:2px;padding:10px 12px 8px;display:flex;position:relative}.tray-cell.pending{background:#fffdf780;border-color:#2d3d5214}.tray-cell.active{border:2px dashed var(--amber);background:#e6bf7e2e;animation:2s ease-in-out infinite trayPulse}.tray-cell.done{background:var(--jade-soft);border-color:var(--jade);animation:trayPop .4s var(--ease-spring)}.tray-char{font-family:var(--font-zh);color:var(--ink);font-size:26px;font-weight:500;line-height:1;transition:color .2s}.tray-cell.pending .tray-char{color:var(--pencil)}.tray-cell.done .tray-char{color:var(--jade-deep)}.tray-cell.active .tray-char{color:var(--amber-deep)}.tray-pinyin{color:var(--pencil);height:14px;font-size:10px;font-weight:600}.tray-cell.active .tray-pinyin{color:var(--amber-deep)}.tray-cell.done .tray-pinyin{color:var(--jade-deep)}.tray-check-badge{background:var(--jade-deep);color:#fff;border-radius:var(--r-pill);border:2px solid var(--paper);padding:2px 5px;font-size:9px;font-weight:700;line-height:1.4;position:absolute;top:-6px;right:-6px}.tray-counter{font-family:var(--font-hand);color:var(--ink-soft);white-space:nowrap;padding-left:6px;font-size:15px}.canvas-wrap{border-radius:var(--r-xl);box-shadow:var(--shadow-card);border:1.5px solid var(--line);background:#fffdf7;overflow:hidden}.canvas-wrap.phase-completing{animation:canvasPop .36s var(--ease-spring)}.canvas-wrap.phase-transitioning{animation:.24s ease-in forwards canvasFadeOut}.canvas-controls{justify-content:space-between;align-items:center;gap:12px;width:100%;padding:0 4px;display:flex}.btn-hint-ctrl{background:var(--amber-soft);color:var(--amber-deep);border-radius:var(--r-md);align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.btn-hint-ctrl:hover{background:var(--amber);color:#fff}.mistake-counter{color:var(--pencil);font-size:13px;font-family:var(--font-display);font-style:italic}.canvas-overlay{border-radius:var(--r-xl);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.canvas-ghost-char{font-family:var(--font-zh);color:var(--jade-deep);opacity:.45;font-size:120px;line-height:1;animation:1.4s ease-in-out infinite ghostPulse}.btn-skip{background:var(--blossom-soft);color:var(--blossom-deep);border-radius:var(--r-pill);padding:8px 18px;font-size:13px;font-weight:600}.hints-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);text-align:center;flex-direction:column;align-items:center;gap:10px;padding:22px 18px;display:flex;position:sticky;top:80px}.hints-label{color:var(--pencil);text-transform:uppercase;letter-spacing:.1em;align-self:stretch;font-size:10px;font-weight:700}.hints-char-big{font-family:var(--font-zh);color:var(--ink);font-size:64px;font-weight:700;line-height:1}.hints-py{color:var(--sky-deep);font-size:16px;font-weight:700}.btn-animate{background:var(--jade-soft);color:var(--jade-deep);border-radius:var(--r-md);align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.btn-animate:hover{background:var(--jade);color:#fff}.hints-divider{background:var(--line-soft);width:100%;height:1px;margin:4px 0}.hints-progress-dots{align-items:center;gap:8px;margin:4px 0;display:flex}.prog-dot{background:var(--line);border:2px solid #0000;border-radius:50%;width:10px;height:10px;transition:all .25s}.prog-dot.active{background:var(--amber-soft);border-color:var(--amber);animation:2s ease-in-out infinite trayPulse}.prog-dot.done{background:var(--jade-deep);border-color:var(--jade-deep)}.hints-word-ref{flex-direction:column;gap:4px;padding-top:4px;display:flex}.hints-word-ref-zh{font-family:var(--font-zh);color:var(--ink-soft);font-size:22px}.hints-word-ref-vi{color:var(--pencil);font-size:12px}.complete-overlay{-webkit-backdrop-filter:blur(var(--glass-blur-sm));z-index:100;background:#2d3d5252;justify-content:center;align-items:center;animation:.25s ease-out overlayIn;display:flex;position:fixed;inset:0}.complete-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur-md)) saturate(140%);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--glass-shadow), var(--shadow-lift);text-align:center;width:calc(100% - 40px);max-width:360px;animation:cardIn .4s var(--ease-spring);flex-direction:column;align-items:center;gap:10px;padding:40px 36px 32px;display:flex}.complete-sparkles{color:var(--amber);align-items:center;gap:8px;height:28px;font-size:20px;display:flex}.complete-sparkles span{animation:.8s ease-in-out infinite alternate sparkle;display:inline-block}.complete-badge{background:var(--jade-soft);color:var(--jade-deep);border-radius:var(--r-pill);padding:5px 16px;font-size:13px;font-weight:700}.complete-word-zh{font-family:var(--font-zh);color:var(--ink);font-size:64px;font-weight:700;line-height:1}.complete-word-pinyin{color:var(--sky-deep);font-size:18px;font-weight:600}.complete-word-meaning{color:var(--ink-soft);font-size:15px}.complete-xp-row{align-items:baseline;gap:6px;display:flex}.complete-xp{font-family:var(--font-display);color:var(--amber-deep);font-size:48px;font-weight:500;line-height:1}.complete-xp-label{color:var(--amber-deep);font-size:18px;font-weight:700}.complete-sub{color:var(--pencil);font-size:13px;font-family:var(--font-display);font-style:italic}.complete-actions{flex-direction:column;gap:10px;width:100%;margin-top:6px;display:flex}@keyframes fadeInCanvas{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes canvasPop{0%{transform:scale(1)}40%{transform:scale(1.025)}to{transform:scale(1)}}@keyframes canvasFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.93)}}@keyframes trayPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes trayPulse{0%,to{box-shadow:0 0 #e6bf7e00}50%{box-shadow:0 0 0 4px #e6bf7e47}}@keyframes ghostPulse{0%,to{opacity:.18}50%{opacity:.32}}@keyframes sparkle{0%{transform:scale(1)rotate(-5deg)}to{transform:scale(1.3)rotate(10deg)}}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes cardIn{0%{opacity:0;transform:scale(.88)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@media (width<=820px){.writing-layout{padding:16px 16px calc(112px + env(safe-area-inset-bottom));grid-template-columns:1fr;gap:16px}.writing-layout>*{width:100%;min-width:0}.hints-panel{display:none}.info-panel{order:3;width:100%;min-width:0;padding:16px}.info-zh{font-size:40px}.writing-center{order:2;width:100%;min-width:0}.info-chars-list{display:none}}@media (width<=520px){.browser-screen{padding:16px 14px calc(112px + env(safe-area-inset-bottom))}.browser-brand-zh{font-size:34px}.browser-title{font-size:18px}.word-grid{grid-template-columns:repeat(2,1fr);gap:10px}.wc-zh{font-size:26px}.level-tabs{gap:6px}.level-tab{padding:6px 12px;font-size:12px}.writing-topbar{padding:10px 14px}.wtb-zh{font-size:20px}.tray-cell{min-width:46px;padding:8px 8px 6px}.tray-char{font-size:22px}.complete-card{padding:28px 24px 24px}.complete-word-zh{font-size:52px}.complete-xp{font-size:40px}}.app-class-fullscreen{background:var(--body-bg);z-index:1000;flex-direction:column;align-items:center;width:100vw;height:100vh;padding:32px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.class-setup-container{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);width:100%;max-width:860px;box-shadow:var(--shadow-card);animation:fadeUp .3s var(--ease-soft) both;flex-direction:column;margin:auto;padding:24px;display:flex;position:relative}.class-setup-header-row{border-bottom:1px dashed var(--line);justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;display:flex}.class-setup-grid{grid-template-columns:1.15fr .85fr;gap:24px;margin-bottom:20px;display:grid}.class-setup-column{flex-direction:column;display:flex}.class-play-container{width:100%;max-width:680px;animation:fadeUp .3s var(--ease-soft) both;flex-direction:column;justify-content:center;margin:auto;display:flex;position:relative}.class-result-container{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);width:100%;max-width:680px;box-shadow:var(--shadow-card);text-align:center;animation:fadeUp .35s var(--ease-soft) both;flex-direction:column;align-items:center;margin:auto;padding:24px 32px;display:flex;position:relative}@media (width<=767px){.class-setup-grid{grid-template-columns:1fr;gap:16px}.class-setup-container,.class-play-container,.class-result-container{padding:16px}}