/* Motion identity: rectangular wordmark strokes, red yod accent, original ballot box. */
#creatorApp:has(#welcome:not([hidden])){overflow:hidden;padding-top:calc(16px + env(safe-area-inset-top))}
#creatorApp:has(#welcome:not([hidden])) header{border:0;margin-bottom:12px;padding-bottom:0;position:relative;z-index:3}
#creatorApp:has(#welcome:not([hidden])) #stepLabel{display:none}
#welcome{position:relative;isolation:isolate}
#welcome .eyebrow{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:11px;font-weight:700}
#welcome .eyebrow:before{width:6px;height:6px;border-radius:1px;background:var(--experience-accent,#db0000);box-shadow:0 0 0 5px #db000008}
#welcome h1{font-size:clamp(35px,10vw,46px);line-height:1.04;letter-spacing:-1.6px;margin:14px 0 12px}
#welcome .lead{font-size:15px;line-height:1.5;max-width:27ch;margin-bottom:0}
#welcome .steps{display:none}
#welcome .hero{height:310px;margin:0 -24px;perspective:800px;overflow:hidden}
#welcome .hero>img{width:300px!important;max-width:90%;z-index:5;animation:opening-box 7s cubic-bezier(.45,0,.25,1) infinite;transform-origin:50% 85%;filter:drop-shadow(0 20px 12px #173d6b1c)}
#welcome .ring{bottom:39px;width:70%;height:36px;border-color:#0b0b0d0e;box-shadow:0 0 0 20px #0b0b0d03,0 0 0 42px #0b0b0d02;animation:opening-floor 7s ease-in-out infinite}
#welcome .float-pill{bottom:12px;z-index:8;background:transparent;box-shadow:none;letter-spacing:1px;color:#5f6470;font-size:10px;padding:0}
.opening-type{position:absolute;inset:18px -40px auto;font:900 110px/1 Heebo,sans-serif;letter-spacing:-8px;white-space:nowrap;color:#0b0b0d04;transform:rotate(-8deg);z-index:0;user-select:none}
.opening-frame{position:absolute;width:210px;height:210px;top:43px;left:calc(50% - 105px);border:1px solid #0b0b0d09;transform:rotate(45deg);border-radius:6px;animation:opening-geometry var(--experience-key-time,18s) ease-in-out infinite alternate}
.opening-frame:before{content:'';position:absolute;inset:25px;border:1px solid #0b0b0d07}
.opening-stroke{position:absolute;width:13px;height:52px;background:var(--experience-accent,#db0000);border-radius:1px;left:21%;top:52px;box-shadow:0 12px 25px #db000015;transform:rotate(-12deg);animation:opening-stroke 7s cubic-bezier(.45,0,.25,1) infinite}
.opening-stroke.b{width:8px;height:27px;left:78%;top:160px;opacity:.2;animation-delay:-3s}
.opening-ticket{position:absolute;z-index:4;width:48px;height:59px;top:25px;left:calc(50% - 24px);border:1px solid #e6e7ea;background:linear-gradient(135deg,#fff,#f3f4f6);box-shadow:0 9px 17px #0b0b0d0b;border-radius:4px;display:grid;place-items:center;font:900 21px Heebo;color:#0b0b0d;animation:opening-ticket 7s cubic-bezier(.4,0,.2,1) infinite}
.opening-ticket span{color:#db0000;font-size:10px;position:absolute;bottom:5px}
.opening-score{position:absolute;z-index:8;top:88px;left:66%;font:800 22px Assistant;color:#149063;direction:ltr;animation:opening-score 7s ease-out infinite}
.opening-beam{position:absolute;inset:0;background:linear-gradient(112deg,transparent 34%,#d8e5f015 43%,#ffffffed 49%,#efe5d51c 55%,transparent 64%);z-index:7;pointer-events:none;animation:opening-beam var(--experience-sweep-time,11s) ease-in-out infinite}
#welcome #begin{position:relative;margin-top:0;overflow:hidden;background:#0b0b0d;box-shadow:0 8px 25px #0b0b0d12;border-radius:14px;min-height:56px;font-size:18px}
#welcome #begin:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff22,transparent 65%);transform:translateX(-110%);animation:opening-button 8s ease-in-out infinite}
#welcome #welcomePrivacy{max-width:32ch;margin:13px auto 0;font-size:11px;color:#777}
#welcome>.text-link{margin:12px auto 0;font-size:13px}
@keyframes opening-box{0%,100%{transform:translateY(6px) rotate(-2deg)}30%{transform:translate(10px,-4px) rotate(1.5deg)}52%{transform:translateY(2px) scale(1.015)}57%{transform:translateY(5px) scale(.985)}65%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes opening-ticket{0%,12%{opacity:0;transform:translate(-55px,-45px) rotate(-20deg)}22%{opacity:1}49%{opacity:1;transform:translate(0,57px) rotate(4deg)}57%,100%{opacity:0;transform:translate(0,99px) scale(.65)}}
@keyframes opening-score{0%,53%{opacity:0;transform:translateY(12px) scale(.8)}58%{opacity:1;transform:translateY(0) scale(1.12)}76%,100%{opacity:0;transform:translateY(-35px) scale(1)}}
@keyframes opening-geometry{to{transform:rotate(60deg) scale(1.1)}}
@keyframes opening-stroke{50%{transform:translate(8px,-12px) rotate(9deg)}}
@keyframes opening-floor{50%{transform:scale(.92);opacity:.6}}
@keyframes opening-beam{0%,20%{transform:translateX(-90%);opacity:0}45%{opacity:.8}70%,100%{transform:translateX(90%);opacity:0}}
@keyframes opening-button{0%,65%{transform:translateX(-110%)}90%,100%{transform:translateX(110%)}}
@media(max-height:720px){#welcome .hero{height:260px}#welcome .hero>img{width:260px!important}#welcome h1{font-size:35px}#welcome .eyebrow{margin-top:6px}}
@media(prefers-reduced-motion:reduce){#welcome *,#welcome *:before,#welcome *:after{animation:none!important}.opening-ticket{transform:translate(-50px,0) rotate(-12deg)}.opening-score{display:none}.opening-beam{opacity:.15}}

/* AZOLAI-inspired alternating key/fill; restrained broadcast accents.
   Palette, cycle lengths and strength come from the active JSON contract. */
#welcome .hero:before,#welcome .hero:after{content:'';position:absolute;inset:8% -15% 3%;pointer-events:none;z-index:1;border-radius:50%;filter:blur(16px) opacity(calc(var(--experience-light-opacity,.18) * 3));will-change:transform,opacity}
#welcome .hero:before{background:radial-gradient(ellipse at 27% 43%,color-mix(in srgb,var(--experience-cool,#d8e5f0) 80%,#7da6d2) 0,transparent 61%);animation:news-cool var(--experience-key-time,18s) cubic-bezier(.45,0,.25,1) infinite}
#welcome .hero:after{background:radial-gradient(ellipse at 73% 56%,color-mix(in srgb,var(--experience-warm,#efe5d5) 85%,#e5b97a) 0,transparent 59%);animation:news-warm var(--experience-key-time,18s) cubic-bezier(.45,0,.25,1) infinite}
#welcome .opening-beam{animation-name:news-sweep;filter:opacity(calc(var(--experience-light-opacity,.18) * 4));background:linear-gradient(112deg,transparent 31%,color-mix(in srgb,var(--experience-cool,#d8e5f0) 20%,transparent) 42%,#ffffffed 49%,color-mix(in srgb,var(--experience-warm,#efe5d5) 24%,transparent) 56%,transparent 67%)}
.opening-beam:after{content:'';position:absolute;left:49%;top:22%;height:39%;width:2px;transform:rotate(22deg);background:linear-gradient(transparent,var(--experience-accent,#db0000),transparent);opacity:.3}
#welcome .eyebrow{position:relative;padding:7px 13px;border-block:1px solid #0b0b0d0a}
#welcome .eyebrow:after{content:'';position:absolute;right:0;bottom:-1px;height:2px;width:24px;background:var(--experience-accent,#db0000);transform-origin:right;animation:news-rule var(--experience-sweep-time,11s) cubic-bezier(.16,1,.3,1) infinite}
#welcome .opening-frame:after{content:'';position:absolute;top:-1px;right:-1px;width:28px;height:28px;border-top:2px solid #0b0b0d25;border-right:2px solid var(--experience-accent,#db0000);opacity:.45}
@keyframes news-cool{0%,100%{opacity:.8;transform:translate(-5%,-3%) scale(.95)}45%,60%{opacity:.08;transform:translate(12%,5%) scale(1.12)}}
@keyframes news-warm{0%,100%{opacity:.06;transform:translate(5%,4%) scale(1.05)}45%,60%{opacity:.75;transform:translate(-10%,-4%) scale(.95)}}
@keyframes news-sweep{0%,20%{transform:translateX(-100%);opacity:0}36%{opacity:.85}60%,100%{transform:translateX(100%);opacity:0}}
@keyframes news-rule{0%,12%,100%{transform:scaleX(.25);opacity:.25}25%,60%{transform:scaleX(1);opacity:.8}85%{transform:scaleX(.25);opacity:.25}}
@media(prefers-reduced-motion:reduce){#welcome .hero:before,#welcome .hero:after,#welcome .opening-beam,#welcome .eyebrow:after{animation:none!important;will-change:auto}#welcome .hero:before{opacity:.3}#welcome .hero:after{opacity:.15}#welcome .opening-beam{display:none}}

/* Personal creator invitation preview */
#profile .live-invite{position:relative;isolation:isolate;overflow:hidden;text-align:center;background:#fff;border:1px solid #12131814;border-radius:24px;padding:18px 20px;margin:24px 0;box-shadow:0 15px 40px #14233c08}
#profile .live-invite:before,#profile .live-invite:after{content:'';position:absolute;z-index:-1;width:220px;height:220px;border-radius:50%;filter:blur(38px);pointer-events:none;opacity:.15}
#profile .live-invite:before{background:var(--experience-cool,#c6dcf7);top:-100px;right:-85px;animation:news-cool var(--experience-key-time,14s) ease-in-out infinite}
#profile .live-invite:after{background:var(--experience-warm,#f7ddc6);bottom:-120px;left:-80px;animation:news-warm var(--experience-fill-time,17s) ease-in-out infinite}
#profile .live-invite-kicker{font-size:12px;font-weight:700;letter-spacing:.02em;color:#64676d}
#profile .live-invite-stage{height:122px;position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:20px}
#profile .live-orbit{position:absolute;width:100px;height:100px;border:1px solid #1b273618;border-radius:24px;transform:rotate(45deg)}
#profile .live-bonus{width:68px;height:68px;border:3px solid white;box-shadow:0 8px 22px #14233c18;z-index:1;animation:creator-hover 4s ease-in-out infinite;background:#f2f5f8;color:#535c6b}
#profile .live-bonus img{width:100%;height:100%;object-fit:cover}
#profile .live-bonus-label{position:absolute;bottom:0;font-size:11px;color:#616975;background:#ffffffd9;border:1px solid #1521320c;border-radius:20px;padding:3px 10px}
#profile .live-invite h2{font-size:24px;line-height:1.25;margin:14px 0 6px;overflow-wrap:anywhere}
#profile .live-invite p{font-size:15px;line-height:1.5;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
#profile .live-invite-footer{border-top:1px solid #1521320d;margin-top:14px;padding-top:10px;font-size:11px;color:#6a7078}
#profile .photo-pick{border-style:solid;border-color:#1726381a;border-radius:18px}
#profile textarea{min-height:90px}
#profile #saveProfile{min-height:52px}
@keyframes creator-hover{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){#profile .live-bonus,#profile .live-invite:before,#profile .live-invite:after{animation:none}}
/* Fit the creator step to a phone without clipping controls or disabling zoom. */
#creatorApp:has(#partyChoice:not([hidden])){padding:10px 16px;min-height:100dvh}
#creatorApp:has(#partyChoice:not([hidden])) header{margin-bottom:8px}
#creatorApp #partyChoice h1{font-size:27px;line-height:1.05;margin:6px 0}
#partyChoice h1 br{display:none}
#creatorApp #partyChoice .lead{font-size:12px;margin:5px 0;line-height:1.3}
#creatorParties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.creator-party{min-width:0;position:relative;display:grid;justify-items:center;align-content:center;gap:1px;border:1px solid color-mix(in srgb,var(--party-primary) 25%,white);border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--party-primary) 9%,white),white 60%,color-mix(in srgb,var(--party-secondary) 8%,white));padding:5px 3px;color:#111;min-height:76px}
.creator-party[aria-pressed=true]{outline:2px solid var(--party-primary);outline-offset:0;background:color-mix(in srgb,var(--party-primary) 13%,white)}
.creator-party img{width:36px;height:36px;object-fit:cover;object-position:50% 20%;border-radius:50%;border:2px solid white}
.creator-party strong{font-size:11px;line-height:1.1;text-align:center}
.creator-party small{font-size:9px;line-height:1.1;text-align:center}
#partyChoice .primary{font-size:14px;min-height:44px;padding:9px;margin-top:8px}
#creatorApp #partyChoice .text-link{font-size:12px;margin:4px auto;padding:6px}
#creatorApp :is(#preview,#invitation) .composite-portrait{border-radius:0;background:transparent;width:216px;height:162px;margin:-65px auto 0;border:0;overflow:visible;position:relative}
.composite-portrait canvas{width:100%;height:100%;object-fit:contain;border-radius:20px}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover{height:85px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--party-primary,#d8e5f0) 25%,white),transparent 70%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--party-secondary,#efe5d5) 20%,white),transparent 70%),white}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover b{font-size:17px}
#creatorApp:has(#preview:not([hidden]),#invitation:not([hidden]),#dashboard:not([hidden])){padding:calc(env(safe-area-inset-top) + 10px) 20px calc(env(safe-area-inset-bottom) + 10px)}
#creatorApp:has(#preview:not([hidden]),#invitation:not([hidden]),#dashboard:not([hidden])) header{margin-bottom:12px}
#creatorApp :is(#preview,#dashboard) h1{font-size:29px;line-height:1.15;margin:8px 0 12px}
#creatorApp :is(#preview,#invitation) .creator-card{margin:12px 0;border-radius:20px}
#creatorApp :is(#preview,#invitation) .cover{height:112px;padding:12px 18px;background:radial-gradient(ellipse at 0 0,var(--experience-cool,#dce8f4),transparent 70%),radial-gradient(ellipse at 100% 100%,var(--experience-warm,#f3e6d9),transparent 70%),#fff}
#creatorApp :is(#preview,#invitation) .cover b{font-size:24px;line-height:1.05;margin-top:6px}
#creatorApp :is(#preview,#invitation) .cover i{margin-top:4px;font-size:11px}
#creatorApp :is(#preview,#invitation) .portrait{width:58px;height:58px;margin:-20px auto 0;border-width:4px;box-shadow:none}
#creatorApp :is(#preview,#invitation) .creator-card h2{font-size:22px;margin:5px 15px}
#creatorApp :is(#preview,#invitation) .creator-card p{font-size:13px;line-height:1.4;margin:6px 0;padding:0 14px;max-height:56px;overflow:auto}
#creatorApp #preview .score-placeholder{margin:10px;padding:8px;font-size:12px}
#creatorApp :is(#preview,#invitation) .fine{font-size:12px;line-height:1.4;margin:10px 0}
#creatorApp #preview details{margin-top:10px;padding:10px 12px}
#creatorApp #invitation .big-score{padding:4px 0 12px}
#creatorApp #invitation .big-score b{font-size:42px}
#creatorApp #dashboard .lead{font-size:14px;line-height:1.35;margin:5px 0 10px}
#creatorApp #dashboard .metrics{gap:8px;margin-top:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
#creatorApp #dashboard .metrics>div{padding:12px 2px;border-radius:12px}
#creatorApp #dashboard .metrics b{font-size:25px}
#creatorApp #dashboard .metrics span{font-size:10px}
#creatorApp #dashboard .fine{font-size:11px;line-height:1.35;margin:7px 0}
#creatorApp #dashboard .text-link{font-size:12px;margin:7px auto;min-height:30px;padding:5px}
#creatorApp #dashboard :is(.primary,.secondary){min-height:44px;padding:10px 12px;margin-top:7px}
#creatorApp #dashboard label{font-size:12px;margin:8px 0 0}
#creatorApp #dashboard .link-field{padding:8px;margin-top:4px}
#creatorApp #dashboard details{margin-top:10px;padding:9px 12px}
#creatorApp #dashboard .local-note{margin:8px 0;padding:8px;font-size:11px;line-height:1.3}
#creatorApp:has(#profile:not([hidden])){padding:calc(env(safe-area-inset-top) + 10px) 20px calc(env(safe-area-inset-bottom) + 10px)}
#creatorApp:has(#profile:not([hidden])) header{margin-bottom:8px;min-height:32px}
#creatorApp #profile h1{font-size:30px;line-height:1.12;margin:6px 0}
#profile h1 br{display:none}
#profile h1 br:after{content:' '}
#creatorApp #profile .lead{font-size:13px;line-height:1.4;margin:0 0 8px}
#profile>.eyebrow{display:none}
#profile .live-invite{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;text-align:right;padding:10px 14px;margin:8px 0 10px;border-radius:18px;min-height:92px}
#profile .live-invite-stage{grid-column:1;grid-row:1/3;height:70px;padding:0}
#profile .live-orbit{width:58px;height:58px;border-radius:16px}
#profile .live-bonus{width:48px;height:48px;font-size:22px}
#profile .live-invite h2{grid-column:2;grid-row:1;font-size:19px;line-height:1.2;margin:0 0 3px}
#profile .live-invite p{grid-column:2;grid-row:2;font-size:13px;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#profile .live-invite-kicker,#profile .live-invite-footer,#profile .live-bonus-label{display:none}
#creatorApp #profile label{margin:8px 0 0;font-size:13px}
#profile .photo-pick{padding:9px 12px;gap:12px;min-height:62px}
#profile .photo-pick .avatar{width:42px;height:42px;font-size:23px}
#profile .photo-pick small{font-size:11px;margin-top:2px}
#creatorApp #profile input:not([type=file]):not([type=range]),#creatorApp #profile textarea{margin-top:4px;padding:8px 12px;font-size:16px;line-height:1.4}
#creatorApp #profile textarea{height:60px;min-height:60px;resize:none}
#profile #messageHint{display:none}
#creatorApp #profile #profilePrivacy{font-size:11px;line-height:1.35;margin:9px 0;text-align:right}
#profile #saveProfile{min-height:48px;padding:11px 12px;margin-top:8px}
#creatorApp #profile #backWelcome{margin:2px auto 0;min-height:34px;font-size:12px;padding:6px 18px}
#creatorApp #profile #removePhoto{margin:2px auto;min-height:30px;font-size:12px}
#profile #portraitAdjust{margin:3px 0;padding:6px 12px;border:1px solid #17263818;border-radius:14px}
#creatorApp #profile #portraitAdjust label{display:grid;grid-template-columns:90px 1fr;align-items:center;margin:3px 0;font-size:12px}
#profile #portraitAdjust input{margin:0;padding:0;height:24px}
#creatorApp #profile #portraitStatus{font-size:11px;margin:0 0 4px}
@media(max-height:700px){
 #creatorApp #profile h1{font-size:27px}
 #profile .live-invite{min-height:74px;margin:6px 0;padding:6px 12px}
 #profile .live-invite-stage{height:58px}
 #creatorApp #profile .lead{font-size:12px}
 #creatorApp #profile #profilePrivacy{margin:6px 0}
}
@media(max-height:590px){
 #profile .live-invite{display:none}
 #creatorApp:has(#profile:not([hidden])) header{margin-bottom:2px}
}
#creatorApp #previewPhoto.composite-portrait,#creatorApp #invitePhoto.composite-portrait{width:216px;height:162px;border:0;border-radius:18px;box-shadow:none;background:transparent;overflow:hidden;margin:-12px auto 0;position:relative}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover{height:65px}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover b{margin:0;font-size:16px;line-height:1.1}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover b br{display:none}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover i{display:none}
#creatorApp:has(#preview:not([hidden]),#invitation:not([hidden]),#partyChoice:not([hidden])){overflow:clip}
#creatorApp :is(h1,h2)[tabindex="-1"]{outline:none}
.ballot-disclaimer{display:block;font-size:10px;line-height:1.3;color:#69717b;margin:-4px 10px 4px;text-align:center}
.creator-card:has(.composite-portrait) .cover:before{display:none}
#creatorApp #invitation>.text-link{margin:6px auto;font-size:12px;min-height:30px}
#creatorApp #previewPhoto.composite-portrait,#creatorApp #invitePhoto.composite-portrait{width:min(100%,300px);height:225px;margin:0 auto}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover{height:32px;padding:8px 12px}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover>span{display:none}
#creatorApp :is(#preview,#invitation) .creator-card:has(.composite-portrait) .cover b{font-size:14px;text-align:center}
@media(max-height:700px){
 #creatorApp #previewPhoto.composite-portrait,#creatorApp #invitePhoto.composite-portrait{width:min(100%,280px);height:210px}
 #creatorApp #preview h1{font-size:26px;margin:5px 0 8px}
 #creatorApp #preview .creator-card{margin:8px 0}
 #creatorApp #preview details{margin-top:6px;padding:8px 10px}
}

.creator-party .party-initials{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f1f3f5;color:#333;font:700 17px Assistant;margin:auto}