@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{--violet:#C4452A;--violet-ink:#9E3419;--mint:#2F7D6C;--mint-ink:#1F6153;--amber:#E0A03C;--amber-ink:#9A6A18;--coral:#B5405B;--coral-ink:#8E2C43;--bg:#F8F7F4;--bg-alt:#EFEEE9;--surface:#FFFFFF;--line:#E1DFD8;--ink:#1C2126;--ink-2:#414A53;--muted:#77808A;--violet-soft:#FBEDE7;--mint-soft:#E6F1EE;--amber-soft:#FBF1DE;--coral-soft:#F9EAEC;--shadow:0 4px 18px rgba(28,33,38,.06),0 1px 3px rgba(28,33,38,.05);--shadow-lg:0 18px 50px rgba(28,33,38,.11);--r:20px;--maxw:1180px}
[data-theme="dark"]{--violet:#E4623C;--violet-ink:#F08A66;--mint:#4FB39C;--mint-ink:#6FC9B4;--amber:#F0B858;--amber-ink:#FFCE7D;--coral:#E4657E;--coral-ink:#F08C9F;--bg:#101215;--bg-alt:#16191D;--surface:#1C2025;--line:#2A2F36;--ink:#F2F3F1;--ink-2:#C3C8CD;--muted:#8B939C;--violet-soft:#2A1A14;--mint-soft:#122622;--amber-soft:#2A2113;--coral-soft:#2A171C;--shadow:0 4px 18px rgba(0,0,0,.4);--shadow-lg:0 18px 50px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty;transition:background .2s,color .2s}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(38px,5.4vw,68px)}
h2{font-size:clamp(30px,3.6vw,46px)}
h3{font-size:clamp(20px,1.7vw,25px);letter-spacing:-.015em}
p{margin:0}
a{color:var(--violet);text-decoration:none;transition:color .15s}
a:hover{color:var(--violet-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.stack{display:flex;flex-direction:column}
.hand{font-family:'Caveat',cursive;font-weight:600;line-height:1.15}
.mono{font-family:'JetBrains Mono',monospace}
.lead{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);line-height:1.65}
.muted{color:var(--muted)}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--violet);display:grid;place-items:center;flex:none}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{padding:8px 13px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink-2)}
.nav-links a:hover{background:var(--bg-alt);color:var(--ink)}
.nav-links a[aria-current]{color:var(--violet);background:var(--violet-soft)}
.nav-right{display:flex;align-items:center;gap:12px}
/* theme toggle */
.seg{display:flex;gap:2px;padding:3px;background:var(--bg-alt);border:1px solid var(--line);border-radius:12px}
.seg button{all:unset;display:grid;place-items:center;width:30px;height:26px;border-radius:9px;cursor:pointer;color:var(--muted)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--violet);box-shadow:var(--shadow)}
.seg svg{width:15px;height:15px;display:block}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:14px;font-weight:700;font-size:16px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--violet) 32%,transparent)}
.btn-primary:hover{color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--violet) 40%,transparent)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{color:var(--ink)}
.btn-sm{padding:10px 17px;font-size:15px;border-radius:11px}
/* bits */
.eyebrow{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:var(--violet-soft);color:var(--violet)}
.eyebrow.mint{background:var(--mint-soft);color:var(--mint-ink)}
.eyebrow.amber{background:var(--amber-soft);color:var(--amber-ink)}
.eyebrow.coral{background:var(--coral-soft);color:var(--coral-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
section{padding:clamp(64px,7vw,104px) 0}
.sec-head{max-width:720px;display:flex;flex-direction:column;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.slot{border-radius:var(--r);overflow:hidden;width:100%;min-width:0}
image-slot{max-width:100%}
/* sketch illustrations: ink line-art keyed to transparency, re-inked for dark */
[data-theme="dark"] image-slot[data-ink],[data-theme="dark"] image-slot[data-scene]{filter:invert(1) hue-rotate(180deg) saturate(.92)}
image-slot[data-scene]{box-shadow:inset 0 0 0 1px var(--line)}
.grid-3>*,.grid-2>*{min-width:0}
.ill{background:var(--bg-alt);border:1px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;padding:26px;text-align:center}
.ill .mono{font-size:12px;color:var(--muted);letter-spacing:.02em}
/* doodles */
.squig{display:block;width:100%;height:14px;color:var(--amber)}
.underline-wrap{position:relative;display:inline-block}
.underline-wrap .squig{position:absolute;left:0;right:0;bottom:-.12em}
.doodle-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:21px}
.doodle-note svg{width:44px;height:26px;color:var(--muted);flex:none}
footer{border-top:1px solid var(--line);background:var(--bg-alt);padding:56px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.foot-grid h4{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px}
.foot-grid a{display:block;padding:5px 0;font-size:15px;font-weight:500;color:var(--ink-2)}
.foot-grid a:hover{color:var(--violet)}
.foot-bot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
@media(max-width:900px){.grid-3,.grid-2,.foot-grid{grid-template-columns:1fr}.nav-links{display:none}}

/* ---- palette variants (data-palette on <html>) ---- */
html[data-theme="light"][data-palette="sb"]{--violet:#2F6E96;--violet-ink:#1F5175;--mint:#75894F;--mint-ink:#5B6C3A;--amber:#E0A749;--amber-ink:#9E6B1E;--coral:#C8583F;--coral-ink:#A03E29;--bg:#FBF7F0;--bg-alt:#F3EBDD;--surface:#FFFDF9;--line:#E7DCC9;--ink:#2A2520;--ink-2:#4E463C;--muted:#8B8072;--violet-soft:#E7F0F6;--mint-soft:#EDF0E2;--amber-soft:#FAF0DA;--coral-soft:#FAEAE3;--shadow:0 4px 18px rgba(42,37,32,.07),0 1px 3px rgba(42,37,32,.05);--shadow-lg:0 18px 50px rgba(42,37,32,.12)}
html[data-theme="dark"][data-palette="sb"]{--violet:#5C9CC4;--violet-ink:#84B8D8;--mint:#9BAE72;--mint-ink:#B4C48F;--amber:#EDB55C;--amber-ink:#FFCE84;--coral:#DE7255;--coral-ink:#EC9578;--bg:#141210;--bg-alt:#1A1714;--surface:#211D19;--line:#322C25;--ink:#F5F0E8;--ink-2:#CFC6B8;--muted:#94897A;--violet-soft:#15222B;--mint-soft:#1E2217;--amber-soft:#2A2114;--coral-soft:#2B1B15;--shadow:0 4px 18px rgba(0,0,0,.42);--shadow-lg:0 18px 50px rgba(0,0,0,.52)}
.pal{display:flex;gap:3px;padding:3px;background:var(--bg-alt);border:1px solid var(--line);border-radius:12px}
.pal button{all:unset;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;cursor:pointer}
.pal button span{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pal button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--shadow)}
.pal button[aria-pressed="true"] span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--surface),0 0 0 3.5px currentColor}
@media(max-width:640px){.pal{display:none}}