/* 全站共用：配色、纸张、基础排版。各页只写自己那部分。 */
:root{
  color-scheme:light dark;
  --paper:#F6F7F3; --grid:#E2E8E0; --grid-bold:#D2DCD0;
  --ink:#182430; --ink-2:#4C5C67; --ink-3:#8798A1;
  --pencil:#A9B8BE;
  --cut:#B9782A; --cut-fill:rgba(201,134,46,.20);
  --ok:#2C7A57; --ok-soft:rgba(44,122,87,.10);
  --no:#BE3A2B; --no-soft:rgba(190,58,43,.09);
  --card:#FFFFFF; --edge:#DCE4DA;
  --shadow:0 1px 0 rgba(24,36,48,.05), 0 10px 28px -18px rgba(24,36,48,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131816; --grid:#1E2724; --grid-bold:#2A3631;
    --ink:#EAEFE9; --ink-2:#AFBDB5; --ink-3:#7E8D86;
    --pencil:#5F6E68;
    --cut:#E0A94B; --cut-fill:rgba(224,169,75,.22);
    --ok:#66C998; --ok-soft:rgba(102,201,152,.12);
    --no:#EF7A6C; --no-soft:rgba(239,122,108,.12);
    --card:#19201D; --edge:#2A3530;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#131816; --grid:#1E2724; --grid-bold:#2A3631;
  --ink:#EAEFE9; --ink-2:#AFBDB5; --ink-3:#7E8D86;
  --pencil:#5F6E68;
  --cut:#E0A94B; --cut-fill:rgba(224,169,75,.22);
  --ok:#66C998; --ok-soft:rgba(102,201,152,.12);
  --no:#EF7A6C; --no-soft:rgba(239,122,108,.12);
  --card:#19201D; --edge:#2A3530;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
/* Artifact 宿主自带这两条，自托管必须自己补。
   少了第一条，凡是设了 display 的元素（.finish 是 flex）就顶掉 hidden 属性——
   本来该藏起来的答案会一直露在页面上。 */
[hidden]{display:none !important}
img{max-width:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  font-size:16px; line-height:1.75;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 130px 130px, 130px 130px;
}
main{max-width:960px; margin:0 auto; padding:clamp(26px,5vw,64px) clamp(16px,4vw,32px) 80px;
  display:flex; flex-direction:column; gap:clamp(34px,5vw,58px)}

.eyebrow{margin:0; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}
h1{margin:.35em 0 0; font-size:clamp(30px,5.4vw,48px); line-height:1.15; font-weight:700;
  letter-spacing:-.01em; text-wrap:balance}
.lede{margin:.7em 0 0; color:var(--ink-2); max-width:34em}
.head{display:flex; flex-direction:column; align-items:flex-start; gap:0}

h2{margin:0 0 4px; font-size:clamp(19px,2.6vw,23px); font-weight:650; letter-spacing:-.005em;
  display:flex; align-items:baseline; gap:.6em; text-wrap:balance}
h2 .n{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:600;
  color:var(--cut); letter-spacing:.14em; flex:none}
.sub{margin:0 0 20px; color:var(--ink-2); max-width:40em}

.slab{background:var(--card); border:1px solid var(--edge); border-radius:3px;
  padding:clamp(18px,3vw,28px); box-shadow:var(--shadow)}

.back{margin:0 0 4px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase}
.back a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--edge); padding-bottom:2px}
.back a:hover, .back a:focus-visible{color:var(--cut); border-color:var(--cut)}

:focus-visible{outline:2px solid var(--cut); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}