/* Premium, restrained default theme. Override via site.json `theme` → inline :root vars. */
:root{
  --bg:#F6F4EF;--paper:#FFFcf9;--ink:#14141A;--muted:#5A5854;--line:#E5E1D8;
  --brand:#16151F;--accent:#2E2C7A;--accent-ink:#FFF;--link:#2A2870;
  --hero-from:#16151F;--hero-to:#1C1A33;
  --link-visited:#3D3A6B;--info-bg:#F1F0FA;--info-line:#D0CEE8;
  --warn-bg:#F7F3EC;--warn-line:#E4D9C8;--pending-bg:#EFEAFB;--pending-ink:#2E2C7A;
  --zebra:#F3F1EB;--shadow:0 1px 2px rgba(20,20,26,.04),0 12px 32px rgba(20,20,26,.05);
  --shadow-lg:0 8px 32px rgba(20,20,26,.08);
  --radius:18px;--max:1120px;--prose:41.5rem;--header-h:56px;
  --font:"PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111117;--paper:#1A1A22;--ink:#F3F1EC;--muted:#B4B1A9;--line:#2C2C36;
    --brand:#0E0E14;--link:#B7B5E8;--link-visited:#C9C6F0;
    --info-bg:#222234;--info-line:#3A3858;--warn-bg:#242228;--warn-line:#3A352C;
    --pending-bg:#2A2844;--pending-ink:#D4D2F5;--zebra:#16161E;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.28);
    --shadow-lg:0 8px 32px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:clip}
body.home .top{background:var(--hero-from);border-bottom-color:transparent}
body{margin:0;font:17px/1.8 var(--font);color:var(--ink);background:var(--bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:99;background:var(--paper);padding:8px 14px;border-radius:10px;box-shadow:var(--shadow)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:480px){.wrap{padding:0 18px}}

/* Header — slim, glass, sticky */
.top{position:sticky;top:0;z-index:60;height:var(--header-h);background:var(--brand);color:#F6F4EF;border-bottom:1px solid rgba(255,255,255,.06)}
.bar{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;color:#F6F4EF;text-decoration:none;font-weight:650;letter-spacing:.01em;min-width:0}
.brand:hover{text-decoration:none;color:#fff}
.brand .mark{width:28px;height:28px;flex:none;color:var(--accent);border-radius:8px}
.brand .name{font-size:15px;line-height:1.2}
.brand .en{display:block;font-size:10px;font-weight:450;letter-spacing:.04em;color:rgba(246,244,239,.62);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.nav-toggle{display:none;margin-left:auto}
.nav-toggle>summary{list-style:none;cursor:pointer;padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:13px;color:#F6F4EF}
.nav-toggle>summary::-webkit-details-marker{display:none}
nav.nav-desk, .nav-toggle nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
nav a{color:rgba(246,244,239,.86);text-decoration:none;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.01em}
nav a:hover,nav a[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:720px){
  .brand .en{display:none}
  nav.nav-desk{display:none}
  .nav-toggle{display:block;position:relative}
  .nav-toggle[open] nav{display:flex;position:absolute;right:0;top:calc(100% + 8px);flex-direction:column;min-width:180px;padding:8px;background:var(--brand);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:var(--shadow-lg)}
  .nav-toggle:not([open]) nav{display:none}
}

/* Home dark hero */
.hero-band{background:radial-gradient(900px 420px at 88% -10%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%),linear-gradient(165deg,var(--hero-from),var(--hero-to));color:#F6F4EF;padding:72px 0 80px;margin-bottom:8px}
.hero-band .kicker{color:color-mix(in srgb, var(--accent) 35%, #fff)}
.hero-band h1{color:#fff;font-size:clamp(2.15rem,5.2vw,3.4rem);line-height:1.18;letter-spacing:-.03em;font-weight:650;margin:.3em 0 .5em;max-width:18em}
.hero-band .lede{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.75;color:rgba(246,244,239,.78);max-width:36rem;margin:0 0 18px}
.hero-band .meta{color:rgba(246,244,239,.55)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.hero-band a.cta{box-shadow:none}
.hero-band a.cta.primary{background:#fff;color:var(--brand)!important}
.hero-band a.cta.ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.28)}
.hero-band a.cta.ghost:hover{background:rgba(255,255,255,.08)}

/* Inner-page title */
.page-hero{padding:40px 0 8px}
.page-hero h1{font-size:clamp(1.7rem,3.4vw,2.45rem);line-height:1.28;letter-spacing:-.025em;font-weight:650;margin:.25em 0 .45em}
.kicker{display:inline-block;font-size:12px;font-weight:650;letter-spacing:.12em;color:var(--accent)}
.lede{font-size:1.08rem;line-height:1.75;color:var(--muted);max-width:38rem}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13.5px;margin:12px 0 0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}

/* Cards */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:8px 0 28px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card h2,.card h3{margin:0 0 8px;font-size:1.08rem;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.card p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.7}
.card a.more{display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-weight:650;text-decoration:none}
.card a.more:hover{text-decoration:underline}
.card .ico,.card-soon .ico{width:22px;height:22px;flex:none;color:var(--accent)}
.card.featured{padding:26px 26px 24px}.card.featured>.ico{margin-bottom:12px;width:26px;height:26px}
.card.featured h3{font-size:1.2rem;display:block}
.guide-list{list-style:none;margin:8px 0 20px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card-soon{display:flex;align-items:flex-start;gap:12px;margin:0;padding:16px 18px}
.card-soon a{font-weight:600;text-decoration:none;color:var(--ink);flex:1}
.card-soon a:hover{color:var(--link);text-decoration:underline}
.badge{flex:none;font-size:11px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}

/* Disclosure / answer / pending */
.disclose,.callout,.answer-box{border:1px solid var(--info-line);background:var(--info-bg);border-radius:16px;padding:18px 20px;margin:20px 0}
.disclose{border-color:var(--warn-line);background:var(--warn-bg);font-size:.95rem;line-height:1.75}
.disclose p{margin:.45em 0}
.disclose p:first-child{margin-top:0}
.disclose p:last-child{margin-bottom:0}
.answer-box{margin:0 0 2em;padding:22px 24px 8px}
.answer-box>h2{margin-top:0;border-top:0;padding-top:0}
@media (max-width:480px){.answer-box,.disclose{padding:16px 16px 4px}.disclose{padding:16px}}
mark.pending{background:var(--pending-bg);color:var(--pending-ink);font-style:normal;font-weight:650;padding:.05em .4em;border-radius:6px}

/* CTA */
.cta-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:20px 0 8px}.cta-item{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
a.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink)!important;text-decoration:none;font-weight:650;font-size:15px;padding:11px 18px;border-radius:999px;line-height:1.3;letter-spacing:.01em;border:1px solid transparent;transition:background .15s ease,transform .15s ease,border-color .15s ease}
a.cta:hover{text-decoration:none;transform:translateY(-1px)}
a.cta.official{background:var(--brand);color:#fff!important}
a.cta.aff{background:var(--accent)}
.cta-note{color:var(--muted);font-size:12.5px}
.cta-block{margin:24px 0;padding:18px 18px 10px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}

/* Article + TOC */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;padding:12px 0 72px;min-width:0}.layout>*{min-width:0}
@media (min-width:1024px){
  .layout.has-toc{grid-template-columns:minmax(0,1fr) 220px;align-items:start;gap:48px}
  .toc-side{position:sticky;top:calc(var(--header-h) + 20px)}
}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;font-size:13.5px;line-height:1.55;box-shadow:var(--shadow)}
.toc h2{font-size:11px;margin:0 0 10px;letter-spacing:.1em;color:var(--muted);font-weight:650}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;margin:0}
.toc li a{display:block;text-decoration:none;color:var(--ink);padding:5px 0;border-bottom:1px solid transparent}
.toc li a:hover{color:var(--link)}
.toc li a::before{content:counter(toc, decimal-leading-zero);color:var(--muted);font-size:11px;margin-right:8px;letter-spacing:.04em}
details.toc-mobile{margin:0 0 20px}
details.toc-mobile>summary{cursor:pointer;font-weight:650;font-size:14px}
@media (min-width:1024px){details.toc-mobile{display:none}.toc-side{display:block}}
@media (max-width:1023px){.toc-side{display:none}}

.prose{max-width:var(--prose);min-width:0;width:100%}
.prose> :first-child{margin-top:0}
.prose h2{font-size:1.32rem;line-height:1.35;letter-spacing:-.02em;font-weight:650;margin:2.1em 0 .65em;padding-top:.9em;border-top:1px solid var(--line)}
.prose h2:first-of-type,.answer-box h2{border-top:0;padding-top:0;margin-top:0}
.prose h3{font-size:1.08rem;font-weight:650;margin:1.5em 0 .4em}
.prose p,.prose li{max-width:42em;overflow-wrap:anywhere;word-break:break-word}.prose a{overflow-wrap:anywhere}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.35em 0}
.prose blockquote{margin:1.2em 0;padding:.15em 0 .15em 1.1em;border-left:2px solid var(--accent);color:var(--ink);background:transparent}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose code{font-family:ui-monospace,SFMono-Regular,"Noto Sans Mono CJK TC",monospace;font-size:.88em;background:var(--zebra);padding:.1em .35em;border-radius:5px}
.article-card{margin-bottom:64px}

/* Comparison table */
.table-wrap{overflow-x:auto;margin:1.3em 0;border:1px solid var(--line);border-radius:14px;background:var(--paper);-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.prose table{border-collapse:separate;border-spacing:0;width:100%;min-width:36rem;font-size:14.5px;line-height:1.6}
.prose th,.prose td{padding:11px 14px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}
.prose tr:last-child td{border-bottom:0}
.prose th{background:var(--brand);color:#F6F4EF;font-weight:650;font-size:13px;letter-spacing:.02em}
.prose tbody tr:nth-child(even) td{background:var(--zebra)}
.prose th:first-child,.prose td:first-child{position:sticky;left:0;z-index:1;min-width:6.5rem;box-shadow:1px 0 0 var(--line)}
.prose thead th:first-child{background:var(--brand);z-index:2}
.prose tbody tr:nth-child(odd) td:first-child{background:var(--paper)}
.prose tbody tr:nth-child(even) td:first-child{background:var(--zebra)}
@media (max-width:768px){
  .table-wrap::before{content:"表格可左右滑動";display:block;font-size:12px;color:var(--muted);letter-spacing:.06em;padding:8px 12px 0}
}

/* FAQ accordion */
.faq{border:1px solid var(--line);border-radius:14px;background:var(--paper);margin:.7em 0;padding:0}
.faq+h2,.faq+p,.faq+.cta-block{margin-top:1.2em}
.faq summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:650;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .15s ease;flex:none;margin-top:-4px}
.faq[open] summary::after{transform:rotate(225deg);margin-top:2px}
.faq summary:hover{color:var(--link)}
.faq .faq-a{padding:0 18px 16px;margin:0;color:var(--ink)}

/* Sections / footer / empty states */
.section{padding:28px 0 8px}
.section>h2{font-size:1.2rem;letter-spacing:-.02em;font-weight:650;margin:0 0 16px}
.page-end{padding-bottom:72px}

footer{border-top:1px solid var(--line);background:var(--brand);color:rgba(246,244,239,.78);padding:48px 0 36px;font-size:14px;margin-top:24px}
footer a{color:#F6F4EF;text-decoration:none}
footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px 40px}
.footer-brand strong{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.footer-col h2{font-size:11px;letter-spacing:.1em;color:rgba(246,244,239,.5);margin:0 0 10px;font-weight:650}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 8px}
.footer-note{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.footer-note small{display:block;color:rgba(246,244,239,.5);line-height:1.7;font-size:12.5px}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr;gap:24px}}

.soon{padding:56px 0 80px}
.soon .box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:40px 32px;max-width:36rem;box-shadow:var(--shadow)}
.soon .box h1{margin:.3em 0 .5em;font-size:clamp(1.5rem,3vw,2rem)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover,.cta:hover{transform:none}
}
@media (max-width:420px){
  body{font-size:16px}
  .hero-band{padding:48px 0 56px}
  .prose h2{font-size:1.22rem}
}

/* Tutorial diagrams and test-plan callouts */
.diagram{margin:1.6rem 0;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(20,20,26,.04)}
.diagram figcaption{margin:0 0 12px;color:var(--muted);font-size:.88rem}
.diagram-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 6px;align-items:stretch}
.diagram-flow>li{flex:1 1 8.5rem;min-width:7.5rem;max-width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.92rem;line-height:1.55;position:relative}
.diagram-flow>li strong{display:block;color:var(--accent);font-size:.76rem;letter-spacing:.04em;margin-bottom:.25rem}
.callout.plan{border-color:#d8d3ee;background:var(--pending-bg);margin:1.4rem 0;border-radius:16px;padding:16px 18px}
.callout.plan p{margin:.4em 0}
.callout.plan p:first-child{margin-top:0}
.callout.plan p:last-child{margin-bottom:0}
.callout.plan ol,.callout.plan ul{margin:.4em 0 .2em;padding-left:1.2em}
@media (max-width:480px){
  .diagram{padding:14px}
  .diagram-flow>li{flex-basis:100%;max-width:none}
}

.stacked-cards{margin-top:1.2rem}