/* tokens.css
   Brand: a chalkboard. Slate green ink, chalk white paper, a teal chalk line as the main
   colour and yellow chalk for highlights. Dark mode is the board itself.
   Layout: graph paper sheet for the site; a docked app shell (rail, stage, inspector) for the editor. */
:root{
  --paper:#F2F6F4; --sheet:#FFFFFF; --sunken:#E9F0ED; --ink:#0F1F1B; --ink-2:#455854; --ink-3:#788985;
  --rule:#D3DEDA; --grid:rgba(14,124,112,.075);
  --brand:#0E7C70; --brand-ink:#0A5F56; --brand-2:#DCEFEA; --on-brand:#FFFFFF;
  --chalk:#F4B731; --marker-bg:rgba(244,183,49,.5);
  --board:#14312B; --on-board:#EEF5F2;
  --redline:#C2412D; --ok:#1E8A55;
  --shadow:0 1px 0 rgba(15,31,27,.04),0 12px 32px -14px rgba(15,31,27,.24);
  --shadow-sm:0 1px 2px rgba(15,31,27,.06),0 6px 14px -8px rgba(15,31,27,.2);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-hand:"Caveat","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:8px; --ease:cubic-bezier(.3,.7,.3,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0C1715; --sheet:#12201D; --sunken:#0A1412; --ink:#E8F1EE; --ink-2:#A2B5B0; --ink-3:#6B7F7A;
  --rule:#21342F; --grid:rgba(190,240,225,.045);
  --brand:#4CCFBD; --brand-ink:#7FE1D3; --brand-2:#143A34; --on-brand:#04201C;
  --chalk:#F4C24F; --marker-bg:rgba(244,194,79,.26);
  --board:#183A33; --on-board:#EEF5F2;
  --redline:#FF8A73; --ok:#58D08F;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 16px 36px -14px rgba(0,0,0,.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 8px 16px -8px rgba(0,0,0,.55);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0C1715; --sheet:#12201D; --sunken:#0A1412; --ink:#E8F1EE; --ink-2:#A2B5B0; --ink-3:#6B7F7A;
  --rule:#21342F; --grid:rgba(190,240,225,.045);
  --brand:#4CCFBD; --brand-ink:#7FE1D3; --brand-2:#143A34; --on-brand:#04201C;
  --chalk:#F4C24F; --marker-bg:rgba(244,194,79,.26);
  --board:#183A33; --on-board:#EEF5F2;
  --redline:#FF8A73; --ok:#58D08F;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 16px 36px -14px rgba(0,0,0,.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 8px 16px -8px rgba(0,0,0,.55);
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
body.editing{overflow:hidden}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
kbd{font:500 12px/1 var(--f-mono);padding:4px 6px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:5px;background:var(--sheet);color:var(--ink)}

/* ---- theme change animation ----
   Browsers with view transitions get a circle that grows from the button you pressed.
   Others get a short colour fade. */
:root.vt-theme::view-transition-old(root),
:root.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-theme::view-transition-old(root){z-index:1}
:root.vt-theme::view-transition-new(root){z-index:2}
:root.theme-fade *,:root.theme-fade *::before,:root.theme-fade *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease!important}

.theme-ic{position:relative;display:grid;place-items:center;width:20px;height:20px}
.theme-ic svg{position:absolute;inset:0;width:20px;height:20px;transition:transform .55s cubic-bezier(.5,1.6,.4,1),opacity .3s}
.theme-ic .sun{transform:rotate(-90deg) scale(.3);opacity:0}
:root.is-dark .theme-ic .sun{transform:none;opacity:1}
:root.is-dark .theme-ic .moon{transform:rotate(90deg) scale(.3);opacity:0}

/* ---- shared controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r);font:650 15.5px/1 var(--f-body);border:1.5px solid var(--brand);background:var(--brand);color:var(--on-brand);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--chalk)}
.btn:active{transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.sm{height:38px;padding:0 14px;font-size:14px}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet);cursor:pointer;color:var(--ink);transition:border-color .15s,transform .15s}
.icon-btn:hover{border-color:var(--ink-3)}
.icon-btn:active{transform:scale(.94)}
.icon-btn>svg{width:18px;height:18px}
.eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0}

.toasts{position:fixed;z-index:400;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;justify-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;font:500 13.5px var(--f-body);box-shadow:var(--shadow);animation:toastIn .35s var(--ease)}
.toast button{border:0;background:none;color:var(--chalk);font-weight:700;cursor:pointer;padding:0}
.toast.out{opacity:0;transform:translateY(6px);transition:.25s}
@keyframes toastIn{from{transform:translateY(12px) scale(.96);opacity:0}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.noscript{margin:0;padding:12px 16px;background:var(--chalk);color:#1A1500;font:600 14px/1.4 var(--f-body);text-align:center}