:root{color-scheme:light;--page-background: #f8fafc;--page-text: #0f172a;--page-muted: #475569;--surface: rgba(255, 255, 255, 0.8);--surface-border: rgba(15, 23, 42, 0.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body.slider-page{min-height:100vh;margin:0;background:radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 28%),linear-gradient(180deg, #ffffff 0%, var(--page-background) 100%);color:var(--page-text);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.page-shell{width:min(1200px,100% - 2rem);margin:0 auto;padding:3rem 0 4rem}.page-header{max-width:58rem;margin-bottom:2rem}.eyebrow,.demo-label{margin:0 0 .6rem;color:#2563eb;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,h2,h3,p,span{margin:0}h1{font-size:clamp(2.6rem,6vw,4.75rem);line-height:.94}h2{font-size:1.55rem}h3{font-size:1.8rem}.page-copy,.demo-copy,.vertical-panel p{margin-top:.9rem;color:var(--page-muted);line-height:1.7}.slider-grid{display:grid;gap:1.25rem}.demo-card{display:grid;gap:1.4rem;padding:1.5rem;border:1px solid var(--surface-border);border-radius:1.5rem;background:var(--surface);backdrop-filter:blur(12px);box-shadow:0 24px 40px rgba(15,23,42,.08)}.demo-card--hero,.demo-card--vertical{min-height:560px}.demo-card--carousel,.demo-card--css,.demo-card--gallery{min-height:420px}.hero-slider,.vertical-slider{position:relative;overflow:hidden;border-radius:1.25rem}.hero-slider{min-height:380px;background:#0f172a}.hero-slider__backdrop{position:absolute;inset:0;background:linear-gradient(135deg, #0f172a, #2563eb);opacity:1;transition:background .4s ease}.hero-slider__viewport{position:relative;min-height:380px}.hero-slide{position:absolute;inset:0;display:grid;align-content:end;padding:2rem;opacity:0;background:var(--slide-background);transition:opacity .4s ease;color:#fff}.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.72))}.hero-slide>*{position:relative;z-index:1}.hero-slide span{margin-bottom:.65rem;font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.hero-slide.is-active{opacity:1}.hero-slider__actions{display:flex;gap:.6rem;position:absolute;right:1rem;bottom:1rem;z-index:2}.hero-slider__actions button{width:48px;height:48px;border:0;border-radius:999px;background:hsla(0,0%,100%,.16);color:#fff;cursor:pointer;font:inherit;font-size:1.2rem;transition:transform .2s ease,background .2s ease}.hero-slider__actions button:hover{transform:translateY(-1px);background:hsla(0,0%,100%,.24)}.vertical-slider{position:relative;overflow:hidden;border-radius:1.25rem;display:grid;grid-template-columns:35% 65%;min-height:420px}.vertical-slider__left,.vertical-slider__right{position:relative;height:420px;transition:transform .5s ease-in-out}.vertical-slider__left{top:-1260px}.vertical-panel,.vertical-photo{height:420px}.vertical-panel{display:grid;place-items:center;padding:1.5rem;background:var(--panel-background);color:#fff;text-align:center}.vertical-panel p{color:hsla(0,0%,100%,.84)}.vertical-photo{background:var(--panel-background)}.vertical-slider__actions{display:flex;gap:.6rem;position:absolute;left:calc(35% - 24px);top:50%;z-index:2;transform:translateY(-50%);flex-direction:column-reverse}.vertical-slider__actions button{width:48px;height:48px;border:0;border-radius:999px;background:hsla(0,0%,100%,.16);color:#fff;cursor:pointer;font:inherit;font-size:1.2rem;transition:transform .2s ease,background .2s ease}.vertical-slider__actions button:hover{transform:translateY(-1px);background:hsla(0,0%,100%,.24)}@media(max-width: 840px){.vertical-slider{grid-template-columns:1fr}.vertical-slider__right{display:none}.vertical-slider__left{top:0}.vertical-slider__actions{left:auto;right:1rem;top:1rem;transform:none;flex-direction:row}}.image-carousel{width:min(500px,100%)}.image-carousel__viewport{overflow:hidden;border-radius:1.25rem 1.25rem 0 0;box-shadow:2px 2px 5px rgba(0,0,0,.15)}.image-carousel__track{display:flex;transition:transform .5s ease-in-out}.image-carousel__item{flex:0 0 100%;min-height:360px;display:grid;place-items:center;background:var(--panel-background)}.image-carousel__item span{padding:.6rem .9rem;border-radius:999px;background:hsla(0,0%,100%,.18);color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:.04em}.image-carousel__actions{display:flex;gap:.6rem;margin-top:.5rem}.image-carousel__actions button{flex:1;padding:.75rem 1rem;border:0;border-radius:999px;background:#7c3aed;color:#fff;cursor:pointer;font:inherit;transition:transform .2s ease,background .2s ease}.image-carousel__actions button:hover{transform:translateY(-1px);background:hsla(0,0%,100%,.24)}.css-carousel-shell{display:grid;gap:1rem}.css-carousel-nav{display:flex;gap:.5rem}.css-carousel-nav a{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:#e2e8f0;color:#0f172a;cursor:pointer;font:inherit;text-decoration:none;transition:transform .2s ease,background .2s ease}.css-carousel-nav a:hover{transform:translateY(-1px);background:hsla(0,0%,100%,.24)}.css-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;scrollbar-width:thin}.css-carousel__slide{min-height:260px;display:grid;place-items:center;scroll-snap-align:center;border-radius:1.25rem;background:var(--panel-background)}.css-carousel__slide span{padding:.6rem .9rem;border-radius:999px;background:hsla(0,0%,100%,.18);color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:.04em}.gallery-grid{display:grid;gap:1rem}.gallery-grid__viewport{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:.75rem;border-radius:1.25rem;padding:1rem;background:hsla(0,0%,100%,.5)}.gallery-grid__item{aspect-ratio:1;border-radius:.75rem;background:var(--panel-background);cursor:pointer;border:3px solid rgba(0,0,0,0);transition:transform .2s ease,border-color .2s ease;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem}.gallery-grid__item:not(.is-active){display:none}.gallery-grid__item:hover{transform:scale(1.05);border-color:hsla(0,0%,100%,.4)}.gallery-grid__item.is-active{display:grid;border-color:#fff;transform:scale(1.1)}.gallery-grid__pagination{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.gallery-grid__dot{width:12px;height:12px;border-radius:999px;background:#cbd5e1;border:2px solid #64748b;cursor:pointer;transition:background .2s ease,transform .2s ease,border-color .2s ease}.gallery-grid__dot:hover{background:#94a3b8;border-color:#475569}.gallery-grid__dot.is-active{background:#0f172a;border-color:#0f172a;transform:scale(1.3)}