:root {
  --header-height: 120px;
  --header-height-1px: calc(var(--header-height) - 1px);
  
  --color-black--rgb: 0, 0, 0;
  --color-black: #000000;
  --color-white--rgb: 255, 255, 255;
  --color-white: #ffffff;

  
  --color-grey-010--rgb: 248, 248, 248;
  --color-grey-010: #f8f8f8;           
  --color-grey-020--rgb: 160, 160, 160;
  --color-grey-020: #a0a0a0;           
  --color-grey-050--rgb: 217, 217, 217;
  --color-grey-050: #d9d9d9;           
  --color-grey-100--rgb: 164, 172, 193;
  --color-grey-100: #a4acc1;           
  --color-grey-200--rgb: 171, 171, 171;
  --color-grey-200: #ababab;           
  --color-grey-300--rgb: 98, 101, 112;
  --color-grey-300: #626570;           
  --color-grey-400--rgb: 70, 70, 70;
  --color-grey-400: #464646;           
  --color-grey-500: #1d1d1f;           

  
  --color-blue-010: #b3d4fc;           
  --color-blue-020: #87ceeb;           
  --color-blue-030: #4facfe;           
  --color-blue-050: #347ce9;           
  --color-blue-100--rgb: 38, 90, 166;
  --color-blue-100: #265aa6;           
  --color-blue-200--rgb: 22, 41, 91;
  --color-blue-200: #16295b;           

  
  --color-cyan-050: #00ffff;           
  --color-cyan-100: #00c0b3;           

  
  --color-green-020: #00df66;          
  --color-green-050: #2e8431;          
  --color-green-100--rgb: 67, 98, 54;
  --color-green-100: #436236;          
  --color-green-200: #155724;          

  
  --color-yellow-010: #ffeeba;         
  --color-yellow-050: #ffff00;         

  
  --color-orange-100: #f0ab16;         
  --color-orange-200: #d24726;         

  
  --color-brown-100: #b38600;          
  --color-brown-200: #856404;          

  
  --color-red: #ff3030;                
  --color-red-200: #d62020;            
  --color-error--rgb: 217, 89, 89;
  --color-error: #d95959;              

  
  --color-pink-100: #d6249f;           
  --color-pink-200: #bc1888;           

  
  --color-purple-100: #a855f7;         
  --color-purple-200: #7c3aed;         

  
  --color-highlight--rgb: 255, 196, 90;
  --color-highlight: #ffc45a;          

}


/*
 * Semantic tokens: what a colour is for, not what it looks like.
 *
 * The palette above is fixed and means the same in both themes: a navy
 * section is navy and the white text on it is white whether the page is
 * light or dark (the dark theme only mutes the two brand blues, see below). Everything that belongs to the "paper" of the page - its
 * background, cards, body text, hairlines - goes through the tokens below,
 * and only these tokens change in the dark theme. A stylesheet that needs a
 * colour to follow the theme uses a semantic token; one that needs a colour
 * to stay put uses the palette.
 */
:root {
  color-scheme: light;

  /* Page and surfaces, from the page itself up to things that float over it. */
  --color-bg-primary: #ffffff;
  --color-bg-primary--rgb: 255, 255, 255;
  --color-bg-secondary: #f8f8f8;
  --color-bg-tertiary: #f0f0f0;
  --color-surface-card: #ffffff;
  --color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* Text. */
  --color-text-primary: #000000;
  --color-text-secondary: #626570;
  --color-text-muted: #a0a0a0;
  --color-text-heading: #16295b;

  /* Interactive colour: links, active states, icons that react to the pointer. */
  --color-link: #265aa6;
  --color-link-hover: #347ce9;
  --color-accent: #265aa6;

  /* Hairlines between parts of the page, and the stronger line of inputs and outlined buttons. */
  --color-border: #d9d9d9;
  --color-border-strong: #16295b;

  /*
   * Channels for translucent washes over the page: rgba(var(--color-ink--rgb), 0.05)
   * is a faint grey on a light page and a faint light veil on a dark one, and
   * the tint does the same in the brand navy.
   */
  --color-ink--rgb: 0, 0, 0;
  --color-tint--rgb: 22, 41, 91;

  /*
   * Other organisations' logos are drawn for a white page, so on the dark
   * theme they sit on white plates. The plate and the logo on it are dimmed
   * together, so a logo's own white box melts into the plate and the plates
   * do not glare on the dark page. Apply it to the element that carries the
   * plate.
   */
  --logo-plate-filter: none;
}


/*
 * Dark theme, set on <html> by includes/core/theme-mode.php before the first
 * paint. It is as deep as YouTube's dark theme, but the greys lean cool - a
 * graphite with a trace of blue, as on liga.net - which sits better next to
 * the navy of the menu bar and the brand sections than a neutral grey does.
 * Text leans the other way, a warm off-white: pure white on near-black glows
 * and tires the eye on long reads. Body text is about 14:1, headings 16:1.
 * The few steps YouTube's palette does not name (muted text, input fills, the
 * stronger line of inputs) sit between those, with every text colour still
 * clearing WCAG AA on every surface.
 */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-primary: #161b1f;
  --color-bg-primary--rgb: 22, 27, 31;
  --color-bg-secondary: #1a2025;
  --color-bg-tertiary: #283036;
  --color-surface-card: #1f262b;
  --color-surface-overlay: rgba(0, 0, 0, 0.7);

  --color-text-primary: #ebe8e4;
  --color-text-secondary: #aeb8bd;
  --color-text-muted: #86939b;
  --color-text-heading: #f6f3ef;

  --color-link: #3ea6ff;
  --color-link-hover: #7cc2ff;
  --color-accent: #3ea6ff;

  --color-border: #2c353b;
  --color-border-strong: #4b565e;

  --color-ink--rgb: 255, 255, 255;
  --color-tint--rgb: 255, 255, 255;

  --logo-plate-filter: brightness(0.86);

  /*
   * The brand blues are the one part of the palette with a dark-theme
   * variant. Full-strength navy in large blocks - the menu bar, section
   * backgrounds, page heroes - glares against YouTube's neutral greys, so on
   * the dark theme it goes a step deeper while keeping its saturation: still
   * clearly the brand, no longer the brightest thing on the page. The
   * brighter blue follows it. White text on both keeps well over 7:1.
   */
  --color-blue-200: #13234d;
  --color-blue-200--rgb: 19, 35, 77;
  --color-blue-100: #224f92;
  --color-blue-100--rgb: 34, 79, 146;
}



@media (max-width: 899px) {
  :root {
    --wrap: 5vw;
    --wrap-1: 5vw;
    --wrap-2: 5vw;
    --wrap-colored: 5vw;
  }
}

/*
 * The phone's type and spacing scale. Pages grew their own sizes one by one,
 * so on a phone the same kind of text ran from 14 to 18px and a section
 * heading could be bigger than the page title above it. Apple's phone pages
 * keep a few steps and never break them: reading text at 17pt in their face
 * (about 16px in Roboto), list titles a step above, section headings clearly
 * under the page title, captions no smaller than 12px. Shared components use
 * these steps on phones; a page that needs another size says so in its own
 * stylesheet. One value here moves the whole site, which is the point.
 */
@media (max-width: 899px) {
  :root {
    --fs-title: 1.625rem;      /* page title, h1 */
    --fs-section: 1.375rem;    /* section heading under it */
    --fs-card: 1.0625rem;      /* titles of cards in lists */
    --fs-body: 1rem;           /* reading text */
    --lh-body: 1.6;
    --fs-secondary: 0.875rem;  /* descriptions, meta */
    --fs-caption: 0.75rem;     /* dates, badges: the smallest step */
    --space-section: 3rem;     /* between the big blocks of a page */
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  :root {
    --wrap: 5vw;
    --wrap-1: 5vw;
    --wrap-2: 5vw;
    --wrap-colored: 5vw;
  }
}

@media (min-width: 1200px) and (max-width: 2199px) {
  :root {
    --wrap: 2.604vw;
    --wrap-1: 15vw;
    --wrap-2: 22.708vw;
    --wrap-colored: calc(var(--wrap-1) - var(--wrap));
  }
}

@media (min-width: 2200px) {
  :root {
    --wrap: 5vw;
    --wrap-1: 15vw;
    --wrap-2: 23.437vw;
    --wrap-colored: calc(var(--wrap-1) - var(--wrap));
  }
}



html {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-blue-100);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue-200);
}

* {
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
input,
textarea,
button,
select {
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
}

html,
body {
  overflow-x: clip;
  height: unset !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 140%;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

html._lock,
body._lock {
  overflow: hidden;
}

/*
 * Theme switch, driven by theme-toggle.js.
 *
 * While the class is on, the page jumps straight to the new colours:
 * otherwise every component with a hover transition on its colours would
 * fade on its own schedule and the switch would look smeared. The toggle's
 * icon is the one thing that keeps animating.
 *
 * Where the browser has view transitions, the old page dissolves into the new
 * one - the calm cross-fade macOS and iOS use when the appearance changes,
 * about a third of a second on Apple's ease-in-out curve.
 */
/*
 * Light text on a dark page looks bolder than the same text dark on light,
 * and macOS's subpixel smoothing makes it worse; greyscale smoothing keeps the
 * weight as designed (Windows ignores this and needs nothing).
 */
html[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.theme-switching *:not(.theme-toggle__icon, .theme-toggle__icon *),
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

/*
 * Visitors who asked their system for less motion get the end state of every
 * animation at once. Durations go to 1ms rather than none so transitionend and
 * animationend still fire and scripts waiting on them keep working; endless
 * loops run a single pass and stop. The accessibility panel's "no animations"
 * switch does the same for everyone else (ms-accessibility.css).
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}