/* Shared visual tokens and measured reference treatments. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/montserrat-latin.woff') format('woff')}
:root{--bg:#050505;--panel:#141414;--text:#fff;--muted:#ffffff94;--line:#ffffff14;--display:Montserrat,Inter,sans-serif;--af-bg:var(--bg);--af-bg-elevated:#141414;--af-surface:#141414;--af-glass:#14141466;--af-glass-border:#ffffff14;--af-glass-panel:#10101085;--af-glass-panel-border:#ffffff1a;--af-glass-panel-highlight:#ffffff14;--af-pill:#f2f2f2;--af-text:#fff;--af-text-primary:#fffffff0;--af-text-secondary:#ffffffe0;--af-text-muted:#ffffff94;--af-border:#ffffff14;--af-settings-nav-active-bg:#ffffff17;--af-settings-nav-active-border:#ffffff1a}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,Inter}
@media(min-width:1024px){:root{--page-gutter:64px}}
@media(max-width:1023px){:root{--page-gutter:24px}}
body{font-family:var(--font);-webkit-font-smoothing:antialiased}
html[data-theme=midnight]{--af-bg-elevated:#101c30;--af-surface:#121e34;--af-glass:#0c162899;--af-glass-border:#7896be29;--af-glass-panel:#0a1220b3;--af-glass-panel-border:#7896be2e;--af-glass-panel-highlight:#94a3b81a;--af-pill:#b8c9dc;--af-text:#e8eef8;--af-text-primary:#e2e8f0f2;--af-text-secondary:#cbd5e1e0;--af-text-muted:#94a3b8b8;--af-border:#7896be24;--af-settings-nav-active-bg:#374b6e6b;--af-settings-nav-active-border:#94a3b838}
html[data-theme=pure-black]{--af-bg-elevated:#080808;--af-surface:#0c0c0c;--af-glass:#080808b8;--af-glass-border:#ffffff1f;--af-glass-panel:#040404c7;--af-glass-panel-border:#ffffff24;--af-glass-panel-highlight:#ffffff0d;--af-pill:#e5e5e5}
html[data-theme=custom]{--af-pill:var(--accent)}
.library-heading h1,.search-page-heading h1,.lists-heading h1,#detail-dialog .detail-body h2{font-family:var(--display)}
.header-shell,.title-page-nav,.bottom-dock{background:var(--af-glass);border-color:#ffffff1f;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:0 10px 40px #00000059;font-family:ui-sans-serif,system-ui,sans-serif}
.header-shell:hover,.title-page-nav:hover{background:#1e1e1e80;border-color:#ffffff2c}
.header-shell{gap:4px;padding:6px}
.header-actions{gap:4px}
.nav-link,.title-page-nav>a{padding:8px 24px;font-size:14px;font-weight:500;line-height:20px}
.header-actions .icon-button,.site-header .profile-trigger,.title-page-nav>a.title-nav-icon{width:40px;height:40px;min-width:40px;padding:10px}
.header-actions .icon-button svg,.title-nav-icon svg{width:20px;height:20px;stroke-width:2}
.nav-link svg{stroke-width:2}
.title-page-nav{gap:4px}
.button.primary,.nav-link.active,.title-page-nav>a.active,.bottom-dock .active{background:var(--af-pill)}
.button.primary{transition:transform .15s ease-out,background-color .15s ease-out,filter .15s ease-out}
.button.primary:hover,#detail-dialog .detail-actions .button.primary:hover{background:var(--af-pill);transform:none;filter:brightness(1.06);box-shadow:none}
.button:active{transform:scale(.98)}
.button.glass,.button.round,.hero-secondary{background:var(--af-glass);border-color:var(--af-glass-border);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
.hero-secondary{position:relative;padding:0;width:129px;height:52px;flex:none;border:0;background:#ffffff0f;box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -4px #0000000d}
.hero-secondary:before{content:'';position:absolute;inset:0;border:1px solid #ffffff1a;border-radius:inherit;pointer-events:none}
.hero-secondary .button{height:52px;min-height:52px;width:64px;flex:none;padding:0 20px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.hero-secondary .hero-save{border-radius:999px 0 0 999px}
.hero-secondary .hero-info{width:65px;padding-left:21px;border-radius:0 999px 999px 0}
.hero-secondary .button svg{width:24px;height:24px;stroke-width:2;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.hero-secondary .hero-info:before{top:14px;bottom:14px;background:#ffffff4d}
.hero-secondary .button:hover,.hero-secondary .button[aria-pressed=true]{background:transparent;transform:none}
.hero-secondary .button:hover svg{transform:scale(1.1)}
.hero-secondary .button:active{background:#ffffff4d;transform:none}
.hero-content{display:flex;flex-direction:column;gap:20px;width:min(672px,calc(100% - 128px))}
.hero-content h1,.hero-content .hero-description{margin:0}
.hero-meta{color:#fff9;line-height:24px}
.hero-meta small{color:inherit}
.hero-meta svg{color:#fff;stroke-width:2}
.hero-meta .hero-rating svg{width:18px;height:18px;fill:#fff}
.hero-buttons>.button.primary{height:52px;min-width:140px;padding:0 32px;gap:8px;font-size:18px;font-weight:700;letter-spacing:.45px}
.hero-description{max-width:576px;font-weight:500;color:#fff;text-shadow:none;filter:drop-shadow(0 4px 12px #00000059)}
.hero-title-logo{max-width:min(100%,352px);max-height:96px;filter:drop-shadow(0 16px 20px #0000004d);transition:transform .5s}
/* The heading spans the content column; only the artwork is a hover target. */
@media(hover:hover) and (pointer:fine){.hero-title-logo:hover{transform:scale(1.05)}}
.hero-backdrop-image{object-position:center top;animation:mf-hero-art-in .7s ease-out}
.hero-shade{background:linear-gradient(#00000073 0%,#0000002e 12%,transparent 28%),linear-gradient(0deg,#0006,transparent 50%),linear-gradient(90deg,#0006,transparent 50%)}
.hero-art{background:var(--bg)}
#discover-view:before{inset:0;opacity:.5;filter:blur(80px);transform:scale(1.2);background-color:var(--bg)}
.genre-select .mf-select-trigger,.filter-select .mf-select-trigger{background:var(--af-glass);border-color:var(--af-glass-border);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
.mf-select-menu{padding:4px;border-radius:12px;background:var(--af-glass-panel);border:1px solid var(--af-glass-panel-border);box-shadow:0 12px 32px #0004,inset 0 1px 0 var(--af-glass-panel-highlight);backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%);font-family:var(--font);color:#ffffffb3;scrollbar-width:thin;scrollbar-color:#ffffff47 transparent;animation:mf-menu-enter .16s ease-out both}
.mf-select-menu::-webkit-scrollbar{width:4px}.mf-select-menu::-webkit-scrollbar-thumb{background:#ffffff47;border-radius:4px}.mf-select-menu::-webkit-scrollbar-button{display:none}
.mf-select-option{min-height:44px;padding:12px;border-radius:8px;font-size:14px;line-height:20px;font-weight:500;gap:8px}
.mf-select-option+.mf-select-option{margin-top:0}
.mf-select-option[aria-selected=true],.mf-select-option.is-active[aria-selected=true]{background:transparent;color:white;box-shadow:none;font-weight:600}
.mf-select-option.is-active:not([aria-selected=true]){background:#ffffff0f}
.mf-select-check,.mf-select-check svg{width:14px!important;height:14px!important}
.mf-select.is-open button.mf-select-trigger{background:#ffffff0f;border-color:#ffffff1f;box-shadow:none}
.detail-facts{background:var(--af-glass-panel);border-color:var(--af-glass-panel-border);box-shadow:inset 0 1px 0 var(--af-glass-panel-highlight);backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%)}
#detail-dialog .detail-actions .button.primary{height:44px;padding:0 24px;font-size:16px;letter-spacing:.4px}
#detail-dialog .detail-actions .detail-save-icon,#detail-dialog .detail-actions .detail-share{background:#ffffff0f;border-color:#ffffff1a;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);transition:all .2s cubic-bezier(.4,0,.2,1)}
#detail-dialog .detail-actions .detail-save-icon:hover,#detail-dialog .detail-actions .detail-share:hover{background:#ffffff24;border-color:#fff3;transform:none}
#detail-dialog .detail-actions .detail-save-icon:active,#detail-dialog .detail-actions .detail-share:active{transform:scale(.95)}
@media(max-width:639px){#detail-dialog .detail-actions .button.primary{padding:0 20px;font-size:14px}}
#detail-dialog,#episodes-dialog,#provider-dialog,#detail-content{background:var(--bg)}
#detail-dialog::backdrop,#episodes-dialog::backdrop,#provider-dialog::backdrop{background:var(--bg)}
.route-placeholder[role=status]{background:var(--bg);padding:0;gap:0}
.route-placeholder[role=status]>h2,.route-placeholder[role=status]>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.catalog-skeleton,.feature-skeleton,.episode-skeleton{position:relative;overflow:hidden;background:var(--af-bg-elevated)}
.skeleton-art{background:transparent}
.catalog-skeleton:after,.feature-skeleton:after,.episode-skeleton:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff0 0,#ffffff0d 20%,#ffffff1a 60%,#fff0);transform:translateX(-100%);animation:mf-skeleton-shimmer 2s infinite}
@keyframes mf-skeleton-shimmer{to{transform:translateX(100%)}}
@keyframes mf-menu-enter{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
/* Short, compositor-friendly entrances keep shared surfaces consistent without
   delaying interaction or rebuilding the content underneath them. */
.mf-profile-menu:not([hidden]),.mf-context-menu:not([hidden]){animation:mf-menu-enter .16s ease-out both;transform-origin:top right}
.mf-profile-menu[data-mobile=true]{transform-origin:bottom right}
.mf-context-menu:not([hidden]){transform-origin:top left}
.dmca-page:not([hidden]){animation:page-in .25s ease-out}
.list-picker .list-name-form:not([hidden]){animation:mf-menu-enter .16s ease-out both}
@keyframes mf-hero-art-in{from{opacity:.25}to{opacity:1}}
@media(min-width:1024px){.hero{height:85vh;min-height:512px;overflow:visible;background:transparent}.hero-art{height:calc(100% + 20vh);bottom:auto;mask-image:linear-gradient(#000 40%,transparent 98%)}.hero-shade{height:calc(100% + 20vh);bottom:auto;mask-image:linear-gradient(#000 40%,transparent 98%)}.hero-content{bottom:80px}.hero-description{min-height:4.65em}.hero h1{font-size:clamp(38px,3.34vw,56px)}.hero-pagination{bottom:120px}.discovery-content{margin-top:48px}}
@media(max-width:1023px){.hero{height:85vh;min-height:512px;overflow:visible;background:transparent}.hero-art,.hero-shade{height:calc(100% + 20vh);bottom:auto;mask-image:linear-gradient(#000 40%,transparent 98%)}.hero-content{bottom:80px}.discovery-content{margin-top:48px}.hero-secondary{width:122px}.hero-secondary .button{height:46px;min-height:46px}.hero-title-logo{max-width:min(100%,320px);max-height:68px}.hero-description{max-width:576px;font-size:14px;line-height:1.5;-webkit-line-clamp:2;min-height:3em}}
@media(max-width:640px){.hero-secondary{width:114px}.hero-secondary .button{height:44px;min-height:44px}.hero-secondary .button svg{width:22px;height:22px}.mf-select-option{min-height:44px;font-size:14px}}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion=full])) .catalog-skeleton:after,:where(html:not([data-motion=full])) .feature-skeleton:after,:where(html:not([data-motion=full])) .episode-skeleton:after{animation:none;display:none}:where(html:not([data-motion=full])) .hero-backdrop-image,:where(html:not([data-motion=full])) .mf-select-menu{animation:none}:where(html:not([data-motion=full])) .hero-title-logo{transition:none}}
:where(html[data-motion=reduced]) .catalog-skeleton:after,:where(html[data-motion=reduced]) .feature-skeleton:after,:where(html[data-motion=reduced]) .episode-skeleton:after{animation:none;display:none}
:where(html[data-motion=reduced]) .hero-backdrop-image,:where(html[data-motion=reduced]) .mf-select-menu{animation:none}
:where(html[data-motion=reduced]) .hero-title-logo{transition:none}
/* The hero keeps the same 52px controls at every breakpoint. */
@media(min-width:1024px){.hero-content .hero-description{font-size:18px;line-height:1.55}.hero-meta{font-size:16px}.hero-content h1{font-family:inherit;font-size:60px;font-weight:900;letter-spacing:-1.5px;line-height:1}}
@media(max-width:1023px){.hero-content{left:24px;right:24px;width:auto;max-width:672px;bottom:72px;align-items:center;gap:16px}.hero-content h1{font-family:inherit;font-size:48px;font-weight:900;line-height:1;letter-spacing:-1.2px}.hero-meta{font-size:14px;line-height:20px;gap:16px}.hero-meta .hero-rating svg{width:16px;height:16px}.hero-meta svg{width:14px;height:14px}.hero-secondary{width:129px;height:52px;padding:0}.hero-secondary .button{height:52px;min-height:52px;width:64px}.hero-secondary .hero-info{width:65px}.hero-secondary .button svg{width:24px;height:24px}.hero-content .hero-buttons>.button.primary{height:52px;min-width:140px;font-size:18px;padding:0 32px}.hero-content .hero-description{max-width:576px;margin:0;line-height:1.5;font-size:14px}}
@media(max-width:639px){.hero-content h1{font-size:36px;line-height:40px;letter-spacing:-.9px}}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion=full])) .hero-secondary .button svg{transition:none}}
:where(html[data-motion=reduced]) .hero-secondary .button svg{transition:none}
#library-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:48px}
@media(min-width:768px){#library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){#library-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1280px){#library-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}