:root, :root[data-site-theme="light"] {
  --site-background: linear-gradient(336deg, #F9A3A5 36%, #FFEB84 68%, #00B0F0 100%);
  --site-primary: #236F60;
  --site-accent: #126F9B;
  --site-surface: #FFFFFFE8;
  --site-surface-alt: #F5FBF7;
  --site-text: #173C35;
  --site-text-muted: #48645E;
  --site-border: #9AB8AF;
  --site-focus: #126F9B;
  --color-title: #000000;
  --color-subtitle: #000000;
  --color-paragraph: #000000;
  --color-category-label: #000000;
  --color-component-title: #000000;
  --color-lesson-quiz: #173C35;
  --color-quiz-question: #000000;
  --color-quiz-option: #000000;
  --color-code-block-title: #AEB7D4;
  --color-auxiliary-text: #333333;
  --color-form-label: #000000;
  --color-answer-option: #000000;
  --color-dynamic-result: #000000;
  --color-feedback: #000000;
  --color-algorithm-step: #000000;
  --color-faq-title: #173C35;
  --color-faq-question: #000000;
  --color-faq-answer: #000000;
  --color-draggable-item: #000000;
  --color-metric-value: #000000;
}
:root, :root[data-site-theme="light"], :root[data-site-theme="dark"] {
  --font-hero-title: "Product Sans", system-ui, sans-serif;
  --weight-hero-title: 900;
  --gradient-hero-title: linear-gradient(194deg, #7257FF 20%, #3A79FF 40%, #32C6D4 60%);
  --font-hero-subtitle: "Product Sans", system-ui, sans-serif;
  --weight-hero-subtitle: 600;
  --color-hero-subtitle: #FFFFFF;
  --size-hero-title: 55px;
  --size-hero-subtitle: 16px;
  --font-title: "Product Sans", system-ui, sans-serif;
  --weight-title: 600;
  --size-title: 36px;
  --font-subtitle: "Product Sans", system-ui, sans-serif;
  --weight-subtitle: 500;
  --size-subtitle: 16px;
  --font-paragraph: "Product Sans", system-ui, sans-serif;
  --weight-paragraph: 400;
  --size-paragraph: 16px;
  --font-category-label: "Product Sans", system-ui, sans-serif;
  --weight-category-label: 700;
  --size-category-label: 18px;
  --font-component-title: "Product Sans", system-ui, sans-serif;
  --weight-component-title: 600;
  --size-component-title: 20px;
  --font-lesson-quiz: "Product Sans", system-ui, sans-serif;
  --weight-lesson-quiz: 500;
  --size-lesson-quiz: 15px;
  --font-quiz-question: "Product Sans", system-ui, sans-serif;
  --weight-quiz-question: 500;
  --size-quiz-question: 18px;
  --font-quiz-option: "Product Sans", system-ui, sans-serif;
  --weight-quiz-option: 400;
  --size-quiz-option: 15px;
  --font-code-block-title: "Product Sans", system-ui, sans-serif;
  --weight-code-block-title: 600;
  --size-code-block-title: 16px;
  --font-auxiliary-text: "Product Sans", system-ui, sans-serif;
  --weight-auxiliary-text: 400;
  --size-auxiliary-text: 11px;
  --font-form-label: "Product Sans", system-ui, sans-serif;
  --weight-form-label: 600;
  --size-form-label: 14px;
  --font-answer-option: "Product Sans", system-ui, sans-serif;
  --weight-answer-option: 400;
  --size-answer-option: 15px;
  --font-dynamic-result: "Product Sans", system-ui, sans-serif;
  --weight-dynamic-result: 700;
  --size-dynamic-result: 16px;
  --font-feedback: "Product Sans", system-ui, sans-serif;
  --weight-feedback: 400;
  --size-feedback: 14px;
  --font-algorithm-step: "Product Sans", system-ui, sans-serif;
  --weight-algorithm-step: 300;
  --size-algorithm-step: 14px;
  --font-faq-title: "Product Sans", system-ui, sans-serif;
  --weight-faq-title: 600;
  --size-faq-title: 32px;
  --font-faq-question: "Product Sans", system-ui, sans-serif;
  --weight-faq-question: 600;
  --size-faq-question: 16px;
  --font-faq-answer: "Product Sans", system-ui, sans-serif;
  --weight-faq-answer: 400;
  --size-faq-answer: 15px;
  --font-draggable-item: "Product Sans", system-ui, sans-serif;
  --weight-draggable-item: 400;
  --size-draggable-item: 15px;
  --font-metric-value: "Product Sans", system-ui, sans-serif;
  --weight-metric-value: 700;
  --size-metric-value: 30px;
  --quiz-feedback-background-light: #F5FBF7;
  --quiz-feedback-border-light: #9AB8AF;
  --quiz-feedback-color-light: #173C35;
}
:root[data-site-theme="dark"] {
  --site-background: linear-gradient(135deg, #022B67 0%, #07529A 55%, #063D7A 100%);
  --site-primary: #84D9F5;
  --site-accent: #F6D77C;
  --site-surface: #063D7A;
  --site-surface-alt: #07529A;
  --site-text: #F4F7FB;
  --site-text-muted: #C8D7E8;
  --site-border: #4381B6;
  --site-focus: #F6D77C;
  --color-title: #F4F7FB;
  --color-subtitle: #C8D7E8;
  --color-paragraph: #F4F7FB;
  --color-category-label: #84D9F5;
  --color-component-title: #F4F7FB;
  --color-lesson-quiz: #F4F7FB;
  --color-quiz-question: #F4F7FB;
  --color-quiz-option: #F4F7FB;
  --color-code-block-title: #AEB7D4;
  --color-auxiliary-text: #C8D7E8;
  --color-form-label: #F4F7FB;
  --color-answer-option: #F4F7FB;
  --color-dynamic-result: #F4F7FB;
  --color-feedback: #F4F7FB;
  --color-algorithm-step: #F4F7FB;
  --color-faq-title: #F4F7FB;
  --color-faq-question: #F4F7FB;
  --color-faq-answer: #C8D7E8;
  --color-draggable-item: #F4F7FB;
  --color-metric-value: #F4F7FB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-site-theme]) {
  --site-background: linear-gradient(135deg, #022B67 0%, #07529A 55%, #063D7A 100%);
  --site-primary: #84D9F5;
  --site-accent: #F6D77C;
  --site-surface: #063D7A;
  --site-surface-alt: #07529A;
  --site-text: #F4F7FB;
  --site-text-muted: #C8D7E8;
  --site-border: #4381B6;
  --site-focus: #F6D77C;
  --color-title: #F4F7FB;
  --color-subtitle: #C8D7E8;
  --color-paragraph: #F4F7FB;
  --color-category-label: #84D9F5;
  --color-component-title: #F4F7FB;
  --color-lesson-quiz: #F4F7FB;
  --color-quiz-question: #F4F7FB;
  --color-quiz-option: #F4F7FB;
  --color-code-block-title: #AEB7D4;
  --color-auxiliary-text: #C8D7E8;
  --color-form-label: #F4F7FB;
  --color-answer-option: #F4F7FB;
  --color-dynamic-result: #F4F7FB;
  --color-feedback: #F4F7FB;
  --color-algorithm-step: #F4F7FB;
  --color-faq-title: #F4F7FB;
  --color-faq-question: #F4F7FB;
  --color-faq-answer: #C8D7E8;
  --color-draggable-item: #F4F7FB;
  --color-metric-value: #F4F7FB;
  }
}
@media (min-width: 48rem) {
  :root, :root[data-site-theme="light"], :root[data-site-theme="dark"] {
    --size-hero-title: 72px;
    --size-hero-subtitle: 20px;
    --size-title: 48px;
    --size-subtitle: 19px;
    --size-paragraph: 17px;
    --size-category-label: 20px;
    --size-component-title: 23px;
    --size-lesson-quiz: 16px;
    --size-quiz-question: 19px;
    --size-quiz-option: 16px;
    --size-code-block-title: 17px;
    --size-auxiliary-text: 12px;
    --size-form-label: 15px;
    --size-answer-option: 16px;
    --size-dynamic-result: 18px;
    --size-feedback: 15px;
    --size-algorithm-step: 15px;
    --size-faq-title: 40px;
    --size-faq-question: 17px;
    --size-faq-answer: 16px;
    --size-draggable-item: 16px;
    --size-metric-value: 34px;
  }
}
@media (min-width: 70rem) {
  :root, :root[data-site-theme="light"], :root[data-site-theme="dark"] {
    --size-hero-title: 92px;
    --size-hero-subtitle: 24px;
    --size-title: 60px;
    --size-subtitle: 24px;
    --size-paragraph: 18px;
    --size-category-label: 22px;
    --size-component-title: 26px;
    --size-lesson-quiz: 17px;
    --size-quiz-question: 20px;
    --size-quiz-option: 17px;
    --size-code-block-title: 18px;
    --size-auxiliary-text: 13px;
    --size-form-label: 16px;
    --size-answer-option: 17px;
    --size-dynamic-result: 20px;
    --size-feedback: 16px;
    --size-algorithm-step: 16px;
    --size-faq-title: 48px;
    --size-faq-question: 18px;
    --size-faq-answer: 17px;
    --size-draggable-item: 17px;
    --size-metric-value: 38px;
  }
}