html,body{width:100%;min-height:100%;margin:0;background:#030302;color:#fff8eb;font-family:Arial,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
body.sw-index-fast-shell{min-height:100svh;overscroll-behavior:none}
.swFastHeaderLogo{position:fixed;left:clamp(34px,4.1vw,72px);top:clamp(24px,3.2vw,46px);z-index:90;display:inline-flex;align-items:center;justify-content:center;width:clamp(168px,13vw,226px);max-width:28vw;line-height:0;text-decoration:none;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.swFastHeaderLogo img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.46)) drop-shadow(0 0 18px rgba(45,156,255,.18))}
.swFastUploadForm{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:.01;overflow:hidden;pointer-events:none}
.swFastSubmitFallback{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
#fileInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.swFastHiddenUpload{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.swFastMobileHero{display:none}
.swFastDesktopHero{display:none}
.swFastStatus{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:2147483000;width:min(420px,calc(100vw - 28px));transform:translateX(-50%);padding:14px 16px 16px;border:1px solid rgba(255,190,68,.62);border-radius:18px;background:rgba(10,6,3,.82);box-shadow:0 18px 50px rgba(0,0,0,.48),0 0 38px rgba(255,145,0,.28),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.swFastStatus[hidden]{display:none!important}
.swFastStatus b{display:block;margin:0 0 5px;font-size:16px;line-height:1.1}
.swFastStatus span{display:block;color:#ffe4b5;font-size:13px;line-height:1.25}
.swFastStatus i{display:block;height:4px;margin-top:12px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden}
.swFastStatus i span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffe78d,#ffae18,#fff2b8);box-shadow:0 0 18px rgba(255,179,26,.72);transition:width .18s ease}
.swFastMenuPanel{position:fixed;inset:0;z-index:2147482500;display:none;padding:calc(122px + env(safe-area-inset-top,0px)) 22px 28px;background:rgba(0,0,0,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.swFastMenuPanel.is-open{display:block}
.swFastMenuPanel a{display:flex;align-items:center;min-height:58px;margin:0 0 12px;padding:0 18px;border:1px solid rgba(255,180,45,.42);border-radius:18px;background:linear-gradient(180deg,rgba(31,16,3,.88),rgba(8,5,2,.94));color:#fff6df;font-weight:800;font-size:18px;line-height:1.1;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.10)}
html.swFastMenuLocked,html.swFastMenuLocked body{overflow:hidden!important}
.swFastLiteMobile{display:none}
@media(max-width:1023px){
.swFastHeaderLogo{display:none!important}
.swFastMobileHero{--ratio:2.161782;position:relative;display:block;width:100vw;min-height:max(100svh,calc(100vw * var(--ratio)));overflow:hidden;isolation:isolate;background:#030303 image-set(url("/assets/images/suno-solar-mobile-exact-v20260618.avif") type("image/avif"),url("/assets/images/suno-solar-mobile-exact-v20260615.webp") type("image/webp"),url("/assets/images/suno-solar-mobile-exact-v20260615.png") type("image/png")) top center/100% auto no-repeat}
html.swSaveData .swFastMobileHero{min-height:100svh;padding:22px 16px 26px;background:radial-gradient(circle at 82% 22%,rgba(255,177,38,.20),transparent 32%),radial-gradient(circle at 80% 70%,rgba(255,133,0,.12),transparent 36%),linear-gradient(180deg,#050606,#020201);display:flex;align-items:center}
html.swSaveData .swFastHit{display:none!important}
html.swSaveData .swFastLiteMobile{display:block;width:100%;max-width:430px;margin:0 auto;color:#fff8e8}
html.swSaveData .swFastLiteBrand{display:inline-block;margin-bottom:34px;color:#fff8e8;text-decoration:none;font-weight:900;font-size:24px;line-height:1.02;text-shadow:0 0 20px rgba(255,186,56,.22)}
html.swSaveData .swFastLiteKicker{margin:0 0 14px;color:#ffbe38;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
html.swSaveData .swFastLiteMobile h1{margin:0;max-width:360px;color:#fffdf5;font-size:clamp(42px,13vw,62px);line-height:1.02;font-weight:900;letter-spacing:0;text-shadow:0 12px 30px rgba(0,0,0,.55)}
html.swSaveData .swFastLiteLead{max-width:330px;margin:22px 0 0;color:rgba(255,246,225,.82);font-size:18px;line-height:1.42}
html.swSaveData .swFastLiteCta{display:flex;align-items:center;justify-content:center;width:min(100%,340px);min-height:64px;margin:30px 0 20px;border:1px solid rgba(255,237,180,.86);border-radius:999px;background:linear-gradient(180deg,#ffbf37,#a95a06);box-shadow:0 12px 34px rgba(255,145,0,.25),inset 0 1px 0 rgba(255,255,255,.55);color:#fffaf0;font:900 22px/1 Arial,sans-serif;cursor:pointer;touch-action:manipulation}
html.swSaveData .swFastLiteCta:focus-visible{outline:3px solid rgba(255,239,179,.98);outline-offset:5px}
html.swSaveData .swFastLiteCards{display:grid;gap:10px;width:min(100%,340px)}
html.swSaveData .swFastLiteCards a,html.swSaveData .swFastLiteCards button{display:flex;align-items:center;min-height:52px;padding:0 16px;border:1px solid rgba(255,180,45,.34);border-radius:14px;background:rgba(24,14,4,.62);color:#fff7e5;text-decoration:none;font:800 17px/1.1 Arial,sans-serif;box-shadow:none;cursor:pointer}
.swFastHit{position:absolute;z-index:5;display:block;padding:0;border:0;background:transparent;color:transparent;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,174,36,.22)}
.swFastHit:focus-visible{outline:2px solid rgba(255,216,126,.95);outline-offset:4px;box-shadow:0 0 0 8px rgba(255,174,36,.18)}
.swFastLogo{left:calc(100vw * 48 / 853);top:calc(100vw * 78 / 853);width:calc(100vw * 250 / 853);height:calc(100vw * 92 / 853);min-height:44px;border-radius:10px}
.swFastBurger{left:calc(100vw * 714 / 853);top:calc(100vw * 58 / 853);width:calc(100vw * 104 / 853);height:calc(100vw * 104 / 853);min-height:44px;border-radius:50%}
.swFastStart{left:calc(100vw * 62 / 853);top:calc(100vw * 660 / 853);width:calc(100vw * 372 / 853);height:calc(100vw * 105 / 853);min-height:44px;border-radius:999px}
.swFastEnhancer{left:calc(100vw * 46 / 853);top:calc(100vw * 812 / 853);width:calc(100vw * 510 / 853);height:calc(100vw * 150 / 853);min-height:44px;border-radius:28px}
.swFastMinusa{left:calc(100vw * 46 / 853);top:calc(100vw * 980 / 853);width:calc(100vw * 510 / 853);height:calc(100vw * 150 / 853);min-height:44px;border-radius:28px}
.swFastKaraoke{left:calc(100vw * 46 / 853);top:calc(100vw * 1148 / 853);width:calc(100vw * 510 / 853);height:calc(100vw * 150 / 853);min-height:44px;border-radius:28px}
.swFastEarth{left:calc(100vw * 28 / 853);top:calc(100vw * 1280 / 853);width:calc(100vw * 415 / 853);height:calc(100vw * 360 / 853);min-height:44px;border-radius:50%}
.swFastEarthLabel{left:calc(100vw * 540 / 853);top:calc(100vw * 1360 / 853);width:calc(100vw * 245 / 853);height:calc(100vw * 86 / 853);min-height:44px;border-radius:999px}
}
@media(min-width:1024px){
.swFastMobileHero{display:none!important}
.swFastDesktopHero{position:relative;display:grid;grid-template-columns:minmax(360px, .86fr) minmax(480px,1fr);gap:clamp(34px,5vw,88px);align-items:center;min-height:100svh;padding:clamp(138px,13vh,178px) clamp(72px,6.2vw,118px) clamp(68px,8vh,110px);box-sizing:border-box;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 82% 52%,rgba(255,170,24,.92) 0 10%,rgba(255,112,0,.52) 16%,rgba(255,123,0,.18) 27%,transparent 43%),radial-gradient(circle at 76% 50%,rgba(255,215,97,.18),transparent 36%),linear-gradient(105deg,#020202 0%,#030302 44%,#100701 100%)}
.swFastDesktopHero::before{content:"";position:absolute;right:-18vw;top:8vh;width:min(58vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 34%,rgba(255,245,167,.95) 0 1.2%,transparent 1.7%),radial-gradient(circle at 64% 58%,rgba(255,250,175,.8) 0 1%,transparent 1.45%),radial-gradient(circle at 50% 50%,#ffb21b 0%,#ff7900 26%,#9b2100 58%,#2a0800 100%);box-shadow:0 0 42px rgba(255,185,38,.9),0 0 140px rgba(255,120,0,.58);filter:saturate(1.08);z-index:-1}
.swFastDesktopHero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 52%,rgba(255,173,32,.08),transparent 24%),linear-gradient(90deg,rgba(0,0,0,.52),transparent 54%,rgba(0,0,0,.28));z-index:-1}
.swFastDesktopCopy{max-width:720px}
.swFastDesktopKicker{margin:0 0 24px;color:#ffbd3d;font-size:clamp(13px,1vw,16px);font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.swFastDesktopCopy h1{margin:0;color:#fffdf2;font-size:clamp(58px,6.2vw,112px);line-height:.93;font-weight:400;letter-spacing:0;text-shadow:0 0 22px rgba(255,255,255,.22),0 18px 44px rgba(0,0,0,.58)}
.swFastDesktopLead{max-width:560px;margin:28px 0 0;color:rgba(255,248,226,.86);font-size:clamp(20px,1.7vw,30px);line-height:1.36}
.swFastDesktopCta{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;width:min(360px,100%);min-height:88px;margin-top:46px;padding:0 36px;border:1px solid rgba(255,235,174,.86);border-radius:999px;background:linear-gradient(180deg,#ffbf37,#ad5a02);box-shadow:0 0 0 8px rgba(255,150,12,.12),0 18px 54px rgba(255,132,0,.34),inset 0 1px 0 rgba(255,255,255,.7);color:#fffaf0;font-size:30px;font-weight:500;cursor:pointer;touch-action:manipulation}
.swFastDesktopCta b{font-size:42px;font-weight:400;line-height:1}
.swFastDesktopCta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.swFastDesktopCta:focus-visible{outline:3px solid rgba(255,239,179,.98);outline-offset:6px}
.swFastDesktopCards{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:22px;align-self:end;margin-top:clamp(190px,22vh,300px)}
.swFastDesktopCards a,.swFastDesktopCards button{min-height:190px;padding:28px 26px;border:1px solid rgba(255,170,25,.42);border-radius:24px;background:linear-gradient(160deg,rgba(45,22,4,.84),rgba(10,7,4,.78));box-shadow:0 22px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12);color:#fff7e7;text-align:left;text-decoration:none;font:inherit;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.swFastDesktopCards i{display:grid;place-items:center;width:58px;height:58px;margin:0 0 38px;border:1px solid rgba(255,182,38,.45);border-radius:50%;color:#ffc13e;font-size:30px;font-style:normal;background:rgba(255,149,0,.12)}
.swFastDesktopCards span{display:block;font-size:clamp(22px,1.7vw,30px);font-weight:500;line-height:1.1}
.swFastDesktopCards small{display:block;margin-top:10px;color:rgba(255,242,213,.82);font-size:clamp(15px,1vw,17px);line-height:1.28}
.swIndexV601Logo{display:none!important;visibility:hidden!important;pointer-events:none!important}
.swFastMenuPanel{right:3.5vw;left:auto;top:calc(3.4vh + 66px);bottom:auto;width:230px;padding:8px;border:1px solid rgba(255,184,58,.42);border-radius:18px;background:rgba(14,8,4,.92);box-shadow:0 24px 64px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.12);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.swFastMenuPanel.is-open{display:block;opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.swFastMenuPanel a{min-height:44px;margin:0;padding:0 14px;border:0;border-radius:12px;background:transparent;box-shadow:none;font-size:15px}
}
/* v707: keep result/payment overlays clean on mobile, without touching payment logic. */
html body.sw-index,
html body.sw-index #thanks.show{
overflow-x:hidden!important;
}
html body.sw-index:has(#thanks.show) #audioResultCta,
html body.sw-index:has(#thanks.show) .audioResultCta,
html body.sw-payment-active #audioResultCta,
html body.sw-payment-active .audioResultCta{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
html body.sw-index .audioResultCta{
left:0!important;
right:0!important;
width:100vw!important;
max-width:100vw!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
html body.sw-index .audioResultCta .swResultPayBadge,
html body.sw-index .audioResultCta .swResultReadyCopy{
max-width:100%!important;
min-width:0!important;
overflow:hidden!important;
}
/* codex-index-mobile-live-content-v913: live mobile content, not baked text inside the reference bitmap. */
@media(max-width:1023px){
html:not(.swSaveData) .swFastMobileHero{
min-height:100svh;
padding:calc(26px + env(safe-area-inset-top,0px)) 22px 28px;
display:flex;
align-items:flex-start;
overflow:hidden;
background:
radial-gradient(circle at 88% 35%,rgba(255,211,92,.72) 0 2.5%,rgba(255,145,0,.66) 13%,rgba(255,104,0,.28) 30%,transparent 48%),
radial-gradient(circle at 92% 44%,rgba(255,132,0,.34),transparent 42%),
linear-gradient(110deg,#020201 0%,#030302 56%,#160802 100%);
}
html:not(.swSaveData) .swFastMobileHero::before{
content:"";
position:absolute;
right:-50vw;
top:9vh;
width:112vw;
aspect-ratio:1;
border-radius:50%;
background:
radial-gradient(circle at 42% 36%,rgba(255,250,186,.92) 0 1.2%,transparent 1.8%),
radial-gradient(circle at 63% 58%,rgba(255,246,148,.75) 0 1%,transparent 1.5%),
radial-gradient(circle at 52% 50%,#ffbd28 0%,#ff8500 30%,#982200 61%,#260700 100%);
box-shadow:0 0 38px rgba(255,184,38,.78),0 0 120px rgba(255,117,0,.52);
opacity:.92;
pointer-events:none;
}
html:not(.swSaveData) .swFastMobileHero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.50) 54%,rgba(0,0,0,.10) 100%);
pointer-events:none;
}
html:not(.swSaveData) .swFastLiteMobile{
position:relative;
z-index:3;
display:block;
width:100%;
max-width:390px;
min-height:calc(100svh - 54px);
padding-top:4px;
color:#fff8e8;
}
html:not(.swSaveData) .swFastLiteBrand{
display:block;
width:154px;
height:74px;
min-height:48px;
margin:0 86px 42px 0;
overflow:hidden;
background:url("/assets/brand/logosuno-sticker-320.webp") center/contain no-repeat;
color:#fff8e8;
text-decoration:none;
font-size:0;
line-height:0;
text-shadow:0 0 20px rgba(255,186,56,.22);
filter:drop-shadow(0 10px 24px rgba(0,0,0,.42)) drop-shadow(0 0 14px rgba(45,156,255,.16));
}
html:not(.swSaveData) .swFastLiteKicker{
margin:0 0 12px;
color:#ffbe38;
font-size:12px;
font-weight:900;
letter-spacing:.12em!important;
text-transform:uppercase;
}
html:not(.swSaveData) .swFastLiteMobile h1{
margin:0;
max-width:330px;
color:#fffdf5;
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(44px,13.2vw,60px);
line-height:1.06;
font-weight:400;
text-shadow:0 14px 34px rgba(0,0,0,.72),0 0 18px rgba(255,255,255,.12);
}
html:not(.swSaveData) .swFastLiteLead{
max-width:310px;
margin:22px 0 0;
color:rgba(255,246,225,.86);
font-size:18px;
line-height:1.44;
}
html:not(.swSaveData) .swFastLiteCta{
display:flex;
align-items:center;
justify-content:center;
width:min(100%,340px);
min-height:66px;
margin:28px 0 18px;
border:1px solid rgba(255,237,180,.92);
border-radius:999px;
background:linear-gradient(180deg,#ffc443,#aa5a04);
box-shadow:0 0 0 8px rgba(255,150,12,.10),0 16px 42px rgba(255,145,0,.30),inset 0 1px 0 rgba(255,255,255,.62);
color:#fffaf0;
font:900 22px/1 Arial,sans-serif;
cursor:pointer;
touch-action:manipulation;
}
html:not(.swSaveData) .swFastLiteCta::after{
content:"→";
margin-left:18px;
font-size:26px;
font-weight:400;
}
html:not(.swSaveData) .swFastLiteCards{
display:grid;
gap:10px;
width:min(100%,340px);
}
html:not(.swSaveData) .swFastLiteCards a,
html:not(.swSaveData) .swFastLiteCards button{
display:flex;
align-items:center;
min-height:58px;
padding:0 17px;
border:1px solid rgba(255,180,45,.36);
border-radius:14px;
background:linear-gradient(180deg,rgba(31,17,5,.82),rgba(8,5,2,.78));
color:#fff7e5;
text-decoration:none;
font:900 17px/1.1 Arial,sans-serif;
box-shadow:0 12px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
cursor:pointer;
}
html:not(.swSaveData) .swFastLiteCards a::after,
html:not(.swSaveData) .swFastLiteCards button::after{
content:"→";
margin-left:auto;
color:#ffc13e;
font-size:22px;
font-weight:400;
}
html:not(.swSaveData) .swFastHit:not(.swFastBurger){
display:none!important;
}
html:not(.swSaveData) .swFastBurger{
position:fixed;
left:auto;
right:22px;
top:calc(28px + env(safe-area-inset-top,0px));
z-index:100;
width:56px;
height:56px;
min-height:56px;
border-radius:50%;
border:1px solid rgba(255,190,68,.66);
background:rgba(20,10,2,.64);
box-shadow:0 0 28px rgba(255,173,26,.28),inset 0 1px 0 rgba(255,255,255,.14);
}
html:not(.swSaveData) .swFastBurger::before{
content:"";
position:absolute;
left:17px;
right:17px;
top:18px;
height:2px;
border-radius:99px;
background:#ffe7a6;
box-shadow:0 9px 0 #ffe7a6,0 18px 0 #ffe7a6;
}
}
@media(max-width:374px){
html:not(.swSaveData) .swFastMobileHero{padding-left:18px;padding-right:18px}
html:not(.swSaveData) .swFastLiteBrand{width:136px;height:66px;margin-bottom:32px}
html:not(.swSaveData) .swFastLiteMobile h1{font-size:42px}
html:not(.swSaveData) .swFastLiteLead{font-size:16px;max-width:292px}
html:not(.swSaveData) .swFastLiteCta{min-height:62px;margin-top:22px}
html:not(.swSaveData) .swFastLiteCards a,
html:not(.swSaveData) .swFastLiteCards button{min-height:54px}
}
/* codex-index-processing-orb-v920: real waveform, circular progress, detailed worker cards. */
.swFastProcessOrb{display:none}
@media(min-width:1024px){
.swFastDesktopCards{grid-column:2;grid-row:1}
.swFastProcessOrb{
--sw-process-pct:0;
grid-column:2;
grid-row:1;
justify-self:center;
align-self:center;
position:relative;
z-index:4;
width:clamp(250px,18vw,350px);
aspect-ratio:1;
border-radius:50%;
display:grid;
place-items:center;
opacity:0;
visibility:hidden;
transform:translate3d(7vw,-2vh,0) scale(.22);
pointer-events:none;
overflow:visible;
isolation:isolate;
border:1px solid rgba(255,222,128,.36);
background:
radial-gradient(circle at 50% 46%,rgba(255,246,184,.16),transparent 18%),
radial-gradient(circle at 50% 50%,rgba(255,184,45,.20),rgba(90,34,2,.78) 48%,rgba(8,4,1,.86) 72%,rgba(2,1,0,.92) 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 38px rgba(255,160,28,.22);
transition:opacity .28s ease,visibility .28s ease,transform .62s cubic-bezier(.18,.88,.22,1.04),width .62s cubic-bezier(.18,.88,.22,1.04),box-shadow .42s ease;
}
.swFastProcessOrb::before{
content:"";
position:absolute;
inset:-12px;
z-index:0;
border-radius:50%;
background:
conic-gradient(from -90deg,rgba(255,255,246,1) 0 calc(var(--sw-process-pct) * 1%),rgba(255,182,32,.34) 0 100%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
box-shadow:0 0 22px rgba(255,205,72,.34),0 0 54px rgba(255,134,0,.26);
pointer-events:none;
transform:translateZ(0);
}
.swFastProcessOrb::after{
content:"";
position:absolute;
inset:-20px;
z-index:0;
border-radius:50%;
background:
radial-gradient(circle,transparent 66%,rgba(255,169,19,.20) 69%,rgba(255,221,91,.78) 72%,rgba(255,132,0,.26) 77%,transparent 82%),
conic-gradient(from 0deg,rgba(255,209,76,.18),rgba(255,132,0,.42),rgba(255,237,132,.22),rgba(255,132,0,.36),rgba(255,209,76,.18));
opacity:.88;
pointer-events:none;
filter:drop-shadow(0 0 18px rgba(255,177,37,.38)) drop-shadow(0 0 44px rgba(255,104,0,.22));
}
.swFastProcessOrb__rings{position:absolute;z-index:1;inset:8%;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle,rgba(255,196,61,.18) 0 1px,transparent 1px 18px),repeating-conic-gradient(from 0deg,rgba(255,203,82,.20) 0 1deg,transparent 1deg 10deg);opacity:.72;animation:swFastOrbSpin 10s linear infinite;transform:translateZ(0);will-change:transform}
.swFastProcessOrb__sun{
position:absolute;
z-index:4;
left:50%;
top:50%;
width:clamp(46px,4.8vw,76px);
aspect-ratio:1;
border-radius:50%;
transform:translate(-50%,-50%) translateZ(0);
background:
radial-gradient(circle at 34% 28%,#fff8c9 0 12%,#ffd45c 20%,#ff9a16 48%,#8c3000 78%,rgba(42,12,0,.86) 100%);
box-shadow:0 0 18px rgba(255,236,147,.78),0 0 38px rgba(255,167,28,.58),0 0 76px rgba(255,110,0,.34);
pointer-events:none;
animation:swFastSunCore 1.15s linear infinite,swFastSunPulse 1.8s ease-in-out infinite;
}
.swFastProcessOrb__sun::before{
content:"";
position:absolute;
inset:-15px;
border-radius:50%;
background:repeating-conic-gradient(from 0deg,rgba(255,229,118,.92) 0 7deg,transparent 7deg 18deg);
-webkit-mask:radial-gradient(circle,transparent 47%,#000 48%,#000 62%,transparent 63%);
mask:radial-gradient(circle,transparent 47%,#000 48%,#000 62%,transparent 63%);
opacity:.72;
}
.swFastProcessOrb__sun::after{
content:"";
position:absolute;
inset:10px;
border-radius:50%;
border:1px solid rgba(255,255,255,.42);
box-shadow:inset 0 0 10px rgba(255,255,255,.28);
}
.swFastProcessOrb canvas{position:relative;z-index:2;width:82%;height:42%;filter:drop-shadow(0 0 12px rgba(255,209,96,.42));transform:translateZ(0)}
.swFastProcessOrb__copy{position:absolute;z-index:3;left:13%;right:13%;bottom:17%;display:grid;gap:5px;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.72)}
.swFastProcessOrb__copy b{font-size:clamp(18px,1.4vw,25px);line-height:1.05;color:#fff7d9}
.swFastProcessOrb__copy span{font-size:clamp(12px,.86vw,14px);line-height:1.2;color:rgba(255,230,176,.84)}
html.upload-active .swFastProcessOrb{
grid-column:1/-1;
grid-row:1/-1;
position:absolute;
right:clamp(92px,8vw,160px);
top:clamp(-20px,-1.2vh,-8px);
opacity:1;
visibility:visible;
width:clamp(360px,31vw,560px);
transform:translate3d(0,0,0) scale(1);
box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 58px rgba(255,171,34,.32),0 0 160px rgba(255,104,0,.20);
}
html.upload-active .swFastDesktopHero{grid-template-rows:minmax(350px,1fr) auto;align-items:center}
html.upload-active .swFastDesktopCards{
grid-column:1/-1;
grid-row:1/-1;
position:absolute;
right:clamp(64px,5.6vw,108px);
bottom:clamp(28px,4.2vh,54px);
width:min(53vw,760px);
grid-row:auto;
align-self:auto;
margin-top:0;
perspective:900px;
}
html.upload-active .swFastDesktopCards a,
html.upload-active .swFastDesktopCards button{
min-height:198px;
padding:24px 24px 22px;
transform:translate3d(0,var(--sw-card-y,0),0) rotateX(var(--sw-card-rx,0deg));
transition:transform .32s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease,opacity .28s ease;
}
html.upload-active .swFastDesktopCards [data-process-card="0"]{--sw-card-y:4px;--sw-card-rx:1.4deg}
html.upload-active .swFastDesktopCards [data-process-card="1"]{--sw-card-y:-2px;--sw-card-rx:-1deg}
html.upload-active .swFastDesktopCards [data-process-card="2"]{--sw-card-y:6px;--sw-card-rx:1.8deg}
html.upload-active .swFastDesktopCards i{width:52px;height:52px;margin-bottom:22px;font-size:27px}
html.upload-active .swFastDesktopCards span{font-size:clamp(20px,1.45vw,27px);line-height:1.08}
html.upload-active .swFastDesktopCards small{margin-top:12px;font-size:clamp(12px,.86vw,14px);line-height:1.35;color:rgba(255,239,204,.86)}
html.upload-active .swFastDesktopCards .is-active-process{
border-color:rgba(255,223,118,.92);
background:linear-gradient(160deg,rgba(92,43,4,.92),rgba(22,10,2,.84));
box-shadow:0 28px 76px rgba(0,0,0,.44),0 0 32px rgba(255,176,38,.30),inset 0 1px 0 rgba(255,255,255,.18);
animation:swFastCardPulse 1.4s ease-in-out infinite;
}
html.upload-active .swFastDesktopCards .is-active-process i{color:#fff4b0;border-color:rgba(255,228,136,.88);background:rgba(255,169,21,.22)}
html.upload-active .swFastDesktopCards .is-switching-process span,
html.upload-active .swFastDesktopCards .is-switching-process small{
animation:swFastCardSwitch .48s cubic-bezier(.2,.8,.2,1) both;
}
}
@media(max-width:1023px){
html.upload-active:not(.swSaveData) .swFastLiteCards a,
html.upload-active:not(.swSaveData) .swFastLiteCards button{
transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,transform .25s ease;
}
html.upload-active:not(.swSaveData) .swFastLiteCards .is-active-process{
border-color:rgba(255,223,118,.88);
background:linear-gradient(180deg,rgba(72,36,5,.90),rgba(13,7,2,.84));
box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 22px rgba(255,176,38,.22),inset 0 1px 0 rgba(255,255,255,.14);
transform:translateX(4px);
}
}
@keyframes swFastOrbSpin{to{transform:rotate(360deg) translateZ(0)}}
@keyframes swFastCardPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes swFastCardSwitch{0%{opacity:.36;transform:translate3d(0,10px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes swFastSunCore{to{transform:translate(-50%,-50%) rotate(360deg) translateZ(0)}}
@keyframes swFastSunPulse{0%,100%{opacity:.86;box-shadow:0 0 16px rgba(255,236,147,.62),0 0 34px rgba(255,167,28,.46),0 0 68px rgba(255,110,0,.24)}50%{opacity:1;box-shadow:0 0 24px rgba(255,246,188,.86),0 0 48px rgba(255,177,34,.72),0 0 92px rgba(255,117,0,.40)}}
@media(prefers-reduced-motion:reduce){
.swFastProcessOrb__rings,
.swFastProcessOrb__sun,
html.upload-active .swFastDesktopCards .is-active-process,
html.upload-active .swFastDesktopCards .is-switching-process span,
html.upload-active .swFastDesktopCards .is-switching-process small{animation:none!important}
}