/* Shared style for solvelab's inner pages (same palette and type as the home page). */
:root{
  --bg:#ffd93d; --surface:#ffe476; --card:#fff4b8; --field:#fffdf0; --text:#1a1608; --muted:#3a3210;
  --pink:#d81b67; --line:#e2b81c;
  --head:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:clip;
  background-image:radial-gradient(circle at 85% 8%,color-mix(in srgb,var(--pink) 16%,transparent),transparent 38%),radial-gradient(circle,color-mix(in srgb,var(--text) 13%,transparent) 1.2px,transparent 1.5px);
  background-size:auto,26px 26px;background-attachment:fixed}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.inner{max-width:1180px;margin:0 auto}

/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.top .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.menu{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:500}
.menu a{text-decoration:none;padding:8px 12px;border-radius:8px;transition:background .2s}
.menu a:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.menu a[aria-current="page"]{background:var(--text);color:var(--bg)}
.menu .cta{background:var(--pink);color:#fff;font-weight:700;margin-left:6px}
.menu .cta:hover{background:#b8125a}
.burger{display:none;border:0;background:var(--text);color:var(--bg);border-radius:8px;padding:9px 12px;font:700 14px var(--body);cursor:pointer}

/* page hero */
.phero{padding-block:70px 40px}
.kicker{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.phero h1{font:800 clamp(56px,9vw,128px)/.9 var(--head);margin-top:12px;text-wrap:balance}
.phero h1 > span:not(.w),.phero h1 .hl{color:var(--pink)}
.phero p{max-width:40rem;margin-top:22px;font-size:clamp(18px,1.5vw,21px);font-weight:500}

/* generic blocks */
section.blk{padding-block:40px}
.blk h2{font:800 clamp(38px,4.6vw,64px)/.95 var(--head);margin-bottom:22px;text-wrap:balance}
.blk h2 span{color:var(--pink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 60px -36px rgba(90,70,0,.6)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ic{width:46px;height:46px;border-radius:12px;background:var(--text);color:var(--bg);display:grid;place-items:center;flex:none}
.ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:12px;font:700 16px var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn-ink{background:var(--text);color:var(--bg)}
.btn-pink{background:var(--pink);color:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(26,22,8,.7)}
.todo{background:#fff;border:1.5px dashed var(--pink);color:var(--pink);font-weight:700;padding:0 6px;border-radius:5px;font-size:.92em}
.note{font-size:14px;color:var(--muted)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-60px)}.rv.r{transform:translateX(60px)}
.rv.l.in,.rv.r.in{transform:none}

/* footer */
.foot{margin-top:60px;border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.foot .inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:26px 40px;font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{text-decoration:none;font-weight:500}
.foot a:hover{color:var(--pink)}

@media (max-width:860px){
  .burger{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:10px var(--gr) 16px var(--gl);background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
  .menu.open{display:flex}
  .menu a{padding:12px 14px;font-size:17px}
  .menu .cta{margin-left:0;text-align:center}
  .grid2,.grid4{grid-template-columns:1fr}
  .phero{padding-block:44px 24px}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}

/* 3D background (bg3d.js) */
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,.foot{position:relative;z-index:1}
@media (max-width:860px){#bg3d{opacity:.8}}
/* keep text readable over the 3D shapes */
.kicker,.phero p,.blk h2,.quote p,.note{text-shadow:0 0 2px var(--bg),0 0 10px var(--bg),0 0 22px var(--bg)}
.card .note,.card h2{text-shadow:none}
#bg3d{transition:opacity .6s ease}
body.tools-on #bg3d{opacity:0}
.end h2{text-shadow:none}