/* The Food Lab — a garage workbench, Zog, six foods and Li's notebook.
   Built on site.css tokens. Everything human is flat cut paper, wood, tape
   and Sharpie (the lab clock is a cheap LCD stopwatch, not a screen); the only
   glow belongs to Zog (stomach, float, the soap-bubble pop) and to his one
   warm colour, the orange contentment aura after Cheddar Saturns.
   Motion is stepped (steps()); only alien light tweens. site.css collapses
   every transition and animation when motion is off or reduced, so each state
   below also reads as a still.

   Stage geometry: every vertical measure is a percentage of the stage height,
   so Zog stands the same on the 1:1 phone stage and the 4:3 wide one. The
   bench top is at 88%, the rafter ends at 6%. Zog (3 ft 6 in) on a bench six
   feet under the ceiling: 48% of the stage tall, so his 430 x 621 canvas is
   66% high. */

.lab-body {
  --wood: #7C5C3B;
  --wood-top: #A07A4E;
  --wood-dark: #4F3924;
  --graph: rgba(40, 110, 160, .13);
  --lcd: #B9C49C;
  --lcd-ink: #1C2414;
  --aura: 255, 146, 38;
  --z: 57, 255, 20;
}

.lab-page { padding-bottom: 32px; }
.lab-intro { max-width: 46rem; margin-bottom: clamp(20px, 3vw, 32px); }
.lab-intro h1 { margin-bottom: .25em; }
.lab-intro .lede { margin-bottom: 0; }

/* ---- layout ------------------------------------------------------------ */
.lab { position: relative; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.lab-notebook { margin-top: 40px; }
@media (min-width: 980px) {
  .lab {
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(24px, 3vw, 40px);
  }
  .lab-stage, .lab-readout, .lab-bench { grid-column: 1; }
  /* The notebook takes the height of the bench column and scrolls inside it. */
  .lab-notebook { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; contain: size; display: flex; flex-direction: column; min-height: 0; }
  .lab-notebook .nb-head { flex: none; }
  .lab-notebook .nb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ---- the stage: back wall, rafter, bench top ---------------------------- */
.lab-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(29,10,57,.13) 33.3%, transparent calc(33.3% + 2px)),
    linear-gradient(90deg, transparent calc(66.6% - 1px), rgba(29,10,57,.13) 66.6%, transparent calc(66.6% + 2px)),
    var(--grain),
    var(--kraft);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}
@media (min-width: 600px) { .lab-stage { aspect-ratio: 4 / 3; } }

.lab-set > * { position: absolute; }
.set-rafter { left: 0; right: 0; top: 0; height: 6%; background: var(--wood-dark) var(--grain); box-shadow: 0 3px 0 rgba(29,10,57,.25); z-index: 1; }
.set-rafter-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1.5deg); background: var(--tape) var(--grain); font-family: var(--f-form); font-weight: 700; font-size: clamp(.58rem, .5rem + .3vw, .72rem); letter-spacing: .14em; text-transform: uppercase; padding: 1px 10px; white-space: nowrap; }

/* The bulb hangs where a floating alien will find it. */
.set-bulb { left: 40%; top: 6%; width: 0; height: 7%; border-left: 2px solid var(--aubergine); transform-origin: 0 0; z-index: 1; }
.set-bulb::before { content: ""; position: absolute; left: -7px; bottom: -4px; width: 12px; height: 10px; background: #5a5560; border-radius: 2px; }
.set-bulb::after { content: ""; position: absolute; left: -12px; bottom: -26px; width: 22px; height: 24px; border-radius: 50% 50% 46% 46%; background: #F6EFC9; box-shadow: inset -3px -3px 0 rgba(29,10,57,.12); border: 2px solid rgba(29,10,57,.55); }
.lab[data-aloft][data-buzz] .set-bulb { animation: lab-swing .5s steps(1, end) infinite; }
.lab.bump .set-bulb { animation: lab-swing .5s steps(1, end) 2; }
@keyframes lab-swing { 0% { transform: rotate(9deg); } 25% { transform: rotate(3deg); } 50% { transform: rotate(-9deg); } 75% { transform: rotate(-3deg); } }

.set-chart {
  left: 5%; top: 17%; width: 29%; padding: 3.2% 3% 2.6%;
  background: #FBF8EF var(--grain);
  background-image: linear-gradient(transparent 1.3em, rgba(40,110,160,.18) 1.3em, transparent calc(1.3em + 1px)), var(--grain);
  background-size: 100% 1.4em, auto;
  box-shadow: var(--shadow);
  transform: rotate(-2.2deg);
  font-family: var(--f-marker); color: #20222c; font-size: clamp(.5rem, .3rem + .62vw, .8rem); line-height: 1.4;
  display: none;
}
.set-chart p { margin: 0; text-transform: uppercase; }
.set-chart small { font-size: .78em; }
.set-chart-h { font-size: 1.18em; text-decoration: underline; text-decoration-color: var(--hed-red); text-underline-offset: 3px; margin-bottom: .25em !important; }
.set-chart-red, .set-hearts { color: var(--hed-red); }
.set-chart::before { content: ""; position: absolute; left: -4%; top: -3%; width: 7px; height: 7px; border-radius: 50%; background: var(--hed-red); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* Sam's dad's pegboard: the shovel in its marker outline; nobody touches them. */
.set-pegboard {
  left: 4%; top: 15%; width: 25%; height: 46%;
  background: radial-gradient(circle, rgba(29,10,57,.45) 1.4px, transparent 2px) 0 0 / 11px 11px, var(--grain), #B08A5E;
  box-shadow: var(--shadow);
}
.set-pegboard svg { position: absolute; inset: 7% 9%; width: 82%; height: 86%; }
.set-pegboard .tool { fill: #6B7682; stroke: var(--aubergine); stroke-width: 1.5; }
.set-pegboard .wood { fill: #8A6A42; stroke: var(--aubergine); stroke-width: 1.3; }
.set-pegboard .grip { fill: #3E3A44; stroke: var(--aubergine); stroke-width: 1.2; }
.set-pegboard .outline { fill: none; stroke: #1d1d1d; stroke-width: 1.4; stroke-dasharray: 3 2; }

/* Its lettering is sized to the note (13% of its width), so HYPOTHESIS: never breaks. */
.set-sticky {
  left: 13%; top: 10%; width: 22%; aspect-ratio: 1; padding: 4px; display: grid; place-items: center; text-align: center;
  background: #9FD8F0 var(--grain); box-shadow: 2px 3px 0 rgba(29,10,57,.25); transform: rotate(4deg);
  font-family: var(--f-marker); font-size: .5rem; line-height: 1.15; text-transform: uppercase; color: #20222c;
  container-type: inline-size;
}
@supports (font-size: 1cqi) { .set-sticky > span { font-size: 13cqi; } }

/* Li's heat ladder, in Sharpie on masking tape: height scales with heat. The
   rungs are in order, not to scale. The jalapeño rung is circled while he is up. */
.set-ladder { right: 2.5%; top: 9%; bottom: 21%; width: 24%; z-index: 1; }
.ladder-tape { position: absolute; right: 0; top: 0; bottom: 0; width: clamp(12px, 2.4%, 17px); min-width: 12px; background: var(--tape) var(--grain); box-shadow: 1px 1px 0 rgba(29,10,57,.18); }
.ladder-tape::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 26%; width: 2px; margin-left: -1px; background: #20222c; }
.ladder-tape::after { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 9px; margin-left: -5px; background: #20222c; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ladder-word { position: absolute; left: 0; right: 0; bottom: 3px; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; font-family: var(--f-marker); font-size: clamp(.5rem, .42rem + .3vw, .66rem); line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--hed-red); white-space: nowrap; }
.rung {
  position: absolute; right: calc(clamp(12px, 2.4%, 17px) + 7px); transform: translateY(-50%) rotate(-2deg);
  padding: 2px 6px 1px; background: #FFFDF6 var(--grain); box-shadow: 1px 2px 0 rgba(29,10,57,.25);
  font-family: var(--f-marker); font-size: clamp(.56rem, .46rem + .34vw, .74rem); line-height: 1.12; text-transform: uppercase; color: #20222c; white-space: nowrap; text-align: right;
}
.rung::after { content: ""; position: absolute; right: -8px; top: 50%; width: 8px; height: 2px; background: #20222c; }
.rung-jal { top: 5%; }
.rung-hot { top: 48%; transform: translateY(-50%) rotate(1.5deg); }
.rung-mild { top: 86%; }
.rung-jal::before { content: ""; position: absolute; inset: -7px -9px; border: 3px solid var(--hed-red); border-radius: 50%; transform: rotate(-5deg); opacity: 0; }
.lab[data-aloft] .rung-jal::before { opacity: 1; animation: lab-circle .5s steps(3, end) both; }
@keyframes lab-circle { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (min-width: 600px) {
  .set-chart { display: block; }
  .set-pegboard { left: 62%; top: 15%; width: 18%; height: 50%; }
  .set-sticky { left: 59%; top: 53%; width: 13%; transform: rotate(-5deg); }
  .set-ladder { width: 17%; }
}

/* The bench top Zog stands on; the apron with the food buttons continues it below. */
.set-benchtop { left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(var(--wood-top), #94704A 70%, var(--wood) 100%); z-index: 1; }
.set-benchtop::before { content: ""; position: absolute; inset: 0; background: var(--grain); }
.set-benchtop::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(29,10,57,.35); }
.set-shadow { left: 50%; top: 88%; height: 3.6%; aspect-ratio: 5.5; transform: translate(-50%, -50%); background: rgba(29,10,57,.28); border-radius: 50%; z-index: 2; transition: transform 2.4s steps(8, end), opacity 2.4s steps(8, end); }
.lab[data-aloft] .set-shadow { transform: translate(-50%, -50%) scale(.5, .6); opacity: .45; }
.lab[data-invisible] .set-shadow { opacity: .15; }

/* Things on the bench that sugar walks off it (lab.js steps them). */
.set-prop { z-index: 2; transform: translate(var(--wx, 0px), var(--wy, 0px)) rotate(calc(var(--r0, 0deg) + var(--wr, 0deg))); filter: drop-shadow(1px 2px 0 rgba(29,10,57,.35)); }
.set-prop svg { width: 100%; height: 100%; }
.prop-driver { height: 2.1%; aspect-ratio: 5; }
.prop-a { left: 11%; bottom: 7.5%; --r0: -7deg; }
.prop-b { left: 20%; bottom: 3.5%; --r0: 11deg; }
.prop-can { left: 73%; bottom: 6%; height: 6%; aspect-ratio: .6; }
.prop-driver .h { fill: #D9412B; stroke: var(--aubergine); stroke-width: 1.2; }
.prop-driver .h2 { fill: #F2C94C; stroke: var(--aubergine); stroke-width: 1.2; }
.prop-driver .s { fill: #8C96A0; stroke: var(--aubergine); stroke-width: .8; }
.prop-can .c { fill: #5E9F37; stroke: var(--aubergine); stroke-width: 1.4; }
.prop-can .t { fill: #B8BEC4; stroke: var(--aubergine); stroke-width: 1; }
.prop-can .w { fill: #2F5E1C; }
.prop-can .b { fill: #CFE8A8; }
.set-prop.is-gone { visibility: hidden; }
.lab[data-buzz] .set-prop:not(.is-gone) { animation: lab-rattle .14s steps(1, end) infinite; }

/* ---- Zog: seven sprites on one canvas, swapped in place ------------------- */
/* Canvas 430 x 621, anchor (213, 599). 66% of stage height puts the anchor on
   the bench top at 88%: top = 88% - 0.9646 x 66%. */
.zog {
  position: absolute; z-index: 3;
  height: 66%; aspect-ratio: 430 / 621;
  left: 50%; top: 24.3%;
  transform: translate(-50%, 0);
}
.zog.lift-rest { transform: translate(-50%, 16%); }   /* float sprite with its feet on the bench */
.zog.lift-up { transform: translate(-50%, -28.1%); }  /* cap against the rafter */
.zog.t-rise, .zog.t-drift { transition: transform 2.4s steps(8, end); }
.zog.t-drop { transition: transform .3s steps(3, end); }

.zog-body { position: absolute; inset: 0; }
.zog-body > * { position: absolute; }
.spr { inset: 0; width: 100%; height: 100%; display: none; }
.zog[data-sprite="idle"] .spr-idle,
.zog[data-sprite="float"] .spr-float,
.zog[data-sprite="invisible"] .spr-invisible,
.zog[data-sprite="tongue"] .spr-tongue,
.zog[data-sprite="taco"] .spr-taco,
.zog[data-sprite="vibrate"] .spr-vibrate-a,
.zog[data-sprite="vibrate"] .spr-vibrate-b { display: block; }
.spr-float { clip-path: inset(0 0 13% 0); } /* drop the floor shadow painted into the float frame */

/* Vibration: the two frames alternate at 16 fps; with motion off, frame A holds. */
.spr-vibrate-b { visibility: hidden; animation: lab-flick .125s steps(1, end) infinite; }
.zog.buzz-soft .spr-vibrate-b { animation-duration: .5s; }
@keyframes lab-flick { 0% { visibility: hidden; } 50% { visibility: visible; } }
/* Vibrating while floating or invisible: the whole body chatters. */
.zog.is-buzz .zog-body { animation: lab-jitter .12s steps(1, end) infinite; }
@keyframes lab-jitter { 0% { transform: translate(-1.2%, .4%); } 25% { transform: translate(1.1%, -.5%); } 50% { transform: translate(-.6%, -.3%); } 75% { transform: translate(1.3%, .5%); } }

/* Swallow: a two-step squash. */
.zog.gulp .zog-body { animation: lab-gulp .36s steps(3, end); transform-origin: 50% 96%; }
@keyframes lab-gulp { 0% { transform: scale(1, 1); } 40% { transform: scale(1.03, .95); } 70% { transform: scale(.98, 1.03); } 100% { transform: scale(1, 1); } }

/* Coming back from invisible: layer by layer, feet first. */
.zog.reassemble .spr-invisible { display: block; }
.zog.reassemble .spr-idle { display: block; animation: lab-layers 1.2s steps(4, end) both; }
@keyframes lab-layers { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Heavy dosing: pale, dim, shaky until morning. */
.zog.is-pale .spr { filter: saturate(.35) brightness(1.1) sepia(.18); }
.zog.is-pale .zog-stomach { opacity: .2 !important; }

/* The stomach window (translucent; the only thing on the bench that glows).
   Placed where the taco frame paints its own stomach: (52%, 78.8%) of the canvas. */
.zog-stomach {
  left: 52%; top: 78.8%; width: 22%; aspect-ratio: 1.45;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(closest-side, rgba(200, 255, 170, .95), rgba(var(--z), .55) 55%, rgba(var(--z), 0) 100%);
  opacity: 0;
  transition: opacity .8s ease, box-shadow .8s ease;
}
.zog-stomach img { width: 66%; height: 72%; object-fit: contain; opacity: .92; filter: drop-shadow(0 0 3px rgba(var(--z), .9)); }
.zog-stomach.is-fed { opacity: .6; }
.zog-stomach.is-hot { opacity: 1; box-shadow: 0 0 20px 8px rgba(var(--z), .5); animation: glow-pulse 1.6s ease-in-out infinite; }
.zog-stomach.is-hot img { animation: lab-churn 1s steps(2, end) infinite; }
@keyframes lab-churn { 0% { transform: rotate(-9deg) translateY(4%); } 50% { transform: rotate(8deg) translateY(-4%); } 100% { transform: rotate(-9deg) translateY(4%); } }
.zog[data-sprite="float"] .zog-stomach { top: 56%; left: 50%; }
/* A glass of milk, a spoon of peanut butter and a handful of puffs show as what they are in there. */
.zog-stomach[data-food="milk"] img, .zog-stomach[data-food="pb"] img, .zog-stomach[data-food="saturns"] img { display: none; }
.zog-stomach[data-food="milk"] { background: radial-gradient(closest-side, #FFFFFF 0 34%, rgba(var(--z), .6) 62%, rgba(var(--z), 0) 100%); }
.zog-stomach[data-food="pb"] { background: radial-gradient(closest-side, #9A6230 0 28%, rgba(var(--z), .6) 60%, rgba(var(--z), 0) 100%); }
.zog-stomach[data-food="saturns"] { background: radial-gradient(circle at 36% 46%, #F29A2E 0 9%, transparent 10%), radial-gradient(circle at 58% 60%, #E8762B 0 9%, transparent 10%), radial-gradient(circle at 60% 34%, #F2B04C 0 8%, transparent 9%), radial-gradient(closest-side, rgba(var(--z), .6), rgba(var(--z), .2) 64%, rgba(var(--z), 0) 100%); }
.zog[data-sprite="invisible"] .zog-stomach,
.zog[data-sprite="taco"] .zog-stomach,
.zog.reassemble .zog-stomach { opacity: 0 !important; animation: none; box-shadow: none; }
/* Glowing brighter before he lifts. */
.zog.is-charging .spr { filter: drop-shadow(0 0 10px rgba(var(--z), .7)); transition: filter .9s ease; }

/* Contentment aura (Cheddar Saturns): orange, behind him, tweened like all alien light. */
.zog-aura { left: 50%; top: 55%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--aura), .6), rgba(var(--aura), .22) 55%, rgba(var(--aura), 0) 100%); opacity: 0; transition: opacity 1.4s ease; }
.zog.is-content .zog-aura { opacity: 1; }
.zog[data-sprite="float"] .zog-aura { top: 40%; }

/* The glass he is holding stays visible while he is not. */
.zog-glass { left: 67%; top: 72%; width: 8.5%; aspect-ratio: .72; display: none; border: 2px solid rgba(29,10,57,.7); border-top-width: 1px; border-radius: 1px 1px 5px 5px; background: linear-gradient(to top, #FFFDF5 0 48%, rgba(255,255,255,.45) 48% 100%); transform: rotate(-7deg); }
.zog.has-glass .zog-glass { display: block; }

/* Soap-bubble pop at the onset of invisibility. */
.zog-pop { left: 50%; top: 52%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; border: 3px solid rgba(0,255,255,.8); box-shadow: 0 0 14px rgba(0,255,255,.5), inset 0 0 14px rgba(var(--z), .35); opacity: 0; pointer-events: none; }
.zog.popping .zog-pop { animation: lab-pop .42s steps(4, end); }
@keyframes lab-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }

/* ---- speech: Zog's bubble, the humans off-panel, sound-effect cutouts ----- */
.lab-bubble, .lab-aside {
  position: absolute; z-index: 5; margin: 0;
  color: var(--ink);
  font-family: var(--f-body); font-weight: 600; font-size: clamp(.76rem, .7rem + .28vw, .95rem); line-height: 1.3;
}
.lab-bubble {
  right: 2.5%; top: 8%; width: 38%;
  padding: .55em .75em .62em;
  background: #FFFDF6 var(--grain);
  border: 2px solid var(--aubergine); border-radius: 20px 16px 22px 14px;
  box-shadow: 3px 4px 0 rgba(29,10,57,.3);
}
.lab-bubble::before { content: "ZOG"; display: block; font-family: var(--f-form); font-weight: 700; font-size: .66rem; letter-spacing: .16em; color: var(--muted); margin-bottom: .1em; }
.lab-bubble::after { content: ""; position: absolute; left: -15px; bottom: 16px; width: 22px; height: 18px; background: #FFFDF6; border-left: 2px solid var(--aubergine); border-bottom: 2px solid var(--aubergine); clip-path: polygon(0 100%, 100% 0, 100% 100%); transform: skewY(-18deg); }
@media (min-width: 600px) { .lab-bubble { width: 36%; right: 3.5%; top: 10%; } }
/* When he is at the ceiling, the bubble drops below his arms. */
.lab[data-aloft] .lab-bubble { top: auto; bottom: 21%; }
.lab[data-aloft] .lab-bubble::after { bottom: auto; top: 10px; transform: skewY(18deg) scaleY(-1); }

/* Kevin, Li or Eddie, just out of frame: a flat paper caption with a tail
   pointing off the panel. */
.lab-aside {
  left: 2.5%; bottom: 20%; width: 37%; max-width: 280px;
  padding: .5em .7em .55em;
  background: var(--paper) var(--grain);
  border: 2px solid var(--aubergine);
  box-shadow: -3px 4px 0 rgba(29,10,57,.3);
  font-weight: 500;
}
.lab-aside::after { content: ""; position: absolute; left: -2px; bottom: -14px; width: 20px; height: 14px; background: var(--aubergine); clip-path: polygon(0 0, 100% 0, 0 100%); }
.lab-aside .who { display: block; font-family: var(--f-form); font-weight: 700; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hed-red); }
.lab-aside .who::after { content: " (off-panel)"; color: var(--muted); letter-spacing: .08em; font-weight: 400; }
@media (min-width: 600px) { .lab-aside { width: 34%; left: 3%; } }

.lab-bubble.pop-in, .lab-aside.pop-in { animation: lab-bubble-in .24s steps(2, end); }
@keyframes lab-bubble-in { 0% { transform: scale(.7) rotate(-3deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: none; } }

.lab-sfx {
  position: absolute; z-index: 6; left: 50%; top: 40%; margin: 0;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--f-display); font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.8rem); line-height: 1; text-transform: uppercase; letter-spacing: .02em;
  color: var(--pink); text-shadow: -3px 4px 0 var(--aubergine);
  background: var(--lime) var(--grain); padding: .08em .3em .02em;
  box-shadow: 3px 4px 0 rgba(29,10,57,.3);
  pointer-events: none;
}
.lab-sfx.pop-in { animation: lab-sfx-in .5s steps(3, end) both; }
@keyframes lab-sfx-in { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(.5); } 40% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.12); } 100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }

/* ---- readout strip -------------------------------------------------------- */
.lab-readout {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px clamp(12px, 2vw, 18px);
  background: var(--aubergine); color: var(--mint);
  font-family: var(--f-form);
  --focus: var(--lime);
}
.lab-state { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1 1 13rem; }
.lab-state .label { color: var(--lime); font-size: .74rem; }
.lab-state-v { font-weight: 700; font-size: .98rem; }
/* The lab clock: Li's cheap LCD stopwatch. Human hardware, so no glow. */
.lab-timers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; flex: 1 1 100%; order: 3; min-height: 30px; }
.lab-timers li.idle { background: none; border: 0; box-shadow: none; color: rgba(226,253,222,.6); padding: 4px 0 0; font-size: .84rem; }
.lab-timers li {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 3px 9px 2px;
  background: var(--lcd); color: var(--lcd-ink);
  border: 2px solid #0E0A16; border-radius: 5px;
  box-shadow: inset 0 2px 0 rgba(28,36,20,.22), 0 2px 0 rgba(255,255,255,.08);
  font-size: .84rem;
}
.lab-timers .k { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.lab-timers .v { font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; min-width: 3.3em; text-align: right; }
.lab-timers .x { color: #465236; font-size: .7rem; letter-spacing: .06em; }
@media (max-width: 599px) { .lab-timers .x .w { display: none; } }
.lab-tools { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lab-tools .btn { font-size: .98rem; padding: .5em .85em .44em; box-shadow: -3px 4px 0 var(--lime); }
.lab-tools .btn[aria-pressed="true"] { background: var(--lime); }

/* ---- the bench: the food buttons sit on its front ------------------------- */
.lab-bench {
  position: relative; margin-bottom: 30px;
  padding: 12px clamp(10px, 1.6vw, 16px) 14px;
  background: var(--grain), linear-gradient(var(--wood), #6c4f32);
  box-shadow: var(--shadow);
}
.lab-bench::before, .lab-bench::after { content: ""; position: absolute; bottom: -28px; width: 22px; height: 28px; background: var(--wood-dark) var(--grain); }
.lab-bench::before { left: 7%; }
.lab-bench::after { right: 7%; }
/* Phones get two rows of three so the labels can be read (12px and up); six
   in a row from 600px. Pictures sit on a shared line at the top of each
   button and the taped labels hang below them, however many lines they take. */
.lab-foods { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 600px) { .lab-foods { gap: 10px 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.food {
  width: 100%; min-height: 88px; margin: 0; padding: 4px 2px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
  background: none; border: 0; border-radius: 4px; color: var(--ink); cursor: pointer;
  font: inherit;
}
.food[disabled] { cursor: default; }
.food-pic { height: 48px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.food-pic img { max-height: 100%; max-width: 62%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(2px 3px 0 rgba(29,10,57,.4)); transition: transform .14s steps(2, end); }
.food-jalapeno .food-pic img { max-width: 58%; }
.food:not([disabled]):hover .food-pic img, .food:focus-visible .food-pic img { transform: translateY(-5px) rotate(-4deg); }
.food:not([disabled]):active .food-pic img { transform: translateY(1px) scale(.96); }
.food.is-gone .food-pic img { visibility: hidden; }
.food.restock .food-pic img { animation: lab-restock .3s steps(3, end); }
@keyframes lab-restock { 0% { transform: translateY(-40%); } 60% { transform: translateY(6%); } 100% { transform: none; } }
.food:focus-visible { outline: 4px solid var(--pink); outline-offset: 2px; }
/* Sugar at peak walks things off the bench: the foods and the pegboard rattle. */
.lab[data-buzz] .food-pic img, .lab[data-buzz] .set-pegboard svg { animation: lab-rattle .14s steps(1, end) infinite; }
@keyframes lab-rattle { 0% { translate: -1px 0; rotate: -1.5deg; } 50% { translate: 1px -1px; rotate: 1.5deg; } }

.food-tag {
  display: block; width: 100%; max-width: 11.5em; padding: 3px 4px 4px; text-align: center; line-height: 1.12;
  background: var(--tape) var(--grain); box-shadow: 0 1px 0 rgba(0,0,0,.18);
  transform: rotate(-1.5deg);
}
.lab-foods li:nth-child(even) .food-tag { transform: rotate(1.3deg); }
.food-name { display: block; font-family: var(--f-form); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.food-kind { display: block; font-family: var(--f-marker); font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
@media (min-width: 600px) {
  .food { min-height: 104px; padding: 6px 2px 4px; gap: 6px; }
  .food-pic { height: 62px; }
  .food-pic img { max-width: 78%; }
  .food-jalapeno .food-pic img { max-width: 70%; }
  .food-name { font-size: .78rem; letter-spacing: .06em; }
}
.food-pb .food-kind { color: var(--hed-red); }
.lab.is-pale .food[data-chart] .food-kind::after { content: " · suspended"; color: var(--hed-red); }

/* Food on its way to Zog: held poses, like cut paper shot on twos. */
.lab-flyer { position: absolute; z-index: 20; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(2px 3px 0 rgba(29,10,57,.4)); }

/* ---- Li's notebook (typed; graph paper) ---------------------------------- */
.lab-notebook {
  background: #FCFCF6;
  background-image: linear-gradient(var(--graph) 1px, transparent 1px), linear-gradient(90deg, var(--graph) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: var(--shadow-lift);
  font-family: var(--f-form); color: #1d1d1d;
  border-top: 14px solid var(--aubergine);
}
.nb-head { padding: 16px clamp(16px, 2.4vw, 22px) 10px; border-bottom: 2px solid rgba(29,10,57,.2); }
.nb-head .label { margin: 0 0 4px; color: var(--muted); }
.nb-head h2 { font-family: var(--f-form); font-weight: 700; font-size: 1.02rem; letter-spacing: .1em; margin: 0 0 6px; }
.nb-sub { font-size: .8rem; margin: 0; line-height: 1.4; }
.nb-scroll { padding: 0 clamp(16px, 2.4vw, 22px) 14px; }
.nb-scroll:focus-visible { outline-offset: -4px; }
.nb-log { list-style: none; margin: 0; padding: 0; }
.nb-entry { padding: 14px 0 12px; border-bottom: 2px dashed rgba(29,10,57,.25); font-size: .86rem; line-height: 1.45; }
.nb-entry:last-child { border-bottom: 0; }
.nb-entry.is-new { animation: lab-new 1.6s steps(4, end); }
@keyframes lab-new { 0% { background: rgba(179,243,92,.55); } 100% { background: rgba(179,243,92,0); } }
.nb-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .84rem; }
.nb-stamp { font-size: .62rem; padding: 1px 7px; border-width: 3px; letter-spacing: .1em; flex: none; }
.nb-entry dl { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.nb-entry dt { font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .22em; color: var(--muted); }
.nb-entry dd { margin: 0; overflow-wrap: anywhere; }
.nb-entry dd.q { font-weight: 700; }
.nb-entry dd.red, .nb-entry dt.red { color: var(--hed-red); font-weight: 700; }
.nb-entry.is-declined .nb-title { color: var(--hed-red); }

/* ---- Li's chart (the no-JavaScript reading of the whole lab) ------------- */
.lab-chart-wrap { padding-top: 24px; }
.lab-chart {
  background: #FBF8EF var(--grain);
  background-image: linear-gradient(transparent calc(1.7em - 1px), rgba(40,110,160,.14) calc(1.7em - 1px), rgba(40,110,160,.14) 1.7em), var(--grain);
  background-size: 100% 1.7em, auto;
  padding-top: clamp(28px, 4vw, 44px);
}
.lab-chart > .label { color: var(--muted); margin-bottom: 4px; }
.chart-h { font-family: var(--f-marker); text-transform: uppercase; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); line-height: 1.05; text-decoration: underline; text-decoration-color: var(--hed-red); text-decoration-thickness: 3px; text-underline-offset: 6px; margin-bottom: .6em; }
.chart-four { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.chart-four li { background: #FFFDF6; padding: 14px 16px 12px; box-shadow: 2px 3px 0 rgba(29,10,57,.2); }
.chart-four h3 { margin: 0 0 .35em; font-size: 1.5rem; }
.chart-four h3 span { display: block; font-family: var(--f-marker); font-size: .95rem; text-transform: uppercase; color: var(--muted); }
.chart-four p { font-size: .95rem; margin-bottom: .7em; }
.chart-four dl { font-family: var(--f-form); font-size: .82rem; display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; }
.chart-four dt { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; padding-top: .18em; }
.chart-four dd { margin: 0; }
.chart-red { color: var(--hed-red); font-family: var(--f-marker); text-transform: uppercase; }
.chart-four .chart-red { margin: .7em 0 0; font-size: 1rem; }
.chart-cols { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-bottom: 20px; }
.chart-sub { font-size: 1.35rem; margin-bottom: .5em; }
.chart-ladder { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; font-size: .95rem; }
.chart-ladder::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 6px; background: linear-gradient(to top, #F2C94C, #E8762B 50%, var(--hed-red)); border-radius: 3px; }
.chart-ladder li { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); padding: 5px 0; border-bottom: 1px dashed rgba(29,10,57,.2); }
.chart-ladder li span:first-child { font-weight: 700; }
.chart-ladder li.chart-red { font-family: var(--f-body); text-transform: none; }
.chart-rules, .chart-more { margin: 0; padding-left: 1.2em; font-size: .95rem; }
.chart-rules li, .chart-more li { margin-bottom: .45em; }
.chart-foot { margin: 22px 0 0; font-family: var(--f-form); font-size: .9rem; }

.lab-noscript { margin-top: 24px; }