/* ============================================================
   hibi landing — 行銷首頁（dark only）。
   自含設計 tokens + @font-face（值鏡射 app 設計系統
   docs/design-system/colors_and_type.css，audit 已核對一致）。
   字型相對路徑 fonts/ → /static/fonts/（沿用 app 既有字型檔）。
   ============================================================ */

/* ---------- Brand fonts（與 app static/fonts 同檔）---------- */
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ShipporiMincho-Regular.ttf') format('truetype')}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ShipporiMincho-Medium.ttf') format('truetype')}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/ShipporiMincho-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Noto Serif JP';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/NotoSerifJP-VF.ttf') format('truetype-variations')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/NotoSansJP-VF.ttf') format('truetype-variations')}
@font-face{font-family:'Noto Serif TC';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/NotoSerifTC-VF.ttf') format('truetype-variations')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/NotoSansTC-VF.ttf') format('truetype-variations')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/Newsreader-VF.ttf') format('truetype-variations')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('fonts/JetBrainsMono-VF.ttf') format('truetype-variations')}

/* ---------- Design tokens（dark；鏡射 app 設計系統）---------- */
:root,:root[data-theme="dark"]{
  --bg-base:#16130F;--bg-surface:#1F1B16;--bg-elevated:#2A241D;--bg-subtle:#1A1612;
  --text-primary:#F5F1EA;--text-secondary:#B8AFA1;--text-muted:#7A7268;
  --border-subtle:#2D2620;--border-default:#3E342B;
  --accent:#FF6B4A;--accent-hover:#FF856B;--accent-soft:rgba(255,107,74,0.12);--accent-ink:#FFFFFF;
  --status-correct:#4FB892;--status-correct-bg:rgba(79,184,146,0.10);
  --status-partial:#E5A24E;--status-partial-bg:rgba(229,162,78,0.10);
  --status-wrong:#C7553F;--status-wrong-bg:rgba(199,85,63,0.10);
  --shadow-card:0 1px 2px rgba(0,0,0,0.30),0 8px 24px rgba(0,0,0,0.20);
  --shadow-elevated:0 4px 24px rgba(0,0,0,0.32),0 16px 40px rgba(0,0,0,0.28);
  --shadow-glass:0 8px 32px rgba(0,0,0,0.32),inset 0 1px 0 rgba(255,255,255,0.04);
  --glass-bg:rgba(31,27,22,0.72);--glass-border:rgba(255,255,255,0.06);
  color-scheme:dark;
  --font-jp-serif:'Shippori Mincho','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  --font-jp-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --font-zh-serif:'Noto Serif TC','Source Han Serif TC','Songti TC',serif;
  --font-zh-sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --font-en-display:'Newsreader','GT Sectra',Georgia,serif;
  --font-en-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --ease-entry:cubic-bezier(0.2,0,0,1);--ease-out:cubic-bezier(0.16,1,0.3,1);
  --display-zh:'Shippori Mincho','Noto Serif TC',serif;
}
*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--accent-soft);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ============================================================
   PAGE（移植自 hibi-landing.css，圖路徑改 WebP）
   ============================================================ */
html{scroll-behavior:auto;background:var(--bg-base);height:100%}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:280ms}
/* C 根解：body 本身不捲（height:100% + overflow:hidden），可捲內容放進 #scroller。
   整頁 document 不捲 → iOS 網址列永不收合 → 頂端 fixed navbar 不被推到網址列後面。 */
body{margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-zh-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;height:100%;overflow:hidden;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
/* 唯一捲動容器：滿版、內部捲動。sticky 釘選段（.m-pin/.feat-pin/.c-pin）在此容器內 stick，
   運作更穩（sticky 本就為 scroll container 設計）。JS 一律讀寫 scroller.scrollTop（非 window.scrollY），
   IntersectionObserver 的 root 設為此容器。-webkit-overflow-scrolling:touch 給 iOS 慣性捲動。 */
#scroller{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}
body.page-exit{opacity:0;transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){body{transition:none}body.page-exit{opacity:1;transform:none}}
/* splash */
#splash{position:fixed;inset:0;z-index:100;background:#16130F;display:flex;align-items:center;justify-content:center;transition:opacity 480ms ease}
#splash.out{opacity:0;pointer-events:none}
/* 無進場：mark 直接以呼吸動畫呈現（t=0 起，一次循環 2.8s）。JS floor 對齊 2800ms 演完整一輪。 */
.sp-mk{width:96px;height:96px;animation:sp-breathe 2.8s ease-in-out infinite}
.sp-mk circle,.sp-mk line{fill:none;stroke:var(--accent);stroke-width:3.5}
.sp-mk .sp-dot{fill:var(--accent);stroke:none}
@keyframes sp-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.97)}}
html.splashing #hero .slide,html.splashing #hero .ht{transition:none}
@media (prefers-reduced-motion:reduce){.sp-mk{animation:none}}
a{color:var(--text-secondary);text-decoration:none}
a:hover{color:var(--accent)}
button{font-family:var(--font-zh-sans)}
/* glow layer */
/* #glow 在 #scroller 內第一個子元素：改 position:sticky 釘在容器頂端當背景（不能用 fixed
   —— fixed 會脫離容器、且與釘選段構成 fixed+sticky 共存）。margin-bottom:-100svh 抵銷它在
   flow 佔的 100svh，讓 hero 從容器頂 0 起、glow 疊在後面（z-index:0，內容 z-index:1 在其上）。 */
#glow{position:sticky;top:0;left:0;width:100%;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:hidden}
#glow .orb{position:absolute;left:0;top:0;width:110vmax;height:110vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,107,74,.15),rgba(255,107,74,.06) 44%,rgba(255,107,74,0) 72%);opacity:0;will-change:transform,opacity}
#glow::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");background-size:180px 180px;opacity:.05;mix-blend-mode:overlay}
#mission,#features,#closing,#colophon{position:relative;z-index:1}
.mk{display:block}
.mk circle,.mk line{fill:none;stroke:var(--accent);stroke-width:3.5}
.mk .mk-dot{fill:var(--accent);stroke:none}
.jp-in{font-family:var(--font-jp-serif)}
/* navbar */
/* navbar：position:fixed 相對視窗頂端固定。它在 #scroller 外（body 直屬），兄弟層級沒有任何
   sticky（釘選段都在 #scroller 內）→ 不觸發 iOS fixed+sticky 共存 bug；且整頁不捲、網址列不收合
   → navbar 穩定貼頂。禁止把 sticky 釘選段搬到 navbar 同層、禁止加 will-change。 */
#sitebar{position:fixed;top:0;left:0;right:0;height:64px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(22,19,15,.72);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--glass-border);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
#sitebar.on{opacity:1;transform:none;pointer-events:auto}
.sb-brand{display:flex;align-items:center;gap:12px;line-height:1}
.sb-mk{width:28px;height:28px;flex-shrink:0}
.sb-mk circle,.sb-mk line{fill:none;stroke:var(--accent);stroke-width:3.5}
.sb-mk .sb-dot{fill:var(--accent);stroke:none}
.sb-lockup{display:flex;align-items:baseline;gap:8px;font-family:'Shippori Mincho','Noto Serif JP',serif;line-height:1}
.sb-zh{font-size:22px;font-weight:500;letter-spacing:-0.01em;color:var(--text-primary)}
.sb-en{font-family:var(--font-en-display);font-size:16px;font-weight:400;font-style:italic;letter-spacing:.02em;color:var(--text-secondary)}
.sb-brand:hover .sb-zh{color:var(--text-primary)}
.sb-signup{font-family:var(--font-zh-sans);font-size:13.5px;letter-spacing:.04em;color:var(--text-secondary);padding:9px 16px;border:1px solid var(--border-default);border-radius:6px;line-height:1;transition:color 120ms ease-out,border-color 120ms ease-out}
.sb-signup:hover{color:var(--text-primary);border-color:var(--text-muted);background:none}
/* hero */
/* height：svh = 工具列展開時的可視高度。iOS Safari 的 100vh 是「工具列收合」的大視窗，
   首次載入工具列展開時 hero 底部會延伸到工具列後面、遮住底部文案。svh 讓 hero 永遠塞進
   一定看得到的區域；100vh 那行留作舊瀏覽器 fallback（svh 為 iOS 15.4+）。 */
#hero{position:relative;z-index:2;height:100vh;height:100svh;overflow:hidden;background:var(--bg-base)}
.slides,.slide{position:absolute;inset:0}
/* slides 改用 <img> 元素（非 background-image）→ 可用 img.decode() 在 splash 期間預解碼，
   播放時只淡入 + GPU 縮放，零解碼卡頓。overflow:hidden 裁掉 s1 的 scale 溢出。 */
.slide{margin:0;opacity:0;transition:opacity 1s ease;overflow:hidden}
.s-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.active{opacity:1}
.slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(22,19,15,.90) 0%,rgba(22,19,15,.46) 42%,rgba(22,19,15,.34) 100%)}
/* s1 特調：原 background-size:140%/position:0% 66%（小船落字標右側對望）→ 以 cover+scale 重現 */
/* hero grading（UPDATE-image-grading.md 唯一真相，覆蓋舊「統一濾鏡」）：s2/s4/s5 原圖直出。
   ⚠️ s1/s3 的 filter 是暫代方案——CSS 模擬目標色系/壓亮部，非終態。正式修圖後應把 s1/s3 filter
   都移除，做到零 CSS 後製（見該 md 決策 #3 + 實作注意 #38）。 */
.s1 .s-img{object-position:0% 66%;transform:scale(1.4);transform-origin:0% 66%;filter:saturate(1.45) hue-rotate(-8deg) brightness(1.04)}
.s3 .s-img{filter:brightness(.85)}
.hero-text{position:absolute;left:clamp(24px,7vw,110px);right:clamp(24px,7vw,110px);bottom:15vh;z-index:2}
.ht{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(8px);transition:opacity 1s ease,transform 1s ease;pointer-events:none}
.ht.active{opacity:1;transform:none}
.masthead{font-family:var(--display-zh);font-weight:500;font-size:clamp(64px,10.5vw,148px);line-height:1;letter-spacing:-.02em;color:#F5F1EA;margin:0;white-space:nowrap}
.mh-en{font-size:.4em;letter-spacing:0;font-weight:500}
.cat{font-family:var(--display-zh);font-weight:500;font-size:clamp(25px,3.6vw,48px);line-height:1.2;letter-spacing:.1em;color:#F5F1EA;margin:0;white-space:nowrap}
.ht-slog .mk{width:clamp(52px,5.4vw,76px);margin-bottom:26px}
.ht-slog .mk circle,.ht-slog .mk line{stroke:#F5F1EA}
.ht-slog .mk .mk-dot{fill:#F5F1EA}
.slog{font-family:var(--display-zh);font-weight:500;font-size:clamp(38px,4.8vw,62px);line-height:1.2;letter-spacing:.1em;color:#F5F1EA;margin:0;white-space:nowrap}
/* scroll hint */
.scroll-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;appearance:none;background:none;border:none;padding:10px;margin:-10px;cursor:pointer;opacity:0;transition:opacity 1s ease;pointer-events:none}
.scroll-hint.show{opacity:1;pointer-events:auto}
.scroll-hint.gone{opacity:0;pointer-events:none}
.sh-chev{display:block;width:18px;height:10px;fill:none;stroke:#F5F1EA;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;animation:sh-sink 3s cubic-bezier(.45,0,.3,1) infinite}
@keyframes sh-sink{0%{transform:translateY(-4px);opacity:0}18%{opacity:.75}55%{transform:translateY(4px);opacity:.75}80%,100%{transform:translateY(6px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sh-chev{animation:none;opacity:.75}}
@media (max-width:720px){.scroll-hint{bottom:20px}}
/* hero rail */
.rail{position:absolute;right:clamp(16px,3vw,44px);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px}
.rd{appearance:none;background:none;border:none;padding:6px;margin:-6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd::before{content:'';display:block;width:6px;height:6px;border-radius:3px;background:rgba(245,241,234,.45);transition:background 200ms ease}
.rd:hover::before{background:rgba(245,241,234,.8)}
.rd .rf{display:none}
.rd.on{padding:6px 6px}
.rd.on::before{display:none}
.rd.on .rf{display:block;width:2px;height:30px;border-radius:1px;background:rgba(245,241,234,.28);position:relative;overflow:hidden}
.rd.on .rf::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:#F5F1EA;transform:scaleY(var(--p,0));transform-origin:top}
@media (max-width:720px){.rail{top:auto;bottom:24px;transform:none;right:20px;gap:10px}.rd.on .rf{height:22px}}
/* mission */
#mission{position:relative;height:260vh}
.m-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.m-circle{position:absolute;right:-14vw;top:50%;width:60vw;max-width:900px;aspect-ratio:1;transform:translateY(-50%) scale(.5);opacity:0;z-index:1;will-change:transform}
.m-circle circle{fill:none;stroke:var(--accent);stroke-width:.7;opacity:.85}
.m-circle .m-dot{fill:var(--accent);stroke:none;opacity:1}
.m-wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 clamp(24px,6vw,64px);width:100%;padding-right:clamp(150px,22vw,340px)}
.m-lead-v{position:absolute;right:clamp(32px,9vw,140px);top:50%;writing-mode:vertical-rl;font-family:var(--display-zh);font-weight:500;font-size:clamp(26px,3vw,44px);line-height:2.05;letter-spacing:.2em;color:var(--text-primary);margin:0;z-index:3;opacity:0;transform:translateY(calc(-50% + var(--ply,3vh)));transition:opacity 1.1s var(--ease-out);white-space:nowrap}
.m-lead-v.on{opacity:1}
.m-line{font-family:var(--font-zh-serif);font-size:clamp(17px,1.7vw,24px);line-height:2;color:var(--text-primary);margin:0;opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);text-wrap:pretty;max-width:820px}
.m-line.on{opacity:1;transform:none}
.m-gap{height:clamp(20px,3.4vh,36px)}
.m-line ruby{ruby-align:center}
.m-line rt{font-family:var(--font-en-display);font-style:italic;font-size:.48em;letter-spacing:.06em;color:var(--text-muted);transform:translateY(-2px)}
.m-strong{font-weight:600}
/* features */
.feat-track{position:relative}
.feat-track[data-steps="4"]{height:340vh}
.feat-track[data-steps="3"]{height:270vh}
.feat-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.feat-card{width:min(1200px,calc(100% - clamp(48px,8vw,96px)));margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.fnum{display:block;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.feat-copy h2{font-family:var(--display-zh);font-size:clamp(28px,2.9vw,40px);font-weight:500;line-height:1.3;margin:10px 0 22px;color:var(--text-primary)}
.flead{font-family:var(--font-zh-serif);font-size:clamp(17px,1.35vw,19px);line-height:1.9;color:var(--text-primary);margin:0 0 14px;text-wrap:pretty}
.feat-copy p{font-family:var(--font-zh-sans);font-size:15px;line-height:1.95;color:var(--text-secondary);margin:0 0 12px;text-wrap:pretty}
.f-tools{margin:6px 0 12px;display:flex;flex-direction:column;gap:10px}
.f-tools p{margin:0;display:flex;gap:12px;align-items:baseline}
.f-tools strong{font-family:var(--font-zh-sans);font-weight:600;font-size:15px;color:var(--text-primary);flex:0 0 auto;min-width:64px}
.f-tools span{font-size:15px;color:var(--text-secondary)}
.demo-stage{position:relative;height:480px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:var(--shadow-card)}
.dstep{position:absolute;inset:0;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out);pointer-events:none}
.dstep.on{opacity:1;transform:none}
.step-rail{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.srail{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--text-muted);cursor:pointer;transition:color 120ms,border-color 120ms}
.srail .sr-no{font-family:var(--font-en-display);font-size:11px;letter-spacing:.08em;color:var(--text-muted);transition:color 120ms}
.srail.on{color:var(--text-primary);border-color:var(--border-subtle)}
.srail.on .sr-no{color:var(--accent)}
/* demo 1 — article */
.d-urlrow{display:flex;align-items:center;gap:12px}
.d-lab{font-family:var(--font-zh-sans);font-size:12.5px;color:var(--text-muted);flex:0 0 auto;letter-spacing:.02em}
.d-input{flex:1;display:flex;align-items:center;gap:10px;background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:12px;padding:0 14px;height:40px;min-width:0}
.d-input svg{width:15px;height:15px;fill:none;stroke:var(--text-muted);stroke-width:1.6;stroke-linecap:round;flex:0 0 auto}
.d-url{font-family:var(--font-en-mono);font-size:12.5px;color:var(--text-primary);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-url.dim{color:var(--text-muted)}
.d-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-zh-sans);font-size:14px;height:40px;padding:0 20px;border-radius:12px;line-height:1}
.d-btn.dim{opacity:.65}
.d-btn .spin{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.d-hint{font-family:var(--font-zh-sans);font-size:12.5px;color:var(--text-muted);margin:16px 2px 0}
.d-gen{margin-top:44px;text-align:center}
.gen-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.86)}}
.d-gen p{font-family:var(--font-zh-sans);font-size:13.5px;color:var(--text-secondary);margin:14px 0 26px}
.sk{height:12px;border-radius:6px;background:var(--bg-subtle);margin:0 auto 10px;width:86%}
.sk.w70{width:70%}
.sk.w50{width:50%}
.d-title{font-family:var(--font-jp-serif);font-size:17px;font-weight:600;line-height:1.4;color:var(--text-primary);margin:0 0 18px;letter-spacing:.005em}
.hash{color:var(--accent);margin-right:8px}
.d-sec{display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.d-secno{font-family:var(--font-en-display);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.d-sectitle{font-family:var(--font-zh-serif);font-size:14.5px;font-weight:500;color:var(--text-primary)}
.d-rule{flex:1;height:1px;background:var(--border-subtle)}
.voc-row{display:grid;grid-template-columns:96px 150px 1fr;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border-subtle)}
.v-jp{font-family:var(--font-jp-serif);font-size:15px;color:var(--text-primary)}
.v-kana{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--text-secondary);letter-spacing:.04em}
.v-zh{font-family:var(--font-zh-sans);font-size:13px;color:var(--text-secondary)}
.d-body{font-family:var(--font-zh-sans);font-size:13.5px;line-height:1.8;color:var(--text-secondary);margin:0}
.d-player{display:flex;align-items:center;gap:14px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:14px;padding:13px 16px;margin-top:22px}
.pl-btn{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(255,107,74,.28);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.pl-btn svg{width:16px;height:16px;fill:currentColor;stroke:none;margin-left:2px}
.pl-track{flex:1;position:relative;height:4px;border-radius:999px;background:var(--border-default)}
.pl-fill{position:absolute;inset:0 auto 0 0;width:41%;background:var(--accent);border-radius:999px}
.pl-thumb{position:absolute;top:50%;left:41%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg-subtle)}
.pl-time{font-family:var(--font-en-mono);font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;flex:0 0 auto}
.pl-speed{font-family:var(--font-en-mono);font-size:12px;color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:8px;padding:4px 8px;flex:0 0 auto;line-height:1}
/* demo 2 — practice card */
.p-card{position:relative;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;padding:22px 24px 20px;box-shadow:var(--shadow-card)}
.p-card.graded{background:var(--status-partial-bg)}
.p-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--status-partial);border-radius:16px 0 0 16px}
.p-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.p-num{font-family:var(--font-en-display);font-size:28px;font-weight:400;line-height:1;color:var(--text-primary);letter-spacing:-.01em;min-width:32px;font-feature-settings:"lnum" 1,"tnum" 1}
.p-div{width:1px;height:18px;background:var(--border-subtle)}
.p-meta{font-family:var(--font-zh-sans);font-size:12px;letter-spacing:.04em;color:var(--text-muted);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.p-dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:.5}
.p-lv{font-family:var(--font-en-display);letter-spacing:.08em}
.p-ghost{margin-left:auto;font-family:var(--font-zh-sans);font-size:13px;color:var(--text-secondary);padding:0 14px;height:32px;display:inline-flex;align-items:center;border-radius:12px}
.p-state{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-zh-sans);font-size:12px;letter-spacing:.04em;font-weight:500;color:var(--status-partial)}
.p-state svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-prompt{font-family:var(--font-zh-serif);font-size:18px;line-height:1.6;color:var(--text-primary);margin:0 0 16px;letter-spacing:.005em;text-wrap:pretty}
.p-row{display:flex;gap:10px;align-items:stretch}
.p-input{flex:1;display:flex;align-items:center;background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:12px;padding:0 14px;min-height:44px;min-width:0}
.p-ph{font-family:var(--font-zh-sans);font-size:14px;color:var(--text-muted)}
.p-ans{font-family:var(--font-jp-sans);font-size:14.5px;color:var(--text-primary);letter-spacing:.02em}
.p-grade{flex:0 0 auto;display:inline-flex;align-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--font-zh-sans);font-size:14px;padding:0 20px;border-radius:12px;line-height:1}
.p-anslocked{font-family:var(--font-jp-sans);font-size:14.5px;color:var(--text-secondary);margin:0 0 14px;padding:11px 14px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:12px}
.p-fb p{font-family:var(--font-zh-sans);font-size:13.5px;line-height:1.85;color:var(--text-primary);margin:0;text-wrap:pretty}
.p-ref{border-top:1px solid var(--border-subtle);padding-top:14px;margin-top:2px}
.p-reflab{font-family:var(--font-zh-sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--text-muted)}
.p-refjp{font-family:var(--font-jp-serif);font-size:17px;line-height:1.7;color:var(--text-primary);margin:8px 0 4px}
.p-refkana{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--text-secondary);letter-spacing:.04em;margin:0}
/* demo 3 — selection tooltip */
.t-prose{font-family:var(--font-jp-serif);font-size:17px;line-height:2.1;color:var(--text-primary);margin:0;letter-spacing:.01em}
.t-prose.dimmed{color:var(--text-secondary)}
.t-sel{background:var(--accent-soft);color:var(--text-primary);padding:1px 2px;border-radius:3px}
.t-anchor{position:relative}
.t-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);display:inline-flex;align-items:stretch;padding:4px;border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);white-space:nowrap;z-index:5}
.tb{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;font-family:var(--font-zh-sans);font-size:12.5px;line-height:1;color:var(--text-primary)}
.tb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tb.primary{color:var(--accent);font-weight:500}
.tb.active{background:var(--accent-soft);color:var(--accent);font-weight:500}
.tdiv{width:1px;background:var(--glass-border);margin:4px 0;opacity:.7}
.tdiv.strong{margin:4px 6px;opacity:.9}
.t-caret{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--glass-bg);border-right:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
.t-card{margin-top:24px;border-radius:14px;padding:16px 18px;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);max-width:420px}
.t-cardhead{display:flex;align-items:center;gap:8px;font-family:var(--font-zh-sans);font-size:13px;font-weight:500;color:var(--accent);margin-bottom:10px}
.t-cardhead svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.t-word{font-family:var(--font-jp-serif);color:var(--text-primary);font-weight:500}
.t-tipbody{font-family:var(--font-zh-sans);font-size:13.5px;line-height:1.85;color:var(--text-primary);margin:0;text-wrap:pretty}
/* closing */
/* closing 做成 pin（比照 mission/features）：section 加高供停留捲動，內容 sticky 釘住。
   c-top(mark)／c-head／c-bot(內文+CTA) 用 flex:1 上下等分 → 標題落在視線正中心。 */
#closing{height:150vh;box-sizing:border-box}
/* 內容整塊（圖騰+標題+文案+按鈕）垂直置中：justify-content:center + c-top/c-bot 自然高度
   （不再 flex:1 1 0 撐開上下半，那會把圖騰貼到上半底部、頂部留一大塊空白、內容整體偏下）。
   內部間距不變（c-mk margin-bottom + c-head margin 各自照舊）。dwell 捲動不受影響。 */
.c-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(56px,8vh,96px) 24px;box-sizing:border-box;text-align:center}
.c-top{min-height:0;display:flex;align-items:flex-end}
.c-bot{min-height:0;display:flex;flex-direction:column;align-items:center}
.c-mk{width:clamp(72px,7vw,96px);margin:0 auto;opacity:0;transform:scale(1.05);transition:opacity 1.2s cubic-bezier(.25,.1,.25,1),transform 1.2s cubic-bezier(.25,.1,.25,1)}
#closing.seal-on .c-mk{opacity:1;transform:none}
.c-head,.c-copy{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
#closing.seal-on .c-head{opacity:1;transform:none;transition-delay:.15s}
#closing.seal-on .c-copy{opacity:1;transform:none;transition-delay:.3s}
#closing:not(.seal-on) .cta{opacity:0}
.c-head{font-family:var(--display-zh);font-weight:500;font-size:clamp(26px,2.7vw,38px);line-height:1.6;letter-spacing:.04em;color:var(--text-primary);margin:clamp(28px,4vh,40px) 0}
.c-copy{max-width:600px;margin:0 auto;flex-shrink:0}
.c-copy p{font-family:var(--font-zh-serif);font-size:clamp(14.5px,1.15vw,16.5px);line-height:2.1;color:var(--text-secondary);margin:0 0 28px;text-wrap:pretty}
.c-copy strong{font-weight:600;color:var(--text-primary)}
.cta{display:inline-flex;align-items:center;gap:10px;height:52px;flex-shrink:0;padding:0 34px;margin-top:20px;background:var(--accent);color:var(--accent-ink);border-radius:12px;font-family:var(--font-zh-sans);font-size:15px;font-weight:500;transition:opacity .8s var(--ease-out) .24s,transform 120ms ease-out,background 120ms ease-out}
.cta:hover{transform:translateY(-1px);background:var(--accent-hover);color:var(--accent-ink)}
/* colophon */
#colophon{border-top:1px solid var(--border-subtle);padding:64px 24px 56px;text-align:center}
.plexi{height:34px;width:auto;opacity:.8;display:block;margin:0 auto 14px}
.colo-by{font-family:var(--font-en-display);font-size:12px;letter-spacing:.08em;color:var(--text-secondary);margin:0 0 10px}
.colo-line{font-family:var(--font-zh-sans);font-size:12.5px;line-height:1.9;color:var(--text-muted);margin:0 0 18px}
.colo-links{margin:0;font-family:var(--font-zh-sans);font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:14px}
.colo-links a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.colo-links a:hover{color:var(--text-secondary)}
.colo-sep{width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:.5}
/* tooltip constrained at narrow widths */
@media (max-width:1160px){
  .t-anchor{position:static}
  .dstep{position:absolute}
  .t-tip{left:auto;right:0;top:8px;bottom:auto;transform:none;position:absolute}
  .t-caret{display:none}
  .dstep:has(.t-tip) .t-prose{margin-top:52px}
}
/* mobile fallback */
@media (max-width:860px){
  .hero-text{bottom:12vh}
  #mission{height:200vh}
  .m-circle{right:-42vw;width:120vw}
  .m-pin{height:100svh;flex-direction:column;justify-content:center;align-items:stretch}
  .m-lead-v{position:static;writing-mode:horizontal-tb;transform:none;font-size:clamp(24px,6.4vw,30px);line-height:1.6;letter-spacing:.02em;padding:0 24px;margin:0 0 20px;white-space:normal}
  .m-wrap{padding-right:24px}
  /* features 手機版：改 sticky 釘選、卡片一屏（100svh），內容一字不減 —— 見
     Downloads/design_handoff_hibi_landing/UPDATE-features-mobile.md（唯一真相）。 */
  .feat-track[data-steps="4"]{height:300vh}
  .feat-track[data-steps="3"]{height:240vh}
  .feat-pin{position:sticky;top:0;height:100svh;align-items:stretch;padding:0}
  .feat-card{box-sizing:border-box;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:clamp(14px,2.6vh,24px);align-items:stretch;align-content:center;height:100%;padding:calc(64px + clamp(26px,4.5vh,44px)) 0 clamp(18px,3vh,28px)}
  .feat-copy h2{font-size:clamp(26px,7vw,32px);margin:9px 0 14px}
  .flead{font-size:16.5px;line-height:1.75;margin:0 0 10px}
  .feat-copy p{font-size:14.5px;line-height:1.8;margin:0 0 8px}
  .f-tools{gap:8px;margin:4px 0 8px}
  .feat-demo{min-height:0;display:flex;flex-direction:column;justify-content:center}
  .demo-stage{display:grid;height:auto;flex:0 1 auto;min-height:0;max-height:100%;overflow:hidden}
  .dstep{position:static;grid-area:1/1;padding:16px;overflow:auto}
  .step-rail{margin-top:12px;flex-shrink:0;flex-wrap:wrap;row-gap:8px}
  .srail{flex:0 0 auto;padding:5px 9px;font-size:12px}
  .d-urlrow{flex-wrap:wrap}
  .d-lab{display:none}
  .voc-row{grid-template-columns:80px 110px 1fr;gap:8px}
  .t-prose{font-size:15px}
  .t-tip{right:auto;left:0;max-width:100%;overflow-x:auto}
  .tb{padding:7px 9px;font-size:12px}
  .tdiv.strong{margin:4px 3px}
  .step-rail .srail{border-color:var(--border-subtle)}
  /* demo 內部：緊湊間距與字級（內容全留，只壓節奏）*/
  .d-title{font-size:15.5px;margin-bottom:8px}
  .d-sec{margin:7px 0 5px;gap:8px}
  .d-sectitle{font-size:13px}
  .voc-row{padding:3px 0}
  .v-jp{font-size:13.5px}
  .v-kana,.v-zh{font-size:12px}
  .d-body{font-size:12.5px;line-height:1.72}
  .d-hint{margin-top:10px}
  .d-gen{margin-top:20px}
  .d-gen p{margin:10px 0 16px}
  .sk{height:10px;margin-bottom:8px}
  .d-player{margin-top:12px;padding:9px 12px;gap:10px}
  .pl-btn{width:32px;height:32px}
  .p-card{padding:15px 16px 14px}
  .p-head{margin-bottom:11px;gap:10px}
  .p-num{font-size:24px}
  .p-prompt{font-size:16px;line-height:1.55;margin-bottom:12px}
  .p-anslocked{font-size:13.5px;padding:9px 12px;margin-bottom:10px}
  .p-fb p{font-size:12.5px;line-height:1.75}
  .p-ref{padding-top:10px}
  .p-refjp{font-size:15px;margin:6px 0 3px}
  .t-card{margin-top:14px;padding:12px 14px}
  .t-cardhead{margin-bottom:7px;font-size:12.5px}
  .t-tipbody{font-size:12.5px;line-height:1.75}
  /* 反白工具列：手機仍錨定在反白文字上方（JS placeTip 定位），不飄到卡片右上 */
  .t-anchor{position:static}
  .t-tip{position:absolute;left:0;top:0;right:auto;bottom:auto;transform:none;width:max-content;flex-wrap:wrap;max-width:calc(100% - 28px)}
  .dstep:has(.t-tip){position:relative}
  .dstep:has(.t-tip) .t-prose{margin-top:58px}
  /* closing 手機版：sticky-pin dwell —— 卡在圖一（標題+CTA），再下滑才看到 footer。
     沿用桌機 #closing:150vh 的 dwell 捲動範圍 + .c-pin sticky/top:0/flex/padding +
     .c-top/.c-bot flex:1 1 0 分佈；只把 pin 高度 100vh→100svh 避 iOS 網址列。
     實測 360×640 收尾內容自然高 ~490px < svh → sticky 100svh 容得下、不溢出。 */
  .c-pin{height:100svh}
  .c-mk{margin-bottom:8px}
}
/* 短視窗（iPhone SE / 360×640 等）：再壓一階，內容仍全留 */
@media (max-width:860px) and (max-height:700px),(max-width:380px){
  /* 74→84px：navbar 64px + ~20px 舒適間距（規格值 74 配 64px navbar 只有 10px；刻意加大）。 */
  .feat-card{padding:84px 0 12px;gap:10px}
  .feat-copy h2{font-size:clamp(23px,6.4vw,28px);margin:7px 0 10px}
  .flead{font-size:15.5px;line-height:1.7;margin-bottom:8px}
  .feat-copy p{font-size:13.5px;line-height:1.72;margin-bottom:6px}
  .dstep{padding:13px;overflow:auto;-webkit-overflow-scrolling:touch}
  .d-title{font-size:13.5px;margin-bottom:5px}
  .d-sec{margin:4px 0 2px}
  .d-sectitle{font-size:12px}
  .voc-row{padding:1px 0}
  .v-jp{font-size:12.5px}
  .v-kana,.v-zh{font-size:11px}
  .d-body{font-size:12px;line-height:1.6}
  .d-player{margin-top:10px;padding:8px 11px}
  .p-card{padding:13px 14px 12px}
  .p-prompt{font-size:15px;margin-bottom:10px}
  .p-anslocked{font-size:13px;padding:8px 11px;margin-bottom:8px}
  .p-fb p{font-size:12px;line-height:1.7}
  .p-refjp{font-size:14px}
  .t-prose{font-size:14px;line-height:1.8}
  .t-card{margin-top:12px;padding:11px 13px}
  .t-tipbody{font-size:12px;line-height:1.7}
}
/* hero 文字手機版：3 文案 + slogan 在第一個標點（，/、）拆成兩個 span，手機 display:block
   → 乾淨兩行；字級隨 vw 動態縮放，讓最長半行在各機型都單行不折 → 保證最多兩行。
   masthead（logo）不動；桌機 span 為 inline，維持單行原樣。 */
@media (max-width:640px){
  .cat span,.slog span{display:block}
  .cat{font-size:clamp(16px,5.6vw,25px)}
  .slog{font-size:clamp(30px,9.5vw,38px)}
}
@media (prefers-reduced-motion:reduce){
  .slide,.ht,.m-line,.dstep{transition:none}
  .gen-dot,.d-btn .spin{animation:none}
  .c-mk,.c-head,.c-copy,#closing:not(.seal-on) .cta{opacity:1;transform:none;transition:none}
}