:root{--color-bg:#fcfdfd;--color-surface:#fdfefe;--color-btn-bg:#f3f6f6;--color-text:#212d30;--color-text-muted:#607276;--color-accent:#435060;--color-accent-hover:#2b3646;--color-brand-wordmark:#207079;--color-brand-tagline:#2c968c;--color-border:#dee7e6;--color-active:#eff2f6;--color-a-vowel:#fef9c3;--color-e-vowel:#ffedd5;--color-i-vowel:#f3e8ff;--color-o-vowel:#fee2e2;--color-u-vowel:#dbeafe;--color-y-vowel:#ecfccb;--font-family:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-size-base:16px;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-weight-normal:400;--font-weight-medium:500;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--header-height:60px;--nav-height:68px;--button-size:48px;--grid-gap:8px;--border-radius:6px;--transition-fast:.15s ease;--transition-normal:.25s ease;--home-blob-teal:#21caa8;--home-blob-aqua:#1bc5b4;--home-blob-splash:#25b5ef;--home-accent-a:#149077;--home-accent-b:#149fa3;--home-accent-c:#f78708;--home-card-soundboard:#e4f6f3;--home-card-soundboard-border:#9ad6ca;--home-card-dialogues:#fdede2;--home-card-dialogues-border:#ddb69d;--home-card-verbs:#dff1f6;--home-card-verbs-border:#9acad6}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-weight:var(--font-weight-normal);color:var(--color-text);background-color:var(--color-bg);min-height:100vh;line-height:1.5}button{cursor:pointer;font-family:inherit}#app{max-width:900px;min-height:100vh;padding:var(--nav-height) var(--space-md) var(--space-md);flex-direction:column;margin:0 auto;display:flex;overflow:visible}.header{align-items:center;gap:var(--space-md);padding:var(--space-md) 0;margin-bottom:var(--space-md);top:var(--nav-height);background:var(--color-bg);z-index:100;flex-direction:column;min-height:110px;padding-top:8px;padding-bottom:8px;display:flex;position:sticky}.header__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-medium);color:var(--color-text);letter-spacing:-.02em}.header__subtitle{color:var(--color-text-muted);font-size:.9rem;display:none}.dialect-selector--buttons{border-radius:var(--border-radius);border:1px solid var(--color-border);display:none;overflow:hidden}.dialect-selector--dropdown{padding:var(--space-xs) var(--space-sm);font-size:.9rem;font-family:var(--font-family);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;display:block}.dialect-selector--dropdown:focus{outline:2px solid var(--color-accent);outline-offset:2px}@media (min-width:1200px){.dialect-selector--buttons{display:inline-flex}.dialect-selector--dropdown{display:none}.header__subtitle{display:block}}.dialect-btn{padding:var(--space-xs) var(--space-sm);background:var(--color-surface);border:none;border-right:1px solid var(--color-border);color:var(--color-text-muted);transition:all var(--transition-fast);font-size:.8rem}.dialect-btn:last-child{border-right:none}.dialect-btn:hover{background:var(--color-active);color:var(--color-text)}.dialect-btn--active{background:var(--color-accent);color:#fff}.dialect-btn--active:hover{background:var(--color-accent-hover);color:#fff}.dialect-btn--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.dialect-btn--disabled:hover{background:var(--color-surface);color:var(--color-text-muted)}.info-panel{background:var(--color-bg);opacity:0;visibility:hidden;transition:opacity var(--transition-normal), visibility var(--transition-normal);z-index:10;padding:8px 0;position:absolute;inset:0;overflow:hidden}.info-panel--visible{opacity:1;visibility:visible}.info-panel__actions{top:var(--space-xs);right:max(var(--space-xs), calc(56px - (100vw - 100%) / 2));z-index:1;gap:2px;display:flex;position:absolute}.info-panel__pin,.info-panel__close{color:var(--color-text-muted);opacity:.5;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;padding:4px;font-size:.85rem;line-height:1}.info-panel__pin:hover,.info-panel__close:hover{opacity:1}.info-panel__pin{filter:grayscale()}.info-panel__pin--active{opacity:1;filter:none}.info-panel__close{font-size:1.1rem}.info-panel__columns{grid-template-columns:1fr 1fr 1fr;width:100%;height:100%;display:grid}.info-panel__col{justify-content:center;align-items:center;display:flex}.info-panel__col--left,.info-panel__col--center,.info-panel__col--right{justify-content:center}.info-panel__letter{font-size:3rem;font-weight:var(--font-weight-medium);color:var(--color-text);flex-shrink:0;justify-content:center;align-items:center;min-width:4rem;height:4rem;line-height:1;display:flex}.info-panel__details{text-align:center;flex-direction:column;gap:4px;display:flex}.info-panel__row{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.info-panel__name{font-size:1rem;font-weight:var(--font-weight-medium);color:var(--color-text)}.info-panel__ipa{color:var(--color-text-muted);transition:color var(--transition-fast);font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;font-size:1rem;text-decoration:none}.info-panel__ipa--link{color:var(--color-accent);text-underline-offset:2px;text-decoration:underline}.info-panel__ipa--link:hover{color:var(--color-accent-hover)}.info-panel__tone{color:var(--color-text-muted);min-height:1.2em;font-size:.8rem;line-height:1.2}.info-panel__hint{color:var(--color-text-muted);max-width:200px;min-height:1.2em;font-size:.75rem;font-style:italic;line-height:1.2}.info-panel__examples{text-align:center;flex-direction:column;gap:8px;display:flex}.example-word{flex-direction:row;align-items:baseline;gap:6px;display:flex}.example-word__speaker{color:var(--color-text-muted);cursor:pointer;opacity:.5;transition:opacity var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;padding:0;font-size:.6rem;line-height:1}.example-word__speaker:hover{opacity:1;color:var(--color-accent)}.example-word__viet{font-size:1rem;font-weight:var(--font-weight-medium);color:var(--color-text);cursor:pointer}.example-word__viet:hover{color:var(--color-accent)}.example-word__eng{color:var(--color-accent);text-underline-offset:2px;transition:color var(--transition-fast);font-size:.75rem;text-decoration:underline}.example-word__eng:hover{color:var(--color-accent-hover)}.soundboard{flex-direction:column;flex:1;display:flex}.soundboard__grid{gap:var(--grid-gap);grid-template-columns:repeat(5,1fr);justify-items:center;display:grid}.letter-btn{width:var(--button-size);height:var(--button-size);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);font-size:var(--font-size-lg);color:var(--color-text);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.letter-btn:hover{border-color:var(--color-accent);background:var(--color-active)}.letter-btn:active{transform:scale(.95)}.letter-btn--active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.letter-btn--active:hover{background:var(--color-accent-hover)}.letter-btn--a-vowel{background:var(--color-a-vowel);border-color:#fde047}.letter-btn--a-vowel:hover{background:#fde68a;border-color:#facc15}.letter-btn--a-vowel.letter-btn--active{background:#ca8a04;border-color:#a16207}.letter-btn--e-vowel{background:var(--color-e-vowel);border-color:#fdba74}.letter-btn--e-vowel:hover{background:#fed7aa;border-color:#fb923c}.letter-btn--e-vowel.letter-btn--active{background:#ea580c;border-color:#c2410c}.letter-btn--i-vowel{background:var(--color-i-vowel);border-color:#d8b4fe}.letter-btn--i-vowel:hover{background:#e9d5ff;border-color:#c084fc}.letter-btn--i-vowel.letter-btn--active{background:#9333ea;border-color:#7e22ce}.letter-btn--o-vowel{background:var(--color-o-vowel);border-color:#fca5a5}.letter-btn--o-vowel:hover{background:#fecaca;border-color:#f87171}.letter-btn--o-vowel.letter-btn--active{background:#dc2626;border-color:#b91c1c}.letter-btn--u-vowel{background:var(--color-u-vowel);border-color:#93c5fd}.letter-btn--u-vowel:hover{background:#bfdbfe;border-color:#60a5fa}.letter-btn--u-vowel.letter-btn--active{background:#2563eb;border-color:#1d4ed8}.letter-btn--y-vowel{background:var(--color-y-vowel);border-color:#bef264}.letter-btn--y-vowel:hover{background:#d9f99d;border-color:#a3e635}.letter-btn--y-vowel.letter-btn--active{background:#65a30d;border-color:#4d7c0f}.drawer{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);width:100%;margin:var(--space-md) 0;opacity:0;transition:opacity var(--transition-normal), transform var(--transition-normal);grid-column:1/-1;display:none;overflow:hidden;transform:translateY(-10px)}.drawer--open{opacity:1;display:block;transform:translateY(0)}.drawer__header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);background:var(--color-surface);justify-content:space-between;align-items:center;display:flex}.drawer__letter{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text)}.drawer__close{font-size:var(--font-size-xl);color:var(--color-text-muted);padding:var(--space-xs);transition:color var(--transition-fast);background:0 0;border:none;line-height:1}.drawer__close:hover{color:var(--color-text)}.drawer__variants{gap:var(--space-sm);padding:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}.variant-btn{min-width:44px;height:44px;padding:var(--space-sm) var(--space-md);background:var(--color-btn-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);font-size:var(--font-size-lg);color:var(--color-text);transition:all var(--transition-fast)}.variant-btn--a-vowel{background:#fefce8;border-color:#fef08a}.variant-btn--a-vowel:hover{background:var(--color-a-vowel);border-color:#fde047}.variant-btn--e-vowel{background:#fff7ed;border-color:#fed7aa}.variant-btn--e-vowel:hover{background:var(--color-e-vowel);border-color:#fdba74}.variant-btn--i-vowel{background:#faf5ff;border-color:#e9d5ff}.variant-btn--i-vowel:hover{background:var(--color-i-vowel);border-color:#d8b4fe}.variant-btn--o-vowel{background:#fef2f2;border-color:#fecaca}.variant-btn--o-vowel:hover{background:var(--color-o-vowel);border-color:#fca5a5}.variant-btn--u-vowel{background:#eff6ff;border-color:#bfdbfe}.variant-btn--u-vowel:hover{background:var(--color-u-vowel);border-color:#93c5fd}.variant-btn--y-vowel{background:#f7fee7;border-color:#d9f99d}.variant-btn--y-vowel:hover{background:var(--color-y-vowel);border-color:#bef264}.variant-btn:hover{background:var(--color-active);border-color:var(--color-accent)}.variant-btn:active,.variant-btn--playing{background:var(--color-accent);color:#fff;transform:scale(.95)}@media (min-width:480px){.soundboard__grid{grid-template-columns:repeat(6,1fr)}}@media (min-width:600px){:root{--button-size:96px;--grid-gap:12px}.soundboard__grid{grid-template-columns:repeat(6,1fr)}.header{flex-direction:row;justify-content:space-between;align-items:center;min-height:120px}.letter-btn{font-size:2rem}.variant-btn{min-width:88px;height:88px;font-size:2rem}.drawer__variants{gap:var(--space-md);padding:var(--space-lg)}}@media (min-width:768px){:root{--button-size:96px}.soundboard__grid{grid-template-columns:repeat(8,1fr)}#app{max-width:1000px}}@media (min-width:1024px){:root{--button-size:96px}.soundboard__grid{grid-template-columns:repeat(10,1fr)}#app{max-width:1200px}}@media (max-height:700px){:root{--button-size:42px;--grid-gap:6px}.header{padding:var(--space-sm) 0;margin-bottom:var(--space-sm)}.drawer__variants{padding:var(--space-sm)}}.separator{border:none;border-top:1px solid var(--color-border);margin:var(--space-xl) 0 calc(var(--space-xl) * 1.5)}.soundboard_combinations{padding:var(--space-md) 0}.combinations__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-medium);color:var(--color-text);text-align:center;margin-bottom:var(--space-xs)}.combinations__subtitle{color:var(--color-text-muted);text-align:center;margin-bottom:var(--space-lg);font-size:.9rem}.combo-group{margin-bottom:var(--space-lg)}.combo-group__label{font-size:1rem;font-weight:var(--font-weight-medium);color:var(--color-text-muted);margin-bottom:var(--space-sm);padding-left:var(--space-xs)}.combo-group__grid{gap:var(--grid-gap);grid-template-columns:repeat(auto-fill,minmax(80px,1fr));display:grid}.combo-btn{padding:var(--space-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);min-height:60px;transition:all var(--transition-fast);flex-direction:column;justify-content:center;align-items:center;display:flex}.combo-btn__text{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text)}.combo-btn__hint{color:var(--color-text-muted);margin-top:2px;font-size:.65rem}.combo-btn:hover{border-color:var(--color-accent);background:var(--color-active)}.combo-btn:active,.combo-btn--playing{background:var(--color-accent);border-color:var(--color-accent);transform:scale(.95)}.combo-btn:active .combo-btn__text,.combo-btn--playing .combo-btn__text,.combo-btn:active .combo-btn__hint,.combo-btn--playing .combo-btn__hint{color:#fff}.combo-btn--consonantClusters{background:#f0fdf4;border-color:#86efac}.combo-btn--consonantClusters:hover{background:#dcfce7;border-color:#4ade80}.combo-btn--consonantClusters:active,.combo-btn--consonantClusters.combo-btn--playing{background:#16a34a;border-color:#15803d}.combo-btn--diphthongs{background:#f0fdfa;border-color:#5eead4}.combo-btn--diphthongs:hover{background:#ccfbf1;border-color:#2dd4bf}.combo-btn--diphthongs:active,.combo-btn--diphthongs.combo-btn--playing{background:#0d9488;border-color:#0f766e}.combo-btn--triphthongs{background:#eef2ff;border-color:#a5b4fc}.combo-btn--triphthongs:hover{background:#e0e7ff;border-color:#818cf8}.combo-btn--triphthongs:active,.combo-btn--triphthongs.combo-btn--playing{background:#4f46e5;border-color:#4338ca}.soundboard_vocabulary{padding:var(--space-md) 0}.vocabulary__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-medium);color:var(--color-text);text-align:center;margin-bottom:var(--space-xs)}.vocabulary__subtitle{color:var(--color-text-muted);text-align:center;margin-bottom:var(--space-lg);font-size:.9rem}.vocabulary__category{margin-bottom:var(--space-xl)}.vocabulary__category-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text);margin-bottom:var(--space-md);padding-bottom:var(--space-xs);border-bottom:2px solid var(--color-border)}.vocabulary__grid{gap:var(--grid-gap);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));display:grid}.vocab-btn{padding:var(--space-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);min-height:92px;transition:all var(--transition-fast);flex-direction:column;justify-content:center;align-items:center;display:flex}.vocab-btn__emoji{margin-bottom:var(--space-xs);font-size:2rem;line-height:1}.vocab-btn__primary{color:var(--color-text);text-align:center;font-size:.8rem;font-weight:500;line-height:1.2}.vocab-btn__translation{color:var(--color-text-muted);opacity:.75;text-align:center;margin-top:2px;font-size:.64rem;line-height:1.2}.vocab-btn:hover{border-color:var(--color-accent);background:var(--color-active);transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.vocab-btn:active{background:var(--color-accent);border-color:var(--color-accent);transform:scale(.95)}.vocab-btn:active .vocab-btn__primary,.vocab-btn:active .vocab-btn__translation{color:#fff;opacity:1}@media (min-width:600px){.vocabulary__grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.vocab-btn{min-height:104px;padding:var(--space-md)}.vocab-btn__emoji{font-size:2.25rem}.vocab-btn__primary{font-size:.85rem}.vocab-btn__translation{font-size:.68rem}}@media (min-width:768px){.vocabulary__grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media (min-width:600px){.combo-group__grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.combo-btn{min-height:72px;padding:var(--space-md)}.combo-btn__text{font-size:1.5rem}.combo-btn__hint{font-size:.75rem}}@media (min-width:768px){.combo-group__grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}.letter-btn:focus-visible,.variant-btn:focus-visible,.dialect-btn:focus-visible,.drawer__close:focus-visible,.combo-btn:focus-visible,.vocab-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.tts-indicator{bottom:var(--space-md);right:var(--space-md);align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--color-accent);color:#fff;border-radius:var(--border-radius);opacity:0;transition:opacity var(--transition-fast), transform var(--transition-fast);z-index:1000;pointer-events:none;font-size:.75rem;display:flex;position:fixed;transform:translateY(10px)}.tts-indicator--visible{opacity:1;transform:translateY(0)}.tts-indicator__icon{font-size:1rem;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.back-link{color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--border-radius);opacity:.7;transition:opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);z-index:200;-webkit-backdrop-filter:blur(4px);background:#ffffffd9;align-items:center;gap:4px;padding:6px 10px;font-size:.8rem;text-decoration:none;display:inline-flex;position:fixed;top:12px;left:12px}.user-link{width:36px;height:36px;color:var(--color-text-muted);border:1px solid var(--color-border);opacity:.7;transition:opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);z-index:200;-webkit-backdrop-filter:blur(4px);background:#ffffffd9;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;position:fixed;top:12px;right:12px}.user-link:hover,.user-link:focus-visible{opacity:1;color:var(--color-text);background:var(--color-surface);outline:none;transform:scale(1.04)}.user-link svg{width:20px;height:20px;display:block}.dark-mode-btn{width:36px;height:36px;color:var(--color-text-muted);border:1px solid var(--color-border);opacity:.7;transition:opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);-webkit-backdrop-filter:blur(4px);background:#ffffffd9;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.dark-mode-btn:hover,.dark-mode-btn:focus-visible{opacity:1;color:var(--color-text);background:var(--color-surface);outline:none;transform:scale(1.04)}.dark-mode-btn svg{width:17px;height:17px;display:block}:root[data-theme=dark] .dark-mode-btn{background:#1f1f1fd9}.home-body .dark-mode-btn{background:color-mix(in srgb, var(--home-canvas) 58%, var(--color-surface));border-color:color-mix(in srgb, var(--color-border) 75%, var(--home-blob-aqua))}:root[data-theme=dark] .home-body .dark-mode-btn{background:color-mix(in srgb, var(--home-canvas) 72%, #274249);border-color:color-mix(in srgb, var(--color-border) 80%, var(--home-accent-b))}.back-link:hover,.back-link:focus-visible{opacity:1;color:var(--color-text);background:var(--color-surface);outline:none}.back-link__arrow{font-size:.95rem;line-height:1}@media (max-width:767px){.back-link{border-radius:50%;justify-content:center;gap:0;width:36px;height:36px;padding:0}.back-link__text{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.back-link__arrow{font-size:1.1rem}.header,.dialogues__intro{padding-left:56px;padding-right:56px}}.home-body{--home-ink:#122e36;--home-ink-muted:#4e6d74;--home-canvas:#f4faf9;min-height:100dvh;color:var(--home-ink);--color-text:var(--home-ink);--color-text-muted:var(--home-ink-muted);--color-border:#d2e5e1;--color-surface:#fcfdfde0;--color-brand-wordmark:#1e6971;--color-brand-tagline:#239586;--home-bg-gradient:radial-gradient(ellipse 120% 90% at 12% -5%, #d0f1ea8c 0%, transparent 52%), radial-gradient(ellipse 100% 80% at 92% 8%, #cbeaf680 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 48% 100%, #fae2c666 0%, transparent 55%);background:var(--home-bg-gradient), var(--home-canvas);overflow-x:hidden}:root[data-theme=dark] .home-body{--home-ink:#e9f1f0;--home-ink-muted:#91aca6;--home-canvas:#0e1c20;--color-text:var(--home-ink);--color-text-muted:var(--home-ink-muted);--color-border:#2e423e;--color-surface:#17282ceb;--color-brand-wordmark:#95dacc;--color-brand-tagline:#5cccc8;--home-bg-gradient:radial-gradient(ellipse 120% 90% at 10% -5%, #24605473 0%, transparent 52%), radial-gradient(ellipse 100% 80% at 95% 10%, #24576b66 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 50% 100%, #6b4f2e40 0%, transparent 55%)}.home-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.home-bg__blob{filter:blur(60px);opacity:.45;border-radius:50%;animation:14s ease-in-out infinite blobFloat;position:absolute}.home-bg__blob--1{background:var(--home-blob-teal);width:320px;height:320px;top:-80px;left:-80px}.home-bg__blob--2{background:var(--home-blob-splash);width:360px;height:360px;animation-delay:-5s;top:30%;right:-120px}.home-bg__blob--3{background:var(--home-blob-aqua);width:280px;height:280px;animation-delay:-9s;bottom:-100px;left:30%}:root[data-theme=dark] .home-bg__blob{opacity:.18}@keyframes blobFloat{0%,to{transform:translate(0)scale(1)}33%{transform:translate(20px,-30px)scale(1.05)}66%{transform:translate(-15px,25px)scale(.96)}}.home{z-index:1;justify-content:center;align-items:center;gap:var(--space-xl);min-height:100vh;padding:80px var(--space-md) var(--space-xl);text-align:center;flex-direction:column;display:flex;position:relative}.home__hero{align-items:center;gap:var(--space-md);flex-direction:column;max-width:640px;animation:.6s both heroIn;display:flex}@keyframes heroIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.home__badge{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:999px;align-items:center;gap:8px;padding:6px 14px 6px 10px;font-size:.85rem;font-weight:500;display:inline-flex;box-shadow:0 2px 8px #0000000a}.home__badge-flag{font-size:1.05rem;line-height:1}.home__title{color:var(--color-text);letter-spacing:-.025em;font-size:clamp(2.25rem,7vw,4rem);font-weight:700;line-height:1.1}.home__title-accent{color:var(--home-accent-b);isolation:isolate;padding:.05em .18em;font-weight:700;display:inline-block;position:relative}.home__title-accent-circle{pointer-events:none;z-index:-1;width:calc(100% + .4em);height:calc(100% + .3em);color:var(--home-accent-b);opacity:.92;stroke-dasharray:520;stroke-dashoffset:520px;animation:1.1s cubic-bezier(.65,0,.35,1) .35s forwards funCircleDraw;position:absolute;top:-.18em;left:-.18em;overflow:visible}@keyframes funCircleDraw{to{stroke-dashoffset:0}}.home__subtitle{color:var(--color-text-muted);letter-spacing:-.01em;margin-top:-.25rem;font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:500}.home__lede{color:var(--color-text-muted);max-width:36ch;font-size:clamp(1rem,2.2vw,1.15rem);line-height:1.55}.home__features{gap:var(--space-md);grid-template-columns:1fr;width:100%;max-width:720px;display:grid}@media (min-width:720px){.home__features{align-items:stretch;gap:var(--space-lg);grid-template-columns:1fr auto 1fr;max-width:1080px}}.feature-card{align-items:center;gap:var(--space-md);padding:var(--space-lg);text-align:left;color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border);transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);border-radius:18px;flex-direction:row;text-decoration:none;animation:.6s both cardIn;display:flex;position:relative;overflow:hidden}.feature-card:first-child{animation-delay:.1s}.feature-card:nth-child(2){animation-delay:.2s}.feature-card:nth-child(3){animation-delay:.3s}@media (min-width:720px){.feature-card{align-items:flex-start;gap:var(--space-sm);padding:var(--space-xl);flex-direction:column}}.feature-card--soundboard{background:var(--home-card-soundboard);border-color:var(--home-card-soundboard-border)}.feature-card--dialogues{background:var(--home-card-dialogues);border-color:var(--home-card-dialogues-border)}.feature-card--verbs{background:var(--home-card-verbs);border-color:var(--home-card-verbs-border)}.feature-card:hover,.feature-card:focus-visible{outline:none;transform:translateY(-4px);box-shadow:0 12px 28px #0000001a}:root[data-theme=dark] .feature-card:hover,:root[data-theme=dark] .feature-card:focus-visible{box-shadow:0 12px 28px #00000080}.feature-card__icon{background:var(--color-surface);width:56px;height:56px;transition:transform var(--transition-normal);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;font-size:2.5rem;line-height:1;display:inline-flex;box-shadow:0 2px 8px #0000000f}.feature-card:hover .feature-card__icon:not(.feature-card__icon--pair),.feature-card:focus-visible .feature-card__icon:not(.feature-card__icon--pair){transform:scale(1.08)rotate(-6deg)}@media (min-width:720px){.feature-card__icon{width:64px;height:64px;font-size:2.75rem}}.feature-card__body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.feature-card__title{color:var(--color-text);font-size:1.1rem;font-weight:600;line-height:1.25}@media (min-width:720px){.feature-card__title{font-size:1.2rem}}.feature-card__desc{color:var(--color-text-muted);font-size:.9rem;line-height:1.45}.feature-card__arrow{color:var(--color-text-muted);transition:transform var(--transition-fast), color var(--transition-fast);flex-shrink:0;font-size:1.4rem}.feature-card:hover .feature-card__arrow,.feature-card:focus-visible .feature-card__arrow{color:var(--color-text);transform:translate(4px)}@media (min-width:720px){.feature-card__arrow{margin-top:var(--space-sm);align-self:flex-end}}.feature-card__audience{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#145245;background:color-mix(in srgb, var(--home-card-soundboard) 55%, var(--color-surface));border:1px solid var(--home-card-soundboard-border);border-radius:999px;align-self:flex-start;align-items:center;margin-bottom:4px;padding:3px 9px;font-size:.68rem;font-weight:700;line-height:1;display:inline-flex}.feature-card--dialogues .feature-card__audience{color:#6f3015;background:color-mix(in srgb, var(--home-card-dialogues) 55%, var(--color-surface));border-color:var(--home-card-dialogues-border)}:root[data-theme=dark] .feature-card__audience{background:color-mix(in srgb, var(--home-card-soundboard) 20%, transparent);color:#90dfcf}:root[data-theme=dark] .feature-card--dialogues .feature-card__audience{background:color-mix(in srgb, var(--home-card-dialogues) 20%, transparent);color:#eaae86}.feature-card__icon--pair{flex-direction:row;gap:3px;width:auto;min-width:72px;padding:0 12px;font-size:1.35rem}.feature-card__flag{line-height:1}.feature-card__flag--from{opacity:.5;filter:saturate(.75)}.feature-card__flag--to{opacity:1;transform-origin:60% 80%;transition:transform var(--transition-fast)}.feature-card:hover .feature-card__flag--to,.feature-card:focus-visible .feature-card__flag--to{animation:.7s cubic-bezier(.34,1.56,.64,1) both flagWiggle}@keyframes flagWiggle{0%{transform:scale(1)rotate(0)}35%{transform:scale(1.18)rotate(-8deg)}60%{transform:scale(1.06)rotate(5deg)}80%{transform:scale(1.12)rotate(-2deg)}to{transform:scale(1.1)rotate(0)}}.feature-card__flag-sep{color:var(--color-text-muted);opacity:.65;transition:transform var(--transition-fast);margin:0 1px;font-size:.65rem;line-height:1}.feature-card:hover .feature-card__flag-sep,.feature-card:focus-visible .feature-card__flag-sep{transform:translate(2px)}.feature-card:hover .feature-card__flag--from,.feature-card:focus-visible .feature-card__flag--from{opacity:.8;filter:saturate();transition:opacity var(--transition-fast), filter var(--transition-fast)}.home__features-or{align-items:center;gap:var(--space-sm);width:100%;color:var(--color-text-muted);opacity:.65;letter-spacing:.07em;font-size:.78rem;display:flex}.home__features-or:before,.home__features-or:after{content:"";background:var(--color-border);flex:1;height:1px}@media (min-width:720px){.home__features-or{width:auto;height:auto;padding:var(--space-md) var(--space-xs);text-align:center;flex-direction:column;align-self:stretch}.home__features-or:before,.home__features-or:after{width:1px;height:auto}}.home__footnote{color:var(--color-text-muted);opacity:.75;align-items:center;gap:8px;font-size:.825rem;display:inline-flex}.home__footnote-dot{background:var(--home-accent-b);width:6px;height:6px;box-shadow:0 0 0 4px color-mix(in srgb, var(--home-accent-b) 26%, transparent);border-radius:50%;animation:1.8s ease-in-out infinite pulse}.home-body .home-bg__blob{opacity:.52}:root[data-theme=dark] .home-body .home-bg__blob{opacity:.26}.home-body .home__badge{background:color-mix(in srgb, var(--color-surface) 88%, #f1f9f7);border-color:color-mix(in srgb, var(--color-border) 55%, var(--home-accent-b));box-shadow:0 4px 22px color-mix(in srgb, var(--home-blob-aqua) 12%, transparent), 0 1px 2px #0000000a}:root[data-theme=dark] .home-body .home__badge{background:color-mix(in srgb, var(--color-surface) 92%, #1c2c28);border-color:color-mix(in srgb, var(--color-border) 70%, var(--home-accent-b));box-shadow:0 4px 26px #0006}.home-body .feature-card:hover,.home-body .feature-card:focus-visible{box-shadow:0 18px 40px color-mix(in srgb, var(--home-blob-teal) 18%, transparent), 0 6px 16px #00000012;border-color:color-mix(in srgb, var(--home-blob-aqua) 40%, var(--color-border))}:root[data-theme=dark] .home-body .feature-card:hover,:root[data-theme=dark] .home-body .feature-card:focus-visible{box-shadow:0 18px 44px #0000008c, 0 0 0 1px color-mix(in srgb, var(--home-accent-b) 22%, transparent);border-color:color-mix(in srgb, var(--home-accent-b) 28%, var(--color-border))}.home-body .feature-card:hover .feature-card__arrow,.home-body .feature-card:focus-visible .feature-card__arrow{color:var(--home-accent-a)}.home-body .feature-card__icon{border:1px solid color-mix(in srgb, var(--color-border) 65%, var(--home-blob-aqua));background:color-mix(in srgb, var(--color-surface) 94%, #f8fbfb);box-shadow:0 3px 14px color-mix(in srgb, var(--home-blob-teal) 10%, transparent), 0 1px 3px #0000000d}:root[data-theme=dark] .home-body .feature-card__icon{background:color-mix(in srgb, var(--color-surface) 88%, #121e21);border-color:color-mix(in srgb, var(--color-border) 75%, var(--home-accent-b))}.home-body .lang-toggle{box-shadow:0 2px 8px color-mix(in srgb, var(--home-blob-teal) 8%, transparent);background:#e6f4f1d1}:root[data-theme=dark] .home-body .lang-toggle{box-shadow:none;background:#ffffff12}.home-body .user-link{background:color-mix(in srgb, var(--home-canvas) 58%, var(--color-surface));border-color:color-mix(in srgb, var(--color-border) 75%, var(--home-blob-aqua))}:root[data-theme=dark] .home-body .user-link{background:color-mix(in srgb, var(--home-canvas) 72%, #274249);border-color:color-mix(in srgb, var(--color-border) 80%, var(--home-accent-b))}.dialogues{padding-top:var(--space-xl)}.dialogues__intro{text-align:center;margin-bottom:var(--space-xl)}.dialogues__title{letter-spacing:-.02em;color:var(--color-text);margin-bottom:var(--space-sm);font-size:clamp(1.75rem,4.5vw,2.5rem);font-weight:600}.dialogues__subtitle{color:var(--color-text-muted);font-size:1rem}.scenarios{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:800px;margin:0 auto;display:grid}.scenario-card{align-items:flex-start;gap:var(--space-sm);padding:var(--space-lg);text-align:left;background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);border-radius:12px;flex-direction:column;animation:.4s both cardIn;display:flex}.scenario-card:hover,.scenario-card:focus-visible{border-color:var(--color-accent);outline:none;transform:translateY(-3px);box-shadow:0 8px 24px #00000014}.scenario-card__emoji{font-size:2.25rem;line-height:1}.scenario-card__title{color:var(--color-text);font-size:1.05rem;font-weight:600}.scenario-card__description{color:var(--color-text-muted);font-size:.875rem;line-height:1.4}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.scenario__topbar{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-inline:calc(-1 * var(--space-md));margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);top:var(--nav-height);z-index:100;background:var(--color-bg);display:flex;position:sticky}.scenario__back{color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--border-radius);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;align-items:center;gap:4px;padding:6px 12px;font-size:.875rem;display:inline-flex}.scenario__back:hover,.scenario__back:focus-visible{color:var(--color-text);background:var(--color-active);outline:none}.scenario__intro{text-align:center;margin-bottom:var(--space-lg);padding:var(--space-lg);background:var(--color-active);border-radius:12px}.scenario__emoji{margin-bottom:var(--space-xs);font-size:2.5rem;display:block}.scenario__title{margin-bottom:var(--space-xs);color:var(--color-text);font-size:1.5rem;font-weight:600}.scenario__setting{color:var(--color-text-muted);margin-bottom:var(--space-sm);font-size:.95rem;font-style:italic}.scenario__npc{color:var(--color-text-muted);font-size:.875rem}.scenario__npc-name{color:var(--color-text);font-weight:500}.scenario__title-hint,.scenario__setting-hint,.scenario__npc-hint{color:var(--color-text-muted);font-size:.8rem;font-style:italic;line-height:1.4}.scenario__title-hint{margin-top:-2px;margin-bottom:var(--space-xs)}.scenario__setting-hint{margin-top:-4px;margin-bottom:var(--space-sm)}.scenario__npc-hint{margin-top:2px}.outcome__title-hint,.outcome__description-hint{color:var(--color-text-muted);font-size:.85rem;font-style:italic;line-height:1.4}.outcome__title:has(+.outcome__title-hint:not([hidden])){margin-bottom:2px}.outcome__title-hint{margin-bottom:var(--space-sm)}.outcome__description:has(+.outcome__description-hint:not([hidden])){margin-bottom:4px}.outcome__description-hint{margin-bottom:var(--space-xl)}.scenario__thread{gap:var(--space-md);margin-bottom:var(--space-lg);flex-direction:column;display:flex}.bubble{gap:var(--space-sm);align-items:flex-start;animation:.35s both bubbleIn;display:flex}@keyframes bubbleIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.bubble--npc{margin-right:12%}.bubble--user{margin-left:12%}.bubble__avatar{aspect-ratio:1;background:var(--color-active);border-radius:50%;flex-shrink:0;justify-content:center;align-self:stretch;align-items:center;min-width:38px;min-height:38px;max-height:82px;font-size:1.4rem;display:flex}.bubble__content{background:var(--color-active);border-radius:14px;flex:1;min-width:0;padding:10px 14px}.bubble--user .bubble__content{background:var(--color-accent);color:#fff}.bubble__name{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;font-size:.7rem;font-weight:500}.bubble__text{color:inherit;font-size:1rem;line-height:1.4}.bubble__hint{color:var(--color-text-muted);margin-top:3px;font-size:.8rem;font-style:italic}.bubble--user .bubble__hint{color:#ffffffc7}.bubble__speak{border:1px solid var(--color-border);width:34px;height:34px;transition:background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-self:center;align-items:center;font-size:.95rem;display:flex}.bubble__speak:hover,.bubble__speak:focus-visible{background:var(--color-active);border-color:var(--color-accent);outline:none;transform:scale(1.05)}.bubble__content--typing{flex:none;align-items:center;gap:5px;padding:14px 16px;display:inline-flex}.bubble__dot{background:var(--color-text-muted);border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite typingDot}.bubble__dot:nth-child(2){animation-delay:.15s}.bubble__dot:nth-child(3){animation-delay:.3s}@keyframes typingDot{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.bubble--reaction{color:var(--color-text-muted);text-align:center;max-width:80%;margin:0 auto;padding:2px 12px;font-size:.875rem;font-style:italic;animation:.4s .2s both bubbleIn}.vi-word{cursor:help;border-bottom:1px dotted color-mix(in srgb, currentColor 45%, transparent);transition:border-color var(--transition-fast);position:relative}.vi-word:focus-visible{border-bottom-color:var(--color-accent);background:color-mix(in srgb, var(--color-accent) 12%, transparent);border-radius:3px;outline:none}.vi-word:after{content:attr(data-translation);color:#fff;letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;z-index:100;background:#1f2937;border-radius:6px;padding:5px 9px;font-size:.78rem;font-style:normal;font-weight:500;transition:opacity .14s,transform .14s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)translateY(4px);box-shadow:0 4px 12px #0000002e}.vi-word:before{content:"";pointer-events:none;opacity:0;z-index:100;border:5px solid #0000;border-top-color:#1f2937;transition:opacity .14s,transform .14s;position:absolute;bottom:calc(100% + 1px);left:50%;transform:translate(-50%)translateY(4px)}@media (hover:hover){.vi-word:hover:after,.vi-word:hover:before,.vi-word:focus-visible:after,.vi-word:focus-visible:before{opacity:1;transform:translate(-50%)translateY(0)}}@media (hover:none){.vi-word:after{white-space:normal;text-align:center;border-radius:9px;max-width:min(82vw,320px);padding:9px 14px;font-size:.95rem;line-height:1.35}.vi-word--tapped:after{opacity:1;bottom:calc(100% + 18px);transform:translate(-50%)translateY(0)}.vi-word--tapped:before{opacity:1;border-width:6px;bottom:calc(100% + 12px);transform:translate(-50%)translateY(0)}}.bubble--user .vi-word:after{color:#1f2937;background:#fff;box-shadow:0 4px 12px #00000040}.bubble--user .vi-word:before{border-top-color:#fff}.scenario__choices{gap:var(--space-sm);margin-top:var(--space-md);flex-direction:column;display:flex}.choice{align-items:center;gap:var(--space-sm);background:var(--color-surface);border:1.5px solid var(--color-border);text-align:left;cursor:pointer;transition:border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);border-radius:10px;flex-direction:row;padding:12px 16px;animation:.35s both bubbleIn;display:flex}.choice:hover,.choice:focus-visible{border-color:var(--color-accent);background:var(--color-active);outline:none;transform:translate(2px)}.choice__emoji{background:var(--color-active);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:1.4rem;line-height:1;display:flex}.choice:hover .choice__emoji,.choice:focus-visible .choice__emoji{background:var(--color-surface)}.choice__body{flex-direction:column;flex:1;align-items:flex-start;gap:3px;min-width:0;display:flex}.choice__vi{color:var(--color-text);font-size:1rem;font-weight:500}.choice__en{color:var(--color-text-muted);font-size:.85rem}.outcome{text-align:center;padding:var(--space-xl) var(--space-md);max-width:480px;margin:0 auto}.outcome__emoji{margin-bottom:var(--space-md);filter:drop-shadow(0 6px 14px #0000001f);transform-origin:50% 70%;font-size:clamp(4.5rem,16vw,7rem);line-height:1;display:block}.outcome__emoji.outcome--animate{animation:.7s cubic-bezier(.34,1.56,.64,1) both outcomeEmojiPop,2.4s ease-in-out .7s infinite outcomeEmojiWiggle}.outcome__title{margin-bottom:var(--space-sm);color:var(--color-text);font-size:clamp(1.5rem,4vw,2rem);font-weight:600}.outcome__title.outcome--animate{animation:.5s ease-out .25s both outcomeTextRise}.outcome__description{color:var(--color-text-muted);margin-bottom:var(--space-xl);font-size:1rem;line-height:1.5}.outcome__description.outcome--animate{animation:.5s ease-out .38s both outcomeTextRise}.outcome__title-hint.outcome--animate{animation:.5s ease-out .32s both outcomeTextRise}.outcome__description-hint.outcome--animate{animation:.5s ease-out .46s both outcomeTextRise}@keyframes outcomeEmojiPop{0%{opacity:0;transform:scale(.2)rotate(-12deg)}60%{opacity:1;transform:scale(1.15)rotate(4deg)}80%{transform:scale(.95)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes outcomeEmojiWiggle{0%,to{transform:rotate(0)translateY(0)}25%{transform:rotate(-3deg)translateY(-2px)}75%{transform:rotate(3deg)translateY(-2px)}}@keyframes outcomeTextRise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.outcome__emoji.outcome--animate,.outcome__title.outcome--animate,.outcome__description.outcome--animate,.outcome__title-hint.outcome--animate,.outcome__description-hint.outcome--animate{animation:none}}.outcome__actions{gap:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}.outcome__replay,.outcome__back{border-radius:var(--border-radius);cursor:pointer;transition:background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);padding:12px 24px;font-size:.95rem;font-weight:500}.outcome__replay{background:var(--color-accent);color:#fff;border:1.5px solid var(--color-accent)}.outcome__replay:hover,.outcome__replay:focus-visible{background:var(--color-accent-hover);border-color:var(--color-accent-hover);outline:none;transform:translateY(-1px)}.outcome__back{color:var(--color-text);border:1.5px solid var(--color-border);background:0 0}.outcome__back:hover,.outcome__back:focus-visible{background:var(--color-active);border-color:var(--color-accent);outline:none}.account{z-index:1;box-sizing:border-box;max-width:560px;padding:calc(env(safe-area-inset-top,0px) + 80px) var(--space-md) calc(env(safe-area-inset-bottom,0px) + var(--space-xl));min-height:calc(100dvh - var(--nav-height,68px));margin:0 auto;position:relative}.account__title{letter-spacing:-.02em;text-align:center;margin-bottom:var(--space-sm);color:var(--color-text);font-size:clamp(1.75rem,4.5vw,2.5rem);font-weight:600}.account__lede{text-align:center;color:var(--color-text-muted);margin-bottom:var(--space-xl)}.account__section{background:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-lg);margin-bottom:var(--space-md);border-radius:12px}.account__section-title{margin-bottom:var(--space-xs);color:var(--color-text);font-size:1.05rem;font-weight:600}.account__section-description{color:var(--color-text-muted);margin-bottom:var(--space-md);font-size:.9rem;line-height:1.5}.theme-toggle{background:var(--color-active);border-radius:999px;gap:2px;padding:4px;display:inline-flex}.theme-toggle__option{color:var(--color-text-muted);cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);background:0 0;border:none;border-radius:999px;align-items:center;gap:8px;padding:8px 18px;font-family:inherit;font-size:.9rem;font-weight:500;display:inline-flex}.theme-toggle__option:hover{color:var(--color-text)}.theme-toggle__option--active{color:var(--color-text);background:var(--color-surface);box-shadow:0 1px 3px #00000014}.theme-toggle__icon{font-size:1rem;line-height:1}:root[data-theme=dark]{--color-bg:#14191a;--color-surface:#1f2729;--color-btn-bg:#262e31;--color-text:#e7eeed;--color-text-muted:#9dabaf;--color-accent:#d7dde5;--color-accent-hover:#ebeff4;--color-brand-wordmark:#89cbd2;--color-brand-tagline:#67c1b8;--color-border:#374143;--color-active:#293132;--color-a-vowel:#44402a;--color-e-vowel:#4a3a2a;--color-i-vowel:#3a2e4a;--color-o-vowel:#4a2e2e;--color-u-vowel:#2a3a4a;--color-y-vowel:#3a4a2e;--home-blob-teal:#30a68e;--home-blob-aqua:#3bb0a4;--home-blob-splash:#39a5d0;--home-accent-a:#59cfb7;--home-accent-b:#3ec7cc;--home-accent-c:#f6ae31;--home-card-soundboard:#1c3631;--home-card-soundboard-border:#3b685f;--home-card-dialogues:#34271d;--home-card-dialogues-border:#6d5240;--home-card-verbs:#1d3034;--home-card-verbs-border:#3c5e67}:root[data-theme=dark] .home__cta,:root[data-theme=dark] .outcome__replay,:root[data-theme=dark] .verb-stage__btn--primary,:root[data-theme=dark] .quiz__finale-btn,:root[data-theme=dark] .bubble--user .bubble__content{color:#161616}:root[data-theme=dark] .bubble--user .bubble__hint{color:#161616b8}:root[data-theme=dark] .back-link,:root[data-theme=dark] .user-link{background:#1f1f1fd9}:root[data-theme=dark] .theme-toggle__option--active{background:var(--color-surface);box-shadow:0 1px 3px #0006}:root[data-theme=dark] .scenario-card:hover,:root[data-theme=dark] .scenario-card:focus-visible{box-shadow:0 8px 24px #0006}:root[data-theme=dark] .vi-word:after{color:#161616;background:#ececec;box-shadow:0 4px 14px #0000008c}:root[data-theme=dark] .vi-word:before{border-top-color:#ececec}:root[data-theme=dark] .bubble--user .vi-word:after{color:#ececec;background:#1f1f1f}:root[data-theme=dark] .bubble--user .vi-word:before{border-top-color:#1f1f1f}:root[data-theme=dark] .dialect-btn--active,:root[data-theme=dark] .dialect-btn--active:hover,:root[data-theme=dark] .letter-btn--active,:root[data-theme=dark] .variant-btn:active,:root[data-theme=dark] .variant-btn--playing,:root[data-theme=dark] .tts-indicator,:root[data-theme=dark] .combo-btn:active .combo-btn__text,:root[data-theme=dark] .combo-btn--playing .combo-btn__text,:root[data-theme=dark] .combo-btn:active .combo-btn__hint,:root[data-theme=dark] .combo-btn--playing .combo-btn__hint,:root[data-theme=dark] .vocab-btn:active .vocab-btn__primary,:root[data-theme=dark] .vocab-btn:active .vocab-btn__translation{color:#161616;opacity:1}:root[data-theme=dark] .letter-btn--a-vowel.letter-btn--active,:root[data-theme=dark] .letter-btn--e-vowel.letter-btn--active,:root[data-theme=dark] .letter-btn--i-vowel.letter-btn--active,:root[data-theme=dark] .letter-btn--o-vowel.letter-btn--active,:root[data-theme=dark] .letter-btn--u-vowel.letter-btn--active,:root[data-theme=dark] .letter-btn--y-vowel.letter-btn--active,:root[data-theme=dark] .combo-btn--consonantClusters:active .combo-btn__text,:root[data-theme=dark] .combo-btn--consonantClusters.combo-btn--playing .combo-btn__text,:root[data-theme=dark] .combo-btn--consonantClusters:active .combo-btn__hint,:root[data-theme=dark] .combo-btn--consonantClusters.combo-btn--playing .combo-btn__hint,:root[data-theme=dark] .combo-btn--diphthongs:active .combo-btn__text,:root[data-theme=dark] .combo-btn--diphthongs.combo-btn--playing .combo-btn__text,:root[data-theme=dark] .combo-btn--diphthongs:active .combo-btn__hint,:root[data-theme=dark] .combo-btn--diphthongs.combo-btn--playing .combo-btn__hint,:root[data-theme=dark] .combo-btn--triphthongs:active .combo-btn__text,:root[data-theme=dark] .combo-btn--triphthongs.combo-btn--playing .combo-btn__text,:root[data-theme=dark] .combo-btn--triphthongs:active .combo-btn__hint,:root[data-theme=dark] .combo-btn--triphthongs.combo-btn--playing .combo-btn__hint{color:#fff}:root[data-theme=dark] .combo-btn--consonantClusters{background:#1f3a26;border-color:#2f5a36}:root[data-theme=dark] .combo-btn--consonantClusters:hover{background:#2a4a32;border-color:#3a6b42}:root[data-theme=dark] .combo-btn--diphthongs{background:#1a3a36;border-color:#2a5a52}:root[data-theme=dark] .combo-btn--diphthongs:hover{background:#234a44;border-color:#356b62}:root[data-theme=dark] .combo-btn--triphthongs{background:#232a4a;border-color:#353d6b}:root[data-theme=dark] .combo-btn--triphthongs:hover{background:#2e3a5e;border-color:#404d80}:root[data-theme=dark] .variant-btn--a-vowel{background:#2e2c1f;border-color:#3d3825}:root[data-theme=dark] .variant-btn--e-vowel{background:#322820;border-color:#423526}:root[data-theme=dark] .variant-btn--i-vowel{background:#292038;border-color:#352c45}:root[data-theme=dark] .variant-btn--o-vowel{background:#322020;border-color:#422a2a}:root[data-theme=dark] .variant-btn--u-vowel{background:#1f2a38;border-color:#25364a}:root[data-theme=dark] .variant-btn--y-vowel{background:#283820;border-color:#2c4225}:root[data-theme=dark] .letter-btn--a-vowel:hover{background:#5a5238;border-color:#6b6042}:root[data-theme=dark] .letter-btn--e-vowel:hover{background:#5e4a38;border-color:#6b5640}:root[data-theme=dark] .letter-btn--i-vowel:hover{background:#4a3c5e;border-color:#5a4a6b}:root[data-theme=dark] .letter-btn--o-vowel:hover{background:#5e3a3a;border-color:#6b4242}:root[data-theme=dark] .letter-btn--u-vowel:hover{background:#384a5e;border-color:#42566b}:root[data-theme=dark] .letter-btn--y-vowel:hover{background:#4a5e38;border-color:#566b42}.verbs{padding-top:var(--space-xl)}.verbs__intro{text-align:center;margin-bottom:var(--space-lg);align-items:center;gap:var(--space-xs);flex-direction:column;display:flex}.verbs__badge{color:#b3261e;background:#ffe5e0;border:1px solid #ffc4ba;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:.78rem;font-weight:500;display:inline-flex}:root[data-theme=dark] .verbs__badge{color:#ff8c80;background:#3a1f1c;border-color:#6b332c}.verbs__badge-icon{font-size:.95rem}.verbs__title{letter-spacing:-.02em;color:var(--color-text);font-size:clamp(1.85rem,5vw,2.7rem);font-weight:700}.verbs__subtitle{color:var(--color-text-muted);max-width:40ch;font-size:1rem}.verbs__progress{margin-top:var(--space-xs);color:var(--color-text-muted);align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.verbs__progress strong{color:var(--color-text);font-weight:600}.verbs__progress-emoji{transform-origin:70% 70%;animation:2.4s ease-in-out infinite verbWave;display:inline-block}@keyframes verbWave{0%,60%,to{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-10deg)}30%{transform:rotate(15deg)}40%{transform:rotate(-5deg)}50%{transform:rotate(10deg)}}.verbs__panel{animation:.35s both cardIn}.verbs__panel--library{margin-top:calc(var(--space-xl) * 1.4);padding-top:var(--space-xl);border-top:1px dashed var(--color-border)}.verbs__section-head{text-align:center;margin:0 auto var(--space-lg);max-width:560px}.verbs__section-title{color:var(--color-text);align-items:center;gap:8px;margin:0 0 6px;font-size:1.4rem;font-weight:700;display:inline-flex}.verbs__section-desc{color:var(--color-text-muted);margin:0;font-size:.95rem;line-height:1.5}.verb-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-width:900px;margin:0 auto;display:grid}.verb-card{padding:var(--space-md) var(--space-sm);text-align:center;background:var(--color-surface);border:1.5px solid var(--color-border);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;animation:.38s both cardIn;display:flex;position:relative}.verb-card:hover,.verb-card:focus-visible{border-color:var(--color-accent);outline:none;transform:translateY(-3px);box-shadow:0 10px 24px #00000014}:root[data-theme=dark] .verb-card:hover,:root[data-theme=dark] .verb-card:focus-visible{box-shadow:0 10px 24px #00000080}.verb-card__emoji{margin-bottom:4px;font-size:2.4rem;line-height:1;display:inline-block}.verb-card__vi{color:var(--color-text);font-size:1.05rem;font-weight:600}.verb-card__en{color:var(--color-text-muted);font-size:.78rem}.verb-card__met{color:#fff;background:#4cc9a0;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.78rem;animation:.32s cubic-bezier(.18,1.4,.4,1) both verbPop;display:inline-flex;position:absolute;top:8px;right:8px;box-shadow:0 2px 6px #4cc9a073}@keyframes verbPop{0%{transform:scale(0)}60%{transform:scale(1.18)}to{transform:scale(1)}}.verb-card:nth-child(3n+1){animation-delay:40ms}.verb-card:nth-child(3n+2){animation-delay:80ms}.verb-card:nth-child(3n+3){animation-delay:.12s}.verb-emoji{transform-origin:50%;display:inline-block}.verb-emoji--xl{font-size:clamp(5rem,14vw,8.5rem)}.verb-emoji--chomp{animation:1.6s ease-in-out infinite verbChomp}.verb-emoji--sip{animation:2s ease-in-out infinite verbSip}.verb-emoji--snooze{transform-origin:bottom;animation:2.6s ease-in-out infinite verbSnooze}.verb-emoji--walk{animation:1.8s ease-in-out infinite verbWalk}.verb-emoji--run{animation:.7s ease-in-out infinite verbRun}.verb-emoji--talk{animation:1.2s ease-in-out infinite verbTalk}.verb-emoji--tilt{animation:2.2s ease-in-out infinite verbTilt}.verb-emoji--jiggle{animation:.6s ease-in-out infinite verbJiggle}.verb-emoji--rotate{animation:4s linear infinite verbRotate}.verb-emoji--wiggle{animation:.9s ease-in-out infinite verbWiggle}.verb-emoji--bounce{animation:1.4s ease-in-out infinite verbBounce}.verb-emoji--spin{animation:2.8s linear infinite verbSpin}.verb-emoji--pulse{animation:1s ease-in-out infinite verbPulse}.verb-emoji--shake{animation:.55s ease-in-out infinite verbShake}.verb-emoji--sob{animation:1.6s ease-in-out infinite verbSob}.verb-emoji--slide-right{animation:2s ease-in-out infinite verbSlideRight}.verb-emoji--slide-left{animation:2s ease-in-out infinite verbSlideLeft}.verb-emoji--shrink{animation:2.4s ease-in-out infinite verbShrink}.verb-emoji--steam{animation:1.8s ease-in-out infinite verbSteam}.verb-emoji--mic{animation:.8s ease-in-out infinite verbMic}.verb-emoji--jump{animation:1s ease-in-out infinite verbJump}.verb-emoji--fly{animation:3.2s ease-in-out infinite verbFly}.verb-emoji--squat{transform-origin:bottom;animation:2.4s ease-in-out infinite verbSquat}.verb-emoji--bubble{animation:1.6s ease-in-out infinite verbBubble}@keyframes verbChomp{0%,to{transform:scale(1)rotate(0)}40%{transform:scale(1.18)rotate(-4deg)}55%{transform:scale(.92)rotate(5deg)}70%{transform:scale(1.12)rotate(-2deg)}}@keyframes verbSip{0%,to{transform:rotate(0)}40%{transform:rotate(-22deg)translateY(-4px)}55%{transform:rotate(-22deg)translateY(-4px)}}@keyframes verbSnooze{0%,to{transform:scale(1)translateY(0)}50%{transform:scale(1.04,.95)translateY(2px)}}@keyframes verbWalk{0%,to{transform:translate(-8px)rotate(-3deg)}50%{transform:translate(8px)rotate(3deg)}}@keyframes verbRun{0%,to{transform:translate(-10px)skew(-6deg)}50%{transform:translate(10px)skew(6deg)}}@keyframes verbTalk{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-4px)scale(1.07)}}@keyframes verbTilt{0%,to{transform:rotate(0)}30%{transform:rotate(-18deg)}60%{transform:rotate(15deg)}}@keyframes verbJiggle{0%,to{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-1px)}}@keyframes verbRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes verbWiggle{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}@keyframes verbBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes verbSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes verbPulse{0%,to{transform:scale(1)}50%{transform:scale(1.22)}}@keyframes verbShake{0%,to{transform:rotate(-6deg)translateY(0)}25%{transform:rotate(6deg)translateY(-2px)}50%{transform:rotate(-4deg)translateY(0)}75%{transform:rotate(8deg)translateY(-3px)}}@keyframes verbSob{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(4px)scale(.96)}}@keyframes verbSlideRight{0%,to{transform:translate(-12px)}50%{transform:translate(12px)}}@keyframes verbSlideLeft{0%,to{transform:translate(12px)}50%{transform:translate(-12px)}}@keyframes verbShrink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.7)}}@keyframes verbSteam{0%,to{transform:translateY(0)scale(1)}50%{filter:drop-shadow(0 -10px 6px #fff6);transform:translateY(-3px)scale(1.05)}}@keyframes verbMic{0%,to{transform:rotate(-12deg)scale(1)}50%{transform:rotate(12deg)scale(1.08)}}@keyframes verbJump{0%,to{transform:translateY(0)scale(1)}20%{transform:translateY(2px)scale(1.1,.9)}50%{transform:translateY(-22px)scale(.95,1.08)}80%{transform:translateY(2px)scale(1.1,.9)}}@keyframes verbFly{0%,to{transform:translate(-10px)rotate(-5deg)}25%{transform:translate(10px,-10px)rotate(5deg)}50%{transform:translate(15px,4px)rotate(-3deg)}75%{transform:translate(-5px,-8px)rotate(8deg)}}@keyframes verbSquat{0%,to{transform:scaleY(1)translateY(0)}50%{transform:scaleY(.78)translateY(6px)}}@keyframes verbBubble{0%,to{transform:translateY(0)rotate(-3deg)}25%{transform:translateY(-3px)rotate(2deg)}50%{transform:translateY(2px)rotate(-4deg)}75%{transform:translateY(-2px)rotate(3deg)}}.verb-stage{z-index:200;padding:var(--space-md);-webkit-backdrop-filter:blur(6px);opacity:0;background:#0f0f128c;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}.verb-stage--visible{opacity:1}.verb-stage__close{cursor:pointer;color:#2d2d2d;width:40px;height:40px;transition:transform var(--transition-fast);background:#fffffff2;border:none;border-radius:50%;font-size:1.6rem;position:absolute;top:16px;right:16px;box-shadow:0 4px 12px #0003}.verb-stage__close:hover{transform:scale(1.08)}.verb-stage__inner{background:var(--color-surface);width:100%;max-width:540px;padding:var(--space-xl);text-align:center;align-items:center;gap:var(--space-md);border-radius:22px;flex-direction:column;animation:.32s cubic-bezier(.18,1.2,.3,1) both verbStageIn;display:flex;position:relative;box-shadow:0 30px 60px #00000059}@keyframes verbStageIn{0%{opacity:0;transform:translateY(24px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}.verb-stage__spotlight{width:100%;padding:var(--space-lg) 0;background:radial-gradient(circle,#fff7d6 0%,#0000 60%);border-radius:14px;justify-content:center;align-items:center;display:flex}:root[data-theme=dark] .verb-stage__spotlight{background:radial-gradient(circle,#ffcd1c2e 0%,#0000 60%)}.verb-stage__word{flex-direction:column;align-items:center;gap:4px;display:flex}.verb-stage__vi{letter-spacing:-.02em;color:var(--color-text);font-size:2rem;font-weight:700}.verb-stage__en{color:var(--color-text-muted);font-size:1rem}.verb-stage__speak{background:var(--color-active);border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;transition:background var(--transition-fast), transform var(--transition-fast);border-radius:999px;align-items:center;gap:6px;margin-top:6px;padding:6px 14px;font-size:.85rem;display:inline-flex}.verb-stage__speak:hover{background:var(--color-btn-bg);transform:scale(1.04)}.verb-stage__example{background:var(--color-active);padding:var(--space-sm) var(--space-md);border-radius:12px;width:100%}.verb-stage__example-vi{color:var(--color-text);font-size:.95rem;font-weight:500;line-height:1.4}.verb-stage__example-en{color:var(--color-text-muted);margin-top:4px;font-size:.82rem;line-height:1.4}.verb-stage__joke{color:var(--color-text-muted);max-width:36ch;font-size:.85rem;font-style:italic;line-height:1.4}.verb-stage__actions{gap:var(--space-sm);margin-top:var(--space-xs);flex-wrap:wrap;justify-content:center;display:flex}.verb-stage__btn{cursor:pointer;transition:transform var(--transition-fast), background var(--transition-fast);border:1px solid var(--color-border);border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-size:.88rem;font-weight:500;display:inline-flex}.verb-stage__btn--ghost{color:var(--color-text-muted);background:0 0}.verb-stage__btn--ghost:hover{background:var(--color-active);color:var(--color-text)}.verb-stage__btn--primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.verb-stage__btn--primary:hover{background:var(--color-accent-hover);transform:scale(1.04)}body.verbs--stage-open{overflow:hidden}.quiz{gap:var(--space-md);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.quiz__header{color:var(--color-text-muted);justify-content:space-between;font-size:.88rem;font-weight:500;display:flex}.quiz__bar{background:var(--color-active);border-radius:999px;width:100%;height:6px;overflow:hidden}.quiz__bar-fill{background:linear-gradient(90deg,#4cc9a0 0%,#5fa8ff 100%);width:0%;height:100%;transition:width .35s;display:block}.quiz__stage{text-align:center;padding:var(--space-xl) var(--space-md);background:radial-gradient(circle at 50% 50%, #fff7d6 0%, transparent 70%), var(--color-surface);border:1.5px solid var(--color-border);align-items:center;gap:var(--space-sm);border-radius:18px;flex-direction:column;justify-content:center;min-height:220px;display:flex}:root[data-theme=dark] .quiz__stage{background:radial-gradient(circle at 50% 50%, #ffcd1c1a 0%, transparent 70%), var(--color-surface)}.quiz__prompt{color:var(--color-text-muted);font-size:.95rem}.quiz__choices{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.quiz__choice{padding:var(--space-md);background:var(--color-surface);border:1.5px solid var(--color-border);cursor:pointer;transition:transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);border-radius:14px;flex-direction:column;align-items:center;gap:2px;display:flex}.quiz__choice:hover{border-color:var(--color-accent);transform:translateY(-2px)}.quiz__choice-vi{color:var(--color-text);font-size:1.05rem;font-weight:600}.quiz__choice-en{color:var(--color-text-muted);font-size:.78rem}.quiz__choice--right{background:#e6f7f0;border-color:#4cc9a0;animation:.32s cubic-bezier(.18,1.4,.4,1) verbPop}.quiz__choice--wrong{background:#ffe5e0;border-color:#ff6b6b;animation:.4s ease-in-out 2 verbWiggle}:root[data-theme=dark] .quiz__choice--right{background:#1f3a30;border-color:#4cc9a0}:root[data-theme=dark] .quiz__choice--wrong{background:#3a1f1c;border-color:#ff6b6b}.quiz__feedback{text-align:center;min-height:1.5em;color:var(--color-text-muted);font-size:.95rem;transition:color .15s}.quiz__feedback--right{color:#2c8e6e;font-weight:600}.quiz__feedback--wrong{color:#c5453a;font-weight:600}:root[data-theme=dark] .quiz__feedback--right{color:#4cc9a0}:root[data-theme=dark] .quiz__feedback--wrong{color:#ff8c80}.quiz__finale{text-align:center;padding:var(--space-xl) var(--space-md);background:var(--color-active);align-items:center;gap:var(--space-sm);border-radius:18px;flex-direction:column;animation:.4s cubic-bezier(.18,1.2,.3,1) verbStageIn;display:flex}.quiz__finale-emoji{font-size:4.5rem;line-height:1;animation:1.4s ease-in-out infinite verbBounce}.quiz__finale-title{letter-spacing:-.01em;color:var(--color-text);font-size:1.6rem;font-weight:700}.quiz__finale-desc{color:var(--color-text-muted);max-width:36ch;line-height:1.45}.quiz__finale-btn{margin-top:var(--space-sm);color:#fff;background:var(--color-accent);cursor:pointer;transition:transform var(--transition-fast), background var(--transition-fast);border:none;border-radius:999px;padding:10px 22px;font-size:.95rem;font-weight:600}.quiz__finale-btn:hover{background:var(--color-accent-hover);transform:scale(1.04)}@media (prefers-reduced-motion:reduce){.verb-emoji,.verbs__progress-emoji,.quiz__finale-emoji,.verb-card{animation:none!important}}body.verbs--reduce-motion .verb-emoji,body.verbs--reduce-motion .verbs__progress-emoji,body.verbs--reduce-motion .quiz__finale-emoji{animation:none!important}@media (max-width:540px){.verb-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.verb-card__emoji{font-size:2.1rem}.verb-stage__inner{padding:var(--space-lg)}}.navbar{padding:var(--space-md,1rem) var(--space-lg,1.5rem);z-index:200;pointer-events:none;background:var(--color-bg);justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.home-body .navbar{background:0 0}.navbar__left,.navbar__right{align-items:center;gap:var(--space-sm,.5rem);pointer-events:auto;display:flex}.navbar__brand{letter-spacing:.02em;align-items:baseline;gap:.4rem;font-size:1.1rem;font-weight:700;text-decoration:none;display:inline-flex}.navbar__brand:hover{opacity:.88}.navbar__brand-wordmark{color:var(--color-brand-wordmark);font-weight:700}.navbar__brand-tagline{letter-spacing:.04em;color:var(--color-brand-tagline);font-size:.82em;font-weight:600}.lang-toggle{background:var(--color-surface-soft,#0000000f);border-radius:999px;align-items:center;gap:2px;padding:3px;display:inline-flex}.lang-toggle__btn{letter-spacing:.04em;color:var(--color-text-muted,#666);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.3rem .7rem;font-size:.78rem;font-weight:600;transition:background .12s,color .12s}.lang-toggle__btn:hover{color:var(--color-text,#111)}.lang-toggle__btn--active{background:var(--color-surface,#fff);color:var(--color-text,#111);box-shadow:0 1px 2px #00000014}.lang-toggle__btn:disabled{opacity:.6;cursor:progress}[data-theme=dark] .lang-toggle{background:#ffffff0f}[data-theme=dark] .lang-toggle__btn--active{color:#fff;background:#ffffff29}.navbar .back-link,.navbar .user-link{position:static}