/* 01 design tokens. Generated by tools/build-tokens.cjs from tokens.json. Do not edit by hand. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
:root {
  --zo-canvas: #F7F6F1;
  --zo-surface-1: #FFFFFF;
  --zo-surface-2: #EFEEE8;
  --zo-surface-3: #E4E3DB;
  --zo-ink-primary: #020202;
  --zo-ink-secondary: #55534C;
  --zo-ink-tertiary: #64625B;
  --zo-separator: #DEDDD5;
  --zo-separator-strong: #CFCDC4;
  --zo-focus: #020202;
  --zo-scrim: rgba(2, 2, 2, 0.32);
  --zo-success: #1A6E37;
  --zo-warning: #8A5300;
  --zo-error: #B3261E;
  --zo-data-protein: #C2531C;
  --zo-data-carbs: #6A4FD8;
  --zo-data-fat: #8F6A00;
  --zo-data-sleep: #4B4FD8;
  --zo-accent: #FFFE2A;
  --zo-on-accent: #020202;
  --zo-accent-pressed: #ECEB27;
  --zo-accent-edge: inset 0 0 0 1px rgba(2, 2, 2, 0.12);
  --zo-float: 0 8px 24px rgba(2, 2, 2, 0.12);
  --zo-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --zo-brand-onyx: #020202;
  --zo-brand-signal: #FFFE2A;
  --zo-brand-ink: #F7F6F1;
  --zo-brand-ink-2: #B5B4B1;
  --zo-brand-ink-3: #9B9A97;
  --zo-brand-edge: #2D2D2B;
  --zo-brand-on-photo-ink-2: #E4E3DB;
  --zo-brand-on-photo-ink-3: #CFCDC4;
  --zo-ed-onyx-1: #121211;
  --zo-ed-onyx-2: #020202;
  --zo-ed-onyx-3: #0A0A09;
  --zo-ed-onyx-ink: #F7F6F1;
  --zo-ed-onyx-ink2: #B5B4B1;
  --zo-ed-onyx-ink3: #9B9A97;
  --zo-ed-onyx-mark: #FFFE2A;
  --zo-ed-pink-1: #FFC2E3;
  --zo-ed-pink-2: #FF9AD5;
  --zo-ed-pink-3: #F2C3EA;
  --zo-ed-pink-4: #E3C9F5;
  --zo-ed-pink-ink: #22091B;
  --zo-ed-pink-ink2: #4D2442;
  --zo-ed-pink-ink3: #5E3253;
  --zo-ed-pink-mark: #020202;
  --zo-ed-chrome-1: #16171A;
  --zo-ed-chrome-2: #25282D;
  --zo-ed-chrome-3: #040405;
  --zo-ed-chrome-4: #1A1C20;
  --zo-ed-chrome-ink: #F4F4F0;
  --zo-ed-chrome-ink2: #D2D4D8;
  --zo-ed-chrome-ink3: #C2C5CA;
  --zo-ed-chrome-mark: #F7F6F1;
  --zo-ed-chrome-shine: 20%;
  --zo-ed-neon-1: #120A16;
  --zo-ed-neon-2: #060307;
  --zo-ed-neon-3: #0E0812;
  --zo-ed-neon-ink: #FFF1D6;
  --zo-ed-neon-ink2: #E2BFD0;
  --zo-ed-neon-ink3: #C59DB6;
  --zo-ed-neon-mark: #F7F6F1;
  --zo-ed-neon-sun-1: #FFE9A8;
  --zo-ed-neon-sun-2: #FFC94A;
  --zo-ed-neon-sun-3: #FF8A3D;
  --zo-ed-neon-sun-4: #FF4D6D;
  --zo-ed-neon-sun-5: #C04DFF;
  --zo-ed-neon-stripe-1: #C04DFF;
  --zo-ed-neon-stripe-2: #FF4D6D;
  --zo-ed-neon-stripe-3: #FF8A3D;
  --zo-ed-neon-stripe-4: #FFE9A8;
  --zo-space-xs: 4px;
  --zo-space-s: 8px;
  --zo-space-m: 12px;
  --zo-space-l: 16px;
  --zo-space-xl: 20px;
  --zo-space-xxl: 24px;
  --zo-space-x3: 32px;
  --zo-space-x4: 48px;
  --zo-margin: 20px;
  --zo-card-padding: 16px;
  --zo-section-gap: 32px;
  --zo-hit: 44px;
  --zo-radius-small: 8px;
  --zo-radius-control: 12px;
  --zo-radius-card: 16px;
  --zo-radius-button: 16px;
  --zo-radius-sheet: 24px;
  --zo-radius-pill: 999px;
  --zo-stroke-hairline: 1px;
  --zo-stroke-control: 1.5px;
  --zo-stroke-focus: 2px;
  --zo-stroke-rail-app: 6px;
  --zo-stroke-rail-web: 3px;
  --zo-stroke-rest-line: 6px;
  --zo-stroke-progress: 4px;
  --zo-t-tick: 60ms;
  --zo-t-micro: 120ms;
  --zo-t-label: 180ms;
  --zo-t-quick: 240ms;
  --zo-t-shape: 360ms;
  --zo-t-beat: 480ms;
  --zo-t-momentum: 720ms;
  --zo-t-settle: 960ms;
  --zo-land: cubic-bezier(0.2, 0.9, 0.25, 1);
  --zo-leave: cubic-bezier(0.4, 0, 1, 1);
  --zo-carry: cubic-bezier(0.35, 0, 0.1, 1);
  --zo-brace: cubic-bezier(0.45, 0, 0.55, 1);
  color-scheme: light;
}
:root[data-accent="pink"] {
  --zo-accent: #FF9AD5;
  --zo-on-accent: #020202;
  --zo-accent-pressed: #F08CC7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zo-canvas: #0D0D0C;
    --zo-surface-1: #181817;
    --zo-surface-2: #222221;
    --zo-surface-3: #2D2D2B;
    --zo-ink-primary: #F7F6F1;
    --zo-ink-secondary: #B5B4B1;
    --zo-ink-tertiary: #9B9A97;
    --zo-separator: #2A2A28;
    --zo-separator-strong: #3B3B39;
    --zo-focus: #F7F6F1;
    --zo-scrim: rgba(0, 0, 0, 0.56);
    --zo-success: #6CCB8A;
    --zo-warning: #F5B85A;
    --zo-error: #FF8A80;
    --zo-data-protein: #FF8A50;
    --zo-data-carbs: #A08CFF;
    --zo-data-fat: #F2C94C;
    --zo-data-sleep: #8C90FF;
    --zo-accent-edge: none;
    --zo-float: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .zo-dark {
  --zo-canvas: #0D0D0C;
  --zo-surface-1: #181817;
  --zo-surface-2: #222221;
  --zo-surface-3: #2D2D2B;
  --zo-ink-primary: #F7F6F1;
  --zo-ink-secondary: #B5B4B1;
  --zo-ink-tertiary: #9B9A97;
  --zo-separator: #2A2A28;
  --zo-separator-strong: #3B3B39;
  --zo-focus: #F7F6F1;
  --zo-scrim: rgba(0, 0, 0, 0.56);
  --zo-success: #6CCB8A;
  --zo-warning: #F5B85A;
  --zo-error: #FF8A80;
  --zo-data-protein: #FF8A50;
  --zo-data-carbs: #A08CFF;
  --zo-data-fat: #F2C94C;
  --zo-data-sleep: #8C90FF;
  --zo-accent-edge: none;
  --zo-float: none;
  color-scheme: dark;
}
.zo-light {
  --zo-canvas: #F7F6F1;
  --zo-surface-1: #FFFFFF;
  --zo-surface-2: #EFEEE8;
  --zo-surface-3: #E4E3DB;
  --zo-ink-primary: #020202;
  --zo-ink-secondary: #55534C;
  --zo-ink-tertiary: #64625B;
  --zo-separator: #DEDDD5;
  --zo-separator-strong: #CFCDC4;
  --zo-focus: #020202;
  --zo-scrim: rgba(2, 2, 2, 0.32);
  --zo-success: #1A6E37;
  --zo-warning: #8A5300;
  --zo-error: #B3261E;
  --zo-data-protein: #C2531C;
  --zo-data-carbs: #6A4FD8;
  --zo-data-fat: #8F6A00;
  --zo-data-sleep: #4B4FD8;
  --zo-accent-edge: inset 0 0 0 1px rgba(2, 2, 2, 0.12);
  --zo-float: 0 8px 24px rgba(2, 2, 2, 0.12);
  color-scheme: light;
}
.zo-pink {   --zo-accent: #FF9AD5; --zo-on-accent: #020202; --zo-accent-pressed: #F08CC7; }
.zo-yellow {   --zo-accent: #FFFE2A; --zo-on-accent: #020202; --zo-accent-pressed: #ECEB27; }

/* Type styles. Sizes in px track iOS points at the default Dynamic Type size. */
.zo-display { font-family: var(--zo-font-display, var(--zo-font)); font-size: 34px; line-height: 40px; font-weight: 700; font-stretch: 100%; letter-spacing: -0.4px; }
.zo-title { font-family: var(--zo-font); font-size: 24px; line-height: 30px; font-weight: 600; font-stretch: 100%; letter-spacing: -0.2px; }
.zo-section { font-family: var(--zo-font); font-size: 17px; line-height: 22px; font-weight: 600; font-stretch: 100%; letter-spacing: 0px; }
.zo-body { font-family: var(--zo-font); font-size: 17px; line-height: 24px; font-weight: 400; font-stretch: 100%; letter-spacing: 0px; }
.zo-label { font-family: var(--zo-font); font-size: 15px; line-height: 20px; font-weight: 500; font-stretch: 100%; letter-spacing: 0px; }
.zo-caption { font-family: var(--zo-font); font-size: 13px; line-height: 18px; font-weight: 400; font-stretch: 100%; letter-spacing: 0px; }
.zo-mini { font-family: var(--zo-font); font-size: 11px; line-height: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0.1px; }
.zo-metric { font-family: var(--zo-font); font-size: 32px; line-height: 36px; font-weight: 700; font-stretch: 85%; letter-spacing: 0px; font-variant-numeric: tabular-nums; }
.zo-timer { font-family: var(--zo-font-display, var(--zo-font)); font-size: 64px; line-height: 64px; font-weight: 600; font-stretch: 75%; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.zo-timerHero { font-family: var(--zo-font-display, var(--zo-font)); font-size: 112px; line-height: 108px; font-weight: 700; font-stretch: 75%; letter-spacing: -2px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root { --zo-t-tick: 0ms; --zo-t-micro: 120ms; --zo-t-label: 180ms; --zo-t-quick: 180ms; --zo-t-shape: 180ms; --zo-t-beat: 180ms; --zo-t-momentum: 180ms; --zo-t-settle: 180ms; }
}