:root{--ease-out:cubic-bezier(.23,1,.32,1);--counter:#d9ddd6;--paper:#fbfbf8;--ink:#1d1b26;--mut:#5d5a66;--rule:#c9c7cf;--red:#c8102e;--redsoft:#fbe3e6;--hl:#ffe9a8;
--sans:"Schibsted Grotesk","Noto Sans TC",system-ui,sans-serif;--mono:"JetBrains Mono","Noto Sans TC",ui-monospace,monospace}
html.dark{--counter:#121116;--paper:#1f1d26;--ink:#ecebf0;--mut:#a6a3b0;--rule:#3a3744;--red:#ff5a6e;--redsoft:#3a1820;--hl:#5a4710}
*{box-sizing:border-box}
html{scrollbar-color:var(--ink) var(--counter)}
::selection{background:var(--red);color:#fff}
body{margin:0;background:var(--counter);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased}
html.dark body{line-height:1.66;letter-spacing:.005em}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.num,time,td.n,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* the page is one long receipt slip */
.slip{max-width:760px;margin:40px auto 56px;background:var(--paper);position:relative;padding:28px clamp(22px,6vw,64px) 56px;
filter:drop-shadow(0 18px 30px rgba(20,18,30,.14));
--z:12px;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x;
mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x}
nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 22px;border-bottom:2px dashed var(--rule);font-size:14px}
.mark{font:600 13px var(--mono);letter-spacing:.04em}
.tools{display:flex;gap:6px}
.tools button{font:500 13px var(--sans);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:999px;height:32px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .2s,background .2s,transform 160ms var(--ease-out)}
.tools button:active{transform:scale(.97)}
.tools button:hover{border-color:var(--ink);background:var(--counter)}
kbd{font-size:11px;border:1px solid var(--rule);border-radius:4px;padding:1px 5px;color:var(--mut)}
.tools svg{width:16px;height:16px}

header{padding:56px 0 40px;border-bottom:2px dashed var(--rule)}
h1{font:900 clamp(44px,8.4vw,84px)/.95 var(--sans);letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance}
h1 .zh{display:block;font-family:"Noto Sans TC",sans-serif;font-weight:900;color:var(--red);letter-spacing:0;font-size:.5em;margin-top:12px}
.role{color:var(--mut);margin:0 0 26px;max-width:60ch}
.links{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:500;margin:0}
.stamp{display:flex;justify-content:space-between;gap:12px;margin:0 0 22px;font:12px var(--mono);color:var(--mut);letter-spacing:.04em}
.tally{margin:30px 0 0;max-width:520px}
.tally div{display:flex;align-items:baseline;gap:12px;padding:5px 0;font-size:15px}
.tally div::after{content:"";order:2;flex:1;border-bottom:1.5px dotted var(--rule);min-width:20px;transform:translateY(-4px)}
.tally dt{order:1;margin:0}.tally dd{order:3;margin:0;font:600 13px var(--mono);white-space:nowrap}
.tally a{text-decoration:none}
.copy{font:500 12px var(--mono);color:var(--mut);background:none;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;margin-left:8px;cursor:pointer;transition:border-color .2s,transform 160ms var(--ease-out)}
.copy:hover{border-color:var(--ink);color:var(--ink)}.copy:active{transform:scale(.97)}
.bigrams{margin:30px 0 0;font:13px/1.9 var(--mono);color:var(--mut)}
.bigrams b{animation:chip 240ms var(--ease-out) both;animation-delay:calc(min(var(--i),8)*30ms);font-weight:600;color:var(--ink);background:var(--redsoft);padding:1px 4px;margin-right:2px;border-radius:2px}

section{padding:52px 0 8px}
h2{font:900 30px/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 22px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
h2 .ct{font:400 13px var(--mono);color:var(--mut);letter-spacing:0}

/* projects as itemised lines, not a card grid */
.items{list-style:none;margin:0;padding:0}
.items li{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:16px 0;border-top:1px solid var(--rule)}
.items li:last-child{border-bottom:1px solid var(--rule)}
.items h3{margin:0;font:700 19px/1.3 var(--sans);letter-spacing:-.01em}
.items p{grid-column:1;margin:2px 0 0;color:var(--mut);max-width:58ch;font-size:16px}
.items .stat{grid-row:1/3;grid-column:2;align-self:start;text-align:right;font:13px/1.5 var(--mono);max-width:20ch;padding-top:4px}
.items li.soon h3::after{content:"soon";font:600 11px var(--mono);color:var(--red);border:1.5px solid var(--red);border-radius:3px;padding:1px 5px;margin-left:10px;vertical-align:3px;letter-spacing:.06em;text-transform:uppercase}
.items li.soon .stat{color:var(--red)}

.group{margin:0 0 26px}
.group h3{font:700 15px var(--sans);margin:0 0 4px}
.posts{list-style:none;margin:0;padding:0}
.posts li{display:flex;align-items:baseline;gap:12px;padding:7px 0;font-size:16px}
.posts li::after{content:"";order:2;flex:1;border-bottom:1.5px dotted var(--rule);min-width:20px;transform:translateY(-4px)}
.posts span,.posts a{order:1}.posts a{text-decoration:none}.posts a:hover{text-decoration:underline;text-decoration-color:var(--red)}
.posts time{order:3;color:var(--mut);font-size:13px;white-space:nowrap}

table{width:100%;border-collapse:collapse;font-size:16px}
th{font:500 13px var(--mono);color:var(--mut);text-align:left;padding:0 0 10px;border-bottom:2px solid var(--ink)}
th:last-child,td.n{text-align:right}
td{padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
td.n{font-size:14px;font-weight:600;white-space:nowrap;padding-left:20px}

footer{margin-top:56px;padding-top:28px;border-top:2px dashed var(--rule);font-size:16px}
footer .say{font:900 30px/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 14px}
footer small{display:block;margin-top:28px;color:var(--mut);font:12px var(--mono)}

.qr{display:none}
.stub{margin-top:36px;display:flex;flex-direction:column;gap:6px;width:max-content;color:var(--ink)}
.stub svg{display:block;max-width:100%;height:auto}
.stub span{font:11px var(--mono);letter-spacing:.32em;color:var(--mut);text-align:center}
@page{margin:16mm}
@media print{
 :root,html.dark{--counter:#fff;--paper:#fff;--ink:#000;--mut:#444;--rule:#999;--red:#c8102e;--redsoft:#fff;--hl:#fff}
 body{background:#fff;font-size:11pt}
 .slip{margin:0;max-width:none;padding:0;filter:none;-webkit-mask:none;mask:none}
 .tools,.copy,.bigrams,#ov{display:none}
 .qr{display:block;width:28mm;height:28mm;margin-top:24px;break-inside:avoid}
 nav{padding-bottom:12px}
 a{text-decoration:none}
 header a[href^="http"]::after,footer a[href^="http"]::after{content:" " attr(href);font:9pt var(--mono);color:var(--mut)}
 .items li,.posts li,.group,tr{break-inside:avoid}
 section{break-inside:auto}h2{break-after:avoid}
}
/* Cmd-K: a slip that prints downward */
#ov{position:fixed;inset:0;background:rgba(18,16,26,.42);display:none;align-items:flex-start;justify-content:center;padding-top:11vh;z-index:9}
#ov.on{display:flex}
#ov{opacity:1;transition:opacity 180ms ease-out}
@starting-style{#ov.on{opacity:0}}
@keyframes chip{from{opacity:0;transform:translateY(4px)}}
::view-transition-group(root){animation-duration:200ms}
#term{width:min(600px,92vw);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;box-shadow:0 24px 50px rgba(10,8,20,.35);clip-path:inset(0 0 100% 0)}
#ov.on #term{animation:print .32s cubic-bezier(.16,1,.3,1) forwards}
@keyframes print{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){#ov.on #term{animation:none;clip-path:none}#ov{transition:none}.bigrams b{animation:none}.tools button:active{transform:none}}
#term .bar{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:2px dashed var(--rule);color:var(--mut);font-size:12px}
#term .in{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--rule)}
#term .in label{color:var(--red);font-weight:600;margin-right:10px}
#q{flex:1;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px;caret-color:var(--red)}
#q::placeholder{color:var(--mut)}
#res{max-height:50vh;overflow:auto;padding:8px 8px 12px}
#res .r{display:flex;justify-content:space-between;gap:16px;padding:8px;border-radius:4px;font-family:var(--sans);font-size:15px}
#res .r{color:inherit;text-decoration:none}
#res a.r{cursor:pointer}
#res div.r{cursor:default;color:var(--mut)}#res .r:hover,#res a.r:focus-visible{background:var(--counter)}
#res small{color:var(--mut);font:12px var(--mono);white-space:nowrap}
#res mark{background:var(--hl);color:inherit;padding:0 1px}
#res .empty{padding:8px;color:var(--mut)}
#res .tok{padding:10px 8px 0;margin-top:6px;border-top:2px dashed var(--rule);color:var(--mut);font-size:12px}

@media(pointer:coarse){.tools button{height:44px;min-width:44px}}
@media(max-width:600px){
 body{font-size:16px}.slip{margin:0;--z:10px;padding-top:24px}
 nav{flex-wrap:wrap}.tools button span.l{display:none}
 header{padding:40px 0 32px}
 .items li{grid-template-columns:1fr}.items .stat{grid-row:auto;grid-column:1;text-align:left;padding-top:6px;color:var(--mut)}
 .items li.soon .stat{color:var(--red)}
 .posts li{flex-wrap:wrap;gap:2px 12px}.posts li::after{display:none}.posts time{order:3;width:100%}
 td.n{white-space:normal}
}