/* OpenStela — shared tokens.
   The subject is measurement, so the visual language comes from instruments:
   monospace for readouts and headings, tabular numerals everywhere digits
   line up, semantic pass/fail kept separate from the accent hue. */
:root{
  --paper:#F4F5F6; --raised:#FFFFFF; --ink:#16181C; --muted:#6A6F78;
  --faint:#9AA0A8; --rule:#DDE0E3; --accent:#12626E; --accent-soft:#E3EFF1;
  --pass:#2E7D4F; --fail:#B3452F; --warn:#8A6A1F;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101215; --raised:#181B1F; --ink:#E8EAED; --muted:#9AA1A9;
    --faint:#6C737B; --rule:#2A2E34; --accent:#4FC0CE; --accent-soft:#16292D;
    --pass:#5FB98A; --fail:#E08A72; --warn:#C9A54B;
  }
}
:root[data-theme="dark"]{
  --paper:#101215; --raised:#181B1F; --ink:#E8EAED; --muted:#9AA1A9;
  --faint:#6C737B; --rule:#2A2E34; --accent:#4FC0CE; --accent-soft:#16292D;
  --pass:#5FB98A; --fail:#E08A72; --warn:#C9A54B;
}
:root[data-theme="light"]{
  --paper:#F4F5F6; --raised:#FFFFFF; --ink:#16181C; --muted:#6A6F78;
  --faint:#9AA0A8; --rule:#DDE0E3; --accent:#12626E; --accent-soft:#E3EFF1;
  --pass:#2E7D4F; --fail:#B3452F; --warn:#8A6A1F;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto;padding:0 24px 96px}
.measure{max-width:66ch}

/* Hero 大標的顯示字。自架同源，不打外部 CDN。
   為什麼要自帶而不是繼續用 --mono 堆疊：系統堆疊在 Mac 落到 SF Mono、
   Windows 落到 Consolas、Linux 落到 DejaVu，字幅差 8.7%，版面得留一成
   餘裕才不會在別人機器上爆行。字體固定之後字幅是確定的，字級可以貼齊。
   latin 子集 23KB。 */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;
  src:url("/fonts/newsreader.woff2") format("woff2");font-display:block}

h1,h2,h3,.eyebrow,.brand,.stamp{font-family:var(--mono)}
h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;letter-spacing:-.03em;
  margin:0 0 14px;text-wrap:balance;font-weight:600}
h2{font-size:20px;letter-spacing:-.02em;margin:0 0 6px;font-weight:600;text-wrap:balance}
h3{font-size:15.5px;letter-spacing:-.01em;margin:0 0 6px;font-weight:600}
p{margin:0 0 14px}
a{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
strong{font-weight:650}
.eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px}
.lede{font-size:19px;line-height:1.5;margin:0 0 20px;text-wrap:pretty}
.small{font-size:14px;line-height:1.6;color:var(--muted)}
.tiny{font-size:12.5px;line-height:1.55;color:var(--faint)}

/* site chrome */
nav.site{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;
  padding:22px 0 20px;border-bottom:1px solid var(--rule)}
.brand{font-weight:650;letter-spacing:-.03em;font-size:16px;
  color:var(--ink);text-decoration:none;margin-right:auto}
.brand em{font-style:normal;color:var(--accent)}
nav.site a.nl{font-size:13.5px;color:var(--muted);text-decoration:none;
  font-family:var(--mono);letter-spacing:-.01em}
nav.site a.nl:hover,nav.site a.nl[aria-current="page"]{color:var(--accent)}

/* 入口按鈕。方角 2px 與 mono 字面沿用全站的儀器語彙——這裡刻意不用
   圓角膠囊，那是行銷網站的語言，與「量測」這個主題不同調。 */
.cta,.cta-ghost{display:inline-block;font-family:var(--mono);font-size:14px;
  letter-spacing:-.01em;text-decoration:none;padding:10px 18px;border-radius:2px;
  border:1px solid var(--accent);transition:.15s}
.cta{background:var(--accent);color:var(--paper);font-weight:600}
.cta:hover{filter:brightness(1.12)}
.cta-ghost{background:transparent;color:var(--accent)}
.cta-ghost:hover{background:var(--accent-soft)}
.ctarow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 6px}
.ctarow .tiny{margin:0}
/* 導覽列的入口做小一號：它是持續在場的提醒，不該與內文的主要行動搶戲 */
nav.site a.nl.go{color:var(--accent);border:1px solid var(--accent);
  border-radius:2px;padding:5px 12px;font-size:12.5px;font-weight:600}
nav.site a.nl.go:hover{background:var(--accent-soft)}

header.top{padding:52px 0 30px;border-bottom:1px solid var(--rule);margin-bottom:34px}
.stamp{font-size:11.5px;color:var(--faint);letter-spacing:.04em}

section{padding:52px 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:none}
.sechead{margin-bottom:26px}
/* 首頁分區帶（2026-08-17）：偶數節鋪沉底色滿版帶——box-shadow+clip-path
   讓 860px 容器內的節底色延伸到視窗全寬，不動任何版面流。
   只掛在 .home（index），條款/量測頁不受影響。 */
.home section:nth-of-type(even){
  background:var(--sunk);
  box-shadow:0 0 0 100vmax var(--sunk);
  clip-path:inset(0 -100vmax)}
.home section:nth-of-type(even)+section{border-top:none}
.home section:nth-of-type(even){border-top:none}

/* generic surfaces */
.note{background:var(--accent-soft);border:1px solid var(--rule);border-radius:2px;
  padding:15px 18px;margin:16px 0;font-size:14.5px;line-height:1.6}
.note p{margin:0}
.note p+p{margin-top:8px}
.card{background:var(--raised);border:1px solid var(--rule);border-radius:2px;
  padding:16px 18px}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin:4px 0 0}
.pair>div{background:var(--raised);padding:18px 20px}
.pair h3{color:var(--accent)}
.pair.neg h3,.pair>div.neg h3{color:var(--fail)}
.pair ul{margin:0;padding-left:17px}
.pair li{margin:5px 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

.tablewrap{overflow-x:auto;margin:18px 0 10px;border:1px solid var(--rule);
  border-radius:2px;background:var(--raised)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);
  vertical-align:middle}
thead th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:600;
  border-bottom:1px solid var(--ink);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
td.name{font-weight:600;white-space:nowrap}
td .mech{display:block;font-size:12px;color:var(--faint);font-weight:400;
  font-family:var(--mono);letter-spacing:-.01em}
tr.hi td{background:var(--accent-soft)}

/* ── 三步驟 ──
   編號用 counter 而不是硬寫，順序調整時不用改內容。這裡的數字是真的
   先後關係（上傳→確認→領證），不是裝飾——不成序列的段落不要套這個。 */
ol.steps{list-style:none;counter-reset:s;margin:4px 0 0;padding:0;
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}
ol.steps>li{counter-increment:s;background:var(--raised);
  padding:16px 20px 18px 60px;position:relative}
ol.steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;
  left:20px;top:17px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
ol.steps h3{margin:0 0 6px}
ol.steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:62ch}

/* ── 身分證 ──
   外框用 --ink 而不是 --rule：這是全頁唯一該被當成「一份文件」看的東西，
   邊框比別的卡片重一級。欄位值一律等寬並開 tabular-nums——證號與指紋
   是要拿來逐字核對的，比例字會讓相近字元對不起來。 */
#id{scroll-margin-top:24px}
/* 護照式（2026-08-15）：左照片右欄位。外框仍用 --ink——全頁唯一的「文件」。 */
.passport{border:1px solid var(--ink);border-radius:2px;background:var(--raised);
  padding:18px 20px;margin:4px 0 22px;max-width:680px;
  display:flex;gap:22px;align-items:flex-start}
.pp-photo{flex:0 0 168px;text-align:center}
.pp-photo img{width:168px;height:168px;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:2px}
.pp-id{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;
  color:var(--faint)}
.pp-fields{flex:1;min-width:0}
.idperks{margin:10px 0 12px;padding-left:20px;max-width:66ch}
.idperks li{margin:7px 0;line-height:1.6}
.idrow{display:flex;gap:16px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--rule)}
.idrow:last-of-type{border-bottom:none}
.idrow .k{flex:0 0 128px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.idrow .v{font-size:14.5px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.brk{word-break:break-all;font-size:12.5px;line-height:1.5}
.idnote{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-size:13px;line-height:1.55;color:var(--muted)}
.idtag{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
/* 網址自成一行，不要塞在句子裡——實測 66ch 的量測寬會把它折成
   「app.avatar-」「lab.app/api/verify/...」，看起來像壞掉的連結。 */
.urlline{font-size:13px;background:var(--accent-soft);border:1px solid var(--rule);
  border-radius:2px;padding:9px 12px;margin:2px 0 0;display:inline-block;
  max-width:100%;overflow-x:auto;white-space:nowrap;color:var(--ink)}
@media(max-width:520px){
  .passport{flex-direction:column;align-items:center}
  .pp-fields{width:100%}
  .idrow{flex-direction:column;gap:2px}
  .idrow .k{flex:none}
  ol.steps>li{padding:14px 16px 16px 16px}
  ol.steps>li::before{position:static;display:block;margin-bottom:6px}
}

ul.plain{margin:0 0 14px;padding-left:18px}
ul.plain li{margin:6px 0;color:var(--muted);font-size:15px;line-height:1.6}
ul.plain li strong{color:var(--ink)}

code{font-family:var(--mono);font-size:.9em;background:var(--accent-soft);
  padding:1px 5px;border-radius:2px}
pre{font-family:var(--mono);font-size:13px;line-height:1.55;background:var(--raised);
  border:1px solid var(--rule);border-radius:2px;padding:14px 16px;
  overflow-x:auto;margin:12px 0;white-space:pre;color:var(--ink)}
pre .bad{color:var(--fail)}
pre .good{color:var(--pass)}

footer{border-top:1px solid var(--rule);margin-top:34px;padding-top:26px}

@media (max-width:640px){
  .pair{grid-template-columns:1fr}
  body{font-size:16px}
}

/* ═════════ HERO ═════════
   人物在右、文案在左。畫面是已定案的 glitch 影片（A 部位分區，寬版重算，
   1600×900／45 秒），底下永遠壓一張底圖。

   ⚠️ 紅線：**prefers-reduced-motion 完全靜止**，不是慢一點——
   glitch 是高頻閃動，對前庭敏感與光敏性癲癇有實際風險。 */
.hero{position:relative;width:100%;aspect-ratio:16/9;max-height:82vh;
  min-height:420px;overflow:hidden;background:#7E8783;isolation:isolate}
/* 媒體盒自己就是 16:9，超出的交給 .hero{overflow:hidden} 裁。
   這樣影片、底圖、盒子三者同框，不會有一個被 cover 額外裁過。 */
.hero-media{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  aspect-ratio:16/9}
.hf{position:absolute;inset:0;background-size:100% 100%;
  opacity:0;transition:none;will-change:opacity}
.hf.on{opacity:1}

/* 左側壓暗。原圖左緣約 #7E8783，白字在上面只有 3.5:1，不到內文所需的
   4.5:1——不是美感問題，是讀不讀得到的問題。 */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(12,14,16,.86) 0%, rgba(12,14,16,.74) 30%,
    rgba(12,14,16,.34) 52%, rgba(12,14,16,0) 68%)}

.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:0;
  padding:0 clamp(24px,6vw,110px);max-width:min(56%,760px)}
.hero-copy .eyebrow{color:rgba(244,245,246,.6)}
.hero-h1{font-size:clamp(30px,5.1vw,66px);line-height:1.04;letter-spacing:-.035em;
  color:#F4F5F6;margin:0 0 18px;text-wrap:balance}
.hero-lede{font-size:clamp(14px,1.35vw,18px);line-height:1.55;
  color:rgba(244,245,246,.8);max-width:46ch;margin:0 0 26px}

/* ── H1 逐行堆疊 ──
   六行齊頭、同一字級，只有連接詞與句尾降級成小字：橫著讀是一個句子，
   直著看是清單。

   ⚠️ **字級不能用 vw 定。** .hero-copy 的內距是 clamp(24px,6vw,110px)，
   螢幕越寬內距吃掉越多，可用內寬反而**變窄**——1440 有 587px，1920 只剩
   540px。第一版寫 clamp(25px,3.85vw,48px)，只在 1440 剛好不斷行，
   1920／1180 實測都斷。字級要跟著容器走，所以改用 cqw。

   8.4cqw 的推導：最長行是引導句「Give the character you made」27 字，
   不是「per-platform wording」。Newsreader 600 量到 100px 時該行寬
   1136.7px（k=11.367），要不斷行需 11.367F ≤ 內寬 ⇒ F ≤ 8.53cqw，
   取 8.4 留一點捨入餘裕。

   餘裕可以這麼小，是因為字體改成自架的 Newsreader——系統堆疊時得留一成
   （Mac 的 SF Mono 比本機寬 8.7%），自架之後字幅是確定的。
   **換字體或改文案就要重量 k**：把該行設成 100px 量像素寬即可。

   萬一還是溢出，`.nb` 保證 per-platform 斷在詞界而不是連字號後——
   最壞情況已經被收斂成可看的樣子。重新量的方法：跑 2560／1920／1440／
   1180／390 五個寬度，看每一行的文字矩形**不同 top 的數量**是不是 1
   （注意巢狀 span 會讓同一行回傳多個矩形，數矩形會誤判；量 element 則會
   拿到 block 盒，含 block 級的 .conn 時等於整欄寬）。

   曾試過把引導句與 a home 排在同一行、其餘懸吊對齊，實測不可行：懸吊後
   右欄只剩 232px，三項全部斷行，大字還被推進畫面 45% 之後的亮區壓在
   人物身上。也試過引導句斷成兩行以換取更大字級，改用 Newsreader 之後
   不需要了——比例字比等寬窄，27 字單行反而比等寬的 18 字還放得大。 */
.hero-copy{container-type:inline-size}
/* 顯示字換成 Newsreader，資料與標籤仍留等寬——顯示字與文字字分工，
   不是整站換掉。hero 的 eyebrow 一起換是為了與大標同一族；只載了 600
   一個字重，eyebrow 因此比原本的 mono 略重，要退回等寬把這行刪掉即可。 */
.h1s,.h1s *,.hero-copy .eyebrow{font-family:"Newsreader",var(--mono)}
.h1s{margin:0 0 18px}
.h1s .lead{display:block;font-size:clamp(20px,8.4cqw,52px);line-height:1.04;
  color:#F4F5F6;margin:0}
.h1s .stack{display:block;padding-left:0}
.h1s .item{display:block;font-size:clamp(20px,8.4cqw,52px)}
.h1s .conn{display:block;font-size:.44em;letter-spacing:-.01em;
  color:rgba(244,245,246,.66);margin-bottom:.06em}
.h1s .tail{display:block;font-size:clamp(14px,1.4vw,19px);line-height:1.4;
  letter-spacing:-.005em;color:rgba(244,245,246,.72);margin-top:.5em}
/* per-platform 是連字複合詞，瀏覽器預設可在連字號後斷行——實測斷成
   「per-」「platform wording」。包起來禁止內部斷行。 */
.h1s .nb{white-space:nowrap}
.hero-copy .ctarow{margin:0 0 12px}
.hero-note{color:rgba(244,245,246,.5)!important;margin:0}
.cta-ghost.light{color:#F4F5F6;border-color:rgba(244,245,246,.42)}
.cta-ghost.light:hover{background:rgba(244,245,246,.12);border-color:#F4F5F6}

/* ── glitch 影片層 ──
   媒體盒本身就是 16:9（見上），影片也是 16:9，object-fit:cover 等於逐像素貼合。
   底下永遠壓著一張底圖：影片沒載到、被擋、或使用者關了動畫時，看到的是
   完整封面而不是空白。 */
.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease}
.hv.on{opacity:1}

/* 出口按鈕。放在人物那側的下緣，不壓到左邊文案；平常隱藏，
   只有在畫面確實沒動起來時才出現。 */
.hero-play{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,30px);
  z-index:3;font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em;
  color:#F4F5F6;background:rgba(12,14,16,.55);border:1px solid rgba(244,245,246,.42);
  border-radius:2px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(4px);
  transition:.15s}
.hero-play:hover{background:rgba(12,14,16,.78);border-color:#F4F5F6}
.hero-play:focus-visible{outline:2px solid #F4F5F6;outline-offset:2px}
.hero-play[hidden]{display:none}

@media(max-width:860px){
  /* ⚠️ 直式的高度由**文案**決定，不要改回固定 aspect-ratio。
     原本是 4/5 的固定框，六行大標一長就被 .hero{overflow:hidden} 裁掉——
     實測 360px 裁 53px、320px 裁 83px，連 CTA 按鈕都看不到，而且畫面上
     完全看不出有東西被裁，只會以為「這版沒有按鈕」。
     padding-bottom 是留給下方人物的空間，不是留白。 */
  .hero{aspect-ratio:auto;height:auto;min-height:0;max-height:none}
  .hero-copy{position:relative;inset:auto;
    padding-bottom:clamp(150px,46vw,280px)}
  /* 直式時媒體盒仍維持 16:9（clip-path 的百分比才準），改成靠右下、
     只佔下方 74%：人物退到下半，文案落在上方的背景區而不是壓在臉上。
     靠右是必要的——置中會把臉切到畫面右側外面。 */
  .hero-media{top:auto;bottom:0;left:auto;right:0;transform:none;
    width:auto;height:74%}
  /* 直式時人物退到下半，文案佔上半——橫式的左右分欄在窄螢幕會擠成一團。
     ⚠️ 這條漸層是量出來的，改動前先重量。H1 改成五行後文案往下長，原本
     62% 就散掉的版本讓 lede／按鈕／註腳落在人物臉上，實測 4.23／4.37／
     2.15，三項都不到 AA 的 4.5。掃過輕中重三檔後取「中」：輕檔註腳 4.43
     仍不過，重檔雖過但把人物壓到亮度 40.7，中檔 5.28 且人物 48.1。 */
  .hero-scrim{background:linear-gradient(180deg,
    rgba(12,14,16,.90) 0%, rgba(12,14,16,.80) 42%, rgba(12,14,16,.62) 68%,
    rgba(12,14,16,.24) 88%, rgba(12,14,16,0) 100%)}
  /* 半透明字疊在亮背景上等於自己把對比讓掉——直式要把註腳提上來。 */
  .hero-note{color:rgba(244,245,246,.82)!important}
  .hero-copy{justify-content:flex-start;padding-top:clamp(28px,9vw,64px);
    max-width:100%}
  .hero-lede{max-width:34ch}
}
/* 320px 窄機：.hero 有 min-height:420px 撐著，但六行大標讓文案長到 422px，
   溢出 2px。收掉兩處外距換回 12px。 */
@media(max-width:400px){
  .h1s{margin-bottom:12px}
  .hero-lede{margin-bottom:18px}
}
/* ⚠️ 這裡**不能**用 `.hv{display:none}` 把影片藏掉。
   規範要求的是「不要自動播動畫」，不是「不准動」——使用者自己按下
   Play 之後必須看得到。自動播放的抑制在 JS 的 autoOK() 裡做。 */

/* ═════════ 全站 header ═════════
   sticky、毛玻璃、儀器語彙（mono、方角 2px）。左上 logo 回首頁，右側
   Features／Blog／Pricing／LINE／進入工作區／登出。

   ⚠️ header 的 HTML 是**手動複製**到每一頁的（靜態站沒有模板）：
   index、blog 三頁、spec、benchmark、terms、privacy。改結構要全數同步，
   查漏用 grep -L hd-brand 掃 site 底下所有 html。

   登入感知：向 app.openstela.io/api/session/ping 帶 cookie 的跨源
   fetch（app 端已開 CORS 白名單只信這個 origin）。拿不到就維持未登入
   樣，官網不能因為 app 掛了而壞。 */
.hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
  padding:10px clamp(16px,3vw,28px);border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hd-brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-weight:650;font-size:15px;letter-spacing:-.03em;color:var(--ink);
  text-decoration:none;margin-right:auto;flex:0 0 auto}
.hd-brand em{font-style:normal;color:var(--accent)}
.hd-mark{display:block;border-radius:2px}
.hd-nav{display:flex;align-items:center;gap:18px}
.hd-nav a{font-family:var(--mono);font-size:13px;letter-spacing:-.01em;
  color:var(--muted);text-decoration:none;white-space:nowrap}
.hd-nav a:hover{color:var(--accent)}
.hd-nav a.hd-cta{color:var(--accent);border:1px solid var(--accent);
  border-radius:2px;padding:6px 12px;font-weight:600}
.hd-nav a.hd-cta:hover{background:var(--accent-soft)}
.hd-out{font-family:var(--mono);font-size:12.5px;color:var(--faint);
  background:none;border:1px solid var(--rule);border-radius:2px;
  padding:6px 10px;cursor:pointer;white-space:nowrap}
.hd-out:hover{color:var(--fail);border-color:var(--fail)}
.hd-out[hidden]{display:none}
.hd-burger{display:none;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:7px 9px;cursor:pointer}
.hd-burger span{display:block;width:16px;height:2px;background:var(--ink);
  margin:3px 0;border-radius:1px}
@media(max-width:820px){
  .hd-nav{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:0 12px 24px rgba(0,0,0,.12)}
  .hd-nav.open{display:flex}
  .hd-nav a,.hd-nav a.hd-cta,.hd-out{padding:13px clamp(16px,3vw,28px);
    border:none;border-radius:0;border-top:1px solid var(--rule);text-align:left}
  .hd-burger{display:block}
}
/* sticky header 會蓋住錨點落點 */
section[id],header.top[id]{scroll-margin-top:66px}

/* ═════════ 事實跑馬燈 ═════════
   位置在頁尾之前。內容是**量測結果與可查證的數字**，不是使用者好評——
   好評區的版型留在 index 的註解裡，等真實引言進來再開。
   軌道內容複製兩份、位移 -50% 迴圈；hover 暫停；reduced-motion 不動、
   改成可橫捲。 */
.ticker{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow:hidden;margin:44px 0 0;padding:12px 0}
.ticker-track{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-half{display:flex;gap:48px;padding-right:48px;white-space:nowrap}
.ticker-half span{font-family:var(--mono);font-size:13px;color:var(--muted)}
.ticker-half b{color:var(--ink);font-weight:600}
@keyframes tick{to{transform:translateX(-50%)}}
/* 登記動態條目：縮圖＋一句話。縮圖 28px 圓角方形，object-fit 保險
   （寬高屬性已同值，這是防未來換圖比例不一）。 */
.tk-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.tk-item img{width:28px;height:28px;border-radius:5px;object-fit:cover;
  display:block;border:1px solid var(--rule)}
.tk-item b{color:var(--ink);font-weight:600}
.tk-item .mono{color:var(--accent)}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto}
  .ticker{overflow-x:auto}
  .ticker-half:last-child{display:none}
}

/* ═════════ 真實截圖 ═════════
   瀏覽器外框＋實際網址列。截圖是本機開發環境現拍的產品畫面，
   不是 mockup——這一點文案有講，框的網址列也要對得上。 */
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:10px 0 4px}
.frame{border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  background:var(--raised)}
.frame-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;
  border-bottom:1px solid var(--rule)}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:var(--rule);
  display:block;flex:0 0 auto}
.frame-url{font-family:var(--mono);font-size:11px;color:var(--faint);
  margin-left:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame img{display:block;width:100%;height:auto}
.shotcap{font-size:13px;color:var(--muted);margin:8px 2px 0;line-height:1.55}
@media(max-width:760px){.shots2{grid-template-columns:1fr}}

/* ═════════ 頁尾（欄位式）═════════ */
footer.big{border-top:1px solid var(--rule);margin-top:0;padding-top:30px}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:26px}
.ft-cols h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px;font-weight:600}
.ft-cols a{display:block;font-size:13.5px;color:var(--muted);
  text-decoration:none;padding:3px 0}
.ft-cols a:hover{color:var(--accent)}
.ft-base{border-top:1px solid var(--rule);padding-top:14px;display:flex;
  gap:16px;flex-wrap:wrap;align-items:baseline}
@media(max-width:640px){.ft-cols{grid-template-columns:1fr 1fr}}

/* ═════════ 部落格 ═════════ */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-top:1px solid var(--rule);padding:20px 0}
.post-list time{font-family:var(--mono);font-size:12px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.post-list h2{margin:6px 0 8px}
.post-list h2 a{color:var(--ink);text-decoration:none}
.post-list h2 a:hover{color:var(--accent)}
article.post{max-width:68ch;padding-top:44px}
article.post h1{font-size:clamp(24px,3.6vw,34px)}
article.post .postmeta{font-family:var(--mono);font-size:12.5px;
  color:var(--faint);margin:0 0 26px;font-variant-numeric:tabular-nums}

/* hidden 屬性的 UA 樣式是 [hidden]{display:none}，任何作者樣式一設 display
   就把它蓋掉——實測 .ft-cols a{display:block} 讓 hidden 的 LINE 連結照樣
   顯示。這條保險讓 hidden 永遠贏。 */
[hidden]{display:none!important}

/* 成果輪播（2026-08-15）：一次一對 before→after，scroll-snap＋兩顆步進鈕。
   用原生橫向捲動而不是 transform——手機直接滑、鍵盤/讀屏免費拿到，
   JS 只負責按鈕步進。 */
.caro{position:relative;max-width:760px}
.caro-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;gap:24px;scrollbar-width:none}
.caro-track::-webkit-scrollbar{display:none}
.caro-slide{flex:0 0 100%;scroll-snap-align:start;margin:0}
.pairimg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pairimg img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:2px}
.caro-slide figcaption{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  margin-top:7px}
.caro-btn{position:absolute;top:50%;transform:translateY(-70%);z-index:2;
  width:36px;height:36px;border:1px solid var(--ink);border-radius:2px;
  background:var(--raised);color:var(--ink);font-size:20px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.caro-btn:hover{background:var(--accent-soft)}
.caro-btn.prev{left:-14px}
.caro-btn.next{right:-14px}
@media(max-width:820px){.caro-btn.prev{left:4px}.caro-btn.next{right:4px}}

/* FAQ（2026-08-15） */
.faq{border:1px solid var(--rule);border-radius:2px;background:var(--raised);
  padding:12px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:600;font-size:15px}
.faq p{margin:10px 0 2px;color:var(--muted)}