/* Nutriful's shared dark appearance. Load before components.css. */
@font-face {
  font-family: DM;
  src: url('fonts/dm-sans-400-normal.ttf') format('truetype');
  font-weight: 400;
  size-adjust: 103%;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url('fonts/dm-sans-500-normal.ttf') format('truetype');
  font-weight: 500;
  size-adjust: 103%;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url('fonts/dm-sans-600-normal.ttf') format('truetype');
  font-weight: 600;
  size-adjust: 103%;
  font-display: swap;
}


:root {
  color-scheme: dark;
  --font-body: -apple-system, BlinkMacSystemFont, DM, system-ui, 'Segoe UI', sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, DM, system-ui, 'Segoe UI', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-caption: 0.75rem;
  --text-footnote: 0.8125rem;
  --text-label: 0.9375rem;
  --text-body: 1.0625rem;
  --text-title: 1.375rem;
  --text-section: clamp(2.6875rem, 4vw, 3.6875rem);
  --dark: #0b130e;
  --ink: #edf2ec;
  --paper: #0b130e;
  --surface: #142019;
  --surface-soft: #1b2a20;
  --section-alt: #101b14;
  --body: #b4c4b0;
  --muted: #aec3a7;
  --line: #ffffff14;
  --card-line: #ffffff12;
  --green: #29c24a;
  --green-hover: #4bd669;
  --on-green: #061d0e;
  --mint: #b3e6b9;
  --mint-hover: #c9edc6;
  --on-mint: #142c1a;
  --bright: #63df80;
  --accent: #72de89;
  --glass-surface: #ffffff14;
  --glass-border: #ffffff1a;
  --glass-blur: 8px;
  --glass-highlight: inset 0 1px 0 #ffffff0a;
  --danger: #ffa899;
  --diagram-line: #4d7857;
  --shadow: #00000016;
  --invitation: #0b130e;
  --invitation-glow: #0b130e;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-control: 12px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --touch-target: 44px;
  --compact-control-height: 48px;
  --header-size: 64px;
  --header-orb-mark-size: 38px;
  /* The beta arrow uses a 1.5-unit stroke in a 20-unit viewBox at 17px. */
  --control-icon-line: 1.275px;
  --mobile-story-copy-height: 16.5rem;
  --motion-fast: 160ms;
  --motion-control: 240ms;
  --motion-reveal: 420ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --visual-columns: 1.08fr 1fr;
  --visual-gap: 72px;
  --visual-card-height: clamp(380px, calc(100svh - 216px), 520px);
  --visual-card-radius: 32px;
  --device-width: clamp(180px, calc((100svh - 260px) * .48913), 258px);
  --device-screen-width: calc(var(--device-width) * .89333334);
  --device-screen-height: calc(var(--device-width) * 2760 / 1350 * .95);
  --header-bottom: 93px;
  font-family: var(--font-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
@media (max-width: 850px) { :root { --text-section: 2.25rem; } }
@media (max-width: 650px), (max-width: 1000px) and (max-height: 500px) {
  :root { --text-body: 1rem; --text-section: 1.75rem; --text-label: 0.875rem; --device-width: min(220px, calc(100vw - 72px)); --header-size: var(--compact-control-height); --header-orb-mark-size: 32px; --header-bottom: calc(env(safe-area-inset-top, 0px) + 10px + var(--header-size)); }
  :root.has-scroll-story { --device-width: min(220px, calc(100vw - 72px), max(90px, calc((100svh - var(--header-bottom) - var(--mobile-story-copy-height) - 128px) * .48913))); }
}
@media (max-width: 650px) and (max-height: 650px) {
  :root.has-scroll-story { --device-width: min(220px, calc(100vw - 72px), max(90px, calc((100svh - var(--header-bottom) - var(--mobile-story-copy-height) - 128px) * .48913))); }
}
@media (min-width: 651px) and (max-width: 1000px) and (max-height: 500px) {
  :root.has-scroll-story { --device-width: min(150px, max(90px, calc((100svh - var(--header-bottom) - 108px) * .48913))); }
}
/* Safari selects the installed SF Pro faces; no Apple font is redistributed. */
@supports (-webkit-touch-callout: none) {
  :root { --font-body: ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; }
}
@media (prefers-contrast: more) {
  :root { --body: #d5e0d1; --muted: #d5e0d1; --line: #ffffff55; --card-line: #ffffff55; }
}