/* Duolingo brand tokens, from unfairly.ai/brand-guidelines/duolingo (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.duolingo.com/ (Playwright computed styles, pseudo-elements and boxes at 1440 and 390 wide, plus hover/active states, 2026-10-29; page height 7803 desktop, 8828 phone).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Duolingo's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F7F7F7;
  --color-ink: #4B4B4B;
  --color-ink-muted: #777777;
  --color-accent: #58CC02;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #1CB0F6;
  --color-night: #100F3E;
  --color-on-night: #FFFFFF;
  --color-feather-green: #58CC02;
  --color-mask-green: #89E219;
  --color-eel: #4B4B4B;
  --color-snow: #FFFFFF;
  --color-macaw: #1CB0F6;
  --color-cardinal: #FF4B4B;
  --color-bee: #FFC800;
  --color-fox: #FF9600;
  --color-beetle: #CE82FF;
  --color-humpback: #2B70C9;
  --color-wolf: #777777;
  --color-hare: #AFAFAF;
  --color-swan: #E5E5E5;
  --color-polar: #F7F7F7;
  --color-wing-overlay: #43C000;
  --color-beak-inner: #B66E28;
  --color-beak-lower-feet: #F49000;
  --color-beak-upper: #FFC200;
  --color-beak-highlight: #FFDE00;
  --color-tongue-pink: #FFCAFF;
  --color-squid: #EBE3E3;
  --color-walking-fish: #FFDFE0;
  --color-flamingo: #FFB2B2;
  --color-pig: #F5A4A4;
  --color-crab: #FF7878;
  --color-fire-ant: #EA2B2B;
  --color-canary: #FFF5D3;
  --color-duck: #FBE56D;
  --color-lion: #FFB100;
  --color-cheetah: #FFCE8E;
  --color-monkey: #E5A259;
  --color-camel: #E7A601;
  --color-guinea-pig: #CD7900;
  --color-grizzly: #A56644;
  --color-sea-sponge: #D7FFB8;
  --color-turtle: #A5ED6E;
  --color-tree-frog: #58A700;
  --color-iguana: #DDF4FF;
  --color-anchovy: #D2E4E8;
  --color-beluga: #BBF2FF;
  --color-moon-jelly: #7AF0F2;
  --color-blue-jay: #84D8FF;
  --color-whale: #1899D6;
  --color-narwhal: #1453A3;
  --color-starfish: #FFAADE;
  --color-betta: #9069CD;
  --color-butterfly: #6F4EA1;
  --color-owl-illustration-name-for-feather-green: #58CC02;
  --color-anytime-navy: #042C60;
  --color-super-night: #100F3E;
  --color-super-ink: #000437;
  --color-black: #000000;
  --color-button-primary-fill: #58CC02;
  --color-button-primary-text: #FFFFFF;
  --color-button-outline-fill: #FFFFFF;
  --color-button-outline-text: #1CB0F6;
  --color-button-on-dark-text: #000437;
  --color-app-badge-fill: #FFFFFF;
  --color-app-badge-text: #4B4B4B;
  --color-course-chip-text: #777777;
  --color-nav-language-text: #AFAFAF;
  --color-footer-link-text: #A5ED6E;
  --font-display: "Mochiy Pop P One", Nunito, system-ui, sans-serif;
  --font-display-original: feather, "Mochiy Pop P One", Nunito, system-ui, sans-serif;
  --font-body: "Baloo 2", Nunito, system-ui, sans-serif;
  --font-body-original: duolingo-sans, "Baloo 2", Nunito, system-ui, sans-serif;
  --page-margin: 226px;
  --section-padding: 96px;
  --container-max: 988px;
  --hero-text-max: 480px;
  --card-gap: 12px;
  --nav-height: 70px;
  --grid-gutter: 101px;
  --grid-columns: 2;
  --text-display-xl-size: 56.5px;
  --text-display-xl-line: 1.416;
  --text-display-xl-weight: 400;
  --text-display-xl-tracking: -1.13px;
  --text-display-l-size: 42.5px;
  --text-display-l-line: 1.412;
  --text-display-l-weight: 400;
  --text-hero-size: 32px;
  --text-hero-line: 1.375;
  --text-hero-weight: 650;
  --text-hero-tracking: -0.4px;
  --text-body-size: 17px;
  --text-body-line: 1.41;
  --text-body-weight: 475;
  --text-body-tracking: -0.25px;
  --text-button-size: 15px;
  --text-button-line: 1.33;
  --text-button-weight: 650;
  --text-button-tracking: 0.5px;
  --text-badge-size: 17px;
  --text-badge-line: 1.18;
  --text-badge-weight: 650;
  --text-badge-tracking: -0.34px;
  --text-footer-head-size: 19px;
  --text-footer-head-line: 1.4;
  --text-footer-head-weight: 650;
  --text-footer-head-tracking: -0.38px;
  --text-footer-link-size: 15px;
  --text-footer-link-line: 1.47;
  --text-footer-link-weight: 650;
  --text-footer-link-tracking: -0.3px;
  --text-footer-lang-size: 13px;
  --text-footer-lang-line: 1.23;
  --text-footer-lang-weight: 650;
  --text-footer-lang-tracking: -0.26px;
  --radius-button-primary: 12px;
  --radius-button-outline: 12px;
  --radius-button-on-dark: 12px;
  --radius-app-badge: 12px;
  --ease-button-press: linear;
  --ease-sticky-nav-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-sticky-nav-reveal: 400ms;
  --icon-chevron: 14px;
  --icon-store-glyph: 34px;
  --icon-course-flag: 36px;
}
/* Phone values measured at 390px; Duolingo's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 15px;
    --section-padding: 96px;
    --text-display-xl-size: 32px;
    --text-display-l-size: 32px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 16px; padding-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: inset 0 -4px 0 #58A700; --button-padding-x: 16px; border-radius: 12px;
  background: #58CC02; color: #FFFFFF;
  font: 650 15px/1 var(--font-body);
}
.button-primary:hover { filter: brightness(1.1); } /* observed */
.button-primary:active { transform: translateY(4px); box-shadow: none; clip-path: inset(0 0 4px 0 round 12px); filter: brightness(1.1); } /* observed */
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 16px; letter-spacing: 0.5px; text-transform: uppercase; border: 2px solid #E5E5E5; border-bottom-width: 4px; --button-padding-x: 16px; border-radius: 12px;
  background: #FFFFFF; color: #1CB0F6;
  font: 650 15px/1 var(--font-body);
}
.button-outline:hover { filter: brightness(0.9); } /* observed */
.button-outline:active { transform: translateY(2px); border-bottom-width: 2px; height: 48px; } /* observed */
.button-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 16px; padding-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase; --color-button-on-dark-face: linear-gradient(#FFFFFF 0 46px, transparent 46px); box-shadow: inset 0 -4px 0 rgba(255,255,255,0.5); --button-padding-x: 16px; border-radius: 12px;
  background: var(--color-button-on-dark-face); color: #000437;
  font: 650 15px/1 var(--font-body);
}
.button-on-dark:active { transform: translateY(4px); box-shadow: none; clip-path: inset(0 0 4px 0 round 12px); } /* our reading */