/* ZAPINK — construction grid, spacing, vertical rhythm. Base unit 8px, module 4px sub-grid. */
:root{
  --u:8px;
  --s-1:4px; /* @kind spacing */ --s-2:8px; /* @kind spacing */ --s-3:12px; /* @kind spacing */ --s-4:16px; /* @kind spacing */ --s-5:24px; /* @kind spacing */
  --s-6:32px; /* @kind spacing */ --s-7:48px; /* @kind spacing */ --s-8:64px; /* @kind spacing */ --s-9:96px; /* @kind spacing */ --s-10:128px; /* @kind spacing */ --s-11:192px; /* @kind spacing */

  /* page frame — huge margins, asymmetric by intent */
  --page-max:1440px;
  --margin-outer:64px;   /* right / secondary edge */
  --margin-gutter:24px;
  --margin-datum:120px;  /* left datum edge, where the spine sits */
  --rhythm-section:var(--s-10);
  --rhythm-block:var(--s-7);

  /* 12-column construction grid */
  --grid-cols:12; /* @kind other */
  --grid-gap:var(--margin-gutter); /* @kind spacing */

  /* line weights */
  --w-hair:0.5px; /* @kind spacing */ --w-rule:1px; /* @kind spacing */ --w-datum:2px; /* @kind spacing */

  /* radii — chamfer-small, never pills */
  --r-0:0px; /* @kind radius */ --r-1:1px; /* @kind radius */ --r-2:2px; /* @kind radius */ --r-3:3px; /* @kind radius */ --r-panel:2px; /* @kind radius */ --r-control:2px; /* @kind radius */
  --chamfer:6px; /* @kind radius */ /* clip-path corner cut for industrial controls */

  /* embedded surfaces: no floating cards — inset/pressed edges only */
  --inset-top:inset 0 1px 0 var(--paper-00);
  --inset-well:inset 0 1px 2px rgba(17,19,16,.10);
  --press-in:inset 0 1px 0 rgba(17,19,16,.14),inset 0 -1px 0 var(--paper-00);
  --lift-none:none; /* @kind shadow */

  /* motion — mechanical: slow accelerate, precise stop, no bounce */
  --ease-machine:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-settle:cubic-bezier(.32,0,.16,1); /* @kind other */
  --ease-linear:linear; /* @kind other */
  --t-fast:120ms; /* @kind other */ --t-base:180ms; /* @kind other */ --t-slow:320ms; /* @kind other */ --t-travel:520ms; /* @kind other */

  --z-panel:1; /* @kind other */ --z-overlay:40; /* @kind other */ --z-dialog:50; /* @kind other */ --z-tooltip:60; /* @kind other */
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
/* the construction grid, available as a utility */
.sb-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap)}
/* graph-paper / blueprint zapink, drawn not decorated */
.sb-graph{background-image:linear-gradient(to right,var(--line-hair) var(--w-hair),transparent var(--w-hair)),linear-gradient(to bottom,var(--line-hair) var(--w-hair),transparent var(--w-hair));background-size:24px 24px;background-position:-0.5px -0.5px}