@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/roboto-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/roboto-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700; font-display: block; src: url('./fonts/material-symbols-outlined.woff2') format('woff2'); }

/* Neutral editorial surfaces; all component colors still resolve through AWC roles. */
html:root[data-accent] {
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #191a1d;
  --md-sys-color-on-surface-variant: #626369;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f7f8;
  --md-sys-color-surface-container: #f0f0f2;
  --md-sys-color-surface-container-high: #e9e9ec;
  --md-sys-color-surface-container-highest: #e3e3e6;
  --md-sys-color-surface-variant: #eeeeef;
  --md-sys-color-outline: #77787e;
  --md-sys-color-outline-variant: #dedee3;
  --frame-brand: #e93f45;
  --frame-image-ink: #ffffff;
  --frame-image-muted: #e2e4e7;
  --frame-image-scrim: #070e14;
  --frame-page-gutter: clamp(1rem, 2.8vw, 2.75rem);
  --frame-sidebar-width: 14rem;
  --frame-header-height: 4.5rem;
  --frame-border: 1px solid var(--md-sys-color-outline-variant);
  --frame-fast: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  color-scheme: light;
}
html:root[data-theme='dark'][data-accent] {
  --md-sys-color-surface: #111214;
  --md-sys-color-on-surface: #f1f1f3;
  --md-sys-color-on-surface-variant: #a5a6ae;
  --md-sys-color-surface-container-lowest: #0c0d0f;
  --md-sys-color-surface-container-low: #191a1e;
  --md-sys-color-surface-container: #222328;
  --md-sys-color-surface-container-high: #2c2d33;
  --md-sys-color-surface-container-highest: #373840;
  --md-sys-color-surface-variant: #26272c;
  --md-sys-color-outline: #85858e;
  --md-sys-color-outline-variant: #2b2c32;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-large-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--md-sys-color-primary); }
a:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 4px; border-radius: var(--md-sys-shape-corner-extra-small); }
button, input { font: inherit; }
img { display: block; max-inline-size: 100%; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
md-tooltip { display: inline-flex; }
md-button, md-icon-button, md-chip { flex-shrink: 0; }
.symbol { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; display: inline-block; flex-shrink: 0; }
.skip-link { position: fixed; inset-inline-start: 1rem; inset-block-start: -5rem; padding: 1rem; z-index: var(--md-sys-z-index-tooltip); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.skip-link:focus { inset-block-start: 1rem; }
.muted { color: var(--md-sys-color-on-surface-variant); font-size: .875rem; line-height: 1.6; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.topbar {
  --md-app-bar-row-height: var(--frame-header-height);
  --md-app-bar-container-color-scrolled: var(--md-sys-color-surface);
  --md-app-bar-padding-inline-start: 1rem;
  --md-app-bar-padding-inline-end: 1.5rem;
  --md-app-bar-search-container-color: transparent;
  --md-app-bar-search-container-color-scrolled: transparent;
  --md-app-bar-search-container-height: 44px;
  --md-app-bar-search-padding-inline-start: 0px;
  --md-app-bar-search-padding-inline-end: 0px;
  --md-app-bar-search-row-gap: 2rem;
  border-block-end: var(--frame-border);
  z-index: var(--md-sys-z-index-navigation);
}
.topbar::part(search-field) { padding: 0; }
.topbar::part(search-content) { overflow: visible; }
/* md-search owns the search surface, hover feedback, and focus indicator. */
.topbar::part(search) { overflow: visible; outline: none; box-shadow: none; }
.topbar::part(search-state-layer) { display: none; }
.topbar::part(search-host) { max-inline-size: 44rem; margin-inline: auto; min-inline-size: 0; }
.brand-cluster { display: flex; align-items: center; gap: .6rem; min-inline-size: 12rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.09rem; }
.brand:hover { color: inherit; }
.brand-dot { color: var(--frame-brand); }
.brand-mark { display: grid; place-items: center; inline-size: 2.1rem; block-size: 1.65rem; background: var(--frame-brand); color: var(--frame-image-ink); border-radius: var(--md-sys-shape-corner-small); transform: rotate(-6deg); }
.brand-mark .symbol { font-variation-settings: 'FILL' 1; font-size: 1.7rem; transform: rotate(6deg); }
.library-label { align-self: flex-start; font-size: .625rem; line-height: 1.4; letter-spacing: .06em; font-weight: 600; color: var(--md-sys-color-on-surface-variant); padding-block-start: .4rem; }
.top-actions { display: flex; align-items: center; gap: .6rem; }
.action-progress { position: fixed; inset-block-start: var(--frame-header-height); inset-inline: 0; z-index: var(--md-sys-z-index-navigation); pointer-events: none; }
.import-progress { margin-block: 1rem; }
.import-progress p { margin-block-start: .6rem; color: var(--md-sys-color-on-surface-variant); font-size: .8rem; }
.startup-loading { display: none; }
html[data-boot] .startup-loading { display: block; }
.startup-header { display: flex; align-items: center; gap: 3rem; padding: 1rem 2rem; block-size: var(--frame-header-height); border-block-end: var(--frame-border); }
.startup-header > md-skeleton:last-child { max-inline-size: 60%; }
.startup-content { margin-inline-start: var(--frame-sidebar-width); padding: 3rem var(--frame-page-gutter); }
.startup-content > md-skeleton { display: block; margin-block-end: .75rem; }
.startup-grid { margin-block-start: 2rem; }
.startup-thumbnail { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--md-sys-shape-corner-large); }
.startup-row { display: flex; align-items: flex-start; gap: .75rem; margin-block-start: .9rem; }
.startup-row > md-skeleton:first-child { flex: 0 0 40px; }
.image-skeleton { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.thumbnail:has(.image-skeleton) img, .featured:has(.image-skeleton) > img { opacity: 0; }
.thumbnail:has(.image-skeleton) .duration, .thumbnail:has(.image-skeleton) .watched-label { visibility: hidden; }
.featured > .image-skeleton { z-index: 0; }
#player-skeleton { position: absolute; inset: 0; pointer-events: none; }
.framework-selector { inline-size: 9rem; min-inline-size: 0; --md-text-field-padding-inline-start: 12px; --md-text-field-padding-inline-end: 8px; }
#app, frame-shell, .frame-framework-host { display: contents; }
@media (max-width: 700px) {
  .framework-selector { inline-size: 8.25rem; }
}
.profile-button { --md-icon-button-container-color: var(--md-sys-color-tertiary-container); --md-icon-button-icon-color: var(--md-sys-color-on-tertiary-container); --md-icon-button-container-shape: var(--md-sys-shape-corner-full); }
#search { inline-size: 100%; --md-search-container-height: 44px; --md-search-container-min-inline-size: 0; --md-search-container-max-inline-size: 44rem; --md-search-container-color: var(--md-sys-color-surface-container-low); --md-search-contained-background-color: var(--md-sys-color-surface-container-low); --md-search-icon-button-size: 40px; }
#search::part(bar) { border: var(--frame-border); }
#search { overflow: visible; }
#search::part(input) { font-size: .9rem; }
#search::part(panel) { box-shadow: var(--md-sys-elevation-3); }
.search-heading { padding: 1rem 1.25rem .5rem; color: var(--md-sys-color-on-surface-variant); font-size: .8rem; font-weight: 600; }
#search-results > md-button { margin: .5rem 1rem 1rem; }
.search-empty { padding: 1rem; font-size: .9rem; }

.app-layout { position: relative; display: grid; grid-template-columns: var(--frame-sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; inset-block-start: var(--frame-header-height); block-size: calc(100dvh - var(--frame-header-height)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; border-inline-end: var(--frame-border); }
.sidebar:hover { scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
#rail { inline-size: 100%; min-block-size: 100%; --md-navigation-rail-expanded-width: var(--frame-sidebar-width); --md-navigation-rail-padding-block: 1.3rem; --md-navigation-rail-header-space: 0px; --md-navigation-rail-destinations-gap: .25rem; --md-navigation-rail-gap: .75rem; }
#rail { block-size: auto; }
#rail::part(container) { block-size: auto; min-block-size: 100%; }
#rail::part(destinations) { gap: .3rem; flex: none; overflow: visible; }
#rail::part(footer) { margin-block-start: 1rem; flex: none; }
#rail > md-navigation-rail-tab { inline-size: 100%; min-block-size: 48px; }
md-navigation-rail-tab { --md-navigation-rail-tab-min-height: 44px; --md-navigation-rail-tab-indicator-shape: var(--md-sys-shape-corner-medium); --md-navigation-rail-tab-icon-size: 22px; --md-navigation-rail-tab-indicator-color: var(--md-sys-color-primary-container); --md-navigation-rail-tab-active-label-color: var(--md-sys-color-on-primary-container); --md-navigation-rail-tab-active-icon-color: var(--md-sys-color-on-primary-container); }
md-navigation-rail-tab::part(label) { font-size: .9rem; }
md-navigation-rail-tab:nth-of-type(4) { margin-block-start: 1.25rem; }
.sidebar-footer { inline-size: 100%; }
.sidebar-section-heading { display: flex; justify-content: space-between; padding: 1.35rem .8rem .65rem; font-size: .8rem; font-weight: 600; }
.sidebar-section-heading span { color: var(--md-sys-color-on-surface-variant); }
.channel-list { --md-list-container-color: transparent; }
.channel-list md-list-item { --md-list-item-container-color: transparent; --md-list-item-leading-space: .65rem; --md-list-item-trailing-space: .5rem; --md-list-item-leading-avatar-size: 28px; }
.channel-list md-list-item::part(headline) { font-size: .82rem; }
#sidebar-channels { padding-block-end: 1rem; }
.sidebar-empty { padding: .5rem .75rem 1rem; }
.library-callout { margin: 1.5rem .4rem .9rem; --md-card-padding: 1rem; --md-card-container-color: var(--md-sys-color-surface-container-low); --md-card-gap: .6rem; }
.callout-icon { color: var(--md-sys-color-primary); }
.library-callout strong { font-size: .95rem; line-height: 1.5; font-weight: 500; }
.library-callout p { font-size: .8rem; color: var(--md-sys-color-on-surface-variant); }
.library-callout md-button { align-self: flex-start; margin-inline-start: -.75rem; --md-button-min-width: 0; font-size: .8rem; }
.sidebar-legal { margin: 1rem .75rem; font-size: .72rem; line-height: 1.8; color: var(--md-sys-color-on-surface-variant); }
.sidebar-legal span { font-size: .65rem; }
.rail-collapsed { --frame-sidebar-width: 5.25rem; }
.rail-collapsed .sidebar-footer { display: none; }
.rail-collapsed md-navigation-rail-tab::part(label) { font-size: .68rem; }

#main { min-inline-size: 0; outline: none; }
.category-bar { display: flex; align-items: center; gap: .6rem; padding: 1.25rem var(--frame-page-gutter); overflow-x: auto; scrollbar-width: none; }
.category-bar::-webkit-scrollbar { display: none; }
.category-bar md-chip { --md-chip-container-color: var(--md-sys-color-surface-container); --md-chip-label-color: var(--md-sys-color-on-surface); --md-chip-container-color-selected: var(--md-sys-color-on-surface); --md-chip-label-color-selected: var(--md-sys-color-surface); --md-chip-container-height: 34px; --md-chip-container-shape: var(--md-sys-shape-corner-small); --md-chip-outline-width: 0px; }
.category-bar md-chip::part(label) { font-weight: 500; }
.category-bar md-chip[selected] { --md-chip-container-color: var(--md-sys-color-on-surface); --md-chip-icon-color: var(--md-sys-color-surface); }
.page-content { padding: .4rem var(--frame-page-gutter) 0; max-inline-size: 110rem; margin-inline: auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: .3rem 1.6rem; }
.eyebrow { display: block; color: var(--md-sys-color-on-surface-variant); font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-block-end: .5rem; }
.page-heading h1 { font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -.04em; line-height: 1.2; font-weight: 700; }
.page-heading p { font-size: .88rem; color: var(--md-sys-color-on-surface-variant); margin-block-start: .6rem; }
.edition { font-size: .75rem; color: var(--md-sys-color-on-surface-variant); align-self: flex-end; margin-block-end: .3rem; }
.heading-identity { display: flex; align-items: center; gap: 1rem; min-inline-size: 0; }
.heading-text { min-inline-size: 0; }
.channel-heading-avatar { flex: 0 0 auto; align-self: flex-start; padding-block-start: .15rem; }
.creator-heading h1 { overflow-wrap: anywhere; }
.featured { position: relative; isolation: isolate; block-size: clamp(17rem, 25vw, 23rem); --md-card-padding: 0px; --md-card-gap: 0px; --md-card-container-shape: var(--md-sys-shape-corner-large); --md-card-container-color: var(--frame-image-scrim); color: var(--frame-image-ink); }
.featured-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 48%; }
.featured-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--frame-image-scrim) 94%, transparent) 0%, color-mix(in srgb, var(--frame-image-scrim) 55%, transparent) 44%, transparent 90%), linear-gradient(0deg, color-mix(in srgb, var(--frame-image-scrim) 30%, transparent), transparent 70%); }
.featured-content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.5rem, 3vw, 3rem); block-size: 100%; }
.featured-kicker { display: inline-flex; gap: .4rem; align-items: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--frame-image-muted); }
.featured-kicker .symbol { font-size: 1rem; }
.featured-content h2 { font-size: clamp(2rem, 3.7vw, 3.6rem); line-height: 1.06; font-weight: 600; letter-spacing: -.045em; margin-block: 1rem; }
.featured-content p { font-size: .88rem; color: var(--frame-image-muted); }
.featured-actions { display: flex; align-items: center; gap: 1.2rem; margin-block-start: 1.6rem; }
.featured-actions > span { font-size: .75rem; color: var(--frame-image-muted); }
.dot { padding-inline: .3rem; }
.watch-feature { --md-button-container-color: var(--frame-image-ink); --md-button-label-color: var(--frame-image-scrim); }
.featured-badge { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem; padding: .3rem .6rem; border: 1px solid color-mix(in srgb, var(--frame-image-ink) 35%, transparent); border-radius: var(--md-sys-shape-corner-full); backdrop-filter: blur(10px); font-size: .68rem; background: color-mix(in srgb, var(--frame-image-scrim) 35%, transparent); color: var(--frame-image-ink); }
.featured > md-tooltip { position: absolute; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; }
.featured-save { --md-icon-button-container-color: color-mix(in srgb, var(--frame-image-scrim) 65%, transparent); --md-icon-button-icon-color: var(--frame-image-ink); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1.7rem 1.1rem; }
.section-heading h2, .comments-heading h2 { font-size: 1.15rem; letter-spacing: -.025em; font-weight: 600; }
.section-heading h2 > span, .comments-heading h2 span { font-size: .8rem; font-weight: 400; color: var(--md-sys-color-on-surface-variant); padding-inline-start: .5rem; }
.section-heading md-button { color: var(--md-sys-color-on-surface-variant); font-size: .8rem; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.3rem; }
.video-card { min-inline-size: 0; }
.thumbnail { position: relative; aspect-ratio: 16/9; --md-card-padding: 0px; --md-card-gap: 0px; --md-card-container-shape: var(--md-sys-shape-corner-medium); cursor: pointer; overflow: hidden; }
.thumbnail img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--frame-fast); }
.thumbnail:hover img { transform: scale(1.04); }
.thumbnail-play { display: grid; place-items: center; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) scale(.9); inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--md-sys-shape-corner-full); background: color-mix(in srgb, var(--frame-image-scrim) 75%, transparent); color: var(--frame-image-ink); opacity: 0; transition: opacity var(--frame-fast), transform var(--frame-fast); pointer-events: none; }
.thumbnail:hover .thumbnail-play, .thumbnail:focus-visible .thumbnail-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.thumbnail-play .symbol { font-size: 2rem; font-variation-settings: 'FILL' 1; }
.duration, .watched-label { position: absolute; inset-inline-end: .5rem; inset-block-end: .5rem; border-radius: var(--md-sys-shape-corner-extra-small); background: color-mix(in srgb, var(--frame-image-scrim) 90%, transparent); color: var(--frame-image-ink); padding: .08rem .35rem; font-size: .72rem; font-weight: 600; line-height: 1.5; }
.watched-label { inset-inline-end: auto; inset-inline-start: .5rem; font-weight: 400; }
.video-info { display: flex; align-items: flex-start; gap: .7rem; padding-block-start: .9rem; }
.video-copy { min-inline-size: 0; flex: 1; }
.video-copy h3 { font-size: .95rem; font-weight: 600; line-height: 1.4; margin-block-end: .4rem; }
.video-copy h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.creator { display: flex; align-items: center; gap: .3rem; color: var(--md-sys-color-on-surface-variant); font-size: .8rem; line-height: 1.7; }
.creator .symbol { font-size: .8rem; font-variation-settings: 'FILL' 1; }
.video-meta { color: var(--md-sys-color-on-surface-variant); font-size: .79rem; line-height: 1.5; }
.video-meta span { margin-inline: .15rem; }
.video-options { --md-icon-button-container-width: 26px; --md-icon-button-container-height: 36px; --md-icon-button-icon-size: 20px; }
.video-info > md-tooltip { flex-shrink: 0; margin-inline-start: -.4rem; }
.local-thumbnail { display: grid; place-content: center; gap: .5rem; text-align: center; inline-size: 100%; block-size: 100%; color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); }
.local-thumbnail .symbol { font-size: 3.5rem; }
.feed-footer { display: flex; align-items: center; gap: .8rem; padding-block: 3.5rem 2rem; margin-block-start: 1rem; color: var(--md-sys-color-on-surface-variant); font-size: .75rem; }
.feed-footer a { margin-inline-start: auto; }
.brand-mark.small { inline-size: 1.4rem; block-size: 1.1rem; border-radius: var(--md-sys-shape-corner-extra-small); }
.brand-mark.small .symbol { font-size: 1rem; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-block-size: 20rem; gap: 1rem; padding: 2rem; }
.empty-state > .symbol { font-size: 3rem; padding: 1rem; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); border-radius: var(--md-sys-shape-corner-extra-large); }
.empty-state h2 { font-size: 1.3rem; }
.empty-state p { max-inline-size: 30rem; color: var(--md-sys-color-on-surface-variant); font-size: .95rem; }
.library-shortcuts { display: flex; gap: .6rem; flex-wrap: wrap; margin-block-end: 1rem; }

.watch-page { padding: 1.5rem var(--frame-page-gutter) 3rem; }
.back-link { margin-block-end: 1rem; --md-button-label-color: var(--md-sys-color-on-surface-variant); }
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 25%); gap: 1.8rem; }
.watch-primary { min-inline-size: 0; }
.player-wrap { position: relative; display: flex; flex-direction: column; background: var(--frame-image-scrim); border-radius: var(--md-sys-shape-corner-large); overflow: hidden; }
.player-viewport { position: relative; aspect-ratio: 16/9; min-block-size: 0; }
#player { display: block; inline-size: 100%; block-size: 100%; }
.player-controls { padding: .25rem .85rem .3rem; color: var(--frame-image-ink); --md-sys-density-scale: 0; --md-slider-inactive-color: color-mix(in srgb, var(--frame-image-ink) 22%, var(--frame-image-scrim)); --md-slider-active-color: var(--md-sys-color-primary); --md-slider-thumb-color: var(--md-sys-color-primary); }
#player-seek { display: block; inline-size: 100%; --md-slider-track-height: 8px; --md-slider-thumb-height: 24px; }
#player-toolbar { position: static; box-shadow: none; --md-toolbar-container-color: transparent; --md-toolbar-icon-color: var(--frame-image-ink); --md-toolbar-container-height: 48px; --md-toolbar-gap: .2rem; --md-toolbar-padding: 0px; }
#player-toolbar::part(container) { padding-block: 0; }
#player-toolbar md-icon-button { --md-icon-button-icon-color: var(--frame-image-ink); --md-icon-button-container-width: 40px; --md-icon-button-container-height: 44px; }
.player-skip { display: inline-flex; }
.player-volume { inline-size: clamp(3rem, 7vw, 5rem); flex: 0 0 auto; margin-inline: .25rem .75rem; --md-slider-track-height: 8px; --md-slider-thumb-height: 20px; --md-slider-active-color: var(--frame-image-ink); --md-slider-thumb-color: var(--frame-image-ink); }
.player-time { font: var(--md-sys-typescale-label-medium-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-spacer { flex: 1; }
.player-buffering { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--frame-image-scrim) 25%, transparent); }
.player-buffering md-progress-indicator { --md-progress-indicator-active-indicator-color: var(--frame-image-ink); --md-progress-indicator-track-color: color-mix(in srgb, var(--frame-image-ink) 20%, transparent); }
.player-wrap:fullscreen { inline-size: 100%; block-size: 100%; border-radius: var(--md-sys-shape-corner-none); }
.player-wrap:fullscreen .player-viewport { flex: 1; aspect-ratio: auto; }
.player-wrap:fullscreen .player-controls { padding-block-end: max(.5rem, env(safe-area-inset-bottom)); }
.player-wrap:fullscreen #player { object-fit: contain; }
.player-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.5rem; text-align: center; background: var(--frame-image-scrim); color: var(--frame-image-ink); }
.player-error p { color: var(--frame-image-muted); font-size: .9rem; }
.footage-credit { display: flex; align-items: center; gap: .35rem; margin-block: .7rem 1rem; color: var(--md-sys-color-on-surface-variant); font-size: .68rem; flex-wrap: wrap; }
.footage-credit > .symbol { font-size: .9rem; }
.footage-credit > span:last-child:not(.symbol) { margin-inline-start: auto; }
.watch-primary > h1 { font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.35; font-weight: 600; letter-spacing: -.035em; }
.watch-channel { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-block: 1.2rem; }
.channel-identity { display: flex; align-items: center; gap: .65rem; }
.channel-identity strong { font-size: .88rem; }
.channel-identity span { display: block; color: var(--md-sys-color-on-surface-variant); font-size: .75rem; }
.watch-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.description-card { --md-card-container-color: var(--md-sys-color-surface-container-low); --md-card-padding: 1.15rem; --md-card-gap: .6rem; font-size: .9rem; line-height: 1.6; }
.description-card strong { font-size: .83rem; }
.description-card strong span { padding-inline: .4rem; }
.description-card .muted { font-size: .75rem; }
.description-card a { text-decoration: underline; text-underline-offset: 3px; }
.up-next .section-heading { margin-block: 0 1rem; }
.up-next .section-heading h2 { font-size: 1rem; white-space: nowrap; }
.autoplay-label { display: flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--md-sys-color-on-surface-variant); }
.autoplay-label md-switch { --md-switch-track-width: 36px; --md-switch-track-height: 24px; }
.compact-video { margin-block-end: 1.5rem; }
.compact-video .video-info { padding-block-start: .6rem; }
.compact-video .video-copy h3 { font-size: .87rem; }
.comments-heading { margin-block: 2rem 1.2rem; }
.comment-form { display: flex; align-items: center; gap: .7rem; margin-block-end: 1.5rem; }
.comment-form md-text-field { flex: 1; min-inline-size: 0; }
#comments { --md-list-container-color: transparent; }
#comments md-list-item { --md-list-item-container-color: transparent; --md-list-item-leading-space: 0px; --md-list-item-trailing-space: 0px; }
#comments md-list-item::part(headline) { font-weight: 600; }
#comments md-list-item::part(supporting-text) { white-space: normal; overflow: visible; display: block; -webkit-line-clamp: unset; }
#comments p { line-height: 1.6; overflow-wrap: anywhere; }

#appearance { --md-side-sheet-width: 26rem; --md-side-sheet-max-width: 100vw; }
#appearance::part(content) { padding: 1.5rem; }
.settings-intro { font-size: 1.05rem; font-weight: 600; }
.settings-intro p { color: var(--md-sys-color-on-surface-variant); font-size: .9rem; font-weight: 400; line-height: 1.6; margin-block-start: .5rem; }
.setting-section { margin-block: 1.75rem; }
.setting-section h3 { font-size: .88rem; margin-block-end: .75rem; }
.choice-row { inline-size: 100%; }
.choice-row md-segmented-button { min-inline-size: 0; }
.settings-list { --md-list-container-color: transparent; }
.settings-list md-list-item { --md-list-item-container-color: transparent; --md-list-item-leading-space: 0px; --md-list-item-trailing-space: 0px; }
.settings-list md-list-item::part(headline) { font-size: .9rem; font-weight: 500; }
.settings-list md-list-item::part(supporting-text) { font-size: .8rem; }
.component-story { margin-block-start: 1.75rem; }
.component-story h3 { font-size: 1.2rem; line-height: 1.35; margin-block: .65rem; }
.component-story p, .component-story a { font-size: .85rem; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); }
.component-story a { display: inline-block; margin-block-start: 1rem; color: var(--md-sys-color-primary); }
#component-census { margin-block-start: 1.2rem; }
#component-census > strong { font-size: .8rem; font-weight: 500; }
.component-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .7rem; }
.component-tags code { padding: .2rem .4rem; background: var(--md-sys-color-surface-container); border: var(--frame-border); border-radius: var(--md-sys-shape-corner-extra-small); font-size: .68rem; color: var(--md-sys-color-on-surface-variant); }
md-dialog { --md-dialog-container-color: var(--md-sys-color-surface-container-low); }
md-dialog p { line-height: 1.65; font-size: .95rem; margin-block-end: 1rem; }
md-dialog md-text-field { inline-size: 100%; margin-block-end: .85rem; }
md-dialog .muted { font-size: .8rem; }
.profile-summary { display: flex; gap: 1rem; align-items: center; margin-block-end: 1.5rem; }
.profile-summary strong { font-size: 1.1rem; }
.profile-summary p { color: var(--md-sys-color-on-surface-variant); margin-block: .2rem 0; font-size: .8rem; }
.file-drop { text-align: center; margin-block-end: 1.25rem; --md-card-padding: 1.5rem; --md-card-gap: .7rem; --md-card-container-color: var(--md-sys-color-surface-container); }
.file-drop { align-items: center; }
.file-drop > .symbol { font-size: 2.5rem; color: var(--md-sys-color-primary); }
.file-drop strong { font-size: .9rem; overflow-wrap: anywhere; max-inline-size: 100%; }
.file-drop > span:not(.symbol) { font-size: .78rem; color: var(--md-sys-color-on-surface-variant); }
.file-drop.drag-over { --md-card-container-color: var(--md-sys-color-primary-container); }
.form-error { color: var(--md-sys-color-error); font-size: .85rem; }
#mobile-nav { display: none; }

html[data-compact] .video-grid { gap: 1.5rem 1rem; }
html[data-compact] .category-bar { padding-block: .8rem; }
html[data-compact] .featured { block-size: clamp(16rem, 21vw, 20rem); }

@media (min-width: 1800px) { .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .edition { display: none; }
  .topbar { --md-app-bar-search-row-gap: .8rem; }
  .brand-cluster { min-inline-size: 11.6rem; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch-layout { grid-template-columns: minmax(0, 1fr); }
  .up-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .up-next .section-heading { grid-column: 1 / -1; }
  .compact-video { margin: 0; }
}
@media (min-width: 701px) and (max-width: 980px) {
  html:root[data-accent] { --frame-sidebar-width: 5.25rem; }
  .sidebar-footer { display: none; }
  #rail { --md-navigation-rail-expanded-width: 5.25rem; }
  md-navigation-rail-tab::part(label) { font-size: .7rem; }
  #rail md-navigation-rail-tab::part(indicator) { padding-inline: .1rem; }
  .brand-cluster { min-inline-size: 10.5rem; }
  .brand-cluster > md-tooltip { display: none; }
  .library-label { display: none; }
}
@media (max-width: 700px) {
  html:root[data-accent] { --frame-sidebar-width: 0px; --frame-header-height: 4rem; --frame-page-gutter: 1rem; }
  .app-layout { display: block; }
  .sidebar { display: none; }
  body { padding-block-end: calc(4.5rem + env(safe-area-inset-bottom)); }
  .topbar { --md-app-bar-row-height: 64px; --md-app-bar-padding-inline-start: .5rem; --md-app-bar-padding-inline-end: .6rem; --md-app-bar-search-row-gap: .5rem; }
  .topbar { --md-app-bar-search-container-height: 40px; }
  .brand-cluster { min-inline-size: auto; gap: .2rem; }
  .brand-cluster > md-tooltip, .library-label, #create-button { display: none; }
  .brand { font-size: 1.5rem; gap: .4rem; }
  .brand-mark { inline-size: 1.65rem; block-size: 1.4rem; }
  .brand-mark .symbol { font-size: 1.4rem; }
  .top-actions { gap: .2rem; }
  #profile-trigger { display: none; }
  #search { --md-search-container-height: 40px; --md-search-icon-button-size: 36px; --md-search-trailing-padding-inline: 0px; }
  #search::part(input) { font-size: .8rem; }
  .topbar::part(search-host) { flex: 0 0 40px; inline-size: 40px; margin-inline-start: auto; margin-inline-end: 0; }
  #search { inline-size: 40px; }
  .topbar:has(#search[open]) .top-actions,
  body:has(#search[open]) #mobile-nav { visibility: hidden; }
  .page-heading { margin-block: .25rem 1.4rem; }
  .page-heading h1 { font-size: 1.7rem; }
  .creator-heading { flex-wrap: wrap; }
  .creator-heading .heading-identity { flex: 1 1 100%; align-items: flex-start; }
  .creator-heading > md-button { margin-inline-start: auto; }
  .creator-heading h1 { font-size: 1.5rem; }
  .page-heading p { font-size: .8rem; max-inline-size: 22rem; }
  .eyebrow { font-size: .6rem; }
  .category-bar { padding-block: 1rem; }
  .featured { block-size: 18rem; }
  .featured-content { padding: 1.5rem; }
  .featured-content h2 { font-size: 2.5rem; }
  .featured-content p { font-size: .8rem; max-inline-size: 14rem; }
  .featured-kicker { font-size: .6rem; }
  .featured-actions { margin-block-start: 1.2rem; gap: .7rem; }
  .featured-actions > span { display: none; }
  .featured-badge { font-size: .6rem; inset-block-start: 1rem; inset-inline-end: 1rem; }
  .video-grid { gap: 1.6rem 1rem; }
  .section-heading { margin-block: 1.35rem .8rem; gap: .5rem; }
  .section-heading h2 { font-size: 1.05rem; }
  .section-heading md-button { font-size: .7rem; --md-button-min-width: 0; }
  .feed-footer { flex-wrap: wrap; padding-block: 2rem; font-size: .7rem; }
  .feed-footer a { margin-inline-start: 0; inline-size: 100%; }
  #mobile-nav { display: block; position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--md-sys-z-index-navigation); padding-block-end: env(safe-area-inset-bottom); background: var(--md-sys-color-surface-container); --md-navigation-bar-divider-width: 1px; --md-navigation-bar-divider-color: var(--md-sys-color-outline-variant); }
  #toast::part(surface) { margin-block-end: 4.75rem; }
  .watch-page { padding-block-start: 1rem; }
  .watch-actions { inline-size: 100%; margin-inline-start: 0; }
  .watch-primary > h1 { font-size: 1.25rem; }
  .watch-channel { gap: .6rem; }
  .footage-credit { font-size: .62rem; }
  .footage-credit > span:last-child:not(.symbol) { margin-inline-start: 0; inline-size: 100%; }
  .comment-form { flex-wrap: wrap; }
  .comment-form > md-avatar { display: none; }
  .comment-form > md-button { margin-inline-start: auto; }
  .comment-form md-text-field { flex-basis: 100%; }
  .back-link { margin-block-end: 1rem; }
  .up-next { grid-template-columns: 1fr; }
  .compact-video { display: grid; grid-template-columns: 42% 1fr; gap: .75rem; }
  .compact-video .video-info { padding-block-start: 0; }
}
@media (max-width: 520px) {
  .player-skip { display: none; }
  .player-controls { padding-inline: .6rem; }
  .player-volume { inline-size: 2.75rem; margin-inline: .2rem .6rem; }
  .player-time { font-size: .65rem; }
  #player-toolbar { --md-toolbar-gap: 0px; }
  #player-toolbar md-icon-button { --md-icon-button-container-width: 36px; }
  .video-grid { grid-template-columns: 1fr; }
  .video-copy h3 { font-size: 1rem; }
  .creator, .video-meta { font-size: .82rem; }
  #search::part(input) { min-inline-size: 0; }
  .topbar::part(search-host) { min-inline-size: 0; }
  .featured-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) { .thumbnail img, .thumbnail-play { transition: none; } }
html[data-ripple='off'] .thumbnail img, html[data-ripple='off'] .thumbnail-play { transition: none; }