* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--site-bg); color:var(--text-primary); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }button { font-family:inherit; }button,a { touch-action:manipulation; }a { color:inherit; }button { cursor:pointer; }img { display:block; max-width:100%; }figure,p,h1,h2,h3 { margin:0; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent-cyan); outline-offset:5px; }
::selection { color:#fff; background:#5966a8; }.section-shell { max-width:1280px; margin:0 auto; padding-left:40px; padding-right:40px; }
.skip-link { position:fixed; z-index:1000; top:10px; left:10px; transform:translateY(-160%); background:white; color:black; padding:12px; border-radius:5px; }.skip-link:focus { transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow { font:9px var(--font-mono); letter-spacing:1.8px; color:#9a9eaf; line-height:1.8; }.eyebrow .status-dot { margin-right:8px; }.status-dot,.label-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#91b7ff; box-shadow:0 0 10px #79a4ff60; vertical-align:middle; }.label-dot { background:#b4b6c3; box-shadow:none; }
.hero { display:grid; grid-template-columns:1fr 1.04fr; min-height:660px; align-items:center; position:relative; padding-top:40px; padding-bottom:58px; }
.hero-copy { position:relative; z-index:3; padding-bottom:8px; }.hero h1 { margin-top:25px; font-size:clamp(42px,4.7vw,66px); line-height:1.09; font-weight:520; letter-spacing:-3.7px; }.gradient-text { background:linear-gradient(95deg,#d6eaff 5%,#aeb9ff 65%,#c1a7ec); background-clip:text; -webkit-text-fill-color:transparent; }
.hero-description { max-width:360px; margin-top:25px; color:#9699aa; font-size:15px; line-height:1.8; }.hero-actions { display:flex; gap:12px; margin-top:30px; }.site-button { display:inline-flex; align-items:center; justify-content:center; gap:22px; text-decoration:none; font-size:11px; font-weight:550; border-radius:7px; padding:14px 19px; border:1px solid transparent; transition:background .2s,border-color .2s,transform .2s; white-space:nowrap; }.site-button:hover { transform:translateY(-2px); }.site-button.primary { background:#e9edfa; color:#161925; box-shadow:0 2px 20px #b9c9ff09; }.site-button.primary:hover { background:#cce7ff; }.site-button.secondary { border-color:#292c36; background:#121319; color:#d8dae4; }.site-button.secondary:hover { border-color:#747fbb; }.site-button span { font-size:16px; line-height:1; }
.creator-status { display:flex; align-items:center; gap:8px; margin-top:23px; font-size:10px; color:#7e8294; }.small-spark { color:#afbeee; font-size:16px; }.soon-tag { border:1px solid #292b38; border-radius:4px; padding:3px 5px; font:7px var(--font-mono); letter-spacing:.6px; color:#9b9eb1; }
.hero-art { height:535px; position:relative; min-width:0; }.hero-halo { position:absolute; inset:20px -30px -20px -40px; background:radial-gradient(ellipse at 62% 52%,#48448e25 0%,#34386a15 30%,transparent 68%); filter:blur(25px); }.hero-scene { position:absolute; width:100%; height:100%; overflow:hidden; z-index:1; mask-image:linear-gradient(to bottom,transparent,black 8%,black 90%,transparent); }.hero-splat { position:absolute; width:100%; height:100%; object-fit:contain; transform:translate(12%,-3%) scale(1.72); mix-blend-mode:screen; }.preview-media video { opacity:0; pointer-events:none; }.preview-media.is-playing video { opacity:1; }.preview-media.is-playing>img { opacity:0; }.preview-media img,.preview-media video { transition:opacity .3s; }
.hero-image-card { width:140px; position:absolute; z-index:3; top:193px; left:-2px; border:1px solid #535568; background:#191a23; box-shadow:0 16px 50px #0007; transform:rotate(-7deg); border-radius:9px; overflow:hidden; }.micro-label { font:8px var(--font-mono); letter-spacing:1.2px; color:#bec0cf; }.hero-image-card>.micro-label { display:block; padding:11px 10px; font-size:7px; letter-spacing:.8px; }.hero-image-card .label-dot { width:4px; height:4px; margin-right:5px; }.hero-image-card img { width:100%; height:165px; object-fit:cover; object-position:center 36%; }.image-card-footer { font:8px var(--font-mono); display:flex; justify-content:space-between; padding:10px; color:#b7bbcd; }.transformation-arrow { position:absolute; left:141px; top:280px; color:#8796d2; width:86px; height:64px; z-index:4; pointer-events:none; }
.scene-label { position:absolute; top:43px; left:42%; font:8px var(--font-mono); letter-spacing:1.2px; color:#bfc5dc; z-index:3; border:1px solid #7376a32b; padding:9px 11px; border-radius:5px; background:#14151d99; }.scene-label .status-dot { margin-right:7px; }.scene-caption { position:absolute; bottom:8px; left:32%; color:#606779; font:7px var(--font-mono); letter-spacing:1.8px; }.orbit { border:1px solid #8291cf17; width:390px; height:130px; border-radius:50%; position:absolute; top:345px; left:21%; transform:rotate(-17deg); }.orbit-two { width:320px; height:90px; top:367px; left:27%; transform:rotate(17deg); border-style:dashed; }.scene-axis { position:absolute; right:6%; bottom:110px; width:28px; height:28px; z-index:3; }.scene-axis i { position:absolute; width:1px; height:19px; background:#91a4c955; transform-origin:bottom; left:50%; }.scene-axis i:nth-child(2){ transform:rotate(120deg); }.scene-axis i:nth-child(3){ transform:rotate(240deg); }
.process { padding-top:42px; padding-bottom:44px; border-top:1px solid #ffffff0d; border-bottom:1px solid #ffffff0d; display:grid; grid-template-columns:1.02fr 2fr; gap:48px; }.process-intro h2 { margin-top:9px; font-size:21px; letter-spacing:-.7px; font-weight:500; }.process-intro>p:last-child { color:#676c7e; font-size:11px; margin-top:9px; }.process .eyebrow { font-size:7px; letter-spacing:1.4px; }.process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; padding:0; margin:0; align-items:center; }.process-steps li { display:flex; gap:12px; }.step-number { color:#7e89ae; font:9px var(--font-mono); padding-top:4px; }.process-steps h3 { font-weight:500; font-size:12px; }.process-steps p { margin-top:10px; font-size:10px; color:#7e8291; line-height:1.8; }
.examples-section { padding-top:105px; padding-bottom:100px; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:33px; }.section-heading h2,.faq-section h2 { font-size:42px; font-weight:500; letter-spacing:-1.8px; margin-top:13px; }.section-heading>p,.collection-heading-note p { font-size:12px; line-height:1.8; color:#85899a; }.example-tabs { display:flex; gap:6px; margin-bottom:22px; }.example-tabs button { color:#777e96; font:9px var(--font-mono); background:transparent; border:1px solid transparent; padding:11px 15px; border-radius:6px; }.example-tabs span { font:11px var(--font-sans); margin-left:10px; }.example-tabs button[aria-selected="true"] { border-color:#35394b; background:#191b25; color:#d9dff5; }.example-tabs button:hover { color:#f8fafc; background:#13151d; }
.example-panel { border:1px solid #292c39; border-radius:13px; background:#101116; overflow:hidden; }.example-media-grid { display:grid; grid-template-columns:1fr 1.45fr; gap:1px; background:#292c39; }.input-frame,.output-frame { position:relative; height:440px; background:#111218; overflow:hidden; }.input-frame figcaption,.output-frame figcaption { position:absolute; top:0; left:0; right:0; height:55px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; z-index:2; background:linear-gradient(#111218ee,#11121800); }.micro-label .status-dot,.micro-label .label-dot { margin-right:7px; }.format-label { font:7px var(--font-mono); color:#686f84; letter-spacing:1px; }.input-frame>img { width:100%; height:100%; padding:58px 36px 24px; object-fit:contain; }.output-frame { background:radial-gradient(ellipse at center,#1a1926 0%,#101116 70%); }.example-output { position:absolute; inset:0; overflow:hidden; }.example-output img,.example-output video { width:100%; height:100%; object-fit:contain; position:absolute; transform:translate(11%,-4%) scale(1.45); mix-blend-mode:screen; }.video-duration { position:absolute; bottom:22px; left:0; width:100%; text-align:center; color:#656c83; font:7px var(--font-mono); letter-spacing:1px; }.video-duration span { margin:0 7px; }.example-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 28px; border-top:1px solid #292c39; }.example-caption h3 { font-size:18px; font-weight:500; letter-spacing:-.4px; }.example-caption p { font-size:11px; color:#828899; margin-top:8px; }.interaction-note { color:#767d91; text-align:center; font-size:10px; margin-top:22px; line-height:1.6; }.interaction-note>span { margin-right:7px; color:#a8b5dd; }
.collection-section { padding-bottom:108px; }.collection-heading-note { text-align:right; }.free-badge { display:inline-flex; align-items:center; gap:6px; font:7px var(--font-mono); color:#a7c7b4; border:1px solid #91bc9f28; background:#8dab9c08; padding:5px 8px; border-radius:4px; letter-spacing:.8px; margin-bottom:9px; }.free-badge:before { content:""; width:4px; height:4px; border-radius:50%; background:#98d7b1; }.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }.asset-card { border:1px solid #282a34; border-radius:10px; overflow:hidden; background:#101116; transition:border-color .2s,transform .2s; }.asset-card:hover { border-color:#505773; transform:translateY(-3px); }.asset-card-media { aspect-ratio:1.15; position:relative; background:radial-gradient(ellipse at center,#1a1c27,#111218); overflow:hidden; }.asset-card-media>img { width:100%; height:100%; padding:20px; object-fit:contain; }.asset-card-media>video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#111218; }.asset-badge { position:absolute; left:13px; top:13px; z-index:2; font:7px var(--font-mono); letter-spacing:1px; color:#c2cfdd; border:1px solid #ffffff17; background:#11131bd9; padding:5px 7px; border-radius:4px; }.asset-card-info { padding:17px 18px 16px; border-top:1px solid #252832; }.asset-category { color:#6f7991; text-transform:uppercase; font:7px var(--font-mono); letter-spacing:1px; }.asset-card h3 { font-size:14px; font-weight:500; margin-top:8px; }.asset-card-footer { display:flex; justify-content:space-between; gap:10px; margin-top:17px; }.asset-card-footer a { font-size:9px; text-decoration:none; color:#b4c0e0; }.asset-card-footer a:hover { color:white; text-decoration:underline; }.asset-card-footer a:last-child { color:#747d91; }.collection-note { text-align:center; font-size:11px; color:#9298aa; margin-top:28px; }.collection-note span { color:#5d657b; margin-left:5px; }
.viewer-section { padding-bottom:110px; }.viewer-callout { position:relative; overflow:hidden; background:radial-gradient(ellipse at 22% 50%,#31315330,transparent 65%),#101116; border:1px solid #2b2d3b; border-radius:16px; display:grid; grid-template-columns:1fr 1fr; min-height:425px; align-items:center; }.viewer-copy { padding:58px 60px 58px 20px; position:relative; z-index:2; }.viewer-copy h2 { font-size:42px; font-weight:500; letter-spacing:-1.8px; line-height:1.12; margin-top:15px; }.viewer-copy>p:not(.eyebrow) { color:#848a9c; line-height:1.8; font-size:12px; max-width:320px; margin-top:20px; }.file-types { display:flex; gap:8px; margin:20px 0 28px; }.file-types span { font:8px var(--font-mono); color:#8d99bb; padding:6px 8px; border:1px solid #2c3143; border-radius:4px; }.viewer-decoration { width:260px; height:260px; border-radius:50%; position:relative; margin:auto; background:radial-gradient(circle at center,#b6b4ff15 0%,transparent 65%); }.viewer-decoration:after { content:""; position:absolute; inset:20%; border-radius:50%; background:radial-gradient(#afbfff80 .8px,transparent 1px); background-size:10px 10px; mask-image:radial-gradient(ellipse,black,transparent 70%); }.wire-orbit { position:absolute; inset:15%; border:1px solid #8a97db70; border-radius:50%; transform:rotate(-32deg) scaleX(.5); box-shadow:0 0 22px #859dff08,inset 0 0 25px #859dff08; }.wire-orbit:nth-child(2) { transform:rotate(32deg) scaleX(.5); }.wire-orbit:nth-child(3) { transform:rotate(90deg) scaleX(.5); }.viewer-decoration i { position:absolute; inset:5%; border:1px dashed #57618b38; border-radius:50%; }
.faq-section { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; padding-bottom:108px; }.faq-list { border-top:1px solid #2a2d38; }.faq-list details { border-bottom:1px solid #2a2d38; }.faq-list summary { list-style:none; cursor:pointer; font-size:12px; color:#c9cede; padding:22px 0; display:flex; justify-content:space-between; gap:15px; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary>span { color:#8490b2; font-size:15px; transition:transform .2s; }.faq-list details[open] summary>span { transform:rotate(45deg); }.faq-list details p { color:#7f879c; font-size:11px; line-height:1.9; padding:0 25px 23px 0; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #ffffff0e; padding-top:32px; padding-bottom:36px; }.site-footer .site-brand { font-size:21px; }.site-footer>p { color:#60697e; font-size:10px; }.site-footer>div { display:flex; gap:24px; align-items:center; }.site-footer>div>a { color:#8993aa; font-size:10px; text-decoration:none; }.site-footer>div>a:hover { color:white; }
@media(min-width:1500px) { .hero { min-height:720px; }.hero-art { height:575px; }.hero h1 { font-size:69px; } }
@media(max-width:1050px) { .hero h1 { font-size:51px; letter-spacing:-2.7px; }.hero-art { height:485px; }.hero-image-card { width:115px; left:0; top:200px; }.hero-image-card img { height:140px; }.transformation-arrow { left:112px; }.hero-description { max-width:310px; font-size:14px; }.hero-actions { gap:8px; }.hero-actions .site-button { padding:13px 14px; gap:13px; font-size:10px; }.hero { min-height:590px; }.scene-label { top:55px; left:30%; }.scene-caption { left:23%; }.orbit { width:300px; left:15%; }.orbit-two { width:260px; left:20%; }.process { gap:24px; grid-template-columns:1fr; }.process-steps { gap:20px; }.process-steps li { gap:18px; }.process-intro { display:flex; align-items:baseline; justify-content:space-between; gap:15px; }.process-intro .eyebrow { display:none; }.process-steps { padding-top:10px; }.input-frame,.output-frame { height:380px; }.viewer-copy { padding-right:30px; } }
@media(max-width:760px) { .section-shell { padding-left:24px; padding-right:24px; }.hero { grid-template-columns:1fr; padding-top:58px; padding-bottom:30px; }.hero-copy { text-align:center; }.hero h1 { font-size:clamp(40px,8vw,60px); line-height:1.12; letter-spacing:-2.7px; margin-top:21px; }.hero-description { margin:22px auto 0; max-width:360px; }.hero-actions,.creator-status { justify-content:center; }.hero-art { width:100%; max-width:500px; height:440px; margin:15px auto 0; }.hero-image-card { left:25px; top:150px; }.transformation-arrow { left:145px; top:215px; }.scene-label { left:auto; right:45px; top:26px; }.scene-caption { display:none; }.orbit { top:300px; width:320px; }.orbit-two { top:330px; }.process { padding-top:30px; padding-bottom:30px; }.process-intro { display:block; text-align:center; }.process-intro h2 { font-size:23px; }.process-steps { gap:16px; }.process-steps li { display:block; }.step-number { display:block; margin-bottom:12px; }.process-steps h3 { font-size:11px; }.process-steps p { font-size:9px; }.process-steps p br { display:none; }.section-heading h2,.faq-section h2 { font-size:34px; }.section-heading { align-items:flex-start; }.section-heading>p { max-width:200px; padding-top:30px; font-size:11px; }.examples-section { padding-top:70px; padding-bottom:70px; }.eyebrow { font-size:8px; letter-spacing:1.3px; }.example-tabs { gap:3px; }.example-tabs button { padding:10px; }.example-tabs span { font-size:10px; margin-left:5px; }.input-frame,.output-frame { height:320px; }.input-frame>img { padding:55px 18px 15px; }.input-frame figcaption,.output-frame figcaption { padding:0 13px; }.format-label { display:none; }.micro-label { font-size:7px; letter-spacing:.7px; }.example-caption { padding:20px; }.example-caption h3 { font-size:16px; }.example-caption p { font-size:10px; max-width:190px; line-height:1.5; }.example-caption .site-button { font-size:9px; padding:13px; gap:10px; }.collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.collection-section { padding-bottom:70px; }.collection-heading-note p { font-size:10px; }.collection-note { line-height:1.8; }.collection-note span { display:block; }.viewer-section { padding-bottom:70px; }.viewer-callout { grid-template-columns:.8fr 1fr; min-height:350px; }.viewer-decoration { width:180px; height:180px; }.viewer-copy { padding:40px 25px 40px 0; }.viewer-copy h2 { font-size:33px; }.viewer-copy .site-button { padding:13px; font-size:10px; gap:12px; }.faq-section { grid-template-columns:1fr; gap:30px; padding-bottom:65px; }.site-footer { flex-wrap:wrap; }.site-footer>p { display:none; } }
@media(max-width:460px) { .section-shell { padding-left:22px; padding-right:22px; }.hero { padding-top:44px; }.hero h1 { font-size:43px; letter-spacing:-2.6px; }.hero .eyebrow { font-size:7px; letter-spacing:1.25px; }.hero-description { font-size:13px; }.hero-art { height:365px; margin-top:20px; }.hero-image-card { width:94px; top:135px; left:4px; }.hero-image-card img { height:120px; }.hero-image-card>.micro-label { font-size:6px; padding:8px; }.image-card-footer { font-size:6px; padding:8px; }.transformation-arrow { left:98px; top:185px; width:64px; height:48px; }.scene-label { right:15px; top:20px; font-size:6px; }.hero-splat { transform:translate(11%,-3%) scale(1.65); }.orbit { width:240px; top:260px; left:18%; height:75px; }.orbit-two { width:200px; top:285px; }.process-steps { gap:14px; }.process-steps h3 { line-height:1.5; }.process-intro h2 { font-size:22px; }.section-heading { display:block; }.section-heading>p { max-width:none; padding-top:16px; }.section-heading h2,.faq-section h2 { font-size:34px; }.example-tabs { justify-content:space-between; }.example-tabs button { padding:10px 8px; font-size:8px; }.example-tabs span { font-size:9px; }.example-tabs button>span { display:block; margin:6px 0 0; }.example-media-grid { grid-template-columns:1fr; }.input-frame { height:340px; }.output-frame { height:360px; }.input-frame>img { padding:50px 30px 22px; }.input-frame figcaption,.output-frame figcaption { padding:0 18px; }.format-label { display:block; }.micro-label { font-size:8px; }.example-caption { display:block; }.example-caption p { max-width:none; }.example-caption .site-button { margin-top:18px; width:100%; justify-content:space-between; padding:15px; font-size:11px; }.video-duration { bottom:20px; }.collection-heading-note { text-align:left; margin-top:17px; }.collection-heading-note p { font-size:11px; }.collection-grid { gap:12px; }.asset-card-media { aspect-ratio:.85; }.asset-card-media>img { padding:10px; }.asset-card-info { padding:14px 12px; }.asset-card h3 { font-size:12px; line-height:1.5; }.asset-category { font-size:6px; letter-spacing:.5px; }.asset-card-footer { flex-direction:column; margin-top:12px; gap:12px; }.asset-card-footer a { font-size:9px; }.asset-badge { left:8px; top:8px; font-size:6px; }.viewer-callout { grid-template-columns:1fr; }.viewer-decoration { width:170px; height:170px; margin-top:25px; margin-bottom:-5px; }.viewer-copy { padding:0 25px 35px; text-align:center; }.viewer-copy h2 br { display:none; }.viewer-copy h2 { font-size:33px; }.viewer-copy>p:not(.eyebrow) { margin:17px auto 0; }.file-types { justify-content:center; }.viewer-copy .site-button { width:100%; justify-content:space-between; }.site-footer { gap:24px; }.site-footer>div { gap:20px; }.site-footer .site-brand { font-size:20px; }.site-footer>div>a { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { transition:none!important; animation:none!important; }.site-button:hover,.asset-card:hover { transform:none; } }
/* Blend the original black render backgrounds into the charcoal stage. */
.hero { overflow:clip; }
.hero-scene,.example-output { mix-blend-mode:screen; }
.hero-splat { transform:translate(12%,-8%) scale(1.5); }
@media(max-width:460px) { .hero h1 { font-size:clamp(35px,11vw,43px); }.hero-splat { transform:translate(11%,-8%) scale(1.5); } }

/* Keep the title and playback controls in separate rows outside the video. */
.hero-art { height:auto; display:grid; grid-template-rows:auto auto auto; gap:18px; }
.hero-stage { position:relative; height:440px; min-width:0; }
.hero-art .scene-label { position:static; margin:0 24px 0 auto; width:fit-content; display:flex; align-items:center; gap:11px; padding:12px 17px; color:#e4e9ff; font:700 20px/1.25 var(--font-sans); letter-spacing:1px; border-color:#818cf84d; background:#151722; }
.hero-art .scene-label .status-dot { width:7px; height:7px; margin:0; flex-shrink:0; }
.hero-stage .orbit-one { top:66%; }.hero-stage .orbit-two { top:71%; }
.hero-preview-footer { position:relative; display:flex; align-items:center; justify-content:center; gap:18px; padding-left:24%; }
.hero-art .scene-caption { position:static; font-size:7px; line-height:1.8; max-width:145px; }
@media(min-width:1500px) { .hero-stage { height:475px; } }
@media(max-width:1050px) { .hero-stage { height:410px; }.hero-art .scene-label { margin-right:0; font-size:18px; }.hero-preview-footer { padding-left:18%; gap:12px; } }
@media(max-width:760px) { .hero-art { margin-top:38px; }.hero-stage { height:380px; }.hero-art .scene-label { margin-right:20px; }.hero-preview-footer { padding-left:24%; } }
@media(max-width:460px) { .hero-stage { height:320px; }.hero-art { gap:14px; }.hero-art .scene-label { margin-right:0; font-size:16px; padding:11px 14px; letter-spacing:.8px; }.hero-preview-footer { padding-left:20%; } }

/* The primary link covers its card; downloading remains a separate action. */
.asset-card { position:relative; isolation:isolate; cursor:pointer; }
.asset-card-footer { flex-direction:column; gap:10px; }
.asset-card-footer .asset-viewer-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:13px 16px; border:1px solid #a9bbef55; border-radius:7px; background:#e2e8fa; color:#171c2c; font-size:14px; font-weight:650; text-decoration:none; }
.asset-viewer-link::after { content:""; position:absolute; inset:0; z-index:1; border-radius:10px; }
.asset-card:hover .asset-viewer-link { background:#cce7ff; color:#171c2c; text-decoration:none; }
.asset-viewer-link:focus-visible::after { outline:2px solid var(--accent-cyan); outline-offset:-3px; }
.asset-card .asset-badge { pointer-events:none; }
.asset-card-footer .asset-download-link { position:relative; z-index:3; align-self:flex-start; display:inline-flex; align-items:center; min-height:32px; font-size:11px; }
@media(max-width:460px) { .asset-card-footer .asset-viewer-link { gap:5px; padding:12px 9px; font-size:12px; }.asset-card-footer .asset-download-link { font-size:10px; } }

/* The hero's five linked image/video examples share one playback stage. */
.hero-art { gap:14px; grid-template-rows:auto auto auto auto auto; }
.hero-carousel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.hero-art .scene-label { margin:0; font-size:17px; padding:11px 15px; }
.hero-slide-count { display:flex; align-items:baseline; gap:8px; font:10px var(--font-mono); letter-spacing:1px; color:#626e89; padding-left:8px; }
.hero-slide-count strong { font-size:19px; font-weight:500; color:#c3cdee; }
.hero-stage { height:400px; }
.hero-scene { --hero-scale:1.12; --hero-x:17%; --hero-y:-9%; }
.hero-scene .hero-splat { transform:translate(var(--hero-x),var(--hero-y)) scale(var(--hero-scale)); }
.hero-image-card { top:146px; left:8px; }
.hero-image-card img { object-fit:contain; background:#12131b; }
.transformation-arrow { top:230px; }
.hero-preview-footer { padding:2px 0 0; display:flex; justify-content:space-between; gap:16px; }
.hero-slide-caption { min-width:0; }
.hero-slide-caption>span { display:block; color:#838fae; font:8px var(--font-mono); letter-spacing:1.25px; text-transform:uppercase; margin-bottom:7px; }
.hero-slide-caption>a { display:flex; align-items:center; gap:10px; text-decoration:none; color:#e4e8f4; }
.hero-slide-caption strong { font-size:16px; line-height:1.3; font-weight:550; letter-spacing:-.3px; }
.hero-slide-caption>a>span { color:#93a6dd; font-size:14px; }
.hero-slide-caption>a:hover { color:var(--accent-cyan); }
.hero-carousel-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.hero-explore { min-height:40px; padding:11px 14px; gap:12px; margin-left:5px; }
.hero-playback-status { display:inline-flex; align-items:center; gap:7px; padding:0 8px; color:#9cacca; font:9px var(--font-mono); }
.hero-playback-status .status-dot { width:4px; height:4px; }.hero-playback-status[hidden] { display:none; }
.hero-arrow { display:flex; align-items:center; justify-content:center; min-height:36px; width:36px; border-radius:6px; background:#141722; color:#bcc9e8; border:1px solid #333c53; font-size:17px; transition:background .2s,border-color .2s; }
.hero-arrow:hover { background:#242b40; border-color:#7184b7; }
.hero-slide-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding-top:5px; }
.hero-slide-button { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; border:1px solid #292e3d; border-radius:8px; padding:9px 4px 12px; color:#7d89a6; background:#10131c; transition:border-color .25s,background .25s,color .25s; overflow:hidden; }
.hero-slide-button img { width:42px; height:42px; border-radius:5px; object-fit:contain; background:#080a10; opacity:.65; transition:opacity .25s; }
.hero-thumb-label { font-size:9px; line-height:1.3; text-align:center; white-space:nowrap; }
.hero-slide-button:hover { border-color:#536387; color:#d1d9ee; background:#171c29; }
.hero-slide-button[aria-current="true"] { background:linear-gradient(145deg,#202942,#141a2b); border-color:#7189c5; color:#e6edff; box-shadow:0 0 20px #778eff0a; }
.hero-slide-button[aria-current="true"] img,.hero-slide-button:hover img { opacity:1; }
.hero-thumb-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:#ffffff06; }
.hero-thumb-progress::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#8dbdfb,#b2a6fc); transform:scaleX(var(--progress,0)); transform-origin:left; transition:transform .25s linear; }
.hero-slide-button:not([aria-current="true"]) .hero-thumb-progress::after { transition:none; }
.hero-carousel-meta { display:flex; align-items:center; justify-content:space-between; color:#65718c; font:7px var(--font-mono); letter-spacing:1px; padding:0 2px; }
.hero-carousel-meta>span:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.hero-art.is-changing .hero-image-card img,.hero-art.is-changing .hero-slide-caption { animation:heroSlideReveal .4s ease both; }
@keyframes heroSlideReveal { from { opacity:.25; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
@media(min-width:1500px) { .hero-stage { height:435px; } }
@media(max-width:1050px) { .hero-stage { height:360px; }.hero-image-card { top:142px; }.hero-art .scene-label { font-size:15px; }.hero-slide-caption strong { font-size:14px; }.hero-thumb-label { font-size:8px; }.hero-carousel-actions { gap:5px; }.hero-arrow { width:32px; } }
@media(max-width:760px) { .hero-stage { height:350px; }.hero-art { margin-top:40px; }.hero-image-card { top:130px; left:14px; }.transformation-arrow { top:205px; left:132px; }.hero-art .scene-label { font-size:16px; }.hero-thumb-label { font-size:9px; }.hero-slide-caption strong { font-size:16px; } }
@media(max-width:460px) { .hero-stage { height:290px; }.hero-art { gap:13px; }.hero-image-card { top:105px; left:9px; }.transformation-arrow { top:163px; left:105px; }.hero-art .scene-label { font-size:14px; padding:10px 12px; letter-spacing:.8px; }.hero-slide-count strong { font-size:17px; }.hero-preview-footer { gap:10px; }.hero-slide-caption strong { font-size:13px; }.hero-slide-caption>span { font-size:7px; letter-spacing:.8px; }.hero-carousel-actions { gap:4px; }.hero-arrow { width:30px; font-size:15px; }.hero-slide-tabs { gap:5px; }.hero-slide-button { padding:8px 2px 11px; }.hero-slide-button img { width:34px; height:34px; }.hero-thumb-label { font-size:7px; }.hero-carousel-meta { font-size:6px; letter-spacing:.7px; } }
@media(max-width:360px) { .hero-thumb-label { white-space:normal; min-height:2.6em; display:flex; align-items:center; justify-content:center; }.hero-art[data-asset="adventurer"] .hero-splat { transform:translate(12%,-9%) scale(.94); } }
@media(max-width:1050px) { .hero-preview-footer { flex-wrap:wrap; }.hero-carousel-actions { width:100%; }.hero-explore { margin-left:auto; } }
@media(max-width:460px) { .hero-explore { font-size:11px; padding:11px 10px; gap:10px; }.hero-playback-status { padding-left:0; padding-right:4px; } }

.transformation-arrow>svg { display:block; width:100%; height:100%; }
.asset-download-link { gap:5px; }

/* Hover previews open the same model when clicked anywhere on the example. */
.hero-stage { display:block; }
.example-panel { position:relative; isolation:isolate; cursor:pointer; }
.example-panel #example-viewer { transform:none; }
.example-panel #example-viewer::after { content:""; position:absolute; inset:0; z-index:3; }
.example-panel:focus-within { outline:2px solid var(--accent-cyan); outline-offset:4px; }

/* One live splat leads the page; the video collection has its own section below. */
.hero { gap:24px; padding-top:48px; padding-bottom:66px; }
.interactive-hero { min-width:0; position:relative; }
.interactive-hero-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.interactive-hero-heading>.micro-label { font-size:7px; color:#78829b; }
.live-splat-label { display:flex; align-items:center; gap:9px; color:#e4e9ff; font-size:13px; font-weight:700; letter-spacing:1px; padding:10px 13px; background:#151722; border:1px solid #818cf842; border-radius:6px; }
.interactive-hero-stage { height:470px; position:relative; isolation:isolate; background:var(--site-bg); }
.interactive-hero-glow { position:absolute; inset:5% -5%; pointer-events:none; background:radial-gradient(ellipse at 55% 50%,#7261bc24,transparent 65%); }
.interactive-hero-floor { position:absolute; left:20%; right:5%; bottom:10%; height:15%; border:1px solid #59658730; border-radius:50%; transform:rotate(-12deg); box-shadow:0 0 40px #8576db08; pointer-events:none; }
.interactive-hero-fallback,.interactive-hero-canvas { position:absolute; inset:0; transition:opacity .3s ease; }
.interactive-hero-fallback { z-index:2; pointer-events:none; mix-blend-mode:screen; overflow:hidden; }
.interactive-hero-fallback img,.interactive-hero-fallback video { position:absolute; width:100%; height:100%; object-fit:contain; transform:translate(8%,-10%) scale(1.45); }
.interactive-hero-fallback video { opacity:0; transition:opacity .25s; }
.interactive-hero-fallback.is-playing video { opacity:1; }
.interactive-hero-fallback.is-playing img { opacity:0; }
.interactive-hero-canvas { z-index:1; opacity:0; pointer-events:none; }
.interactive-hero-canvas canvas { display:block; width:100%; height:100%; cursor:grab; }
.interactive-hero-canvas canvas:active { cursor:grabbing; }
.interactive-hero-canvas canvas:focus-visible { outline:1px solid #9eafff; outline-offset:-3px; border-radius:10px; }
.interactive-hero[data-state="ready"] .interactive-hero-canvas { opacity:1; pointer-events:auto; }
.interactive-hero[data-state="ready"] .interactive-hero-fallback { opacity:0; }
.interactive-hero-hint { position:absolute; z-index:4; left:60%; bottom:12px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #b9c6ff26; border-radius:999px; background:#11141de6; color:#cbd5ef; font-size:11px; font-weight:500; white-space:nowrap; pointer-events:none; visibility:hidden; opacity:0; }
.interactive-hero-hint svg { width:19px; height:19px; flex-shrink:0; color:#aebeff; }
.interactive-hero[data-state="ready"] .interactive-hero-hint { visibility:visible; opacity:1; transition:opacity .25s ease .3s; }
.interactive-hero-source { position:absolute; z-index:3; left:0; bottom:38px; width:106px; transform:rotate(-7deg); border:1px solid #535568; border-radius:8px; background:#171922; box-shadow:0 12px 30px #0004; overflow:hidden; pointer-events:none; }
.interactive-hero-source figcaption,.interactive-hero-source>span { display:block; padding:10px; color:#b4bdd4; font:7px var(--font-mono); letter-spacing:.5px; }
.interactive-hero-source img { width:100%; height:132px; object-fit:contain; background:#111219; }
.interactive-hero-arrow { position:absolute; z-index:3; left:100px; bottom:118px; width:64px; height:48px; color:#8695cc; pointer-events:none; }
.interactive-hero-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0 0; border-top:1px solid #8d95b21c; }
.interactive-hero-footer h2 { font-size:17px; font-weight:550; letter-spacing:-.4px; }
.interactive-hero-status { margin-top:7px; font-size:10px; color:#8c98b5; line-height:1.7; }
.interactive-hero-footer .site-button { min-height:44px; gap:12px; padding:13px 16px; }
.interactive-hero-footer .ui-icon { width:16px; height:16px; }
.interactive-hero-note { margin-top:12px; font-size:11px; color:#9a9eaf; }
.showcase-carousel { padding-top:62px; padding-bottom:72px; border-top:1px solid #ffffff0e; }
.showcase-carousel .section-heading { margin-bottom:32px; }
.showcase-carousel .hero-art { max-width:760px; width:100%; height:auto; margin:0 auto; gap:18px; padding:24px 30px; border:1px solid #292d3c; border-radius:16px; background:radial-gradient(ellipse at 60% 40%,#33314f16,transparent 65%),#0d0f15; }
.showcase-carousel .hero-stage { height:410px; }
.showcase-carousel .hero-image-card { left:30px; top:155px; width:132px; }
.showcase-carousel .hero-image-card img { height:156px; }
.showcase-carousel .transformation-arrow { left:170px; top:245px; }
.showcase-carousel .hero-preview-footer { flex-wrap:nowrap; }
.showcase-carousel .hero-carousel-actions { width:auto; }
.showcase-carousel .hero-thumb-label { font-size:10px; }
.showcase-carousel .hero-slide-button img { width:46px; height:46px; }
.showcase-carousel .hero-arrow { min-height:40px; width:40px; }
@media(min-width:1500px) { .interactive-hero-stage { height:510px; } }
@media(max-width:1050px) { .hero { gap:15px; }.hero h1 { font-size:46px; }.interactive-hero-stage { height:430px; }.live-splat-label { font-size:11px; }.interactive-hero-heading>.micro-label { font-size:6px; }.interactive-hero-source { width:90px; }.interactive-hero-source img { height:110px; }.interactive-hero-arrow { left:85px; width:54px; }.interactive-hero-footer { align-items:flex-start; }.interactive-hero-footer h2 { font-size:15px; }.interactive-hero-status { max-width:150px; font-size:9px; }.interactive-hero-footer .site-button { font-size:10px; padding:12px; } }
@media(max-width:760px) { .hero { padding-top:50px; gap:38px; }.hero h1 { font-size:clamp(40px,8vw,60px); }.interactive-hero { width:100%; max-width:520px; margin:auto; }.interactive-hero-stage { height:450px; }.interactive-hero-source { width:102px; }.interactive-hero-source img { height:128px; }.interactive-hero-arrow { left:100px; }.live-splat-label { font-size:13px; }.interactive-hero-heading>.micro-label { font-size:7px; }.interactive-hero-status { max-width:none; }.interactive-hero-footer .site-button { font-size:11px; }.showcase-carousel { padding-top:44px; padding-bottom:50px; }.showcase-carousel .hero-art { padding:20px; }.showcase-carousel .hero-preview-footer { flex-wrap:wrap; }.showcase-carousel .hero-carousel-actions { width:100%; }.showcase-carousel .hero-stage { height:360px; }.showcase-carousel .hero-image-card { left:8px; top:140px; width:115px; }.showcase-carousel .hero-image-card img { height:140px; }.showcase-carousel .transformation-arrow { left:126px; top:220px; } }
@media(max-width:460px) { .hero { padding-top:42px; padding-bottom:44px; gap:34px; }.hero h1 { font-size:clamp(35px,11vw,43px); }.interactive-hero-stage { height:370px; }.interactive-hero-source { width:78px; bottom:24px; }.interactive-hero-source img { height:100px; }.interactive-hero-source figcaption,.interactive-hero-source>span { padding:8px 6px; font-size:6px; }.interactive-hero-arrow { left:74px; bottom:104px; width:48px; height:36px; }.live-splat-label { font-size:11px; padding:10px; letter-spacing:.7px; }.interactive-hero-heading>.micro-label { font-size:6px; }.interactive-hero-footer { gap:10px; }.interactive-hero-footer .site-button { font-size:10px; gap:8px; padding:12px; }.interactive-hero-footer h2 { font-size:15px; }.interactive-hero-status { max-width:155px; font-size:9px; }.showcase-carousel .section-heading h2 { font-size:30px; }.showcase-carousel .hero-art { padding:16px 12px; gap:14px; }.showcase-carousel .hero-art .scene-label { font-size:11px; padding:10px; }.showcase-carousel .hero-stage { height:275px; }.showcase-carousel .hero-image-card { left:2px; top:99px; width:80px; }.showcase-carousel .hero-image-card img { height:103px; }.showcase-carousel .transformation-arrow { left:84px; top:160px; width:50px; }.showcase-carousel .hero-thumb-label { font-size:7px; }.showcase-carousel .hero-slide-button img { width:32px; height:32px; }.showcase-carousel .hero-arrow { width:32px; }.showcase-carousel .hero-explore { font-size:10px; padding:11px 9px; }.showcase-carousel .hero-playback-status { font-size:8px; gap:4px; } }