/* FLUX: a responsive material system rather than a barely tinted frame. */
body{--energy:#ffc773;--deep:#8c450f;--glow:#ff9c3255;--wash:#ffbd731f;background:#080711}
body[data-accent=violet]{--energy:#d5a1ff;--deep:#572ac2;--glow:#a457ff77;--wash:#b975ff30}
body[data-accent=ocean]{--energy:#6affdc;--deep:#007e95;--glow:#16f3d377;--wash:#28ecce2a}
body[data-accent=rose]{--energy:#ffacd8;--deep:#a92474;--glow:#ff59bd77;--wash:#ff79bc2d}
.phone-stage{background:linear-gradient(90deg,#080711ed,#08071155 55%,#08071166),url('/phone/flux-universe.png') center/cover;grid-template-columns:1fr minmax(300px,390px) .65fr;min-height:850px;transition:background .6s}
.stage-aurora{background:radial-gradient(ellipse at 60% 60%,var(--glow),transparent 65%);mix-blend-mode:screen;animation:flux-breathe 8s ease-in-out infinite alternate}
.stage-caption h1 span,.studio .eyebrow,.stage-side-note p{color:var(--energy)}
.stage-caption h1{font-weight:700}.stage-caption>p:not(.eyebrow){color:#d6cfe8}
.device{padding:12px!important;background:linear-gradient(125deg,#fff,var(--energy) 8%,var(--deep) 22%,var(--energy) 46%,#fff 52%,var(--deep) 77%,var(--energy))!important;box-shadow:inset 0 0 0 2px #fff9,0 0 18px var(--energy),0 0 85px var(--glow),24px 40px 70px #000b!important;transition:background .6s,box-shadow .6s,border-radius .5s}
.device-screen{background:linear-gradient(165deg,#080b1880,var(--wash) 50%,#050817dc),url('/phone/flux-universe.png') 65% center/auto 100%!important;box-shadow:inset 0 0 70px var(--glow);border:2px solid #080710}
body[data-wallpaper=midnight] .device-screen{background:radial-gradient(ellipse at 50% 0%,var(--deep),#080710 65%)!important}
body[data-wallpaper=aurora] .device-screen{background:radial-gradient(ellipse at 0 15%,var(--energy),transparent 55%),radial-gradient(ellipse at 100% 65%,var(--deep),transparent 65%),linear-gradient(145deg,#26103a,#051b2e)!important}
.device-screen:before{background:linear-gradient(120deg,#ffffff22,transparent 23%,transparent 65%,var(--wash));box-shadow:inset 0 0 30px var(--wash)}
.device-welcome h2 em,.device-wordmark{color:var(--energy)!important;text-shadow:0 0 22px var(--glow)}
.app-glass{background:linear-gradient(145deg,#ffffff55,var(--deep) 60%,#090b20)!important;color:#fff!important;border-color:var(--energy)!important;box-shadow:inset 0 2px 2px #fffc,0 7px 0 #0003,0 8px 20px var(--glow);border-radius:16px;transform:translateZ(0)}
.device-widget{background:linear-gradient(110deg,var(--deep),#141328c9);border-color:var(--energy);box-shadow:0 0 25px var(--glow)}
.device-widget small{color:#e0dcec}.device-dock{background:linear-gradient(120deg,var(--wash),#fff2);border-color:var(--energy)}
.device-dock button{color:var(--energy)!important}.building-phone .stage-side-note{opacity:1}.stage-side-note{margin-left:5px;max-width:220px}.stage-side-note p{font-size:18px}.stage-side-note small{color:#c3b9d6}
.flux-orb{position:relative;width:150px;height:150px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#fff7 8%,var(--energy) 20%,var(--deep) 58%,#130c25 77%);box-shadow:inset -12px -15px 25px #0008,inset 5px 5px 15px #fff9,0 0 55px var(--glow);animation:flux-breathe 5s infinite alternate}
.flux-orb b{font-size:52px;color:white;text-shadow:0 0 20px #fff}.flux-orb i{position:absolute;inset:-25px;border:2px solid var(--energy);border-radius:50%;transform:rotateX(65deg) rotateZ(-25deg);box-shadow:0 0 15px var(--glow)}.flux-orb i:nth-child(2){inset:-12px;transform:rotateY(65deg) rotateZ(25deg)}
#flux-swatches{display:flex;gap:10px;margin:18px 0}#flux-swatches button{border-radius:50%;width:28px;height:28px;border:2px solid #fff5;box-shadow:inset 0 1px 4px #fff9,0 4px 12px #0005}#flux-swatches button[aria-pressed=true]{outline:2px solid white;outline-offset:4px}.flux-launch{display:block;margin-top:24px;background:none;border:0;border-bottom:1px solid var(--energy);padding:8px 0;color:var(--energy);font-size:11px}
.gold{background:linear-gradient(120deg,#fff,var(--energy));box-shadow:0 8px 30px var(--glow)}.studio-choice.selected{border-color:var(--energy);background:var(--wash);box-shadow:0 0 20px var(--glow)}.studio-choice small{color:#bcb4d0}.studio>p:not(.eyebrow){color:#c3bcd3}.studio .studio-note{color:#b6acc8!important}.studio-steps .done{background:var(--energy)}
.world-intro{padding:85px 7%;display:grid;grid-template-columns:1fr 1fr;gap:50px;background:radial-gradient(ellipse at 80% 20%,var(--wash),transparent 75%),#0c0a17;border-bottom:1px solid #fff2}.world-intro p:not(.eyebrow){max-width:430px;color:#bdb5cc}.world-intro .gold{margin-top:15px}.world-preview{min-height:320px;border:1px solid #fff3;border-radius:35px;position:relative;display:flex;flex-direction:column;justify-content:center;padding:40px;background:linear-gradient(140deg,#ffffff12,#ffffff02);overflow:hidden;box-shadow:inset 0 1px #fff4,0 25px 60px #0005}.world-preview b{font:600 42px/1.15 Manrope,Arial;position:relative;z-index:1}.world-preview small{margin-top:30px;font-size:8px;letter-spacing:1px;color:var(--energy)}.world-preview>span{position:absolute;font-size:62px;font-weight:700;color:var(--energy);opacity:.22;right:15px;top:0;transform:rotate(-15deg)}.world-preview>span:nth-child(2){top:90px;right:20px;font-size:80px}.world-preview>span:nth-child(3){top:200px;right:40px}
#world-modal{width:min(920px,94vw);max-height:90svh;background:radial-gradient(ellipse at top right,var(--wash),transparent),#100e20;padding:34px;border-color:var(--energy)}.world-close{float:right;background:none;border:0;color:white;font-size:28px}.world-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.world-tabs button{border:1px solid #fff3;border-radius:30px;padding:9px 14px;background:#fff1;color:#c9c0dc;font-size:11px}.world-tabs button[aria-selected=true]{color:#100e20;background:var(--energy)}.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.world-panel{border:1px solid #fff2;border-radius:20px;padding:22px;background:#ffffff08}.world-panel h3{margin:0 0 12px}.world-panel p{color:#c3b9d5!important}.world-panel small{color:#b5a9ca}.world-panel button:not(.gold){border:1px solid #fff3;background:#fff1;color:#fff;border-radius:10px;padding:10px 14px}.phrase-display{font-size:38px;line-height:1.5;margin:20px 0 5px;color:var(--energy)}.phrase-hint{color:#b9accd;font-size:13px;margin-bottom:20px}.clock-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #fff2}.clock-row b{font-size:25px;color:var(--energy)}.clock-row small{display:block;font-size:10px}.world-range{accent-color:var(--energy);padding:0!important}.passport-visual{border-radius:24px;padding:30px;background:linear-gradient(135deg,var(--deep),#140c25);border:1px solid var(--energy);box-shadow:inset 0 1px #fff7,0 20px 40px #0006;min-height:250px;display:flex;flex-direction:column;justify-content:space-between}.passport-visual strong{font:600 30px Manrope,Arial;overflow-wrap:anywhere}.passport-visual span{color:var(--energy);letter-spacing:2px;font-size:10px}.world-source a{color:var(--energy);text-decoration:underline}.world-source p{font-size:12px}.world-panel label{color:#d2c7e0}.world-panel .gold{color:#120c20}
@keyframes flux-breathe{to{filter:hue-rotate(12deg);transform:translateY(-8px);opacity:.85}}
@media(max-width:1000px){.phone-stage,.building-phone .phone-stage{grid-template-columns:1fr 340px}.stage-side-note{display:none}}
@media(max-width:640px){.phone-stage{min-height:760px;padding-top:35px}.building-phone .phone-stage{padding-top:25px;gap:0}.building-phone .phone-float{transform:scale(.78);height:490px;margin-bottom:-10px}.building-phone .stage-caption{position:relative;margin-top:0}.world-intro{padding:55px 6%;grid-template-columns:1fr;gap:30px}.world-preview{min-height:270px}.world-grid{grid-template-columns:1fr}#world-modal{padding:24px}.world-tabs{gap:6px}.world-tabs button{font-size:10px;padding:8px 11px}.device{box-shadow:inset 0 0 0 2px #fff9,0 0 14px var(--energy),0 0 50px var(--glow),20px 30px 50px #000b!important}.studio-options{margin-top:12px}.studio-choice{padding:12px}.studio-choice.selected{box-shadow:0 0 12px var(--glow)}.world-preview b{font-size:37px}}
@media(prefers-reduced-motion:reduce){.flux-orb,.stage-aurora{animation:none}}

.phone-float>#flux-swatches{position:relative;z-index:3;margin:20px 0 0;padding:10px 16px;border:1px solid #fff3;border-radius:30px;background:#0b071bc9;backdrop-filter:blur(15px)}
@media(max-width:640px){.building-phone .phone-float>#flux-swatches{margin-top:14px}.building-phone .phone-float{height:520px}.phone-float>#flux-swatches button{width:31px;height:31px}}
.new-abilities{padding:65px 7%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;background:radial-gradient(ellipse at 65% 0%,var(--wash),transparent 65%),#0e0919;border-block:1px solid #d6aaff33;align-items:center}.new-abilities>div h2{font-size:34px}.new-abilities>a{display:block;padding:28px;border:1px solid #c49ae044;border-radius:26px;background:linear-gradient(135deg,#c297ff20,#5cd6cf08);box-shadow:inset 0 1px #fff3,0 12px 35px #0003;transition:transform .3s}.new-abilities>a:hover{transform:translateY(-6px)}.new-abilities>a>span{display:grid;place-items:center;width:65px;height:65px;font-size:38px;color:#e0b9ff;border:1px solid #d9b7ff77;border-radius:22px;background:radial-gradient(circle at 20% 10%,#fff5,#7739b966,#1d1237);box-shadow:inset 0 1px #fff8,0 0 30px #ac6df333;margin-bottom:24px}.new-abilities>a:nth-child(3)>span{color:#a4ffe5;background:radial-gradient(circle at 20% 10%,#fff5,#08796877,#13152d);border-color:#a4ffe577}.new-abilities small{font-size:8px;letter-spacing:1.4px;color:#b69cce}.new-abilities h3{font-size:22px;margin:12px 0}.new-abilities p{font-size:12px;color:#b7a7c7;line-height:1.8}.new-abilities b{display:block;font-size:11px;color:var(--energy);margin-top:20px}.living-control{display:block;border:0;border-bottom:1px solid #fff3;border-radius:0;background:#0d0817aa;padding:7px 10px;color:#d8c4ed;font-size:9px;margin-top:10px}.device-screen:before{background:radial-gradient(circle at var(--light-x,30%) var(--light-y,20%),#ffffff55,transparent 36%),linear-gradient(120deg,#ffffff12,transparent 45%,var(--wash));transition:background .15s}.flux-orb{cursor:pointer}.companion-wave{animation:companion-wave 1s ease-out!important}body[data-motion=orbit]:not(.building-phone) .device{animation:shell-orbit 9s ease-in-out infinite alternate}body[data-motion=still] .device,body[data-motion=still] .flux-orb,body[data-motion=still] .stage-aurora{animation:none!important}.living-control:focus-visible,.flux-orb:focus-visible{outline:2px solid white;outline-offset:5px}@keyframes companion-wave{40%{transform:scale(1.17) rotate(20deg);box-shadow:0 0 120px var(--energy),inset 4px 4px 25px #fff8}100%{transform:scale(1)}}@keyframes shell-orbit{0%{transform:rotateY(-15deg) rotateZ(-3deg) translateY(-5px)}100%{transform:rotateY(15deg) rotateZ(3deg) translateY(5px)}}@media(max-width:1000px){.new-abilities{grid-template-columns:1fr 1fr}.new-abilities>div{grid-column:1/-1}}@media(max-width:640px){.new-abilities{padding:45px 6%;grid-template-columns:1fr}.new-abilities>div h2{font-size:32px}.building-phone .phone-float{height:550px}.new-abilities>a{padding:25px}.living-control{font-size:11px}.phone-stage:not(.building-phone .phone-stage){padding-bottom:70px}}@media(prefers-reduced-motion:reduce){.companion-wave,.device{animation:none!important}.new-abilities>a:hover{transform:none}}
