.site-intro{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:#101210;color:#f2f4ed;isolation:isolate}
.intro-top{position:absolute;top:30px;left:clamp(20px,5vw,70px);right:clamp(20px,5vw,70px);display:flex;justify-content:space-between;align-items:center;font:11px 'Courier New',monospace;letter-spacing:.12em}
.intro-top img{width:32px;height:32px}.intro-top>span{display:flex;align-items:center;gap:12px}.intro-skip{border:1px solid #45513b;border-radius:30px;color:#dbe1d5;background:transparent;padding:10px 17px;font-size:12px;letter-spacing:0}
.intro-heading{text-align:center;margin:0 20px 32px}.intro-heading p{color:#d5f45a;font:11px 'Courier New',monospace;letter-spacing:.16em;margin-bottom:12px}.intro-heading h2{font-size:clamp(30px,4vw,48px)}
.intro-lane{position:relative;width:100%;padding:24px 0;overflow:hidden}.intro-lane:before,.intro-lane:after{content:'';position:absolute;z-index:2;top:0;bottom:0;width:20%;pointer-events:none}.intro-lane:before{left:0;background:linear-gradient(90deg,#101210,transparent)}.intro-lane:after{right:0;background:linear-gradient(-90deg,#101210,transparent)}
.intro-needle{position:absolute;left:50%;top:0;bottom:0;z-index:3;width:1px;background:#d5f45a55;pointer-events:none}.intro-needle:before{content:'';position:absolute;left:-6px;top:0;border:6px solid transparent;border-top-color:#d5f45a}.intro-needle:after{content:'';position:absolute;left:-6px;bottom:0;border:6px solid transparent;border-bottom-color:#d5f45a}
.intro-reel{display:flex;gap:18px;width:max-content;will-change:transform}.intro-card{width:clamp(155px,20vw,220px);flex:none;position:relative;border:1px solid #ffffff20;border-radius:8px;background:var(--sleeve);padding:16px;color:#101210;overflow:hidden}.intro-card img{width:100%;aspect-ratio:1;margin-bottom:18px}.intro-card small{font:9px 'Courier New',monospace;letter-spacing:.08em}.intro-card strong{display:block;font-size:19px;letter-spacing:-.04em;margin:6px 0}.intro-card span{font:10px 'Courier New',monospace;opacity:.65}.intro-card.selected{outline:2px solid #d5f45a;outline-offset:5px}
.intro-status{text-align:center;margin:28px 20px 0;font:11px 'Courier New',monospace;letter-spacing:.1em;color:#a5ada0;min-height:32px}.intro-status strong{display:block;color:#d5f45a;font-size:15px;margin-bottom:8px}.intro-bottom{position:absolute;bottom:25px;left:0;right:0;text-align:center;font:9px 'Courier New',monospace;letter-spacing:.15em;color:#7c8877}.intro-flight{position:fixed;z-index:1001;pointer-events:none;max-width:none;transform-origin:0 0}.intro-lock{overflow:hidden}.entrance-pending{opacity:0}.reveal-pending{opacity:0;translate:0 25px}.reveal-pending.revealed{opacity:1;translate:0 0;transition:opacity .7s var(--ease),translate .8s var(--ease);transition-delay:var(--reveal-delay,0ms)}
/* Match the app roulette palette: warm blacks, orange needle, tinted dark sleeves. */
.site-intro{color:#f2ece0;background:radial-gradient(circle at 46% 47%,#ff681829,transparent 35%),radial-gradient(circle at 78% 20%,#ff681811,transparent 29%),linear-gradient(180deg,#10100e 0%,#070807 64%,#050605 100%)}
.intro-heading h2{color:#fff7e9}.intro-heading p{color:#78d7f2}.intro-skip{color:#afa79a;border-color:#f7efdf24}.intro-skip:focus-visible{outline-color:#ff6818}.intro-top{color:#fff7e9}
.intro-lane{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.intro-lane:before,.intro-lane:after{display:none}
.intro-needle{background:linear-gradient(180deg,transparent,#ff6818 14%,#f0c17d 50%,#ff6818 86%,transparent);box-shadow:0 0 18px #ff68186b}.intro-needle:before{border-top-color:#ff6818}.intro-needle:after{border-bottom-color:#ff6818}
.intro-card{color:#fff7e9;background:linear-gradient(145deg,color-mix(in srgb,var(--sleeve) 18%,#171713),#090a09 64%);border-color:color-mix(in srgb,var(--sleeve) 40%,#ffffff14);border-radius:4px;box-shadow:0 22px 46px #0008,0 1px 0 #ffffff12 inset}.intro-card small{color:var(--sleeve)}.intro-card span{color:#afa79a;opacity:1}.intro-card.selected{--sleeve:#e1ad45!important;outline-color:#ffd268bd;border-color:#ffd268bd;box-shadow:0 24px 58px #0009,0 0 42px #e1ad4533}
.intro-status{color:#afa79a}.intro-status strong{color:#e1ad45}.intro-bottom{color:#726e67}
.header .brand{gap:12px;letter-spacing:-.6px}.header .brand img{width:64px;height:64px;background:none;border-radius:0}.intro-top img{width:72px;height:72px}.intro-top>span{gap:16px}
@media(max-width:760px){.header .brand img{width:46px;height:46px}.header .brand{gap:8px;font-size:21px}.intro-top img{width:56px;height:56px}}
@media(max-height:580px){.intro-top{top:12px}.intro-heading{margin-bottom:8px}.intro-heading h2{font-size:26px}.intro-card{width:140px;padding:10px}.intro-card img{margin-bottom:8px}.intro-status{margin-top:10px}.intro-bottom{display:none}}
@media(prefers-reduced-motion:reduce){.site-intro,.intro-flight{display:none!important}.entrance-pending,.reveal-pending{opacity:1;translate:none}.reveal-pending.revealed{transition:none}.intro-lock{overflow:auto}}
/* A continuous stage travels from the collection chapter into Roulette. */
.motion .product{height:740svh}.roulette-chapter{text-align:center;margin:35px auto 20px;max-width:900px}.roulette-chapter h2{font-size:34px;margin:14px 0 23px}.motion .roulette-chapter{position:absolute;top:28px;left:0;right:0;margin:0 auto;opacity:0;z-index:6}.roulette-chapter .preview-tabs .active{background:#ff6818;border-color:#ff6818;color:#100b08}.roulette-demo{background:radial-gradient(ellipse at center,#ff681817,transparent 65%),#080908}.roulette-view{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;translate:0 22px;transition:opacity .5s,translate .65s var(--ease);pointer-events:none}.roulette-view.shown{opacity:1;translate:0 0}.demo-brand{position:absolute;left:50%;top:7%;translate:-50% 0;display:flex;align-items:center;gap:14px;color:#fff7e9;font-weight:bold;white-space:nowrap;font-size:clamp(12px,2vw,23px)}.demo-brand img{width:clamp(32px,5vw,64px)}.demo-brand small{display:block;color:#78d7f2;letter-spacing:.13em;font:9px monospace;margin-top:5px}.demo-lane{position:absolute;top:32%;width:100%;overflow:hidden;padding:14px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.demo-reel{display:flex;gap:14px;width:max-content;position:relative}.demo-reel .intro-card{width:clamp(100px,14vw,160px);padding:10px}.demo-reel .intro-card img{margin-bottom:10px}.demo-reel .intro-card strong{font-size:clamp(10px,1.4vw,15px)}.demo-reel .intro-card small{font-size:7px}.demo-caption{position:absolute;bottom:9%;width:100%;text-align:center;font:clamp(8px,1vw,12px) monospace;color:#afa79a}
@media(max-width:760px){.roulette-chapter h2{font-size:27px}.roulette-chapter>.eyebrow{font-size:9px}.motion .roulette-chapter{top:22px}.demo-brand{top:6%}.demo-lane{top:30%}.demo-reel .intro-card{width:100px;padding:8px}.demo-reel .intro-card img{width:64px;margin:0 auto 7px}.demo-caption{bottom:5%;font-size:8px}}
.roulette-result{color:#fff7e9;background:radial-gradient(ellipse at 40% 50%,#23b9ea20,transparent 60%),#070807;overflow:hidden;--sample-progress:0}.sample-result-body{position:absolute;top:32%;left:9%;right:9%;display:grid;grid-template-columns:36% 1fr;gap:6%;align-items:center}.sample-sleeve{aspect-ratio:1;position:relative;border:1px solid #78d7f2;border-radius:3px;background:linear-gradient(135deg,#12465b,#78d7f2 48%,#126385);box-shadow:0 0 30px #23b9ea22}.sample-sleeve img{width:88%;margin:6%;transform:rotate(calc(var(--sample-progress)*180deg))}.sample-sleeve>span{position:absolute;right:5%;bottom:5%;padding:4px 8px;background:#090908;border:1px solid #fff7e9;font:700 clamp(5px,.7vw,8px)/1.1 monospace;text-align:center}.sample-detail>small{color:#78d7f2;font:700 clamp(6px,.85vw,10px) monospace}.sample-detail h3{font-size:clamp(15px,2.5vw,30px);margin:6px 0;letter-spacing:-.04em}.sample-detail>p{color:#afa79a;font-size:clamp(6px,.85vw,10px);margin-bottom:12px}.sample-player{border:1px solid #23b9ea55;border-left:2px solid #23b9ea;background:#070807dd;padding:12px;border-radius:4px}.sample-player>strong{display:block;font-size:clamp(5px,.8vw,10px);overflow-wrap:anywhere}.sample-wave{position:relative;display:flex;align-items:center;gap:2px;height:clamp(25px,5vw,60px);margin:12px 0;border-bottom:1px solid #23b9ea33}.sample-wave i{height:var(--h);flex:1;background:#245263;min-width:1px}.sample-wave i.played{background:#78d7f2}.sample-playhead{position:absolute;top:0;bottom:0;left:calc(var(--sample-progress)*100%);width:1px;background:#fff7e9;box-shadow:0 0 8px #78d7f2}.sample-transport{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:clamp(7px,1.1vw,14px);color:#c6beb0}.sample-time{font:clamp(5px,.75vw,9px) monospace;color:#78d7f2}.sample-actions{display:flex;gap:10px;margin-top:10px}.sample-actions span{flex:1;text-align:center;padding:9px 3px;border:1px solid #ffffff18;border-radius:3px;font-size:clamp(6px,.8vw,10px)}.sample-actions span:first-child{background:linear-gradient(#78d7f2,#1681a4);color:#071013;font-weight:bold}.sample-dust{position:absolute;inset:15% 0 0;overflow:hidden;pointer-events:none}.sample-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#78d7f2;opacity:.35;transform:translate(calc(var(--dx)*var(--sample-progress)),calc(var(--dy)*var(--sample-progress)))}.sample-drawer{position:absolute;bottom:0;left:6%;right:6%;transform:translateY(calc(100% - 25px));transition:transform .75s var(--ease);z-index:3}.drawer-handle{height:25px;width:40%;margin:auto;border:1px solid #23b9ea66;border-bottom:0;border-radius:5px 5px 0 0;display:flex;align-items:center;justify-content:center;gap:12px;background:#090e10;font:700 clamp(6px,.85vw,10px) monospace;color:#fff7e9}.drawer-tray{background:#090e10;border:1px solid #23b9ea88;border-radius:5px 5px 0 0;padding:12px;box-shadow:0 -10px 35px #0009}.drawer-tray>p{font:700 clamp(5px,.65vw,8px) monospace;color:#78d7f2;display:flex;justify-content:space-between;margin-bottom:10px}.drawer-tray>p span{color:#afa79a;font-weight:normal}.drawer-crates{display:flex;gap:8px}.drawer-crates>div{flex:1;display:flex;align-items:center;gap:8px;padding:10px 7px;background:#132027;border:1px solid #23b9ea44;border-radius:4px}.drawer-crates b{color:#78d7f2;font-size:clamp(14px,2vw,22px)}.drawer-crates span{font-size:clamp(6px,.85vw,10px);font-weight:700}.drawer-crates small{display:block;color:#afa79a;font-size:clamp(5px,.65vw,8px);margin-top:4px;font-weight:normal}.with-drawer.shown .sample-drawer{transform:translateY(0)}
@media(max-width:760px){.sample-result-body{left:5%;right:5%;top:29%;gap:4%}.sample-player{padding:6px}.sample-wave{margin:7px 0;gap:1px}.sample-detail>p{margin-bottom:6px}.sample-actions{margin-top:5px;gap:5px}.sample-actions span{padding:5px 2px}.drawer-tray{padding:7px}.drawer-crates{gap:4px}.drawer-crates>div{gap:4px;padding:6px 3px}.drawer-tray>p{margin-bottom:6px}.sample-dust i{width:2px;height:2px}}
@media(prefers-reduced-motion:reduce){.sample-dust{display:none}.sample-drawer{transition:none}.sample-sleeve img{transform:none}}
.screen-gallery:has(.roulette-demo.active){aspect-ratio:16/9}.roulette-demo video{object-fit:contain;background:#070807}
.drawer-focus>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.drawer-focus .drawer-dim{filter:grayscale(1) brightness(.28)}.drawer-focus .drawer-clear{clip-path:polygon(41.8% 70.8%,58.2% 70.8%,58.2% 76.4%,88.3% 76.4%,88.3% 100%,11.7% 100%,11.7% 76.4%,41.8% 76.4%)}
[data-theme="light"] .header .brand img{filter:invert(1) hue-rotate(180deg)}
.preview-description{font-size:20px;line-height:1.45;max-width:760px;min-height:58px;margin:16px auto 0;color:var(--ink);text-wrap:balance}.motion .product-stage{width:min(850px,calc((100svh - 325px)*1.3333))}
@media(max-width:760px){.preview-description{font-size:16px;line-height:1.45;min-height:70px;margin-top:14px;padding-inline:4px}.motion .product-stage{width:min(100%,calc((100svh - 345px)*1.3333))}}

@media(max-width:760px){.roulette-chapter .preview-description{min-height:0}}

/* Prepare the intro behind a lightweight, compositor-only vinyl spinner. */
.intro-loader{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:22px;background:#080908;pointer-events:none}
.intro-loader img{width:120px;height:120px;animation:loading-vinyl 1.8s linear infinite;will-change:transform}
.intro-loader p{font:12px 'Courier New',monospace;letter-spacing:.14em;color:#afa79a}
.site-intro .intro-top{z-index:6}
.site-intro>.intro-heading,.site-intro>.intro-lane,.site-intro>.intro-status,.site-intro>.intro-bottom{transition:opacity .3s ease}
.intro-loading>.intro-heading,.intro-loading>.intro-lane,.intro-loading>.intro-status,.intro-loading>.intro-bottom{opacity:0}
@keyframes loading-vinyl{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.intro-loader img{animation:none}}
