:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#f6f1e7;--fg:#1d1a16;--mute:#7a7266;--line:#ded5c3;--card:#fbf8f1;--accent:#c8472b;--glow:rgba(200,71,43,.12);
  --serif:"Noto Serif TC","Songti TC","Source Han Serif TC",serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141210;--fg:#efe8da;--mute:#9a9082;--line:#2e2924;--card:#1b1815;--accent:#ee7c5b;--glow:rgba(238,124,91,.14);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#141210;--fg:#efe8da;--mute:#9a9082;--line:#2e2924;--card:#1b1815;--accent:#ee7c5b;--glow:rgba(238,124,91,.14);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.8 var(--sans);transition:background .3s,color .3s;
  background-image:radial-gradient(900px 420px at 85% -5%,var(--glow),transparent 70%)}
a{color:inherit;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
nav{display:flex;justify-content:space-between;align-items:center;padding:28px 0;font-size:14px}
nav .logo{font:900 20px var(--serif);letter-spacing:.08em}
nav .logo i{color:var(--accent);font-style:normal}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center;color:var(--mute)}
nav a:hover{color:var(--accent)}
#theme{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:99px;width:34px;height:34px;cursor:pointer;font-size:15px}
.hero{padding:72px 0 56px}
.eyebrow{font-size:13px;letter-spacing:.24em;color:var(--accent);text-transform:uppercase}
h1{font:900 clamp(34px,7vw,58px)/1.25 var(--serif);margin:14px 0 22px;letter-spacing:.02em}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--glow) 62%);box-shadow:inset 0 -3px 0 var(--accent)}
.lead{color:var(--mute);max-width:34em;font-size:17px;margin:0}
.stats{display:flex;gap:36px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.stats b{display:block;font:600 28px var(--serif)}
.stats span{font-size:13px;color:var(--mute)}
h2{font:600 14px var(--sans);letter-spacing:.24em;color:var(--mute);margin:0 0 8px;text-transform:uppercase}
.post{display:grid;grid-template-columns:56px 1fr auto;gap:8px 18px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:transform .25s}
.post:hover{transform:translateX(6px)}
.post:hover h3{color:var(--accent)}
.no{font:400 15px var(--serif);color:var(--mute)}
h3{font:600 21px/1.45 var(--serif);margin:0;transition:color .2s}
.post p{grid-column:2;margin:2px 0 0;color:var(--mute);font-size:15px;line-height:1.7}
.meta{font-size:13px;color:var(--mute);white-space:nowrap}
.tag{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:0 10px;font-size:12px;margin-right:6px;color:var(--accent)}
.quote{margin:72px 0;padding:36px 32px;border-left:3px solid var(--accent);background:var(--card);border-radius:0 14px 14px 0;font:400 20px/1.9 var(--serif)}
.quote small{display:block;margin-top:10px;font:13px var(--sans);color:var(--mute)}
.sub{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.sub input{flex:1;min-width:200px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit}
.sub button{padding:12px 22px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:500 15px var(--sans);cursor:pointer}
footer{margin-top:80px;padding:28px 0 40px;border-top:1px solid var(--line);color:var(--mute);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:560px){
  .post{grid-template-columns:40px 1fr}.meta{grid-column:2}
  nav ul{gap:14px}.stats{gap:22px}
}
#bar{position:fixed;left:0;top:0;height:3px;width:0;background:var(--accent);z-index:20}
#article{padding:40px 0 0}
#article .back{color:var(--mute);font-size:14px;cursor:pointer;display:inline-block;margin-bottom:28px}
#article .back:hover{color:var(--accent)}
#article h1{font-size:clamp(30px,6vw,46px);margin:10px 0 12px}
#article .info{color:var(--mute);font-size:14px;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--line)}
#article .body p{font:400 18px/2 var(--serif);margin:0 0 1.4em}
#article .body p:first-of-type::first-letter{font:900 3.2em/1 var(--serif);float:left;margin:.08em .12em 0 0;color:var(--accent)}
#article .pn{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
#article .pn a{cursor:pointer;max-width:48%}
#article .pn a:hover{color:var(--accent)}
[hidden]{display:none!important}
#article h1{view-transition-name:ttl}
.tools{margin:10px 0 6px}
.tools input{width:100%;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips button{border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:99px;padding:2px 14px;font:inherit;font-size:13px;cursor:pointer}
.chips button.on{background:var(--accent);border-color:var(--accent);color:#fff}
#none{color:var(--mute);padding:28px 0}
#top{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;opacity:0;pointer-events:none;transition:.25s;z-index:15}
#top.show{opacity:1;pointer-events:auto}
.cp{color:var(--accent);cursor:pointer}
::view-transition-old(root){animation:.22s ease both vt-out}
::view-transition-new(root){animation:.42s cubic-bezier(.2,.8,.2,1) both vt-in}
::view-transition-group(ttl){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

#article .body h2{font:600 24px/1.5 var(--serif);letter-spacing:.02em;text-transform:none;color:var(--fg);margin:1.9em 0 .7em;scroll-margin-top:calc(24px + env(safe-area-inset-top,0px))}
#article .body h2:first-child{margin-top:0}