/* Hallmark · macrostructure: cinematic carousel catalogue · tone: dark editorial · anchor hue: coral
 * theme: studied-DNA (source: https://dramashorts.io/) · structure only; COLADRAMA palette retained by user direction
 * pre-emit critique: Philosophy 5 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 4 · Variety 5
 */

[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:clip}
body{min-height:100svh;background:var(--color-paper);color:var(--color-ink)}

.app-install-banner{position:sticky;top:0;z-index:calc(var(--z-nav) + 4);display:none;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--space-3);min-height:68px;padding:var(--space-2) max(var(--space-3),env(safe-area-inset-right)) var(--space-2) max(var(--space-3),env(safe-area-inset-left));background:linear-gradient(105deg,color-mix(in oklab,var(--color-paper-soft) 82%,var(--color-accent)),var(--color-paper-raised));border-bottom:1px solid color-mix(in oklab,var(--color-accent) 42%,var(--color-rule));box-shadow:0 10px 28px color-mix(in oklab,var(--color-paper) 76%,transparent)}
.app-install-banner img{inline-size:44px;block-size:44px;border-radius:13px;box-shadow:0 7px 18px color-mix(in oklab,var(--color-paper) 72%,transparent)}
.app-install-banner>div{display:grid;min-width:0;line-height:1.15}
.app-install-banner b{font-family:var(--font-display);font-size:.9rem;overflow-wrap:anywhere}
.app-install-banner span{margin-top:var(--space-1);color:var(--color-muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-install-banner>button{min-height:42px;border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);background:linear-gradient(110deg,var(--color-accent),var(--color-accent-warm));color:var(--color-accent-ink);font-weight:850;white-space:nowrap}
.app-install-banner .dismiss-install{min-width:32px;padding:var(--space-1);border-color:var(--color-rule);background:transparent;color:var(--color-muted);font-size:1.15rem}
.app-install-banner>button:hover,.app-install-banner>button.is-hover{filter:brightness(1.06)}
.app-install-banner>button:focus-visible,.app-install-banner>button.is-focus{outline:2px solid var(--color-focus);outline-offset:2px}
.app-install-banner>button:active,.app-install-banner>button.is-active{transform:translateY(1px);opacity:.88}
.app-install-banner>button:disabled{cursor:not-allowed;filter:none;opacity:.5}
.app-install-banner[data-state=loading]>button:first-of-type{cursor:wait;opacity:.7}
.app-install-banner[data-state=error]{border-bottom-color:var(--color-error)}
.app-install-banner[data-state=success]{border-bottom-color:var(--color-success)}

.topbar{height:70px;border-bottom-color:color-mix(in oklab,var(--color-rule) 66%,transparent);background:color-mix(in oklab,var(--color-paper) 90%,transparent)}
.topbar .brand{position:absolute;left:50%;transform:translateX(-50%)}
.topbar nav{margin-right:auto}.topbar .tools{margin-left:0}
.topbar .brand img{box-shadow:0 8px 22px color-mix(in oklab,var(--color-accent) 18%,transparent)}
.desktop-install{border-color:color-mix(in oklab,var(--color-accent) 55%,var(--color-rule))!important;color:var(--color-ink)!important}
.desktop-install:hover{background:var(--color-paper-soft)!important}
.desktop-install:focus-visible{outline-color:var(--color-focus)}

.cinema-home{padding-bottom:var(--space-8);background:radial-gradient(circle at 50% 0,color-mix(in oklab,var(--color-accent) 17%,transparent),transparent 27rem)}
.hero-carousel-section{padding:clamp(20px,4vw,48px) 0 var(--space-6)}
.hero-carousel-viewport{position:relative;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain}
.hero-carousel-viewport::-webkit-scrollbar{display:none}
.hero-carousel-track{display:flex;align-items:center;gap:clamp(12px,2vw,28px);width:max-content;padding-inline:max(7vw,24px)}
.hero-slide{flex:0 0 clamp(360px,64vw,900px);scroll-snap-align:center;border:0;padding:0;background:transparent;color:var(--color-ink);opacity:.46;transform:scale(.91);transition:transform var(--duration-standard) var(--ease-standard),opacity var(--duration-standard) var(--ease-standard)}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero-slide:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px;border-radius:var(--radius-lg)}
.hero-slide:active{transform:scale(.985)}
.hero-slide-media{position:relative;display:block;aspect-ratio:16/7;overflow:hidden;border:1px solid color-mix(in oklab,var(--color-rule) 75%,transparent);border-radius:calc(var(--radius-lg) + 2px);background:var(--color-paper-raised) center/cover no-repeat;box-shadow:0 28px 70px color-mix(in oklab,var(--color-paper) 82%,transparent)}
.hero-slide-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in oklab,var(--color-paper) 78%,transparent),transparent 45%)}
.hero-slide-badge,.card-badge{position:absolute;z-index:1;top:12px;left:12px;display:inline-flex;align-items:center;min-height:26px;padding:var(--space-1) var(--space-2);border-radius:7px;background:linear-gradient(110deg,var(--color-accent),var(--color-accent-warm));color:var(--color-accent-ink);font-family:var(--font-mono);font-size:.67rem;font-weight:800;letter-spacing:.02em}
.hero-slide-count,.card-count{position:absolute;z-index:1;top:12px;right:12px;padding:var(--space-1) var(--space-2);border-radius:7px;background:color-mix(in oklab,var(--color-paper) 78%,transparent);color:var(--color-ink);font-size:.7rem;font-variant-numeric:tabular-nums;backdrop-filter:blur(8px)}
.hero-carousel-meta{display:grid;justify-items:center;gap:var(--space-4);width:min(92%,760px);margin:var(--space-5) auto 0;text-align:center}
.hero-carousel-meta h1{max-width:22ch;margin:0;font-size:clamp(1.75rem,4.5vw,3.6rem);line-height:1.03;letter-spacing:-.045em}
.hero-carousel-meta p{display:-webkit-box;max-width:62ch;margin:0;color:var(--color-muted);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hero-watch{display:inline-grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:var(--space-2);min-width:min(280px,86vw);min-height:48px;border:0;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);background:var(--color-ink);color:var(--color-accent-ink);font-weight:850}
.hero-watch::before{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
.hero-watch:hover,.hero-watch.is-hover{background:color-mix(in oklab,var(--color-ink) 88%,var(--color-accent))}
.hero-watch:focus-visible,.hero-watch.is-focus{outline:3px solid var(--color-focus);outline-offset:4px}
.hero-watch:active,.hero-watch.is-active{transform:translateY(1px)}
.hero-watch:disabled{cursor:not-allowed;opacity:.5}
.hero-watch[data-state=loading]{cursor:wait;opacity:.7}
.hero-watch[data-state=error]{background:var(--color-error)}
.hero-watch[data-state=success]{background:var(--color-success)}
.hero-dots{display:flex;justify-content:center;gap:var(--space-2);min-height:20px}
.hero-dots button{width:9px;height:9px;border:0;border-radius:var(--radius-pill);padding:0;background:color-mix(in oklab,var(--color-muted) 48%,transparent)}
.hero-dots button[aria-current=true]{background:var(--color-ink);transform:scale(1.12)}
.hero-dots button:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

.cinema-section{padding:var(--space-5) max(var(--space-5),4vw)}
.cinema-section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.cinema-section-head h2{margin:0;font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.035em}
.cinema-section-head span{color:var(--color-muted);font-size:.78rem;white-space:nowrap}
.cinema-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(var(--space-2),1.5vw,var(--space-4))}
.cinema-card{min-width:0;cursor:pointer}
.cinema-card .poster{aspect-ratio:2/3;border-radius:var(--radius-md);border:1px solid color-mix(in oklab,var(--color-rule) 66%,transparent);box-shadow:0 16px 38px color-mix(in oklab,var(--color-paper) 78%,transparent);transition:transform var(--duration-standard) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.cinema-card h3{margin:var(--space-2) 0 0;color:var(--color-ink);font-size:.9rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cinema-card>span{display:block;margin:var(--space-1) 0 0;color:var(--color-muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cinema-card:hover .poster{transform:translateY(-4px);border-color:color-mix(in oklab,var(--color-accent) 62%,var(--color-rule))}
.cinema-card:focus-within .poster{outline:2px solid var(--color-focus);outline-offset:3px}
.cinema-card:active .poster{transform:translateY(-1px)}

.bottom{border-top-color:color-mix(in oklab,var(--color-rule) 74%,transparent);background:color-mix(in oklab,var(--color-paper) 94%,transparent);backdrop-filter:blur(18px)}
.bottom a{position:relative;display:grid;grid-template-rows:27px auto;place-items:center;gap:var(--space-1);min-width:0;color:var(--color-muted);font-size:.69rem;font-weight:700;line-height:1;text-decoration:none}
.bottom a::before{content:"";position:absolute;top:-8px;width:28px;height:3px;border-radius:var(--radius-pill);background:transparent}
.bottom a[aria-current=page]{color:var(--color-ink)}
.bottom a[aria-current=page]::before{background:linear-gradient(90deg,var(--color-accent),var(--color-accent-warm))}
.nav-icon{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nav-icon .icon-accent{stroke:var(--color-accent);fill:none}
.bottom a[data-route=home] .icon-accent{fill:var(--color-accent);stroke:var(--color-accent)}
.bottom a:hover{color:var(--color-ink)}
.bottom a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.bottom a:active{opacity:.78}

@media(max-width:1100px){.cinema-rail{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media(max-width:820px){
  body{padding-bottom:calc(74px + var(--safe-bottom))}
  body.has-app-banner .topbar{top:68px}
  .app-install-banner{display:grid}
  .topbar{top:0;height:58px;padding-inline:var(--space-4);justify-content:center}
  .topbar .brand{position:absolute;left:50%;transform:translateX(-50%)}
  .topbar .brand img{width:31px;height:31px;border-radius:10px}
  .topbar .brand b{font-size:.82rem}
  .topbar nav,.tools .premium,.tools .inbox,.desktop-install{display:none}
  .topbar .tools{width:100%;justify-content:space-between;margin:0}
  .tools button{min-height:40px;padding:var(--space-2);font-size:.75rem}
  .bottom{position:fixed;z-index:var(--z-nav);left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(70px + var(--safe-bottom));padding:var(--space-2) max(var(--space-2),env(safe-area-inset-right)) var(--safe-bottom) max(var(--space-2),env(safe-area-inset-left))}
  .bottom a{min-height:54px;padding:var(--space-1)}
  .hero-carousel-section{padding-top:var(--space-4)}
  .hero-carousel-track{gap:12px;padding-inline:19vw}
  .hero-slide{flex-basis:62vw;max-width:320px}
  .hero-slide-media{aspect-ratio:2/3;border-radius:var(--radius-lg)}
  .hero-slide-badge,.card-badge{top:8px;left:8px;min-height:22px;padding:var(--space-1) var(--space-2);font-size:.58rem}
  .hero-slide-count,.card-count{top:8px;right:8px;font-size:.6rem}
  .hero-carousel-meta{gap:var(--space-3);margin-top:var(--space-4)}
  .hero-carousel-meta h1{font-size:clamp(1.28rem,6vw,1.75rem);white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
  .hero-carousel-meta p{display:none}
  .hero-watch{min-height:46px;min-width:min(250px,76vw)}
  .cinema-section{padding:var(--space-4) 0 var(--space-5)}
  .cinema-section-head{padding-inline:var(--space-4);margin-bottom:var(--space-3)}
  .cinema-section-head h2{font-size:1.18rem}
  .cinema-rail{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--space-4) var(--space-2)}
  .cinema-rail::-webkit-scrollbar{display:none}
  .cinema-card{flex:0 0 31vw;max-width:160px;scroll-snap-align:start}
  .cinema-card h3{font-size:.78rem}
}

@media(max-width:359px){
  .app-install-banner{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .app-install-banner img{inline-size:38px;block-size:38px}
  .app-install-banner>button{padding-inline:var(--space-3)}
  .app-install-banner .dismiss-install{display:none}
  .hero-carousel-track{padding-inline:18vw}
  .hero-slide{flex-basis:64vw}
  .cinema-card{flex-basis:36vw}
}

@media(min-width:821px){.app-install-banner{display:none!important}.bottom{display:none}}

@media(prefers-reduced-motion:reduce){
  .hero-slide,.cinema-card .poster,.hero-watch,.app-install-banner>button{transition-duration:150ms!important;transform:none!important}
  .hero-carousel-viewport,.cinema-rail{scroll-behavior:auto!important}
}