/* bissuh.com: the design system is this :root block. Colors, type, space, radius and focus come from it; no page sets its own. */
:root {
  --bg: #ffffff;
  --ink: #161616;
  --ink-2: #5a5a5a;
  --rule: #e4e4e4;
  --link: #0a4fd6;
  --link-visited: #4a2b9b;
  --ok: #176b37;
  --warn: #9a3412;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-1: 15px;
  --t0: 17px;
  --t1: 22px;
  --t2: 40px;
  --lh: 1.55;
  --s1: 8px;
  --s2: 16px;
  --s3: 32px;
  --s4: 64px;
  --measure: 640px;
  --radius: 6px;
  --radius-s: 3px;
  --rule-w: 1px;
  --focus: 2px solid var(--link);
  --focus-offset: 3px;
  --surface: #f3f3f3;
  --ink-strong: #000000;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: var(--t0)/var(--lh) var(--font); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: var(--s4) var(--s2); }
main, header, footer { max-width: var(--measure); margin: 0 auto; }
h1 { font-size: var(--t2); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--s2); font-weight: 650; }
h2 { font-size: var(--t1); line-height: 1.25; margin: var(--s4) 0 var(--s2); font-weight: 600; }
p, li { margin: 0 0 var(--s2); }
ul { padding-left: 1.2em; }
.lead { font-size: var(--t1); line-height: 1.4; color: var(--ink); margin-bottom: var(--s3); }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-1); }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }
a:active { opacity: 0.7; }
hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: var(--s4) 0 var(--s3); }
footer { color: var(--ink-2); font-size: var(--t-1); }
footer a { color: inherit; }
nav.crumbs { font-size: var(--t-1); color: var(--ink-2); margin-bottom: var(--s3); }
nav.crumbs a { color: inherit; }
code { font: 0.95em var(--mono); background: var(--surface); padding: 0.1em 0.35em; border-radius: var(--radius-s); word-break: break-all; }
.code-block { display: block; padding: var(--s2); font-size: var(--t0); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); user-select: all; }
.btn { display: inline-block; font: inherit; font-weight: 600; color: var(--bg); background: var(--ink); border: 0; border-radius: var(--radius); padding: var(--s1) var(--s2); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--ink-strong); }
.btn:active { transform: translateY(1px); }
a:focus-visible, .btn:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius-s); }
.btn[disabled] { background: var(--ink-2); cursor: default; transform: none; }
.btn.ok { background: var(--ok); }
.note { border-left: var(--radius-s) solid var(--rule); padding-left: var(--s2); color: var(--ink-2); }
.warn { color: var(--warn); }
@media (max-width: 480px) {
  :root { --t2: 32px; --t1: 20px; --s4: 40px; }
}