: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: var(--hsk-jade);--hsk3-color: var(--hsk-gold-dark);--hsk4-color: var(--hsk-ink-light);--font-chinese: "KaiTi", "STKaiti", "楷体", serif;--font-body: "Optima", "Avenir Next", "Avenir", "Helvetica Neue", 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: 72px;--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%}.stage-header{width:100%;text-align:center;margin-bottom:var(--space-3);padding-top:var(--space-2)}.stage-title{font-family:var(--font-chinese);font-size:var(--text-sm);font-weight:700;color:var(--hsk-ink-faint);letter-spacing:.1em;text-transform:uppercase}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 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 cardSlideIn{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) 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,.08);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))}.app-shell--immersive .app-content{padding:0;overflow:hidden}.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:#f9f7f2bf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 32px #0000000a;z-index:100}.app-shell--immersive .bottom-nav{background:#0006;border-top:1px solid rgba(255,255,255,.1)}.app-shell--immersive .nav-item{color:#ffffffb3}.app-shell--immersive .nav-item.active{color:var(--tang-red)}.app-shell--immersive .nav-item.active:before{background:linear-gradient(90deg,transparent,var(--tang-red),transparent)}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;color:var(--hsk-ink-muted);font-size:var(--text-sm);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:-4px;left:50%;transform:translate(-50%);width:32px;height:3px;background:linear-gradient(90deg,transparent,var(--tang-red),transparent);border-radius:4px;opacity:.8}.nav-item.active .nav-icon{transform:translateY(-2px);text-shadow:0 2px 8px rgba(169,50,38,.2)}.nav-icon{font-size:1.4rem;line-height:1}.nav-label{font-size:10px;font-weight:var(--font-semibold);letter-spacing:.02em}.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__badge{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--tang-red);color:#fff;border-radius:20px;box-shadow:0 4px 12px #a9322633;margin-bottom:8px;transform:rotate(45deg)}.intro-stage__badge svg{transform:rotate(-45deg)}.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-color:var(--card-bg-elevated);background-image:var(--texture-card);border:1px solid var(--hsk-border);border-radius:16px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm);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-color:var(--tang-paper);background-image:var(--texture-paper);border:1px solid var(--hsk-border);border-radius:12px;box-shadow:var(--shadow-sm)}.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}.phonetic-stage__sentence-card{background-color:var(--card-bg-elevated);background-image:var(--texture-card);border:1px solid var(--hsk-border);border-radius:20px;padding:24px 18px;width:100%;box-shadow:var(--shadow-sm)}.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:10px 12px;border-radius:14px;background:var(--tang-paper);background-image:var(--texture-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__instruction{display:none}.action-pill--danger{background:var(--hsk-danger);color:#fff;box-shadow:0 0 0 6px #dc26261a;animation:recordPulse 1.6s cubic-bezier(.4,0,.2,1) infinite;width:100%;max-width:280px}@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__simplified-actions{display:flex;align-items:center;justify-content:center;gap:24px;width:100%}.icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}.icon-button:active{transform:scale(.92)}.icon-button--listen{width:52px;height:52px;background:transparent;color:var(--hsk-ink-muted);border:2px solid var(--hsk-border)}.icon-button--speaking{color:var(--tang-red);border-color:var(--tang-red);background:#dc26260d;animation:speakerPulse 1.2s cubic-bezier(.4,0,.2,1) infinite}.icon-button--mic{width:72px;height:72px;background:var(--tang-red);color:#fff;box-shadow:0 6px 16px #a9322640}.icon-button--mic:hover{box-shadow:0 8px 20px #a9322659;transform:translateY(-2px)}.icon-button--mic:active{transform:translateY(1px) scale(.95);box-shadow:0 2px 8px #a9322633}.phonetic-stage__primary-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;margin-top:8px}.phonetic-stage__actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.action-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:100px;font-size:16px;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;transition:all .2s cubic-bezier(.34,1.56,.64,1);min-height:52px;-webkit-tap-highlight-color:transparent}.action-pill--primary{background:var(--tang-red);color:#fff;box-shadow:0 4px 12px #a9322633;width:100%;max-width:280px}.action-pill--secondary{background:#fff;color:var(--hsk-ink);border:1px solid var(--hsk-border);box-shadow:var(--shadow-sm);width:100%;max-width:280px}.action-pill--ghost{background:transparent;color:var(--hsk-ink-muted);font-size:14px;padding:8px 16px;min-height:40px;border-radius:20px}.action-pill--ghost:active{background:#0000000a}.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}.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}.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-color:var(--card-bg-elevated);background-image:var(--texture-card);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-color:var(--card-bg-elevated);background-image:var(--texture-card);border:1px solid rgba(0,0,0,.07);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-sm);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}.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;position:relative}.vl-bottom-bar__close{position:absolute;top:50%;left:8px;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--hsk-ink-muted);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}.topics-sheet{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;justify-content:flex-end}.topics-sheet__backdrop{position:absolute;inset:0;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .3s ease both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.topics-sheet__drawer{position:relative;background:var(--tang-paper);background-image:var(--texture-paper);border-top-left-radius:24px;border-top-right-radius:24px;padding:12px 16px calc(var(--safe-area-bottom) + 32px);max-height:85dvh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;animation:slideUp .4s cubic-bezier(.16,1,.3,1) both;box-shadow:0 -4px 24px #00000026}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.topics-sheet__handle{width:40px;height:4px;background:#0000001a;border-radius:4px;margin:0 auto 8px}.topics-sheet__header{text-align:center;padding:0 0 8px}.topics-sheet__title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--hsk-ink);margin:0;letter-spacing:-.3px}.topics-sheet__subtitle{font-size:13px;color:var(--hsk-ink-muted);margin:4px 0 0;font-weight:400}.topics-sheet__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.unit-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px 12px 24px;background:var(--card-bg-elevated);background-image:var(--texture-card);border:1px solid var(--hsk-border);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--duration-normal) var(--ease-spring);overflow:hidden;-webkit-tap-highlight-color:transparent;animation:cardFadeIn .4s ease both}.unit-card:active{transform:scale(.96);box-shadow:0 1px 3px #0000000d}.unit-card__watermark{position:absolute;top:-10%;right:-10%;font-family:var(--font-chinese);font-size:120px;font-weight:900;color:#a9322608;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none}.unit-card__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.star-filled{color:var(--hsk-gold);text-shadow:0 0 8px rgba(255,215,0,.4)}.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-muted);font-weight:700;background:var(--tang-paper-dark);padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}.unit-card--done{border-color:var(--hsk-jade-20);background:#065f4605}.unit-card--done .unit-card__watermark{color:#065f460a}.unit-card__stars{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:2px;font-size:14px;line-height:1;z-index:2}.star-filled{color:var(--hsk-gold)}.star-empty{color:#00000014}.video-feed{position:fixed;inset:0;background:#0a0a0a;overflow:hidden}.vf-hsk-badge{position:fixed;top:calc(var(--safe-area-top) + 16px);right:16px;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:calc(var(--safe-area-top) + 16px);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}}