/* Blender brand tokens, from unfairly.ai/brand-guidelines/blender (checked 2026-10-30).
   Sizes, spacing and components were measured on https://www.blender.org/about/logo/ (blender.org's logo, trademark, about, foundation, license, website and press pages and homepage (text and HTML, fetched 2026-10-30), the Blender Web Assets v2.2.10 source (the official front-end framework for blender.org sites, read from projects.blender.org/infrastructure/web-assets) and the live bthree theme CSS; no PDF brand guide exists).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Blender's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #F2F2F3;
  --color-surface: #FAFAFA;
  --color-ink: #4C4D52;
  --color-ink-muted: #8D8E96;
  --color-accent: #E87D0D;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #265787;
  --color-border: #E2E3E4;
  --color-night: #292D32;
  --color-on-night: #FFFFFF;
  --color-blender-orange-pms-716: #E87D0D;
  --color-blender-blue-pms-647: #265787;
  --color-white: #FFFFFF;
  --color-favicon-orange-rendered: #EA7600;
  --color-background: #F2F2F3;
  --color-background-primary: #FAFAFA;
  --color-background-secondary: #EAEBEB;
  --color-background-tertiary: #E2E3E4;
  --color-text: #4C4D52;
  --color-text-primary: #424348;
  --color-text-secondary: #8D8E96;
  --color-text-tertiary: #B2B3B8;
  --color-accent-blue: #0099FF;
  --color-accent-button-gradient-start: #6183FF;
  --color-accent-button-gradient-end: #47AAF5;
  --color-body-dark-ground: #292D32;
  --color-global-navbar: #1C1E22;
  --color-secondary-navbar-separator: #40474F;
  --color-secondary-navbar-link: #D2D6DA;
  --color-button-ground: #EAEDF0;
  --color-button-text: #677A8E;
  --color-input-border: #D3D9DF;
  --color-info: #13BDE7;
  --color-info-background: #D9F5FC;
  --color-success: #6BB125;
  --color-warning: #E4A511;
  --color-danger: #EE5353;
  --color-code: #903D94;
  --color-dark-theme-surface: #30353B;
  --color-dark-theme-text: #C7CBD1;
  --color-massive-title-teal: #46EBC2;
  --color-near-black-box: #1C1C1C;
  --color-massive-title-blue: #0066FF;
  --color-blue-tint-box: #F2F7FF;
  --color-massive-title-purple: #9300FF;
  --color-purple-tint-box: #F8F2FF;
  --color-footer-heading-grey: #ABB2BA;
  --color-black: #000000;
  --color-survey-bar-link-cyan: #10A2C6;
  --color-nav-logo-orange-as-served: #F4792B;
  --color-nav-logo-blue-as-served: #0E548B;
  --color-nav-logo-white-as-served: #FEFEFE;
  --color-footer-link-grey: #737E8C;
  --color-footer-column-rule: #454C54;
  --color-card-shadow-grey: #959DA5;
  --color-accent-glow-blue: #0052FF;
  --color-accent-gradient-hover-start: #708FFF;
  --color-accent-gradient-hover-end: #5AB3F6;
  --color-accent-button-hover-ground: #F3F5F6;
  --color-ecosystem-gradient-start: #020381;
  --color-ecosystem-gradient-end: #2874FC;
  --color-button-accent-fill: #47AAF5;
  --color-button-accent-text: #FFFFFF;
  --color-button-on-art-primary-text: #000000;
  --color-button-on-art-secondary-text: #FFFFFF;
  --color-text-link-on-dark-text: #FFFFFF;
  --font-display: Inter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Source Code Pro", "Fira Mono", monospace;
  --font-mono-original: ui-monospace, "Source Code Pro", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Source Code Pro", "Fira Mono", monospace;
  --page-margin: 151px;
  --section-padding: 48px;
  --container-max: 1170px;
  --hero-text-max: 800px;
  --card-gap: 16px;
  --nav-height: 64px;
  --grid-gutter: 16px;
  --grid-columns: 4;
  --text-loading-size: 18px;
  --text-loading-line: 1.556;
  --text-loading-weight: 400;
  --text-hero-size: 72px;
  --text-hero-line: 1;
  --text-hero-weight: 800;
  --text-massive-size: 72px;
  --text-massive-line: 1.3;
  --text-massive-weight: 800;
  --text-display-size: 72px;
  --text-display-line: 1.556;
  --text-display-weight: 800;
  --text-h1-size: 32px;
  --text-h1-line: 1.556;
  --text-h1-weight: 600;
  --text-h2-size: 28px;
  --text-h2-line: 1.143;
  --text-h2-weight: 600;
  --text-lead-hero-size: 24px;
  --text-lead-hero-line: 1.167;
  --text-lead-hero-weight: 400;
  --text-lead-size: 24px;
  --text-lead-line: 1.556;
  --text-lead-weight: 400;
  --text-title-size: 21px;
  --text-title-line: 1.167;
  --text-title-weight: 400;
  --text-medium-size: 20px;
  --text-medium-line: 1.556;
  --text-medium-weight: 400;
  --text-body-size: 18px;
  --text-body-line: 1.556;
  --text-body-weight: 400;
  --text-button-size: 18px;
  --text-button-line: 1.778;
  --text-button-weight: 500;
  --text-alert-size: 18px;
  --text-alert-line: 1.556;
  --text-alert-weight: 400;
  --text-kicker-size: 14px;
  --text-kicker-line: 1.556;
  --text-kicker-weight: 600;
  --text-nav-size: 14px;
  --text-nav-line: 1.556;
  --text-nav-weight: 400;
  --text-footer-size: 14px;
  --text-footer-line: 1.714;
  --text-footer-weight: 400;
  --radius-button-accent: 6px;
  --radius-button-on-art-primary: 6px;
  --radius-button-on-art-secondary: 6px;
  --radius-massive-title-box: 12px;
  --ease-transition: ease;
  --duration-transition: 150ms;
  --ease-transition-fast: ease-out;
  --duration-transition-fast: 80ms;
  --ease-transition-slow: ease;
  --duration-transition-slow: 250ms;
  --ease-press: ease-out;
  --duration-press: 80ms;
  --icon-button-icon: 12px;
}
/* Phone values measured at 390px; Blender's CSS switches at 899px. */
@media (max-width: 899px) {
  :root {
    --page-margin: 16px;
    --section-padding: 48px;
    --text-loading-size: 14px;
    --text-hero-size: 36px;
    --text-massive-size: 50.64px;
    --text-display-size: 28px;
    --text-h1-size: 28px;
    --text-h2-size: 24px;
    --text-lead-hero-size: 21px;
    --text-lead-size: 21px;
    --text-title-size: 18px;
    --text-body-size: 14px;
    --text-button-size: 14px;
    --text-alert-size: 14px;
    --text-kicker-size: 12px;
    --text-nav-size: 15px;
    --text-footer-size: 12px;
  }
}
.button-accent {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 16px; border-radius: 6px;
  background: #47AAF5; color: #FFFFFF;
  font: 500 18px/1 var(--font-body);
}
.button-accent:hover { background-image: linear-gradient(350deg, #708FFF, #5AB3F6); } /* observed */
.button-accent:active { transform: scale(0.95); } /* published */
.button-on-art-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 48px; border-radius: 6px;
  background: var(--color-rgba-255-255-255-0-9); color: #000000;
  font: 500 18px/1 var(--font-body);
}
.button-on-art-primary:hover { background-color: #FFFFFF; } /* observed */
.button-on-art-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 16px; border-radius: 6px;
  background: var(--color-rgba-255-255-255-0-1); color: #FFFFFF;
  font: 400 18px/1 var(--font-body);
}
.button-on-art-secondary:hover { background-color: rgba(255,255,255,0.2); } /* observed */