:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #01020e; }
body { min-height: 100%; margin: 0; background: radial-gradient(circle at 50% 15%, #0e1d4d, #01020e 60%); }
button { font: inherit; }
.design-stage { position: relative; width: min(100%, 750px); margin: 0 auto; overflow: hidden; line-height: 0; box-shadow: 0 0 52px rgba(73, 133, 255, .2); }
.master-design { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* These are real segmented controls placed over the two button bars in the supplied 3750×27455 artwork. */
.download-switch { position: absolute; z-index: 1; left: 13.2%; display: grid; grid-template-columns: 1fr 1fr; width: 73.65%; height: 1.76%; overflow: hidden; border: 1px solid rgba(125, 165, 245, .48); border-radius: 999px; background: linear-gradient(180deg, #111c41, #020713 65%); box-shadow: inset 0 1px 2px rgba(188, 219, 255, .35), inset 0 -2px 5px rgba(0, 0, 0, .86); isolation: isolate; }
.download-switch--top { top: 20.78%; }
.download-switch--bottom { top: 94.72%; height: 1.73%; }
.active-track { position: absolute; z-index: -1; top: 4%; bottom: 4%; left: .8%; width: 49.2%; border-radius: inherit; background: linear-gradient(145deg, #4d8dff 0%, #1250ed 50%, #1d31bc 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 2px 7px rgba(15, 71, 255, .5); transform: translateX(0); transition: transform 260ms cubic-bezier(.2,.8,.2,1), background 220ms ease; }
.download-switch[data-selected="android"] .active-track { transform: translateX(101.6%); }
.platform-choice { position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6%; padding: 0 4%; border: 0; color: #75aeff; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color 200ms ease, transform 120ms ease; }
.platform-choice:active { transform: scale(.97); }.platform-choice:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.platform-icon { position: relative; flex: 0 0 auto; width: 18%; height: 66%; }.icon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 180ms ease; }.icon--white { opacity: 0; }
.platform-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; line-height: 1.1; white-space: nowrap; }.platform-copy b { font: 700 clamp(9px, 3.05vw, 23px)/1.05 Arial, sans-serif; letter-spacing: -.03em; }.platform-copy small { margin-top: 5%; color: currentColor; font: 400 clamp(4.5px, 1.35vw, 10px)/1 Arial, sans-serif; }
.download-switch[data-selected="ios"] .platform-choice[data-platform="ios"], .download-switch[data-selected="android"] .platform-choice[data-platform="android"] { color: white; }.download-switch[data-selected="ios"] .platform-choice[data-platform="ios"] .icon--blue, .download-switch[data-selected="android"] .platform-choice[data-platform="android"] .icon--blue { opacity: 0; }.download-switch[data-selected="ios"] .platform-choice[data-platform="ios"] .icon--white, .download-switch[data-selected="android"] .platform-choice[data-platform="android"] .icon--white { opacity: 1; }
@media (min-width: 751px) { body { padding: 22px 0; }.design-stage { border: 1px solid rgba(136, 190, 255, .24); border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }