/* Mote — design plan
   palette: #121212 ground, #1F1F1F surface, #ECE8E1 text, #A39D93 muted,
            #2C2A27 rule, #F2CF8F beam (the one accent)
   type: system stack; display 700, tight tracking; body 17px/1.65, <=62ch
   layout: one left-aligned column, 40rem
   signature: a single diagonal beam of light with a few motes in it —
              the Tyndall effect the app is built around */
:root{
  --ground:#121212;--surface:#1F1F1F;--text:#ECE8E1;--muted:#A39D93;
  --rule:#2C2A27;--beam:#F2CF8F;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);
  font:17px/1.65 -apple-system,"SF Pro Text","SF Pro",system-ui,"Segoe UI",sans-serif;
  min-height:100vh;position:relative;overflow-x:hidden}
.beam{position:absolute;inset:0 0 auto 0;height:34rem;pointer-events:none;z-index:0;
  background:linear-gradient(118deg,transparent 30%,rgba(242,207,143,.10) 42%,rgba(242,207,143,.20) 47%,rgba(242,207,143,.08) 53%,transparent 64%);
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.beam i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--beam);opacity:.7;
  animation:drift 9s ease-in-out infinite alternate}
.beam i:nth-child(1){left:44%;top:18%}
.beam i:nth-child(2){left:52%;top:34%;width:2px;height:2px;animation-delay:-3s}
.beam i:nth-child(3){left:47%;top:52%;animation-delay:-6s;opacity:.5}
.beam i:nth-child(4){left:58%;top:24%;width:2px;height:2px;animation-delay:-1.5s;opacity:.55}
.beam i:nth-child(5){left:55%;top:61%;animation-delay:-4.5s;opacity:.4}
@keyframes drift{to{transform:translate(9px,-14px)}}
@media (prefers-reduced-motion:reduce){.beam i{animation:none}}
.wrap{position:relative;z-index:1;max-width:40rem;margin:0 auto;padding:0 1.25rem}
header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.75rem 0 0}
.brand{color:var(--text);text-decoration:none;font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
nav{display:flex;gap:1.25rem;font-size:.95rem}
nav a{color:var(--muted);text-decoration:none}
nav a:hover,nav a[aria-current=page]{color:var(--text)}
main{padding:4.5rem 0 4rem}
h1{font-size:clamp(2.6rem,9vw,3.75rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:0 0 1rem}
.doc main{padding-top:3.5rem}
.doc h1{font-size:clamp(2rem,6vw,2.6rem);letter-spacing:-.025em}
h2{font-size:1.25rem;letter-spacing:-.01em;margin:2.75rem 0 .6rem;font-weight:650}
h3{font-size:1.02rem;margin:1.6rem 0 .35rem;font-weight:650}
p,li{max-width:62ch}
.lede{font-size:1.15rem;color:var(--muted);margin:0 0 2.5rem}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 2rem}
a{color:var(--beam);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:4px}
ul{padding-left:1.25rem}
li+li{margin-top:.35rem}
.card{background:var(--surface);border-radius:14px;padding:1.25rem 1.4rem;margin:1.5rem 0}
.card p{margin:.25rem 0}
.badge{display:inline-block;margin:.25rem 0 0;padding:11px 0}
.badge svg{display:block;height:44px;width:auto}
footer{border-top:1px solid var(--rule);color:var(--muted);font-size:.875rem;padding:1.5rem 0 3rem;display:flex;gap:1.25rem;flex-wrap:wrap}
footer a{color:var(--muted)}