@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#f7f4f5;background:#101015;font-size:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse 70% 350px at 50% -140px,#4a2131 0%,transparent 100%),#101015}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{max-width:1400px;margin:auto;padding:25px 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff20}.brand{font-family:Outfit,Arial,sans-serif;font-weight:800;letter-spacing:.035em;font-size:clamp(1.05rem,4vw,1.5rem)}.brand-title{display:block;white-space:nowrap}.brand-title span{color:#ff496c}.brand small{display:block;font:500 .8rem 'DM Sans',sans-serif;letter-spacing:.04em;color:#b5aeb4;margin-top:4px}.header-note{color:#aaa2a8;font-size:.86rem}main{max-width:1400px;padding:38px 42px 90px;margin:auto}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Outfit,Arial,sans-serif}h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.05;margin-bottom:10px;letter-spacing:-.035em}.intro{color:#b9b2ba;margin-bottom:30px}.eyebrow{color:#ff8096;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}.card{min-width:0}.poster-link{display:block;position:relative;overflow:hidden;border-radius:13px;background:#24212a;aspect-ratio:9/13.5;border:1px solid #ffffff14;transition:transform .2s,border-color .2s,box-shadow .2s}.poster-link:hover,.poster-link:focus-visible{transform:translateY(-5px);border-color:#ff718b;box-shadow:0 18px 35px #0009;outline:none}.poster-link img{width:100%;height:100%;object-fit:cover;display:block}.card h2{font-size:1.18rem;margin:12px 0 4px;line-height:1.25}.card p{font-size:.88rem;color:#a7a0a9;margin:0}.card h2 a:hover{text-decoration:underline}.coming{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#25232c,#18171e);color:#bbb4bc;gap:15px}.coming .monogram{font:800 clamp(3rem,8vw,6rem) Outfit,sans-serif;color:#ffffff0f}.coming strong{letter-spacing:.15em;text-transform:uppercase;font-size:.9rem;color:#f0cad2}.back{display:inline-flex;color:#ffa3b5;font-weight:700;margin-bottom:28px;align-items:center;gap:8px}.back:hover{text-decoration:underline}.series-head{display:grid;grid-template-columns:minmax(150px,250px) 1fr;gap:35px;align-items:center;margin-bottom:35px}.series-head img{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:12px;box-shadow:0 20px 45px #000a}.series-head h1{margin-bottom:18px}.series-head p{max-width:650px;color:#c1bac1;line-height:1.6}.count{color:#ff9aac!important;font-weight:700}.episode-layout{display:grid;grid-template-columns:minmax(270px,1fr) minmax(300px,1.1fr);gap:30px;align-items:start}.episode-list h2{font-size:1.5rem;margin:0 0 17px}.episodes{display:flex;flex-direction:column;gap:9px}.episode{width:100%;border:1px solid #ffffff1c;background:#1b1b22;color:#f7f4f5;text-align:left;border-radius:10px;padding:16px 18px;cursor:pointer;display:grid;grid-template-columns:50px 1fr;gap:14px;transition:background .2s,border-color .2s}.episode:hover,.episode:focus-visible{background:#29242d;border-color:#ff718b;outline:none}.episode[aria-current="true"]{border-color:#ff496c;background:#30202a}.ep-no{color:#ff8299;font:700 1.1rem Outfit,sans-serif}.episode strong{display:block;font-size:1rem}.episode span.description{display:block;color:#aaa3ac;font-size:.88rem;line-height:1.45;margin-top:5px}.viewer{position:sticky;top:22px;border:1px solid #ffffff1c;background:#1b1b22;border-radius:13px;overflow:hidden}.screen{background:linear-gradient(155deg,#25212d,#101015);min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;aspect-ratio:16/11}.screen-inner{max-width:330px}.screen-mark{color:#ff5677;font-size:2.2rem;line-height:1;margin-bottom:17px}.screen h3{font-size:1.4rem;margin-bottom:9px}.screen p{color:#b3abb5;line-height:1.5}.viewer video{display:block;width:100%;max-height:75vh;aspect-ratio:9/16;background:#000;margin:auto}.viewer-info{padding:20px}.viewer-info h3{font-size:1.3rem;margin-bottom:8px}.viewer-info p{color:#b5aeb6;line-height:1.5;margin-bottom:0}footer{border-top:1px solid #ffffff1c;color:#807a83;padding:22px 42px;text-align:center;font-size:.8rem}@media(max-width:950px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.episode-layout{grid-template-columns:1fr}.viewer{position:static;grid-row:1}.screen{min-height:270px}}@media(max-width:650px){.site-header{padding:19px 20px}.header-note{display:none}main{padding:27px 20px 65px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.card h2{font-size:1rem}.series-head{grid-template-columns:90px 1fr;gap:18px;align-items:start}.series-head h1{font-size:1.8rem}.series-head p{font-size:.9rem}.series-head img{border-radius:7px}.episode{padding:14px;gap:8px;grid-template-columns:36px 1fr}.screen{min-height:250px}footer{padding:22px}}

.youtube-frame{width:min(100%,420px);aspect-ratio:9/16;margin:auto;background:#000}.youtube-frame #yt-player,.youtube-frame iframe{width:100%;height:100%;display:block}.playlist-link{display:inline-block;color:#ffa3b5;margin-top:16px;font-weight:700}.playlist-link:hover{text-decoration:underline}
.episode.has-thumb{grid-template-columns:50px 100px minmax(0,1fr);align-items:start}.episode-thumb{display:block;width:100px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#14141a}.episode.has-thumb>span:last-child{min-width:0}@media(max-width:650px){.episode.has-thumb{grid-template-columns:36px 76px minmax(0,1fr)}.episode-thumb{width:76px}}

.episode{grid-template-columns:minmax(0,1fr)}.episode.has-thumb{grid-template-columns:72px minmax(0,1fr);align-items:start}.episode-thumb{width:72px;aspect-ratio:9/16;object-fit:cover}@media(max-width:650px){.episode{grid-template-columns:minmax(0,1fr)}.episode.has-thumb{grid-template-columns:64px minmax(0,1fr)}.episode-thumb{width:64px}}

.player-error{color:#ff9aac!important;margin-top:12px!important}.player-error[hidden]{display:none}

.release-schedule{color:#ffa3b5!important;font-weight:700}.episode.upcoming{cursor:default;opacity:.66}.episode.upcoming:hover{background:#1b1b22;border-color:#ffffff1c}

.next-video{display:block;width:100%;margin-top:20px;padding:16px 18px;border:2px solid #ff91a5;border-radius:12px;background:#ff496c;color:#fff;font:800 1.06rem/1.35 Outfit,Arial,sans-serif;cursor:pointer;text-align:left;box-shadow:0 8px 26px #ff496c55;transition:background .2s,transform .2s,box-shadow .2s}.next-video:hover,.next-video:focus-visible{background:#ff6381;transform:translateY(-2px);box-shadow:0 12px 30px #ff496c77;outline:2px solid #fff;outline-offset:2px}.next-video:disabled{border-color:#ffffff30;background:#343039;color:#aaa3ac;box-shadow:none;cursor:default;transform:none;outline:none}

/* The expanded player uses the entire viewport for a portrait video. */
.expand-player{display:block;padding:9px 14px;border:1px solid #ff9aac;border-radius:10px;background:#332630;color:#fff;font:700 1rem Outfit,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.expand-player:hover,.expand-player:focus-visible{background:#3a2a39;outline:2px solid #ff9aac;outline-offset:2px}
.player-toolbar{display:flex;justify-content:flex-end;padding:10px 14px;background:#222029;border-bottom:1px solid #ffffff20}
.player-expanded{overflow:hidden}
.viewer.is-fullscreen,.viewer:fullscreen{position:fixed;inset:0;width:100%;height:100%;height:100dvh;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;border:0;border-radius:0;padding:0}
.viewer.is-fullscreen .youtube-frame,.viewer:fullscreen .youtube-frame{flex:none;width:min(100vw,56.25dvh);height:min(100dvh,177.7778vw);max-width:none;aspect-ratio:9/16;margin:0;background:#000}
.viewer.is-fullscreen .player-toolbar,.viewer:fullscreen .player-toolbar{position:absolute;z-index:2;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:auto;padding:0;background:transparent;border:0}
.viewer.is-fullscreen .player-toolbar .expand-player,.viewer:fullscreen .player-toolbar .expand-player{background:#19191dcc;box-shadow:0 2px 12px #000a}
.viewer.is-fullscreen .viewer-info,.viewer:fullscreen .viewer-info{display:none}
@supports not (height:100dvh){.viewer.is-fullscreen,.viewer:fullscreen{height:100vh}.viewer.is-fullscreen .youtube-frame,.viewer:fullscreen .youtube-frame{width:min(100vw,56.25vh);height:min(100vh,177.7778vw)}}

/* Landing page */
main:has(.hero){max-width:none;padding:0 0 90px}
.hero{position:relative;height:clamp(540px,76svh,850px);overflow:hidden;background:#17121b}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease;overflow:hidden}
.hero-slide.active{opacity:1;visibility:visible}
.hero-slide::before{content:"";position:absolute;inset:-40px;background-image:var(--poster);background-position:center;background-size:cover;filter:blur(32px) brightness(.38)}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101015d9 0%,#10101545 55%,#1010159c 100%),linear-gradient(0deg,#101015 0%,transparent 58%)}
.hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center}
.hero-copy{position:absolute;z-index:1;bottom:13%;left:max(5vw,24px);width:min(510px,43vw);color:#fff;text-shadow:0 2px 16px #0008}
.hero-copy h1{font-size:clamp(2.3rem,5vw,5.4rem);line-height:.98;margin:0 0 18px}
.hero-copy p:not(.eyebrow){font-size:1.06rem;line-height:1.5;max-width:460px;margin-bottom:24px}
.hero-link{display:inline-flex;gap:14px;align-items:center;padding:13px 19px;background:#ff496c;border-radius:8px;font-weight:700;text-shadow:none}
.hero-link:hover,.hero-link:focus-visible{background:#ff718b;outline:2px solid #fff;outline-offset:3px}
.slide-controls{position:absolute;z-index:3;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px}
.slide-dot{width:33px;height:7px;border:0;border-radius:10px;background:#ffffff70;cursor:pointer;padding:0}
.slide-dot.active{background:#ff496c}
.slide-dot:focus-visible{outline:2px solid white;outline-offset:4px}
.welcome{max-width:950px;margin:0 auto;padding:48px 24px 42px;text-align:center}
.welcome-copy h2{font-size:clamp(2rem,4vw,3.3rem);margin-bottom:8px}
.welcome-copy>p:last-child{color:#b9b2ba;font-size:1.06rem;margin-bottom:30px}
.signup-form{max-width:620px;margin:auto;text-align:left;background:#201d25;border:1px solid #ffffff28;border-radius:16px;padding:22px}
.signup-form label{display:block;font-weight:700;font-size:1.05rem;margin-bottom:12px}
.signup-row{display:flex;gap:8px}
.signup-row input{min-width:0;flex:1;padding:14px 15px;background:#121117;border:1px solid #ffffff65;border-radius:8px;color:#fff;font:inherit}
.signup-row input:focus-visible{outline:2px solid #ff91a5;outline-offset:2px}
.signup-row button{border:0;border-radius:8px;padding:12px 18px;background:#ff496c;color:white;font:700 1rem Outfit,Arial,sans-serif;cursor:pointer}
.signup-row button:hover,.signup-row button:focus-visible{background:#ff718b}
.signup-row button:disabled{opacity:.65;cursor:wait}
.signup-help{color:#b9b2ba;font-size:.88rem;margin:10px 0 0}
.signup-message{min-height:1.2em;color:#ffb6c4;font-size:.92rem;margin:8px 0 0}
.view-free{display:block;margin:27px auto 0;border:0;border-radius:12px;padding:18px 25px;background:#ff496c;color:white;font:800 clamp(1.12rem,2vw,1.45rem) Outfit,Arial,sans-serif;box-shadow:0 12px 30px #ff496c55;cursor:pointer}
.view-free:hover,.view-free:focus-visible{background:#ff718b;outline:2px solid #fff;outline-offset:3px}
.free-note{color:#cfc8d0;margin:9px 0 0;font-size:.91rem}
.browse{max-width:1400px;margin:auto;padding:35px 42px;scroll-margin-top:20px}
.browse h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:26px}
.card h3{font-family:Outfit,Arial,sans-serif;font-size:1.18rem;line-height:1.25;margin:12px 0 4px}
.card h3 a:hover{text-decoration:underline}
@media(max-width:650px){.hero{height:min(77svh,720px);min-height:520px}.hero-slide::after{background:linear-gradient(0deg,#101015 0%,#101015c9 16%,transparent 65%)}.hero-slide>img{object-fit:cover;object-position:center 25%}.hero-copy{left:22px;bottom:10%;width:calc(100% - 44px)}.hero-copy h1{font-size:clamp(2.25rem,10vw,3.4rem)}.hero-copy p:not(.eyebrow){display:none}.slide-controls{bottom:16px}.welcome{padding:36px 20px}.signup-form{padding:18px}.signup-row{flex-direction:column}.signup-row button{min-height:48px}.browse{padding:25px 20px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

.slide-arrow{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#17121be6;color:#fff;font-size:1.5rem;cursor:pointer}
.slide-arrow:hover{background:#ff496c}
.slide-arrow:focus-visible{outline:3px solid #ff8ca2;outline-offset:3px}
@media(max-width:650px){.slide-controls{gap:8px}.slide-dot{width:24px}}

/* Nara K-Fliz masthead */
.site-header{background:radial-gradient(ellipse at 50% 0%,#60112f80,transparent 75%);padding-top:30px;padding-bottom:30px}
.brand{font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:-.035em;line-height:1.05}
.brand-title span{color:#ff2872;text-shadow:0 0 18px #ef1b6440}
.brand small{color:#f4db93;font-size:clamp(.9rem,2.3vw,1.25rem);letter-spacing:.025em;line-height:1.35;margin-top:8px}
@media(max-width:600px){.site-header{padding:22px 20px}.brand{font-size:clamp(1.65rem,7vw,2.3rem)}}

/* Header tagline and manual side navigation on every screen size */
.header-note{display:block;color:#f4db93;margin:0;font-size:clamp(.85rem,1.8vw,1rem);line-height:1.4}
.site-header{gap:20px;flex-wrap:wrap}
.hero>.slide-arrow{position:absolute;z-index:4;top:42%;transform:translateY(-50%);width:48px;height:56px;border-radius:12px;background:#101015b3;font-size:2rem}
.hero>.slide-arrow[data-slide-direction="-1"]{left:18px}
.hero>.slide-arrow[data-slide-direction="1"]{right:18px}
@media(max-width:650px){.header-note{display:block;width:100%;margin-top:0}.site-header{gap:10px}.hero>.slide-arrow{width:44px;height:50px;top:40%}.hero>.slide-arrow[data-slide-direction="-1"]{left:10px}.hero>.slide-arrow[data-slide-direction="1"]{right:10px}}

/* Photo carousel: move the full image panels horizontally */
.hero-slides{display:flex;transition:transform .45s ease;will-change:transform}
.hero-slide,.hero-slide.active{position:relative;inset:auto;flex:0 0 100%;height:100%;opacity:1;visibility:visible;transition:none}
@media(prefers-reduced-motion:reduce){.hero-slides{transition:none}}

.coming-badge{display:inline-block;margin-top:10px;color:#ff9aac;font-size:.8rem;font-weight:700;letter-spacing:.04em}.episode.upcoming.has-thumb{opacity:1}.episode.upcoming{cursor:default}

/* Three collection covers per row on phones in portrait */
@media(max-width:650px) and (orientation:portrait){
  .browse{padding-left:14px;padding-right:14px}
  .browse .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 9px}
  .browse .poster-link{border-radius:8px}
  .browse .card h3{font-size:clamp(.78rem,3.1vw,1rem);line-height:1.25;margin:9px 0 5px;overflow-wrap:anywhere}
  .browse .card p{font-size:clamp(.7rem,2.6vw,.85rem);line-height:1.4;overflow-wrap:anywhere}
  .browse .coming strong{font-size:.65rem;letter-spacing:.06em}
}
/* Installable viewing app */
.app-header-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.install-app{font:700 1rem/1.4 system-ui,sans-serif;padding:10px 16px;border:1px solid #ff91a5;border-radius:10px;background:#332630;color:#fff;cursor:pointer;min-height:44px}
.install-app:hover{background:#58253b}
.install-app:focus-visible,#install-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
[hidden]{display:none!important}
#installed-app{font-size:1rem;color:#f4db93}
#install-dialog{width:min(520px,calc(100% - 32px));box-sizing:border-box;border:1px solid #ffffff40;border-radius:18px;padding:24px;background:#1b1b22;color:#fff;max-height:85dvh;overflow:auto;font:1rem/1.6 system-ui,sans-serif}
#install-dialog::backdrop{background:#000b}
.install-dialog-header{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}
#install-heading{font-size:1.5rem;line-height:1.25;margin:0}
#install-close{background:transparent;color:white;border:0;font-size:1.8rem;min-width:44px;min-height:44px;cursor:pointer}
#install-dialog li{margin-bottom:10px}
.install-help{color:#c7c0ca}
@media(max-width:650px){.app-header-actions{width:100%;gap:12px}.app-header-actions .header-note{width:auto;flex:1}.site-header{padding-top:max(22px,env(safe-area-inset-top))}}