/* Minimal monospace theme */
:root{
  --bg:#0b0c10;
  --fg:#e6e6e6;
  --muted:#a8a8a8;
  --accent:#61ffca;
  --line:#1a1b20;
  --shadow:0 0 0 1px var(--line);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --fg:#111;
    --muted:#555;
    --accent:#0b8d87;
    --line:#e9e9e9;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  text-rendering:optimizeLegibility;
}

.container{max-width:72ch;margin:0 auto;padding:2rem 1rem}
.site-header{max-width:72ch;margin:0 auto;padding:2rem 1rem 1rem}
.site-footer{max-width:72ch;margin:2rem auto 3rem;padding:0 1rem;color:var(--muted)}

h1,h2,h3{font-weight:600;letter-spacing:0.2px}
h1{font-size:1.6rem;margin:0 0 .25rem}
h2{font-size:1.1rem;margin:2rem 0 .75rem}

a{color:var(--accent);text-decoration:none;border-bottom:1px dashed transparent}
a:hover{border-bottom-color:var(--accent)}
.tagline{color:var(--muted);margin:.2rem 0 .8rem}

.site-nav{display:flex;gap:.8rem;flex-wrap:wrap}
.site-nav a{padding:.1rem .3rem;border-radius:.3rem}
.site-nav a:hover{background:rgba(97,255,202,0.08)}

hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.list{list-style:none;padding-left:0;margin:.6rem 0}
.list li{padding:.35rem .6rem;border-radius:.4rem;box-shadow:var(--shadow);background:transparent}
.list li+li{margin-top:.4rem}

.mono{font-weight:600;opacity:.9}

pre,code,kbd,samp{font-family:inherit}
code{
  padding:.15rem .3rem;
  border-radius:.3rem;
  background:rgba(97,255,202,0.07);
  border:1px solid var(--line);
}
pre{
  padding:1rem;border:1px solid var(--line);border-radius:.5rem;overflow:auto;
  background:rgba(97,255,202,0.04);
}

img,video{max-width:100%;height:auto;border-radius:.4rem}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;background:var(--bg);color:var(--fg);padding:.4rem .6rem;border:1px solid var(--line);border-radius:.3rem}


/* --- theme override without JS (uses :has) --- */
/* When :has() is unsupported, these rules are ignored → site stays on system theme. */
:root[data-theme="dark"], :root[data-theme="light"] {} /* (no-op guard if you add JS later) */

/* Overrides (win over your @media rules because they come later) */
:root:has(#theme-dark:checked){
  --bg:#0b0c10; --fg:#e6e6e6; --muted:#a8a8a8; --accent:#61ffca; --line:#1a1b20; --shadow:0 0 0 1px var(--line);
}
:root:has(#theme-light:checked){
  --bg:#ffffff; --fg:#111; --muted:#555; --accent:#0b8d87; --line:#e9e9e9; --shadow:0 0 0 1px var(--line);
}
/* System = default (your existing prefers-color-scheme rules apply) */

/* Control styling */
.theme-controls{
  display:inline-flex; gap:0; border:1px solid var(--line);
  border-radius:.6rem; overflow:hidden; font:14px/1 ui-monospace, Menlo, monospace;
}
.theme-controls input{
  position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; /* visually hidden, still accessible */
}
.theme-controls label{
  padding:.35rem .6rem; cursor:pointer; color:var(--fg); background:transparent;
  border-right:1px solid var(--line);
}
.theme-controls label:last-of-type{ border-right:none; }
.theme-controls label:hover{ box-shadow:var(--shadow); }

/* Highlight the active choice */
.theme-controls:has(#theme-system:checked) label[for="theme-system"],
.theme-controls:has(#theme-dark:checked)   label[for="theme-dark"],
.theme-controls:has(#theme-light:checked)  label[for="theme-light"]{
  background:var(--line);
}