/* A fixed device ratio keeps the preview landscape at every viewport size. */
.hero{overflow:clip}
.scroll-track{max-width:1100px;margin:55px auto 0;position:relative;height:calc(var(--preview-height,600px) + 95svh);scroll-margin-top:84px}
.scroll-preview{position:sticky;top:84px}
.hero-demo{margin:0 auto}
.demo-stage{height:auto;display:block;perspective:none}
.macbook{position:relative;width:min(100%,1000px,calc((100svh - 270px)*1.6));aspect-ratio:1.6;margin:0 auto;container-type:inline-size;filter:drop-shadow(0 18px 16px #17202b18)}
.macbook-display{position:absolute;inset:0 4% 4%;background:#101113;border:2px solid #656971;border-bottom-color:#17191c;border-radius:3.2cqw 3.2cqw .6cqw .6cqw;perspective:1400px;perspective-origin:center bottom;overflow:hidden;box-shadow:inset 0 0 0 1px #000}
.macbook-display .screen{position:absolute;inset:1.5% 1.2% 3%;width:auto;height:auto;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:2.3cqw 2.3cqw .3cqw .3cqw;box-shadow:none;transform: none;transform-origin:center bottom;background:#05060b}
.macbook-notch{position:absolute;top:0;left:39%;width:22%;height:4.3%;border-radius:0 0 1cqw 1cqw;background:#101113;z-index:2}
.macbook-base{position:absolute;bottom:0;left:0;width:100%;height:4.5%;border-radius:.2cqw .2cqw 2cqw 2cqw;background:linear-gradient(#c6c9ce 0%,#9a9ea5 42%,#737881 90%,#a2a6ad 100%);box-shadow:0 1px 0 #565b64,inset 0 1px 0 #eef0f3}
.macbook-base span{display:block;margin:0 auto;width:19%;height:43%;border-radius:0 0 1cqw 1cqw;background:linear-gradient(#777d86,#b4b8bf);box-shadow:0 1px 0 #d8dade}
.macbook .screen-menubar{font-size:1.15cqw;padding:.8cqw 1.8cqw;gap:1.8cqw}
.macbook .screen-clock{font-size:1.8cqw;top:22%}
.macbook .screen-clock strong{font-size:12cqw;letter-spacing:-.6cqw}
.macbook .screen-bottom{font-size:1.35cqw}
.scroll-preview .style-picker{margin-top:26px}
.scroll-preview .style-description{margin-top:13px}
.scroll-hint{font-size:13px;color:#7b7b83;margin:14px 0 0}
/* Large desktop displays need a larger device, not a longer empty scroll track. */
@media(min-width:1800px) and (min-height:1000px){
  .scroll-track{max-width:1600px;height:calc(var(--preview-height,1000px) + 760px)}
  .scroll-preview .hero-demo{max-width:none}
  .macbook{width:min(100%,calc((100svh - 270px)*1.6))}
}
.scroll-track.reduced-motion{height:auto}
.reduced-motion .scroll-preview{position:relative;top:0}
@media(max-width:650px){.scroll-track{margin-top:32px;height:calc(var(--preview-height,380px) + 80svh)}.scroll-preview{top:76px}.scroll-preview .style-picker{margin-top:22px}.scroll-hint{font-size:12px}}
@media(max-height:540px){.scroll-preview{top:65px}.macbook{width:min(100%,1000px,calc((100svh - 185px)*1.6))}.scroll-preview .style-picker{margin-top:12px}.scroll-preview .style-picker button{padding:8px 18px}.scroll-preview .style-description{display:none}.scroll-hint{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.scroll-track{height:auto}.scroll-preview{position:relative;top:0}}