/* The Kitchen & Gut Lab — shared chrome for all four pages.
   Bright, chunky and deliberately unlike the rest of Tool Corner: this is an exhibit, not a
   calculator. Shared as one file so the four pages cannot drift apart. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --ink:#2b1b3d; --paper:#fffdf7; --cream:#fff6e5;
  --grape:#7c3aed; --grape-soft:#ede9fe;
  --tangerine:#fb923c; --lime:#65d46e; --berry:#f43f5e; --sky:#38bdf8; --sun:#fbbf24;
  --line:#2b1b3d; --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif; font-size:17px; line-height:1.6;
  background-image:radial-gradient(var(--grape-soft) 1.4px, transparent 1.4px);
  background-size:26px 26px;
}
h1,h2,h3,.chunky{font-family:'Baloo 2',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.1; margin:0}
h1{font-size:clamp(34px,6vw,58px)}
h2{font-size:clamp(25px,4vw,36px)}
h3{font-size:20px}
p{margin:0 0 14px; text-wrap:pretty}
a{color:var(--grape); font-weight:700}
a:hover{color:var(--berry)}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}

/* ---- parent-site bar ---- */
.tc-bar{background:var(--ink); color:#fff; font-size:13.5px; font-weight:700}
.tc-bar .wrap{display:flex; align-items:center; gap:10px; min-height:38px; flex-wrap:wrap}
.tc-bar a{color:#fff; text-decoration:none}
.tc-bar a:hover{color:var(--sun); text-decoration:underline}
.tc-home{display:inline-flex; align-items:center; gap:6px}
.tc-sep{opacity:.45}
.tc-where{opacity:.8; font-weight:600}
.tc-spacer{flex:1}
.tc-alt{opacity:.85}
@media(max-width:600px){.tc-alt{display:none}}

/* ---- nav ---- */
.lab-nav{position:sticky; top:0; z-index:40; background:var(--sun); border-bottom:4px solid var(--ink)}
.lab-nav .wrap{display:flex; align-items:center; gap:10px; min-height:64px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.lab-brand{display:flex; align-items:center; gap:8px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; color:var(--ink); text-decoration:none; margin-right:auto}
.lab-brand:hover{color:var(--ink); transform:rotate(-2deg)}
.lab-links{display:flex; gap:8px; flex-wrap:wrap}
.lab-links a{
  display:inline-block; padding:9px 15px; min-height:44px; line-height:26px;
  background:var(--paper); border:3px solid var(--ink); border-radius:999px;
  font-weight:800; font-size:15px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s;
}
.lab-links a:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); color:var(--ink)}
.lab-links a[aria-current="page"]{background:var(--grape); color:#fff}
/* Separates the three story zones from the bench simulators, which are ordinary tool
   pages rather than lab pages and should not read as a fifth zone. */
.lab-navsep{width:3px; align-self:stretch; margin:0 2px; background:var(--ink); opacity:.25; border-radius:2px}
.lab-links a.lab-benchlink{background:var(--sun)}
.lab-score{flex:0 0 auto;margin-left:10px;padding:7px 13px;background:var(--lime); border:3px solid var(--ink); border-radius:999px; font-weight:800; font-size:14px; color:var(--ink); box-shadow:var(--shadow-sm); white-space:nowrap}
@media(max-width:720px){.lab-navsep{display:none}}

/* ---- building blocks ---- */
.card{background:var(--paper); border:4px solid var(--ink); border-radius:var(--r); box-shadow:var(--shadow)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; min-height:48px; border:4px solid var(--ink); border-radius:999px;
  background:var(--sun); color:var(--ink); font-family:'Baloo 2',sans-serif; font-weight:800; font-size:18px;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s;
  text-decoration:none;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); color:var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:var(--shadow-sm)}
.btn.grape{background:var(--grape); color:#fff}
.btn.lime{background:var(--lime)}
.btn.sky{background:var(--sky)}

/* ---- mascot speech ---- */
.mascot{display:flex; align-items:flex-start; gap:12px}
.mascot .face{
  flex:none; width:60px; height:60px; display:grid; place-items:center; font-size:32px;
  background:var(--grape-soft); border:4px solid var(--ink); border-radius:50%;
}
.bubble{
  position:relative; background:#fff; border:4px solid var(--ink); border-radius:16px;
  padding:12px 16px; font-weight:600; box-shadow:var(--shadow-sm); flex:1; min-width:0;
}
.bubble::before{
  content:''; position:absolute; left:-13px; top:18px; width:0; height:0;
  border:9px solid transparent; border-right-color:var(--ink);
}

/* ---- food chips ---- */
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.food{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px;
  background:#fff; border:3px solid var(--ink); border-radius:16px; cursor:pointer;
  font-weight:700; font-size:12px; text-align:center; min-height:88px; justify-content:center;
  box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, background .12s;
  font-family:inherit; color:inherit;
}
.food:hover{transform:translate(-2px,-2px) rotate(-2deg); box-shadow:5px 5px 0 var(--ink); background:var(--cream)}
.food[aria-pressed="true"]{background:var(--sun); transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink)}
.food .em{font-size:30px; line-height:1}

/* ---- animations ---- */
@keyframes pop{0%{transform:scale(.6) rotate(-8deg); opacity:0}60%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0); opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes fizzUp{0%{transform:translateY(0) scale(.4); opacity:1}100%{transform:translateY(-90px) scale(1.1); opacity:0}}
@keyframes shrinkWiggle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(.82) rotate(-7deg)}60%{transform:scale(.9) rotate(6deg)}}
@keyframes sparkleUp{0%{transform:translateY(6px) scale(.5); opacity:0}40%{opacity:1}100%{transform:translateY(-46px) scale(1.15); opacity:0}}
@keyframes curdle{0%,100%{border-radius:50%}25%{border-radius:46% 54% 38% 62%}50%{border-radius:60% 40% 55% 45%}75%{border-radius:38% 62% 47% 53%}}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
@keyframes drift{0%{transform:translate(0,0) scale(.6); opacity:.9}100%{transform:translate(var(--dx),-70px) scale(1.2); opacity:0}}
.pop{animation:pop .34s cubic-bezier(.34,1.56,.64,1) both}
.bob{animation:bob 2.4s ease-in-out infinite}
.fade{animation:fade .3s ease both}

/* ---- fact ticker ---- */
.ticker{background:var(--grape); color:#fff; border-top:4px solid var(--ink); border-bottom:4px solid var(--ink); padding:11px 0; font-weight:700}
.ticker .wrap{display:flex; align-items:center; gap:10px}

/* ---- footer ---- */
.lab-foot{background:var(--ink); color:#fff; margin-top:52px; padding:34px 0 26px; border-top:6px solid var(--grape)}
.lab-foot a{color:var(--sun)}
.lab-foot a:hover{color:#fff}
.lab-foot .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:22px}
.lab-foot h4{font-family:'Baloo 2',sans-serif; font-size:17px; margin:0 0 8px}
.lab-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:15px}
.lab-foot .small{font-size:13px; opacity:.72; border-top:1px solid rgba(255,255,255,.18); padding-top:16px}

/* ---- disclaimers ---- */
.note{background:var(--cream); border:3px dashed var(--ink); border-radius:16px; padding:14px 18px; font-size:15px; font-weight:600}
.urgent{background:#7f1d1d; color:#fff; border:4px solid #450a0a; border-radius:14px; padding:20px 22px}
.urgent h2,.urgent h3{color:#fff; font-family:'Nunito',sans-serif; font-weight:800; letter-spacing:0}
.urgent a{color:#fecaca}

/* ---- confetti layer ---- */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden}
#confetti i{position:absolute; width:11px; height:11px; border-radius:2px; animation:drift 1.1s ease-out forwards}

@media (max-width:760px){
  body{font-size:16px}
  .lab-nav .wrap{min-height:auto}
  .lab-brand{width:100%; margin-right:0}
  .lab-links{width:100%}
  .lab-links a{flex:1; text-align:center; padding:9px 8px; font-size:14px}
  .lab-foot .cols{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .food{min-height:78px; font-size:11px}
  .food .em{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

@keyframes fadeUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}