/* ShapeKiln — "Specimen" system (v2).
   A designer's specimen sheet, not a dashboard. Canvas-paper light by default,
   darkroom dark on toggle; saturated studio inks (tangerine, cerulean, lime,
   pink, violet, sun) on quiet paper; film grain over everything; the motifs are
   the products themselves — mesh fields, grain, waves, blobs — rendered live in
   CSS on the homepage. No kiln stripe, no gauge rings: this is its own house.
   Logo mark (ice→cobalt rounded square + dot) and the Shape|Kiln wordmark are
   carried over unchanged.
   Every class hook from v1 is preserved (.forge/.rail/.ctl/.seg/.swatches/.bar/
   button.act/.ghost/.local-note/section.prose/.tool-index/header/footer/.toggle),
   so the tool pages restyle without markup changes.
   Fonts load via <link> in the page head (see build.mjs):
   Syne 700/800 · DM Sans 400–600 · DM Mono 400/500 · Instrument Serif italic. */

:root{
  --bg:#f6f1ea; --bg2:#fffdf9; --well:#efe8dd;
  --ink:#17141a; --line:#e2d9cc; --line-strong:#17141a; --rule:#b9ad9c;
  --text:#17141a; --muted:#5b5461; --faint:#8a8290;
  --tang:#ff6a1f; --tang-ink:#d24f0c;
  --cer:#2f6fff;  --cer-ink:#1f4fd6;
  --lime:#c6f14a; --lime-ink:#5f8a00;
  --pink:#ff3d9a; --pink-ink:#d61c78;
  --vio:#7a4dff;  --vio-ink:#5c33d9;
  --sun:#ffcf3d;  --sun-ink:#b58a00;
  --ice:#5fc6ff; --cobalt:#4c48ff;                 /* logo mark only */
  --accent:var(--tang); --accent-ink:var(--tang-ink); --accent-dim:rgba(255,106,31,.14);
  --err:#d8322a; --on-ink:#fffdf9; --on-accent:#17141a;
  --grain-op:.09; --field-op:.75; --shadow:8px 8px 0 0 var(--ink);
  --shadow-soft:0 24px 60px -30px rgba(23,20,26,.35);
  --display:"Syne","DM Sans",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Consolas,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#141118; --bg2:#1c1822; --well:#0e0c12;
  --ink:#f4eee6; --line:#2d2735; --line-strong:#f4eee6; --rule:#5a5163;
  --text:#f4eee6; --muted:#b3aab9; --faint:#7f7686;
  --tang:#ff7a36; --tang-ink:#ffa070;
  --cer:#5b8dff;  --cer-ink:#8fb0ff;
  --lime:#cdf65a; --lime-ink:#d9ff7a;
  --pink:#ff5cab; --pink-ink:#ff8ec6;
  --vio:#9b78ff;  --vio-ink:#bba4ff;
  --sun:#ffd65a;  --sun-ink:#ffe28a;
  --accent-dim:rgba(255,122,54,.16);
  --err:#ff6b63; --on-ink:#141118; --on-accent:#141118;
  --grain-op:.14; --field-op:.55; --shadow:8px 8px 0 0 var(--ink);
  --shadow-soft:0 24px 60px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141118; --bg2:#1c1822; --well:#0e0c12;
    --ink:#f4eee6; --line:#2d2735; --line-strong:#f4eee6; --rule:#5a5163;
    --text:#f4eee6; --muted:#b3aab9; --faint:#7f7686;
    --tang:#ff7a36; --tang-ink:#ffa070;
    --cer:#5b8dff;  --cer-ink:#8fb0ff;
    --lime:#cdf65a; --lime-ink:#d9ff7a;
    --pink:#ff5cab; --pink-ink:#ff8ec6;
    --vio:#9b78ff;  --vio-ink:#bba4ff;
    --sun:#ffd65a;  --sun-ink:#ffe28a;
    --accent-dim:rgba(255,122,54,.16);
    --err:#ff6b63; --on-ink:#141118; --on-accent:#141118;
    --grain-op:.14; --field-op:.55; --shadow:8px 8px 0 0 var(--ink);
    --shadow-soft:0 24px 60px -30px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15.5px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  position:relative;isolation:isolate;min-height:100vh;overflow-x:clip}
a{color:var(--accent-ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:color .15s}
a:hover{color:var(--text)}
:focus-visible{outline:2.5px solid var(--cer);outline-offset:3px;border-radius:8px}
::selection{background:var(--sun);color:#17141a}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- atmosphere: mesh field behind, grain over ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:var(--field-op);
  background:
    radial-gradient(42% 38% at 88% 6%,  color-mix(in srgb,var(--tang) 55%,transparent) 0,transparent 70%),
    radial-gradient(34% 30% at 100% 34%, color-mix(in srgb,var(--pink) 45%,transparent) 0,transparent 70%),
    radial-gradient(40% 34% at 72% 0%,  color-mix(in srgb,var(--sun) 55%,transparent) 0,transparent 70%),
    radial-gradient(30% 26% at 6% 78%,  color-mix(in srgb,var(--cer) 35%,transparent) 0,transparent 70%),
    radial-gradient(24% 20% at 22% 100%,color-mix(in srgb,var(--lime) 45%,transparent) 0,transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen}}

/* ---------- masthead ---------- */
header.site{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1.5px solid var(--ink)}
header.site .wrap{display:flex;align-items:center;gap:12px;padding:12px 0}
.wordmark{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;
  color:var(--text);background:none;display:inline-flex;align-items:center}
.wordmark::before{content:"";width:24px;height:24px;flex:none;margin-right:9px;border-radius:7px;
  background:radial-gradient(circle at center,var(--bg2) 0 24%,transparent 25%),linear-gradient(135deg,var(--ice),var(--cobalt))}
.wordmark i{font-style:normal;color:var(--cobalt)}
:root[data-theme="dark"] .wordmark i{color:var(--ice)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wordmark i{color:var(--ice)}}
nav.top{margin-left:auto;display:flex;align-items:center;gap:6px}
nav.top a{font:500 13px var(--mono);letter-spacing:.02em;color:var(--muted);background:none;
  padding:10px 8px;white-space:nowrap;border-radius:999px;transition:color .15s,background .15s}
nav.top a::before{content:"/ ";color:var(--faint)}
nav.top a:hover{color:var(--text)}
.toggle{border:1.5px solid var(--ink);background:var(--bg2);color:var(--text);
  font:500 12px var(--mono);letter-spacing:.02em;min-height:38px;
  padding:6px 13px 6px 10px;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:3px 3px 0 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s}
.toggle::before{content:"";width:12px;height:12px;border-radius:50%;
  background:linear-gradient(90deg,var(--text) 50%,transparent 50%);border:1.5px solid var(--text);box-sizing:border-box}
.toggle:hover{background:var(--sun);color:#17141a;transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--ink)}
.toggle:hover::before{border-color:#17141a;background:linear-gradient(90deg,#17141a 50%,transparent 50%)}
.toggle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink)}

/* ---------- hero ---------- */
main{padding:22px 0 64px}
.hero{display:grid;grid-template-columns:1fr;gap:22px;margin:0 0 22px;align-items:center}
.eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;
  font:500 12px var(--mono);letter-spacing:.04em;color:var(--muted)}
.eyebrow b{font-weight:500;color:var(--on-accent);background:var(--lime);padding:3px 9px;border-radius:999px;border:1.5px solid var(--ink)}
.eyebrow span+span::before{content:"·";margin-right:12px;color:var(--faint)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,9vw,54px);line-height:.98;
  letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--tang);font-size:1.12em;line-height:.9}
.sub{color:var(--muted);font-size:16px;line-height:1.6;margin:0;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--ink);font:700 14.5px var(--display);letter-spacing:-.005em;background:none;cursor:pointer;
  box-shadow:4px 4px 0 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s,color .15s}
.btn.solid{background:var(--ink);color:var(--on-ink)}
.btn.solid:hover{background:var(--tang);color:#17141a}
.btn.line{background:var(--bg2);color:var(--text)}
.btn.line:hover{background:var(--sun);color:#17141a}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 0 var(--ink)}
.btn .k{font:500 11.5px var(--mono);opacity:.75}

/* hero specimen: a live mesh + grain + blob composition */
.hero-spec{position:relative;aspect-ratio:5/4;border:1.5px solid var(--ink);border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow);background:
    radial-gradient(60% 55% at 18% 22%, var(--sun) 0,transparent 70%),
    radial-gradient(55% 60% at 82% 18%, var(--pink) 0,transparent 70%),
    radial-gradient(60% 55% at 78% 84%, var(--cer) 0,transparent 70%),
    radial-gradient(50% 50% at 20% 88%, var(--lime) 0,transparent 70%),
    radial-gradient(70% 70% at 50% 50%, var(--tang) 0,transparent 75%),var(--vio)}
.hero-spec::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/200px 200px}
.hero-spec .blob{position:absolute;left:14%;top:16%;width:52%;aspect-ratio:1;
  background:linear-gradient(140deg,#fffdf9,var(--sun) 55%,var(--tang));
  border:1.5px solid var(--ink);
  border-radius:58% 42% 61% 39% / 44% 57% 43% 56%;
  animation:morph 14s ease-in-out infinite alternate;box-shadow:6px 6px 0 0 var(--ink)}
.hero-spec .wave{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;display:block}
.hero-spec .tag{position:absolute;right:14px;top:14px;font:500 11px var(--mono);letter-spacing:.04em;
  background:var(--bg2);color:var(--text);border:1.5px solid var(--ink);border-radius:999px;padding:5px 10px}
.hero-spec .tag.b{top:auto;right:auto;left:14px;bottom:14px}
@keyframes morph{
  0%{border-radius:58% 42% 61% 39% / 44% 57% 43% 56%;transform:rotate(0deg)}
  50%{border-radius:40% 60% 45% 55% / 60% 38% 62% 40%;transform:rotate(6deg)}
  100%{border-radius:52% 48% 38% 62% / 50% 64% 36% 50%;transform:rotate(-4deg)}}

/* ---------- the forge (tool pages): preview surface + control rail ---------- */
.forge{position:relative;background:var(--bg2);border:1.5px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.forge-cap{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:13px 16px;border-bottom:1.5px solid var(--ink);
  background:var(--sun);color:#17141a}
.forge-cap .t{font:800 12px var(--display);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
.forge-cap .t::before{content:"";width:12px;height:12px;border-radius:50% 50% 50% 0;background:#17141a}
.forge-cap .s{font:12px var(--mono);color:#17141a;opacity:.7;flex-basis:100%}
.forge-body{display:grid;grid-template-columns:1fr}

/* preview: checkerboard well so transparency reads */
.preview{padding:16px;background:
  linear-gradient(45deg,color-mix(in srgb,var(--faint) 16%,transparent) 25%,transparent 25% 75%,color-mix(in srgb,var(--faint) 16%,transparent) 75%) 0 0/18px 18px,
  linear-gradient(45deg,color-mix(in srgb,var(--faint) 16%,transparent) 25%,transparent 25% 75%,color-mix(in srgb,var(--faint) 16%,transparent) 75%) 9px 9px/18px 18px,
  var(--well)}
.preview .stage{display:block;width:100%;height:auto;border-radius:12px;border:1.5px solid var(--ink);box-shadow:var(--shadow-soft)}
.preview svg.stage{background:transparent}

/* control rail */
.rail{padding:16px;border-top:1.5px solid var(--ink);display:flex;flex-direction:column;gap:16px;background:var(--bg2)}
.ctl{display:flex;flex-direction:column;gap:7px}
.ctl>label{font:500 11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline}
.ctl>label output{font:12px var(--mono);color:var(--text);text-transform:none;letter-spacing:0;background:var(--well);padding:1px 7px;border-radius:6px}
input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--tang);cursor:pointer}
input[type=text]{width:100%;height:44px;padding:0 12px;border:1.5px solid var(--line);
  background:var(--bg2);color:var(--text);font:16px var(--sans);border-radius:12px;transition:border-color .15s,box-shadow .15s}
input[type=text]:hover{border-color:var(--rule)}
input[type=text]:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 0 var(--cer)}
input::placeholder{color:var(--faint)}
input[type=file]{width:100%;font:13px var(--sans);color:var(--muted)}
input[type=file]::file-selector-button{border:1.5px solid var(--ink);background:var(--bg2);color:var(--text);
  font:600 12.5px var(--sans);min-height:38px;padding:7px 14px;margin-right:10px;cursor:pointer;border-radius:999px;box-shadow:2px 2px 0 0 var(--ink)}
input[type=file]::file-selector-button:hover{background:var(--sun);color:#17141a}
select{width:100%;height:44px;padding:0 12px;border:1.5px solid var(--line);background:var(--bg2);
  color:var(--text);font:14px var(--mono);border-radius:12px}
select option{background:var(--bg2);color:var(--text)}
select:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 0 var(--cer)}

/* segmented choice */
.seg{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;width:max-content;max-width:100%;background:var(--bg2)}
.seg button{border:0;background:transparent;color:var(--muted);font:600 12.5px var(--sans);
  min-height:38px;padding:8px 14px;cursor:pointer;transition:background .15s,color .15s}
.seg button+button{border-left:1.5px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.seg button:not([aria-pressed="true"]):hover{color:var(--text);background:var(--well)}

/* swatch row */
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatches input[type=color]{width:44px;height:44px;padding:2px;border:1.5px solid var(--ink);
  border-radius:12px;background:var(--bg2);cursor:pointer;box-shadow:2px 2px 0 0 var(--ink)}
.swatches .del-swatch{height:44px;width:36px;padding:0;border:0;background:transparent;color:var(--muted);
  font:400 18px/1 var(--sans);cursor:pointer;border-radius:10px}
.swatches .del-swatch:hover{color:#fff;background:var(--err)}
.swatches .add-swatch{height:44px;min-width:44px;padding:0 10px;border:1.5px dashed var(--rule);background:transparent;
  color:var(--muted);font:600 16px var(--sans);cursor:pointer;border-radius:12px}
.swatches .add-swatch:hover{border-color:var(--ink);color:var(--text);border-style:solid}

/* action bar */
.bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 16px 16px;border-top:1.5px solid var(--ink);background:var(--bg2)}
button.act{border:1.5px solid var(--ink);color:var(--on-ink);background:var(--ink);
  font:700 15px var(--display);letter-spacing:-.005em;min-height:46px;padding:10px 20px;cursor:pointer;border-radius:999px;
  flex:1 1 auto;box-shadow:4px 4px 0 0 var(--tang);transition:transform .12s,box-shadow .12s,background .15s,color .15s}
button.act:hover{background:var(--tang);color:#17141a;box-shadow:5px 5px 0 0 var(--ink);transform:translate(-1px,-1px)}
button.act:active{transform:translate(3px,3px);box-shadow:1px 1px 0 0 var(--ink)}
button.ghost{border:1.5px solid var(--ink);background:var(--bg2);color:var(--text);
  font:600 14px var(--sans);min-height:46px;padding:9px 16px;cursor:pointer;border-radius:999px;
  flex:0 0 auto;box-shadow:3px 3px 0 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s}
button.ghost:hover{background:var(--sun);color:#17141a;transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--ink)}
button.ghost:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink)}
button.ghost.ok{background:var(--lime);color:#17141a}
.bar-note{flex-basis:100%;font:12px var(--mono);color:var(--muted)}

.local-note{margin:18px 0 0;padding:14px 16px;border-radius:16px;border:1.5px solid var(--ink);
  background:var(--lime);color:#17141a;font-size:14px;line-height:1.6;max-width:none;box-shadow:4px 4px 0 0 var(--ink)}
.local-note strong{color:#17141a;font:800 11px var(--display);letter-spacing:.12em;text-transform:uppercase;margin-right:12px;
  display:inline-flex;align-items:center;gap:7px}
.local-note strong::before{content:"";width:9px;height:9px;border-radius:50%;background:#17141a}

/* prose */
section.prose{margin-top:34px;max-width:68ch}
section.prose:has(.tool-index){max-width:none}
section.prose h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;margin:36px 0 14px;display:flex;align-items:center;gap:14px}
section.prose h2::before{content:"";flex:none;width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--tang);border:1.5px solid var(--ink)}
section.prose h3{font-family:var(--display);font-size:16.5px;font-weight:700;margin:24px 0 4px;color:var(--text);letter-spacing:-.01em}
section.prose p,section.prose li{color:var(--muted);font-size:15px;line-height:1.72}
section.prose code{font:12.5px var(--mono);background:var(--well);border:1px solid var(--line);padding:1px 7px;border-radius:6px;color:var(--text);overflow-wrap:anywhere}

/* ---------- specimen grid (tool index) ---------- */
.tool-index{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:16px;counter-reset:spec}
.tool-index li{border:0;counter-increment:spec;min-width:0}
.tool-index a{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-items:center;
  padding:16px;border:1.5px solid var(--ink);border-radius:20px;background:var(--bg2);color:inherit;height:100%;
  box-shadow:4px 4px 0 0 var(--ink);transition:transform .15s,box-shadow .15s}
.tool-index a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--ink)}
/* compact tiles (tool pages' "Other tools"): generated shape glyph */
.tool-index a:not(:has(.spec))::before{content:"";grid-row:1/3;width:52px;height:52px;border:1.5px solid var(--ink)}
.tool-index li:nth-child(5n+1) a:not(:has(.spec))::before{background:linear-gradient(135deg,var(--sun),var(--tang));border-radius:14px}
.tool-index li:nth-child(5n+2) a:not(:has(.spec))::before{background:radial-gradient(circle at 30% 30%,var(--sun),var(--pink) 45%,var(--vio));border-radius:50%}
.tool-index li:nth-child(5n+3) a:not(:has(.spec))::before{background:var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/60px 60px;border-radius:14px}
.tool-index li:nth-child(5n+4) a:not(:has(.spec))::before{background:linear-gradient(180deg,var(--cer) 0 34%,var(--vio) 34% 62%,var(--pink) 62%);border-radius:14px;
  -webkit-mask:linear-gradient(#000,#000);clip-path:polygon(0 30%,20% 18%,40% 30%,60% 18%,80% 30%,100% 18%,100% 100%,0 100%)}
.tool-index li:nth-child(5n+5) a:not(:has(.spec))::before{background:linear-gradient(135deg,var(--lime),var(--cer));border-radius:58% 42% 61% 39% / 44% 57% 43% 56%}
.tool-index .t{font-family:var(--display);font-weight:700;font-size:17px;color:var(--text);white-space:normal;letter-spacing:-.02em}
.tool-index .d{font-size:13.5px;color:var(--muted);grid-column:2}
.tool-index .go{grid-row:1/3;grid-column:3;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;color:var(--text);font-family:var(--mono);font-size:16px;transition:background .15s,color .15s,transform .15s}
.tool-index a:hover .go{background:var(--tang);color:#17141a;transform:rotate(-30deg)}

/* full specimen tiles (homepage): live preview on top, meta below */
.tool-index a:has(.spec){grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:auto auto auto;row-gap:4px;padding:10px 10px 16px;align-items:start}
.tool-index a:has(.spec) .spec{grid-column:1/-1;grid-row:1;margin-bottom:8px}
.tool-index a:has(.spec) .num{grid-column:1;grid-row:2;font:500 11.5px var(--mono);letter-spacing:.06em;color:var(--faint);padding:0 6px}
.tool-index a:has(.spec) .num::before{content:"0" counter(spec) " / "}
.tool-index a:has(.spec) .t{grid-column:1;grid-row:3;padding:0 6px;font-size:18px}
.tool-index a:has(.spec) .d{grid-column:1;grid-row:4;padding:0 6px}
.tool-index a:has(.spec) .go{grid-column:2;grid-row:2/5;align-self:end}
.spec{position:relative;display:block;height:150px;border-radius:13px;border:1.5px solid var(--ink);overflow:hidden;background:var(--well)}
.spec .cap{position:absolute;left:10px;bottom:10px;font:500 10.5px var(--mono);letter-spacing:.04em;
  background:var(--bg2);color:var(--text);border:1.5px solid var(--ink);border-radius:999px;padding:3px 8px;z-index:2}
/* 01 · OG card */
.spec.og{background:
  radial-gradient(60% 70% at 100% 0%,var(--pink) 0,transparent 70%),
  radial-gradient(50% 60% at 0% 100%,var(--cer) 0,transparent 70%),
  radial-gradient(60% 60% at 90% 90%,var(--sun) 0,transparent 70%),var(--vio)}
.spec.og .card{position:absolute;left:12%;right:12%;top:14%;bottom:26%;border-radius:10px;border:1.5px solid var(--ink);
  background:var(--bg2);box-shadow:4px 4px 0 0 var(--ink);padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between}
.spec.og .card b{font:800 clamp(13px,1.6vw,17px)/1.05 var(--display);letter-spacing:-.03em;color:var(--text);max-width:16ch}
.spec.og .card s{text-decoration:none;font:500 9.5px var(--mono);color:var(--faint)}
.spec.og .card s::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:linear-gradient(135deg,var(--ice),var(--cobalt))}
/* 02 · mesh */
.spec.mesh{background:
  radial-gradient(55% 55% at 15% 20%,var(--sun) 0,transparent 70%),
  radial-gradient(50% 55% at 85% 15%,var(--pink) 0,transparent 70%),
  radial-gradient(55% 55% at 80% 85%,var(--cer) 0,transparent 70%),
  radial-gradient(45% 45% at 15% 85%,var(--lime) 0,transparent 70%),var(--tang)}
.spec.mesh i{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--ink)}
.spec.mesh i:nth-child(1){left:15%;top:20%}.spec.mesh i:nth-child(2){left:85%;top:15%}
.spec.mesh i:nth-child(3){left:80%;top:85%}.spec.mesh i:nth-child(4){left:15%;top:85%}
/* 03 · noise */
.spec.noise{background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/200px 200px}
.spec.noise::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,color-mix(in srgb,var(--cer) 55%,transparent),color-mix(in srgb,var(--pink) 55%,transparent));mix-blend-mode:multiply}
:root[data-theme="dark"] .spec.noise::after{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spec.noise::after{mix-blend-mode:screen}}
/* 04 · waves */
.spec.waves{background:var(--sun)}
.spec.waves svg{position:absolute;inset:0;width:100%;height:100%}
/* 05 · blob */
.spec.blob{background:var(--cer)}
.spec.blob i{position:absolute;left:18%;top:12%;width:64%;aspect-ratio:1;border:1.5px solid var(--ink);box-shadow:5px 5px 0 0 var(--ink);
  background:linear-gradient(135deg,var(--lime),var(--sun) 50%,var(--pink));
  border-radius:44% 56% 62% 38% / 55% 41% 59% 45%;animation:morph 11s ease-in-out infinite alternate-reverse}

/* ---------- footer with wave divider ---------- */
footer.site{position:relative;margin-top:72px;background:var(--ink);color:color-mix(in srgb,var(--on-ink) 70%,transparent);padding:26px 0 44px;font-size:13px}
footer.site::before{content:"";position:absolute;left:0;right:0;top:-31px;height:32px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 20C150 0 250 32 400 20S650 8 800 20S1050 32 1200 20V32H0z'/%3E%3C/svg%3E") 0 0/1200px 32px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 20C150 0 250 32 400 20S650 8 800 20S1050 32 1200 20V32H0z'/%3E%3C/svg%3E") 0 0/1200px 32px repeat-x}
footer.site .wrap{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
footer.site span:first-child{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--on-ink)}
footer.site a{color:var(--on-ink);background:linear-gradient(var(--tang),var(--tang)) 0 100%/100% 1.5px no-repeat;padding:6px 0}
footer.site a:hover{color:var(--sun)}

@media (max-width:420px){
  header.site .wrap{gap:8px}
  nav.top{gap:2px}
  nav.top a{padding:10px 6px;font-size:12.5px}
  nav.top a::before{content:none}
  .toggle{font-size:0;padding:8px;gap:0;margin-left:4px}
  .eyebrow span{display:none}
}

/* ── wider layers on ─────────────────────────────────────────── */
@media (min-width:640px){
  header.site .wrap{gap:20px;padding:14px 0}
  .wordmark{font-size:22px}
  .wordmark::before{width:26px;height:26px;margin-right:10px}
  nav.top{gap:14px}
  .toggle{min-height:0}
  main{padding:34px 0 80px}
  .hero{margin-bottom:28px}
  .hero:has(.hero-spec){grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px)}
  h1{font-size:clamp(40px,5vw,60px)}
  .hero:not(:has(.hero-spec)) h1{font-size:clamp(32px,4vw,46px)}
  .sub{font-size:16.5px}
  .forge{border-radius:24px}
  .forge-cap{flex-wrap:nowrap;padding:14px 20px}
  .forge-cap .s{flex-basis:auto;margin-left:auto}
  .bar{gap:12px;padding:14px 20px}
  button.act{flex:0 0 auto;min-height:0;font-size:14px}
  button.ghost{min-height:0;font-size:13.5px;padding:9px 15px}
  .bar-note{flex-basis:auto;margin-left:auto}
  section.prose{margin-top:40px}
  section.prose h2{font-size:28px;margin:36px 0 14px}
  .tool-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
  .spec{height:170px}
  footer.site{padding:30px 0 48px}
  footer.site a{padding:4px 0}
}
@media (min-width:900px){
  .forge-body{grid-template-columns:minmax(0,1fr) 330px}
  .preview{padding:20px}
  .rail{border-top:0;border-left:1.5px solid var(--ink);padding:20px;overflow-y:auto;max-height:640px}
  input[type=text],select{height:40px;font-size:14.5px}
  select{font-size:13px}
  .swatches input[type=color]{width:40px;height:40px}
  .swatches .del-swatch,.swatches .add-swatch{height:40px}
  .seg button{min-height:0;padding:7px 13px}
  /* bento: OG wide, mesh tall-ish; three below */
  .tool-index:has(.spec){grid-template-columns:repeat(6,minmax(0,1fr))}
  .tool-index:has(.spec) li{grid-column:span 2}
  .tool-index:has(.spec) li:nth-child(1){grid-column:span 4}
  .tool-index:has(.spec) li:nth-child(1) .spec{height:210px}
  .tool-index:has(.spec) li:nth-child(2) .spec{height:210px}
  .spec.og .card{left:18%;right:18%;top:16%;bottom:24%;padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ── fold discipline ─────────────────────────────────────────────
   The tool grid must start inside the first screen at every width.
   Phones: the hero specimen panel is tall and the tiles below are
   already live specimens, so the panel yields under 640px and the
   lead-in tightens. Desktop: trimmed top padding, tighter hero
   margin, and a shorter panel (3:2) so grid row one is on screen
   at a 800px-tall viewport. */
@media (max-width:639px){
  .hero-spec{display:none}
  main{padding-top:14px}
  .hero{gap:14px;margin-bottom:16px}
  h1{font-size:clamp(30px,8.4vw,44px);margin-bottom:10px}
  .sub{font-size:15px}
  .hero-cta{margin-top:14px}
}
@media (min-width:640px){
  main{padding-top:20px}
  .hero{margin-bottom:18px}
  .hero-spec{aspect-ratio:3/2}
}