/* Dorax Finance — the welcome of a new account in the v6 look (v436, features/phone/r6-welcome.js; the canvas board "Onboarding-V6" and its steps).
   One dark page over the whole screen: the step's light and the slow rays behind its drawing (the medal of light, the coin, the piggy in its ring,
   the dream in its medal, the flag on it), the words, what is asked, and at the thumb the dots and one lime button. The preview lies over the app
   (#r6w-layer). Every movement is still with reduced motion. */
#r6w-layer { position: fixed; inset: 0; z-index: 400; }
.r6w { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden; background: #070808; color: #EFF1F6; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Inter, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; --r6w-kb: 0px; --r6w-ease: cubic-bezier(.2, .9, .25, 1); }
.r6w :is(button, input) { -webkit-tap-highlight-color: transparent; }
.r6w :is(button, input):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
.r6w h1:focus { outline: none; }
/* ---------- the ground: the green fog on the welcome; the step's light and the rays behind its drawing ---------- */
.r6w-fog { position: absolute; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; }
.r6w-fog::before { content: ""; position: absolute; inset: -90px; filter: blur(44px); background: radial-gradient(60% 26% at 22% 8%, #56897F, rgba(86, 137, 127, 0)), radial-gradient(90% 12% at 50% 62%, #040A09, rgba(4, 10, 9, 0)), radial-gradient(50% 24% at 100% 46%, #3F7A70, rgba(63, 122, 112, 0)), radial-gradient(60% 22% at 4% 96%, #2B5951, rgba(43, 89, 81, 0)), linear-gradient(180deg, #0E2B26 0%, #081A17 40%, #070808 70%, #0A2421 100%); }
.r6w-glow { position: absolute; left: 50%; top: -60px; width: 480px; height: 480px; margin-left: -240px; border-radius: 50%; pointer-events: none; transition: background .8s ease; }
.r6w-portada .r6w-glow { top: 40px; }
.r6w-rays { position: absolute; left: 50%; top: -25px; width: 410px; height: 410px; margin-left: -205px; opacity: .55; pointer-events: none; }
.r6w-portada .r6w-rays { top: 75px; opacity: 1; } .r6w-listo .r6w-rays { opacity: 1; }
.r6w-rays svg { display: block; width: 410px; height: 410px; animation: r6w-spin 90s linear infinite; }
@keyframes r6w-spin { to { transform: rotate(360deg); } }
/* ---------- the way back (a step back; the preview's welcome has its ×) ---------- */
.r6w-back { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 20; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #EFF1F6; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
.r6w-back svg { stroke-width: 2.4; } .r6w-x { left: auto; right: 16px; } .r6w-x svg { stroke-width: 2.2; }
.r6w-back:active { transform: scale(.965); }
/* ---------- the page: the drawing, the words, what is asked; it scrolls on a short phone, the way on stays at the thumb ---------- */
.r6w-scr { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(132px + var(--r6w-kb)); scrollbar-width: none; }
.r6w-scr::-webkit-scrollbar { display: none; }
.r6w-hero { position: relative; flex: none; display: block; }
.r6w-words { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; text-align: center; }
.r6w-words h1 { margin: 0; color: #EFF1F6; font-size: 31px; line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.r6w-words p { margin: 14px 0 0; max-width: 300px; color: rgba(239, 241, 246, .72); font-size: 16.5px; line-height: 1.45; }
.r6w-words > small { margin-top: 10px; color: rgba(239, 241, 246, .6); font-size: 15px; }
.r6w-wave { display: inline-block; transform-origin: 70% 80%; animation: r6w-wave 1.2s ease .2s both; }
@keyframes r6w-wave { 20% { transform: rotate(16deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(14deg); } 80% { transform: rotate(-4deg); } }
.r6w-hint { color: rgba(239, 241, 246, .38); font-size: 13.5px; }
/* ---------- the welcome: the medal of light ---------- */
.r6w-portada .r6w-scr { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
.r6w-logo { flex: none; display: block; width: 78px; height: 23px; margin-bottom: 28px; color: #E2F6D5; }
.r6w-logo :is(svg, img) { display: block; width: 78px; height: 23px; }
.r6w-sunmedal { width: min(220px, 56vw); aspect-ratio: 200 / 236; margin-bottom: 30px; }
.r6w-medal { display: block; width: 100%; height: 100%; overflow: visible; }
.r6w-sunup { animation: r6w-sunup 1.4s cubic-bezier(.16, 1, .3, 1) .25s both; }
@keyframes r6w-sunup { from { transform: translateY(46px); } to { transform: none; } }
.r6w-breathe { animation: r6w-breathe 5s ease-in-out infinite; }
@keyframes r6w-breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.r6w-portada .r6w-words h1 { font-size: 34px; letter-spacing: -.035em; line-height: 1.1; }
.r6w-gets { flex: none; display: flex; justify-content: center; gap: clamp(8px, 4vw, 22px); width: 100%; max-width: 320px; margin: 34px 0 0; padding: 0; list-style: none; }
.r6w-gets li { flex: 0 1 92px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.r6w-gi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(159, 209, 130, .12); box-shadow: inset 0 0 0 1px rgba(159, 209, 130, .28); color: #9FD182; }
.r6w-gi svg { stroke-width: 2; }
.r6w-gets small { color: rgba(239, 241, 246, .66); font-size: 12.5px; line-height: 1.3; }
/* ---------- your name: the coin ---------- */
.r6w-coinw { width: 180px; height: 180px; margin: 28px 0 28px; perspective: 800px; }
.r6w-coin { position: relative; display: block; width: 180px; height: 180px; }
.r6w-coin.flip { animation: r6w-flip .9s cubic-bezier(.2, .85, .25, 1) both; }
@keyframes r6w-flip { 0% { transform: rotateY(-180deg) scale(.9); } 70% { transform: rotateY(8deg) scale(1.05); } 100% { transform: none; } }
.r6w-coin svg { display: block; width: 180px; height: 180px; overflow: visible; }
.r6w-ini { position: absolute; inset: 0; display: grid; place-items: center; color: #101212; font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -.04em; opacity: .86; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.r6w-ini.none { opacity: .3; }
.r6w-name { flex: none; width: 100%; max-width: 310px; margin-top: 28px; }
.r6w-name input { box-sizing: border-box; display: block; width: 100%; height: 64px; margin: 0; padding: 0 16px; border: 0; border-radius: 20px; background: rgba(239, 241, 246, .05); box-shadow: inset 0 0 0 1.5px rgba(239, 241, 246, .14); color: #EFF1F6; font: inherit; font-size: 28px; font-weight: 500; letter-spacing: -.02em; text-align: center; caret-color: #9FD182; transition: box-shadow .25s ease; -webkit-appearance: none; appearance: none; }
.r6w-name input::placeholder { color: rgba(239, 241, 246, .32); }
.r6w-name input:focus { outline: none; box-shadow: inset 0 0 0 1.5px #9FD182; }
.r6w-name input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF8A80; }
.r6w-err { margin: 10px 0 0; color: #FF8A80; font-size: 14px; text-align: center; }
/* ---------- your numbers: the piggy in its ring ---------- */
.r6w-pig { width: min(240px, 31vh); aspect-ratio: 1; }
.r6w-ring { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.r6w-arc { transition: stroke-dasharray .9s cubic-bezier(.2, .85, .25, 1), stroke-opacity .3s ease; }
.r6w-piggy { position: absolute; left: 13.3%; top: 11.7%; display: block; width: 73.3%; height: 73.3%; transform-origin: 50% 100%; }
.r6w-piggy .dxi { display: block; width: 100%; height: 100%; }
.r6w-piggy.go { animation: r6w-hop .5s cubic-bezier(.3, 1.5, .5, 1) .6s both; }
@keyframes r6w-hop { 30% { transform: scale(1.06, .94); } 60% { transform: translateY(-6px) scale(.98, 1.03); } }
.r6w-drop { position: absolute; left: 50%; top: 18.7%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FCE6AE, #F7D27A 55%, #C9A24E); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 3px 8px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; }
.r6w-drop.go { animation: r6w-drop .7s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes r6w-drop { 0% { opacity: 0; transform: translateY(-80px) rotateY(0); } 15% { opacity: 1; } 85% { opacity: 1; transform: translateY(0) rotateY(540deg); } 100% { opacity: 0; transform: translateY(6px) rotateY(540deg); } }
.r6w-free { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; margin: 12px 0 14px; text-align: center; }
.r6w-days { display: flex; flex-direction: column; align-items: center; animation: r6w-in .55s var(--r6w-ease) both; }
.r6w-days > span { display: flex; align-items: baseline; gap: 8px; }
.r6w-days b { color: #9FD182; font-size: 34px; line-height: 1; font-weight: 300; letter-spacing: -.04em; }
.r6w-days > span > span { font-size: 15px; font-weight: 500; }
.r6w-days small { margin-top: 5px; color: rgba(239, 241, 246, .6); font-size: 13.5px; }
.r6w-numeros .r6w-words h1, .r6w-meta .r6w-words h1 { font-size: 27px; line-height: 1.15; }
.r6w-ctl { flex: none; display: flex; flex-direction: column; width: 100%; max-width: 360px; margin-top: 22px; }
.r6w-sl + .r6w-sl { margin-top: 12px; }
.r6w-slh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.r6w-slh small { color: rgba(239, 241, 246, .66); font-size: 15px; }
.r6w-slh b { color: #EFF1F6; font-size: 28px; font-weight: 300; letter-spacing: -.035em; }
.r6w-slw { position: relative; height: 44px; }
.r6w-track, .r6w-fill { position: absolute; left: 0; top: 18px; height: 8px; border-radius: 4px; pointer-events: none; }
.r6w-track { right: 0; background: rgba(239, 241, 246, .09); }
.r6w-fill { background: linear-gradient(90deg, #6AAFA2, #9FD182); transition: width .2s ease; }
.r6w-range { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.r6w-range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.r6w-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 7px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFFFFF, #E8EBEF 60%, #C9CDD3); box-shadow: 0 0 0 6px rgba(159, 209, 130, .18), 0 6px 14px rgba(0, 0, 0, .6); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease; }
.r6w-range:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 11px rgba(159, 209, 130, .2), 0 6px 14px rgba(0, 0, 0, .6); }
.r6w-range::-moz-range-track { height: 44px; background: transparent; }
.r6w-range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #F2F4F6; box-shadow: 0 0 0 6px rgba(159, 209, 130, .18), 0 6px 14px rgba(0, 0, 0, .6); }
.r6w-range:focus-visible { outline-offset: 0; border-radius: 22px; }
.r6w-avg { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.r6w-avg small { color: rgba(239, 241, 246, .45); font-size: 13px; }
.r6w-i { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; color: rgba(239, 241, 246, .55); }
.r6w-i svg { stroke-width: 2; }
.r6w-note { position: absolute; left: 0; right: 0; bottom: 46px; z-index: 5; padding: 12px 14px; border-radius: 16px; background: rgba(26, 29, 29, .97); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14), 0 12px 30px rgba(0, 0, 0, .6); color: rgba(239, 241, 246, .78); font-size: 12.5px; line-height: 1.45; text-align: left; animation: r6w-in .55s var(--r6w-ease) both; }
/* ---------- your first dream: its medal, its month ---------- */
.r6w-dreamw { width: min(174px, 23vh); aspect-ratio: 200 / 236; }
.r6w-dicon { position: absolute; left: 12.6%; top: 24.3%; display: block; width: 74.7%; aspect-ratio: 1; perspective: 700px; }
.r6w-turn, .r6w-float { display: block; width: 100%; height: 100%; }
.r6w-dicon .dxi { display: block; width: 100%; height: 100%; }
.r6w-turn.go { animation: r6w-turn .7s cubic-bezier(.2, .85, .25, 1) both; }
@keyframes r6w-turn { 0% { opacity: 0; transform: rotateY(-120deg) translateY(10px) scale(.8); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.r6w-float { animation: r6w-float 4.5s ease-in-out infinite; }
@keyframes r6w-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.r6w-when { flex: none; display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 12px 0 10px; }
.r6w-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(159, 209, 130, .12); box-shadow: inset 0 0 0 1px rgba(159, 209, 130, .3); color: #C9EDB0; font-size: 14px; font-weight: 500; animation: r6w-in .55s var(--r6w-ease) both; }
.r6w-pill svg { stroke-width: 2.2; }
.r6w-meta .r6w-ctl { margin-top: 18px; }
.r6w-dreams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.r6w-dream { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 92px; border-radius: 22px; background: rgba(239, 241, 246, .05); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .1); color: #EFF1F6; transition: background-color .2s ease, box-shadow .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.r6w-dream[aria-checked="true"] { background: rgba(217, 220, 225, .12); box-shadow: inset 0 0 0 1.5px #D9DCE1; transform: translateY(-2px); }
.r6w-dream > span { display: block; width: 46px; height: 46px; }
.r6w-dream .dxi { display: block; width: 46px; height: 46px; }
.r6w-dream b { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.r6w-meta .r6w-sl { margin-top: 18px; }
.r6w-mon { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.r6w-mon > small { flex: none; color: rgba(239, 241, 246, .66); font-size: 15px; }
.r6w-segs { flex: 1 1 auto; max-width: 236px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: 999px; background: rgba(239, 241, 246, .06); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12); }
.r6w-seg { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 0; height: 40px; border-radius: 999px; color: rgba(239, 241, 246, .62); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.r6w-seg[aria-checked="true"] { background: #D9DCE1; color: #101212; }
/* ---------- your first win: the flag, the light, the confetti; your month ---------- */
.r6w-endw { width: 200px; height: 222px; margin-top: -12px; }
.r6w-halo { position: absolute; left: 0; top: 18px; width: 200px; height: 200px; box-sizing: border-box; border-radius: 50%; border: 2px solid #C9EDB0; opacity: 0; pointer-events: none; }
.r6w-burst { position: absolute; left: 100px; top: 118px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.r6w-burst i { position: absolute; left: -4px; top: -4px; opacity: 0; }
.r6w-again { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; left: 21px; top: 0; display: block; width: 158px; height: 222px; border-radius: 24px; }
.r6w-endm { position: absolute; left: 0; top: 34px; display: block; width: 158px; height: 187px; }
.r6w-endm .r6w-dicon { left: 12.7%; top: 23.5%; width: 74.7%; }
.r6w-pole, .r6w-cloth { transform-box: fill-box; }
.r6w-pole { transform-origin: 50% 100%; } .r6w-cloth { transform-origin: 0% 50%; }
.r6w-won { display: inline-flex; align-items: center; gap: 7px; color: #9FD182 !important; font-size: 13px !important; font-weight: 600; letter-spacing: .02em; margin: 0 !important; }
.r6w-won svg { fill: currentColor; stroke: none; }
.r6w-listo .r6w-words h1 { margin-top: 8px; }
.r6w-listo .r6w-words > small:last-child { margin-top: 8px; color: rgba(239, 241, 246, .62); }
.r6w-card { box-sizing: border-box; flex: none; display: flex; flex-direction: column; width: 100%; max-width: 380px; margin-top: 24px; padding: 20px 20px 18px; border: 1px solid transparent; border-radius: 30px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%) padding-box, linear-gradient(#141616, #141616) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .03) 70%, rgba(255, 255, 255, .12)) border-box; text-align: left; }
.r6w-card > small { color: rgba(239, 241, 246, .62); font-size: 14px; }
.r6w-spend { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.r6w-spend b { color: #9FD182; font-size: 50px; line-height: 1; font-weight: 300; letter-spacing: -.045em; }
.r6w-spend small { color: rgba(239, 241, 246, .55); font-size: 14px; }
.r6w-cut { display: block; height: 1px; margin: 16px 0 14px; background: rgba(239, 241, 246, .08); }
.r6w-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.r6w-two > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.r6w-two small { overflow: hidden; color: rgba(239, 241, 246, .55); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.r6w-two b { overflow: hidden; color: #EFF1F6; font-size: 22px; font-weight: 500; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.r6w-pbar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(239, 241, 246, .09); overflow: hidden; }
.r6w-pbar i { display: block; height: 100%; border-radius: 3px; background: #9FD182; }
/* ---------- at the thumb: the dots and the one lime button (on the welcome, the whole width) ---------- */
.r6w-foot { position: absolute; left: 20px; right: 20px; bottom: calc(28px + env(safe-area-inset-bottom, 0px) + var(--r6w-kb)); z-index: 25; display: flex; align-items: center; gap: 12px; transition: bottom .42s var(--r6w-ease); }
.r6w::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 24; height: calc(130px + env(safe-area-inset-bottom, 0px) + var(--r6w-kb)); background: linear-gradient(180deg, rgba(7, 8, 8, 0), rgba(7, 8, 8, .92) 50%, #070808); pointer-events: none; }
.r6w-bl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.r6w-cheer { color: #C9EDB0; font-size: 15px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; animation: r6w-in .55s var(--r6w-ease) both; }
.r6w-dots { display: flex; align-items: center; gap: 6px; }
.r6w-dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: rgba(239, 241, 246, .22); transition: width .35s var(--r6w-ease), background-color .35s ease; }
.r6w-dots i.on { width: 24px; background: #9FD182; }
.r6w-go { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 22px 0 26px; border-radius: 999px; background: linear-gradient(180deg, #C4E8AE, #9FD182); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(0, 0, 0, .5), 0 0 22px rgba(159, 209, 130, .32); color: #101212; font-size: 16.5px; font-weight: 500; white-space: nowrap; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
.r6w-go svg { stroke-width: 2.6; }
.r6w-go:active { transform: scale(.965); }
.r6w-go.r6w-full { flex: 1 1 auto; padding: 0 20px; font-size: 17px; }
.r6w .r6w-go:focus-visible { outline-color: #EFF1F6; }
/* ---------- a step arriving: its drawing settles out of a soft blur, then the words, then what is asked ---------- */
@keyframes r6w-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes r6w-hero { from { opacity: 0; transform: translateY(18px) scale(.86); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.r6w.in .r6w-hero { animation: r6w-hero .8s cubic-bezier(.2, .85, .25, 1) both; }
.r6w.in .r6w-a1 { animation: r6w-in .55s var(--r6w-ease) .18s both; }
.r6w.in .r6w-a2 { animation: r6w-in .55s var(--r6w-ease) .28s both; }
.r6w.in.r6w-portada .r6w-a1 { animation-delay: .35s; } .r6w.in.r6w-portada .r6w-a2 { animation-delay: .5s; }
.r6w.in .r6w-a3 { animation: r6w-in .55s var(--r6w-ease) .9s both; }
.r6w.in .r6w-a4 { animation: r6w-in .55s var(--r6w-ease) 1.05s both; }
.r6w.in .r6w-halo { animation: r6w-halo 1.1s cubic-bezier(.2, .8, .2, 1) .55s both; }
@keyframes r6w-halo { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(1.8); } }
.r6w.in .r6w-pole { animation: r6w-pole .45s var(--r6w-ease) .5s both; }
@keyframes r6w-pole { from { transform: scaleY(0); } to { transform: none; } }
.r6w.in .r6w-cloth { animation: r6w-cloth .6s cubic-bezier(.34, 1.4, .5, 1) .85s both; }
@keyframes r6w-cloth { from { transform: scaleX(0) skewY(-12deg); } to { transform: none; } }
.r6w.in .r6w-burst i { animation: r6w-burst 2.1s cubic-bezier(.15, .75, .3, 1) both; }
@keyframes r6w-burst { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); } 10% { opacity: 1; } 55% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.1), calc(var(--y) + 90px)) rotate(calc(var(--r) * 1.8)) scale(.7); } }
/* a short phone (an iPhone SE): the drawings smaller, so the words and what is asked come up the screen */
@media (max-height: 700px) {
  .r6w-scr { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .r6w-portada .r6w-scr { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
  .r6w-logo { margin-bottom: 16px; } .r6w-sunmedal { width: min(220px, 56vw, 27vh); margin-bottom: 20px; }
  .r6w-coinw, .r6w-endw { zoom: .78; } .r6w-coinw { margin: 12px 0 18px; }
  .r6w-words h1 { font-size: 27px; } .r6w-portada .r6w-words h1 { font-size: 30px; }
  .r6w-card { margin-top: 16px; padding: 16px 18px 14px; } .r6w-spend b { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .r6w *, .r6w *::before, .r6w *::after { animation: none !important; transition: none !important; }
  .r6w-burst, .r6w-halo, .r6w-drop { display: none; }
}
/* v437: the language, on the first screen: a pill of glass at the top left, the system's picker laid over it */
.r6w-lang { position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; height: 44px; border-radius: 999px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
.r6w-lang:active { transform: scale(.965); }
.r6w-lang-v { display: flex; align-items: center; gap: 7px; padding: 0 12px 0 13px; color: #EFF1F6; font-size: 14px; font-weight: 500; pointer-events: none; }
.r6w-lang-v svg { flex: none; color: rgba(239, 241, 246, .75); stroke-width: 2; }
.r6w-lang-v svg:last-child { stroke-width: 2.4; color: rgba(239, 241, 246, .55); }
.r6w-lang select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.r6w-lang:has(select:focus-visible) { outline: 2px solid #9FD182; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .r6w-lang { transition: none; } }

/* v540 (the launch, features/phone/r6-home.js: V6_FOR_ALL): a new account on a computer has this welcome too. Before the account opens the
   computer's v6 sheet is not on (no r6d), so here, as the owner's preview is on a computer (css/desk6/desk6-moments.css): a card of a phone's width
   in the middle, the page around it dark. (tools/r6-desk.js leaves this block out of the computer's sheet, which has its own.) */
@media (min-width: 921px) {
  :root:not(.r6d) .r6w:not(.preview) { inset: 0; width: min(460px, calc(100vw - 48px)); height: min(820px, calc(100vh - 56px)); margin: auto; border-radius: 28px; box-shadow: 0 0 0 1px rgba(239, 241, 246, .1), 0 40px 120px -24px rgba(0, 0, 0, .8); }
  :root:not(.r6d) body:has(.r6w:not(.preview))::before { content: ""; position: fixed; inset: 0; z-index: 59; background: radial-gradient(60% 50% at 50% 40%, #0B1A17, #030404); }
}