@font-face{font-family:"Kanit";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/kanit-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/kanit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/kanit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/kanit-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2")}
:root{color-scheme:dark;
  --ground:#18181b;--raised:#27282f;--line:#363a45;--quiet:#585966;
  --muted:#9d9fa4;--ink:#ffffff;--accent:#64dbca;--accent-hover:#86ecdc;--warn:#FABB05}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:88px}
body{background:var(--ground);color:var(--ink);font-family:"Kanit",system-ui,sans-serif;font-weight:300;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
svg{display:block}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{color:var(--accent-hover)}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

header.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground);z-index:2}
header.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
header.top .brand{width:112px;flex:none;border:0}
header.top nav{display:flex;gap:18px;overflow-x:auto;white-space:nowrap;font-size:13px}
header.top nav a{border:0;color:var(--muted)}
header.top nav a:hover,header.top nav a[aria-current]{color:var(--ink)}

.hero{padding:120px 0 96px;border-bottom:1px solid var(--line)}
.hero h1{font-weight:300;font-size:64px;line-height:1.05;letter-spacing:-.02em;margin:20px 0 22px;max-width:14ch}
.lede{color:var(--muted);font-size:20px;max-width:52ch}
section{padding:88px 0;border-bottom:1px solid var(--line)}
section h2{font-weight:300;font-size:38px;letter-spacing:-.01em;margin:10px 0 18px}
section h2 a{color:var(--ink);border:0}
section h2 a:hover{color:var(--accent)}
.section-lede{color:var(--muted);max-width:64ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.card{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:var(--raised);
  display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:border-color .15s}
.card:hover{border-color:var(--accent);color:var(--ink)}
.card .k{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .v{font-size:19px;font-weight:400}
.card .p{font-size:15px;color:var(--muted);line-height:1.5}
.card.wide{grid-column:1/-1;max-width:640px}

.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;padding-top:72px;padding-bottom:96px}
.doc.solo{grid-template-columns:minmax(0,1fr)}
aside{position:sticky;top:112px;align-self:start}
aside summary{list-style:none;cursor:default;margin-bottom:14px}
aside summary::-webkit-details-marker{display:none}
aside ul{list-style:none;display:grid;gap:2px;border-left:1px solid var(--line)}
aside a{display:block;border:0;color:var(--muted);font-size:15px;padding:5px 0 5px 16px;margin-left:-1px;border-left:1px solid transparent}
aside a:hover{color:var(--ink)}
aside a[aria-current]{color:var(--ink);border-left-color:var(--accent)}
article{max-width:720px}
article>h1{font-weight:300;font-size:52px;line-height:1.08;letter-spacing:-.02em;margin:16px 0 18px}
article>.lede{margin-bottom:8px}
.prose{margin-top:40px}
.prose h2{font-weight:300;font-size:30px;letter-spacing:-.01em;line-height:1.2;margin:56px 0 14px;
  padding-top:40px;border-top:1px solid var(--line)}
.prose>h2:first-child{margin-top:0}
.prose h3{font-weight:400;font-size:20px;margin:36px 0 10px}
.prose h4{font-weight:400;font-size:17px;margin:28px 0 8px}
.prose a.anchor{color:inherit;border:0}
.prose a.anchor:hover{color:var(--accent)}
.prose p,.prose li{color:var(--muted)}
.prose p{margin:0 0 16px;max-width:64ch}
.prose strong{color:var(--ink);font-weight:400}
.prose ul,.prose ol{margin:0 0 20px;display:grid;gap:10px;max-width:66ch}
.prose ul{list-style:none}
.prose ul>li{padding-left:22px;position:relative}
.prose ul>li::before{content:"·";position:absolute;left:4px;color:var(--accent)}
.prose ol{list-style:none;counter-reset:n}
.prose ol>li{padding-left:36px;position:relative;counter-increment:n}
.prose ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.2em;
  font-family:"Space Mono",monospace;font-size:12px;color:var(--accent)}
.prose li>ul,.prose li>ol{margin:10px 0 0}
.prose blockquote{border-left:2px solid var(--accent);padding:14px 20px;margin:28px 0;background:var(--raised);
  border-radius:0 10px 10px 0;max-width:70ch}
.prose blockquote p{color:var(--ink);margin:0;max-width:none}
.prose code{font-family:"Space Mono",monospace;font-size:.82em;color:var(--ink);background:var(--raised);padding:1px 6px;border-radius:4px}
.prose pre{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:20px 22px;overflow-x:auto;margin:0 0 20px}
.prose pre code{background:none;padding:0;font-size:13px;line-height:1.7}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose img{max-width:100%;border-radius:12px;border:1px solid var(--line)}
.prose table{border-collapse:collapse;width:100%;margin:28px 0;font-size:15px}
.prose th{text-align:left;font-weight:400;color:var(--muted);font-size:12px;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--raised);color:var(--muted)}
article .cards{grid-template-columns:repeat(2,1fr)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.pager .next{text-align:right}

footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:13px}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap}
footer span{margin-right:auto}
footer sup{font-size:.6em}
footer a{color:var(--muted);border:0}
footer a:hover{color:var(--ink)}

.lost{padding:160px 0;text-align:left}
.lost h1{font-weight:300;font-size:64px;letter-spacing:-.02em;margin:20px 0 18px}

@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .doc{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:40px}
  aside{position:static;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--raised)}
  aside summary{cursor:pointer;margin:0}
  aside details[open] summary{margin-bottom:12px}
  aside summary::after{content:"＋";float:right;color:var(--muted)}
  aside details[open] summary::after{content:"－"}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  header.top .wrap{gap:20px}
  header.top .brand{width:96px}
  .hero{padding:72px 0 56px}
  .hero h1{font-size:42px}
  .lede{font-size:18px}
  section{padding:56px 0}
  section h2{font-size:30px}
  .cards,article .cards,.pager{grid-template-columns:1fr}
  article>h1{font-size:38px}
  .prose h2{font-size:25px}
  .lost{padding:96px 0}
  .lost h1{font-size:42px}
}
@media print{
  header.top,aside,footer,.pager{display:none}
  body{background:#fff;color:#000}
}