:root{--paper:#F6F4EE;--card:#FFFFFF;--ink:#1F1D19;--muted:#6C665B;--line:#E3DED3;--soft:#EFEBE2;
--accent:#2E5E63;--accent-soft:#E3EEEE;--block:#B26B12;--block-soft:#FBF0DE;--review:#5B4BB5;--review-soft:#ECE9F8;
--doing:#2763A6;--doing-soft:#E4EEF8;--done:#2D7A4E;--done-soft:#E2F2E8;--todo:#6C665B;--todo-soft:#EEEBE4;
--close:#B23B3B;--close-soft:#F8E5E3;--wire:#FBFAF7;--wire-line:#CFC8BA;--btn:#2E5E63;--btn-ink:#FFFFFF;
--sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#14130F;--card:#1D1B17;
--ink:#ECE8DF;--muted:#A49E91;--line:#35322B;--soft:#25231E;--accent:#7EB6BB;--accent-soft:#1E2E30;--block:#E2A04B;
--block-soft:#33271A;--review:#A89CF0;--review-soft:#29253A;--doing:#7FB0E8;--doing-soft:#1C2836;--done:#7CC79A;
--done-soft:#1C2E24;--todo:#A49E91;--todo-soft:#26241F;--close:#E9837B;--close-soft:#3A2220;--wire:#191814;
--wire-line:#4A463D;--btn:#7EB6BB;--btn-ink:#14130F}}
:root[data-theme="dark"]{color-scheme:dark;--paper:#14130F;--card:#1D1B17;--ink:#ECE8DF;--muted:#A49E91;--line:#35322B;
--soft:#25231E;--accent:#7EB6BB;--accent-soft:#1E2E30;--block:#E2A04B;--block-soft:#33271A;--review:#A89CF0;
--review-soft:#29253A;--doing:#7FB0E8;--doing-soft:#1C2836;--done:#7CC79A;--done-soft:#1C2E24;--todo:#A49E91;
--todo-soft:#26241F;--close:#E9837B;--close-soft:#3A2220;--wire:#191814;--wire-line:#4A463D;--btn:#7EB6BB;--btn-ink:#14130F}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 var(--sans)}
a{color:var(--accent)}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);padding-block:28px 64px}
.crumb{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
h1{font-size:clamp(20px,2.4vw,25px);line-height:1.45;margin:10px 0 4px;max-width:46em;text-wrap:pretty}
h2{font-size:18px;margin:0 0 12px;display:flex;align-items:baseline;gap:8px}
h2 .count{font-size:13px;color:var(--muted);font-weight:400}
.sub{color:var(--muted);font-size:14px;margin:0}
section{margin-top:34px}
.chip{display:inline-block;font-size:12.5px;padding:2px 10px;border-radius:999px;font-weight:600;white-space:nowrap}
.st-block{background:var(--block-soft);color:var(--block)}.st-review{background:var(--review-soft);color:var(--review)}
.st-doing{background:var(--doing-soft);color:var(--doing)}.st-done{background:var(--done-soft);color:var(--done)}
.st-todo,.st-record{background:var(--todo-soft);color:var(--todo)}.st-close{background:var(--close-soft);color:var(--close)}
.meta{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:8px 14px;margin:18px 0 0;
background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.meta dt{font-size:13px;color:var(--muted);letter-spacing:.04em;padding-top:1px}.meta dd{margin:0;font-size:14.5px}
.meta dd.blocked{color:var(--block);font-weight:600}
.jump{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:14px;font-size:14px}
section[id]{scroll-margin-top:12px}
.pmnote{margin-top:16px;background:var(--block-soft);color:var(--ink);border-left:3px solid var(--block);
border-radius:6px;padding:10px 14px;font-size:14.5px}
.story{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-size:15.5px}
.story b{color:var(--accent)}
ol.flow{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:step}
ol.flow>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:16px;background:var(--card);
border:1px solid var(--line);border-radius:10px;padding:14px 16px;counter-increment:step}
ol.flow>li.noscreen{grid-template-columns:1fr}
.stepnum{font-family:var(--mono);font-size:12px;color:var(--muted)}
.stepnum::before{content:"第 " counter(step) " 步"}
.actor{font-weight:700}.does{margin:2px 0}.result{color:var(--muted);font-size:14.5px}
.result::before{content:"→ ";color:var(--accent)}
.screen{background:var(--wire);border:1px solid var(--wire-line);border-radius:8px;overflow:hidden;font-size:13px;align-self:start}
.screen .bar{background:var(--soft);border-bottom:1px solid var(--wire-line);padding:5px 10px;font-weight:600;
display:flex;gap:6px;align-items:center}
.screen .bar::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wire-line);box-shadow:12px 0 0 var(--wire-line),24px 0 0 var(--wire-line);margin-right:28px}
.screen .body{padding:10px;display:grid;gap:8px}
.w-heading{font-weight:700;font-size:14px}.w-text{color:var(--muted)}
.w-field label{display:block;font-size:12px;color:var(--muted)}
.w-field .box{border:1px solid var(--wire-line);border-radius:5px;height:28px;background:var(--card)}
.w-button{justify-self:start;background:var(--btn);color:var(--btn-ink);border-radius:6px;padding:4px 12px;font-weight:600}
.w-link{color:var(--accent);text-decoration:underline}
.w-list{margin:0;padding-left:18px}
.w-toggle,.w-check{display:flex;gap:8px;align-items:center}
.w-toggle i{width:26px;height:14px;border-radius:999px;background:var(--wire-line);position:relative;flex:none}
.w-toggle i::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--card);top:2px;left:2px}
.w-check i{width:13px;height:13px;border:1.5px solid var(--wire-line);border-radius:3px;flex:none}
.w-alert{background:var(--block-soft);border-left:3px solid var(--block);padding:5px 8px;border-radius:4px}
.w-image{height:70px;border:1px dashed var(--wire-line);border-radius:5px;display:grid;place-items:center;color:var(--muted);
background:repeating-linear-gradient(45deg,transparent 0 8px,var(--soft) 8px 9px)}
.w-table{border:1px solid var(--wire-line);border-radius:5px;overflow:hidden}
.w-table div{padding:3px 8px;border-bottom:1px solid var(--wire-line)}.w-table div:first-child{background:var(--soft);font-weight:600}
.w-table div:last-child{border-bottom:0;height:18px}
ul.rules{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.rules li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 14px;display:flex;gap:10px;
justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.src{font-size:12.5px;color:var(--muted);white-space:nowrap}
.q{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;display:grid;gap:6px}
.q + .q{margin-top:10px}.q .who{font-size:12.5px;color:var(--muted)}
.q ul{margin:0;padding-left:20px}.q .rec{background:var(--accent-soft);border-radius:6px;padding:6px 10px;font-size:14.5px}
.q .rec b{color:var(--accent)}
ul.accept{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.accept li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 14px;display:flex;gap:12px}
ul.accept input{margin-top:5px;width:16px;height:16px;accent-color:var(--accent);flex:none}
ul.accept .g{color:var(--muted);font-size:13px}
ul.plain{margin:0;padding-left:20px}
.related{display:flex;gap:8px;flex-wrap:wrap}
.related a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 12px;text-decoration:none;font-size:14px}
footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.counts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.counts span{font-size:13px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;align-items:center}
.filters button{font:inherit;font-size:13.5px;border:1px solid var(--line);background:var(--card);color:var(--ink);
border-radius:999px;padding:3px 12px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--accent);color:var(--btn-ink);border-color:var(--accent)}
.filters input{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);
border-radius:8px;padding:4px 10px;min-width:0;flex:1 1 200px;max-width:320px}
.group{margin-top:30px}
.rows{display:grid;gap:8px}
a.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;background:var(--card);
border:1px solid var(--line);border-radius:10px;padding:11px 16px;text-decoration:none;color:var(--ink)}
a.row:hover{border-color:var(--accent)}
.row .num{font-family:var(--mono);color:var(--muted);font-size:13px}
.row .plainline{font-weight:600}
.row .detail{grid-column:2 / -1;color:var(--muted);font-size:13.5px;display:flex;gap:14px;flex-wrap:wrap}
.row .detail b{color:var(--ink);font-weight:600}
.row .next{flex-basis:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){ol.flow>li{grid-template-columns:1fr}.meta{grid-template-columns:1fr;gap:2px}.meta dd{margin-bottom:8px}a.row{grid-template-columns:1fr auto}.row .num{grid-column:1/-1}}
@media (prefers-reduced-motion:no-preference){a.row{transition:border-color .15s}}