.finale{--finale-rgb:255,96,127;position:relative;isolation:isolate;padding:68px 5% 65px;background:#090b12;color:#eeebe6;overflow:hidden;border-top:1px solid #ffffff1a}
.finale:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 55%,rgba(var(--finale-rgb),.08),transparent 70%);transition:background .8s}
.finale-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:45px}
.finale-heading .section-code{color:#ada4b0}
.finale-heading h2{font-size:clamp(56px,6.6vw,100px);font-weight:500;line-height:.89;letter-spacing:-2px;margin-top:22px}
.finale-heading h2 em{font-style:normal;color:rgba(var(--finale-rgb),1);transition:color .8s}
.finale-heading p{font-size:11px;line-height:1.9;color:#b5b1bc;padding-bottom:2px}
.finale-stage{position:relative;isolation:isolate;min-height:370px;aspect-ratio:2.6;max-height:560px;perspective:900px;display:grid;place-items:center;margin-bottom:40px}
.finale-halo{position:absolute;inset:-15% 5%;background:radial-gradient(ellipse,rgba(var(--finale-rgb),.19),transparent 65%);filter:blur(20px);animation:finale-breathe 8s ease-in-out infinite alternate;pointer-events:none}
.finale-screen{position:relative;width:78%;height:84%;min-height:290px;display:flex;flex-direction:column;padding:25px 30px 22px;border:1px solid rgba(var(--finale-rgb),.7);background:radial-gradient(ellipse at 50% 15%,rgba(var(--finale-rgb),.15),#080a12 85%);box-shadow:0 0 0 7px #0b0d14,0 0 0 8px #ffffff14,0 0 60px rgba(var(--finale-rgb),.13),inset 0 0 45px rgba(var(--finale-rgb),.035);isolation:isolate}
.finale-screen-top,.finale-screen-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:8px;letter-spacing:1.4px;color:#bbb3c5}
.finale-screen-dot{width:4px;height:4px;border-radius:50%;background:rgba(var(--finale-rgb),1);box-shadow:0 0 10px rgba(var(--finale-rgb),1)}
.finale-screen-copy{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;min-height:0;text-align:center;padding:24px 0}
.finale-screen-intro{font-size:8px;letter-spacing:3px;color:#9e9aa8;margin-bottom:15px}
#finale-name-preview{font-family:var(--display);font-weight:600;font-size:clamp(35px,6vw,94px);line-height:.98;text-transform:uppercase;max-width:94%;overflow-wrap:anywhere;letter-spacing:-1.5px;color:#fff8f4;text-shadow:0 0 30px rgba(var(--finale-rgb),.4)}
.finale-screen-signature{font-size:8px;letter-spacing:2px;color:#b5a7b5;margin-top:17px}
.finale-screen-grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(#ffffff22 .6px,transparent .8px);background-size:4px 4px;opacity:.22}
.finale-screen-grid:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(var(--finale-rgb),.08) 50%,transparent 55%);background-size:100% 200%;animation:finale-scan 9s linear infinite}
.finale-wing{position:absolute;top:22%;width:11%;height:55%;border:1px solid rgba(var(--finale-rgb),.45);background:repeating-linear-gradient(0deg,transparent 0 3px,#0007 3px 4px),linear-gradient(110deg,rgba(var(--finale-rgb),.4),#090b12 95%);box-shadow:0 0 25px rgba(var(--finale-rgb),.09)}
.finale-wing-left{left:0;transform:rotateY(25deg)}.finale-wing-right{right:0;transform:rotateY(-25deg)}
.finale-floor{position:absolute;left:7%;right:7%;bottom:-3%;height:25%;transform:rotateX(64deg);transform-origin:50% 0;background:linear-gradient(rgba(var(--finale-rgb),.14),transparent);filter:blur(10px);z-index:-1}
.finale-beams{position:absolute;inset:-15% 0 -10%;pointer-events:none;z-index:-1;overflow:hidden}
.finale-beams i{position:absolute;bottom:4%;left:5%;width:28%;height:110%;clip-path:polygon(49% 100%,51% 100%,85% 0,15% 0);background:linear-gradient(to top,rgba(var(--finale-rgb),.22),transparent);transform-origin:50% 100%;animation:finale-beam 14s ease-in-out infinite alternate;mix-blend-mode:screen}
.finale-beams i:nth-child(2){left:65%;animation-delay:-8s;animation-direction:alternate-reverse}.finale-beams i:nth-child(3){left:25%;animation-delay:-5s;opacity:.5}.finale-beams i:nth-child(4){left:45%;animation-delay:-10s;opacity:.4}
.finale-console{display:grid;grid-template-columns:minmax(230px,1.3fr) minmax(310px,1.2fr) auto;gap:45px;padding:25px 0;border-top:1px solid #ffffff23;border-bottom:1px solid #ffffff23;align-items:end}
.finale-name-control>label,.finale-mood-control>span{display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:1.4px;color:#c8c0cc;margin-bottom:14px}
.finale-name-control>label>span{font-size:8px;letter-spacing:0;color:#8e8694}
.finale-name-control input{width:100%;height:44px;border:0;border-bottom:1px solid #ffffff38;background:transparent;border-radius:0;padding:5px 0;color:#fff1ec;font-size:14px;outline-offset:5px}
.finale-name-control input::placeholder{color:#77717e;font-size:12px}
.finale-mood-control>div{display:flex;gap:7px}
.finale-mood-control button{display:flex;align-items:center;gap:7px;border:1px solid #ffffff25;border-radius:30px;padding:12px 14px;font-size:10px;color:#b9b1c0;min-height:44px;transition:border-color .3s,background .3s}
.finale-mood-control button[aria-pressed=true]{border-color:rgba(var(--finale-rgb),.7);color:#fff5f0;background:rgba(var(--finale-rgb),.07)}
.finale-mood-control button:hover{border-color:#ffffff70}
.finale-mood-control i{width:4px;height:4px;border-radius:50%;background:#ff607f}.finale-mood-control [data-finale-mood=elegant] i{background:#e6bd7a}.finale-mood-control [data-finale-mood=immersive] i{background:#aa95ff}
.finale-motion{height:44px;font-size:9px;color:#bcb1c0;border-bottom:1px solid #ffffff2a;white-space:nowrap;padding:0}
.finale-actions{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px}
.finale-actions>span{font-size:8px;letter-spacing:1.2px;color:#a198a7}
.finale-actions>div{display:flex;gap:28px;align-items:center}
.finale-actions .underlink{font-size:10px}
.finale-cta{display:flex;align-items:center;gap:24px;min-height:52px;padding:12px 20px 12px 24px;border:1px solid rgba(var(--finale-rgb),.5);border-radius:50px;background:rgba(var(--finale-rgb),.07);font-size:11px;box-shadow:0 0 30px rgba(var(--finale-rgb),.05);transition:background .3s,border-color .3s}
.finale-cta:hover{background:rgba(var(--finale-rgb),.13);border-color:rgba(var(--finale-rgb),1)}
.finale-cta .ui-icon{width:17px;height:17px}
@keyframes finale-breathe{to{opacity:.5;transform:scale(.94)}}
@keyframes finale-scan{to{background-position:0 200%}}
@keyframes finale-beam{from{transform:rotate(-30deg)}to{transform:rotate(30deg)}}
@media(max-width:1100px){.finale-console{grid-template-columns:1fr 1fr;gap:25px}.finale-motion{grid-column:2;justify-self:end;height:30px}.finale-stage{min-height:340px}.finale-screen{padding:22px}.finale-actions>span{max-width:200px;line-height:1.9}.finale-actions>div{gap:20px}}
@media(max-width:760px){.finale{padding:43px 7% 45px}.finale-heading{display:block;margin-bottom:30px}.finale-heading h2{font-size:65px;letter-spacing:-1.5px}.finale-heading p{font-size:10px;margin-top:23px}.finale-stage{aspect-ratio:auto;min-height:290px;margin:0 -3% 25px}.finale-screen{width:90%;min-height:260px;height:260px;padding:19px 14px}.finale-screen-top,.finale-screen-bottom{font-size:8px;letter-spacing:.8px;gap:10px}.finale-screen-intro{font-size:8px;letter-spacing:1.5px;margin-bottom:15px}.finale-screen-signature{font-size:8px;letter-spacing:.9px}#finale-name-preview{font-size:clamp(30px,8vw,54px);letter-spacing:-.8px}.finale-wing{width:7%;height:48%}.finale-wing-left{left:-2%}.finale-wing-right{right:-2%}.finale-console{display:flex;flex-direction:column;gap:24px;align-items:stretch;padding:24px 0}.finale-mood-control>div{justify-content:space-between}.finale-mood-control button{padding:12px;font-size:9px;gap:6px}.finale-motion{align-self:flex-end;min-height:34px}.finale-actions{display:block;margin-top:24px}.finale-actions>span{max-width:none;display:block;font-size:8px}.finale-actions>div{display:flex;flex-direction:column-reverse;align-items:stretch;gap:18px;margin-top:20px}.finale-cta{justify-content:space-between;width:100%;font-size:11px}.finale-actions .underlink{align-self:flex-start;font-size:9px}}
@media(prefers-reduced-motion:reduce){.finale *,.finale *:before,.finale *:after{animation:none!important;transition:none!important}}

.finale-heading p{font-size:12px}.finale-name-control input{font-size:16px}.finale-motion{font-size:11px}.finale-screen-bottom{flex-wrap:wrap}.finale-mood-control>div{flex-wrap:wrap}.finale-mood-control button{flex:1;justify-content:center}.finale-name-control{min-width:0}

#finale-name-preview.long-name{font-size:clamp(28px,4.2vw,65px)}
@media(max-width:760px){#finale-name-preview.long-name{font-size:clamp(26px,6.6vw,40px)}}
