/* ==========================================================================
   CSS ART: COOKER ELBOW PASTA MASALA — Comfort Food Edition
   100% Pure HTML & CSS  •  Mobile-First Responsive  •  Zero JavaScript
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------- */
:root {
  /* Steel palette */
  --s0:#fff;--s1:#f1f5f9;--s2:#cbd5e1;--s3:#94a3b8;--s4:#64748b;
  --s5:#475569;--s6:#334155;--s7:#1e293b;--s8:#0f172a;--s9:#030712;

  /* Food colours */
  --gravy:#c62828;--gravy-lt:#e53935;--gravy-dk:#8e0000;
  --gravy-or:#ff6d00;--oil:#ffd54f;
  --pasta:#f0c060;--pasta-lt:#fbeee0;--pasta-dk:#b7950b;--pasta-sauce:#d84315;
  --cap-g:#2e7d32;--cap-y:#fbc02d;
  --cheese:#fffde7;--cheese-y:#fff59d;
  --cori:#43a047;--chili:#d50000;
  --fl-core:#00e5ff;--fl-mid:#2979ff;--fl-tip:#ff3d00;

  /* Background & counter */
  --bg:#0f172a;--tile:#1e293b;
  --ctr:#3e2723;--ctr-f:#271c19;
  --gold:#ffb300;

  /* Fonts */
  --ff:'Outfit',system-ui,sans-serif;
  --fs:'Playfair Display',Georgia,serif;

  /* Art scale — responsive base unit */
  --u:min(1vw, 4px);
  /* Canvas width — scales down on mobile */
  --cw:min(100%, 960px);
}

/* -----------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:clamp(14px,2vw,16px)}

body{
  font-family:var(--ff);
  background:var(--bg);
  color:#f8fafc;
  min-height:100vh;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Screen-reader-only for toggle inputs */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.page{
  width:100%;max-width:1100px;
  margin:0 auto;
  display:flex;flex-direction:column;
  transition:background .4s;
}

/* -----------------------------------------------------------------------
   3. HEADER
   ----------------------------------------------------------------------- */
.hdr{text-align:center;padding:clamp(1.5rem,4vw,2.5rem) 1rem clamp(.6rem,2vw,1rem)}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.3);
  color:var(--gold);padding:.35rem .9rem;border-radius:50px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.pill-dot{
  width:7px;height:7px;background:#00e676;border-radius:50%;
  box-shadow:0 0 8px #00e676;animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.hdr h1{
  font-family:var(--fs);
  font-size:clamp(1.8rem,5vw,3.4rem);
  font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.15;
  margin-top:.5rem;
}
.hdr em{
  font-style:italic;
  background:linear-gradient(135deg,#ff7043,#ffb300,#ff5252);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(255,112,67,.3));
}

.sub{
  font-size:clamp(.88rem,1.8vw,1.1rem);
  color:#94a3b8;max-width:640px;margin:.5rem auto 0;font-weight:300;
}

/* -----------------------------------------------------------------------
   4. TOOLBAR
   ----------------------------------------------------------------------- */
.toolbar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;
  padding:clamp(.7rem,2vw,1.1rem) clamp(.8rem,2vw,1.5rem);
  background:rgba(30,41,59,.75);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);border-radius:18px;
  margin:0 clamp(.5rem,2vw,1.5rem) clamp(1rem,3vw,2rem);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:20;
}

.tg{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center;
}
.tg:not(.tg-night)::after{
  content:'';width:1px;height:22px;background:rgba(255,255,255,.1);margin-left:.4rem;
}
.tg-lbl{
  font-size:.7rem;font-weight:800;text-transform:uppercase;
  color:#475569;letter-spacing:.06em;margin-right:.2rem;
}

.btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .75rem;
  background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;color:#94a3b8;font-size:.82rem;font-weight:600;
  cursor:pointer;user-select:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.btn:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Active button glow for each toggle */
#ctl-whistle:checked~.page .btn-whistle,
#ctl-lid:checked~.page .btn-lid,
#ctl-cheese:checked~.page .btn-cheese,
#ctl-herbs:checked~.page .btn-herbs,
#ctl-bread:checked~.page .btn-bread,
#ctl-night:checked~.page .btn-night,
#fl-high:checked~.page .btn-flhi,
#fl-sim:checked~.page .btn-flsm,
#fl-off:checked~.page .btn-flof{
  background:linear-gradient(135deg,rgba(255,112,67,.22),rgba(255,179,0,.22));
  border-color:#ff7043;color:#fff;box-shadow:0 0 14px rgba(255,112,67,.35);
}

/* -----------------------------------------------------------------------
   5. ART CANVAS
   ----------------------------------------------------------------------- */
.canvas{
  position:relative;
  width:100%;
  /* Responsive height */
  height:clamp(400px,58vw,560px);
  display:flex;justify-content:center;align-items:flex-end;
  overflow:hidden;
}

/* Background */
.bg{position:absolute;inset:0;z-index:1;pointer-events:none}

.bg-glow{
  position:absolute;top:8%;left:50%;transform:translateX(-50%);
  width:clamp(280px,60%,600px);height:clamp(200px,45%,400px);
  background:radial-gradient(circle,rgba(255,112,67,.15),rgba(255,179,0,.05) 50%,transparent 70%);
  filter:blur(40px);transition:all .5s;
}
.bg-tiles{
  position:absolute;top:0;left:0;width:100%;height:72%;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:38px 38px;
}
.bg-counter{
  position:absolute;bottom:0;left:0;width:100%;height:28%;
  background:linear-gradient(180deg,var(--ctr),#2b1a17);
  border-top:3px solid #5d4037;
  box-shadow:inset 0 8px 18px rgba(0,0,0,.55);
}
.bg-counter-edge{
  position:absolute;bottom:0;left:0;width:100%;height:5%;
  background:var(--ctr-f);
  box-shadow:0 -2px 8px rgba(0,0,0,.7);
}

/* -----------------------------------------------------------------------
   6. COUNTER PROPS
   ----------------------------------------------------------------------- */
.props{
  position:absolute;bottom:24%;width:100%;
  max-width:800px;height:100px;z-index:2;pointer-events:none;
}
.prop{position:absolute}

/* Tomatoes */
.tom1{left:8%;bottom:8px;width:42px;height:38px}
.tom2{left:13%;bottom:2px;width:34px;height:30px}
.tom-b{
  width:100%;height:100%;border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 35% 35%,#ff5252,#c62828 60%,#8e0000 90%);
  box-shadow:0 3px 7px rgba(0,0,0,.4);
}
.tom-s{
  position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:10px;height:8px;background:#2e7d32;
  clip-path:polygon(50% 0%,20% 100%,80% 100%);
}

/* Garlic */
.gar{left:19%;bottom:10px;width:26px;height:28px}
.gar-b{
  width:100%;height:100%;
  background:radial-gradient(circle at 40% 30%,#fff,#e0e0e0 70%,#9e9e9e);
  border-radius:50% 50% 38% 38%;box-shadow:0 3px 5px rgba(0,0,0,.3);
}

/* Spice bowl */
.spb{left:24%;bottom:6px;width:34px;height:18px}
.spb-rim{
  width:100%;height:10px;
  background:linear-gradient(90deg,#5d4037,#8d6e63,#5d4037);
  border-radius:50%;border:2px solid #3e2723;
}
.spb-fill{
  position:absolute;top:3px;left:4px;width:26px;height:8px;
  background:radial-gradient(ellipse,#ff6f00,#e65100);
  border-radius:50%;
}

/* Toast plate */
.toast-plate{
  right:7%;bottom:8px;width:clamp(100px,14vw,135px);height:clamp(50px,7vw,68px);
  transition:all .5s cubic-bezier(.34,1.56,.64,1);
}
.plate-disc{
  width:100%;height:100%;
  background:radial-gradient(ellipse,#fff,#eceff1 70%,#cfd8dc);
  border-radius:50%;border:3px solid #b0bec5;
  box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.8);
  position:relative;
}
.toast{
  position:absolute;
  width:55%;height:52%;
  background:linear-gradient(135deg,#d7ccc8,#a1887f 60%,#5d4037);
  border-radius:6px 14px 6px 10px;box-shadow:0 2px 5px rgba(0,0,0,.3);
  border:2px solid #8d6e63;
}
.t1{transform:rotate(-14deg) translate(-8px,-1px)}
.t2{transform:rotate(12deg) translate(10px,3px)}
.t-c{
  position:absolute;inset:2px;border-radius:4px 10px 4px 8px;
  background:radial-gradient(ellipse at 40% 40%,#ffecb3,#ffe082 50%,#d7ccc8 90%);
}
.t-b{
  position:absolute;top:30%;left:32%;width:15px;height:10px;
  background:#ffeb3b;border-radius:3px;opacity:.8;box-shadow:0 0 5px #fff176;
}
.t-h{
  position:absolute;inset:0;
  background-image:radial-gradient(#2e7d32 1.2px,transparent 1.2px);
  background-size:5px 5px;opacity:.55;
}

#ctl-bread:not(:checked)~.page .toast-plate{opacity:0;transform:translateY(18px) scale(.75);pointer-events:none}

/* Hide props on very small screens */
@media(max-width:500px){.props{display:none}}

/* -----------------------------------------------------------------------
   7. STOVE & FLAMES
   ----------------------------------------------------------------------- */
.stove{
  position:absolute;bottom:24%;left:50%;transform:translateX(-50%);
  width:clamp(200px,30vw,280px);height:36px;z-index:3;
}
.stove-outer{
  position:absolute;width:100%;height:22px;bottom:0;
  background:radial-gradient(ellipse,#374151,#1f2937 70%,#111827);
  border-radius:50%;border:2px solid #4b5563;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.stove-inner{
  position:absolute;width:64%;height:14px;bottom:4px;left:18%;
  background:radial-gradient(ellipse,#111827,#000);
  border-radius:50%;border:1px solid #374151;
}
.trivet{
  position:absolute;width:86%;height:18px;bottom:7px;left:7%;
}
.tri-a{
  position:absolute;width:100%;height:3px;top:50%;
  background:#1e293b;box-shadow:0 2px 3px rgba(0,0,0,.7);
}
.a1{transform:translateY(-50%) rotate(0)}
.a2{transform:translateY(-50%) rotate(45deg)}
.a3{transform:translateY(-50%) rotate(90deg)}
.a4{transform:translateY(-50%) rotate(135deg)}

.flames{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:72%;height:34px;
  display:flex;justify-content:space-around;align-items:flex-end;
  transition:all .4s;
}
.fl{
  width:clamp(14px,2.5vw,20px);height:100%;
  background:radial-gradient(ellipse at bottom,var(--fl-core),var(--fl-mid) 40%,var(--fl-tip) 80%,transparent);
  border-radius:50% 50% 20% 20%;
  filter:drop-shadow(0 0 10px var(--fl-core));
  animation:flick .15s ease-in-out infinite alternate;
  transform-origin:bottom;
}
.fl2{animation-delay:.04s;height:110%}
.fl3{animation-delay:.07s;height:92%}
.fl4{animation-delay:.03s;height:104%}
.fl5{animation-delay:.06s;height:96%}
.fl6{animation-delay:.02s}
@keyframes flick{
  0%{transform:scaleY(1) scaleX(1) rotate(-1deg)}
  100%{transform:scaleY(1.15) scaleX(.9) rotate(1deg)}
}
.fl-glow{
  position:absolute;inset:-8px;
  background:radial-gradient(ellipse,rgba(0,229,255,.35),rgba(255,61,0,.15) 50%,transparent 80%);
  filter:blur(6px);pointer-events:none;
}

/* Flame toggles */
#fl-sim:checked~.page .flames{height:16px;opacity:.75}
#fl-sim:checked~.page .fl{filter:drop-shadow(0 0 5px var(--fl-core))}
#fl-off:checked~.page .flames{height:0;opacity:0}

/* -----------------------------------------------------------------------
   8. PRESSURE COOKER — POT BODY
   ----------------------------------------------------------------------- */
.cooker{
  position:absolute;
  bottom:27%;left:50%;transform:translateX(-50%);
  /* Responsive sizing */
  width:clamp(220px,34vw,320px);
  height:clamp(210px,32vw,300px);
  z-index:5;
}
.cooker-shadow{
  position:absolute;bottom:clamp(-10px,-1.5vw,-14px);left:50%;transform:translateX(-50%);
  width:90%;height:clamp(16px,2.5vw,24px);
  background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);
  border-radius:50%;
}
.pot{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:88%;
  height:66%;
  border-radius:14px 14px 32px 32px;
  background:linear-gradient(90deg,#334155,#64748b 12%,#94a3b8 25%,#f8fafc 42%,#fff 50%,#cbd5e1 65%,#64748b 85%,#1e293b);
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,.5),
    inset 0 3px 8px rgba(255,255,255,.7),
    0 12px 30px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35);
  overflow:visible;
}
.pot-shine{
  position:absolute;top:0;left:38%;width:14%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-8deg);pointer-events:none;
}
.pot-rim{
  position:absolute;top:-5px;left:-1.5%;width:103%;height:13px;
  background:linear-gradient(180deg,#f8fafc,#cbd5e1 50%,#475569);
  border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.3);
}

/* Side handles */
.ph{position:absolute;top:22%;width:clamp(30px,5vw,42px);height:24px;z-index:-1}
.ph-l{left:clamp(-26px,-4vw,-36px)}
.ph-r{right:clamp(-26px,-4vw,-36px)}
.ph-grip{
  width:100%;height:100%;
  background:linear-gradient(180deg,#1f2937,#111827 60%,#000);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.15),0 3px 6px rgba(0,0,0,.5);
}
.ph-l .ph-grip{border-radius:6px 0 0 6px}
.ph-r .ph-grip{border-radius:0 6px 6px 0}

/* Brand */
.brand{
  position:absolute;bottom:16%;left:50%;transform:translateX(-50%);
  text-align:center;pointer-events:none;opacity:.7;
}
.brand-t{
  display:block;font-size:clamp(.55rem,1vw,.7rem);font-weight:900;
  letter-spacing:.22em;color:#334155;text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.brand-s{
  font-size:clamp(.42rem,.7vw,.52rem);font-weight:700;letter-spacing:.12em;color:#475569;
}

/* -----------------------------------------------------------------------
   9. COOKER INTERIOR — PASTA DISH REVEALED
   ----------------------------------------------------------------------- */
.interior{
  position:absolute;top:6px;left:5%;width:90%;height:88%;
  border-radius:10px 10px 28px 28px;
  background:#111827;overflow:hidden;
  opacity:0;transform:scale(.9);
  transition:all .45s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 12px 28px rgba(0,0,0,.9);
}
#ctl-lid:checked~.page .interior{opacity:1;transform:scale(1)}

.inner-shadow{
  position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 22px rgba(0,0,0,.9);z-index:10;pointer-events:none;
}

/* Gravy */
.gravy{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,var(--gravy-lt),var(--gravy) 50%,var(--gravy-dk) 90%);
  border-radius:inherit;
}
.gravy-swirl{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,109,0,.55),transparent 70%);
  filter:blur(5px);
}
.gs1{width:55%;height:52%;top:6%;left:8%}
.gs2{width:62%;height:58%;bottom:5%;right:4%}
.butter-dot{
  position:absolute;top:34%;left:44%;width:13%;height:14%;
  background:radial-gradient(ellipse,#fff59d,#ffee58 60%,transparent);
  border-radius:50%;filter:blur(1px);box-shadow:0 0 10px #ffee58;
}
.oil-sheen{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle,var(--oil) 1.5px,transparent 1.5px),
    radial-gradient(circle,var(--oil) 2px,transparent 2px);
  background-size:28px 28px,42px 42px;
  background-position:0 0,14px 14px;
  opacity:.65;
}

/* -----------------------------------------------------------------------
   10. ELBOW MACARONI PASTA — THE KEY CSS ART SHAPE
   ----------------------------------------------------------------------- */
.pasta-bed{position:absolute;inset:0;z-index:3}

/*
  Elbow macaroni = a thick curved arc.
  Created by giving a square element a 50% border-radius (circle),
  then only painting TWO adjacent borders (top + right) with a thick
  pasta-coloured border, leaving the other two transparent.
  A subtle inner box-shadow adds the hollow tube depth.
*/
.elbow{
  position:absolute;
  --sz:clamp(18px,3.5vw,28px);
  width:var(--sz);height:var(--sz);
  border-radius:50%;
  border:clamp(5px,1vw,8px) solid var(--pasta);
  border-bottom-color:transparent;
  border-left-color:transparent;
  box-shadow:
    inset 1px -1px 3px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.4);
  background:transparent;
}

/* Ridged highlight on the tube exterior */
.elbow::before{
  content:'';position:absolute;
  inset:-clamp(5px,1vw,8px);
  border-radius:50%;
  border:clamp(5px,1vw,8px) solid transparent;
  border-top-color:rgba(255,255,255,.25);
  border-right-color:rgba(255,255,255,.15);
  pointer-events:none;
}

/* Sauce tint on each piece */
.elbow::after{
  content:'';position:absolute;
  inset:-clamp(5px,1vw,8px);
  border-radius:50%;
  border:clamp(5px,1vw,8px) solid transparent;
  border-top-color:rgba(198,40,40,.35);
  border-right-color:rgba(198,40,40,.25);
  pointer-events:none;
}

/* Individual positions — use % for responsive */
.e1 {top:14%;left:12%;transform:rotate(-30deg)}
.e2 {top:10%;left:36%;transform:rotate(50deg)}
.e3 {top:18%;left:60%;transform:rotate(-65deg)}
.e4 {top:8%;left:78%;transform:rotate(20deg)}
.e5 {top:36%;left:8%;transform:rotate(75deg)}
.e6 {top:38%;left:32%;transform:rotate(-15deg);--sz:clamp(20px,3.8vw,30px)}
.e7 {top:34%;left:55%;transform:rotate(110deg)}
.e8 {top:40%;left:75%;transform:rotate(-45deg);--sz:clamp(16px,3vw,24px)}
.e9 {top:58%;left:15%;transform:rotate(35deg)}
.e10{top:60%;left:42%;transform:rotate(-80deg);--sz:clamp(20px,3.8vw,30px)}
.e11{top:56%;left:65%;transform:rotate(15deg)}
.e12{top:72%;left:28%;transform:rotate(-55deg);--sz:clamp(16px,3vw,24px)}
.e13{top:74%;left:52%;transform:rotate(90deg)}
.e14{top:68%;left:76%;transform:rotate(-20deg);--sz:clamp(18px,3.3vw,26px)}

/* Different sauce tint for variety */
.e2,.e5,.e8,.e11,.e14{border-top-color:var(--pasta-dk);border-right-color:var(--pasta)}
.e3,.e6,.e10,.e13{border-top-color:#e8a838;border-right-color:var(--pasta-lt)}

/* -----------------------------------------------------------------------
   11. VEGETABLES
   ----------------------------------------------------------------------- */
.vegs{position:absolute;inset:0;z-index:4;pointer-events:none}

.cap{
  position:absolute;width:clamp(8px,1.8vw,13px);height:clamp(8px,1.8vw,13px);
  border-radius:2px;box-shadow:0 2px 3px rgba(0,0,0,.3);
}
.cap-g{background:linear-gradient(135deg,#66bb6a,var(--cap-g))}
.cap-y{background:linear-gradient(135deg,#ffee58,var(--cap-y))}
.v1{top:28%;left:30%;transform:rotate(12deg)}
.v2{top:62%;left:68%;transform:rotate(-22deg)}
.v3{top:42%;left:58%;transform:rotate(38deg)}
.v4{top:75%;left:40%;transform:rotate(-8deg)}

.tom-c{
  position:absolute;
  width:clamp(10px,2vw,15px);height:clamp(8px,1.5vw,11px);
  background:radial-gradient(circle at 30% 30%,#ff5252,#c62828);
  border-radius:50% 30% 50% 40%;box-shadow:0 2px 3px rgba(0,0,0,.4);
}
.tc1{top:22%;left:52%;transform:rotate(-15deg)}
.tc2{top:65%;left:16%;transform:rotate(40deg)}

.corn{
  position:absolute;
  width:clamp(5px,1.2vw,8px);height:clamp(6px,1.4vw,9px);
  background:radial-gradient(circle at 40% 30%,#fff176,#fbc02d);
  border-radius:40%;box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.c1{top:30%;left:22%}.c2{top:52%;left:48%}
.c3{top:68%;left:60%}.c4{top:44%;left:72%}

.onion-ring{
  position:absolute;top:48%;left:24%;
  width:clamp(12px,2.2vw,18px);height:clamp(12px,2.2vw,18px);
  border:clamp(2px,.5vw,3px) solid rgba(255,255,255,.7);
  border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* -----------------------------------------------------------------------
   12. CHEESE & HERBS LAYERS
   ----------------------------------------------------------------------- */
.cheese-lyr{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  transition:all .4s;
}
.ch-pool{
  position:absolute;top:28%;left:25%;width:45%;height:40%;
  background:radial-gradient(ellipse,rgba(255,253,231,.8),rgba(255,245,157,.55) 60%,transparent 80%);
  filter:blur(2px);
}
.ch-str{
  position:absolute;height:3px;background:var(--cheese);
  border-radius:8px;box-shadow:0 0 5px var(--cheese-y);
}
.ch1{top:36%;left:22%;width:25%;transform:rotate(12deg)}
.ch2{top:55%;left:38%;width:30%;transform:rotate(-16deg)}
.ch3{top:46%;left:28%;width:35%;transform:rotate(6deg)}

#ctl-cheese:not(:checked)~.page .cheese-lyr{opacity:0;transform:scale(.8)}

/* Herbs */
.herbs-lyr{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  transition:all .4s;
}
.cilantro{
  position:absolute;
  width:clamp(8px,1.8vw,13px);height:clamp(8px,1.8vw,13px);
  background:var(--cori);
  clip-path:polygon(50% 0%,78% 28%,100% 68%,50% 100%,0% 68%,22% 28%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.ci1{top:26%;left:34%;transform:rotate(22deg)}
.ci2{top:58%;left:44%;transform:rotate(-30deg)}
.ci3{top:48%;left:70%;transform:rotate(50deg)}

.chili-f{
  position:absolute;
  width:clamp(3px,.7vw,5px);height:clamp(3px,.7vw,5px);
  background:var(--chili);border-radius:1px;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cf1{top:32%;left:46%}.cf2{top:64%;left:30%}
.cf3{top:42%;left:62%}.cf4{top:72%;left:55%}

.oreg{
  position:absolute;
  width:clamp(2px,.5vw,3px);height:clamp(2px,.5vw,3px);
  background:#33691e;border-radius:50%;
}
.od1{top:38%;left:38%}.od2{top:60%;left:56%}
.od3{top:70%;left:42%}.od4{top:30%;left:64%}

#ctl-herbs:not(:checked)~.page .herbs-lyr{opacity:0}

/* Bowl steam */
.bowl-steam{
  position:absolute;top:-14%;left:50%;transform:translateX(-50%);
  width:72%;height:40%;z-index:8;pointer-events:none;
}
.bstm{
  position:absolute;bottom:0;
  width:clamp(20px,4vw,32px);height:clamp(35px,7vw,55px);
  background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 70%);
  border-radius:50%;filter:blur(6px);
  animation:brise 3s infinite ease-out;
}
.s1{left:18%;animation-delay:0s}
.s2{left:42%;animation-delay:1s}
.s3{left:66%;animation-delay:2s}
@keyframes brise{
  0%{transform:translateY(0) scaleX(1);opacity:0}
  50%{opacity:.55}
  100%{transform:translateY(clamp(-40px,-7vw,-65px)) scaleX(2);opacity:0}
}

/* -----------------------------------------------------------------------
   13. COOKER LID
   ----------------------------------------------------------------------- */
.lid{
  position:absolute;
  top:clamp(20px,4vw,38px);left:50%;transform:translateX(-50%);
  width:93%;height:clamp(58px,9vw,82px);
  z-index:10;
  transition:all .55s cubic-bezier(.34,1.56,.64,1);
  transform-origin:top right;
}
#ctl-lid:checked~.page .lid{
  transform:translate(calc(-50% - clamp(80px,16vw,160px)),clamp(-70px,-14vw,-120px)) rotate(-30deg) scale(.85);
}

.lid-dome{
  position:absolute;bottom:0;left:0;width:100%;
  height:clamp(46px,7.5vw,66px);
  border-radius:100px 100px 12px 12px;
  background:linear-gradient(180deg,#fff,#cbd5e1 30%,#64748b 70%,#334155);
  box-shadow:0 -4px 12px rgba(255,255,255,.45),0 8px 18px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.55);
}
.lid-gloss{
  position:absolute;top:7px;left:20%;width:60%;height:clamp(10px,2vw,16px);
  background:linear-gradient(180deg,rgba(255,255,255,.75),transparent);
  border-radius:50%;
}
.lid-gasket{
  position:absolute;bottom:-3px;left:-1%;width:102%;height:8px;
  background:#1e293b;border-radius:5px;
}

/* Lid handle bar */
.lid-bar{
  position:absolute;top:clamp(-10px,-1.8vw,-14px);left:50%;transform:translateX(-50%);
  width:92%;height:clamp(18px,3vw,26px);
}
.lid-bar-rail{
  position:absolute;top:46%;left:0;width:100%;height:clamp(6px,1vw,9px);
  background:linear-gradient(90deg,#475569,#94a3b8 50%,#475569);
  border-radius:4px;
}
.lid-bar-grip{
  position:absolute;top:0;left:8%;width:62%;height:100%;
  background:linear-gradient(180deg,#1f2937,#111827 70%,#000);
  border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.55);
}
.lid-bar-latch{
  position:absolute;top:15%;right:6%;width:12%;height:70%;
  background:linear-gradient(90deg,#94a3b8,#cbd5e1);border-radius:3px;
}

/* Safety valve */
.valve{
  position:absolute;top:clamp(10px,2vw,14px);left:clamp(28px,6vw,48px);
  width:clamp(12px,2vw,16px);height:clamp(10px,1.6vw,13px);
}
.valve-cap{
  width:100%;height:100%;
  background:radial-gradient(circle at 40% 30%,#ef4444,#991b1b);
  border-radius:50%;border:2px solid #cbd5e1;box-shadow:0 2px 3px rgba(0,0,0,.4);
}

/* Vent + whistle weight */
.vent{
  position:absolute;top:clamp(-18px,-3vw,-24px);left:50%;transform:translateX(-50%);
  width:clamp(24px,4.5vw,34px);height:clamp(28px,4.5vw,38px);
}
.vent-pipe{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:clamp(6px,1.2vw,9px);height:55%;
  background:linear-gradient(90deg,#64748b,#f8fafc 50%,#475569);
  border-radius:2px 2px 0 0;
}

.wt{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:clamp(16px,3vw,22px);height:clamp(16px,3vw,22px);
  transition:transform .2s cubic-bezier(.175,.885,.32,1.275);
}
.wt-top{width:100%;height:42%;background:linear-gradient(180deg,#f8fafc,#94a3b8);border-radius:5px 5px 0 0}
.wt-body{width:100%;height:50%;background:linear-gradient(90deg,#334155,#64748b 40%,#f8fafc 60%,#1e293b);border-radius:0 0 3px 3px}
.wt-ring{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:115%;height:3px;background:#000;border-radius:2px}

/* Whistle steam */
.wsteam{
  position:absolute;top:clamp(-55px,-10vw,-85px);left:50%;transform:translateX(-50%);
  width:clamp(90px,16vw,130px);height:clamp(70px,12vw,100px);
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.wjet{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:clamp(8px,1.5vw,11px);height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.15) 80%,transparent);
  border-radius:8px;filter:blur(2px);
}
.wcl{
  position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,.35) 50%,transparent 75%);
  border-radius:50%;filter:blur(6px);
}
.wc1{width:30%;height:36%}.wc2{width:50%;height:58%}
.wc3{width:70%;height:78%}.wc4{width:88%;height:95%}

.wsound{position:absolute;top:8%;width:100%;display:flex;justify-content:space-evenly}
.wv{width:3px;height:clamp(12px,2.5vw,18px);background:var(--gold);border-radius:3px;box-shadow:0 0 8px var(--gold)}

/* ===== WHISTLE ON ===== */
#ctl-whistle:checked~.page .wt{animation:wlift .3s ease-in-out infinite alternate}
#ctl-whistle:checked~.page .wsteam{opacity:1}
#ctl-whistle:checked~.page .wc1{animation:sexp 1.2s infinite 0s ease-out}
#ctl-whistle:checked~.page .wc2{animation:sexp 1.2s infinite .3s ease-out}
#ctl-whistle:checked~.page .wc3{animation:sexp 1.2s infinite .6s ease-out}
#ctl-whistle:checked~.page .wc4{animation:sexp 1.2s infinite .9s ease-out}
#ctl-whistle:checked~.page .wv1{animation:wpulse .4s infinite 0s alternate}
#ctl-whistle:checked~.page .wv2{animation:wpulse .4s infinite .15s alternate}
#ctl-whistle:checked~.page .wv3{animation:wpulse .4s infinite .3s alternate}

@keyframes wlift{0%{transform:translateX(-50%) translateY(0)}100%{transform:translateX(-50%) translateY(clamp(-6px,-1.2vw,-9px))}}
@keyframes sexp{0%{transform:translateX(-50%) scale(.3);opacity:.85}100%{transform:translateX(-50%) translateY(clamp(-40px,-8vw,-65px)) scale(1.7);opacity:0}}
@keyframes wpulse{0%{transform:scaleY(.5);opacity:.3}100%{transform:scaleY(1.5);opacity:1}}

/* -----------------------------------------------------------------------
   14. NIGHT MODE
   ----------------------------------------------------------------------- */
#ctl-night:checked~.page{background:var(--s9)}
#ctl-night:checked~.page .bg-tiles{background-color:#020617}
#ctl-night:checked~.page .bg-glow{
  background:radial-gradient(circle,rgba(255,112,67,.28),rgba(255,179,0,.1) 50%,transparent 70%);
  filter:blur(55px);
}

/* -----------------------------------------------------------------------
   15. INFO TABS
   ----------------------------------------------------------------------- */
.info{
  width:calc(100% - clamp(1rem,3vw,3rem));
  max-width:900px;margin:clamp(.5rem,2vw,1rem) auto clamp(1.5rem,3vw,3rem);
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}

.tabs-bar{
  display:flex;background:rgba(30,41,59,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tlbl{
  flex:1;text-align:center;padding:clamp(.7rem,1.5vw,1rem);
  font-size:clamp(.78rem,1.5vw,.92rem);font-weight:700;
  color:#64748b;cursor:pointer;user-select:none;
  transition:all .3s;
}
.tlbl:hover{color:#fff;background:rgba(255,255,255,.04)}

#tab-recipe:checked~.page .tlbl-r,
#tab-ingr:checked~.page .tlbl-i,
#tab-css:checked~.page .tlbl-c{
  color:var(--gold);background:rgba(15,23,42,.85);
  border-bottom:3px solid var(--gold);
}

.tabs-body{padding:clamp(1rem,2.5vw,2rem)}
.tpanel{display:none;animation:fadein .4s}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

#tab-recipe:checked~.page .tp-recipe,
#tab-ingr:checked~.page .tp-ingr,
#tab-css:checked~.page .tp-css{display:block}

.tpanel h3{
  font-family:var(--fs);font-size:clamp(1.15rem,2.5vw,1.45rem);
  color:#fff;margin-bottom:1rem;
}

/* Recipe steps */
.tp-recipe ol{display:flex;flex-direction:column;gap:.9rem;list-style:none;counter-reset:step}
.tp-recipe li{
  counter-increment:step;
  background:rgba(30,41,59,.45);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:.85rem 1rem;position:relative;
  padding-left:3rem;
}
.tp-recipe li::before{
  content:counter(step);position:absolute;left:.8rem;top:.85rem;
  width:1.6rem;height:1.6rem;background:var(--gold);color:#000;
  border-radius:50%;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;
}
.tp-recipe strong{color:var(--gold);display:block;font-size:.98rem;margin-bottom:.15rem}
.tp-recipe p{color:#cbd5e1;font-size:.88rem}

/* Ingredients grid */
.igrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(160px,30vw,220px),1fr));
  gap:.8rem;
}
.icard{
  background:rgba(30,41,59,.45);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:1rem;text-align:center;
  transition:all .3s;
}
.icard:hover{transform:translateY(-3px);border-color:rgba(255,179,0,.35);background:rgba(30,41,59,.7)}
.ii{font-size:1.8rem;display:block;margin-bottom:.3rem}
.icard h4{color:#fff;font-size:1rem;margin-bottom:.15rem}
.icard p{color:#94a3b8;font-size:.8rem}

/* CSS secrets */
.tp-css ul{display:flex;flex-direction:column;gap:.8rem;list-style:none}
.tp-css li{
  background:rgba(30,41,59,.45);border-left:3px solid #3b82f6;
  border-radius:0 10px 10px 0;padding:.85rem 1rem;
  color:#cbd5e1;font-size:.9rem;
}
.tp-css strong{color:#fff}
.tp-css code{
  font-family:'Fira Code',monospace;
  background:rgba(0,0,0,.35);color:#60a5fa;
  padding:.1rem .35rem;border-radius:3px;font-size:.82rem;
}

/* -----------------------------------------------------------------------
   16. FOOTER
   ----------------------------------------------------------------------- */
.ft{
  text-align:center;padding:1rem;
  color:#475569;font-size:clamp(.72rem,1.3vw,.85rem);
}

/* -----------------------------------------------------------------------
   17. RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------------- */

/* Tablets */
@media(max-width:768px){
  .toolbar{gap:.6rem;padding:.6rem .8rem}
  .tg::after{display:none}
  .tg-lbl{display:none}
  .btn{padding:.4rem .6rem;font-size:.76rem}
}

/* Phones */
@media(max-width:480px){
  .toolbar{border-radius:14px;margin:0 .5rem 1rem}
  .btn span:first-child{font-size:.9rem}
  .btn{padding:.35rem .5rem;font-size:.72rem;border-radius:8px}

  .canvas{height:clamp(320px,75vw,420px)}

  .tabs-bar{flex-direction:column}
  .tlbl{padding:.6rem;border-bottom:1px solid rgba(255,255,255,.05)}

  .igrid{grid-template-columns:1fr 1fr}
}

/* Ultra-wide */
@media(min-width:1400px){
  .canvas{height:620px}
}