:root{--bg:#040304;--fg:#fff5ee;--link:#10a0a0;--line:#211921;--mut:#9a8f9a;--glow:#10a0a033} *{box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.65;margin:0;font-size:16px;overflow-x:hidden} a{color:var(--link)} header{padding:.7em .8em .5em} header h1{font-size:1em;margin:0;font-weight:400} header h1 b{font-weight:700} header p{margin:.2em 0 0;color:var(--mut);font-size:.85em} #nav{position:sticky;top:0;z-index:50;background:var(--bg);display:flex;flex-wrap:wrap;gap:.2em .6em;padding:.6em .8em;border-bottom:1px solid var(--line)} #nav button{font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:.15em .1em} #nav button:hover{text-decoration:underline} #controls{display:flex;flex-wrap:wrap;gap:.4em 1em;padding:.5em .8em;border-bottom:1px solid var(--line);color:var(--mut);font-size:.85em} #controls button{font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:0} #controls button:hover{text-decoration:underline} main{max-width:none;padding:0} #court{overflow:hidden} .hero{position:relative;height:calc(100vh - 7em);height:calc(100svh - 7em);min-height:520px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 .8em 1.2em;border-bottom:1px solid var(--line)} .hero-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:78vw;line-height:1;color:var(--link);opacity:.13;pointer-events:none;user-select:none} .hero-title{font-size:clamp(3rem,13vw,11rem);line-height:.9;letter-spacing:-.04em;margin:0;font-weight:700;text-transform:uppercase} .hero-sub{max-width:52ch;color:var(--mut);margin:.8em 0 0;font-size:clamp(.95em,2.2vw,1.15em)} .hero-cue{margin-top:1.2em;color:var(--link);font-size:.85em;letter-spacing:.15em;text-transform:uppercase} .hero-cue i{font-style:normal;animation:cue 1.8s ease-in-out infinite alternate} .hero .lots-btn{font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:.3em 0} .hero .lots-btn:hover{text-decoration:underline} .lots-answer{margin-top:.5em;max-width:52ch;color:var(--mut)} .lots-answer .lots-line{color:var(--fg);margin:0} .lots-answer .lots-from{margin:.3em 0 0;font-size:.85em} @keyframes cue{from{opacity:.4}to{opacity:1}} .marquee{overflow:hidden;border-bottom:1px solid var(--line);white-space:nowrap;padding:.5em 0} .marquee-track{display:inline-block;animation:drift 30s linear infinite;will-change:transform} .marquee-track span{padding:0 1em;color:var(--mut);font-size:.9em} .marquee-track b{color:var(--fg);font-weight:400} .marquee-track.paused{animation-play-state:paused} @keyframes drift{to{transform:translateX(-50%)}} .hstrip-hint{margin:0;padding:.5em .8em 0;color:var(--mut);font-size:.85em;letter-spacing:.08em;text-transform:uppercase} .hstrip{display:flex;gap:.8em;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:.8em;-webkit-overflow-scrolling:touch;padding:1em .8em 1.4em;border-bottom:1px solid var(--line);scrollbar-width:thin;user-select:none;cursor:grab} .hcard{position:relative;flex:0 0 82vw;max-width:520px;scroll-snap-align:start;border:1px solid var(--line);padding:1em;min-height:58vh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(180deg,var(--line),transparent 55%);color:var(--fg)} .hcard.enrolled{border-color:var(--link);box-shadow:0 0 0 1px var(--glow)} .hcard-ghost{position:absolute;right:-.15em;bottom:-.35em;font-size:38vw;line-height:1;opacity:.14;pointer-events:none} .hcard-num{color:var(--mut);font-size:.85em} .hcard h3{font-size:1.6em;margin:.3em 0 .1em;line-height:1.1;color:var(--fg)} .hcard .zh{font-size:1.1em;color:var(--fg);opacity:.85} .hcard .aspect{color:var(--link);text-transform:uppercase;letter-spacing:.12em;font-size:.8em} .hcard .enter{margin-top:1em;display:inline-block;font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:0} .hcard .enter:hover{text-decoration:underline} .hstrip.show-enrolled .hcard:not(.enrolled){display:none} .hstrip.show-vacant .hcard.enrolled{display:none} .chapter{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;border-bottom:1px solid var(--line);padding:4em .8em 2em} .chapter .ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:62vw;line-height:1;opacity:.08;pointer-events:none;user-select:none;z-index:0} .chapter .vname{position:absolute;top:1em;right:.6em;writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;font-size:1.2em;color:var(--mut);letter-spacing:.2em;z-index:1} .chapter .body{position:relative;z-index:1;max-width:62ch} .chapter h2{font-size:clamp(2rem,7vw,4.5rem);line-height:1;margin:0 0 .3em;letter-spacing:-.02em} .chapter h2 small{display:block;font-size:.35em;color:var(--mut);letter-spacing:.15em;text-transform:uppercase;margin-top:.4em} .chapter p{margin:.7em 0} .chapter ul{padding-left:1.2em} .chapter.enrolled{background:radial-gradient(60% 50% at 80% 20%,var(--glow),transparent 70%)} .pager{margin-top:1.5em;border-top:1px solid var(--line);padding-top:.7em;color:var(--mut);font-size:.9em} .pager button,.chapter .body button{font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:0} .pager button:hover,.chapter .body button:hover{text-decoration:underline} .oracle{margin-top:1.5em;border-top:1px solid var(--line);padding-top:.8em} .oracle-label{color:var(--mut);font-size:.85em;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5em} .oracle input[type="text"]{font:inherit;background:transparent;color:var(--fg);border:0;border-bottom:1px solid var(--line);padding:.3em 0;width:min(100%,42ch);outline:none} .oracle input[type="text"]:focus{border-bottom-color:var(--link)} .oracle button{font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:.3em .2em;margin-left:.5em} .oracle button:hover{text-decoration:underline} .oracle-answer{margin-top:.8em;max-width:62ch} .oracle-answer .oracle-q{color:var(--mut)} .oracle-answer p{margin:.5em 0} .colophon{padding:2em .8em;max-width:65ch;color:var(--mut)} .recently{padding:2em .8em;border-top:1px solid var(--line);max-width:65ch;color:var(--mut)} .recently h2{font-size:1.2em;margin:0 0 .3em;color:var(--fg);font-weight:400} .recently ul{padding-left:1.2em;margin:.5em 0} .recently li{margin:.4em 0} .vesper-index{margin-top:1.5em;border-top:1px solid var(--line);padding-top:.7em} .vesper-index h3{font-size:1.2em;margin:0 0 .3em} .vesper-page{max-width:65ch;padding:2em .8em;margin:0 auto} .vesper-page h2{font-size:clamp(2rem,7vw,3.5rem);line-height:1;margin:0 0 .3em} .vesper-page h3{font-size:1.3em;margin:1.5em 0 .3em} .vesper-page p{margin:.7em 0} .vesper-page ul,.vesper-page ol{padding-left:1.2em} .vesper-page code{font:inherit;background:var(--line);padding:.1em .3em;border-radius:3px;font-size:.9em} .vesper-page pre{background:var(--line);padding:1em;overflow-x:auto;border-radius:4px} .vesper-page pre code{background:none;padding:0} .vesper-page button{font:inherit;background:none;border:0;color:var(--link);cursor:pointer;padding:0} .vesper-page button:hover{text-decoration:underline} .vesper-doc .essay-standfirst{font-size:1.15em;color:var(--fg)} .vesper-doc .essay-byline{color:var(--mut);font-size:.85em} .vesper-doc .dropcap::first-letter{font-size:3.2em;float:left;line-height:.85;padding-right:.1em} .vesper-doc .sidenote{border:1px solid var(--line);padding:.8em;margin:1em 0;color:var(--mut);font-size:.9em} footer{border-top:1px solid var(--line);padding:.7em .8em;color:var(--mut);font-size:.85em} @supports(animation-timeline:view()){ .hero-ghost{animation:herozoom linear both;animation-timeline:view();animation-range:exit} @keyframes herozoom{from{transform:scale(.7);opacity:.18}to{transform:scale(1.6);opacity:.05}} .chapter .ghost{animation:ghostzoom linear both;animation-timeline:view();animation-range:entry 0% cover 60%} @keyframes ghostzoom{from{transform:translate(-50%,-50%) scale(.8);opacity:.04}to{transform:translate(-50%,-50%) scale(1.25);opacity:.10}} .chapter .body{animation:bodyin linear both;animation-timeline:view();animation-range:entry 0% cover 35%} @keyframes bodyin{from{transform:translateY(24px) scale(.97);opacity:.6}to{transform:none;opacity:1}} } @media(min-width:700px){ .hcard{flex-basis:38vw} .chapter .ghost{font-size:38vw} .hero-ghost{font-size:52vw} .hcard-ghost{font-size:22vw} .chapter{padding-left:3em} } @media(prefers-color-scheme:light){:root{--bg:#f5f5f5;--fg:#222;--link:#147A7A;--line:#e5e5e5;--mut:#666;--glow:#147A7A22}} html.light{--bg:#f5f5f5;--fg:#222;--link:#147A7A;--line:#e5e5e5;--mut:#666;--glow:#147A7A22} html.dark{--bg:#040304;--fg:#fff5ee;--link:#10a0a0;--line:#211921;--mut:#9a8f9a;--glow:#10a0a033} @media(prefers-reduced-motion:reduce){.marquee-track,.hero-cue i{animation:none}html{scroll-behavior:auto}.hero-ghost,.chapter .ghost,.chapter .body{animation:none}} button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--link);outline-offset:2px} .hero-ghost,.chapter .ghost,.hcard-ghost{font-family:"Songti SC","SimSun","Noto Serif CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",serif} .hero-ghost,.chapter .ghost,.hcard-ghost{font-family:"Songti SC","Hiragino Mincho ProN","SimSun","Noto Serif CJK SC",serif}