/* THEME = design tokens + base + the reusable "nb-" component library.
   Change a token here and the whole site follows. No page-specific layout in this file. */
:root{
  --cream:#fdf1e6; --paper:#fff; --ink:#111;
  --coral:#ff6b6b; --purple:#a78bfa; --teal:#4ecdc4; --yellow:#ffe566; --blue:#3aafcb; --orange:#ffa564; --pink:#ffcdc6;
  --muted:#5b5348;
  --bw:3px;                       /* border width */
  --shadow-x:5px; --shadow-y:5px; /* hard shadow offset */
  --shadow:var(--shadow-x) var(--shadow-y) 0 var(--ink);
  --radius:12px; --radius-lg:24px;
  --font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Consolas,monospace;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--cream);color:var(--ink);font:500 1.0625rem/1.6 var(--font)}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.02;letter-spacing:-.03em;font-weight:700}
a{color:inherit}
img,canvas{display:block;max-width:100%}
:focus-visible{outline:var(--bw) solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- surfaces ---- */
.nb-card{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}

/* ---- buttons: <a|button class="nb-btn is-yellow"> ---- */
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.6rem 1.2rem;
  font:700 1rem var(--font);text-decoration:none;color:var(--ink);background:var(--paper);cursor:pointer;
  border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
  transition:transform .12s,box-shadow .12s}
.nb-btn:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--shadow-x) + 2px) calc(var(--shadow-y) + 2px) 0 var(--ink)}
.nb-btn:active{transform:translate(var(--shadow-x),var(--shadow-y));box-shadow:0 0 0 var(--ink)}
.nb-btn.is-small{min-height:2.4rem;padding:.3rem .9rem;font-size:.95rem;box-shadow:3px 3px 0 var(--ink)}

/* ---- pills / badges: <span class="nb-pill is-teal"> ---- */
.nb-pill{display:inline-block;padding:.15rem .8rem;font:700 .85rem/1.6 var(--font);background:var(--paper);
  border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
.nb-sticker{display:inline-block;padding:.2rem .8rem;font:700 .9rem var(--font);border:var(--bw) solid var(--ink);
  border-radius:var(--radius);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}

/* ---- form controls ---- */
.nb-field{display:block;margin-top:1.15rem}
.nb-field>span{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem}
.nb-field output{font-family:var(--mono);font-weight:700}
.nb-range{-webkit-appearance:none;appearance:none;width:100%;height:1.6rem;background:transparent;cursor:pointer;margin:.2rem 0 0}
.nb-range::-webkit-slider-runnable-track{height:.9rem;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:99px}
.nb-range::-moz-range-track{height:.9rem;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:99px}
.nb-range::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:1.5rem;margin-top:-.6rem;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink)}
.nb-range::-moz-range-thumb{width:1.2rem;height:1.2rem;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink)}
.nb-switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.15rem;font-weight:700;font-size:.95rem;cursor:pointer}
.nb-switch input{position:absolute;opacity:0}
.nb-switch i{position:relative;flex:none;width:3.4rem;height:1.9rem;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:99px;transition:background .15s}
.nb-switch i::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;background:var(--ink);border-radius:50%;transition:transform .15s}
.nb-switch input:checked+i{background:var(--teal)}
.nb-switch input:checked+i::after{transform:translateX(1.5rem)}
.nb-switch input:focus-visible+i{outline:var(--bw) solid var(--blue);outline-offset:3px}
.nb-kbd{padding:.05rem .45rem;font:700 .85rem var(--mono);background:var(--paper);border:2px solid var(--ink);border-bottom-width:4px;border-radius:6px}

/* ---- code block ---- */
.nb-code{margin:0;padding:1.25rem;overflow-x:auto;background:var(--ink);color:var(--cream);border:var(--bw) solid var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow);font:400 .9rem/1.8 var(--mono)}
.nb-code .c{color:#9a917f}

/* ---- colour modifiers (work on btn / pill / sticker / card) ---- */
.is-coral{background:var(--coral)}.is-purple{background:var(--purple)}.is-teal{background:var(--teal)}
.is-yellow{background:var(--yellow)}.is-blue{background:var(--blue)}.is-orange{background:var(--orange)}.is-pink{background:var(--pink)}
mark{background:var(--yellow);color:inherit;padding:0 .15em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}