#startup{position:absolute;inset:0;z-index:60;overflow:hidden;color:#f4f6fb;background:#07142d;font-weight:300;animation:startup-appear .45s ease-out;isolation:isolate}
.startup-active>#home,.startup-active>#page,.startup-active>#footer,.startup-active>#help-button,.startup-active>#toast{visibility:hidden!important}
#console.startup-active:not(:has(#startup)){background:#000}#console.startup-active:not(:has(#startup))>.background{visibility:hidden}
.startup-background{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 15% -35%,#294f82 0%,#102346 47%,#020715 95%)}
.startup-background svg{width:100%;height:100%;animation:setup-flow 28s ease-in-out infinite alternate;transform-origin:center;opacity:.8}
/* The same bright "home" blue used everywhere else in the startup flow, not
   just login/welcome: controller pairing, the setup wizard, and new-user
   screens all match the console's actual home-screen color now. */
.login-screen .startup-background,.welcome-screen .startup-background,.controller-screen .startup-background,.setup-screen .startup-background,.language-screen .startup-background,.new-user-screen .startup-background{background:radial-gradient(ellipse at 7% -25%,#1552bb 0%,transparent 58%),linear-gradient(116deg,#003da9 5%,#00318d 63%,#002878 100%);transition:filter 1s,background 1s}
.login-screen .startup-background:after,.welcome-screen .startup-background:after,.controller-screen .startup-background:after,.setup-screen .startup-background:after,.language-screen .startup-background:after,.new-user-screen .startup-background:after{position:absolute;inset:0;content:"";background:linear-gradient(165deg,transparent 35%,rgba(0,45,148,.3) 65%,rgba(0,30,100,.25));pointer-events:none}
.login-screen .startup-background>svg:not(.flow-ribbons),.welcome-screen .startup-background>svg:not(.flow-ribbons),.controller-screen .startup-background>svg:not(.flow-ribbons),.setup-screen .startup-background>svg:not(.flow-ribbons),.language-screen .startup-background>svg:not(.flow-ribbons),.new-user-screen .startup-background>svg:not(.flow-ribbons){display:none}
.login-screen .startup-background>.flow-ribbons,.welcome-screen .startup-background>.flow-ribbons,.controller-screen .startup-background>.flow-ribbons,.setup-screen .startup-background>.flow-ribbons,.language-screen .startup-background>.flow-ribbons,.new-user-screen .startup-background>.flow-ribbons{position:absolute;left:0;top:0;width:1920px;height:1080px;opacity:1;transform-origin:center;animation:ribbon-drift 22s ease-in-out infinite alternate}
.midnight .login-screen .startup-background,.midnight .welcome-screen .startup-background,.midnight .controller-screen .startup-background,.midnight .setup-screen .startup-background,.midnight .language-screen .startup-background,.midnight .new-user-screen .startup-background{filter:brightness(.58) saturate(.65)}
.ember .login-screen .startup-background,.ember .welcome-screen .startup-background,.ember .controller-screen .startup-background,.ember .setup-screen .startup-background,.ember .language-screen .startup-background,.ember .new-user-screen .startup-background{filter:hue-rotate(133deg) saturate(.9)}
.startup-footer{position:absolute;left:0;right:0;bottom:0;height:78px;border-top:1px solid #bdcfea55;display:flex;gap:36px;align-items:center;padding:0 112px;font-size:25px;background:#00000010}
.startup-footer>span{display:flex;gap:10px;align-items:center}.startup-footer .key{font-size:24px;width:27px;height:27px;font-weight:300;border-width:1px}
.startup-footer small{margin-left:auto;font-size:20px;color:#9badc8}
#startup.boot-black{background:#000;display:flex;align-items:center;justify-content:center;animation:none}
.boot-logo{position:absolute;inset:0;display:grid;place-items:center;animation:boot-logo-in 1.2s ease-out both}.boot-logo img{width:176px;height:176px;object-fit:contain}
.health-warning{text-align:center;font-size:32px;line-height:1.7;max-width:1450px;animation:startup-appear .7s}.health-warning p{margin:0}
.setup-header{height:140px;padding:50px 105px 22px;border-bottom:1px solid #b4c6e440;display:flex;align-items:center;justify-content:space-between;gap:45px}
.setup-header h1{font-size:56px;line-height:1.15;font-weight:300;margin:0;white-space:nowrap}
.setup-progress{height:6px;width:155px;background:#ffffff26;position:relative;color:#fff;font-size:30px;margin-right:25px}.setup-progress i{height:100%;display:block;background:white;box-shadow:0 0 12px #a4d2ff7a;max-width:100%}
.setup-body{position:absolute;left:200px;right:200px;top:245px;bottom:235px;overflow:auto;text-align:center;font-size:34px;line-height:1.6;scrollbar-width:thin;scrollbar-color:#fff7 transparent}
.setup-body>p{margin:10px 0 45px}.setup-body .setup-subtle{font-size:25px;color:#a8bddc;line-height:1.5;max-width:1250px;margin:30px auto 0}
.setup-actions{position:absolute;left:0;right:0;bottom:184px;display:flex;gap:35px;justify-content:center;align-items:center}
.setup-button{min-width:520px;min-height:66px;padding:12px 30px;border:2px solid #ffffff60;font-size:32px;line-height:1.25;text-align:center;background:#0000001a;transition:background .15s,box-shadow .15s}
.setup-button:hover,.setup-button:focus-visible,.setup-button.preferred:focus{border-color:#b3eeff;outline:2px solid #e0f8ff;outline-offset:3px;box-shadow:0 0 10px #34bcfacc,inset 0 0 5px #50b7ff66;background:#20477c20}
.setup-button:focus{outline:none}.setup-button.preferred{border-color:#72caed}
.pair-content{position:absolute;left:250px;right:190px;top:135px;bottom:145px;display:flex;gap:190px;align-items:center}
.pair-hardware{position:relative;width:370px;height:700px;flex-shrink:0;color:#f3f7ff;animation:startup-appear .35s linear both}.pair-diagram{width:100%;height:100%;object-fit:contain}
.diagram-ps{position:absolute;left:153px;bottom:11px;width:57px;height:57px;display:grid;place-items:center}.diagram-ps .icon{width:42px;height:42px}
.pair-languages{flex:1;font-size:32px;line-height:1.55;display:flex;flex-direction:column;justify-content:center;gap:28px}.pair-languages p{margin:0;animation:slide-up-in .3s cubic-bezier(.16,.84,.44,1) both}
.pair-languages p:nth-child(1){animation-delay:.04s}.pair-languages p:nth-child(2){animation-delay:.08s}.pair-languages p:nth-child(3){animation-delay:.12s}.pair-languages p:nth-child(4){animation-delay:.16s}.pair-languages p:nth-child(5){animation-delay:.2s}
.controller-screen .startup-footer{display:none}.controller-continue{position:absolute;left:378px;top:calc(50% + 224px);width:105px;height:105px;border-radius:50%;color:#f7faff;animation:startup-appear .3s linear .15s both,ps-pulse 3.6s ease-in-out .5s infinite}.controller-continue .icon{width:67px;height:67px;opacity:0}
.pair-hardware .controller-continue{left:50%;top:auto;bottom:0;transform:translateX(-50%)}
.controller-continue:hover,.controller-continue:focus-visible{outline:2px solid white;outline-offset:7px;background:#ffffff10;box-shadow:0 0 20px #9addff60}.controller-continue:focus{outline:none}
.keyboard-pair{position:absolute;bottom:50px;left:0;right:0;text-align:center;color:#98acc9;font-size:22px;letter-spacing:.3px}
.welcome-controller{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:120px}.welcome-controller h1{font-size:56px;font-weight:300;margin:0 0 90px;animation:slide-down-in .3s cubic-bezier(.16,.84,.44,1) both}.welcome-controller p{font-size:36px;margin:0 0 45px;animation:slide-down-in .3s cubic-bezier(.16,.84,.44,1) .05s both}.welcome-ps{width:105px;height:105px;border:2px solid #d6e2f4;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 20px #38619b55;animation:startup-appear .3s linear .1s both,ps-pulse 3.6s ease-in-out .6s infinite}.welcome-ps>.icon{width:70px;height:70px}.welcome-ps:hover,.welcome-ps:focus-visible{background:#ffffff20;outline:2px solid #fff;outline-offset:8px}.welcome-controller-line{display:flex;align-items:center;gap:30px;margin-top:55px;color:#c1d7ef66;animation:slide-up-in .3s cubic-bezier(.16,.84,.44,1) .18s both}.welcome-controller-line>.icon{width:58px;height:58px}.welcome-controller-line>span{letter-spacing:-4px;font-size:32px}.welcome-screen .startup-footer{display:none}
.startup-brand{position:absolute;left:105px;top:75px;display:flex;align-items:center;gap:30px;animation:slide-down-in .3s cubic-bezier(.16,.84,.44,1) both}.startup-brand img:first-child{width:70px;height:70px}.startup-brand img:last-child{width:150px;height:45px}
.language-question{font-size:35px;font-weight:300;text-align:center;margin:170px 0 45px}.setup-language-list{position:absolute;top:280px;bottom:140px;left:285px;right:285px;overflow:auto;scrollbar-width:thin;scrollbar-color:#9aadc6 transparent;padding:0 25px 0 12px}
.language-option{display:block;width:100%;padding:22px;font-size:34px;text-align:center;border-bottom:1px solid #91accb4a;min-height:82px}.language-option:focus,.language-option:hover{outline:2px solid #d3f6ff;outline-offset:-5px;box-shadow:inset 0 0 13px #46b7e67a;background:#13284122}
.setup-checklist{width:1120px;margin:75px auto;background:#03112844;padding:15px 35px;text-align:left}.setup-checklist p{display:flex;align-items:center;gap:26px;font-size:33px;line-height:1.35;margin:25px 0}.setup-checklist .icon{width:48px;height:48px}
.setup-intro{font-size:35px}.setup-choice-list{display:flex;flex-direction:column;gap:22px;max-width:1120px;margin:45px auto}.setup-choice-list .setup-button{text-align:left;padding-left:35px;min-height:80px}.setup-choice-list .setup-button.preferred:before{content:'✓';margin-right:25px}
.camera-diagram{width:780px;height:270px;margin:10px auto 30px;display:block;color:#d5e2f5}
.setup-field{display:flex;justify-content:space-between;align-items:center;width:1150px;max-width:100%;margin:35px auto;border-bottom:1px solid #a8c2e03d;padding:22px;text-align:left;font-size:32px;gap:30px}.setup-field select,.setup-field input,.setup-name{background:#08182b88;border:1px solid #b1c8e6;padding:15px 22px;color:white;min-width:600px;font-size:30px;color-scheme:dark}.setup-field option{background:#102342;color:white}.setup-field input{min-width:500px}.setup-name::placeholder{color:#8da6c7}
.setup-agreement{max-width:1450px;text-align:left;background:#020b22a0;padding:30px 50px;font-size:28px;line-height:1.6}.setup-agreement h2{font-size:34px;font-weight:300;margin:0 0 25px}.setup-agreement p{margin:15px 0 25px}
.setup-complete img{width:420px;height:125px;object-fit:contain;margin:15px auto 45px}.setup-complete p{font-size:45px;line-height:1.55;margin:0}.setup-network-result{padding-top:25px}.setup-network-result>.icon{width:100px;height:100px;margin-bottom:25px}
.login-question{position:absolute;top:190px;left:0;right:0;text-align:center}.login-question h1{font-size:54px;font-weight:300;margin:0 0 75px;animation:slide-down-in .3s cubic-bezier(.16,.84,.44,1) both}.login-question p{font-size:36px;margin:0;animation:slide-down-in .3s cubic-bezier(.16,.84,.44,1) .05s both}.login-users{position:absolute;top:455px;left:120px;right:120px;display:flex;gap:65px;justify-content:center;align-items:flex-start;overflow-x:auto;padding:20px 18px 50px;scrollbar-width:thin;scrollbar-color:#d0e4ff55 transparent}
.login-user{width:245px;flex-shrink:0;text-align:center;font-size:30px;transition:transform .22s,color .2s;color:#bfcee7;animation:login-tile-in .3s cubic-bezier(.16,.84,.44,1) backwards}
.login-user:nth-child(1){animation-delay:.06s}.login-user:nth-child(2){animation-delay:.1s}.login-user:nth-child(3){animation-delay:.14s}.login-user:nth-child(4){animation-delay:.18s}.login-user:nth-child(5){animation-delay:.22s}.login-user:nth-child(6){animation-delay:.26s}.login-user:nth-child(n+7){animation-delay:.3s}
.login-avatar{width:205px;height:205px;margin:0 auto 35px;background:#13335b;position:relative;display:grid;place-items:center;transition:box-shadow .2s,outline .2s}.login-avatar>img,.login-avatar>.generated-avatar{width:100%;height:100%;object-fit:cover}.login-user.selected{color:#fff;transform:scale(1.04)}.login-user.selected .login-avatar{outline:3px solid #fff;outline-offset:7px;box-shadow:0 0 25px #82bfff5c}.login-user:focus{outline:none}.login-user:focus-visible .login-avatar,.login-user:hover .login-avatar{outline:3px solid #fff;outline-offset:7px}.login-user>span{display:block;overflow-wrap:anywhere;line-height:1.35}.new-user>.icon{width:90px;height:90px;opacity:.9}.new-user>b{font-size:43px;font-weight:300;position:absolute;right:34px;bottom:38px}.login-controller{position:absolute;bottom:165px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:20px;font-size:25px;color:#d3e4fb;animation:slide-up-in .3s cubic-bezier(.16,.84,.44,1) .28s both}.login-controller>.icon{width:55px;height:55px}.controller-battery{width:55px;height:24px;border:2px solid #c0d5ed;display:flex;gap:3px;padding:3px;margin-left:30px;position:relative}.controller-battery:after{content:'';position:absolute;right:-6px;top:6px;width:4px;height:9px;background:#c0d5ed}.controller-battery i{width:12px;background:#c0d5ed}
.new-user-content{position:absolute;left:260px;right:260px;top:180px;text-align:center}.new-user-content h1{font-size:55px;font-weight:300;margin:0 0 55px}.new-user-content>p{font-size:32px;line-height:1.6}.new-user-options{display:flex;flex-direction:column;align-items:center;gap:30px;margin:75px 0 40px}.new-user-content .setup-subtle{font-size:24px;color:#adbfdb;max-width:1100px;margin:40px auto;line-height:1.5}.new-user-avatars{display:flex;justify-content:center;gap:26px;margin:60px 0 45px}.new-user-avatars label{cursor:pointer}.new-user-avatars input{position:absolute;opacity:0;width:1px;height:1px}.avatar-choice{width:135px;height:135px;display:grid;place-items:center;object-fit:cover}.new-user-avatars input:checked+.avatar-choice{outline:3px solid white;outline-offset:6px}.new-user-avatars input:focus-visible+.avatar-choice{box-shadow:0 0 20px #98d3ff}.setup-name{text-align:center;width:650px}
.generated-avatar{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#1685bf,#12355f);flex-shrink:0}.generated-avatar .icon{width:60%;height:60%}.avatar-2{background:linear-gradient(135deg,#9341a6,#3e1b68)}.avatar-3{background:linear-gradient(135deg,#d37c24,#82431c)}.avatar-4{background:linear-gradient(135deg,#2b947e,#135356)}.avatar-5{background:linear-gradient(135deg,#ad3c56,#652143)}
.logging-in{animation:logging-in .45s ease-in both!important;pointer-events:none}
.login-connected{font-size:26px;display:flex;align-items:center;justify-content:center;gap:22px;color:#b4c6e2;margin:-40px 0 45px;animation:slide-down-in .3s cubic-bezier(.16,.84,.44,1) .09s both}.login-connected .icon{width:45px;height:45px}
.profile-hero>.avatar{width:160px;height:160px}
@keyframes startup-appear{from{opacity:0}to{opacity:1}}@keyframes boot-logo-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes setup-flow{to{transform:translate(-45px,20px) scale(1.035)}}@keyframes logging-in{to{opacity:0;transform:scale(1.025)}}
/* Short, linear-ish, no-overshoot moves: the real PS4 firmware UI reads as
   quick and flat, not springy/elastic like a mobile app. */
@keyframes slide-up-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-down-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
/* Plain fade + a touch of scale, no bounce overshoot. animation-fill-mode is
   'backwards' (not 'both') so once it finishes the cascade reverts to the
   normal .login-user.selected{transform:scale(1.04)} rule instead of the
   animation holding its final transform forever and blocking it. */
@keyframes login-tile-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
/* A calm standby-light breathe (like the DualShock's LED while waiting to
   pair), not a flashy UI glow pulse. */
@keyframes ps-pulse{0%,100%{box-shadow:0 0 14px #38619b55}50%{box-shadow:0 0 20px #5a9eeb60}}
@media(prefers-reduced-motion:reduce){.startup-background svg{animation:none}}