:root{
/* spacing: 4px grid */
--space-0:0;--space-px:1px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
/* type: modular scale (~1.125 major second from 17px base) */
--font-ui:'Inter',system-ui,-apple-system,sans-serif;--font-serif:'Source Serif 4',Georgia,serif;
--text-xs:.8125rem;--text-sm:.9375rem;--text-base:1.0625rem;--text-label:1.125rem;--text-lead:1.1875rem;--text-md:1.25rem;--text-lg:1.5rem;--text-xl:2rem;--text-2xl:2.75rem;
--lh-tight:1.1;--lh-snug:1.2;--lh-normal:1.5;--lh-relaxed:1.6;--tracking-tight:-.02em;--tracking-caps:.08em;
/* radii, borders, motion, layout */
--radius-xs:1px;--radius-sm:4px;--radius-md:8px;--radius-pill:999px;--border-w:1px;--rule-w:3px;--ring-w:3px;--dur:.15s;
--header-h:56px;--control-h:48px;--measure:68ch;--measure-hero:22ch;--measure-lede:52ch;--measure-take:60ch;--w-narrow:560px;--w-tags:1080px;--wrap:1200px;--card-min:300px;--card-min-sm:220px;--counter-w:32px;--ev-w:5px;--ev-h:12px;--ev-gap:2px;--form-min-h:120px;
/* colour: light */
--bg:#F6F6F3;--surface:#FFFFFF;--surface-2:#ECECE7;--text:#16181D;--muted:#5A5F6B;--border:#DCDDD8;
--accent:#2440A8;--accent-hover:#1A2F80;--accent-ink:#FFFFFF;--accent-soft:#EEF1FA;--mark:#FFE45C;
--border-strong:color-mix(in srgb,var(--text) 30%,transparent);--border-input:color-mix(in srgb,var(--text) 22%,transparent);--header-bg:color-mix(in srgb,var(--bg) 88%,transparent)}
@media (prefers-color-scheme:dark){:root{--bg:#121418;--surface:#1A1D22;--surface-2:#23272E;--text:#ECEDEF;--muted:#9BA0AA;--border:#2C3038;--accent:#8FA6FF;--accent-hover:#B3C2FF;--accent-ink:#0D1330;--accent-soft:#1C2340;--mark:rgba(255,228,92,.28)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-4))}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--text-base)/var(--lh-relaxed) var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:var(--space-1)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-6)}
h1,h2,h3{font-family:var(--font-serif);font-variation-settings:'opsz' 48;font-weight:600;letter-spacing:var(--tracking-tight);line-height:var(--lh-snug);margin:0}
.eyebrow{display:block;font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.hl{background:linear-gradient(180deg,transparent .55em,var(--mark) .55em 1.2em,transparent 1.2em);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
.site-h{border-bottom:var(--border-w) solid var(--border);background:var(--header-bg);backdrop-filter:blur(var(--space-2));position:sticky;top:0;z-index:10}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:var(--space-4)}
.logo{text-decoration:none;color:var(--text);font:600 var(--text-md)/1 var(--font-serif);letter-spacing:var(--tracking-tight);white-space:nowrap}
.logo .short{display:none}
nav{display:flex;align-items:center;gap:var(--space-6);font-size:var(--text-sm)}nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink)!important;font-weight:600;text-decoration:none;border:var(--border-w) solid var(--accent);transition:var(--dur)}.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:none;color:var(--text)!important;border-color:var(--border)}.btn.ghost:hover{border-color:var(--text);background:none}
.hero{padding:var(--space-10) 0 0;text-align:center}
.hero h1{font-size:clamp(var(--text-xl),1.2rem + 2.6vw,var(--text-2xl));max-width:var(--measure-hero);line-height:var(--lh-tight);margin:0 auto var(--space-3);text-wrap:balance}
.hero p.lede{color:var(--muted);max-width:var(--measure-lede);margin:0 auto var(--space-5)}
.hero .sublink{display:none;margin:var(--space-3) 0 0;font-size:var(--text-sm)}.hero .sublink a{font-weight:600;text-decoration:none}
.search{max-width:var(--w-narrow);margin:0 auto var(--space-3);position:relative}
.search svg{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{width:100%;height:var(--control-h);font:inherit;padding:0 var(--space-4) 0 var(--space-12);border:var(--border-w) solid var(--border-input);border-radius:var(--radius-md);background:var(--surface);color:var(--text);outline:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 var(--ring-w) var(--accent-soft)}
.tags{max-width:var(--w-tags);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.tag{font:500 var(--text-xs)/1 var(--font-ui);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:0;background:var(--surface-2);color:var(--muted);cursor:pointer;transition:var(--dur)}
.tag:hover{color:var(--text)}.tag.on{background:var(--text);color:var(--bg)}
.tag.extra{display:none}.tags.all .tag.extra{display:inline-block}.tag.more{background:none;color:var(--accent)}
.news{max-width:var(--w-narrow);margin:var(--space-12) auto 0;padding:var(--space-12) var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);border-top:var(--rule-w) solid var(--accent);background:transparent}
.news .eyebrow{text-transform:none;letter-spacing:0;line-height:var(--lh-snug)}
.news h2{font-size:var(--text-lg);line-height:var(--lh-snug);text-wrap:balance}
.news p{margin:0;color:var(--muted);font-size:var(--text-sm);line-height:var(--lh-normal)}
.news .form{width:100%;margin-top:var(--space-2);min-height:var(--form-min-h);overflow:hidden}
.news .form iframe{display:block;width:100%!important;max-width:100%!important;border:0;margin:0 auto;color-scheme:light}
.news small{color:var(--muted);font-size:var(--text-xs);order:1}
.band{border-top:var(--border-w) solid var(--border);margin-top:var(--space-12)}.band .news{margin-top:0;border-top:0}
@media(max-width:720px){.news{padding:var(--space-10) var(--space-4)}.news h2{font-size:var(--text-md)}}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:var(--space-10) 0 var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-w) solid var(--border);gap:var(--space-4)}.sec-h h2{font-size:var(--text-lg)}.sec-h span{font-size:var(--text-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));gap:var(--space-4)}
.card{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);text-decoration:none;color:var(--text);transition:border-color var(--dur);outline:none}
.card:hover,.card:focus-visible{border-color:var(--border-strong)}
.card h3{font-size:var(--text-md);line-height:var(--lh-snug);text-wrap:balance}
.card p{margin:0;flex:1;font:400 var(--text-base)/var(--lh-normal) var(--font-serif);color:var(--text)}
.meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0}
.meta .tl{overflow:hidden;text-overflow:ellipsis}.meta b{color:var(--text);font-weight:600}
.card .meta{border-top:var(--border-w) solid var(--border);padding-top:var(--space-3);margin-top:var(--space-1)}
.chip{background:none;padding:0}.chip+.chip::before{content:', '}
.ev{display:inline-flex;gap:var(--ev-gap);margin-right:var(--space-1);flex:none}.ev i{width:var(--ev-w);height:var(--ev-h);border-radius:var(--radius-xs);background:var(--border)}.ev i.on{background:var(--text)}
.empty{display:none;text-align:center;color:var(--muted);padding:var(--space-12)}
.entry{max-width:var(--measure);margin:0 auto;padding:var(--space-12) 0 0}
.back{font-size:var(--text-sm);text-decoration:none;color:var(--muted)}.back:hover{color:var(--accent)}
.entry>.meta{margin-top:var(--space-6)}
.entry h1{font-size:clamp(var(--text-xl),4.5vw,var(--text-2xl));line-height:var(--lh-tight);text-wrap:balance;margin:var(--space-4) 0 var(--space-6)}
.design{position:relative;overflow:hidden;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)}
.design .eyebrow{margin-bottom:var(--space-2)}
.design p{margin:0;font:500 var(--text-lg)/1.35 var(--font-serif)}
.entry section{margin-top:var(--space-8)}
.label{font:italic 500 var(--text-label)/1.3 var(--font-serif);letter-spacing:0;color:var(--muted);margin:0 0 var(--space-4)}
.take{font-size:var(--text-lead);line-height:var(--lh-relaxed);max-width:var(--measure-take);margin:0}
.papers{list-style:none;padding:0;margin:0;counter-reset:p;border-top:var(--border-w) solid var(--border)}
.papers li{counter-increment:p;display:grid;grid-template-columns:var(--counter-w) 1fr;gap:var(--space-2);padding:var(--space-4) 0;border-bottom:var(--border-w) solid var(--border)}
.papers li::before{content:'[' counter(p) ']';font:500 var(--text-base)/var(--lh-normal) var(--font-serif);color:var(--muted)}
.papers a{font:600 var(--text-base)/var(--lh-normal) var(--font-serif);text-decoration:none;color:var(--text)}.papers a:hover{color:var(--accent)}.papers a::after{content:" ↗";color:var(--muted);font-family:var(--font-ui)}
.papers small{display:block;color:var(--muted);font-size:var(--text-xs);margin-top:var(--space-px)}.papers em{font-style:italic}
.papers blockquote,.pull{margin:var(--space-3) 0 0;padding:0 0 0 var(--space-4);border-left:2px solid var(--border-strong);font:italic 400 var(--text-base)/var(--lh-normal) var(--font-serif);color:var(--text)}
.papers blockquote p,.pull p{margin:0}.papers blockquote cite,.pull cite{display:block;margin-top:var(--space-1);font:400 var(--text-xs)/var(--lh-normal) var(--font-ui);font-style:normal;color:var(--muted)}
.pull{margin:var(--space-4) 0 0}
.related .grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-sm),1fr));gap:var(--space-4)}.related .card{padding:var(--space-4)}.related .card h3{font-size:var(--text-base)}
.pn{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);font-size:var(--text-sm)}.pn a{text-decoration:none;color:var(--muted);max-width:48%}.pn a:hover{color:var(--accent)}.pn a b{display:block;color:var(--text);font-weight:600}
.site-f{border-top:var(--border-w) solid var(--border);margin-top:var(--space-16);padding:var(--space-8) 0;font-size:var(--text-sm);color:var(--muted)}
.site-f .wrap{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.site-f a{color:var(--muted)}
/* style guide only */
.sg section{margin-top:var(--space-12)}.sg h2{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-4)}.sw div{border:var(--border-w) solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);font-size:var(--text-xs)}.sw i{display:block;height:var(--space-16);border-bottom:var(--border-w) solid var(--border)}.sw span{display:block;padding:var(--space-2) var(--space-3)}.sw code{color:var(--muted)}
.row{display:flex;align-items:baseline;gap:var(--space-6);padding:var(--space-3) 0;border-bottom:var(--border-w) solid var(--border)}.row code{flex:none;width:180px;font-size:var(--text-xs);color:var(--muted)}
.bar{background:var(--accent);height:var(--space-4);border-radius:var(--radius-xs)}
.demo{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}
.site-h .btn{background:none;color:var(--text)!important;border-color:var(--border)}.site-h .btn:hover{border-color:var(--text);background:none}}
@media (max-width:1023px){.hero .sublink{display:block}}
@media (max-width:720px){.wrap{padding:0 var(--space-4)}nav a.nl{display:none}.logo{font-size:var(--text-base)}.logo .long{display:none}.logo .short{display:inline}
.hero{padding-top:var(--space-8)}.hero p.lede{font-size:var(--text-sm)}
.tags{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:0 calc(-1*var(--space-4));padding:0 var(--space-4);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--space-4),#000 calc(100% - var(--space-10)),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--space-4),#000 calc(100% - var(--space-10)),transparent)}
.tags::-webkit-scrollbar{display:none}.tag{flex:none}.tag.extra{display:inline-block}.tag.more{display:none}
.grid{grid-template-columns:1fr}.entry{padding-top:var(--space-8)}}