/* YouTube design tokens (desktop web, 2025-26 look). Study copy for our team; YouTube belongs to Google.
   SOURCE OF EVERY VALUE
   - REAL: the "--yt-sys-color-baseline--*" colours, "--yt-sys-measurement--*" sizes and the type scale were read live
     from youtube.com with Playwright on 14 Oct 2026 (signed out, public pages), in YouTube's own Light theme and in its
     own Dark theme (switched with YouTube's real Appearance menu). Names are YouTube's own. In 2026 YouTube has renamed
     the old "--yt-spec-*" tokens to "--yt-sys-color-baseline--*" (only one old name is left in its stylesheet).
   - REAL (CSS): motion curves and times from YouTube's own stylesheets (kevlar_base, www-player.css, 14 Oct 2026).
   - MEASURED: values read from our own screenshots (1440 x 900, 1x) where the page uses a value not in the token set.
   - OURS: the short role names (--yt-page, --yt-text ...) are our own shortcuts that point at YouTube's tokens.
   Dark mode: add class "yt-dark" to <html> (YouTube itself uses the attribute html[dark]; both work here).
   Islands: .yt-dark-scope makes one part dark inside a light page; .yt-light-scope makes it light again. */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url("fonts/Roboto-normal-100-900-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url("fonts/Roboto-italic-100-900-latin.woff2") format("woff2"); }

:root, .yt-light-scope, .yt-dark-scope {
  /* ---- YouTube colour tokens, LIGHT (real, read live; 203 tokens) ---- */
  --yt-sys-color-baseline--add-on-green-base-background: #fbfee6;
  --yt-sys-color-baseline--add-on-green-primary: #8abb03;
  --yt-sys-color-baseline--add-on-green-text-primary: #5c7e00;
  --yt-sys-color-baseline--add-on-magenta-base-background: #fb99c9;
  --yt-sys-color-baseline--add-on-magenta-primary: #c62273;
  --yt-sys-color-baseline--add-on-magenta-text-primary: #891c52;
  --yt-sys-color-baseline--add-on-orange-base-background: #ffd7ca;
  --yt-sys-color-baseline--add-on-orange-primary: #bd3d19;
  --yt-sys-color-baseline--add-on-orange-text-primary: #882712;
  --yt-sys-color-baseline--add-on-purple-base-background: #eabfff;
  --yt-sys-color-baseline--add-on-purple-primary: #7406ac;
  --yt-sys-color-baseline--add-on-purple-text-primary: #52077a;
  --yt-sys-color-baseline--add-on-red-base-background: #ff8099;
  --yt-sys-color-baseline--add-on-red-primary: #c30027;
  --yt-sys-color-baseline--add-on-red-text-primary: #7f0119;
  --yt-sys-color-baseline--add-on-teal-base-background: #d3ffec;
  --yt-sys-color-baseline--add-on-teal-primary: #00ad65;
  --yt-sys-color-baseline--add-on-teal-text-primary: #00673c;
  --yt-sys-color-baseline--additive-background: rgba(0,0,0,0.05);
  --yt-sys-color-baseline--additive-background-inverse: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--assistive-feed-themed-gradient-1: #d4fff8;
  --yt-sys-color-baseline--assistive-feed-themed-gradient-2: #ffdeff;
  --yt-sys-color-baseline--assistive-feed-themed-gradient-3: #ffe6e6;
  --yt-sys-color-baseline--assistive-feed-vibrant-gradient-1: #007a65;
  --yt-sys-color-baseline--assistive-feed-vibrant-gradient-2: #7f0e7f;
  --yt-sys-color-baseline--assistive-feed-vibrant-gradient-3: #ff8983;
  --yt-sys-color-baseline--background-complete: #deffde;
  --yt-sys-color-baseline--background-warning: #ffeacf;
  --yt-sys-color-baseline--base-background: #fff;
  --yt-sys-color-baseline--blue-1: #c8c9f9;
  --yt-sys-color-baseline--blue-2: #a4a6ff;
  --yt-sys-color-baseline--blue-3: #8689fc;
  --yt-sys-color-baseline--blue-4: #575bfe;
  --yt-sys-color-baseline--blue-5: #3b3fff;
  --yt-sys-color-baseline--blue-6: #2c2ea7;
  --yt-sys-color-baseline--blue-7: #202275;
  --yt-sys-color-baseline--brand-red-contrast: #c30027;
  --yt-sys-color-baseline--button-chip-background-hover: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--call-to-action: #065fd4;
  --yt-sys-color-baseline--call-to-action-hover: #0556bf;
  --yt-sys-color-baseline--call-to-action-inverse: #3ea6ff;
  --yt-sys-color-baseline--error-background-red: rgba(255,85,119,0.2);
  --yt-sys-color-baseline--error-indicator: #c30027;
  --yt-sys-color-baseline--error-indicator-inverse: #f57;
  --yt-sys-color-baseline--feed-vibrant-gradient1: #007a65;
  --yt-sys-color-baseline--feed-vibrant-gradient2: #7f0e7f;
  --yt-sys-color-baseline--feed-vibrant-gradient3: #f57;
  --yt-sys-color-baseline--filled-hover-light: #333;
  --yt-sys-color-baseline--filled-state-layer: #181818;
  --yt-sys-color-baseline--filled-touch-light: #606060;
  --yt-sys-color-baseline--frosted-glass-desktop: rgba(255,255,255,0.9);
  --yt-sys-color-baseline--frosted-glass-mobile: rgba(255,255,255,0.9);
  --yt-sys-color-baseline--genai-1: #007a65;
  --yt-sys-color-baseline--genai-1-additive: rgba(0,122,101,0.2);
  --yt-sys-color-baseline--genai-2: #7f0e7f;
  --yt-sys-color-baseline--genai-2-additive: rgba(127,14,127,0.2);
  --yt-sys-color-baseline--genai-3: #aa09aa;
  --yt-sys-color-baseline--genai-3-additive: rgba(170,9,170,0.2);
  --yt-sys-color-baseline--genai-4: #ff4e45;
  --yt-sys-color-baseline--genai-4-additive: rgba(255,78,69,0.2);
  --yt-sys-color-baseline--green-6: #8abb03;
  --yt-sys-color-baseline--grey-4: #bcbbd2;
  --yt-sys-color-baseline--grey-6: #373740;
  --yt-sys-color-baseline--icon-warning: #be8800;
  --yt-sys-color-baseline--inverted-background: #0f0f0f;
  --yt-sys-color-baseline--inverted-background-hover: #3f3f3f;
  --yt-sys-color-baseline--keyboard-background: #ecf1fb;
  --yt-sys-color-baseline--keyboard-background-action: #a6c9fa;
  --yt-sys-color-baseline--keyboard-background-bar: #ecf1fb;
  --yt-sys-color-baseline--keyboard-background-emoji: #fff;
  --yt-sys-color-baseline--keyboard-background-key: #fff;
  --yt-sys-color-baseline--keyboard-background-key-alt: #dbe2fc;
  --yt-sys-color-baseline--keyboard-background-switch: #bbc6e7;
  --yt-sys-color-baseline--keyboard-divider: #caced6;
  --yt-sys-color-baseline--keyboard-text-action: #171c23;
  --yt-sys-color-baseline--keyboard-text-character: #171c23;
  --yt-sys-color-baseline--keyboard-text-chevron: #666;
  --yt-sys-color-baseline--keyboard-text-icon: #2f3032;
  --yt-sys-color-baseline--keyboard-text-symbol: #46494f;
  --yt-sys-color-baseline--menu-background: #fff;
  --yt-sys-color-baseline--mono-filled-hover: #272727;
  --yt-sys-color-baseline--mono-filled-hover-inverse: #d9d9d9;
  --yt-sys-color-baseline--mono-tonal-hover: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--mono-tonal-hover-inverse: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--outline: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--outline-inverse: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--outline-inverse-opaque: #3f3f3f;
  --yt-sys-color-baseline--outline-opaque: #e5e5e5;
  --yt-sys-color-baseline--outline-rim: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--outline-rim-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--outline-wash: rgba(0,0,0,0);
  --yt-sys-color-baseline--overlay-additive-background: rgba(40,40,40,0.6);
  --yt-sys-color-baseline--overlay-background-brand: rgba(225,0,45,0.9);
  --yt-sys-color-baseline--overlay-background-extra-light: rgba(0,0,0,0.03);
  --yt-sys-color-baseline--overlay-background-heavy: rgba(0,0,0,0.8);
  --yt-sys-color-baseline--overlay-background-light: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--overlay-background-medium: rgba(0,0,0,0.6);
  --yt-sys-color-baseline--overlay-background-medium-heavy: rgba(0,0,0,0.4);
  --yt-sys-color-baseline--overlay-background-medium-light: rgba(0,0,0,0.3);
  --yt-sys-color-baseline--overlay-background-solid: #000;
  --yt-sys-color-baseline--overlay-button-primary: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--overlay-button-secondary: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--overlay-button-secondary-darker: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--overlay-call-to-action: #3ea6ff;
  --yt-sys-color-baseline--overlay-call-to-action-hover: #65b8ff;
  --yt-sys-color-baseline--overlay-filled-hover: #e6e6e6;
  --yt-sys-color-baseline--overlay-filled-hover-light: #f1f1f1;
  --yt-sys-color-baseline--overlay-filled-state-layer: #ccc;
  --yt-sys-color-baseline--overlay-filled-touch-light: #f9f9f9;
  --yt-sys-color-baseline--overlay-green: #2ba640;
  --yt-sys-color-baseline--overlay-outline: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--overlay-outline-inverse: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--overlay-outline-rim: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-outline-rim-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-solid-background: #e6e6e6;
  --yt-sys-color-baseline--overlay-solid-background-inverse: #0f0f0f;
  --yt-sys-color-baseline--overlay-solid-rim: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--overlay-solid-rim-inverse: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--overlay-solid-wash: #fff;
  --yt-sys-color-baseline--overlay-solid-wash-inverse: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--overlay-text-disabled: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--overlay-text-primary: #fff;
  --yt-sys-color-baseline--overlay-text-primary-inverse: #030303;
  --yt-sys-color-baseline--overlay-text-secondary: rgba(255,255,255,0.7);
  --yt-sys-color-baseline--overlay-tonal-background: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--overlay-tonal-background-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-tonal-hover: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--overlay-tonal-hover-light: rgba(242,242,245,0.3);
  --yt-sys-color-baseline--overlay-tonal-rim: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-tonal-rim-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-tonal-state-layer: rgba(248,248,250,0.1);
  --yt-sys-color-baseline--overlay-tonal-touch-light: rgba(242,242,245,0.3);
  --yt-sys-color-baseline--overlay-tonal-wash: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-tonal-wash-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--overlay-touch-response: #fff;
  --yt-sys-color-baseline--overlay-touch-response-inverse: #000;
  --yt-sys-color-baseline--purple-6: #7406ac;
  --yt-sys-color-baseline--raised-background: #fff;
  --yt-sys-color-baseline--red-3: #f57;
  --yt-sys-color-baseline--red-4: #fe2a54;
  --yt-sys-color-baseline--red-indicator: #e1002d;
  --yt-sys-color-baseline--scrim-background-gradient-1: rgba(255,255,255,0);
  --yt-sys-color-baseline--scrim-background-gradient-2: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--scrim-background-gradient-3: rgba(255,255,255,0.6);
  --yt-sys-color-baseline--scrim-background-gradient-4: rgba(255,255,255,0.9);
  --yt-sys-color-baseline--scrim-background-gradient-5: white;
  --yt-sys-color-baseline--shadow-medium: rgba(0,0,0,0.25);
  --yt-sys-color-baseline--solid-background: #0f0f0f;
  --yt-sys-color-baseline--solid-background-inverse: #e6e6e6;
  --yt-sys-color-baseline--solid-rim: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--solid-rim-inverse: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--solid-wash: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--solid-wash-inverse: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--state-mono-filled-hovered: rgba(255,255,255,0.05);
  --yt-sys-color-baseline--state-mono-filled-pressed: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--state-mono-standard-hovered: rgba(0,0,0,0.05);
  --yt-sys-color-baseline--state-mono-standard-pressed: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--state-overlay-filled-hovered: rgba(0,0,0,0.2);
  --yt-sys-color-baseline--state-overlay-filled-pressed: rgba(0,0,0,0.3);
  --yt-sys-color-baseline--state-overlay-standard-hovered: rgba(255,255,255,0.05);
  --yt-sys-color-baseline--state-overlay-standard-pressed: rgba(255,255,255,0.05);
  --yt-sys-color-baseline--static-ad-yellow: #fbc02d;
  --yt-sys-color-baseline--static-black: #0f0f0f;
  --yt-sys-color-baseline--static-brand-black: #000;
  --yt-sys-color-baseline--static-brand-red: #f03;
  --yt-sys-color-baseline--static-brand-white: #fff;
  --yt-sys-color-baseline--static-clear-black: rgba(0,0,0,0);
  --yt-sys-color-baseline--static-clear-color: rgba(255,255,255,0);
  --yt-sys-color-baseline--static-dark-grey: #333;
  --yt-sys-color-baseline--static-grey: #606060;
  --yt-sys-color-baseline--static-magenta: #ff2791;
  --yt-sys-color-baseline--static-medium-magenta: #e01378;
  --yt-sys-color-baseline--static-white-background: #fff;
  --yt-sys-color-baseline--status-bar: rgba(0,0,0,0.6);
  --yt-sys-color-baseline--suggested-action: #def1ff;
  --yt-sys-color-baseline--suggested-action-hover: #dadfe6;
  --yt-sys-color-baseline--suggested-action-inverse: #263850;
  --yt-sys-color-baseline--surface-container: #f9f9f9;
  --yt-sys-color-baseline--system-bar: #000;
  --yt-sys-color-baseline--text-complete: #005917;
  --yt-sys-color-baseline--text-disabled: #909090;
  --yt-sys-color-baseline--text-disabled-inverse: #717171;
  --yt-sys-color-baseline--text-error: #990412;
  --yt-sys-color-baseline--text-primary: #0f0f0f;
  --yt-sys-color-baseline--text-primary-inverse: #fff;
  --yt-sys-color-baseline--text-secondary: #606060;
  --yt-sys-color-baseline--text-secondary-inverse: #aaa;
  --yt-sys-color-baseline--text-warning: #7c2900;
  --yt-sys-color-baseline--themed-green: #107516;
  --yt-sys-color-baseline--themed-green-inverse: #2ba640;
  --yt-sys-color-baseline--themed-overlay-background: rgba(255,255,255,0.7);
  --yt-sys-color-baseline--tonal-background: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--tonal-background-inverse: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--tonal-hover-light: rgba(242,242,245,0.8);
  --yt-sys-color-baseline--tonal-rim: rgba(0,0,0,0.05);
  --yt-sys-color-baseline--tonal-rim-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--tonal-state-layer: rgba(9,9,10,0.1);
  --yt-sys-color-baseline--tonal-touch-light: #f1f1f1;
  --yt-sys-color-baseline--tonal-wash: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--tonal-wash-inverse: rgba(255,255,255,0.05);
  --yt-sys-color-baseline--touch-response: #000;
  --yt-sys-color-baseline--touch-response-inverse: #fff;
  --yt-sys-color-baseline--wordmark-text: #000;

  /* ---- type scale (real: YouTube's typestack tokens; YouTube writes them in rem on a 10px root, shown here in px) ---- */
  --yt-font: Roboto, Arial, sans-serif;            /* real: every screen we read uses Roboto */
  --yt-font-display: "YouTube Sans", Roboto, sans-serif; /* real name; the font itself is not openly licensed, so Roboto shows */
  --yt-font-player: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif; /* real (www-player.css) */
  --yt-type-action-l-default: 500 16px/22px var(--yt-font);
  --yt-type-action-l-heavy: 700 16px/22px var(--yt-font);
  --yt-type-action-l-heavy-tall: 700 16px/22px var(--yt-font);
  --yt-type-action-l-tall: 500 16px/22px var(--yt-font);
  --yt-type-action-m-default: 500 14px/20px var(--yt-font);
  --yt-type-action-m-heavy: 700 14px/20px var(--yt-font);
  --yt-type-action-m-heavy-tall: 700 14px/20px var(--yt-font);
  --yt-type-action-m-tall: 500 14px/20px var(--yt-font);
  --yt-type-action-s-default: 500 12px/18px var(--yt-font);
  --yt-type-action-s-heavy: 700 12px/18px var(--yt-font);
  --yt-type-action-s-heavy-tall: 700 12px/18px var(--yt-font);
  --yt-type-action-s-tall: 500 12px/18px var(--yt-font);
  --yt-type-action-xl-default: 500 18px/26px var(--yt-font);
  --yt-type-action-xl-heavy: 700 18px/26px var(--yt-font);
  --yt-type-action-xl-heavy-tall: 700 18px/26px var(--yt-font);
  --yt-type-action-xl-tall: 500 18px/26px var(--yt-font);
  --yt-type-action-xs-default: 500 10px/16px var(--yt-font);
  --yt-type-action-xs-heavy: 700 10px/16px var(--yt-font);
  --yt-type-action-xs-heavy-tall: 700 10px/16px var(--yt-font);
  --yt-type-action-xs-tall: 500 10px/16px var(--yt-font);
  --yt-type-body-l-default: 400 16px/22px var(--yt-font);
  --yt-type-body-l-heavy: 500 16px/22px var(--yt-font);
  --yt-type-body-l-heavy-tall: 500 16px/22px var(--yt-font);
  --yt-type-body-l-tall: 400 16px/22px var(--yt-font);
  --yt-type-body-m-default: 400 14px/20px var(--yt-font);
  --yt-type-body-m-heavy: 500 14px/20px var(--yt-font);
  --yt-type-body-m-heavy-tall: 500 14px/20px var(--yt-font);
  --yt-type-body-m-tall: 400 14px/20px var(--yt-font);
  --yt-type-body-s-default: 400 12px/18px var(--yt-font);
  --yt-type-body-s-heavy: 500 12px/18px var(--yt-font);
  --yt-type-body-s-heavy-tall: 500 12px/18px var(--yt-font);
  --yt-type-body-s-tall: 400 12px/18px var(--yt-font);
  --yt-type-body-xl-default: 400 18px/26px var(--yt-font);
  --yt-type-body-xl-heavy: 500 18px/26px var(--yt-font);
  --yt-type-body-xl-heavy-tall: 500 18px/26px var(--yt-font);
  --yt-type-body-xl-tall: 400 18px/26px var(--yt-font);
  --yt-type-body-xs-default: 400 10px/16px var(--yt-font);
  --yt-type-body-xs-heavy: 500 10px/16px var(--yt-font);
  --yt-type-body-xs-heavy-tall: 500 10px/16px var(--yt-font);
  --yt-type-body-xs-tall: 400 10px/16px var(--yt-font);
  --yt-type-display-l-default: 300 56px/78px var(--yt-font-display);
  --yt-type-display-l-emphasized-medial: 700 64px/90px var(--yt-font-display);
  --yt-type-display-l-heavy: 700 56px/78px var(--yt-font-display);
  --yt-type-display-l-heavy-tall: 700 56px/78px var(--yt-font-display);
  --yt-type-display-l-medial: 300 64px/90px var(--yt-font-display);
  --yt-type-display-l-tall: 300 56px/78px var(--yt-font-display);
  --yt-type-display-m-default: 300 40px/54px var(--yt-font-display);
  --yt-type-display-m-emphasized-medial: 700 48px/66px var(--yt-font-display);
  --yt-type-display-m-heavy: 700 40px/54px var(--yt-font-display);
  --yt-type-display-m-heavy-tall: 700 40px/54px var(--yt-font-display);
  --yt-type-display-m-medial: 300 48px/66px var(--yt-font-display);
  --yt-type-display-m-tall: 300 40px/54px var(--yt-font-display);
  --yt-type-display-s-default: 300 32px/44px var(--yt-font-display);
  --yt-type-display-s-emphasized-medial: 700 36px/50px var(--yt-font-display);
  --yt-type-display-s-heavy: 700 32px/44px var(--yt-font-display);
  --yt-type-display-s-heavy-tall: 700 32px/44px var(--yt-font-display);
  --yt-type-display-s-medial: 300 36px/50px var(--yt-font-display);
  --yt-type-display-s-tall: 300 32px/44px var(--yt-font-display);
  --yt-type-display-xs-default: 300 24px/32px var(--yt-font-display);
  --yt-type-display-xs-emphasized-medial: 700 28px/38px var(--yt-font-display);
  --yt-type-display-xs-heavy: 700 24px/32px var(--yt-font-display);
  --yt-type-display-xs-heavy-tall: 700 24px/32px var(--yt-font-display);
  --yt-type-display-xs-medial: 300 28px/38px var(--yt-font-display);
  --yt-type-display-xs-tall: 300 24px/32px var(--yt-font-display);
  --yt-type-headline-l-default: 700 32px/44px var(--yt-font);
  --yt-type-headline-l-emphasized-medial: 900 36px/50px var(--yt-font);
  --yt-type-headline-l-heavy: 900 32px/44px var(--yt-font);
  --yt-type-headline-l-heavy-tall: 900 32px/44px var(--yt-font);
  --yt-type-headline-l-medial: 700 36px/50px var(--yt-font);
  --yt-type-headline-l-tall: 700 32px/44px var(--yt-font);
  --yt-type-headline-m-default: 700 24px/32px var(--yt-font);
  --yt-type-headline-m-emphasized-medial: 900 28px/38px var(--yt-font);
  --yt-type-headline-m-heavy: 900 24px/32px var(--yt-font);
  --yt-type-headline-m-heavy-tall: 900 24px/32px var(--yt-font);
  --yt-type-headline-m-medial: 700 28px/38px var(--yt-font);
  --yt-type-headline-m-tall: 700 24px/32px var(--yt-font);
  --yt-type-headline-s-default: 700 20px/28px var(--yt-font);
  --yt-type-headline-s-emphasized-medial: 900 24px/32px var(--yt-font);
  --yt-type-headline-s-heavy: 900 20px/28px var(--yt-font);
  --yt-type-headline-s-heavy-tall: 900 20px/28px var(--yt-font);
  --yt-type-headline-s-medial: 700 24px/32px var(--yt-font);
  --yt-type-headline-s-tall: 700 20px/28px var(--yt-font);
  --yt-type-headline-xs-default: 700 18px/26px var(--yt-font);
  --yt-type-headline-xs-emphasized-medial: 900 20px/28px var(--yt-font);
  --yt-type-headline-xs-heavy: 900 18px/26px var(--yt-font);
  --yt-type-headline-xs-heavy-tall: 900 18px/26px var(--yt-font);
  --yt-type-headline-xs-medial: 700 20px/28px var(--yt-font);
  --yt-type-headline-xs-tall: 700 18px/26px var(--yt-font);
  --yt-type-title-l-baseline: 700 22px/32px var(--yt-font);
  --yt-type-title-l-emphasized: 900 22px/32px var(--yt-font);
  --yt-type-title-l-emphasized-medial: 900 28px/40px var(--yt-font);
  --yt-type-title-l-medial: 700 28px/40px var(--yt-font);
  --yt-type-title-m-baseline: 700 20px/28px var(--yt-font);
  --yt-type-title-m-emphasized: 900 20px/28px var(--yt-font);
  --yt-type-title-m-emphasized-medial: 900 24px/32px var(--yt-font);
  --yt-type-title-m-medial: 700 24px/32px var(--yt-font);
  --yt-type-title-s-baseline: 700 18px/26px var(--yt-font);
  --yt-type-title-s-emphasized: 900 18px/26px var(--yt-font);
  --yt-type-title-s-emphasized-medial: 900 20px/28px var(--yt-font);
  --yt-type-title-s-medial: 700 20px/28px var(--yt-font);

  /* ---- sizes (real: --yt-sys-measurement--*) ---- */
  --yt-sys-measurement--action-height-compact: 32px;
  --yt-sys-measurement--action-height-hero: 56px;
  --yt-sys-measurement--action-height-prominent: 48px;
  --yt-sys-measurement--action-height-standard: 36px;
  --yt-sys-measurement--action-height-tiny: 24px;
  --yt-sys-measurement--avatar-size-comfortable: 40px;
  --yt-sys-measurement--avatar-size-compact: 32px;
  --yt-sys-measurement--avatar-size-condensed: 24px;
  --yt-sys-measurement--avatar-size-cozy: 36px;
  --yt-sys-measurement--avatar-size-expanded: 48px;
  --yt-sys-measurement--avatar-size-hero: 72px;
  --yt-sys-measurement--avatar-size-huge: 144px;
  --yt-sys-measurement--avatar-size-legend: 120px;
  --yt-sys-measurement--avatar-size-max: 160px;
  --yt-sys-measurement--avatar-size-mini: 16px;
  --yt-sys-measurement--avatar-size-prominent: 56px;
  --yt-sys-measurement--feed-col-gap-med: 12px;
  --yt-sys-measurement--feed-col-gap-small: 8px;
  --yt-sys-measurement--feed-col-gap-wide: 16px;
  --yt-sys-measurement--feed-margin-med: 16px;
  --yt-sys-measurement--feed-margin-small: 0px;
  --yt-sys-measurement--feed-margin-wide: 16px;
  --yt-sys-measurement--feed-max-width-med: 840px;
  --yt-sys-measurement--feed-max-width-wide: 1024px;
  --yt-sys-measurement--feed-row-gap-med: 12px;
  --yt-sys-measurement--feed-row-gap-small: 8px;
  --yt-sys-measurement--feed-row-gap-wide: 16px;
  --yt-sys-measurement--icon-size-comfortable: 24px;
  --yt-sys-measurement--icon-size-compact: 18px;
  --yt-sys-measurement--icon-size-condensed: 16px;
  --yt-sys-measurement--icon-size-cozy: 20px;
  --yt-sys-measurement--icon-size-expanded: 36px;
  --yt-sys-measurement--icon-size-hero: 48px;
  --yt-sys-measurement--icon-size-mini: 12px;
  --yt-sys-measurement--icon-size-prominent: 40px;
  --yt-sys-measurement--icon-size-standard: 16px;
  --yt-sys-measurement--radius-comfortable: 16px;
  --yt-sys-measurement--radius-compact: 8px;
  --yt-sys-measurement--radius-condensed: 4px;
  --yt-sys-measurement--radius-cozy: 12px;
  --yt-sys-measurement--radius-expanded: 18px;
  --yt-sys-measurement--radius-hero: 24px;
  --yt-sys-measurement--radius-huge: 32px;
  --yt-sys-measurement--radius-max: 48px;
  --yt-sys-measurement--radius-min: 2px;
  --yt-sys-measurement--radius-prominent: 20px;
  --yt-sys-measurement--shelf-item-gap-med: 16px;
  --yt-sys-measurement--shelf-item-gap-small: 12px;
  --yt-sys-measurement--shelf-item-gap-wide: 16px;
  --yt-sys-measurement--shelf-peek-med: 48px;
  --yt-sys-measurement--shelf-peek-small: 24px;
  --yt-sys-measurement--shelf-peek-wide: 64px;
  --yt-sys-measurement--size-72: 72px;
  --yt-sys-measurement--size-comfortable: 24px;
  --yt-sys-measurement--size-compact: 16px;
  --yt-sys-measurement--size-condensed: 12px;
  --yt-sys-measurement--size-cozy: 18px;
  --yt-sys-measurement--size-expanded: 32px;
  --yt-sys-measurement--size-hairline: 1px;
  --yt-sys-measurement--size-hero: 40px;
  --yt-sys-measurement--size-huge: 56px;
  --yt-sys-measurement--size-legend: 48px;
  --yt-sys-measurement--size-max: 64px;
  --yt-sys-measurement--size-min: 4px;
  --yt-sys-measurement--size-mini: 8px;
  --yt-sys-measurement--size-prominent: 36px;
  --yt-sys-measurement--size-tiny: 6px;
  --yt-sys-measurement--stroke-comfortable: 1px;
  --yt-sys-measurement--stroke-cozy: 0.5px;
  --yt-sys-measurement--stroke-expanded: 2px;

  /* ---- radius (real: measured on the live page = the same values YouTube's CSS uses) ---- */
  --yt-r-badge: 4px;      /* duration badge (real) */
  --yt-r-chip: 8px;       /* chips (real: .ytChipShapeChip border-radius 8px) */
  --yt-r-guide: 10px;     /* guide entry pill (real) */
  --yt-r-thumb: 12px;     /* thumbnails, description box, menus (real) */
  --yt-r-thumb-s: 8px;    /* small thumbnails in up-next (real) */
  --yt-r-btn: 20px;       /* 40px buttons (real) */
  --yt-r-pill: 28px;      /* player control pills (real, www-player.css) */
  --yt-r-search: 40px;    /* search box ends (real) */
  --yt-r-round: 50%;

  /* ---- motion (real, from YouTube's own CSS) ---- */
  --yt-ease-hover: cubic-bezier(.25, 1, .8, 1);      /* hover wash in, .45s (ytLightTouchFeedbackShape) */
  --yt-dur-hover: 450ms;
  --yt-dur-press: 40ms;                              /* pressed: the wash jumps in 40ms */
  --yt-ease-standard: cubic-bezier(.05, 0, 0, 1);    /* touch feedback scale .9 -> 1, masthead, player buttons */
  --yt-dur-feedback: 300ms;
  --yt-dur-player-btn: 200ms;                        /* player pill button hover (www-player.css) */
  --yt-ease-player: cubic-bezier(0, 0, .2, 1);       /* player controls fade */
  --yt-dur-player-fade: 100ms;
  --yt-dur-autohide: 250ms;                          /* est.: controls hide after about 3 s idle, fade 250ms */
  --yt-dur-tooltip: 100ms;                           /* est. */

  /* ---- shadows (real unless marked) ---- */
  --yt-shadow-menu: 0 4px 32px 0 rgba(0, 0, 0, .1);   /* menu popup (real, read live) */
  --yt-shadow-arrow: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 0 4px 0 rgba(0, 0, 0, .2); /* shelf arrow buttons (real) */
  --yt-shadow-search-inset: inset 0 1px 2px #EEEEEE;  /* search box (real, light only) */
  --yt-shadow-raised: 0 1px 2px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .1); /* est.: cards on the empty home */

  /* ---- role shortcuts (OURS) pointing at YouTube's real tokens ---- */
  --yt-page: var(--yt-sys-color-baseline--base-background);
  --yt-raised: var(--yt-sys-color-baseline--raised-background);
  --yt-menu-bg: var(--yt-sys-color-baseline--menu-background);
  --yt-text: var(--yt-sys-color-baseline--text-primary);
  --yt-text-2: var(--yt-sys-color-baseline--text-secondary);
  --yt-text-off: var(--yt-sys-color-baseline--text-disabled);
  --yt-tonal: var(--yt-sys-color-baseline--additive-background);       /* chips, tonal buttons, guide "chosen" */
  --yt-tonal-hover: var(--yt-sys-color-baseline--mono-tonal-hover);    /* chips + tonal buttons on hover */
  --yt-hover-wash: var(--yt-sys-color-baseline--state-mono-standard-hovered);
  --yt-press-wash: var(--yt-sys-color-baseline--state-mono-standard-pressed);
  --yt-outline: var(--yt-sys-color-baseline--outline);                 /* hairlines */
  --yt-outline-btn: rgba(0, 0, 0, .2);                                 /* real: outline buttons ("Sign in") */
  --yt-divider: #CCCCCC;                                               /* measured: guide section lines */
  --yt-cta: var(--yt-sys-color-baseline--call-to-action);
  --yt-cta-hover-bg: var(--yt-sys-color-baseline--suggested-action);   /* real: "Sign in" hover fill */
  --yt-inverse: var(--yt-sys-color-baseline--inverted-background);     /* filled mono button (Subscribe, chosen chip) */
  --yt-on-inverse: var(--yt-sys-color-baseline--text-primary-inverse);
  --yt-inverse-hover: var(--yt-sys-color-baseline--mono-filled-hover);
  --yt-brand: var(--yt-sys-color-baseline--static-brand-red);          /* #FF0033 logo, progress bar */
  --yt-brand-2: var(--yt-sys-color-baseline--static-magenta);          /* #FF2791 end of the progress gradient */
  --yt-progress: linear-gradient(90deg, #FF0033 80%, #FF2791 100%);    /* real (2025 player and Shorts) */
  --yt-wordmark: var(--yt-sys-color-baseline--wordmark-text);
  --yt-masthead: var(--yt-sys-color-baseline--frosted-glass-desktop);  /* real: top bar, 90% white + blur(48px) */
  --yt-masthead-blur: blur(48px);
  --yt-search-bg: #FFFFFF;          /* real */
  --yt-search-border: #C6C6C6;      /* real */
  --yt-search-btn: #F8F8F8;         /* real */
  --yt-search-btn-border: #D3D3D3;  /* real */
  --yt-badge-bg: var(--yt-sys-color-baseline--overlay-background-medium); /* duration badge rgba(0,0,0,.6) */
  --yt-overlay-pill: var(--yt-sys-color-baseline--overlay-background-medium-light); /* player pills rgba(0,0,0,.3) */
  --yt-overlay-hover: var(--yt-sys-color-baseline--overlay-button-secondary);
  --yt-overlay-press: var(--yt-sys-color-baseline--overlay-tonal-hover);
  --yt-tooltip-bg: rgba(97, 97, 97, .92);  /* est.: YouTube's tooltip grey (paper-tooltip) */
  --yt-player-text: #EEEEEE;               /* real (www-player.css) */
  --yt-progress-track: rgba(40, 40, 40, .6); /* real: overlay-additive-background */
  --yt-progress-load: rgba(255, 255, 255, .4); /* real */
  --yt-chapter-bg: #F8F6F1;                /* measured: "7 chapters" strip in search (light) */
  --yt-thread-line: #E5E5E5;               /* real: outline-opaque, comment reply lines */
  --yt-focus: var(--yt-sys-color-baseline--text-primary); /* real: focus ring = 2px text colour (ytChipShapeFocused) */
  --yt-scrim: rgba(0, 0, 0, .5);           /* est. */
  --yt-skeleton: var(--yt-sys-color-baseline--additive-background);
  color-scheme: light;
}

html.yt-dark, html[dark], .yt-dark-scope {
  --yt-outline-btn: rgba(255, 255, 255, .2);  /* real */
  --yt-divider: #3F3F3F;                       /* measured */
  --yt-search-bg: #121212;                     /* real */
  --yt-search-border: #303030;                 /* real */
  --yt-search-btn: rgba(255, 255, 255, .08);   /* real */
  --yt-search-btn-border: #303030;             /* real */
  --yt-shadow-search-inset: none;
  --yt-chapter-bg: #2B2621;                    /* measured from the dark search shot (the strip takes a tint from the video) */
  --yt-thread-line: #3F3F3F;
  --yt-shadow-menu: 0 4px 32px 0 rgba(0, 0, 0, .1); /* real (same) */
  --yt-shadow-raised: 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

html.yt-dark, html[dark], .yt-dark-scope {
  /* ---- YouTube colour tokens, DARK (real, read live from YouTube's own Dark theme) ---- */
  --yt-sys-color-baseline--add-on-green-base-background: #5c7e00;
  --yt-sys-color-baseline--add-on-green-primary: #5c7e00;
  --yt-sys-color-baseline--add-on-green-text-primary: #fbfee6;
  --yt-sys-color-baseline--add-on-magenta-base-background: #891c52;
  --yt-sys-color-baseline--add-on-magenta-primary: #fc7aba;
  --yt-sys-color-baseline--add-on-magenta-text-primary: #fb99c9;
  --yt-sys-color-baseline--add-on-orange-base-background: #882712;
  --yt-sys-color-baseline--add-on-orange-primary: #ffb39b;
  --yt-sys-color-baseline--add-on-orange-text-primary: #ffd7ca;
  --yt-sys-color-baseline--add-on-purple-base-background: #52077a;
  --yt-sys-color-baseline--add-on-purple-primary: #dd98ff;
  --yt-sys-color-baseline--add-on-purple-text-primary: #eabfff;
  --yt-sys-color-baseline--add-on-red-base-background: #7f0119;
  --yt-sys-color-baseline--add-on-red-primary: #f57;
  --yt-sys-color-baseline--add-on-red-text-primary: #ff8099;
  --yt-sys-color-baseline--add-on-teal-base-background: #00673c;
  --yt-sys-color-baseline--add-on-teal-primary: #00673c;
  --yt-sys-color-baseline--add-on-teal-text-primary: #d3ffec;
  --yt-sys-color-baseline--additive-background: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--additive-background-inverse: rgba(0,0,0,0.05);
  --yt-sys-color-baseline--assistive-feed-themed-gradient-1: #005446;
  --yt-sys-color-baseline--assistive-feed-themed-gradient-2: #39003f;
  --yt-sys-color-baseline--assistive-feed-themed-gradient-3: #590000;
  --yt-sys-color-baseline--background-complete: rgba(0,63,13,0.6);
  --yt-sys-color-baseline--background-warning: rgba(124,41,0,0.6);
  --yt-sys-color-baseline--base-background: #0f0f0f;
  --yt-sys-color-baseline--blue-1: #202275;
  --yt-sys-color-baseline--blue-2: #2c2ea7;
  --yt-sys-color-baseline--blue-3: #3b3fff;
  --yt-sys-color-baseline--blue-5: #8689fc;
  --yt-sys-color-baseline--blue-6: #a4a6ff;
  --yt-sys-color-baseline--blue-7: #c8c9f9;
  --yt-sys-color-baseline--brand-red-contrast: #f57;
  --yt-sys-color-baseline--button-chip-background-hover: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--call-to-action: #3ea6ff;
  --yt-sys-color-baseline--call-to-action-hover: #65b8ff;
  --yt-sys-color-baseline--call-to-action-inverse: #065fd4;
  --yt-sys-color-baseline--error-indicator: #f57;
  --yt-sys-color-baseline--error-indicator-inverse: #c30027;
  --yt-sys-color-baseline--filled-hover-light: #f1f1f1;
  --yt-sys-color-baseline--filled-state-layer: #ccc;
  --yt-sys-color-baseline--filled-touch-light: #f9f9f9;
  --yt-sys-color-baseline--frosted-glass-desktop: rgba(15,15,15,0.8);
  --yt-sys-color-baseline--frosted-glass-mobile: rgba(15,15,15,0.7);
  --yt-sys-color-baseline--genai-1-additive: rgba(0,122,101,0.3);
  --yt-sys-color-baseline--genai-2-additive: rgba(127,14,127,0.3);
  --yt-sys-color-baseline--genai-3-additive: rgba(170,9,170,0.3);
  --yt-sys-color-baseline--genai-4-additive: rgba(255,78,69,0.3);
  --yt-sys-color-baseline--green-6: #f5ffb7;
  --yt-sys-color-baseline--grey-6: #edecfb;
  --yt-sys-color-baseline--icon-warning: #fbc02d;
  --yt-sys-color-baseline--inverted-background: #f1f1f1;
  --yt-sys-color-baseline--inverted-background-hover: #d9d9d9;
  --yt-sys-color-baseline--keyboard-background: #171c23;
  --yt-sys-color-baseline--keyboard-background-action: #d5e3fc;
  --yt-sys-color-baseline--keyboard-background-bar: #2b3138;
  --yt-sys-color-baseline--keyboard-background-emoji: #171c23;
  --yt-sys-color-baseline--keyboard-background-key: #2b3138;
  --yt-sys-color-baseline--keyboard-background-key-alt: #42474f;
  --yt-sys-color-baseline--keyboard-background-switch: #a0abcb;
  --yt-sys-color-baseline--keyboard-divider: #30353b;
  --yt-sys-color-baseline--keyboard-text-character: #ecf1fb;
  --yt-sys-color-baseline--keyboard-text-chevron: #fff;
  --yt-sys-color-baseline--keyboard-text-icon: #fff;
  --yt-sys-color-baseline--keyboard-text-symbol: #c5cbd4;
  --yt-sys-color-baseline--menu-background: #282828;
  --yt-sys-color-baseline--mono-filled-hover: #d9d9d9;
  --yt-sys-color-baseline--mono-filled-hover-inverse: #272727;
  --yt-sys-color-baseline--mono-tonal-hover: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--mono-tonal-hover-inverse: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--outline: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--outline-inverse: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--outline-inverse-opaque: #e5e5e5;
  --yt-sys-color-baseline--outline-opaque: #3f3f3f;
  --yt-sys-color-baseline--outline-rim: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--outline-rim-inverse: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--purple-6: #dd98ff;
  --yt-sys-color-baseline--raised-background: #212121;
  --yt-sys-color-baseline--red-3: #f03;
  --yt-sys-color-baseline--scrim-background-gradient-1: rgba(15,15,15,0);
  --yt-sys-color-baseline--scrim-background-gradient-2: rgba(15,15,15,0.3);
  --yt-sys-color-baseline--scrim-background-gradient-3: rgba(15,15,15,0.6);
  --yt-sys-color-baseline--scrim-background-gradient-4: rgba(15,15,15,0.9);
  --yt-sys-color-baseline--scrim-background-gradient-5: #0f0f0f;
  --yt-sys-color-baseline--solid-background: #e6e6e6;
  --yt-sys-color-baseline--solid-background-inverse: #0f0f0f;
  --yt-sys-color-baseline--solid-wash: rgba(255,255,255,0.3);
  --yt-sys-color-baseline--solid-wash-inverse: rgba(255,255,255,0.15);
  --yt-sys-color-baseline--state-mono-filled-hovered: rgba(0,0,0,0.05);
  --yt-sys-color-baseline--state-mono-filled-pressed: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--state-mono-standard-hovered: rgba(255,255,255,0.05);
  --yt-sys-color-baseline--state-mono-standard-pressed: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--status-bar: #fff;
  --yt-sys-color-baseline--suggested-action: #263850;
  --yt-sys-color-baseline--suggested-action-hover: #515561;
  --yt-sys-color-baseline--suggested-action-inverse: #def1ff;
  --yt-sys-color-baseline--surface-container: #181818;
  --yt-sys-color-baseline--system-bar: #fff;
  --yt-sys-color-baseline--text-complete: #a4ffa4;
  --yt-sys-color-baseline--text-disabled: #717171;
  --yt-sys-color-baseline--text-disabled-inverse: #909090;
  --yt-sys-color-baseline--text-error: #ffbfbd;
  --yt-sys-color-baseline--text-primary: #f1f1f1;
  --yt-sys-color-baseline--text-primary-inverse: #0f0f0f;
  --yt-sys-color-baseline--text-secondary: #aaa;
  --yt-sys-color-baseline--text-secondary-inverse: #606060;
  --yt-sys-color-baseline--text-warning: #ffcd97;
  --yt-sys-color-baseline--themed-green: #2ba640;
  --yt-sys-color-baseline--themed-green-inverse: #107516;
  --yt-sys-color-baseline--themed-overlay-background: rgba(0,0,0,0.8);
  --yt-sys-color-baseline--tonal-background: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--tonal-background-inverse: rgba(0,0,0,0.1);
  --yt-sys-color-baseline--tonal-hover-light: rgba(242,242,245,0.15);
  --yt-sys-color-baseline--tonal-rim: rgba(255,255,255,0.1);
  --yt-sys-color-baseline--tonal-rim-inverse: rgba(0,0,0,0.05);
  --yt-sys-color-baseline--tonal-state-layer: rgba(248,248,250,0.1);
  --yt-sys-color-baseline--tonal-touch-light: rgba(242,242,245,0.25);
  --yt-sys-color-baseline--tonal-wash: rgba(255,255,255,0.05);
  --yt-sys-color-baseline--tonal-wash-inverse: rgba(255,255,255,0.2);
  --yt-sys-color-baseline--touch-response: #fff;
  --yt-sys-color-baseline--touch-response-inverse: #000;
  --yt-sys-color-baseline--wordmark-text: #fff;
}