/* Generated from design/tokens.json. Do not edit this file directly. */
:root {
  --color-canvas: #F6F7F3;
  --color-surface: #FFFFFF;
  --color-subtle: #EDF0E8;
  --color-text: #202820;
  --color-secondary: #546051;
  --color-primary: #38662A;
  --color-primary-hover: #2C5221;
  --color-on-primary: #FFFFFF;
  --color-selection: #E6F1DE;
  --color-border: #7F8A79;
  --color-divider: #D9DED4;
  --color-focus: #315EB5;
  --color-success: #255A30;
  --color-success-surface: #EAF4E8;
  --color-error: #9B3030;
  --color-error-surface: #FBEDED;
  --color-notice: #795117;
  --color-notice-surface: #FFF4DE;
  --color-inverse: #203827;
  --color-inverse-secondary: #D9E5D3;
  --color-puzzle-blue: #315DCC;
  --color-puzzle-blue-surface: #EEF3FF;
  --color-puzzle-red: #C7463F;
  --color-puzzle-paper: #FFFFFF;
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --radius-control: 12px;
  --radius-panel: 16px;
  --radius-round: 999px;
  --radius-game-card: 16px;
  --layout-container: 1248px;
  --layout-reading: 720px;
  --layout-sidebar: 248px;
  --layout-gutter: 32px;
  --layout-mobile-gutter: 20px;
  --layout-breakpoint-mobile: 760px;
  --layout-breakpoint-compact: 1100px;
  --layout-min-target: 44px;
  --layout-pet-art: 96px;
  --layout-pet-art-mobile: 72px;
  --layout-pet-mat: 184px;
  --layout-pet-mat-mobile: 160px;
  --layout-pet-ghost: 96px;
  --layout-rug-art: 64px;
  --layout-rug-art-mobile: 56px;
  --layout-lab-art: 72px;
  --layout-lab-art-mobile: 56px;
  --layout-lab-cell: 64px;
  --layout-lab-cell-mobile: 56px;
  --layout-lab-station: 224px;
  --layout-lab-station-mobile: 200px;
  --layout-lab-number: 56px;
  --layout-lab-token-field: 200px;
  --layout-lab-token-field-mobile: 280px;
  --layout-lab-zone-field: 184px;
  --layout-lab-zone-field-mobile: 304px;
  --layout-lab-zone-field-compact: 160px;
  --layout-lab-box-scene: 300px;
  --layout-lab-box-scene-compact: 280px;
  --layout-lab-package: 96px;
  --layout-lab-pan: 200px;
  --layout-lab-scale-help: 52px;
  --layout-lab-scale-help-mobile: 104px;
  --motion-duration: 180ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-game-duration: 180ms;
  --motion-pet-settle: 260ms;
  --motion-pet-select: 320ms;
  --motion-pet-travel: 420ms;
  --shadow-game-lift: 0 6px 18px rgba(32,40,32,0.10);
  --shadow-pet-drag: 0 12px 24px rgba(32,40,32,0.20);
  --font-body: 'Noto Sans', Arial, sans-serif;
  --type-display-size: 58px;
  --type-display-line: 64px;
  --type-display-weight: 650;
  --type-display-tracking: -0.035em;
  --type-page-title-size: 48px;
  --type-page-title-line: 56px;
  --type-page-title-weight: 650;
  --type-page-title-tracking: -0.03em;
  --type-section-size: 34px;
  --type-section-line: 42px;
  --type-section-weight: 650;
  --type-section-tracking: -0.025em;
  --type-item-title-size: 24px;
  --type-item-title-line: 32px;
  --type-item-title-weight: 600;
  --type-item-title-tracking: -0.02em;
  --type-lead-size: 20px;
  --type-lead-line: 32px;
  --type-lead-weight: 400;
  --type-lead-tracking: 0;
  --type-body-size: 18px;
  --type-body-line: 30px;
  --type-body-weight: 400;
  --type-body-tracking: 0;
  --type-prompt-size: 20px;
  --type-prompt-line: 32px;
  --type-prompt-weight: 500;
  --type-prompt-tracking: -0.01em;
  --type-label-size: 16px;
  --type-label-line: 24px;
  --type-label-weight: 600;
  --type-label-tracking: 0;
  --type-help-size: 16px;
  --type-help-line: 26px;
  --type-help-weight: 400;
  --type-help-tracking: 0;
  --type-meta-size: 14px;
  --type-meta-line: 22px;
  --type-meta-weight: 400;
  --type-meta-tracking: 0;
  --type-action-size: 16px;
  --type-action-line: 24px;
  --type-action-weight: 600;
  --type-action-tracking: 0;
  --type-grade-size: 40px;
  --type-grade-line: 48px;
  --type-grade-weight: 600;
  --type-grade-tracking: -0.03em;
  --type-wordmark-size: 22px;
  --type-wordmark-line: 28px;
  --type-wordmark-weight: 700;
  --type-wordmark-tracking: -0.035em;
  --type-prose-section-size: 28px;
  --type-prose-section-line: 36px;
  --type-prose-section-weight: 650;
  --type-prose-section-tracking: -0.025em;
  --type-prose-subsection-size: 22px;
  --type-prose-subsection-line: 30px;
  --type-prose-subsection-weight: 600;
  --type-prose-subsection-tracking: -0.02em;
  --type-navigation-size: 16px;
  --type-navigation-line: 24px;
  --type-navigation-weight: 500;
  --type-navigation-tracking: 0;
  --type-lab-number-size: 24px;
  --type-lab-number-line: 32px;
  --type-lab-number-weight: 600;
  --type-lab-number-tracking: 0;
  --type-lab-equation-size: 28px;
  --type-lab-equation-line: 36px;
  --type-lab-equation-weight: 600;
  --type-lab-equation-tracking: 0;
}
@media (max-width: 760px) { :root {
  --type-display-size: 36px; --type-display-line: 42px;
  --type-page-title-size: 32px; --type-page-title-line: 40px;
  --type-section-size: 28px; --type-section-line: 36px;
  --type-item-title-size: 22px; --type-item-title-line: 30px;
  --type-lead-size: 18px; --type-lead-line: 28px;
  --type-body-size: 18px; --type-body-line: 30px;
  --type-prompt-size: 18px; --type-prompt-line: 30px;
  --type-label-size: 16px; --type-label-line: 24px;
  --type-help-size: 16px; --type-help-line: 26px;
  --type-meta-size: 14px; --type-meta-line: 22px;
  --type-action-size: 16px; --type-action-line: 24px;
  --type-grade-size: 32px; --type-grade-line: 40px;
  --type-wordmark-size: 20px; --type-wordmark-line: 28px;
  --type-prose-section-size: 26px; --type-prose-section-line: 34px;
  --type-prose-subsection-size: 22px; --type-prose-subsection-line: 30px;
  --type-navigation-size: 16px; --type-navigation-line: 24px;
  --type-lab-number-size: 24px; --type-lab-number-line: 32px;
  --type-lab-equation-size: 24px; --type-lab-equation-line: 32px;
}}