/* Pages other than the home page.
   The home page's street keeps running behind every page (js/inner.js). On wide screens it fills the window and the page
   is a mask over it: solid everywhere except the left 40 %, which stays open onto the street where it was; under it, the
   home page's clock. The accent follows the street's hour (js/scene.js S[].acc), as on the home page.
   Hard edges, hairline rules, solid colour; no rounded panels, no glows, no gradients.
   Layout and scale came from a random seed (window at 40 %, 14 px body, 1 px rules); colour and type follow the home page. */
:root{
  --ink:#080b10;--ink2:#0d1118;--paper:#f1f4f7;--muted:#9aa6b3;--rule:rgba(241,244,247,.16);--rule2:rgba(241,244,247,.34);
  --display:"Noto Serif SC","Songti SC","SimSun",serif;
  --latin:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  /* the home page's six hours, used here also as the status colours */
  --c-early:rgb(183 203 224);--c-morning:rgb(245 217 10);--c-noon:rgb(150 224 170);--c-dusk:rgb(255 154 77);--c-night:rgb(255 79 139);--c-dawn:rgb(243 182 176);
  --good:var(--c-noon);--warn:var(--c-morning);--bad:var(--c-night);
  --accent:var(--c-early);
  color-scheme:dark;
}
.acc-early{--accent:var(--c-early)}.acc-morning{--accent:var(--c-morning)}.acc-noon{--accent:var(--c-noon)}
.acc-dusk{--accent:var(--c-dusk)}.acc-night{--accent:var(--c-night)}.acc-dawn{--accent:var(--c-dawn)}

*{box-sizing:border-box;margin:0}
html{background:var(--ink);scrollbar-gutter:stable}   /* a page growing taller must not narrow the window and jolt the street */
/* the window's width (wide screens) and the band's height (narrow screens) depend on the page; changing page, the mask
   slides to the new width over the running street */
@property --win{syntax:'<percentage>';inherits:true;initial-value:40%}
@property --band{syntax:'<length-percentage>';inherits:true;initial-value:40svh}
body{--win:40%;--band:40svh;transition:--win .9s cubic-bezier(.7,0,.2,1),--band .9s cubic-bezier(.7,0,.2,1)}
body[data-win="wide"]{--win:52%;--band:52svh}
@media (max-width:1240px){body[data-win="wide"]{--win:44%}}
body[data-win="slit"]{--win:24%;--band:24svh}
body{color:var(--paper);background:transparent;font-family:var(--body);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--paper);text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--ink);padding:8px 14px;z-index:9}
.skip:focus{left:0}

/* ---------- frame: plate on the left, the sheet on the right ---------- */
.frame{position:relative;z-index:1;display:grid;grid-template-columns:var(--win) 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"plate top" "plate main" "plate foot";min-height:100vh;min-height:100dvh}
.plate{grid-area:plate;position:sticky;top:0;align-self:start;height:100vh;height:100dvh;display:grid;grid-template-rows:1fr auto;border-right:1px solid var(--rule)}
/* the window: transparent, so the street behind shows through. The canvas itself is fixed to the whole viewport,
   at the same size and position as on the home page */
.plate .window{min-height:0;position:relative}
/* on a full page load the window starts covered and is wiped open, top to bottom, once the street has drawn its first
   frames (js/inner.js adds .street-ready), like the home page's loader wiping the glass; without the script it opens anyway */
.plate .window::after{content:"";position:absolute;inset:0;background:var(--ink);clip-path:inset(0);transition:clip-path 1s cubic-bezier(.7,0,.2,1);animation:uncover 0s 4s forwards}
.street-ready .plate .window::after{clip-path:inset(100% 0 0 0)}
@keyframes uncover{to{clip-path:inset(100% 0 0 0)}}
/* moving between pages: the sheet fades out while the next one is fetched; the new sheet rises in (see arrival) */
.top,.sheet,.foot{transition:opacity .17s ease,transform .17s ease}
.leaving .sheet{opacity:0;transform:translateY(-8px)}
.leaving .top nav,.leaving .foot{opacity:.4}
/* arriving from the home page in the same document: the mask closes over the right, the clock bar comes up */
.arrive .frame::before,.arrive .top,.arrive .foot{animation:mask-in .75s cubic-bezier(.7,0,.2,1) both}
.arrive .plate figcaption{animation:mask-up .7s .12s cubic-bezier(.7,0,.2,1) both}
.arrive .plate .window::after{content:none}
#scene{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0}
/* the mask: everything right of the window is solid, whatever the sheet's own width */
.frame::before{content:"";position:fixed;z-index:-1;top:0;bottom:0;left:var(--win);right:0;background:var(--ink)}
.top,.foot{background:var(--ink)}
.plate figcaption{background:var(--ink);padding:16px clamp(20px,2.6vw,38px) 18px;border-top:1px solid var(--rule)}
.now{display:flex;align-items:flex-end;gap:18px;margin-bottom:16px}
.clock{font-family:var(--latin);font-weight:300;font-size:clamp(56px,6.2vw,96px);line-height:.82;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wx{font-size:13px;color:var(--paper);padding-bottom:4px;white-space:nowrap}
body[data-win="slit"] .clock{font-size:clamp(44px,4.4vw,72px)}
body[data-win="slit"] .day li{font-size:11px}
body[data-win="slit"] .day li b{font-size:11px;letter-spacing:.02em}
/* the day of joining the city: six hours of the home page's day, one step each. The accent line along the top follows
   the street's hour (js/inner.js sets --t) */
.day{position:relative;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule2)}
.day::after{content:"";position:absolute;top:-1px;left:0;height:1px;width:calc(var(--t,0) * 100%);background:var(--accent)}
.day li{position:relative;padding:10px 4px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day li b{display:block;font-family:var(--latin);font-weight:600;font-size:12px;letter-spacing:.08em;color:inherit}
.day li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--rule2)}
.day li.done{color:var(--paper)}
.day li.done::before{background:var(--paper);box-shadow:none}
.day li.next{color:var(--accent)}
.day li.next::before{box-shadow:inset 0 0 0 2px var(--accent)}

.top{grid-area:top;display:flex;align-items:center;gap:20px;padding:22px clamp(20px,3.6vw,64px);border-bottom:1px solid var(--rule)}
.mark{font-family:var(--latin);font-weight:800;font-size:20px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;margin-right:auto}
.mark b{color:var(--accent);font-weight:800}
.mark:hover{color:var(--paper)}
.top nav{display:flex;align-items:stretch;gap:20px;font-size:14px;white-space:nowrap}
.top nav a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--paper)}
.top nav a[aria-current]{color:var(--paper);border-bottom-color:var(--accent)}
.top nav .snd{display:inline-flex;align-items:center;gap:7px;padding:4px 0;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;cursor:pointer}
.top nav .snd:hover{color:var(--paper)}
.top nav .snd[aria-pressed="true"]{color:var(--accent)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.eq i{width:2px;height:4px;background:currentColor}
.snd[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite}
.snd[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.3s}.snd[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
.top nav .snd{margin-left:6px}
.top nav a.me{color:var(--paper);padding:4px 12px;border:1px solid var(--rule2);max-width:13em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top nav a.me:hover,.top nav a.me[aria-current]{border-color:var(--accent);color:var(--accent)}

.sheet{grid-area:main;padding:clamp(48px,10vh,120px) clamp(24px,4.4vw,72px) 88px;max-width:760px}
.foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;padding:18px clamp(24px,4.4vw,72px) 22px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.foot a{color:var(--paper);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover,.foot a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.foot small{flex-basis:100%;font-size:12px;color:var(--muted);opacity:.8}

/* ---------- type ---------- */
.banner{margin:0 0 26px;padding:9px 0 9px 14px;border-left:3px solid var(--warn);font-size:13.5px;line-height:1.6;color:var(--paper);max-width:56ch}
.kicker{display:flex;gap:14px;align-items:baseline;font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.kicker b{font-weight:700;color:var(--paper);letter-spacing:.12em}
h1{font-family:var(--display);font-weight:900;font-size:clamp(32px,3.2vw,46px);line-height:1.18;letter-spacing:.02em;margin-bottom:18px;text-wrap:balance}
h2{display:flex;gap:14px;align-items:baseline;font-size:16px;font-weight:700;margin:56px 0 14px;padding-top:14px;border-top:1px solid var(--rule)}
h2 .n{font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--accent)}
p{margin-bottom:12px;max-width:56ch}
.lead{font-size:15.5px;line-height:1.8;color:#dce3ea;max-width:44ch}
.note{color:var(--muted);font-size:13px}
.note a{color:var(--paper)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 20px;background:var(--accent);color:var(--ink);border:1px solid var(--accent);border-radius:0;font:700 14px/1 var(--body);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.btn::after{content:"→";font-family:var(--latin);font-weight:500;font-size:18px;line-height:0;transition:transform .2s}
.btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn:hover::after{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--rule2)}
.btn.ghost::after{content:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.small{padding:8px 14px;font-size:13px}
.btn.ghost.danger{color:var(--bad);border-color:rgba(255,79,139,.5)}
.btn.ghost.danger:hover{color:var(--ink);background:var(--bad);border-color:var(--bad)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.actions form{margin:0}

/* ---------- forms: numbered lines, like a counter form ---------- */
.form{margin:34px 0 26px;max-width:480px;counter-reset:f}
.field{display:grid;grid-template-columns:44px 1fr;column-gap:4px;padding:16px 0 14px;border-top:1px solid var(--rule);counter-increment:f}
.field::before{content:counter(f,decimal-leading-zero);grid-row:1/9;font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--muted);padding-top:2px}
.field label{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}
.field input{width:100%;padding:6px 0 8px;border:0;border-bottom:1px solid var(--rule2);border-radius:0;background:transparent;color:var(--paper);font:500 16px/1.4 var(--body);outline:none}
.field input:hover{border-bottom-color:rgba(241,244,247,.6)}
.field input:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.field:focus-within::before,.field:focus-within label{color:var(--accent)}
.field .hint{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6;max-width:none}
.field .err{margin:8px 0 0;color:var(--bad);font-size:13px;max-width:none}
.field .err a{color:var(--bad)}
.field.has-err::before,.field.has-err label{color:var(--bad)}
.field.has-err input{border-bottom-color:var(--bad)}
.form>.btn{margin-top:22px}

/* ---------- notices: a coloured rule, nothing else ---------- */
.alert{margin:22px 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);font-size:14px;line-height:1.7;max-width:56ch}
.alert p{margin:0 0 4px}
.alert.good{border-left-color:var(--good)}
.alert.warn{border-left-color:var(--warn)}
.alert.bad{border-left-color:var(--bad)}
.alert .btn{margin-top:10px}

/* ---------- account ledger ---------- */
.facts{display:grid;grid-template-columns:7em 1fr;margin:30px 0 8px;max-width:520px}
.facts dt,.facts dd{padding:11px 0;border-top:1px solid var(--rule)}
.facts dt{color:var(--muted);font-size:13px}
.facts dd{margin:0;word-break:break-all}
.facts time{white-space:nowrap}
.tag{margin-left:12px;font-size:12.5px;white-space:nowrap}
.tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;vertical-align:1px}
.tag.ok{color:var(--good)}.tag.ok::before{background:var(--good)}
.tag.no{color:var(--warn)}.tag.no::before{background:var(--warn)}

/* ---------- big statement pages (placeholders, results, 404) ---------- */
.big{font-family:var(--display);font-weight:900;font-size:clamp(40px,4.6vw,68px);line-height:1.1;letter-spacing:.02em;margin-bottom:22px}
.rules{margin:0 0 8px;padding:0;list-style:none;counter-reset:r;max-width:58ch}
.rules li{position:relative;padding:10px 0 10px 34px;border-top:1px solid var(--rule);counter-increment:r}
.rules li::before{content:counter(r);position:absolute;left:0;top:10px;font-family:var(--latin);font-weight:600;font-size:13px;color:var(--muted)}
.rules li b{color:var(--paper)}
code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.92em;padding:0 3px;color:var(--accent);background:rgba(241,244,247,.06)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- the character card: a long counter form in three parts ---------- */
.wide-form{max-width:620px}
.wide-form h2{margin-top:44px}
.wide-form h2:first-of-type{margin-top:8px}
.pair{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.field textarea{width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--rule2);border-radius:0;background:transparent;color:var(--paper);font:400 15px/1.85 var(--body);outline:none;resize:vertical;min-height:7em}
.field textarea:hover{border-bottom-color:rgba(241,244,247,.6)}
.field textarea:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.field.has-err textarea{border-bottom-color:var(--bad)}
.field .count{float:right;margin-left:12px;font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.field .count.short{color:var(--warn)}
.field .count.ok{color:var(--good)}
/* single choice: square tiles in a row, the chosen one filled */
.choice{border:0;padding:16px 0 14px;min-width:0}
.choice legend{float:left;width:100%;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:10px;line-height:1.6;padding:0}
.choice legend+*{clear:left}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:block;padding:8px 14px;border:1px solid var(--rule2);font-size:14px;line-height:1.5;color:var(--paper)}
.opt:hover span{border-color:var(--paper)}
.opt input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:500}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.choice.has-err legend{color:var(--bad)}
.choice .err{grid-column:2;margin:8px 0 0;color:var(--bad);font-size:13px;max-width:none}
/* the quiz: answers stacked, one per line, so long options read as sentences */
.wide-form h2~.choice .opts{flex-direction:column;align-items:stretch}
.pair .choice .opts{flex-direction:row}
.check{display:flex;gap:12px;align-items:flex-start;margin:26px 0 4px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px;cursor:pointer}
.check input{appearance:none;flex:none;width:18px;height:18px;margin-top:3px;border:1px solid var(--rule2);border-radius:0;background:transparent;cursor:pointer}
.check input:checked{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--ink)}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check .err{display:block;font-style:normal;color:var(--bad);font-size:13px;margin-top:4px}
.form .check+.btn{margin-top:22px}
/* status pages */
.story{margin:18px 0 6px;border-top:1px solid var(--rule);max-width:58ch}
.story summary{padding:12px 0;cursor:pointer;color:var(--muted);font-size:13px;list-style:none}
.story summary::before{content:"+";display:inline-block;width:20px;font-family:var(--latin);font-weight:600;color:var(--accent)}
.story[open] summary::before{content:"−"}
.story summary:hover{color:var(--paper)}
.pre{white-space:pre-wrap;word-break:break-word;max-width:58ch}
.muted{color:var(--muted)}
.nw{white-space:nowrap}
.log{list-style:none;padding:0;margin:0;max-width:58ch}
.log li{display:grid;grid-template-columns:11em 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--rule);font-size:13.5px}
.log time{font-family:var(--latin);font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
/* rejected: the 递交 step is open again, marked as sent back */
.day li.back{color:var(--bad)}
.day li.back::before{background:var(--ink);box-shadow:inset 0 0 0 2px var(--bad)}

/* ---------- 公报: an index of papers, big dates down the left like the clock ---------- */
.filter{display:flex;flex-wrap:wrap;gap:4px 22px;margin:30px 0 8px;font-size:14px}
.filter a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
.filter a:hover{color:var(--paper)}
.filter a[aria-current]{color:var(--paper);border-bottom-color:var(--accent)}
.filter .feed{margin-left:auto;font-family:var(--latin);font-weight:600;letter-spacing:.14em;font-size:13px;text-transform:uppercase}
.papers{list-style:none;padding:0;margin:0 0 8px;max-width:640px}
.papers .year{font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:.24em;color:var(--muted);padding:26px 0 6px}
.paper a{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:18px 0 20px;border-top:1px solid var(--rule);text-decoration:none;color:var(--paper)}
.paper .d{font-family:var(--latin);font-weight:300;font-size:36px;white-space:nowrap;line-height:.9;letter-spacing:-.01em;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .2s}
.paper.pinned .d{font-family:var(--body);font-weight:700;font-size:14px;line-height:1.5;letter-spacing:.2em;color:var(--accent)}
.paper .t{display:grid;gap:4px;min-width:0}
.paper em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--accent)}
.paper b{font-family:var(--display);font-weight:900;font-size:21px;line-height:1.35;letter-spacing:.02em}
.paper .s{color:var(--muted);font-size:13.5px;line-height:1.7}
.paper a:hover .d{color:var(--accent)}
.paper a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:6px}
.empty{color:var(--muted);padding:22px 0;border-top:1px solid var(--rule);max-width:640px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:640px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px}
.pager .at{font-family:var(--latin);font-weight:600;letter-spacing:.14em;color:var(--muted)}
.pager a:last-child{justify-self:end}
/* one post: long reading in the slit window */
.prose{max-width:62ch;font-size:15px;line-height:1.95;margin-top:26px}
.prose>*+*{margin-top:14px}
.prose h2{display:block;font-family:var(--display);font-weight:900;font-size:22px;margin:40px 0 10px;padding-top:0;border:0}
.prose h3{font-size:16px;font-weight:700;margin:30px 0 6px}
.prose h4{font-size:15px;font-weight:700;margin:24px 0 4px;color:var(--muted)}
.prose p{max-width:none;margin-bottom:0}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:4px}
.prose ul li::marker{color:var(--accent)}
.prose ol li::marker{font-family:var(--latin);font-weight:600;color:var(--accent)}
.prose blockquote{padding-left:16px;border-left:2px solid var(--accent);color:#dce3ea}
.prose hr{border:0;border-top:1px solid var(--rule);margin:30px 0}
.prose pre{padding:12px 14px;background:rgba(241,244,247,.05);border-left:2px solid var(--rule2);overflow-x:auto;font-size:13px;line-height:1.7}
.prose pre code{padding:0;background:none;color:var(--paper)}
.prose strong{color:#fff}
.byline{margin-top:34px;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted);max-width:62ch}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:62ch;margin-top:26px}
.nextprev a{display:grid;gap:2px;text-decoration:none;font-size:14px;line-height:1.5}
.nextprev a:last-child{text-align:right}
.nextprev small{font-family:var(--latin);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.nextprev a:hover{color:var(--accent)}

/* ---------- Wiki: a reading room. Contents as a two-column card index, search as a single ruled line ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.find{display:flex;max-width:520px;margin:28px 0 8px;border-bottom:1px solid var(--rule2)}
.find:focus-within{border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.find input{flex:1;min-width:0;padding:10px 0;border:0;background:transparent;color:var(--paper);font:500 16px/1.4 var(--body);outline:none}
.find button{padding:0 0 0 18px;border:0;background:none;color:var(--accent);font:600 13px var(--latin);letter-spacing:.2em;cursor:pointer}
.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;max-width:640px}
.toc section{break-inside:avoid}
.toc h2{margin:34px 0 6px}
.toc ul{list-style:none;padding:0}
.toc li a{display:block;padding:7px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:14.5px}
.toc li a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hits{list-style:none;padding:0;max-width:640px}
.hits li{padding:14px 0;border-top:1px solid var(--rule)}
.hits a{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.hits b{font-family:var(--display);font-weight:900;font-size:19px}
.hits small{font-size:12px;letter-spacing:.12em;color:var(--accent)}
.hits p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
mark{background:none;color:var(--accent);font-weight:700}
.prose a.new{color:var(--bad);text-decoration-style:dashed}
.prose .table{overflow-x:auto}
.prose table{border-collapse:collapse;font-size:14px;line-height:1.6;min-width:60%}
.prose th{text-align:left;font-weight:500;font-size:12.5px;color:var(--muted);padding:6px 16px 6px 0;border-bottom:1px solid var(--rule2)}
.prose td{padding:7px 16px 7px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose.preview{padding:6px 0 0 16px;border-left:2px solid var(--rule2)}
.field textarea.code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:13.5px;line-height:1.75;min-height:22em}
.revs small{display:block;color:var(--muted);font-size:12.5px}
.revs .cur,.ws{font-style:normal;font-weight:500;font-size:12px;color:var(--accent)}
.ws.approved{color:var(--good)}.ws.rejected{color:var(--bad)}.ws.pending{color:var(--warn)}
.log li small{display:block;color:var(--muted);font-size:12.5px}
/* line diff: removed in pink, added in green, a sign column like a ledger correction */
.diff{max-width:62ch;margin:10px 0 6px;border-top:1px solid var(--rule);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px;line-height:1.7}
.diff>div{display:grid;grid-template-columns:22px 1fr;border-bottom:1px solid rgba(241,244,247,.06)}
.diff span{white-space:pre-wrap;word-break:break-word;padding:1px 6px 1px 0}
.diff .op{text-align:center;color:var(--muted);padding:1px 0}
.diff .add{background:rgba(150,224,170,.09)}.diff .add .op{color:var(--good)}
.diff .del{background:rgba(255,79,139,.09);color:#e6b9c9}.diff .del .op{color:var(--bad)}
.diff .del span:last-child{text-decoration:line-through;text-decoration-color:rgba(255,79,139,.5)}
.diff .ctx{color:var(--muted)}
.diff .gap{display:block;padding:4px 0;text-align:center;color:var(--muted);font-family:var(--body);font-size:12px}

/* ---------- 投票: the order paper of the town hall. Motions numbered like bills; results as hard bars ---------- */
.motions{list-style:none;padding:0;max-width:640px}
.motion a{display:grid;grid-template-columns:4.2em 1fr auto;gap:16px;align-items:baseline;padding:16px 0 18px;border-top:1px solid var(--rule);text-decoration:none}
.motion .no{font-family:var(--latin);font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--muted)}
.motion .t{display:grid;gap:4px;min-width:0}
.motion b{font-family:var(--display);font-weight:900;font-size:20px;line-height:1.35}
.motion .s{color:var(--muted);font-size:13.5px}
.motion .when{font-size:13px;color:var(--muted);white-space:nowrap;text-align:right}
.motion .when em{display:block;font-style:normal;color:var(--good);font-size:12px;margin-top:2px}
.motion.open .no,.motion.open .when{color:var(--accent)}
.motion a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:6px}
.motion.closed b{color:#cfd6dd}
.ballot{max-width:560px;margin:30px 0 8px}
.ballot fieldset{border:0;padding:0;margin:0}
.ballot legend{font-size:13px;color:var(--muted);margin-bottom:10px;padding:0}
.ballot.preview{list-style:none;padding:0}
.ballot.preview li,.pick{display:block;margin-top:-1px}
.ballot.preview li span,.pick span{display:block;padding:14px 18px;border:1px solid var(--rule2);font-size:15px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:14px;vertical-align:-1px;box-shadow:inset 0 0 0 1px var(--rule2)}
.pick:hover span{border-color:var(--paper);position:relative}
.pick input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:500;position:relative}
.pick input:checked+span::before{box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 4px var(--accent),inset 0 0 0 12px var(--ink)}
.pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.ballot .btn{margin-top:14px}
.tally{list-style:none;padding:0;max-width:600px;margin:14px 0}
.tally li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0 14px;border-top:1px solid var(--rule)}
.tally .lbl{font-size:15px}
.tally .num{font-size:13px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.tally .num b{font-family:var(--latin);font-weight:600;font-size:22px;color:var(--paper);margin-right:2px}
.tally progress{grid-column:1/-1;width:100%;height:10px;appearance:none;-webkit-appearance:none;border:0;background:rgba(241,244,247,.08);color:var(--muted)}
.tally progress::-webkit-progress-bar{background:rgba(241,244,247,.08)}
.tally progress::-webkit-progress-value{background:var(--muted)}
.tally progress::-moz-progress-bar{background:var(--muted)}
.tally .top .lbl{font-weight:700;color:#fff}
.tally .top progress{color:var(--accent)}
.tally .top progress::-webkit-progress-value{background:var(--accent)}
.tally .top progress::-moz-progress-bar{background:var(--accent)}

/* ---------- narrow screens: the plate becomes a band under the bar ---------- */
@media (max-width:899px){
  .frame{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"top" "plate" "main" "foot"}
  .plate{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .frame{background:var(--ink)}
  .frame::before{content:none}
  .plate .window{position:relative;height:var(--band);overflow:hidden}
  #scene{position:absolute;width:100%;height:100%;z-index:-2}
  .plate figcaption{padding:12px 20px 14px;column-gap:16px}
  .clock{font-size:52px}
  .day li{font-size:11.5px}
  .top{padding:14px 20px;gap:14px;flex-wrap:wrap}
  .top nav{gap:16px}
  .sheet{padding:36px 20px 64px}
  .foot{padding:16px 20px;gap:16px;flex-wrap:wrap}
  h2{margin-top:44px}
  .pair{grid-template-columns:1fr;column-gap:0}
  .log li{grid-template-columns:1fr;gap:0}
  .paper a{grid-template-columns:66px 1fr;gap:12px}
  .toc{grid-template-columns:1fr}
  .motion a{grid-template-columns:3em 1fr;gap:10px}
  .motion .when{grid-column:2;text-align:left}
  .paper .d{font-size:25px}
  .paper b{font-size:18px}
}
@media (max-width:420px){.mark{font-size:17px}.top nav{gap:12px;font-size:13.5px}.top nav a.me{padding:3px 9px}}

/* ---------- arrival: the clock and the sheet come up. Between pages (and from the home page) browsers that support
   cross-page view transitions slide the mask in from the right while the street behind carries on.
   Nothing moves for visitors who ask for less motion. ---------- */
@view-transition{navigation:auto}
.sheet{view-transition-name:sheet}
.top{view-transition-name:topbar}
.plate figcaption{view-transition-name:clockbar}
::view-transition-new(sheet):only-child{animation:mask-in .7s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(clockbar):only-child{animation:mask-up .7s .1s cubic-bezier(.7,0,.2,1) both}
@keyframes mask-in{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes mask-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:no-preference){
  .clock{animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
  .wx,.day{animation:rise .7s .45s cubic-bezier(.2,.7,.2,1) both}
  .sheet>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .sheet>:nth-child(2){animation-delay:.06s}.sheet>:nth-child(3){animation-delay:.12s}.sheet>:nth-child(4){animation-delay:.18s}
  .sheet>:nth-child(5){animation-delay:.24s}.sheet>:nth-child(n+6){animation-delay:.3s}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.btn::after{transition:none}.eq i{animation:none!important}.plate .window::after{transition:none}.arrive .frame::before,.arrive .top,.arrive .foot,.arrive .plate figcaption{animation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* 反馈与举报、建议板 */
.thread{list-style:none;padding:0;margin:26px 0;max-width:62ch}
.thread li{padding:14px 0 16px 16px;border-left:2px solid var(--rule2);margin-bottom:6px}
.thread li.staff{border-left-color:var(--accent)}
.thread .who{font-size:12.5px;color:var(--muted);margin:0 0 6px}
.thread li.staff .who{color:var(--accent)}
.sorts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:26px 0 8px;font-size:13px}
.sorts a{color:var(--muted);text-decoration:none}
.sorts a[aria-current]{color:var(--paper);border-bottom:1px solid var(--accent)}
.sorts span{flex-basis:0;border-left:1px solid var(--rule2)}
.ideas{list-style:none;padding:0;max-width:640px}
.ideas li{display:grid;grid-template-columns:4.6em 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.ideas a{display:grid;gap:4px;text-decoration:none;min-width:0}
.ideas a b{font-family:var(--display);font-weight:900;font-size:19px;line-height:1.35}
.ideas a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.ideas .s{font-size:13px;color:var(--muted)}
.votes{display:grid;justify-items:center;padding:6px 0;border:1px solid var(--rule2);font-size:11.5px;color:var(--muted)}
.votes b{font-family:var(--latin);font-weight:700;font-size:22px;line-height:1.1;color:var(--paper)}
.votes.mine{border-color:var(--accent)}.votes.mine b{color:var(--accent)}
.backing{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:26px 0}
.backing .votes{padding:6px 14px}
.st{display:inline-block;font-size:11.5px;line-height:1;padding:3px 6px;border:1px solid currentColor;vertical-align:middle}
.st.pending{color:var(--warn)}.st.approved{color:var(--good)}.st.rejected{color:var(--bad)}.st.sync{color:var(--accent)}
.prose img{display:block;max-width:100%;height:auto;margin:18px 0}
.prose figure{margin:22px 0}
.prose figure img{margin:0}
.prose figcaption{margin-top:8px;font-size:12.5px;color:var(--muted)}