:root {
  --border-box: border-box;
  --smooth: smooth;
  --background-page: #f6f8fb;
  --system-sans: system-ui, sans-serif;
  --normal: normal;
  --color-primary: #111827;
  --zero: 0;
  --radial-gradient: radial-gradient(
    circle at top left,
    var(--background-accent),
    transparent 34rem
  );
  --width: min(100% - 2rem, 92.5rem);
  --auto: auto;
  --one-rem: 1rem;
  --flex: flex;
  --border-accent: 1px solid rgb(16 185 129 / 0.28);
  --background-accent: rgb(16 185 129 / 0.14);
  --color-accent: #059669;
  --center: center;
  --one-rem-zero: 1rem 0;
  --border-content: 1px solid #d8e0ea;
  --space-between: space-between;
  --fifth-zero-tenth: 0.2rem 0 0.1rem;
  --half-rem-zero: 0.5rem 0;
  --block: block;
  --hidden: hidden;
  --background-panel: #ffffff;
  --shadow: 0 1rem 3rem rgb(15 23 42 / 0.08);
  --pointer: pointer;
  --one-thousand: 1000;
  --linear-gradient: linear-gradient(
    90deg,
    rgb(16 185 129 / 0.07),
    transparent
  );
  --background-content: rgb(255 255 255 / 0.8);
  --two-rem: 2rem;
  --border-button: 1px solid rgb(100 116 139 / 0.25);
  --three-quarter-rem-one-rem: 0.75rem 1rem;
  --bold: bold;
  --background-button: #f0f3f7;
  --color-secondary: #64748b;
  --three-rem: 3rem;
  --zero-one-rem: 0 1rem;
  --one-half-rem: 1.5rem;
  --one: 1;
  --one-half-rem-zero: 1.5rem 0;
  --inline-flex: inline-flex;
  --transform-fifth-ease: transform 0.2s ease;
  --relative: relative;
  --translate-y-two: translateY(-2px);
  --default: default;
  --absolute: absolute;
  --translate-x-fifty: translateX(-50%);
  --sixteen-rem: 16rem;
  --opacity-fifth-ease: opacity 0.2s ease;
  --none: none;
  --fifty-percent: 50%;
  --half-rem-three-quarter-rem: 0.5rem 0.75rem;
  --grid: grid;
  --repeat-two: repeat(2, minmax(160px, 1fr));
  --three-quarter-rem: 0.75rem;
  --column: column;
  --half-rem-one-rem: 0.5rem 1rem;
  --repeat-four: repeat(4, minmax(160px, 1fr));
  --twenty-eight-rem: 28rem;
  --calc-hundred-tenth: calc(100% * 0.1);
  --scale-twelfth: scale(0.825);
  --calc-hundred-eleventh: calc(100% * 0.092);
  --calc-hundred-five-seventh: calc(100% / 5.15);
  --calc-hundred-five-fifth: calc(100% / 5.2);
  --one-one-zero: 1 1 0;
  --zero-zero-auto: 0 0 auto;
  --fit-content: fit-content;
  --visible: visible;
  --zero-percent: 0%;
  --negative-half-rem: -0.5rem;
  --inline-block: inline-block;
  --fifth-rem: 0.2rem;
  --color-calculate: #ffffff;
  --button-hover: #e2e4e7;
  --modal-shadow: 0 20px 40px rgb(0 0 0 / 0.2);
  --background-dialog: rgb(0 0 0 / 0.5);
  --fixed: fixed;
  --one-quarter-rem: 1.25rem;
  --quarter-rem: 0.25rem;
  --half-rem: 0.5rem;
  --hundred-percent: 100%;
  --two-half-rem: 2.5rem;
  --three-half-rem: 3.5rem;
  --four-rem: 4rem;
  --one-four-fifths-rem: 1.8rem;
  --thirty-five-percent: 35%;
  --sixty-five-percent: 65%;
  --clamp: clamp(95.645%, 100%, 100%);
  --flex-start: flex-start;
  --four-half-rem: 4.5rem;
  --shadow-calculate:
    0 16px 34px rgb(16 185 129 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.06) inset;
  --transition-calculate:
    transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  --shadow-hover:
    0 20px 42px rgb(16 185 129 / 0.38), 0 0 0 1px rgb(255 255 255 / 0.08) inset;
  --background-hover: #07c589;
  --color-remove: #991b1b;
  --background-remove: rgb(239 68 68 / 0.14);
  --remove-hover: rgb(239 68 68 / 0.2);
  --border-remove: 1px solid rgb(239 68 68 /0.28);
  --accent-hover: rgb(5 150 104 / 0.28);
  --seven-rem: 7rem;
  --one-one-eighth-rem: 1.125rem;
  --seven-eighths-rem: 0.875rem;
  --background-quiz:
    radial-gradient(
      circle at top right,
      rgb(16 185 129 / 0.16),
      transparent 35%
    ),
    var(--background-content);
  --min-ninety-two-thirty-six: min(92vw, 36rem);
  --thirty-rem: 30rem;
  --one-half: 1.5;
  --nine-nine-nine: 999px;
  --width-half-ease: width 0.5s ease;
  --thirteen-twentieths-rem: 0.65rem;
  --eight-hundred: 800;
  --nine-tenths-rem: 0.9rem;
  --scale-one-one-fifth: scale(1.2);
  --seventeen-twentieths-rem-one-rem: 0.85rem 1rem;
  --one-seven-twentieths: 1.35;
  --scale-thirty-seven-fortieths: scale(0.925);
  --repeat-three-one-fr: repeat(3, 1fr);
  --one-fr-: 1fr;
  --scale-thirty-three-fortieths: scale(0.825);
  --one-fr-one-fr: 1fr 1fr;
  --letter: letter;
  --one-in: 1in;
  --ninety-two-half-rem: 92.5rem;
  --exact: exact;
  --top-left: top left;
  --static: static;
  --avoid: avoid;
  --page: page;
  --always: always;
  --repeat-four-one-fr: repeat(4, 1fr);
  --auto-one-fr: auto 1fr;
  --nowrap: nowrap;
  --panel-enter: panel-enter 260ms ease-out both;
  --transform-one-sixty-ms: transform 160ms ease;
  --blur-four: blur(4px);
  --width-two-eighty-ms: width 280ms ease;
  --shake-three-twenty-ms: shake 320ms ease;
  --translate-y-eight: translateY(8px);
  --translate-y-zero: translateY(0);
  --translate-y-ten-scale: translateY(10px) scale(0.985);
  --translate-y-zero-scale: translateY(0) scale(1);
  --translate-x-zero: translateX(0);
  --translate-x-negative-six: translateX(-6px);
  --translate-x-six: translateX(6px);
  --forty-five-percent: 45%;
  --fifty-five-percent: 55%;
  --background-graph: #eef1f5;
  --light: light;
  --dark: dark;
  --var-half-rem-var-two-rem-var-one-half-rem: var(--half-rem) var(--two-rem)
    var(--one-half-rem);
  --translatey-quarter-rem: translateY(-0.25rem);
  --var-zero-var-one-rem: var(--zero) var(--one-rem);
  --one-px-solid-transparent: 1px solid transparent;
  --opacity-one-hundred-eighty-ms-ease-transform-one-hundred-eig-7fdd52bf:
    opacity 180ms ease, transform 180ms ease, max-height 180ms ease,
    margin 180ms ease, padding 180ms ease, border-color 180ms ease;
  --twelve-rem: 12rem;
  --var-two-half-rem-var-two-rem: var(--two-half-rem) var(--two-rem);
  --three-quarter-rem-half-rem: 0.75rem 0.5rem;
  --calc-one-hundred-percent-plus-var-half-rem: calc(100% + var(--half-rem));
  --value: "";
  --zero-zero-one-fifth-rem: 0 0 0.2rem;
  --zero-point-seven-two-rem: 0.72rem;
  --nine-hundred: 900;
  --zero-point-one-two-em: 0.12em;
  --uppercase: uppercase;
  --one-point-five-rem-quarter-rem-quarter-rem: 1.5rem 0.25rem 0.25rem;
  --auto-minmax-zero-one-fr-auto: auto minmax(0, 1fr) auto;
  --one-rem-quarter-rem: 1rem 0.25rem;
  --transparent: transparent;
  --two-point-eight-rem: 2.8rem;
  --four-fifths-rem: 0.8rem;
  --one-point-four-five-rem: 1.45rem;
  --currentcolor: currentColor;
  --baseline: baseline;
  --wrap: wrap;
  --zero-point-eight-two-rem: 0.82rem;
  --zero-point-three-five-rem-one-rem: 0.35rem 1rem;
  --zero-point-four-five-rem: 0.45rem;
  --five-point-two-five-rem: 5.25rem;
  --blur-zero-point-two-eight-rem: blur(0.28rem);
  --two-point-two-five-rem: 2.25rem;
  --repeat-four-minmax-zero-one-fr: repeat(4, minmax(0, 1fr));
  --one-point-seven-five-rem: 1.75rem;
  --min-twenty-four-rem-seventy-eight-vw: min(24rem, 78vw);
  --seventy-vh: 70vh;
  --min-ninety-six-vw-thirty-six-rem: min(96vw, 36rem);
  --three-rem-four-point-five-rem: 3rem 4.5rem;
  --dialog-enter-two-hundred-twenty-ms-ease-both: dialog-enter 220ms ease both;
  --fifty-four-rem: 54rem;
  --one-tenth-rem: 0.1rem;
  --inline-grid: inline-grid;
  --one-point-two-em: 1.2em;
  --zero-zero-point-one-two-em: 0 0.12em;
  --minus-one: -1;
  --zero-point-two-eight: 0.28;
  --hex-2563eb: #2563eb;
  --hex-10b981: #10b981;
  --hex-f59e0b: #f59e0b;
  --min-ninety-four-vw-sixty-eight-rem: min(94vw, 68rem);
  --sixty-eight-rem: 68rem;
  --calc-one-hundred-dvh-minus-two-rem: calc(100dvh - 2rem);
  --clamp-zero-point-nine-three-seven-five-rem-zero-point-eight-110275f3: clamp(
    0.9375rem,
    0.88rem + 0.22vw,
    1.0625rem
  );
  --repeat-two-minmax-zero-one-fr: repeat(2, minmax(0, 1fr));
  --zero-point-nine-three-seven-five-rem: 0.9375rem;
  --min-ninety-four-vw-fifty-two-rem: min(94vw, 52rem);
  --auto-minmax-zero-one-fr: auto minmax(0, 1fr);
  --one-slash-minus-one: 1 / -1;
  --min-ninety-four-vw-forty-four-rem: min(94vw, 44rem);
  --min-ninety-four-vw-thirty-six-rem: min(94vw, 36rem);
  --stretch: stretch;
  --column-reverse: column-reverse;
  --left: left;
  --two-fifths-rem-three-quarter-rem: 0.4rem 0.75rem;
  --inherit: inherit;
  --minmax-zero-one-fr-minmax-zero-one-fr-auto: minmax(0, 1fr) minmax(0, 1fr)
    auto;
  --end: end;
  --eight-rem: 8rem;
  --one-rem-one-point-two-five-rem: 1rem 1.25rem;
  --minmax-eight-rem-one-fr-minmax-seven-rem-one-fr-auto-auto: minmax(8rem, 1fr)
    minmax(7rem, 1fr) auto auto;
  --seven-hundred: 700;
  --zero-zero-one-rem: 0 0 1rem;
  --one-px-solid-color-mix-in-srgb-hex-d4a017-fifty-five-percent-transparent: 1px
    solid color-mix(in srgb, #d4a017 55%, transparent);
  --color-mix-in-srgb-hex-f6c344-sixteen-percent-var-background-content: color-mix(
    in srgb,
    #f6c344 16%,
    var(--background-content)
  );
  --one-point-four-five: 1.45;
  --translatey-one-fifth-rem: translateY(-0.2rem);
  --opacity-one-hundred-eighty-ms-ease-transform-one-hundred-eighty-ms-ease:
    opacity 180ms ease, transform 180ms ease;
  --zero-point-six-two-rem-zero-point-eight-five-rem: 0.62rem 0.85rem;
  --zero-point-five-five-rem: 0.55rem;
  --zero-point-eight-four-em: 0.84em;
  --zero-point-seven-eight: 0.78;
  --underline: underline;
  --zero-point-one-six-em: 0.16em;
  --color-mix-in-srgb-hex-f6c344-seventy-two-percent-transparent: color-mix(
    in srgb,
    #f6c344 72%,
    transparent
  );
  --color-mix-in-srgb-hex-f6c344-twenty-four-percent-var-background-content: color-mix(
    in srgb,
    #f6c344 24%,
    var(--background-content)
  );
  --one-px-solid-color-mix-in-srgb-hex-22a06b-fifty-five-percent-transparent: 1px
    solid color-mix(in srgb, #22a06b 55%, transparent);
  --color-mix-in-srgb-hex-34d399-seventeen-percent-var-background-content: color-mix(
    in srgb,
    #34d399 17%,
    var(--background-content)
  );
  --color-mix-in-srgb-hex-34d399-forty-eight-percent-transparent: color-mix(
    in srgb,
    #34d399 48%,
    transparent
  );
  --color-mix-in-srgb-hex-34d399-fifteen-percent-var-background-content: color-mix(
    in srgb,
    #34d399 15%,
    var(--background-content)
  );
  --zero-point-three-five-rem: 0.35rem;
  --zero-point-seven-rem: 0.7rem;
  --three-tenths-rem: 0.3rem;
  --one-point-zero-five-rem: 1.05rem;
  --four-hundred: 400;
  --one-rem-zero-zero: 1rem 0 0;
  --clamp-zero-point-eight-one-two-five-rem-zero-point-seven-two-2e9f6cc1: clamp(
    0.8125rem,
    0.72rem + 0.45vw,
    0.9375rem
  );
  --zero-point-seven-rem-four-fifths-rem: 0.7rem 0.8rem;
  --repeat-three-minmax-zero-one-fr: repeat(3, minmax(0, 1fr));
  --two-fifths-rem: 0.4rem;
  --zero-point-seven-rem-zero-point-four-five-rem: 0.7rem 0.45rem;
  --zero-point-nine-rem-one-rem: 0.9rem 1rem;
  --min-seventy-four-vw-fifteen-rem: min(74vw, 15rem);
  --zero-point-eight-five-rem: 0.85rem;
  --x-mandatory: x mandatory;
  --clamp-one-point-five-five-rem-seven-vw-two-point-one-rem: clamp(
    1.55rem,
    7vw,
    2.1rem
  );
  --two-point-four-rem: 2.4rem;
  --zero-point-three-five-rem-zero-point-six-five-rem: 0.35rem 0.65rem;
  --zero-point-seven-eight-rem: 0.78rem;
  --calc-one-hundred-vw-minus-one-rem: calc(100vw - 1rem);
  --calc-one-hundred-dvh-minus-one-rem: calc(100dvh - 1rem);
  --three-fifths-rem: 0.6rem;
  --calc-one-hundred-vw-minus-one-point-five-rem: calc(100vw - 1.5rem);
  --two-rem-one-point-two-five-rem: 2rem 1.25rem;
  --calc-one-hundred-percent-slash-six: calc(100% / 6);
  --eighteen-rem: 18rem;
  --five-rem: 5rem;
  --zero-point-five-two: 0.52;
  --zero-one-auto: 0 1 auto;
  --right: right;
  --touch: touch;
  --row: row;
  --min-calc-one-hundred-vw-minus-one-rem-thirty-two-rem: min(
    calc(100vw - 1rem),
    32rem
  );
  --two-rem-one-rem: 2rem 1rem;
  --clamp-zero-point-seven-four-rem-three-point-two-vw-zero-poin-097d0ec1: clamp(
    0.74rem,
    3.2vw,
    0.95rem
  );
  --zero-point-five-eight-rem-zero-point-six-eight-rem: 0.58rem 0.68rem;
  --initial: initial;
  --minmax-six-rem-one-fr-minmax-five-rem-one-fr-auto-auto: minmax(6rem, 1fr)
    minmax(5rem, 1fr) auto auto;
  --three-point-two-five-rem: 3.25rem;
  --zero-point-eight-five-rem-four-fifths-rem: 0.85rem 0.8rem;
  --clamp-zero-point-eight-two-rem-three-point-seven-vw-one-rem: clamp(
    0.82rem,
    3.7vw,
    1rem
  );
  --min-one-hundred-percent-twenty-eight-rem: min(100%, 28rem);
  --arial-helvetica-sans-serif: Arial, Helvetica, sans-serif;
  --hex-000: #000;
  --italic: italic;
  --middle: middle;
  --one-point-four: 1.4;
  --crispedges: crispEdges;
  --eight: 8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-page: #111827;
    --color-primary: #f6f8fb;
    --color-secondary: #cbd5e1;
    --border-content: 1px solid #334155;
    --border-button: 1px solid #4b5563;
    --background-content: rgb(23 32 51 / 0.86);
    --background-button: #4b5563;
    --button-hover: #4b5563;
    --background-panel: #1f2937;
    --accent-hover: rgb(5 150 104 / 0.45);
    --color-remove: #fecaca;
    --background-remove: rgb(239 68 68 / 0.14);
    --border-remove: 1px solid rgb(239 68 68 /0.28);
    --remove-hover: rgb(239 68 68 / 0.3);
  }
}

[data-theme="light"] {
  color-scheme: var(--light);
  --background-page: #f6f8fb;
  --color-primary: #111827;
  --color-secondary: #64748b;
  --border-content: 1px solid #d8e0ea;
  --border-button: 1px solid rgb(100 116 139 / 0.25);
  --background-content: rgb(255 255 255 / 0.8);
  --background-button: #f0f3f7;
  --button-hover: #e2e4e7;
  --background-panel: #ffffff;
  --color-remove: #991b1b;
  --background-remove: rgb(239 68 68 / 0.1);
  --border-remove: 1px solid rgb(239 68 68 / 0.28);
}

[data-theme="dark"] {
  color-scheme: var(--dark);
  --background-page: #111827;
  --color-primary: #f6f8fb;
  --color-secondary: #cbd5e1;
  --border-content: 1px solid #334155;
  --border-button: 1px solid #4b5563;
  --background-content: rgb(23 32 51 / 0.86);
  --background-button: #2f3b4d;
  --button-hover: #4b5563;
  --background-panel: #1f2937;
  --accent-hover: rgb(5 150 104 / 0.45);
  --color-remove: #fecaca;
  --background-remove: rgb(239 68 68 / 0.14);
  --border-remove: 1px solid rgb(239 68 68 /0.28);
  --remove-hover: rgb(239 68 68 / 0.3);
}

* {
  box-sizing: var(--border-box);
}

html {
  background: var(--background-page);
  font-family: var(--system-sans);
  font-weight: var(--normal);
  color: var(--color-primary);
  line-height: var(--normal);
  scroll-behavior: var(--smooth);
  font-size: var(
    --clamp-zero-point-nine-three-seven-five-rem-zero-point-eight-110275f3
  );
}

body {
  margin: var(--zero);
  margin-bottom: var(--seven-rem);
  background: var(--radial-gradient);
}

header {
  width: var(--width);
  margin-inline: var(--auto);
  padding-top: var(--one-rem);
}

main {
  width: var(--width);
  margin-inline: var(--auto);
}

dialog {
  width: var(--hundred-percent);
  height: var(--hundred-percent);
  margin: var(--zero);
  padding: var(--zero);
  border: var(--none);
  max-width: var(--none);
  max-height: var(--none);
  position: var(--fixed);
  inset: var(--zero);
  background: var(--background-dialog);
  display: var(--flex);
  align-items: var(--center);
  justify-content: var(--center);
}

dialog:not([open]) {
  display: var(--none);
}

aside {
  border: var(--border-accent);
  border-radius: var(--one-rem);
  background: var(--background-accent);
  color: var(--color-accent);
  margin-bottom: var(--one-rem);
  text-align: var(--center);
  padding: var(--one-rem-zero);
}

nav {
  border-bottom: var(--border-content);
  display: var(--flex);
  justify-content: var(--space-between);
  padding: var(--fifth-zero-tenth);
  align-items: var(--center);
  margin-bottom: var(--one-rem);
}

section {
  margin: var(--half-rem-zero);
}

details {
  display: var(--block);
  margin: var(--one-rem-zero);
  overflow: var(--hidden);
  border-radius: var(--one-rem);
  background: var(--background-panel);
  box-shadow: var(--shadow);
  cursor: var(--pointer);
  border: var(--border-content);
  margin-bottom: var(--one-rem);
}

summary {
  padding: var(--one-rem);
  font-size: var(--one-one-eighth-rem);
  font-weight: var(--one-thousand);
  cursor: var(--pointer);
  background: var(--linear-gradient);
}

article {
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-content);
  box-shadow: var(--shadow);
  padding: var(--two-rem);
}

button {
  border: var(--border-button);
  border-radius: var(--one-rem);
  padding: var(--three-quarter-rem);
  font-weight: var(--bold);
  cursor: var(--pointer);
  font-size: var(--seven-eighths-rem);
  background: var(--background-button);
}

button:hover {
  background: var(--button-hover);
}

button:focus {
  outline: var(--none);
}

label {
  color: var(--color-secondary);
  font-weight: var(--bold);
}

input {
  border: var(--border-content);
  border-radius: var(--one-rem);
  height: var(--three-rem);
  background: var(--background-page);
  color: var(--color-primary);
  font-weight: var(--bold);
  padding: var(--zero-one-rem);
}

input::placeholder {
  color: var(--color-primary);
  font-weight: var(--bold);
}

select {
  border: var(--border-content);
  border-radius: var(--one-rem);
  min-height: var(--three-rem);
  background: var(--background-page);
  color: var(--color-primary);
  padding: var(--zero-one-rem);
  font-weight: var(--bold);
}

select::placeholder {
  color: var(--color-primary);
  font-weight: var(--bold);
}

strong {
  font-weight: var(--one-thousand);
  margin-top: var(--zero);
}

p {
  color: var(--color-secondary);
  margin-top: var(--zero);
  margin-bottom: var(--one-rem);
}

a {
  color: var(--color-accent);
}

h1 {
  font-size: var(--three-rem);
  line-height: var(--one);
  margin: var(--one-half-rem-zero);
}

h2 {
  font-size: var(--two-rem);
  margin-top: var(--zero);
  margin-bottom: var(--three-quarter-rem);
}

h3 {
  font-size: var(--one-rem);
  color: var(--color-accent);
  margin-top: var(--zero);
  margin-bottom: var(--three-quarter-rem);
}

h4 {
  font-size: var(--one-one-eighth-rem);
  margin-top: var(--zero);
  margin-bottom: var(--zero);
}

h5 {
  font-size: var(--seven-eighths-rem);
  font-weight: var(--one-thousand);
  text-align: var(--center);
  margin-top: var(--zero);
}

h6 {
  font-size: var(--one-rem);
  margin-top: var(--zero);
  margin-bottom: var(--zero);
}

.emoji {
  font-size: var(--one-rem);
}

.quiz {
  display: var(--flex);
  flex-direction: var(--column);
  position: var(--relative);
  overflow-x: var(--hidden);
  padding: var(--var-half-rem-var-two-rem-var-one-half-rem);
  gap: var(--quarter-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-quiz);
  color: var(--color-primary);
  box-shadow: var(--shadow);
  width: var(--min-ninety-two-thirty-six);
}

.quiz-close {
  position: var(--absolute);
  top: var(--quarter-rem);
  right: var(--quarter-rem);
  z-index: var(--one);
  width: var(--two-half-rem);
  height: var(--two-half-rem);
  display: var(--grid);
  place-items: var(--center);
  padding: var(--zero);
  margin: var(--zero);
  border: var(--none);
  border-radius: var(--zero);
  background: var(--transparent);
  color: var(--color-primary);
  font-size: var(--two-half-rem);
  line-height: var(--one);
  cursor: var(--pointer);
}

.quiz > .modal-bar {
  margin-top: var(--two-half-rem);
}

.quiz-close:hover {
  background: var(--transparent);
}

.quiz-error,
.field-error {
  max-height: var(--zero);
  overflow: var(--hidden);
  visibility: var(--hidden);
  opacity: var(--zero);
  transform: var(--translatey-quarter-rem);
  margin: var(--zero);
  padding: var(--var-zero-var-one-rem);
  border: var(--one-px-solid-transparent);
  border-radius: var(--one-rem);
  background: var(--background-remove);
  color: var(--color-remove);
  font-weight: var(--eight-hundred);
  text-align: var(--center);
  transition: var(
    --opacity-one-hundred-eighty-ms-ease-transform-one-hundred-eig-7fdd52bf
  );
}

.quiz-error.visible,
.field-error.visible {
  max-height: var(--twelve-rem);
  visibility: var(--visible);
  opacity: var(--one);
  transform: var(--translate-y-zero);
  margin: var(--quarter-rem-zero);
  padding: var(--three-quarter-rem-one-rem);
  border: var(--border-remove);
}

.quiz .field-error {
  font-size: var(--three-quarter-rem);
  line-height: var(--one-seven-twentieths);
  text-align: var(--center);
}

.exit-confirm .modal {
  width: var(--min-ninety-two-thirty-six);
  gap: var(--one-quarter-rem);
  padding: var(--var-two-half-rem-var-two-rem);
}

.exit-confirm .modal h2,
.exit-confirm .modal h4 {
  margin: var(--zero);
  text-align: var(--center);
}

.exit-confirm .modal h4 {
  margin-top: var(--three-quarter-rem);
}

.exit-modal-buttons {
  width: var(--hundred-percent);
  display: var(--flex);
  gap: var(--one-rem);
  margin-top: var(--one-half-rem);
}

.exit-modal-buttons button {
  flex: var(--one);
  min-height: var(--three-rem);
  padding: var(--three-quarter-rem-half-rem);
  font-weight: var(--one-thousand);
}

input[type="radio"]:focus {
  outline: var(--none);
}

select:focus {
  outline: var(--none);
}

.quiz h2 {
  max-width: var(--thirty-rem);
  text-align: var(--center);
  margin-left: var(--auto);
  margin-right: var(--auto);
  margin-top: var(--one-half-rem);
  margin-bottom: var(--one-half-rem);
}

.quiz h6 {
  max-width: var(--twenty-eight-rem);
  text-align: var(--center);
  color: var(--color-secondary);
  line-height: var(--one-half);
  margin-left: var(--auto);
  margin-right: var(--auto);
  margin-bottom: var(--one-quarter-rem);
}

.quiz p {
  text-align: var(--center);
}

.data {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--quarter-rem);
  margin-bottom: var(--three-quarter-rem);
}

.data-two {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--quarter-rem);
  margin-bottom: var(--one-rem);
}

.modal-bar {
  position: var(--relative);
  width: var(--hundred-percent);
  height: var(--one-quarter-rem);
  overflow: var(--hidden);
  border-radius: var(--nine-nine-nine);
  background: var(--background-button);
}

.modal-fill {
  width: var(--zero-percent);
  height: var(--hundred-percent);
  border-radius: var(--inherit);
  background: var(--color-accent);
  transition: var(--width-half-ease);
}

.modal-fill.no-transition {
  transition: var(--none);
}

.modal-count {
  position: var(--absolute);
  inset: var(--zero);
  display: var(--grid);
  place-items: var(--center);
  font-size: var(--thirteenth-twentieth-rem);
  font-weight: var(--one-thousand);
  line-height: var(--one);
  color: var(--color-primary);
  pointer-events: var(--none);
}

.quiz .label {
  width: var(--hundred-percent);
  margin-bottom: var(--three-quarter-rem);
  display: var(--flex);
  align-items: var(--center);
  gap: var(--three-quarter-rem);
  padding: var(--one-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-panel);
  color: var(--color-primary);
  font-weight: var(--eight-hundred);
  cursor: var(--pointer);
  transition: var(--transform-fifth-ease);
}

.quiz .label:has(input[type="checkbox"]) {
  padding-block: var(--nine-tenths-rem);
}

.quiz .label > input[type="radio"],
.quiz .label > input[type="checkbox"] {
  pointer-events: var(--auto);
}

.quiz .label:hover {
  transform: var(--translate-y-two);
  border-color: var(--color-accent);
  background: var(--background-accent);
}

.quiz input[type="radio"],
.quiz input[type="checkbox"] {
  accent-color: var(--color-accent);
  transform: var(--scale-one-one-fifth);
}

.quiz select,
.quiz input[type="number"] {
  width: var(--hundred-percent);
  padding: var(--three-quarter-rem-one-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-panel);
  color: var(--color-primary);
  font-size: var(--one-rem);
}

.quiz label:not(.label) {
  width: var(--hundred-percent);
  font-weight: var(--eight-hundred);
  color: var(--color-primary);
}

.options {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--three-quarter-rem);
}

.modal-buttons,
.modal-buttons-start {
  width: var(--hundred-percent);
  display: var(--flex);
  gap: var(--one-rem);
  justify-content: var(--space-between);
  margin-top: var(--one-rem);
}

.next,
.back,
.calculate,
.begin {
  flex: var(--one);
  min-height: var(--three-rem);
  padding: var(--seventeen-twentieths-rem-one-rem);
  font-weight: var(--one-thousand);
}

.next,
.calculate,
.begin {
  background: var(--color-accent);
  color: var(--color-calculate);
  border-color: var(--color-accent);
}

.back {
  background: var(--background-button);
  color: var(--color-primary);
}

.next:hover,
.calculate:hover {
  background: var(--background-hover);
  transform: var(--translate-y-two);
}

.back:hover {
  background: var(--button-hover);
}

.buttons {
  display: var(--flex);
  gap: var(--quarter-rem);
}

.button {
  border: var(--border-content);
  background: var(--background-panel);
  padding: var(--three-quarter-rem-one-rem);
  color: var(--color-secondary);
  font-size: var(--one-rem);
  font-weight: var(--bold);
  font-family: var(--inherit);
}

.button:hover {
  background: var(--button-hover);
}

.tip {
  display: var(--inline-flex);
  border-radius: var(--one-rem);
  font-size: var(--seven-eighths-rem);
  font-weight: var(--one-thousand);
  color: var(--color-primary);
  transition: var(--transform-fifth-ease);
  position: var(--relative);
}

.tip:hover {
  color: var(--color-accent);
  transform: var(--translate-y-two);
  cursor: var(--default);
}

.info {
  position: var(--absolute);
  top: var(--calc-one-hundred-percent-plus-var-half-rem);
  bottom: var(--auto);
  left: var(--fifty-percent);
  transform: var(--translate-x-fifty);
  width: var(--sixteen-rem);
  padding: var(--three-quarter-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-page);
  color: var(--color-primary);
  font-family: var(--system-sans);
  font-size: var(--three-quarter-rem);
  font-weight: var(--one-thousand);
  line-height: var(--seven-twentieths);
  transition: var(--opacity-fifth-ease);
  box-shadow: var(--shadow);
  text-align: var(--center);
  pointer-events: var(--none);
  opacity: var(--zero);
  white-space: var(--normal);
}

.tip:hover .info {
  opacity: var(--one);
}

.pills {
  display: var(--flex);
  gap: var(--one-rem);
  margin-top: var(--half-rem);
}

.pill {
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-button);
  padding: var(--half-rem-one-rem);
  font-weight: var(--bold);
  color: var(--color-primary);
}

.group {
  display: var(--flex);
  gap: var(--half-rem);
  align-items: var(--center);
}

.group input {
  flex: var(--one);
}

.group select {
  width: var(--four-half-rem);
  flex-shrink: var(--zero);
}

.calculate {
  width: var(--hundred-percent);
  background: var(--color-accent);
  color: var(--color-calculate);
  font-size: var(--one-one-eighth-rem);
  padding-top: var(--half-rem);
  padding-bottom: var(--half-rem);
  font-weight: var(--one-thousand);
  box-shadow: var(--shadow-calculate);
  transition: var(--transition-calculate);
}

.calculate:hover {
  transform: var(--translate-y-two);
  box-shadow: var(--shadow-hover);
  background: var(--background-hover);
}

.results-outputs {
  scroll-margin-top: var(--one-rem);
}

.results {
  display: var(--flex);
  width: var(--hundred-percent);
  padding-left: var(--four-rem);
  padding-right: var(--four-rem);
  padding-top: var(--two-half-rem);
  padding-bottom: var(--three-half-rem);
  gap: var(--one-rem);
  position: var(--relative);
  background: var(--background-panel);
  margin-top: var(--one-four-fifths-rem);
}

.results-left {
  width: var(--thirty-five-percent);
  text-align: var(--center);
}

.result-wrap {
  display: var(--flex);
  flex-direction: var(--column);
  align-items: var(--center);
}

.chart {
  width: var(--sixteen-rem);
  height: var(--sixteen-rem);
  display: var(--block);
}

.key {
  display: var(--flex);
  justify-content: var(--center);
  align-items: var(--center);
  gap: var(--one-rem);
  flex-wrap: var(--wrap);
  margin-bottom: var(--three-rem);
}

.macro-key-item {
  display: var(--flex);
  align-items: var(--center);
  gap: var(--half-rem);
}

.macro-key-color {
  width: var(--one-rem);
  height: var(--one-rem);
  border-radius: var(--fifth-rem);
  display: var(--inline-block);
}

.results-numbers {
  display: var(--flex);
  flex-direction: var(--column);
  align-items: var(--center);
}

.result-pill {
  width: var(--hundred-percent);
  display: var(--flex);
  justify-content: var(--space-between);
  align-items: var(--center);
  border-radius: var(--one-rem);
  border: var(--border-content);
  background: var(--background-button);
  padding: var(--half-rem-one-rem);
  font-weight: var(--bold);
  color: var(--color-primary);
  margin-bottom: var(--one-rem);
}

.results-right {
  width: var(--sixty-five-percent);
}

.results-hero {
  display: var(--flex);
  flex-direction: var(--column);
  align-items: var(--center);
}

.results-projections {
  display: var(--flex);
  flex-direction: var(--column);
  width: var(--clamp);
}

.projection {
  display: var(--flex);
  width: var(--hundred-percent);
  gap: var(--calc-hundred-tenth);
  padding: var(--one-rem-zero);
}

.projection img {
  display: var(--block);
  flex: var(--one-one-zero);
  width: var(--zero);
  min-width: var(--zero);
  max-width: var(--hundred-percent);
  height: var(--auto);
}

.timelines {
  position: var(--relative);
  display: var(--flex);
  justify-content: var(--space-between);
  align-items: var(--flex-start);
  gap: var(--calc-hundred-tenth);
  padding-left: var(--calc-hundred-tenth);
  padding-right: var(--calc-hundred-eleventh);
}

.timelines::before {
  content: var(--value);
  position: var(--absolute);
  left: var(--calc-hundred-five-seventh);
  right: var(--calc-hundred-five-fifth);
  bottom: var(--zero);
  height: var(--fifth-rem);
  background: var(--color-primary);
}

.timeline {
  display: var(--flex);
  flex-direction: var(--column);
  align-items: var(--center);
  position: var(--relative);
}

.tick {
  width: var(--fifth-rem);
  height: var(--two-half-rem);
  background: var(--color-primary);
}

.outputs {
  display: var(--grid);
  grid-template-columns: var(--repeat-four);
  gap: var(--three-quarter-rem);
  margin: var(--one-rem-zero);
}

.output {
  background: var(--background-panel);
  border-radius: var(--one-rem);
  padding: var(--one-rem);
  padding-bottom: var(--zero);
  box-shadow: var(--shadow);
  border: var(--border-content);
}

.plan {
  margin: var(--one-rem);
  margin-top: var(--one-four-fifths-rem);
  margin-bottom: var(--zero);
  padding-bottom: var(--zero);
  position: var(--relative);
  display: var(--flex);
  flex-direction: var(--column);
}

.plan-header {
  display: var(--flex);
  flex-wrap: var(--wrap);
  justify-content: var(--space-between);
  align-items: var(--flex-start);
}

.plan-hero {
  display: var(--flex);
  flex-direction: var(--column);
}

.space {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--one-rem);
}

.add-meal {
  border: var(--border-accent);
  background: var(--background-accent);
  color: var(--color-accent);
}

.add-meal:hover {
  background: var(--accent-hover);
}

.meals {
  padding-top: var(--one-rem);
  margin-top: var(--one-rem);
  padding: var(--one-quarter-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-content);
}

.meal {
  display: var(--flex);
  justify-content: var(--space-between);
  align-items: var(--center);
  gap: var(--one-rem);
  padding-bottom: var(--one-rem);
  border-bottom: var(--border-content);
}

.meal-buttons {
  display: var(--flex);
  gap: var(--one-rem);
}

.add-food {
  border: var(--border-accent);
  background: var(--background-accent);
  color: var(--color-accent);
}

.add-food:hover {
  background: var(--accent-hover);
}

.remove-meal {
  border: var(--border-remove);
  background: var(--background-remove);
  color: var(--color-remove);
}

.remove-meal:hover {
  background: var(--remove-hover);
}

.nutrition {
  margin-top: var(--one-rem);
  padding: var(--one-rem);
}

.group-two {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--three-quarter-rem);
}

.meal-eyebrow,
.food-editor-eyebrow {
  margin: var(--zero-zero-one-fifth-rem);
  color: var(--color-secondary);
  font-size: var(--zero-point-seven-two-rem);
  font-weight: var(--nine-hundred);
  letter-spacing: var(--zero-point-one-two-em);
  text-transform: var(--uppercase);
}

.meal-copy {
  margin: var(--zero);
}

.food-list {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--one-tenth-rem);
  padding-top: var(--one-tenth-rem);
}

.meal-empty {
  margin: var(--zero);
  padding: var(--one-point-five-rem-quarter-rem-quarter-rem);
  color: var(--color-secondary);
  text-align: var(--center);
}

.nutrition.food-summary {
  display: var(--grid);
  grid-template-columns: var(--auto-minmax-zero-one-fr-auto);
  align-items: var(--center);
  gap: var(--one-rem);
  margin: var(--zero);
  padding: var(--one-rem-quarter-rem);
  border: var(--zero);
  border-bottom: var(--border-content);
  border-radius: var(--zero);
  background: var(--transparent);
}

.nutrition.food-summary:last-child {
  border-bottom: var(--zero);
  padding-bottom: var(--quarter-rem);
}

.food-icon {
  display: var(--grid);
  place-items: var(--center);
  width: var(--two-point-eight-rem);
  height: var(--two-point-eight-rem);
  border: var(--border-accent);
  border-radius: var(--four-fifths-rem);
  background: var(--background-accent);
  color: var(--color-accent);
}

.food-icon svg {
  width: var(--one-point-four-five-rem);
  height: var(--one-point-four-five-rem);
  fill: var(--currentcolor);
}

.food-summary-copy {
  min-width: var(--zero);
}

.food-summary-topline {
  display: var(--flex);
  align-items: var(--baseline);
  gap: var(--thirteen-twentieths-rem);
  flex-wrap: var(--wrap);
}

.food-name-summary {
  margin: var(--zero);
  color: var(--color-primary);
  font-size: var(--one-rem);
}

.food-serving-summary {
  margin: var(--zero);
  color: var(--color-secondary);
  font-size: var(--zero-point-eight-two-rem);
}

.food-macros {
  display: var(--flex);
  flex-wrap: var(--wrap);
  gap: var(--zero-point-three-five-rem-one-rem);
  margin-top: var(--zero-point-four-five-rem);
  color: var(--color-secondary);
  font-size: var(--zero-point-eight-two-rem);
}

.food-macros strong {
  color: var(--color-primary);
}

.edit-food {
  min-width: var(--five-point-two-five-rem);
  border: var(--border-button);
  background: var(--background-button);
  color: var(--color-primary);
}

.edit-food:hover {
  background: var(--button-hover);
}

.food-dialog {
  padding: var(--zero);
  border: var(--zero);
  position: var(--fixed);
  inset: var(--zero);
  width: var(--min-ninety-four-vw-sixty-eight-rem);
  height: var(--auto);
  max-width: var(--sixty-eight-rem);
  max-height: var(--calc-one-hundred-dvh-minus-two-rem);
  margin: var(--auto);
  overflow: var(--visible);
  background: var(--transparent);
}

.food-dialog::backdrop {
  background: var(--background-modal);
  backdrop-filter: var(--blur-zero-point-two-eight-rem);
}

.food-editor {
  width: var(--hundred-percent);
  box-sizing: var(--border-box);
  padding: var(--two-rem);
  border: var(--border-accent);
  border-radius: var(--one-rem);
  background: var(--background-page);
  color: var(--color-primary);
  box-shadow: var(--modal-shadow);
  max-height: var(--none);
  overflow: var(--visible);
}

.food-editor-header {
  display: var(--flex);
  justify-content: var(--space-between);
  align-items: var(--flex-start);
  gap: var(--one-half-rem);
  margin-bottom: var(--one-quarter-rem);
}

.food-editor-header h2,
.food-dialog-close {
  flex: var(--zero-zero-auto);
  padding: var(--zero);
  border: var(--zero);
  background: var(--transparent);
  color: var(--color-primary);
  font-size: var(--two-point-two-five-rem);
  line-height: var(--one);
  cursor: var(--pointer);
}

.food-editor-grid {
  display: var(--grid);
  grid-template-columns: var(--repeat-four-minmax-zero-one-fr);
  gap: var(--one-quarter-rem);
}

.food-editor-grid .group-two {
  min-width: var(--zero);
}

.food-editor-grid input {
  width: var(--hundred-percent);
  box-sizing: var(--border-box);
}

.food-editor-actions {
  display: var(--flex);
  justify-content: var(--space-between);
  align-items: var(--center);
  gap: var(--one-rem);
  margin-top: var(--one-point-seven-five-rem);
  padding-top: var(--one-quarter-rem);
  border-top: var(--border-content);
}

.food-editor-primary-actions {
  display: var(--flex);
  gap: var(--one-rem);
}

.delete-food-dialog {
  border: var(--border-remove);
  background: var(--background-remove);
  color: var(--color-remove);
}

.delete-food-dialog:hover {
  background: var(--remove-hover);
}

.save-food-dialog {
  border: var(--border-accent);
  background: var(--background-accent);
  color: var(--color-accent);
}

.save-food-dialog:hover {
  background: var(--accent-hover);
}

.cancel-food-dialog {
  border: var(--border-button);
  background: var(--background-button);
  color: var(--color-primary);
}

.food-label-info {
  width: var(--min-twenty-four-rem-seventy-eight-vw);
  max-height: var(--seventy-vh);
  overflow: var(--auto);
}

.food-label-info .nutrition-label {
  display: var(--block);
  width: var(--hundred-percent);
}

.plan-results {
  display: var(--flex);
  gap: var(--two-rem);
  margin-top: var(--two-rem);
  margin-bottom: var(--zero);
  padding: var(--zero);
}

.plan-left {
  width: var(--fit-content);
  display: var(--flex);
  flex-direction: var(--column);
  margin-bottom: var(--zero);
  align-items: var(--center);
}

.plan-right {
  display: var(--flex);
  flex-direction: var(--column);
  margin-bottom: var(--zero);
  width: var(--fifty-five-percent);
}

.plan-pills {
  position: var(--relative);
  z-index: var(--one);
  display: var(--grid);
  grid-template-columns: var(--repeat-two);
  gap: var(--one-rem);
  margin-bottom: var(--one-rem);
}

.plan-pill {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--half-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-button);
  padding: var(--one-rem);
  padding-bottom: var(--zero);
  font-weight: var(--bold);
  color: var(--color-primary);
}

.bar-wrap {
  position: var(--relative);
  height: var(--two-rem);
  border-radius: var(--one-rem);
  background: var(--background-button);
  overflow: var(--visible);
  margin-top: var(--zero);
}

.bar {
  width: var(--hundred-percent);
  height: var(--hundred-percent);
  border-radius: var(--one-rem);
  background: var(--background-button);
  overflow: var(--hidden);
}

.bar-fill {
  height: var(--hundred-percent);
  width: var(--zero-percent);
  border-radius: var(--one-rem);
  background: var(--color-accent);
  transition: var(--width-two-eighty-ms);
}

.bar-fill.over {
  background: var(--color-remove);
}

.bar-tick {
  position: var(--absolute);
  top: var(--negative-half-rem);
  bottom: var(--negative-half-rem);
  width: var(--fifth-rem);
  background: var(--color-primary);
  left: var(--hundred-percent);
  transform: var(--translate-x-fifty);
}

.bar-labels {
  display: var(--flex);
  justify-content: var(--space-between);
  align-items: var(--flex-start);
  margin-top: var(--half-rem);
}

.track {
  margin: var(--one-rem);
  margin-top: var(--one-four-fifths-rem);
  position: var(--relative);
  display: var(--flex);
  flex-direction: var(--column);
}

.track-header {
  display: var(--flex);
  flex-wrap: var(--wrap);
  justify-content: var(--space-between);
  align-items: var(--flex-start);
}

.track-hero {
  display: var(--flex);
  flex-direction: var(--column);
}

.add-entry {
  border: var(--border-accent);
  background: var(--background-accent);
  color: var(--color-accent);
}

.add-entry:hover {
  background: var(--accent-hover);
}

.log {
  display: var(--flex);
  gap: var(--one-rem);
  width: var(--hundred-percent);
}

.log > * {
  min-width: var(--zero);
  flex: var(--one-one-zero);
}

.log-wrap {
  display: var(--flex);
  flex-direction: var(--column);
  align-items: var(--center);
  width: var(--hundred-percent);
  margin-top: var(--two-rem);
}

.graph {
  transform: var(--scale-thirty-seven-fortieths);
  transform-origin: var(--center);
  border-radius: var(--one-rem);
  background: var(--background-graph);
}

.log-pills {
  display: var(--flex);
  gap: var(--one-rem);
}

.log-pill {
  border-radius: var(--one-rem);
  background: var(--background-button);
  padding: var(--half-rem-three-quarter-rem);
  color: var(--color-primary);
  font-weight: var(--bold);
  width: var(--auto);
}

.help {
  margin: var(--one-rem);
  margin-top: var(--one-four-fifths-rem);
  display: var(--flex);
  flex-direction: var(--column);
  position: var(--relative);
  padding-top: var(--one-rem);
}

.spacing {
  margin-top: var(--one-rem);
  margin-bottom: var(--three-quarter-rem);
}

.spacing-two {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--three-quarter-rem);
  margin-bottom: var(--quarter-rem);
}

.help-tips {
  display: var(--grid);
  grid-template-columns: var(--repeat-three-one-fr);
  gap: var(--one-rem);
}

.help-tip {
  display: var(--flex);
  flex-direction: var(--column);
  gap: var(--one-rem);
  padding: var(--one-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
}

.actions {
  display: var(--flex);
  flex-direction: var(--column);
}

.modal {
  box-sizing: var(--border-box);
  min-height: var(--sixteen-rem);
  width: var(--min-ninety-six-vw-thirty-six-rem);
  padding: var(--three-rem-four-point-five-rem);
  display: var(--flex);
  flex-direction: var(--column);
  align-items: var(--center);
  justify-content: var(--center);
  background: var(--background-page);
  border: var(--border-content);
  border-radius: var(--one-rem);
  box-shadow: var(--modal-shadow);
}

.save-modal-buttons {
  width: var(--hundred-percent);
  display: var(--flex);
  gap: var(--one-rem);
  margin-top: var(--one-half-rem);
}

.save-modal-buttons button {
  flex: var(--one);
  min-height: var(--three-rem);
  padding: var(--three-quarter-rem-half-rem);
  font-weight: var(--one-thousand);
}

.clear {
  border: var(--border-button);
  font-weight: var(--one-thousand);
  cursor: var(--pointer);
  font-size: var(--one-rem);
  background: var(--background-button);
}

.clear:hover {
  background: var(--button-hover);
}

.continue {
  border: var(--border-accent);
  background: var(--background-accent);
  color: var(--color-accent);
  font-size: var(--one-rem);
  font-weight: var(--one-thousand);
  cursor: var(--pointer);
}

.continue:hover {
  background: var(--accent-hover);
}

.active {
  border: var(--border-accent);
  background: var(--background-accent);
  color: var(--color-accent);
  font-weight: var(--one-thousand);
  cursor: var(--default);
}

.active:hover {
  background: var(--background-accent);
}

.active .tip {
  color: var(--color-accent);
}

.hidden {
  display: var(--none);
}

.panel:not(.hidden) {
  animation: var(--panel-enter);
}

.results-outputs,
.meals,
.nutrition,
.log,
.plan-results,
.log-wrap {
  transition: var(--none);
}

button,
input,
select,
summary {
  transition: var(--transform-one-sixty-ms);
}

button:active {
  transform: var(--translate-y-two);
}

dialog[open] {
  animation: var(--none);
}

dialog[open] > .quiz {
  animation: var(--dialog-enter-two-hundred-twenty-ms-ease-both);
}

dialog[open] > .modal,
dialog::backdrop {
  animation: var(--none);
}

dialog::backdrop {
  background: var(--background-dialog);
  backdrop-filter: var(--blur-four);
}

.shake {
  animation: var(--shake-three-twenty-ms);
}

@keyframes panel-enter {
  from {
    opacity: var(--zero);
    transform: var(--translate-y-eight);
  }

  to {
    opacity: var(--one);
    transform: var(--translate-y-zero);
  }
}

@keyframes dialog-enter {
  from {
    opacity: var(--zero);
    transform: var(--translate-y-ten-scale);
  }

  to {
    opacity: var(--one);
    transform: var(--translate-y-zero-scale);
  }
}

@keyframes backdrop-enter {
  from {
    opacity: var(--zero);
  }

  to {
    opacity: var(--one);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: var(--translate-x-zero);
  }

  25% {
    transform: var(--translate-x-negative-six);
  }

  75% {
    transform: var(--translate-x-six);
  }
}

.plan-left.macro-compare {
  width: var(--forty-five-percent);
  display: var(--flex);
  flex-direction: var(--row);
  align-items: var(--flex-start);
  justify-content: var(--center);
  gap: var(--two-rem);
  flex-wrap: var(--nowrap);
}

.plan-left.macro-compare .result-wrap {
  min-width: var(--zero);
  flex: var(--one-one-zero);
}

.plan-left.macro-compare .chart {
  width: var(--min-hundred-sixteen);
  height: var(--auto);
  aspect-ratio: var(--one);
}

.plan-left.macro-compare .key {
  margin-bottom: var(--zero);
}

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

#one,
#two,
#three {
  box-sizing: var(--border-box);
  min-height: var(--fifty-four-rem);
}

.nutrition.food-summary,
.nutrition.food-summary:last-child {
  padding: var(--one-rem);
  border: var(--border-content);
  border-radius: var(--four-fifths-rem);
  background: var(--background-content);
}

.macro-label {
  position: var(--relative);
  z-index: var(--zero);
  display: var(--inline-grid);
  place-items: var(--center);
  min-width: var(--one-point-two-em);
  padding: var(--zero-zero-point-one-two-em);
  border-radius: var(--fifth-rem);
  overflow: var(--hidden);
}

.macro-label::before {
  content: var(--value);
  position: var(--absolute);
  inset: var(--zero);
  z-index: var(--minus-one);
  opacity: var(--zero-point-two-eight);
}

.macro-protein::before {
  background: var(--hex-2563eb);
}

.macro-carbs::before {
  background: var(--hex-10b981);
}

.macro-fat::before {
  background: var(--hex-f59e0b);
}

.food-dialog[open] {
  display: var(--block);
}

.food-editor-header h2 {
  margin: var(--zero);
}

@media (max-width: 80rem) {
  :root {
    --width: min(94vw, 72rem);
  }

  .results {
    flex-wrap: var(--wrap);
  }

  .results-left,
  .results-right {
    width: var(--hundred-percent);
  }

  .food-editor-grid {
    grid-template-columns: var(--repeat-two-minmax-zero-one-fr);
  }

  .plan-results {
    grid-template-columns: var(--one-fr-);
  }
}

@media (max-width: 60rem) {
  html {
    font-size: var(--zero-point-nine-three-seven-five-rem);
  }

  header,
  main {
    width: var(--min-ninety-four-vw-fifty-two-rem);
  }

  nav,
  .plan-header,
  .track-header,
  .meal {
    gap: var(--one-rem);
  }

  .results,
  .plan,
  .track {
    margin-inline: var(--zero);
  }

  .nutrition.food-summary {
    grid-template-columns: var(--auto-minmax-zero-one-fr);
  }

  .edit-food {
    grid-column: var(--one-slash-minus-one);
    width: var(--hundred-percent);
  }

  .log {
    flex-wrap: var(--wrap);
  }

  .food-dialog {
    width: var(--min-ninety-four-vw-forty-four-rem);
  }
}

@media (max-width: 40rem) {
  html {
    font-size: var(--seven-eighths-rem);
  }

  header,
  main {
    width: var(--min-ninety-four-vw-thirty-six-rem);
  }

  .plan-header,
  .track-header,
  .meal,
  .meal-buttons,
  .food-editor-actions,
  .food-editor-primary-actions {
    align-items: var(--stretch);
    flex-direction: var(--column);
  }

  .meal-buttons button,
  .food-editor-actions button,
  .food-editor-primary-actions,
  .add-entry,
  .add-meal {
    width: var(--hundred-percent);
  }

  .food-editor {
    padding: var(--one-quarter-rem);
  }

  .food-editor-grid {
    grid-template-columns: var(--one-fr-);
  }

  .food-editor-actions {
    flex-direction: var(--column-reverse);
  }

  .food-editor-primary-actions {
    flex-direction: var(--column-reverse);
  }

  .nutrition.food-summary {
    grid-template-columns: var(--one-fr-);
    text-align: var(--left);
  }

  .food-icon {
    display: var(--none);
  }

  .food-macros {
    gap: var(--two-fifths-rem-three-quarter-rem);
  }

  #one,
  #two,
  #three {
    min-height: var(--zero);
  }
}

html,
body {
  max-width: var(--hundred-percent);
  overflow-x: var(--hidden);
}

*,
*::before,
*::after {
  box-sizing: var(--border-box);
}

.panel,
.results,
.plan,
.track,
.log-wrap,
.graph {
  min-width: var(--zero);
  max-width: var(--hundred-percent);
}

canvas {
  display: var(--block);
  max-width: var(--hundred-percent);
}

button,
input,
select,
textarea,
summary {
  font: var(--inherit);
}

.weight-entry-form {
  display: var(--grid);
  grid-template-columns: var(--minmax-zero-one-fr-minmax-zero-one-fr-auto);
  align-items: var(--end);
  gap: var(--one-rem);
  width: var(--hundred-percent);
  margin-top: var(--one-half-rem);
  padding: var(--one-quarter-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-content);
}

.weight-entry-form .group-two {
  min-width: var(--zero);
}

.weight-entry-form input {
  width: var(--hundred-percent);
}

.weight-entry-form .add-entry {
  min-width: var(--eight-rem);
  height: var(--three-rem);
  white-space: var(--nowrap);
}

.weight-history {
  width: var(--hundred-percent);
  margin-top: var(--one-rem);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-content);
  overflow: var(--hidden);
}

.weight-history > summary {
  padding: var(--one-rem-one-point-two-five-rem);
  color: var(--color-primary);
  font-weight: var(--eight-hundred);
  cursor: var(--pointer);
}

.weight-history[open] > summary {
  border-bottom: var(--border-content);
}

.weight-entry-list {
  display: var(--grid);
  padding: var(--one-rem);
  gap: var(--zero-point-three-five-rem);
  padding-block: var(--zero-point-seven-rem);
}

.weight-history-empty {
  margin: var(--zero);
  padding: var(--three-quarter-rem);
  color: var(--color-secondary);
  text-align: var(--center);
}

.weight-entry-row {
  display: var(--grid);
  grid-template-columns: var(
    --minmax-eight-rem-one-fr-minmax-seven-rem-one-fr-auto-auto
  );
  align-items: var(--center);
  gap: var(--three-quarter-rem);
  padding: var(--four-fifths-rem);
  border: var(--border-content);
  border-radius: var(--four-fifths-rem);
  background: var(--background-page);
  color: var(--color-primary);
  padding-block: var(--half-rem);
}

.weight-entry-date-copy,
.weight-entry-value-copy {
  min-width: var(--zero);
  font-weight: var(--seven-hundred);
}

.edit-weight-entry {
  border: var(--border-button);
  background: var(--background-button);
  color: var(--color-primary);
}

.remove-weight-entry {
  border: var(--border-remove);
  background: var(--background-remove);
  color: var(--color-remove);
}

@media (max-width: 48rem) {
  .weight-entry-form {
    grid-template-columns: var(--one-fr-);
  }

  .weight-entry-form .add-entry {
    width: var(--hundred-percent);
  }

  .weight-entry-row {
    grid-template-columns: var(--one-fr-one-fr);
  }

  .weight-entry-row button {
    width: var(--hundred-percent);
  }
}

@media (max-width: 30rem) {
  .weight-entry-row {
    grid-template-columns: var(--one-fr-);
  }
}

.macro-update-notice {
  width: var(--hundred-percent);
  margin: var(--zero-zero-one-rem);
  padding: var(--seventeen-twentieths-rem-one-rem);
  border: var(
    --one-px-solid-color-mix-in-srgb-hex-d4a017-fifty-five-percent-transparent
  );
  border-radius: var(--four-fifths-rem);
  background: var(
    --color-mix-in-srgb-hex-f6c344-sixteen-percent-var-background-content
  );
  color: var(--color-primary);
  font-size: var(--nine-tenths-rem);
  font-weight: var(--seven-hundred);
  line-height: var(--one-point-four-five);
  opacity: var(--zero);
  transform: var(--translatey-one-fifth-rem);
  transition: var(
    --opacity-one-hundred-eighty-ms-ease-transform-one-hundred-eighty-ms-ease
  );
}

.macro-update-notice.visible {
  opacity: var(--one);
  transform: var(--translate-y-zero);
}

@media (prefers-reduced-motion: reduce) {
  .macro-update-notice {
    transition: var(--none);
  }
}

#two,
#three {
  width: var(--hundred-percent);
}

#two > .plan,
#three > .track {
  width: var(--hundred-percent);
  margin-inline: var(--zero);
  margin-top: var(--one-four-fifths-rem);
}

#two button,
#three button {
  padding: var(--zero-point-six-two-rem-zero-point-eight-five-rem);
  font-weight: var(--four-hundred);
}

#two .food-dialog-close {
  padding: var(--zero);
}

.macro-update-notice,
.achievement-notice {
  display: var(--flex);
  justify-content: var(--center);
  align-items: var(--center);
  gap: var(--zero-point-five-five-rem);
  width: var(--hundred-percent);
  margin: var(--zero-zero-one-rem);
  padding: var(--seventeen-twentieths-rem-one-rem);
  text-align: var(--center);
  opacity: var(--zero);
  transform: var(--translatey-one-fifth-rem);
  transition: var(
    --opacity-one-hundred-eighty-ms-ease-transform-one-hundred-eighty-ms-ease
  );
}

.macro-update-notice.visible,
.achievement-notice.visible {
  opacity: var(--one);
  transform: var(--translate-y-zero);
}

.macro-update-notice a,
.achievement-notice a {
  flex: var(--zero-zero-auto);
  color: var(--inherit);
  font-size: var(--zero-point-eight-four-em);
  font-weight: var(--eight-hundred);
  opacity: var(--zero-point-seven-eight);
  text-decoration: var(--underline);
  text-underline-offset: var(--zero-point-one-six-em);
}

.macro-update-notice a:hover,
.achievement-notice a:hover {
  opacity: var(--one);
}

[data-theme="dark"] .macro-update-notice {
  border-color: var(
    --color-mix-in-srgb-hex-f6c344-seventy-two-percent-transparent
  );
  background: var(
    --color-mix-in-srgb-hex-f6c344-twenty-four-percent-var-background-content
  );
}

.achievement-notice {
  border: var(
    --one-px-solid-color-mix-in-srgb-hex-22a06b-fifty-five-percent-transparent
  );
  border-radius: var(--four-fifths-rem);
  background: var(
    --color-mix-in-srgb-hex-34d399-seventeen-percent-var-background-content
  );
  color: var(--color-primary);
  font-size: var(--nine-tenths-rem);
  font-weight: var(--seven-hundred);
  line-height: var(--one-point-four-five);
}

[data-theme="dark"] .achievement-notice {
  border-color: var(
    --color-mix-in-srgb-hex-34d399-forty-eight-percent-transparent
  );
  background: var(
    --color-mix-in-srgb-hex-34d399-fifteen-percent-var-background-content
  );
}

.weight-entry-date {
  font-weight: var(--eight-hundred);
}

@media (max-width: 40rem) {
  .macro-update-notice,
  .achievement-notice {
    flex-direction: var(--column);
    gap: var(--three-tenths-rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .macro-update-notice,
  .achievement-notice {
    transition: var(--none);
  }
}

#one,
#two {
  padding-top: var(--zero);
}

#one > .achievement-notice.hidden,
#two > .macro-update-notice.hidden {
  display: var(--none);
  margin: var(--zero);
  padding: var(--zero);
}

#one > .transformation-roadmap,
#two > .plan {
  margin-top: var(--zero);
}

#one.has-visible-notice > .transformation-roadmap,
#two.has-visible-notice > .plan {
  margin-top: var(--one-rem);
}

.transformation-roadmap {
  width: var(--hundred-percent);
  border: var(--border-content);
  border-radius: var(--one-rem);
  background: var(--background-panel);
  overflow: var(--hidden);
}

.transformation-roadmap > summary {
  padding: var(--one-rem-one-point-two-five-rem);
  color: var(--color-primary);
  font-size: var(--one-point-zero-five-rem);
  font-weight: var(--four-hundred);
  cursor: var(--pointer);
  user-select: var(--none);
}

.transformation-roadmap[open] > summary {
  border-bottom: var(--border-content);
}

.transformation-roadmap .results {
  margin-top: var(--zero);
  border-radius: var(--zero);
}

.transformation-roadmap .outputs {
  margin-inline: var(--one-rem);
}

.meal-planner-cta {
  margin: var(--one-rem);
  padding: var(--one-rem);
  border-top: var(--border-content);
  color: var(--color-primary);
  font-weight: var(--seven-hundred);
  text-align: var(--center);
}

.meal-planner-cta a {
  color: var(--color-accent);
  font-weight: var(--nine-hundred);
}

.weight-tracker-cta {
  margin: var(--one-rem-zero-zero);
  padding: var(--one-rem);
  border-top: var(--border-content);
  color: var(--color-primary);
  font-weight: var(--seven-hundred);
  text-align: var(--center);
}

.weight-tracker-cta a {
  color: var(--color-accent);
  font-weight: var(--nine-hundred);
}

nav .button.active {
  font-weight: var(--one-thousand);
}

@media screen and (min-width: 20rem) and (max-width: 48rem) {
  html {
    font-size: var(
      --clamp-zero-point-eight-one-two-five-rem-zero-point-seven-two-2e9f6cc1
    );
  }

  body {
    min-width: var(--zero);
    padding: var(--zero);
    overscroll-behavior-y: var(--auto);
  }

  header,
  main {
    width: var(--hundred-percent);
    max-width: var(--hundred-percent);
    padding-inline: var(--three-quarter-rem);
  }

  .mobile {
    margin-top: var(--three-quarter-rem);
    padding: var(--zero-point-seven-rem-four-fifths-rem);
    border-radius: var(--nine-tenths-rem);
    text-align: var(--center);
  }

  nav,
  nav .buttons {
    display: var(--flex);
    flex-direction: var(--row);
    align-items: var(--center);
    flex-wrap: var(--nowrap);
  }

  .panel,
  .results-outputs,
  .plan,
  .track {
    width: var(--hundred-percent);
    min-height: var(--zero);
    margin-inline: var(--zero);
  }

  .transformation-roadmap,
  details.page-break,
  .plan,
  .track,
  .meals,
  .weight-entry-form,
  .weight-history,
  .log-wrap {
    border-radius: var(--nine-tenths-rem);
  }

  .transformation-roadmap > summary,
  details.page-break > summary,
  .weight-history > summary {
    padding: var(--zero-point-nine-rem-one-rem);
    text-align: var(--center);
  }

  .results {
    display: var(--grid);
    grid-template-columns: var(--one-fr-);
    gap: var(--one-rem);
    padding: var(--one-rem);
  }

  .results-left,
  .results-right {
    width: var(--hundred-percent);
    min-width: var(--zero);
  }

  .chart {
    width: var(--min-seventy-four-vw-fifteen-rem);
    height: var(--min-seventy-four-vw-fifteen-rem);
  }

  .key {
    gap: var(--thirteen-twentieths-rem);
    margin-bottom: var(--one-quarter-rem);
  }

  .macro-results {
    gap: var(--thirteen-twentieths-rem);
  }

  .macro-result {
    padding: var(--zero-point-eight-five-rem);
  }

  .projection-wrap {
    overflow-x: var(--auto);
    scroll-snap-type: var(--x-mandatory);
    padding-bottom: var(--zero-point-three-five-rem);
  }

  .projection {
    min-width: var(--hundred-percent);
    scroll-snap-align: var(--center);
  }

  .projection-copy {
    padding-inline: var(--quarter-rem);
    text-align: var(--center);
  }

  .outputs {
    grid-template-columns: var(--one-fr-);
    gap: var(--zero-point-five-five-rem);
    margin: var(--three-quarter-rem);
  }

  .output {
    min-width: var(--zero);
    padding: var(--zero-point-eight-five-rem);
  }

  .output h2 {
    font-size: var(--clamp-one-point-five-five-rem-seven-vw-two-point-one-rem);
  }

  .help-tips {
    grid-template-columns: var(--one-fr-);
  }

  .plan,
  .track {
    padding: var(--zero-point-eight-five-rem);
  }

  .plan-header,
  .track-header,
  .meal {
    display: var(--flex);
    flex-direction: var(--column);
    align-items: var(--stretch);
    gap: var(--three-quarter-rem);
  }

  .plan-header > button,
  .meal-buttons,
  .meal-buttons button {
    width: var(--hundred-percent);
  }

  .meal-buttons {
    display: var(--grid);
    grid-template-columns: var(--one-fr-);
    gap: var(--zero-point-four-five-rem);
    flex: var(--zero-zero-auto);
  }

  .meals {
    padding: var(--zero-point-eight-five-rem);
  }

  .food-list {
    gap: var(--two-fifths-rem);
  }

  .nutrition.food-summary,
  .nutrition.food-summary:last-child {
    gap: var(--zero-point-seven-rem);
    padding: var(--three-quarter-rem);
    grid-template-columns: var(--auto-minmax-zero-one-fr-auto);
    text-align: var(--left);
  }

  .food-icon {
    width: var(--two-point-four-rem);
    height: var(--two-point-four-rem);
  }

  .food-summary-topline,
  .food-macros {
    gap: var(--zero-point-three-five-rem-zero-point-six-five-rem);
  }

  .food-macros {
    font-size: var(--zero-point-seven-eight-rem);
  }

  .plan-results {
    grid-template-columns: var(--one-fr-);
    display: var(--flex);
    flex-direction: var(--column);
    align-items: var(--stretch);
    gap: var(--one-rem);
  }

  .food-dialog {
    width: var(--calc-one-hundred-vw-minus-one-rem);
    max-height: var(--calc-one-hundred-dvh-minus-one-rem);
  }

  .food-editor {
    max-height: var(--calc-one-hundred-dvh-minus-one-rem);
    overflow-y: var(--auto);
    padding: var(--one-rem);
    border-radius: var(--nine-tenths-rem);
    margin: var(--auto);
  }

  .food-editor-header {
    gap: var(--three-quarter-rem);
    margin-bottom: var(--one-rem);
  }

  .food-editor-grid {
    gap: var(--four-fifths-rem);
    grid-template-columns: var(--repeat-four-minmax-zero-one-fr);
  }

  .food-editor-actions,
  .food-editor-primary-actions {
    display: var(--grid);
    grid-template-columns: var(--one-fr-);
    width: var(--hundred-percent);
    gap: var(--half-rem);
  }

  .food-editor-actions {
    margin-top: var(--one-rem);
    justify-content: var(--space-between);
    width: var(--hundred-percent);
  }

  .food-editor-actions button {
    width: var(--hundred-percent);
  }

  .weight-entry-form {
    padding: var(--zero-point-eight-five-rem);
    grid-template-columns: var(--minmax-zero-one-fr-minmax-zero-one-fr-auto);
    align-items: var(--end);
    gap: var(--half-rem);
  }

  .weight-entry-list {
    padding: var(--thirteen-twentieths-rem);
  }

  .weight-entry-row {
    padding: var(--zero-point-five-five-rem);
    grid-template-columns: var(
      --minmax-six-rem-one-fr-minmax-five-rem-one-fr-auto-auto
    );
    align-items: var(--center);
    gap: var(--two-fifths-rem);
  }

  .log-wrap {
    padding-inline: var(--zero);
  }

  .graph {
    width: var(--hundred-percent);
  }

  .stats {
    grid-template-columns: var(--one-fr-);
    gap: var(--three-fifths-rem);
  }

  .macro-update-notice,
  .achievement-notice {
    margin-bottom: var(--three-quarter-rem);
    padding: var(--three-quarter-rem);
    font-size: var(--zero-point-eight-two-rem);
  }

  .modal {
    width: var(--calc-one-hundred-vw-minus-one-point-five-rem);
    min-height: var(--zero);
    padding: var(--two-rem-one-point-two-five-rem);
  }

  .save-modal-buttons,
  .exit-modal-buttons {
    width: var(--hundred-percent);
    flex-direction: var(--column);
    gap: var(--thirteen-twentieths-rem);
  }

  .save-modal-buttons button,
  .exit-modal-buttons button {
    width: var(--hundred-percent);
  }

  .quiz {
    width: var(--calc-one-hundred-vw-minus-one-rem);
    padding-inline: var(--one-rem);
  }

  .modal-buttons,
  .modal-buttons-start {
    flex-direction: var(--column-reverse);
  }

  .modal-buttons button,
  .modal-buttons-start button {
    width: var(--hundred-percent);
  }

  .results-right,
  .results-hero,
  .results-hero h2,
  .results-hero p {
    text-align: var(--center);
  }

  .results-projections {
    width: var(--hundred-percent);
    max-width: var(--hundred-percent);
  }

  .timelines {
    display: var(--grid);
    grid-template-columns: var(--repeat-three-minmax-zero-one-fr);
    gap: var(--zero);
    width: var(--hundred-percent);
    padding-inline: var(--zero);
  }

  .timelines::before {
    left: var(--calc-one-hundred-percent-slash-six);
    right: var(--calc-one-hundred-percent-slash-six);
  }

  .timeline {
    min-width: var(--zero);
    text-align: var(--center);
  }

  .timeline h4 {
    width: var(--hundred-percent);
    margin-inline: var(--auto);
    text-align: var(--center);
  }

  .outputs,
  .output,
  .output .group-two,
  .output h2,
  .output h6,
  .output p {
    text-align: var(--center);
  }

  .output .group-two {
    align-items: var(--center);
  }

  .help,
  .help .spacing,
  .help .spacing-two,
  .help-tips,
  .help-tip,
  .help-tip strong,
  .help-tip p {
    text-align: var(--center);
  }

  .help .spacing,
  .help .spacing-two,
  .help-tip {
    align-items: var(--center);
  }

  .plan-header,
  .plan-hero,
  .meal,
  .food-summary-copy,
  .food-summary-topline,
  .plan-left,
  .plan-right,
  .result-wrap,
  .plan-pill {
    align-items: var(--center);
  }

  .plan-left.macro-compare {
    width: var(--hundred-percent);
    display: var(--flex);
    flex-direction: var(--column);
    align-items: var(--center);
    gap: var(--one-rem);
  }

  .plan-left.macro-compare .result-wrap {
    width: var(--hundred-percent);
    max-width: var(--eighteen-rem);
    flex: var(--none);
  }

  .plan-right {
    width: var(--hundred-percent);
  }

  .plan-pill {
    padding-bottom: var(--zero-point-eight-five-rem);
    width: var(--hundred-percent);
    min-width: var(--zero);
  }

  .bar-wrap,
  .bar-labels {
    width: var(--hundred-percent);
  }

  .log-pills {
    display: var(--grid);
    grid-template-columns: var(--repeat-two-minmax-zero-one-fr);
    gap: var(--zero-point-four-five-rem);
    width: var(--min-one-hundred-percent-twenty-eight-rem);
    margin-inline: var(--auto);
  }

  .log-pill {
    width: var(--hundred-percent);
    min-width: var(--zero);
    text-align: var(--center);
    padding-inline: var(--three-tenths-rem);
  }

  .track,
  .track-header,
  .track-hero,
  .track .space {
    text-align: var(--center);
  }

  .panel,
  .transformation-roadmap,
  details.page-break,
  .weight-history {
    scroll-margin-top: var(--five-rem);
  }

  .dialog .modal {
    padding-inline: var(--one-half-rem);
    min-height: var(--zero);
    margin-block: var(--auto);
    width: var(--min-calc-one-hundred-vw-minus-one-rem-thirty-two-rem);
    padding: var(--two-rem-one-rem);
  }

  .plan-pills {
    display: var(--grid);
    grid-template-columns: var(--repeat-two-minmax-zero-one-fr);
    gap: var(--three-quarter-rem);
    width: var(--hundred-percent);
  }

  .bar-labels {
    display: var(--flex);
    justify-content: var(--space-between);
    align-items: var(--flex-start);
    gap: var(--three-quarter-rem);
    width: var(--hundred-percent);
    text-align: var(--left);
  }

  .bar-labels > * {
    flex: var(--zero-one-auto);
  }

  .bar-labels > :last-child {
    margin-left: var(--auto);
    text-align: var(--right);
  }

  html,
  body {
    height: var(--auto);
    min-height: var(--hundred-percent);
    overflow-x: var(--hidden);
    overflow-y: var(--auto);
    -webkit-overflow-scrolling: var(--touch);
  }

  main,
  .panel,
  .results-outputs,
  .plan,
  .track {
    height: var(--auto);
    min-height: var(--zero);
    overflow: var(--visible);
  }

  dialog[open] {
    align-items: var(--flex-start);
    padding-block: var(--three-quarter-rem);
    display: var(--grid);
    place-items: var(--center);
    padding: var(--half-rem);
    overflow-x: var(--hidden);
    overflow-y: var(--auto);
    -webkit-overflow-scrolling: var(--touch);
  }

  .save-modal-buttons,
  .exit-modal-buttons,
  .modal-buttons,
  .modal-buttons-start {
    display: var(--flex);
    flex-direction: var(--row);
    align-items: var(--stretch);
    width: var(--hundred-percent);
    gap: var(--thirteen-twentieths-rem);
  }

  .save-modal-buttons button,
  .exit-modal-buttons button,
  .modal-buttons button,
  .modal-buttons-start button {
    width: var(--auto);
    min-width: var(--zero);
    white-space: var(--nowrap);
    flex: var(--one-one-zero);
    min-height: var(--three-point-two-five-rem);
    padding: var(--zero-point-eight-five-rem-four-fifths-rem);
    font-size: var(
      --clamp-zero-point-eight-two-rem-three-point-seven-vw-one-rem
    );
  }

  .dialog .modal > h4 {
    max-width: var(--none);
    text-align: var(--center);
    white-space: var(--nowrap);
    font-size: var(
      --clamp-zero-point-seven-four-rem-three-point-two-vw-zero-poin-097d0ec1
    );
  }

  .save-modal-buttons button {
    padding: var(--three-quarter-rem-half-rem);
  }

  .quiz,
  .exit-confirm .modal,
  .dialog .modal {
    margin: var(--auto);
    max-height: var(--calc-one-hundred-dvh-minus-one-rem);
    overflow-y: var(--auto);
  }

  .save-modal-buttons,
  .exit-modal-buttons,
  .modal-buttons,
  .modal-buttons-start,
  .meal-buttons,
  .food-editor-primary-actions,
  .food-editor-actions {
    display: var(--flex);
    flex-direction: var(--row);
    align-items: var(--center);
    width: var(--auto);
    gap: var(--zero-point-four-five-rem);
  }

  .save-modal-buttons button,
  .exit-modal-buttons button,
  .modal-buttons button,
  .modal-buttons-start button,
  .meal-buttons button,
  .food-editor-primary-actions button,
  .food-editor-actions button,
  .weight-entry-form button,
  .weight-entry-row button {
    flex: var(--zero-one-auto);
    width: var(--auto);
    min-width: var(--zero);
    padding: var(--zero-point-five-eight-rem-zero-point-six-eight-rem);
    white-space: var(--nowrap);
  }

  .plan,
  .plan-header,
  .plan-hero,
  .meal,
  .meal > div,
  .meal-copy,
  .meal-eyebrow,
  .meal-empty,
  .food-summary-copy,
  .food-summary-topline,
  .food-macros,
  .plan-results,
  .plan-left,
  .plan-right,
  .result-wrap,
  .plan-pill,
  .bar-labels,
  .weight-tracker-cta {
    text-align: var(--initial);
  }

  .plan-header,
  .meal {
    display: var(--flex);
    flex-direction: var(--row);
    align-items: var(--center);
    justify-content: var(--space-between);
  }

  .plan-header {
    gap: var(--three-quarter-rem);
  }

  .plan-header > button {
    width: var(--auto);
    flex: var(--zero-zero-auto);
  }

  .edit-food {
    grid-column: var(--auto);
    width: var(--auto);
    min-width: var(--four-rem);
    padding-inline: var(--thirteen-twentieths-rem);
    justify-self: var(--end);
  }

  .food-summary-topline,
  .food-macros,
  .bar-labels {
    justify-content: var(--flex-start);
  }

  .food-editor-primary-actions {
    margin-left: var(--auto);
  }

  .track,
  .track-header,
  .track-hero,
  .track .space,
  .weight-entry-form,
  .weight-entry-row {
    text-align: var(--initial);
  }

  .track-header,
  .track-hero,
  .track .space {
    align-items: var(--stretch);
  }

  .weight-entry-form .add-entry {
    width: var(--auto);
    min-width: var(--zero);
  }

  .weight-entry-row button {
    width: var(--auto);
  }

  .plan-header,
  .plan-hero,
  .plan-header h3,
  .plan-header h4,
  .plan-header p,
  .plan-hero h3,
  .plan-hero h4,
  .plan-hero p {
    text-align: var(--left);
  }

  .weight-tracker-cta {
    text-align: var(--center);
  }

  .food-dialog[open] {
    display: var(--grid);
    place-items: var(--center);
    inset: var(--zero);
    margin: var(--auto);
    padding: var(--half-rem);
    overflow-x: var(--hidden);
    overflow-y: var(--auto);
  }

  .save-modal-buttons,
  .exit-modal-buttons,
  .quiz .modal-buttons,
  .quiz .modal-buttons-start {
    display: var(--flex);
    flex-direction: var(--row);
    align-items: var(--stretch);
    justify-content: var(--stretch);
    width: var(--hundred-percent);
    gap: var(--thirteen-twentieths-rem);
  }

  .save-modal-buttons > button,
  .exit-modal-buttons > button,
  .quiz .modal-buttons > button,
  .quiz .modal-buttons-start > button {
    flex: var(--one-one-zero);
    width: var(--zero);
    max-width: var(--none);
    min-width: var(--zero);
    padding: var(--zero-point-eight-five-rem-four-fifths-rem);
    white-space: var(--nowrap);
  }

  .quiz .modal-buttons-start > button:only-child {
    width: var(--hundred-percent);
  }
}

@media screen and (min-width: 20rem) and (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: var(--smooth);
  }
}

[data-theme="dark"] .macro-label::before {
  opacity: var(--zero-point-five-two);
}

@media print {
  @page {
    size: var(--letter);
    margin: var(--one-in);
  }

  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    color-scheme: var(--light);
    --background-page: #f6f8fb;
    --color-primary: #111827;
    --color-secondary: #64748b;
    --border-content: 1px solid #d8e0ea;
    --border-button: 1px solid rgb(100 116 139 / 0.25);
    --background-content: rgb(255 255 255 / 0.8);
    --background-button: #f0f3f7;
    --background-panel: #ffffff;
    --color-remove: #991b1b;
    --background-remove: rgb(239 68 68 / 0.1);
    --border-remove: 1px solid rgb(239 68 68 / 0.22);
  }

  html {
    width: var(--ninety-two-half-rem);
    max-width: var(--ninety-two-half-rem);
    margin: var(--zero);
    background: var(--background-page);
    color: var(--color-primary);
    print-color-adjust: var(--exact);
    -webkit-print-color-adjust: var(--exact);
  }

  body {
    width: var(--ninety-two-half-rem);
    max-width: var(--ninety-two-half-rem);
    margin: var(--zero);
    background: var(--background-page);
    color: var(--color-primary);
    transform: var(--scale-thirty-three-fortieths);
    transform-origin: var(--top-left);
    print-color-adjust: var(--exact);
    -webkit-print-color-adjust: var(--exact);
  }

  header,
  main,
  footer {
    width: var(--ninety-two-half-rem);
    max-width: var(--ninety-two-half-rem);
    margin-inline: var(--zero);
  }

  footer {
    position: var(--static);
  }

  details {
    break-inside: var(--avoid);
    page-break-inside: var(--avoid);
  }

  canvas {
    print-color-adjust: var(--exact);
    -webkit-print-color-adjust: var(--exact);
  }

  .page-break {
    break-before: var(--page);
    page-break-before: var(--always);
  }

  .steps {
    grid-template-columns: var(--repeat-four-one-fr);
  }

  .outputs {
    grid-template-columns: var(--repeat-four-one-fr);
  }

  .plan-results {
    grid-template-columns: var(--auto-one-fr);
  }

  .graph {
    transform: var(--none);
  }
}