@charset "UTF-8";
/* ============================================================
   FFA · FILM FORMULA — light gray FFA selection system
   Hard grids, white editorial modules, dot-matrix numerals,
   high-contrast hover states, and restrained selection accents.
   ============================================================ */
:root{
  --bg:#e7e7e4; --bg-2:#f1f1ee; --panel:#fbfbf8; --panel-2:#ffffff;
  --line:#d2d2cc; --line-2:#b7b8b1;
  --text:#202124; --muted:#606368; --faint:#9a9c9b;
  --ice:#1e1f21; --ice-2:#4b4d4f; --dev:#707274;
  --ink:#ffffff;                 /* text on inverted blocks */
  --warn:#8c8e8f; --teal:#707274;
  --edge:clamp(14px, 2.8vw, 42px);
  --dock-h:96px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --paper-dot:radial-gradient(circle, rgba(32,33,36,.16) .7px, transparent .8px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans TC",system-ui,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
.mono{font-family:"IBM Plex Mono",monospace}
button{font-family:inherit; color:inherit}
a{color:var(--ice); text-decoration:none}
a:hover{color:var(--dev)}
:focus-visible{outline:2px solid var(--ice); outline-offset:-2px}
img,video{max-width:100%}
[hidden]{display:none !important}

/* ── 背景層 ── */
#bg{position:fixed; inset:0; z-index:-2; width:100%; height:100%; display:block; opacity:.55}
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(32,33,36,.06) 1px) 0 0/72px 72px,
    linear-gradient(0deg, transparent calc(100% - 1px), rgba(32,33,36,.06) 1px) 0 0/72px 72px,
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(32,33,36,.028) 1px) 0 0/18px 18px,
    linear-gradient(0deg, transparent calc(100% - 1px), rgba(32,33,36,.028) 1px) 0 0/18px 18px,
    radial-gradient(70vw 46vh at 82% -8%, rgba(255,255,255,.34), transparent 62%),
    radial-gradient(64vw 50vh at 2% 110%, rgba(32,33,36,.045), transparent 60%),
    var(--bg);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.23; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

/* ── 跑馬燈色帶(招牌元素) ── */
.ticker{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); user-select:none;
}
.ticker.invert{background:var(--ice); border-color:var(--ice)}
.ticker-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:marquee 26s linear infinite;
}
.ticker span{
  font-family:"Space Grotesk"; font-weight:700; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
  padding:9px 0;
}
.ticker.invert span{color:var(--ink)}
.ticker b{color:var(--ice); font-weight:700; padding:0 18px}
.ticker.invert b{color:var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── 頁首導覽 ── */
.topnav{
  position:sticky; top:0; z-index:40;
  background:rgba(251,251,248,.88); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto; padding:0;
  display:flex; align-items:stretch; gap:18px; min-height:56px;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.02em; color:var(--text); flex:none; padding:0 14px; border-right:1px solid var(--line)}
.brand:hover{color:var(--text)}
.brand-logo{display:block; width:auto; height:42px; max-width:min(330px, 62vw); object-fit:contain}
.brand .zh{font-size:18px}
.brand .en{font-family:"Space Grotesk"; font-size:10px; color:var(--ice); letter-spacing:.24em; white-space:nowrap}
.brand .dot{width:22px;height:22px;background:var(--ice);flex:none; clip-path:polygon(50% 0,68% 25%,100% 50%,68% 75%,50% 100%,32% 75%,0 50%,32% 25%)}
.nav-links{
  display:flex; margin-left:auto; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  flex:none; padding:0 16px; min-height:56px; display:flex; align-items:center;
  color:var(--muted); font-size:12px; white-space:nowrap;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; letter-spacing:.12em;
  border-left:1px solid var(--line);
  transition:background .15s, color .15s;
}
.nav-links a:hover{color:var(--text); background:var(--bg-2)}
.nav-links a.active{background:var(--ice); color:var(--ink); font-weight:700}
.nav-toggle{
  display:none; width:56px; min-height:56px; margin-left:auto; border:none; border-left:1px solid var(--line);
  background:var(--panel); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{width:24px; height:1px; background:var(--text); transition:transform .18s, opacity .18s}
.topnav.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.topnav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.topnav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .topnav-inner{width:100%; border-left:none; border-right:none; gap:0; position:relative}
  .brand{padding:0 10px; min-width:0; flex:1}
  .brand-logo{height:38px; max-width:calc(100vw - 78px)}
  .brand .en{font-size:9px; letter-spacing:.18em}
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; display:grid; margin-left:0;
    background:rgba(251,251,248,.96); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .18s, transform .18s, visibility .18s;
  }
  .topnav.nav-open .nav-links{transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible}
  .nav-links a{
    min-height:52px; padding:0 18px; border-left:none; border-top:1px solid var(--line);
    justify-content:space-between;
  }
  .nav-links a:first-child{border-top:none}
  .nav-links a::after{content:"+"; font-family:"Space Grotesk"; color:var(--faint)}
  .nav-links a.active::after{color:var(--ink)}
}

/* ── 頁尾 ── */
.footer{border-top:1px solid var(--line); margin-top:70px; background:var(--panel)}
.footer-giant{
  font-family:"Space Grotesk"; font-weight:700; text-transform:uppercase;
  font-size:clamp(40px,11vw,120px); line-height:1; letter-spacing:.02em;
  padding:26px 16px 18px; color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap; overflow:hidden;
}
.footer-inner{width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto; display:grid; grid-template-columns:1fr; border-left:1px solid var(--line); border-right:1px solid var(--line)}
@media (min-width:700px){ .footer-inner{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.footer-inner > div{padding:24px 18px; border-bottom:1px solid var(--line)}
@media (min-width:700px){
  .footer-inner > div{border-bottom:none; border-right:1px solid var(--line)}
  .footer-inner > div:last-of-type{border-right:none}
}
.footer h4{font-size:11px; font-family:"Space Grotesk"; text-transform:uppercase; letter-spacing:.22em; color:var(--faint); margin-bottom:12px}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:8px}
.footer a{color:var(--muted); font-size:13.5px}
.footer a:hover{color:var(--ice)}
.footer .about{color:var(--muted); font-size:13px; line-height:1.8; max-width:320px}
.footer .copyright{grid-column:1/-1; color:var(--faint); font-size:11.5px;
  font-family:"IBM Plex Mono"; letter-spacing:.05em;
  border-top:1px solid var(--line); padding:14px 18px}

/* ── 版面容器 ── */
.wrap{width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto; padding:0 0 40px; background:rgba(251,251,248,.54); border-left:1px solid var(--line); border-right:1px solid var(--line)}
.wrap-narrow{width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto; padding:0 0 40px; background:rgba(251,251,248,.54); border-left:1px solid var(--line); border-right:1px solid var(--line)}
.detail-back{
  width:86px; height:86px; display:block; position:absolute; left:0; top:0;
  background:var(--panel); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--text); z-index:2;
}
.detail-back::before{
  content:""; position:absolute; left:34px; top:34px; width:22px; height:22px;
  border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.detail-back::after{
  content:""; position:absolute; left:30px; top:43px; width:30px; height:1.5px;
  background:currentColor;
}
.detail-back:hover{background:var(--ice); color:var(--ink)}
@media (max-width:760px){
  .detail-back{width:64px; height:64px}
  .detail-back::before{left:25px; top:25px; width:17px; height:17px}
  .detail-back::after{left:22px; top:32px; width:24px}
}

/* ── 頁面標頭(區塊式) ── */
.page-head{
  position:relative; margin:0; padding:40px 30px 34px;
  border-bottom:1px solid var(--line); text-align:left;
  background:var(--panel);
  overflow:hidden;
}
.page-head::before{
  content:attr(data-mark); position:absolute; right:28px; top:14px;
  font-family:"Space Grotesk"; font-weight:700; font-size:clamp(62px,10vw,154px);
  line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(32,33,36,.09);
  letter-spacing:.04em; pointer-events:none;
}
.page-head::after{
  content:""; position:absolute; right:0; bottom:0; width:34%; min-width:220px; height:48%;
  background-image:var(--paper-dot); background-size:4px 4px; opacity:.6; pointer-events:none;
  border-left:1px solid var(--line);
}
.eyebrow{
  font-family:"Space Grotesk"; text-transform:uppercase; letter-spacing:.26em;
  font-size:10.5px; color:var(--muted); margin-bottom:10px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--line)}
.page-head h1{
  font-size:clamp(52px,9vw,136px); font-weight:900; letter-spacing:0; line-height:.92;
  text-transform:uppercase;
  max-width:min(920px, 72vw);
}
.page-head-row{position:relative; z-index:1}
.library-actions{
  display:grid; grid-template-columns:1fr; gap:0; margin-top:18px;
  border:1px solid var(--line); width:100%; max-width:100%;
  background:var(--panel);
}
.library-actions a{
  min-height:112px; padding:16px 18px 14px;
  display:flex; flex-direction:column; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--line); color:var(--text);
  transition:background .15s, color .15s;
}
.library-actions a:last-child{border-bottom:none}
.library-actions a:hover{background:var(--ice); color:var(--ink)}
.library-actions b{
  font-size:clamp(16px,1.45vw,22px); line-height:1.2; letter-spacing:.04em; font-weight:900;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
}
.library-actions em{
  font-style:normal; color:var(--muted); font-size:12.5px; line-height:1.65;
  max-width:28em;
}
.library-actions span{
  font-family:"IBM Plex Mono"; font-size:11px; color:var(--faint);
  letter-spacing:.05em;
}
.library-actions a:hover em,
.library-actions a:hover span{color:rgba(255,255,255,.72)}
.library-switch{
  position:relative; z-index:2; margin-top:20px;
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  min-height:92px; padding:16px 18px 14px;
  border:1px solid var(--line); background:var(--panel);
  color:var(--text); transition:background .15s, color .15s;
}
.library-switch span{
  font-family:"IBM Plex Mono"; font-size:10px; letter-spacing:.18em;
  color:var(--faint);
}
.library-switch b{
  font-size:clamp(17px,1.8vw,24px); line-height:1.18; letter-spacing:.04em; font-weight:900;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
}
.library-switch::after{
  content:""; position:absolute; right:18px; bottom:18px; width:18px; height:18px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.library-switch:hover{background:var(--ice); color:var(--ink)}
.library-switch:hover span{color:rgba(255,255,255,.72)}
@media (min-width:960px){
  .page-head-row{display:block}
  .page-head-row h1{max-width:42%}
  .page-head:has(.library-actions){padding-right:30px}
  .page-head:has(.library-switch){padding-right:min(430px, 40vw); min-height:280px}
  .page-head:has(.library-switch) h1{max-width:58vw}
  .page-head:has(.library-switch) .lede{max-width:52vw}
  .library-actions{
    position:absolute; right:0; bottom:0; z-index:2;
    margin-top:0; width:min(77vw, 40%);
    margin-right:-31px; margin-bottom:-103px;
    grid-template-columns:1fr;
  }
  .library-actions a{min-height:86px; padding:12px 18px 11px}
  .library-actions a{border-right:none; border-bottom:1px solid var(--line)}
  .library-actions a:last-child{border-bottom:none}
  .library-switch{
    position:absolute; right:0; bottom:0; margin-top:0;
    width:min(36vw, 390px); min-height:112px;
    border-right:none; border-bottom:none;
  }
}
.title-en{
  display:block; font-family:"Space Grotesk"; color:transparent; -webkit-text-stroke:1.2px var(--text);
  text-transform:uppercase; letter-spacing:.03em; line-height:.92;
}
.title-zh{
  display:block; font-family:"Noto Sans TC",system-ui,sans-serif; color:var(--text);
  font-size:clamp(18px,2.4vw,34px); font-weight:900; line-height:1.25; letter-spacing:.02em;
  margin-top:12px;
}
.page-head .lede{color:var(--muted); font-size:14.5px; margin-top:14px; max-width:560px; line-height:1.85}
.page-head .lede b{color:var(--text)}

/* ── 麵包屑 ── */
.breadcrumb{margin:0; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel)}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:4px;
  font-family:"IBM Plex Mono"; font-size:11.5px; color:var(--faint); letter-spacing:.04em}
.breadcrumb li+li::before{content:"/"; margin:0 7px; color:var(--faint)}
.breadcrumb a{color:var(--muted)}
.breadcrumb [aria-current]{color:var(--text)}

/* ── 通用元件 ── */
.chip{
  font-size:10.5px; color:var(--muted); border:1px solid var(--line-2);
  padding:2px 9px; white-space:nowrap; display:inline-block;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; letter-spacing:.08em;
}
.chip.pair{color:var(--teal); border-color:var(--line-2)}
.chip.warn{color:var(--warn); border-color:var(--line-2)}
.chip.note{color:var(--faint)}
.chip.media{color:var(--ink); background:var(--ice); border-color:var(--ice); font-weight:700}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:10px 28px; cursor:pointer;
  font-size:13.5px; font-weight:700; letter-spacing:.14em;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
  background:var(--ice); color:var(--ink); border:1px solid var(--ice);
  transition:background .15s, color .15s;
}
.btn::after{content:"\2197"; font-family:"Space Grotesk"}
.btn:hover{background:var(--ice-2); border-color:var(--ice-2); color:var(--ink)}
.btn:active{background:var(--ice-2)}
.btn.ghost{background:var(--panel); border:1px solid var(--line); color:var(--text)}
.btn.ghost:hover{background:var(--ice); border-color:var(--ice); color:var(--ink)}

/* ── 搜尋與過濾(硬邊)── 向下捲動時黏在主選單下方 */
.toolbar{
  display:flex; flex-direction:column; gap:0; margin:0;
  border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:55px; z-index:34;
  box-shadow:0 10px 20px -18px rgba(32,33,36,.35);
}
.search{position:relative; border-bottom:1px solid var(--line)}
.search svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none}
.search input{
  width:100%; min-height:52px; font-family:inherit; font-size:14px; color:var(--text);
  background:transparent; border:none; padding:10px 48px 10px 44px;
  -webkit-appearance:none; appearance:none;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none; background:var(--bg-2)}
.search input::-webkit-search-cancel-button{display:none}
.q-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:none; background:transparent;
  color:var(--faint); font-size:16px; cursor:pointer; line-height:1;
}
.fbar{
  display:flex; align-items:center; align-content:flex-start; gap:0; flex-wrap:wrap; padding:0 16px 0 0;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 43px,
      var(--line) 43px 44px);
}
.fchip{
  min-height:44px; padding:3px 16px; cursor:pointer;
  background:transparent; border:none; border-right:1px solid var(--line);
  color:var(--muted); font-size:12px; letter-spacing:.08em;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif;
  transition:background .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.fchip:hover{color:var(--text); background:var(--bg-2)}
.fchip.on{
  background:var(--bg-2); color:var(--text); font-weight:700;
  box-shadow:inset 0 0 0 1px var(--text);
}
.fdiv{width:0}
.fsel{
  min-height:44px; padding:3px 14px; cursor:pointer;
  background:transparent; border:none; border-right:1px solid var(--line);
  color:var(--muted); font-size:12.5px; font-family:inherit;
}
.step-chipbar{display:none}
@media (min-width:760px){
  .step-select{display:none}
  .step-chipbar{
    display:flex; flex:1 1 auto; min-width:0; flex-wrap:wrap;
    background:
      repeating-linear-gradient(to bottom,
        transparent 0 43px,
        var(--line) 43px 44px);
  }
}
/* 工具頁:搜尋框與過濾列合併同一行 */
.toolbar-row{flex-direction:row; flex-wrap:wrap; align-items:stretch}
.toolbar-row .search{
  flex:1 1 250px; min-width:220px; border-bottom:none; border-right:1px solid var(--line);
}
.toolbar-row .fbar{flex:999 1 auto; padding-right:12px}
@media (max-width:759px){
  .toolbar-row .search{flex:1 1 100%; border-right:none; border-bottom:1px solid var(--line)}
}
/* 熱門單項 chips */
.fchip.preset{color:var(--text); font-weight:700}
.fchip.preset:hover{background:var(--bg-2); color:var(--text)}
.rcount{margin-left:auto; font-family:"IBM Plex Mono"; font-size:11px; color:var(--faint); white-space:nowrap; padding:8px 0 8px 12px}

/* ── 索引列(評選式目錄,資料庫用) ── */
.xlist{display:flex; flex-direction:column; margin:0}
.xrow{
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px;
  padding:16px; border-bottom:1px solid var(--line); color:var(--text);
  transition:background .12s, color .12s;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:760px){ .xrow{grid-template-columns:70px 1.3fr 1fr auto; padding:18px 20px} }
.xrow:hover, .xrow:active{background:var(--ice); color:var(--ink)}
.xrow:hover *, .xrow:active *{color:var(--ink) !important; border-color:var(--ink) !important}
.xnum{font-family:"IBM Plex Mono"; font-size:12px; color:var(--faint); letter-spacing:.05em}
.xmain{min-width:0}
.xmain b{font-size:clamp(16px,4vw,22px); font-weight:900; letter-spacing:.01em; display:block; line-height:1.3}
.xmain i{font-family:"Space Grotesk"; font-style:normal; font-size:10px; color:var(--faint);
  letter-spacing:.16em; text-transform:uppercase}
.xsum{display:block; color:var(--muted); font-size:12px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xmeta{display:none; gap:6px; flex-wrap:wrap}
@media (min-width:760px){ .xmeta{display:flex} }
.xarrow{font-family:"Space Grotesk"; font-size:22px; color:var(--faint); font-weight:700}
.no-result{text-align:center; color:var(--faint); font-size:13.5px; padding:40px 10px; line-height:1.9; border-bottom:1px solid var(--line)}
.no-result button{
  display:inline-block; margin-top:6px; min-height:40px; padding:6px 18px;
  background:none; border:1px solid var(--line-2); color:var(--ice); font-size:12.5px; cursor:pointer;
}
.trunc-note{grid-column:1/-1; text-align:center; color:var(--faint); font-size:12px; padding:12px 0}

/* ── 卡片(工具內與資料庫入口共用) ── */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:0}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1120px){ .cards{grid-template-columns:repeat(4,1fr)} }
.cards .no-result{grid-column:1/-1; background:var(--panel); border:none}
.cards .trunc-note{background:var(--panel)}
.card{position:relative; display:block; text-align:left; cursor:pointer; color:var(--text); background:var(--panel); -webkit-tap-highlight-color:transparent}
.card:hover{color:var(--text)}
.card-inner{
  position:relative; height:100%; overflow:hidden;
  background:linear-gradient(170deg, rgba(255,255,255,.86), rgba(241,241,238,.78));
  transition:background .15s;
}
.card-inner:active{background:var(--bg-2)}
.card:hover .card-inner{background:var(--panel-2)}
.card.selected .card-inner{box-shadow:inset 0 0 0 2px var(--ice)}
.thumb{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line)}
.thumb::before{
  content:"+"; position:absolute; top:4px; left:7px; z-index:1;
  color:rgba(255,255,255,.42); font-family:"Space Grotesk"; font-size:13px; pointer-events:none;
}
.thumb,.show-thumb,.entry-hero,.d-thumb{filter:grayscale(1) saturate(.08) contrast(.96)}
.thumb .ghost{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:7px 10px;
  font-family:"Space Grotesk"; font-weight:700; font-size:clamp(11px,3vw,15px);
  letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.4);
  line-height:1.1; pointer-events:none; white-space:nowrap; overflow:hidden;
}
.thumb .cat-label{
  position:absolute; top:0; right:0; z-index:2; font-family:"IBM Plex Mono";
  font-size:9px; letter-spacing:.05em; color:var(--ink);
  background:rgba(30,31,33,.88); padding:2px 8px; border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
.thumb video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.flash{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(circle at 50% 55%, rgba(255,255,255,.95), rgba(32,33,36,.16) 45%, transparent 75%);
  animation:flash .55s ease-out both;
}
@keyframes flash{from{opacity:.95}to{opacity:0; transform:scale(1.25)}}
.stamp{
  position:absolute; top:8px; left:9px; z-index:4; transform:rotate(-6deg);
  font-weight:700; font-size:10px; letter-spacing:.1em;
  color:var(--ink); background:var(--ice); padding:2px 7px;
  opacity:0; pointer-events:none;
}
.card.selected .stamp{opacity:1; animation:stampIn .34s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stampIn{from{opacity:0; transform:rotate(-6deg) scale(1.8)}to{opacity:1; transform:rotate(-6deg) scale(1)}}
.card-body{display:block; padding:9px 10px 10px}
.card.has-qadd .card-body{padding-right:46px}
.titles{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.titles b{font-size:13.5px; font-weight:900}
.titles i{font-family:"Space Grotesk"; font-style:normal; font-size:8.5px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; display:none}
.summary{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
  color:var(--muted); font-size:11.5px; line-height:1.5; margin-top:3px;
}
.meta{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:7px}
.meta .chip{font-size:9.5px; padding:0 6px}
@media (min-width:700px){
  .card-body{padding:12px 13px 13px}
  .card.has-qadd .card-body{padding-right:52px}
  .titles b{font-size:15.5px}
  .titles i{font-size:9.5px; display:inline}
  .summary{-webkit-line-clamp:2; font-size:12.5px; margin-top:4px}
  .meta{margin-top:9px; gap:5px}
  .meta .chip{font-size:10.5px; padding:1px 8px}
}
.qadd{
  position:absolute; right:0; bottom:0; z-index:4;
  width:42px; height:42px; cursor:pointer;
  background:var(--bg-2); border:none; border-left:1px solid var(--line); border-top:1px solid var(--line);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.qadd:hover{background:var(--ice); color:var(--ink)}
.qadd:active{background:var(--ice-2); color:var(--ink)}
.card.selected .qadd{background:var(--ice); color:var(--ink)}

/* ── 首頁:巨型 hero ── */
.hero{
  position:relative; min-height:600px;
  display:grid; grid-template-columns:minmax(430px, .48fr) minmax(500px, .92fr);
  margin:0; border-bottom:1px solid var(--line); background:var(--panel);
  overflow:hidden;
}
.hero-copy{
  grid-column:1; grid-row:1; position:relative; z-index:1;
  min-height:600px; display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-carousel{
  position:relative; grid-column:2; grid-row:1; min-height:600px;
  border-left:1px solid var(--line); overflow:hidden; background:#d6d6d1;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .32s ease;
  display:block; color:var(--text); cursor:pointer;
  background:#c9c9c4; /* 單色灰佔位:正式版換 AI 影像優選置頂作品影片 */
}
.hero-slide:nth-child(2){background:#bcbcb6}
.hero-slide:nth-child(3){background:#d2d2cc}
.hero-slide.on{opacity:1; pointer-events:auto}
.hero-slide:not(.on){pointer-events:none}
.hero-slide::after{
  content:attr(data-slide); position:absolute; right:28px; top:22px;
  font-family:"Space Grotesk"; font-size:clamp(70px,10vw,150px); font-weight:700;
  color:transparent; -webkit-text-stroke:1px rgba(32,33,36,.16); line-height:1;
  pointer-events:none;
}
.hero-video-mark{
  position:absolute; left:24px; top:22px; z-index:1;
  font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.22em; color:rgba(32,33,36,.55);
}
.slide-info{
  position:absolute; left:24px; bottom:22px; z-index:1;
  display:flex; flex-direction:column; gap:2px; max-width:70%;
}
.slide-info b{font-size:clamp(20px,2.6vw,30px); font-weight:900; line-height:1.3}
.slide-info i{
  font-style:normal; font-family:"Space Grotesk"; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(32,33,36,.55);
}
.slide-info em{
  font-style:normal; margin-top:10px; align-self:flex-start;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--text); padding-bottom:2px;
  transition:letter-spacing .2s;
}
.slide-info em::after{
  content:"\2197";
  font-family:"Space Grotesk";
  margin-left:7px;
}
.hero-slide:hover .slide-info em{letter-spacing:.24em}
.hero-carousel-nav{
  position:absolute; right:0; bottom:0; z-index:2; display:flex; border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.hero-carousel-nav button{
  width:64px; height:64px; border:none; border-right:1px solid var(--line);
  background:var(--panel); cursor:pointer; position:relative;
}
.hero-carousel-nav button:last-child{border-right:none}
.hero-carousel-nav button::before{
  content:""; position:absolute; inset:0; margin:auto; width:17px; height:17px;
  border-top:1.5px solid var(--text); border-left:1.5px solid var(--text);
}
.hero-carousel-nav [data-hero-prev]::before{transform:rotate(-45deg); left:8px}
.hero-carousel-nav [data-hero-next]::before{transform:rotate(135deg); right:8px}
.hero-carousel-nav button:hover{background:var(--ice)}
.hero-carousel-nav button:hover::before{border-color:var(--ink)}
.hero .eyebrow{margin:0 30px 12px; max-width:380px}
.hero h1{
  margin:0 30px; max-width:520px; font-size:clamp(38px,4.2vw,56px); font-weight:900;
  line-height:.93; letter-spacing:0; text-transform:uppercase;
}
.hero h1 .title-en{letter-spacing:.02em; overflow-wrap:normal}
.hero h1 .title-zh{font-size:clamp(24px,2.5vw,34px); margin-top:16px}
.hero .lede{margin:18px 30px 0; max-width:390px; color:var(--muted); font-size:14.5px; line-height:1.85}
.hero .hero-cta{
  display:flex; flex-wrap:wrap; gap:0; margin:34px 0 0;
  border-top:1px solid var(--line);
}
.hero .hero-cta .btn{flex:1; min-width:210px; min-height:68px; border:none; border-right:1px solid var(--line)}
@media (max-width:980px){
  .hero{grid-template-columns:1fr; min-height:auto}
  .hero-carousel{grid-column:1; grid-row:1; min-height:280px; border-left:none; border-bottom:1px solid var(--line)}
  .hero-copy{grid-column:1; grid-row:2; min-height:auto}
  .hero .eyebrow{margin:28px 22px 10px}
  .hero h1,.hero .lede{margin-left:22px; margin-right:22px}
  .hero h1{max-width:calc(100% - 44px)}
  .hero-carousel-nav button{width:54px; height:54px}
}
.hero-giant{
  border-bottom:1px solid var(--line); margin:0; padding:40px 30px 26px;
  position:relative; overflow:hidden;
  background:var(--panel);
}
.hero-giant .kicker{
  font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.2em; color:var(--faint);
  display:flex; justify-content:space-between; margin-bottom:18px;
}
.hero-giant h1{
  font-weight:900; line-height:.95; letter-spacing:.01em;
  font-size:clamp(64px,17vw,190px);
}
.hero-giant h1 .row2{
  display:block; font-family:"Space Grotesk"; text-transform:uppercase;
  font-size:clamp(28px,7.4vw,84px); letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:1.5px var(--text); margin-top:6px;
}
.hero-giant .lede{color:var(--muted); font-size:14.5px; max-width:460px; line-height:1.9; margin-top:20px}
.hero-cta{display:flex; gap:0; flex-wrap:wrap; margin:26px -30px -26px; border-top:1px solid var(--line)}
.hero-cta .btn{flex:1; min-width:200px; min-height:60px; border:none; border-right:1px solid var(--line)}
.hero-cta .btn.ghost{border:none; border-right:1px solid var(--line)}

/* ── 首頁:編號索引列 ── */
.xindex{margin:0}
.xindex .xrow{grid-template-columns:56px 1fr auto; padding:22px 16px}
@media (min-width:760px){ .xindex .xrow{grid-template-columns:90px 1fr 1.1fr auto; padding:30px 24px} }
.xindex .xnum{font-size:14px}
.xindex .xmain b{
  font-size:clamp(24px,6.5vw,44px); text-transform:uppercase; font-weight:900;
}
.xindex .xmain i{font-size:11px}
.xindex .xdesc{display:none; color:var(--muted); font-size:13px; line-height:1.75}
@media (min-width:760px){ .xindex .xdesc{display:block} }
.xindex .xarrow{font-size:clamp(22px,5vw,34px)}

/* ── 首頁:小節標題 ── */
.sub-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0; padding:16px 24px; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.sub-head h2{
  font-size:clamp(18px,4.6vw,26px); font-weight:900; text-transform:uppercase; letter-spacing:.03em;
  display:flex; align-items:baseline; gap:12px;
}
.sub-head h2 .idx{font-family:"IBM Plex Mono"; font-size:12px; color:var(--ice); font-weight:400}
.sub-head .more{font-family:"Space Grotesk"; font-size:12px; letter-spacing:.12em; text-transform:uppercase}

/* ── AI 影像優選:馬賽克拼貼 ── */
.mosaic,.show-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:0; border-left:none; border-right:none}
@media (min-width:960px){ .mosaic{grid-template-columns:repeat(4,1fr)} }
@media (min-width:960px){ .show-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1280px){ .show-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:960px){
  .show-grid .show-card.wide{grid-column:span 2}
  .show-grid .show-card.wide .show-thumb{aspect-ratio:21/8}
  .show-grid .show-card.tall{grid-row:span 2}
  .show-grid .show-card.tall .show-thumb{flex:1; min-height:420px; aspect-ratio:auto}
  .show-grid .show-card.square .show-thumb{aspect-ratio:1/1}
  .show-grid .show-card.offset{margin-top:42px}
}
.mosaic .no-result,.show-grid .no-result{grid-column:1/-1; background:var(--panel); border:none}
.show-card{display:flex; flex-direction:column; color:var(--text); background:var(--panel); position:relative; -webkit-tap-highlight-color:transparent}
.show-card:hover{color:var(--text)}
.show-card.featured{grid-column:span 2}
@media (min-width:960px){ .show-card.featured{grid-row:span 2} }
.show-thumb{position:relative; aspect-ratio:16/10; flex:none; display:block; border-bottom:1px solid var(--line)}
.show-card.featured .show-thumb{flex:1; min-height:220px; aspect-ratio:auto}
.show-thumb::before{content:"+"; position:absolute; top:4px; left:8px; color:rgba(255,255,255,.45); font-family:"Space Grotesk"; font-size:13px}
.show-thumb .ghost{
  position:absolute; left:13px; bottom:10px; font-family:"Space Grotesk"; font-weight:700;
  font-size:clamp(14px,3.4vw,22px); letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.show-thumb .score-badge{
  position:absolute; top:0; right:0;
  font-family:"Space Grotesk"; font-weight:700; font-size:clamp(16px,4vw,24px); color:var(--ink);
  background:var(--ice); padding:4px 12px;
}
.ffa-ribbon{
  position:absolute; left:0; top:0; z-index:4;
  width:96px; height:68px; padding:8px 26px 7px 10px;
  display:flex; flex-direction:column; justify-content:flex-start; gap:1px;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
  color:var(--ink); background:var(--ice);
  clip-path:polygon(0 0, 100% 0, 76% 100%, 0 100%);
  border-right:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25);
}
.ffa-ribbon b{font-size:18px; line-height:1; letter-spacing:.05em}
.ffa-ribbon i{font-style:normal; font-size:9px; line-height:1.1; letter-spacing:.16em}
.ffa-ribbon::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image:linear-gradient(135deg, rgba(255,255,255,.7) 0 1px, transparent 1px 7px);
}
.ffa-ribbon.award-year{background:#111214}
.ffa-ribbon.award-quarter{background:#363738}
.ffa-ribbon.award-month{background:#5a5b5b}
.ffa-ribbon.award-sotd{background:#777874}
.ffa-ribbon.award-honor{background:#f4f4f0; color:var(--text); border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.ffa-ribbon.award-honor::after{opacity:.12; background-image:var(--paper-dot); background-size:4px 4px}
.entry-hero .ffa-ribbon{width:120px; height:84px; padding:11px 34px 9px 13px}
.entry-hero .ffa-ribbon b{font-size:24px}
.entry-hero .ffa-ribbon i{font-size:10px}
.entry-hero .detail-back{z-index:6}
.entry-hero .detail-back + .ffa-ribbon{left:86px}
@media (max-width:760px){
  .entry-hero .detail-back + .ffa-ribbon{left:64px}
}
.show-body{padding:12px 14px 14px; display:block}
.show-card:hover .show-body{background:var(--bg-2)}
.show-body h3{font-size:16.5px; font-weight:900}
.show-body h3 i{font-family:"Space Grotesk"; font-style:normal; font-size:10px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; margin-left:7px}
.show-body .by{color:var(--faint); font-size:11.5px; margin-top:2px; font-family:"IBM Plex Mono"; letter-spacing:.02em; display:block}
.show-body p{color:var(--muted); font-size:12.5px; margin-top:7px; line-height:1.65;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.show-body .meta{margin-top:10px}

/* 評分條 */
.scorebars{display:flex; flex-direction:column; gap:0; border:1px solid var(--line)}
.scorebar{display:grid; grid-template-columns:110px 1fr 52px; align-items:center; gap:0; border-bottom:1px solid var(--line)}
.scorebar:last-child{border-bottom:none}
.scorebar .sn{font-size:12px; color:var(--muted); padding:10px 12px; border-right:1px solid var(--line);
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; letter-spacing:.04em}
.scorebar .sb{height:10px; background:var(--panel); margin:0 12px; overflow:hidden}
.scorebar .sb i{display:block; height:100%; width:0;
  background:var(--ice); transition:width .7s cubic-bezier(.4,0,.2,1)}
.scorebar .sv{font-family:"Space Grotesk"; font-size:14px; color:var(--text); text-align:center; font-weight:700;
  padding:10px 0; border-left:1px solid var(--line)}
.overall{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--ice); margin-bottom:16px;
}
.overall b{
  font-family:"Space Grotesk"; font-size:clamp(34px,8vw,52px); color:var(--ink); font-weight:700;
  background:var(--ice); padding:6px 22px; line-height:1.2;
}
.overall span{color:var(--muted); font-size:13px; line-height:1.6; padding:10px 16px}

/* ── 資料庫入口卡 ── */
.lib-sections,.sections{display:grid; gap:1px; grid-template-columns:1fr; margin:0; background:var(--line); border-bottom:1px solid var(--line)}
@media (min-width:700px){ .lib-sections{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .sections{grid-template-columns:1.18fr .82fr 1fr; align-items:stretch} }
.section-card{
  position:relative; display:block; color:var(--text); background:var(--panel);
  padding:72px 22px 26px;
  transition:background .15s;
}
.sections .section-card:nth-child(1){min-height:260px}
.sections .section-card:nth-child(3){padding-bottom:58px}
.sections .section-card::before{
  content:attr(data-index); position:absolute; left:22px; top:18px;
  font-family:"Space Grotesk"; font-weight:700; font-size:46px; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(32,33,36,.18);
}
.section-card:hover{background:var(--ice); color:var(--ink)}
.section-card:hover *{color:var(--ink) !important; border-color:rgba(255,255,255,.4) !important}
.section-card svg{width:32px; height:32px; color:var(--muted); margin-bottom:16px}
.section-card h2{font-size:clamp(19px,4.6vw,26px); font-weight:900; margin-bottom:8px; text-transform:uppercase; letter-spacing:.02em}
.section-card p{color:var(--muted); font-size:13px; line-height:1.8}
.section-card .go{
  display:inline-block; margin-top:16px; font-size:12px; color:var(--text); font-weight:700;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; letter-spacing:.14em; text-transform:uppercase;
}
.section-card .count{
  position:absolute; top:0; right:0; font-family:"IBM Plex Mono";
  font-size:11px; color:var(--faint); padding:8px 12px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:699px){
  .sections{
    grid-template-columns:1fr 1fr;
  }
  .sections .section-card{
    min-height:0; padding:52px 14px 16px;
  }
  .sections .section-card:nth-child(1){
    grid-column:1/-1; min-height:190px; padding:58px 18px 18px;
  }
  .sections .section-card:nth-child(2),
  .sections .section-card:nth-child(3){
    min-height:188px; padding-top:46px;
  }
  .sections .section-card:nth-child(3){padding-bottom:16px}
  .sections .section-card::before{
    left:14px; top:12px; font-size:34px;
  }
  .sections .section-card:nth-child(1)::before{
    left:18px; top:14px; font-size:38px;
  }
  .section-card svg{
    width:24px; height:24px; margin-bottom:12px;
  }
  .sections .section-card:nth-child(n+2) svg{display:none}
  .section-card h2{
    font-size:clamp(16px,4.7vw,22px); line-height:1.22; margin-bottom:7px;
  }
  .sections .section-card:nth-child(n+2) h2{
    font-size:clamp(15px,4.2vw,18px);
  }
  .section-card p{
    font-size:12px; line-height:1.65;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  }
  .sections .section-card:nth-child(n+2) p{-webkit-line-clamp:2}
  .section-card .go{
    margin-top:12px; font-size:10.5px; letter-spacing:.08em;
  }
  .sections .section-card:nth-child(n+2) .go{
    position:absolute; left:14px; right:14px; bottom:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .section-card .count{
    font-size:10px; padding:5px 8px;
  }
}

/* ── 統計區塊 ── */
.home-sub{background:var(--panel)}
.shared-note{
  margin:0; padding:18px 24px 20px;
  color:var(--muted); font-size:13.5px; line-height:1.85;
  border-bottom:1px solid var(--line);
}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:0; border-left:none; border-right:none}
@media (min-width:700px){ .stats{grid-template-columns:1.4fr .8fr 1fr 1.15fr; align-items:stretch} }
@media (min-width:960px){
  .stat:nth-child(1){grid-row:span 2; min-height:190px}
  .stat:nth-child(3){margin-top:28px}
}
.stat{background:var(--panel); padding:22px 16px 18px; text-align:left; position:relative; overflow:hidden}
.stat::before{content:"+"; position:absolute; top:4px; right:10px; color:var(--faint); font-family:"Space Grotesk"; font-size:13px}
.stat::after{content:""; position:absolute; inset:0; background-image:var(--paper-dot); background-size:4px 4px; opacity:.22; pointer-events:none}
.stat b{display:block; font-family:"Space Grotesk"; font-size:clamp(34px,7vw,76px); color:transparent; -webkit-text-stroke:1px var(--text); line-height:1.05}
.stat span{font-size:11.5px; color:var(--faint); font-family:"Space Grotesk","Noto Sans TC",sans-serif; letter-spacing:.1em; text-transform:uppercase}

/* ── 單篇文章頁 ── */
.entry{width:100%; max-width:none; margin:0 auto; padding:0 30px 40px; background:var(--panel); border-left:none; border-right:none}
/* 主圖:中間保留 16:9,左右灰色網點 */
.entry-hero{
  position:relative; overflow:hidden; margin:0 -30px 0;
  border-bottom:1px solid var(--line);
  height:clamp(360px, 55vh, 720px);
  display:flex; justify-content:center;
  background-color:var(--bg-2);
  background-image:var(--paper-dot); background-size:5px 5px;
}
.entry-hero .hero-media{
  position:relative; flex:none; height:100%; aspect-ratio:16/9; max-width:100%;
  overflow:hidden;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.entry-hero::after{
  content:"+"; position:absolute; top:4px; left:10px;
  color:var(--faint); font-family:"Space Grotesk"; font-size:14px; z-index:1; pointer-events:none;
}
@media (max-width:700px){
  .entry-hero{height:auto; display:block; background-image:none}
  .entry-hero .hero-media{aspect-ratio:16/9; height:auto; width:100%; border-left:none; border-right:none}
  .entry-hero::after{display:none}
}
.entry-hero::before{content:"+"; position:absolute; top:4px; right:12px; color:var(--faint); font-family:"Space Grotesk"; font-size:14px; z-index:1}
.entry-hero .ghost{position:absolute; left:16px; bottom:12px; font-family:"Space Grotesk"; font-weight:700;
  font-size:clamp(20px,6vw,34px); letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.entry-hero .cat-label{position:absolute; top:0; right:0; font-family:"IBM Plex Mono"; font-size:10px; color:var(--ink);
  background:rgba(30,31,33,.88); padding:3px 10px; border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.entry-hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.entry h1{font-size:clamp(44px,8vw,112px); font-weight:900; line-height:.95; margin-top:22px; max-width:min(1080px, 86vw)}
.entry h1 .title-zh{font-size:clamp(24px,3.2vw,42px)}
.entry .entry-step{font-family:"Space Grotesk"; font-size:10.5px; text-transform:uppercase; letter-spacing:.22em; color:var(--ice); margin-top:22px; display:block}
.entry .entry-step + h1{margin-top:6px}
.entry .lede{color:var(--muted); font-size:15px; line-height:1.9; margin-top:14px}
.entry-meta{display:flex; gap:5px; flex-wrap:wrap; margin-top:16px}
.entry section{margin-top:36px}
.entry h2{
  font-size:15px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; margin-bottom:14px;
  display:flex; align-items:center; gap:12px;
}
.entry h2::before{content:"//"; color:var(--ice); font-family:"Space Grotesk"}
.entry h2::after{content:""; flex:1; height:1px; background:var(--line)}
.entry-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}

/* 輸出欄位 */
.out-label{
  font-family:"Space Grotesk"; font-size:10px; text-transform:uppercase;
  letter-spacing:.2em; color:var(--faint); margin-bottom:7px;
  display:flex; align-items:center; justify-content:space-between;
}
.mini-copy{
  font-size:11px; letter-spacing:.1em; color:var(--ice); background:none; text-transform:uppercase;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif;
  border:1px solid var(--line-2); padding:5px 14px; cursor:pointer; min-height:28px;
  transition:background .15s, color .15s;
}
.mini-copy:hover{background:var(--ice); color:var(--ink); border-color:var(--ice)}
.out-code{
  display:block; font-family:"IBM Plex Mono"; font-size:12.5px; line-height:1.7;
  color:var(--text); background:var(--bg-2); border:1px solid var(--line);
  border-left:3px solid var(--ice);
  padding:12px 14px; word-break:break-word;
}
.out-code.neg{color:var(--muted); border-left-color:var(--warn)}
.out-zh{font-size:13.5px; color:var(--muted); line-height:1.8}
.out-notes{font-size:12.5px; color:var(--faint); line-height:1.8}
.out-notes b{color:var(--muted); font-weight:500}
.out-block{margin-bottom:20px}

/* 工具穩定度條 */
.tools{display:flex; flex-direction:column; gap:0; border:1px solid var(--line)}
.tool-row{display:grid; grid-template-columns:minmax(156px, 22%) 1fr 40px; align-items:center; gap:0; border-bottom:1px solid var(--line)}
.tool-row:last-child{border-bottom:none}
.tool-row .tn{
  font-family:"Space Grotesk"; font-size:11.5px; letter-spacing:.02em; color:var(--muted);
  padding:9px 12px; border-right:1px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tool-row .tb{height:9px; background:var(--panel); margin:0 12px; overflow:hidden}
.tool-row .tb i{display:block; height:100%; width:0;
  background:var(--line-2); transition:width .7s cubic-bezier(.4,0,.2,1)}
.tool-row .ts{font-family:"IBM Plex Mono"; font-size:11px; color:var(--faint); text-align:center; padding:9px 0; border-left:1px solid var(--line)}
.tool-row.best .tn{color:var(--ink); background:var(--ice); font-weight:700}
.tool-row.best .tb i{background:var(--ice)}
.tool-row.best .ts{color:var(--ice)}
@media (max-width:520px){
  .tool-row{grid-template-columns:142px minmax(54px,1fr) 36px}
  .tool-row .tn{font-size:10.5px; padding-left:9px; padding-right:9px}
  .tool-row .tb{margin:0 8px}
}
.tool-pick{
  margin-top:12px; font-size:13.5px; color:var(--text);
  border:1px solid var(--line-2); border-left:3px solid var(--ice); padding:10px 14px;
}
.tool-pick strong{color:var(--ice); font-weight:700}

/* 相關連結 */
.rel-list{display:flex; gap:6px; flex-wrap:wrap}
.rel{
  display:inline-flex; align-items:center; min-height:38px; padding:5px 15px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2);
  font-size:12.5px; color:var(--text);
  transition:background .15s, color .15s;
}
.rel:hover{background:var(--ice); color:var(--ink); border-color:var(--ice)}
.rel.pair{border-color:var(--line-2); color:var(--teal)}
.rel.conf{border-color:var(--line-2); color:var(--warn)}

/* 配方拆解 */
.breakdown-list{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:760px){ .breakdown-list{grid-template-columns:repeat(3,1fr)} }
.breakdown-item{
  min-height:150px; display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  padding:16px; background:var(--panel); color:var(--text);
  transition:background .15s, color .15s;
}
.breakdown-item span{
  font-family:"IBM Plex Mono"; font-size:10.5px; letter-spacing:.14em;
  color:var(--faint); text-transform:uppercase;
}
.breakdown-item b{font-size:18px; line-height:1.25; font-weight:900}
.breakdown-item p{color:var(--muted); font-size:12.5px; line-height:1.7}
.breakdown-item:hover{background:var(--ice); color:var(--ink)}
.breakdown-item:hover *{color:var(--ink) !important}

/* 文字頁 */
.text-page{background:var(--panel)}
.text-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border-bottom:1px solid var(--line);
}
@media (min-width:900px){ .text-grid{grid-template-columns:1fr 1fr} }
.text-block{
  min-height:220px; padding:28px 24px; background:var(--panel);
  display:flex; flex-direction:column; gap:12px;
}
.text-block.wide{grid-column:1/-1}
.text-block h2{
  font-size:18px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif;
}
.text-block p,.text-block li{color:var(--muted); font-size:14px; line-height:1.9}
.text-block ul{list-style:none; display:grid; gap:8px}
.text-block li::before{content:"+"; margin-right:9px; color:var(--text); font-family:"Space Grotesk"}
.text-block .btn{align-self:flex-start; margin-top:auto}

/* ============================================================
   配方工具專用
   ============================================================ */
.tool-stage{width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto; padding:8px 0 calc(var(--dock-h) + var(--safe-b) + 16px); position:relative}
.tool-status{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto 2px; padding:8px 0;
  font-family:"IBM Plex Mono"; font-size:12px; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.tool-status b{color:var(--ice)}
.tool-status .bar{flex:1; height:5px; background:var(--panel); overflow:hidden}
.tool-status .bar i{display:block; height:100%; width:0;
  background:var(--ice); transition:width .5s cubic-bezier(.4,0,.2,1)}
.step-head{position:relative; margin:12px 0 14px; text-align:center}
.bignum{
  position:absolute; right:0; top:-20px; z-index:-1;
  font-family:"Space Grotesk"; font-weight:700; font-size:clamp(58px,15vw,110px);
  color:transparent; -webkit-text-stroke:1px rgba(32,33,36,.14); line-height:1;
  letter-spacing:-.04em; pointer-events:none; user-select:none;
}
@media (min-width:700px){ .bignum{right:auto; left:50%; transform:translateX(-50%); opacity:.75} }
.step-head .eyebrow{justify-content:center; margin-bottom:5px; font-size:10px}
.step-head .eyebrow::after{display:none}
.step-head h1{font-size:clamp(42px,8vw,112px); font-weight:900; letter-spacing:0; line-height:.95; min-height:1.25em; text-transform:uppercase}
.step-head h1.tool-title{position:relative; display:inline-block; padding-bottom:.34em}
.step-head h1.tool-title .title-en{line-height:.88}
.step-head h1.tool-title .title-zh{
  position:absolute; left:50%; top:56%; z-index:2; margin-top:0;
  transform:translate(-50%, -50%);
  font-size:28px; line-height:1.06; text-align:center; white-space:nowrap;
  color:var(--text);
  -webkit-text-stroke:6px rgba(231,231,228,.96);
  paint-order:stroke fill;
  text-shadow:
    0 0 0 var(--text),
    1px 0 0 rgba(231,231,228,.96),
    -1px 0 0 rgba(231,231,228,.96),
    0 1px 0 rgba(231,231,228,.96),
    0 -1px 0 rgba(231,231,228,.96);
}
.kchar{display:inline-block; animation:charIn .55s cubic-bezier(.2,.9,.25,1) both}
@keyframes charIn{from{transform:translateY(.65em) rotate(5deg); opacity:0}}
.step-head .hint{
  color:var(--muted); font-size:12.5px; margin-top:-33px;
  position:relative; z-index:3;
}
@media (max-width:999px){
  .step-head{margin:16px 0 18px}
  .step-head h1{font-size:clamp(34px,9vw,78px); min-height:0}
  .step-head h1.tool-title{
    display:block; padding-bottom:0;
  }
  .step-head h1.tool-title .title-en{
    line-height:.92;
  }
  .step-head h1.tool-title .title-zh{
    position:static; transform:none; margin-top:8px;
    font-size:clamp(23px,6.2vw,32px); line-height:1.18; white-space:normal;
    -webkit-text-stroke:0; paint-order:normal; text-shadow:none;
  }
  .step-head .hint{
    margin-top:6px; font-size:12.5px; line-height:1.55;
  }
  .bignum{opacity:.5}
}
.tool-stage .toolbar{margin:0 0 0; border:1px solid var(--line)}
.tool-stage .cards{border-top:none}
.flow-nav{display:flex; align-items:stretch; justify-content:center; gap:0; margin:0 0 13px; border:1px solid var(--line); border-top:none}
.flow-nav button{
  flex:1; min-height:52px; cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.1em;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
  background:transparent; border:none;
  transition:background .15s, color .15s;
}
.flow-nav button:first-child{border-right:1px solid var(--line)}
.flow-nav button:last-child{border-left:1px solid var(--line)}
.flow-nav button:hover:not(:disabled){background:var(--ice); color:var(--ink)}
.flow-nav button:disabled{opacity:.28; cursor:default}
.flow-nav .pos{font-family:"IBM Plex Mono"; font-size:12.5px; color:var(--faint); white-space:nowrap; min-width:88px; display:flex; align-items:center; justify-content:center}
@keyframes nudge{0%,100%{background:transparent; color:var(--text)} 50%{background:var(--ice); color:var(--ink)}}
.flow-nav button.pulse{animation:nudge 1s ease 2}

/* 電影遮幅 */
.lbar{position:fixed; left:0; right:0; z-index:55; height:0; background:#000;
  transition:height .28s cubic-bezier(.4,0,.2,1); pointer-events:none}
.lbar.top{top:0}.lbar.bottom{bottom:0}
body.transiting .lbar{height:22px}

/* 負片配方軌 */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:0 0 var(--safe-b);
  background:rgba(251,251,248,.92); backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
}
.dock-inner{display:flex; align-items:stretch; gap:0; width:calc(100% - (var(--edge) * 2)); max-width:none; margin:0 auto}
.strip{
  flex:1; display:flex; gap:0; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:10px 22px 10px 8px;
}
.strip::-webkit-scrollbar{display:none}
@media (min-width:700px){
  .strip .frame:first-child{margin-left:auto}
  .strip .frame:last-child{margin-right:auto}
}
.frame{
  position:relative; flex:none; width:66px; height:64px; margin-right:4px;
  background:var(--panel); border:1px solid var(--line);
  cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:border-color .2s, background .3s;
  -webkit-tap-highlight-color:transparent;
}
.frame::before,.frame::after{
  content:""; position:absolute; left:0; right:0; height:5px;
  background-image:radial-gradient(circle at 4px 2.5px, rgba(32,33,36,.16) 1.6px, transparent 2.1px);
  background-size:11px 5px; background-position:2px 0; pointer-events:none;
}
.frame::before{top:2px}
.frame::after{bottom:2px}
.frame svg{width:17px; height:17px; color:var(--faint); flex:none}
.f-label{font-size:10.5px; color:var(--faint); max-width:58px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3}
.frame.current{border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text)}
.frame.current svg{color:var(--text)}
.frame.filled{background:var(--bg-2); border-color:var(--line-2)}
.frame.filled .f-label{color:var(--text); font-weight:500}
.frame.filled svg{color:var(--ice)}
.frame.clear-frame{
  margin-left:26px; margin-right:14px;
  width:78px; background:var(--panel);
}
.frame.clear-frame .f-label{color:var(--text); font-weight:700}
.frame.clear-frame svg{color:var(--text)}
.frame.clear-frame:hover{background:var(--ice); border-color:var(--ice)}
.frame.clear-frame:hover .f-label,
.frame.clear-frame:hover svg{color:var(--ink)}
@keyframes develop{
  0%{filter:invert(1); box-shadow:0 0 0 2px var(--ice), 0 0 26px rgba(32,33,36,.18)}
  55%{filter:invert(0) hue-rotate(0)}
  100%{filter:none}
}
.frame.developing{animation:develop .7s ease both}
.frame .sweepline{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform:translateX(-110%)}
.frame.developing .sweepline{animation:sweepline .7s ease .1s both}
@keyframes sweepline{to{transform:translateX(110%)}}
.recipe-btn{
  flex:none; min-width:clamp(132px,18vw,184px); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--ice); color:var(--ink);
  border:none; border-left:1px solid var(--line); font-weight:900; font-size:12.5px; line-height:1.25; letter-spacing:.08em;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
  transition:background .15s;
}
.recipe-btn:hover{background:var(--ice-2)}
.recipe-btn:active{background:var(--ice-2)}
.recipe-btn .rb-count{font-family:"IBM Plex Mono"; font-size:11px; font-weight:600; opacity:.8}
.recipe-btn .rb-short{display:none}
@media (max-width:760px){
  .recipe-btn{min-width:100px}
  .recipe-btn .rb-full{display:none}
  .recipe-btn .rb-short{display:inline}
}
@keyframes glowPulse{0%,100%{box-shadow:none} 50%{box-shadow:0 0 30px rgba(32,33,36,.18)}}
.recipe-btn.complete{animation:glowPulse 1.8s ease infinite}
/* 面板 */
.backdrop{position:fixed; inset:0; z-index:60; background:rgba(32,33,36,.38);
  opacity:0; transition:opacity .28s; backdrop-filter:blur(3px)}
.backdrop.open{opacity:1}
.sheet{
  position:fixed; left:50%; bottom:0; z-index:61;
  width:100%; max-width:720px; max-height:88dvh;
  transform:translate(-50%,105%);
  background:var(--panel); border:1px solid var(--line-2); border-bottom:none;
  display:flex; flex-direction:column;
  transition:transform .38s cubic-bezier(.32,.72,.24,1);
}
.sheet.open{transform:translate(-50%,0)}
.sheet-head{position:relative; display:flex; align-items:center; gap:12px;
  padding:16px 0 12px 20px; border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:16px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet-head .sc-count{font-family:"IBM Plex Mono"; font-size:13px; color:var(--ice); flex:none}
.sheet-close{margin-left:auto; width:52px; align-self:stretch; flex:none;
  background:var(--bg-2); border:none; border-left:1px solid var(--line); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background .15s, color .15s}
.sheet-close:hover{background:var(--ice); color:var(--ink)}
.sheet-scroll{overflow-y:auto; padding:18px 20px calc(24px + var(--safe-b)); display:flex; flex-direction:column; gap:22px}
.sheet.open .sheet-scroll > *{animation:riseIn .5s cubic-bezier(.2,.8,.2,1) both}
.sheet.open .sheet-scroll > *:nth-child(2){animation-delay:.05s}
.sheet.open .sheet-scroll > *:nth-child(3){animation-delay:.1s}
.sheet.open .sheet-scroll > *:nth-child(4){animation-delay:.15s}
.sheet.open .sheet-scroll > *:nth-child(5){animation-delay:.2s}
.sheet.open .sheet-scroll > *:nth-child(6){animation-delay:.25s}
@keyframes riseIn{from{opacity:0; transform:translateY(14px)}}
.sheet-empty{color:var(--faint); font-size:14px; line-height:1.8; padding:14px 0 26px; text-align:center}

/* 詳情內容 */
.d-thumb{position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line)}
.d-thumb .ghost{position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px 15px;
  font-family:"Space Grotesk"; font-weight:700; font-size:clamp(18px,5vw,24px);
  letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.42); line-height:1.1}
.d-thumb .cat-label{position:absolute; top:0; right:0; font-family:"IBM Plex Mono";
  font-size:10px; color:var(--ink); background:rgba(30,31,33,.88); padding:2px 9px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.d-thumb video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.d-titlebox{display:flex; flex-direction:column; gap:2px}
.d-titlebox .d-step{font-family:"Space Grotesk"; font-size:10px; text-transform:uppercase; letter-spacing:.22em; color:var(--ice)}
.d-titlebox h3{font-size:22px; font-weight:900; line-height:1.3}
.d-titlebox h3 i{font-family:"Space Grotesk"; font-style:normal; font-size:12px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; margin-left:8px; font-weight:700}
.d-summary{color:var(--muted); font-size:14px; line-height:1.75}
.d-meta{display:flex; gap:5px; flex-wrap:wrap}
.d-add{min-height:52px; cursor:pointer; font-size:13.5px; font-weight:700; letter-spacing:.12em;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
  background:var(--ice); color:var(--ink); border:1px solid var(--ice);
  transition:background .15s}
.d-add:hover{background:var(--ice-2)}
.d-add.in{background:transparent; border:1px solid var(--ice); color:var(--ice)}
.d-add.in:hover{background:rgba(32,33,36,.06)}

/* 配方等式 */
.formula{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.formula .eq{font-family:"Space Grotesk"; font-weight:700; color:var(--ice); font-size:16px}
.tok{display:inline-flex; align-items:center; gap:7px;
  background:var(--bg-2); border:1px solid var(--line-2);
  padding:6px 8px 6px 11px; font-size:13.5px}
.tok i{font-style:normal; font-family:"Space Grotesk"; font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); display:block}
.tok .tk-x{width:26px; height:26px; border:none; background:var(--panel);
  color:var(--faint); font-size:15px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center}
.tok .tk-x:hover{background:var(--warn); color:var(--ink)}
.conflict-box{border:1px solid var(--line-2); border-left:3px solid var(--warn);
  background:rgba(32,33,36,.045);
  padding:10px 13px; font-size:13px; color:var(--muted); line-height:1.7}
.sheet-actions{display:flex; flex-direction:column; gap:10px}
.copy-btn{min-height:52px; cursor:pointer; font-size:13.5px; font-weight:700; letter-spacing:.14em;
  font-family:"Space Grotesk","Noto Sans TC",sans-serif; text-transform:uppercase;
  background:var(--ice); color:var(--ink); border:none;
  transition:background .15s}
.copy-btn:hover{background:var(--ice-2)}
.ghost-btn{min-height:46px; cursor:pointer; font-size:12.5px; color:var(--muted); letter-spacing:.08em;
  background:none; border:1px solid var(--line-2);
  transition:background .15s, color .15s}
.ghost-btn:hover{border-color:var(--warn); color:var(--warn)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + var(--safe-b) + 14px); z-index:70;
  transform:translate(-50%,16px); opacity:0; pointer-events:none;
  background:var(--ice); color:var(--ink); border:1px solid var(--ice);
  padding:10px 20px; font-size:13.5px; font-weight:700; max-width:88vw;
  transition:opacity .25s, transform .25s;
}
body:not(.has-dock) .toast{bottom:calc(24px + var(--safe-b))}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.warn{background:var(--warn); border-color:var(--warn); color:var(--ink)}

/* 片頭 leader */
.leader{position:fixed; inset:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; cursor:pointer}
.leader.out{opacity:0; transition:opacity .4s; pointer-events:none}
.leader-ring{width:118px; height:118px; border-radius:50%; position:relative;
  background:conic-gradient(var(--ice) var(--sweep,0deg), rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(circle, transparent 54px, #000 55px);
  mask:radial-gradient(circle, transparent 54px, #000 55px);
  animation:sweep 1s linear both}
@property --sweep{syntax:'<angle>'; initial-value:0deg; inherits:false}
@keyframes sweep{from{--sweep:0deg}to{--sweep:360deg}}
.leader-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Space Grotesk"; font-size:44px; font-weight:700; color:var(--text)}
.leader-brand{display:flex; flex-direction:column; align-items:center; gap:4px}
.leader-brand img{display:block; width:auto; height:42px; max-width:260px}
.leader-brand b{font-size:30px; font-weight:900; letter-spacing:.35em; margin-right:-.35em}
.leader-brand span{font-family:"Space Grotesk"; font-size:11px; letter-spacing:.5em; margin-right:-.5em; color:var(--ice)}

/* ============================================================
   細節層 · 印刷/技術圖紙式微細節(全站生效)
   ============================================================ */

/* 反白選取與客製捲軸 */
::selection{background:var(--ice); color:var(--ink)}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--bg-2); border-left:1px solid var(--line)}
::-webkit-scrollbar-thumb{background:var(--ice); border:2px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--ice-2)}

/* 頂部捲動進度髮絲線 */
#ffProgress{
  position:fixed; left:0; top:0; height:2px; width:0; z-index:70;
  background:var(--ice); pointer-events:none;
}

/* 左右豎排刻度軌(寬螢幕) */
.edge-rail{
  position:fixed; top:50%; z-index:30; display:none;
  font-family:"IBM Plex Mono"; font-size:9.5px; letter-spacing:.34em;
  color:var(--faint); text-transform:uppercase; white-space:nowrap;
  writing-mode:vertical-rl; pointer-events:none; user-select:none;
}
.edge-rail.left{left:calc(var(--edge) / 2); transform:translate(-50%,-50%) rotate(180deg)}
.edge-rail.right{right:calc(var(--edge) / 2); transform:translate(50%,-50%)}
.edge-rail::before{content:"+"; display:block; margin:0 0 14px; letter-spacing:0}
.edge-rail::after{content:"+"; display:block; margin:14px 0 0; letter-spacing:0}
@media (min-width:1180px){ .edge-rail{display:block} }

/* 反差方形游標(pointer:fine 才出現) */
.cursor-dot,.cursor-ring{
  position:fixed; left:0; top:0; z-index:99; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:difference; display:none;
}
.cursor-dot{width:6px; height:6px; background:#fff}
.cursor-ring{
  width:34px; height:34px; border:1px solid #fff;
  transition:width .18s, height .18s, background .18s;
}
.cursor-ring.is-hover{width:56px; height:56px; background:rgba(255,255,255,.14)}
@media (pointer:fine){ .cursor-dot,.cursor-ring{display:block} }

/* 進場顯影(IntersectionObserver 加 .in) */
.rv{opacity:0; transform:translateY(16px)}
.rv.in{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}

/* 卡片流水號(CSS counter,自動編號) */
.cards{counter-reset:ffcard}
.cards .card{counter-increment:ffcard}
.cards .thumb::after{
  content:"FF·" counter(ffcard, decimal-leading-zero);
  position:absolute; right:7px; bottom:4px; z-index:2;
  font-family:"IBM Plex Mono"; font-size:8.5px; letter-spacing:.14em;
  color:rgba(255,255,255,.55); pointer-events:none;
}

/* hover 微互動 */
.card .ghost{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.card:hover .ghost{transform:translateX(6px)}
.show-card .ghost{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.show-card:hover .ghost{transform:translateX(6px)}
.btn::after{transition:transform .18s}
.btn:hover::after{transform:translate(3px,-3px)}
.xrow .xarrow{transition:transform .15s}
.xrow:hover .xarrow{transform:translate(4px,-4px)}
.section-card .go{transition:letter-spacing .2s}
.section-card:hover .go{letter-spacing:.22em}
.qadd svg{transition:transform .2s}
.qadd:hover svg{transform:rotate(90deg)}
.footer a{transition:padding-left .15s, color .15s}
.footer ul a:hover{padding-left:8px}
.fchip.on::before{content:"\25A0"; font-size:7px; vertical-align:2px; margin-right:6px}
@media (min-width:761px){
  .nav-links a{position:relative}
  .nav-links a::before{
    content:""; position:absolute; left:16px; right:16px; bottom:13px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .2s;
  }
  .nav-links a:hover::before{transform:scaleX(1)}
  .nav-links a.active::before{display:none}
}
.ticker:hover .ticker-track{animation-play-state:paused}

/* 頁尾巨型字跑馬燈 */
.footer-giant{padding:0; display:flex}
.footer-giant .fg-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:marquee 38s linear infinite;
  padding:26px 0 18px;
}
.footer-giant .fg-track span{padding-right:70px}

/* 麵包屑 REF 編號 */
.breadcrumb{display:flex; align-items:center}
.breadcrumb ol{flex:1}
.bc-ref{
  font-family:"IBM Plex Mono"; font-size:10px; letter-spacing:.16em;
  color:var(--faint); white-space:nowrap; padding-left:12px;
}

/* 頁尾時鐘 */
#ffClock{font-variant-numeric:tabular-nums}

/* WordPress shortcode page reset */
html.ffa-site-page-html,
body.ffa-site-page{
  margin:0 !important;
  padding:0 !important;
}
body.ffa-site-page > .wp-site-blocks > header,
body.ffa-site-page .wp-block-site-title,
body.ffa-site-page .wp-block-site-tagline,
body.ffa-site-page .entry-title,
body.ffa-site-page .wp-block-post-title,
body.ffa-site-page .page-title,
body.ffa-site-page .wp-block-query-title,
body.ffa-site-page header.entry-header{
  display:none !important;
}
body.ffa-site-page .wp-site-blocks,
body.ffa-site-page .site,
body.ffa-site-page #page,
body.ffa-site-page .site-content,
body.ffa-site-page .content-area,
body.ffa-site-page main,
body.ffa-site-page article,
body.ffa-site-page .entry-content,
body.ffa-site-page .wp-block-post-content,
body.ffa-site-page .wp-block-group,
body.ffa-site-page .wp-block-group__inner-container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.ffa-site-page .entry-content > *,
body.ffa-site-page .wp-block-post-content > *{
  max-width:none !important;
}
body.ffa-site-page .ffa-shortcode-root{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.ffa-site-page .ffa-shortcode-root .topnav-inner,
body.ffa-site-page .ffa-shortcode-root .wrap,
body.ffa-site-page .ffa-shortcode-root .wrap-narrow,
body.ffa-site-page .ffa-shortcode-root .footer-inner,
body.ffa-site-page .ffa-shortcode-root .tool-stage,
body.ffa-site-page .ffa-shortcode-root .tool-status,
body.ffa-site-page .ffa-shortcode-root .dock-inner{
  width:calc(100% - (var(--edge) * 2)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.ffa-site-page .ffa-shortcode-root .wrap,
body.ffa-site-page .ffa-shortcode-root .wrap-narrow{
  padding:0 0 40px !important;
}
body.has-dock .footer,
body.ffa-site-page:has(.ffa-shortcode-root--tool-video) .footer,
body.ffa-site-page:has(.ffa-shortcode-root--tool-image) .footer{
  display:none !important;
}
body.ffa-site-page :where(.topnav,.wrap,.wrap-narrow,#app,.footer) a,
body.ffa-site-page :where(.topnav,.wrap,.wrap-narrow,#app,.footer) a *,
body.ffa-site-page :where(.topnav,.wrap,.wrap-narrow,#app,.footer) button{
  text-decoration:none !important;
}
body.ffa-site-page :where(.topnav,.wrap,.wrap-narrow,#app,.footer) button,
body.ffa-site-page :where(.topnav,.wrap,.wrap-narrow,#app,.footer) .btn{
  appearance:none;
  -webkit-appearance:none;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.ffa-site-page .hero-carousel-nav button{
  width:64px !important;
  height:64px !important;
  padding:0 !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  border:0 !important;
  border-right:1px solid var(--line) !important;
}
body.ffa-site-page .hero-carousel-nav button:last-child{border-right:0 !important}
body.ffa-site-page .hero-carousel-nav button:hover{background:var(--ice) !important}
body.ffa-site-page .hero-carousel-nav button:hover::before{border-color:var(--ink) !important}
body.ffa-site-page article.entry{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:0 30px 40px !important;
}
body.ffa-site-page article.entry .entry-hero{
  margin:0 -30px 0 !important;
}
body.ffa-site-page #app .tool-stage{
  width:calc(100% - (var(--edge) * 2)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:8px 0 calc(var(--dock-h) + var(--safe-b) + 16px) !important;
}
body.ffa-site-page #app .tool-status{
  width:calc(100% - (var(--edge) * 2)) !important;
  max-width:none !important;
  margin:0 auto 2px !important;
  padding:8px 0 !important;
}
body.ffa-site-page #app .flow-nav button{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  color:var(--text) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
body.ffa-site-page #app .flow-nav button:hover:not(:disabled),
body.ffa-site-page #app .flow-nav button:focus-visible:not(:disabled){
  background:var(--ice) !important;
  color:var(--ink) !important;
  border-color:var(--ice) !important;
}
body.ffa-site-page #app .flow-nav button:disabled{
  background:transparent !important;
  color:var(--text) !important;
}
body.ffa-site-page #app .frame{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
body.ffa-site-page #app .frame:hover,
body.ffa-site-page #app .frame:focus-visible{
  background:var(--bg-2) !important;
  color:var(--text) !important;
  border-color:var(--line-2) !important;
}
body.ffa-site-page #app .frame.current{
  background:var(--panel) !important;
  border-color:var(--text) !important;
  box-shadow:inset 0 0 0 1px var(--text) !important;
}
body.ffa-site-page #app .frame.filled{
  background:var(--bg-2) !important;
  border-color:var(--line-2) !important;
}
body.ffa-site-page #app .frame.clear-frame:hover,
body.ffa-site-page #app .frame.clear-frame:focus-visible{
  background:var(--ice) !important;
  color:var(--ink) !important;
  border-color:var(--ice) !important;
}
body.ffa-site-page #app .frame.clear-frame:hover .f-label,
body.ffa-site-page #app .frame.clear-frame:hover svg,
body.ffa-site-page #app .frame.clear-frame:focus-visible .f-label,
body.ffa-site-page #app .frame.clear-frame:focus-visible svg{
  color:var(--ink) !important;
}
body.ffa-site-page #app .recipe-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:var(--ice) !important;
  color:var(--ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
body.ffa-site-page #app .recipe-btn:hover,
body.ffa-site-page #app .recipe-btn:focus-visible{
  background:var(--ice-2) !important;
  color:var(--ink) !important;
}
body.ffa-site-page #app .sheet-close{
  position:relative !important;
  width:52px !important;
  min-width:52px !important;
  height:auto !important;
  margin-left:auto !important;
  padding:0 !important;
  align-self:stretch !important;
  background:var(--bg-2) !important;
  color:var(--text) !important;
  border:0 !important;
  border-left:1px solid var(--line) !important;
  font-size:0 !important;
  line-height:1 !important;
}
body.ffa-site-page #app .sheet-close::before,
body.ffa-site-page #app .sheet-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:1.5px;
  background:currentColor;
}
body.ffa-site-page #app .sheet-close::before{transform:translate(-50%,-50%) rotate(45deg)}
body.ffa-site-page #app .sheet-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
body.ffa-site-page #app .sheet-close:hover{
  background:var(--ice) !important;
  color:var(--ink) !important;
}
@media (max-width:980px){
  body.ffa-site-page .hero-carousel-nav button{
    width:54px !important;
    height:54px !important;
  }
}
@media (max-width:700px){
  body.ffa-site-page .ffa-shortcode-root .topnav-inner{width:100% !important}
  body.ffa-site-page article.entry{
    padding:0 18px 34px !important;
  }
  body.ffa-site-page article.entry .entry-hero{
    margin:0 -18px 0 !important;
  }
}

/* ── 減少動態 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  #bg,.grain{display:none}
  .kchar{animation:none !important}
  .ticker-track{animation:none !important}
  .cursor-dot,.cursor-ring,#ffProgress{display:none !important}
  .rv{opacity:1 !important; transform:none !important}
}