*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}html{background:#f5f6f9;color-scheme:only light}body{background:#000;display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#121416;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid #583dff;outline-offset:4px}button:disabled{cursor:wait;opacity:.6}#app{width:min(100vw,calc(100dvh * 402 / 874),440px);max-width:min(100vw,calc(100dvh * 402 / 874));aspect-ratio:402/874;position:relative;background:#f5f6f9;overflow:hidden}#screen{position:absolute;left:0;top:0;width:402px;height:874px;transform-origin:top left;overflow:hidden;--glow:#ffb68d;--h:874px;--top-trim:0px;--safe-top:0px;--safe-bottom:0px}.ambient{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1s}.ambient i{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--glow);filter:blur(68px);opacity:.58;right:-100px;top:-100px;transition:background 1.4s;animation:drift 34s ease-in-out infinite alternate}.ambient i+ i{width:230px;height:350px;right:-130px;top:200px;opacity:.27;animation:drift2 42s ease-in-out infinite alternate}@keyframes drift{to{transform:translate(-200px,130px) scale(1.16)}}@keyframes drift2{to{transform:translate(-220px,260px) rotate(30deg)}}#scene{position:absolute;inset:0;pointer-events:none}#scene canvas{display:block;width:100%;height:100%}#shadow,#shadow-incoming{position:absolute;width:250px;height:220px;left:76px;top:198px;background:transparent center/100% 100% no-repeat;opacity:.8;pointer-events:none;}#card-touch{position:absolute;z-index:3;background:transparent;touch-action:none;border-radius:24px;cursor:grab}#card-touch:active{cursor:grabbing}header{position:absolute;z-index:6;top:max(var(--safe-top),calc(var(--h)*.071));left:16px;right:16px;height:44px;display:flex;align-items:center;justify-content:center}#back{display:grid;place-items:center;padding:0;line-height:0;position:absolute;left:0;width:44px;height:44px;background:linear-gradient(125deg,#ffffff20,#ffffffcc);border-radius:50%;box-shadow:inset 1px 1px 1px #fff}#back svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#progress{width:72px;height:10px;border-radius:10px;background:#18121d24;box-shadow:inset 0 3px 6px #5e3b5b13;overflow:hidden;transition:opacity .35s}#progress i{display:block;height:100%;width:0;background:#ff5000;border-radius:10px;transition:width .7s cubic-bezier(.22,.8,.2,1)}#motion{position:absolute;right:0;width:34px;height:34px;border-radius:50%;background:#ffffff80;color:#777a82}#content{position:absolute;inset:0;pointer-events:none}#content>*{pointer-events:auto}.intro-copy{position:absolute;left:40px;right:25px;top:calc(var(--h)*.453 - var(--top-trim))}h1{font-size:34px;line-height:40px;letter-spacing:-.7px;margin:0 0 25px;font-weight:700}.benefits{display:grid;gap:19px;font-size:17px;line-height:20px}.benefit{display:flex;align-items:center;gap:12px}.benefit svg{width:29px;height:29px;flex:none;stroke:#373735;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.benefit svg .orange{stroke:#ff5000}.caption{position:absolute;top:calc(var(--h)*.477 - var(--top-trim));left:15px;right:15px;text-align:center;color:#7b7e85;font-size:17px;line-height:20px;pointer-events:none!important}.caption.intro{top:calc(var(--h)*.394 - var(--top-trim));font-size:13px;line-height:16px}.configuration{position:absolute;left:0;right:0;top:calc(var(--h)*.588 - var(--top-trim));text-align:center}.configuration h2{font-size:20px;line-height:24px;margin:0 0 17px;font-weight:700;letter-spacing:-.35px}.configuration.name{top:calc(var(--h)*.592 - var(--top-trim))}.configuration.back-options{top:calc(var(--h)*.637 - var(--top-trim))}.wheel{position:relative;width:100%;height:60px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.wheel.vertical{height:158px;mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}.wheel-item{position:absolute;white-space:nowrap;left:50%;top:50%;background:none;padding:16px 0;font-size:17px;line-height:20px;font-weight:500;transform:translate(-50%,-50%);will-change:transform,opacity}.wheel.design-wheel{margin-bottom:12px}.wheel.design-wheel .wheel-item{font-size:17px}.wheel-frame{position:absolute;left:50%;top:50%;height:56px;border:2.5px solid transparent;background:linear-gradient(110deg,#efedf8,#f5f6f9) padding-box,linear-gradient(110deg,#9384f0,#3900ff) border-box;border-radius:18px;transform:translate(-50%,-50%);pointer-events:none;will-change:width;transition:height .4s cubic-bezier(.2,1.7,.3,1),transform .4s cubic-bezier(.2,1.7,.3,1)}.wheel.holding .wheel-frame{height:60px;transform:translate(-50%,-50%) scaleX(1.04)}.wheel.material-wheel{margin-top:10px}.wheel.material-wheel .wheel-frame{background:linear-gradient(110deg,#efedf8,#f5f6f9) padding-box,linear-gradient(110deg,#9384f0,#3900ff) border-box}footer{position:absolute;left:20px;right:20px;bottom:max(calc(var(--safe-bottom) + 16px),calc(var(--h)*.062));z-index:5;text-align:center}.primary,.wallet{display:block;width:100%;min-height:56px;padding:17px 15px;border-radius:21px;background:#ff5000;color:white;font-size:17px;line-height:20px;font-weight:500}.secondary{display:block;width:100%;padding:20px 0 0;margin-top:8px;background:none;font-size:17px;line-height:20px;font-weight:500}.price{font-size:13px;line-height:16px;margin-top:9px}.pressable{transition:transform .3s cubic-bezier(.2,1.7,.3,1),filter .2s}.pressable:active{transform:scale(.965);filter:brightness(.96)}footer.intro-footer,footer.success-footer{bottom:max(calc(var(--safe-bottom) + 23px),calc(var(--h)*.083))}.panel{position:absolute;left:20px;right:20px;top:calc(var(--h)*.311 - var(--top-trim))}.panel h2{font-size:20px;line-height:24px;margin:0 0 12px;letter-spacing:-.3px}.panel .subtitle{font-size:17px;line-height:20px;margin:0 0 29px}.review-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.review-row{min-width:0;display:flex;align-items:center;text-align:left;gap:12px;width:100%;background:#e9eaf1b3;border-radius:21px;min-height:56px;padding:10px 20px}.review-row .values{min-width:0;flex:1}.label{font-size:11px;line-height:13px;color:#7b7e85;display:block;margin-bottom:3px}.value{font-size:17px;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}.chevron{width:8px;height:8px;border-top:1.5px solid #7b7e85;border-right:1.5px solid #7b7e85;transform:rotate(45deg);margin-right:6px}.delivery{font-size:15px;line-height:18px;margin:13px 16px 0}.limited{font-size:11px;color:#7b7e85;margin:5px 20px -8px}.pay-panel h2{margin-bottom:18px}.account{padding:21px 20px;background:#fff;border-radius:30px;display:flex;align-items:center;width:100%;text-align:left;gap:16px}.account-icon{display:block;flex:none;width:44px;height:44px;object-fit:contain}.account .balance{font-size:20px;line-height:24px;font-weight:500}.account .account-name{font-size:15px;line-height:18px;margin-top:5px}.account .chevron{margin-left:auto;transform:rotate(135deg)}.bill{margin-top:16px;background:#fff;border-radius:30px;padding:10px 20px}.bill-row{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:60px;font-size:17px;line-height:20px}.bill-row span:last-child{color:#7b7e85}.success-panel{text-align:center;top:calc(var(--h)*.303 - var(--top-trim))}.success-panel h2{margin-bottom:16px}.success-panel .subtitle{font-size:17px;line-height:23px;margin:0 7px 31px}.success-panel .bill{text-align:left}.wallet{background:#1e1e1e;display:flex;justify-content:center;align-items:center;gap:8px}.wallet svg{width:25px;height:25px}.wallet-caption{font-size:15px;line-height:18px;color:#7b7e85;margin:0 0 17px}.status-tag{display:inline-block;font-size:13px;background:#e0f5e9;color:#128b54;padding:8px 14px;border-radius:20px;margin-bottom:12px}#face{position:absolute;z-index:12;top:10px;left:126px;width:150px;height:150px;background:#000;border-radius:45px;padding:35px;box-shadow:0 15px 50px #0002;animation:face-in .35s both}#face svg{width:80px;height:80px;stroke:#a5ef8d;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}#face small{position:absolute;bottom:12px;left:0;right:0;font-size:9px;text-align:center;color:#a5ef8d}#face[hidden]{display:none}@keyframes face-in{from{opacity:0;transform:translateY(-25px) scale(.8)}}#toast{position:absolute;z-index:30;left:30px;right:30px;bottom:150px;border-radius:18px;background:#24242bed;color:white;text-align:center;font-size:13px;line-height:18px;padding:14px;opacity:0;pointer-events:none;transition:opacity .25s}#toast.visible{opacity:1}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#f5f6f9;z-index:40;color:#777;font-size:15px}dialog{position:absolute;top:auto;bottom:12px;width:calc(100% - 24px);max-height:80%;margin:0 auto;padding:28px 22px;border:0;border-radius:30px;background:#fff;color:#121416;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#17121f40;backdrop-filter:blur(4px)}.sheet-close{position:absolute;right:14px;top:12px;border-radius:50%;width:30px;height:30px;background:#f0f0f3;font-size:23px;color:#777}dialog h2{font-size:22px;line-height:26px;margin:10px 20px 16px 0}dialog p{font-size:15px;line-height:21px;color:#777}dialog input{width:100%;padding:15px;border:1px solid #ccc;border-radius:14px;margin:8px 0 22px;font-size:16px}dialog label{font-size:13px}body.reduced *{animation-duration:.01ms!important;transition-duration:.01ms!important}@media(prefers-reduced-motion:reduce){.ambient i{animation:none}}


.wheel-item:focus-visible{outline:none}

/* The OS reserves the status-bar area in default standalone mode. */
html.phone-layout,html.phone-layout body{background:#f5f6f9}
@media(max-width:600px),(display-mode:standalone){html,body{background:#f5f6f9;color-scheme:only light}}
.configuration .wheel.material-wheel{margin-top:0}
.configuration .wheel.design-wheel{margin:20px 0 0}
.swatch-wheel{height:68px}
.swatch-wheel .wheel-item{width:50px;height:50px;padding:0;border-radius:12px;background:linear-gradient(135deg,#ffffff44,transparent 45%,#00000025),var(--swatch-color);box-shadow:inset 0 0 0 1px #00000008}
.swatch-wheel .wheel-item.silver-swatch{background:linear-gradient(135deg,#f0f1f3,#d5d8de 45%,#a6adb9)}
.swatch-wheel .wheel-item.silver-swatch:after{content:'';position:absolute;left:8px;right:8px;top:9px;height:4px;border-radius:2px;background:var(--swatch-logo)}
.swatch-wheel .wheel-item.skull-swatch{background: url('./assets/skull.png') center/150% auto no-repeat,#28282e}
.swatch-wheel .wheel-frame{height:58px;border-radius:16px;background:linear-gradient(#f5f6f9,#f5f6f9) padding-box,linear-gradient(110deg,#9384f0,#3900ff) border-box}
.swatch-wheel.holding .wheel-frame{height:62px}

/* Studio depth: caption, projected shadow, card, then interactive controls. */
#content .caption{z-index:0}
#shadow,#shadow-incoming{z-index:1}
#scene{z-index:2}
#content .configuration,#content .panel,#content .intro-copy{z-index:4}

/* Static toggles (material, swatches, back): options stay in place, the frame slides. */
.toggle{position:relative;display:flex;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.toggle-row{position:relative;display:flex;align-items:center;gap:16px;height:60px}
.toggle-item{position:relative;z-index:1;background:none;padding:16px 22px;font-size:17px;line-height:20px;font-weight:500;color:#8a8d94;white-space:nowrap;transition:color .25s ease}
.toggle-item[aria-selected="true"]{color:#121416}
.toggle-item:focus-visible{outline:none}
.toggle .toggle-frame{left:0;top:50%;height:56px;transform:translateY(-50%);transition:transform .45s cubic-bezier(.2,1.35,.3,1),width .45s cubic-bezier(.2,1.35,.3,1)}
.configuration .material-toggle{margin-top:0}
.configuration .design-toggle{margin:20px 0 0}
.swatch-toggle .toggle-row{gap:18px;height:68px}
.swatch-toggle .toggle-item{width:50px;height:50px;padding:0;border-radius:50%;background:linear-gradient(135deg,#ffffff44,transparent 45%,#00000025),var(--swatch-color);box-shadow:inset 0 0 0 1px #00000008}
.swatch-toggle .toggle-item.silver-swatch{background:linear-gradient(135deg,#f0f1f3,#d5d8de 45%,#a6adb9)}
.swatch-toggle .toggle-item.skull-swatch{background:url('./assets/skull.png') center/150% auto no-repeat,#28282e}
.swatch-toggle .toggle-frame{height:58px;border-radius:50%;background:linear-gradient(#f5f6f9,#f5f6f9) padding-box,linear-gradient(110deg,#9384f0,#3900ff) border-box}
.swatch-badge{position:absolute;right:-6px;top:-6px;width:19px;height:19px}
footer .price{margin:0 0 12px}
.caption b{font-weight:600;color:#121416}
.benefit svg.ic{stroke:none;width:31px;height:30px}

/* Intro: info block 20px higher, 20px under the title, 8px between benefits (all sizes). */
#content .intro-copy{top:calc(var(--h)*.453 - var(--top-trim) - 20px)}
#content .intro-copy h1{margin-bottom:20px}
#content .benefits{gap:8px}

/* Back button: optically center the chevron. */
#back{padding-right:3px}

/* Toggle v2: text toggles touch (gap 0); frame lifts, slides, then settles with a bounce like the name wheel. */
.toggle-row{gap:0}
.toggle .toggle-frame{transform:none;translate:var(--x,0) -50%;scale:1;transition:translate .38s cubic-bezier(.3,.8,.25,1),width .38s cubic-bezier(.3,.8,.25,1),height .45s cubic-bezier(.2,1.7,.3,1),scale .45s cubic-bezier(.2,1.7,.3,1)}
.toggle.lifting .toggle-frame{height:60px;scale:1.04 1}
/* Swatches: no sliding frame; each ring grows out from under its circle with a bounce. */
.swatch-toggle .toggle-row{gap:12px}
.swatch-toggle .toggle-frame{display:none}
.swatch-toggle .toggle-item{background:none;box-shadow:none;overflow:visible}
.swatch-toggle .toggle-item::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2.5px solid transparent;background:linear-gradient(#f5f6f9,#f5f6f9) padding-box,linear-gradient(110deg,#9384f0,#3900ff) border-box;z-index:0;scale:.8;opacity:0;transition:scale .2s ease,opacity .15s ease}
.swatch-toggle .toggle-item[aria-selected="true"]::before{scale:1;opacity:1;transition:scale .5s cubic-bezier(.2,1.8,.3,1),opacity .12s ease}
.swatch-toggle .toggle-item .face{position:absolute;inset:0;z-index:1;border-radius:50%;background:linear-gradient(135deg,#ffffff44,transparent 45%,#00000025),var(--swatch-color);box-shadow:inset 0 0 0 1px #00000008}
.swatch-toggle .toggle-item.silver-swatch .face{background:linear-gradient(135deg,#f0f1f3,#d5d8de 45%,#a6adb9)}
.swatch-toggle .toggle-item.skull-swatch .face{background:url('./assets/skull.png') center/150% auto no-repeat,#28282e}
.swatch-badge{right:-4px;top:-4px;z-index:2}
.swatch-toggle .toggle-item.silver-swatch,.swatch-toggle .toggle-item.skull-swatch{background:none}

/* Progress track: #171C26 gradient 20% -> 6%. */
#progress{background:linear-gradient(180deg,rgba(23,28,38,.2),rgba(23,28,38,.06))}

/* Shadow only below the card: transparent above the card's middle, fading in downwards. */
#shadow,#shadow-incoming{-webkit-mask-image:linear-gradient(to bottom,transparent var(--ms,50%),#000 calc(var(--ms,50%) + var(--mf,20%)));mask-image:linear-gradient(to bottom,transparent var(--ms,50%),#000 calc(var(--ms,50%) + var(--mf,20%)))}

/* Swatch ring a bit larger. */
.swatch-toggle .toggle-item::before{inset:-6px}

/* Pay from: static, not a picker in this prototype. */
.account{cursor:default}

/* Studio gradient, built like the Figma frame (402 wide):
   1) glow circle 500px at (151,-250), blur 400, 30%, tinted per card;
   2) background-colored circle 610px at (-208,0), blur 200, 100%, tames the glow's spread.
   Blur is approximated with radial masks: cheap on phones and the color still transitions. */
.ambient{display:block;z-index:0}
.ambient i{animation:none;filter:none;border-radius:0;transform:none;right:auto;transition:background-color 1.2s ease}
.ambient i:first-child{left:-249px;top:-650px;width:1300px;height:1300px;background:var(--glow);opacity:.3;
 -webkit-mask-image:radial-gradient(circle closest-side,rgba(0,0,0,.78) 0,rgba(0,0,0,.65) 23%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.31) 54%,rgba(0,0,0,.16) 69%,rgba(0,0,0,.06) 85%,transparent 100%);
 mask-image:radial-gradient(circle closest-side,rgba(0,0,0,.78) 0,rgba(0,0,0,.65) 23%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.31) 54%,rgba(0,0,0,.16) 69%,rgba(0,0,0,.06) 85%,transparent 100%)}
.ambient i+i{left:-408px;top:-200px;width:1010px;height:1010px;background:#f5f6f9;opacity:1;
 -webkit-mask-image:radial-gradient(circle closest-side,#000 0,#000 30%,rgba(0,0,0,.92) 41%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.08) 80%,transparent 100%);
 mask-image:radial-gradient(circle closest-side,#000 0,#000 30%,rgba(0,0,0,.92) 41%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.08) 80%,transparent 100%)}
/* Review address row is part of a separate flow: shown, not tappable. */
.review-row.static{cursor:default}

/* Keep the reference phone proportions; center the preview when space is limited. */
html:not(.phone-layout) #app{border-radius:60px}

/* Studio gradient hidden for now (clips against the iOS status bar). Remove this line to bring it back. */
.ambient{display:none!important}

/* Mobile fills the available viewport; only desktop keeps a fixed phone ratio. */
.phone-layout body{align-items:start}
.phone-layout #app{width:100vw;max-width:none;height:100dvh;aspect-ratio:auto}
.phone-layout header{top:max(12px,var(--safe-top))}
.phone-layout footer{bottom:calc(var(--safe-bottom) + 16px)}
.phone-layout footer.intro-footer,.phone-layout footer.success-footer{bottom:calc(var(--safe-bottom) + 23px)}
.phone-layout #face{top:max(10px,var(--safe-top))}
.compact .configuration{top:calc(var(--h)*.54 - var(--top-trim))}.compact .configuration.name{top:calc(var(--h)*.54 - var(--top-trim))}.compact .configuration.back-options{top:calc(var(--h)*.61 - var(--top-trim))}.compact .configuration h2{margin-bottom:10px}.compact .wheel.vertical{height:144px}.compact .review-list{gap:10px}.compact .review-row{min-height:50px;padding-top:7px;padding-bottom:7px}.compact .panel .subtitle{margin-bottom:18px}.compact .bill-row{min-height:50px}.compact .benefits{gap:12px}.compact h1{margin-bottom:19px}
@media(max-height:660px){.phone-layout .benefits{gap:10px}.phone-layout .intro-copy h1{margin-bottom:16px}.phone-layout .review-list{gap:10px}.phone-layout .panel .subtitle{margin-bottom:16px}.phone-layout .review-row{min-height:50px}.phone-layout .bill-row{min-height:48px}}