:root{--bg:#f7f6fb;--paper:#fff;--ink:#1f1b2e;--muted:#5d5873;--line:#e4e0ef;--accent:#6b4fd8;--accent-soft:#eee9ff;
--quote:#8a5a00;--quote-bg:#fff6e0;--before:#8b8698;--before-bg:#f0eef4;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15131d;--paper:#1e1b29;--ink:#ece9f6;--muted:#a9a3c0;
--line:#2f2a40;--accent:#a996ff;--accent-soft:#2a2442;--quote:#ffcf73;--quote-bg:#2e2616;--before:#9f9ab0;--before-bg:#26232f;color-scheme:dark}}
:root[data-theme=dark]{--bg:#15131d;--paper:#1e1b29;--ink:#ece9f6;--muted:#a9a3c0;--line:#2f2a40;--accent:#a996ff;
--accent-soft:#2a2442;--quote:#ffcf73;--quote-bg:#2e2616;--before:#9f9ab0;--before-bg:#26232f;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:48px 80px}
header h1{font-size:clamp(26px,4vw,38px);line-height:1.3;margin:0 0 8px;text-wrap:balance}
.meta{color:var(--muted);font-size:14px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.intro{max-width:65ch;margin:16px 0 0}
.back{font-size:14px;text-decoration:none;display:inline-block;margin-bottom:20px}
.versions{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px}
.versions a{display:grid;grid-template-columns:auto 1fr auto;gap:4px 20px;align-items:baseline;padding:18px 22px;border:1px solid var(--line);
border-radius:10px;background:var(--paper);text-decoration:none;color:var(--ink)}
.versions a:hover{border-color:var(--accent)}
.versions time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:500;white-space:nowrap}
.versions .t{font-weight:700}
.versions .n{color:var(--muted);font-size:14px;white-space:nowrap}
.versions .s{grid-column:2/4;color:var(--muted);font-size:14px}
.versions .latest{font-size:12px;background:var(--accent);color:var(--paper);border-radius:4px;padding:1px 8px;margin-left:8px;vertical-align:2px}
nav{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
nav a{padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);text-decoration:none;font-size:14px}
section{margin-top:48px}
section>h2{font-size:22px;margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--line)}
article{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px;margin-top:16px}
article h3{font-size:19px;margin:0 0 12px;display:flex;gap:10px;align-items:baseline}
article h3 .no{color:var(--accent);font-variant-numeric:tabular-nums;font-size:15px}
blockquote{margin:0 0 14px;padding:8px 14px;border-left:3px solid var(--quote);background:var(--quote-bg);color:var(--quote);
font-size:15px;border-radius:0 6px 6px 0;max-width:70ch}
blockquote cite{display:block;font-style:normal;font-size:12px;opacity:.8;margin-top:2px}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 16px;max-width:820px}
dl.facts dt{color:var(--muted);font-size:14px;padding-top:2px}
dl.facts dd{margin:0}
dl.facts dd.after{font-weight:500}
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.col h4{margin:0 0 8px;font-size:13px;letter-spacing:.08em}
.col.before h4{color:var(--before)}
.col.after h4{color:var(--accent)}
.shots{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
figure{margin:0;flex:1 1 280px;min-width:0}
figure.m{flex:0 1 200px}
figure a{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
figure.m a{max-height:560px}
figure img{display:block;width:100%;height:auto}
figure.m img{object-fit:cover;object-position:top}
.col.before figure a{border-style:dashed}
figcaption{font-size:12px;color:var(--muted);margin-top:4px}
.textbox{border:1px dashed var(--line);border-radius:8px;padding:12px 14px;font-size:15px;background:var(--before-bg)}
.col.after .textbox{border-style:solid;background:var(--accent-soft)}
.where{font-size:14px;color:var(--muted);margin-top:14px}
.where b{color:var(--ink);font-weight:500}
.notes{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 24px 20px 44px;margin-top:16px}
.notes li{margin:4px 0;max-width:65ch}
footer{margin-top:56px;color:var(--muted);font-size:13px}
.fb{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.fb label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.fb textarea{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);
border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.fb textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fb.has textarea{border-color:var(--accent)}
.report{margin-top:48px;background:var(--paper);border:2px solid var(--accent);border-radius:10px;padding:20px 24px;display:grid;gap:12px}
.report h2{font-size:19px;margin:0}
.report p{margin:0;color:var(--muted);font-size:14px;max-width:65ch}
.report .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.report button{font:inherit;font-weight:700;font-size:16px;color:#fff;background:var(--accent);border:0;border-radius:8px;padding:12px 22px;cursor:pointer}
:root[data-theme=dark] .report button{color:#15131d}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .report button{color:#15131d}}
.report button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.report .st{font-size:14px;color:var(--muted)}
.report textarea{width:100%;min-height:140px;font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
@media (max-width:600px){article{padding:18px}.wrap{padding-inline:16px}dl.facts{grid-template-columns:1fr;gap:0}dl.facts dd{margin-bottom:8px}
.versions a{grid-template-columns:1fr}.versions .s{grid-column:1}}