/* ================= sign-up and login: animated, with its own type ================= */
@font-face{font-family:'Bricolage';src:url(../assets/fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Instrument';src:url(../assets/fonts/instrument-italic.woff2) format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument';src:url(../assets/fonts/instrument.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'JBMono';src:url(../assets/fonts/jbmono.woff2) format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'Jakarta';src:url(../assets/fonts/jakarta.woff2) format('woff2');font-weight:200 800;font-display:swap}
:root{--cr-gold:#ffc62e;--cr-gold2:#ffe08a;--cr-vio:#8c5cff;--cr-mint:#39d690;--cr-ink:#07080d;--cr-fg:#f5f1e8;--cr-mut:#9aa0b6;--cr-line:rgba(255,255,255,.09)}
#create.cr2{background:var(--cr-ink);color:var(--cr-fg);display:block;padding:0;font-family:'Jakarta',system-ui,sans-serif;overflow-x:hidden}
/* ---------- moving backdrop ---------- */
.cr-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cr-bg .b1,.cr-bg .b2,.cr-bg .b3{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.cr-bg .b1{width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;background:radial-gradient(circle,#ffb800 0,transparent 62%);animation:crDrift1 18s ease-in-out infinite alternate}
.cr-bg .b2{width:55vmax;height:55vmax;right:-18vmax;top:10vmax;background:radial-gradient(circle,#7a4dff 0,transparent 62%);animation:crDrift2 22s ease-in-out infinite alternate}
.cr-bg .b3{width:45vmax;height:45vmax;left:20vmax;bottom:-22vmax;background:radial-gradient(circle,#1fd38a 0,transparent 64%);opacity:.32;animation:crDrift3 26s ease-in-out infinite alternate}
@keyframes crDrift1{to{transform:translate(12vmax,10vmax) scale(1.15)}}@keyframes crDrift2{to{transform:translate(-14vmax,8vmax) scale(.9)}}@keyframes crDrift3{to{transform:translate(-10vmax,-8vmax) scale(1.1)}}
.cr-grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(62deg);transform-origin:bottom;animation:crGrid 6s linear infinite;mask-image:linear-gradient(to top,#000 10%,transparent 90%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%)}
@keyframes crGrid{to{background-position:0 60px}}
.cr-chart{position:absolute;left:0;right:0;bottom:6%;width:100%;height:42%;opacity:.5}
.cr-chart .ln{fill:none;stroke:#ffc62e;stroke-width:2.5;stroke-dasharray:2600;stroke-dashoffset:2600;animation:crDraw 4.5s .3s cubic-bezier(.4,0,.2,1) forwards;filter:drop-shadow(0 0 8px rgba(255,198,46,.6))}
@keyframes crDraw{to{stroke-dashoffset:0}}
.cr-chart .cd{opacity:0;animation:crCandle .5s var(--d) ease-out forwards}.cr-chart line{stroke:rgba(255,255,255,.35);stroke-width:2}.cr-chart rect.u{fill:rgba(57,214,144,.55)}.cr-chart rect.d{fill:rgba(255,92,108,.5)}
@keyframes crCandle{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cr-coins span{position:absolute;left:var(--x);bottom:-60px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 9px/1 'Bricolage',sans-serif;color:#6b4100;background:radial-gradient(circle at 32% 28%,#fff3c0,#ffd86b 20%,#f7b500 55%,#9a6200);box-shadow:0 6px 18px rgba(247,181,0,.35);opacity:0;filter:blur(.4px);animation:crRise var(--t) var(--d) linear infinite}
@keyframes crRise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.45}85%{opacity:.35}100%{transform:translateY(-115vh) rotate(260deg);opacity:0}}
/* ---------- price tape ---------- */
.cr-tape{position:relative;z-index:2;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--cr-line);background:rgba(7,8,13,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cr-tape .in{display:inline-flex;gap:34px;padding:9px 0;animation:crTape 45s linear infinite;font:500 12px/1 'JBMono',ui-monospace,monospace}
.cr-tape span{color:var(--cr-mut)}.cr-tape b{color:var(--cr-fg);margin-right:8px;font-weight:700}.cr-tape em{font-style:normal;margin-left:8px}.cr-tape .up{color:var(--cr-mint)}.cr-tape .dn{color:#ff5c6c}
@keyframes crTape{to{transform:translateX(-50%)}}
/* ---------- layout ---------- */
.cr-wrap{position:relative;z-index:3;min-height:calc(100% - 34px);max-width:1180px;margin:0 auto;padding:44px 26px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center}
.cr-brand{animation:crIn .9s cubic-bezier(.2,.8,.2,1) both}
.cr-logo{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#1b1d27,#000 70%);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 40px rgba(255,255,255,.08);animation:crLogo 1s .1s cubic-bezier(.3,1.6,.5,1) both}
.cr-logo img{width:62%;height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.35));animation:crStar 6s ease-in-out infinite}
@keyframes crStar{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(1.06)}}
.cr-logo span{font:800 17px/1 'Bricolage',sans-serif;color:#2a1a00;letter-spacing:-.02em}
@keyframes crLogo{from{transform:scale(.2) rotate(-40deg);opacity:0}}
.cr-brand h1{margin:22px 0 14px;font:800 clamp(46px,6.6vw,92px)/.92 'Bricolage',sans-serif;letter-spacing:-.045em;color:var(--cr-fg);text-transform:none}
.cr-brand h1 i{font:400 italic 1.08em/0 'Instrument',Georgia,serif;letter-spacing:-.02em;color:var(--cr-gold2)}
.cr-brand h1 b{display:block;background:linear-gradient(90deg,var(--cr-gold) 0,#ff9f2e 40%,var(--cr-vio) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:crSheen 6s ease-in-out infinite alternate}
@keyframes crSheen{to{background-position:100% 0}}
.cr-sub{font-size:18px;line-height:1.45;color:#cfd2df;max-width:500px;margin:0 0 20px}.cr-sub i{font:400 italic 1.15em/1 'Instrument',Georgia,serif;color:var(--cr-fg)}
.cr-feat{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.cr-feat span{padding:8px 13px;border-radius:999px;border:1px solid var(--cr-line);background:rgba(255,255,255,.04);font:600 11.5px/1 'JBMono',monospace;letter-spacing:.04em;text-transform:uppercase;color:#d8dbe6;opacity:0;animation:crIn .6s both}
.cr-feat span:nth-child(1){animation-delay:.35s}.cr-feat span:nth-child(2){animation-delay:.45s}.cr-feat span:nth-child(3){animation-delay:.55s}.cr-feat span:nth-child(4){animation-delay:.65s;border-color:rgba(255,198,46,.5);color:var(--cr-gold2)}
.cr-have{display:inline-flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;border-radius:16px;border:1px solid var(--cr-line);background:rgba(255,255,255,.04);color:var(--cr-fg);cursor:pointer;font:500 14px/1 'Jakarta',sans-serif;transition:border-color .2s,background .2s}
.cr-have b{padding:9px 13px;border-radius:11px;background:var(--cr-fg);color:var(--cr-ink);font-weight:800}.cr-have:hover{border-color:rgba(255,198,46,.5);background:rgba(255,198,46,.06)}
@keyframes crIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* ---------- the card ---------- */
.cr-card{position:relative;padding:26px;border-radius:30px;background:linear-gradient(180deg,rgba(24,27,40,.82),rgba(14,16,25,.9));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:crCard .9s .15s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.cr-card:before{content:'';position:absolute;inset:-1px;border-radius:30px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(255,198,46,.8) 80%,rgba(140,92,255,.8) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:crSpin 5s linear infinite;pointer-events:none}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes crSpin{to{--a:360deg}}
@keyframes crCard{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
.cr-steps{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.cr-steps>div{display:flex;align-items:center;gap:8px;color:var(--cr-mut);font:600 11.5px/1 'JBMono',monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.cr-steps>div i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--cr-line);background:rgba(255,255,255,.04);font-style:normal;transition:.3s}
.cr-steps>div i b{font:700 12px/1 'JBMono',monospace}
.cr-steps>div.on{color:var(--cr-fg)}.cr-steps>div.on i{background:var(--cr-gold);border-color:var(--cr-gold);color:#241700;box-shadow:0 0 0 5px rgba(255,198,46,.15)}
.cr-steps>div.done i{background:var(--cr-mint);border-color:var(--cr-mint);color:#03200f}
.cr-steps em{flex:1;height:2px;border-radius:2px;background:var(--cr-line);min-width:12px}
.cr-body.fwd{animation:crFwd .5s cubic-bezier(.2,.8,.2,1)}.cr-body.back{animation:crBack .5s cubic-bezier(.2,.8,.2,1)}
@keyframes crFwd{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}@keyframes crBack{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.cr-h{margin-bottom:20px}.cr-k{font:600 11px/1 'JBMono',monospace;letter-spacing:.18em;color:var(--cr-gold)}
.cr-h h2{margin:10px 0 0;font:700 clamp(26px,3vw,34px)/1.05 'Bricolage',sans-serif;letter-spacing:-.03em;color:var(--cr-fg);text-transform:none}
.cr-h h2 i{display:block;font:400 italic 1.12em/1.05 'Instrument',Georgia,serif;letter-spacing:-.01em;color:var(--cr-gold2)}
/* floating label input */
.cr-field{position:relative;display:block;margin:0 0 20px;text-transform:none}
.cr-field input{width:100%;padding:26px 18px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:var(--cr-fg);font:600 20px/1.2 'Bricolage',sans-serif;letter-spacing:-.01em;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.cr-field input:focus{border-color:var(--cr-gold);box-shadow:0 0 0 5px rgba(255,198,46,.14);background:rgba(0,0,0,.5)}
.cr-field>span{position:absolute;left:19px;top:20px;font:500 16px/1 'Jakarta',sans-serif;color:var(--cr-mut);pointer-events:none;transition:.2s cubic-bezier(.2,.8,.2,1)}
.cr-field input:focus+span,.cr-field input:not(:placeholder-shown)+span{top:11px;font:600 10.5px/1 'JBMono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--cr-gold)}
.cr-field em{display:block;margin-top:8px;font-style:normal;font-size:12px;color:var(--cr-mut)}
.cr-field.shake{animation:crShake .45s}
@keyframes crShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.cr-lab{font:600 11px/1 'JBMono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cr-mut);margin:16px 0 10px}
.cr-tog{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--cr-line)}
.cr-tog i{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:12px;background:linear-gradient(180deg,var(--cr-gold2),var(--cr-gold));box-shadow:0 6px 18px rgba(255,198,46,.35);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.cr-tog.r i{transform:translateX(100%)}
.cr-tog button{position:relative;z-index:1;padding:13px;border:0;background:none;font:700 15px/1 'Jakarta',sans-serif;color:var(--cr-mut);cursor:pointer;transition:color .25s}.cr-tog button.on{color:#241700}
.cr-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:26px}
.cr-go{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:16px;border:0;cursor:pointer;background:linear-gradient(180deg,var(--cr-gold2),var(--cr-gold));color:#241700;font:700 16px/1 'Bricolage',sans-serif;letter-spacing:-.01em;box-shadow:0 12px 30px rgba(255,198,46,.3),inset 0 1px 0 rgba(255,255,255,.6);position:relative;overflow:hidden;transition:transform .15s}
.cr-go:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:crShine 3.2s 1s ease-in-out infinite}
@keyframes crShine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.cr-go b{transition:transform .2s}.cr-go:hover{transform:translateY(-2px)}.cr-go:hover b{transform:translateX(4px)}
.cr-go.big{flex:1;justify-content:center;padding:18px 24px;font-size:18px}
.cr-back{padding:14px 16px;border-radius:14px;border:1px solid var(--cr-line);background:rgba(255,255,255,.04);color:var(--cr-fg);font:600 14px/1 'Jakarta',sans-serif;cursor:pointer}
/* look step */
.cr-look{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:start}
.cr-avbox{position:relative;border-radius:22px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.08),rgba(0,0,0,.3));border:1px solid var(--cr-line);padding:10px 6px 30px}
.cr-av{width:100%;height:auto;display:block;animation:crBreath 4s ease-in-out infinite;transform-origin:50% 100%}
.cr-av.pop{animation:crPop .4s cubic-bezier(.3,1.6,.5,1),crBreath 4s .4s ease-in-out infinite}
@keyframes crBreath{50%{transform:scale(1.025) translateY(-2px)}}@keyframes crPop{from{transform:scale(.85)}}
.cr-tag{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:var(--cr-gold);color:#241700;font:700 11px/1 'JBMono',monospace;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.cr-opts .cr-lab:first-child{margin-top:2px}
.cr-sw{display:flex;flex-wrap:wrap;gap:8px}.cr-sw button{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.12);background:var(--c);cursor:pointer;transition:transform .2s,box-shadow .2s}
.cr-sw button:hover{transform:scale(1.12)}.cr-sw button.on{transform:scale(1.12);box-shadow:0 0 0 3px var(--cr-ink),0 0 0 5px var(--cr-gold)}
.cr-chips{display:flex;flex-wrap:wrap;gap:6px}.cr-chips button{padding:9px 12px;border-radius:12px;border:1px solid var(--cr-line);background:rgba(255,255,255,.04);color:#d8dbe6;font:600 13px/1 'Jakarta',sans-serif;cursor:pointer;transition:.2s}
.cr-chips button.on{background:var(--cr-fg);color:var(--cr-ink);border-color:var(--cr-fg)}
/* journey step */
.cr-life{display:flex;flex-direction:column;gap:8px}
.cr-life button{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--cr-line);background:rgba(255,255,255,.035);color:var(--cr-fg);font:600 14.5px/1.25 'Jakarta',sans-serif;cursor:pointer;opacity:0;animation:crIn .45s var(--d) both;transition:border-color .2s,background .2s}
.cr-life button i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex:0 0 auto;transition:.2s}
.cr-life button:hover{border-color:rgba(255,198,46,.4)}.cr-life button.on{border-color:var(--cr-gold);background:rgba(255,198,46,.1)}.cr-life button.on i{border-color:var(--cr-gold);background:var(--cr-gold);box-shadow:inset 0 0 0 3px #1b1407}
.cr-earn{display:flex;gap:12px;align-items:center;margin-top:16px;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,198,46,.14),rgba(140,92,255,.16));border:1px solid rgba(255,198,46,.35)}
.cr-earn b{display:block;font:700 15px/1.2 'Bricolage',sans-serif}.cr-earn span{font-size:12.5px;color:#c9ccda}
.cr-coin{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font:800 11px/1 'Bricolage',sans-serif;color:#6b4100;background:radial-gradient(circle at 32% 28%,#fff3c0,#ffd86b 20%,#f7b500 55%,#9a6200);animation:crSpinY 4s ease-in-out infinite}
@keyframes crSpinY{0%,70%{transform:rotateY(0)}85%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.cr-fine{font-size:12px;color:var(--cr-mut);margin:14px 0 0}
#create.cr2 .cap-note{color:var(--cr-mut)}
body.no-airdrop .cr-earn,body.no-airdrop .cr-feat span:nth-child(4){display:none}
/* phones */
@media (max-width:900px){.cr-wrap{grid-template-columns:1fr;gap:22px;padding:22px 16px 30px}.cr-brand h1{margin:14px 0 10px;font-size:clamp(40px,12vw,58px)}.cr-sub{font-size:15.5px;margin-bottom:14px}.cr-feat{margin-bottom:16px}.cr-logo{width:50px;height:50px}}
@media (max-width:520px){.cr-card{padding:20px 16px;border-radius:24px}.cr-card:before{border-radius:24px}.cr-steps>div span{display:none}.cr-steps>div.on span{display:inline}.cr-look{grid-template-columns:120px 1fr;gap:12px}.cr-sw button{width:28px;height:28px}.cr-feat span:nth-child(2),.cr-feat span:nth-child(3){display:none}.cr-have{width:100%;justify-content:space-between}.cr-chart{height:30%}.cr-coins span{width:24px;height:24px;font-size:7px}.cr-coins span:nth-child(even){display:none}}
@media (prefers-reduced-motion:reduce){#create.cr2 *,#create.cr2 *:before,#create.cr2 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ================= the login window ================= */
.modal:has(.lg-list),.modal:has(#lgEmail){background:linear-gradient(180deg,rgba(24,27,40,.97),rgba(12,14,22,.98));border:1px solid rgba(255,255,255,.12);border-radius:28px;box-shadow:0 40px 100px rgba(0,0,0,.6);animation:crCard .55s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.modal:has(.lg-list) .stripes,.modal:has(#lgEmail) .stripes{height:3px;background:linear-gradient(90deg,var(--cr-gold),#ff9f2e,var(--cr-vio));background-size:200% 100%;animation:crSheen 3s ease-in-out infinite alternate}
.modal:has(.lg-list) h2,.modal:has(#lgEmail) h2{font:700 26px/1.1 'Bricolage',sans-serif!important;letter-spacing:-.03em;color:var(--cr-fg)!important;text-transform:none!important}
.modal:has(.lg-list) h2 .ico,.modal:has(#lgEmail) h2 .ico{color:var(--cr-gold)}
.modal:has(.lg-list)>p.muted:first-of-type,.modal:has(.lg-list) .muted:first-of-type{font:400 italic 18px/1.35 'Instrument',Georgia,serif;color:#d9dbe6}
.lg-list .lg-btn{font:700 15px/1 'Jakarta',sans-serif;border-radius:16px;padding:15px 16px;opacity:0;animation:crIn .45s both;position:relative;overflow:hidden}
.lg-list .lg-btn:nth-child(1){animation-delay:.12s}.lg-list .lg-btn:nth-child(2){animation-delay:.2s}.lg-list .lg-btn:nth-child(3){animation-delay:.28s}.lg-list .lg-btn:nth-child(4){animation-delay:.36s}.lg-list .lg-btn:nth-child(5){animation-delay:.44s}
.lg-list .lg-btn:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.lg-list .lg-btn:hover:after{transform:translateX(120%)}
.modal:has(#lgEmail) label{font:600 11px/1 'JBMono',monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-mut)!important}
.modal:has(#lgEmail) input{border-radius:14px!important;padding:14px!important;font:600 16px/1.2 'Jakarta',sans-serif!important;background:rgba(0,0,0,.35)!important;border:1px solid rgba(255,255,255,.14)!important;transition:border-color .2s,box-shadow .2s}
.modal:has(#lgEmail) input:focus{border-color:var(--cr-gold)!important;box-shadow:0 0 0 4px rgba(255,198,46,.14)}