@font-face { font-family:DX Antonio; src:url('assets/ds-exclusive/fonts/Antonio-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:DX Krisha; src:url('assets/ds-exclusive/fonts/KrishaRegular-518Zx.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:DX Montserrat; src:url('assets/ds-exclusive/fonts/Montserrat-Light_0.otf') format('opentype'); font-weight:300; font-display:swap; }
.dx-section { position:relative; isolation:isolate; overflow:hidden; height:100svh; min-height:720px; background:#050505; color:white; scroll-margin-top:74px; }
.dx-backgrounds,.dx-backgrounds img { position:absolute; inset:0; width:100%; height:100%; }
.dx-backgrounds { z-index:-1; }
.dx-backgrounds img { object-fit:cover; }
/* Scale the complete exported composition together; keep the wheel cropped at the left edge. */
.dx-board { position:absolute; top:50%; left:0; width:min(100%,1440px,177.7778svh); aspect-ratio:1920/1080; transform:translateY(-50%); container-type:inline-size; }
.dx-scenes,.dx-scene,.dx-art,.dx-wheel-labels { position:absolute; inset:0; width:100%; height:100%; }
.dx-scene { visibility:hidden; pointer-events:none; }
.dx-art { object-fit:contain; pointer-events:none; }
.dx-graphic { z-index:0; }
.dx-glow { z-index:1; }
.dx-wheel { z-index:2; }
.dx-characters { z-index:3; transform-origin:50% 52%; mask-image:linear-gradient(#000 82%,transparent 100%); }
.dx-copy { position:absolute; left:70%; top:36%; width:25%; z-index:4; color:var(--dx-fg,#fff); }
.dx-copy h2 { font:400 6.1cqw/.95 'DX Krisha',sans-serif; margin:0 0 1.25cqw; white-space:nowrap; letter-spacing:0; }
.dx-copy p { font:300 1.3cqw/1.18 'DX Montserrat',sans-serif; color:var(--dx-muted,#fff); margin:0; }
.dx-wheel-labels { z-index:5; overflow:visible; pointer-events:none; }
.dx-wheel-labels a { pointer-events:auto; cursor:pointer; outline:none; }
.dx-wheel-labels text { font-family:'DX Antonio',sans-serif; font-weight:700; fill:white; transition:opacity .25s; }
.dx-wheel-labels a:hover text,.dx-wheel-labels a:focus-visible text { fill:#fff2cf; text-decoration:underline; }
.dx-controls { position:absolute; left:5.7%; top:43.7%; width:3.5%; height:16%; z-index:6; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
.dx-controls button { display:grid; place-items:center; min-width:44px; min-height:40px; border:0; background:transparent; cursor:pointer; padding:10px; transition:transform .2s,opacity .2s; }
.dx-controls button:hover { transform:translateY(-2px); }
.dx-controls button:last-child:hover { transform:translateY(2px); }
.dx-controls button:disabled { cursor:wait; opacity:.65; }
.dx-controls button:focus-visible { outline:1px solid white; outline-offset:2px; }
.dx-controls svg { width:12px; height:17px; }
.dx-controls .dx-dot { width:6px; height:6px; overflow:hidden; }
.dx-mobile-label { display:none; }
.dx-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:761px) {
 /* Redistribute unused viewport width without resizing the exported layers.
    Independent positional offsets preserve the approved copy and fixed wheel. */
 .dx-board { --dx-content-offset:max(0px,calc((100vw - 100cqw) * .8 + 1.5cqw)); }
 .dx-characters { left:max(0px,calc(46vw - 49cqw)); right:auto; }
 .dx-graphic { left:max(0px,calc(100vw - 96cqw)); right:auto; }
 .dx-copy { left:calc(70% + var(--dx-content-offset)); }
}
@media(min-width:761px) and (max-width:1100px) {
 .dx-copy h2 { margin-bottom:12px; }
 .dx-copy p { font-size:1.35cqw; }
}
@media(max-width:760px) {
 .dx-section { min-height:900px; height:100svh; }
 .dx-board { top:55px; left:0; width:100%; transform:none; height:calc(100% - 150px); aspect-ratio:auto; }
 .dx-wheel,.dx-glow,.dx-wheel-labels { display:none; }
 .dx-art { object-fit:cover; }
 .dx-characters { top:0; left:-35%; width:170%; height:64%; object-fit:contain; }
 .dx-graphic { top:30%; height:70%; opacity:.4; }
 .dx-copy { left:8%; top:67%; width:84%; }
 .dx-copy h2 { font-size:clamp(52px,12vw,78px); white-space:normal; margin-bottom:14px; }
 .dx-copy p { font-size:14px; line-height:1.4; max-width:42ch; }
 .dx-controls { top:52%; left:auto; right:5%; width:44px; height:100px; }
 .dx-mobile-label { position:absolute; left:8%; right:8%; bottom:28px; display:flex; align-items:center; gap:14px; font:300 12px 'DX Montserrat',sans-serif; padding:12px; background:#101010; color:white; border:1px solid #ffffff60; }
 .dx-mobile-select { width:100%; min-width:0; background:#101010; color:white; border:0; padding:8px; font:700 14px 'DX Antonio',sans-serif; }
}
@media(prefers-reduced-motion:reduce) { .dx-controls button,.dx-wheel-labels text { transition:none; } }