:root {
  --paper: oklch(97% .012 55); --surface: oklch(99% .008 55); --surface-muted: oklch(93% .018 35); --ink: oklch(23% .025 330); --ink-muted: oklch(48% .025 330); --line: oklch(84% .025 45); --accent: oklch(35% .095 335); --accent-soft: oklch(90% .045 335); --danger: oklch(45% .13 25); --focus: oklch(62% .16 335); --radius: .35rem; --rail: 15.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--paper); font-synthesis: none;
}
[data-theme="dark"] { --paper: oklch(21% .025 330); --surface: oklch(25% .03 330); --surface-muted: oklch(29% .035 335); --ink: oklch(92% .012 55); --ink-muted: oklch(73% .024 335); --line: oklch(39% .028 335); --accent: oklch(76% .075 335); --accent-soft: oklch(31% .06 335); --danger: oklch(75% .11 25); --focus: oklch(78% .12 335); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 18rem; background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.45; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .16em; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .18rem solid var(--focus); outline-offset: .18rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: .75rem; z-index: 20; padding: .65rem .85rem; background: var(--ink); color: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100svh; }
.rail { border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 2.25rem 1.05rem 1.1rem; }
.wordmark { display: inline-block; color: var(--accent); font-size: 1.38rem; font-weight: 700; letter-spacing: -.035em; text-decoration: none; padding: 0 .55rem; }
.nav-list { display: grid; gap: .25rem; margin-top: 3rem; }
.nav-link, .theme-toggle, .add-channel { min-height: 2.75rem; display: flex; align-items: center; gap: .75rem; border: 0; border-radius: var(--radius); padding: .55rem .7rem; color: var(--ink); background: transparent; text-decoration: none; cursor: pointer; text-align: left; }
.nav-link:hover, .theme-toggle:hover { background: var(--surface-muted); }
.nav-link.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.icon { width: 1.28rem; height: 1.28rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; flex: 0 0 auto; }
.nav-count { margin-left: auto; color: var(--ink-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.rail-bottom { display: grid; gap: .4rem; margin-top: auto; }
.add-channel { border: 1px solid var(--line); justify-content: flex-start; color: var(--accent); }
.add-channel:hover { border-color: var(--accent); background: var(--accent-soft); }
.theme-toggle { color: var(--ink-muted); }
.mobile-header { display: none; }
.mobile-nav { display: none; }
.main-content { width: min(100%, 82rem); padding: 4rem clamp(1.25rem, 5vw, 4.25rem) 4rem; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.55rem; }
.eyebrow { margin: 0 0 .4rem; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .55rem; font-size: clamp(1.75rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -.045em; }
.page-summary, .meta { margin-bottom: 0; color: var(--ink-muted); font-size: .875rem; }
.search-form { display: flex; align-items: center; gap: .65rem; width: min(27rem, 42%); border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .8rem; background: var(--surface); }
.search-form input { width: 100%; min-height: 2.6rem; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-form:focus-within { border-color: var(--focus); box-shadow: 0 0 0 .16rem color-mix(in oklch, var(--focus), transparent 75%); }
.video-list { list-style: none; padding: 0; margin: 0; }
.video-row { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(12rem, 1fr) auto; align-items: center; gap: clamp(1.2rem, 3.3vw, 2.5rem); padding: 1.1rem .9rem; border-bottom: 1px solid var(--line); }
.video-row:first-child { border-top: 1px solid var(--line); }
.video-row:hover { background: color-mix(in oklch, var(--surface-muted), transparent 52%); }
.video-row.is-watched { opacity: .68; }
.thumb-link { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--surface-muted); text-decoration: none; }
.thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-missing { display: grid; place-items: center; color: var(--ink-muted); }
.duration { position: absolute; right: .35rem; bottom: .35rem; padding: .1rem .32rem; border-radius: .18rem; background: oklch(18% .02 330 / .9); color: oklch(96% .01 55); font-size: .75rem; font-variant-numeric: tabular-nums; }
.video-copy { min-width: 0; }
.video-copy h2 { margin: 0 0 .3rem; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.25; letter-spacing: -.025em; }
.video-copy h2 a { text-decoration: none; }
.video-copy h2 a:hover { color: var(--accent); text-decoration: underline; }
.channel-name { margin: 0 0 .2rem; color: var(--accent); font-size: .875rem; }
.row-actions { display: flex; align-items: center; gap: .1rem; }
.row-actions form + form { border-left: 1px solid var(--line); }
.action-button { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .45rem; border: 0; padding: .45rem .8rem; color: var(--ink-muted); background: transparent; cursor: pointer; white-space: nowrap; }
.action-button:hover, .action-button.is-active { color: var(--accent); }
.action-button .icon { width: 1.15rem; height: 1.15rem; }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: var(--radius); padding: .55rem 1rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--accent); color: var(--paper); }
.button-primary:hover { filter: brightness(1.12); }
.button-secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
.button-secondary:hover { border-color: var(--accent); color: var(--accent); }
.text-button { border: 0; padding: .5rem; color: var(--accent); background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: .16em; }
.danger { color: var(--danger); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; color: var(--ink-muted); font-size: .875rem; }
.pagination-button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.pagination-button[aria-disabled="true"] { pointer-events: none; opacity: .4; }
.pagination-end { border-left: 1px solid var(--line); padding-left: 1rem; }
.finite-end { margin: 1.6rem 0 0; color: var(--ink-muted); text-align: center; font-size: .875rem; }
.empty-state, .error-state { max-width: 34rem; margin: 5rem auto; text-align: center; }
.empty-state h2, .error-state h1 { margin-bottom: .6rem; font-size: 1.35rem; }
.empty-state p, .error-state p { color: var(--ink-muted); }
.empty-mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 1rem; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); }
.channel-add { display: grid; grid-template-columns: minmax(0, .8fr) minmax(18rem, 1fr); gap: 2rem; align-items: center; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface-muted); }
.channel-add h2 { margin-bottom: .35rem; font-size: 1.15rem; }
.channel-add p { max-width: 42ch; margin-bottom: 0; color: var(--ink-muted); }
.channel-form label, .stack-form label { display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 650; }
.input-action { display: flex; gap: .55rem; }
.input-action input, .stack-form input { width: 100%; min-height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; color: var(--ink); background: var(--surface); }
.input-action input:focus, .stack-form input:focus { border-color: var(--focus); outline: .16rem solid color-mix(in oklch, var(--focus), transparent 75%); outline-offset: 0; }
.field-error, .form-error { margin: .55rem 0 0; color: var(--danger); font-size: .875rem; }
.channel-list { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--line); }
.channel-row { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1rem; padding: 1rem .25rem; border-bottom: 1px solid var(--line); }
.channel-row > div { min-width: 0; }
.channel-row .meta { overflow-wrap: anywhere; }
.channel-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--surface-muted); }
.avatar-fallback { display: grid; place-items: center; color: var(--accent); font-weight: 700; }
.channel-row h2 { margin: 0 0 .2rem; font-size: 1rem; }
.compact-header { max-width: 46rem; }
.pair-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface-muted); }
.pair-panel h2, .device-section h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.pair-panel p { max-width: 55ch; margin: 0; color: var(--ink-muted); }
.pair-code-wrap { display: grid; justify-items: start; gap: .2rem; min-width: 13rem; }
.pair-code-label, .pair-code-wrap span:last-child { color: var(--ink-muted); font-size: .75rem; }
.pair-code { color: var(--accent); font-size: 1.55rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.device-section { margin-top: 2rem; }
.device-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.device-list li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.device-list h3 { margin: 0 0 .2rem; font-size: 1rem; }
.device-list p, .quiet-note { margin: 0; color: var(--ink-muted); font-size: .875rem; }
.device-glyph { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.notice { display: flex; align-items: center; gap: .75rem; margin: -1rem 0 1.25rem; padding: .75rem 1rem; border: 1px solid var(--line); background: var(--surface-muted); font-size: .875rem; }
.notice-error { color: var(--danger); }
.back-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-muted); font-size: .875rem; text-decoration: none; }
.back-link:hover { color: var(--accent); }
.watch-page { max-width: 58rem; margin: 2rem auto 0; }
.player-frame { aspect-ratio: 16 / 9; background: var(--surface-muted); }
.player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.watch-meta { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.watch-meta h1 { max-width: 70ch; margin-bottom: .7rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.watch-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.description { padding: 1rem 0; color: var(--ink-muted); }
.description summary { color: var(--ink); cursor: pointer; font-weight: 650; }
.description p { max-width: 70ch; margin: .8rem 0 0; white-space: pre-wrap; }
.login-wrap { display: grid; place-items: center; min-height: calc(100svh - 8rem); }
.login-panel { width: min(100%, 24rem); }
.login-eyebrow { margin-top: 3rem; }
.login-panel h1 { font-size: 2rem; }
.lede { color: var(--ink-muted); }
.stack-form { display: grid; gap: .35rem; margin-top: 1.7rem; }
.stack-form .button { margin-top: .7rem; }
.flash-stack { margin-bottom: 1rem; }
.flash-stack .notice { margin: 0 0 .5rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; max-width: 22rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: 0 .5rem 2rem oklch(20% .02 330 / .12); }
@media (max-width: 66rem) { .video-row { grid-template-columns: minmax(10rem, 14rem) minmax(10rem, 1fr); } .row-actions { grid-column: 2; justify-content: flex-start; } }
@media (max-width: 56rem) {
  .app-shell { display: block; padding-top: 4.3rem; }
  .rail { display: none; }
  .mobile-header { position: fixed; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 4.3rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--paper), transparent 4%); }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); padding: .3rem .35rem calc(.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
  .mobile-nav-link { display: grid; place-items: center; gap: .12rem; min-height: 3.2rem; border-radius: var(--radius); color: var(--ink-muted); font-size: .68rem; text-decoration: none; }
  .mobile-nav-link.is-current { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
  .mobile-nav-link .icon { width: 1.15rem; height: 1.15rem; }
  .mobile-header .theme-toggle { min-width: 2.75rem; justify-content: center; padding: .5rem; }
  .main-content { padding: 2.25rem 1rem 6rem; }
  .page-header { display: block; margin-bottom: 1.7rem; }
  .search-form { width: 100%; margin-top: 1.3rem; }
  .video-row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: .9rem; padding: 1rem 0; }
  .video-copy h2 { font-size: 1rem; }
  .row-actions { grid-column: 1 / -1; gap: 0; margin-top: -.25rem; }
  .action-button { padding: .42rem .55rem .42rem 0; margin-right: .35rem; font-size: .875rem; }
  .row-actions form + form { padding-left: .35rem; }
  .channel-add { display: block; padding: 1rem; }
  .channel-form { margin-top: 1.25rem; }
  .input-action { display: grid; grid-template-columns: 1fr auto; }
  .pagination { flex-wrap: wrap; }
  .pagination-end { flex-basis: 100%; border: 0; padding: 0; text-align: center; }
  .channel-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .channel-row form { grid-column: 2; }
  .pair-panel { display: block; padding: 1rem; }
  .pair-panel form, .pair-code-wrap { margin-top: 1.25rem; }
  .device-list li { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .device-list form { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }