/* FileKiln "Happy Kiln" (John-approved 2026-09-15: light theme, and the Midnight navy dark theme).
   Loaded after site.css on generated pages and after the homepage's own style block, so it restyles by
   tokens first and components second.
   House: a ground speckled like stoneware (warm cream light, deep navy dark), a box of saturated glazes
   (honey, persimmon, berry, cobalt, sky, sun), Fredoka for headings, Nunito for text,
   JetBrains Mono kept for code. The logo (mark + Bricolage wordmark) is pinned to its old look.
   Motion only answers the visitor: hover, press, a finished conversion. Nothing moves at rest. */

:root{
  --honey:#f59e0b; --persimmon:#ea580c; --berry:#db2777; --cob:#1b63d6; --sky:#0284c7; --sun:#c98a00;
  --bg:#fff4e6; --panel:#fffdf9; --raised:#fff0dc; --well:#fcf3e7;
  --line:#ecd9c3; --line-strong:#dbc3a6;
  --text:#2a1d2f; --muted:#5b4760; --faint:#6e5b72;
  --accent:#e08600; --accent-soft:#ffe8c7; --accent-ink:#98500a; --accent-glow:rgba(245,158,11,.28); --on-accent:#2a1600;
  /* The focus ring is its own token because the brand amber is too light to BE one. Measured on the live
     homepage: #f59e0b against the #fffdf9 panel is 2.11:1, and 1.56:1 against the unfocused cream border.
     WCAG 2.2 wants 3:1 on both counts, so a keyboard user in light mode had almost nothing to follow.
     #98500a measures 5.93:1 against the panel and 4.38:1 as a state change. Dark mode already passed at
     9.07:1, so it keeps the bright amber. */
  --focus-ring:#98500a; --focus-halo:rgba(152,80,10,.30);
  --cobalt:#1b63d6; --cobalt-soft:#e2eeff; --cobalt-ink:#154fae; --cobalt-glow:rgba(27,99,214,.20);
  --ok:#98500a; --err:#c02645; --err-soft:#fde3e8;
  --speck:rgba(110,70,40,.13); --speck2:rgba(219,39,119,.10);
  --btn-top:#ffc85a; --btn-bot:#ffa51e; --btn-ledge:#cf7400; --btn-ink:#2a1600;
  --shadow:0 3px 0 var(--ledge);
  --shadow-lift:0 6px 0 var(--ledge),0 26px 40px -26px var(--drop);
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --display:"Fredoka","Nunito",system-ui,sans-serif;
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ledge:#e3cdb0; --drop:rgba(90,50,30,.30);
  --glow1:rgba(245,158,11,.28); --glow2:transparent; --plate:#5a3a2c; --door:#3a2219; --chim:#a4502f; --chim-top:#c0643c;
  --logo-fill:#a05820; --logo-font:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --honey:#ffb13b; --persimmon:#ff7a45; --berry:#ff5c96; --cob:#4f9bff; --sky:#5cc6ff; --sun:#ffd54a;
    --text:#fff4e8;
    --accent:#ffb13b; --accent-ink:#ffc76e; --accent-glow:rgba(255,177,59,.26); --on-accent:#221300;
    --focus-ring:#ffb13b; --focus-halo:rgba(255,177,59,.30);
    --cobalt:#4f9bff; --cobalt-ink:#9cc6ff; --cobalt-glow:rgba(79,155,255,.26);
    --ok:#ffc76e; --err:#ff8f9f;
    --btn-top:#ffc55a; --btn-bot:#ff9f1a; --btn-ledge:#b85f00; --btn-ink:#221300;
    --shadow:0 3px 0 var(--ledge);
    --shadow-lift:0 6px 0 var(--ledge),0 26px 40px -26px var(--drop);
    --logo-fill:#e0a15c;
    color-scheme:dark;
    --bg:#0c1230;
    --panel:#141c44;
    --raised:#1c2656;
    --well:#080d22;
    --line:#27336a;
    --line-strong:#3a4886;
    --muted:#d9e0fa;
    --faint:#aab6e0;
    --accent-soft:#1c2656;
    --cobalt-soft:#18265c;
    --err-soft:#3a1a36;
    --speck:rgba(190,215,255,.09);
    --speck2:rgba(255,213,74,.07);
    --ledge:#050818;
    --drop:rgba(0,0,0,.6);
    --glow1:rgba(79,155,255,.20);
    --glow2:rgba(255,92,150,.12);
    --plate:#232c5c;
    --door:#141a3a;
    --chim:#d8465f;
    --chim-top:#ff6f86;
  }
}
:root[data-theme="dark"]{
  --honey:#ffb13b; --persimmon:#ff7a45; --berry:#ff5c96; --cob:#4f9bff; --sky:#5cc6ff; --sun:#ffd54a;
  --text:#fff4e8;
  --accent:#ffb13b; --accent-ink:#ffc76e; --accent-glow:rgba(255,177,59,.26); --on-accent:#221300;
  --focus-ring:#ffb13b; --focus-halo:rgba(255,177,59,.30);
  --cobalt:#4f9bff; --cobalt-ink:#9cc6ff; --cobalt-glow:rgba(79,155,255,.26);
  --ok:#ffc76e; --err:#ff8f9f;
  --btn-top:#ffc55a; --btn-bot:#ff9f1a; --btn-ledge:#b85f00; --btn-ink:#221300;
  --shadow:0 3px 0 var(--ledge);
  --shadow-lift:0 6px 0 var(--ledge),0 26px 40px -26px var(--drop);
  --logo-fill:#e0a15c;
  color-scheme:dark;
  --bg:#0c1230;
  --panel:#141c44;
  --raised:#1c2656;
  --well:#080d22;
  --line:#27336a;
  --line-strong:#3a4886;
  --muted:#d9e0fa;
  --faint:#aab6e0;
  --accent-soft:#1c2656;
  --cobalt-soft:#18265c;
  --err-soft:#3a1a36;
  --speck:rgba(190,215,255,.09);
  --speck2:rgba(255,213,74,.07);
  --ledge:#050818;
  --drop:rgba(0,0,0,.6);
  --glow1:rgba(79,155,255,.20);
  --glow2:rgba(255,92,150,.12);
  --plate:#232c5c;
  --door:#141a3a;
  --chim:#d8465f;
  --chim-top:#ff6f86;
}

.buddy .plate{fill:var(--plate)} .buddy .door{fill:var(--door)} .buddy .chim{fill:var(--chim)} .buddy .chim-top{fill:var(--chim-top)}

/* ── ground: speckled stoneware with one warm glow up top ── */
html{overflow-x:hidden}
body{font-family:var(--sans);font-size:15.5px;
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 420px at 18% -80px,var(--glow1),transparent 70%),
    radial-gradient(700px 380px at 92% 0,var(--glow2),transparent 70%),
    radial-gradient(circle at 20% 30%,var(--speck) 0 1.1px,transparent 1.7px),
    radial-gradient(circle at 70% 75%,var(--speck2) 0 1.3px,transparent 1.9px),
    radial-gradient(circle at 45% 55%,var(--speck) 0 .8px,transparent 1.4px);
  background-size:100% 100%,100% 100%,37px 41px,53px 47px,23px 29px;
  background-repeat:no-repeat,no-repeat,repeat,repeat,repeat}

/* ── logo stays exactly as it was ── */
.brand,.wordmark{font-family:var(--logo-font)!important;font-weight:700}
.brand .kiln i,.mark span{background:var(--logo-fill)!important;box-shadow:0 0 12px color-mix(in srgb,var(--logo-fill) 35%,transparent)!important}

/* ── header ── */
header,header.site{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:2px solid var(--line)}
.nav a.lnk,nav.top a{font-weight:700;color:var(--muted);border-radius:999px}
.nav a.lnk:hover,nav.top a:hover{color:var(--text);background:var(--raised)}
.toggle{border-radius:999px;font-weight:700;border:1px solid var(--line);background:var(--panel)}

/* ── headings ── */
h1,h2,h3,.cat-h,.sect h2,.why h2,section.prose h2,.flagship h2,.bench-head h2{font-family:var(--display);font-weight:600;letter-spacing:-.005em}

/* ── the glaze drip: a panel's top edge looks like glaze running off the rim ── */
.bench,.tool{position:relative;border-radius:var(--r-lg);border:1px solid var(--line)}
/* ceramic ledges by role: panels sit on a thick fired edge, tiles on a medium one, chips on a thin one */
.bench,.tool,.flagship{box-shadow:0 8px 0 var(--ledge),0 46px 70px -40px var(--drop)}
.feat,.tpl-rail a,.tpl-suite,.tool-index li,.local-note,.why>div+div,.fres,.bubble,.finder .fbox{box-shadow:0 5px 0 var(--ledge),0 24px 36px -28px var(--drop)}
.toggle,.brand .kiln,.mark,.new-strip a,.tool-filter,.seg button[aria-pressed="true"],.rail button[aria-selected="true"]{box-shadow:0 2px 0 var(--ledge)}
textarea,.fs-doc{box-shadow:inset 0 3px 0 color-mix(in srgb,var(--ledge) 60%,transparent)}
.bench::before,.tool::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--sun),var(--honey) 16%,var(--persimmon) 36%,var(--berry) 58%,var(--cob) 84%,var(--sky));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 16'%3E%3Cpath d='M0 0H180V5H160C156 5 155 7 154.5 10C154 13.5 148 13.5 147.5 10C147 7 146 5 142 5H102C99 5 98.2 6 97.8 7.6C97.4 9.4 93.6 9.4 93.2 7.6C92.8 6 92 5 89 5H40C35 5 34 8 33.6 11.5C33.2 15.4 26.8 15.4 26.4 11.5C26 8 25 5 20 5H0Z'/%3E%3C/svg%3E") repeat-x 0 0/180px 16px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 16'%3E%3Cpath d='M0 0H180V5H160C156 5 155 7 154.5 10C154 13.5 148 13.5 147.5 10C147 7 146 5 142 5H102C99 5 98.2 6 97.8 7.6C97.4 9.4 93.6 9.4 93.2 7.6C92.8 6 92 5 89 5H40C35 5 34 8 33.6 11.5C33.2 15.4 26.8 15.4 26.4 11.5C26 8 25 5 20 5H0Z'/%3E%3C/svg%3E") repeat-x 0 0/180px 16px}

/* ── wells and inputs: soft, round, friendly focus ring ── */
textarea,input[type=text],select,#railsel{border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--well)}
textarea:focus,input[type=text]:focus,select:focus,#railsel:focus{border-color:var(--honey);box-shadow:0 0 0 5px var(--accent-glow)}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px}

/* ── squishy buttons: a honey key with a ledge that you press down into ── */
.btn,.bar button,a.btn-dl,a.fs-btn,button.btn-share{border-radius:14px;font-family:var(--sans);font-weight:800;letter-spacing:.005em;
  transition:transform .09s ease,box-shadow .09s ease,filter .15s,background .15s,color .15s}
.btn.primary,.bar>button:not(.ghost):not(.btn-share),a.btn-dl,a.fs-btn{
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);border:0;
  box-shadow:0 4px 0 var(--btn-ledge),0 12px 22px -10px var(--accent-glow)}
.btn.primary:hover,.bar>button:not(.ghost):not(.btn-share):hover,a.btn-dl:hover,a.fs-btn:hover{
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);filter:brightness(1.06) saturate(1.05);transform:translateY(-1px);
  box-shadow:0 5px 0 var(--btn-ledge),0 16px 26px -10px var(--accent-glow);text-decoration:none}
.btn.primary:active,.bar>button:not(.ghost):not(.btn-share):active,a.btn-dl:active,a.fs-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--btn-ledge),0 4px 10px -6px var(--accent-glow)}
.btn.ghost,button.ghost,button.btn-share{background:var(--panel);color:var(--text);border:1.5px solid var(--line)}
/* secondary keys share one thin ledge */
.btn.ghost,button.ghost,button.btn-share,.swap,body .tpl-bar button.ghost{box-shadow:0 3px 0 var(--line-strong)}
.btn.ghost:hover,button.ghost:hover,button.btn-share:hover{background:var(--raised);color:var(--text);border-color:var(--line-strong);transform:translateY(-1px);box-shadow:0 4px 0 var(--line-strong)}
.btn.ghost:active,button.ghost:active,button.btn-share:active{transform:translateY(3px);box-shadow:0 0 0 var(--line-strong)}

/* ── status line: a little kiln face that smiles when the job is done ── */
.status,.bar-note{font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--muted);gap:9px}
.status::before,.bar-note::before{content:"";flex:none;width:26px;height:26px;background:no-repeat center/contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 36V20C6 11 12 5 20 5s14 6 14 15v16z' fill='%23ff7a45'/%3E%3Cpath d='M9 21c0-7 5-12 11-12' stroke='%23ffb08a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Crect x='3' y='34' width='34' height='4' rx='2' fill='%235a3a2c'/%3E%3Ccircle cx='15' cy='19' r='2.2' fill='%232a1a14'/%3E%3Ccircle cx='25' cy='19' r='2.2' fill='%232a1a14'/%3E%3Cpath d='M16.5 24.5q3.5 2.5 7 0' stroke='%232a1a14' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (min-width:640px){.bar-note{display:inline-flex!important;align-items:center}}
.status.ok{color:var(--accent-ink)}
.status.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 36V20C6 11 12 5 20 5s14 6 14 15v16z' fill='%23ff7a45'/%3E%3Cpath d='M9 21c0-7 5-12 11-12' stroke='%23ffb08a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Crect x='3' y='34' width='34' height='4' rx='2' fill='%235a3a2c'/%3E%3Cpath d='M12.5 19.5q2.5-3 5 0M22.5 19.5q2.5-3 5 0' stroke='%232a1a14' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15 23.5q5 5 10 0z' fill='%232a1a14'/%3E%3Ccircle cx='11.5' cy='24' r='2' fill='%23ff5c96' opacity='.7'/%3E%3Ccircle cx='28.5' cy='24' r='2' fill='%23ff5c96' opacity='.7'/%3E%3C/svg%3E")}

/* ── homepage workbench rail: every group gets its own glaze ── */
.rail{background:color-mix(in srgb,var(--raised) 70%,var(--panel));padding-top:22px}
.rgrp:nth-child(1){--g:var(--cob)} .rgrp:nth-child(2){--g:var(--sun)} .rgrp:nth-child(3){--g:var(--berry)}
.rgrp:nth-child(4){--g:var(--persimmon)} .rgrp:nth-child(5){--g:var(--honey)} .rgrp:nth-child(6){--g:var(--sky)}
.rgrp:nth-child(7){--g:var(--persimmon)} .rgrp:nth-child(8){--g:var(--berry)}
.rgrp .glbl{display:flex;align-items:center;gap:8px;font:600 13px var(--display);letter-spacing:.02em;text-transform:capitalize;color:var(--g)}
.rgrp .glbl::before{content:"";width:10px;height:10px;border-radius:4px;background:var(--g);box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 22%,transparent)}
.rail button,.rail a.pg{height:34px;border-radius:11px;font-weight:700;font-size:14px;color:var(--muted)}
.rail button:hover,.rail a.pg:hover{color:var(--text);background:color-mix(in srgb,var(--g) 14%,transparent)}
.rail button[aria-selected="true"]{background:color-mix(in srgb,var(--g) 22%,var(--panel));color:var(--text);
  box-shadow:inset 4px 0 0 var(--g),0 2px 0 color-mix(in srgb,var(--g) 30%,transparent)}
.rail button .k,.rail a.pg .k{color:var(--g);font-weight:500}
.rail button[aria-selected="true"] .k{color:var(--g)}
.bench{padding-top:10px}
.bench-head h2{font-size:22px}
.pane label{font:700 13px var(--sans);letter-spacing:.01em;text-transform:none;color:var(--muted)}
.swap{border:1.5px solid var(--line);background:var(--panel)}
.swap:hover{color:var(--berry);transform:rotate(180deg) scale(1.08)}

/* ── homepage hero ── */
.hero{padding-top:30px}
.hero::before{display:none}
.hero h1{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.02}
.hero h1 em{background:linear-gradient(90deg,var(--honey),var(--persimmon) 45%,var(--berry));-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none}
.hero-copy p{color:var(--muted);font-size:16.5px;max-width:48ch}
.comfy{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.comfy span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:999px;font:800 12.5px var(--sans);
  background:color-mix(in srgb,var(--c) 16%,var(--panel));color:var(--text);border:1.5px solid color-mix(in srgb,var(--c) 45%,transparent)}
.comfy span::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font-size:11px}
.comfy span:nth-child(1){--c:var(--honey)} .comfy span:nth-child(2){--c:var(--berry)} .comfy span:nth-child(3){--c:var(--cob)} .comfy span:nth-child(4){--c:var(--sun)}

/* the finder: say what you need, get the tool */
.finder{position:relative;margin-top:18px;max-width:560px}
.finder label{display:block;font:600 15px var(--display);margin:0 0 7px;color:var(--text)}
.finder .fbox{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:18px;background:var(--panel);
  border:2px solid var(--line)}
.finder .fbox:focus-within{border-color:var(--focus-ring);outline:4px solid var(--focus-halo)}
.finder .fbox svg{flex:none;width:20px;height:20px;color:var(--accent-ink)}
.finder input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;padding:10px 0!important;
  font:700 16px var(--sans)!important;color:var(--text)}
.finder input::placeholder{color:var(--faint);font-weight:600}
.finder .go{flex:none;min-height:42px;padding:0 16px}
.fres{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;border-radius:18px;
  background:var(--panel);border:1.5px solid var(--line)}
.fres[hidden]{display:none}
.fres a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--text);text-decoration:none}
.fres a:hover,.fres a[aria-selected="true"]{background:var(--accent-soft)}
.fres .k{flex:none;min-width:46px;display:grid;place-items:center;padding:4px 6px;border-radius:9px;font:500 11.5px var(--mono);
  background:color-mix(in srgb,var(--c,var(--honey)) 20%,var(--panel));color:var(--text)}
.fres b{display:block;font:700 14.5px var(--sans)}
.fres small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.fres .none{padding:12px;color:var(--muted);font-weight:700}
.tries{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;font:700 13px var(--sans);color:var(--faint)}
.tries button{min-height:32px;padding:0 12px;border-radius:999px;font:700 13px var(--sans);color:var(--text);
  background:color-mix(in srgb,var(--c) 14%,var(--panel));border:1.5px solid color-mix(in srgb,var(--c) 40%,transparent);
  transition:transform .12s,background .15s}
.tries button:hover{transform:translateY(-2px) rotate(-1.5deg);background:color-mix(in srgb,var(--c) 26%,var(--panel))}
.tries button:nth-of-type(1){--c:var(--persimmon)} .tries button:nth-of-type(2){--c:var(--cob)} .tries button:nth-of-type(3){--c:var(--berry)}
.tries button:nth-of-type(4){--c:var(--sun)} .tries button:nth-of-type(5){--c:var(--honey)}

/* the kiln buddy, a big friendly glazed kiln that answers you */
.hero-buddy{display:none;position:relative;justify-self:center}
@media (min-width:880px){.hero-buddy{display:block}}
.buddy{width:250px;height:auto;display:block;margin:34px auto 0;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35));
  transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.hero-buddy:hover .buddy{transform:rotate(-3deg) translateY(-6px)}
.buddy .happy,.buddy .puff{opacity:0}
.buddy.is-happy .calm{opacity:0}
.buddy.is-happy .happy{opacity:1}
.buddy.is-happy .puff{animation:puff 1.4s ease-out forwards}
.buddy.is-happy{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:none}35%{transform:translateY(-18px) rotate(2deg)}100%{transform:none}}
@keyframes puff{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1.4)}}
.bubble{position:absolute;top:-8px;left:-128px;max-width:210px;padding:12px 15px;border-radius:20px 20px 6px 20px;text-align:left;
  background:var(--panel);border:2px solid var(--line);font:700 14px/1.4 var(--sans);color:var(--text)}
.bubble b{color:var(--accent-ink)}

/* ── confetti from the Convert key ── */
.confetti{position:fixed;z-index:80;width:9px;height:12px;border-radius:3px;pointer-events:none}

/* ── section headings and cards on the homepage ── */
.sect h2,.cat-h{font-size:26px}
.feat,.tpl-rail a,.tpl-suite,.tool-index li{border-radius:var(--r-md);border:1.5px solid var(--line);position:relative}
.feat{padding:16px 18px 18px;overflow:hidden}
.feat::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c)}
.feat:nth-child(4n+1){--c:var(--persimmon)} .feat:nth-child(4n+2){--c:var(--berry)} .feat:nth-child(4n+3){--c:var(--sun)} .feat:nth-child(4n+4){--c:var(--cob)}
.feat b{font-size:17px}
.feat b .k{color:var(--c)}
.feat:hover,.tpl-rail a:hover,.tpl-suite:hover,.tool-index li:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--c,var(--honey));box-shadow:0 9px 0 var(--ledge),0 30px 40px -26px var(--drop)}
.tpl-rail .tn,.tpl-suite .tn{font:700 14px var(--sans);color:var(--text)}
.tgrp-lbl{font:600 16px var(--display);letter-spacing:.01em;text-transform:none;color:var(--c)}
.tgrp-lbl::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c)}
#grid h3:nth-of-type(1){--c:var(--cob)} #grid h3:nth-of-type(2){--c:var(--berry)} #grid h3:nth-of-type(3){--c:var(--sun)} #grid h3:nth-of-type(4){--c:var(--persimmon)}
.trow{font-weight:700;border-bottom:1.5px dashed var(--line)}
.trow .k{color:var(--accent-ink)}
.trow:hover{color:var(--text);background:var(--accent-soft)}
details.catalog summary:hover .cat-h{color:var(--accent-ink)}
.tool-filter{border-radius:999px;border:2px solid var(--line)}

.flagship{border:2px solid color-mix(in srgb,var(--honey) 60%,transparent);border-radius:var(--r-lg);
  background:linear-gradient(125deg,var(--panel) 40%,color-mix(in srgb,var(--honey) 22%,var(--panel)) 80%,color-mix(in srgb,var(--berry) 20%,var(--panel)))}
.flagship h2 em{color:var(--accent-ink)}
.fs-chip{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);border-radius:14px;box-shadow:0 4px 0 var(--btn-ledge)}
.fs-arrow{color:var(--berry)}
.fs-soon{border-radius:999px;font-family:var(--sans);font-weight:800;letter-spacing:.02em;text-transform:none;font-size:12px}

.why{border-top:0;gap:16px}
.why>div{padding:18px;border-radius:var(--r-md)}
.why>div+div{background:var(--panel);border:1.5px solid var(--line)}
.why h4{font:600 17px var(--display)}
.why h4 i{width:30px;height:30px;border-radius:10px;background:var(--c)}
.why>div:nth-child(2){--c:var(--honey)} .why>div:nth-child(3){--c:var(--berry)} .why>div:nth-child(4){--c:var(--cob)}

/* ── family footer: bold, one glaze each ── */
footer a[href*="gradekiln.com"]{font-weight:800!important;color:var(--cobalt)!important}
footer a[href*="shapekiln.com"]{font-weight:800!important;color:var(--persimmon)!important}
footer a[href*="makerkiln.com"]{font-weight:800!important;color:var(--berry)!important}
footer a[href*="officekiln.com"]{font-weight:800!important;color:var(--sun)!important}

/* ── tool pages ── */
.tool{overflow:hidden;padding-top:10px}
.tool-head{background:transparent;border-bottom:1.5px dashed var(--line);font:600 17px var(--display);letter-spacing:.005em;
  text-transform:none;color:var(--text);padding-top:16px}
.tool-head::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--honey);box-shadow:0 0 0 4px var(--accent-glow)}
label.io{font:700 13px var(--sans);letter-spacing:.01em;text-transform:none;color:var(--muted)}
h1{font-size:clamp(26px,6vw,42px)}
.sub{font-size:16px}
.local-note{border:2px solid color-mix(in srgb,var(--honey) 45%,transparent);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--honey) 10%,var(--panel));padding:16px 18px 16px 74px;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 36V20C6 11 12 5 20 5s14 6 14 15v16z' fill='%23ff7a45'/%3E%3Cpath d='M9 21c0-7 5-12 11-12' stroke='%23ffb08a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Crect x='3' y='34' width='34' height='4' rx='2' fill='%235a3a2c'/%3E%3Ccircle cx='15' cy='19' r='2.2' fill='%232a1a14'/%3E%3Ccircle cx='25' cy='19' r='2.2' fill='%232a1a14'/%3E%3Cpath d='M16.5 24.5q3.5 2.5 7 0' stroke='%232a1a14' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='11.5' cy='24' r='2' fill='%23ff5c96' opacity='.6'/%3E%3Ccircle cx='28.5' cy='24' r='2' fill='%23ff5c96' opacity='.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:18px 50%;background-size:42px 42px}
.local-note strong{font:600 16px var(--display);letter-spacing:.005em;text-transform:none;color:var(--accent-ink)}
section.prose h2{border-bottom:2px dashed var(--line);font-size:24px}
section.prose p{font-size:15.5px}
.new-strip span{border-radius:999px;font:800 12px var(--sans);letter-spacing:.02em;text-transform:none;color:var(--btn-ink);
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));border:0}
.new-strip a{font:700 13px var(--sans);border-radius:999px;border:1.5px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 12%,var(--panel));color:var(--text)}
.new-strip a:hover{background:color-mix(in srgb,var(--c) 24%,var(--panel));border-color:var(--c);color:var(--text)}
.new-strip a:nth-of-type(5n+1){--c:var(--cob)} .new-strip a:nth-of-type(5n+2){--c:var(--berry)} .new-strip a:nth-of-type(5n+3){--c:var(--sun)}
.new-strip a:nth-of-type(5n+4){--c:var(--persimmon)} .new-strip a:nth-of-type(5n+5){--c:var(--sky)}
.file-zone{border:2.5px dashed color-mix(in srgb,var(--honey) 60%,var(--line));border-radius:var(--r-lg);background:color-mix(in srgb,var(--honey) 6%,var(--well))}
.file-zone:hover,.file-zone.hot{border-color:var(--berry);background:color-mix(in srgb,var(--berry) 10%,var(--well))}
.file-zone strong{font:600 19px var(--display);color:var(--text)}
.tool-index li:nth-child(5n+1){--c:var(--honey)} .tool-index li:nth-child(5n+2){--c:var(--berry)} .tool-index li:nth-child(5n+3){--c:var(--cob)}
.tool-index li:nth-child(5n+4){--c:var(--sun)} .tool-index li:nth-child(5n+5){--c:var(--persimmon)}
.tool-index li{overflow:hidden}
.tool-index li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.tool-index .t{font:700 15px var(--sans);color:var(--text)}

/* ── tool-first: the hero stays short so the workbench starts in the first screen ── */
.hero{padding:18px 0 14px}
.hero-copy,.finder{min-width:0}
.hero h1{font-size:clamp(27px,7.2vw,50px);margin-bottom:10px}
.hero-copy p{font-size:15.5px;line-height:1.5}
.comfy{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:10px;
  margin-left:calc(-1*clamp(14px,3vw,32px));margin-right:calc(-1*clamp(14px,3vw,32px));padding:2px clamp(14px,3vw,32px)}
.comfy::-webkit-scrollbar{display:none}
.comfy span{flex:none}
.finder{margin-top:14px}
.finder label{font-size:14px;margin-bottom:6px}
.tries{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:2px 0 4px;
  margin-left:calc(-1*clamp(14px,3vw,32px));margin-right:calc(-1*clamp(14px,3vw,32px));padding-left:clamp(14px,3vw,32px);padding-right:clamp(14px,3vw,32px)}
.tries::-webkit-scrollbar{display:none}
.tries button{flex:none}
.hero-jump{display:none}
@media (max-width:639px){
  /* phones get their own composition: chips wrap onto lines, nothing scrolls sideways or runs off the edge */
  .comfy,.tries{flex-wrap:wrap;overflow:visible;white-space:normal;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .comfy{gap:6px}
  .comfy span{padding:4px 10px 4px 6px;font-size:12px}
  .comfy span::before{width:16px;height:16px;font-size:10px}
  .tries{gap:6px;margin-top:8px}
  .tries button{min-height:34px;padding:0 11px;font-size:12.5px}
  /* one line each on a phone: three reassurances, two popular picks, so the tool stays near the top */
  .comfy span:nth-child(4){display:none}
  .tries button:nth-of-type(n+2):not(:nth-of-type(3)){display:none}
  .hero-copy p{display:none}
  /* the template link strip on template pages: wrap, a few templates, then 'all templates' */
  .new-strip{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0}
  .new-strip a:nth-of-type(n+4):not(:last-of-type){display:none}
  .finder label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .finder .go{padding:0 12px}
}
@media (min-width:640px){.tries{flex-wrap:wrap;overflow:visible;margin:10px 0 0;padding:0}.comfy{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0}}
@media (min-width:880px){
  .hero{grid-template-columns:1.5fr .7fr;padding:22px 0 16px}
  .hero h1{font-size:clamp(34px,3.9vw,50px)}
  .buddy{width:190px;margin-top:26px}
  .bubble{left:-96px;top:-14px;max-width:190px;font-size:13px}
  .finder{max-width:620px}
}

.comfy-side{justify-content:center;margin:16px 0 0!important;max-width:320px;margin-inline:auto!important}
.finder input:focus,.finder input:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
@media (min-width:880px){
  .hero-copy>.comfy{display:none}
  .hero-copy p{max-width:62ch}
  .hero{align-items:center}
}
/* ── tool page panel head: a friendly line plus the file-type tag ── */
.tool-head{justify-content:space-between;flex-wrap:wrap;row-gap:8px}
.tool-head .rdy{display:inline-flex;align-items:center;gap:10px;margin-right:auto;white-space:nowrap}
.tool-head::before{display:none}
.tool-head .rdy::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--honey);box-shadow:0 0 0 4px var(--accent-glow)}
.tool-head .hl{font:500 12.5px var(--mono);padding:4px 10px;border-radius:999px;background:var(--raised);border:1.5px solid var(--line);color:var(--muted);white-space:nowrap}
.confetti{width:10px;height:14px}


/* ── templates: their own page styles come after this file, so these carry a body prefix ── */
body .tpl-bar button:not(.ghost){background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);border:0;border-radius:14px;
  font:800 15px var(--sans);box-shadow:0 4px 0 var(--btn-ledge)}
body .tpl-bar button:not(.ghost):hover{filter:brightness(1.06);transform:translateY(-1px)}
body .tpl-bar button:not(.ghost):active{transform:translateY(4px);box-shadow:0 0 0 var(--btn-ledge)}
body .tpl-bar button.ghost{background:var(--panel);color:var(--text);border:1.5px solid var(--line);border-radius:14px;font:800 15px var(--sans)}
body .tpl-form .fhead{font:600 17px var(--display);letter-spacing:.005em;text-transform:none;color:var(--text);border-bottom:1.5px dashed var(--line)}
body .doc-tag{font:600 16px var(--display);letter-spacing:.005em;text-transform:none;color:var(--text)}
body .doc-tag::before{width:10px;height:10px;border-radius:4px;background:var(--honey)}
body .doc-size{font:700 12.5px var(--sans);letter-spacing:0}
body .doc-zoom button{font:800 12.5px var(--sans);letter-spacing:0;border:1.5px solid var(--line)}
body .doc-zoom button.on{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);border-color:transparent}
body .tpl-hero .kicker{font:800 13px var(--sans);letter-spacing:.01em;text-transform:none;color:var(--btn-ink);border:0;
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));box-shadow:0 3px 0 var(--btn-ledge)}
body .tpl-hero .kicker::before{background:var(--btn-ink);box-shadow:none}
body .tpl-hero h1{font-weight:600}
body .tpl-hero .amber{background:linear-gradient(90deg,var(--honey),var(--persimmon) 45%,var(--berry));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
body .tpl-cards a{border:1.5px solid var(--line);box-shadow:0 5px 0 var(--ledge),0 24px 36px -28px var(--drop)}
body .tpl-cards a:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--honey);box-shadow:0 9px 0 var(--ledge),0 30px 40px -26px var(--drop)}
body .tpl-cards .t{font:700 16px var(--display);color:var(--text)}
body .tpl-cards .go{font:800 13px var(--sans);letter-spacing:0;color:var(--text);border:1.5px solid var(--honey)}

/* ── 404: the buddy is lost too ── */
.lost{display:grid;gap:18px;align-items:center;padding:12px 0 8px}
.lost-buddy{width:150px;height:auto;margin-left:12px;filter:drop-shadow(0 20px 24px rgba(0,0,0,.3));transform:rotate(-6deg);transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lost-buddy:hover{transform:rotate(4deg) translateY(-6px)}
.lost-buddy .plate{fill:var(--plate)} .lost-buddy .door{fill:var(--door)} .lost-buddy .chim{fill:var(--chim)} .lost-buddy .chim-top{fill:var(--chim-top)}
.lost-code{display:inline-block;margin:0;font:700 clamp(54px,14vw,96px)/.9 var(--display);letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--honey),var(--persimmon) 45%,var(--berry) 75%,var(--cob));-webkit-background-clip:text;background-clip:text;color:transparent}
.lost h1{margin:6px 0 8px}
.lost .sub{display:block;-webkit-line-clamp:none;overflow:visible;max-width:52ch}
.lost-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0 0}
.lost-go a.btn-dl{flex:0 0 auto;padding:0 20px}
.lost-alt{font-weight:800}
.lost-pop{margin:24px 0 8px;font:600 16px var(--display);color:var(--text)}
.lost-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lost-list a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font:800 14px var(--sans);color:var(--text);
  border:1.5px solid var(--c);background:var(--panel);text-decoration:none}
.lost-list a:hover{background:var(--raised);text-decoration:none;transform:translateY(-2px) rotate(-1.5deg)}
.lost-list li:nth-child(5n+1) a{--c:var(--persimmon)} .lost-list li:nth-child(5n+2) a{--c:var(--cob)} .lost-list li:nth-child(5n+3) a{--c:var(--berry)}
.lost-list li:nth-child(5n+4) a{--c:var(--honey)} .lost-list li:nth-child(5n+5) a{--c:var(--sky)}
@media (min-width:700px){.lost{grid-template-columns:auto 1fr;gap:40px;padding:30px 0 20px}.lost-buddy{width:220px}}
@media (prefers-reduced-motion:reduce){.lost-buddy,.lost-buddy:hover{transition:none;transform:rotate(-6deg)}.lost-list a:hover{transform:none}}

/* dark only: glaze tints are never blended into a dark panel (orange + dark = mud); dark fill, bright glaze edge */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .comfy span,:root:not([data-theme="light"]) .tries button,:root:not([data-theme="light"]) .new-strip a{background:var(--panel);border-color:var(--c)}
  :root:not([data-theme="light"]) .tries button:hover,:root:not([data-theme="light"]) .new-strip a:hover{background:var(--raised);border-color:var(--c)}
  :root:not([data-theme="light"]) .fres .k{background:var(--raised);box-shadow:inset 0 -3px 0 var(--c,var(--honey))}
  :root:not([data-theme="light"]) .rail button[aria-selected="true"]{background:var(--raised)}
  :root:not([data-theme="light"]) .rail button:hover,:root:not([data-theme="light"]) .rail a.pg:hover{background:var(--raised)}
  :root:not([data-theme="light"]) .flagship{background:linear-gradient(125deg,var(--panel) 45%,var(--raised));border-color:var(--honey)}
  :root:not([data-theme="light"]) .local-note{background-color:var(--panel);border-color:var(--honey)}
  :root:not([data-theme="light"]) .file-zone{background:var(--well);border-color:var(--honey)}
  :root:not([data-theme="light"]) .file-zone:hover,:root:not([data-theme="light"]) .file-zone.hot{background:var(--raised);border-color:var(--berry)}
  :root:not([data-theme="light"]) .trow:hover{background:var(--raised)}
  :root:not([data-theme="light"]) .fres a:hover,:root:not([data-theme="light"]) .fres a[aria-selected="true"]{background:var(--raised)}
}
:root[data-theme="dark"] .comfy span,:root[data-theme="dark"] .tries button,:root[data-theme="dark"] .new-strip a{background:var(--panel);border-color:var(--c)}
:root[data-theme="dark"] .tries button:hover,:root[data-theme="dark"] .new-strip a:hover{background:var(--raised);border-color:var(--c)}
:root[data-theme="dark"] .fres .k{background:var(--raised);box-shadow:inset 0 -3px 0 var(--c,var(--honey))}
:root[data-theme="dark"] .rail button[aria-selected="true"]{background:var(--raised)}
:root[data-theme="dark"] .rail button:hover,:root[data-theme="dark"] .rail a.pg:hover{background:var(--raised)}
:root[data-theme="dark"] .flagship{background:linear-gradient(125deg,var(--panel) 45%,var(--raised));border-color:var(--honey)}
:root[data-theme="dark"] .local-note{background-color:var(--panel);border-color:var(--honey)}
:root[data-theme="dark"] .file-zone{background:var(--well);border-color:var(--honey)}
:root[data-theme="dark"] .file-zone:hover,:root[data-theme="dark"] .file-zone.hot{background:var(--raised);border-color:var(--berry)}
:root[data-theme="dark"] .trow:hover{background:var(--raised)}
:root[data-theme="dark"] .fres a:hover,:root[data-theme="dark"] .fres a[aria-selected="true"]{background:var(--raised)}
@media (prefers-reduced-motion:reduce){
  .buddy,.buddy.is-happy{animation:none!important;transition:none!important}
  .buddy.is-happy .puff{animation:none!important}
  .feat:hover,.tpl-rail a:hover,.tpl-suite:hover,.tool-index li:hover,.tries button:hover{transform:none}
}