:root{--chotto-ink:#1e2a44;--chotto-paper:#fbf9f5;--chotto-violet:#ab8df5;--chotto-coral:#f15a53;--chotto-cyan:#2fc5d0;--chotto-green:#66b96b;--surface-canvas:#fbf9f5;--surface-card:#fff;--surface-dim:#f4f1ea;--surface-tint:#efebe2;--surface-panel:#fdfcfa;--border-card:#e6e2d9;--border-subtle:#e6e2d9;--border-divider:#d8d3c8;--border-hairline:#f0ede6;--border-dashed:#d8d3c8;--border-mint:#cfe6ef;--text-primary:#1e2a44;--text-secondary:#3a4354;--text-muted:#666d7a;--text-subtle:#8a8f9a;--text-inverse:#fbf9f5;--ink-hover:#0f1930;--accent:#ab8df5;--accent-text:#6741c4;--accent-bg:#f6f2fe;--accent-border:#dfd5fb;--coral:#f15a53;--coral-text:#b32b26;--coral-bg:#fdeeed;--coral-border:#fbcdcb;--status-error:#f15a53;--status-error-text:#b32b26;--status-success:#66b96b;--status-success-text:#2f7a43;--status-info:#2fc5d0;--status-info-text:#0a6e78;--mint-start:#eaf6fb;--mint-end:#edf7ee;--scrim-paper-strong:#fbf9f5eb;--backdrop:#1e2a4475;--tone-ngang:#3a4354;--tone-huyen:#0a6e78;--tone-sac:#b32b26;--tone-hoi:#6741c4;--tone-nga:#2f7a43;--tone-nang:#8f5310;--font-heading:"Nunito", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;--font-body:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;--font-ja:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Be Vietnam Pro", sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:18px;--space-5:28px;--space-6:48px;--radius-sm:6px;--radius-card:12px;--radius-icon-box:13px;--radius-tile:15px;--radius-media-card:16px;--radius-banner:18px;--radius-panel:20px;--radius-pill:9999px;--control-height:48px;--focus-ring:0 0 0 3px #2fc5d066;--shadow-float:0 6px 22px #1e2a4417;--nav-h:64px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--surface-canvas:#0f1626;--surface-card:#182134;--surface-dim:#141c2e;--surface-tint:#232e49;--surface-panel:#161e30;--border-card:#283553;--border-subtle:#33405c;--border-divider:#3e4a66;--border-hairline:#232e49;--border-dashed:#3e4a66;--border-mint:#33405c;--text-primary:#f2efe8;--text-secondary:#b9c2d4;--text-muted:#8a96ac;--text-subtle:#8a96ac;--text-inverse:#1e2a44;--ink-hover:#fff;--accent:#c4aeff;--accent-text:#c4aeff;--accent-bg:#232e49;--accent-border:#33405c;--coral-text:#ff9c96;--coral-bg:#232e49;--coral-border:#33405c;--status-error-text:#ff9c96;--status-success-text:#8fd996;--status-info-text:#5cdce6;--mint-start:#161e30;--mint-end:#182134;--scrim-paper-strong:#0f1626eb;--tone-ngang:#b9c2d4;--tone-huyen:#5cdce6;--tone-sac:#ff9c96;--tone-hoi:#c4aeff;--tone-nga:#8fd996;--tone-nang:#ffc97a;--focus-ring:0 0 0 3px #5cdce673;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font-size:16px;line-height:1.625;overflow-x:hidden}:lang(ja){font-family:var(--font-ja)}p{text-wrap:pretty;margin:0}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--accent-text);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}img{max-width:100%;display:block}:focus-visible{box-shadow:var(--focus-ring);border-radius:8px;outline:none}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}h1,h2,h3{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--text-primary);margin:0}h1{font-size:32px;font-weight:800;line-height:38px}h2{font-size:20px;font-weight:800;line-height:1.25}h3{font-size:18px;font-weight:700;line-height:24px}@media (width>=768px){h1{font-size:40px;line-height:44px}h2{font-size:24px}h3{font-size:20px;line-height:26px}}.muted{color:var(--text-muted)}.small{font-size:14px;line-height:22px}.xs{letter-spacing:.02em;font-size:13px;line-height:19px}.eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-size:13px;font-weight:600;line-height:19px}.row{align-items:center;gap:8px;display:flex}.row.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.stack{flex-direction:column;gap:12px;display:flex}.spacer{flex:1}.motif{pointer-events:none;border-radius:50%;position:absolute}.motif.ring{border:12px solid var(--accent-border)}.motif.dot{background:var(--accent)}.shell{flex-direction:column;min-height:100%;display:flex}.shell-main{padding:8px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));flex:1;width:100%;max-width:1240px;margin:0 auto}.topbar{z-index:20;background:var(--scrim-paper-strong);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-card);align-items:center;gap:8px;height:56px;padding:0 12px 0 16px;display:flex;position:sticky;top:0}.brand{color:var(--text-primary);align-items:center;gap:10px;display:flex;text-decoration:none!important}.wordmark{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--text-primary);align-items:baseline;gap:2px;font-size:22px;font-weight:800;line-height:1;display:inline-flex}.wordmark i{background:var(--accent);border-radius:50%;width:7px;height:7px;display:inline-block}.by-chotto{border-left:1px solid var(--border-card);color:var(--text-muted);align-items:center;gap:8px;padding-left:10px;font-size:13px;display:none}.by-chotto img{width:110px;height:auto}.logo-dark{display:none!important}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .logo-light{display:none!important}:root:not([data-theme=light]) .logo-dark{display:block!important}}@media (width>=720px){.by-chotto{display:flex}}.tabbar{z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);background:var(--surface-card);border-top:1px solid var(--border-card);grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.tabbar a{color:var(--text-muted);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:13px;font-weight:500;display:flex;position:relative;text-decoration:none!important}.tabbar a.active{color:var(--text-primary);font-weight:600}.tabbar a.active:after{content:"";background:var(--coral);border-radius:2px;width:22px;height:2.5px;position:absolute;bottom:2px}.sidenav{display:none}@media (width>=1080px){.shell{flex-direction:row}.tabbar{display:none}.sidenav{border-right:1px solid var(--border-card);background:var(--surface-canvas);flex-direction:column;flex-shrink:0;gap:2px;width:236px;height:100vh;padding:20px 14px;display:flex;position:sticky;top:0}.sidenav .brand{flex-direction:column;align-items:flex-start;gap:10px;padding:6px 12px 24px}.sidenav .by-chotto{border-left:0;padding-left:0;display:flex}.sidenav a.nav{height:44px;color:var(--text-secondary);border-radius:12px;align-items:center;gap:12px;padding:0 12px;font-size:15px;font-weight:500;display:flex;text-decoration:none!important}.sidenav a.nav:hover{background:var(--surface-dim);color:var(--text-primary)}.sidenav a.nav.active{color:var(--text-primary);background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-card);font-weight:600}.sidenav a.nav.active span{background:linear-gradient(var(--coral), var(--coral)) left bottom / 100% 2.5px no-repeat;padding-bottom:2px}.shell-body{flex:1;min-width:0}.shell-main{padding:8px 32px 56px}.topbar{height:72px;padding:0 32px}.topbar .brand{display:none}}.btn{height:var(--control-height);border:1px solid var(--border-card);background:var(--surface-card);color:var(--text-primary);letter-spacing:.04em;cursor:pointer;white-space:nowrap;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 20px;font-size:15px;font-weight:600;line-height:20px;transition:background .15s,border-color .15s,transform .15s,opacity .15s;display:inline-flex;text-decoration:none!important}.btn:hover{background:var(--surface-dim);border-color:var(--text-muted)}.btn.primary{background:var(--text-primary);border-color:var(--text-primary);color:var(--text-inverse)}.btn.primary:hover{opacity:.92;transform:translateY(-1px)}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--surface-dim)}.btn.danger{color:var(--status-error-text)}.btn.sm{letter-spacing:.02em;height:40px;padding:0 14px;font-size:14px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.icon-btn{width:44px;height:44px;color:var(--text-primary);cursor:pointer;background:0 0;border:0;border-radius:999px;flex-shrink:0;place-items:center;transition:background .15s,color .15s;display:inline-grid;text-decoration:none!important}.icon-btn:hover{background:var(--surface-dim)}.icon-btn.on{background:var(--text-primary);color:var(--text-inverse)}.icon-btn.sm{width:36px;height:36px}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.chip{border:1px solid var(--border-card);background:var(--surface-card);height:36px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.chip:hover{border-color:var(--text-primary);color:var(--text-primary);background:var(--surface-dim)}.chip.on{background:var(--text-primary);border-color:var(--text-primary);color:var(--text-inverse)}.badge{background:var(--surface-dim);height:26px;color:var(--text-secondary);border:1px solid var(--border-card);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:0 10px;font-size:13px;font-weight:500;display:inline-flex}.badge.accent{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-border)}.badge.accent:before{content:"";background:var(--accent);border-radius:50%;width:7px;height:7px}.badge.warn{background:var(--coral-bg);color:var(--coral-text);border-color:var(--coral-border)}.lang-mark{border-radius:var(--radius-sm);background:var(--surface-card);border:1px solid var(--border-card);min-width:26px;height:22px;color:var(--text-primary);letter-spacing:0;place-items:center;padding:0 5px;font-size:12px;font-weight:700;line-height:1;display:inline-grid}.seg{background:var(--surface-dim);border:1px solid var(--border-card);scrollbar-width:none;border-radius:12px;gap:2px;padding:3px;display:flex;overflow-x:auto}.seg::-webkit-scrollbar{display:none}.seg button{height:36px;color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:9px;flex:1 0 auto;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-size:14px;font-weight:500;display:inline-flex}.seg button:hover{color:var(--text-primary)}.seg button.on{background:var(--surface-card);border-color:var(--border-card);color:var(--text-primary);font-weight:600}.field{flex-direction:column;gap:6px;display:flex}.field>span{color:var(--text-primary);font-size:14px;font-weight:600}.input,select.input,textarea.input{width:100%;min-height:var(--control-height);border:1px solid var(--border-card);background:var(--surface-card);color:var(--text-primary);border-radius:12px;outline:none;padding:11px 14px;font-size:16px}.input::placeholder{color:var(--text-subtle)}.input:focus{border-color:var(--text-muted);box-shadow:var(--focus-ring)}textarea.input{resize:vertical;min-height:120px;font-size:15px;line-height:1.5}.toggle{cursor:pointer;align-items:center;gap:12px;padding:10px 0;display:flex}.toggle input{appearance:none;background:var(--border-divider);cursor:pointer;border-radius:999px;flex-shrink:0;width:44px;height:26px;margin:0;transition:background .15s;position:relative}.toggle input:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle input:checked{background:var(--text-primary)}.toggle input:checked:after{background:var(--surface-canvas);transform:translate(18px)}.section{margin-top:var(--space-6)}.section-head{margin-bottom:var(--space-4);align-items:center;gap:12px;display:flex}.section-head .titles{flex:1;min-width:0}.section-head .desc{color:var(--text-muted);margin-top:2px;font-size:13.5px}.section-head>a{color:var(--accent-text);white-space:nowrap;font-size:14px;font-weight:600}.icon-box{border-radius:var(--radius-icon-box);background:var(--accent-bg);width:44px;height:44px;color:var(--text-primary);flex-shrink:0;place-items:center;display:grid}.icon-box img{width:28px;height:28px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .icon-box.brand-icon{background:var(--chotto-paper)}}.hscroll{scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;gap:16px;margin:0 -16px;padding-inline:16px;display:flex;overflow-x:auto}.hscroll::-webkit-scrollbar{display:none}.hscroll>*{scroll-snap-align:start;flex-shrink:0}@media (width>=1080px){.hscroll{margin:0;padding-inline:0}}.empty{text-align:center;color:var(--text-muted);border:1px dashed var(--border-dashed);border-radius:var(--radius-card);background:var(--surface-panel);padding:28px 18px;font-size:15px}.panel{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-card);padding:var(--space-4)}.divider{background:var(--border-hairline);height:1px;margin:8px 0}.mint-band{border-radius:var(--radius-banner);border:1px solid var(--border-mint);background:linear-gradient(135deg, var(--mint-start), var(--mint-end));color:var(--text-primary);flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px;display:flex;text-decoration:none!important}.mint-band:hover{border-color:var(--text-muted)}.mint-band img{flex-shrink:0;width:110px;height:auto}.mint-band .t{flex:1;min-width:180px;font-size:15px;font-weight:600;line-height:1.4}.mint-band .t small{color:var(--text-muted);margin-top:2px;font-size:13px;font-weight:400;display:block}.lesson-tile{width:244px;color:var(--text-primary);flex-direction:column;gap:10px;display:flex;text-decoration:none!important}.lesson-tile.wide{flex-direction:row;align-items:center;gap:14px;width:100%}.lesson-tile:hover .cover{border-color:var(--text-muted);transform:translateY(-2px)}.cover{aspect-ratio:16/10;border-radius:var(--radius-media-card);border:1px solid var(--border-card);background:var(--surface-dim);transition:transform .18s,border-color .18s;position:relative;overflow:hidden}.cover svg.art{width:100%;height:100%;position:absolute;inset:0}.cover .icon-box{background:var(--surface-card);border:1px solid var(--border-card);position:absolute;top:14px;left:14px}.lesson-tile.wide .cover{border-radius:var(--radius-card);flex-shrink:0;width:112px}.lesson-tile.wide .cover .icon-box{border-radius:10px;width:34px;height:34px;top:8px;left:8px}.cover .dur{background:var(--chotto-ink);color:var(--chotto-paper);border-radius:999px;padding:1px 8px;font-size:13px;font-weight:600;position:absolute;bottom:10px;right:10px}.lesson-tile.wide .cover .dur{padding:0 6px;font-size:12px;bottom:6px;right:6px}.cover .prog{background:var(--accent);height:4px;position:absolute;bottom:0;left:0}.cover .lang-mark{position:absolute;top:10px;right:10px}.lesson-tile.wide .cover .lang-mark{display:none}.lesson-tile .t1{font-family:var(--font-heading);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:17px;font-weight:800;line-height:23px;display:-webkit-box;overflow:hidden}.lesson-tile .t1:lang(ja){font-family:var(--font-ja);font-weight:700}.lesson-tile .t2{color:var(--text-muted);-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:14px;line-height:20px;display:-webkit-box;overflow:hidden}.lesson-tile .meta{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 18px;display:grid}.lesson-grid .lesson-tile{width:auto}.lesson-list{flex-direction:column;gap:12px;display:flex}.topic-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.topic{border-radius:var(--radius-tile);background:var(--surface-card);border:1px solid var(--border-card);color:var(--text-primary);cursor:pointer;text-align:left;align-items:center;gap:12px;padding:10px 12px;font-size:15px;font-weight:600;transition:border-color .15s,transform .15s;display:flex}.topic:hover{border-color:var(--text-muted);transform:translateY(-2px)}.topic .icon-box{border-radius:11px;width:38px;height:38px}.topic.on{border-color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-primary)}.topic .check{color:var(--text-primary);margin-left:auto}.stat-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.stat{padding:var(--space-4);border-radius:var(--radius-card);background:var(--surface-card);border:1px solid var(--border-card)}.stat .v{font-family:var(--font-heading);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:40px;font-weight:800;line-height:1.05}.stat .l{color:var(--text-muted);margin-top:6px;font-size:13px}.sheet-backdrop{z-index:60;background:var(--backdrop);animation:.15s fade;position:fixed;inset:0}.sheet{z-index:61;background:var(--surface-card);border-radius:var(--radius-panel) var(--radius-panel) 0 0;border:1px solid var(--border-card);max-height:86dvh;padding:8px 20px calc(24px + env(safe-area-inset-bottom));animation:.2s ease-out up;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.sheet-grip{background:var(--border-divider);border-radius:99px;width:40px;height:4px;margin:4px auto 12px}.sheet-head{align-items:center;gap:8px;margin-bottom:8px;display:flex}.sheet-head h2{flex:1}@media (width>=720px){.sheet{border-radius:var(--radius-panel);width:440px;max-height:calc(100dvh - 48px);box-shadow:var(--shadow-float);bottom:24px;left:auto;right:24px}.sheet-grip{display:none}}@keyframes up{0%{opacity:0;transform:translateY(24px)}}@keyframes fade{0%{opacity:0}}.toast{left:50%;bottom:calc(var(--nav-h) + 24px);z-index:80;background:var(--chotto-ink);color:var(--chotto-paper);box-shadow:var(--shadow-float);border-radius:12px;max-width:calc(100vw - 32px);padding:11px 18px;font-size:14px;font-weight:500;animation:.15s fade;position:fixed;transform:translate(-50%)}.player{background:var(--surface-canvas);grid-template:"top""media""current""list"minmax(0,1fr)"controls"/minmax(0,1fr);height:100dvh;display:grid;overflow:hidden}.player-top{grid-area:top;align-items:center;gap:4px;min-width:0;padding:6px 8px;display:flex}.player-top .title{flex:1;min-width:0}.player-top .title .t1{font-family:var(--font-heading);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:800;line-height:22px;overflow:hidden}.player-top .title .t1:lang(ja){font-family:var(--font-ja);font-weight:700}.player-top .title .t2{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.player-modes{padding:0 12px 10px}.player-media{grid-area:media;padding:0 12px}.video-box{aspect-ratio:16/9;border-radius:var(--radius-media-card);background:#0f1626;position:relative;overflow:hidden}.video-box iframe,.video-box video{border:0;width:100%;height:100%;position:absolute;inset:0}.audio-stage{border-radius:var(--radius-media-card);background:var(--surface-card);border:1px solid var(--border-card);align-items:center;gap:14px;padding:12px 14px;display:flex;position:relative;overflow:hidden}.audio-stage .icon-box{position:relative}.audio-stage .info{flex:1;min-width:0;position:relative}.audio-stage .motif.ring{border-width:10px;width:100px;height:100px;top:-58px;right:-52px}.audio-stage .info{padding-right:34px}.voice-label{color:var(--text-muted);align-items:center;gap:6px;margin-bottom:2px;font-size:13px;display:inline-flex}.scrub{cursor:pointer;touch-action:none;height:20px;position:relative}.scrub .track{background:var(--border-divider);border-radius:99px;height:4px;position:absolute;top:8px;left:0;right:0;overflow:hidden}.scrub .fill{background:var(--accent);position:absolute;top:0;bottom:0;left:0}.scrub .seg-active{background:var(--accent-border);position:absolute;top:0;bottom:0}.times{color:var(--text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:13px;display:flex}.current{border-bottom:1px solid var(--border-card);grid-area:current;min-height:124px;max-height:48dvh;padding:14px 16px 12px;overflow-y:auto}.current-text{color:var(--text-primary);word-break:break-word;font-size:22px;font-weight:500;line-height:1.7}.current-text:lang(ja){font-size:23px;line-height:2.05}.current-trans{color:var(--text-secondary);margin-top:6px;font-size:16px;line-height:26px}.current-meta{align-items:center;gap:4px;margin-top:8px;display:flex}.current-meta .idx{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-right:auto;font-size:13px}.current .hidden-sub{border-radius:var(--radius-card);background:var(--surface-dim);border:1px dashed var(--border-dashed);height:68px;color:var(--text-muted);cursor:pointer;justify-content:center;align-items:center;gap:8px;width:100%;font-size:15px;display:flex}.note-box{border-radius:var(--radius-card);background:var(--surface-dim);border:1px solid var(--border-subtle);color:var(--text-secondary);margin-top:10px;padding:12px 14px;font-size:15px;line-height:1.65}.turn{color:var(--text-primary);align-items:center;gap:8px;font-size:14px;font-weight:600;display:inline-flex}.turn .bar{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:99px;width:84px;height:6px;overflow:hidden}.turn .bar>i{background:var(--accent);transform-origin:0;height:100%;display:block}.transcript{overscroll-behavior:contain;grid-area:list;min-height:0;padding:8px 8px 24px;position:relative;overflow-y:auto}.t-row{border-radius:var(--radius-card);cursor:pointer;border:1px solid #0000;gap:10px;padding:10px 12px;scroll-margin:80px;display:flex}.t-row:hover{background:var(--surface-dim)}.t-row.active{background:var(--surface-card);border-color:var(--border-card)}.t-row.active .n{color:var(--accent-text);font-weight:700}.t-row .n{width:22px;color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;padding-top:3px;font-size:13px}.t-row .body{flex:1;min-width:0}.t-row .txt{color:var(--text-secondary);font-size:17px;line-height:1.7}.t-row.active .txt{color:var(--text-primary)}.t-row .txt:lang(ja){line-height:2}.t-row .tr{color:var(--text-muted);margin-top:2px;font-size:14px;line-height:22px}.t-row .marks{color:var(--text-muted);flex-direction:column;align-items:center;gap:6px;padding-top:5px;display:flex}.back-current{z-index:2;width:max-content;box-shadow:var(--shadow-float);margin:0 auto;display:flex;position:sticky;bottom:8px}.controls{padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--border-card);background:var(--surface-card);grid-area:controls;justify-content:space-between;align-items:center;gap:2px;display:flex}.controls .icon-btn{width:44px;height:44px}@media (width>=400px){.controls .icon-btn{width:48px;height:48px}}.play-btn{background:var(--text-primary)!important;width:60px!important;height:60px!important;color:var(--text-inverse)!important}.play-btn:hover{background:var(--ink-hover)!important}.rate-btn{font-family:var(--font-heading);font-variant-numeric:tabular-nums;font-size:15px;font-weight:800;border:1px solid var(--border-card)!important;border-radius:12px!important;width:56px!important}.rec-btn.live{animation:1.2s infinite pulse;background:var(--status-error)!important;color:#fff!important}@keyframes pulse{50%{box-shadow:0 0 0 8px #f15a532e}}.menu{background:var(--surface-card);border:1px solid var(--border-card);box-shadow:var(--shadow-float);z-index:40;border-radius:14px;flex-direction:column;min-width:96px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px)}.menu button{cursor:pointer;font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:9px;height:40px;font-weight:600}.menu button:hover{background:var(--surface-dim)}.menu button.on{background:var(--text-primary);color:var(--text-inverse)}.rec-panel{border-radius:var(--radius-card);background:var(--surface-dim);border:1px solid var(--border-subtle);margin-top:12px;padding:12px}.rec-panel .wave{align-items:center;gap:2px;height:36px;display:flex}.rec-panel .wave i{background:var(--text-secondary);opacity:.85;border-radius:2px;flex:1;min-height:2px}.rec-panel .wave.native i{background:var(--accent)}.rec-attempts{gap:4px;display:flex;overflow-x:auto}.meter{background:var(--border-divider);border-radius:99px;flex:1;height:6px;overflow:hidden}.meter>i{background:var(--status-error);height:100%;transition:width 80ms;display:block}.live-dot{color:var(--status-error-text);align-items:center;gap:6px;font-size:14px;font-weight:600;display:inline-flex}.live-dot:before{content:"";background:var(--status-error);border-radius:50%;width:9px;height:9px}.dictation{padding:4px 0}.dictation .diff{margin-top:8px;font-size:18px;line-height:1.8}.diff .ok{color:var(--status-success-text)}.diff .missing{color:var(--status-error-text);background:var(--coral-bg);text-underline-offset:4px;border-radius:4px;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.diff .extra{color:var(--text-muted);text-decoration:line-through}.diff .accent{color:var(--status-info-text);text-underline-offset:4px;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}@media (width>=1080px){.player{grid-template:"top list""media list""current list"minmax(0,1fr)"controls list"/minmax(0,1.15fr) minmax(380px,.85fr);column-gap:8px;max-width:1440px;margin:0 auto}.player-top{padding:12px 16px 6px}.player-modes{padding:0 20px 12px}.player-media{padding:0 20px}.current{border-bottom:0;max-height:none;padding:22px 26px}.current-text{font-size:28px}.current-text:lang(ja){font-size:30px}.transcript{border-left:1px solid var(--border-card);background:var(--surface-panel);padding:16px 12px}.controls{background:0 0;border-top:0;justify-content:center;gap:10px;padding-bottom:24px}}.tok{cursor:pointer;border-radius:4px;transition:background .1s}.tok:hover{background:var(--accent-bg)}.tok.sel{background:var(--accent-bg);box-shadow:0 2px 0 var(--accent)}ruby{ruby-align:center}rt{color:var(--text-muted);letter-spacing:0;-webkit-user-select:none;user-select:none;font-size:.5em;font-weight:500}.current-text rt{font-size:.48em}.en-word{vertical-align:top;flex-direction:column;align-items:center;margin-bottom:4px;line-height:1.3;display:inline-flex}.en-word .ipa{color:var(--text-muted);white-space:nowrap;font-size:.56em;font-weight:400}.en-word .ipa.weak{color:var(--accent-text)}.phrase{-webkit-text-decoration:underline dotted var(--accent);text-decoration:underline dotted var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}.link-mark{color:var(--accent-text);-webkit-user-select:none;user-select:none;margin:0 -2px;font-weight:700}.tones .t-ngang{color:var(--tone-ngang)}.tones .t-huyen{color:var(--tone-huyen)}.tones .t-sac{color:var(--tone-sac)}.tones .t-hoi{color:var(--tone-hoi)}.tones .t-nga{color:var(--tone-nga)}.tones .t-nang{color:var(--tone-nang)}.tone-legend{flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13px;display:flex}.tone-legend span{align-items:center;gap:5px;display:inline-flex}.tone-legend i{background:currentColor;border-radius:50%;width:8px;height:8px}.syl-table{border-collapse:collapse;width:100%;font-size:15px}.syl-table th,.syl-table td{text-align:left;border-bottom:1px solid var(--border-hairline);padding:7px 8px}.syl-table th{color:var(--text-muted);font-size:13px;font-weight:600}.contour{width:44px;height:22px}.vocab-head{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.vocab-head .w{font-family:var(--font-heading);letter-spacing:-.02em;font-size:32px;font-weight:800;line-height:1.2}.vocab-head .w:lang(ja){font-family:var(--font-ja);font-weight:700}.vocab-head .r{color:var(--text-muted);font-size:17px}.kv{grid-template-columns:max-content 1fr;gap:8px 16px;margin-top:14px;font-size:15px;display:grid}.kv dt{color:var(--text-muted)}.kv dd{margin:0}.meaning{margin-top:10px;font-size:19px;font-weight:600;line-height:1.45}.onboard{max-width:680px;margin:0 auto;padding:28px 16px 128px;position:relative}.onboard>:not(.motif){position:relative}.onboard .by-chotto{display:flex}.onboard-ring{width:190px;height:190px;position:fixed;top:-96px;right:-96px}.onboard-dot{width:10px;height:10px;position:fixed;bottom:112px;left:14px}.onboard-foot{padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent, var(--surface-canvas) 32%);z-index:5;justify-content:center;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.pair-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;display:grid}.choice{border-radius:var(--radius-card);border:1px solid var(--border-card);background:var(--surface-card);cursor:pointer;text-align:left;min-height:56px;color:var(--text-primary);align-items:center;gap:12px;padding:12px 14px;font-size:15px;font-weight:600;transition:border-color .15s;display:flex}.choice:hover{border-color:var(--text-muted)}.choice.on{border-color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-primary)}.choice .check{margin-left:auto}.review-item{padding:var(--space-4);border-radius:var(--radius-card);background:var(--surface-card);border:1px solid var(--border-card);align-items:flex-start;gap:12px;display:flex}.review-item .txt{font-size:17px;line-height:1.7}.tabs{scrollbar-width:none;gap:8px;margin:16px 0 18px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.dropzone{border:1px dashed var(--border-dashed);border-radius:var(--radius-card);text-align:center;color:var(--text-muted);cursor:pointer;background:var(--surface-panel);padding:18px;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.drag{border-color:var(--text-primary);color:var(--text-primary);background:var(--surface-dim)}.error{color:var(--status-error-text);font-size:14px}.spin{border:2.5px solid var(--border-divider);border-top-color:var(--text-primary);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite rot}@keyframes rot{to{transform:rotate(360deg)}}.center{place-items:center;gap:12px;min-height:40vh;display:grid}.hide-sm{display:none}@media (width>=720px){.hide-sm{display:inline}}@media (width>=1080px){.hide-lg{display:none!important}}@media (hover:none){.hide-touch{display:none}}@keyframes shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.asr-box{border-radius:var(--radius-card);background:var(--surface-dim);border:1px solid var(--border-subtle);padding:16px}.code{background:var(--surface-card);border:1px solid var(--border-card);white-space:nowrap;border-radius:6px;padding:1px 6px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.85em}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media print{body{color:#000;background:#fff}.tabbar,.sidenav,.topbar,.controls{display:none!important}}.sm-only-code{font-size:13px;font-weight:700;display:inline}@media (width>=720px){.sm-only-code{display:none}}.home-hero{margin:8px -16px 0;padding:28px 16px 8px;position:relative;overflow:hidden}.home-hero>:not(.motif){position:relative}.hero-ring{width:150px;height:150px;top:-104px;right:-92px}.hero-dot{width:10px;height:10px;top:14px;right:26px}@media (width>=900px){.hero-ring{width:170px;height:170px;top:-56px;right:-40px}.hero-dot{width:12px;height:12px;top:auto;bottom:26px;right:150px}.home-hero>:not(.motif){max-width:calc(100% - 200px)}}.home-hero h1{max-width:16ch;margin-top:6px}.home-hero .lead{max-width:58ch;color:var(--text-secondary);margin-top:10px;font-size:16px;line-height:26px}@media (width>=1080px){.home-hero{margin:8px 0 0;padding:36px 0 8px}}