:root{font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.47059;font-weight:400;color:#1d1d1f;background:#fbfbfd;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.022em}html.dark{--bg: #1a1a2e;--bg-card: #16213e;--text: #e5e5e5;--text-muted: #9ca3af;--border: #374151}html.dark body{background:#1a1a2e;color:#e5e5e5}html.dark .topbar,html.dark .panel-card{background:#16213e;border-color:#374151}html.dark .lesson-page-card{background:#1a1a2e}html.dark .lesson-copy-card{background:#16213e}html.dark .text-input,html.dark .student-select{background:#0f3460;color:#e5e5e5;border-color:#374151}html.dark .family-card{border-color:#374151}html.dark .topbar-dropdown{background:#16213e;border-color:#374151}html.dark .topbar-dropdown-item{color:#e5e5e5}html.dark .topbar-dropdown-item:hover{background:#0f3460}html.dark .info-box,html.dark .tip-card{background:#0f3460;border-color:#374151}html.dark .button.ghost{color:#93c5fd;border-color:#374151}html.dark .game-hub-card{border-color:#374151}html.dark .nav-btn{color:#9ca3af}html.dark .nav-btn.active{color:#60a5fa}html.dark .wip-banner{background:#422006;color:#fbbf24;border-color:#92400e}html.dark .main-letters-sidebar{background:#16213e;border-color:#374151}html.dark .sidebar-letter{border-color:#374151;color:#e5e5e5}html.dark .minimize-btn{background:#16213e;border-color:#374151;color:#9ca3af}html.dark .app-footer{background:#16213e;color:#9ca3af}html.dark h1,html.dark h2,html.dark h3,html.dark h4{color:#f3f4f6}html.dark .eyebrow{color:#60a5fa}html.dark .lead{color:#9ca3af}html.dark .ws-cell{background:#0f3460;border-color:#374151;color:#e5e5e5}html.dark .ws-word-chip{background:#16213e;border-color:#374151;color:#e5e5e5}html.dark .login-card{background:#16213e}html.dark .stat-card{background:#0f3460;border-color:#374151}*{box-sizing:border-box}.family-card-sound,.dc-sound,.puzzle-piece-sound,.fc-review-chip small{opacity:0;transition:opacity .2s ease}.family-card:hover .family-card-sound,.family-card:active .family-card-sound,.family-card:focus .family-card-sound,.dc-card:hover .dc-sound,.dc-card:active .dc-sound,.dc-card:focus .dc-sound,.puzzle-piece:hover .puzzle-piece-sound,.puzzle-piece:active .puzzle-piece-sound,.puzzle-piece:focus .puzzle-piece-sound,.fc-review-chip:hover small,.fc-review-chip:active small{opacity:1}html,body,#root{min-height:100%}body{margin:0;background:#fbfbfd}a{text-decoration:none;color:inherit}.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}button,select,input{font:inherit}button{border:none;cursor:pointer}code{background:#f3f4f6;padding:2px 8px;border-radius:8px}.wip-banner{background:#fef3c7;color:#92400e;text-align:center;padding:6px 16px;font-size:13px;font-weight:600;letter-spacing:.01em;border-bottom:1px solid #fcd34d}.wip-link{color:#92400e;font-weight:700;text-decoration:underline}.wip-link:hover{color:#78350f}.section-head-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.minimize-btn{flex-shrink:0;width:36px;height:36px;border-radius:10px;border:2px solid #e5e7eb;background:white;font-size:18px;font-weight:700;color:#6b7280;cursor:pointer;display:grid;place-items:center;transition:all .15s ease}.minimize-btn:hover{background:#f3f4f6;border-color:#d1d5db;color:#374151}.app-shell{min-height:100vh;display:flex;flex-direction:column}.page-with-sidebar{flex:1}.app-footer{text-align:center;padding:24px 16px;margin-top:32px;border-top:1px solid rgba(0,0,0,.08);color:#86868b;font-size:13px}.app-footer p{margin:0 0 4px}.footer-links{display:flex;gap:16px;justify-content:center;align-items:center}.footer-link{color:#6e6e73;text-decoration:underline;font-size:13px;background:none;border:none;cursor:pointer;padding:0}.footer-link:hover{color:#0071e3}.footer-logout{color:#ef4444}.footer-logout:hover{color:#dc2626}.footer-disclaimer{font-size:11px;color:#9ca3af;font-style:italic;margin:4px 0}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(251,251,253,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid rgba(0,0,0,.1);height:48px;max-width:100vw;overflow:visible;box-sizing:border-box}.topbar-brand-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;flex-shrink:0}.topbar-logo{font-size:22px;line-height:1}.topbar-title{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#1d1d1f}.topnav-main{display:flex;gap:2px;flex:1;justify-content:center}.nav-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:980px;font-weight:600;font-size:13px;color:#86868b;transition:all .25s cubic-bezier(.4,0,.2,1)}.nav-btn:hover{background:rgba(0,0,0,.04);color:#1d1d1f}.nav-btn.active{background:#0071e3;color:#fff}.nav-icon{font-size:16px}.nav-label{font-size:13px}.topbar-right{display:flex;align-items:center;gap:8px;position:relative}.topbar-more-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:transparent;font-size:18px;font-weight:700;color:#86868b;letter-spacing:1px;transition:all .15s ease;padding:0}.topbar-more-btn:hover{background:rgba(0,0,0,.06);color:#1d1d1f}.topbar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40}.topbar-dropdown{position:absolute;top:100%;right:0;margin-top:6px;min-width:180px;background:#fff;border-radius:14px;border:.5px solid rgba(0,0,0,.1);box-shadow:0 4px 24px #0000001f;padding:6px;z-index:50;animation:slide-up .15s cubic-bezier(.25,.1,.25,1)}.topbar-dropdown-item{display:block;width:100%;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;color:#1d1d1f;background:transparent;text-align:left;transition:background .12s ease}.topbar-dropdown-item:hover{background:#f5f5f7}.topbar-logout{color:#ef4444}.topbar-logout:hover{background:#fef2f2}.button-row,.status-row,.nav-row,.progress-item,.progress-left,.progress-right,.lesson-top-row,.profile-top-row,.choice-row,.trace-help-row,.dashboard-title-row{display:flex;align-items:center}.button-row,.choice-row{gap:12px}.parent-card,.student-chip,.muted-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;background:#ffffff;border:1px solid #e5e7eb;min-width:180px}.parent-card span,.student-chip,.switcher-label,.muted,.light,.app-subtitle{color:#6b7280}.student-switcher{display:flex;flex-direction:column;gap:6px}.student-select,.text-input{min-height:44px;padding:12px 16px;border-radius:12px;border:1px solid rgba(0,0,0,.1);background:#ffffff;transition:border-color .2s ease;font-size:16px}.text-input:focus,.student-select:focus{outline:none;border-color:#0071e3;box-shadow:0 0 0 3px #0071e333}.text-input{width:100%}.field-stack{display:flex;flex-direction:column;gap:6px}.field-label{font-weight:700;font-size:14px;color:#374151}.page-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 40px}.app-title{margin:0;font-size:30px;font-weight:800}.app-subtitle{margin:4px 0 0}.eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0071e3}.stack-xl,.stack-lg,.stack-md,.hero-copy,.login-card{display:flex;flex-direction:column}.stack-xl{gap:28px}.stack-lg,.hero-copy,.login-card{gap:20px}.stack-md{gap:14px}.hero-card,.panel-card,.lesson-page-card,.login-card{background:rgba(255,255,255,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.04);border-radius:24px;box-shadow:0 4px 24px #0000000f}.hero-card{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;padding:28px}.panel-card{padding:28px;background:rgba(255,255,255,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.04);border-radius:20px;box-shadow:0 2px 12px #0000000a}.lesson-page-card{display:grid;grid-template-columns:360px 1fr;gap:24px;padding:24px}.lesson-page-card.single-column{grid-template-columns:1fr}.hero-copy h2,.panel-card h3,.lesson-copy-card h2,.lesson-page-card h2,.login-card h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#1d1d1f}.hero-copy p,.lead,.tip-card p,.compact-tip p{margin:0;color:#86868b;font-size:17px;font-weight:400;letter-spacing:-.014em}.stats-row,.info-grid,.game-choices,.mini-summary-grid,.lesson-grid,.profile-grid,.dashboard-grid{display:grid;gap:14px}.stats-row{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}.mini-summary-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.mini-summary-grid.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.tiny-card,.stat-card,.info-box,.tip-card,.recording-card,.profile-card,.dashboard-card{border-radius:18px;border:1px solid rgba(0,0,0,.06);background:#f5f5f7}.stat-card,.info-box,.tip-card,.recording-card,.dashboard-card{padding:18px 20px}.profile-card{padding:18px}.dashboard-card{display:flex;flex-direction:column;gap:16px}.stat-card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:100px;background:#f5f5f7;text-align:center}.profile-side-card{justify-content:center}.stat-number{font-size:36px;font-weight:700;letter-spacing:-.03em;color:#1d1d1f}.stat-label,.tiny-card span{color:#6b7280;font-weight:700;font-size:13px}.level-strip{display:flex;gap:10px;flex-wrap:wrap}.level-chip{display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:16px;cursor:pointer;transition:all .2s ease;font-size:14px;flex:1;min-width:160px;text-align:center}.level-chip:hover{transform:scale(1.03);box-shadow:0 4px 16px #00000014}.level-unlocked{background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.15);color:#1d1d1f}.level-locked{background:#f5f5f7;border:1px solid rgba(0,0,0,.06);color:#86868b}.level-chip span{font-size:12px;font-weight:700}.section-head,.nav-row,.progress-item,.lesson-top-row,.profile-top-row{justify-content:space-between}.wrap,.status-row,.progress-right{flex-wrap:wrap}.gap-sm{gap:8px}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:20px}.family-library{margin-top:20px}.family-grid-main{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}.family-main-block{display:flex;flex-direction:column}.family-main-block.family-expanded{grid-column:1 / -1}.family-main-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 10px;border-radius:16px;border:2px solid rgba(0,0,0,.06);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;background:none;color:#1d1d1f;font-family:inherit;width:100%}.family-main-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0000001a}.family-main-done{border-color:#34d399;box-shadow:inset 0 0 0 1px #34d399}.family-main-char{font-size:34px;font-weight:800;line-height:1}.family-main-sound{font-size:12px;font-weight:600;color:#4b5563;opacity:0;transition:opacity .2s ease}.family-main-card:hover .family-main-sound,.family-main-card:active .family-main-sound,.family-main-card:focus .family-main-sound{opacity:1}.family-main-count{font-size:10px;color:#9ca3af;font-weight:600}.family-expand-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:12px;background:rgba(0,0,0,.03);border-radius:14px;animation:tray-slide-in .2s ease}@keyframes tray-slide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.family-row-group{display:flex;flex-direction:column;gap:8px}.family-row-label{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;padding-left:4px}.family-row{display:flex;flex-wrap:wrap;gap:8px}.family-card{display:flex;flex-direction:column;align-items:center;gap:3px;width:72px;padding:10px 4px 8px;border-radius:16px;text-decoration:none;color:#1d1d1f;border:1px solid rgba(0,0,0,.04);box-shadow:0 1px 4px #0000000a;transition:transform .15s ease,box-shadow .15s ease;flex-shrink:0}.family-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0000001a}.family-card-done{border-color:#34d399;box-shadow:inset 0 0 0 1px #34d399}.family-card-char{font-size:28px;font-weight:800;line-height:1}.family-card-sound{font-size:11px;font-weight:600;color:#4b5563}.family-card-dots{display:flex;gap:4px;margin-top:2px}.dot{width:7px;height:7px;border-radius:50%;background:#d1d5db}.dot-done{background:#34d399}@media (max-width: 480px){.family-card{width:60px;padding:8px 2px 6px}.family-card-char{font-size:24px}.family-card-sound{font-size:10px}}.lesson-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1)}.lesson-card:hover{transform:scale(1.02);box-shadow:0 4px 20px #00000014}.lesson-char,.big-letter,.progress-letter,.choice-card{font-weight:800}.lesson-char{font-size:48px}.lesson-sound{margin:0;font-weight:700;font-size:15px;color:#374151}.lesson-word{margin:0;font-size:14px;color:#4b5563}.emoji-badge,.display-emoji,.profile-avatar{display:grid;place-items:center;border-radius:18px}.emoji-badge{width:48px;height:48px;background:rgba(255,255,255,.6);font-size:22px}.display-emoji{width:72px;height:72px;background:rgba(255,255,255,.72);font-size:32px}.profile-avatar{width:56px;height:56px;background:rgba(255,255,255,.8);font-size:28px}.word-picture-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:24px;border:1px solid rgba(255,255,255,.85);width:100%;max-width:320px;margin:0 auto}.word-picture-card.compact{padding:10px;max-width:100%}.word-picture-image{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.65)}.word-picture-copy{display:flex;flex-direction:column;gap:2px;text-align:center}.word-picture-copy span{color:#4b5563;font-weight:600}.lesson-display-stack.full-width{width:100%}.badge,.mini-pill,.pill{border-radius:999px;font-size:12px;font-weight:800}.badge{background:rgba(17,24,39,.9);color:#fff;padding:8px 12px}.mini-pill,.pill{padding:6px 10px;background:#eef2f7;color:#475569}.done{background:rgba(52,199,89,.1);color:#248a3d}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:980px;background:#0071e3;color:#fff;font-weight:600;font-size:14px;letter-spacing:-.01em;transition:all .2s ease}.button:hover,.choice-card:hover,.avatar-button:hover,.color-swatch:hover{transform:scale(1.02);background:#0077ED}.button.secondary{background:#5e5ce6}.button.success{background:#34c759}.button.ghost{background:rgba(0,0,0,.04);color:#1d1d1f;border:none}.button.ghost:hover{background:rgba(0,0,0,.08);box-shadow:none}.lesson-display{display:grid;place-items:center;border-radius:28px;min-height:420px}.lesson-display-stack{display:flex;flex-direction:column;align-items:center;gap:18px}.big-letter{font-size:170px}.big-letter-link{text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s ease;display:inline-block}.big-letter-link:hover{transform:scale(1.08)}.big-letter-link:active{transform:scale(.96)}.lesson-family-label-row{display:flex;align-items:center;gap:8px;justify-content:center}.lesson-family-label{margin:0;font-size:14px;font-weight:700;color:#00000080;text-transform:uppercase;letter-spacing:.06em}.mute-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.4);border:none;font-size:16px;cursor:pointer;transition:all .15s ease}.mute-btn:hover{background:rgba(255,255,255,.7)}.mute-btn-muted{opacity:.6}.lesson-family-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 12px}.lesson-family-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 6px;min-width:52px;border-radius:12px;background:rgba(255,255,255,.5);border:2px solid rgba(0,0,0,.08);text-decoration:none;color:#1d1d1f;transition:transform .15s ease,background .15s ease}.lesson-family-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.8)}.lesson-family-chip-active{background:rgba(255,255,255,.9);border-color:#1d1d1f;box-shadow:0 2px 8px #00000026;transform:scale(1.1)}.lesson-family-chip-active:hover{transform:scale(1.1)}.lesson-family-chip-done{border-color:#34d399}.lesson-family-chip-done:not(.lesson-family-chip-active){background:rgba(52,211,153,.15)}.lesson-family-chip-char{font-size:22px;font-weight:800;line-height:1}.lesson-family-chip-sound{font-size:10px;font-weight:600;color:#4b5563;opacity:0;transition:opacity .2s ease}.lesson-family-chip:hover .lesson-family-chip-sound,.lesson-family-chip:active .lesson-family-chip-sound{opacity:1}.info-grid,.speaking-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.info-label{display:block;margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7280}.trace-canvas{width:100%;max-width:100%;background:#ffffff;border:3px dashed #d1d5db;border-radius:24px;touch-action:none}.trace-help-row{justify-content:space-between;flex-wrap:wrap;gap:12px}.success-box,.message-box,.empty-state{padding:16px 18px;border-radius:18px;font-weight:700}.success-box{background:rgba(52,199,89,.08);color:#248a3d;border:1px solid rgba(52,199,89,.15)}.message-box{background:rgba(0,113,227,.06);color:#0071e3;border:1px solid rgba(0,113,227,.12)}.game-panel{display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:24px;background:#f8fafc;border:1px solid #e5e7eb}.play-button{align-self:flex-start}.game-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.choice-card{min-height:120px;border-radius:18px;background:#f5f5f7;border:2px solid rgba(0,0,0,.06);font-size:56px;transition:all .25s cubic-bezier(.4,0,.2,1)}.choice-card:not(:disabled):hover{border-color:#0071e3;background:rgba(0,113,227,.06);transform:scale(1.03)}.choice-correct{border-color:#34c759!important;background:rgba(52,199,89,.1)!important;animation:pulse-green .4s ease}.choice-wrong{border-color:#ff3b30!important;background:rgba(255,59,48,.08)!important;animation:shake .4s ease}@keyframes pulse-green{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.progress-list{display:flex;flex-direction:column;gap:14px}.progress-item{gap:16px;padding:18px 20px;background:#ffffff;border:1px solid #e5e7eb;border-radius:22px}.progress-left,.progress-right{gap:14px}.progress-letter{display:grid;place-items:center;width:70px;height:70px;border-radius:18px;font-size:34px}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:#fbfbfd}.login-card{width:min(480px,100%);padding:40px 36px;text-align:center}.login-hero{display:flex;flex-direction:column;align-items:center;gap:8px}.login-emoji{font-size:56px;margin-bottom:8px}.login-card h1{margin:0;font-size:40px;font-weight:700;letter-spacing:-.04em;color:#1d1d1f}.login-subtitle{margin:0;color:#6b7280;font-size:18px;font-weight:600}.login-card .field-stack{text-align:left}.login-btn{width:100%;min-height:50px;font-size:17px;background:#0071e3}.login-btn:hover{background:#0077ed}.login-note{margin:0;font-size:13px;color:#9ca3af}.google-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 16px;border:1px solid #dadce0;border-radius:12px;background:#fff;color:#3c4043;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s}.google-btn:hover{background:#f7f8f8;box-shadow:0 1px 3px #0000001f}.google-btn:disabled{opacity:.6;cursor:not-allowed}.login-divider{display:flex;align-items:center;gap:12px;color:#9ca3af;font-size:13px}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:#e5e7eb}.welcome-icon{font-size:64px;margin-bottom:8px}.two-column-panel{display:grid;grid-template-columns:1fr 1fr;gap:28px}.profile-grid,.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.avatar-button,.color-swatch{width:52px;height:52px;border-radius:16px;border:1px solid #d1d5db;background:#ffffff}.avatar-button{font-size:24px}.active-choice{outline:3px solid #7c3aed}.color-swatch{padding:0}.recording-card{display:flex;flex-direction:column;gap:10px}.audio-preview{width:100%}.empty-state{padding:16px 18px;border-radius:18px;background:#ffffff;border:1px solid #e5e7eb}.toolbar-row{display:flex;align-items:center;gap:12px}.search-input{min-width:260px}.locked-card{opacity:.6;position:relative;filter:grayscale(.3)}.disabled-link{opacity:.55;pointer-events:none}.arrow-button{background:#2563eb}.completion-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px;border-radius:24px;background:linear-gradient(180deg,#fff7ed 0%,#eff6ff 100%);border:1px solid #fed7aa}.confetti-box{min-width:120px;min-height:120px;display:grid;place-items:center;font-size:34px;border-radius:24px;background:rgba(255,255,255,.72)}.confetti-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.confetti-box-animated{position:relative;min-width:110px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:24px;background:rgba(255,255,255,.85);box-shadow:0 4px 24px #0000000f;animation:pop-in .5s cubic-bezier(.34,1.56,.64,1) both}.confetti-letter{font-size:48px;line-height:1}.confetti-star{font-size:22px;animation:pulse-star 1s ease infinite alternate}@keyframes pop-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse-star{0%{transform:scale(1)}to{transform:scale(1.3)}}.badge-popup{animation:badge-slide-in .6s cubic-bezier(.34,1.56,.64,1) both}.badge-popup-inner{display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:18px;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:2px solid #f59e0b;box-shadow:0 6px 24px #f59e0b40}.badge-popup-icon{font-size:38px;animation:badge-bounce .6s ease .3s both}.badge-popup-title{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#92400e}.badge-popup-name{margin:2px 0 0;font-size:18px;font-weight:700;color:#78350f}@keyframes badge-slide-in{0%{transform:translateY(30px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes badge-bounce{0%{transform:scale(0)}50%{transform:scale(1.4)}to{transform:scale(1)}}.badge-shelf{text-align:center}.badge-shelf-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;margin:0 0 8px}.badge-shelf-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.badge-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;background:#fef9c3;color:#854d0e;border:1px solid #fde047}.metric-row{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#475569;margin-bottom:6px}.metric-bar{height:12px;width:100%;border-radius:999px;background:#e5e7eb;overflow:hidden}.metric-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7c3aed 0%,#2563eb 100%)}.game-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.game-hub-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 20px;border-radius:20px;border:1px solid rgba(0,0,0,.04);box-shadow:0 2px 8px #0000000a;text-align:center;transition:transform .2s ease,box-shadow .2s ease}.game-hub-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0000001f}.game-hub-icon{font-size:48px}.game-hub-title{font-size:18px;color:#1f2937}.game-hub-desc{margin:0;font-size:13px;color:#4b5563;line-height:1.4}.memory-stats-row{display:flex;gap:20px;align-items:center}.memory-stat{font-size:15px;color:#6b7280;font-weight:600}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.memory-card{aspect-ratio:1;perspective:600px;background:none;border:none;padding:0;cursor:pointer}.memory-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s ease}.memory-flipped .memory-card-inner{transform:rotateY(180deg)}.memory-card-front,.memory-card-back{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:18px;backface-visibility:hidden;font-weight:800}.memory-card-front{background:linear-gradient(135deg,#0071e3,#5856d6);color:#fff;font-size:32px}.memory-card-back{background:#ffffff;border:2px solid #e5e7eb;transform:rotateY(180deg);padding:8px}.memory-matched .memory-card-back{border-color:#34c759;background:rgba(52,199,89,.06)}.memory-char{font-size:36px;font-weight:800}.memory-meaning{font-size:14px;font-weight:700;color:#374151;text-align:center;word-break:break-word}.word-match-board{display:flex;gap:16px;align-items:stretch}.word-match-column{flex:1;display:flex;flex-direction:column;gap:10px}.word-match-divider{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:24px;flex-shrink:0}.wm-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db}.word-match-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;border-radius:18px;border:2px solid #d1d5db;background:#ffffff;cursor:pointer;transition:all .2s ease;font:inherit}.word-match-tile:hover:not(:disabled){border-color:#7c3aed;background:#faf5ff}.wm-selected{border-color:#7c3aed!important;background:#ede9fe!important;box-shadow:0 0 0 3px #7c3aed33}.wm-matched{border-color:#22c55e!important;background:#f0fdf4!important;opacity:.7}.wm-wrong{border-color:#ef4444!important;background:#fef2f2!important;animation:shake .4s ease}.wm-char{font-size:32px;font-weight:800}.wm-sound{font-size:12px;color:#6b7280;font-weight:600}.wm-word{font-size:18px;font-weight:800}.wm-english{font-size:12px;color:#6b7280;font-weight:600}.speed-ready{display:flex;flex-direction:column;align-items:center;gap:24px;padding:48px 24px}.speed-ready-icon{font-size:80px;animation:pulse-green 1.5s ease infinite}.speed-start-btn{min-width:200px;min-height:56px;font-size:18px;background:linear-gradient(135deg,#f59e0b,#ef4444)}.speed-start-btn:hover{background:linear-gradient(135deg,#d97706,#dc2626)}.speed-header{display:flex;flex-direction:column;gap:8px}.speed-timer-bar{width:100%;height:16px;border-radius:999px;background:#e5e7eb;overflow:hidden}.speed-timer-fill{height:100%;border-radius:999px;transition:width 1s linear,background .3s ease}.speed-info-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.speed-time{font-size:20px;font-weight:800;color:#374151}.speed-score{font-size:16px;color:#6b7280}.speed-streak{padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f;font-weight:800;font-size:14px;animation:pulse-green .6s ease}.speed-question{display:flex;flex-direction:column;gap:20px}.speed-prompt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#ede9fe,#dbeafe)}.speed-prompt-word{font-size:28px;font-weight:800}.speed-prompt-english{font-size:16px;color:#4b5563;font-weight:600}.speed-choice{min-height:100px;font-size:48px}.speed-results{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 24px}.speed-results-card{display:flex;flex-direction:column;align-items:center;gap:4px}.speed-results-score{font-size:72px;font-weight:800;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.speed-results-label{font-size:18px;font-weight:700;color:#6b7280}.speed-results-details{display:flex;gap:32px}.speed-detail{display:flex;flex-direction:column;align-items:center;gap:2px}.speed-detail strong{font-size:24px;color:#1f2937}.speed-detail span{font-size:12px;color:#9ca3af;font-weight:700}.speed-stars{font-size:40px}.puzzle-placed{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.puzzle-slot{width:72px;height:80px;display:grid;place-items:center;border-radius:16px;border:2px dashed #d1d5db;background:#f9fafb;transition:all .3s ease}.puzzle-filled{border-style:solid;border-color:#22c55e;background:#f0fdf4}.puzzle-missing{border-color:#f59e0b;background:#fffbeb;animation:pulse-green 1.5s ease infinite}.puzzle-revealed{border-color:#7c3aed;background:#ede9fe;animation:pulse-green .5s ease}.puzzle-slot-char{font-size:32px;font-weight:800}.puzzle-slot-num{font-size:18px;font-weight:800;color:#9ca3af}.puzzle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;justify-items:center}.puzzle-piece{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 20px;border-radius:20px;border:2px solid #d1d5db;background:linear-gradient(180deg,#ffffff 0%,#f3f4f6 100%);cursor:pointer;transition:all .2s ease;font:inherit;width:100%}.puzzle-piece:hover:not(:disabled){border-color:#7c3aed;background:linear-gradient(180deg,#faf5ff 0%,#ede9fe 100%);transform:translateY(-2px);box-shadow:0 6px 16px #0000001a}.puzzle-piece-char{font-size:36px;font-weight:800}.puzzle-piece-sound{font-size:12px;color:#6b7280;font-weight:600}.puzzle-piece-correct{border-color:#22c55e!important;background:linear-gradient(180deg,#f0fdf4 0%,#dcfce7 100%)!important;animation:pulse-green .4s ease}.puzzle-piece-wrong{border-color:#ef4444!important;background:linear-gradient(180deg,#fef2f2 0%,#fecaca 100%)!important;animation:shake .4s ease}.puzzle-piece-lg{padding:20px 16px}.puzzle-piece-lg .puzzle-piece-char{font-size:44px}.puzzle-grid-4{grid-template-columns:repeat(4,1fr)}.puzzle-prompt-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;background:linear-gradient(135deg,#f5f5f7,#fff);border-radius:16px;border:1px solid rgba(0,0,0,.06);text-align:center}.puzzle-prompt-emoji{font-size:56px;line-height:1}.puzzle-prompt-sound{font-size:36px;font-weight:700;color:#0071e3;font-style:italic}.puzzle-prompt-word{font-size:24px;font-weight:600;color:#1d1d1f}.puzzle-prompt-hint{font-size:15px;color:#86868b}@media (max-width: 900px){.hero-card,.lesson-page-card,.two-column-panel,.stats-row,.info-grid,.speaking-grid,.game-choices,.mini-summary-grid.three-col{grid-template-columns:1fr}.topbar{padding:6px 8px;gap:2px;height:44px}.topbar-title{display:none}.topnav-main{flex:1 1 auto;min-width:0;overflow:hidden}.nav-label{display:none}.nav-btn{padding:6px 8px;flex-shrink:0}.nav-icon{font-size:18px}.topbar-right{flex-shrink:0}.student-switcher{display:none}.topbar-dropdown{position:fixed;top:auto;right:8px;left:8px;bottom:8px;min-width:auto;width:auto;border-radius:16px;padding:8px;box-shadow:0 -4px 32px #0000002e;max-height:70vh;overflow-y:auto}.topbar-dropdown-item{padding:14px 16px;font-size:16px}.topbar-overlay{background:rgba(0,0,0,.3)}.student-select{max-width:110px}.page-wrap{width:min(100% - 20px,1180px)}.hero-copy h2,.panel-card h3,.lesson-copy-card h2,.lesson-page-card h2,.login-card h1{font-size:28px}.big-letter{font-size:130px}.toolbar-row,.completion-hero{flex-direction:column;align-items:stretch}.search-input{min-width:0;width:100%}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.lesson-char{font-size:40px}}.mobile-only{display:none}@media (max-width: 768px){.mobile-only{display:block}.mobile-hide{display:none!important}.stack-xl{display:flex;flex-direction:column}.mobile-order-1{order:1}.mobile-order-2{order:2}.mobile-order-3{order:3}.mobile-order-4{order:4}.mobile-order-5{order:5}}@media (max-width: 768px){.game-hub-grid{grid-template-columns:1fr 1fr}.puzzle-grid-4{grid-template-columns:repeat(2,1fr)}.puzzle-prompt-emoji{font-size:44px}.puzzle-prompt-sound{font-size:28px}.speak-letter-display{gap:14px;padding:18px}.speak-big-char{font-size:60px}}@media (max-width: 480px){.game-choices{grid-template-columns:repeat(2,1fr)}.level-strip{flex-direction:column}.level-chip{min-width:0}.memory-grid{grid-template-columns:repeat(3,1fr);gap:8px}.word-match-board{flex-direction:column}.word-match-divider{flex-direction:row;width:100%;height:24px}.speed-results-details{gap:20px}.game-hub-grid{grid-template-columns:1fr}.puzzle-grid{grid-template-columns:repeat(3,1fr)}.puzzle-grid-4{grid-template-columns:repeat(2,1fr)}.puzzle-piece-lg .puzzle-piece-char{font-size:32px}.puzzle-prompt-card{padding:20px 16px}.puzzle-prompt-emoji{font-size:36px}.puzzle-prompt-sound{font-size:24px}.puzzle-prompt-word{font-size:18px}.lesson-page-card,.panel-card{padding:16px;margin:0 -8px;border-radius:12px;overflow:visible}.choice-row{flex-wrap:wrap}.two-column-panel .stack-lg form .button{width:100%;margin-bottom:12px}.button-row{gap:8px}.button{padding:10px 18px;font-size:14px}.speak-letter-display{flex-direction:column;text-align:center;gap:10px}.speak-big-char{font-size:48px}.speak-result{flex-direction:column;text-align:center}.speak-complete-bar{flex-direction:column;gap:10px;text-align:center}}.speak-letter-display{display:flex;align-items:center;gap:20px;padding:24px;background:linear-gradient(135deg,#f5f5f7,#fff);border-radius:16px;border:1px solid rgba(0,0,0,.06)}.speak-big-char{font-size:72px;line-height:1;font-weight:600}.speak-letter-info{display:flex;flex-direction:column;gap:4px}.speak-sound{font-size:20px;font-weight:600;color:#1d1d1f}.speak-meaning{font-size:15px;color:#86868b}.speak-section{padding-top:20px;border-top:1px solid rgba(0,0,0,.06)}.speak-step-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.speak-step-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#0071e3;color:#fff;font-size:14px;font-weight:600}.speak-mode-tabs{display:flex;gap:0;background:#f5f5f7;border-radius:980px;padding:3px;margin-bottom:16px}.speak-tab{flex:1;padding:8px 16px;border-radius:980px;font-size:14px;font-weight:500;background:transparent;color:#86868b;transition:all .25s cubic-bezier(.25,.1,.25,1)}.speak-tab-active{background:#fff;color:#1d1d1f;box-shadow:0 1px 4px #00000014}.speak-check-area,.speak-record-area{display:flex;flex-direction:column;gap:14px;align-items:center}.speak-mic-btn{min-width:200px;font-size:16px;padding:14px 28px;border-radius:980px;background:#0071e3;color:#fff;font-weight:600;transition:all .25s cubic-bezier(.25,.1,.25,1)}.speak-mic-btn:hover{background:#0077ed;transform:scale(1.02)}.speak-mic-listening{background:#ff3b30;animation:pulse-mic 1.2s ease-in-out infinite}.speak-mic-listening:hover{background:#ff453a}@keyframes pulse-mic{0%,to{box-shadow:0 0 #ff3b304d}50%{box-shadow:0 0 0 12px #ff3b3000}}.speak-result{display:flex;gap:14px;padding:16px 20px;border-radius:14px;width:100%;max-width:440px;animation:slide-up .3s cubic-bezier(.25,.1,.25,1)}@keyframes slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.speak-result-pass{background:#e8faf0;border:1px solid #34c759}.speak-result-fail{background:#fff3f0;border:1px solid #ff9500}.speak-result-icon{font-size:32px;line-height:1}.speak-result-body{flex:1}.speak-result-body strong{display:block;font-size:16px;margin-bottom:4px}.speak-result-body p{margin:0;font-size:14px;color:#424245;line-height:1.4}.speak-score{margin-top:6px;font-size:13px;color:#86868b}.speak-hint{font-size:13px;color:#86868b;text-align:center;margin:0}.speak-complete-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#e8faf0;border-radius:14px;border:1px solid #34c759;font-weight:500}.recording-card{display:flex;flex-direction:column;gap:10px;padding:16px;background:#f5f5f7;border-radius:14px;width:100%;max-width:440px}.audio-preview{width:100%;border-radius:8px}@media (max-width: 600px){.speak-letter-display{flex-direction:column;text-align:center;gap:10px}.speak-big-char{font-size:56px}.speak-result{flex-direction:column;text-align:center}.speak-complete-bar{flex-direction:column;gap:10px;text-align:center}}.how-to-play{border-radius:14px;border:1px solid rgba(0,0,0,.06);background:#f5f5f7;overflow:hidden}.how-to-play-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:transparent;font-size:15px;font-weight:600;color:#1d1d1f;cursor:pointer}.how-to-play-toggle:hover{background:rgba(0,0,0,.03)}.how-to-play-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#0071e3;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.how-to-play-chevron{margin-left:auto;font-size:20px;color:#86868b;transition:transform .25s cubic-bezier(.25,.1,.25,1);transform:rotate(0)}.how-to-play-chevron-open{transform:rotate(90deg)}.how-to-play-body{padding:0 16px 16px;animation:slide-up .2s cubic-bezier(.25,.1,.25,1)}.how-to-play-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.how-to-play-steps li{font-size:14px;line-height:1.5;color:#424245}.how-to-play-tip{margin:12px 0 0;padding:10px 14px;background:#e8faf0;border-radius:10px;font-size:13px;color:#1a7f37;line-height:1.5}.daily-challenge-section{background:linear-gradient(135deg,#eff6ff 0%,#f5f3ff 100%);border:1px solid #c7d2fe}.daily-challenge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}.dc-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:16px;text-decoration:none;color:#1d1d1f;border:2px solid rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}.dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.dc-char{font-size:32px;line-height:1}.dc-sound{font-size:12px;font-weight:600;color:#6b7280}.dc-misses{font-size:10px;color:#dc2626;font-weight:600}.weak-letters-section{background:linear-gradient(135deg,#fef2f2 0%,#fff7ed 100%);border:1px solid #fecaca}.weak-card{background:#fff!important;border-color:#fca5a5!important}.fc-progress-bar{width:120px;height:6px;background:#e5e7eb;border-radius:100px;overflow:hidden}.fc-progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:100px;transition:width .4s ease}.fc-card{perspective:800px;cursor:pointer;min-height:280px}.fc-card-inner{position:relative;width:100%;min-height:280px;transition:transform .5s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.fc-card-flipped .fc-card-inner{transform:rotateY(180deg)}.fc-card-front,.fc-card-back{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:24px;backface-visibility:hidden;padding:24px}.fc-card-front{background:linear-gradient(135deg,#dbeafe 0%,#ede9fe 100%);border:2px solid #93c5fd}.fc-card-back{background:linear-gradient(135deg,#d1fae5 0%,#fef3c7 100%);border:2px solid #6ee7b7;transform:rotateY(180deg)}.fc-card-char{font-size:72px;line-height:1}.fc-card-hint{font-size:14px;color:#6b7280;font-weight:500}.fc-card-sound{font-size:22px;font-weight:700;color:#374151}.fc-card-word{font-size:18px;color:#4b5563}.fc-card-english{font-size:14px;color:#6b7280;font-style:italic}.fc-actions{display:flex;gap:12px;justify-content:center}.fc-btn-unsure{background:#fbbf24!important;color:#78350f!important}.fc-btn-unsure:hover{background:#f59e0b!important}.fc-btn-know{background:#34d399!important;color:#064e3b!important}.fc-btn-know:hover{background:#10b981!important}.fc-review-list{text-align:center}.fc-review-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.fc-review-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:#fef3c7;border:1px solid #fde68a;font-size:20px;font-weight:600}.fc-review-chip small{font-size:12px;color:#92400e;font-weight:500}@media (max-width: 480px){.fc-card-char{font-size:56px}.fc-card-inner,.fc-card{min-height:220px}.daily-challenge-grid{grid-template-columns:repeat(3,1fr)}}.twin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.twin-tile{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;border:2px solid #e5e7eb;background:#f9fafb;cursor:pointer;transition:all .15s ease;font-size:0}.twin-tile:hover{border-color:#93c5fd;background:#eff6ff}.twin-tile-char{font-size:32px;font-weight:800}.twin-found{background:#d1fae5!important;border-color:#34d399!important;animation:pop-in .3s ease}.twin-wrong{background:#fee2e2!important;border-color:#f87171!important;animation:shake .4s ease}@media (max-width: 480px){.twin-grid{grid-template-columns:repeat(3,1fr)}.twin-tile-char{font-size:26px}}.sorter-current{text-align:center;padding:20px;background:linear-gradient(135deg,#eff6ff 0%,#f5f3ff 100%);border-radius:20px;border:2px solid #c7d2fe}.sorter-current-label{margin:0 0 8px;font-size:14px;color:#6b7280;font-weight:600}.sorter-current-char{font-size:64px;font-weight:800;display:block}.sorter-buckets{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sorter-bucket{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:18px;border:3px dashed #d1d5db;background:#fafafa;cursor:pointer;min-height:120px;transition:border-color .2s,background .2s}.sorter-bucket:hover{background:#f0f9ff;border-color:#93c5fd}.sorter-bucket-label{font-size:13px;font-weight:700;color:#374151}.sorter-bucket-items{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.sorter-bucket-char{font-size:28px;font-weight:700}.sorter-wrong-char{color:#ef4444;text-decoration:line-through}.wb-prompt{text-align:center;padding:16px;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-radius:18px}.wb-emoji{font-size:48px;display:block;margin-bottom:6px}.wb-english{font-size:18px;font-weight:700;color:#78350f}.wb-word{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.wb-letter{display:grid;place-items:center;width:52px;height:60px;border-radius:12px;font-size:30px;font-weight:800;background:#f3f4f6;border:2px solid #d1d5db}.wb-letter-blank{background:#dbeafe;border-color:#3b82f6;color:#3b82f6;font-size:24px;animation:pulse-star 1s ease infinite alternate}.wb-letter-revealed{background:#d1fae5;border-color:#34d399;color:#065f46;animation:pop-in .3s ease}.vm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.vm-table{border-collapse:separate;border-spacing:4px;width:100%}.vm-header-fam{font-size:11px;color:#6b7280;font-weight:600;text-align:left;padding:4px 8px}.vm-header{font-size:11px;color:#9ca3af;font-weight:600;text-align:center;padding:4px}.vm-fam-label{font-size:12px;font-weight:700;color:#374151;padding:4px 8px;white-space:nowrap}.vm-cell{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font-size:22px;font-weight:700;background:#f3f4f6;border:1px solid #e5e7eb}.vm-cell-blank{background:#dbeafe;border:2px dashed #3b82f6;color:#3b82f6;cursor:pointer;font-size:18px}.vm-cell-blank:hover{background:#bfdbfe}.vm-cell-selected{background:#93c5fd!important;border-color:#2563eb!important;color:#fff!important;box-shadow:0 0 0 3px #3b82f64d}.vm-cell-filled{background:#d1fae5;border-color:#34d399;color:#065f46;animation:pop-in .3s ease}@media (max-width: 480px){.vm-cell{width:36px;height:36px;font-size:18px}.sorter-current-char{font-size:48px}.wb-letter{width:42px;height:50px;font-size:24px}}.page-with-sidebar{display:flex;align-items:flex-start;flex:1;min-height:0}.page-with-sidebar>.page-wrap{flex:1;min-width:0}.main-letters-sidebar{position:sticky;top:64px;width:148px;flex-shrink:0;background:#f9fafb;border-radius:16px 0 0 16px;padding:10px 8px;border-left:1px solid #e5e7eb;max-height:calc(100vh - 64px);overflow-y:auto;scrollbar-width:thin;z-index:10}.main-letters-sidebar::-webkit-scrollbar{width:4px}.main-letters-sidebar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.sidebar-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;text-align:center;margin:0 0 6px}.sidebar-letters{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;justify-items:center}.sidebar-letter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:40px;height:40px;border-radius:10px;font-size:18px;font-weight:800;text-decoration:none;color:#1d1d1f;border:2px solid rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease}.sidebar-letter-char{line-height:1}.sidebar-letter-sound{font-size:8px;font-weight:600;color:#4b5563;opacity:0;transition:opacity .2s ease;line-height:1}.sidebar-letter:hover .sidebar-letter-sound,.sidebar-letter:active .sidebar-letter-sound{opacity:1}.sidebar-letter:hover{transform:scale(1.15);box-shadow:0 2px 8px #0000001f}.sidebar-letter-done{border-color:#34d399;background:rgba(52,211,153,.15)!important}.mobile-letters-tab,.mobile-letters-drawer-overlay{display:none}@media (max-width: 768px){.main-letters-sidebar{display:none}.mobile-letters-tab{display:flex;align-items:center;justify-content:center;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:35;width:36px;height:72px;background:#0071e3;color:#fff;border-radius:12px 0 0 12px;font-size:20px;font-weight:800;writing-mode:vertical-rl;text-orientation:mixed;box-shadow:-2px 2px 12px #00000026;cursor:pointer;border:none;padding:0;letter-spacing:1px}.mobile-letters-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.35);z-index:90}.mobile-letters-drawer-overlay.open{display:block}.mobile-letters-drawer{position:fixed;bottom:0;left:0;right:0;z-index:91;background:#fff;border-radius:20px 20px 0 0;padding:16px 12px 24px;max-height:70vh;overflow-y:auto;box-shadow:0 -4px 32px #0000002e;animation:slide-up .2s ease}html.dark .mobile-letters-drawer{background:#16213e}.mobile-drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mobile-drawer-header h3{font-size:16px;font-weight:700;margin:0}.mobile-drawer-close{width:32px;height:32px;border-radius:50%;background:#f5f5f7;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}html.dark .mobile-drawer-close{background:#374151;color:#e5e5e5}.mobile-drawer-letters{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.mobile-drawer-letters .sidebar-letter{width:100%;height:44px;font-size:18px}.mobile-drawer-letters .sidebar-letter-sound{opacity:1}}.family-card-locked{opacity:.55;filter:grayscale(.4);position:relative}.card-lock{position:absolute;top:2px;right:2px;font-size:10px;line-height:1}.family-lock-badge{font-size:10px;font-weight:600;color:#f59e0b;margin-left:6px;text-transform:none;letter-spacing:0}.locked-content{text-align:center;padding:48px 24px}.locked-icon{font-size:64px;display:block;margin-bottom:16px}.unlock-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:16px;padding:16px 20px;margin-top:16px}.unlock-banner-icon{font-size:32px;flex-shrink:0}.unlock-banner p{margin:2px 0 0;font-size:13px;color:#78350f}.unlock-banner strong{color:#92400e}.unlock-banner .button{flex-shrink:0;white-space:nowrap}.unlock-hero{text-align:center;padding:40px 24px}.unlock-icon{font-size:64px;display:block;margin-bottom:12px}.unlock-features{display:flex;flex-direction:column;gap:16px;margin-top:16px}.unlock-feature{display:flex;align-items:flex-start;gap:14px}.unlock-feature-icon{font-size:28px;flex-shrink:0}.unlock-feature p{margin:2px 0 0;font-size:14px;color:#6b7280}.unlock-pricing{text-align:center;padding:32px 24px}.unlock-price-card{max-width:320px;margin:0 auto}.unlock-price-label{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin:0 0 4px}.unlock-price{font-size:48px;font-weight:800;color:#1d1d1f;margin:0 0 4px}.unlock-price-note{font-size:14px;color:#6b7280;margin:0 0 20px}.unlock-buy-btn{width:100%;font-size:17px;padding:14px 24px}.unlock-guarantee{font-size:12px;color:#9ca3af;margin:12px 0 0}@media (max-width: 480px){.unlock-banner{flex-direction:column;text-align:center}}.ws-word-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.ws-word-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;border:2px solid #e5e7eb;background:white;cursor:pointer;transition:all .2s ease}.ws-word-chip:hover{border-color:#4a90d9;background:#eff6ff}.ws-word-found{border-color:#34d399!important;background:#d1fae5!important;text-decoration:line-through;opacity:.7}.ws-word-amharic{font-size:18px;font-weight:800}.ws-word-english{font-size:11px;color:#6b7280;font-weight:600}.ws-grid-container{display:flex;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none}.ws-grid{display:grid;gap:4px;max-width:440px;width:100%}.ws-cell{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;font-size:22px;font-weight:800;background:#f3f4f6;border:2px solid #e5e7eb;cursor:pointer;transition:all .15s ease;color:#1d1d1f}.ws-cell:hover{background:#e5e7eb}.ws-cell-selected{background:#93c5fd!important;border-color:#2563eb!important;color:#fff!important;transform:scale(1.05);box-shadow:0 0 0 3px #3b82f64d}.ws-cell-found{background:#d1fae5!important;border-color:#34d399!important;color:#065f46!important}.ws-cell-hint{background:#fef3c7!important;border-color:#f59e0b!important;animation:pulse-hint 1s ease infinite}@keyframes pulse-hint{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.ws-success{text-align:center;padding:20px;background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-radius:16px;border:2px solid #34d399}.ws-success-icon{font-size:48px;display:block;margin-bottom:8px}.ws-success p{font-size:18px;font-weight:700;color:#065f46;margin:0}@media (max-width: 480px){.ws-cell{font-size:17px;border-radius:8px}.ws-word-amharic{font-size:15px}.ws-grid{gap:3px}}.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px}.onboarding-card{background:#fff;max-width:420px;width:100%;border-radius:20px;padding:40px 32px 32px;text-align:center;box-shadow:0 12px 40px #00000040;transition:opacity .3s ease,transform .3s ease}.onboarding-fade-in{opacity:1;transform:translateY(0)}.onboarding-fade-out{opacity:0;transform:translateY(8px)}.onboarding-slide-left{opacity:0;transform:translate(40px)}.onboarding-slide-right{opacity:0;transform:translate(-40px)}.onboarding-icon{font-size:64px;line-height:1;margin-bottom:16px}.onboarding-title{font-size:22px;font-weight:700;margin:0 0 8px;color:#1d1d1f}.onboarding-text{font-size:15px;color:#555;margin:0 0 28px;line-height:1.5}.onboarding-dots{display:flex;justify-content:center;gap:8px;margin-bottom:24px}.onboarding-dot{width:10px;height:10px;border-radius:50%;background:#ddd;transition:background .25s ease}.onboarding-dot-active{background:#6c5ce7}.onboarding-actions{display:flex;justify-content:center;gap:12px}.onboarding-btn{padding:10px 28px;border-radius:12px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:background .2s ease,transform .1s ease}.onboarding-btn:active{transform:scale(.97)}.onboarding-btn-primary{background:#6c5ce7;color:#fff}.onboarding-btn-primary:hover{background:#5a4bd1}.onboarding-btn-back{background:#f0f0f0;color:#333}.onboarding-btn-back:hover{background:#e4e4e4}.badges-page{max-width:720px;margin:0 auto;padding:16px}.badges-count{text-align:center;font-size:15px;color:#6b7280;margin-bottom:16px}.badges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width: 640px){.badges-grid{grid-template-columns:repeat(3,1fr)}}.badge-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px;border-radius:16px;border:2px solid #e5e7eb;background:#fff;gap:4px}.badge-card-earned{background:#fef9c3;border-color:#fcd34d}.badge-card-locked{opacity:.5;filter:grayscale(1)}.badge-icon{font-size:40px;line-height:1.2}.badge-title{font-weight:700;font-size:14px}.badge-desc{font-size:12px;color:#6b7280}.kb-score-row{display:flex;gap:16px;justify-content:center;font-size:16px}.kb-score{color:#374151}.kb-accuracy{color:#6b7280}.kb-prompt{text-align:center;padding:20px}.kb-prompt-sound{display:block;font-size:72px;font-weight:900;line-height:1;color:#4a90d9;margin-bottom:12px}.kb-feedback{text-align:center;font-size:18px;font-weight:700;padding:12px;border-radius:12px}.kb-correct{background:#d1fae5;color:#065f46}.kb-wrong{background:#fee2e2;color:#991b1b}.kb-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:360px;margin:0 auto}.kb-choice{display:grid;place-items:center;padding:16px;font-size:32px;font-weight:800;border-radius:14px;border:2px solid #e5e7eb;background:white;cursor:pointer;transition:all .15s ease}.kb-choice:hover{transform:scale(1.05);border-color:#4a90d9;box-shadow:0 2px 8px #0000001a}.kb-choice:disabled{opacity:.7;cursor:default}.kb-choice-correct{background:#d1fae5!important;border-color:#34d399!important;animation:pop-in .3s ease}.kb-choice-wrong{border-color:#ef4444!important;background:#fee2e2!important;animation:shake .3s ease}.kb-choice-char{font-size:inherit}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (max-width: 480px){.kb-prompt-sound{font-size:48px}.kb-choice{font-size:24px;padding:12px}.kb-choices{grid-template-columns:repeat(2,1fr)}}.worksheet-page{max-width:800px;margin:20px auto}.worksheet-header{text-align:center;margin-bottom:20px;display:none}.worksheet-grid{display:flex;flex-direction:column;gap:8px}.worksheet-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #e5e7eb}.worksheet-model{display:flex;flex-direction:column;align-items:center;min-width:70px}.worksheet-char{font-size:48px;font-weight:900;line-height:1}.worksheet-sound{font-size:12px;color:#6b7280;font-weight:600}.worksheet-practice{display:flex;gap:8px;flex:1}.worksheet-trace{display:grid;place-items:center;width:60px;height:60px;border:2px dashed #d1d5db;border-radius:10px;font-size:36px;font-weight:800;color:#d1d5db}.worksheet-blank{display:grid;place-items:center;width:60px;height:60px;border:2px solid #e5e7eb;border-radius:10px;background:#fafafa}@media print{.print-hide,.topbar,.app-footer,.main-letters-sidebar,.wip-banner{display:none!important}.print-only,.worksheet-header{display:block!important}.page-with-sidebar{display:block}.lesson-page-card{box-shadow:none;border:none;padding:0}.worksheet-row{break-inside:avoid}.worksheet-char{font-size:40px}.worksheet-trace,.worksheet-blank{width:50px;height:50px;font-size:30px}}