.poster-home{--home-section-space:clamp(100px,14svh,180px)}
/* Desktop opening: allocate height to the animation, not fixed empty bands. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 .poster-home{--home-bar-height:clamp(48px,7dvh,76px);--home-fit-gap:clamp(10px,1.6dvh,18px);--home-fit-padding:var(--home-section-space)}
 #app .poster-home>.topbar{height:var(--home-bar-height)!important;min-height:0!important;padding-block:6px!important;box-sizing:border-box}
 #app .poster-home .opening-screen{height:auto!important;min-height:calc(100dvh - var(--home-bar-height))!important;padding:var(--home-fit-padding) 0!important;gap:var(--home-fit-gap)!important;display:flex;flex-direction:column;justify-content:flex-start!important;box-sizing:border-box;scroll-margin-top:var(--home-bar-height)}
 #app .opening-screen .intro-space{display:none!important}#app .opening-screen .poster-intro{padding:0!important;flex:none}#app .opening-screen .pastel-title{margin:0!important;line-height:0}#app .opening-screen .pastel-title img{height:clamp(70px,13dvh,140px)!important;width:auto!important;max-width:100%!important;object-fit:contain;object-position:left center}
 #app .opening-screen .hero-composition{height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;display:flex;flex-direction:column;gap:var(--home-fit-gap)!important;overflow:visible;background:transparent}
 #app .opening-screen .hero-composition .poster-hero{position:relative;width:100%;height:var(--home-image-height,55dvh)!important;min-height:0!important;max-height:none!important;flex:none!important;clip-path:none!important;overflow:hidden;background:#283137}
 #app .opening-screen .hero-composition .hero-motion{position:relative;display:block;width:100%;height:100%!important;max-height:none;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 65%!important}
 #app .opening-screen .hero-composition .hero-toolbar{position:static!important;height:auto!important;width:100%!important;padding:0!important;margin:0!important;flex:none;min-height:0!important}
 #app .opening-screen .hero-composition .poster-actions{margin:0!important;gap:12px!important;display:flex!important;width:auto!important}
 #app .opening-screen .hero-composition .poster-actions .button{min-height:clamp(40px,5dvh,48px)!important;height:auto;min-width:160px!important;padding:clamp(9px,1.2dvh,13px) 20px!important;font-size:14px!important}
 #app .poster-home>.topbar .nav a.active:after{bottom:-12px}
}

/* The real image fills the frame; no duplicate, blurred or letterbox fillers. */
#app .opening-screen .poster-hero:before{content:none!important;display:none!important}
#app .opening-screen .hero-motion{object-fit:cover!important}
@media(max-width:900px),(hover:none) and (pointer:coarse){
 #app .opening-screen .hero-composition .hero-toolbar{width:100%!important;display:block!important}
 #app .opening-screen .hero-composition .hero-toolbar .poster-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;width:100%!important;gap:12px!important;margin:0!important}
 #app .opening-screen .hero-composition .hero-toolbar .poster-actions>.button{width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal!important;font-size:13px!important;padding:12px 8px!important;min-height:44px}
}

#app .poster-home #home-discover{justify-content:flex-start!important;scroll-snap-align:start!important;scroll-margin-top:0!important;padding-top:0!important}#app .poster-home #home-discover #home-courses{margin-top:0!important;scroll-margin-top:0!important}

@media(max-width:900px),(hover:none) and (pointer:coarse){
 #app .poster-home .opening-screen{padding-top:32px!important;padding-bottom:32px!important;height:auto!important;min-height:calc(100svh - var(--mobile-header-height,110px));justify-content:flex-start!important}
 #app .opening-screen .hero-composition{flex:none!important;height:auto!important;min-height:0!important}
 #app .opening-screen .hero-composition .poster-hero{flex:none!important;height:auto!important;aspect-ratio:16/9;min-height:0!important;max-height:none!important}
 #app .opening-screen .hero-composition .hero-motion{display:block;height:100%!important;width:100%!important;aspect-ratio:16/9;object-fit:cover!important}
}
#app #home-discover #home-courses .section-head{padding-top:0!important;margin-top:0!important}#app #home-discover #home-courses h2{margin-top:0!important}
/* Viewport-sized opening, with modest breathing room on every screen. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 #app .poster-home .opening-screen{height:calc(100dvh - var(--home-bar-height))!important;min-height:0!important;padding:clamp(12px,2.2dvh,28px) 0!important;justify-content:center!important}
}
@media(max-width:900px),(hover:none) and (pointer:coarse){
 html.home-snap,body{scroll-snap-type:none!important;scroll-behavior:auto!important}
 #app .poster-home .home-screen{scroll-snap-align:none!important;scroll-snap-stop:normal!important;transition:none!important;transform:none!important;opacity:1!important}
 #app .poster-home .opening-screen{height:calc(100svh - var(--mobile-header-height,76px))!important;min-height:0!important;padding:12px 0 18px!important;gap:12px!important;display:flex!important;flex-direction:column!important;box-sizing:border-box}
 #app .opening-screen .poster-intro{flex:none!important;padding:0!important}
 #app .opening-screen .pastel-title{margin:0!important;line-height:0}
 #app .opening-screen .pastel-title img{height:auto!important;max-height:clamp(56px,14svh,110px)!important;width:auto!important;max-width:100%!important;object-fit:contain;object-position:left}
 #app .opening-screen .hero-composition{flex:1!important;height:auto!important;min-height:0!important;max-height:none!important;gap:12px!important;display:flex!important;flex-direction:column!important;overflow:visible!important}
 #app .opening-screen .hero-composition .poster-hero{position:relative!important;flex:1!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important}
 #app .opening-screen .hero-composition .hero-motion{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 65%!important}
 #app .opening-screen .hero-composition .hero-toolbar{flex:none!important;position:static!important;height:auto!important;padding:0!important;margin:0!important}
}
/* Mobile pages flow from the top; sections are never viewport-sized chapters. */
@media(max-width:900px),(hover:none) and (pointer:coarse){
 #app .poster-home .home-screen{height:auto!important;min-height:0!important;max-height:none!important;justify-content:flex-start!important;align-content:start!important;padding-block:24px!important;scroll-margin:0!important}
 #app .poster-home #home-opening{height:auto!important;min-height:0!important;padding-top:12px!important;padding-bottom:24px!important;justify-content:flex-start!important}
 #app .poster-home #home-opening .hero-composition{flex:none!important;height:auto!important;min-height:0!important}
 #app .poster-home #home-opening .poster-hero{flex:none!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important}
 #app .poster-home .intro-space{display:none!important}
 #app .poster-home .home-screen>.home-section{min-height:0!important;height:auto!important;margin-top:0!important}
 #app .poster-home #home-materials{margin-top:0!important}
 #app .poster-home .gemini-screen .home-gemini{min-height:0!important;height:auto!important;justify-content:flex-start!important}
 #app .poster-home .gemini-screen .gemini-composer{margin-top:20px!important}
}
@media(max-width:900px),(hover:none) and (pointer:coarse){
 #app .poster-home{--mobile-section-top-space:24px}
 #app .poster-home #home-opening{padding-bottom:50px!important}
 #app .poster-home #home-discover,#app .poster-home #home-materials{padding-top:var(--mobile-section-top-space)!important}
}
/* Opening spacing: desktop reserve below actions; mobile actions sit 12px from viewport edge. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 #app .poster-home #home-opening{padding-bottom:50px!important}
}
@media(max-width:900px),(hover:none) and (pointer:coarse){
 #app .poster-home #home-opening{height:calc(100svh - var(--mobile-header-height,76px))!important;min-height:0!important;padding-bottom:12px!important;justify-content:flex-start!important}
 #app .poster-home #home-opening .hero-composition{flex:1!important;min-height:0!important}
 #app .poster-home #home-opening .poster-hero{flex:1!important;aspect-ratio:auto!important;min-height:0!important}
}

/* Desktop chapter starts at viewport top, with the Storage spacing inside it. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 #app .poster-home #home-discover{padding-top:var(--home-section-space,clamp(100px,14svh,180px))!important;scroll-snap-align:start!important;scroll-margin-top:0!important;justify-content:flex-start!important}
}
/* Both desktop chapters share the Storage heading inset and top alignment. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 #app .poster-home #home-discover,#app .poster-home #home-materials{padding-top:32px!important;scroll-snap-align:start!important;scroll-margin-top:0!important;justify-content:flex-start!important}
 #app .poster-home #home-discover #home-courses .section-head,#app .poster-home #home-materials>.section-head{margin-top:0!important;padding-top:0!important}
 #app .poster-home #home-discover #home-courses h2,#app .poster-home #home-materials>.section-head h2{margin-top:0!important}
}
`n#app .hero.course-hero{border:0!important;outline:0!important;box-shadow:none!important}