.app-shell{min-height:100svh}.app-header{z-index:50;border-right:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fbf2edeb;flex-direction:column;justify-content:flex-start;align-items:center;gap:56px;width:80px;padding:32px 10px 24px;display:flex;position:fixed;top:0;bottom:0;left:0}.app-main{min-height:100svh;margin-left:80px}.app-shell-auth .app-main{margin-left:0}.app-logo{color:var(--accent);align-items:center;gap:10px;font-size:0;font-weight:800;text-decoration:none;display:inline-flex}.app-logo-mark{width:34px;height:34px;color:var(--accent);font-family:var(--cjk-sans);text-shadow:0 8px 20px #99002729;box-shadow:none;background:0 0;border-radius:0;justify-content:center;align-items:center;font-size:32px;line-height:1;display:inline-flex}.app-nav{flex-direction:column;flex:1;justify-content:space-between;align-items:center;gap:24px;min-width:0;display:flex}.app-nav-links{box-shadow:none;background:0 0;border:0;border-radius:0;flex-direction:column;align-items:center;gap:34px;padding:0;display:flex}.app-nav-link{width:48px;height:48px;color:var(--text);border-radius:14px;justify-content:center;align-items:center;padding:0;font-size:0;font-weight:700;text-decoration:none;transition:background .18s,color .18s,transform .18s;display:inline-flex;position:relative}.app-nav-link:hover{color:var(--accent);background:#9900270f;transform:translateY(-1px)}.app-nav-link.active{color:var(--accent);background:#9900271a;box-shadow:inset 0 0 0 1px #9900271f}.app-nav-link.active:before{content:"";background:var(--accent);border-radius:999px;width:3px;height:24px;position:absolute;top:50%;left:-10px;transform:translateY(-50%)}.app-nav-link:after{content:attr(title);z-index:120;background:var(--text-h);color:#fff;opacity:0;pointer-events:none;white-space:nowrap;border-radius:7px;padding:6px 8px;font-size:12px;font-weight:700;line-height:1;transition:opacity .14s,transform .14s;position:absolute;top:50%;left:calc(100% + 10px);transform:translate(-4px,-50%)}.app-nav-link:hover:after,.app-nav-link:focus-visible:after{opacity:1;transform:translateY(-50%)}.app-account-menu{position:relative}.app-user{width:48px;max-width:48px;min-height:48px;color:var(--text);cursor:pointer;box-shadow:none;background:0 0;border:0;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:0;font-size:14px;font-weight:700;transition:border-color .18s,color .18s,transform .18s;display:inline-flex}.app-user:hover{color:var(--accent);background:var(--accent-bg);border-color:#0000;transform:translateY(-1px)}.app-user span,.app-user svg:last-child{display:none}.app-account-dropdown{z-index:100;border:1px solid var(--border);background:var(--surface-container-lowest);min-width:210px;box-shadow:var(--shadow);transform-origin:100% 0;border-radius:12px;padding:6px;animation:.16s both menu-in;position:absolute;bottom:0;left:calc(100% + 12px);right:auto}.app-account-item{width:100%;color:var(--text-h);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;justify-content:flex-start;align-items:center;gap:10px;padding:10px 12px;font-size:14px;text-decoration:none;display:flex}.app-account-item:hover{background:var(--accent-bg);color:var(--accent)}.app-account-logout{color:var(--text)}.app-login-link{border:1px solid var(--accent);min-height:42px;color:var(--accent);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;padding:0 12px;font-size:13px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.app-login-link:hover{text-decoration:underline}@keyframes menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (width<=760px){.app-header{border-right:0;border-bottom:1px solid var(--border);flex-direction:row;justify-content:space-between;align-items:center;gap:12px;width:auto;padding:10px 16px;position:sticky;top:0;bottom:auto}.app-main{margin-left:0}.app-logo-mark{width:30px;height:30px;font-size:26px}.app-nav{flex-direction:row;flex:auto;justify-content:flex-end;align-items:center;gap:8px;width:auto}.app-nav-links{flex-direction:row;flex:none;gap:6px}.app-nav-link{border-radius:12px;gap:0;width:44px;height:40px;padding:0;font-size:0}.app-nav-link.active:before,.app-nav-link:after{display:none}.app-user{border-radius:12px;width:44px;max-width:44px;min-height:40px}.app-account-dropdown{transform-origin:100% 0;inset:calc(100% + 8px) 0 auto auto}}.dashboard{text-align:left;max-width:900px;margin:0 auto;padding:72px 64px 96px}.dashboard-header{text-align:center;margin-bottom:30px}.settings-page-header{margin-bottom:28px}.settings-section{margin-bottom:36px}.settings-section-help{color:var(--text);margin:0 0 12px;font-size:14px}.settings-placement-link{color:var(--accent);margin-top:16px;font-size:14px;text-decoration:none;display:inline-block}.settings-placement-link:hover{text-decoration:underline}.settings-placement-cta{border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--accent);border-radius:14px;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:14px 18px;text-decoration:none;transition:background .16s,transform .16s,border-color .16s;display:flex}.settings-placement-cta:hover{background:color-mix(in srgb, var(--accent) 14%, var(--surface-container-lowest));border-color:var(--accent);transform:translateY(-1px)}.settings-placement-cta-text{flex-direction:column;gap:2px;display:flex}.settings-placement-cta-text strong{color:var(--text-h);font-size:15px}.settings-placement-cta-text span{color:var(--text);font-size:13px}.settings-placement-cta svg{flex-shrink:0}.settings-choice-stacked{flex-direction:column;align-items:center;gap:2px;line-height:1.2;display:inline-flex}.settings-choice-hint{opacity:.72;font-size:11px;font-weight:600}.settings-saved-toast{background:var(--text-h);color:#fff;opacity:0;pointer-events:none;z-index:60;border-radius:999px;align-items:center;gap:7px;padding:9px 16px;font-size:13px;font-weight:700;transition:opacity .2s,transform .2s;display:inline-flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);box-shadow:0 12px 28px #2d292638}.settings-saved-toast.visible{opacity:1;transform:translate(-50%)}.settings-saved-toast svg{color:var(--success,#2f9e44)}@media (prefers-reduced-motion:reduce){.settings-saved-toast{transition:opacity .2s;transform:translate(-50%)}}.settings-checkbox-row{color:var(--text);cursor:pointer;align-items:center;gap:12px;font-size:15px;display:flex}.settings-checkbox-row input{appearance:none;border:1px solid var(--border);background:var(--surface-container-highest);cursor:pointer;border-radius:999px;flex-shrink:0;width:42px;height:24px;margin:0;transition:background .18s,border-color .18s;position:relative}.settings-checkbox-row input:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:left .18s;position:absolute;top:50%;left:2px;transform:translateY(-50%);box-shadow:0 1px 3px #2d292647}.settings-checkbox-row input:checked{background:var(--accent);border-color:var(--accent)}.settings-checkbox-row input:checked:after{left:20px}.settings-checkbox-row input:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 34%, transparent);outline-offset:2px}.settings-level-grid{margin-top:4px}.dashboard-level-heading{color:var(--text-h);letter-spacing:0;margin:0;font-size:44px;font-weight:820;line-height:1.05}.dashboard-loading{text-align:center;color:var(--text);padding:60px 0;font-size:16px}.dashboard-error{text-align:center;color:#e53e3e;padding:60px 0;font-size:16px}.dashboard-hub{margin-bottom:0}.dashboard-level-row{align-items:center;gap:10px;margin:0 0 18px;display:flex}.dashboard-level-label{letter-spacing:.02em;text-transform:uppercase;color:var(--text);opacity:.7;font-size:13px;font-weight:700}.dashboard-level-pill{border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--accent);border-radius:999px;align-items:center;gap:6px;padding:5px 14px;font-size:14px;font-weight:700;text-decoration:none;transition:background .16s,border-color .16s;display:inline-flex}.dashboard-level-pill:hover{background:color-mix(in srgb, var(--accent) 14%, var(--surface-container-lowest));border-color:var(--accent)}.dashboard-today{background:linear-gradient(135deg,#ffffffdb,#fbf2edf0);border:1px solid #9900272e;border-radius:24px;justify-content:space-between;align-items:center;gap:24px;margin:0 0 36px;padding:32px;display:flex;box-shadow:0 18px 42px #2d29260d}.dashboard-today-copy h2{color:var(--text-h);letter-spacing:0;margin:0 0 6px;font-size:38px;line-height:46px}.dashboard-today-copy p{color:#5a4041;max-width:54rem;margin:0;font-size:17px}.dashboard-card-eyebrow{letter-spacing:0;text-transform:none;color:#7f001f;font-size:14px;font-weight:800;margin:0 0 6px!important}.dashboard-primary-cta{background:var(--accent);color:#fff;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 20px;font-weight:700;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 12px 24px #99002724}.dashboard-primary-cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 28px #9900272e}.dashboard-story-path{grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 48px;display:grid}.dashboard-story-path div{border:1px solid var(--border);background:var(--surface-container-lowest);box-shadow:var(--shadow-soft);border-radius:14px;grid-template-columns:38px 1fr;gap:3px 12px;padding:16px;display:grid}.dashboard-story-path span{background:var(--surface-container-low);width:34px;height:34px;color:var(--accent);border-radius:10px;grid-row:span 2;justify-content:center;align-items:center;font-weight:800;display:inline-flex}.dashboard-story-path strong{color:var(--text-h);font-size:14px}.dashboard-story-path p{color:var(--text);font-size:13px;line-height:1.35}.stories-daily-feature{border:1px solid var(--accent-border);background:var(--surface-container-lowest);box-shadow:var(--shadow-soft);border-radius:16px;justify-content:space-between;align-items:center;gap:18px;margin:0 0 32px;padding:20px;display:flex}.stories-daily-feature h2{color:var(--text-h);margin:0 0 4px;font-size:24px;font-weight:800}.stories-daily-feature p:not(.dashboard-card-eyebrow){color:var(--text);font-size:14px}@media (width<=760px){.dashboard-today,.stories-daily-feature{flex-direction:column;align-items:stretch}.dashboard-story-path{grid-template-columns:1fr}}.dashboard-hub-title{color:var(--text-h);letter-spacing:0;margin:0 0 16px;font-size:22px;font-weight:800}.dashboard-hub-grid{grid-template-columns:1fr;gap:10px;margin:0;padding:0;list-style:none;display:grid}.dashboard-simple-card{min-height:82px;color:inherit;background:#ffffffd6;border:1px solid #8e707038;border-radius:18px;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;transition:border-color .16s,background .16s,transform .16s;display:grid;box-shadow:0 10px 24px #2d292609}.dashboard-simple-card:hover{background:#fff;border-color:#99002747;transform:translateY(-1px)}.dashboard-simple-card>svg{color:var(--accent)}.dashboard-simple-icon{width:44px;height:44px;color:var(--accent);background:#99002717;border-radius:14px;justify-content:center;align-items:center;display:inline-flex}.dashboard-simple-title,.dashboard-simple-desc{display:block}.dashboard-simple-title{color:var(--text-h);font-size:17px;font-weight:800;line-height:24px}.dashboard-simple-desc{color:#684b4b;font-size:14px;line-height:20px}.dashboard-poster-card{border:1px solid var(--border);color:inherit;background:var(--surface-container-lowest);box-shadow:var(--shadow-soft);border-radius:16px;outline:none;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .15s;display:block;overflow:hidden}.dashboard-poster-card:hover{border-color:var(--accent-border);transform:translateY(-5px);box-shadow:0 24px 48px -18px #2d292614,0 10px 18px -10px #2d29260d}.dashboard-poster-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media (prefers-reduced-motion:reduce){.dashboard-poster-card{transition:border-color .15s,box-shadow .15s}.dashboard-poster-card:hover{transform:none}}.dashboard-poster-media{aspect-ratio:16/9;position:relative;overflow:hidden}.dashboard-poster-img{object-fit:cover;vertical-align:middle;width:100%;height:100%;display:block}.dashboard-poster-scrim{pointer-events:none;background:linear-gradient(#0000 0%,#0000000f 35%,#00000059 62%,#000000c7 100%);position:absolute;inset:0}@media (prefers-color-scheme:light){.dashboard-poster-scrim{background:linear-gradient(#0000 0%,#0f0a1c0f 32%,#0f0a1c52 58%,#0f0a1cd1 100%)}}.dashboard-poster-text{pointer-events:none;flex-direction:column;gap:6px;padding:20px 18px 18px;display:flex;position:absolute;bottom:0;left:0;right:0}.dashboard-poster-title{color:#f8fafc;letter-spacing:0;text-shadow:0 1px 2px #00000059;font-size:19px;font-weight:700}.dashboard-poster-desc{color:#f8fafceb;text-shadow:0 1px 3px #00000073;max-width:32rem;font-size:14px;line-height:1.45}.dashboard-poster-badge{z-index:2;letter-spacing:0;text-transform:uppercase;color:#fae8ff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#0f0a1ca6;border:1px solid #c4b5fd8c;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700;position:absolute;top:12px;right:12px}.dashboard-catalog-title{color:var(--text-h);margin:0 0 8px;font-size:20px;font-weight:700}.stories-page-nav{margin-bottom:24px}.stories-page-back{color:var(--text);align-items:center;gap:6px;font-size:14px;text-decoration:none;transition:color .16s,transform .16s;display:inline-flex}.stories-page-back:hover{color:var(--text-h);transform:translate(-2px)}.stories-page-back svg{width:18px;height:18px}.stories-page-header{margin-bottom:28px}.stories-page-title{color:var(--text-h);margin:0 0 8px;font-size:34px;font-weight:820}.stories-page-lead{margin-bottom:0}.stories-catalog .level-row:first-of-type{margin-top:0}@media (width<=1024px){.stories-page-title{font-size:22px}}.dashboard-section-lead{color:var(--text);margin:0 0 24px;font-size:15px;line-height:1.5}@media (width<=1024px){.dashboard{padding:24px 16px 60px}.dashboard-level-heading{font-size:32px}}.practice-page{text-align:left;max-width:560px;margin:0 auto;padding:32px 24px 80px}.practice-page-nav{margin-bottom:28px}.practice-page-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.practice-page-header .practice-page-nav{margin-bottom:0}.practice-page-back{color:var(--text);align-items:center;gap:6px;font-size:14px;text-decoration:none;display:inline-flex}.practice-page-back:hover{color:var(--text-h)}.practice-page-back svg{width:18px;height:18px}.practice-page h1{color:var(--text-h);margin:0 0 8px;font-size:26px;font-weight:700}.practice-page .practice-lead{color:var(--text);margin:0 0 28px;font-size:15px;line-height:1.5}.practice-stub{border:1px dashed var(--border);background:var(--accent-bg,#00000008);color:var(--text);border-radius:10px;padding:20px;font-size:14px;line-height:1.5}.practice-stub h2{color:var(--text-h);margin:0 0 8px;font-size:15px;font-weight:600}.practice-page-title-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px;display:flex}.practice-page-title-row h1{margin:0}.practice-coming-soon-tag{background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent);letter-spacing:.02em;border-radius:999px;align-items:center;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.practice-stub-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.practice-stub-cta{background:var(--accent);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-height:40px;padding:0 18px;font-size:14px;font-weight:700;text-decoration:none;transition:background .16s,transform .16s;display:inline-flex}.practice-stub-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}.practice-stub-cta-ghost{border:1px solid var(--accent-border);color:var(--accent);background:0 0}.practice-stub-cta-ghost:hover{background:var(--accent-bg)}.pronunciation-page{max-width:640px}.pronunciation-levels{margin:18px 0}.pronunciation-prompt,.pronunciation-recorder,.pronunciation-results{border:1px solid var(--border);background:var(--code-bg);border-radius:10px}.pronunciation-prompt{text-align:center;padding:24px;position:relative}.pronunciation-word{cursor:pointer;background:0 0;border:0;border-radius:12px;flex-direction:column;align-items:center;gap:6px;width:100%;padding:22px 16px 18px;display:flex;position:relative}.pronunciation-word:hover{background:var(--accent-bg)}.pronunciation-word .hanzi-char-large{margin:0;line-height:1.18}.pronunciation-word .hanzi-pinyin-line{margin:8px 0 0}.pronunciation-word-speaker{background:var(--accent-bg);width:44px;height:44px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;margin-top:10px;display:inline-flex}.pronunciation-word:hover .pronunciation-word-speaker{background:var(--accent);color:#fff}.pronunciation-meaning{color:var(--text);margin:0;font-size:15px}.pronunciation-skip{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:6px;margin:14px auto 0;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.pronunciation-skip:hover{color:var(--text-h)}.pronunciation-recorder{border:0;border-top:1px solid var(--border);background:0 0;border-radius:0;flex-direction:column;align-items:center;gap:12px;margin:22px -24px 0;padding:24px 24px 4px;display:flex}.pronunciation-mic{background:var(--accent);color:#fff;cursor:pointer;width:96px;height:96px;box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);border:0;border-radius:50%;justify-content:center;align-items:center;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.pronunciation-mic:hover{transform:translateY(-2px)scale(1.03)}.pronunciation-mic:active{transform:scale(.97)}.pronunciation-mic.recording{background:#e53e3e;animation:1.4s ease-out infinite pronunciation-pulse;box-shadow:0 0 #e53e3e8c}.pronunciation-mic.scoring{background:var(--muted);cursor:progress;box-shadow:none}.pronunciation-mic:disabled{cursor:progress}.pronunciation-mic-label{color:var(--text-h);font-size:15px;font-weight:700}.pronunciation-mic-hint{max-width:32ch;color:var(--text);text-align:center;opacity:.8;margin:0;font-size:12.5px;line-height:1.4}.pronunciation-playback{width:100%;max-width:320px;height:38px;margin:14px auto 0}.pronunciation-spin{animation:.9s linear infinite pronunciation-rotate}@keyframes pronunciation-pulse{0%{box-shadow:0 0 #e53e3e8c}70%{box-shadow:0 0 0 22px #0000}to{box-shadow:0 0 #0000}}@keyframes pronunciation-rotate{to{transform:rotate(360deg)}}.pronunciation-results{margin-top:16px;padding:18px}.pronunciation-overall{border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:16px;display:flex}.pronunciation-overall-score{font-size:64px;font-weight:800;line-height:1}.pronunciation-overall-label{font-size:16px;font-weight:700}.tier-good{color:var(--success,#2f9e44)}.tier-ok{color:var(--accent)}.tier-weak{color:#d9920a}.tier-bad{color:#e53e3e}.pronunciation-overall.tier-good{background:color-mix(in srgb, var(--success,#2f9e44) 12%, transparent)}.pronunciation-overall.tier-ok{background:var(--accent-bg)}.pronunciation-overall.tier-weak{background:#d9920a1f}.pronunciation-overall.tier-bad{background:#e53e3e1f}.pronunciation-syllables{flex-direction:column;gap:10px;margin-top:18px;display:flex}.pronunciation-syllable-row{border:1px solid var(--border);background:var(--bg);border-radius:8px;grid-template-columns:minmax(76px,.7fr) minmax(0,1.8fr) minmax(40px,auto);align-items:center;gap:12px;padding:12px;display:grid}.pronunciation-syllable-hanzi,.pronunciation-syllable-pinyin{display:block}.pronunciation-syllable-hanzi{color:var(--text-h);font-family:var(--cjk-sans);font-size:26px;font-weight:700}.pronunciation-syllable-pinyin{color:var(--text);font-size:13px}.pronunciation-syllable-scores{flex-wrap:wrap;gap:6px;display:flex}.pronunciation-syllable-scores span{background:color-mix(in srgb, currentColor 14%, transparent);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700}.pronunciation-syllable-row strong{text-align:right;font-size:22px;font-weight:800}.hanzi-practice-subtitle{color:var(--text-h);margin:20px 0 10px;font-size:15px;font-weight:600}.hanzi-level-grid{flex-direction:column;gap:10px;display:flex}.hanzi-level-btn{text-align:left;border:1px solid var(--border);background:var(--code-bg);color:var(--text);cursor:pointer;border-radius:10px;padding:12px 14px;font-size:14px;transition:border-color .15s,background .15s}.hanzi-level-btn:hover{border-color:var(--accent);background:var(--accent-bg)}.hanzi-level-btn.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-border)}.hanzi-length-row{flex-wrap:wrap;gap:10px;display:flex}.hanzi-length-btn{border:1px solid var(--border);background:var(--bg);min-width:52px;color:var(--text-h);cursor:pointer;border-radius:8px;padding:10px 14px;font-size:15px}.hanzi-length-btn.selected{border-color:var(--accent);background:var(--accent-bg)}.hanzi-start-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:28px;padding:14px 20px;font-size:16px;font-weight:600}.hanzi-start-btn:hover{filter:brightness(1.05)}.hanzi-secondary-btn{border:1px solid var(--border);width:100%;color:var(--text-h);cursor:pointer;background:0 0;border-radius:10px;margin-top:12px;padding:12px 20px;font-size:15px}.hanzi-secondary-btn:hover{background:var(--accent-bg)}.hanzi-empty-msg{color:#e53e3e;margin-top:12px;font-size:14px}.hanzi-start-card{border:1px solid var(--accent-border);background:radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 28%), linear-gradient(145deg, var(--accent-bg), var(--code-bg) 72%);box-shadow:var(--shadow);text-align:center;border-radius:24px;margin-top:22px;padding:30px 24px 24px;position:relative;overflow:hidden}.hanzi-start-card:after{content:"";background:color-mix(in srgb, var(--accent) 12%, transparent);pointer-events:none;border-radius:50%;width:170px;height:170px;position:absolute;inset:auto -48px -68px auto}.hanzi-start-orb{z-index:1;border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);background:color-mix(in srgb, var(--bg) 82%, transparent);width:72px;height:72px;color:var(--accent);font-family:var(--cjk-sans);box-shadow:0 16px 34px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:24px;justify-content:center;align-items:center;margin-bottom:18px;font-size:38px;font-weight:700;display:inline-flex;position:relative}.hanzi-start-eyebrow{z-index:1;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:800;position:relative}.hanzi-start-card h2{z-index:1;color:var(--text-h);letter-spacing:0;margin:0;font-size:40px;line-height:1;position:relative}.hanzi-start-level{z-index:1;border:1px solid var(--accent-border);background:color-mix(in srgb, var(--bg) 72%, transparent);min-height:32px;color:var(--text-h);border-radius:999px;align-items:center;margin:16px 0 0;padding:0 14px;font-size:14px;font-weight:800;display:inline-flex;position:relative}.hanzi-start-meta{z-index:1;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;display:flex;position:relative}.hanzi-start-meta span{background:color-mix(in srgb, var(--bg) 58%, transparent);min-height:28px;color:var(--text);border-radius:999px;align-items:center;padding:0 12px;font-size:13px;font-weight:700;display:inline-flex}.hanzi-start-card-btn{z-index:1;box-shadow:0 14px 28px color-mix(in srgb, var(--accent) 28%, transparent);border-radius:999px;margin-top:24px;position:relative}.hanzi-plan-card{border:1px solid var(--border);background:var(--code-bg);border-radius:14px;margin-top:22px;padding:16px}.hanzi-plan-card h2{margin:0 0 6px;font-size:18px}.hanzi-plan-card p{color:var(--text);margin:0;line-height:1.45}.hanzi-plan-eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:700;color:var(--accent)!important;margin-bottom:8px!important}.hanzi-plan-counts{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.hanzi-plan-counts span,.hanzi-reason-pill{background:var(--accent-bg);min-height:24px;color:var(--text-h);border-radius:999px;align-items:center;padding:0 10px;font-size:12px;font-weight:700;display:inline-flex}.hanzi-plan-muted{font-size:13px;margin-top:8px!important}.hanzi-progress-wrap{background:var(--border);border-radius:3px;height:6px;margin-bottom:8px;overflow:hidden}.hanzi-progress-bar{background:var(--accent);border-radius:3px;height:100%;transition:width .25s}.hanzi-progress-label{color:var(--text);margin:0 0 16px;font-size:13px}.hanzi-level-badge{color:var(--text);opacity:.85;margin:0 0 16px;font-size:13px}.hanzi-reason-pill{margin:-6px 0 14px}.hanzi-prompt-card{border:1px solid var(--border);background:var(--code-bg);text-align:center;border-radius:12px;margin-bottom:20px;padding:24px 20px;position:relative}.hanzi-prompt-instruction{color:var(--text);margin:0 0 12px;font-size:14px}.hanzi-audio-replay-btn{width:28px;height:28px;color:var(--accent);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;bottom:14px;right:14px}.hanzi-audio-replay-btn:hover{color:var(--text-h)}.hanzi-audio-replay-btn:disabled{color:var(--muted);cursor:not-allowed;opacity:.55}.hanzi-audio-replay-btn svg{width:18px;height:18px}.hanzi-char-large{color:var(--text-h);font-size:44px;font-weight:600;font-family:var(--cjk-sans);margin:0}.hanzi-pinyin-line{color:var(--text);letter-spacing:.04em;opacity:.85;margin:12px 0 0;font-size:16px}.hanzi-audio-status{color:var(--muted);margin:10px 0 0;font-size:12px;font-weight:700}.hanzi-audio-status.warning{color:var(--negative)}.hanzi-item-history{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;display:flex}.hanzi-item-history span{border:1px solid var(--border);background:var(--bg);min-height:26px;color:var(--text);border-radius:999px;align-items:center;padding:0 10px;font-size:12px;font-weight:700;display:inline-flex}.hanzi-item-history span.is-new,.hanzi-session-new{border-color:var(--mc-correct-border);background:var(--mc-correct-bg);color:var(--mc-correct-text)}.hanzi-mc-options{flex-direction:column;gap:10px;display:flex}.hanzi-mc-option{border:1px solid var(--border);background:var(--code-bg);color:var(--text);cursor:pointer;text-align:left;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:15px;line-height:1.45;transition:background .15s,border-color .15s;display:flex}.hanzi-mc-continue{border:1px solid var(--mc-correct-border);background:var(--mc-correct-bg);width:100%;color:var(--mc-correct-text);cursor:pointer;text-align:left;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:15px;font-weight:800;line-height:1.45;transition:background .15s,border-color .15s,transform .15s;display:flex}.hanzi-mc-continue:hover{border-color:var(--mc-correct-border);background:color-mix(in srgb, var(--success) 28%, var(--bg));transform:translateY(-1px)}.hanzi-mc-continue span{flex:none;font-size:18px;line-height:1}.hanzi-option-next-arrow{opacity:.8;flex:none;font-size:18px;font-weight:800;line-height:1}.hanzi-mc-option:hover:not(:disabled){background:var(--accent-bg);border-color:var(--accent)}.hanzi-mc-option.correct,.hanzi-mc-option.correct:hover{background:var(--mc-correct-bg);border-color:var(--mc-correct-border);color:var(--mc-correct-text)}.hanzi-mc-option.incorrect,.hanzi-mc-option.incorrect:hover{background:var(--mc-incorrect-bg);border-color:var(--mc-incorrect-border);color:var(--mc-incorrect-text)}.hanzi-mc-option:disabled{cursor:default}.hanzi-next-btn{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text-h);cursor:pointer;border-radius:10px;margin-top:20px;padding:12px 16px;font-size:15px;font-weight:600}.hanzi-next-btn:hover{background:var(--accent-bg)}.hanzi-answer-entry{border:1px solid var(--accent-border);background:color-mix(in srgb, var(--accent-bg) 72%, var(--bg));color:var(--text);border-radius:14px;margin-top:16px;padding:14px 16px}.hanzi-answer-entry-label{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:800}.hanzi-answer-entry-main{align-items:baseline;gap:10px;margin-bottom:6px;display:flex}.hanzi-answer-entry-word{color:var(--text-h);font-family:var(--cjk-sans);font-size:28px;font-weight:700;line-height:1}.hanzi-answer-entry-pinyin{color:var(--text);opacity:.78;font-size:14px;font-weight:700}.hanzi-answer-entry-meaning{color:var(--text-h);margin:0;font-size:16px;font-weight:700;line-height:1.4}.hanzi-usage-context{gap:12px;margin-top:14px;display:grid}.hanzi-usage-context p{color:var(--text-h);margin:4px 0 0;font-size:14px;font-weight:650;line-height:1.45}.hanzi-usage-context code{border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:8px;margin-top:5px;padding:5px 8px;font-size:13px;font-weight:800;display:inline-flex}.hanzi-usage-context-label{color:var(--accent);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:800}.hanzi-usage-examples{gap:8px;margin-top:8px;display:grid}.hanzi-usage-example{border:1px solid var(--border);background:var(--bg);border-radius:10px;gap:3px;padding:9px 10px;display:grid}.hanzi-usage-example strong{color:var(--text-h);font-family:var(--cjk-sans);font-size:17px;line-height:1.25}.hanzi-usage-example em{color:var(--accent);font-size:12px;font-style:normal;font-weight:800}.hanzi-usage-example span{color:var(--text);font-size:13px;font-weight:700}.hanzi-answer-senses{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.hanzi-answer-senses span{border:1px solid var(--accent-border);color:var(--text);background:var(--bg);border-radius:999px;padding:4px 8px;font-size:13px;font-weight:700}.hanzi-character-context{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px;display:grid}.hanzi-character-context-item{border:1px solid var(--border);background:var(--bg);border-radius:10px;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;padding:8px 10px;display:grid}.hanzi-character-context-item strong{color:var(--text-h);font-family:var(--cjk-sans);grid-row:span 2;font-size:24px;line-height:1}.hanzi-character-context-item em{color:var(--accent);font-size:12px;font-style:normal;font-weight:800}.hanzi-character-context-item span{color:var(--text);font-size:12px;font-weight:700;line-height:1.25}.hanzi-summary{text-align:center;padding:16px 0}.hanzi-summary-score{color:var(--text-h);margin:0 0 8px;font-size:22px;font-weight:700}.hanzi-summary-pct{color:var(--text);margin:0 0 28px;font-size:16px}.hanzi-sync-note,.hanzi-sync-error{color:var(--text);margin:-12px 0 18px;font-size:14px}.hanzi-sync-error{color:#e53e3e}.hanzi-progress-summary-card{text-align:left;border:1px solid var(--border);background:var(--code-bg);border-radius:14px;margin:0 0 22px;padding:16px}.hanzi-progress-summary-card p{color:var(--text);margin:0 0 8px;font-size:14px}.hanzi-session-breakdown{text-align:left;margin:0 0 24px}.hanzi-session-breakdown h2{color:var(--text-h);margin:0 0 12px;font-size:18px}.hanzi-session-row{border-top:1px solid var(--border);justify-content:space-between;gap:16px;padding:14px 0;display:flex}.hanzi-session-row:last-child{border-bottom:1px solid var(--border)}.hanzi-session-word{color:var(--text-h);font-family:var(--cjk-sans);font-size:24px;font-weight:700;line-height:1.15;display:block}.hanzi-session-pinyin{color:var(--text);opacity:.75;margin-top:2px;font-size:13px;display:block}.hanzi-session-new{border:1px solid var(--mc-correct-border);border-radius:999px;align-items:center;min-height:22px;margin-top:8px;padding:0 9px;font-size:11px;font-weight:800;display:inline-flex}.hanzi-session-stats{color:var(--text);white-space:nowrap;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;font-weight:700;display:flex}.hanzi-session-stats .positive{color:var(--mc-correct-text)}.hanzi-session-stats .negative{color:var(--mc-incorrect-text)}.settings-choice-row{flex-wrap:wrap;gap:10px;margin:10px 0 18px;display:flex}.settings-mini-heading{color:var(--text-h);margin:18px 0 8px;font-size:14px}.settings-checkbox-spaced{margin-top:8px}.hanzi-summary-actions{flex-direction:column;gap:4px;display:flex}.hanzi-summary-actions .hanzi-start-btn{margin-top:0}.placement-muted{opacity:.82;font-size:14px}.placement-done{text-align:left}.placement-done-lead{color:var(--text);margin:0 0 8px;font-size:15px}.placement-done-copy{margin-bottom:24px!important}.placement-done-settings-link{text-align:center;color:var(--accent);margin-top:16px;font-size:14px;text-decoration:none;display:block}.placement-done-settings-link:hover{text-decoration:underline}.hanzi-level-up-hint{color:var(--text);text-align:center;margin:-8px 0 24px;font-size:14px;line-height:1.45}.hanzi-level-up-link{color:var(--accent);text-decoration:none}.hanzi-level-up-link:hover{text-decoration:underline}.auth-page{justify-content:center;align-items:center;min-height:100svh;padding:24px;display:flex}.auth-card{background:var(--surface-container-lowest);border:1px solid var(--border);width:100%;max-width:400px;box-shadow:var(--shadow);border-radius:16px;padding:38px 34px}.auth-card h1{color:var(--text-h);text-align:center;margin:0 0 8px;font-size:24px;font-weight:700}.auth-card .auth-subtitle{color:var(--text);text-align:center;margin:0 0 28px;font-size:14px}.auth-field{margin-bottom:18px}.auth-field label{color:var(--text-h);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.auth-field input{border:1px solid var(--border);background:var(--surface-container-lowest);width:100%;color:var(--text-h);box-sizing:border-box;border-radius:8px;outline:none;padding:10px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}.auth-password-wrap{align-items:center;display:flex;position:relative}.auth-password-wrap input{padding-right:44px}.auth-password-toggle{width:34px;height:34px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:color .15s,background .15s;display:inline-flex;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.auth-password-toggle:hover{color:var(--text-h);background:var(--accent-bg)}.auth-password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.auth-field-hint{color:var(--text);opacity:.85;margin:6px 0 0;font-size:12px}.auth-error{color:#e53e3e;background:#e53e3e1a;border-radius:8px;margin-bottom:18px;padding:10px 14px;font-size:13px}.auth-success{color:#17633a;background:#1c844d1f;border-radius:8px;margin-bottom:18px;padding:10px 14px;font-size:13px}.auth-dev-reset{border:1px dashed var(--border);color:var(--text);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;padding:10px 12px;font-size:13px;display:flex}.auth-dev-reset a{color:var(--accent);font-weight:700;text-decoration:none}.auth-dev-reset a:hover{text-decoration:underline}.auth-submit{color:#fff;background:var(--accent);cursor:pointer;border:none;border-radius:999px;width:100%;padding:12px;font-size:15px;font-weight:600;transition:opacity .15s,transform .15s}.auth-submit:hover{opacity:.9;transform:translateY(-1px)}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-link{text-align:center;color:var(--text);margin-top:18px;font-size:14px}.auth-link-compact{margin-top:12px;font-size:13px}.auth-link a{color:var(--accent);font-weight:600;text-decoration:none}.auth-link a:hover{text-decoration:underline}@media (width<=420px){.auth-page{align-items:flex-start;padding:18px 14px}.auth-card{padding:28px 22px}}.story-card{color:inherit;background:var(--surface-container-lowest);border:1px solid var(--border);min-width:220px;max-width:240px;box-shadow:var(--shadow-soft);cursor:pointer;border-radius:16px;flex-shrink:0;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .18s;display:block;overflow:hidden}.story-card:hover{border-color:var(--accent-border);box-shadow:var(--shadow);transform:translateY(-4px)}.story-card-thumb{color:#ffffffe6;background:var(--surface-container-low);justify-content:center;align-items:center;width:100%;height:130px;font-size:42px;display:flex;position:relative;overflow:hidden}.story-card-thumb-img{object-fit:cover;width:100%;height:100%;transition:transform .35s;position:absolute;inset:0}.story-card:hover .story-card-thumb-img{transform:scale(1.035)}.story-card-thumb-emoji{z-index:0;position:relative}.story-card-thumb .level-badge{z-index:1;color:#fff;letter-spacing:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172ab3;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:750;position:absolute;top:8px;right:8px}.story-card-body{text-align:left;padding:14px 16px}.story-card-title{color:var(--text-h);margin:0 0 6px;font-size:17px;font-weight:750;line-height:1.3}.story-card-meta{color:var(--text);align-items:center;gap:8px;font-size:13px;font-weight:650;display:flex}.story-card-meta .time-icon{opacity:.6;width:14px;height:14px}.level-row-scroll>div{scroll-snap-align:start;flex:none}@media (prefers-reduced-motion:reduce){.story-card:hover,.story-card:hover .story-card-thumb-img{transform:none}}.level-row{margin-bottom:42px}.level-row-header{justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 4px;display:flex}.level-row-header h2{color:var(--text-h);margin:0;font-size:20px;font-weight:780}.level-row-count{color:var(--text);font-size:14px;font-weight:650}.level-row-scroll{scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border) transparent;gap:16px;padding:6px 4px 12px;display:flex;overflow-x:auto}.level-row-scroll::-webkit-scrollbar{height:6px}.level-row-scroll::-webkit-scrollbar-track{background:0 0}.level-row-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.story-content{text-align:left;flex-direction:column;gap:18px;max-width:720px;margin:0 auto;font-size:32px;line-height:1.55;display:flex}.story-content .char-group{text-align:center;vertical-align:top;margin:0 4px 10px;display:inline-block}.story-content .char-group.char-punct{margin:0 1px 10px}.story-content .char-group.char-punct .hanzi-text{color:var(--text);opacity:.5;font-weight:400}.story-content .pinyin-text{color:var(--accent-hover);opacity:.68;min-height:1.2em;font-size:.42em;line-height:1.2;font-family:var(--heading);font-weight:650;display:block}.story-content .hanzi-text{font-family:var(--cjk-sans);color:var(--text-h);letter-spacing:0;font-size:1em;font-weight:400;display:block}.story-content .hanzi-group{border-radius:5px;margin:-2px -3px;padding:2px 3px;transition:background .1s,box-shadow .1s;display:inline-block}.story-content .word-hanzi-group{text-align:center;vertical-align:top}.story-content .word-pinyin-text{color:var(--accent-hover);opacity:.68;min-height:1.2em;font-size:.42em;line-height:1.2;font-family:var(--heading);font-weight:700;display:block}.story-content:not(.show-pinyin) .pinyin-text,.story-content:not(.show-pinyin) .word-pinyin-text{min-height:0;display:none}.story-content .word-hanzi-row{display:block}.story-content .joined-word-wrapper>.word-hanzi-group .word-hanzi-row .char-group{margin-left:1px;margin-right:1px}.story-content .word-wrapper{cursor:pointer;white-space:nowrap;z-index:1;margin:0 2px;display:inline-block;position:relative}.story-content .word-wrapper:hover .hanzi-group{box-shadow:0 0 0 1px var(--accent-border), 0 14px 32px #2d29260a;background:#bc243c0f}.story-content .word-tooltip{border:1px solid var(--border);background:var(--surface-container-lowest);width:min(330px,100vw - 36px);min-width:240px;box-shadow:var(--shadow);color:var(--text-h);text-align:left;white-space:normal;overflow-wrap:normal;word-break:normal;pointer-events:none;opacity:0;visibility:hidden;z-index:80;border-radius:16px;flex-direction:column;gap:10px;padding:14px 16px 15px;font-size:14px;line-height:1.45;transition:opacity .16s,transform .16s,visibility .16s;display:flex;position:absolute;bottom:calc(100% + 14px);left:50%;transform:translate(-50%,8px)scale(.96)}.story-content .word-tooltip:after{content:"";border-right:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);background:var(--surface-container-lowest);width:14px;height:14px;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)rotate(45deg)}.story-content .word-wrapper:hover{z-index:20}.story-content .word-wrapper:hover .word-tooltip,.story-content .word-wrapper:focus-within .word-tooltip{opacity:1;visibility:visible;transform:translate(-50%)scale(1)}.word-tooltip-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:9px;display:flex}.word-tooltip-hanzi{font-family:var(--cjk-sans);letter-spacing:0;font-size:24px;font-weight:700}.word-tooltip-pinyin{color:var(--accent);letter-spacing:0;text-transform:lowercase;font-size:13px;font-weight:700}.word-tooltip-body{flex-direction:column;gap:8px;display:flex}.word-tooltip-definition{color:var(--text);letter-spacing:0;padding-left:16px;font-size:13.5px;font-weight:450;display:block;position:relative}.word-tooltip-definition:before{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);border-radius:999px;position:absolute;top:.65em;left:1px}.story-content p.story-sentence{background:#ffffff57;border:1px solid #0000;border-radius:12px;grid-template-columns:42px minmax(0,1fr);align-items:start;column-gap:16px;margin:0;padding:16px 18px;transition:background .2s,border-color .2s;display:grid;position:relative}.story-content p.story-sentence.has-translation{cursor:pointer}.story-sentence-main{min-width:0;display:block}.story-sentence-line{display:block}.story-sentence-controls{z-index:2;flex-direction:column;align-items:center;gap:8px;padding-top:7px;display:inline-flex}.story-sentence-play-btn{background:var(--accent);color:#fff;cursor:pointer;opacity:.4;border:0;border-radius:999px;justify-content:center;align-items:center;width:30px;height:30px;padding:0;transition:background .16s,filter .16s,opacity .16s,transform .16s;display:inline-flex;box-shadow:0 10px 22px #99002729}.story-content p.story-sentence:hover .story-sentence-play-btn,.story-content p.story-sentence:focus-within .story-sentence-play-btn,.story-content p.story-sentence.active .story-sentence-play-btn{opacity:1}@media (hover:none){.story-sentence-play-btn{opacity:1}}.story-sentence-play-btn:hover{filter:brightness(1.06)}.story-sentence-play-btn:focus-visible{outline:2px solid var(--accent-border);outline-offset:3px}.story-sentence-play-btn svg{width:14px;height:14px}.story-content p.story-sentence:hover,.story-content p.story-sentence:focus-within{background:#bc243c09;border-color:#9900271f}.story-content p.story-sentence.active{border-color:var(--accent-border);box-shadow:inset 3px 0 0 var(--accent);background:#bc243c0e}.story-content p.story-sentence:last-child{margin-bottom:0}@media (width<=1024px){.story-content{gap:12px;font-size:24px;line-height:1.5}.story-content p.story-sentence{grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding:12px 10px}.story-sentence-controls{padding-top:5px}.story-sentence-play-btn{width:28px;height:28px}.story-content .word-tooltip{width:min(280px,100vw - 64px);min-width:0;left:0;transform:translateY(8px)scale(.96)}.story-content .word-tooltip:after{left:24px}.story-content .word-wrapper:hover .word-tooltip,.story-content .word-wrapper:focus-within .word-tooltip{transform:translate(0)scale(1)}}.translation-inline{color:var(--text);margin-top:14px;font-size:.8em;font-weight:400;line-height:1.5;display:none}.translation-inline.visible{display:block}.story-quiz{border-top:1px solid var(--border);margin-top:60px;padding-top:30px}.story-progress-summary{border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text);border-radius:16px;flex-direction:column;gap:4px;margin-top:20px;padding:14px 16px;font-size:15px;line-height:1.45;display:flex}.story-progress-summary strong{color:var(--text-h)}.story-quiz h3{color:var(--text-h);margin-bottom:20px;font-size:24px}.quiz-start-container{justify-content:center;padding:20px 0;display:flex}.start-quiz-btn{background-color:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:12px 24px;font-size:18px;font-weight:600;transition:background-color .2s,transform .1s}.start-quiz-btn:hover{background-color:var(--accent-hover,#bc243c);transform:translateY(-1px)}.start-quiz-btn:active{transform:translateY(1px)}.quiz-question{margin-bottom:30px}.quiz-question-text{color:var(--text-h);margin-bottom:12px;font-size:18px;font-weight:500}.quiz-options{flex-direction:column;gap:10px;display:flex}.quiz-option{border:1px solid var(--border);background:var(--surface-container-lowest);color:var(--text);cursor:pointer;text-align:left;border-radius:12px;flex-direction:column;padding:12px 48px 12px 16px;font-size:18px;line-height:1.4;transition:all .2s;display:flex;position:relative}.quiz-option.correct:after,.quiz-option.incorrect:after{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:13px;font-weight:800;line-height:1;display:inline-flex;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.quiz-option.correct:after{content:"✓";background:var(--success)}.quiz-option.incorrect:after{content:"✕";background:var(--accent)}.quiz-option-pinyin{color:var(--text);opacity:.6;margin-bottom:2px;font-size:.65em}.quiz-option-text{font-family:var(--cjk-sans);font-weight:500}.quiz-option:hover:not(:disabled){background:var(--accent-bg);border-color:var(--accent)}.quiz-option.correct{background:color-mix(in srgb, var(--success) 18%, var(--surface-container-lowest));border-color:var(--success);color:var(--mc-correct-text)}.quiz-option.incorrect{background:var(--accent-bg);border-color:var(--accent);color:var(--mc-incorrect-text)}.quiz-option:disabled{cursor:default}.audio-player{background:color-mix(in srgb, var(--bg) 92%, white);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:999px;align-items:center;gap:18px;padding:14px 24px;display:flex;box-shadow:0 18px 44px #2d292614}.audio-play-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:opacity .15s,transform .15s;display:flex}.audio-play-btn:hover{opacity:.85;transform:scale(1.04)}.audio-play-btn svg{width:18px;height:18px}.audio-progress{color:var(--text);white-space:nowrap;flex:1;font-size:13px}.audio-speed{background:0 0;border:0;gap:2px;padding:0 0 0 14px;display:flex}.audio-speed-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:600;transition:background .1s,color .1s}.audio-speed-btn:hover{background:var(--surface-container-low)}.audio-speed-btn.active{background:var(--accent-bg);color:var(--accent);box-shadow:var(--shadow-soft)}@media (width<=640px){.audio-player{gap:10px;padding:12px}.audio-progress{display:none}.audio-speed{max-width:56vw;overflow-x:auto}}.pinyin-settings{display:inline-block;position:relative}.pinyin-settings-cog{background:var(--surface-container-low);border:1px solid var(--border);width:36px;height:36px;color:var(--text);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:color .15s;display:inline-flex}.pinyin-settings-cog:hover{color:var(--accent)}.pinyin-settings-cog svg{width:18px;height:18px}.pinyin-settings-menu{background:var(--surface-container-lowest);border:1px solid var(--border);min-width:190px;box-shadow:var(--shadow);z-index:100;border-radius:16px;padding:4px;animation:.12s ease-out menu-in;position:absolute;top:calc(100% + 8px);right:0}.pinyin-settings-item{color:var(--text-h);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:12px;display:flex}.pinyin-settings-item:hover{background:var(--accent-bg)}.toggle-switch{background:var(--surface-container-highest);cursor:pointer;border:none;border-radius:11px;flex-shrink:0;width:38px;height:22px;padding:0;transition:background .2s;position:relative}.toggle-switch.on{background:var(--accent)}.toggle-knob{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003}.toggle-switch.on .toggle-knob{transform:translate(16px)}.story-page{max-width:1200px;margin:0 auto;padding:34px 64px 140px}.story-page-nav{justify-content:space-between;align-items:center;gap:12px;margin-bottom:72px;display:flex}.story-page-back{color:var(--text);border-radius:999px;align-items:center;gap:6px;padding:8px 0;font-size:16px;font-weight:600;text-decoration:none;transition:background .15s,color .15s,transform .15s;display:inline-flex}.story-page-back:hover{color:var(--accent);background:0 0;transform:translate(-2px)}.story-page-top-title{color:var(--text-h);text-align:center;flex-direction:column;align-items:center;line-height:1.35;display:flex}.story-page-top-title strong{font-size:28px;line-height:36px}.story-page-top-title span{color:var(--text);letter-spacing:.02em;font-size:15px}.story-page-streak{min-height:40px;color:var(--text-h);border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:12px;padding:0 14px;font-size:15px;text-decoration:none;transition:background .16s,border-color .16s,color .16s,transform .16s;display:inline-flex}.story-page-streak:hover{border-color:var(--accent-border);background:var(--accent-bg);color:var(--accent);transform:translateY(-1px)}.story-page-streak svg{color:var(--accent)}.story-page-header{text-align:center;margin-bottom:34px}.story-page .audio-player{z-index:30;width:fit-content;max-width:calc(100vw - 48px);margin:0;position:fixed;bottom:44px;left:calc(50vw + 40px);transform:translate(-50%)}.story-page-header h1{color:var(--text-h);letter-spacing:0;margin:0;font-size:40px;font-weight:820;line-height:50px}.story-title-row{justify-content:center;align-items:center;min-height:36px;margin-bottom:6px;display:flex;position:relative}.story-title-row .pinyin-settings{position:absolute;right:0}.story-page-header .story-subtitle{color:var(--text);font-size:15px}.story-hero-media{aspect-ratio:21/8;background:var(--surface-container-low);border:1px solid #1e1b1814;border-radius:16px;width:min(680px,100%);margin:0 auto 72px;overflow:hidden;box-shadow:0 22px 46px #2d292614}.story-hero-media img{object-fit:cover;width:100%;height:100%;display:block}.story-page-loading{text-align:center;color:var(--text);padding:60px 0;font-size:16px}.story-page-error{text-align:center;color:#e53e3e;padding:60px 0;font-size:16px}.story-page-progress-note{border:1px solid var(--accent-border);background:var(--accent-bg);max-width:680px;color:var(--text);border-radius:16px;justify-content:space-between;align-items:center;gap:14px;margin:20px auto 0;padding:14px;font-size:14px;display:flex}.story-page-bonus-link{background:var(--accent);color:#fff;white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;min-height:38px;padding:0 14px;font-weight:700;text-decoration:none;transition:background .16s,transform .16s;display:inline-flex}.story-page-bonus-link:hover{background:var(--accent-hover);transform:translateY(-1px)}@media (width<=1024px){.story-page{padding:28px 20px 124px}.story-page-header h1{font-size:28px;line-height:36px}.story-title-row{padding-right:40px}.story-page-progress-note{flex-direction:column;align-items:stretch}.story-page-nav{align-items:flex-start;margin-bottom:36px}.story-page-top-title{display:none}.story-page-streak{min-height:36px;padding:0 10px;font-size:14px}.story-hero-media{margin-bottom:44px}.story-page .audio-player{max-width:calc(100vw - 32px);bottom:20px;left:50%}}:root{--text:#5a4041;--text-h:#1e1b18;--bg:#fff8f5;--surface:#fff8f5;--surface-dim:#e1d8d4;--surface-bright:#fff8f5;--surface-raised:#fff;--surface-container-lowest:#fff;--surface-container-low:#fbf2ed;--surface-container:#f5ece7;--surface-container-high:#efe6e2;--surface-container-highest:#e9e1dc;--surface-variant:#e9e1dc;--border:#e2bebe;--border-strong:#8e7070;--code-bg:#fbf2ed;--accent:#990027;--accent-hover:#bc243c;--accent-2:#006d43;--success:#00a86b;--accent-bg:#bc243c14;--accent-border:#99002742;--social-bg:#fbf2ed;--shadow:#2d29260a 0 18px 42px, #2d292608 0 3px 12px;--shadow-soft:#2d29260a 0 14px 32px;--mc-correct-bg:color-mix(in srgb, #22c55e 22%, var(--bg));--mc-correct-border:#16a34a;--mc-correct-text:var(--text-h);--mc-incorrect-bg:color-mix(in srgb, #ef4444 18%, var(--bg));--mc-incorrect-border:#dc2626;--mc-incorrect-text:var(--text-h);--sans:"Hanken Grotesk", Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;--heading:"Hanken Grotesk", Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;--cjk-sans:"Kaiti SC", KaiTi, STKaiti, "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}#root{box-sizing:border-box;flex-direction:column;width:100%;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{background:linear-gradient(#fff8f5 0%,#fbf2ed 100%);min-width:320px;margin:0}*,:before,:after{box-sizing:border-box}h1,h2{font-family:var(--heading);color:var(--text-h);letter-spacing:0;font-weight:750}h1{margin:32px 0;font-size:32px;line-height:40px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:0;margin:0 0 8px;font-size:24px;line-height:32px}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}a,button{-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit}:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 34%, transparent);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}