/* An extension of the original design; original styles.css is unchanged. */
html{scroll-padding-top:110px}
.skip-content{position:fixed;top:-80px;left:18px;z-index:110;background:var(--white);color:#090a0c;padding:14px 20px;border-radius:8px}.skip-content:focus{top:15px}
:focus-visible{outline:2px solid var(--blue-hot);outline-offset:5px}
.motion-controls{position:fixed;bottom:16px;left:18px;z-index:100;display:flex;align-items:center;gap:12px;border:1px solid #ffffff24;border-radius:999px;background:#0b0e12ee;backdrop-filter:blur(16px);padding:6px 7px 6px 14px;font:12px var(--font-body);color:#b6bbc6}.motion-controls button{background:#ffffff12;color:var(--white);border:1px solid #ffffff1c;border-radius:999px;padding:9px 13px;cursor:pointer;font:inherit;min-height:36px}
.hero-eyebrow{font:500 13px var(--font-display);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-hot);margin:0 0 22px;animation:fade-up .9s var(--ease-out) both}
.hero-logo-fallback{display:flex}.hero-stage.webgl-ready .hero-logo-fallback{display:none}
.hero-copy h1 span{animation-name:focus-rise;animation-duration:1200ms}.hero-copy h1 span:nth-child(2){animation-delay:150ms}
@keyframes focus-rise{from{opacity:0;transform:translateY(50px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.arrival-light{position:absolute;left:55%;top:10%;width:20%;height:85%;pointer-events:none;background:linear-gradient(90deg,transparent,#79a3ff1c,transparent);filter:blur(24px);transform:rotate(24deg);animation:arrival-sweep 2.4s var(--ease-out) both}
@keyframes arrival-sweep{0%{opacity:0;translate:-240px 0}35%{opacity:1}100%{opacity:0;translate:200px 0}}
.hero-handoff{position:absolute;bottom:48px;left:50%;width:min(480px,75%);transform:translateX(-50%);text-align:center;opacity:0;pointer-events:none;color:var(--soft);font-size:14px}.hero-handoff b{display:block;font:500 28px var(--font-display);color:var(--white);margin-top:10px}.hero-handoff i{font-style:normal}.hero-handoff b i{display:inline-block;margin-left:14px}.handoff-track{height:1px;background:#ffffff1a;margin:22px auto 0;width:200px;overflow:hidden}.handoff-track i{display:block;width:100%;height:100%;background:var(--blue-hot);transform:scaleX(var(--hero-progress,0));transform-origin:left;box-shadow:0 0 14px #79a3ff}
@media(min-width:1021px) and (prefers-reduced-motion:no-preference){
  html.motion-ready:not([data-motion="off"]) .hero-journey{height:148svh}
  html.motion-ready:not([data-motion="off"]) .hero-section{position:sticky;top:0;height:100svh;min-height:700px}
  html.motion-ready:not([data-motion="off"]) .hero-copy{animation:none;translate:0 calc(var(--hero-progress,0) * -80px);opacity:calc(1 - var(--hero-progress,0) * .92);filter:blur(calc(var(--hero-progress,0) * 2px))}
  html.motion-ready:not([data-motion="off"]) .hero-grid{translate:0 calc(var(--hero-progress,0) * 55px);opacity:calc(1 - var(--hero-progress,0) * .65)}
  html.motion-ready:not([data-motion="off"]) .hero-handoff{opacity:var(--handoff-opacity,0);translate:0 calc((1 - var(--hero-progress,0)) * 25px)}
  html.motion-ready:not([data-motion="off"]) .hero-stage-glow{opacity:calc(1 - var(--hero-progress,0))}
}
/* Keep the original product rows, allowing more space for the demonstrations. */
.manifest-row{grid-template-columns:minmax(100px,145px) minmax(0,1fr) clamp(240px,27vw,350px)}
.vignette.motion-cut,.vignette.motion-type{height:240px;max-width:none;aspect-ratio:auto;overflow:hidden;background:radial-gradient(80% 80% at 50% 40%,color-mix(in srgb,var(--accent) 9%,transparent),transparent),#090b10;border-color:#ffffff22}
.cut-window{position:absolute;top:16px;left:16px;right:16px;height:114px;border:1px solid #ffffff20;border-radius:8px;overflow:hidden;background:#14151a}
.cut-window img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.6);transform:scale(calc(1.08 - var(--demo-progress,1) * .08))}
.cut-window>span{position:absolute;left:10px;bottom:8px;color:#fff;background:#030304bb;padding:4px 7px;border-radius:4px;font:600 12px var(--font-display)}
.cut-edit{position:absolute;top:140px;left:16px;right:16px;height:66px}.cut-ticks{display:flex;justify-content:space-between;color:#9ba2b3;font:10px var(--font-display)}.cut-ticks i{font-style:normal}.cut-clips{display:flex;gap:5px;margin-top:7px;height:20px}.cut-clips i{display:block;width:34%;border-radius:3px;background:#ff5a4d66;border:1px solid #ff8b8180;opacity:calc(.3 + var(--demo-progress,1) * .7)}.cut-clips i:nth-child(2){width:42%;background:#ff5a4d99}.cut-clips i:nth-child(3){width:24%;background:#ff5a4d44}
.clip-one{transform:translateX(calc((1 - var(--demo-progress,1)) * -35px)) rotate(calc((1 - var(--demo-progress,1)) * -9deg))}.clip-two{transform:translateY(calc((1 - var(--demo-progress,1)) * 35px))}.clip-three{transform:translateX(calc((1 - var(--demo-progress,1)) * 35px)) rotate(calc((1 - var(--demo-progress,1)) * 9deg))}
.cut-wave{height:10px;background:repeating-linear-gradient(90deg,#bde4ff66 0 2px,#6a9dc633 2px 5px);margin-top:5px;border-radius:2px;transform:scaleX(var(--demo-progress,1));transform-origin:left}.cut-cursor{position:absolute;top:15px;bottom:0;left:calc(6% + var(--demo-progress,1) * 80%);width:1px;background:#fff;box-shadow:0 0 8px #fff5}.cut-cursor:before{content:'';position:absolute;width:5px;height:5px;left:-2px;top:0;background:#fff}
.demo-label{position:absolute;bottom:9px;left:16px;font:10px var(--font-body);letter-spacing:.02em;color:#929baa}
.type-toolbar{position:absolute;left:17px;right:17px;top:17px;display:flex;align-items:center;gap:5px}.type-toolbar>span{height:5px;width:5px;background:#ffffff40;border-radius:50%}.type-toolbar b{margin-left:auto;font:500 11px var(--font-display);color:#acb4c6}.type-caption{position:absolute;left:20px;top:48px;font:600 14px var(--font-display);color:#d9e2ff;margin:0}.type-paper{position:absolute;left:20px;right:20px;top:81px;min-height:70px;color:#edf1fc;font:500 19px/1.5 var(--font-display)}.type-paper i{display:inline-block;height:20px;width:2px;background:var(--blue-hot);vertical-align:text-bottom;animation:caret-blink 1.1s steps(1) infinite;margin-left:3px}.type-control{position:absolute;bottom:42px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font:11px var(--font-body);color:#98a5c0;border-top:1px solid #ffffff16;padding-top:12px}.type-speed{border:1px solid #ffffff20;border-radius:4px;padding:2px 6px}
.vg-fit .vg-bars i{transform:scaleY(calc(.2 + var(--demo-progress,1) * .8));transform-origin:bottom}.vg-blox .vg-voxels i{translate:0 calc((1 - var(--demo-progress,1)) * 35px);opacity:calc(.15 + var(--demo-progress,1) * .85)}
.reel-strip:focus-within .reel-track{animation-play-state:paused}
.mobile-navigation{display:none}
@media(max-width:1020px){.manifest-row{grid-template-columns:1fr 300px}.hero-handoff{display:none}.hero-eyebrow{font-size:12px}.mobile-navigation{display:block;margin-left:12px;position:relative;font:600 13px var(--font-body)}.mobile-navigation summary{list-style:none;cursor:pointer;padding:12px}.mobile-navigation summary::-webkit-details-marker{display:none}.mobile-navigation summary span{margin-left:7px}.mobile-navigation nav{position:absolute;top:46px;right:0;width:220px;display:flex;flex-direction:column;padding:12px;background:#0b0e12f5;border:1px solid #ffffff24;border-radius:15px;box-shadow:0 20px 60px #000b}.mobile-navigation nav a{padding:13px 12px;color:var(--soft)}.header-inner>.discord-pill{margin-left:auto}.header-inner{gap:0}}
@media(max-width:700px){.manifest-row{grid-template-columns:1fr}.vignette.motion-cut,.vignette.motion-type{width:100%;max-width:420px}.manifest-copy p{font-size:16px}.hero-stage{height:clamp(260px,37vh,360px)}.hero-content{gap:24px}.hero-section{padding-bottom:48px}.hero-lede{font-size:16px}.hero-eyebrow{margin-bottom:16px}.motion-controls{bottom:10px;left:10px;padding-left:10px;font-size:10px;gap:8px}.motion-controls button{font-size:11px}.site-footer{padding-bottom:84px}.mobile-navigation{margin-left:2px}.header-inner>.discord-pill{padding:9px 11px}.brand-lockup{gap:7px}}
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after{animation:none!important;transition:none!important}
html[data-motion="off"] .reveal{opacity:1;transform:none;translate:none}
html[data-motion="off"] .hero-copy{opacity:1;filter:none;translate:none}
@media(prefers-reduced-motion:reduce){.hero-eyebrow,.arrival-light,.type-paper i{animation:none}.hero-journey{height:auto}.hero-section{position:relative}.hero-handoff{display:none}.arrival-light{display:none}}

.motion-controls{padding:6px}