:root {
  color-scheme: dark;
  --bg: #050507;
  --panel: #14141a;
  --line: #2a2a33;
  --text: #f2f2f5;
  --muted: #9a9aa6;
  --accent: #e8b44a;
  --heart: #ff3b5c;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; }
body {
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
/* MT-81: the one focus, plain to see from across a room, while keys are in use (keys.js); a touch never shows it. On
   the player the video itself holds it. */
body.keys :focus { outline: 4px solid var(--text); outline-offset: 3px; box-shadow: 0 10px 28px rgba(0,0,0,.65); translate: 0 -3px; transition: translate .12s; }
body.keys #player:focus { outline: none; box-shadow: none; translate: none; }

.screen { position: fixed; inset: 0; display: none; }
body[data-screen="launch"] #launch,
body[data-screen="about"] #about,
body[data-screen="help"] #help,
body[data-screen="main"] #main,
body[data-screen="player"] #player,
body[data-screen="viewing"] #viewing,
body[data-screen="quiz"] #quiz { display: flex; }

#launch { background: #000; }

#main { flex-direction: column; padding: calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); }
.main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.main-head h1 { margin: 0; font-size: 18px; letter-spacing: .18em; font-weight: 800; }
/* The one tab style: Details and Where to watch (MT-8), a series' seasons. */
.tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.3); }
.tab { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--accent); color: #111; }
.main-head { gap: 12px; }
.main-head h1 { margin-right: auto; }
.main-back { font-style: normal; font-family: inherit; font-size: 28px; line-height: 1; padding: 0 0 4px; }
/* MT-92: Movies and Series as two full-height halves, the posters of their newest titles behind each name. */
.halves { flex: 1; display: flex; gap: 14px; min-height: 0; }
.half {
  flex: 1; min-width: 0; position: relative; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); touch-action: manipulation;
}
.half-art { position: absolute; inset: 0; display: flex; }
.half-art img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.half::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.8)); }
.half-name { position: absolute; z-index: 1; left: 0; right: 0; bottom: 18%; text-align: center; font-size: clamp(32px, 8vw, 64px); font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.half:active { transform: scale(.98); transition: transform .2s; }
.tile .tabs { margin-top: 4px; flex-wrap: wrap; }
.tile .tab { padding: 3px 8px; font-size: 12px; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-style: italic; font-family: Georgia, serif; font-size: 20px; }
.install { height: 40px; padding: 0 18px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent); font-size: 14px; font-weight: 700; }
body:not(.installable) .install { display: none; }
/* MT-117: the lists as a grid of landscape tiles, as many across as fit with each name whole, scrolling down under the
   header when they run past the screen. */
.lists {
  flex: 1; min-height: 0; display: grid; gap: 12px; align-content: start; overflow-x: hidden; overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 21vw, 260px), 1fr)); grid-auto-rows: clamp(112px, 30vh, 200px);
  touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.list {
  min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel) center 25% / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px 12px; text-align: left; touch-action: pan-y; cursor: pointer;
}
.list[aria-disabled] { opacity: .5; cursor: default; }
.list::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0,0,0,.9)); }
.list > * { position: relative; }
.list-name { font-size: clamp(15px, 1.9vw, 20px); font-weight: 800; line-height: 1.15; overflow-wrap: break-word; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.list-count { color: var(--muted); font-size: 13px; }
.list.pressing { transform: scale(.98); transition: transform .4s; }
/* MT-120: a tile's bookmark (filled while subscribed), its New mark under View all, its drag handle on the panel, the
   View all tile at the end and the line shown while nothing is bookmarked. */
.list > .list-mark {
  position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; padding: 6px; border: 0; border-radius: 50%;
  background: rgba(10,10,14,.7); color: var(--text); display: grid; place-items: center;
}
.list-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.list-mark[aria-pressed="true"] { color: var(--accent); }
.list-mark[aria-pressed="true"] svg { fill: currentColor; }
.list > .list-new { position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #000; font-size: 12px; font-weight: 800; }
.list > .list-drag {
  position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  background: rgba(10,10,14,.7); font-size: 16px; line-height: 1; display: grid; place-items: center; touch-action: none; cursor: grab;
}
.list.dragging { opacity: .6; }
.list-all { border-style: dashed; background: none; color: var(--text); justify-content: center; align-items: center; text-align: center; font: inherit; }
.list-all::before { display: none; }
.lists-note { grid-column: 1 / -1; margin: 0; color: var(--muted); }
/* MT-122: a filter list's titles new since it was last opened, with View new and View all. */
.list-news { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.list-news button { padding: 3px 10px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(10,10,14,.7); color: var(--text); font-size: 12px; }
/* The viewer's own lists, their posters as icons, take two tiles' width so a few icons show at once. */
.list-icons { grid-column: span 2; background: linear-gradient(160deg, #1d1620, var(--panel)); }
.list-icons::before { display: none; }
.icon-strip {
  flex: 1; min-height: 0; display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  margin: -4px -12px 6px; padding: 4px 12px 0; touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.icon-strip::-webkit-scrollbar { display: none; }
.icon-strip .tile { flex: none; width: clamp(40px, calc((30vh - 90px) / 1.5), 74px); }
.icon-strip .tile-name { font-size: 12px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icon-strip .tile-date { display: none; }

#player { background: #000; align-items: center; justify-content: center; }
.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; will-change: transform; }
/* MT-31: the two videos loaded ahead stay out of sight until a swipe brings one in. */
.vid:not(.on):not(.moving) { visibility: hidden; }
.overlay-btn {
  position: absolute; z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.35); display: grid; place-items: center; padding: 0;
}
.close { top: calc(var(--ctl, 12px) + var(--safe-t)); right: calc(var(--ctl, 12px) + var(--safe-r)); font-size: 32px; line-height: 1; }
.fav { top: calc(var(--ctl, 12px) + var(--safe-t)); left: calc(var(--ctl, 12px) + var(--safe-l)); }
.fav svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; transition: fill .2s, stroke .2s, transform .2s; }
.fav[aria-pressed="true"] svg { fill: var(--heart); stroke: var(--heart); transform: scale(1.1); }

.picker { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
.picker-panel { width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.picker-panel h2 { margin: 0; font-size: 18px; }
.picker-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
/* MT-66: the one Follow toggle, on the details page and a person's page. */
.follow { padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.follow[aria-pressed="true"] { background: var(--accent); color: #111; }
.picker-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; -webkit-overflow-scrolling: touch; }
/* MT-47: the overlays over the player, the hold menu and the report sheet. */
.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); }
.sheet-panel { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.sheet-panel h2 { margin: 0 0 10px; font-size: 18px; }
.hold-menu { max-width: 380px; display: flex; flex-direction: column; gap: 8px; }
.hold-menu button { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); text-align: left; font-size: 16px; font-weight: 600; }
/* MT-67: Your viewing. */
.viewing-open svg, #my-lists-open svg, .profile-open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* MT-75: the Profile sheet; the head's Profile button is ringed in the accent once signed in. */
.profile-open.signed-in { border-color: var(--accent); color: var(--accent); }
.profile-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.profile-small { font-size: 13px; }
.profile-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; }
.profile-entry { margin: 0 0 10px; }
/* MT-112: People you follow. */
.profile-sub { margin: 6px 0 8px; font-size: 15px; }
.following { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.following-row { display: flex; align-items: center; gap: 12px; }
.following-name { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; color: inherit; font-size: 15px; text-align: left; }
.following-count { margin-left: 8px; color: var(--muted); font-size: 13px; }
.profile-delete { margin-top: 6px; }
#viewing { justify-content: center; padding: calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); }
.viewing-panel { width: 100%; max-width: 900px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.viewing-head { display: flex; align-items: center; justify-content: space-between; }
.viewing-head h2 { margin: 0; font-size: 20px; }
.viewing-close { font-style: normal; font-family: inherit; font-size: 26px; line-height: 1; }
.viewing-note { margin: 6px 0 12px; color: var(--muted); font-size: 14px; }
.viewing-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.viewing-fact { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; }
.viewing-fact strong { font-size: 22px; color: var(--accent); }
.viewing-fact span { color: var(--muted); font-size: 13px; }
.viewing-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.viewing-top { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px 14px; }
.viewing-top h3 { margin: 0 0 6px; font-size: 15px; }
.viewing-top ol { margin: 0; padding-left: 20px; }
.viewing-top li span { color: var(--muted); font-size: 13px; margin-left: 8px; }
/* MT-74: sharing a list. */
.my-list-share { padding: 6px 12px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent); font-size: 13px; white-space: nowrap; }
.share-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.share-name input { flex: 1; min-width: 10em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #111; color: var(--text); font: inherit; }
.settings-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.settings-row { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.settings-row select { margin-left: auto; max-width: 60%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #111; color: var(--text); font: inherit; }
.settings-rows .services-note { margin: -4px 0 4px; font-size: 13px; }
/* MT-73: the filter list builder. */
.new-filter { margin-top: 8px; }
.filter-panel select, .filter-panel input { max-width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #111; color: var(--text); font: inherit; font-size: 14px; }
.filter-panel #filter-name { width: 100%; margin-bottom: 8px; }
.filter-conditions { display: flex; flex-direction: column; gap: 8px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-row input { width: 9em; }
.filter-group { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.filter-group .services-note { margin: 0; }
.filter-add { display: flex; gap: 8px; margin: 10px 0; }
.filter-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: 14px; }
.filter-preview { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; min-height: 8px; }
.filter-preview img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #222; }
/* MT-71: Your taste, each entry with a × that leaves it out. */
.taste-head { margin: 18px 0 0; font-size: 17px; }
.taste-x { margin-left: 8px; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); font-size: 15px; line-height: 1; vertical-align: middle; }
.viewing-clear { margin-top: 16px; padding: 10px 18px; border: 1px solid var(--heart); border-radius: 999px; background: none; color: var(--heart); font-weight: 700; }
.viewing-clear:disabled { opacity: .4; cursor: default; }
.viewing-clear[hidden], .viewing-clear-choice[hidden], .viewing-here[hidden] { display: none; }
.viewing-clear-choice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.viewing-clear-choice .quiz-plain { margin-top: 16px; }
.viewing-here { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 15px; }
.viewing-here input { width: 18px; height: 18px; accent-color: var(--heart); }
.tile { position: relative; }
.tile-play { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; }
.tile-x {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,14,.85); font-size: 20px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.tile img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: #222; display: block; }
.tile-name { font-size: 13px; font-weight: 600; margin-top: 4px; }
.tile-date { font-size: 12px; color: var(--muted); }
/* MT-64: My services, and the service's logo on an On my services tile. */
.tile-service { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.services-note { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.services-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.service-pick { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; }
.service-pick:has(input:checked) { border-color: var(--accent); background: rgba(232,180,74,.1); }
.service-pick img { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.service-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-pick-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.my-services { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font-size: 14px; white-space: nowrap; }
/* MT-72: the viewer's lists: My lists, Add to list, a list's picker with its drag handles, and Undo on the message. */
.my-lists-rows { display: grid; gap: 6px; }
.my-list { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.my-list-name { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 15px; }
.my-list-name:focus { border-color: var(--line); outline: none; background: rgba(255,255,255,.05); }
.picker-head .my-list-name { font-size: 18px; font-weight: 700; }
.my-list-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.my-list-delete { padding: 6px 12px; border: 1px solid var(--heart); border-radius: 999px; background: none; color: var(--heart); font-size: 13px; white-space: nowrap; }
.new-list { display: flex; gap: 8px; margin-top: 10px; }
.new-list input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 14px; }
.tile-drag {
  position: absolute; top: -6px; left: -6px; width: 30px; height: 30px; border-radius: 50%; padding: 0; touch-action: none; cursor: grab;
  border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,14,.85); font-size: 16px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.tile.dragging { opacity: .6; }
.toast-action { margin-left: 14px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; }
.tile-place {
  position: absolute; top: 6px; left: 6px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px;
  background: rgba(10,10,14,.85); border: 1px solid rgba(255,255,255,.25); font-size: 15px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.toast, .offline {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px;
  background: rgba(20,20,26,.92); border: 1px solid var(--line); font-size: 15px; white-space: nowrap;
}
.toast { bottom: calc(20px + var(--safe-b)); }
.offline { top: calc(12px + var(--safe-t)); background: #5a1a1a; }

.rotate { display: none; position: fixed; inset: 0; z-index: 50; background: #000; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text); }
.rotate p { margin: 0; font-size: 18px; letter-spacing: .06em; }
@media (orientation: portrait) and (max-width: 900px) { .rotate { display: flex; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }