/* MoraPath Web learning stylesheet. Ported from the approved W0/W1 draft
   (docs/product-design/open-design/web-learning-w0-w1-v1/styles.css, approved 2026-10-08). The V5 tokens below must stay
   equal to docs/product-design/open-design/app-wide-visual-v5/theme.css (UI-0011); test/designParity.test.ts checks it.
   Phone layout by default; desktop (sidebar) from 900px. Theme: system by default, data-theme on <html> overrides. */
:root{color-scheme:light;--bg:#F6F6FA;--surface:#FFFFFF;--soft:#EEEEF4;--line:#E3E3EE;--line-strong:#C9C9DA;--ink:#1D1B3A;--muted:#5B5975;--on-ink:#FFFFFF;--scrim:rgba(29,27,58,.42);--bar:rgba(255,255,255,.86);--danger:#C4122F;--danger-bg:#FDE8EC;--warning:#8A5300;--warn-bg:#FFF1D6;--success:#0B7A55;--success-bg:#DFF6EC;--tab:#DA3A12;--materials-fill:#DA3A12;--materials-edge:#A82E10;--materials-tint:#FFE9E2;--materials-text:#C23412;--materials-on-fill:#FFFFFF;--materials-deco:#FF8A6B;--materials-inverse:#C23412;--vocabulary-fill:#5B4BF0;--vocabulary-edge:#3E2FC4;--vocabulary-tint:#ECEAFF;--vocabulary-text:#5040E6;--vocabulary-on-fill:#FFFFFF;--vocabulary-deco:#8F84FF;--vocabulary-inverse:#5040E6;--ai-fill:#0672C7;--ai-edge:#04508C;--ai-tint:#E1F1FF;--ai-text:#0668B5;--ai-on-fill:#FFFFFF;--ai-deco:#4FB3FF;--ai-inverse:#0668B5;--exam-fill:#0B7F58;--exam-edge:#075A3E;--exam-tint:#DDF6EB;--exam-text:#0A7651;--exam-on-fill:#FFFFFF;--exam-deco:#3FD39E;--exam-inverse:#0A7651;--my-fill:#FFC233;--my-edge:#D99A00;--my-tint:#FFF3D1;--my-text:#855C00;--my-on-fill:#1D1B3A;--my-deco:#FFD86B;--my-inverse:#855C00;--tile-0-bg:#0B7F58;--tile-0-fg:#FFFFFF;--tile-1-bg:#0672C7;--tile-1-fg:#FFFFFF;--tile-2-bg:#FFC233;--tile-2-fg:#1D1B3A;--tile-3-bg:#5B4BF0;--tile-3-fg:#FFFFFF;--tile-4-bg:#DA3A12;--tile-4-fg:#FFFFFF;--tile-5-bg:#C21F7A;--tile-5-fg:#FFFFFF}
:root[data-theme=dark]{color-scheme:dark;--bg:#12111E;--surface:#1D1C2E;--soft:#28273D;--line:#33324C;--line-strong:#4C4B68;--ink:#F4F3FF;--muted:#B7B5D3;--on-ink:#12111E;--scrim:rgba(0,0,0,.56);--bar:rgba(29,28,46,.88);--danger:#FF8A98;--danger-bg:#3D1720;--warning:#FFC96B;--warn-bg:#38290F;--success:#5FE0AE;--success-bg:#11342A;--tab:#FF8562;--materials-fill:#DA3A12;--materials-edge:#8F2408;--materials-tint:#3A1D17;--materials-text:#FF9473;--materials-on-fill:#FFFFFF;--materials-deco:#FF8A6B;--materials-inverse:#C23412;--vocabulary-fill:#5B4BF0;--vocabulary-edge:#3324A8;--vocabulary-tint:#25214A;--vocabulary-text:#A79EFF;--vocabulary-on-fill:#FFFFFF;--vocabulary-deco:#8F84FF;--vocabulary-inverse:#5040E6;--ai-fill:#0672C7;--ai-edge:#03406F;--ai-tint:#132B42;--ai-text:#6CC0FF;--ai-on-fill:#FFFFFF;--ai-deco:#4FB3FF;--ai-inverse:#0668B5;--exam-fill:#0B7F58;--exam-edge:#054A33;--exam-tint:#11312A;--exam-text:#5FE0AE;--exam-on-fill:#FFFFFF;--exam-deco:#3FD39E;--exam-inverse:#0A7651;--my-fill:#FFC233;--my-edge:#A87700;--my-tint:#352B12;--my-text:#FFD06B;--my-on-fill:#1D1B3A;--my-deco:#FFD86B;--my-inverse:#855C00;--tile-0-bg:#0B7F58;--tile-0-fg:#FFFFFF;--tile-1-bg:#0672C7;--tile-1-fg:#FFFFFF;--tile-2-bg:#FFC233;--tile-2-fg:#1D1B3A;--tile-3-bg:#5B4BF0;--tile-3-fg:#FFFFFF;--tile-4-bg:#DA3A12;--tile-4-fg:#FFFFFF;--tile-5-bg:#C21F7A;--tile-5-fg:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#12111E;--surface:#1D1C2E;--soft:#28273D;--line:#33324C;--line-strong:#4C4B68;--ink:#F4F3FF;--muted:#B7B5D3;--on-ink:#12111E;--scrim:rgba(0,0,0,.56);--bar:rgba(29,28,46,.88);--danger:#FF8A98;--danger-bg:#3D1720;--warning:#FFC96B;--warn-bg:#38290F;--success:#5FE0AE;--success-bg:#11342A;--tab:#FF8562;--materials-fill:#DA3A12;--materials-edge:#8F2408;--materials-tint:#3A1D17;--materials-text:#FF9473;--materials-on-fill:#FFFFFF;--materials-deco:#FF8A6B;--materials-inverse:#C23412;--vocabulary-fill:#5B4BF0;--vocabulary-edge:#3324A8;--vocabulary-tint:#25214A;--vocabulary-text:#A79EFF;--vocabulary-on-fill:#FFFFFF;--vocabulary-deco:#8F84FF;--vocabulary-inverse:#5040E6;--ai-fill:#0672C7;--ai-edge:#03406F;--ai-tint:#132B42;--ai-text:#6CC0FF;--ai-on-fill:#FFFFFF;--ai-deco:#4FB3FF;--ai-inverse:#0668B5;--exam-fill:#0B7F58;--exam-edge:#054A33;--exam-tint:#11312A;--exam-text:#5FE0AE;--exam-on-fill:#FFFFFF;--exam-deco:#3FD39E;--exam-inverse:#0A7651;--my-fill:#FFC233;--my-edge:#A87700;--my-tint:#352B12;--my-text:#FFD06B;--my-on-fill:#1D1B3A;--my-deco:#FFD86B;--my-inverse:#855C00;--tile-0-bg:#0B7F58;--tile-0-fg:#FFFFFF;--tile-1-bg:#0672C7;--tile-1-fg:#FFFFFF;--tile-2-bg:#FFC233;--tile-2-fg:#1D1B3A;--tile-3-bg:#5B4BF0;--tile-3-fg:#FFFFFF;--tile-4-bg:#DA3A12;--tile-4-fg:#FFFFFF;--tile-5-bg:#C21F7A;--tile-5-fg:#FFFFFF}}
:root{--f-round:"SF Pro Rounded",ui-rounded,-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;--f-body:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;--f-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","PingFang TC",sans-serif;--m-fill:var(--materials-fill);--m-edge:var(--materials-edge);--m-tint:var(--materials-tint);--m-text:var(--materials-text);--m-on:var(--materials-on-fill)}
body{margin:0;font:16px/1.55 var(--f-body);color:var(--ink);background:var(--bg);text-align:left}
*,*::before,*::after{box-sizing:border-box}
[lang=ja]{font-family:var(--f-ja)}
h1,h2,h3,p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ai-fill);outline-offset:2px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{min-height:100vh;height:100dvh;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow:auto}
.page{padding:16px 16px 24px}
.tabs{display:flex;border-top:1px solid var(--line);background:var(--bar);padding:6px 4px 10px;flex-shrink:0}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;color:var(--muted);font:700 12px var(--f-body);text-decoration:none;border-radius:12px}
.tabs a[aria-current=page]{color:var(--tab)}
.side{border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;padding:20px 14px;gap:4px}
.brand{display:flex;align-items:center;gap:10px;font:800 19px var(--f-round);margin:0 6px 18px}
.brand i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--materials-fill);color:var(--materials-on-fill);font-style:normal}
.side a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:14px;color:var(--ink);font:750 16px var(--f-body);text-decoration:none}
.side a[aria-current=page]{background:var(--m-tint);color:var(--m-text)}
.side .side-foot{margin-top:auto;font-size:13px;color:var(--muted);padding:0 8px;line-height:1.5}
svg.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.main{min-width:0;display:flex;flex-direction:column}
.title{font:800 28px/1.15 var(--f-round);letter-spacing:-.02em}
.h2{font:800 20px/1.3 var(--f-round)}
.meta{font-size:14px;font-weight:600;color:var(--muted);line-height:1.45}
.lead{font-size:17px;line-height:1.6}
.muted{color:var(--muted)}
.button{--b-bg:var(--m-fill);--b-fg:var(--m-on);--b-edge:var(--m-edge);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border:0;border-radius:16px;background:var(--b-bg);color:var(--b-fg);font:800 16px/1.2 var(--f-round);box-shadow:0 4px 0 var(--b-edge);margin-bottom:4px;cursor:pointer;text-decoration:none}
.button.secondary{--b-bg:var(--surface);--b-fg:var(--m-text);--b-edge:var(--line-strong);border:2px solid var(--line)}
.button.subtle{--b-bg:var(--soft);--b-fg:var(--ink);--b-edge:var(--line-strong)}
.button.danger{--b-bg:var(--danger-bg);--b-fg:var(--danger);--b-edge:var(--line-strong)}
.button:disabled{--b-bg:var(--soft);--b-fg:var(--muted);--b-edge:var(--line);cursor:default}
.button.full{width:100%}
.button.small{min-height:44px;font-size:15px;padding:8px 16px}
/* 積木風 press: the face drops onto its edge (4→1); Reduce Motion darkens instead (App moraChunkyPress). */
@media(prefers-reduced-motion:no-preference){.button:not(:disabled):not([aria-disabled=true]):active{transform:translateY(3px);box-shadow:0 1px 0 var(--b-edge)}}
@media(prefers-reduced-motion:reduce){.button:not(:disabled):not([aria-disabled=true]):active{filter:brightness(.92)}}
.text-link{background:none;border:0;color:var(--m-text);font:750 15px var(--f-body);min-height:44px;min-width:44px;padding:0 4px;cursor:pointer}
.chunky{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:16px;background:var(--m-fill);color:var(--m-on);box-shadow:0 4px 0 var(--m-edge);margin-bottom:4px}
.chunky:disabled{background:var(--soft);color:var(--muted);box-shadow:0 4px 0 var(--line);cursor:default}
.search{display:flex;align-items:center;gap:10px;min-height:52px;flex:1;min-width:0;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:0 4px 0 14px;color:var(--muted);font-size:17px}
.search:focus-within{border-color:var(--m-fill)}
.search input{flex:1;min-width:0;min-height:48px;border:0;background:none;color:var(--ink);font:500 17px var(--f-body);outline:none}
.search input::placeholder{color:var(--muted)}
/* 積木風 clear (the App's MoraSearchField ✕): a 32px subtle brick inside the field; ::after makes the 44px target. */
.chunky.small.search-clear{position:relative;flex:none;width:32px;height:29px;margin:0 6px 3px 0;border-radius:12px;background:var(--soft);border-color:var(--soft);color:var(--ink)}
.chunky.small.search-clear .ic{width:14px;height:14px}
.chunky.small.search-clear::after{content:"";position:absolute;inset:-8px -8px -11px}
.seg{display:flex;gap:8px;margin:12px 0 14px;flex-wrap:wrap}
.seg button{min-height:44px;padding:8px 18px;border-radius:14px;background:var(--surface);border:2px solid var(--line);color:var(--muted);font:800 15px var(--f-round)}
.seg button[aria-pressed=true],.seg button[aria-checked=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.field{display:grid;gap:6px;font-weight:700;margin-bottom:14px}
.field input{min-height:52px;border:2px solid var(--line);border-radius:14px;background:var(--surface);padding:0 14px;font-size:17px;font-weight:500}
.field.invalid input{border-color:var(--danger)}
.field-error{color:var(--danger);font-size:15px;font-weight:650}
.card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 3px 0 var(--line)}
.list{display:grid;gap:12px}
.list>*{min-width:0}
.row{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 3px 0 var(--line);min-height:96px}
.row-link{color:inherit;text-decoration:none}
.row-link::after{content:"";position:absolute;inset:0;border-radius:18px}
.row-link:focus-visible{outline:none}
.row:focus-within{border-color:var(--m-fill)}
.row .chunky.small{position:relative;z-index:1}
.thumb{flex:none;width:96px;height:56px;border-radius:14px;display:grid;place-items:center;color:#fff}
.thumb.t0{background:var(--tile-0-bg)}
.thumb.t1{background:var(--tile-3-bg)}
.thumb.t2{background:var(--tile-5-bg)}
.thumb.audio,.thumb.text{background:var(--m-tint);color:var(--m-text)}
.thumb.local{background:var(--soft);color:var(--muted);border:2px dashed var(--line-strong)}
.row .copy{flex:1;min-width:0}
.row strong{display:block;font:800 17px/1.35 var(--f-round);overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:10px;background:var(--m-tint);color:var(--m-text);font:800 13px var(--f-round)}
.badge.neutral{background:var(--soft);color:var(--muted)}
.badge.warn{background:var(--warn-bg);color:var(--warning)}
.continue{color:inherit;text-decoration:none;display:flex;align-items:center;gap:14px;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:12px 14px;box-shadow:0 3px 0 var(--line);margin-bottom:12px;font:800 17px var(--f-round)}
.continue i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--m-tint);color:var(--m-text)}
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:18px;padding:14px 16px;margin-bottom:14px;font-weight:600}
.notice.warn{background:var(--warn-bg);color:var(--warning)}
.notice.danger{background:var(--danger-bg);color:var(--danger)}
.notice.info{background:var(--ai-tint);color:var(--ai-text)}
.notice.ok{background:var(--success-bg);color:var(--success)}
.notice p{color:var(--ink);font-weight:500;margin-top:2px}
.empty{text-align:center;padding:48px 16px;display:grid;justify-items:center;gap:10px}
.empty .blob{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:var(--m-tint);color:var(--m-text)}
.spinner{display:inline-block;width:20px;height:20px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-right-color:currentColor;opacity:.55}}
.skel{background:var(--soft);border-radius:14px}
.player{display:flex;flex-direction:column;height:100%}
.player-top{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 4px;min-height:56px}
.player-top .ptitle{flex:1;min-width:0;font:750 16px var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{position:relative;background:#101018;color:#fff;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;flex-shrink:0}
.stage .stage-title{font:700 17px var(--f-ja)}
.stage.state{background:var(--soft);color:var(--ink);border:2px dashed var(--line-strong);border-radius:0}
.stage-inner{display:grid;justify-items:center;gap:10px;padding:16px;max-width:520px}
.stage-inner .h2{font-size:19px}
.drop{position:absolute;inset:10px;border:3px dashed var(--m-fill);border-radius:18px;background:color-mix(in srgb,var(--m-tint) 85%,transparent);display:grid;place-items:center;color:var(--m-text);font:800 18px var(--f-round)}
.transcript{display:grid;gap:4px;padding:8px 12px}
.line{padding:10px 12px;border-radius:16px}
.line .ja{font:700 calc(20px * var(--sub-scale,1))/1.6 var(--f-ja)}
.line .tr{font-size:calc(15px * var(--sub-scale,1));font-weight:650;color:var(--muted)}
.line.current{background:var(--m-tint)}
.line rt{font-size:10px;font-weight:600;color:var(--muted)}
.transport{display:flex;align-items:flex-end;justify-content:space-around;gap:4px;padding:8px 6px 10px;border-top:1px solid var(--line);background:var(--bg);flex-shrink:0}
.transport button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:48px;min-height:52px;border:0;background:none;color:var(--ink);font:700 13px var(--f-body);cursor:pointer;border-radius:12px}
.transport .play{background:var(--m-fill);color:var(--m-on);box-shadow:0 4px 0 var(--m-edge);border-radius:16px;min-width:64px;min-height:60px;justify-content:center;margin-bottom:4px}
.transport button[aria-pressed=true]{color:var(--m-text)}
.transport button:disabled{opacity:.38;cursor:default}
.transport .play:disabled{opacity:1;background:var(--soft);color:var(--muted);box-shadow:0 4px 0 var(--line)}
/* 積木風 press (own-controls player toolbar, App moraChunkyPress): play drops onto its edge (4→1); menu items take the module tint */
.transport .menu button:not(:disabled):active{background:var(--m-tint);color:var(--m-text)}
@media(prefers-reduced-motion:no-preference){.transport .play:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--m-edge)}}
@media(prefers-reduced-motion:reduce){.transport .play:not(:disabled):active{filter:brightness(.9)}}
/* 積木風 (owner 2026-10-11: every button except the bottom tab bar): 上一句／下一句 and the tools are secondary chunky blocks
   (App PlayerButton / playerBrickPalette): white face, 2px line, 3px line-strong edge; on (循環) = module tint, module-text
   outline, module edge; disabled = soft fill, never opacity; press drops the face 3→1 (Reduce Motion darkens instead). */
.transport>button:not(.play),.transport>.speed>button{min-width:44px;padding:2px 4px;background:var(--surface);color:var(--m-text);border:2px solid var(--line);border-radius:14px;box-shadow:0 3px 0 var(--line-strong);margin-bottom:3px}
.transport>button:not(.play)[aria-pressed=true]{background:var(--m-tint);border-color:var(--m-text);box-shadow:0 3px 0 var(--m-edge)}
.transport>button:not(.play):disabled,.transport>.speed>button:disabled{opacity:1;background:var(--soft);color:var(--muted);border-color:var(--line);box-shadow:0 3px 0 var(--line)}
@media(prefers-reduced-motion:no-preference){.transport>button:not(.play):not(:disabled):active,.transport>.speed>button:not(:disabled):active,.transport>.speed>button[aria-expanded=true]{transform:translateY(2px);box-shadow:0 1px 0 var(--line-strong)}}
@media(prefers-reduced-motion:reduce){.transport>button:not(.play):not(:disabled):active,.transport>.speed>button:not(:disabled):active,.transport>.speed>button[aria-expanded=true]{filter:brightness(.92)}}
.repeat-chip{display:inline-flex;align-items:center;gap:8px;margin:6px 12px 0;padding:8px 12px;border-radius:14px;background:var(--m-tint);color:var(--m-text);font:800 14px var(--f-round)}
.timeline{height:6px;border-radius:3px;background:var(--line);margin:10px 12px 0;position:relative}
.timeline b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--m-fill)}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:5}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;padding:20px 16px 24px;z-index:6;max-height:86%;overflow:auto}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet-head h2{font:800 20px var(--f-round)}
fieldset{border:0;margin:0 0 14px;padding:0}
legend{font:800 15px var(--f-round);color:var(--muted);margin-bottom:8px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:var(--surface);font-weight:700;cursor:pointer}
.choice input{width:20px;height:20px;accent-color:var(--m-fill);margin:0}
.choice.on{border-color:var(--m-fill);background:var(--m-tint);color:var(--m-text)}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 32px));background:var(--surface);border-radius:24px;padding:22px 20px 16px;z-index:6;text-align:left}
.dialog h2{font:800 20px var(--f-round);margin-bottom:6px}
.dialog .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.menu{position:absolute;z-index:6;background:var(--surface);border:2px solid var(--line);border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;min-width:260px}
.menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;border:0;background:none;padding:0 12px;border-radius:12px;text-align:left;font-weight:700;cursor:pointer}
.menu .menu-note{padding:8px 12px 10px;font-size:14px;color:var(--muted);line-height:1.45}
.banner{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--warn-bg);color:var(--warning);font-weight:700;font-size:15px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.kv dt{color:var(--muted);font-weight:650}
.kv dd{margin:0;font-weight:700}
.identity{display:flex;align-items:center;gap:14px}
.avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--my-fill);color:var(--my-on-fill);font:800 22px var(--f-round)}
.stat{font:800 32px var(--f-round)}
.stack{display:grid;gap:14px}
.center{display:grid;place-items:center;min-height:100%}
.auth{width:100%;max-width:420px;padding:24px 20px}
/* Production layout additions (not in the draft frame): sidebar on desktop, tabs on phone, page scroll. */
.side{display:none}
.main{flex:1;min-height:0}
.tabs{position:sticky;bottom:0}
html,body,#root{height:100%}
/* The canvas behind the page (overscroll, 200% zoom) follows the theme too. */
html{background:var(--bg)}
/* The current tab is marked by more than colour: a bar above it and a heavier label. */
.tabs a{position:relative}
.tabs a[aria-current=page]{font-weight:850}
.tabs a[aria-current=page]::before{content:"";position:absolute;top:0;left:50%;width:24px;margin-left:-12px;border-top:3px solid currentColor;border-radius:2px}
.side a[aria-current=page]{font-weight:850}
/* aria-disabled controls stay focusable (so their reason can be read) but look unavailable. */
.button[aria-disabled=true]{--b-bg:var(--soft);--b-fg:var(--muted);--b-edge:var(--line);cursor:default}
.text-link[aria-disabled=true],.menu button[aria-disabled=true]{color:var(--muted);cursor:default}
/* A focused material card shows the same ring as every other control. */
.row:has(.row-link:focus-visible){outline:3px solid var(--ai-fill);outline-offset:2px}
/* Windows high contrast: keep focus rings and the current tab visible with system colours. */
@media (forced-colors:active){:focus-visible,.row:has(.row-link:focus-visible){outline-color:Highlight}.search:focus-within{outline:3px solid Highlight;outline-offset:2px}.seg button[aria-pressed=true],.seg button[aria-checked=true]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}.button[aria-disabled=true],.text-link[aria-disabled=true],.menu button[aria-disabled=true]{color:GrayText;border-color:GrayText}.side a[aria-current=page]{outline:2px solid Highlight}.button{border:2px solid ButtonText}}
.auth{width:min(420px,100%)}
.check-row{display:flex;gap:10px;align-items:flex-start;min-height:44px;margin:4px 0 10px;font-size:15px;font-weight:650;line-height:1.5;cursor:pointer}
.check-row input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--m-fill);flex:none}
/* W1 player (production additions): the embed or media fills the 16:9 stage; on phones the transcript sits between the
   stage and the tool row (draft order), on desktop the left column keeps stage and tools, the right the transcript. */
.stage-media{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.player-body{display:flex;flex-direction:column;flex:1;min-height:0}
.player-right{flex:1;min-height:0;overflow:auto}
.player-top h1{margin:0}
.text-stage{aspect-ratio:auto;min-height:110px}
button.line{display:block;width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.line .ja,.line .tr{display:block}
.speed{position:relative;display:flex}
.speed-menu{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:150px}
.speed-menu button{flex-direction:row;justify-content:flex-start;min-width:0;min-height:44px}
.play-rejected{align-self:center;margin:10px auto 0}
.desk-only{display:none}
@media (min-width:900px){.desk-only{display:block}}
/* W2 詞庫 (production additions, App V5 vocabulary root and pack page): the page uses the 詞庫 module colours; grouped
   rows (icon tile, title, one meta line, chevron or status), the 今天 hero card and the word detail. */
.vocab{--m-fill:var(--vocabulary-fill);--m-edge:var(--vocabulary-edge);--m-tint:var(--vocabulary-tint);--m-text:var(--vocabulary-text);--m-on:var(--vocabulary-on-fill)}
.vocab-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vocab-top .search{flex:1 1 240px}
.lang-select select{min-height:52px;padding:0 14px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--m-text);font:800 16px var(--f-round);cursor:pointer}
.vocab-section{display:grid;gap:10px}
.vocab-section .seg{margin:0}
.group{list-style:none;margin:0;padding:0;background:var(--surface);border:2px solid var(--line);border-radius:20px;box-shadow:0 3px 0 var(--line);overflow:hidden}
.group>li+li{border-top:1px solid var(--line)}
.group-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 14px;color:inherit;text-decoration:none}
a.group-row:hover{background:var(--soft)}
a.group-row:focus-visible{outline-offset:-3px;border-radius:18px}
.group-row .copy{flex:1;min-width:0;display:grid;gap:2px}
.group-row strong{font:800 17px/1.35 var(--f-round);overflow-wrap:anywhere}
.group-row>svg.ic:last-child{color:var(--muted)}
.glyph{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--m-tint);color:var(--m-text)}
.word-row strong{font:700 18px/1.35 var(--f-ja)}
.word-status{flex:none;font-size:14px;font-weight:650;color:var(--muted)}
.word-status.due{color:var(--m-text);font-weight:800}
.word-organise{flex:none;font-size:13px;font-weight:750;color:var(--m-text);background:var(--m-tint);border-radius:12px;padding:4px 10px}
.word-row-item{display:flex;align-items:center;gap:8px;padding-right:12px}
.word-row-item>.word-row{flex:1;min-width:0}
.word-organise-retry{flex:none;min-height:44px}
.source-tag{display:inline-block;margin-left:8px;vertical-align:middle;font:600 12px/1.6 var(--f-body);color:var(--muted);background:var(--line);border-radius:8px;padding:0 8px}
.hero{display:grid;gap:10px;justify-items:start;padding:20px;border-radius:26px;background:var(--m-fill);color:var(--m-on);box-shadow:0 6px 0 var(--m-edge)}
.hero-pill{padding:4px 12px;border-radius:12px;background:var(--m-edge);font:800 14px var(--f-round)}
.hero-title{font:800 26px/1.25 var(--f-round)}
.hero-number{margin-right:6px;font-size:34px}
.hero-meta{font-size:15px;font-weight:650;line-height:1.5}
.hero .button{margin-top:6px}
.button.inverse{--b-bg:var(--surface);--b-fg:var(--vocabulary-inverse);--b-edge:var(--m-edge)}
.hero .button[aria-disabled=true]{--b-bg:var(--surface);--b-fg:var(--muted);--b-edge:var(--m-edge);opacity:.9}
.back-link{display:inline-flex;align-items:center;gap:4px;margin:-6px 0 4px -4px;text-decoration:none}
.page-heading{margin:4px 0 14px;overflow-wrap:anywhere}
.pack-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.pack-source{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.pack-source-text{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--muted)}
.pack-count{font:800 15px var(--f-round)}
.pack-primary{display:grid;gap:8px}
.word-hero{display:grid;gap:8px;justify-items:start}
.word-title{font:800 40px/1.5 var(--f-ja);overflow-wrap:anywhere}
.word-title rt{font-size:15px;font-weight:650;color:var(--muted)}
.word-meaning{font:750 19px/1.5 var(--f-body)}
.example .copy{gap:4px}
.example-sentence{font:600 18px/1.6 var(--f-ja)}
.example-translation{font-size:15px;font-weight:600;color:var(--muted)}
.kv.card{margin:0}
.kv-row{display:contents}
/* W2 writes (App V5 word detail 練習, UI-0012 flashcards, 今日單字): the practice button, the flashcard set (meter, card
   faces, rating row, saved-receipt bar, finished set) and the daily-word card. Keys and buttons replace swipes. */
.practice{display:grid;gap:8px}
.flashcards{outline:none}
.meter{display:grid;gap:8px}
.meter-row{display:flex;justify-content:space-between;gap:12px;font:800 16px var(--f-round)}
.meter-row strong+strong{color:var(--m-text)}
.meter progress{width:100%;height:10px;border:0;border-radius:6px;background:var(--soft);overflow:hidden;appearance:none}
.meter progress::-webkit-progress-bar{background:var(--soft);border-radius:6px}
.meter progress::-webkit-progress-value{background:var(--m-fill);border-radius:6px}
.meter progress::-moz-progress-bar{background:var(--m-fill);border-radius:6px}
.flashcard{display:grid;gap:8px}
.flashcard-face{display:grid;min-height:340px;width:100%;padding:20px;border:2px solid var(--line);border-radius:26px;background:var(--surface);color:var(--ink);box-shadow:0 6px 0 var(--line);text-align:left;font:inherit;cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.flashcard.revealed .flashcard-face{border:3px solid var(--m-fill);box-shadow:0 6px 0 var(--m-edge)}
.flashcard-face:active{transform:translateY(2px)}
.flashcard-front{display:grid;align-content:space-between;justify-items:center;gap:12px;text-align:center}
.flashcard-front .badge{justify-self:start;margin:0}
.flashcard-word{font:800 52px/1.3 var(--f-ja);overflow-wrap:anywhere}
.flashcard-reading{font:650 22px/1.4 var(--f-ja);color:var(--muted)}
.flashcard-hint{font-size:14px;font-weight:650;color:var(--muted)}
.flashcard-back{display:grid;align-content:start;gap:12px}
.flashcard-back-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.flashcard-back-head strong{font:800 28px/1.3 var(--f-ja)}
.flashcard-back-head span{font:650 17px var(--f-ja);color:var(--muted)}
.flashcard-meaning{font:800 24px/1.4 var(--f-body)}
.flashcard-example{font:600 18px/1.6 var(--f-ja)}
.flashcard-note{font-size:16px;font-weight:600;color:var(--muted)}
.flashcard-detail{justify-self:center}
.flashcard-nav,.spotlight-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.flashcard-footer{display:grid;gap:10px}
.rate-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.undo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:16px;background:var(--success-bg);color:var(--success);font-weight:700}
.undo-bar .text-link{color:var(--success)}
.done-panel{display:grid;gap:12px}
.spotlight{display:grid;gap:12px}
.spotlight-top{display:flex;align-items:center;justify-content:space-between}
.spotlight-top .badge{margin:0}
.spotlight-top h2.badge{font:800 13px var(--f-round)}
.spotlight-word{display:grid;justify-items:center;gap:4px;margin:12px 0;text-align:center}
.spotlight-reading{font:650 17px var(--f-ja);letter-spacing:4px;color:var(--muted)}
.spotlight-title{font:800 56px/1.35 var(--f-ja);overflow-wrap:anywhere}
.spotlight-meaning{font:800 19px/1.5 var(--f-body)}
.spotlight-meaning.missing{color:var(--muted)}
.spotlight-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spotlight-actions .text-link{display:inline-flex;align-items:center}
/* 安排下次時間 (UI-0012 back face: 下次複習 with the two times, then 或自評), the set choice notice, and 翻卡設定. */
.page-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.settings-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
.schedule-group{display:grid;gap:6px}
.schedule-group .meta,.rate-line .meta{margin:0}
.schedule-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.schedule-button{justify-content:flex-start;text-align:left;min-height:60px}
.schedule-copy{display:grid;gap:2px}
.schedule-key{font:700 13px var(--f-round);opacity:.75}
.rate-line{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:10px}
.notice.choice .h2{margin:0 0 4px}
.choice-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.settings-group{display:grid}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:12px 14px}
.setting-row+.setting-row{border-top:1px solid var(--line)}
.setting-title{font:800 17px/1.35 var(--f-round)}
.setting-copy{display:grid;gap:2px}
.setting-row select{min-height:48px;padding:0 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--m-text);font:800 16px var(--f-round)}
.setting-row input[type=checkbox]{width:28px;height:28px;accent-color:var(--m-fill);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0}
.chip{padding:6px 12px;border:2px solid var(--line);border-radius:12px;background:var(--surface);font:800 15px var(--f-round)}
.add-row{display:flex;flex-wrap:wrap;gap:10px}
.add-row input{flex:1 1 160px}
@media (max-width:420px){.rate-line{grid-template-columns:1fr 1fr}.rate-line .meta{grid-column:1/-1}}
@media (pointer:coarse){.schedule-key{display:none}}
@media(prefers-reduced-motion:reduce){.flashcard-face{transition:none}.flashcard-face:active{transform:none}}
@media (min-width:900px){.flashcards{max-width:640px}.spotlight{max-width:640px}.page-top{max-width:640px}.settings{max-width:640px}}

@media (min-width:900px){.side{display:flex}.tabs{display:none}.app{display:grid;grid-template-columns:232px 1fr}.page{padding:28px 40px 40px;max-width:1040px}.list.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.thumb{width:116px;height:66px}.stage,.stage.state{border-radius:20px}.sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:520px;border-radius:24px}}
/* M2 player split (App oneHundredLSPlayerLayout: ≥1000 px wide and ≥5:4, decided in useSplitLayout): the left column
   (1.62 : 1, App splitMain/splitSide) keeps stage, current sentence, timeline, notices and tools; the right column holds
   the transcript or the sentence insight. */
.player.split .player-body{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(330px,1fr);grid-template-rows:repeat(8,auto) 1fr;align-content:stretch;gap:0 24px;padding:0 0 0 24px;flex:1;min-height:0}
.player.split .player-body>*{grid-column:1}
.player.split .player-body>.player-right{grid-column:2;grid-row:1 / -1;min-height:0;overflow:auto;border-left:1px solid var(--line)}
.player.split .player-body>.transport{align-self:start;margin:14px 0 16px;border:2px solid var(--line);border-radius:20px;background:var(--surface)}
.player.split .stage{border-radius:20px}
/* W2 batch 3: 我的筆記, 收藏例句, 最近瀏覽 and 整理 (App V5 word-detail note row and sheet, saved examples, collection editor). */
button.group-row{width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer}
button.group-row:hover{background:var(--soft)}
button.group-row:focus-visible{outline-offset:-3px;border-radius:18px}
button.group-row[aria-disabled=true]{cursor:default;color:var(--muted)}
.note-body{white-space:pre-wrap}
.note-sheet .meta{margin-bottom:10px}
.note-field{display:grid;gap:8px;margin-bottom:12px}
.note-label{font:800 17px/1.35 var(--f-round)}
.note-field textarea,.editor-field input{width:100%;border:2px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px;font-size:17px;line-height:1.5}
.note-field textarea{min-height:220px;resize:vertical}
.editor-field{display:grid;gap:6px;font-weight:700;margin-bottom:12px}
.editor-field input{min-height:52px;padding:0 14px}
.stack.tight{gap:8px}
.example-actions{display:flex;justify-content:flex-end}
.example-save{min-height:44px;min-width:44px;border:0;background:none;color:var(--m-text);font:800 15px var(--f-round);cursor:pointer;padding:0 8px}
.example-save[aria-disabled=true]{color:var(--muted);cursor:default}
.check-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 14px;cursor:pointer}
.check-row input{width:24px;height:24px;accent-color:var(--m-fill);flex:none}
.check-row .copy{flex:1;min-width:0;display:grid;gap:2px}
.pack-actions{position:relative}
.saved-row{display:flex;align-items:center;gap:6px}
.saved-row .group-row{flex:1;min-width:0}
.pack-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.pack-title-row .page-heading{flex:1;min-width:0}
/* M1 materials (production additions): covers, the row ⋯ menu, import and settings sheets, the public sample page. */
.thumb.cover{overflow:hidden;background:var(--soft)}
.thumb.cover img{width:100%;height:100%;object-fit:cover;display:block}
.row-menu{position:relative;z-index:2;flex:none;align-self:center;margin:0 -4px 0 0}
.menu button.danger{color:var(--danger)}
.import-guide{margin:0 0 14px}
.import-destination{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;font-weight:650}
.import-destination span{color:var(--muted)}
.import-status{align-items:center}
.article-field{min-height:180px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:12px 14px;font:500 17px/1.5 var(--f-body);resize:vertical;width:100%}
.count-input{width:7.5em;min-height:48px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:0 12px;font:800 17px var(--f-round);text-align:right}
.settings-material-title{margin:0 0 12px;overflow-wrap:anywhere}
button.setting-row{width:100%;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;justify-content:flex-start}
button.setting-row .setting-copy{flex:1;min-width:0}
.settings-action.danger .setting-title{color:var(--danger)}
.settings-action.danger .glyph{background:var(--danger-bg);color:var(--danger)}
.settings-group .setting-row{border-top:1px solid var(--line)}
.settings-group .setting-row:first-child,.settings-group>.meta+.setting-row{border-top:0}
.app.solo .main{display:flex;flex-direction:column;min-height:0;height:100%}
@media (min-width:900px){.app.solo{display:flex}}
@media (max-width:420px){.setting-row{flex-wrap:wrap}.count-input{width:100%}}
/* M2 player (production additions, App V5 player): timeline row, top bar progress and ⋯ menu, current sentence (split). */
.timeline-row{display:flex;align-items:center;gap:10px;padding:8px 12px 0}
.timeline-row .time{font:700 13px var(--f-round);color:var(--muted);min-width:3.2em;font-variant-numeric:tabular-nums}
.timeline-row .time.end{text-align:right}
.timeline-track{position:relative;flex:1;min-width:0;height:44px;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:12px}
.timeline-track .timeline{flex:1;margin:0}
.timeline-track.disabled{cursor:default;opacity:.45}
.timeline-thumb{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--m-fill);box-shadow:0 0 0 3px var(--bg);pointer-events:none}
.timeline-thumb.active{transform:scale(1.25)}
.timeline-track.disabled .timeline-thumb{display:none}
@media(prefers-reduced-motion:no-preference){.timeline-thumb{transition:transform .12s}}
.player-top .progress-label{flex:none;font-variant-numeric:tabular-nums}
.more-menu{position:relative;flex:none}
.more-list{right:0;top:calc(100% + 6px)}
.current-sentence{padding:12px 4px 0}
.current-sentence .ja{font:750 calc(24px * var(--sub-scale,1))/1.5 var(--f-ja);margin:0}
.current-sentence .tr{font-size:calc(16px * var(--sub-scale,1));font-weight:650;color:var(--muted);margin:2px 0 0}
.column-title{font:800 19px var(--f-round);padding:14px 16px 10px;border-bottom:1px solid var(--line);margin:0}
.audio-stage{aspect-ratio:auto;min-height:96px}
/* M2 字幕 sheet, editor and transcript rows (App OneHundredLSSubtitleOptions, OneHundredLSSubtitleEditor, row analyze). */
.sheet-section{margin-bottom:18px}
.sheet-section>.meta{margin-bottom:8px}
.section-title{font:800 17px var(--f-round);margin:0 0 4px}
.sheet-section .group{margin-bottom:8px}
.stepper{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.stepper .chunky{font:800 20px var(--f-round)}
.subtitle-preview{border:2px dashed var(--line);border-radius:16px;padding:10px 12px;margin:8px 0}
.subtitle-preview .ja{font:700 calc(20px * var(--sub-scale,1))/1.5 var(--f-ja);margin:0}
.subtitle-preview .tr{font-size:calc(15px * var(--sub-scale,1));font-weight:650;color:var(--muted);margin:2px 0 0}
.line-row{display:flex;align-items:flex-start;gap:2px}
.line-row>.line{flex:1;min-width:0}
.line-row>.analyze{flex:none;margin-top:6px}
.line-status{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-top:2px}
.line-status.error{color:var(--danger)}
.transcript-empty{display:grid;justify-items:start;gap:10px;padding:12px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.setting-row:disabled{opacity:.45;cursor:default}
/* M2 sentence insight (App OneHundredLSSentenceInsight*): hero, stream progress, sections, chunks, words, follow-up chat. */
.insight{display:grid;gap:12px}
.insight-hero{display:grid;gap:4px}
.insight-sentence{font:750 calc(22px * var(--sub-scale,1))/1.5 var(--f-ja);margin:0}
.insight-translation{font-weight:650;color:var(--muted);margin:0}
.insight-progress{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:0}
.insight-progress .meta:empty{display:none}
.insight-section{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
.insight-section p{margin:0;line-height:1.6}
.insight-section.pending .meta{font-style:normal}
.chunk-list,.word-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.chunk{border:2px solid var(--line);border-radius:14px}
.chunk-head{display:grid;gap:2px;width:100%;min-height:48px;padding:8px 12px;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:12px}
.chunk-head .ja{font:750 18px/1.4 var(--f-ja)}
.chunk-meaning{font-size:14px;color:var(--muted);font-weight:650}
.chunk-detail{padding:0 12px 10px;display:grid;gap:6px}
.word-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.word-list .ja{font:750 17px var(--f-ja)}
.insight-charge{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.chat{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chat-message{padding:8px 12px;border-radius:14px;background:var(--soft)}
.chat-message.user{background:var(--m-tint)}
.chat-message p{margin:2px 0 0;white-space:pre-wrap}
.composer{display:grid;gap:8px}
.composer-field{min-height:88px}
.composer .chip{cursor:pointer;color:var(--ink);min-height:44px}
.chip:disabled{opacity:.45;cursor:default}
.insight-column{display:flex;flex-direction:column;min-height:0}
.insight-column-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}
.insight-column-head h2{font:800 19px var(--f-round);margin:0}
.back-to-subtitles{display:inline-flex;align-items:center;gap:2px;min-height:44px}
.insight-column .insight{padding:12px 16px 24px}
.inline-link{display:inline-flex;align-items:center}
/* V (2026-10-10, App V5 word detail): the word head with reading · romaji, audio and pitch accent; 詞形對照 tables; leveled
   and original examples; 易混淆; 記憶與學習; 延伸詞彙; 詞典資料; the list-detail workspace from 900px. */
.word-hero{justify-items:stretch}
.word-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.word-head-copy{display:grid;gap:2px;min-width:0}
.badge-row{display:flex;flex-wrap:wrap;gap:6px}
.badge-row .badge{margin:0}
.word-reading{font:650 18px/1.4 var(--f-ja);color:var(--muted)}
.word-audio{display:grid;justify-items:center;gap:2px;min-width:64px}
.word-audio .meta{min-height:20px;text-align:center}
.chunky[aria-disabled=true]{background:var(--soft);color:var(--muted);box-shadow:0 4px 0 var(--line);cursor:default}
.chunky{cursor:pointer}
.word-meanings{display:grid;gap:2px}
.pitch{display:grid;gap:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0 10px}
.pitch-head{display:flex;align-items:center;gap:8px}
.pitch-value{flex:1;font-size:14px;font-weight:650}
.pitch-help{white-space:pre-line}
.pitch-map{display:flex;max-width:360px}
.pitch-mora{flex:1;display:grid;justify-items:center;gap:2px;min-width:0}
.pitch-kana{font:650 17px var(--f-ja)}
.pitch-graph{position:relative;width:100%;height:24px}
.pitch-graph::before{content:"";position:absolute;left:calc(50% - 4px);top:15px;width:8px;height:8px;border-radius:50%;background:var(--m-fill)}
.pitch-graph.high::before{top:2px}
.pitch-graph.level::after{content:"";position:absolute;left:50%;width:100%;top:18px;border-top:1.5px solid var(--m-fill)}
.pitch-graph.high.level::after{top:5px}
.pitch-graph.down::after,.pitch-graph.up::after{content:"";position:absolute;left:50%;width:100%;height:13px;top:6px;border-right:1.5px solid var(--m-fill)}
.pitch-graph.down::after{border-top:1.5px solid var(--m-fill)}
.pitch-graph.up::after{border-bottom:1.5px solid var(--m-fill)}
.pitch-level{font-size:12px;font-weight:700;color:var(--m-text)}
.form-note{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--m-tint)}
.pre-line{white-space:pre-line}
.form-tables{background:var(--surface);border:2px solid var(--line);border-radius:20px;overflow:hidden}
.form-table{width:100%;border-collapse:collapse;table-layout:fixed}
.form-table caption{padding:8px 0 2px;font:800 13px var(--f-round);letter-spacing:.04em;color:var(--m-text);text-align:center}
.form-table th{font-size:13px;font-weight:650;color:var(--muted);text-align:left;padding:8px 10px}
.form-table thead th{border-bottom:1px solid var(--line)}
.form-table tr>th:first-child{width:76px}
.form-table td{border-bottom:1px solid var(--line);padding:0}
.form-cell{display:grid;gap:1px;min-height:56px;padding:8px 10px;color:var(--ink);text-decoration:none}
.form-cell:hover{background:var(--soft)}
.form-cell.selected{background:var(--m-tint)}
.form-cell.selected .form-word{color:var(--m-text);font-weight:800}
.form-word{display:inline-flex;align-items:center;gap:4px;font:650 17px var(--f-ja);overflow-wrap:anywhere}
.form-word svg.ic{width:16px;height:16px}
.form-cell:focus-visible{outline-offset:-3px}
.more-forms{display:inline-flex;align-items:center;gap:4px;justify-self:start}
.stack-tight{display:grid;gap:4px}
.chips .chip[aria-checked=true]{border-color:var(--m-fill);background:var(--m-tint);color:var(--m-text)}
.chips .chip{cursor:pointer;min-height:44px;color:var(--ink)}
.quotes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.quote{display:grid;gap:6px;padding:14px 16px;border-radius:20px;background:var(--m-tint)}
.quote-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quote-meta .badge{margin:0}
.quote-row{display:flex;align-items:flex-start;gap:10px}
.quote-copy{flex:1;min-width:0;display:grid;gap:4px}
.quote .example-actions{flex-wrap:wrap;gap:4px}
.quote .text-link{display:inline-flex;align-items:center;gap:4px}
.original-title{display:grid;gap:2px;margin-top:6px}
.h3{font:800 17px/1.35 var(--f-round)}
.eyebrow{font:800 12px var(--f-round);letter-spacing:.06em;color:var(--m-text)}
.confusion-decision{display:grid;gap:4px;padding:14px 16px;border-radius:20px;background:var(--m-tint)}
.confusion-decision p:first-of-type{font-weight:750;font-size:17px}
.confusion-visual{display:grid;gap:8px;padding:14px 16px;border:2px solid var(--line);border-radius:20px;background:var(--surface)}
.confusion-panels{display:grid;gap:12px}
@media (min-width:520px){.confusion-panels{grid-template-columns:1fr 1fr}}
.confusion-panel{display:grid;gap:8px;align-content:start}
.confusion-identity{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.confusion-identity strong{font:800 18px var(--f-ja)}
.timeline{display:grid;gap:4px}
.timeline-bar{display:flex;align-items:center}
.timeline-bar i{width:10px;height:10px;border-radius:50%;background:var(--m-fill)}
.timeline-bar b{flex:1;height:3px;background:var(--m-fill)}
.timeline-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.calendar{display:grid;gap:6px}
.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.calendar-grid span{padding:2px 0;border-radius:6px;background:var(--soft);font-size:12px;text-align:center}
.calendar-grid span.on{background:var(--m-fill);color:var(--m-on);font-weight:800}
.confusion-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.confusion-item{display:grid;gap:6px;padding:14px 16px;border:2px solid var(--line);border-radius:20px;background:var(--surface);color:inherit;text-decoration:none}
a.confusion-item:hover{background:var(--soft)}
.confusion-head{display:flex;align-items:center;gap:8px}
.confusion-head .badge{margin:0}
.confusion-head .confusion-identity{flex:1}
.confusion-concept{font-size:17px}
.confusion-example{display:grid;gap:2px;padding-top:6px;border-top:1px solid var(--line)}
.memory{display:grid;gap:10px}
.memory-point{display:grid;gap:2px}
.loading-row{display:flex;align-items:center;gap:10px}
.relation-table{width:100%;border-collapse:collapse;background:var(--surface);border:2px solid var(--line);border-radius:20px;overflow:hidden}
.relation-table th{font-size:13px;font-weight:650;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.relation-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;vertical-align:middle}
.relation-table td:last-child{width:32px;color:var(--muted)}
.relation-table .text-link{padding:0;min-height:44px;display:inline-flex;align-items:center}
.lexicon{display:grid;gap:12px}
.lexicon[hidden]{display:none}
.lexicon-entry{display:grid;gap:4px}
.lexicon-entry strong{font-size:17px}
.word-workspace-list{display:none}
@media (min-width:900px){.word-workspace{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:24px;align-items:start;max-width:1180px}
  .word-workspace-list{display:block;position:sticky;top:0;max-height:calc(100dvh - 40px);overflow:auto}
  .word-workspace-list a[aria-current=page]{background:var(--m-tint)}}
/* V: 收藏的例句與語塊, 句子詳情, 三步練習 and 語塊詳情. */
.more-row{border:2px solid var(--line);border-radius:20px;background:var(--surface)}
.saved-row{display:flex;align-items:center;gap:4px;padding-right:8px}
.saved-row .group-row{flex:1;min-width:0}
.sentence-quote{gap:8px}
.sentence-text,.practice-sentence{font:650 21px/1.6 var(--f-ja);overflow-wrap:anywhere}
.sentence-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sentence-actions .button{width:100%}
.sentence-note{display:grid;gap:4px;padding:14px 16px;border-radius:20px;background:var(--soft)}
.practice-page{display:grid;gap:14px;max-width:640px}
.practice-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.practice-progress span{height:8px;border-radius:4px;background:var(--soft)}
.practice-progress span.done{background:var(--m-fill)}
.practice-heading{display:grid;gap:4px}
.practice-card{display:grid;gap:6px}
.practice-reveal{display:grid;gap:4px;padding:14px 16px;border-radius:20px;background:var(--m-tint)}
.practice-phrase{font:800 26px/1.4 var(--f-ja)}
.practice-footer{display:grid;gap:10px}
mark.masked{background:none;color:var(--muted);letter-spacing:.1em}
mark.revealed{background:var(--m-tint);color:var(--m-text);border-radius:6px;padding:0 2px}
.completion-mark{font:800 44px var(--f-round);color:var(--success)}
.phrase-context{display:grid;gap:8px}
.phrase-context-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chips a.chip{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink)}
.chips a.chip[aria-checked=true]{border-color:var(--m-fill);background:var(--m-tint);color:var(--m-text)}
.flashcard{position:relative}
.flashcard-speaker{position:absolute;top:12px;right:12px;z-index:1}
.flashcard-front .badge{margin-right:52px}
.flashcard-back-head{padding-right:52px}
.flashcard-setup{display:grid;gap:12px}
.setup-choices{display:grid;gap:4px;border:0;margin:0;padding:0}
.setup-choices .check-row{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:650}
/* 記錄複習結果 (App MaterialReviewResultHost rating cards: white chunky cards, two per row, stacked at large text) */
.rating-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rating-card{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:12px;border-radius:16px;border:1.5px solid var(--line);border-bottom-width:4px;background:var(--surface);color:var(--ink);font:800 17px var(--f-round);cursor:pointer}
.rating-card[aria-disabled=true]:not([aria-busy=true]){background:var(--soft);color:var(--muted);cursor:default}
.spinner.small{width:16px;height:16px;border-width:2px}
@media (max-width:360px){.rating-grid{grid-template-columns:1fr}}
/* 複習日曆 (App LearningProgressCalendar, 我的 module colours): 44px day cells with the date, the word-card count and a
   material dot; the chosen day has a 3px ink ring; the 12-week record is a small read-only grid. */
.progress-calendar{max-width:720px;--lv0:var(--soft);--lv1:var(--my-tint);--lv2:color-mix(in srgb,var(--my-fill) 55%,transparent);--lv3:var(--my-fill)}
:root[data-theme=dark] .progress-calendar{--lv2:color-mix(in srgb,var(--my-fill) 75%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .progress-calendar{--lv2:color-mix(in srgb,var(--my-fill) 75%,transparent)}}
.progress-calendar .level-0{background:var(--lv0)}.progress-calendar .level-1{background:var(--lv1)}.progress-calendar .level-2{background:var(--lv2)}.progress-calendar .level-3{background:var(--lv3)}
.forecast{padding:12px 6px;display:grid;gap:6px}
.forecast-weekdays,.forecast-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.forecast-weekdays span{text-align:center;font:700 13px var(--f-body);color:var(--muted)}
.forecast-cell{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-height:52px;min-width:44px;padding:3px 5px;border:3px solid transparent;border-radius:12px;color:var(--ink);cursor:pointer;font:inherit}
.forecast-cell.level-2,.forecast-cell.level-3{color:var(--my-on-fill)}
.forecast-cell[aria-pressed=true]{border-color:var(--ink)}
.forecast-date{font:700 12px var(--f-body);text-align:left}
.forecast-cell.today .forecast-date{text-decoration:underline}
.forecast-count{font:800 17px var(--f-round);font-variant-numeric:tabular-nums;text-align:center}
.forecast-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--materials-fill)}
.forecast-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 4px;font-size:13px;color:var(--muted)}
.forecast-legend .swatch{width:14px;height:14px;border-radius:4px}
.forecast>.meta{padding:0 4px}
.day-detail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.day-detail p{margin:0}
button.forecast-row{width:100%;border:0;border-top:1px solid var(--line);background:none;text-align:left;font:inherit;cursor:pointer}
li:first-child>button.forecast-row{border-top:0}
button.forecast-row[aria-pressed=true]{background:var(--my-tint)}
.history{max-width:440px;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:12px;display:grid;gap:8px}
.history-grid{display:grid;gap:3px}
.history-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.history-cell{aspect-ratio:1;border-radius:4px}
.history-cell.void{background:none}
.section-label{margin:0 0 8px}
/* 我的 and 學習進度 (learning batch L; App AchievementHomeScreen, LearningProgressScreen): the 我的 module colours, the account
   card with its sync dot, the two entry cards, the goal card and 需要注意, two columns from a content width of 840px. */
.my{--m-fill:var(--my-fill);--m-edge:var(--my-edge);--m-tint:var(--my-tint);--m-text:var(--my-text);--m-on:var(--my-on-fill)}
.my .button.inverse{--b-fg:var(--my-inverse)}
.account-card{color:inherit;text-decoration:none;min-height:88px}
.account-card .copy{flex:1;min-width:0;display:grid;gap:4px}
.account-email{font:800 18px var(--f-round);overflow-wrap:anywhere}
.sync-line{display:inline-flex;align-items:center;gap:6px}
.sync-line .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.sync-line.synced .dot{background:var(--success)}.sync-line.syncing .dot{background:var(--warning)}.sync-line.failed .dot{background:var(--danger)}
.my-entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.entry-card{display:grid;align-content:start;gap:6px;color:inherit;text-decoration:none;min-width:0;overflow-wrap:anywhere}
.entry-card>strong{font:800 18px var(--f-round)}
.entry-copy{display:grid;gap:2px;font-weight:700}
.entry-card.materials-entry{--m-tint:var(--materials-tint);--m-text:var(--materials-text)}
.progress-page{container-type:inline-size}
.progress-columns{display:grid;gap:14px;align-items:start}
@container (min-width:840px){.progress-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}}
.goal-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.goal-top .badge{margin-top:0}
.goal-title{font:800 24px var(--f-round);white-space:nowrap}
.goal-change{margin-left:auto;min-height:44px;padding:0 4px}
.goal-actions{display:flex;flex-wrap:wrap;gap:10px}
.finding{display:flex;gap:12px;align-items:flex-start}
.finding-copy{flex:1;min-width:0;display:grid;gap:6px}
.finding-copy>strong{font:800 17px/1.35 var(--f-round);overflow-wrap:anywhere}
/* 考試 and 輸出練習 (E): the exam module colors, the goal hero actions, menus, the content-palette practice tiles (the App's
   moraV5ContentTileSchemes, the edge darkened by 0.32 as moraDarken), the word map, the writing pad and the feedback cards. */
.exam{--m-fill:var(--exam-fill);--m-edge:var(--exam-edge);--m-tint:var(--exam-tint);--m-text:var(--exam-text);--m-on:var(--exam-on-fill)}
.exam .button.inverse{--b-fg:var(--exam-inverse)}
.exam-top{justify-content:flex-start;min-height:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.hero-actions>*{flex:1 1 150px;min-width:0}
.hero-actions .button,.menu-button>.button.full{width:100%}
.hero .meter{width:100%}
.meter.on-fill progress{background:var(--m-edge)}
.meter.on-fill progress::-webkit-progress-bar{background:var(--m-edge)}
.meter.on-fill progress::-webkit-progress-value{background:var(--surface)}
.meter.on-fill progress::-moz-progress-bar{background:var(--surface)}
.menu-button{position:relative}
.menu-button .menu{left:0;top:calc(100% + 6px);color:var(--ink)}
.menu-button .menu button{color:var(--ink)}
.menu-check{flex:none;display:grid;place-items:center;width:24px;color:var(--m-text)}
.menu-copy{display:grid;gap:2px}
.studio-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* exam-home-functional-v1: 練習・考試・錯題・紀錄 tabs, a subject 準備中, the five 輸出練習 kinds and the inline exam date. */
.exam-sections{margin:4px 0 12px}
.exam-sections .chip{min-height:44px}
.exam-sections .chip[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.studio-tile.unavailable{background:var(--muted-bg,var(--surface));color:var(--muted);box-shadow:none;cursor:default}
.exam-studio-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.exam-studio-kinds .chunky{justify-content:center;min-height:52px}
.exam-goal-date{display:grid;gap:10px;margin-top:12px}
.exam-goal-date input{min-height:48px;border-radius:14px;border:2px solid transparent;padding:8px 12px;font:700 18px var(--f-body);background:var(--surface);color:var(--ink)}
.exam-goal-date .button{justify-self:end}
@media(max-width:359px){.studio-tiles{grid-template-columns:1fr}}
.studio-tile{--tile-bg:#0B7F58;--tile-fg:#FFFFFF;--tile-edge:#07563C;display:grid;align-content:start;justify-items:start;gap:6px;min-height:132px;padding:16px;border:0;border-radius:22px;background:var(--tile-bg);color:var(--tile-fg);box-shadow:0 5px 0 var(--tile-edge);text-align:left;font:inherit;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.studio-tile.palette-1{--tile-bg:#0672C7;--tile-edge:#044E87}
.studio-tile.palette-2{--tile-bg:#FFC233;--tile-fg:#1D1B3A;--tile-edge:#AD8423}
.studio-tile.palette-3{--tile-bg:#5B4BF0;--tile-edge:#3E33A3}
.studio-tile strong{font:800 18px var(--f-round)}
.studio-tile span{font-size:14px;font-weight:600;line-height:1.4}
.studio-tile[aria-disabled=true]{opacity:.6;cursor:default}
.studio-tile:focus-visible{outline:3px solid var(--ai-fill);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.studio-tile:not([aria-disabled=true]):active{transform:translateY(3px);box-shadow:0 2px 0 var(--tile-edge)}}
.studio-answer{width:100%;min-height:220px;padding:14px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:500 18px/1.6 var(--f-ja);resize:vertical}
.studio-answer.short{min-height:120px}
.studio-meta{display:flex;justify-content:space-between;gap:12px}
.scene-figure{margin:0}
.scene-figure img{width:100%;height:auto;border-radius:18px;border:2px solid var(--line)}
.ink-paper{background:#FFFFFF;border:2px solid var(--line);border-radius:18px;overflow:hidden}
.ink-paper canvas{display:block;width:100%;height:auto;aspect-ratio:640/400;touch-action:none;cursor:crosshair}
.ink-paper canvas.erasing{cursor:cell}
.ink-image{width:100%;height:auto;border-radius:16px;border:2px solid var(--line);background:#FFFFFF}
.chips .chip svg.ic{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.chips .chip[aria-pressed=true]{border-color:var(--m-fill);background:var(--m-tint);color:var(--m-text)}
.map-canvas{overflow:auto;max-height:420px;border:2px solid var(--line);border-radius:18px;background:var(--surface)}
.map-inner{position:relative}
.map-inner svg{position:absolute;inset:0}
.map-dot{fill:var(--line)}
.map-line{stroke:var(--line-strong);stroke-width:2}
.map-node{position:absolute;width:110px;min-height:48px;padding:6px 10px;border:2px solid var(--line-strong);border-radius:14px;background:var(--surface);color:var(--ink);font:800 16px var(--f-ja);touch-action:none;cursor:grab;overflow-wrap:anywhere}
.map-node.root{background:var(--m-fill);border-color:var(--m-edge);color:var(--m-on)}
.map-node.selected{border-color:var(--m-fill);box-shadow:0 0 0 3px var(--m-tint)}
.map-node.root.selected{box-shadow:0 0 0 3px var(--m-edge)}
.map-node:focus-visible{outline:3px solid var(--ai-fill);outline-offset:2px}
button.group-row{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
button.group-row[aria-pressed=true]{background:var(--m-tint)}
.dimension-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.dimension{display:grid;gap:8px;align-content:start}
.dimension-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dimension-head .badge{margin:0}
.dimension.fix .badge{background:var(--warn-bg);color:var(--warning)}
.dimension.unknown .badge{background:var(--soft);color:var(--muted)}
.studio-original{font:500 17px/1.6 var(--f-ja)}
.ink-paper{max-width:640px}
/* AI 對話 (batch A, App V5 AI root): the AI module colours, the conversation, reply actions and cue marks, the composer dock. */
.ai{--m-fill:var(--ai-fill);--m-edge:var(--ai-edge);--m-tint:var(--ai-tint);--m-text:var(--ai-text);--m-on:var(--ai-on-fill)}
.ai-page{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;padding-bottom:0;min-height:100%}
.ai-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
/* ai-conversation-header-v1: the header stays at the top while the conversation scrolls; the source has a status dot. */
.ai-header{position:sticky;top:0;z-index:5;display:grid;gap:6px;padding-bottom:8px;background:var(--bg);border-bottom:1px solid var(--line)}
.ai-source-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:2px}
.ai-source-dot.openai{background:var(--success,#0B7A55)}
.ai-source-dot.morapath{background:var(--danger)}
.ai-language-title{color:var(--muted);font-weight:700}
.ai-header-hint{color:var(--muted);font-size:14px;font-weight:600}
.ai-top-actions{display:flex;align-items:center;gap:8px}
.ai-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ai-tools .chip,.ai-tools .menu-button>button.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--ink)}
.ai-context{display:flex;gap:12px;align-items:center;padding:12px 14px}
.ai-context-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--m-tint);color:var(--m-text);font:800 20px var(--f-round);flex-shrink:0}
.ai-context .meta{overflow-wrap:anywhere}
.ai-stream{display:grid;gap:12px}
.ai-archive{border-radius:16px;background:var(--soft);padding:10px 14px}
.ai-guide{display:flex;gap:10px;align-items:flex-start}
.ai-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--m-fill);color:var(--m-on);font:800 14px var(--f-round);flex-shrink:0}
.ai-messages{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ai-row{display:grid;gap:6px;min-width:0}
.ai-row.user{justify-items:end}
.ai-bubble{max-width:min(85%,560px);background:var(--m-tint);border-radius:18px 18px 6px 18px;padding:10px 14px;overflow-wrap:anywhere}
.ai-bubble.failed{outline:2px solid var(--danger)}
.ai-text{white-space:pre-wrap;margin:0;overflow-wrap:anywhere}
.ai-note{margin:6px 0 0;color:var(--muted);font-size:14px;white-space:pre-wrap}
.ai-time{font-size:13px;color:var(--muted)}
.ai-identity{display:flex;align-items:center;gap:8px}
.ai-name{font:800 14px var(--f-round)}
.ai-reply-card{background:var(--surface);border:2px solid var(--line);border-radius:6px 18px 18px 18px;padding:12px 14px;display:grid;gap:8px;min-width:0}
.ai-waiting{display:flex;align-items:center;gap:10px;color:var(--muted)}
.ai-cue-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.7;cursor:pointer;border-radius:10px;touch-action:pan-y}
.ai-cue-text:hover{background:var(--soft)}
.ai-cue-text.scrubbing{user-select:none;-webkit-user-select:none}
.ai-cue{border-radius:5px;transition:background-color .11s cubic-bezier(.22,1,.36,1),color .11s}
.ai-cue.played{background:var(--m-tint);text-decoration:underline dotted;text-underline-offset:4px}
.ai-cue.current{background:var(--m-fill);color:var(--m-on)}
.ai-cue.preview{background:var(--warn-bg);color:var(--ink)}
.ai-note-entry{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--m-text);font:750 15px var(--f-body);min-height:44px;padding:0;cursor:pointer;justify-self:start}
.ai-reply-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ai-action{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--m-text);font:750 15px var(--f-body);cursor:pointer}
.ai-action[aria-disabled=true]{color:var(--muted);cursor:default}
.ai-action:hover{background:var(--soft)}
.ai-voice-badge{margin-top:0}
.ai-words{display:grid;gap:8px;padding:4px 0}
.ai-word-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ai-word{display:flex;align-items:center;gap:2px;border:2px solid var(--line);border-radius:14px;background:var(--surface);padding-left:4px;max-width:100%}
.ai-word.saved{background:var(--soft)}
.ai-word-preview{display:grid;justify-items:start;min-height:44px;padding:4px 8px;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left;min-width:0}
.ai-word-surface{font:750 16px var(--f-body);overflow-wrap:anywhere}
.ai-word.saved .ai-word-surface{color:var(--muted)}
.ai-error{color:var(--danger);font-size:14px;font-weight:650;margin:0}
.ai-failure{margin:0}
.ai-failure .h3{margin:0 0 4px}
.ai-failure .button{margin-top:8px}
.ai-voice-note{display:flex;gap:8px;align-items:flex-start;color:var(--m-text);font-size:15px}
.ai-voice-note p{color:var(--ink);margin:0}
.ai-send-failure{display:grid;justify-items:end;gap:2px;text-align:right}
.ai-send-failure p{display:inline-flex;align-items:center;gap:6px;color:var(--danger);font-size:14px;font-weight:650;margin:0}
.ai-send-failure p.meta{color:var(--muted);font-weight:600}
.ai-inline-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.ai-pack-link{display:inline-flex;align-items:center;gap:6px;justify-self:start;align-self:flex-start}
.ai-starters{display:grid;gap:6px}
.ai-starters .chips{margin:4px 0 0}
.ai-starters .chip{cursor:pointer;min-height:44px;color:var(--ink)}
.ai-composer{position:sticky;bottom:0;margin-top:auto;display:grid;gap:8px;background:var(--bg);border-top:1px solid var(--line);padding:10px 0 12px;z-index:2}
.ai-send-blocked{display:flex;align-items:center;gap:8px;margin:0;color:var(--m-text);font-weight:650;font-size:15px}
.ai-tray{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto}
.ai-tray .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:var(--m-tint);color:var(--m-text);border-color:var(--m-tint);cursor:pointer;white-space:nowrap}
.ai-tray .chip svg.ic{width:14px;height:14px}
.ai-mode-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-modes{margin:0}
.ai-pick-words{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--ink);margin-left:auto}
.ai-pick-words[aria-disabled=true],.ai-modes .chip[aria-disabled=true]{opacity:.45;cursor:default}
.ai-input-row{display:flex;align-items:flex-end;gap:8px}
.ai-attach{flex-shrink:0}
.ai-input{flex:1;min-width:0;min-height:52px;max-height:40vh;resize:vertical;field-sizing:content;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:12px 14px;font:500 17px/1.45 var(--f-body)}
.ai-input:focus{border-color:var(--m-fill);outline:none}
.ai-send{flex-shrink:0;cursor:pointer}
.ai-send[aria-disabled=true]{background:var(--soft);color:var(--muted);box-shadow:0 4px 0 var(--line);cursor:default}
.spinner.small{width:18px;height:18px;border-width:2px}
.ai-sort-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
.ai-sort-row .chip{cursor:pointer;min-height:44px;color:var(--ink)}
.ai-check-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.ai-pack{display:grid;gap:8px;padding:12px}
.ai-pack-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-pack-head strong{display:block;overflow-wrap:anywhere}
.ai-pack-head .chip{cursor:pointer;min-height:44px;color:var(--ink);flex-shrink:0}
.ai-empty{text-align:center;margin:16px 0}
.ai-attach-list{margin-bottom:12px}
.ai-attach-list .group-row{width:100%;text-align:left;cursor:pointer}
.ai-preview-hero{display:grid;gap:4px;margin:8px 0 16px}
.ai-preview-surface{font:700 40px/1.3 var(--f-body);margin:0;overflow-wrap:anywhere}
.ai-preview-surface[lang=ja]{font-family:var(--f-ja)}
.ai-preview-context{background:var(--m-tint);border-radius:18px;padding:14px 16px;margin-bottom:16px}
.ai-preview-context .meta{color:var(--m-text);font-weight:700}
.ai-preview-context p:last-child{font-size:18px;line-height:1.6;margin:4px 0 0}
@media (prefers-reduced-motion:reduce){.ai-cue{transition:none}}
@media (min-width:900px){.ai-page{padding-top:8px}}
/* P 發音基礎 (App PronunciationSoundMapScreen, MinimalPairPracticeScreen; phase-b-v1 pronunciation-progress). */
.basics-controls .chips{margin-bottom:10px}
.chips .chip[aria-current=true]{border-color:var(--m-fill);background:var(--m-tint);color:var(--m-text)}
.basics-bar{position:sticky;top:0;z-index:3;background:var(--bg);margin:0 -16px;padding:8px 16px 2px;border-bottom:1px solid var(--line)}
.section-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 0 6px;scrollbar-width:none}
.section-chips .chip{flex:none;white-space:nowrap}
.basics-section{padding:18px 0 6px;scroll-margin-top:64px}
.basics-section>.meta{margin:2px 0 12px}
.basics-grid{display:grid;gap:8px;margin-bottom:12px}
.column-label{text-align:center;font:700 13px var(--f-body);color:var(--muted)}
.cell-spacer{min-height:64px}
.basics-cell{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;min-height:64px;padding:8px 4px;border:2px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 3px 0 var(--line);color:var(--ink);cursor:pointer}
.basics-cell[aria-pressed=true]{background:var(--m-fill);border-color:var(--m-fill);box-shadow:0 3px 0 var(--m-edge);color:var(--m-on)}
.basics-cell:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.basics-cell .cell-glyph{font:700 24px/1.2 var(--f-ja)}
.basics-cell .cell-glyph.symbol{font:700 20px/1.2 var(--f-body)}
.basics-cell .cell-caption{font-size:13px;color:inherit;opacity:.8;overflow-wrap:anywhere}
.basics-cell .cell-caption b{text-decoration:underline}
.unit-mark{position:absolute;top:4px;right:4px;width:14px;height:14px}
.unit-mark svg.ic{width:14px;height:14px}
.unit-mark.loading{border:2px solid currentColor;border-radius:50%;opacity:.7}
.basics-word{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:700 17px var(--f-body);cursor:pointer;max-width:100%;overflow-wrap:anywhere}
.basics-word[aria-pressed=true]{background:var(--m-tint);border-color:var(--m-fill)}
.basics-word svg.ic{width:16px;height:16px;color:var(--m-text)}
.basics-word .sub{font-size:13px;color:var(--muted)}
.basics-word.small{font-size:15px;min-height:44px}
.basics-word .unit-mark{display:none}
.word-pair{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0}
.word-pair.stacked{flex-direction:column;align-items:stretch}
.pair-separator{color:var(--muted)}
.basics-card{margin:0 0 12px;display:grid;gap:8px}
.basics-card .rule,.basics-card .variant{display:grid;gap:4px}
.basics-pair{margin-bottom:10px;padding:10px}
.pair-labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:13px;color:var(--muted);margin-bottom:6px}
.pitch-list{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.basics-pitch{display:grid;gap:6px;justify-items:start;padding:12px;border:2px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 3px 0 var(--line);color:var(--ink);cursor:pointer;min-width:0;max-width:100%}
.basics-pitch[aria-pressed=true]{border-color:var(--m-fill)}
.basics-pitch .pitch-head{display:flex;align-items:center;gap:8px;font-weight:700}
.basics-pitch .pitch-head svg.ic{width:16px;height:16px;color:var(--m-text)}
.basics-pitch .pitch-word{font:700 20px var(--f-ja)}
.basics-pitch .unit-mark{display:none}
.pitch-line{max-width:100%;overflow-x:auto}
.pitch-line svg{display:block}
.pitch-stroke{stroke:var(--ink)}
.pitch-dot{fill:var(--m-fill);stroke:var(--m-fill)}
.pitch-particle{fill:var(--surface);stroke:var(--ink)}
.pitch-mora{display:flex;font-size:13px}
.pitch-mora span{text-align:center}
.practice-start{margin:4px 0 12px}
.minimal-list{display:grid;gap:4px}
.basics-dock{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:12px -4px 0;padding:12px;border:2px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.dock-glyph{display:grid;place-items:center;min-width:52px;height:52px;padding:0 6px;border-radius:14px;background:var(--m-tint);color:var(--m-text);font:700 24px var(--f-ja)}
.dock-copy{display:grid;gap:6px;min-width:0}
.dock-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dock-row .badge{margin:0}
.dock-more{display:inline-flex;align-items:center;gap:2px}
.dock-more svg.ic{width:16px;height:16px}
.status-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;font-weight:600}
.status-line svg.ic{width:18px;height:18px}
.status-line.quiet{color:var(--muted)}
.status-line.warn{color:var(--warning)}
.status-line.danger{color:var(--danger)}
.status-line.success{color:var(--success)}
.basics-detail{display:grid;gap:10px}
.basics-detail .detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.big-glyph{font:800 44px/1.1 var(--f-ja);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.big-glyph .alt-glyph{font-size:24px;color:var(--muted)}
.basics-detail .subtitle{font:700 18px var(--f-body)}
.pitch-card{padding:12px}
.example-card{display:flex;gap:10px;align-items:center;width:100%;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.example-card svg.ic{color:var(--m-text)}
.example-card .example-text{display:block;font:700 18px var(--f-ja)}
.example-card .example-text b{text-decoration:underline}
.report-area{display:grid;gap:8px;margin-top:8px}
.basics-column{position:sticky;top:0;align-self:start;max-height:100dvh;overflow:auto;padding:20px 0}
.column-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 12px}
.column-empty .blob{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--m-tint);color:var(--m-text)}
.page.basics.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:28px;max-width:1320px}
.practice{display:grid;gap:10px;max-width:640px}
.practice .badge{justify-self:start;margin:0}
.progress-bar{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.progress-bar span{display:block;height:100%;background:var(--m-fill)}
.practice-options{display:grid;gap:8px}
.option-card{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:52px;padding:10px 14px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:700 17px var(--f-body);text-align:left;cursor:pointer}
.option-card[aria-checked=true]{border-color:var(--m-fill)}
.option-card.correct{border-color:var(--success);background:var(--success-bg)}
.option-card.incorrect{border-color:var(--danger);background:var(--danger-bg)}
.option-state{display:inline-flex;align-items:center;gap:4px;font-size:14px}
.option-state svg.ic{width:16px;height:16px}
.practice-done{display:grid;gap:10px;justify-items:center;text-align:center;max-width:640px}
.practice-done .blob{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--m-tint);color:var(--m-text)}
@media (min-width:900px){.basics-bar{margin:0 -40px;padding:8px 40px 2px}.page.basics.split .basics-bar{margin-right:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){.basics-cell:active{transform:none}}
@media (forced-colors:active){.basics-cell[aria-pressed=true],.basics-word[aria-pressed=true],.chips .chip[aria-current=true],.option-card[aria-checked=true]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}}
/* S batch: 帳號與連線, ChatGPT／OpenAI, 方案與點數, 安全 and 匯出 (the App's AccountListSection / AccountListRow / AccountChoiceRow). */
.account-section{display:grid;gap:10px}
.account-section-title{margin:0}
.account-footer{margin:0 2px}
/* 回答風格 (chatgpt-model-speed-v2): three 積木風 radios in one row; they stack at large text or narrow widths. */
.answer-style-slider{display:grid;gap:6px;padding:16px}
.answer-style-slider[aria-busy=true]{opacity:.55}
.answer-style-readout{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin:0}
.answer-style-readout strong{font:800 20px var(--f-round)}
.answer-style-readout span{font:800 16px var(--f-round);color:var(--m-text)}
.answer-style-slider input[type=range]{width:100%;min-height:44px;margin:8px 0 0;accent-color:var(--m-fill);cursor:pointer}
.answer-style-slider.custom input[type=range]::-webkit-slider-thumb{opacity:0}
.answer-style-slider.custom input[type=range]::-moz-range-thumb{opacity:0}
.answer-style-labels{display:flex;justify-content:space-between}
.answer-style-labels button{min-height:44px;border:0;background:none;color:var(--muted);font:700 15px var(--f-round);cursor:pointer;padding:0 4px}
.answer-style-labels button.selected{color:var(--ink);font-weight:800}
.group-row .row-value{flex:0 1 45%;text-align:right;overflow-wrap:anywhere}
.group-row[aria-disabled=true]{color:var(--muted)}
.group-row[aria-disabled=true] .glyph{background:var(--soft);color:var(--muted)}
.glyph.danger{background:var(--danger-bg);color:var(--danger)}
.danger-text{color:var(--danger)}
button.choice-row{min-height:64px}
.choice-row[aria-checked=true]{background:var(--m-tint)}
.choice-row[aria-disabled=true]{cursor:default;color:var(--muted)}
.choice-row svg.ic{color:var(--m-text)}
.choice-space{width:24px;flex:none}
.group>.choice-row+.choice-row,.group>.group-row+.group-row{border-top:1px solid var(--line)}
.info-row{justify-content:space-between}
.info-row .info-value{font:800 16px/1.35 var(--f-round);text-align:right;flex:0 1 50%;overflow-wrap:anywhere}
.sheet-gap{margin:12px 0}
.account-identity .copy{flex:1;min-width:0;display:grid;gap:2px}
.account-identity .badge{margin-top:0;flex:none}
.danger-heading{display:flex;align-items:center;gap:8px;font:800 18px var(--f-round);color:var(--danger)}
.quota-hero{gap:6px}
.quota-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;min-height:44px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;padding:0}
.quota-head .hero-title{flex:1 1 auto}
.quota-hero .meta-on{font:800 13px var(--f-round);letter-spacing:.04em}
.quota-value{font:800 56px/1 var(--f-round);font-variant-numeric:tabular-nums}
.quota-value small{font-size:28px}
.code-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.device-code{font:800 28px/1.2 var(--f-round);letter-spacing:.08em;user-select:all;overflow-wrap:anywhere}
@media (forced-colors:active){.choice-row[aria-checked=true]{forced-color-adjust:none;background:Highlight;color:HighlightText}}
.sheet .group+.account-footer{margin-top:10px}.sheet .account-footer+.button,.sheet .account-footer+.account-footer{margin-top:10px}
/* 增加對比 (the App's lightHighContrast / darkHighContrast V5 tables; test/settings.test.ts keeps them equal): follows the system setting. */
@media (prefers-contrast:more){:root{--bg:#F6F6FA;--surface:#FFFFFF;--soft:#EEEEF4;--line:#8C8AA8;--line-strong:#5B5975;--ink:#0B0A1F;--muted:#3D3B59;--on-ink:#FFFFFF;--scrim:rgba(11,10,31,.56);--bar:#FFFFFF;--danger:#A10E26;--danger-bg:#FDE8EC;--warning:#6B4000;--warn-bg:#FFF1D6;--success:#07603F;--success-bg:#DFF6EC;--tab:#A82E10;--materials-fill:#C23412;--materials-edge:#7A2008;--materials-tint:#FFE9E2;--materials-text:#A12A0D;--materials-on-fill:#FFFFFF;--materials-deco:#FF8A6B;--materials-inverse:#C23412;--vocabulary-fill:#4A3AD9;--vocabulary-edge:#2A1D96;--vocabulary-tint:#ECEAFF;--vocabulary-text:#3F30C9;--vocabulary-on-fill:#FFFFFF;--vocabulary-deco:#8F84FF;--vocabulary-inverse:#5040E6;--ai-fill:#05609F;--ai-edge:#033B66;--ai-tint:#E1F1FF;--ai-text:#05568F;--ai-on-fill:#FFFFFF;--ai-deco:#4FB3FF;--ai-inverse:#0668B5;--exam-fill:#086B4A;--exam-edge:#04402B;--exam-tint:#DDF6EB;--exam-text:#075E41;--exam-on-fill:#FFFFFF;--exam-deco:#3FD39E;--exam-inverse:#0A7651;--my-fill:#FFC233;--my-edge:#8F6400;--my-tint:#FFF3D1;--my-text:#6B4A00;--my-on-fill:#0B0A1F;--my-deco:#FFD86B;--my-inverse:#855C00;--tile-0-bg:#086B4A;--tile-0-fg:#FFFFFF;--tile-1-bg:#05609F;--tile-1-fg:#FFFFFF;--tile-2-bg:#FFC233;--tile-2-fg:#08070F;--tile-3-bg:#4A3AD9;--tile-3-fg:#FFFFFF;--tile-4-bg:#C23412;--tile-4-fg:#FFFFFF;--tile-5-bg:#A8186A;--tile-5-fg:#FFFFFF}:root[data-theme=dark]{--bg:#08070F;--surface:#15141F;--soft:#201F2E;--line:#8C8AA8;--line-strong:#C6C4DD;--ink:#FFFFFF;--muted:#E3E1F5;--on-ink:#08070F;--scrim:rgba(0,0,0,.7);--bar:#15141F;--danger:#FFB3BD;--danger-bg:#3D1720;--warning:#FFD98F;--warn-bg:#38290F;--success:#8DF0C8;--success-bg:#11342A;--tab:#FFB199;--materials-fill:#C23412;--materials-edge:#FFFFFF;--materials-tint:#3A1D17;--materials-text:#FFB199;--materials-on-fill:#FFFFFF;--materials-deco:#FF8A6B;--materials-inverse:#C23412;--vocabulary-fill:#4A3AD9;--vocabulary-edge:#FFFFFF;--vocabulary-tint:#25214A;--vocabulary-text:#C9C3FF;--vocabulary-on-fill:#FFFFFF;--vocabulary-deco:#8F84FF;--vocabulary-inverse:#5040E6;--ai-fill:#05609F;--ai-edge:#FFFFFF;--ai-tint:#132B42;--ai-text:#A6D8FF;--ai-on-fill:#FFFFFF;--ai-deco:#4FB3FF;--ai-inverse:#0668B5;--exam-fill:#086B4A;--exam-edge:#FFFFFF;--exam-tint:#11312A;--exam-text:#8DF0C8;--exam-on-fill:#FFFFFF;--exam-deco:#3FD39E;--exam-inverse:#0A7651;--my-fill:#FFC233;--my-edge:#FFFFFF;--my-tint:#352B12;--my-text:#FFE09A;--my-on-fill:#08070F;--my-deco:#FFD86B;--my-inverse:#855C00;--tile-0-bg:#086B4A;--tile-0-fg:#FFFFFF;--tile-1-bg:#05609F;--tile-1-fg:#FFFFFF;--tile-2-bg:#FFC233;--tile-2-fg:#08070F;--tile-3-bg:#4A3AD9;--tile-3-fg:#FFFFFF;--tile-4-bg:#C23412;--tile-4-fg:#FFFFFF;--tile-5-bg:#A8186A;--tile-5-fg:#FFFFFF}}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#08070F;--surface:#15141F;--soft:#201F2E;--line:#8C8AA8;--line-strong:#C6C4DD;--ink:#FFFFFF;--muted:#E3E1F5;--on-ink:#08070F;--scrim:rgba(0,0,0,.7);--bar:#15141F;--danger:#FFB3BD;--danger-bg:#3D1720;--warning:#FFD98F;--warn-bg:#38290F;--success:#8DF0C8;--success-bg:#11342A;--tab:#FFB199;--materials-fill:#C23412;--materials-edge:#FFFFFF;--materials-tint:#3A1D17;--materials-text:#FFB199;--materials-on-fill:#FFFFFF;--materials-deco:#FF8A6B;--materials-inverse:#C23412;--vocabulary-fill:#4A3AD9;--vocabulary-edge:#FFFFFF;--vocabulary-tint:#25214A;--vocabulary-text:#C9C3FF;--vocabulary-on-fill:#FFFFFF;--vocabulary-deco:#8F84FF;--vocabulary-inverse:#5040E6;--ai-fill:#05609F;--ai-edge:#FFFFFF;--ai-tint:#132B42;--ai-text:#A6D8FF;--ai-on-fill:#FFFFFF;--ai-deco:#4FB3FF;--ai-inverse:#0668B5;--exam-fill:#086B4A;--exam-edge:#FFFFFF;--exam-tint:#11312A;--exam-text:#8DF0C8;--exam-on-fill:#FFFFFF;--exam-deco:#3FD39E;--exam-inverse:#0A7651;--my-fill:#FFC233;--my-edge:#FFFFFF;--my-tint:#352B12;--my-text:#FFE09A;--my-on-fill:#08070F;--my-deco:#FFD86B;--my-inverse:#855C00;--tile-0-bg:#086B4A;--tile-0-fg:#FFFFFF;--tile-1-bg:#05609F;--tile-1-fg:#FFFFFF;--tile-2-bg:#FFC233;--tile-2-fg:#08070F;--tile-3-bg:#4A3AD9;--tile-3-fg:#FFFFFF;--tile-4-bg:#C23412;--tile-4-fg:#FFFFFF;--tile-5-bg:#A8186A;--tile-5-fg:#FFFFFF}}
/* S batch: App 設定 › 主題色 單一品牌色 (every module takes the brand coral; success, warning and error keep their own). */
:root[data-brand=single] :is(.vocab,.my,.exam,.ai){--m-fill:var(--materials-fill);--m-edge:var(--materials-edge);--m-tint:var(--materials-tint);--m-text:var(--materials-text);--m-on:var(--materials-on-fill)}
.swatches{display:flex;gap:4px;flex:none}
.swatches span{width:14px;height:28px;border-radius:7px;border:1px solid var(--line)}
.setting-row label.setting-copy{flex:1;min-width:0}
/* MoraPath 如何使用 and 歡迎使用 (the App's step cards with a numbered tile in each step's module colour). */
.step-number{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;font:800 20px var(--f-round);color:var(--sn-on);background:var(--sn-fill);box-shadow:0 3px 0 var(--sn-edge)}
.step-number.materials{--sn-fill:var(--materials-fill);--sn-edge:var(--materials-edge);--sn-on:var(--materials-on-fill)}
.step-number.vocabulary{--sn-fill:var(--vocabulary-fill);--sn-edge:var(--vocabulary-edge);--sn-on:var(--vocabulary-on-fill)}
.step-number.ai{--sn-fill:var(--ai-fill);--sn-edge:var(--ai-edge);--sn-on:var(--ai-on-fill)}
.step-number.exam{--sn-fill:var(--exam-fill);--sn-edge:var(--exam-edge);--sn-on:var(--exam-on-fill)}
.guide-hero{display:grid;gap:10px}
.guide-kicker{letter-spacing:.04em}
.guide-sequence{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:6px 0 0;padding:0}
.guide-sequence li{display:flex;align-items:center;gap:8px;font:800 18px var(--f-round)}
.guide-step{display:flex;gap:14px;align-items:flex-start}
.guide-body{flex:1;min-width:0}
.guide-quote{font:800 17px/1.5 var(--f-round);color:var(--m-text)}
.guide-points{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.guide-points li{display:grid;gap:2px}
.guide-points li.guide-loop{display:flex;gap:12px;align-items:flex-start}
.guide-band{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:16px;padding:12px}
.guide-times{font:800 28px var(--f-round);color:var(--m-text)}
.guide-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.guide-reference{display:flex;gap:14px;align-items:flex-start;color:inherit;text-decoration:none}
.guide-reference:hover{border-color:var(--m-fill)}
.guide-action{display:inline-flex;align-items:center;min-height:0;padding:0}
.welcome-page{max-width:640px}
.welcome-mark{display:grid;place-items:center;width:80px;height:80px;border-radius:26px;background:var(--materials-fill);color:var(--materials-on-fill);font:800 42px var(--f-round);box-shadow:0 6px 0 var(--materials-edge);margin:8px 0}
.welcome-headline{font:800 30px/1.25 var(--f-round);white-space:pre-line}
.welcome-steps{list-style:none;margin:8px 0;padding:0}
/* 內容版權 */
.license-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.license-head .copy{display:grid;gap:2px;min-width:0}
.license-head .badge{margin-top:0;flex:none;max-width:50%;overflow-wrap:anywhere}
.license-note{white-space:pre-line}
.license-toggle{display:inline-flex;align-items:center;gap:4px;justify-self:start}
.license-text{white-space:pre-wrap;overflow-wrap:anywhere;font:500 13px/1.5 ui-monospace,Menlo,monospace;background:var(--soft);border-radius:12px;padding:12px;max-height:420px;overflow:auto;margin:0}
.guide-band p{flex:1;min-width:0;text-align:left}
/* S batch: 搜尋 (the App's SearchScreen and SearchResultScreen). */
.search-kinds{margin:0}
.search-filters{display:flex;flex-wrap:wrap;gap:10px}
.filter-select{display:grid;gap:4px;flex:1 1 150px;min-width:0}
.filter-select select{min-height:48px;padding:0 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:700 15px var(--f-body);max-width:100%}
.search-results{list-style:none;margin:0;padding:0}
button.search-result{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:78px;align-items:center}
.search-result .copy{display:grid;gap:4px;justify-items:start}
.search-result .badge{margin-top:0}
.search-title{font:800 17px/1.35 var(--f-round);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-body{overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
mark{background:color-mix(in srgb,var(--m-fill) 22%,transparent);color:var(--ink);font-weight:800;border-radius:4px}
.search-original{list-style:none;margin:0;padding:0}
.search-original .card{display:grid;gap:6px}
.search-anchor{border-color:var(--m-fill)}
.search-original-text{white-space:pre-line;overflow-wrap:anywhere;font-size:17px}
.search-result-page>.badge{justify-self:start;margin-top:0}
/* F: a 單詞 row of the sentence insight opens 單詞詳情. */
.word-list .word-open{display:inline-flex;align-items:baseline;gap:4px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.word-list .word-open svg{align-self:center;color:var(--muted)}
.word-list .word-open[aria-disabled]{opacity:.6;cursor:default}
/* F: 漢字書寫 — the KanjiVG stage (App KanjiStage: white paper, 1.5:1) and the model under the strokes in 描紅. */
.kanji-stage{background:#FFFFFF;border:2px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:3/2;max-width:640px}
.kanji-glyph{display:block;width:100%;height:100%}
.ink-paper.guided{position:relative}
.ink-guide{position:absolute;inset:0;pointer-events:none}
.ink-paper.guided canvas{position:relative;mix-blend-mode:multiply}
.studio-tile.palette-4{--tile-bg:#DA3A12;--tile-edge:#A82E10}
.studio-tile-menu{display:grid;min-width:0}
.studio-tile-menu>.menu-button,.studio-tile-menu .menu-button>button{display:grid;width:100%}
.menu-heading{margin:0;padding:8px 12px 4px}
/* JLPT 專項練習 on the server (G): the subject tiles' glyph, the statistics, the question page (progress, passage box,
   lettered options, previous/next), the answer card grid and the result ring. */
.exam-top-history{margin-left:auto}
a.studio-tile{text-decoration:none}
.subject-tile{position:relative;overflow:hidden}
.subject-tile>strong,.subject-tile>span:not(.tile-glyph){position:relative;padding-right:40px}
.tile-glyph{position:absolute;right:14px;bottom:12px;font:800 52px/1 var(--f-ja);opacity:.3;pointer-events:none}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:12px;margin:0}
.stat-tiles dd{margin:4px 0 0}
.jlpt-progress{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline}
.jlpt-progress strong{font:800 16px var(--f-round)}
.passage{max-height:min(46vh,420px);overflow:auto;padding:14px 16px;border:2px solid var(--line);border-radius:18px;background:var(--surface)}
.passage:focus-visible{outline:3px solid var(--ai-fill);outline-offset:2px}
.passage-text{margin:0;font:500 18px/1.8 var(--f-ja);white-space:pre-wrap}
.passage-block+.passage-block{margin-top:14px}
.passage-title{margin:0 0 6px;font:800 16px var(--f-round)}
.passage-table-wrap{overflow-x:auto}
.passage-table{border-collapse:collapse;font:500 16px/1.5 var(--f-ja);min-width:100%}
.passage-table th,.passage-table td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.practice-prompt{margin:0;font:700 22px/1.6 var(--f-ja);outline:none;overflow-wrap:anywhere}
.exam-option{justify-content:flex-start;gap:12px;width:100%}
.option-letter{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--soft);font:800 15px var(--f-round)}
.exam-option[aria-checked=true] .option-letter{background:var(--m-fill);color:var(--m-on)}
.exam-option.correct .option-letter{background:var(--success);color:var(--surface)}
.exam-option.incorrect .option-letter{background:var(--danger);color:var(--surface)}
.option-text{flex:1;min-width:0;overflow-wrap:anywhere}
.exam-option[aria-disabled=true]{cursor:default}
.jlpt-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.answer-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:8px}
.answer-cell{display:grid;justify-items:center;gap:2px;width:100%;min-height:64px;padding:8px 4px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.answer-cell strong{font:800 20px var(--f-round)}
.answer-cell span{font-size:12px;font-weight:700;color:var(--muted)}
.answer-cell.answered{border-color:var(--m-edge);background:var(--m-tint)}
.answer-cell.answered span{color:var(--m-text)}
.answer-cell:focus-visible{outline:3px solid var(--ai-fill);outline-offset:2px}
@media(max-width:359px){.answer-grid{grid-template-columns:repeat(4,minmax(44px,1fr))}}
.result-hero{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:8px 0 16px}
.result-hero .page-heading{margin:0}
.result-ring{position:relative;width:112px;height:112px;flex:none}
.result-ring svg{width:100%;height:100%}
.result-ring circle{fill:none;stroke-width:10}
.ring-track{stroke:var(--soft)}
.ring-value{stroke:var(--m-fill);stroke-linecap:round}
.result-ring span{position:absolute;inset:0;display:grid;place-items:center;font:800 24px var(--f-round)}
/* 單字小測驗 (G-2): the type card in the hero, the step header with its close button, the reflow header. */
.unit-type{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;color:var(--ink);box-shadow:none}
.unit-type p{margin:4px 0 0}
.unit-type .badge{margin:0;flex:none}
.unit-step-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:4px}
.section-head .section-title{margin:0}
.stack>.badge{justify-self:start;margin-top:0}
/* 句子詳情 (sentence-insight-stream-v1, approved draft docs/product-design/open-design/sentence-insight-stream-v1 si3.css; App
   OneHundredLSSentenceExplainPage): Brick buttons in text, chip, toggle and 44 px icon sizes; the sentence card with its
   playback group; the streamed answer (chunks tinted, words dotted); 這句裡的詞語; the term panel; banners; the composer
   docked at the bottom of the column or sheet. The Brick press drops the face at once (moraChunkyPress), no curve. */
.chunky.small{width:44px;height:44px;border-radius:14px;box-shadow:0 3px 0 var(--m-edge)}
.chunky.text,.chunky.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;height:auto;min-height:44px;padding:8px 14px;border-radius:14px;font:800 15px/1.25 var(--f-round);text-decoration:none;box-shadow:0 3px 0 var(--m-edge)}
/* 句子詳情 重新回答 and ↓ 新內容 (sentence-insight-stream-v1 §10 #9): compact text, but the 44px target. */
.chunky.text.mini{min-height:44px;padding:4px 12px;font-size:14px}
.chunky.danger{background:var(--danger-bg);color:var(--danger);box-shadow:0 3px 0 var(--line-strong)}
.chunky.danger:not([aria-disabled=true]):active{box-shadow:0 1px 0 var(--line-strong)}
.dialog .actions .chunky{width:100%}
.chunky.secondary,.chunky.chip{background:var(--surface);color:var(--m-text);border:2px solid var(--line);box-shadow:0 3px 0 var(--line-strong)}
.chunky.chip{color:var(--ink);font:700 15px/1.3 var(--f-body);padding:6px 12px;text-align:left}
.chunky.chip[aria-pressed=true]{border-color:var(--m-text);background:var(--m-tint)}
.chunky.toggle[aria-pressed=true],.chunky.toggle[aria-expanded=true]{background:var(--m-text);color:var(--m-on);border-color:var(--m-text);box-shadow:0 3px 0 var(--m-edge)}
.chunky.small.secondary[aria-pressed=true]{background:var(--m-tint);color:var(--m-text);border-color:var(--m-text)}
.chunky.text[aria-disabled=true],.chunky.small[aria-disabled=true],.chunky.small:disabled{background:var(--soft);color:var(--muted);border-color:var(--line);box-shadow:0 3px 0 var(--line);cursor:default}
.chunky .ic{width:20px;height:20px;flex:none}
.chunky:not(:disabled):not([aria-disabled=true]):active{transform:translateY(2px);box-shadow:0 1px 0 var(--m-edge)}
.chunky.secondary:not([aria-disabled=true]):active,.chunky.chip:active{box-shadow:0 1px 0 var(--line-strong)}
/* 積木風: a menu trigger stays pressed while its menu is open (the App's held face). */
.chunky.small.secondary[aria-haspopup=menu][aria-expanded=true]{transform:translateY(2px);box-shadow:0 1px 0 var(--line-strong);background:var(--m-tint);border-color:var(--m-text)}
@media(prefers-reduced-motion:reduce){.chunky:not(:disabled):not([aria-disabled=true]):active,.chunky.small.secondary[aria-haspopup=menu][aria-expanded=true]{transform:none;filter:brightness(.92)}}
.explain-column{min-height:100%}
.explain-head{display:grid;grid-template-columns:minmax(44px,auto) 1fr minmax(44px,auto);align-items:center;gap:8px;padding:8px 12px 10px;position:sticky;top:0;z-index:2;background:var(--bg)}
.sheet .explain-head{background:var(--surface);margin:-8px -4px 8px;padding:0 0 8px}
.explain-head h2{margin:0;text-align:center;font:800 18px/1.25 var(--f-round)}
.explain-head>:last-child{justify-self:end}
.explain-head-spacer{width:44px;height:44px}
.explain{display:grid;gap:14px;padding:4px 16px 0}
.sheet .explain{padding:0}
.explain-card{background:var(--m-tint);border-radius:22px;padding:16px 16px 14px;display:grid;gap:6px}
.explain-source{font:700 13px var(--f-round);color:var(--m-text);margin:0}
.explain-sentence{font:700 calc(22px * var(--sub-scale,1))/1.45 var(--f-ja);margin:0 0 6px}
.explain-play{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.explain-thinking{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;margin:0}
.explain-dots{width:10px;height:10px;border-radius:50%;background:var(--m-fill)}
@media(prefers-reduced-motion:no-preference){.explain-dots,.explain-caret{animation:explain-pulse 1.2s ease-in-out infinite}@keyframes explain-pulse{50%{opacity:.35}}}
.explain-answer{display:grid;gap:12px;line-height:1.7}
.explain-answer p,.explain-answer ul{margin:0}
.explain-answer ul{padding-left:1.2em;display:grid;gap:4px}
.explain-lead{display:grid;gap:2px}
.explain-lead-label{font:800 12px var(--f-round);letter-spacing:.06em;color:var(--muted)}
.explain-lead p{font:700 18px/1.55 var(--f-body)}
.explain-term{display:inline;border:0;margin:0;padding:0 2px;border-radius:6px;background:none;font:inherit;font-family:var(--f-ja);font-weight:700;line-height:inherit;cursor:pointer;color:inherit}
.explain-term.chunk{background:var(--m-tint);color:var(--m-text);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--m-text) 45%,transparent)}
.explain-term.word{color:var(--vocabulary-text);text-decoration:underline dotted 2px;text-underline-offset:4px}
.explain-caret{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--m-fill);vertical-align:middle;margin-left:3px}
.explain-dimmed{opacity:.6}
.explain-terms h3{margin:0 0 8px;font:800 13px var(--f-round);color:var(--muted);letter-spacing:.04em}
.explain-chips{display:flex;flex-wrap:wrap;gap:8px}
.explain-chip-gloss{color:var(--muted);font-weight:600;font-size:.9em}
.explain-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.explain-divider{border:0;height:1px;background:var(--line);margin:0 0 14px}
.explain-follow-up{display:grid;gap:12px}
.explain-question{display:flex;justify-content:flex-end;margin:0}
.explain-question span{max-width:78%;background:var(--m-fill);color:var(--m-on);padding:9px 14px;border-radius:18px 18px 4px 18px;font-weight:600;white-space:pre-wrap}
.explain-turn{display:grid;gap:10px}
.explain-banner{margin:0}
.explain-banner strong{display:block}
.explain-banner-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.explain-error{color:var(--danger)}
.explain-dock{position:sticky;bottom:0;z-index:2;display:grid;gap:8px;justify-items:center;margin:0 -16px;padding:8px 14px 14px;background:var(--bg);border-top:1px solid var(--line)}
.sheet .explain-dock{margin:0 -16px -24px;background:var(--surface)}
.explain-jump{position:absolute;top:-52px}
.explain-composer{display:flex;gap:8px;align-items:center;width:100%}
.explain-composer textarea{flex:1;min-width:0;min-height:46px;max-height:140px;resize:none;border-radius:23px;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 16px;font:600 16px/1.4 var(--f-body)}
.explain-composer textarea:focus{outline:none;border-color:var(--m-fill)}
/* ai-reply-stream-v3: glyphs revealed by the pace fade in once over 120 ms (opacity only), a term's reading the same way once
   the whole term is shown; then three layers under the answer fade in together (sentence-insight-stream-v2). Reduced
   motion: no fades. With kanji in the sentence the line height reserves the reading, so a reading appearing never reflows. */
@media(prefers-reduced-motion:no-preference){
  .explain-glyph-in,.explain-rt-in{animation:explain-glyph-in .12s linear both}
  .explain-layers{animation:explain-layers-in .2s linear both}
  @keyframes explain-glyph-in{from{opacity:0}to{opacity:1}}
  @keyframes explain-layers-in{from{opacity:0}to{opacity:1}}
}
.explain-answer.with-readings p,.explain-answer.with-readings li{line-height:2.25}
.explain-answer.with-readings .explain-lead p{line-height:2.1}
.explain-answer ruby{ruby-position:over}
.explain-answer rt{font:600 .55em/1 var(--f-ja);color:var(--muted);letter-spacing:0}
.explain-term[aria-disabled=true]{cursor:default}
/* 字典卡 (ai-reply-stream-v3): a floating card anchored to the word, 積木風 controls. */
.lookup-card{position:fixed;z-index:30;display:flex;flex-direction:column;gap:10px;overflow:hidden;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:22px;box-shadow:0 4px 0 var(--line),0 18px 40px rgba(20,20,40,.18);padding:12px 14px}
.lookup-title{flex:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:6px;font:800 13px var(--f-round);color:var(--muted);letter-spacing:.06em}
.lookup-title-actions{display:flex;gap:6px}
.lookup-body{display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0;flex:1 1 auto}
.lookup-body>*{flex:none}
.lookup-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lookup-head h3{margin:0;font:700 28px/1.15 var(--f-ja)}
.lookup-head h3:focus{outline:none}
.lookup-reading{margin:2px 0 0;color:var(--muted);font:600 15px var(--f-ja)}
.lookup-kind{margin:2px 0 0;color:var(--muted);font:700 12px var(--f-round)}
.lookup-context{background:var(--soft);border-radius:14px;padding:10px 12px}
.lookup-context p{margin:0;font:15px/1.6 var(--f-ja)}
.lookup-context b{color:var(--m-text)}
.lookup-card h4{margin:0 0 4px;font:700 12px var(--f-round);color:var(--muted);letter-spacing:.04em}
.lookup-section{min-height:44px}
.lookup-section p{margin:0}
.lookup-muted{color:var(--muted);font-size:14px;line-height:1.5}
.lookup-sense{display:flex;gap:8px;align-items:baseline}
.lookup-pos{flex:none;font:700 12px var(--f-body);color:var(--m-text);background:var(--m-tint);border-radius:8px;padding:1px 7px}
.lookup-meaning{font:600 16px/1.5 var(--f-body);white-space:pre-line}
.lookup-examples{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lookup-examples li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:start}
.lookup-examples li>p:first-child{font:15px/1.6 var(--f-ja)}
.lookup-examples li>.lookup-muted{grid-column:1/-1}
.lookup-pending{display:inline-flex;gap:5px;padding:8px 0}
.lookup-pending i{width:6px;height:6px;border-radius:3px;background:var(--m-text);opacity:.35}
.lookup-pending i:nth-child(2){opacity:.6}.lookup-pending i:nth-child(3){opacity:.85}
.lookup-notice{display:grid;gap:8px;justify-items:start;color:var(--muted);font-weight:600;margin:0}
.lookup-notice p{margin:0}
.lookup-foot{flex:none;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.lookup-source{font-size:12px;color:var(--muted);min-height:1em}
.lookup-actions{display:flex;flex-wrap:wrap;gap:6px}
.explain-layers{display:grid;gap:16px}
.explain-term-list{list-style:none;margin:0;padding:0;border:2px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden}
.explain-term-list li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 0;border-top:1px solid var(--line)}
.explain-term-list li:first-child{border-top:0}
.explain-term-list li.selected{background:var(--m-tint)}
.explain-term-row{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:14px;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:4px 0 4px 16px;cursor:pointer}
.explain-term-head{display:grid;min-width:96px}
.explain-term-head strong{font:700 17px/1.3 var(--f-ja)}
.explain-term-head span{font:600 12px var(--f-ja);color:var(--muted)}
.explain-term-meaning{font-weight:650;min-width:0}
.explain-ask{display:grid;gap:8px}
.explain-ask h3{margin:0;font:800 13px var(--f-round);color:var(--muted);letter-spacing:.04em}
.explain-ask-row{width:100%;justify-content:flex-start;text-align:left}
@media(max-width:420px){.explain-term-row{flex-direction:column;align-items:flex-start;gap:2px}}
/* language-without-direction-v1: the per-page 解說語言 controls (本頁：X chip, ⋯ menu) and an earlier-language result. */
.explanation-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:8px 0}
.explanation-bar .menu-button .menu{left:auto;right:0}
.explanation-bar .chunky.small>.ic+.ic{display:none}
.override-chip{margin:0}
.override-chip .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;border-color:var(--m-fill);background:var(--m-tint);color:var(--m-text)}
.notice.other-language .choice-actions{align-items:center;gap:8px}
.language-chips{margin:0 0 4px}
.language-chips .chip{min-height:44px}
.language-chips .chip-count{color:var(--muted);font-weight:700}
.language-chips .chip[aria-pressed=true] .chip-count{color:inherit}
/* sentence-insight-stream-v1 D5: 解說語言 (⋯, 本頁：X) in the row under the answer, after 重新回答. */
.explain-meta .explanation-bar{margin:0 0 0 auto}
.layer-heading{display:flex;align-items:center;gap:8px;margin-top:8px}
.layer-badge{font:700 12px/1.6 var(--f-body);border-radius:12px;padding:1px 10px;color:var(--muted);background:var(--line)}
.layer-badge.entry{color:var(--success);background:var(--success-bg)}
.my-learning{margin:0;padding:0}
.my-learning-row{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.my-learning-row:first-child{border-top:0}
.my-learning-row dt{font-size:13px;font-weight:700;color:var(--muted)}
.my-learning-row dd{margin:0;display:grid;gap:2px;min-width:0}
.lexeme-source{margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* word-detail-v2 Web: two columns once the detail area is wide (design: the word and 我的學習 left, the 詞條 right). */
.word-workspace-detail{container-type:inline-size}
.word-columns{display:flex;flex-direction:column;gap:16px}
@container (min-width:760px){.word-columns{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}}
.terms-line{font-size:15px;line-height:1.6;margin:8px 0 0}
.terms-links{display:inline-flex;flex-wrap:wrap;gap:4px 12px}
.terms-links .text-link{min-height:44px}
.terms-text{white-space:pre-wrap;line-height:1.7}
.terms-update{padding:16px}
.terms-card{max-width:560px;width:100%}
.terms-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.segmented{display:flex;gap:8px}
.segmented button{flex:1;min-height:48px;border-radius:16px;border:2px solid var(--line);background:var(--surface);font:750 16px/1.2 var(--f-body);color:var(--ink)}
.segmented button[aria-selected=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.sort-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sort-row select{min-height:44px}
.phrase-row{width:100%;text-align:left}
.phrase-kind{display:inline-block;margin-left:8px;font:700 12px/1.6 var(--f-body);color:var(--muted);border:1.5px solid var(--line-strong);border-radius:10px;padding:0 7px;vertical-align:middle}
.phrase-count{flex:none;font-weight:800;color:var(--m-text);background:var(--m-tint);border-radius:12px;padding:3px 10px}
.notice-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.word-meaning{white-space:pre-line}