:root {
  color-scheme: dark;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: #f1f7fc;
  background: #050b14;
  --navy: #07162e;
  --deep-sea: #020b16;
  --panel: #101c2c;
  --panel-hover: #192c43;
  --field: #0a1422;
  --border: #2a3e56;
  --muted: #aebfd2;
  --accent: #9ee7ff;
  --accent-hover: #e9f8ff;
  --action: #ff7b8b;
  --action-hover: #ff9ba8;
  --action-text: #240e1a;
  --selected: #163853;
  --selected-border: #3d7ea4;
  --danger: #ffadb5;
  --display: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", "Inter", sans-serif;
  --ease-out: cubic-bezier(.2, .75, .22, 1);
  --chrome-height: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { position: relative; isolation: isolate; min-width: 300px; min-height: 100svh; margin: 0; }
.sea-scene {
  --sea-photo: url("/art/night-sea.jpg") var(--sea-position, 58% 50%) / cover no-repeat;
  --sea-shade: linear-gradient(135deg, #061024c2 4%, #06152750 49%, #04132622 82%),
    linear-gradient(0deg, #0513268c, transparent 40%);
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    var(--sea-shade), var(--sea-photo),
    radial-gradient(ellipse 54% 4% at 73% 43%, #75abcb52, transparent),
    radial-gradient(ellipse 56% 38% at 73% 56%, #1e5274, transparent),
    linear-gradient(#06122a 14%, #153756 42.9%, #0b2641 43.2%, #06192d 94%);
}

.sea-ship::before {
  position: absolute;
  content: "";
}

.sea-ship {
  position: absolute;
  z-index: 1;
  bottom: 6%;
  left: 0;
  width: var(--ship-width, clamp(130px, 14vw, 222px));
  transform: translate3d(var(--ship-rest, 62vw), 0, 0);
  animation: sunny-drift 34s cubic-bezier(.45, .05, .55, .95) -13s infinite alternate;
}

.sea-ship::before {
  z-index: -1;
  inset: auto -12% -1%;
  height: 12%;
  background:
    radial-gradient(ellipse 48% 26% at 46% 45%, #a3d8ed79, #72b2ce36 52%, transparent),
    radial-gradient(ellipse 49% 43% at 54% 65%, #2f688d71, transparent);
  animation: sunny-wake 6.2s ease-in-out -1.65s infinite;
}

.sea-ship img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 74%;
  filter: drop-shadow(0 4px 9px #020b168c);
  animation: sunny-bob 6.2s ease-in-out -2.2s infinite;
}

body:has(.stage.player-fullscreen) .sea-scene { display: none; }

@keyframes sunny-drift {
  0% { transform: translate3d(var(--ship-west, 43vw), 0, 0); }
  44% {
    transform: translate3d(calc((var(--ship-west, 43vw) + var(--ship-east, 77vw)) / 2), -1.2vh, 0);
    animation-timing-function: cubic-bezier(.28, .04, .62, 1);
  }
  100% { transform: translate3d(var(--ship-east, 77vw), -.5vh, 0); }
}

@keyframes sunny-bob {
  0%, 100% { transform: translateY(2px) rotate(-1.8deg); }
  46% { transform: translateY(calc(-1 * var(--ship-rise, 10px))) rotate(2.25deg); }
}

@keyframes sunny-wake {
  0%, 100% { transform: scale(.89, 1.1); opacity: .56; }
  53% { transform: scale(1.15, .84); opacity: .91; }
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, video:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
h1, h2, h3, p { margin: 0; }

.shell { width: min(100% - clamp(36px, 7.6vw, 116px), 1480px); margin-inline: auto; }
.muted, small { color: var(--muted); }
.small, small { font-size: .84rem; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-header {
  position: relative;
  z-index: 3;
  top: 0;
  background: #060d18da;
  border-bottom: 1px solid #799ac32b;
  box-shadow: 0 8px 32px #02080c53;
  backdrop-filter: blur(20px) saturate(125%);
}

.header-inner {
  min-height: var(--chrome-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 11px;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  font-weight: 820;
  line-height: 1;
  letter-spacing: -.045em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-name > span { color: var(--accent); font-weight: 630; }

.brand-mark {
  display: block;
  width: 38px;
  height: auto;
  filter: drop-shadow(0 4px 10px #06152d91);
  transition: transform 330ms cubic-bezier(.22, 1.35, .45, 1), filter 250ms ease;
}

.wordmark:not(:disabled):is(:hover, :focus-visible) .brand-mark {
  transform: translateY(-2px) rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 3px 10px #5bccff65);
}
.wordmark:not(:disabled):active .brand-mark { transform: scale(.93); }

.header-actions, .button-line, .transport-group, .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.header-actions .button { min-height: 39px; padding-inline: 14px; }
.header-actions #browse-anime:enabled { color: var(--accent); background: #1836539c; border-color: #4c8bac6b; }
.header-actions #sign-out { background: transparent; border-color: transparent; }
.header-actions #sign-out:hover { background: var(--panel-hover); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
}

.button-primary { color: var(--action-text); background: var(--action); border-color: #ff9aaa65; }
.button-primary:hover { background: var(--action-hover); box-shadow: 0 5px 21px #f36e8230; }
.button-quiet { color: #e9f2ff; background: #15253ad9; border-color: var(--border); }
.button-quiet:hover { background: var(--panel-hover); border-color: #7196ba; }
.button:disabled { color: #99adc9; border-color: #233b59; background: #13253d; }

.text-button {
  padding: 6px 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font-weight: 640;
  text-align: left;
}

.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }

.boot-status { padding-block: 44px; color: var(--muted); }
.sign-in {
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(16px, 5vw, 88px);
  max-width: 1140px;
  min-height: min(760px, calc(100svh - var(--chrome-height)));
  margin-inline: auto;
  padding-block: 42px;
}

.sign-in-art {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.22;
  background: radial-gradient(ellipse at 47% 41%, #3f9bd980, transparent 68%);
}

.sign-in-art img {
  --fan-x: -55%;
  --fan-y: -62%;
  --fan-angle: -10deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 77%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: 1px solid #bad9f470;
  border-radius: clamp(13px, 2vw, 24px);
  box-shadow: 0 21px 48px #02070dbd;
  transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-angle));
  animation: sign-in-fan 780ms var(--ease-out) backwards;
}

.sign-in-art img:nth-child(2) {
  --fan-x: -43%;
  --fan-y: -23%;
  --fan-angle: 7deg;
  animation-delay: 100ms;
}

@keyframes sign-in-fan {
  from { opacity: 0; transform: translate(-50%, -42%) scale(.9); }
}

.sign-in-card {
  width: min(100%, 445px);
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid #4e749469;
  border-radius: 24px;
  background: radial-gradient(ellipse at 58% 0%, #456d8d42, transparent 68%), #0b1626ed;
  box-shadow: 0 24px 72px #02060e9e, inset 0 1px 0 #e1f3ff12;
  backdrop-filter: blur(14px);
  animation: view-enter 440ms var(--ease-out) backwards;
}

.sign-in h1 {
  margin-bottom: 28px;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.13;
  letter-spacing: -.045em;
}

.sign-in .text-button { margin-top: 18px; }
.sign-in a.button { display: flex; }
.sign-in #owner-form:not([hidden]) + a.button { margin-top: 14px; }
.form-stack { display: grid; align-content: start; gap: 14px; }
.field { min-width: 0; display: grid; gap: 7px; }
.field label { font-size: .88rem; font-weight: 650; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

input:not([type="checkbox"], [type="range"]), .field select {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  color: inherit;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 150ms;
}

input:not([type="range"]):hover, .field select:hover { border-color: #5479a2; }
input::placeholder { color: #9db5d5; opacity: 1; }
input[type="file"] { max-width: 100%; padding: 8px; font-size: .88rem; }
input::file-selector-button {
  margin-right: 8px;
  padding: 6px 9px;
  color: inherit;
  background: #173557;
  border: 1px solid #42658d;
  border-radius: 6px;
}
input.code-input { font-variant-numeric: tabular-nums; font-size: 1.16rem; letter-spacing: .16em; }
.form-message { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.form-message.error { color: var(--danger); }

.catalog-view { padding-block: clamp(18px, 2.5vw, 38px) clamp(42px, 8vw, 104px); }
.catalog-page, .watch-layout:not([hidden]) { animation: view-enter 500ms var(--ease-out) backwards; }
.watch-layout:not([hidden]) { --view-shift: 9px; animation-duration: 360ms; }
.catalog-reverse { --view-shift: -13px; }

@keyframes view-enter {
  from { opacity: .15; transform: translateY(var(--view-shift, 13px)); }
  to { opacity: 1; transform: none; }
}

.catalog-hero {
  --feature-light: #297da854;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #658caf55;
  border-radius: clamp(18px, 2.15vw, 32px);
  background: #070e1b;
  box-shadow: 0 24px 64px #02080eb0, inset 0 1px 0 #e2f9ff12;
}

.catalog-hero[data-feature="attack on titan"] { --feature-light: #a53a4c61; }

.hero-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(382px, 38vw, 532px);
  align-items: center;
  overflow: hidden;
}

.hero-stage::before {
  position: absolute;
  z-index: -1;
  inset: -64% -18%;
  background:
    radial-gradient(ellipse 44% 21% at 35% 50%, var(--feature-light), transparent 75%),
    radial-gradient(ellipse 28% 23% at 70% 52%, #5074b834, transparent 80%);
  transform: rotate(-23deg);
  animation: feature-light-in 1160ms var(--ease-out) backwards;
  content: "";
}

@keyframes feature-light-in {
  from { opacity: .12; transform: translateX(-8%) rotate(-15deg); }
}

.hero-mosaic {
  position: absolute;
  z-index: -1;
  inset: 4% 2.7% 4% 42%;
  pointer-events: none;
}

.hero-pane {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--pane-top) var(--clip-right, 0%) var(--pane-bottom) var(--clip-left, 0%) round 14px);
  animation: pane-enter 790ms var(--ease-out) var(--pane-delay, 0ms) backwards;
}

.hero-pane:nth-child(1) { --clip-right: 69%; --pane-top: 14%; --pane-bottom: 17%; --pane-shift: 48px; }
.hero-pane:nth-child(2) { --clip-left: 32%; --clip-right: 30%; --pane-top: 4%; --pane-bottom: 10%; --pane-shift: -51px; --pane-delay: 66ms; }
.hero-pane:nth-child(3) { --clip-left: 71%; --pane-top: 23%; --pane-bottom: 6%; --pane-shift: 39px; --pane-delay: 127ms; }

@keyframes pane-enter {
  from {
    opacity: 0;
    clip-path: inset(calc(var(--pane-top) + 19%) var(--clip-right, 0%) calc(var(--pane-bottom) + 15%) var(--clip-left, 0%) round 9px);
    transform: translateY(calc(var(--pane-shift) * var(--pane-travel, 1))) scale(1.025);
  }
}

.hero-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: feature-image-in 1650ms var(--ease-out) backwards;
}

@keyframes feature-image-in {
  from { transform: scale(1.09); filter: saturate(.7) brightness(.62); }
}

.hero-copy {
  position: relative;
  width: 43%;
  padding: clamp(23px, 4.25vw, 69px);
  padding-right: 0;
}

.hero-copy > * { animation: hero-detail-enter 590ms var(--ease-out) var(--copy-delay, 108ms) backwards; }
.hero-copy > :nth-child(2) { --copy-delay: 163ms; }
.hero-copy > :nth-child(3) { --copy-delay: 216ms; }
.hero-copy > :nth-child(n+4) { --copy-delay: 273ms; }

@keyframes hero-detail-enter {
  from { opacity: 0; transform: translateY(var(--copy-travel, 14px)); }
  to { opacity: 1; transform: none; }
}

.eyebrow, .card-kicker, .episode-kicker {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .115em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-copy h1, .hero-copy h2 {
  width: fit-content;
  max-width: 100%;
  margin-block: 8px 12px;
  font-family: var(--display);
  font-size: clamp(3.4rem, 8.1vw, 7.6rem);
  font-weight: 820;
  letter-spacing: -.033em;
  line-height: .88;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.series-logo, .series-card-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 7px #020b16b0);
}

:is(.series-logo-title:has(.series-logo), .card-title:has(.series-card-logo)) .title-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-copy .series-logo-title { width: min(100%, 26rem); margin-block: 0 22px; }
.section-copy .series-logo-title { width: min(100%, 13rem); }
[data-art-key="attack-on-titan"] .section-copy .series-logo-title { width: min(100%, 20rem); }

.hero-meta {
  color: var(--accent);
  font-size: clamp(.71rem, 1.1vw, .89rem);
  font-weight: 690;
  letter-spacing: .02em;
}

.hero-summary { max-width: 37ch; margin-top: 13px; color: #dce6f4; font-size: clamp(.92rem, 1.35vw, 1.13rem); line-height: 1.58; }
.hero-actions { margin-top: clamp(18px, 2.5vw, 32px); }
.hero-actions .button { min-height: 46px; padding-inline: clamp(13px, 1.5vw, 21px); }
.hero-actions .button-quiet { border-color: #6087aa69; background: #14253cc2; }
.hero-actions .button-quiet:hover { background: var(--panel-hover); }
.hero-watch::before { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); content: ""; }

.feature-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px clamp(15px, 2.4vw, 34px);
  border-top: 1px solid #54719845;
  background: #0c1523;
}

.feature-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 4px 13px 4px 5px;
  border: 1px solid #25405a84;
  border-radius: 10px;
  color: var(--muted);
  background: #101c2d;
  font-size: .77rem;
  font-weight: 680;
  transition: background 220ms, border-color 220ms, color 220ms, transform 220ms var(--ease-out);
}

.feature-choice:hover { border-color: #729ebd; color: #fff; transform: translateY(-2px); }
.feature-choice[aria-pressed="true"] { border-color: #86d9f9a6; color: #f1faff; background: #18364c; }
.feature-choice-art { width: 47px; height: 32px; border-radius: 5px; object-fit: cover; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block: 0 20px;
  color: var(--muted);
  font-size: .83rem;
}

.breadcrumb ol, .breadcrumb li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; }
.breadcrumb ol { padding: 0; margin: 0; list-style: none; }
.breadcrumb li + li::before {
  width: 6px;
  height: 6px;
  border-top: 1px solid #89a9d2;
  border-right: 1px solid #89a9d2;
  transform: rotate(45deg);
  content: "";
}

.breadcrumb button, .breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d8e7ff;
}

.breadcrumb .catalog-back { color: var(--accent); }

.catalog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font-weight: 650;
  text-decoration: none;
}

.catalog-back:hover { color: var(--accent-hover); }

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 21px;
  margin-block: 0 clamp(17px, 2.3vw, 26px);
}

.catalog-hero + :is(.section-heading, .continue-section) { margin-top: clamp(32px, 4vw, 58px); }
.continue-section + .section-heading, .catalog-search-results { margin-top: clamp(29px, 3.35vw, 49px); }
#anime-selection { scroll-margin-top: calc(var(--chrome-height) + 20px); }

.section-heading h1, .section-heading h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -.055em;
}

.section-heading h2 { font-size: clamp(1.5rem, 2.65vw, 2.21rem); }
.section-copy { min-width: 0; overflow-wrap: anywhere; }
.section-summary { margin-top: 8px; color: #c8daed; font-size: .87rem; }
.section-heading .catalog-search { width: min(100%, 20rem); background: #0b1a2be9; }
.catalog-filter-controls { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.catalog-filter-controls .catalog-search { width: clamp(170px, 23vw, 320px); min-width: 0; }
.catalog-filter-controls select {
  min-width: 0;
  min-height: 43px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  background: #0b1a2bed;
}
.collection-heading {
  position: relative;
  isolation: isolate;
  min-height: clamp(205px, 23vw, 310px);
  overflow: hidden;
  padding: clamp(18px, 3vw, 35px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: radial-gradient(ellipse at 90% 15%, #4073953d, transparent 64%), #0b1523;
  box-shadow: 0 16px 46px #040c168a;
}
.collection-art {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 auto;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  animation: feature-image-in 870ms var(--ease-out) backwards;
}
.collection-heading:has(.collection-art)::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0b1523 24%, #0b15238c 57%, #0b152318 100%),
    linear-gradient(0deg, #0b1523f7, transparent 82%);
  pointer-events: none;
  content: "";
}
.main-shell > .breadcrumb { margin-block: 18px 0; }
#library-message { margin-block: 20px; }
#anime-selection { scroll-margin-block-start: calc(var(--chrome-height, 68px) + 12px); }

.catalog-grid, .continue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: clamp(12px, 1.45vw, 20px);
}

.series-grid { grid-template-columns: repeat(auto-fill, minmax(min(207px, 100%), 1fr)); }
.continue-grid { grid-template-columns: repeat(auto-fill, minmax(min(247px, 100%), 1fr)); }
.arc-grid { grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr)); }
.episode-grid { grid-template-columns: repeat(auto-fill, minmax(min(198px, 100%), 1fr)); }

.catalog-card {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 134px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: inherit;
  background: #0e1b2af5;
  text-align: left;
  transition: transform 255ms var(--ease-out), border-color 180ms, background-color 180ms, box-shadow 230ms var(--ease-out);
}

.catalog-grid > .catalog-card:nth-child(-n + 8), .continue-grid > .continue-card:nth-child(-n + 8) {
  animation: card-enter var(--card-time, 490ms) var(--ease-out) var(--card-delay, 44ms) backwards;
}

.catalog-grid.catalog-grid-filtered > .catalog-card { animation: none; }
.catalog-search-results .catalog-grid > .catalog-card { animation: none; }
.catalog-card:nth-child(2) { --card-delay: 52ms; }
.catalog-card:nth-child(3) { --card-delay: 77ms; }
.catalog-card:nth-child(4) { --card-delay: 103ms; }
.catalog-card:nth-child(5) { --card-delay: 129ms; }
.catalog-card:nth-child(6) { --card-delay: 152ms; }
.catalog-card:nth-child(7) { --card-delay: 174ms; }
.catalog-card:nth-child(8) { --card-delay: 195ms; }

@keyframes card-enter {
  from { opacity: 0; transform: translateY(var(--card-travel, 17px)) scale(.982); }
  to { opacity: 1; transform: none; }
}

.catalog-card:has(.card-art)::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, #071529 3%, #071529dc 29%, #081d3b0d 100%);
  content: "";
}

.catalog-card[aria-current="true"] { border-color: var(--selected-border); background-color: var(--selected); }

.card-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 460ms var(--ease-out);
}

.card-copy { display: grid; min-width: 0; gap: 5px; }
.card-title { font-size: 1rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.card-meta { color: var(--muted); font-size: .81rem; line-height: 1.4; }
.card-kicker { font-size: .65rem; }

.card-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  align-self: end;
  border: 1px solid #7595b367;
  border-radius: 50%;
  color: inherit;
  background: #102338;
  font-size: 1.3rem;
  line-height: 1;
  transition: color 170ms, border-color 170ms, background-color 170ms, transform 230ms var(--ease-out);
}

.catalog-card:focus-visible .card-arrow { color: var(--navy); background: var(--accent); border-color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .catalog-card:hover {
    transform: translateY(-4px);
    border-color: #82b2d4;
    background-color: var(--panel-hover);
    box-shadow: 0 13px 26px #02081091;
  }
  .catalog-card:hover .card-art { transform: scale(1.045); }
  .catalog-card:hover .card-arrow { color: var(--navy); background: var(--accent); border-color: var(--accent); transform: translateX(2px); }
}

.catalog-card:active { transform: translateY(0) scale(.99); transition-duration: 100ms; }

.poster-card {
  display: grid;
  grid-template: auto minmax(62px, 1fr) / minmax(0, 1fr) auto;
  align-items: center;
  align-content: start;
  gap: 0 9px;
  padding: 0;
  --cover-ratio: 16 / 9;
  --poster-glow: #3d7198a8;
  --poster-shade: #142e49;
  border-radius: 15px;
  background: #0c1625;
  box-shadow: 0 9px 22px #03091138;
}

.poster-card::before {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: var(--cover-ratio);
  background:
    radial-gradient(ellipse at 81% 12%, var(--poster-glow), transparent 71%),
    repeating-linear-gradient(163deg, transparent 0 16px, #e2f6ff0b 17px, transparent 18px 30px),
    linear-gradient(135deg, #122435 7%, var(--poster-shade));
  content: "";
}

.poster-card :is(.card-art, .series-placeholder) {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-ratio);
  z-index: 0;
  pointer-events: none;
  transition: filter 225ms var(--ease-out);
}

.poster-card:has(.card-art)::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .poster-card:hover .card-art { filter: brightness(1.1); transform: none; }
}
.poster-card .card-copy { padding: 12px 0 13px 14px; }
.poster-card .card-arrow { margin: 0 11px 0 0; align-self: center; }
.catalog-card.series-card { --cover-ratio: 8 / 5; }
.series-card .card-title { font-size: clamp(1rem, 1.2vw, 1.18rem); }
.series-card .series-card-logo { width: min(100%, 7rem); }
.series-card:has([src$="attack-on-titan-logo.png"]) .series-card-logo { width: min(100%, 9rem); }
.series-card:nth-child(5n + 2) { --poster-glow: #8b557aaf; --poster-shade: #442c4c; }
.series-card:nth-child(5n + 3) { --poster-glow: #397d80ce; --poster-shade: #214045; }
.series-card:nth-child(5n + 4) { --poster-glow: #986e59ba; --poster-shade: #3a2e46; }
.series-card:nth-child(5n + 5) { --poster-glow: #6575baa8; --poster-shade: #302f4b; }
.series-placeholder {
  background:
    radial-gradient(ellipse at 25% 110%, #e1f5ff25, transparent 63%),
    linear-gradient(121deg, transparent 45%, #d9eeff16 46%, transparent 47%, transparent 72%, #d9eeff1a 73%, transparent 74%);
}
.continue-card .card-title { font-size: clamp(.94rem, 1.15vw, 1.1rem); }
.continue-card .card-copy { position: relative; }
.continue-progress {
  display: block;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #49617d60;
  accent-color: var(--action);
}
.continue-progress::-webkit-progress-bar { border-radius: inherit; background: #49617d60; }
.continue-progress::-webkit-progress-value { border-radius: inherit; background: var(--action); }
.continue-progress::-moz-progress-bar { border-radius: inherit; background: var(--action); }

.episode-grid .catalog-card { min-height: 79px; align-items: center; background-image: none; }
.episode-grid .card-arrow { align-self: center; font-size: .72rem; }
.episode-grid .card-title { font-size: .96rem; }
.catalog-empty { padding: clamp(19px, 3vw, 34px); border: 1px dashed #6884a369; border-radius: 13px; color: var(--muted); background: #0d1b2de8; }
.catalog-empty .button { margin-top: 13px; }

.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(252px, 324px);
  align-items: start;
  gap: clamp(15px, 2vw, 25px);
  padding-block: clamp(16px, 3.4vw, 32px) 50px;
}

.watch-layout > .breadcrumb { grid-column: 1 / -1; margin-bottom: 0; }
.player-column { min-width: 0; }

.now-playing {
  min-height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px;
}

.now-copy { min-width: 0; }
.episode-kicker { margin-bottom: 5px; }
.now-playing h1 {
  font-size: clamp(1.45rem, 3vw, 2.62rem);
  line-height: 1.04;
  letter-spacing: -.047em;
  overflow-wrap: anywhere;
}

.mobile-library { display: none; white-space: nowrap; }

.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #070e1a;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 53px #030a14a6;
}

.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--deep-sea); }
.stage:fullscreen { width: 100%; height: 100%; border: 0; border-radius: 0; background: var(--deep-sea); }

.stage.has-player { background: var(--deep-sea); }

.player-surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
}

.player-big-play {
  display: grid;
  place-items: center;
  width: clamp(45px, 6.5vw, 73px);
  aspect-ratio: 1;
  border: 1px solid #d3f2ff85;
  border-radius: 50%;
  background: #0b1c37cf;
  box-shadow: 0 7px 27px #020b1666;
  backdrop-filter: blur(7px);
  transition: background-color 175ms, transform 220ms var(--ease-out);
}

.player-surface:hover .player-big-play { transform: scale(1.05); background: #ac263ae3; }
.player-surface:active .player-big-play { transform: scale(.96); transition-duration: 100ms; }
.player-big-play svg { width: 43%; height: 43%; }
.stage:is(.player-playing, .player-busy) .player-big-play { display: none; }

.player-waiting {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.player-waiting::after {
  width: min(9vw, 38px);
  aspect-ratio: 1;
  border: 3px solid #fff6;
  border-top-color: var(--accent);
  border-radius: 50%;
  content: "";
  animation: player-spin 800ms linear infinite;
}

@keyframes player-spin { to { transform: rotate(360deg); } }

.player-controls {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: grid;
  gap: 3px;
  padding: 20px clamp(10px, 2.4vw, 23px) clamp(7px, 1.4vw, 15px);
  color: #fff;
  background: linear-gradient(0deg, #020b16ee 0%, #020b16aa 58%, transparent 100%);
  transition: opacity 175ms ease-out, transform 230ms var(--ease-out);
}

.player-timeline-row, .player-toolbar, .player-toolgroup, .player-toolgroup-end {
  display: flex;
  align-items: center;
  gap: clamp(2px, .8vw, 9px);
}

.player-timeline-row { gap: 10px; }
.player-track { position: relative; display: flex; flex: 1; min-width: 0; }
.player-track::before {
  position: absolute;
  inset: 0 5px auto;
  height: 3px;
  background: repeating-linear-gradient(90deg, #e9f7ffa0 0 1px, transparent 1px 5%);
  opacity: .55;
  pointer-events: none;
  content: "";
}

.player-hover-time {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 8px);
  left: clamp(30px, var(--hover-position, 0%), calc(100% - 30px));
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 1px solid #b0d5f07d;
  border-radius: 6px;
  color: #f7fdff;
  background: #0a1727ef;
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  animation: hover-time-in 140ms var(--ease-out) backwards;
}

@keyframes hover-time-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
}
.player-toolbar { justify-content: space-between; }
.player-toolgroup-end { justify-content: flex-end; }
.player-toolgroup, .player-toolgroup-end { min-width: 0; }

.player-timeline, .player-volume {
  appearance: none;
  min-width: 0;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.player-timeline { flex: 1; }
.player-volume { width: clamp(40px, 7.6vw, 88px); }
.player-timeline:disabled { cursor: default; opacity: .45; }

.player-timeline::-webkit-slider-runnable-track, .player-volume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--range-fill, 0%), #a9bbd66b 0);
}

.player-timeline::-moz-range-track, .player-volume::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--range-fill, 0%), #a9bbd66b 0);
}

.player-timeline::-webkit-slider-thumb, .player-volume::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 7px #020b1699;
}

.player-timeline::-moz-range-thumb, .player-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 7px #020b1699;
}

.player-time {
  flex: none;
  align-self: center;
  color: #f4faff;
  font-size: clamp(.66rem, 1.2vw, .83rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player-tool {
  display: inline-grid;
  flex: none;
  width: clamp(28px, 4vw, 40px);
  min-height: clamp(29px, 4vw, 40px);
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: inherit;
  background: transparent;
  transition: background-color 150ms, border-color 150ms, color 150ms, transform 170ms var(--ease-out);
}

.player-tool svg { width: clamp(17px, 2.25vw, 22px); height: clamp(17px, 2.25vw, 22px); }
.player-tool:enabled:hover { color: var(--accent); background: #fff2; border-color: #fff2; }
.player-tool:enabled:active { transform: scale(.92); transition-duration: 85ms; }
.player-tool:disabled { opacity: .38; }

.player-speed {
  min-height: 33px;
  max-width: 76px;
  padding: 4px 4px;
  border: 1px solid #ffffff36;
  border-radius: 6px;
  color: #f4faff;
  background: #111d33;
  font-size: .78rem;
  font-weight: 680;
}

.stage.player-fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.stage.player-fallback-fullscreen {
  position: fixed;
  z-index: 10;
  inset: 0;
}

body.player-scroll-lock { overflow: hidden; }
.watch-layout:has(.player-fallback-fullscreen) { animation: none; }

.stage.player-fullscreen .player-controls {
  padding-right: max(clamp(13px, 3vw, 43px), env(safe-area-inset-right));
  padding-left: max(clamp(13px, 3vw, 43px), env(safe-area-inset-left));
  padding-bottom: max(clamp(12px, 2.3vw, 30px), env(safe-area-inset-bottom));
}

.stage.player-idle:not(:has(.player-controls :focus-visible)), .stage.player-idle .player-surface { cursor: none; }

.stage.player-idle .player-controls:not(:has(:focus-visible)) {
  opacity: 0;
  transform: translateY(8px);
  transition-duration: 225ms, 210ms;
  transition-timing-function: ease-in, ease-in;
  pointer-events: none;
}


.transport { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; }
.check-field { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; font-size: .88rem; }
.check-field input { width: 16px; height: 16px; accent-color: var(--accent); }

.library {
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: max(380px, calc(100svh - var(--chrome-height) - 36px));
  background: #0f1d2df5;
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: 0 12px 46px #0409148a;
}

.library-header { display: grid; gap: 11px; padding: 15px 17px; border-bottom: 1px solid #5c799b40; }
.library-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px; }
.library h2 { font-size: 1.14rem; letter-spacing: -.026em; }
.episode-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 7px 8px 10px; scrollbar-color: #5677a0 var(--panel); }
.episode {
  display: grid;
  width: 100%;
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #edf4ff;
  background: transparent;
  font-size: .86rem;
  text-align: left;
  overflow-wrap: anywhere;
  transition: background-color 130ms ease, border-color 130ms ease;
}

.episode:hover { background: var(--panel-hover); }
.episode[aria-current="true"] { color: var(--accent); background: var(--selected); border-color: var(--selected-border); }
.episode:has(.episode-thumb) { grid-template-columns: 66px minmax(0, 1fr); }
.episode-thumb { width: 66px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; }
.episode-name { display: grid; gap: 3px; }
.episode-status { color: var(--muted); white-space: nowrap; font-size: .76rem; }

.console {
  width: min(100% - 24px, 858px);
  max-height: calc(100svh - 24px);
  padding: 0;
  color: inherit;
  background: var(--panel);
  border: 1px solid #38577e;
  border-radius: 14px;
  box-shadow: 0 25px 100px #020b1699;
}

.console[open] { animation: console-enter 275ms cubic-bezier(.18, .71, .24, 1) backwards; }
.console::backdrop { background: #060d1cbd; backdrop-filter: blur(6px); }
.console[open]::backdrop { animation: console-backdrop-in 220ms ease-out backwards; }

@keyframes console-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes console-backdrop-in { from { opacity: 0; } }

.console-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.console-header h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.console-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.console.upload-only { width: min(100% - 24px, 480px); }
.console.upload-only .console-content { grid-template-columns: minmax(0, 1fr); }
.console-codes { border-left: 1px solid var(--border); }
.console-section { display: grid; align-content: start; gap: 14px; padding: 20px; }
.console-section + .console-section { border-top: 1px solid var(--border); }
.console-section h3 { font-size: 1.04rem; }
.console-section .button-primary { justify-self: start; }

.new-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--selected);
  border: 1px solid var(--selected-border);
  border-radius: 8px;
}

.new-code output {
  display: block;
  color: var(--accent);
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: 740;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: all;
}

.invite-list { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.invite-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.invite-list strong { display: block; font-size: .88rem; }
progress { width: 100%; height: 8px; accent-color: var(--accent); }

@media (min-width: 861px) {
  .site-header { position: sticky; }
  .library { position: sticky; top: calc(var(--chrome-height) + 16px); }
  .watch-layout.library-collapsed { grid-template-columns: minmax(0, 1fr); }
  .watch-layout.library-collapsed .mobile-library { display: inline-flex; }
}

@media (max-width: 860px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr); }
  .mobile-library { display: inline-flex; }
  .library { max-height: min(450px, 65svh); }
  .hero-stage { flex-direction: column; align-items: stretch; }
  .hero-mosaic { position: relative; inset: auto; height: clamp(230px, 45vw, 355px); margin: 9px 23px 0; }
  .hero-copy { width: 100%; padding: 6px 27px 27px; }
  .hero-copy .series-logo-title { width: min(100%, 19rem); margin-bottom: 15px; }
}

@media (max-width: 600px) {
  :root { --chrome-height: 62px; }
  .sea-scene {
    --sea-position: 87% 50%;
    --ship-width: clamp(96px, 29vw, 132px);
    --ship-west: 8vw;
    --ship-east: calc(92vw - var(--ship-width));
    --ship-rest: 54vw;
  }
  .sea-ship { bottom: max(3%, env(safe-area-inset-bottom)); }
  .shell { width: calc(100% - 28px); }
  .header-inner { gap: 8px; padding-block: 7px; }
  .wordmark { font-size: 1.07rem; gap: 7px; }
  .brand-mark { width: 32px; }
  .header-actions { justify-content: flex-end; gap: 5px; }
  .header-actions .button { min-height: 36px; padding-inline: 8px; font-size: .73rem; }
  .sign-in { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding-block: 20px 42px; }
  .sign-in-art { width: min(82%, 320px); aspect-ratio: 1.54; }
  .sign-in-art img { width: 76%; }
  .catalog-hero { border-radius: 17px; }
  .catalog-page, .watch-layout:not([hidden]) { --view-shift: 7px; animation-duration: 320ms; }
  .catalog-page.catalog-reverse { --view-shift: -7px; }
  .hero-pane { --pane-travel: .55; animation-duration: 555ms; }
  .hero-mosaic { height: clamp(155px, 52vw, 260px); margin: 3px 10px 0; }
  .hero-copy { padding: 6px 17px 20px; }
  .hero-copy > * { --copy-travel: 9px; animation-duration: 410ms; }
  .hero-copy h1, .hero-copy h2 { font-size: clamp(2.7rem, 11.5vw, 4.55rem); }
  .hero-copy .series-logo-title { width: min(100%, 15rem); }
  .section-copy .series-logo-title { width: min(100%, 11rem); }
  .hero-summary { margin-top: 9px; }
  .feature-switcher { gap: 6px; padding: 9px 11px; }
  .feature-choice { min-height: 39px; gap: 7px; padding-right: 8px; font-size: .72rem; }
  .feature-choice-art { width: 38px; height: 27px; }
  .collection-heading { min-height: 172px; padding: 15px; gap: 12px; }
  .catalog-filter-controls { width: 100%; }
  .catalog-filter-controls .catalog-search { flex: 1 1 145px; width: auto; }
  .catalog-filter-controls select { flex: 1 1 115px; }
  .collection-art { width: 77%; }
  .series-grid, .continue-grid, .arc-grid, .episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-grid, .continue-grid { --card-time: 398ms; --card-travel: 10px; }
  .catalog-card { min-height: 116px; padding: 12px; }
  .poster-card .card-copy { padding: 10px 0 11px 10px; }
  .poster-card .card-arrow { margin-right: 8px; }
  .sea-ship img { --ship-rise: 7px; }
  .card-arrow { width: 27px; height: 27px; }
  .now-playing { min-height: 0; align-items: center; }
  .mobile-library { font-size: .76rem; padding-inline: 8px; }
  .transport { gap: 5px; }
  .console-content { grid-template-columns: minmax(0, 1fr); }
  .console-codes { border-top: 1px solid var(--border); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sea-ship, .sea-ship::before, .sea-ship img { animation: none; }
  .sign-in-card, .sign-in-art img, .catalog-page, .watch-layout:not([hidden]),
  .hero-stage::before, .hero-pane, .hero-art, .hero-copy > *, .collection-art,
  .catalog-grid > .catalog-card:nth-child(-n + 8), .continue-grid > .continue-card:nth-child(-n + 8),
  .console[open], .console[open]::backdrop { animation: none; }
  .catalog-card:hover, .catalog-card:active, .catalog-card:hover .card-art, .catalog-card:hover .card-arrow,
  .player-surface:hover .player-big-play, .player-surface:active .player-big-play,
  .player-tool:enabled:active, .stage.player-idle .player-controls:not(:has(:focus-visible)) { transform: none; }
  .player-waiting::after { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}