:root{--tang-paper: #F9F7F2;--tang-paper-dark: #E5E0D6;--bg-canvas: var(--tang-paper);--bg-surface: #FFFFFF;--card-bg: #FFFEFA;--card-bg-elevated: #FAFAF6;--hsk-ink: #2B2B2B;--hsk-ink-light: #4B5563;--hsk-ink-muted: rgba(43, 43, 43, .6);--hsk-ink-faint: #9CA3AF;--tang-red: #A93226;--tang-red-dark: #8B2820;--tang-red-light: #FEF2F2;--tang-red-glow: rgba(153, 27, 27, .3);--hsk-jade: #065F46;--hsk-jade-light: #10B981;--hsk-jade-dark: #064E3B;--hsk-jade-10: rgba(6, 95, 70, .08);--hsk-jade-20: rgba(6, 95, 70, .15);--hsk-gold: #FFD700;--hsk-gold-light: #F4D58D;--hsk-gold-dark: #D4A726;--hsk-amber: #F59E0B;--hsk-coral: #e76f51;--hsk-coral-light: #f4a885;--hsk-border: #E5E0D8;--hsk-shadow: rgba(43, 43, 43, .08);--hsk-success: var(--hsk-jade);--hsk-warning: var(--hsk-amber);--hsk-danger: #DC2626;--hsk-error: var(--hsk-coral);--hsk-info: var(--hsk-ink-light);--hsk1-color: var(--tang-red);--hsk2-color: #6ab04c;--hsk3-color: var(--hsk-amber);--hsk4-color: var(--hsk-coral);--font-chinese: "KaiTi", "STKaiti", "楷体", serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-pinyin: "Ubuntu", sans-serif;--font-display: "Noto Serif SC", "Songti SC", serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 3px var(--hsk-shadow);--shadow-md: 0 4px 12px var(--hsk-shadow);--shadow-lg: 0 8px 24px var(--hsk-shadow);--shadow-tang: 0 8px 16px -4px rgba(0, 0, 0, .1);--shadow-tang-lg: 0 12px 24px -10px rgba(0, 0, 0, .2);--shadow-tang-hover: 0 20px 40px -10px rgba(0, 0, 0, .25);--shadow-glow: 0 0 20px var(--hsk-jade-20);--shadow-red-glow: 0 4px 12px rgba(169, 50, 38, .2);--ease-standard: cubic-bezier(.2, 0, 0, 1);--ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);--ease-expressive: cubic-bezier(.175, .885, .32, 1.275);--ease-expressive-decelerate: cubic-bezier(.05, .7, .1, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-spring-bouncy: cubic-bezier(.68, -.6, .32, 1.6);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--duration-instant: .1s;--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .35s;--duration-slower: .5s;--stagger-delay: 50ms;--stagger-delay-fast: 30ms;--texture-paper: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");--texture-card: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");--header-height: 56px;--bottom-nav-height: 64px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--content-max-width: 600px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--hsk-ink);background:var(--tang-paper);background-image:var(--texture-paper);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;touch-action:manipulation}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,a,[role=button]{min-height:44px;min-width:44px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-chinese);font-weight:var(--font-medium);border-radius:var(--radius-md);transition:transform var(--duration-normal) var(--ease-expressive),box-shadow var(--duration-normal) var(--ease-standard),background var(--duration-fast) var(--ease-standard);white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--tang-red),var(--tang-red-dark));color:#fff;padding:var(--space-3) var(--space-6);box-shadow:var(--shadow-red-glow);font-size:var(--text-base)}.btn-primary:active{transform:translateY(0) scale(.97);box-shadow:0 2px 8px #a932264d;transition-duration:var(--duration-fast)}.btn-secondary{background:transparent;color:var(--hsk-ink-muted);border:1px solid var(--tang-paper-dark);padding:var(--space-3) var(--space-6)}.btn-secondary:active{background:#00000008;transform:scale(.98)}.btn-ghost{background:transparent;color:var(--hsk-ink-light);padding:var(--space-2) var(--space-4)}.btn-ghost:active{background:#0000000d;transform:scale(.97)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);min-height:52px}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-sm);min-height:36px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes inkBleedIn{0%{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes stampBounce{0%{transform:translate(-50%,-50%) scale(.3) rotate(-15deg);opacity:0}40%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg);opacity:1}60%{transform:translate(-50%,-50%) scale(.95) rotate(-1deg)}80%{transform:translate(-50%,-50%) scale(1.02) rotate(0)}to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:.9}}@keyframes stamp-in{0%{transform:scale(.5) rotate(-5deg);opacity:0}50%{transform:scale(1.1) rotate(2deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes feedbackPop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes titlePop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes sessionSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes statSlideIn{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes levelUpBurst{0%{transform:scale(.3) rotate(-10deg);opacity:0;filter:blur(10px)}30%{transform:scale(1.3) rotate(5deg);opacity:1;filter:blur(0)}50%{transform:scale(.9) rotate(-2deg)}70%{transform:scale(1.1) rotate(1deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes glowPulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.8}}@keyframes xpFloat{0%{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}.animate-fade-in{animation:fadeIn var(--duration-normal) var(--ease-standard)}.animate-fade-up{animation:fadeUp var(--duration-slow) var(--ease-expressive-decelerate)}.animate-ink-bleed{animation:inkBleedIn .4s var(--ease-standard)}.animate-scale{animation:scaleIn var(--duration-normal) var(--ease-spring)}.animate-pulse{animation:pulse 2s infinite}.animate-shake{animation:shake .3s var(--ease-standard)}.animate-stamp{animation:stamp-in .4s var(--ease-spring) both}.animate-bounce{animation:bounce .6s var(--ease-spring)}.animate-stamp-in{animation:stamp-in .5s var(--ease-spring) both}.animate-slide-up{animation:fadeUp var(--duration-slow) var(--ease-expressive-decelerate) both}.animate-stat-slide{animation:statSlideIn .4s var(--ease-expressive-decelerate) both}.animate-xp-float{animation:feedbackPop .5s var(--ease-spring) both}.success-stamp-overlay{position:absolute;top:50%;left:50%;font-family:var(--font-chinese);font-size:5rem;font-weight:900;color:var(--tang-red);opacity:.15;pointer-events:none;animation:stampBounce .6s var(--ease-spring) .3s both;z-index:1}.answer-stamp{font-size:1.5rem;color:var(--hsk-jade);animation:feedbackPop .3s var(--ease-spring) both}.answer-correction{font-size:1.5rem;color:var(--tang-red);animation:shake .3s var(--ease-standard)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-tang-hover)}.hover-scale:hover{transform:scale(1.05)}*:focus-visible{outline:2px solid var(--tang-red);outline-offset:2px}.app-shell{display:flex;flex-direction:column;height:100dvh;max-width:var(--content-max-width);margin:0 auto;position:relative;overflow:hidden}.app-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--space-4);padding-top:var(--safe-area-top);background:var(--tang-paper);background-image:var(--texture-paper);border-bottom:1px solid rgba(169,50,38,.15);gap:var(--space-3)}.header-avatar{width:36px;height:36px;border-radius:var(--radius-full);border:2px solid var(--hsk-gold);box-shadow:0 1px 4px #b4530926;flex-shrink:0}.header-title{font-family:var(--font-chinese);font-size:clamp(1.2rem,5vw,1.6rem);font-weight:900;color:var(--hsk-ink);letter-spacing:.1em;text-align:center;flex:1}.header-stats{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--hsk-ink-muted);flex-shrink:0}.header-streak{color:var(--tang-red)}.header-xp,.header-coins{color:var(--hsk-gold-dark)}.header-back{position:absolute;left:var(--space-2);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--hsk-ink);transition:all var(--duration-normal) var(--ease-spring)}.header-back:active{background:#a9322614;transform:scale(.92)}.app-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:var(--space-4);padding-bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-4))}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--content-max-width);display:flex;align-items:stretch;justify-content:space-around;height:calc(var(--bottom-nav-height) + var(--safe-area-bottom));padding-bottom:var(--safe-area-bottom);background:var(--tang-paper);background-image:var(--texture-paper);border-top:1px solid rgba(169,50,38,.12);box-shadow:0 -2px 12px #0000000a;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;color:var(--hsk-ink-faint);font-size:var(--text-xs);font-family:var(--font-chinese);transition:color var(--duration-fast) var(--ease-standard),transform var(--duration-normal) var(--ease-spring);text-decoration:none;position:relative}.nav-item.active{color:var(--tang-red)}.nav-item:active{transform:scale(.9);transition-duration:var(--duration-fast)}.nav-item.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:24px;height:3px;background:var(--tang-red);border-radius:0 0 3px 3px}.nav-icon{font-size:1.4rem;line-height:1}.nav-label{font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:.03em}.progress-bar-container{display:flex;align-items:center;gap:var(--space-2);width:100%}.progress-label{font-family:var(--font-chinese);font-size:var(--text-xs);color:var(--hsk-ink-muted);white-space:nowrap;min-width:40px;font-weight:var(--font-medium)}.progress-track{flex:1;height:8px;background:#a932260f;border-radius:var(--radius-full);overflow:hidden;border:1px solid rgba(169,50,38,.08)}.progress-fill{height:100%;border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-spring);background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);background-size:200% 100%;position:relative}.progress-fill[style*="width: 100%"]{animation:progressShimmer 2s ease-in-out infinite}@keyframes progressShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.progress-percent{font-family:var(--font-chinese);font-size:var(--text-xs);color:var(--hsk-ink-muted);font-weight:var(--font-bold);min-width:36px;text-align:right}.level-picker-title{font-family:var(--font-chinese);font-size:var(--text-2xl);font-weight:900;color:var(--hsk-ink);margin-bottom:var(--space-1);letter-spacing:.05em}.level-picker-subtitle{font-size:var(--text-sm);color:var(--hsk-ink-muted);margin-bottom:var(--space-5)}.level-grid{display:flex;flex-direction:column;gap:var(--space-3)}.level-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--hsk-border);border-left:4px solid var(--level-color, var(--tang-red));background-color:var(--card-bg);background-image:var(--texture-card);text-align:left;width:100%;box-shadow:0 4px 6px #a932260d;transition:transform var(--duration-normal) var(--ease-expressive),box-shadow var(--duration-normal) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard);animation:cardSlideIn var(--duration-slow) var(--ease-expressive-decelerate) backwards}.level-card:nth-child(1){animation-delay:calc(var(--stagger-delay) * 0)}.level-card:nth-child(2){animation-delay:calc(var(--stagger-delay) * 1)}.level-card:nth-child(3){animation-delay:calc(var(--stagger-delay) * 2)}.level-card:nth-child(4){animation-delay:calc(var(--stagger-delay) * 3)}.level-card:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:inset 0 2px 4px #0000000d;background-color:#f9f7f0;transition-duration:var(--duration-fast)}.level-locked{opacity:.45;cursor:not-allowed}.level-badge{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-lg);font-weight:var(--font-bold);box-shadow:0 2px 6px #00000026}.level-info{display:flex;flex-direction:column;gap:2px}.level-label{font-family:var(--font-chinese);font-size:var(--text-lg);font-weight:900;color:var(--hsk-ink)}.level-words{font-size:var(--text-sm);color:var(--hsk-ink-muted)}.lesson-list-title{font-family:var(--font-chinese);font-size:var(--text-2xl);font-weight:900;color:var(--hsk-ink);margin-bottom:var(--space-1);letter-spacing:.05em}.lesson-list-subtitle{font-size:var(--text-sm);color:var(--hsk-ink-muted);margin-bottom:var(--space-5)}.lesson-grid{display:flex;flex-direction:column;gap:var(--space-2)}.lesson-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--hsk-border);border-left:4px solid var(--tang-red);background-color:var(--card-bg);background-image:var(--texture-card);text-align:left;width:100%;box-shadow:0 4px 6px #a932260d;transition:transform var(--duration-normal) var(--ease-expressive),box-shadow var(--duration-normal) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard);animation:cardSlideIn var(--duration-slow) var(--ease-expressive-decelerate) backwards}.lesson-card:nth-child(1){animation-delay:calc(var(--stagger-delay) * 0)}.lesson-card:nth-child(2){animation-delay:calc(var(--stagger-delay) * 1)}.lesson-card:nth-child(3){animation-delay:calc(var(--stagger-delay) * 2)}.lesson-card:nth-child(4){animation-delay:calc(var(--stagger-delay) * 3)}.lesson-card:nth-child(5){animation-delay:calc(var(--stagger-delay) * 4)}.lesson-card:nth-child(6){animation-delay:calc(var(--stagger-delay) * 5)}.lesson-card:nth-child(7){animation-delay:calc(var(--stagger-delay) * 6)}.lesson-card:nth-child(8){animation-delay:calc(var(--stagger-delay) * 7)}.lesson-card:nth-child(9){animation-delay:calc(var(--stagger-delay) * 8)}.lesson-card:nth-child(10){animation-delay:calc(var(--stagger-delay) * 9)}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.lesson-card:active{transform:translateY(0) scale(.98);box-shadow:inset 0 2px 4px #0000000d;background-color:#f9f7f0;transition-duration:var(--duration-fast)}.lesson-number{width:28px;height:28px;border-radius:var(--radius-full);background:var(--tang-red-light);color:var(--tang-red);font-size:var(--text-sm);font-weight:var(--font-bold);display:flex;align-items:center;justify-content:center}.lesson-info{display:flex;flex-direction:column;gap:2px}.lesson-title{font-family:var(--font-chinese);font-size:var(--text-lg);font-weight:900;color:var(--hsk-ink)}.lesson-title-en{font-size:var(--text-sm);color:var(--hsk-ink-muted)}.lesson-count{font-size:var(--text-xs);color:var(--hsk-ink-faint)}.pinyin-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:var(--space-2)}.pinyin-char{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}.pinyin-char[role=button]{cursor:pointer}.pinyin-char[role=button]:active{transform:scale(.95)}.pc-pinyin{font-family:var(--font-pinyin);color:var(--tang-red);font-weight:var(--font-medium);text-align:center;min-height:1.4em;transition:opacity var(--duration-fast) var(--ease-standard)}.pc-pinyin.pc-hidden{opacity:0}.pc-hanzi{font-family:var(--font-chinese);font-weight:900;color:var(--hsk-ink);line-height:1}.pinyin-char-sm .pc-pinyin{font-size:.75rem}.pinyin-char-sm .pc-hanzi{font-size:1.5rem}.pinyin-char-md .pc-pinyin{font-size:1rem}.pinyin-char-md .pc-hanzi{font-size:2.5rem}.pinyin-char-lg .pc-pinyin{font-size:1.3rem}.pinyin-char-lg .pc-hanzi{font-size:3.5rem}.flashcard-session{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);min-height:100%;gap:var(--space-5)}.session-header{display:flex;align-items:center;gap:var(--space-3);width:100%}.session-counter{font-size:var(--text-sm);color:var(--hsk-ink-muted);white-space:nowrap;font-weight:var(--font-semibold);font-family:var(--font-chinese)}.flashcard{width:100%;max-width:320px;aspect-ratio:3/4;position:relative;cursor:pointer}.flashcard-front,.flashcard-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);border-radius:var(--radius-md);backface-visibility:hidden;transition:transform .5s var(--ease-spring);padding:var(--space-6)}.flashcard-front{background-color:var(--card-bg);background-image:var(--texture-card);border:1px solid var(--hsk-border);box-shadow:var(--shadow-tang)}.flashcard-back{background-color:var(--card-bg);background-image:var(--texture-card);border:2px solid var(--tang-red);box-shadow:var(--shadow-tang-lg);transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{transform:rotateY(180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.card-hanzi{font-family:var(--font-chinese);font-size:4rem;font-weight:900;color:var(--hsk-ink);line-height:1.2;text-shadow:0 2px 6px rgba(0,0,0,.06)}.card-pinyin{font-family:var(--font-pinyin);font-size:var(--text-lg);color:var(--tang-red);font-weight:var(--font-medium)}.card-english{font-size:var(--text-base);color:var(--hsk-ink-muted);text-align:center}.card-hint{font-size:var(--text-sm);color:var(--hsk-ink-faint);font-family:var(--font-chinese);animation:pulse 2s var(--ease-standard) infinite}.card-audio-btn{width:48px;height:48px;border-radius:var(--radius-full);font-size:1.3rem;display:flex;align-items:center;justify-content:center;background:var(--tang-red-light);transition:all var(--duration-fast) var(--ease-spring)}.card-audio-btn:active{transform:scale(.85);background:#a9322626}.grade-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);width:100%;max-width:320px}.grade-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-semibold);font-family:var(--font-chinese);background-color:var(--card-bg);background-image:var(--texture-card);border:1px solid var(--hsk-border);transition:all var(--duration-fast) var(--ease-spring);min-height:70px}.grade-btn:active{transform:scale(.9);transition-duration:var(--duration-instant)}.grade-emoji{font-size:1.3rem}.grade-again{color:#dc2626}.grade-hard{color:var(--hsk-amber)}.grade-good{color:var(--hsk-jade)}.grade-easy{color:var(--hsk-jade-dark)}.grade-again:active{background:#fef2f2;border-color:#dc2626}.grade-hard:active{background:#fffbeb;border-color:var(--hsk-amber)}.grade-good:active{background:#065f460f;border-color:var(--hsk-jade)}.grade-easy:active{background:#065f4614;border-color:var(--hsk-jade-dark)}.session-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center}.complete-emoji{font-size:3.5rem}.complete-title{font-family:var(--font-chinese);font-size:var(--text-3xl);font-weight:900;color:var(--hsk-ink);letter-spacing:.1em}.complete-subtitle{font-size:var(--text-base);color:var(--hsk-ink-muted)}.complete-stats{display:flex;gap:var(--space-6)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold)}.stat-known .stat-value{color:var(--hsk-jade)}.stat-learning .stat-value{color:var(--hsk-amber)}.stat-label{font-size:var(--text-sm);color:var(--hsk-ink-muted)}.complete-xp{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--hsk-gold-dark);animation:stamp-in .4s var(--ease-spring) both;animation-delay:.3s}.page-learn{padding:var(--space-4)}.back-btn{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--tang-red);font-weight:var(--font-semibold);font-family:var(--font-chinese);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);margin-bottom:var(--space-4);min-height:36px;transition:all var(--duration-fast) var(--ease-spring)}.back-btn:active{background:var(--tang-red-light);transform:scale(.95)}.character-canvas{width:100%;aspect-ratio:1 / 1;background:var(--bg-canvas);background-image:var(--texture-paper);border:2px solid var(--hsk-gold);border-radius:var(--radius-md);position:relative;box-shadow:0 4px 12px #0000001a;display:flex;justify-content:center;align-items:center;overflow:hidden;touch-action:none;box-sizing:border-box}.writer-container{width:100%;height:100%;position:relative;touch-action:none;z-index:2}.writer-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);color:var(--hsk-ink-faint);z-index:10}.grid-tianzige:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(180,83,9,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(180,83,9,.2) 1px,transparent 1px);background-size:50% 50%;background-position:center;pointer-events:none;z-index:3}.grid-mizige:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(180,83,9,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(180,83,9,.18) 1px,transparent 1px);background-size:50% 50%;background-position:center;pointer-events:none;z-index:3}.grid-mizige:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 49.5%,rgba(180,83,9,.1) 49.5%,rgba(180,83,9,.1) 50.5%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,rgba(180,83,9,.1) 49.5%,rgba(180,83,9,.1) 50.5%,transparent 50.5%);pointer-events:none;z-index:3}.grid-blank:before,.grid-blank:after{display:none}.character-canvas svg{background:transparent!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.success-stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);width:60px;height:60px;opacity:0;pointer-events:none;z-index:100;transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-normal) var(--ease-spring)}.success-stamp.show{opacity:.9;transform:translate(-50%,-50%) scale(1);animation:stampBounce var(--duration-slow) var(--ease-spring)}.stamp-rect{fill:none;stroke:var(--tang-red);stroke-width:2}.stamp-text{fill:var(--tang-red);font-size:40px;font-weight:700;text-anchor:middle;dominant-baseline:middle}.page-write{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);gap:var(--space-4)}.write-title{font-family:var(--font-chinese);font-size:var(--text-2xl);font-weight:900;color:var(--hsk-ink);align-self:flex-start;letter-spacing:.05em}.write-subtitle{font-size:var(--text-sm);color:var(--hsk-ink-muted);align-self:flex-start;margin-bottom:var(--space-3)}.write-level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);width:100%}.write-level-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--hsk-border);background-color:var(--card-bg);background-image:var(--texture-card);box-shadow:0 4px 6px #a932260d;transition:all var(--duration-normal) var(--ease-expressive)}.write-level-btn:active:not(:disabled){transform:scale(.95);box-shadow:inset 0 2px 4px #0000000d;transition-duration:var(--duration-fast)}.write-level-btn:disabled{opacity:.4;cursor:not-allowed}.write-level-badge{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-xl);font-weight:var(--font-bold);box-shadow:0 2px 6px #00000026}.write-level-label{font-family:var(--font-chinese);font-weight:900;color:var(--hsk-ink)}.write-coming-soon{font-size:var(--text-xs);color:var(--hsk-ink-faint)}.write-header{display:flex;align-items:center;gap:var(--space-3);width:100%}.write-word-info{display:flex;align-items:center;gap:var(--space-3)}.write-pinyin{font-family:var(--font-pinyin);font-size:var(--text-lg);color:var(--tang-red);font-weight:var(--font-medium)}.write-english{font-size:var(--text-base);color:var(--hsk-ink-muted)}.write-audio{width:40px;height:40px;min-height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:1.1rem;transition:all var(--duration-fast) var(--ease-spring)}.write-audio:active{background:var(--tang-red-light);transform:scale(.85)}.write-stroke-info{display:flex;gap:var(--space-4);font-size:var(--text-sm);color:var(--hsk-ink-muted);font-family:var(--font-chinese)}.mistake-count{color:#dc2626}.write-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center}.write-complete .complete-emoji{font-size:3.5rem}.write-complete .complete-title{font-family:var(--font-chinese);font-size:var(--text-3xl);font-weight:900;letter-spacing:.1em}.write-complete .complete-subtitle{color:var(--hsk-ink-muted)}.write-complete .complete-xp{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--hsk-gold-dark)}.write-hints{display:flex;justify-content:center;gap:var(--space-2);width:100%;flex-wrap:wrap}.hint-btn{display:inline-flex;align-items:center;gap:4px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--hsk-border);background-color:var(--card-bg);background-image:var(--texture-card);font-family:var(--font-chinese);font-size:var(--text-sm);font-weight:900;color:var(--hsk-ink);transition:all var(--duration-fast) var(--ease-spring);min-height:36px;position:relative}.hint-btn:active:not(:disabled){transform:scale(.9);background:var(--tang-red-light);border-color:var(--tang-red)}.hint-btn:disabled{opacity:.35;cursor:not-allowed}.hint-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:var(--radius-full);background:var(--tang-red);color:#fff;font-size:.65rem;font-weight:var(--font-bold);margin-left:2px}.page-quiz{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);gap:var(--space-5)}.quiz-title{font-family:var(--font-chinese);font-size:var(--text-2xl);font-weight:900;color:var(--hsk-ink);align-self:flex-start;letter-spacing:.05em}.quiz-subtitle{font-size:var(--text-sm);color:var(--hsk-ink-muted);align-self:flex-start;margin-bottom:var(--space-3)}.quiz-level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);width:100%}.quiz-level-btn{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--hsk-border);background-color:var(--card-bg);background-image:var(--texture-card);font-family:var(--font-chinese);font-weight:900;box-shadow:0 4px 6px #a932260d;transition:all var(--duration-normal) var(--ease-expressive)}.quiz-level-btn:active:not(:disabled){transform:scale(.95);box-shadow:inset 0 2px 4px #0000000d;transition-duration:var(--duration-fast)}.quiz-level-btn:disabled{opacity:.4;cursor:not-allowed}.quiz-level-badge{width:36px;height:36px;border-radius:var(--radius-md);color:#fff;font-weight:var(--font-bold);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000026}.quiz-header{display:flex;align-items:center;gap:var(--space-3);width:100%}.quiz-play-area{padding:var(--space-6) 0}.quiz-play-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:120px;height:120px;border-radius:var(--radius-full);background:var(--tang-red-light);border:3px solid var(--tang-red);transition:all var(--duration-normal) var(--ease-spring);justify-content:center;box-shadow:0 4px 16px #a9322633}.quiz-play-btn:active{transform:scale(.88);background:#a932261f;transition-duration:var(--duration-fast)}.play-icon{font-size:2.5rem}.play-label{font-size:var(--text-xs);color:var(--tang-red-dark);font-weight:var(--font-semibold);font-family:var(--font-chinese)}.quiz-answer-reveal{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-md);width:100%;max-width:300px}.quiz-answer-reveal.correct{background:#065f460f;border:1px solid var(--hsk-jade)}.quiz-answer-reveal.wrong{background:var(--tang-red-light);border:1px solid #DC2626}.answer-hanzi{font-family:var(--font-chinese);font-size:var(--text-2xl);font-weight:900}.answer-pinyin{font-family:var(--font-pinyin);font-size:var(--text-base);color:var(--tang-red)}.answer-english{font-size:var(--text-sm);color:var(--hsk-ink-muted)}.quiz-input-area{display:flex;gap:var(--space-2);width:100%;max-width:340px}.quiz-input{flex:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:2px solid var(--hsk-border);font-size:var(--text-xl);font-family:var(--font-chinese);text-align:center;min-height:52px;background-color:var(--card-bg);transition:border-color var(--duration-fast) var(--ease-standard)}.quiz-input:focus{outline:none;border-color:var(--tang-red)}.quiz-input.input-correct{border-color:var(--hsk-jade);background:#065f460a}.quiz-input.input-wrong{border-color:#dc2626;background:var(--tang-red-light)}.quiz-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center}.quiz-complete .complete-emoji{font-size:3.5rem}.quiz-complete .complete-title{font-family:var(--font-chinese);font-size:var(--text-3xl);font-weight:900;letter-spacing:.1em}.quiz-accuracy{font-size:var(--text-4xl);font-weight:900;color:var(--tang-red);font-family:var(--font-chinese)}.quiz-complete .complete-stats{display:flex;gap:var(--space-6)}.quiz-complete .stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.quiz-complete .stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold)}.quiz-complete .stat-known .stat-value{color:var(--hsk-jade)}.quiz-complete .stat-learning .stat-value{color:#dc2626}.quiz-complete .stat-label{font-size:var(--text-sm);color:var(--hsk-ink-muted)}.quiz-complete .complete-xp{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--hsk-gold-dark);animation:stamp-in .4s var(--ease-spring) both;animation-delay:.3s}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-16) var(--space-6);text-align:center;animation:fadeUp var(--duration-slow) var(--ease-expressive-decelerate) both}.empty-icon{font-size:3.5rem;line-height:1;animation:feedbackPop .6s var(--ease-spring) .2s both;filter:drop-shadow(0 2px 8px rgba(0,0,0,.08))}.empty-title{font-family:var(--font-chinese);font-size:var(--text-xl);font-weight:900;color:var(--hsk-ink);letter-spacing:.05em}.empty-subtitle{font-size:var(--text-sm);color:var(--hsk-ink-muted);max-width:280px;line-height:1.6}.empty-state .btn{margin-top:var(--space-2);animation:fadeUp .4s var(--ease-expressive-decelerate) .3s both}.page-review{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);gap:var(--space-5);min-height:100%}.review-header{display:flex;align-items:center;gap:var(--space-3);width:100%}.review-due-count{font-size:var(--text-sm);font-weight:900;color:var(--tang-red);white-space:nowrap;background:var(--tang-red-light);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-family:var(--font-chinese)}.review-card{width:100%;max-width:300px;aspect-ratio:3/4;position:relative;cursor:pointer}.review-card-front,.review-card-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);border-radius:var(--radius-md);backface-visibility:hidden;transition:transform .5s var(--ease-spring);padding:var(--space-6)}.review-card-front{background-color:var(--card-bg);background-image:var(--texture-card);border:1px solid var(--hsk-border);box-shadow:var(--shadow-tang)}.review-card-back{background-color:var(--card-bg);background-image:var(--texture-card);border:2px solid var(--tang-red);box-shadow:var(--shadow-tang-lg);transform:rotateY(180deg)}.review-card.flipped .review-card-front{transform:rotateY(180deg)}.review-card.flipped .review-card-back{transform:rotateY(0)}.review-hanzi{font-family:var(--font-chinese);font-size:3.5rem;font-weight:900;color:var(--hsk-ink);text-shadow:0 2px 6px rgba(0,0,0,.06)}.review-pinyin{font-family:var(--font-pinyin);font-size:var(--text-lg);color:var(--tang-red);font-weight:var(--font-medium)}.review-english{font-size:var(--text-base);color:var(--hsk-ink-muted);text-align:center}.review-meta{font-size:var(--text-xs);color:var(--hsk-ink-faint);margin-top:var(--space-2)}.review-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center}.review-complete .complete-emoji{font-size:3.5rem}.review-complete .complete-title{font-family:var(--font-chinese);font-size:var(--text-3xl);font-weight:900;letter-spacing:.1em}.review-complete .complete-subtitle{color:var(--hsk-ink-muted)}.review-complete .complete-stats{display:flex;gap:var(--space-6)}.review-complete .stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.review-complete .stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold)}.review-complete .stat-known .stat-value{color:var(--hsk-jade)}.review-complete .stat-learning .stat-value{color:var(--hsk-amber)}.review-complete .stat-label{font-size:var(--text-sm);color:var(--hsk-ink-muted)}.review-complete .complete-xp{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--hsk-gold-dark)}.avatar-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn var(--duration-fast) var(--ease-standard)}.avatar-modal{background-color:var(--card-bg);background-image:var(--texture-card);border-radius:var(--radius-lg);padding:var(--space-5);max-width:400px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-tang-lg);animation:scaleIn var(--duration-normal) var(--ease-spring)}.avatar-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.avatar-modal-title{font-family:var(--font-chinese);font-size:var(--text-xl);font-weight:900;color:var(--hsk-ink);margin:0}.avatar-close-btn{width:40px;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:1.2rem;color:var(--hsk-ink-muted);transition:all var(--duration-fast) var(--ease-spring)}.avatar-close-btn:active{background:var(--tang-red-light);transform:scale(.9)}.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.avatar-option{width:100%;aspect-ratio:1;border-radius:var(--radius-full);border:2px solid transparent;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);background-color:transparent;padding:0}.avatar-option.selected{border-color:var(--tang-red);box-shadow:0 0 0 2px var(--tang-red-light)}.avatar-option:active{transform:scale(.9)!important}.shop-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:9999;animation:fadeIn var(--duration-fast) var(--ease-standard)}.shop-modal{background-color:var(--card-bg);background-image:var(--texture-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-tang-lg);animation:fadeUp var(--duration-normal) var(--ease-spring);overflow:hidden}.shop-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--hsk-border)}.shop-title{font-family:var(--font-chinese);font-size:var(--text-xl);font-weight:900;color:var(--hsk-ink);margin:0}.shop-close-btn{width:40px;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:1.2rem;color:var(--hsk-ink-muted);transition:all var(--duration-fast) var(--ease-spring)}.shop-close-btn:active{background:var(--tang-red-light);transform:scale(.9)}.shop-coins{font-family:var(--font-chinese);font-weight:900;font-size:var(--text-lg);color:var(--hsk-gold-dark)}.shop-tabs{display:flex;gap:var(--space-1);padding:var(--space-3) var(--space-4);overflow-x:auto;border-bottom:1px solid var(--hsk-border)}.shop-tab{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-chinese);white-space:nowrap;border:1px solid transparent;background:transparent;color:var(--hsk-ink-muted);transition:all var(--duration-fast) var(--ease-spring);min-height:36px}.shop-tab.active{background:var(--tang-red-light);color:var(--tang-red-dark);border-color:var(--tang-red);font-weight:900}.shop-tab:active{transform:scale(.95)}.tab-icon{font-size:1rem}.tab-label{font-size:var(--text-xs)}.shop-items{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);padding:var(--space-4);overflow-y:auto;flex:1}.shop-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3);background-color:var(--card-bg);background-image:var(--texture-card);border-radius:var(--radius-md);border:1px solid var(--hsk-border);box-shadow:0 4px 6px #a932260d;transition:all var(--duration-fast) var(--ease-spring);text-align:center;animation:cardSlideIn var(--duration-slow) var(--ease-expressive-decelerate) backwards}.shop-item:active:not(:disabled){transform:scale(.95);box-shadow:inset 0 2px 4px #0000000d}.shop-item:disabled{opacity:.4}.shop-item.owned{opacity:.7;border-color:var(--hsk-jade)}.item-icon{font-size:1.6rem}.item-name{font-family:var(--font-chinese);font-weight:900;font-size:var(--text-sm);color:var(--hsk-ink)}.item-desc{font-size:var(--text-xs);color:var(--hsk-ink-muted);line-height:1.3}.item-price{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--hsk-gold-dark);margin-top:var(--space-1)}.shop-item.owned .item-price{color:var(--hsk-jade)}.page-profile{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-5)}.profile-hero{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background-color:var(--card-bg);background-image:var(--texture-card);border-radius:var(--radius-md);border:1px solid var(--hsk-border);box-shadow:0 4px 6px #a932260d}.profile-avatar{width:64px;height:64px;border-radius:var(--radius-full);border:3px solid var(--hsk-gold);box-shadow:0 2px 8px #b4530933;background-size:800% 800%;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);flex-shrink:0}.profile-avatar:active{transform:scale(.9);border-color:var(--tang-red)}.profile-hero-info{display:flex;align-items:center;gap:var(--space-3);flex:1}.profile-hero-coins{font-family:var(--font-chinese);font-weight:900;font-size:var(--text-lg);color:var(--hsk-gold-dark)}.shop-open-btn{margin-left:auto;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-family:var(--font-chinese);font-weight:900;font-size:var(--text-sm);background:var(--tang-red-light);color:var(--tang-red-dark);border:1px solid var(--tang-red);min-height:40px;transition:all var(--duration-fast) var(--ease-spring)}.shop-open-btn:active{transform:scale(.95);background:#a9322626}.profile-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.stat-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3);background-color:var(--card-bg);background-image:var(--texture-card);border-radius:var(--radius-md);border:1px solid var(--hsk-border);box-shadow:0 4px 6px #a932260d}.stat-icon{font-size:1.6rem}.stat-card .stat-value{font-size:var(--text-2xl);font-weight:900;color:var(--hsk-ink);font-family:var(--font-chinese)}.stat-card .stat-label{font-size:var(--text-xs);color:var(--hsk-ink-muted)}.profile-section{display:flex;flex-direction:column;gap:var(--space-3)}.section-title{font-family:var(--font-chinese);font-size:var(--text-lg);font-weight:900;color:var(--hsk-ink);letter-spacing:.05em}.mastery-row{display:flex;align-items:center;gap:var(--space-3)}.mastery-label{font-family:var(--font-chinese);font-weight:900;font-size:var(--text-sm);min-width:50px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0}.setting-label{font-size:var(--text-sm);color:var(--hsk-ink);font-weight:var(--font-semibold)}.setting-options{display:flex;gap:var(--space-1)}.setting-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-chinese);border:1px solid var(--hsk-border);background-color:var(--card-bg);min-height:36px;transition:all var(--duration-fast) var(--ease-spring);display:flex;align-items:center;gap:var(--space-1)}.setting-btn.active{background:var(--tang-red-light);border-color:var(--tang-red);color:var(--tang-red-dark);font-weight:900}.setting-btn:active{transform:scale(.92);transition-duration:var(--duration-instant)}.toggle-btn{width:48px;height:28px;border-radius:14px;background:var(--tang-paper-dark);position:relative;transition:background var(--duration-fast) var(--ease-standard);min-height:28px}.toggle-btn.on{background:var(--tang-red)}.toggle-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--radius-full);background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-spring)}.toggle-btn.on .toggle-thumb{transform:translate(20px)}.lesson-picker{min-height:100dvh;background:#fff;padding:24px 16px calc(env(safe-area-inset-bottom,16px) + 16px);display:flex;flex-direction:column;gap:20px}.lesson-picker__header{text-align:center;padding:12px 0 4px}.lesson-picker__title{font-family:var(--font-chinese);font-size:28px;font-weight:700;color:var(--hsk-ink);margin:0;letter-spacing:-.5px}.lesson-picker__subtitle{font-size:13px;color:var(--hsk-ink-muted);margin:4px 0 0;font-weight:400}.lesson-picker__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.unit-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px 16px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;cursor:pointer;box-shadow:0 1px 2px #00000008,0 4px 12px #0000000a;transition:all .25s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent;animation:cardFadeIn .4s ease both}.unit-card:active{transform:scale(.96);box-shadow:0 1px 3px #0000000d}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.unit-card__emoji{font-size:32px;line-height:1}.unit-card__title{font-family:var(--font-chinese);font-size:17px;font-weight:600;color:var(--hsk-ink);line-height:1.2}.unit-card__en{font-size:11px;color:var(--hsk-ink-muted);font-weight:400;text-align:center;line-height:1.2}.unit-card__count{font-size:10px;color:var(--hsk-ink-faint);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.unit-card--done{border-color:var(--hsk-jade);background:#065f4605}.unit-card__stars{display:flex;gap:2px;font-size:14px;line-height:1}.star-filled{color:var(--hsk-gold)}.star-empty{color:#00000014}.intro-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;width:100%;max-width:440px;margin:0 auto}.intro-stage__hero{display:flex;flex-direction:column;align-items:center;gap:4px;animation:introHeroIn .5s cubic-bezier(.34,1.56,.64,1) both}.intro-stage__emoji{font-size:48px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.06))}.intro-stage__title{font-family:var(--font-chinese);font-size:26px;font-weight:700;color:var(--hsk-ink);margin:0;letter-spacing:1px}.intro-stage__title-en{font-size:14px;color:var(--hsk-ink-muted);margin:0}@keyframes introHeroIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.intro-stage__sentence-card{width:100%;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 2px 8px #0000000a;animation:cardSlideUp .5s .1s cubic-bezier(.16,1,.3,1) both}.intro-stage__sentence{font-family:var(--font-chinese);font-size:22px;font-weight:600;color:var(--hsk-ink);text-align:center;line-height:1.5;margin:0;letter-spacing:1px}.intro-stage__sentence-en{font-size:14px;font-style:italic;color:var(--hsk-ink-muted);text-align:center;line-height:1.4;margin:0}.intro-stage__listen-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 16px;border-radius:20px;background:#00000008;border:1px solid rgba(0,0,0,.06);color:var(--hsk-ink-muted);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;margin-top:4px}.intro-stage__listen-btn:active{transform:scale(.96);background:#0000000f}.intro-stage__listen-btn:disabled{opacity:.5}.intro-stage__vocab{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;animation:cardSlideUp .5s .2s cubic-bezier(.16,1,.3,1) both}.intro-stage__vocab-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--hsk-ink-faint);font-weight:600}.intro-stage__vocab-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.intro-vocab-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px 8px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 1px 3px #00000008}.intro-vocab-chip__hanzi{font-family:var(--font-chinese);font-size:18px;font-weight:600;color:var(--tang-red)}.intro-vocab-chip__meta{font-size:10px;color:var(--hsk-ink-faint);white-space:nowrap}.intro-stage__video-note{display:flex;align-items:flex-start;gap:8px;width:100%;padding:12px 14px;background:#00000005;border-radius:12px;border:1px dashed rgba(0,0,0,.08);animation:cardSlideUp .5s .3s cubic-bezier(.16,1,.3,1) both}.intro-stage__video-icon{font-size:16px;flex-shrink:0;margin-top:1px}.intro-stage__video-desc{font-size:12px;color:var(--hsk-ink-muted);line-height:1.5;font-style:italic}.intro-stage__start-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:280px;padding:14px 24px;border-radius:14px;background:var(--tang-red);color:#fff;font-family:var(--font-body);font-size:16px;font-weight:600;border:none;cursor:pointer;box-shadow:0 4px 16px #a9322633;transition:all .25s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent;animation:cardSlideUp .5s .4s cubic-bezier(.16,1,.3,1) both}.intro-stage__start-btn:active{transform:scale(.96);box-shadow:0 2px 8px #a9322626}.intro-stage__start-arrow{font-size:18px;transition:transform .2s ease}.intro-stage__start-btn:active .intro-stage__start-arrow{transform:translate(3px)}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.video-stage{position:relative;width:100%;height:100%;flex:1;display:flex;overflow:hidden;background:#0a0a0a;cursor:pointer;padding:0!important}.video-stage__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.video-stage__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 18%,transparent 55%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.85) 100%);pointer-events:none}.video-stage__top-badge{position:absolute;top:12px;left:14px;z-index:5}.video-stage__badge{display:inline-flex;align-items:center;gap:4px;background:#ffffff1f;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#ffffffe6;font-family:var(--font-body);font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.1);letter-spacing:.8px;text-transform:uppercase}.video-stage__play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}.video-stage__play-ring{position:absolute;width:88px;height:88px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);animation:playRingPulse 2.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes playRingPulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.5);opacity:0}}.video-stage__play-btn{width:60px;height:60px;border-radius:50%;background:#ffffff26;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.12);padding-left:4px;z-index:1}.video-stage__bottom{position:absolute;bottom:0;left:0;right:0;z-index:5;padding:0 18px 24px;display:flex;flex-direction:column;gap:12px;pointer-events:none}.video-stage__bottom>*{pointer-events:auto}.video-stage__subtitle{font-family:var(--font-chinese);font-size:26px;font-weight:600;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3);letter-spacing:1px;line-height:1.4;margin:0;pointer-events:none;animation:subtitleFade .4s ease both}.video-stage__subtitle-en{font-size:14px;color:#fff9;text-align:center;font-weight:400;pointer-events:none}@keyframes subtitleFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.video-stage__end-section{display:flex;flex-direction:column;align-items:center;gap:14px}.vocab-preview{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.vocab-chip{display:flex;flex-direction:column;align-items:center;gap:1px;background:#ffffff14;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 14px;animation:chipFloat .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes chipFloat{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.vocab-chip__hanzi{font-family:var(--font-chinese);font-size:20px;font-weight:700;color:var(--hsk-gold)}.vocab-chip__pinyin{font-family:var(--font-pinyin);font-size:10px;color:#fff9}.vocab-chip__en{font-size:10px;color:#fff6}.video-stage .continue-btn{background:#ffffff24;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 24px #0003;color:#fff}.video-stage .continue-btn:active{background:#ffffff38}.video-stage__paused-label{position:absolute;top:12px;right:14px;z-index:5;font-size:11px;color:#ffffff80;background:#0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:3px 10px;border-radius:12px;font-weight:500;border:1px solid rgba(255,255,255,.06)}.video-stage__muted-indicator{position:absolute;bottom:28px;right:16px;z-index:10;display:flex;align-items:center;gap:6px;padding:6px 14px;background:#00000073;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#ffffffd9;font-size:12px;font-weight:500;pointer-events:none;animation:mutedPulse 2s ease-in-out infinite}@keyframes mutedPulse{0%,to{opacity:1}50%{opacity:.6}}.phonetic-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px 16px 24px;width:100%;max-width:440px;margin:0 auto}.phonetic-stage__translation{font-size:14px;font-style:italic;color:var(--hsk-ink-muted);text-align:center;line-height:1.4;margin:0;padding:0 12px}.phonetic-stage__header{text-align:center}.phonetic-stage__title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--hsk-ink);margin-bottom:4px;letter-spacing:-.3px}.phonetic-stage__desc{font-size:14px;color:var(--hsk-ink-muted);line-height:1.4}.listen-sentence-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:24px;background:#fff;border:1px solid var(--hsk-border);color:var(--hsk-ink);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000a;-webkit-tap-highlight-color:transparent}.listen-sentence-btn:active{transform:scale(.97);box-shadow:0 0 0 3px #ffd7001f;border-color:var(--hsk-gold)}.listen-sentence-btn:disabled{opacity:.5;cursor:not-allowed}.phonetic-stage__sentence-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:18px;width:100%;box-shadow:0 1px 2px #00000008,0 4px 16px #0000000a}.phonetic-stage__words{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.word-tile{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 10px;border-radius:14px;background:var(--tang-paper);border:1px solid transparent;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);position:relative;min-width:50px;animation:tileAppear .35s cubic-bezier(.16,1,.3,1) both;-webkit-tap-highlight-color:transparent}@keyframes tileAppear{0%{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.word-tile:active{transform:scale(.93)}.word-tile--listening{border-color:var(--hsk-gold);background:#ffd7000f;box-shadow:0 0 0 4px #ffd70014;transform:scale(1.04)}.word-tile__pinyin{font-family:var(--font-pinyin);font-size:10px;color:var(--hsk-ink-faint);font-weight:400}.word-tile__hanzi{font-family:var(--font-chinese);font-size:22px;color:var(--hsk-ink);font-weight:500;line-height:1.15}.word-tile__english{font-size:9px;color:var(--hsk-ink-faint);font-weight:400}.word-tile__speaker{position:absolute;top:-3px;right:-3px;font-size:11px;animation:speakerPulse .8s ease infinite}@keyframes speakerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.word-tile__indicator{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;animation:indicatorPop .35s cubic-bezier(.34,1.56,.64,1) both}.word-tile--correct{border-color:var(--hsk-jade);background:#065f460a}.word-tile--correct .word-tile__indicator{background:var(--hsk-jade);color:#fff}.word-tile--incorrect{border-color:var(--hsk-danger);background:#dc262608;animation:tileShake .35s ease}@keyframes tileShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.word-tile--incorrect .word-tile__indicator{background:var(--hsk-danger);color:#fff}.phonetic-stage__controls{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.phonetic-stage__hint{font-size:12px;color:var(--hsk-ink-faint);text-align:center;font-weight:400}.mic-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:80px;height:80px;min-height:80px;min-width:80px;border-radius:50%;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}.mic-btn__icon{font-size:28px;z-index:1}.mic-btn__label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;z-index:1}.mic-btn--start{background:var(--tang-red);color:#fff;box-shadow:0 2px 4px #a9322626,0 8px 24px #a9322640}.mic-btn--start:active{transform:scale(.92)}.mic-btn--recording{background:var(--hsk-danger);color:#fff;box-shadow:0 0 0 6px #dc26261a;animation:recordPulse 1.6s cubic-bezier(.4,0,.2,1) infinite}@keyframes recordPulse{0%,to{box-shadow:0 0 0 6px #dc26261a}50%{box-shadow:0 0 0 14px #dc26260a}}.recording-container{display:flex;flex-direction:column;align-items:center;gap:12px}.recording-waves{display:flex;align-items:center;gap:3px;height:28px}.wave-bar{width:3px;background:var(--tang-red);border-radius:3px;animation:waveBar .55s ease-in-out infinite alternate}@keyframes waveBar{0%{height:6px;opacity:.3}to{height:24px;opacity:1}}.phonetic-stage__actions{display:flex;gap:10px}.action-pill{display:flex;align-items:center;gap:6px;padding:12px 22px;border-radius:16px;font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;transition:all .2s cubic-bezier(.34,1.56,.64,1);min-height:48px;-webkit-tap-highlight-color:transparent}.action-pill--secondary{background:#fff;color:var(--hsk-ink);border:1px solid var(--hsk-border);box-shadow:0 1px 3px #0000000a}.action-pill--primary{background:var(--tang-red);color:#fff;box-shadow:0 1px 2px #a9322626,0 4px 12px #a9322633}.action-pill:active{transform:scale(.96)}.phonetic-stage__result{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.score-ring{position:relative;width:88px;height:88px}.score-ring svg{transform:rotate(-90deg);width:100%;height:100%}.score-ring__bg{fill:none;stroke:#0000000f;stroke-width:3.5}.score-ring__fill{fill:none;stroke:var(--hsk-jade);stroke-width:3.5;stroke-linecap:round;transition:stroke-dasharray 1.2s cubic-bezier(.16,1,.3,1)}.score-ring__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--hsk-jade);letter-spacing:-.5px}.writing-stage{display:flex;flex-direction:column;align-items:center;padding:16px 16px 24px;width:100%;max-width:440px;margin:0 auto;flex:1;justify-content:center;gap:14px}.writing-stage__targets{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.writing-stage__target-word{display:flex;flex-direction:column;align-items:center;gap:1px}.writing-stage__target-hanzi{font-family:var(--font-chinese);font-size:20px;font-weight:600;color:var(--hsk-ink)}.writing-stage__target-meta{font-size:11px;color:var(--hsk-ink-faint);font-weight:400}.writing-stage__char-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.char-pill{width:42px;height:42px;border-radius:12px;border:1.5px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;position:relative;transition:all .4s cubic-bezier(.34,1.56,.64,1);background:#fff;box-shadow:0 1px 3px #00000008}.char-pill--active{border-color:var(--tang-red);box-shadow:0 0 0 3px #a9322614,0 2px 8px #a932261a;transform:scale(1.1)}.char-pill--done{border-color:var(--hsk-jade);background:#065f460a}.char-pill__char{font-family:var(--font-chinese);font-size:18px;color:var(--hsk-ink)}.char-pill__check{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--hsk-jade);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:indicatorPop .35s cubic-bezier(.34,1.56,.64,1) both}@keyframes indicatorPop{0%{transform:scale(0)}to{transform:scale(1)}}.writing-stage__canvas-area{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.writing-stage__canvas{width:min(280px,72vw)}.writing-stage__stroke-bar{width:min(280px,72vw);height:3px;border-radius:3px;background:#0000000d;overflow:hidden}.writing-stage__stroke-fill{height:100%;background:linear-gradient(90deg,var(--hsk-jade),var(--hsk-jade-light));border-radius:3px;transition:width .3s cubic-bezier(.34,1.56,.64,1)}.writing-stage__toolbar{display:flex;align-items:center;justify-content:space-between;width:min(280px,72vw)}.writing-tool-btn{display:flex;align-items:center;gap:4px;padding:7px 14px;border-radius:20px;background:#fff;border:1px solid rgba(0,0,0,.08);color:var(--hsk-ink-muted);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #00000008;-webkit-tap-highlight-color:transparent}.writing-tool-btn:active{transform:scale(.96)}.writing-tool-btn:disabled{opacity:.3;cursor:not-allowed}.writing-stage__mistake-count{font-size:12px;color:var(--hsk-ink-faint);text-align:center;font-weight:400}.writing-stage__complete{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px}.writing-stage__stamp{font-family:var(--font-chinese);font-size:72px;color:var(--tang-red);opacity:.6;filter:drop-shadow(0 4px 20px rgba(169,50,38,.15))}.scramble-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px 16px 24px;width:100%;max-width:440px;margin:0 auto}.scramble-stage__translation{font-size:14px;font-style:italic;color:var(--hsk-ink-muted);text-align:center;line-height:1.4;margin:0;padding:0 12px}.scramble-stage__header{text-align:center}.scramble-stage__title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--hsk-ink);margin-bottom:4px;letter-spacing:-.3px}.scramble-stage__desc{font-size:14px;color:var(--hsk-ink-muted)}.scramble-stage__progress-bar{width:100%;height:2.5px;border-radius:2px;background:#0000000d;overflow:hidden}.scramble-stage__progress-fill{height:100%;background:linear-gradient(90deg,var(--hsk-jade),var(--hsk-jade-light));border-radius:2px;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.scramble-stage__tray{width:100%;min-height:56px;background:#fff;border:1.5px dashed rgba(0,0,0,.1);border-radius:18px;padding:14px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 3px #00000005}.scramble-stage__tray:has(.tray-block){border-color:var(--hsk-jade);border-style:solid;background:#065f4604}.scramble-stage__tray--complete{border-color:var(--hsk-gold);background:#ffd70008;box-shadow:0 0 0 4px #ffd7000f,0 4px 16px #ffd70014}.scramble-stage__tray-hint{font-size:13px;color:var(--hsk-ink-faint);width:100%;text-align:center;font-weight:400}.tray-block{font-family:var(--font-chinese);font-size:16px;color:var(--hsk-jade-dark);background:#065f460f;border:1px solid rgba(6,95,70,.12);padding:4px 10px;border-radius:10px;animation:blockLand .3s cubic-bezier(.34,1.56,.64,1) both}.tray-block--just-placed{animation:blockLand .35s cubic-bezier(.34,1.56,.64,1) both}@keyframes blockLand{0%{transform:scale(.5) translateY(-4px);opacity:0}60%{transform:scale(1.08) translateY(0)}to{transform:scale(1) translateY(0);opacity:1}}.tray-cursor{width:1.5px;height:18px;background:var(--tang-red);border-radius:2px;animation:cursorBlink 1s step-end infinite}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}.scramble-stage__blocks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}.scramble-block{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-chinese);padding:10px 16px 8px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.07);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 2px #0000000a,0 4px 12px #00000008;color:var(--hsk-ink);min-height:48px;-webkit-tap-highlight-color:transparent}.scramble-block:active{transform:scale(.93) translateY(1px);box-shadow:0 1px 3px #0000000f}.scramble-block__hanzi{font-size:18px;line-height:1.2}.scramble-block__gloss{font-family:var(--font-body);font-size:9px;color:var(--hsk-ink-faint);font-weight:400;line-height:1;white-space:nowrap}.scramble-block--shake{animation:tileShake .4s ease;border-color:#dc262633;background:#dc262605}.scramble-block--hint{border-color:var(--hsk-gold);background:#ffd7000a;animation:hintPulse 2s cubic-bezier(.4,0,.2,1) infinite}@keyframes hintPulse{0%,to{box-shadow:0 0 #ffd70026,0 1px 2px #0000000a,0 4px 12px #00000008}50%{box-shadow:0 0 0 6px #ffd7000f,0 1px 2px #0000000a,0 4px 12px #00000008}}@keyframes tileShake{0%,to{transform:translate(0)}15%{transform:translate(-5px) rotate(-1deg)}30%{transform:translate(5px) rotate(1deg)}45%{transform:translate(-4px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}.reset-link{font-size:13px;color:var(--hsk-ink-faint);background:none;border:none;cursor:pointer;padding:8px 16px;border-radius:12px;transition:all .15s ease;font-weight:400;-webkit-tap-highlight-color:transparent}.reset-link:active{color:var(--tang-red);background:#a932260a}.scramble-stage__complete{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.scramble-stage__success-burst{font-size:48px;animation:burstPop .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes burstPop{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}.scramble-stage__grammar-note{width:100%;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:20px;text-align:center;box-shadow:0 2px 8px #00000008}.grammar-note__pattern{font-family:var(--font-chinese);font-size:22px;color:var(--hsk-ink);margin-bottom:8px}.grammar-note__explain{font-size:13px;color:var(--hsk-ink-muted);line-height:1.5}.completion-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 16px;width:100%;max-width:440px;margin:0 auto;position:relative;overflow:hidden}.completion-stage__particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.particle{position:absolute;top:-12px;left:var(--x);width:var(--size);height:var(--size);animation:particleDrift 4s var(--delay) infinite;opacity:0}.particle:nth-child(5n){background:var(--hsk-gold);border-radius:50%}.particle:nth-child(5n+1){background:var(--tang-red);border-radius:50%}.particle:nth-child(5n+2){background:var(--hsk-jade);border-radius:50%}.particle:nth-child(5n+3){background:var(--hsk-coral);border-radius:1px;transform:rotate(45deg)}.particle:nth-child(5n+4){background:var(--hsk-gold-light);border-radius:50%}@keyframes particleDrift{0%{opacity:0;transform:translateY(0) translate(0) rotate(0) scale(.5)}6%{opacity:.85;transform:scale(1)}to{opacity:0;transform:translateY(70vh) translate(var(--drift)) rotate(400deg)}}.completion-stage__hero{display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1;padding-top:8px}.completion-stage__stars{display:flex;gap:4px;margin-top:4px}.comp-star{font-size:24px;color:#0000001a;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.comp-star--filled{color:var(--hsk-gold);filter:drop-shadow(0 2px 4px rgba(255,215,0,.3));animation:starPop .4s cubic-bezier(.34,1.56,.64,1) both}.comp-star--filled:nth-child(2){animation-delay:.15s}.comp-star--filled:nth-child(3){animation-delay:.3s}@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.completion-stage__emoji{font-size:56px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));animation:heroFloat .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes heroFloat{0%{transform:scale(0) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.completion-stage__grade{font-family:var(--font-chinese);font-size:32px;font-weight:700;color:var(--tang-red);letter-spacing:2px}.completion-stage__grade-desc{font-size:14px;color:var(--hsk-ink-muted);font-weight:400}.completion-stage__overall{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}.overall-ring{position:relative;width:108px;height:108px}.overall-ring svg{transform:rotate(-90deg);width:100%;height:100%}.overall-ring__bg{fill:none;stroke:#0000000d;stroke-width:4}.overall-ring__fill{fill:none;stroke:var(--hsk-jade);stroke-width:4;stroke-linecap:round;transition:stroke-dasharray 1.5s cubic-bezier(.16,1,.3,1)}.overall-ring__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--hsk-jade);letter-spacing:-1px}.overall-xp{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--hsk-gold-dark);background:#ffd70014;padding:4px 14px;border-radius:20px;letter-spacing:.3px}.completion-stage__scores{display:flex;gap:8px;width:100%;z-index:1}.score-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:14px 8px;box-shadow:0 1px 4px #00000008;animation:cardSlide .45s cubic-bezier(.16,1,.3,1) both}@keyframes cardSlide{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.score-card__icon{font-size:20px}.score-card__value{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--hsk-jade);letter-spacing:-.5px}.score-card__label{font-size:10px;color:var(--hsk-ink-faint);text-transform:uppercase;letter-spacing:.5px;font-weight:500}.completion-stage__srs{font-size:13px;color:var(--hsk-ink-muted);z-index:1;font-weight:400}.completion-stage__srs strong{color:var(--hsk-ink);font-weight:600}.completion-stage__actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:280px;z-index:1}.exit-link{font-size:13px;color:var(--hsk-ink-faint);background:none;border:none;cursor:pointer;padding:8px 16px;border-radius:12px;transition:all .15s ease;font-weight:400;-webkit-tap-highlight-color:transparent}.exit-link:active{color:var(--hsk-ink);background:#00000008}.video-lesson-page{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y}.vl-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;scrollbar-width:none;background:#fff}.vl-content>*{flex:1}.vl-content::-webkit-scrollbar{display:none}.vl-bottom-bar{flex-shrink:0;background:#fff;border-top:1px solid rgba(0,0,0,.06);padding:6px 16px calc(env(safe-area-inset-bottom,8px) + 6px);display:flex;flex-direction:column;gap:6px;z-index:10}.vl-bottom-bar__close{position:absolute;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--hsk-ink-faint);background:transparent;border:none;cursor:pointer;z-index:20;-webkit-tap-highlight-color:transparent}.vl-bottom-bar__close:active{color:var(--hsk-ink)}.vl-bottom-bar__tabs{display:flex;align-items:center;justify-content:center;gap:clamp(16px,7vw,36px)}.vl-btab{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:none;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}.vl-btab--active{transform:scale(1.15)}.vl-btab:active{transform:scale(.88)}.vl-btab--done svg{stroke:var(--hsk-jade);opacity:.6}.vl-bottom-bar__progress{display:flex;gap:3px;height:2px}.vl-seg{flex:1;background:#0000000f;border-radius:2px;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.vl-seg--active{background:var(--tang-red)}.vl-seg--done{background:var(--hsk-jade)}.vl-content--enter-left{animation:enterLeft .3s cubic-bezier(.16,1,.3,1) both}.vl-content--enter-right{animation:enterRight .3s cubic-bezier(.16,1,.3,1) both}.vl-content--exit-left{animation:exitLeft .12s ease-in both;pointer-events:none}.vl-content--exit-right{animation:exitRight .12s ease-in both;pointer-events:none}@keyframes enterLeft{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes enterRight{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes exitLeft{0%{opacity:1}to{opacity:0;transform:translate(-20px)}}@keyframes exitRight{0%{opacity:1}to{opacity:0;transform:translate(20px)}}.continue-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;max-width:280px;padding:14px var(--space-5);background:var(--tang-red);color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.3px;border:none;border-radius:16px;cursor:pointer;box-shadow:0 1px 2px #a9322626,0 4px 12px #a9322633;transition:all .2s cubic-bezier(.34,1.56,.64,1);min-height:50px;-webkit-tap-highlight-color:transparent}.continue-btn:active{transform:scale(.96)}.continue-btn__arrow{font-size:16px}.video-feed{position:fixed;inset:0;background:#0a0a0a;overflow:hidden}.vf-hsk-badge{position:fixed;top:max(env(safe-area-inset-top,12px),12px);right:14px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:3px;color:#ffffffbf;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}.vf-hsk-badge__label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}.vf-dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:auto}.vf-dot{width:6px;height:6px;border-radius:50%;border:none;padding:0;background:#ffffff40;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.vf-dot--active{background:#fff;transform:scale(1.8);box-shadow:0 0 8px #fff6}.vf-dot--done{background:#ffffff8c}.vf-dot:hover{background:#ffffffb3;transform:scale(1.4)}.vf-dot--active:hover{transform:scale(1.8);background:#fff}.vf-lesson-title{position:fixed;top:max(env(safe-area-inset-top,12px),12px);left:50%;transform:translate(-50%);z-index:200;display:flex;align-items:center;gap:6px;padding:4px 14px;background:#00000059;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;border:1px solid rgba(255,255,255,.08);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.vf-lesson-title--hidden{opacity:0;transform:translate(-50%) translateY(-8px)}.vf-lesson-title__emoji{font-size:14px}.vf-lesson-title__text{font-size:13px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.vf-lesson{height:100%;width:100%}.vf-slide--exit-up{animation:vfExitUp .25s cubic-bezier(.4,0,1,1) forwards}.vf-slide--exit-down{animation:vfExitDown .25s cubic-bezier(.4,0,1,1) forwards}.vf-slide--enter-up{animation:vfEnterUp .3s cubic-bezier(0,0,.2,1)}.vf-slide--enter-down{animation:vfEnterDown .3s cubic-bezier(0,0,.2,1)}@keyframes vfExitUp{to{transform:translateY(-25%);opacity:0}}@keyframes vfExitDown{to{transform:translateY(25%);opacity:0}}@keyframes vfEnterUp{0%{transform:translateY(25%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes vfEnterDown{0%{transform:translateY(-25%);opacity:0}to{transform:translateY(0);opacity:1}}