html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{
  --paper:#F4F5F7;
  --card:#FFFFFF;
  --ink:#0F1216;
  --ink2:#454C55;
  --muted:#7A828C;
  --line:#E5E8EB;
  --hair:#EDEFF2;
  --accent:#0C6E68;
  --accent-soft:rgba(12,110,104,.10);
  --accent-glow:rgba(12,110,104,.16);
  --accent-ring:rgba(12,110,104,.17);
  --warn-bg:#F7F0E8;
  --warn-line:#E6D5BF;
  --warn-ink:#7A5A32;
  /* 中文走圓體，數據走等寬：柔和的字配精確的數字 */
  --sans:"jf open 粉圓","Yuanti TC","Hiragino Maru Gothic ProN",system-ui,
         -apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",
         "jf open 粉圓",monospace;
  --r:16px;
  /* 中文字距：內文微幅、標籤大幅 */
  --ls-text:.035em;
  --ls-label:.2em;
}
@font-face{
  font-family:"jf open 粉圓";
  src:url("/static/fonts/jf-openhuninn.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D1012; --card:#15191C; --ink:#ECEFF1; --ink2:#B4BBC3; --muted:#7F8992;
    --line:#232A2F; --hair:#1D2327; --accent:#2FA79E;
    --accent-soft:rgba(47,167,158,.14); --accent-glow:rgba(47,167,158,.22);
    --accent-ring:rgba(47,167,158,.2);
    --warn-bg:#241D15; --warn-line:#3D3122; --warn-ink:#DEC3A0;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* 頂部一道極淡的柔光，讓平面的灰有光源與深度 */
body{
  background:
    radial-gradient(120% 72% at 50% -14%,
      rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 58%),
    var(--paper);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.85;letter-spacing:var(--ls-text);min-height:100vh;
  padding:clamp(40px,9vh,96px) 20px 96px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

/* 細微顆粒：像霧面紙的質地，濃度壓到幾乎察覺不到才不會顯髒 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.13;mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  body{
    background:
      radial-gradient(120% 72% at 50% -14%,
        rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 58%),
      var(--paper);
  }
  body::before{opacity:.09;mix-blend-mode:soft-light}
}
.stage{position:relative;z-index:1}

/* 解析前單欄聚焦，解析後展開成兩欄——寬螢幕才有的餘裕 */
.stage{max-width:700px;margin:0 auto;transition:max-width .55s cubic-bezier(.32,.72,0,1)}
@media (min-width:1080px){
  .stage.wide{max-width:1060px}
}

/* ── 標頭：細體字距拉開，安靜地佔位 ───────────────── */
.mark{text-align:center;margin-bottom:clamp(26px,5vh,46px)}
.mark h1,.mark .wm{
  font-size:clamp(1.5rem,4.6vw,2rem);font-weight:200;letter-spacing:.42em;
  text-indent:.42em;color:var(--ink);
}
.mark h1 a,.mark .wm a{color:inherit;text-decoration:none;display:inline-block;
  transition:color .2s}
.mark h1 a:hover,.mark .wm a:hover{color:var(--accent)}
.mark p{margin-top:13px;font-size:1.02rem;color:var(--muted);letter-spacing:.14em}

/* ── 卡片 ─────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,4vw,30px);
}
.card + .card{margin-top:16px}

/* ── 輸入：聚焦微光 ────────────────────────────── */
form{display:flex;gap:10px;flex-wrap:wrap}
.field{
  flex:1;min-width:220px;position:relative;display:flex;align-items:center;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  transition:border-color .25s,box-shadow .25s;
}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.field{min-height:56px}
.field svg{width:17px;height:17px;margin-left:15px;flex:none;color:var(--muted);
  transition:color .25s}
.field:focus-within svg{color:var(--accent)}
input[type=url]{
  flex:1;border:0;background:none;color:var(--ink);outline:none;
  font-family:var(--mono);font-size:.98rem;padding:16px 14px 16px 11px;min-width:0;
}
input[type=url]::placeholder{color:var(--muted);opacity:.7}
.go{
  border:0;border-radius:10px;background:var(--ink);color:var(--card);cursor:pointer;
  font-family:var(--sans);font-size:1.05rem;font-weight:400;letter-spacing:.22em;
  padding:0 30px 0 34px;min-height:56px;transition:opacity .2s,transform .2s;
}
.go:hover{opacity:.86}
.go:active{transform:scale(.985)}
.go:disabled{opacity:.4;cursor:default}
.go:focus-visible,.get:focus-visible,.seg button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

/* ── 解析中：一條細線 + 階段文字，不喧嘩 ───────────── */
.pending{display:none;margin-top:18px}
.pending.on{display:block}
.thread{height:1px;background:var(--hair);overflow:hidden;position:relative}
.thread i{
  position:absolute;inset:0;width:30%;background:var(--accent);
  animation:thread 1.5s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes thread{0%{left:-30%}100%{left:100%}}
.pending p{
  margin-top:12px;display:flex;gap:10px;align-items:baseline;
  font-size:.95rem;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;
}
.pending b{font-weight:400;color:var(--ink2)}

/* ── 提示：柔和土色，不用刺眼紅 ────────────────── */
.notice{
  display:none;margin-top:16px;padding:13px 16px;border-radius:10px;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);
  font-size:1rem;line-height:1.9;
}
.notice.on{display:block;animation:nudge .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes nudge{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-4px)}58%{transform:translateX(3px)}82%{transform:translateX(-1px)}
}

/* ── 結果 ─────────────────────────────────────── */
#result{display:none}
#result.on{display:block}
.media{display:flex;gap:18px;align-items:flex-start;
  padding-bottom:22px;border-bottom:1px solid var(--hair)}
.media img{
  width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;
  background:var(--hair);flex:none;
}
.media h2{font-size:1.34rem;font-weight:400;line-height:1.7;letter-spacing:.04em}
.media .meta{
  margin-top:10px;font-family:var(--mono);font-size:.9rem;color:var(--muted);
  display:flex;gap:8px;flex-wrap:wrap;
}
.media .meta span::after{content:"·";margin-left:8px;color:var(--line)}
.media .meta span:last-child::after{content:""}

/* ── 分頁切換 ─────────────────────────────────── */
.seg{display:flex;gap:2px;margin:22px 0 6px;padding:3px;
  background:var(--hair);border-radius:99px;width:fit-content}
.seg button{
  border:0;background:none;color:var(--muted);cursor:pointer;border-radius:99px;
  font-family:var(--sans);font-size:1rem;font-weight:400;padding:9px 24px;
  letter-spacing:.14em;transition:color .2s,background .25s;
}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* ── 區段標題 ─────────────────────────────────── */
.sect{margin-top:26px}
.sect h3{
  font-size:.98rem;font-weight:400;letter-spacing:var(--ls-label);color:var(--muted);
  padding-bottom:13px;
}

/* ── 資料列：色階 + 大數字 + 尺規 + 圓形動作鍵 ────── */
.row{
  display:grid;grid-template-columns:5px minmax(84px,auto) 1fr auto 40px;
  gap:0 18px;align-items:center;padding:16px 0;border-top:1px solid var(--hair);
  transition:opacity .3s;
}
.row:first-of-type{border-top:0}

/* 進行中的整列：淡底 + 主色色階 + 列底進度線 */
.row{position:relative}
.row.working{
  background:var(--accent-soft);border-radius:10px;
  box-shadow:0 0 0 8px var(--accent-soft);
  /* 波紋裁切在列內，才能放大又不溢出到隔壁欄 */
  overflow:hidden;
}
/* 進度線本身帶電流般的流動亮點 */
.row.working::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);
  border-radius:1px;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--accent) 55%,
    rgba(255,255,255,.75) 70%, var(--accent) 85%, var(--accent) 100%);
  background-size:220% 100%;
  transition:width .45s cubic-bezier(.32,.72,0,1);
  animation:current 1.5s linear infinite;
}
@keyframes current{from{background-position:180% 0}to{background-position:-40% 0}}

/* 從下載鍵擴散出去的波紋 */
.row.working::before{
  content:"";position:absolute;top:50%;right:20px;width:44px;height:44px;
  margin-top:-22px;border-radius:50%;pointer-events:none;
  border:22px solid var(--accent-ring);
  animation:ripple 2.4s cubic-bezier(.18,.7,.3,1) infinite;
}
@keyframes ripple{
  0%{transform:scale(.4);opacity:.55}
  55%{opacity:.28}
  100%{transform:scale(3.2);opacity:0}
}
/* 色階條同步脈動，像通了電 */
.row.working .wedge{opacity:0;transition:opacity .3s ease-out}

.row.working .name b,.row.working .name .lang{color:var(--accent)}
.row.working .amount{color:var(--accent)}
.row.working .ruler i{opacity:.5}
.row.settled{background:none;box-shadow:none;transition:background .6s,box-shadow .6s}
.row.settled .wedge{background:var(--accent)}
/* 進行中／完成時，在大小欄下方顯示狀態 */
.live{
  display:block;margin-top:4px;font-family:var(--mono);font-size:.78rem;
  color:var(--accent);letter-spacing:.04em;white-space:nowrap;
}
.row .amount:has(.live) .ruler{display:none}
/* 色階：墨色濃淡即畫質高低，越深越高 */
.wedge{
  width:5px;height:34px;border-radius:3px;background:var(--ink);
  opacity:var(--d,.2);transition:opacity .3s,transform .3s;
}
.row:hover .wedge{transform:scaleY(1.16)}
.wedge.hollow{background:none;border:1px solid var(--ink);opacity:.28}
.name{display:flex;align-items:baseline;gap:2px;min-width:0}
.name b{
  font-size:1.86rem;font-weight:300;letter-spacing:-.02em;color:var(--ink);
  line-height:1.15;
}
.name i{font-style:normal;font-size:.95rem;color:var(--muted);font-weight:400}
.name .lang{font-size:1.34rem;font-weight:400;letter-spacing:.06em}
.spec{
  font-family:var(--mono);font-size:.88rem;color:var(--muted);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spec em{font-style:normal;color:var(--accent)}
.amount{text-align:right;font-family:var(--mono);font-size:.9rem;color:var(--ink2)}
.amount .ruler{
  display:block;height:2px;border-radius:1px;background:var(--hair);
  margin-top:5px;margin-left:auto;width:88px;overflow:hidden;
}
.amount .ruler i{display:block;height:100%;background:var(--ink);opacity:.24;
  transition:opacity .3s}
.row:hover .amount .ruler i{opacity:.42}

/* 圓形動作鍵 → 進度環 */
.get{
  position:relative;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:grid;place-items:center;transition:border-color .25s,background .25s,color .25s;
}
.get:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.get svg.glyph{width:15px;height:15px;transition:opacity .2s,transform .3s}
.get svg.ring{position:absolute;inset:-1px;width:42px;height:42px;
  transform:rotate(-90deg);opacity:0;transition:opacity .25s}
.get .ring circle{fill:none;stroke-width:2;stroke-linecap:round}
.get .ring .track{stroke:var(--hair)}
.get .ring .prog{
  stroke:var(--accent);stroke-dasharray:100.53;stroke-dashoffset:100.53;
  transition:stroke-dashoffset .45s cubic-bezier(.32,.72,0,1);
}
.get.busy{cursor:default;border-color:transparent;background:none;color:var(--accent)}
.get.busy .ring{opacity:1}
.get.busy .glyph{opacity:0;transform:scale(.7)}
.get.busy .pct{
  position:absolute;font-family:var(--mono);font-size:.66rem;color:var(--accent);
  animation:fade .3s ease-out;
}
.get .pct{display:none}
.get.busy .pct{display:block}
.get .i-ok{display:none}
.get.done{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.get.done .i-down{display:none}
.get.done .i-ok{display:block;opacity:1;transform:scale(1);animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* 其他語言收合 */
/* ── 封面圖 ─────────────────────────────────── */
.trow{
  display:grid;grid-template-columns:74px minmax(96px,auto) 1fr auto;
  gap:0 18px;align-items:center;padding:14px 0;border-top:1px solid var(--hair);
}
.trow:first-of-type{border-top:0}
.trow .ph.tshot{width:74px;border-radius:7px;border:1px solid var(--line);cursor:zoom-in}
.trow .shot{transition:transform .25s}
.trow .ph.tshot:hover .shot{transform:scale(1.06)}
.trow .dim{font-family:var(--mono);font-size:1rem;color:var(--ink);white-space:nowrap}
.trow .dim em{font-style:normal;color:var(--muted);font-size:.8rem}
.acts{display:flex;gap:8px}
.acts button{
  width:40px;height:40px;border-radius:50%;padding:0;min-height:0;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;letter-spacing:0;
  transition:border-color .25s,color .25s,background .25s;
}
.acts button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.acts button svg{width:15px;height:15px}
.acts button.copied{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
a.get{text-decoration:none}

/* 檢視：整張圖放大 */
.lightbox{
  position:fixed;inset:0;background:rgba(8,10,12,.86);display:none;z-index:50;
  align-items:center;justify-content:center;padding:28px;
}
.lightbox.on{display:flex;animation:fade .25s ease-out}
.lightbox img{max-width:100%;max-height:82vh;border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox .cap{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#E6E9EC;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;
}
.lightbox .x{
  position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;min-height:0;padding:0;
}
.lightbox .x:hover{background:rgba(255,255,255,.2)}

/* ── 電腦版：每個區段內的項目左右交錯排列，順序不變 ── */
@media (min-width:1080px){
  .media img{width:190px}
  .media h2{font-size:1.42rem}
  .sect{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:48px;align-items:start;margin:0 0 30px;
  }
  .sect h3,.sect .more{grid-column:1 / -1}
  /* 兩欄的第一列都在頂端，不需要上分隔線 */
  .sect > div:nth-of-type(-n+2){border-top:0}
  /* 欄寬減半，尺規跟著收窄才不會擠壓規格文字 */
  .amount .ruler{width:58px}
  .row{gap:0 14px}
  .trow{gap:0 14px}
}

@media(max-width:520px){
  .trow{grid-template-columns:60px 1fr auto;gap:0 12px}
  .trow .ph.tshot{width:60px}
  .trow .spec{grid-column:2/4;grid-row:2}
}

.more{margin-top:6px}
.more summary{
  cursor:pointer;list-style:none;font-size:.95rem;color:var(--muted);
  padding:11px 0;display:flex;align-items:center;gap:7px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";font-family:var(--mono);color:var(--accent)}
.more[open] summary::before{content:"−"}

/* 文章頁：內容在前、解析區在後（DOM 順序即視覺順序，避免串流時版面跳動） */
.stage.is-post > #intake{position:relative;padding-top:58px}
.stage.is-post > #intake::before{
  content:"下載這支影片";position:absolute;top:24px;left:clamp(20px,4vw,30px);
  font-size:.98rem;letter-spacing:var(--ls-label);color:var(--muted);
}
/* 錯誤頁 */
.notfound{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(36px,7vw,64px);text-align:center;margin-bottom:16px}
.notfound .code{font-family:var(--mono);font-size:3rem;font-weight:300;
  color:var(--accent);letter-spacing:.06em}
.notfound h1{font-size:1.4rem;font-weight:400;margin:14px 0 16px;letter-spacing:.04em}
.notfound .lead{color:var(--muted);font-size:.98rem;line-height:2}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot span{margin:0 10px;opacity:.5}

/* ── 文章列表 ─────────────────────────────────── */
.entry-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,4vw,38px);margin-bottom:16px}
.entry-list > header{padding-bottom:22px;border-bottom:1px solid var(--hair);
  margin-bottom:6px}
.entry-list h1{font-size:clamp(1.3rem,3vw,1.6rem);font-weight:400;letter-spacing:.06em}
.entry-list > header p{color:var(--muted);font-size:.92rem;margin-top:8px}
.entry-list > header p a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s}
.entry-list > header p a:hover{border-bottom-color:var(--accent)}
.sorts{display:inline-flex;gap:6px;margin-top:16px;padding:3px;
  background:var(--hair);border-radius:99px}
.sorts a{font-size:.86rem;color:var(--muted);text-decoration:none;
  padding:6px 18px;border-radius:99px;letter-spacing:.08em}
.sorts a.on{background:var(--card);color:var(--ink)}
.entry-card{display:grid;grid-template-columns:132px 1fr;gap:18px;
  padding:18px 0;border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.entry-card:first-of-type{border-top:0}
/* 橫卡的文字比 16:9 小圖高，圖垂直置中讓留白均分，不裁切也不變形 */
.entry-card .ph{width:132px;border-radius:9px;align-self:center}
.entry-card img{transition:transform .25s}
.entry-card:hover img{transform:scale(1.03)}
/* 手機：小圖配四行文字太零碎，改成跟電腦版一樣圖上文下 */
@media(max-width:560px){
  .entry-card{display:flex;flex-direction:column;gap:12px}
  .entry-card .ph{width:100%;align-self:auto}
}
.ec-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.ec-title{font-size:1.06rem;line-height:1.6}
.entry-card:hover .ec-title{color:var(--accent)}
.ec-excerpt{font-size:.88rem;color:var(--muted);line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-meta{font-family:var(--mono);font-size:.78rem;color:var(--muted);
  display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.ec-meta .up{color:var(--accent)}
.pager{display:flex;gap:18px;align-items:center;justify-content:center;
  padding-top:22px;border-top:1px solid var(--hair);font-size:.9rem}
.pager a{color:var(--accent);text-decoration:none}
.pager span{color:var(--muted);font-family:var(--mono);font-size:.82rem}
.empty-note{color:var(--muted);padding:22px 0}

/* 三大理由與常見問題（僅首頁） */
.why,.faq{padding:clamp(22px,4vw,32px)}
.why-t{font-size:.9rem;font-weight:400;letter-spacing:var(--ls-label);
  color:var(--muted);margin-bottom:18px}
.why-grid{display:grid;gap:22px}
@media(min-width:760px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-grid h3{font-size:1rem;font-weight:400;margin-bottom:8px;color:var(--ink)}
.why-grid p{font-size:.88rem;color:var(--muted);line-height:1.95}
.faq details{border-top:1px solid var(--hair);padding:13px 0}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;font-size:.95rem;color:var(--ink2);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";float:right;color:var(--muted)}
.faq details[open] summary::after{content:"－"}
.faq details p{margin-top:10px;font-size:.88rem;color:var(--muted);line-height:1.95}
/* ── 圖片佔位與延遲載入 ─────────────────────────── */
.ph{
  position:relative;display:block;overflow:hidden;border-radius:10px;
  background:var(--hair);aspect-ratio:16/9;
}
/* 圖片還沒到之前用微光骨架佔位 */
.ph::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--hair) 30%,var(--card) 50%,var(--hair) 70%);
  background-size:220% 100%;
  animation:sheen 1.6s ease-in-out infinite;
}
@keyframes sheen{from{background-position:180% 0}to{background-position:-40% 0}}
.ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease-out;
}
.ph img.ready{opacity:1}
.ph img.ready ~ :not(img){opacity:0}
/* 穿插在內文中的畫面 */
.post figure.shot{margin:26px 0}
/* 直式截圖不佔滿欄寬，置中窄框才像手機畫面 */
.post figure.shot.portrait .ph{max-width:min(300px,72%);margin:0 auto}
.post figure.shot.portrait figcaption{justify-content:center}
.post figure.shot .ph{border-radius:10px}
.post figure.shot figcaption{margin-top:10px;font-size:.86rem;color:var(--muted);
  display:flex;align-items:baseline;gap:12px;line-height:1.7}
.post figure.shot .at{font-family:var(--mono);font-size:.78rem;color:var(--accent);
  margin-left:auto;flex:none}
/* 文章配圖（沒有標記時的文末區塊） */
.frames{margin-top:30px}
.frames h3{font-size:1.05rem;font-weight:400;letter-spacing:.06em;
  margin-bottom:14px;color:var(--ink)}
.frames figure{margin:0 0 18px}
.frames img{width:100%;border-radius:10px;background:var(--hair);display:block}
.frames figcaption{margin-top:9px;font-size:.86rem;color:var(--muted);
  display:flex;align-items:baseline;gap:10px}
.frames figcaption .at{font-family:var(--mono);font-size:.78rem;
  color:var(--accent);margin-left:auto}
@media (min-width:1080px){
  .frames{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
  .frames h3{grid-column:1/-1;margin-bottom:0}
  .frames figure{margin:0}
}
/* 擷取畫面 */
.snap{margin-top:32px;padding-top:26px;border-top:1px solid var(--hair)}
.snap h3{font-size:.98rem;font-weight:400;letter-spacing:var(--ls-label);
  color:var(--muted);padding-bottom:13px}
.snap-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.snap-time{display:flex;align-items:center;border:1px solid var(--line);
  border-radius:10px;background:var(--card);transition:border-color .25s,box-shadow .25s}
.snap-time:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.snap-time input{width:110px;border:0;background:none;outline:none;color:var(--ink);
  font-family:var(--mono);font-size:.95rem;padding:12px 14px;text-align:center}
#snapGo{font-family:var(--sans);font-size:.95rem;letter-spacing:.16em;cursor:pointer;
  border:1px solid var(--ink);background:none;color:var(--ink);
  border-radius:10px;padding:0 24px;min-height:46px;transition:all .2s}
#snapGo:hover{background:var(--ink);color:var(--card)}
#snapGo:disabled{opacity:.45;cursor:wait}
.snap-note{font-size:.84rem;color:var(--muted)}
.snap-out{margin:16px 0 0}
.snap-out img{width:100%;border-radius:10px;display:block;background:var(--hair)}
.snap-out figcaption{margin-top:10px;display:flex;gap:14px;align-items:center;
  font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.snap-out a{margin-left:auto;color:var(--accent);text-decoration:none;
  border:1px solid var(--line);border-radius:99px;padding:6px 18px;
  font-family:var(--sans);letter-spacing:.08em}
.snap-out a:hover{border-color:var(--accent)}
/* 標籤 */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.tags a{font-size:.86rem;color:var(--ink2);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:99px;padding:6px 16px;
  letter-spacing:.04em;transition:all .2s}
.tags a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tags a::before{content:"#";color:var(--muted);margin-right:4px}
.ec-tags{display:inline-flex;gap:6px;margin-left:auto;flex-wrap:wrap;min-width:0}
/* 不加 nowrap 的話窄螢幕會被壓成一個字一行 */
.ec-tags span{font-size:.72rem;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:1px 9px;white-space:nowrap;flex:none}
@media(max-width:560px){
  /* 標籤改成自己一行靠左，不跟日期擠 */
  .ec-tags{margin-left:0;width:100%}
}
.entry-list .kicker{font-size:.82rem;letter-spacing:var(--ls-label);color:var(--accent)}
.tagcloud{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,4vw,30px);margin-bottom:16px}
.tagcloud h3{font-size:.9rem;font-weight:400;letter-spacing:var(--ls-label);
  color:var(--muted);margin-bottom:14px}
.tagcloud a{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;
  color:var(--ink2);text-decoration:none;border:1px solid var(--line);
  border-radius:99px;padding:6px 15px;margin:0 8px 8px 0}
.tagcloud a:hover{border-color:var(--accent);color:var(--accent)}
.tagcloud a span{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
/* ── 書籤工具 ─────────────────────────────────── */
.tool{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card)}
.tool summary{
  cursor:pointer;list-style:none;padding:16px 22px;font-size:.95rem;color:var(--ink2);
  display:flex;align-items:center;gap:10px;
}
.tool summary::-webkit-details-marker{display:none}
.tool summary::before{content:"+";font-family:var(--mono);color:var(--accent)}
.tool[open] summary::before{content:"−"}
.toolbody{padding:0 22px 22px;display:flex;flex-direction:column;gap:14px;
  align-items:flex-start}
.toolbody p{font-size:.9rem;color:var(--muted);line-height:1.9;max-width:52ch}
.toolbody p b{color:var(--ink);font-weight:400}
.toolbody .tip{font-size:.82rem}
a.bmk{
  display:inline-block;padding:12px 26px;border-radius:10px;cursor:grab;
  background:var(--ink);color:var(--card);text-decoration:none;
  font-size:.98rem;letter-spacing:.16em;
  box-shadow:0 2px 0 var(--line);
}
a.bmk:active{cursor:grabbing;transform:translateY(1px)}
@media (min-width:1080px){.toolbody{flex-direction:row;align-items:center;flex-wrap:wrap}}

/* ── 影片筆記文章 ───────────────────────────────── */
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,4vw,40px);margin-bottom:16px}
.post .kicker{font-size:.82rem;letter-spacing:var(--ls-label);color:var(--accent)}
.post h1{font-size:clamp(1.4rem,3.2vw,1.85rem);font-weight:400;line-height:1.55;
  letter-spacing:.02em;margin:10px 0 12px}
.post .byline{font-size:.9rem;color:var(--muted);display:flex;gap:14px;
  flex-wrap:wrap;align-items:center;padding-bottom:18px;
  border-bottom:1px solid var(--hair);margin-bottom:22px}
.post .byline a{color:var(--accent)}
.post .byline .author{color:var(--ink2)}
.post .origin{font-size:.82rem;color:var(--muted);margin:-14px 0 22px;
  padding-bottom:18px;border-bottom:1px solid var(--hair)}
.post .byline{border-bottom:0;padding-bottom:10px;margin-bottom:0}
/* 小標零裝飾：主色文字＋寬字距＋留白，顏色即層次 */
.post h3{font-size:.95rem;font-weight:400;letter-spacing:.2em;
  margin:38px 0 12px;color:var(--accent)}
.post p{margin:0 0 14px;color:var(--ink2);line-height:2}
.post ul{margin:0 0 16px;padding-left:1.1em}
.post li{margin-bottom:9px;color:var(--ink2);line-height:1.95}
.post li::marker{color:var(--accent)}
/* 時間軸：可以拿來當快轉索引，時間點按了跳到原片 */
.post .tl{list-style:none;margin:0 0 20px;padding:0;
  border-left:1px solid var(--hair)}
.post .tl li{display:flex;gap:16px;align-items:baseline;margin:0;
  padding:9px 0 9px 18px;position:relative}
.post .tl li::before{content:"";position:absolute;left:-3px;top:1.15em;
  width:5px;height:5px;border-radius:50%;background:var(--line)}
.post .tl li:hover::before{background:var(--accent)}
.post .tl .t{flex:none;font-family:var(--mono);font-size:.8rem;
  letter-spacing:.04em;color:var(--accent);text-decoration:none;
  font-variant-numeric:tabular-nums}
.post .tl a.t:hover{text-decoration:underline}
.post .tl .d{color:var(--ink2);line-height:1.9}
.post .post-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:.82rem;color:var(--muted)}
.post .hero{margin-bottom:24px;border-radius:11px}
/* ── 寬螢幕：文章加側欄、列表改雙欄 ─────────────── */
.post-wrap{margin-bottom:16px}
.post-wrap .post{margin-bottom:0}
.post-side{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.side-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px 20px}
.side-card h3{font-size:.85rem;font-weight:400;letter-spacing:var(--ls-label);
  color:var(--muted);margin-bottom:14px}
.facts div{display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--hair);font-size:.88rem}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{color:var(--ink2);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:12em}
.side-cta{display:block;text-align:center;margin-top:14px;padding:10px 0;
  font-size:.9rem;letter-spacing:.12em;color:var(--accent);text-decoration:none;
  border:1px solid var(--line);border-radius:9px;transition:all .2s}
.side-cta:hover{border-color:var(--accent);background:var(--accent-soft)}
.more{display:flex;flex-direction:column;gap:14px}
.more a{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;
  color:var(--ink2);text-decoration:none;font-size:.86rem;line-height:1.65}
.more a:hover{color:var(--accent)}
.more .ph{border-radius:7px;aspect-ratio:auto;align-self:stretch;min-height:50px}
@media(min-width:1100px){
  .stage.is-post:has(.post-wrap),
  .stage.is-post:has(.entry-list){max-width:1150px}
  .post-wrap{display:grid;grid-template-columns:minmax(0,1fr) 304px;
    gap:26px;align-items:start}
  .post-side{position:sticky;top:26px;margin-top:0}
  /* 列表改三欄網格卡（圖上文下）：16:9 縮圖滿寬完整顯示，沒有留白問題 */
  .entry-list{display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:30px;row-gap:36px}
  .entry-list > header,.entry-list > .crumbs,.entry-list > .hot-h2,
  .entry-list > .pager,.entry-list > .empty-note{grid-column:1/-1}
  .entry-list .entry-card{display:flex;flex-direction:column;gap:13px;
    border-top:0;padding:0}
  .entry-list .entry-card .ph{width:100%;align-self:auto}
  .entry-list .ec-title{font-size:1rem;line-height:1.62}
  .entry-list .ec-excerpt{font-size:.85rem}
}
/* 熱門排行榜：與筆記列表同款卡片，名次疊在縮圖角落 */
.hot-h2{font-size:.9rem;font-weight:400;letter-spacing:var(--ls-label);
  color:var(--muted);margin:26px 0 4px;padding-top:18px;border-top:1px solid var(--hair)}
.hot-h2:first-of-type{margin-top:8px;padding-top:0;border-top:0}
/* 名次：大號細體數字壓在縮圖左下，靠漸層底穩住可讀性 */
.hot-card .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,13,16,.62),rgba(10,13,16,0))}
.entry-card .rk{position:absolute;left:12px;bottom:6px;z-index:2;
  font-family:var(--mono);font-weight:300;font-size:clamp(40px,4.6vw,54px);
  line-height:1.05;letter-spacing:-.06em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.45)}
.entry-card .rk.top::after{content:"";display:block;width:1.15em;height:3px;
  margin-top:5px;border-radius:2px;background:var(--accent)}
@media(max-width:560px){
  .entry-card .rk{font-size:46px;left:10px}
}
.entry-card .ec-title{color:inherit;text-decoration:none}
.entry-card .ec-title:hover{color:var(--accent)}
.ec-meta .age{color:var(--accent)}
.ec-meta .heat{color:var(--ink2)}
.ec-meta .heat b{font-weight:400;margin-left:6px;padding:1px 8px;border-radius:99px;
  font-size:.7rem;letter-spacing:.08em}
.ec-meta .heat .h3{background:var(--accent);color:var(--card)}
.ec-meta .heat .h2{background:var(--accent-soft);color:var(--accent)}
.hot-act{display:flex;gap:10px;margin-top:4px}
.hot-act a{font-size:.8rem;text-decoration:none;padding:3px 12px;
  border:1px solid var(--line);border-radius:99px;color:var(--ink2)}
.hot-act a:hover{border-color:var(--accent);color:var(--accent)}
.hot-note{background:var(--accent-soft)}
/* 解析結果的筆記入口 */
.note-banner{display:flex;align-items:center;gap:12px;margin-top:16px;
  padding:12px 16px;border:1px solid var(--line);border-radius:11px;
  background:var(--accent-soft);text-decoration:none;transition:border-color .2s}
.note-banner:hover{border-color:var(--accent)}
.note-banner .nb-k{flex:none;font-size:.74rem;letter-spacing:.14em;
  color:var(--card);background:var(--accent);border-radius:99px;padding:2px 10px}
.note-banner .nb-t{font-size:.88rem;color:var(--ink2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-banner .nb-go{margin-left:auto;flex:none;font-size:.86rem;color:var(--accent)}
/* 短影音直式卡與無限捲動 */
.hot-more{float:right;font-size:.82rem;color:var(--accent);text-decoration:none;
  letter-spacing:.06em}
.shorts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px 14px;grid-column:1/-1}
.short-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;
  color:inherit;min-width:0}
.short-card .ph{aspect-ratio:9/16;border-radius:10px}
.short-card .rk{font-size:34px;left:8px;bottom:4px}
.short-card:hover .sc-t{color:var(--accent)}
.sc-t{font-size:.85rem;line-height:1.55;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-m{font-family:var(--mono);font-size:.7rem;color:var(--muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sc-m .heat b{margin-left:4px;padding:0 6px;font-size:.62rem}
.s-sentinel{grid-column:1/-1;text-align:center;color:var(--muted);
  font-size:.85rem;padding:22px 0}
/* 時間點的站內播放 Modal */
.vmodal{position:fixed;inset:0;z-index:90;display:none;align-items:center;
  justify-content:center;background:rgba(10,13,16,.78);padding:4vmin}
.vmodal.on{display:flex}
.vm-box{position:relative;width:min(960px,94vw)}
.vm-frame{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.vm-frame iframe{width:100%;height:100%;border:0;display:block}
.vm-x{position:absolute;top:-40px;right:0;font-size:1rem;line-height:1;
  color:#fff;background:none;border:0;cursor:pointer;padding:8px;opacity:.8}
.vm-x:hover{opacity:1}
/* 站內觀看頁 */
.watch{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,3.5vw,30px);margin-bottom:16px}
.watch-frame{position:relative;aspect-ratio:16/9;border-radius:12px;
  overflow:hidden;background:#0F1216}
/* 短影音：直式播放器置中，高度以視窗為限 */
.watch-frame.portrait{aspect-ratio:9/16;max-height:78vh;
  max-width:calc(78vh * 9 / 16);margin:0 auto}
.watch-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-t{font-size:clamp(1.1rem,2.6vw,1.4rem);font-weight:400;line-height:1.7;
  margin:18px 0 8px}
.watch-m{font-family:var(--mono);font-size:.8rem;color:var(--muted);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.watch-m > span:first-child{display:none}
.watch-act{display:flex;gap:10px;margin-top:14px}
.watch-act a{font-size:.84rem;text-decoration:none;padding:4px 14px;
  border:1px solid var(--line);border-radius:99px;color:var(--ink2)}
.watch-act a:hover{border-color:var(--accent);color:var(--accent)}
@media(min-width:1100px){
  .stage.is-post:has(.watch){max-width:960px}
}
/* 每日快照導覽 */
.snap-days{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);
  font-size:.82rem}
.snap-days a{color:var(--ink2);text-decoration:none;padding:4px 12px;
  border:1px solid var(--line);border-radius:99px}
.snap-days a:hover{color:var(--accent);border-color:var(--accent)}
.pager.snapnav{display:flex;justify-content:space-between;gap:14px;
  border-top:0;padding:6px 0 14px}
/* 麵包屑：文章與列表頁頂部的位置導覽 */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.84rem;letter-spacing:.05em;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;color:var(--line);font-size:.9em}
.crumbs span{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:min(60vw,420px)}
/* 評比 */
.rate{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;
  padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.rate-q{font-size:.95rem;color:var(--ink2)}
.rate-btns{margin-left:auto;display:flex;gap:10px}
.rate button{
  font-family:var(--sans);font-size:.92rem;letter-spacing:.06em;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  border-radius:99px;padding:9px 20px;min-height:0;transition:all .2s}
.rate button:hover{border-color:var(--accent);color:var(--accent)}
.rate button b{font-weight:400;font-family:var(--mono);margin-left:4px}
.rate button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rate button.on:hover{color:#fff;opacity:.9}
/* 文章頁的下載入口 */
.getcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px clamp(20px,4vw,30px);margin-bottom:16px}
.getcta p{color:var(--muted);font-size:.95rem}
.getcta button{margin-left:auto;font-family:var(--sans);font-size:1rem;
  letter-spacing:.16em;border:0;border-radius:10px;background:var(--ink);
  color:var(--card);cursor:pointer;padding:0 28px;min-height:52px}
.getcta button:hover{opacity:.86}
.getcta.gone{display:none}
.foot{
  margin-top:40px;text-align:center;font-size:.84rem;color:var(--muted);
  letter-spacing:.3em;white-space:nowrap;
}
/* 手機：四個入口要收在一行，字距與分隔縮小 */
@media(max-width:560px){
  .foot{font-size:.78rem;letter-spacing:.1em}
  .foot span{margin:0 5px}
}
@media(max-width:390px){
  .foot{font-size:.7rem;letter-spacing:.04em}
  .foot span{margin:0 4px}
}
.hint{margin-top:28px;font-size:.92rem;color:var(--muted);line-height:1.95}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}
.amount:empty{display:none}
@media (max-width:520px){
  .row{grid-template-columns:5px minmax(70px,auto) 1fr 40px;gap:0 12px}
  .amount{grid-column:2/4;grid-row:2;text-align:left;margin-top:2px}
  .amount .ruler{margin-left:0}
  /* 字幕列沒有大小欄，動作鍵要跨兩列置中而非被擠下去 */
  .row .get{grid-column:4;grid-row:1/span 2;align-self:center}
  .media img{width:104px}
  .go{width:100%}
}