/* Self-hosted so the page makes no third-party requests. Both are variable fonts,
   so one file per family covers every weight the design uses.
   Inter and JetBrains Mono are SIL OFL 1.1; see fonts/OFL.txt. */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --bg:#131110; --bg2:#191614; --bg3:#1F1B18; --bg4:#241F1B;
  --line:#2C2521; --line-soft:#231D19;
  --text:#E9E3D9; --text2:#A79C8D; --text3:#6E6459;
  --amber:#E0AC4B; --amber-dim:#7A5D26;
  --green:#6FBF8B; --orange:#D97757; --blue:#6C9BD2;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1080px;
}

/* ---- shared chrome for the standalone pages (privacy, 404) ----
   The landing page carries its own component CSS; these rules cover the simple
   text pages so the three stay visually identical without duplicating tokens. */
*{box-sizing:border-box}
body.page{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Keep the footer at the bottom on short pages such as the 404. */
  min-height:100vh; display:flex; flex-direction:column;
}
.page main{flex:1}
.page .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.page a{color:var(--amber)}
.page a:hover{color:var(--text)}
.page .skip{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:#1A1509;
  font-family:var(--mono); font-size:12px; padding:10px 16px; z-index:99;
}
.page .skip:focus{left:0}
.page nav{border-bottom:1px solid var(--line); background:var(--bg2)}
.page .nav-in{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:18px;
}
.page .mark{
  font-family:var(--mono); font-size:13px; letter-spacing:.22em; font-weight:700;
  color:var(--amber); white-space:nowrap; text-decoration:none;
}
.page .mark span{color:var(--text)}
.page .nav-sp{flex:1}
.page .nav-a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--text2); text-decoration:none;
}
.page .nav-a:hover{color:var(--text)}
.page main{padding:64px 0 88px}
.page h1{
  font-size:clamp(28px,5vw,40px); line-height:1.15; letter-spacing:-.02em;
  margin:0 0 12px; font-weight:600;
}
.page h2{
  font-size:15px; font-family:var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber); margin:40px 0 12px; font-weight:500;
}
.page .sub{color:var(--text2); margin:0 0 40px; font-size:17px; max-width:64ch}
.page p, .page li{color:var(--text2); max-width:72ch}
.page strong{color:var(--text); font-weight:600}
.page code{
  font-family:var(--mono); font-size:.87em; color:var(--text);
  background:var(--bg3); border:1px solid var(--line);
  border-radius:4px; padding:1px 5px;
}
.page a code{color:var(--amber)}
.page ul{padding-left:20px}
.page li{margin:8px 0}
.page .updated{
  font-family:var(--mono); font-size:12px; color:var(--text3);
  letter-spacing:.04em; margin-top:56px; padding-top:20px; border-top:1px solid var(--line);
}
.page .card{
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:20px 22px; margin:20px 0;
}
.page .card p:last-child{margin-bottom:0}
.page .card p:first-child{margin-top:0}
.page footer{border-top:1px solid var(--line); background:var(--bg2); padding:28px 0}
.page .foot{display:flex; flex-wrap:wrap; align-items:center; gap:20px}
.page .foot a{
  font-family:var(--mono); font-size:12px; color:var(--text2);
  text-decoration:none; letter-spacing:.04em;
}
.page .foot a:hover{color:var(--amber)}
.page .foot .sp{flex:1}
.page .disc{font-size:12px; color:var(--text3); margin:18px 0 0; max-width:none}
@media (max-width:760px){
  .page main{padding:44px 0 64px}
  .page .nav-in{padding:12px 18px}
  .page .wrap{padding:0 18px}
  .page .foot{gap:14px}
  .page .foot .sp{display:none}
}