/* 限量開賣作戰台 — 視覺系統實作。正本說明見專案根目錄 DESIGN.md。
 *
 * 🔴 這一頁的核心不是好看，是把 evidence 誠實顯示出來。整個產品的差異化就是
 * 「每個值都指得回原文」，UI 如果把 explicit 和 inferred 畫成一樣，那個差異化就不存在了。
 * 四種狀態一律用**顏色＋形狀＋文字**三重編碼——只靠顏色的話色盲使用者分不出來，
 * 而「分不出確定與不確定」對這個產品等於整個賣點消失。
 * 記號用 CSS 畫（圓角、旋轉、虛線邊），不用 ◐◆ 這類字元——那些在不同系統上長得不一樣。
 */

:root{
  --bg:oklch(1 0 0);
  --surface:oklch(0.975 0.003 250);
  --surface-2:oklch(0.955 0.004 250);
  --ink:oklch(0.22 0.015 260);
  --muted:oklch(0.45 0.015 260);
  --line:oklch(0.90 0.006 260);
  --brand:oklch(0.40 0.087 160);
  --brand-ink:oklch(0.99 0 0);
  --amber:oklch(0.52 0.13 70);
  --gray:oklch(0.50 0.02 250);
  --indigo:oklch(0.48 0.16 275);
  --danger:oklch(0.48 0.18 27);
  --tint-amber:oklch(0.97 0.03 75);
  --tint-danger:oklch(0.97 0.02 25);
  --tint-brand:oklch(0.96 0.02 160);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Noto Sans TC",monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:oklch(0.13 0 0);
  --surface:oklch(0.175 0.004 250);
  --surface-2:oklch(0.21 0.005 250);
  --ink:oklch(0.94 0.005 260);
  --muted:oklch(0.68 0.015 260);
  --line:oklch(0.28 0.008 260);
  --brand:oklch(0.72 0.13 160);
  --brand-ink:oklch(0.16 0.02 160);
  --amber:oklch(0.78 0.12 75);
  --gray:oklch(0.66 0.02 250);
  --indigo:oklch(0.76 0.13 280);
  --danger:oklch(0.72 0.16 27);
  --tint-amber:oklch(0.24 0.04 75);
  --tint-danger:oklch(0.23 0.05 25);
  --tint-brand:oklch(0.23 0.04 160);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:52rem;margin:0 auto;padding:1.5rem 1.15rem calc(5rem + env(safe-area-inset-bottom))}
h1{font-size:1.75rem;font-weight:660;margin:0 0 .5rem;letter-spacing:-.02em;text-wrap:balance;
  line-height:1.32}
@media (min-width:44rem){h1{font-size:2rem}}
h2{font-size:1.125rem;font-weight:620;margin:0 0 .5rem;letter-spacing:-.01em}
p{margin:0 0 .75rem;text-wrap:pretty}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 頁首 ─────────────────────────────────── */
.mark{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;font-weight:620;
  color:var(--brand);margin:0 0 .9rem}
.mark svg{width:1.1rem;height:1.1rem;flex:none}
.lede{color:var(--muted);font-size:1rem;margin:0 0 .9rem;max-width:34rem}
.stance{display:block;font-size:.8125rem;color:var(--muted);border:1px solid var(--line);
  border-radius:.5rem;padding:.5rem .7rem;margin:0 0 1.1rem;background:var(--surface);max-width:34rem}
.stance b{color:var(--ink);font-weight:620}
.hero{display:grid;gap:1.75rem;margin-bottom:2.25rem}
@media (min-width:60rem){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:2.5rem;align-items:start}
}

/* ── 三步驟：這是真的序列，編號才站得住 ───── */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:.95rem}
@media (min-width:44rem){.steps{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.steps li{counter-increment:s;position:relative;padding-left:2.15rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.5rem;height:1.5rem;
  border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-content:center;
  font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums}
.steps b{display:block;font-weight:620;margin-bottom:.12rem}
.steps span{display:block;font-size:.875rem;color:var(--muted)}

/* ── 迷你預覽（頁首右側的產品畫面）───────── */
.peek{border:1px solid var(--line);border-radius:.85rem;background:var(--surface);padding:.9rem;
  font-size:.875rem}
.peek .cap{display:flex;align-items:center;gap:.4rem;font-size:.6875rem;font-weight:600;
  color:var(--amber);margin-bottom:.7rem}
.peek .cap::before{content:"";width:.5rem;height:.5rem;border-radius:50%;
  border:1.5px dashed currentColor;flex:none}
.peek .nx{border:1.5px solid var(--brand);border-radius:.6rem;background:var(--tint-brand);
  padding:.6rem .7rem;margin-bottom:.7rem}
.peek .nx .k{font-size:.6875rem;font-weight:650;color:var(--brand)}
.peek .nx .n{font-weight:620;margin:.1rem 0}
.peek .nx .t{font:.9375rem/1.35 var(--mono);font-variant-numeric:tabular-nums}
.peek ul{list-style:none;margin:0;padding:0}
.peek li{display:flex;gap:.5rem;padding:.32rem 0;border-top:1px solid var(--line);align-items:baseline}
.peek li:first-child{border-top:none}
.peek .w{font:.75rem/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);
  flex:none;width:5.4rem}
.peek .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 按鈕 ─────────────────────────────────── */
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}
button.btn,a.btn{min-height:2.75rem;padding:.6rem 1.1rem;border-radius:.6rem;
  border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:inherit;
  font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;transition:filter .16s var(--ease),opacity .16s var(--ease)}
button.btn:hover:not(:disabled),a.btn:hover{filter:brightness(1.12)}
button.btn:active:not(:disabled){filter:brightness(.94)}
button.ghost,a.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
button.ghost:hover:not(:disabled),a.ghost:hover{border-color:var(--ink);filter:none}
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.linkbtn{background:none;border:none;color:var(--brand);font:inherit;font-size:.8125rem;
  cursor:pointer;padding:.3rem .35rem;text-decoration:underline;text-underline-offset:2px;
  /* 觸控目標最小 44px。主要輸入是拇指，36px 按不準 */
  min-height:2.75rem}

/* ── 表單 ─────────────────────────────────── */
label.f{display:block;font-size:.8125rem;color:var(--muted);margin:0 0 .3rem;font-weight:500}
textarea,input[type=url],input[type=email]{width:100%;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:.6rem;font:inherit;font-size:.9375rem;background:var(--surface);color:var(--ink);
  transition:border-color .16s var(--ease)}
textarea{min-height:11rem;line-height:1.6;resize:vertical}
textarea:focus,input[type=url]:focus,input[type=email]:focus{border-color:var(--brand)}
::placeholder{color:var(--muted);opacity:1}
.gap{margin-bottom:.7rem}
.hint{color:var(--muted);font-size:.8125rem}

/* ── 場景切換 ─────────────────────────────── */
.scn{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem .2rem .55rem;margin:0 -.2rem .35rem;
  scrollbar-width:none}
.scn::-webkit-scrollbar{display:none}
.scn button{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;
  padding:.5rem .8rem;border:1px solid var(--line);background:var(--bg);color:var(--muted);
  border-radius:.6rem;font:inherit;font-size:.9375rem;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.scn button:hover{color:var(--ink);border-color:var(--ink)}
.scn button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);
  color:var(--brand-ink);font-weight:600}
.scn-note{color:var(--muted);font-size:.8125rem;margin:0 0 1rem}

/* ── 要貼什麼的指引 ───────────────────────── */
.guide{border:1px solid var(--line);border-radius:.7rem;padding:.8rem .9rem;margin:0 0 1rem;
  background:var(--surface);font-size:.875rem}
.guide .w{color:var(--muted);margin:0 0 .55rem}
.guide ul{list-style:none;margin:0;padding:0}
.guide li{display:flex;gap:.5rem;align-items:flex-start;margin:.22rem 0;color:var(--muted)}
.guide li .m{flex:none;font-weight:700;width:1em;text-align:center}
.guide li.yes .m{color:var(--brand)}
.guide li.no{opacity:.85}

/* ── 證據標記：顏色＋形狀＋文字，三重編碼 ─── */
.ev{display:inline-flex;align-items:center;gap:.36em;font-size:.6875rem;line-height:1;
  padding:.28em .5em .28em .42em;border-radius:999px;border:1px solid;white-space:nowrap;
  vertical-align:.09em;margin-left:.4em;font-weight:500}
.ev i{width:.66em;height:.66em;flex:none;border:1.5px solid currentColor;border-radius:50%}
.ev-explicit{color:var(--ink);border-color:color-mix(in oklab,var(--ink) 32%,transparent)}
.ev-explicit i{border-radius:1px;background:currentColor}
.ev-inferred{color:var(--amber);border-color:color-mix(in oklab,var(--amber) 45%,transparent)}
.ev-inferred i{background:linear-gradient(90deg,currentColor 0 50%,transparent 50%)}
.ev-absent{color:var(--gray);border-color:color-mix(in oklab,var(--gray) 45%,transparent)}
.ev-absent i{border-style:dashed}
.ev-external_reference{color:var(--indigo);border-color:color-mix(in oklab,var(--indigo) 45%,transparent)}
.ev-external_reference i{border-radius:1px;background:currentColor;transform:rotate(45deg)}

/* ── 值 ───────────────────────────────────── */
.f-row{padding:.55rem 0;border-top:1px solid var(--line)}
.f-row:first-child{border-top:none}
.f-k{font-size:.8125rem;color:var(--muted);margin-bottom:.1rem}
.f-v{font-size:.9375rem;overflow-wrap:anywhere}
.unknown{color:var(--gray)}
.q{font:.8125rem/1.6 var(--mono);color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:.4rem;padding:.45rem .6rem;margin-top:.4rem;
  white-space:pre-wrap;word-break:break-word}
.note{font-size:.8125rem;color:var(--amber);margin-top:.3rem}
details.src{margin-top:.35rem}
details.src>summary{font-size:.75rem;color:var(--muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.3rem;min-height:1.75rem}
details.src>summary::-webkit-details-marker{display:none}
details.src>summary::before{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s var(--ease)}
details.src[open]>summary::before{transform:rotate(45deg)}

/* ── 區塊 ─────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;
  padding:.9rem 1rem;margin:0 0 1rem}
.sec{margin:2.25rem 0 0}
.sec>h2{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.sec>h2 .cnt{font-size:.8125rem;color:var(--muted);font-weight:400}
.hrow{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.demobox{border:1.5px dashed color-mix(in oklab,var(--amber) 45%,transparent);
  border-radius:.9rem;padding:1rem;background:color-mix(in oklab,var(--tint-amber) 45%,transparent)}
.demoflag{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;
  color:var(--amber);border:1px dashed color-mix(in oklab,var(--amber) 55%,transparent);
  border-radius:.4rem;padding:.28rem .6rem;margin:0 0 .7rem}

/* ── 橫幅 ─────────────────────────────────── */
.banner{border:1px solid;border-radius:.7rem;padding:.75rem .9rem;margin:0 0 .8rem;
  font-size:.9375rem;overflow-wrap:anywhere;animation:rise .22s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.b-dang{background:var(--tint-danger);border-color:color-mix(in oklab,var(--danger) 35%,transparent);
  color:var(--danger)}
.b-warn{background:var(--tint-amber);border-color:color-mix(in oklab,var(--amber) 35%,transparent);
  color:var(--amber)}
.b-ok{background:var(--tint-brand);border-color:color-mix(in oklab,var(--brand) 35%,transparent);
  color:var(--brand)}
.banner b{font-weight:650}
.banner ul{margin:.4rem 0 0;padding-left:1.1rem}
.banner li{margin:.15rem 0}

/* ── 下一個節點 ───────────────────────────── */
.next{border:1.5px solid var(--brand);border-radius:.8rem;padding:.9rem 1rem;margin:0 0 1.1rem;
  background:var(--tint-brand)}
.next .k{font-size:.75rem;color:var(--brand);font-weight:650;margin-bottom:.25rem}
.next .n{font-size:1.0625rem;font-weight:620;margin-bottom:.15rem}
.next .t{font:1.0625rem/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.next .in{font-size:.875rem;color:var(--muted);margin-top:.2rem}

/* ── 時間軸 ───────────────────────────────── */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:6.5rem 1.3rem 1fr;column-gap:.75rem;
  grid-template-areas:"when rail body";padding-bottom:1.4rem}
.tl .when{grid-area:when;text-align:right;font:.8125rem/1.5 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--muted);padding-top:.1rem}
.tl .when b{display:block;color:var(--ink);font-weight:600;font-size:.875rem}
.tl .rail{grid-area:rail;position:relative}
.tl .rail::before{content:"";position:absolute;left:50%;top:.75rem;bottom:-1.4rem;width:2px;
  transform:translateX(-50%);background:var(--line)}
.tl li:last-child .rail::before{display:none}
.tl .dot{position:absolute;left:50%;top:.35rem;transform:translateX(-50%);width:.7rem;height:.7rem;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--bg)}
.tl .body{grid-area:body;min-width:0}
.tl li[data-sched="0"] .dot{background:var(--bg);border:2px dashed var(--gray);box-shadow:none}
.tl li[data-sched="0"] .rail::before{background:none;border-left:2px dashed var(--line);width:0;
  left:calc(50% - 1px);transform:none}
.tl li[data-past="1"] .dot{background:var(--gray)}
.tl li[data-next="1"] .dot{box-shadow:0 0 0 3px var(--bg),
  0 0 0 5.5px color-mix(in oklab,var(--brand) 45%,transparent)}
.pname{font-weight:620;font-size:1rem;letter-spacing:-.005em;overflow-wrap:anywhere}
.kind{display:inline-block;font-size:.6875rem;border:1px solid var(--line);border-radius:.35rem;
  padding:.1rem .4rem;margin-left:.4rem;color:var(--muted);vertical-align:.1em;font-weight:500}
.kind.reg{color:var(--indigo);border-color:color-mix(in oklab,var(--indigo) 45%,transparent)}
.kind.short{color:var(--amber);border-color:color-mix(in oklab,var(--amber) 45%,transparent)}
.nosched{font-size:.8125rem;color:var(--gray);margin-top:.2rem}
@media (max-width:34rem){
  .tl li{grid-template-columns:1.3rem 1fr;grid-template-areas:"rail when" "rail body";
    column-gap:.65rem}
  .tl .when{text-align:left;margin-bottom:.1rem;padding-top:0}
  .tl .when b{display:inline;font-size:.8125rem;margin-right:.35rem}
  .tl .rail::before{top:.6rem}
  .tl .dot{top:.2rem}
}

/* ── 準備清單 ─────────────────────────────── */
.ck{list-style:none;margin:0;padding:0}
.ck li{border-top:1px solid var(--line)}
.ck li:first-child{border-top:none}
.ck label{display:flex;gap:.65rem;align-items:flex-start;padding:.65rem .1rem;cursor:pointer;
  min-height:2.75rem}
.ck input{appearance:none;flex:none;width:1.15rem;height:1.15rem;margin:.18rem 0 0;
  border:1.5px solid var(--muted);border-radius:.3rem;background:var(--bg);cursor:pointer;
  display:grid;place-content:center;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.ck input::before{content:"";width:.62rem;height:.34rem;border-left:2px solid var(--brand-ink);
  border-bottom:2px solid var(--brand-ink);transform:rotate(-45deg) scale(0);
  transition:transform .16s var(--ease);margin-top:-.12rem}
.ck input:checked{background:var(--brand);border-color:var(--brand)}
.ck input:checked::before{transform:rotate(-45deg) scale(1)}
.ck .t{font-size:.9375rem}
.ck input:checked+.t{color:var(--muted);text-decoration:line-through}
.ck .w{display:block;font-size:.8125rem;color:var(--muted);margin-top:.1rem}
.ck input:checked+.t .w{text-decoration:none}

/* ── 提醒紀錄 ─────────────────────────────── */
.rm{list-style:none;margin:0;padding:0;font-size:.875rem}
.rm li{display:flex;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line);align-items:flex-start}
.rm li:first-child{border-top:none}
.rm .w{font:.8125rem/1.6 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);
  flex:none;width:8.5rem}
.rm .st{font-size:.6875rem;border:1px solid var(--line);border-radius:.35rem;padding:.1rem .4rem;
  color:var(--muted);flex:none}
.rm .st.ok{color:var(--brand);border-color:color-mix(in oklab,var(--brand) 45%,transparent)}
.rm .st.bad{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 45%,transparent)}
@media (max-width:34rem){.rm li{flex-wrap:wrap}.rm .w{width:auto}}

/* ── 我的卡 ───────────────────────────────── */
.cards{list-style:none;margin:0;padding:0}
.cards li{border-top:1px solid var(--line)}
.cards li:first-child{border-top:none}
.cards button{width:100%;text-align:left;background:none;border:none;font:inherit;color:inherit;
  padding:.7rem .1rem;cursor:pointer;display:flex;gap:.6rem;align-items:center;min-height:2.75rem}
.cards button:hover{color:var(--brand)}
.cards .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cards .st{font-size:.6875rem;color:var(--muted);border:1px solid var(--line);border-radius:.35rem;
  padding:.1rem .4rem;flex:none}

/* ── 骨架 ─────────────────────────────────── */
.sk{border:1px solid var(--line);border-radius:.8rem;padding:1rem;margin-bottom:1rem}
.sk .bar{height:.7rem;border-radius:.35rem;background:var(--surface-2);margin:.5rem 0;
  animation:pulse 1.4s ease-in-out infinite}
.sk .bar:nth-child(2){width:70%;animation-delay:.12s}
.sk .bar:nth-child(3){width:45%;animation-delay:.24s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── 圖例與常見問題 ───────────────────────── */
.legend{margin:2.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.8125rem;
  color:var(--muted)}
.legend dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem .7rem;margin:.6rem 0 0;
  align-items:baseline}
.legend dt{margin:0}.legend dd{margin:0}
.legend .ev{margin-left:0}
.faq{margin:2.25rem 0 0}
.faq details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;padding:.65rem 0;font-weight:560;font-size:.9375rem;list-style:none;
  display:flex;align-items:center;gap:.55rem;min-height:2.75rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:none;width:.4rem;height:.4rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg);transition:transform .16s var(--ease)}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq .a{font-size:.875rem;color:var(--muted);margin:0 0 .85rem;padding-left:.95rem}
.faq .a strong{color:var(--ink)}
.foot{margin-top:1.5rem;font-size:.75rem;color:var(--muted);line-height:1.7}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}