:root { color-scheme: light; --bg:#fff; --text:#333; --muted:#405166; --border:#cbd5e1; --focus:#0c3b64; --panel:#f8fafc; --nav-bg:#0c3b64; --nav-text:#fff; --heading:#0c3b64; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#061528; --text:#e2e7ec; --muted:#b7c4d0; --border:#1c3a5c; --focus:#e3c196; --panel:#0d2440; --nav-bg:#061528; --nav-text:#fff; --heading:#fff; }
:root[data-theme="muted-light"] { --bg:#edf0f3; --text:#2b3138; --muted:#405166; --border:#d2d8de; --focus:#234a73; --panel:#fff; --nav-bg:#234a73; --nav-text:#fff; --heading:#234a73; }
:root[data-theme="muted-dark"] { color-scheme:dark; --bg:#142536; --text:#e2e7ec; --muted:#b6c5d4; --border:#2c3f54; --focus:#e3c196; --panel:#1e3147; --nav-bg:#142536; --nav-text:#fff; --heading:#fff; }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --bg:#061528; --text:#e2e7ec; --muted:#b7c4d0; --border:#1c3a5c; --focus:#e3c196; --panel:#0d2440; --nav-bg:#061528; --nav-text:#fff; --heading:#fff; } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.6 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } header { background:var(--nav-bg); color:var(--nav-text); } .header-inner,main,footer { width:min(100% - 2rem, 60rem); margin-inline:auto; } .header-inner { min-height:4.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { font-size:1.2rem; font-weight:800; } .header-actions,footer nav { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; } .theme-control { display:flex; align-items:center; gap:.5rem; } select { min-height:2.75rem; padding:.5rem .65rem; font:inherit; } header select { background:var(--nav-bg); color:var(--nav-text); border:1px solid currentcolor; border-radius:.4rem; } main { padding-block:1.5rem 2rem; } h1,h2 { color:var(--heading); line-height:1.2; } h1 { font-size:clamp(1.8rem,5vw,2.4rem); } a { color:var(--focus); } header a { color:var(--nav-text); } .button { display:inline-flex; align-items:center; min-height:2.75rem; padding:.5rem .75rem; border:2px solid currentcolor; border-radius:.5rem; font-weight:700; text-decoration:none; } .panel { margin-block:1rem; padding:1rem; border:1px solid var(--border); border-radius:.625rem; background:var(--panel); } .skip-link { position:absolute; left:1rem; top:1rem; transform:translateY(-160%); padding:.75rem 1rem; background:var(--bg); color:var(--text); border:2px solid var(--focus); } .skip-link:focus { transform:translateY(0); } a:focus-visible,select:focus-visible { outline:4px solid var(--focus); outline-offset:2px; } footer { padding-block:1rem 2rem; border-top:1px solid var(--border); color:var(--muted); } footer .sep { color:var(--muted); } code { overflow-wrap:anywhere; } @media (max-width:600px) { .header-inner { padding-block:.75rem; align-items:flex-start; flex-direction:column; } }