/* Fraction Pizzeria: a warm, tactile math kitchen. */
* { box-sizing: border-box; }

:root {
  --font-display: ui-serif, "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --font-body: ui-rounded, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --radius-lg: 28px;
  --radius-md: 18px;
  --speed: 180ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f4e5ce;
  --paper-deep: #e2c89f;
  --card: rgba(255, 250, 239, 0.89);
  --card-solid: #fffaf0;
  --ink: #3b1c12;
  --ink-soft: #6f4634;
  --ink-faint: #9b6b55;
  --line: #e2c6a3;
  --line-strong: #4b2115;
  --tomato: #c74a2e;
  --tomato-dark: #9e3324;
  --accent-ink: #9e3324;
  --button-ink: #3b160d;
  --saffron: #efa93a;
  --saffron-light: #ffd678;
  --basil: #50744b;
  --cream: #fff1d0;
  --shadow: rgba(89, 46, 27, 0.18);
  --oven: #ba6842;
  --oven-deep: #7f3a27;
  --oven-glow: #f4a04b;
  --slice-off: #e7cba4;
  --slice-eaten: #efd8b7;
  --slice-eaten-edge: #bc8c63;
  --plate: #f5e6cf;
  --crumb: #b96238;
  --cheese-light: #ffe4a1;
  --cheese-mid: #efab3e;
  --cheese-deep: #d77b2f;
  --pepper: #a8322b;
  --pepper-off: #c88c78;
  --fact: #edf1dc;
  --fact-line: #a7ba83;
  --noise: rgba(89, 46, 27, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #21140f;
  --paper-deep: #351c13;
  --card: rgba(57, 30, 21, 0.94);
  --card-solid: #3a1f17;
  --ink: #fff7e8;
  --ink-soft: #f0cbb0;
  --ink-faint: #d29a7d;
  --line: #71442f;
  --line-strong: #120704;
  --tomato: #f26c4f;
  --tomato-dark: #ce4737;
  --accent-ink: #ff9b7e;
  --button-ink: #321208;
  --saffron: #ffc35b;
  --saffron-light: #ffe2a0;
  --basil: #91bd79;
  --cream: #4a2b1d;
  --shadow: rgba(0, 0, 0, 0.32);
  --oven: #8b432d;
  --oven-deep: #43180f;
  --oven-glow: #f89944;
  --slice-off: #8e6044;
  --slice-eaten: #704534;
  --slice-eaten-edge: #d29471;
  --plate: #4a2b1f;
  --crumb: #eba074;
  --cheese-light: #ffe09a;
  --cheese-mid: #ec9d3a;
  --cheese-deep: #bd5d29;
  --pepper: #dc5a47;
  --pepper-off: #a77565;
  --fact: #36412c;
  --fact-line: #748a5c;
  --noise: rgba(255, 232, 201, 0.05);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(900px 520px at 4% -12%, rgba(255, 248, 225, 0.76), transparent 68%),
    radial-gradient(780px 520px at 100% 12%, rgba(204, 112, 58, 0.19), transparent 65%),
    linear-gradient(135deg, var(--paper), var(--paper-deep));
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--speed), color var(--speed);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(90deg, transparent 49.5%, var(--noise) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, var(--noise) 50%, transparent 50.5%);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, .slice:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 4px;
}

.bar {
  display: grid;
  grid-template-columns: minmax(116px, 1fr) auto minmax(116px, 1fr);
  align-items: center;
  gap: 14px;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 18px clamp(16px, 3vw, 34px) 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 52%, transparent);
  border-radius: 999px;
  color: var(--ink);
  font: 800 13px/1 var(--font-body);
  text-decoration: none;
  background: color-mix(in srgb, var(--card-solid) 78%, transparent);
  box-shadow: 0 7px 16px var(--shadow), inset 0 1px rgba(255, 255, 255, 0.68);
  cursor: pointer;
  transition: transform var(--speed), box-shadow var(--speed), background-color var(--speed);
}

.pill:hover {
  transform: translateY(-2px);
  background: var(--card-solid);
  box-shadow: 0 11px 20px var(--shadow), inset 0 1px rgba(255, 255, 255, 0.7);
}

.pill:active { transform: translateY(1px) scale(0.98); }
.pill--back { justify-self: start; }
.pill--icon { width: 40px; padding: 8px; font-size: 16px; }
.bar__actions { display: flex; justify-self: end; gap: 8px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
  min-width: max-content;
}

.brand__seal {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--tomato) 0 12%, transparent 13%),
    radial-gradient(circle at 28% 30%, var(--tomato) 0 9%, transparent 10%),
    radial-gradient(circle at 73% 30%, var(--tomato) 0 9%, transparent 10%),
    radial-gradient(circle at 31% 73%, var(--tomato) 0 9%, transparent 10%),
    radial-gradient(circle at 70% 72%, var(--tomato) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 31%, var(--cheese-light), var(--cheese-mid));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--line-strong) 25%, transparent);
  transform: rotate(-12deg);
}

.brand__seal::before, .brand__seal::after {
  position: absolute;
  width: 140%;
  height: 1px;
  content: "";
  background: color-mix(in srgb, var(--tomato-dark) 70%, transparent);
}

.brand__seal::before { transform: rotate(20deg); }
.brand__seal::after { transform: rotate(-38deg); }
.brand__seal i {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--basil);
}

.brand__eyebrow, .section-kicker, .eyebrow {
  margin: 0;
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.brand h1 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
}

.atelier {
  position: relative;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 8px clamp(16px, 3vw, 34px) 34px;
}

.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 116px;
  margin: 0 0 18px;
  padding: 22px clamp(22px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 28%, transparent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 84% 28%, color-mix(in srgb, var(--saffron) 22%, transparent) 0 3px, transparent 3.5px),
    radial-gradient(circle at 92% 65%, color-mix(in srgb, var(--tomato) 19%, transparent) 0 5px, transparent 5.5px),
    linear-gradient(113deg, color-mix(in srgb, var(--card-solid) 92%, transparent), color-mix(in srgb, var(--cream) 60%, transparent));
  box-shadow: 0 16px 36px var(--shadow), inset 0 1px rgba(255, 255, 255, 0.62);
}

.intro::after {
  position: absolute;
  right: 22%;
  bottom: -76px;
  width: 168px;
  height: 168px;
  border: 21px solid color-mix(in srgb, var(--saffron) 15%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.intro__copy { position: relative; z-index: 1; max-width: 700px; }
.intro h2 {
  max-width: 600px;
  margin: 4px 0 5px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(27px, 4vw, 45px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.intro__lede {
  max-width: 680px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.chef-note {
  position: relative;
  z-index: 1;
  flex: 0 0 208px;
  padding: 12px 14px 11px 42px;
  border: 1px dashed color-mix(in srgb, var(--tomato-dark) 60%, transparent);
  border-radius: 13px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--card-solid) 66%, transparent);
  transform: rotate(1.5deg);
}

.chef-note::after {
  position: absolute;
  top: -7px;
  right: 32px;
  width: 37px;
  height: 14px;
  content: "";
  opacity: 0.75;
  background: color-mix(in srgb, var(--saffron-light) 75%, transparent);
  transform: rotate(-3deg);
}

.chef-note__star {
  position: absolute;
  top: 15px;
  left: 14px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: var(--button-ink);
  background: var(--saffron-light);
  font-size: 12px;
}

.chef-note p {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.chef-note small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.workbench {
  display: grid;
  grid-template-columns: minmax(250px, 0.94fr) minmax(350px, 1.25fr) minmax(245px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}

.panel {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 32%, transparent);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 18px 34px var(--shadow), inset 0 1px rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(8px);
}

.order-ticket {
  position: relative;
  padding: 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 20px, color-mix(in srgb, var(--tomato) 18%, transparent) 20px 21px, transparent 21px),
    repeating-linear-gradient(to bottom, transparent 0 29px, color-mix(in srgb, var(--line) 40%, transparent) 29px 30px),
    var(--card-solid);
}

.order-ticket::after {
  position: absolute;
  top: 62%;
  right: -25px;
  width: 104px;
  height: 104px;
  border: 15px solid color-mix(in srgb, var(--saffron) 9%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.ticket-head, .section-head, .tasting-card__head, .measure__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ticket-head h2, .section-head h2, .tasting-card__head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
}

.ticket-head__mark {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--saffron-light) 47%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.68);
  font-size: 21px;
  transform: rotate(10deg);
}

.ticket-rule {
  width: 100%;
  height: 1px;
  margin: 16px 0 7px;
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px);
}

.frac-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 34px);
  padding: 10px 0 13px;
}

.frac {
  display: flex;
  min-width: 86px;
  flex-direction: column;
  align-items: center;
  color: var(--tomato);
  font-family: var(--font-display);
  font-size: clamp(56px, 5.2vw, 69px);
  font-weight: 800;
  line-height: 0.9;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
}

.frac__line {
  width: 74px;
  height: 4px;
  margin: 8px 0;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--saffron) 40%, transparent);
}

.conversions {
  display: grid;
  gap: 9px;
  min-width: 104px;
}

.conversions p {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.conversions b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ticket-prompt {
  margin: 1px 0 13px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.stepper-stack { display: grid; gap: 10px; }
.stepper {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 95%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--card-solid) 70%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.52);
}

.stepper__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.stepper__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5);
}

.stepper__dot--tomato { background: var(--tomato); }
.stepper__dot--basil { background: var(--basil); }

.stepper__ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stepper__ctl output {
  min-width: 30px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.stepper__ctl button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line-strong) 50%, transparent);
  border-radius: 11px;
  color: var(--button-ink);
  background: linear-gradient(145deg, var(--saffron-light), var(--saffron));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tomato-dark) 45%, transparent), inset 0 1px rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font: 900 22px/1 var(--font-body);
  transition: transform 130ms, box-shadow 130ms, filter 130ms;
}

.stepper__ctl button:hover {
  filter: saturate(1.1) brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--tomato-dark) 45%, transparent), inset 0 1px rgba(255, 255, 255, 0.7);
}

.stepper__ctl button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tomato-dark) 45%, transparent), inset 0 1px rgba(255, 255, 255, 0.7);
}

.dice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 43px;
  margin: 13px 0;
  border: 1px solid color-mix(in srgb, var(--tomato-dark) 70%, transparent);
  border-radius: 14px;
  color: #fff9ed;
  background: linear-gradient(112deg, var(--tomato-dark), var(--tomato));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--tomato-dark) 68%, transparent), inset 0 1px rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font: 800 14px/1 var(--font-body);
  transition: transform 140ms, box-shadow 140ms, filter 140ms;
}

.dice:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--tomato-dark) 68%, transparent), inset 0 1px rgba(255, 255, 255, 0.25);
}

.dice:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--tomato-dark) 68%, transparent); }
.dice__icon { color: var(--saffron-light); font-size: 15px; }
.dice__die { margin-left: auto; color: color-mix(in srgb, #fff9ed 60%, transparent); font-size: 18px; }

.fact {
  position: relative;
  z-index: 1;
  min-height: 67px;
  padding: 9px 12px;
  border: 1px dashed var(--fact-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fact) 82%, transparent);
}

.fact p {
  margin: 3px 0;
  color: color-mix(in srgb, var(--basil) 92%, var(--ink));
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
}

.pizza-stage {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--saffron) 15%, transparent), transparent 43%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-solid) 80%, transparent), color-mix(in srgb, var(--cream) 66%, transparent));
}

.section-head { align-items: center; }
.section-head h2 { font-size: 27px; }
.pizza-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 170px;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.pizza-tip span:first-child {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  place-items: center;
  border-radius: 50%;
  color: var(--button-ink);
  background: var(--saffron-light);
  font-size: 14px;
}

.pizza-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.pizza-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pizza-legend__swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.pizza-legend__swatch--eaten {
  border: 1px dashed var(--slice-eaten-edge);
  background:
    radial-gradient(circle at 35% 65%, var(--crumb) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 62% 36%, var(--crumb) 0 1.2px, transparent 1.5px),
    var(--slice-eaten);
}

.pizza-legend__swatch--left {
  border: 1px solid color-mix(in srgb, var(--tomato-dark) 70%, transparent);
  background:
    radial-gradient(circle at 34% 33%, var(--pepper) 0 2px, transparent 2.3px),
    radial-gradient(circle at 66% 61%, var(--pepper) 0 2px, transparent 2.3px),
    linear-gradient(145deg, var(--cheese-light), var(--cheese-mid));
}

.oven {
  position: relative;
  display: grid;
  width: min(100%, 392px);
  aspect-ratio: 1;
  margin: auto;
  place-items: center;
  border: 9px solid var(--oven);
  border-radius: 48% 48% 44% 44% / 43% 43% 55% 55%;
  background:
    radial-gradient(ellipse at 50% 59%, var(--oven-glow), var(--oven-deep) 68%, color-mix(in srgb, var(--oven-deep) 85%, black) 100%);
  box-shadow:
    0 21px 26px color-mix(in srgb, var(--shadow) 70%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--saffron) 30%, transparent),
    inset 0 -17px 24px color-mix(in srgb, black 25%, transparent);
}

.oven::before {
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--saffron-light) 58%, transparent);
  border-radius: inherit;
  content: "";
  opacity: 0.85;
  pointer-events: none;
}

.oven::after {
  position: absolute;
  bottom: -22px;
  left: 50%;
  width: 69%;
  height: 19px;
  border-radius: 50%;
  content: "";
  background: rgba(44, 20, 12, 0.25);
  filter: blur(8px);
  transform: translateX(-50%);
}

.oven__inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: 84%;
  height: 84%;
  place-items: center;
  border: 8px solid color-mix(in srgb, var(--oven-deep) 74%, black);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--oven-glow) 92%, #fff) 0 20%, transparent 62%),
    color-mix(in srgb, var(--oven-deep) 80%, black);
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.25), 0 3px 0 color-mix(in srgb, var(--saffron) 25%, transparent);
}

.oven__heat {
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--saffron-light);
  box-shadow: 0 0 13px var(--saffron-light);
  animation: flicker 1.9s ease-in-out infinite alternate;
}

.oven__heat--one { top: 16%; left: 20%; }
.oven__heat--two { right: 18%; bottom: 22%; animation-delay: -0.8s; }

@keyframes flicker {
  from { opacity: 0.43; transform: scale(0.7); }
  to { opacity: 0.94; transform: scale(1.12); }
}

#pizza {
  width: min(100%, 320px);
  overflow: visible;
  filter: drop-shadow(0 9px 6px rgba(45, 16, 6, 0.42));
}

#pizza .pizza-shadow { fill: rgba(61, 27, 15, 0.35); }
#pizza .pizza-base { fill: var(--plate); }
#pizza .sauce-stop--light { stop-color: var(--tomato); }
#pizza .sauce-stop--mid { stop-color: var(--tomato-dark); }
#pizza .sauce-stop--deep { stop-color: #762518; }
#pizza .cheese-stop--light { stop-color: var(--cheese-light); }
#pizza .cheese-stop--mid { stop-color: var(--cheese-mid); }
#pizza .cheese-stop--deep { stop-color: var(--cheese-deep); }
#pizza .crust-stop--light { stop-color: #f2bb62; }
#pizza .crust-stop--mid { stop-color: #ca762e; }
#pizza .crust-stop--deep { stop-color: #8e3e20; }
#pizza .slice {
  cursor: pointer;
  outline: none;
  stroke: color-mix(in srgb, var(--tomato-dark) 72%, #563015);
  stroke-width: 2.3;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 200ms, filter 160ms, transform 160ms;
}

#pizza .slice.eaten {
  fill: var(--slice-eaten);
  stroke: var(--slice-eaten-edge);
  stroke-dasharray: 3 1.6;
}
#pizza .slice.left {
  fill: url(#pizza-cheese);
  stroke: color-mix(in srgb, var(--tomato-dark) 72%, #563015);
}
#pizza .slice:hover, #pizza .slice:focus { filter: brightness(1.1) saturate(1.08); transform: scale(1.035); }
#pizza .crust-ring { fill: none; stroke: url(#pizza-crust); stroke-width: 13; pointer-events: none; }
#pizza .crust-highlight { fill: none; stroke: rgba(255, 227, 154, 0.48); stroke-width: 2; pointer-events: none; }
#pizza .pepper { pointer-events: none; stroke: color-mix(in srgb, var(--tomato-dark) 72%, #4a1c13); stroke-width: 1.3; }
#pizza .pepper--eaten { fill: var(--pepper); }
#pizza .pepper--left { fill: var(--pepper); }
#pizza .basil { fill: var(--basil); opacity: 0.9; pointer-events: none; }
#pizza .crumb {
  fill: var(--crumb);
  opacity: 0.9;
  pointer-events: none;
}
#pizza.is-changing .slice { animation: slice-arrive 460ms both cubic-bezier(0.22, 1.35, 0.46, 1); animation-delay: calc(var(--slice-index) * 22ms); }

@keyframes slice-arrive {
  0% { opacity: 0.35; transform: scale(0.84) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.caption {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.tasting-card {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  padding: 22px;
}

.tasting-card__head h2 { font-size: 24px; }
.tasting-card__stamp {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--basil) 35%, transparent);
  border-radius: 50%;
  color: var(--basil);
  background: color-mix(in srgb, var(--fact) 70%, transparent);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  transform: rotate(-7deg);
}

.measure { margin-top: 21px; }
.measure__head { align-items: baseline; }
.measure h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
}

.measure__head span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--button-ink);
  background: color-mix(in srgb, var(--saffron-light) 55%, transparent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

.measure p {
  min-height: 34px;
  margin: 5px 0 11px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}

.bar-chart {
  display: flex;
  gap: 3px;
  height: 62px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 31%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  box-shadow: inset 0 2px 5px rgba(84, 40, 21, 0.1);
}

.bar-chart span {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tomato-dark) 45%, transparent);
  border-radius: 5px;
  background: linear-gradient(145deg, #a8613d, #5d291b);
  box-shadow: inset 0 1px rgba(255, 219, 166, 0.28), 0 2px 4px rgba(79, 33, 17, 0.18);
  transition: background-color 220ms, transform 220ms, box-shadow 220ms;
}

.bar-chart span::before, .bar-chart span::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.bar-chart span::before {
  inset: 9px 5px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.bar-chart span::after {
  top: 4px;
  left: 50%;
  width: 1px;
  height: calc(100% - 8px);
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  transform: translateX(-50%);
}

.bar-chart span.on {
  border-style: dashed;
  background:
    radial-gradient(circle at 30% 35%, var(--crumb) 0 2px, transparent 2.4px),
    radial-gradient(circle at 68% 63%, var(--crumb) 0 1.5px, transparent 1.9px),
    var(--slice-eaten);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.38);
}

.bar-chart span.on::before, .bar-chart span.on::after {
  opacity: 0;
}

.measure-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 2px;
  color: var(--saffron);
}

.measure-divider::before, .measure-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 9px);
}

.measure-divider span { font-size: 11px; }

.numline { padding: 22px 5px 0; }
.numline__track {
  position: relative;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  box-shadow: inset 0 2px 4px rgba(79, 33, 17, 0.1);
}

.numline__track::before {
  position: absolute;
  z-index: 2;
  top: -5px;
  bottom: -5px;
  left: 50%;
  width: 1px;
  content: "";
  background: color-mix(in srgb, var(--ink-soft) 52%, transparent);
}

.numline__fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--saffron), var(--tomato));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.52);
  transition: width 350ms cubic-bezier(0.34, 1.32, 0.64, 1);
}

.numline__marker {
  position: absolute;
  z-index: 3;
  top: -31px;
  left: 0;
  transform: translateX(-50%);
  transition: left 350ms cubic-bezier(0.34, 1.32, 0.64, 1), transform 350ms cubic-bezier(0.34, 1.32, 0.64, 1);
}

.numline__marker.is-start { transform: translateX(0); }
.numline__marker.is-end { transform: translateX(-100%); }

.numline__marker span {
  display: block;
  min-width: 38px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--tomato-dark) 52%, transparent);
  border-radius: 8px;
  color: #fff9ed;
  background: var(--tomato);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tomato-dark) 45%, transparent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.numline__marker::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid color-mix(in srgb, var(--tomato-dark) 52%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--tomato-dark) 52%, transparent);
  content: "";
  background: var(--tomato);
  transform: translate(-50%, -4px) rotate(45deg);
}

.numline__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .workbench {
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  }

  .tasting-card {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .tasting-card {
    display: grid;
    grid-template-columns: 0.72fr 1fr 0.08fr 1fr;
    align-items: center;
    gap: 18px;
  }

  .tasting-card__head { display: block; }
  .tasting-card__stamp { margin-top: 12px; }
  .measure { margin-top: 0; }
  .measure-divider { margin: 0; }
  .measure-divider::before, .measure-divider::after { display: none; }
  .measure-divider span { font-size: 17px; }
}

@media (max-width: 720px) {
  .bar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 13px 14px 8px;
  }

  .pill { min-height: 36px; padding: 8px 11px; font-size: 12px; }
  .pill--icon { width: 36px; padding: 7px; }
  .brand { gap: 7px; }
  .brand__seal { width: 32px; height: 32px; border-width: 1.5px; }
  .brand__eyebrow { font-size: 8px; }
  .brand h1 { font-size: 18px; }
  .bar__actions { gap: 5px; }
  .atelier { padding: 6px 14px 24px; }

  .intro {
    align-items: flex-start;
    min-height: 0;
    margin-bottom: 14px;
    padding: 20px;
  }

  .intro::after { right: -31px; bottom: -100px; }
  .intro h2 { font-size: 30px; }
  .chef-note { display: none; }

  .workbench { grid-template-columns: 1fr; gap: 14px; }
  .pizza-stage, .order-ticket { min-height: auto; padding: 19px; }
  .pizza-stage { order: -1; }
  .oven { width: min(100%, 345px); }
  .tasting-card {
    display: block;
    min-height: 0;
    padding: 19px;
  }
  .tasting-card__stamp { margin-top: 0; }
  .measure { margin-top: 19px; }
  .measure-divider { margin: 23px 0 2px; }
  .measure-divider::before, .measure-divider::after { display: block; }
  .measure-divider span { font-size: 11px; }
}

@media (max-width: 420px) {
  .pill--back { width: 36px; padding: 8px; font-size: 0; }
  .pill--back span:first-child { font-size: 18px; }
  .brand__eyebrow { display: none; }
  .intro h2 { font-size: 28px; }
  .frac-display { gap: 18px; }
  .frac { min-width: 72px; font-size: 55px; }
  .conversions { min-width: 95px; }
  .conversions b { font-size: 21px; }
  .section-head { align-items: flex-start; }
  .pizza-tip { max-width: 130px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}