:root{color-scheme:light;--bg:#fafafa;--surface:#fff;--text:#292c30;--muted:#60666d;--line:#dcdfe2;--accent:#1457d9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif}

html[data-theme=dark]{color-scheme:dark;--bg:#181a1b;--surface:#202326;--text:#d5d8dc;--muted:#a1a7ad;--line:#3b4045;--accent:#8ab4ff}

*{box-sizing:border-box;letter-spacing:0}
html{scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.8;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button{font:inherit}
img{display:block;max-width:100%;height:auto}
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.header-inner{max-width:1180px;margin:auto;min-height:64px;display:flex;align-items:center;gap:28px;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-size:20px;font-weight:700;text-decoration:none;white-space:nowrap}
.brand img{width:42px;height:28px}
html[data-theme=dark] .brand img{filter:brightness(0) invert(1)}
.header-inner nav{display:flex;gap:24px;margin-left:auto}
.header-inner nav a{color:var(--text);font-size:14px;display:flex;align-items:center;min-height:44px;text-decoration:none}
.header-inner nav a[aria-current=page]{color:var(--accent)}
#blog-theme{width:44px;height:44px;border:0;background:transparent;color:var(--text);cursor:pointer;flex-shrink:0}
#blog-theme span{display:flex;justify-content:center}
.page{width:min(1040px,calc(100% - 48px));margin:32px auto 72px;flex:1}
.breadcrumbs{display:flex;gap:12px;color:var(--muted);font-size:13px;margin-bottom:32px}
.article-layout{display:grid;grid-template-columns:minmax(0,680px) minmax(180px,1fr);gap:64px}
.category{font-size:13px;font-weight:700;color:var(--accent);margin:0 0 8px}
.article-heading h1,.index-heading h1{font-size:32px;line-height:1.5;margin:0 0 16px;font-weight:700;overflow-wrap:anywhere}
.article-meta{font-size:13px;color:var(--muted);display:flex;gap:12px}
.article-deck{font-size:18px;color:var(--muted);line-height:1.85}
.article-heading{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--line)}
figure{margin:0 0 36px}
figure img{width:100%;aspect-ratio:1200/780;object-fit:contain}
.reading-figure img{aspect-ratio:auto;height:auto}
.evidence-figure img{width:auto;max-width:100%;margin-inline:auto}
.comparison-mobile{display:none}
@media(max-width:600px){.comparison-mobile{display:grid;gap:20px;margin-top:20px}}
figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.article-body{font-size:19px;line-height:1.9;overflow-wrap:anywhere}
.article-body h2{font-size:25px;line-height:1.5;margin:56px 0 24px}
.article-body p{margin:0 0 1.4em}
.article-body li{margin:14px 0}
.article-body ul{padding-left:1.4em;margin:0 0 1.4em}
.article-body code{font-family:Consolas,monospace;font-size:.9em}
.article-body a{overflow-wrap:anywhere}
aside nav{position:sticky;top:32px;border-left:1px solid var(--line);padding-left:20px;font-size:13px}
aside p{margin-top:0;font-weight:700}
aside ol{list-style:none;margin:0;padding:0}
aside li{margin:12px 0}
aside a{color:var(--muted);text-decoration:none}
.article-end{border-top:1px solid var(--line);margin-top:40px;padding-top:24px;display:flex;flex-wrap:wrap;gap:24px}
.index-heading{padding:16px 0 32px;border-bottom:1px solid var(--line)}
.index-heading p:last-child{color:var(--muted)}
.article-list>article{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;padding:36px 0;border-bottom:1px solid var(--line)}
.article-list h2{font-size:24px;line-height:1.6;margin:4px 0 12px}
.article-list h2 a{color:var(--text);text-decoration:none}
.article-list p:not(.category),.article-list time{color:var(--muted)}
.article-list time{font-size:13px}
.article-thumbnail img{aspect-ratio:1200/780;object-fit:contain}
.site-footer{max-width:1180px;width:calc(100% - 48px);margin:auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding:24px 0;border-top:1px solid var(--line);font-size:13px}
.site-footer>a{font-weight:700}
.site-footer nav{display:flex;flex-wrap:wrap;gap:20px}
.site-footer a{color:var(--muted);text-decoration:none}
.skip-link{position:absolute;top:-100px;left:16px;padding:8px 16px;background:var(--surface);z-index:5}
.skip-link:focus{top:8px}

@media(max-width:959px){.article-layout{grid-template-columns:minmax(0,680px);justify-content:center}
aside{display:none}
.article-list>article{grid-template-columns:240px minmax(0,1fr);gap:24px}
}

@media(max-width:600px){.header-inner{padding:0 14px;gap:8px}
.brand span{display:none}
.header-inner nav{gap:16px}
.header-inner nav a{font-size:13px}
.page{width:calc(100% - 32px);margin-top:24px}
.breadcrumbs{margin-bottom:24px}
.article-heading h1,.index-heading h1{font-size:27px}
.article-body{font-size:18px}
.article-body h2{font-size:22px;margin:44px 0 20px}
.article-deck{font-size:17px}
.article-list>article{grid-template-columns:minmax(0,1fr);gap:20px}
.article-thumbnail{max-width:400px}
.article-list h2{font-size:22px}
.site-footer{width:calc(100% - 32px)}
}