/* yooickuu / open canvas. Layout, surfaces and motion are shared across views. */
:root{--bg:#f4f4f7;--panel:#fff;--text:#22232b;--muted:#777986;--purple:#7862d5;--purple-dark:#634cbd;--soft:#eae7f4;--line:transparent;--glass:rgba(255,255,255,.72);--shadow:0 16px 50px #2020300a;--rail:112px}
body.dark{--bg:#0e1015;--panel:#191c24;--text:#f3f3f7;--muted:#979ba9;--purple:#b4a2f4;--purple-dark:#9d89e5;--soft:#272433;--glass:rgba(25,28,36,.74);--shadow:0 16px 50px #0002}
body{background:var(--bg);letter-spacing:-.015em}*{box-sizing:border-box}
button,input,textarea,select{font:inherit}button{transition:background .2s,transform .2s,opacity .2s;cursor:pointer}
button:active{transform:scale(.97)}button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.select-trigger:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;height:78px;padding:0 36px 0 calc(var(--rail) + 32px);border:0;background:var(--glass);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.header>.brand{position:fixed;left:16px;top:16px;width:80px;display:flex;justify-content:center}.header>.brand .brand-name,.header>.brand>span{display:none}
.header nav{position:fixed;left:0;top:78px;bottom:0;width:var(--rail);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:15px;padding:30px 10px;background:var(--glass)}
.header .nav-link{position:relative;width:90px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px 4px;border:0;border-radius:20px;font-size:11px;color:var(--muted);white-space:nowrap}.header .nav-link .ui-icon{width:23px;height:23px}.header .nav-link.active{background:var(--soft);color:var(--purple)}.header .nav-link.active::after{display:none}
.header-tools{width:100%;display:flex;align-items:center;gap:14px}.header-tools .search{margin-right:auto;width:min(520px,55vw);background:color-mix(in srgb,var(--panel) 70%,transparent);border:0;border-radius:14px;height:44px}.header-tools .search input{background:transparent}.header-tools .search kbd{border:0;background:transparent}
main{max-width:1600px;width:calc(100% - var(--rail) - 72px);margin:32px 36px 60px calc(var(--rail) + 36px);padding:0}footer{margin-left:var(--rail);border:0}
main.home-container{margin-top:0}.home-container .section{margin-top:34px}
.button{border:0;border-radius:12px;padding:12px 20px;min-height:44px;box-shadow:none}.button.primary{background:var(--purple);color:#fff}body.dark .button.primary{color:#211b33}.button.soft{background:var(--soft)}.icon-button{border:0;border-radius:12px}.login-button{white-space:nowrap}








.hero-slide-count{font-variant-numeric:tabular-nums;letter-spacing:.15em}.hero-slide-count i{opacity:.4;padding:0 7px;font-style:normal}.hero-progress{display:block;width:120px;height:2px;background:#ffffff26;overflow:hidden}.hero-progress i{display:block;height:100%;background:#d8c8ff;transform-origin:left;animation:slide-time 7s linear both}
.section-head{margin-bottom:24px}.section-head h2{font-size:24px;letter-spacing:-.04em;font-weight:750}.anime-grid{gap:26px 20px}.anime-card{border:0;background:none;box-shadow:none;min-width:0}.poster-button{display:block;width:100%;aspect-ratio:2/3;border:0;border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:none}.poster-button img{display:block;width:100%;height:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.poster-button:hover img{transform:scale(1.045)}.anime-title{font-size:14px;line-height:1.45;letter-spacing:-.02em}.anime-meta{font-size:11px;color:var(--muted)}
.catalog-options,.filter-row,.catalog-controls{border:0;background:transparent;box-shadow:none}.catalog-options{padding:14px 0}.filter-chip,.chip{border:0}.discovery-panel{border:0;border-radius:24px;background:linear-gradient(120deg,var(--soft),var(--panel));box-shadow:none;padding:32px}.discovery-tile{border:0;background:var(--glass);border-radius:16px;transition:transform .25s,background .25s}.discovery-tile:hover{transform:translateY(-4px)}
.continue-card,.profile-card,.profile-fields,.library-sidebar,.profile-stats>*,.empty-state,.welcome-card{border:0;box-shadow:none;border-radius:20px;background:var(--glass)}.continue-card{padding:18px}.profile-page{max-width:1080px;margin:auto}.profile-account-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.profile-email{overflow-wrap:anywhere}.profile-stats{gap:12px}
input,textarea,.select-trigger{border:0!important;border-radius:12px!important;background:var(--soft)}.site-select-menu{border:0;border-radius:15px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 16px 50px #0003}.select-trigger{min-height:42px}.select-option{border:0}
dialog{border:0;border-radius:24px;background:var(--panel);box-shadow:0 35px 100px #0005}dialog::backdrop{background:#090b1480;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.details-dialog{isolation:isolate;position:fixed;overflow-x:hidden;padding:28px 38px 40px;background:var(--panel);width:min(1080px,94vw)}

.details-layout{grid-template-columns:250px minmax(0,1fr);gap:36px;position:relative}.details-copy{background:transparent!important;border:0!important;padding:20px 0!important;box-shadow:none;border-radius:0}.details-copy h2{font-size:32px;letter-spacing:-.035em;line-height:1.2;text-wrap:balance}.details-story{background:transparent;border:0}.details-description{line-height:1.85}.details-visual{padding:12px 0}.details-layout .details-poster{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:15px;box-shadow:0 14px 45px #0003}.details-toolbar{position:sticky;top:0;background:transparent;border:0;z-index:4}.details-toolbar .icon-button{background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.details-tags span{border:0;background:var(--glass);border-radius:7px}.detail-library{border:0}
/* A definite frame height makes video grow with cinema mode, including Safari. */
main.watch-container{max-width:none;width:calc(100% - var(--rail) - 72px);margin:24px 36px 60px calc(var(--rail) + 36px)}
.watch-layout{grid-template-columns:minmax(0,900px) minmax(210px,270px);gap:32px;justify-content:center}.watch-main{min-width:0}.watch-main .video-shell{border:0;border-radius:12px;box-shadow:none}.watch-main .video-wrap{position:relative;width:100%;height:auto;aspect-ratio:16/9;max-height:none}.watch-main .video-wrap video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:#000}
.watch-page.cinema .watch-layout{grid-template-columns:minmax(0,1fr)}.watch-page.cinema .watch-main{width:100%;max-width:none}.watch-page.cinema .video-shell{width:100%;max-width:1400px;margin:auto}.watch-page.cinema .video-wrap{width:100%;height:min(74dvh,740px);max-height:none;aspect-ratio:auto}.watch-page.cinema .watch-sidebar{display:none}
.video-shell:fullscreen{width:100%!important;max-width:none!important;height:100%!important;border-radius:0}.video-shell:fullscreen .video-wrap{width:100%;height:100%;max-height:none;aspect-ratio:auto;flex:1}.video-controls{background:#15171f}.video-controls .select-trigger{background:#ffffff08;border:0!important}.watch-recommendation{border:0;border-radius:12px;padding:12px 0}.watch-recommendation:hover{background:var(--soft)}.watch-recommendation img{width:60px;height:90px;border-radius:8px}.watch-heading h1{font-size:25px}.watch-page .player-settings{border:0;background:var(--glass)}
@keyframes art-arrive{from{opacity:.35;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}@keyframes slide-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes surface-arrive{from{transform:translateY(8px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){dialog[open],.discovery-panel,.profile-page,.continue-card{animation:surface-arrive .35s ease both}.anime-card{animation:surface-arrive .4s ease both}.anime-card:nth-child(3n/**/+2){animation-delay:.035s}.anime-card:nth-child(3n){animation-delay:.07s}}
@media(min-width:1800px){main:not(.watch-container){margin-left:auto;margin-right:auto;padding-left:var(--rail)}}
@media(max-width:1100px){:root{--rail:88px}.header{padding-right:24px;padding-left:112px;gap:10px}.header>.brand{left:9px;width:70px}.header .nav-link{width:70px}.header-tools{gap:8px}.header-tools .search{width:min(400px,40vw)}main,main.watch-container{width:calc(100% - var(--rail) - 48px);margin-left:calc(var(--rail) + 24px);margin-right:24px}.watch-layout{grid-template-columns:minmax(0,1fr) 210px;gap:22px}.details-layout{grid-template-columns:220px minmax(0,1fr);gap:26px}}
@media(max-width:800px){:root{--rail:0px}.header{height:auto;min-height:70px;padding:12px 20px;flex-wrap:wrap;gap:8px}.header>.brand{position:static;width:auto;margin-right:auto}.header-tools{width:auto;gap:8px}.header-tools .search{display:none}.header nav{position:static;order:3;width:100%;padding:0;flex-direction:row;gap:6px;background:transparent;justify-content:center}.header .nav-link{height:42px;width:auto;flex:1;flex-direction:row;gap:7px;font-size:12px;border-radius:10px}.header .nav-link .ui-icon{width:17px;height:17px}main,main.watch-container{width:calc(100% - 40px);margin:20px 20px 40px}.home-container{margin-top:0}.watch-layout{grid-template-columns:1fr}.watch-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}.watch-sidebar h2{grid-column:1/-1}.watch-page.cinema .video-wrap{height:65dvh}.details-dialog{padding:20px 24px}.details-copy h2{font-size:27px}.details-layout{grid-template-columns:180px minmax(0,1fr);gap:24px}}
@media(max-width:520px){.header{padding:10px 14px;gap:6px}.header-tools .button{padding:9px 12px;font-size:12px}.header-tools{gap:4px}.header .brand img{width:38px;height:38px}.header .nav-link{font-size:11px}.header .nav-link .ui-icon{width:16px;height:16px}.header-tools .icon-button{width:34px}.header-tools .select-trigger{padding:8px;font-size:11px}main,main.watch-container{width:calc(100% - 32px);margin:16px 16px 40px}.section-head h2{font-size:21px}.anime-grid{gap:22px 12px}.poster-button{border-radius:10px}.anime-title{font-size:12px}.details-dialog{width:calc(100vw - 16px);padding:16px 20px;max-height:94dvh;border-radius:18px}.details-layout{grid-template-columns:1fr;gap:10px}.details-visual{display:grid;grid-template-columns:115px minmax(0,1fr);gap:12px 18px}.details-layout .details-poster{width:115px;height:173px;grid-row:1/3}.details-copy{padding:10px 0!important}.details-copy h2{font-size:25px}.watch-breadcrumb{padding:0}.watch-main .video-shell{margin:0 -16px;border-radius:0}.watch-main .video-wrap{width:100%}.watch-page.cinema .video-shell{width:calc(100% + 32px)}.watch-page.cinema .video-wrap{height:60dvh}.watch-heading,.watch-page .player-pickers,.watch-page .episode-nav,.watch-page .player-settings,.watch-sidebar{margin-left:0;margin-right:0}.watch-heading h1{font-size:21px}.watch-sidebar{display:block}.profile-account-actions{gap:5px}.profile-account-actions .button{font-size:11px;padding:10px}.profile-page .section-head{align-items:flex-start;gap:10px}.discovery-panel{padding:24px 20px}.continue-card{padding:14px}footer{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
.email-notice{text-align:center;padding:16px 4px}.email-notice p{color:var(--muted);margin:18px 0 28px}.notice-symbol{display:grid;place-items:center;margin:0 auto 22px;width:64px;height:64px;background:var(--soft);border-radius:22px;color:var(--purple)}.notice-symbol svg{width:28px;height:28px}
.account-options{display:grid;gap:10px;margin:22px 0}.account-option{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--soft);border:1px solid var(--line);padding:14px;border-radius:14px;color:var(--text)}.account-option>span:nth-child(2){flex:1;min-width:0}.account-option small{display:block;color:var(--muted);overflow-wrap:anywhere}.account-option:disabled{opacity:.7}.account-initial{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--panel);color:var(--purple);font-weight:800}

.header #list-count{position:absolute;right:10px;top:8px;font-size:9px;padding:2px 5px}.header .avatar{outline:0;border:0;background:var(--soft)}

dialog[open]{opacity:1}.details-dialog .details-toolbar{margin-top:-28px}.details-dialog .details-layout{z-index:1}.details-dialog .details-toolbar{z-index:3}
@media(max-width:800px){.details-dialog .details-toolbar{margin-top:-20px}}@media(max-width:520px){.details-dialog .details-toolbar{margin-top:-16px}}
/* Top navigation floats over the artwork; the content remains an open canvas. */
:root{--rail:0px}
.header{height:76px;min-height:76px;padding:0 4%;gap:28px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.header>.brand{position:static;width:auto;margin:0;flex:none;gap:10px}.header>.brand .brand-name,.header>.brand>span{display:inline}.header .brand-mark{width:34px;height:34px}.header>.brand{font-size:23px;letter-spacing:-1px}
.header nav{position:static;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;padding:0;background:none;gap:5px;flex:none}
.header .nav-link{width:auto;height:42px;display:flex;flex-direction:row;gap:6px;padding:10px 13px;font-size:12px;border-radius:11px}.header .nav-link>.ui-icon{display:none}.header #list-count{position:static;font-size:9px}
.header-tools{width:auto;margin-left:auto;gap:10px}.header-tools .search{width:205px;height:38px;margin:0;padding:0 12px;background:#85859d0c;border:0;border-radius:11px;transition:background .2s,width .3s}.header-tools .search:focus-within{background:var(--soft);width:250px}.header-tools .search input{width:100%;min-width:0;font-size:12px}.header-tools .search kbd{display:none}.header-tools .search>svg{width:17px;height:17px}.header-tools .select-trigger{background:transparent}.header-tools .login-button{min-height:38px;padding:9px 15px;font-size:12px}
main,main.watch-container{width:92%;max-width:1440px;padding:0;margin:28px auto 60px}main.home-container{margin-top:0}
body:has(.home-container) .header{background:#0e10152b;color:#fff}body:has(.home-container) .header .brand,body:has(.home-container) .header .nav-link,body:has(.home-container) .header .icon-button,body:has(.home-container) .header .select-trigger{color:#fff}body:has(.home-container) .header .nav-link.active{background:#ffffff15}body:has(.home-container) .header .search{background:#ffffff0c;color:#fff}body:has(.home-container) .header .search input{color:#fff}body:has(.home-container) .header .search input::placeholder{color:#d3d1dc}body:has(.home-container) .header .search svg{stroke:#ddd}
.header.scrolled{background:var(--glass)!important}.header.scrolled .brand,.header.scrolled .nav-link,.header.scrolled .icon-button,.header.scrolled .select-trigger,.header.scrolled .search input{color:var(--text)!important}.header.scrolled .search input::placeholder{color:var(--muted)!important}
footer{margin-left:auto}.watch-layout{grid-template-columns:minmax(0,820px) minmax(210px,270px)}
@media(prefers-reduced-motion:no-preference){.nav-link,.filter-chip,.select-option,.account-option,.watch-recommendation{transition:background .22s,color .22s,transform .22s}.nav-link:hover,.account-option:hover{transform:translateY(-2px)}.select-option:hover{transform:translateX(3px)}.watch-recommendation:hover{transform:translateX(4px)}.site-select-menu{animation:surface-arrive .2s ease-out}.poster-play{transition:opacity .25s,transform .25s}.poster-button:hover .poster-play{transform:translate(-50%,-50%) scale(1.05)}}
@media(max-width:1100px){.header{gap:14px;padding:0 3%}.header>.brand{font-size:21px}.header-tools{gap:6px}.header-tools .search{width:150px}.header-tools .search:focus-within{width:180px}.header .nav-link{padding:10px;font-size:11px}}
@media(max-width:800px){.header{height:auto;min-height:68px;padding:12px 20px;gap:8px}.header>.brand{margin-right:auto}.header-tools{margin-left:0}.header nav{order:3;width:100%;justify-content:center;gap:6px}.header .nav-link{flex:1;height:36px;justify-content:center}.header-tools .search{display:none}main,main.watch-container{width:calc(100% - 40px);margin:20px auto 40px}.watch-layout{grid-template-columns:1fr}}
@media(max-width:520px){.header{padding:10px 16px;gap:6px}.header>.brand{font-size:21px}.header .brand-mark{width:30px;height:30px}.header nav{gap:4px}.header .nav-link{font-size:11px}.header-tools{gap:3px}.header-tools .select-trigger{font-size:11px}.header-tools .icon-button{width:32px}.header-tools .login-button{padding:8px 10px;font-size:11px}main,main.watch-container{width:calc(100% - 32px);margin:16px auto 40px}.header-tools .search{display:none}.watch-main .video-shell{margin:0 -16px}}
/* Neutral charcoal, with the artwork fading into the page instead of a flat tint. */
body.dark{--bg:#101010;--panel:#1b1b1b;--text:#f4f3f5;--muted:#a2a0a7;--soft:#28252e;--glass:rgba(27,27,27,.76)}

.details-dialog{background:var(--panel)}

.video-controls{background:#191919}.video-shell{background:#080808}.watch-main video{background:#000}
@media(max-width:520px){}
/* Form boundaries are functional: keep them distinct from decorative panel outlines. */
:root{--field-bg:#eeedf3;--field-border:#d5d2df;--field-focus:#8c74d5}
body.dark{--field-bg:#252427;--field-border:#49464f;--field-focus:#b8a3f0}
form input:not([type=checkbox]):not([type=range]):not([type=file]),form textarea,.detail-library textarea,.catalog-search input,.catalog-pagination input,.profile-fields input,.profile-fields textarea{background:var(--field-bg)!important;border:1px solid var(--field-border)!important;min-height:46px;padding:12px 14px;color:var(--text);box-shadow:inset 0 1px 2px #00000005;transition:border-color .2s,box-shadow .2s,background .2s}
form input:focus,form textarea:focus,.detail-library textarea:focus,.catalog-search input:focus{border-color:var(--field-focus)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--field-focus) 15%,transparent);outline:0}.auth-dialog form{gap:20px}.auth-dialog label,.profile-fields label{font-size:12px;gap:9px}.password-field{grid-template-columns:minmax(0,1fr) 44px}.password-toggle{border:1px solid var(--field-border);height:46px}.form-error:empty{display:none}
/* Catalogue: discovery first, a quiet filtering toolbar, then consistently sized art. */
.discovery-panel{position:relative;overflow:hidden;background:radial-gradient(ellipse at 95% 0%,#ac8be526,transparent 65%),var(--glass);padding:34px 36px;margin-bottom:32px;border-radius:24px}.discovery-panel h1{font-size:34px;letter-spacing:-.045em;margin:0 0 8px}.discovery-panel>p{color:var(--muted);font-size:13px;max-width:600px;line-height:1.7}.discovery-grid{gap:12px;margin-top:28px}.discovery-tile{min-height:95px;padding:20px;background:color-mix(in srgb,var(--panel) 78%,transparent);gap:14px}.discovery-tile.selected{background:var(--soft);color:var(--purple)}.discovery-tile>.ui-icon:first-child{width:26px;height:26px;color:var(--purple)}
.catalog-section .section-head{margin-bottom:18px}.catalog-search{display:block;margin-bottom:12px}.catalog-search input{width:100%;border-radius:14px!important;background:var(--glass)!important}.catalog-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0 18px}.catalog-options .select-trigger,.sort-label .select-trigger{background:var(--glass);border:1px solid color-mix(in srgb,var(--field-border) 65%,transparent)!important;min-height:40px}.available-filter{font-size:12px;gap:8px}.chip{padding:9px 14px;border-radius:10px;background:transparent;color:var(--muted)}.chip.selected{background:var(--soft);color:var(--purple)}.results-caption{margin:16px 0;color:var(--muted)}
/* Lists have their own navigation and a spacious collection canvas. */
.library-layout.with-sidebar{grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start}.library-sidebar{position:sticky;top:100px;padding:22px 14px;background:var(--glass);border-radius:22px}.library-sidebar h3{font-size:19px;padding:0 10px;margin:0 0 18px}.list-nav{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 14px;margin:3px 0;border:0;border-radius:12px;color:var(--muted);background:transparent;font-size:12px;gap:10px;text-align:left;overflow-wrap:anywhere}.list-nav.active{background:var(--soft);color:var(--purple);font-weight:700}.list-nav span{font-size:10px;min-width:25px;text-align:center;background:var(--panel);border-radius:7px;padding:3px 6px;flex:none}.library-sidebar>.text-button{display:flex;margin:18px 10px 0;font-size:11px}.with-sidebar .catalog-section{padding:0;min-width:0}.with-sidebar .anime-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
/* Profile banner spans the whole page; editable fields and preferences are separate. */
.profile-page{max-width:1180px;padding:0;margin:auto}.profile-page>.section-head{margin-bottom:22px}.profile-page h1{font-size:30px}
.profile-grid{position:relative;display:grid;grid-template-columns:290px minmax(0,1fr);gap:26px;max-width:none;margin-top:-75px;align-items:start}.profile-card{grid-column:1;grid-row:1/3;padding:0 18px 24px;background:transparent;border:0;text-align:center}.profile-avatar{width:116px;height:116px;border:5px solid var(--bg);margin:0 auto 12px;font-size:40px}.profile-card h2{font-size:23px;margin:18px 0 8px}.profile-card .bio-preview{line-height:1.8;font-size:13px}.profile-card .profile-email{line-height:1.6;font-size:11px}.profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin-top:24px;border:0}.profile-stats>span{padding:17px 8px;border-radius:14px;background:var(--glass);font-size:10px;line-height:1.5}.profile-stats strong{font-size:25px;margin-bottom:4px}.profile-fields{grid-column:2;margin-top:55px;padding:26px;background:var(--glass);border-radius:20px}.profile-fields h2,.profile-preferences h2{font-size:19px;margin:0 0 22px;letter-spacing:-.03em}.profile-fields form{gap:17px}.profile-fields textarea{min-height:110px}.profile-preferences{grid-column:2;padding:26px;background:var(--glass);border-radius:20px;min-width:0}.profile-preferences .toggle-row{padding:15px 0;border-bottom:1px solid color-mix(in srgb,var(--field-border) 30%,transparent)}.profile-preferences .profile-history{margin:25px 0 0}.profile-history .history-item{background:transparent;border:0;border-radius:10px;padding:10px 0}.profile-history .history-item:hover{background:var(--soft)}.profile-history .history-item img{width:44px;height:66px;object-fit:cover;border-radius:7px}.profile-history h3{font-size:17px}.profile-account-actions{gap:12px}.profile-preferences>.danger{margin-top:26px}
.banner-crop-dialog{width:min(850px,calc(100vw - 24px))}.banner-crop-dialog .crop-layout{grid-template-columns:1fr}.banner-crop-dialog .crop-canvas{aspect-ratio:3.2;border-radius:12px;outline:1px solid var(--field-border)}.banner-crop-dialog .crop-previews{display:none}
@media(max-width:1000px){.with-sidebar .anime-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.library-layout.with-sidebar{grid-template-columns:190px minmax(0,1fr);gap:22px}.profile-grid{grid-template-columns:250px minmax(0,1fr);gap:20px}.profile-fields,.profile-preferences{padding:22px}}
@media(max-width:700px){.library-layout.with-sidebar{display:block}.library-sidebar{position:static;display:flex;flex-wrap:wrap;gap:6px;padding:16px;margin-bottom:24px}.library-sidebar h3{width:100%;padding:0;margin-bottom:8px}.library-sidebar .list-nav{width:auto;max-width:100%;padding:9px 11px;margin:0;gap:8px}.library-sidebar>.text-button{margin:10px 8px 0}.with-sidebar .anime-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-grid{grid-template-columns:1fr;margin-top:-65px;gap:20px}.profile-card{grid-column:1;grid-row:auto;padding:0 14px 8px}.profile-fields,.profile-preferences{grid-column:1;margin:0}.profile-stats{grid-template-columns:repeat(4,minmax(0,1fr));max-width:520px;margin:22px auto 0}.profile-stats>span{font-size:9px;padding:14px 5px}.profile-stats strong{font-size:22px}.discovery-panel{padding:26px}.discovery-panel h1{font-size:28px}}
@media(max-width:450px){.with-sidebar .anime-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.discovery-panel{padding:22px 18px;border-radius:18px}.discovery-grid{gap:8px}.discovery-tile{min-height:85px;padding:14px 12px;gap:8px;font-size:12px}.discovery-tile>.ui-icon:first-child{width:20px;height:20px}.profile-page>.section-head{display:block}.profile-account-actions{margin-top:14px;justify-content:flex-start}.profile-fields,.profile-preferences{padding:20px}.auth-dialog{padding:26px 22px}.auth-dialog form{gap:18px}.catalog-options{gap:9px}.available-filter{font-size:11px}}
/* Shared frosted surfaces: subtle atmosphere under every view, strong foreground contrast. */
body:has(.page-catalog),body:has(.page-library),body:has(.page-profile){background:radial-gradient(ellipse at 10% 10%,#a487df16,transparent 45%),radial-gradient(ellipse at 90% 42%,#b39bcb12,transparent 50%),var(--bg);background-attachment:fixed}
body.dark:has(.page-catalog),body.dark:has(.page-library),body.dark:has(.page-profile){background:radial-gradient(ellipse at 8% 8%,#b59ad51a,transparent 45%),radial-gradient(ellipse at 90% 45%,#baa3c612,transparent 52%),var(--bg);background-attachment:fixed}
.discovery-panel,.discovery-tile,.library-sidebar,.profile-fields,.profile-preferences,.profile-stats>span{backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%);box-shadow:inset 0 1px 0 #ffffff0c,0 16px 45px #00000008}
.profile-fields,.profile-preferences,.library-sidebar{background:color-mix(in srgb,var(--panel) 82%,transparent)}.discovery-tile{background:color-mix(in srgb,var(--panel) 70%,transparent)}

.profile-card h2,.profile-fields h2,.profile-preferences h2,.library-sidebar h3,.discovery-panel h1{color:var(--text)}
.details-copy .details-description{color:var(--text)}body.dark .details-copy{ text-shadow:0 1px 8px #0005}

@media(max-width:700px){}@media(max-width:450px){}

/* Keep the overlapping edit card distinct from the banner in both themes. */
.profile-fields{box-shadow:0 12px 35px #00000010,inset 0 1px 0 color-mix(in srgb,var(--field-border) 55%,transparent);background:color-mix(in srgb,var(--panel) 94%,transparent)}

/* Clear glass: a translucent fill, restrained highlights and readable foregrounds. */
:root{--glass-fill:rgba(255,255,255,.58);--glass-edge:rgba(255,255,255,.75);--glass-sheen:rgba(255,255,255,.42);--glass-depth:0 10px 32px #2521330b}
body.dark{--glass-fill:rgba(35,34,39,.58);--glass-edge:rgba(255,255,255,.12);--glass-sheen:rgba(255,255,255,.055);--glass-depth:0 10px 32px #00000024}
:is(.discovery-panel,.discovery-tile,.library-sidebar,.profile-fields,.profile-preferences,.profile-stats>span,.continue-card,.welcome-card,.empty-state,.player-settings){background:linear-gradient(135deg,var(--glass-sheen),transparent 55%),var(--glass-fill);backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 #00000008,var(--glass-depth)}
:is(.button.soft,.icon-button,.glass-button,.select-trigger,.chip,.filter-chip,.account-option),.header .nav-link.active,.list-nav.active{background:linear-gradient(140deg,var(--glass-sheen),transparent 65%),var(--glass-fill);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 #0000000a,0 4px 14px #00000008;color:var(--text)}
.button.primary{background:linear-gradient(135deg,#ffffff30,transparent 75%),color-mix(in srgb,var(--purple) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff5c,0 6px 20px #7862d526}
:is(.button.soft,.icon-button,.glass-button,.select-trigger,.chip):hover{background-color:color-mix(in srgb,var(--panel) 78%,transparent)}
.site-select-menu{background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:inset 0 1px 0 var(--glass-edge),0 16px 40px #0003}
.header{backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%)}


.profile-fields{background:linear-gradient(135deg,var(--glass-sheen),transparent 55%),color-mix(in srgb,var(--panel) 78%,transparent)}
/* Fade the complete banner layer, including its backing, into the real page beneath. */






/* Show the full composition rather than filling a tall box with a narrow banner. */



.hero-outgoing{pointer-events:none}


.poster-play{transform:translate(-50%,-50%);background:#ffffffb8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #ffffffc0,0 5px 20px #0002}
.poster-play>.ui-icon{transform:translateX(-1px)}
@media(max-width:800px){}
@media(max-width:520px){





 :is(.discovery-panel,.discovery-tile,.library-sidebar,.profile-fields,.profile-preferences,.profile-stats>span,.continue-card){backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
@supports not (backdrop-filter:blur(1px)){.site-select-menu{background:var(--panel)}}

/* October 19: one layout and one surface system for both themes. */
:root{--bg:#f1f2f6;--panel:#fff;--text:#252330;--muted:#656272;--soft:#e8e5f2;--purple:#7151c6;--field-bg:#ffffffad;--field-border:#c8c4d4;--glass-fill:#ffffff70;--glass-edge:#ffffffd9;--glass-sheen:#ffffff70;--glass-depth:0 10px 28px #2521330b;--glass:rgba(255,255,255,.72)}
body.dark{--bg:#111113;--panel:#202024;--text:#f3f0f8;--muted:#aaa5b5;--soft:#302b3c;--purple:#bba5f5;--field-bg:#1d1c24b8;--field-border:#514a61;--glass-fill:#25232c8c;--glass-edge:#ffffff24;--glass-sheen:#ffffff0c;--glass-depth:0 10px 28px #00000026;--glass:rgba(29,28,34,.76)}
body{color:var(--text)}
body:has(.page-catalog),body:has(.page-library),body:has(.page-profile){background:radial-gradient(ellipse at 8% 10%,#c1b1ed35,transparent 47%),radial-gradient(ellipse at 95% 70%,#adc7dd25,transparent 45%),var(--bg);background-attachment:scroll}
body.dark:has(.page-catalog),body.dark:has(.page-library),body.dark:has(.page-profile){background:radial-gradient(ellipse at 8% 10%,#8365ba20,transparent 47%),radial-gradient(ellipse at 95% 70%,#a596b112,transparent 45%),var(--bg);background-attachment:scroll}
:is(.discovery-panel,.discovery-tile,.library-sidebar,.profile-fields,.profile-preferences,.profile-history,.profile-stats>span,.continue-card,.welcome-card,.empty-state,.player-settings){background:linear-gradient(125deg,var(--glass-sheen),transparent 55%),var(--glass-fill);backdrop-filter:blur(6px) saturate(125%);-webkit-backdrop-filter:blur(6px) saturate(125%);box-shadow:inset 0 1px 0 var(--glass-edge),inset 1px 0 0 #ffffff0b,inset 0 -1px 0 #00000008,var(--glass-depth);color:var(--text)}
.button,.icon-button,.select-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;vertical-align:middle;line-height:1.25;min-height:44px;border-radius:13px;flex-shrink:0}
.button{padding:12px 18px}.icon-button{width:44px;height:44px;padding:11px}.ui-icon{flex:none}.button>.ui-icon,.icon-button>.ui-icon{width:20px;height:20px;margin:0}
:is(.button.soft,.icon-button,.glass-button,.select-trigger,.chip,.filter-chip,.account-option),.header .nav-link.active,.list-nav.active{background:linear-gradient(135deg,var(--glass-sheen),transparent 60%),var(--glass-fill);backdrop-filter:blur(5px) saturate(135%);-webkit-backdrop-filter:blur(5px) saturate(135%);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 #00000010,0 3px 12px #18122509;color:var(--text)}
.button.primary{background:linear-gradient(145deg,#ffffff24,transparent 65%),#7353c8;color:#fff;box-shadow:inset 0 1px 0 #ffffff70,0 5px 16px #7151c623;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}body.dark .button.primary{background:linear-gradient(140deg,#ffffff35,transparent 65%),#baa2f2;color:#251d36}
.text-button{display:inline-flex;gap:7px;align-items:center;min-height:36px;color:var(--purple)}
.select-trigger{justify-content:space-between;min-width:90px;padding:10px 13px!important;gap:12px}.select-trigger>svg{width:16px;height:16px;flex:none}
.site-select-menu{background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text)}
.header{background:var(--glass);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.header-tools{align-items:center}.header-tools .search{width:210px;height:42px;background:var(--glass-fill);box-shadow:inset 0 1px 0 var(--glass-edge);border:1px solid color-mix(in srgb,var(--field-border) 45%,transparent)}.header-tools .search input{background:transparent!important;line-height:1.3}.header-tools .search:focus-within{width:240px}.header-tools .icon-button,.header-tools .select-trigger,.header-tools .login-button{min-height:40px;height:40px}.header-tools .select-trigger{min-width:74px}.header-tools .icon-button{width:40px}
.header .avatar{width:40px;height:40px;min-width:40px;aspect-ratio:1;flex:0 0 40px;overflow:hidden;border-radius:50%;padding:0;display:grid;place-items:center}.header .avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* A promotional frame with identical art dimensions, not a stretching image box. */
body:has(.home-container) .header{background:#17151e55;box-shadow:0 1px 0 #ffffff10;color:#fff}
body:has(.home-container) .header :is(.icon-button,.select-trigger,.nav-link.active){background:linear-gradient(135deg,#ffffff22,#ffffff07),#15131d50;color:#fff;box-shadow:inset 0 1px 0 #ffffff2b}
body:has(.home-container) .header.scrolled :is(.icon-button,.select-trigger,.nav-link.active){background:var(--glass-fill);color:var(--text)}





.home-container .section{margin-top:26px}.home-container .anime-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.recommendations .section-head{align-items:center}.recommendations .text-button{font-size:12px}
/* Catalogue filters stay together and never appear in the home feed. */
.discovery-panel{padding:28px 30px;margin-bottom:24px}.discovery-grid{margin-top:20px}.discovery-tile{min-height:78px;padding:16px;align-items:center}.catalog-section .section-head{gap:20px;align-items:center}.catalog-options{padding:12px 0;gap:12px}.catalog-options>label{display:flex;align-items:center;gap:8px;font-size:12px}.genre-filter{display:inline-flex;align-items:center;gap:12px;font-size:12px;margin:0 0 14px}.genre-filter .select-trigger{min-width:180px}.catalog-search input{height:48px}.sort-label{display:flex;gap:10px;align-items:center;font-size:12px}.filters{flex-wrap:wrap}.library-sidebar{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* A fixed upper third of monochrome artwork, with a transparent tail. */
.details-dialog{isolation:isolate;background:var(--panel)}
.details-copy{color:var(--text);text-shadow:none!important}.details-copy h2{color:var(--text)}.details-description{color:var(--text)}.details-toolbar .icon-button{background:color-mix(in srgb,var(--panel) 86%,transparent)}
/* The banner continues behind the first row; all lower columns have a purpose. */

.profile-grid{grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:24px;margin-top:-225px}.profile-card{grid-column:1;grid-row:1;padding:0 20px 12px;align-self:end}.profile-fields{grid-column:2;grid-row:1;margin:90px 0 0;padding:26px;background:linear-gradient(135deg,var(--glass-sheen),transparent 65%),color-mix(in srgb,var(--panel) 78%,transparent)}
.profile-preferences{grid-column:1;grid-row:2;padding:24px;margin:0;min-width:0}.profile-history{grid-column:2;grid-row:2;margin:0;padding:26px;border-radius:20px;min-width:0}.profile-history h3{margin:0 0 18px}.profile-preferences h2{line-height:1.4}.profile-history .history-item{width:100%;display:flex;align-items:center;gap:14px;padding:12px 0;border:0;background:transparent;min-width:0;text-align:left;color:var(--text)}.history-item>span{flex:1;min-width:0}.history-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.history-item small{display:block;color:var(--muted);margin-top:5px}.profile-history .history-item img{flex:none;width:46px;height:69px;object-fit:cover}.profile-history .history-item>.ui-icon{width:18px;height:18px}
.profile-card .text-button,.profile-account-actions .text-button{padding:9px 13px;border-radius:11px;background:var(--glass-fill);box-shadow:inset 0 1px 0 var(--glass-edge);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);font-size:12px}.profile-stats{margin-top:18px}.profile-card h2{margin-top:12px}.profile-card .bio-preview{overflow-wrap:anywhere}.profile-preferences .toggle-row{gap:10px;font-size:12px}.profile-preferences .toggle-row>span:first-child{flex:1}
/* Video controls always use their own dark contrast, including in the light theme. */
.video-controls{background:linear-gradient(130deg,#ffffff0e,transparent),#17151edb;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#f4f0ff}
.video-controls :is(.icon-button,.select-trigger){background:linear-gradient(135deg,#ffffff15,#ffffff05);color:#f4f0ff;box-shadow:inset 0 1px 0 #ffffff26;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.video-controls .select-trigger{min-width:72px}.video-controls .site-select-menu{background:#24212bf2;color:#fff}.video-controls .select-option{color:#fff}
@media(max-width:1100px){.home-container .anime-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.header-tools .search{width:155px}.header-tools .search:focus-within{width:180px}}
@media(max-width:800px){

 .home-container .anime-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.profile-grid{grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);gap:18px}.profile-fields,.profile-preferences,.profile-history{padding:20px}.profile-history .history-item{gap:10px}
 .header-tools .search{display:none}.header .nav-link{min-height:36px}
}
@media(max-width:700px){.profile-grid{grid-template-columns:1fr;margin-top:-165px;gap:18px}.profile-card,.profile-fields,.profile-preferences,.profile-history{grid-column:1;grid-row:auto}.profile-card{padding-bottom:4px}.profile-fields{margin-top:0}.profile-stats{max-width:500px;grid-template-columns:repeat(4,minmax(0,1fr))}.profile-preferences .toggle-row{font-size:13px}.profile-account-actions .button{min-height:40px}.discovery-panel{padding:22px}.discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){


 .home-container .anime-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}.recommendations .section-head{align-items:flex-start}.recommendations h2{font-size:21px}.recommendations .text-button{font-size:11px;min-height:28px;text-align:right}
 .details-dialog .details-copy h2{font-size:25px}.details-layout .details-poster{width:100%;max-width:130px;height:auto;aspect-ratio:2/3}.details-visual{grid-template-columns:115px minmax(0,1fr)}
 .catalog-section .section-head{align-items:flex-start;gap:10px}.sort-label{font-size:0;gap:0}.sort-label .select-trigger{font-size:12px;min-width:120px}.catalog-options{gap:10px}.catalog-options .select-trigger{min-width:135px}.catalog-options>label{font-size:11px;min-height:36px}.genre-filter{width:100%;justify-content:space-between}.genre-filter .site-select{flex:1;max-width:240px}.genre-filter .select-trigger{width:100%;min-width:0}
 .header>.brand{font-size:20px}.header .brand-mark{width:31px;height:31px}.header-tools{gap:5px}.header-tools .select-trigger{min-width:62px;height:36px;min-height:36px;padding:8px!important;font-size:11px;gap:6px}.header-tools .icon-button{width:36px;height:36px;min-height:36px;padding:8px}.header-tools .login-button{min-height:36px;height:36px;padding:8px 11px;font-size:11px}.header .avatar{width:36px;height:36px;min-width:36px;flex-basis:36px}
 .video-controls .icon-button{width:34px;height:34px;min-height:34px;padding:8px}.video-controls .select-trigger{min-height:34px;min-width:60px;padding:7px 8px!important;font-size:11px;gap:6px}
}
@media(max-width:380px){.home-container .anime-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header{padding-left:10px;padding-right:10px}.header>.brand{font-size:18px;gap:5px}.header-tools{gap:3px}.profile-fields,.profile-preferences,.profile-history{padding:18px}.profile-stats strong{font-size:20px}}

.header-tools .search input:focus-visible{outline:0}.header-tools .search:focus-within{box-shadow:0 0 0 2px var(--purple);border-color:transparent}
@media(max-width:600px){.header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.header nav{grid-column:1/-1;order:initial}.header .brand img{width:31px;height:31px}.header>.brand{justify-content:flex-start;margin:0;min-width:0}.header-tools{margin:0;justify-self:end}}
@media(max-width:380px){.header>.brand{font-size:16px;gap:5px}.header .brand img{width:25px;height:25px}.header-tools .select-trigger{min-width:52px;padding:7px!important;gap:4px}.header-tools .icon-button{width:32px;height:34px;min-height:34px}.header-tools .login-button{padding:8px;font-size:10px;height:34px;min-height:34px}}

@media(max-width:600px){}
@media(max-width:380px){}

/* Clear glass surfaces: reflected light, subtle depth, no decorative outlines. */
:root{--liquid-fill:#ffffff52;--liquid-light:#ffffff9c;--liquid-shadow:0 14px 40px #3430420b;--liquid-hover:#ffffff90}
body.dark{--liquid-fill:#29262f66;--liquid-light:#ffffff13;--liquid-shadow:0 14px 40px #00000024;--liquid-hover:#ffffff10}
:is(.discovery-panel,.discovery-tile,.library-sidebar,.profile-fields,.profile-preferences,.profile-history,.profile-stats>span,.continue-card,.welcome-card,.empty-state,.player-settings){border:0;outline:0;background:linear-gradient(125deg,var(--liquid-light),transparent 45%,#bba5f508 100%),var(--liquid-fill);box-shadow:var(--liquid-shadow);backdrop-filter:blur(5px) saturate(145%);-webkit-backdrop-filter:blur(5px) saturate(145%)}
:is(.button.soft,.icon-button,.glass-button,.select-trigger,.chip,.filter-chip,.account-option,.profile-card .text-button,.profile-account-actions .text-button),.header .nav-link.active,.list-nav.active{border:0;box-shadow:0 4px 16px #1812250b;background:linear-gradient(135deg,var(--liquid-light),transparent 53%),var(--liquid-fill);backdrop-filter:blur(4px) saturate(150%);-webkit-backdrop-filter:blur(4px) saturate(150%)}
:is(.button.soft,.icon-button,.select-trigger,.chip,.filter-chip,.account-option):hover{background-color:var(--liquid-hover)}
.header-tools .select-trigger,.header-tools [data-action="theme"]{background:linear-gradient(140deg,var(--liquid-light),transparent 50%),var(--liquid-fill);box-shadow:0 4px 16px #1812250b}
body:has(.home-container) .header:not(.scrolled) :is(.select-trigger,.icon-button){background:linear-gradient(135deg,#ffffff35,#ffffff06 60%),#17141f40;box-shadow:0 4px 18px #00000012;color:#fff}
.profile-sidebar,.profile-main{display:flex;flex-direction:column;gap:24px;min-width:0}.profile-main{padding-top:90px}.profile-main .profile-fields{margin:0}.profile-sidebar .profile-card{align-self:stretch}.profile-preferences .toggle-row{border:0}.profile-history{overflow:visible}
.profile-history .history-item{display:grid;grid-template-columns:46px minmax(0,1fr) 32px;width:100%;box-sizing:border-box;gap:12px;padding:10px;border-radius:14px;overflow:hidden;isolation:isolate;transform:none;background:transparent;transition:background .2s,box-shadow .2s}
.profile-history .history-item:is(:hover,:focus-visible){background:linear-gradient(110deg,var(--liquid-light),transparent 85%),var(--liquid-hover);filter:none;box-shadow:0 4px 18px #18122508}
.profile-history .history-item>.ui-icon{justify-self:center;width:18px;height:18px;margin:0;transform:none}.profile-history .history-item>span{display:block;min-width:0}.profile-history .history-item img{display:block}
/* Full poster proportions preserve the artwork across the upper two thirds. */


.video-controls :is(.icon-button,.select-trigger){background:linear-gradient(135deg,#ffffff23,#ffffff05);color:#f4f0ff;box-shadow:0 4px 16px #0000000b}
@media(max-width:800px){.profile-sidebar,.profile-main{gap:18px}}
@media(max-width:700px){.profile-sidebar,.profile-main{display:contents}.profile-card{order:0}.profile-fields{order:1}.profile-history{order:2}.profile-preferences{order:3}.profile-grid{display:flex;flex-direction:column}.profile-grid>*{width:100%}.profile-grid .profile-card,.profile-grid .profile-fields,.profile-grid .profile-history,.profile-grid .profile-preferences{width:100%}}
@media(prefers-reduced-transparency:reduce){:is(.profile-fields,.profile-preferences,.profile-history,.discovery-panel,.library-sidebar){background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Larger promotional canvas with a long, transparent fade into the feed. */



@media(min-width:601px) and (max-width:800px){}
@media(max-width:600px){}
/* Five dark atmospheres. Shared tokens keep glass and text in the same palette. */
[data-style="graphite"]{--scene-base:#121216;--surface-rgb:30,28,37;--accent-rgb:185,166,237;--accent:#b9a6ed;--accent-ink:#211a34;--scene:radial-gradient(ellipse at 8% 12%,#74648a36,transparent 50%),radial-gradient(ellipse at 96% 55%,#7a738d28,transparent 48%),linear-gradient(148deg,#17161d 0%,#101013 55%,#201c26 100%)}
[data-style="iris"]{--scene-base:#19131e;--surface-rgb:42,28,48;--accent-rgb:220,166,211;--accent:#dca6d3;--accent-ink:#321b30;--scene:radial-gradient(ellipse at 82% 0%,#a1648b3d,transparent 52%),radial-gradient(ellipse at 10% 90%,#694e8b45,transparent 55%),linear-gradient(120deg,#19131e 24%,#302034 62%,#17131d 100%)}
[data-style="lagoon"]{--scene-base:#0d1919;--surface-rgb:20,42,41;--accent-rgb:139,207,190;--accent:#8bcfbe;--accent-ink:#102c27;--scene:radial-gradient(ellipse at 7% 35%,#437b723d,transparent 47%),radial-gradient(ellipse at 100% 80%,#2b535c45,transparent 58%),linear-gradient(155deg,#0b1718,#172e2c 48%,#0d181b)}
[data-style="ember"]{--scene-base:#1b1512;--surface-rgb:47,34,28;--accent-rgb:226,178,142;--accent:#e2b28e;--accent-ink:#38261c;--scene:radial-gradient(ellipse at 88% 10%,#a0644140,transparent 52%),radial-gradient(ellipse at 4% 80%,#7d4d4935,transparent 50%),linear-gradient(145deg,#181412,#302219 46%,#191317)}
[data-style="midnight"]{--scene-base:#111724;--surface-rgb:26,36,54;--accent-rgb:157,188,225;--accent:#9dbce1;--accent-ink:#182940;--scene:radial-gradient(ellipse at 72% 4%,#5b79a13b,transparent 48%),radial-gradient(ellipse at 4% 90%,#505b833a,transparent 57%),linear-gradient(165deg,#101823,#1c2a3e 48%,#10151e)}
body.dark[data-style]{--bg:var(--scene-base);--panel:rgb(var(--surface-rgb));--purple:var(--accent);--purple-dark:var(--accent);--text:#f2eff6;--muted:#b9b5c3;--soft:rgba(var(--accent-rgb),.12);--field-bg:rgba(var(--surface-rgb),.65);--field-border:rgba(var(--accent-rgb),.3);--field-focus:var(--accent);--glass-fill:rgba(var(--surface-rgb),.3);--glass-sheen:#ffffff0b;--liquid-fill:rgba(var(--surface-rgb),.35);--liquid-light:#ffffff14;--liquid-hover:rgba(var(--accent-rgb),.09);--glass:rgba(var(--surface-rgb),.58);background:var(--scene);background-attachment:fixed;color:var(--text)}
body.dark[data-style] :is(.glass-panel,.profile-fields,.profile-preferences,.profile-history,.profile-stats>span,.discovery-panel,.discovery-tile,.library-sidebar,.continue-card,.welcome-card,.empty-state,.player-settings){background:radial-gradient(ellipse at 0% 0%,#ffffff0e,transparent 65%),linear-gradient(135deg,#ffffff08,transparent 48%,rgba(var(--accent-rgb),.025)),rgba(var(--surface-rgb),.32);border:0;box-shadow:0 14px 38px #00000018;backdrop-filter:blur(5px) saturate(135%);-webkit-backdrop-filter:blur(5px) saturate(135%);color:var(--text)}
body.dark[data-style] :is(.button.soft,.icon-button,.select-trigger,.glass-button,.chip,.filter-chip,.account-option,.list-nav.active){background:linear-gradient(135deg,#ffffff19,transparent 52%,rgba(var(--accent-rgb),.06)),rgba(var(--surface-rgb),.32);color:var(--text);border:0;box-shadow:0 4px 18px #00000016;backdrop-filter:blur(4px) saturate(150%);-webkit-backdrop-filter:blur(4px) saturate(150%)}
body.dark[data-style] .button.primary{background:linear-gradient(135deg,#ffffff1f,transparent 75%),var(--accent);color:var(--accent-ink);box-shadow:0 6px 24px rgba(var(--accent-rgb),.14)}
body.dark[data-style] :is(.chip,.filter-chip)[aria-pressed="true"],body.dark[data-style] .discovery-tile.selected{background:rgba(var(--accent-rgb),.18);color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
body.dark[data-style] .site-select-menu{background:linear-gradient(140deg,#ffffff0a,transparent 60%),rgba(var(--surface-rgb),.94);box-shadow:0 16px 48px #0006;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body.dark[data-style] .header{background:rgba(var(--surface-rgb),.48);border:0;box-shadow:none}body.dark[data-style]:has(.home-container) .header:not(.scrolled){background:rgba(var(--surface-rgb),.24)}
body.dark[data-style] .header .nav-link.active{color:var(--accent);background:rgba(var(--accent-rgb),.1)}
body.dark[data-style] .header-tools .select-trigger{background:linear-gradient(140deg,#ffffff25,transparent 65%),rgba(var(--surface-rgb),.25)}
body.dark[data-style] .header.scrolled{background:rgba(var(--surface-rgb),.72)!important}
body.dark[data-style] .profile-card{background:transparent}.profile-appearance,.profile-evening{padding:24px;border-radius:22px;min-width:0}.panel-heading{margin-bottom:18px}.panel-heading .overline{color:var(--accent);font-size:10px;letter-spacing:.13em}.panel-heading h2{font-size:20px;line-height:1.3;margin:8px 0 0}.panel-description{color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:18px}
.style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.style-option{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:0 0 10px;color:var(--muted);background:transparent;border:0;text-align:left;border-radius:12px;font-size:12px;line-height:1.4;overflow:visible}.style-option>span:not(.style-swatch):not(.style-selected){padding:0 4px}.style-swatch{position:relative;width:100%;height:68px;display:flex;align-items:flex-end;gap:5px;padding:12px;background:var(--scene);border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0002}.style-swatch i{display:block;width:18%;height:24px;background:linear-gradient(135deg,#ffffff38,#ffffff08);border-radius:5px}.style-swatch i:first-child{width:48%;height:36px}.style-swatch i:last-child{background:var(--accent);height:14px}.style-selected{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;color:var(--accent-ink);background:var(--accent);opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s}.style-selected .ui-icon{width:14px;height:14px}.style-option[aria-pressed="true"]{color:var(--text)}.style-option[aria-pressed="true"] .style-selected{opacity:1;transform:scale(1)}.style-option[aria-pressed="true"] .style-swatch{box-shadow:0 0 0 2px var(--accent),0 5px 20px #0002}.style-option:hover .style-swatch{filter:brightness(1.15)}
.time-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.time-options .chip{min-height:38px;padding:9px 13px;font-size:12px}.evening-option{display:grid;grid-template-columns:46px minmax(0,1fr) 28px;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:14px;background:transparent;color:var(--text);text-align:left}.evening-option:hover{background:rgba(var(--accent-rgb),.07)}.evening-option img{width:46px;height:69px;object-fit:cover;border-radius:8px}.evening-option strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.evening-option span{min-width:0}.evening-option small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.evening-option>.ui-icon{width:18px;justify-self:center;color:var(--accent)}.plan-estimate{color:var(--muted);font-size:11px;line-height:1.7;margin-top:14px}
/* A wide, uncropped artwork stage replaces the small upper-right portrait. */
body.dark[data-style] .details-dialog{background:var(--scene);padding-top:0}



.details-dialog .details-layout{margin-top:clamp(160px,24dvh,240px)}
body.dark[data-style] .details-copy{background:linear-gradient(135deg,rgba(var(--surface-rgb),.45),rgba(var(--surface-rgb),.18))!important;padding:22px!important;border-radius:18px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.details-dialog .details-toolbar{padding:14px 0;top:0}.details-dialog .details-toolbar .icon-button{background:rgba(var(--surface-rgb),.72);color:var(--text)}
@media(max-width:700px){.profile-appearance{order:3;width:100%}.profile-preferences{order:4}.profile-evening{order:5;width:100%}.profile-appearance,.profile-evening{padding:20px}.style-options{grid-template-columns:repeat(3,minmax(0,1fr))}.details-dialog .details-layout{margin-top:clamp(105px,20dvh,180px)}body.dark[data-style] .details-copy{padding:18px!important}.profile-main,.profile-sidebar{padding-top:0}}
@media(max-width:380px){.style-options{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-appearance,.profile-evening{padding:18px}}
@media(prefers-reduced-transparency:reduce){body.dark[data-style] :is(.glass-panel,.profile-fields,.profile-preferences,.profile-history,.discovery-panel,.library-sidebar,.details-copy){background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.style-selected{transition:none}}

body.dark[data-style] dialog:not(.details-dialog){background:linear-gradient(135deg,#ffffff0a,transparent 65%),rgba(var(--surface-rgb),.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

body.dark[data-style] :is(.button.soft,.icon-button,.select-trigger,.glass-button,.chip):hover{background-color:rgba(var(--accent-rgb),.13)}
@media(max-width:700px){body.dark[data-style]{background-attachment:scroll}}
/* Extra quiet atmospheres use the same shared glass tokens. */
[data-style="forest"]{--scene-base:#141c16;--surface-rgb:30,42,32;--accent-rgb:176,199,150;--accent:#b0c796;--accent-ink:#222e1b;--scene:radial-gradient(ellipse at 4% 8%,#62774c40,transparent 56%),radial-gradient(ellipse at 90% 80%,#5770672e,transparent 50%),linear-gradient(150deg,#141c16,#253124 58%,#131c19)}
[data-style="wine"]{--scene-base:#211319;--surface-rgb:49,29,38;--accent-rgb:215,159,175;--accent:#d79faf;--accent-ink:#351d27;--scene:radial-gradient(ellipse at 90% 12%,#9a526f40,transparent 55%),radial-gradient(ellipse at 4% 85%,#815e7030,transparent 50%),linear-gradient(135deg,#201318,#35212b 52%,#1b141d)}
[data-style="slate"]{--scene-base:#181d22;--surface-rgb:35,43,49;--accent-rgb:183,202,211;--accent:#b7cad3;--accent-ink:#242f36;--scene:radial-gradient(ellipse at 30% 5%,#8c9da230,transparent 58%),radial-gradient(ellipse at 90% 85%,#71829825,transparent 50%),linear-gradient(165deg,#181d22,#303a40 56%,#171c23)}



.plan-modes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.plan-modes .chip{font-size:11px;min-height:36px;padding:9px 12px}.plan-spare{color:var(--accent)!important}.evening-option img{align-self:start}.evening-option{padding:12px 10px}.evening-option strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.style-options{gap:14px 12px}

/* Fade to the actual page scene, not a differently coloured opaque rectangle. */





@media(max-width:600px){}
/* Motion follows interaction: arrivals, glass highlights, tactile controls and menus. */
@keyframes surface-reveal{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes dialog-reveal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hero-copy-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 .anime-card{animation:none}.motion-enter{animation:surface-reveal .65s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both!important}
 dialog[open]{animation:dialog-reveal .38s cubic-bezier(.16,1,.3,1)}dialog[open]::backdrop{animation:hero-copy-reveal .28s ease-out}

 :is(.button,.icon-button,.chip,.filter-chip,.select-trigger,.style-option,.history-item,.evening-option,.list-nav){transition:transform .28s cubic-bezier(.16,1,.3,1),background-color .28s ease,box-shadow .28s ease,color .25s ease,opacity .25s ease}
 :is(.button,.icon-button,.chip,.filter-chip,.style-option):active:not(:disabled){transform:scale(.96)}
 .toggle-track,.toggle-track::after{transition:transform .32s cubic-bezier(.16,1,.3,1),background-color .25s ease}
 .poster-button img{transition:transform .65s cubic-bezier(.16,1,.3,1),filter .4s ease}.poster-play{transition:opacity .35s ease,transform .4s cubic-bezier(.16,1,.3,1)}
 .site-select-menu{animation:dialog-reveal .25s cubic-bezier(.16,1,.3,1);transform-origin:top center}
 @media(hover:hover) and (pointer:fine){.button:hover:not(:disabled),.style-option:hover{transform:translateY(-2px)}.history-item:hover,.evening-option:hover{transform:translateX(3px)}.poster-button:hover img{transform:scale(1.025)}.button.primary:hover{box-shadow:0 8px 28px rgba(var(--accent-rgb),.28)}.glass-button:hover,.icon-button:hover{box-shadow:inset 0 1px 0 #ffffff24,0 6px 22px #0002}}
}