/* ============================================================
   codudo 墨系統 INK SYSTEM  v2.0
   所有 codudo 的網站、落地頁、後台都引用這一支，不要另外寫顏色。

   三條鐵律
     1. 顏色只有下面宣告的這幾階，不准臨時寫一個 rgba()
     2. 圓角只有 0 或 999px，沒有中間值
     3. 切版用 1px 半透明白線，不用灰色色塊
   第四條（v2 新增）
     4. 畫面不得宣稱還沒發生的事。「已完成」只能由後端事件回寫。
   ============================================================ */

:root{
  /* ---- 顏色：全部在這裡，別處不准再生一個 ---- */
  --ink-0:#070707;            /* 底色 */
  --ink-1:#0d0d0d;            /* 卡片／浮起的面 */
  --ink-2:#141414;            /* 輸入框內部 */
  --paper:#ffffff;            /* 主要文字 */
  --paper-60:#8e8e8e;         /* 次要文字 */
  --paper-35:#5a5a5a;         /* 標籤、註解、數字 */

  /* 白線階：只有這四階 */
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.05);
  --line-22:rgba(255,255,255,.22);   /* hover 的框 */
  --line-30:rgba(255,255,255,.30);   /* 聚焦的框 */
  --hover:rgba(255,255,255,.03);
  --press:rgba(255,255,255,.07);
  --nav-glass:rgba(7,7,7,.8);        /* 導覽列捲動後的毛玻璃底。原本寫死在規則裡，違反鐵律 1 */

  /* 陰影階：只有這兩階 */
  --shade:0 24px 60px rgba(0,0,0,.55);
  --shade-up:0 30px 90px rgba(0,0,0,.78);

  /* ---- 字體 ---- */
  --f-serif:"Noto Serif TC",serif;
  --f-sans:-apple-system,"Segoe UI",system-ui,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- 字級階梯：只有這 9 階，不准寫死 px ----
     內文下限 16px。13px 只能給等寬小標籤用，不能拿去寫說明文字。 */
  --t-tag:11px;      /* 等寬小標籤，全大寫寬字距 */
  --t-note:13px;     /* 等寬數字、圖說 */
  --t-small:15px;    /* 附註 */
  --t-body:16px;     /* 內文下限 */
  --t-lead:19px;     /* 引導文字、輸入框標題 */
  --t-h3:21px;
  --t-step:26px;     /* 對照表右欄的三步 */
  --t-glyph:60px;    /* 大墨字 */
  --t-h2:clamp(32px,4.6vw,54px);
  --t-q:clamp(var(--t-step),5.2vh,var(--t-h2));   /* 引導流程的題目：跟著螢幕高度縮，筆電上一屏放得下 */
  --t-h1:clamp(46px,7.5vw,92px);
  /* 直書標題是四個字疊起來的，字級 ×4 就是它的高度。
     設 124px 會讓標題獨佔 496px，把輸入框擠出畫面 —— 量過才調成這個值。 */
  --t-hero:clamp(40px,5.6vw,78px);
  /* 三步的巨大墨字（說／看／成）。直向版用 -s；矮螢幕兩檔留在 steps.css 蓋過去 */
  --t-mega:clamp(var(--t-h1),26vw,420px);
  --t-mega-s:clamp(var(--t-h1),40vw,220px);

  /* ---- 間距階梯 ---- */
  --s1:8px; --s2:16px; --s3:26px; --s4:42px; --s5:68px; --s6:110px; --s7:170px;

  /* ---- 動效：全站只有這一條曲線 ---- */
  --ease:cubic-bezier(.16,.84,.26,1);
  --dur:1.05s;

  /* ---- 圓角：只有 0 跟 999px ---- */
  --r:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--ink-0);color:var(--paper);font-family:var(--f-serif);
     line-height:1.85;overflow-x:hidden}
::selection{background:var(--paper);color:var(--ink-0)}
:focus-visible{outline:1px solid var(--line-30);outline-offset:4px}

/* ============ 版面骨架 ============ */
.ink-wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.ink-section{padding:var(--s7) 0;border-top:1px solid var(--line-soft);position:relative}

/* ============ 區塊小標籤 ============ */
.ink-tag{font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.42em;text-transform:uppercase;
  color:var(--paper-35);display:flex;align-items:center;gap:14px;margin-bottom:var(--s4)}
.ink-tag::after{content:"";flex:1;height:1px;background:var(--line);max-width:90px}

/* ============ 兩段式灰階大標（本系統的招牌） ============ */
.ink-h2{font-family:var(--f-serif);font-size:var(--t-h2);font-weight:700;line-height:1.42;
  letter-spacing:-.01em;color:var(--paper-60);max-width:900px}
.ink-h2 b{font-weight:900;color:var(--paper)}
.ink-lead{font-family:var(--f-sans);font-size:var(--t-lead);font-weight:300;color:var(--paper-60);
  max-width:620px;margin-top:var(--s3)}

/* ============ 編號清單 ============ */
.ink-rows{margin-top:var(--s5);border-top:1px solid var(--line)}
.ink-row{display:grid;grid-template-columns:72px 1fr 190px;gap:var(--s3);align-items:baseline;
  padding:30px 4px;border-bottom:1px solid var(--line);transition:.35s var(--ease)}
.ink-row:hover{padding-left:16px;background:var(--hover)}
.ink-row .n{font-family:var(--f-mono);font-size:var(--t-note);color:var(--paper-35);letter-spacing:.2em}
.ink-row h3{font-size:var(--t-h3);font-weight:700;color:var(--paper)}
.ink-row p{font-family:var(--f-sans);font-size:var(--t-body);font-weight:300;color:var(--paper-60);margin-top:6px}
.ink-row .end{font-family:var(--f-mono);font-size:var(--t-note);color:var(--paper-35);
  text-align:right;letter-spacing:.05em}

/* ============ 格狀卡 ============ */
.ink-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s5);border-top:1px solid var(--line)}
.ink-grid > *{padding:36px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:.3s var(--ease)}
.ink-grid > *:nth-child(3n){border-right:0}
/* 每一排的第一格都要貼齊左邊，不是只有第一格（第二排「智慧助手」縮進 30px，量過） */
.ink-grid > *:nth-child(3n+1){padding-left:0}
.ink-grid > *:hover{background:var(--hover)}
.ink-grid b{display:block;font-size:var(--t-lead);font-weight:700;margin-bottom:6px}
.ink-grid span{font-family:var(--f-sans);font-size:var(--t-body);font-weight:300;color:var(--paper-60)}

/* ============ 大墨字 ============ */
.ink-glyph{font-family:var(--f-serif);font-size:var(--t-glyph);font-weight:900;line-height:1;margin-bottom:var(--s3);
  background:linear-gradient(180deg,var(--paper) 10%,var(--paper-35) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ 引言 ============ */
.ink-quote{font-family:var(--f-serif);font-size:clamp(20px,2.4vw,27px);font-weight:300;line-height:1.75;
  color:var(--paper-60);max-width:760px;margin-top:var(--s6)}
.ink-quote b{font-weight:700;color:var(--paper)}
.ink-quote small{display:block;font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.3em;
  color:var(--paper-35);margin-top:var(--s3)}

/* ============ 按鈕：一實心、一線框，沒有第三種 ============ */
.ink-btn{display:inline-block;white-space:nowrap;font-family:var(--f-sans);font-size:var(--t-body);text-decoration:none;
  padding:17px 44px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:.25s var(--ease);min-height:54px}
.ink-btn.solid{background:var(--paper);color:var(--ink-0);font-weight:600}
.ink-btn.solid:hover{opacity:.82}
.ink-btn.ghost{border-color:var(--line);color:var(--paper);background:none}
.ink-btn.ghost:hover{background:var(--press)}
.ink-btn.small{font-size:var(--t-body);padding:11px 22px;min-height:44px}

/* ============ 開口輸入框（首屏主角） ============
   AI 建站平台的共同招式：讓人當場打字，而不是看廣告。
   圓角 0 —— 它是一張紙，不是一顆藥丸。 */
.ink-prompt{width:min(660px,100%);background:var(--ink-2);border:1px solid var(--line);
  border-radius:0;padding:22px 24px 16px;text-align:left;box-shadow:var(--shade);
  transition:.3s var(--ease)}
.ink-prompt:focus-within{border-color:var(--line-30);box-shadow:var(--shade-up)}
.ink-prompt .lbl{display:block;font-family:var(--f-sans);font-size:var(--t-lead);font-weight:600;
  color:var(--paper);margin-bottom:12px}
.ink-prompt textarea{width:100%;background:none;border:0;outline:0;resize:none;color:var(--paper);
  font-family:var(--f-sans);font-size:var(--t-lead);font-weight:300;line-height:1.7;min-height:62px}
.ink-prompt textarea::placeholder{color:var(--paper-35)}
.ink-prompt .bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ink-prompt .hint{font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60);
  flex:1 1 150px;min-width:0}
.ink-prompt .go{width:54px;height:54px;border-radius:var(--r);background:var(--paper);color:var(--ink-0);
  border:0;cursor:pointer;font-size:var(--t-lead);display:grid;place-items:center;flex:none;
  transition:.25s var(--ease)}
.ink-prompt .go:hover{opacity:.8}

/* 範例按鈕：只負責把字填進去，不會自己送出 */
.ink-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.ink-chip{font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 22px;background:none;
  cursor:pointer;min-height:44px;transition:.25s var(--ease)}
.ink-chip:hover{color:var(--paper);background:var(--hover);border-color:var(--line-22)}

/* ============ 嘟嘟嘟開關 ============
   品牌名就是打字的聲音，所以它該真的發得出來。但預設關閉 —— 沒人喜歡網站自己出聲。 */
.ink-sound{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:var(--t-note);letter-spacing:.12em;color:var(--paper-35);background:none;
  border:1px solid transparent;border-radius:var(--r);padding:8px 14px;cursor:pointer;
  transition:.2s var(--ease)}
.ink-sound:hover{color:var(--paper-60);border-color:var(--line)}
.ink-sound.is-on{color:var(--paper);border-color:var(--line-22)}
.ink-sound .w{display:flex;align-items:flex-end;gap:2px;height:12px}
/* 聲波條：動 scaleY 不動 height（動 height 每格都要重排，違反鐵律 6，稽核抓到） */
.ink-sound .w i{width:2px;height:12px;background:currentColor;display:block;
  transform:scaleY(.25);transform-origin:bottom}
.ink-sound.is-on .w i{animation:ink-wave .9s var(--ease) infinite}
.ink-sound.is-on .w i:nth-child(2){animation-delay:.15s}
.ink-sound.is-on .w i:nth-child(3){animation-delay:.3s}
@keyframes ink-wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* ============ 術語牆：痛點用看的，不用解釋 ============ */
.ink-jargon{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4);max-width:820px}
.ink-jargon span{position:relative;font-family:var(--f-mono);font-size:var(--t-body);
  color:var(--paper-35);border:1px solid var(--line-soft);padding:9px 15px}
.ink-jargon span::after{content:"";position:absolute;left:8%;top:50%;height:1px;width:84%;
  background:var(--paper-60);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.ink-jargon.on span::after{transform:scaleX(1)}
.ink-jargon.on span:nth-child(2n)::after{transition-delay:.08s}
.ink-jargon.on span:nth-child(3n)::after{transition-delay:.16s}
.ink-jargon.on span:nth-child(5n)::after{transition-delay:.24s}
.ink-ans{margin-top:var(--s4);font-family:var(--f-serif);font-size:var(--t-h2);
  font-weight:700;color:var(--paper-60);line-height:1.4}
.ink-ans b{font-weight:900;color:var(--paper)}

/* ============ 按住說話（不會打字的人走這條） ============ */
.ink-hold{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-sans);
  font-size:var(--t-body);color:var(--paper);background:none;border:1px solid var(--line);
  border-radius:var(--r);padding:0 26px;min-height:64px;cursor:pointer;transition:.2s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:none}
.ink-hold:hover{background:var(--hover);border-color:var(--line-22)}
.ink-hold.is-on{background:var(--paper);color:var(--ink-0);border-color:var(--paper)}
.ink-hold .dot{width:11px;height:11px;border-radius:var(--r);background:currentColor;flex:none}
.ink-hold.is-on .dot{animation:ink-pulse 1s var(--ease) infinite}
@keyframes ink-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

/* ============ 覆誦卡 ============
   不宣稱「已完成」。先把聽到的唸回去，讓人確認。
   這是鐵律 4 的具體長相。 */
.ink-echo{width:min(660px,100%);border:1px solid var(--line);background:var(--ink-1);
  padding:30px 32px;text-align:left;box-shadow:var(--shade)}
.ink-echo .k{font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.4em;
  text-transform:uppercase;color:var(--paper-35);margin-bottom:var(--s2)}
.ink-echo .said{font-family:var(--f-serif);font-size:var(--t-h3);font-weight:700;color:var(--paper);
  line-height:1.6;margin-bottom:var(--s3)}
.ink-echo ul{list-style:none;border-top:1px solid var(--line-soft)}
.ink-echo li{display:flex;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);font-family:var(--f-sans);font-size:var(--t-body);
  color:var(--paper)}
.ink-echo li i{font-family:var(--f-mono);font-style:normal;font-size:var(--t-note);
  color:var(--paper-35);flex:none}
/* 一條一條嘟出來 */
.js .ink-echo li{opacity:0;transform:translateX(-10px);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.js .ink-echo li.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .ink-echo li{opacity:1;transform:none} }
.ink-echo .act{display:flex;gap:12px;margin-top:var(--s3);flex-wrap:wrap}

/* ============ 首屏 ============ */
.ink-hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding:96px 24px 76px;position:relative;overflow:hidden;text-align:center}
/* 矮螢幕（筆電、橫放的手機）：標題再縮，輸入框一定要在畫面裡 */
@media (max-height:820px){ .ink-hero{--t-hero:clamp(36px,4.6vw,58px);gap:var(--s3)} }
/* canvas 是 replaced element：只給 inset:0 的話它會用自己的 width/height 屬性當尺寸，
   不會鋪滿。所以 100% 一定要寫出來。 */
.ink-field{position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;will-change:transform,opacity}

/* 紙紋。這一層是「像墨」跟「像光」的分界：
   沒有它，canvas 畫出來的永遠像發光的霧；有了它，墨才落在紙上。
   靜態的一張雜訊圖，不動、不耗效能。 */
.ink-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .62 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
/* mix-blend-mode:overlay 在近黑底上等於沒作用，所以這裡用一般疊加的白雜訊。 */
/* 兩張畫布（WebGL 水、2D 墨）都要排除，不然會被改成 relative，變成排版裡的一塊方塊（踩過） */
.ink-hero > *:not(.ink-field):not(.ink-gl){position:relative;z-index:2}

/* 問句區與覆誦卡疊在同一格，所以首屏的高度只算其中一個。
   兩個都排進流裡的話首屏會變成視窗的 1.8 倍高，輸入框就被擠出畫面。 */
.ink-stage{display:grid;grid-template-columns:minmax(0,1fr);width:min(660px,100%)}
/* min-width:0 —— grid 子元素預設最小寬度是內容寬度，不換行的提示文字會把整欄撐爆（踩過） */
.ink-stage > .ink-ask,
.ink-stage > .ink-echo-wrap{grid-area:1/1;min-width:0}

/* 直書標題 */
.ink-vtitle{display:flex;flex-direction:row-reverse;gap:30px;align-items:flex-start}
.ink-vtitle h1{writing-mode:vertical-rl;font-family:var(--f-serif);font-size:var(--t-hero);
  font-weight:900;letter-spacing:.14em;line-height:1}
.ink-vtitle .sub{writing-mode:vertical-rl;font-family:var(--f-sans);font-size:var(--t-body);
  font-weight:300;letter-spacing:.46em;color:var(--paper-60);line-height:2.6;margin-top:14px}
.ink-vtitle .mark{writing-mode:vertical-rl;align-self:flex-start;margin-top:10px;flex:none;
  border:1px solid var(--line);color:var(--paper-60);font-size:var(--t-small);line-height:1.3;
  padding:10px 7px;width:40px;text-align:center}

.ink-scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.4em;color:var(--paper-35)}
/* 墨往下滴：原點固定在上方，用 translateY 取代切換 transform-origin ——
   keyframes 裡動 transform-origin 上不了合成器，整段只能在主執行緒跑（稽核抓到）。 */
.ink-scrollcue i{display:block;width:1px;height:40px;margin:10px auto 0;transform-origin:top;
  background:linear-gradient(var(--paper),transparent);animation:ink-drip 2.4s infinite}
@keyframes ink-drip{
  0%  {transform:translateY(0) scaleY(0);opacity:0}
  25% {opacity:1}
  60% {transform:translateY(0) scaleY(1);opacity:1}
  100%{transform:translateY(40px) scaleY(0);opacity:0}}

/* 送出後：輸入區讓位給覆誦卡 */
.ink-ask,.ink-echo-wrap{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.is-asked .ink-ask{opacity:0;transform:translateY(-14px);visibility:hidden;pointer-events:none}
/* visibility:hidden 讓藏起來的那一邊離開 Tab 順序，鍵盤不會跳到看不見的輸入框 */
.ink-echo-wrap{opacity:0;transform:translateY(18px);visibility:hidden;pointer-events:none}
.is-asked .ink-echo-wrap{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.ink-nudge{animation:ink-nudge .4s var(--ease)}
@keyframes ink-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ============ 頂部導覽 ============ */
.ink-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px 32px;transition:.35s var(--ease)}
.ink-nav.stuck{background:var(--nav-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
/* 手機不開毛玻璃：底下兩張畫布每格都在變，毛玻璃每格重算，低階 GPU 會跟 shader 搶（稽核抓到） */
@media (max-width:759.98px){ .ink-nav.stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink-0)} }

/* ============ 頁尾 ============ */
.ink-foot{border-top:1px solid var(--line-soft);padding:var(--s4) 0}
.ink-foot .ink-wrap{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.2em;color:var(--paper-35)}

/* ============ 對照表：以前 / 現在 ============ */
.ink-vs{display:grid;grid-template-columns:1fr 1px 1fr;margin-top:var(--s5);align-items:start}
.ink-vs .rule{background:var(--line);align-self:stretch}
.ink-vs .col{padding:0 48px}
.ink-vs .col:first-child{padding-left:0}
.ink-vs .col:last-child{padding-right:0}
.ink-vs h4{font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.4em;color:var(--paper-35);
  text-transform:uppercase;margin-bottom:var(--s3)}
.ink-vs ul{list-style:none}
.ink-vs .old li{position:relative;font-family:var(--f-sans);font-size:var(--t-body);font-weight:300;
  color:var(--paper-35);padding:12px 0;border-bottom:1px solid var(--line-soft)}
/* 捲到就一條一條劃掉 */
.ink-vs .old li::after{content:"";position:absolute;left:0;top:50%;height:1px;width:100%;
  background:var(--line-22);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.ink-vs .old.on li::after{transform:scaleX(1)}
.ink-vs .new li{font-size:var(--t-step);font-weight:700;color:var(--paper);padding:26px 0;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:18px}
.ink-vs .new li i{font-family:var(--f-mono);font-style:normal;font-size:var(--t-note);
  color:var(--paper-35);letter-spacing:.1em}

/* ============ 五個後台五組密碼（痛點視覺） ============ */
.ink-logins{display:flex;gap:14px;margin-top:var(--s4);flex-wrap:wrap}
.ink-logins div{flex:1 1 150px;border:1px solid var(--line);padding:16px 18px;min-width:0}
.ink-logins .t{font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.2em;
  color:var(--paper-35);margin-bottom:12px}
.ink-logins .f{height:9px;background:var(--line);margin-bottom:8px}
.ink-logins .f.s{width:62%}

/* ============ 真的手機才把直書拆開 ============
   之前斷點設在 820px，結果 630px 寬的桌機視窗也被套成手機版，
   直書構圖變成置中疊字 —— 「上一版比較好看」的原因就是這個。 */
@media (max-width:560px){
  .ink-hero{padding:84px 16px 60px}
  .ink-vtitle{flex-direction:column;align-items:center;gap:14px}
  .ink-vtitle .sub{writing-mode:horizontal-tb;margin:0;text-align:center;
    letter-spacing:.25em;line-height:1.9}
  .ink-vtitle .mark{writing-mode:horizontal-tb;width:auto;margin:0;
    padding:7px 15px;letter-spacing:.2em}
  .ink-wrap{padding:0 16px}
}

/* ============ WebGL 墨在水裡 ============ */
.ink-gl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;
  will-change:transform,opacity}
/* WebGL 自己會畫會動的底片顆粒，CSS 那層靜態紙紋就收起來 */
html.has-gl .ink-hero::after{display:none}

/* ============ 列印：所有藏起來等進場的內容，一律直接印出來 ============ */
@media print{
  .js .ink-up,.js .ink-echo li{opacity:1!important;transform:none!important;filter:none!important;
    -webkit-mask-image:none!important;mask-image:none!important}
  .ink-gl,.ink-field,.ink-scrollcue,.ink-nav,.ink-intro{display:none!important}
}

/* ============ 進場動畫：全站只有這一種 ============ */
/* 只動 opacity 跟 transform。原本還動畫化 filter:blur，33 個元素一起進場時
   低階手機每格都在重算高斯模糊，而且違反鐵律 6（稽核抓到）。 */
.js .ink-up{opacity:0;transform:translateY(26px)}
.js .ink-up.on{opacity:1;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ink-up{opacity:1;transform:none;filter:none}
  .ink-scrollcue i,.ink-hold.is-on .dot{animation:none}
}

/* ============ 手機 ============ */
@media (max-width:820px){
  .ink-section{padding:var(--s6) 0}
  .ink-wrap{padding:0 20px}
  .ink-hero{gap:var(--s3);padding:88px 20px 64px}
  /* 直書構圖是這個網站的臉，820px 以下也要保住，只把行距收緊 */
  .ink-vtitle{gap:20px}
  .ink-vtitle .sub{line-height:2.1}
  /* 底列不准換行，不然光一條 bar 就吃掉 118px */
  .ink-prompt .bar{flex-wrap:nowrap}
  .ink-prompt .hint{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ink-sound{padding:8px 10px}
  .ink-sound .t{display:none}
  .ink-grid{grid-template-columns:1fr}
  .ink-grid > *{border-right:0;padding-left:0;padding-right:0}
  .ink-row{grid-template-columns:40px 1fr;gap:16px}
  .ink-row .end{grid-column:2;text-align:left;margin-top:8px}
  .ink-vs{grid-template-columns:1fr}
  .ink-vs .rule{display:none}
  .ink-vs .col{padding:0;margin-bottom:var(--s4)}
  .ink-foot .ink-wrap{flex-direction:column;gap:10px;text-align:center}
  .ink-prompt{padding:18px 18px 14px}
}