/* Flexoki-based palette. Dark is the default; the toggle overrides in both directions. */
:root{
  --bg:#100F0F; --text:#CECDC3; --head:#E6E4D9; --muted:#878580;
  --faint:#575653; --accent:#DA702C; --rule:#282726; --sel:#3a2417;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#FFFCF0; --text:#1C1B1A; --head:#100F0F; --muted:#6F6E69;
    --faint:#B7B5AC; --accent:#BC5215; --rule:#E6E4D9; --sel:#F6E4D3; }
}
:root[data-theme="dark"]{
  --bg:#100F0F; --text:#CECDC3; --head:#E6E4D9; --muted:#878580;
  --faint:#575653; --accent:#DA702C; --rule:#282726; --sel:#3a2417;
}
:root[data-theme="light"]{
  --bg:#FFFCF0; --text:#1C1B1A; --head:#100F0F; --muted:#6F6E69;
  --faint:#B7B5AC; --accent:#BC5215; --rule:#E6E4D9; --sel:#F6E4D3;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.topbar{
  position:sticky; top:0; z-index:10; border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
}
.topbar .row{
  max-width:660px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:baseline; gap:22px;
}
.brand{
  font-weight:600; color:var(--head); margin-right:auto;
  text-decoration:none; letter-spacing:-0.01em;
}
.topbar nav{display:flex; gap:22px}
.navlink{color:var(--muted); text-decoration:none; font-size:16px}
.navlink:hover,.navlink.active{color:var(--accent)}
#theme{
  background:none; border:1px solid var(--rule); color:var(--muted);
  border-radius:6px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer;
}
#theme:hover{color:var(--accent); border-color:var(--accent)}

.wrap{max-width:660px; margin:0 auto; padding:40px 24px 0}
.foot{padding:64px 24px 96px; color:var(--muted); font-size:15px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}

h1,h2,h3,h4{color:var(--head); line-height:1.25; text-wrap:balance; letter-spacing:-0.015em}
h1{font-size:2rem; margin:.2em 0 .7em}
h2{font-size:1.35rem; margin:2em 0 .55em}
h3{font-size:1.08rem; margin:1.7em 0 .4em}
p{margin:0 0 1.1em}
a{color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 32%, transparent)}
a:hover{border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

blockquote{
  margin:1.5em 0; padding:.2em 0 .2em 1.2em;
  border-left:2px solid var(--accent); color:var(--head); font-style:italic;
}
ul,ol{margin:0 0 1.1em; padding-left:1.25em}
li{margin:.32em 0}
li>ul{margin:.32em 0}

.scroll{overflow-x:auto; margin:1.4em 0}
table{border-collapse:collapse; width:100%; font-size:.95rem}
th,td{text-align:left; padding:.5em .9em .5em 0;
  border-bottom:1px solid var(--rule); vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em}
td:first-child{font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}

@media (max-width:520px){
  body{font-size:17px}
  h1{font-size:1.7rem}
  .topbar .row{gap:16px; padding:14px 20px}
  .wrap{padding-top:32px}
}
@media print{
  .topbar,#theme{display:none}
  a{color:inherit; border:0}
}