:root{--text:#3a3a42;--text-muted:#8a8a93;--text-h:#14131a;--bg:#fafafa;--card:#fff;--border:#e5e4e7;--accent:#4f46e5;--accent-text:#fff;--error:#c0392b;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}h1,h2{color:var(--text-h)}.muted{color:var(--text-muted)}.small{font-size:.85rem}.error{color:var(--error)}.center{justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.page{max-width:720px;margin:0 auto;padding:0 1rem 3rem}.page.wide{max-width:1240px}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:.75rem;margin-bottom:1rem;padding:1rem 0;display:flex}.spacer{flex:1}.brand{color:var(--text-h);font-size:1.05rem;font-weight:700;text-decoration:none}.nav{gap:.25rem;display:flex}.nav-tab{color:var(--text-muted);border-radius:999px;padding:.3rem .6rem;font-size:.92rem;text-decoration:none}.nav-tab:hover{color:var(--accent);background:#f1efff}.nav-tab.active{background:var(--accent);color:var(--accent-text)}@media (width<=560px){.hide-sm{display:none}}.filters{flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1rem;display:flex}.filter-chip{background:var(--card);color:var(--text);border:1px solid var(--border);text-transform:capitalize;border-radius:999px;padding:.35rem .8rem;font-size:.88rem}.filter-chip.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.filter-sep{background:var(--border);align-self:stretch;width:1px;margin:0 .35rem}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem 1rem;display:grid}.lesson-card{color:inherit;flex-direction:column;gap:.6rem;text-decoration:none;display:flex}.thumb{aspect-ratio:16/9;background:#000 50%/cover no-repeat;border-radius:12px;position:relative;overflow:hidden}.lesson-card:hover .thumb{outline:2px solid var(--accent);outline-offset:2px}.thumb-duration{color:#fff;background:#000000c7;border-radius:4px;padding:.1rem .35rem;font-size:.78rem;position:absolute;bottom:.4rem;right:.4rem}.lesson-card-title{color:var(--text-h);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:600;line-height:1.35;display:-webkit-box;overflow:hidden}.lesson-card-meta{text-transform:capitalize;align-items:center;gap:.5rem;display:flex}.level{border:1px solid #0000;border-radius:999px;padding:.1rem .45rem;font-size:.75rem;font-weight:600}.level-easy{color:#1c7c43;background:#e7f6ec}.level-medium{color:#9a6412;background:#fff3da}.level-hard{color:#b3261e;background:#fdeaea}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem}.auth-card{flex-direction:column;gap:.75rem;width:100%;max-width:340px;display:flex}.auth-card h1{margin:0}label{flex-direction:column;gap:.25rem;font-size:.9rem;display:flex}input{border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;font-size:1rem}input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}button{cursor:pointer;background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:.55rem .9rem;font-size:1rem}button:disabled{opacity:.6;cursor:default}button.link{color:var(--accent);background:0 0;padding:.25rem;font-size:.9rem}.lesson-list{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.lesson-list a{color:inherit;text-decoration:none;display:block}.lesson-title{color:var(--text-h);font-weight:600}.reader-bar{align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.reader-title{text-align:center;flex:1;min-width:0}.reader-title .lesson-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.neighbour{color:var(--accent);border:1px solid var(--border);white-space:nowrap;background:0 0;border-radius:999px;flex:none;padding:.35rem .75rem;font-size:.88rem;text-decoration:none}.neighbour:hover{background:#f1efff}.neighbour.disabled{color:var(--text-muted);opacity:.45;cursor:default;border-color:#0000}.reader-grid{gap:1.5rem;display:grid}@media (width>=900px){.reader-grid{grid-template-columns:minmax(0,1fr) minmax(300px,400px);align-items:start}.reader-main{position:sticky;top:1rem}.reader-side{border:1px solid var(--border);background:var(--card);border-radius:12px;max-height:calc(100vh - 2rem);padding:0 .75rem;overflow-y:auto}}.player-wrap{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;overflow:hidden}.player-wrap iframe{border:0;width:100%;height:100%}.caption{min-height:3.5rem;margin:1rem 0}.subtitle-en{margin:0 0 .25rem;font-size:1.25rem;line-height:1.6}.subtitle-zh{color:var(--text-muted);margin:0;font-size:1rem}.token{font:inherit;color:var(--text-h);cursor:pointer;background:0 0;border:none;border-radius:4px;margin:0;padding:0 1px}.token:hover{color:var(--accent);background:#ece9fe}.chip{background:#ece9fe;border-radius:999px;align-items:center;gap:.35rem;margin-top:.5rem;padding:.3rem .6rem;font-size:.9rem;display:inline-flex}.controls{flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.6rem;display:flex}.controls button{background:var(--card);color:var(--text);border:1px solid var(--border);padding:.4rem .7rem;font-size:.9rem}.controls button.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.controls button:disabled{opacity:.4}.transcript{margin:.5rem 0 0;padding:0;list-style:none}.transcript .subtitle-en,.transcript .sentence-en{margin:0}.sentence-row{border-bottom:1px solid var(--border);cursor:pointer;flex-direction:column;gap:.15rem;padding:.6rem .5rem;display:flex}.sentence-row:hover{background:#f4f3ff}.sentence-row.active{border-left:3px solid var(--accent);background:#ece9fe}.sentence-en{color:var(--text-h);font-size:1rem;line-height:1.55}.feed-scroll{scroll-snap-type:y mandatory;scroll-behavior:smooth;height:calc(100vh - 4.5rem);margin:0 -1rem;overflow-y:auto}.feed-item{scroll-snap-align:start;flex-direction:column;justify-content:center;gap:.9rem;height:calc(100vh - 4.5rem);padding:0 1rem 1rem;display:flex}.clip-player,.clip-poster{aspect-ratio:16/9;background:#000 50%/cover no-repeat;border-radius:12px;width:100%;overflow:hidden}.clip-player iframe{border:0;width:100%;height:100%}.feed-caption{min-height:0;overflow-y:auto}.feed-meta{margin-bottom:.35rem}.feed-text{color:var(--text-h);margin:0;font-size:1.2rem;line-height:1.7}.feed-word{color:var(--text-h);border-radius:4px;padding:0 1px;text-decoration:none}.feed-word:hover{color:var(--accent);background:#ece9fe}.feed-end{padding:2rem 0}.word-detail{flex-direction:column;gap:.9rem;display:flex}.fragment{flex-direction:column;gap:.5rem;display:flex}.fragment-en{color:var(--text-h);margin:0;font-size:1.3rem;line-height:1.6}.fragment-zh{margin:0;font-size:1.05rem}.fragment-foot{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:.75rem;padding-top:.6rem;display:flex}.fragment-foot .link{color:var(--accent);text-decoration:none}.word-card{flex-direction:column;gap:.6rem;margin-top:.75rem;display:flex}.word-card-head{align-items:center;gap:.5rem;display:flex}.word-card-head>div:first-child{flex:1;min-width:0}.word-card-word{color:var(--text-h);font-size:1.35rem}.phonetic{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.icon-btn{color:var(--text-muted);background:0 0;padding:.25rem .4rem;font-size:1.1rem;line-height:1}.icon-btn:hover{color:var(--accent)}.word-gloss{color:var(--text-h);margin:0;font-size:1.15rem}.senses{flex-direction:column;gap:.4rem;margin:0;padding-left:1.2rem;font-size:.95rem;display:flex}.senses .pos{color:var(--accent);margin-right:.4rem;font-style:italic}.senses .example{margin-top:.15rem;display:block}.word-context{border-top:1px solid var(--border);margin:0;padding-top:.5rem;font-size:.95rem}.word-card-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.word-card-actions .link{color:var(--accent);text-decoration:none}.vocab-list{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.vocab-item{flex-direction:column;gap:.5rem;display:flex}.vocab-head{align-items:center;gap:.35rem;display:flex}.vocab-word{color:var(--text-h);font-size:1.2rem;font-weight:600;text-decoration:none}.vocab-word:hover{color:var(--accent)}.mastery{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.15rem .55rem;font-size:.78rem}.mastery-new{color:var(--accent);background:#f1efff;border-color:#ddd8ff}.mastery-learning{color:#9a6412;background:#fff3da;border-color:#f3e2bd}.mastery-mastered{color:#1c7c43;background:#e7f6ec;border-color:#cfe9d8}.vocab-source{border-top:1px solid var(--border);padding-top:.5rem}.vocab-source-en,.vocab-source-zh{margin:0 0 .2rem}.vocab-source-en{color:var(--text-h)}.vocab-source .link{color:var(--accent);font-size:.88rem;text-decoration:none}.auth-page{background:radial-gradient(60rem 30rem at 50% -12rem, #eeecff 0%, transparent 60%), var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}.auth-card{background:var(--card);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:0;width:100%;max-width:400px;padding:2rem 1.75rem 1.5rem;display:flex;box-shadow:0 1px 2px #14131a0a,0 18px 40px -28px #14131a59}.auth-brand{color:var(--accent);letter-spacing:-.01em;font-size:1.05rem;font-weight:700;text-decoration:none}.auth-title{margin:1rem 0 .35rem;font-size:1.5rem;line-height:1.2}.auth-sub{color:var(--text-muted);margin:0 0 1.5rem;font-size:.92rem;line-height:1.5}.auth-card form{flex-direction:column;gap:1rem;display:flex}.auth-aside{color:var(--text-muted);margin:1rem 0 0;font-size:.82rem;line-height:1.5}.auth-foot{border-top:1px solid var(--border);flex-direction:column;align-items:flex-start;gap:.15rem;margin-top:1.25rem;padding-top:1rem;display:flex}.auth-foot a{color:var(--accent);padding:.25rem;font-size:.9rem;text-decoration:none}.field{flex-direction:column;gap:.35rem;display:flex}.field-label{color:var(--text-h);font-size:.85rem;font-weight:500}.field-control{display:flex;position:relative}.field-control input{width:100%}.field-control input[type=password],.field-control input[type=text]{padding-right:2.75rem}.reveal{width:2rem;height:2rem;color:var(--text-muted);background:0 0;border-radius:6px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:50%;right:.3rem;transform:translateY(-50%)}.reveal:hover{color:var(--accent);background:#f1efff}.field-hint{color:var(--text-muted);font-size:.78rem;line-height:1.4}.field-hint.bad{color:var(--error)}.form-error,.form-ok{border-radius:8px;margin:0;padding:.6rem .75rem;font-size:.86rem;line-height:1.45}.form-error{color:var(--error);background:#fdf1ef;border:1px solid #f3d6d1}.form-ok{color:#17694c;background:#eefaf4;border:1px solid #cfeadf}.btn-primary{width:100%;padding:.65rem 1rem;font-weight:500}.btn-quiet{background:var(--card);color:var(--text-h);border:1px solid var(--border);align-self:flex-start;font-size:.92rem}.btn-quiet:hover{border-color:var(--accent);color:var(--accent)}.btn-small,.btn-inline{background:var(--accent);color:var(--accent-text);border-radius:8px;align-items:center;padding:.4rem .8rem;font-size:.9rem;text-decoration:none;display:inline-flex}.btn-inline{font-size:.88rem}a.btn-primary{background:var(--accent);width:auto;color:var(--accent-text);border-radius:8px;justify-content:center;text-decoration:none;display:inline-flex}.account-link{color:var(--text);border-radius:999px;align-items:center;gap:.5rem;padding:.25rem .6rem .25rem .25rem;font-size:.9rem;text-decoration:none;display:inline-flex}.account-link:hover,.account-link.active{color:var(--accent);background:#f1efff}.avatar{background:var(--accent);width:1.75rem;height:1.75rem;color:var(--accent-text);border-radius:50%;place-items:center;font-size:.8rem;font-weight:600;display:grid}.page-head{margin:.5rem 0 1.25rem}.page-title{margin:0 0 .25rem;font-size:1.6rem;line-height:1.2}.page-head p{margin:0;font-size:.95rem}.stack{flex-direction:column;gap:1.25rem;display:flex}.panel{background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:.85rem;padding:1.25rem;display:flex}.panel-title{margin:0;font-size:1.05rem}.panel .muted{margin:0}.detail-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:0;display:grid}.detail-list dt{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.2rem;font-size:.78rem}.detail-list dd{color:var(--text-h);margin:0;font-size:.98rem}.detail-list a{color:var(--accent)}.narrow-form{flex-direction:column;gap:.9rem;max-width:22rem;display:flex}.narrow-form .btn-primary{align-self:flex-start;width:auto}.empty-state{text-align:center;flex-direction:column;align-items:center;gap:.6rem;padding:4rem 1rem;display:flex}.empty-code{letter-spacing:.14em;color:var(--text-muted);margin:0;font-size:.85rem}.empty-title{margin:0;font-size:1.3rem}.empty-state p{max-width:30rem;margin:0}.empty-state .btn-primary{margin-top:.75rem}.skeleton{pointer-events:none}.skeleton .thumb{background:#eeedf1}.skeleton-line{background:#eeedf1;border-radius:4px;height:.7rem;margin-bottom:.45rem}.skeleton-line.short{width:55%}.skeleton .thumb,.skeleton-line{animation:1.4s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.5}}@media (prefers-reduced-motion:reduce){.skeleton .thumb,.skeleton-line{animation:none}}.more-row{justify-content:center;align-items:center;gap:.85rem;margin:1.75rem 0 .5rem;display:flex}.player-wrap{position:relative}.player-mount{width:100%;height:100%}.player-poster{cursor:pointer;background-color:#000;background-position:50%;background-size:cover;border:0;border-radius:0;place-items:center;width:100%;height:100%;padding:0;display:grid;position:absolute;inset:0}.player-poster:after{content:"";background:linear-gradient(#0000001f 0%,#0000006b 100%);position:absolute;inset:0}.player-poster-btn{z-index:1;color:#14131a;background:#ffffffeb;border-radius:50%;place-items:center;width:4.25rem;height:4.25rem;padding-left:.25rem;transition:transform .15s,background .15s;display:grid;position:relative}.player-poster:hover .player-poster-btn,.player-poster:focus-visible .player-poster-btn{background:#fff;transform:scale(1.06)}@media (prefers-reduced-motion:reduce){.player-poster-btn{transition:none}}