/* PLAK STUDIO — HOME 5.0 / STUDIO EDITION
   Fresh visual layer. Legacy routes, account and music player remain untouched.
   No sky photography, cloud sprites, or parallax zoom on the home / intro / transfer. */
:root{--v5-bg:#090d16;--v5-wine:#922d51;--v5-rose:#e49bb6;--v5-cream:#fff8f5;--v5-fade:#a8acb8}
html{scroll-behavior:smooth}
body.sky-page{background:var(--v5-bg);color:var(--v5-cream)}
.sky-backdrop,.sky-clouds,.sky-flight-cover,.sky-shade,.sky-world:before,.sky-world:after,.sky-doodles,.sky-note,.sky-airplane{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid #f8c5d5;outline-offset:5px}
.sky-skip{background:#751b32;color:#fff}
/* Header: real links to existing application routes. */
.sky-header{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:40;background:linear-gradient(180deg,#0b101bcf,#0b101b00);border-bottom:1px solid #ffffff19;padding:23px clamp(24px,4.65vw,86px);color:#fff;box-shadow:none;isolation:auto}
.sky-header:before{display:none!important}
.sky-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;color:#fff;letter-spacing:.2em;font-size:clamp(13px,1.2vw,17px);font-weight:760;line-height:1.2;text-shadow:none}
.sky-brand img{width:42px;height:42px;filter:none}
.sky-brand small{display:block;font-size:8px;letter-spacing:.21em;margin-top:4px;color:#c9bec6;opacity:.85}
.sky-header nav{display:flex;align-items:center;gap:clamp(13px,1.65vw,33px);margin-left:auto}
.sky-header nav a{font:600 12px 'Segoe UI',Arial,sans-serif;text-shadow:none;color:#e0e0e8;border-bottom:1px solid transparent;padding:10px 0;transition:color .2s,border-color .2s}
.sky-header nav a:hover{color:#fff;border-bottom-color:var(--v5-rose)}
.sky-header nav a:last-child{margin-left:15px;background:#751b32;color:#fff;border:1px solid #bc5c7a;border-radius:4px;padding:13px 20px;font-weight:700}
.sky-header nav a:last-child:hover{background:#a03b5d;color:#fff}
.sky-menu{background:#221822;border:1px solid #ffffff66;color:#fff;border-radius:3px}
/* Stage: charcoal ambient glow and large CSS vinyl. */
.sky-world{position:relative;height:86svh;min-height:740px;max-height:1010px;background:radial-gradient(ellipse 72% 84% at 82% 43%,#203451 0%,#121d32 32%,#0c1321 64%,#090d16 100%);overflow:hidden;isolation:isolate}
.hero-aurora{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 26% 46% at 70% 54%,#8f325038,transparent 82%),radial-gradient(ellipse 50% 37% at 48% 98%,#4a203143,transparent 70%),linear-gradient(90deg,#090d16 0%,#090d16ee 25%,#10192bb0 58%,transparent 100%)}
.hero-grid{position:absolute;inset:12% 0 0;opacity:.19;z-index:-1;pointer-events:none;background-image:linear-gradient(#d7b4c410 1px,transparent 1px),linear-gradient(90deg,#d7b4c40c 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent 0%,black 65%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 65%)}
.sky-world .sky-title{position:absolute;left:clamp(35px,6.2vw,120px);top:50%;transform:translateY(-43%);width:min(670px,47vw);z-index:8;text-align:left;color:#fff;pointer-events:auto}
.sky-writing{margin:0 0 28px;width:auto;color:#e0a0b7;max-width:100%}
.sky-writing p{animation:none!important;clip-path:none!important;white-space:normal;font-size:clamp(10px,.83vw,12px);line-height:1.5;font-weight:800;letter-spacing:.24em;color:#ec9cb7;text-shadow:none}
.eyebrow-slash{color:#fff8;display:inline;margin:0 8px}
.sky-world .sky-title h1{font-family:'Segoe UI',Arial,sans-serif;font-weight:790;font-size:clamp(62px,6.2vw,112px);line-height:.99;letter-spacing:-.078em;white-space:normal;text-wrap:initial;margin:0;color:#fffafb;text-shadow:0 12px 52px #0005}
.sky-world .sky-title h1 em{font:inherit;color:#ecb0c4;font-style:normal}
.hero-period{color:#ce6d8e}
.sky-world .hero-description{font-size:clamp(15px,1.12vw,18px);line-height:1.68;letter-spacing:0;color:#b8c0cd;max-width:505px;margin:30px 0 27px;opacity:1}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.sky-world .home-button{border-radius:5px;min-height:56px;gap:28px;font-size:12px;letter-spacing:.015em;padding:16px 20px;font-weight:750;text-decoration:none;backdrop-filter:none;transition:transform .2s,background .2s,border-color .2s}
.sky-world .home-button-primary{background:linear-gradient(115deg,#a63358,#751b32);color:#fff;border-color:#b55273;box-shadow:0 9px 28px #20000a56}
.sky-world .home-button-primary:hover{background:#b53d64;color:#fff}
.sky-world .home-button-secondary{background:#ffffff0b;border:1px solid #ffffff52;color:#f7edf1}
.sky-world .home-button-secondary:hover{background:#ffffff1b;color:#fff}
.sky-world .hero-kicker{color:#aeb2bf;letter-spacing:.17em;font-size:9px;margin-top:36px}
.sky-world .pulse-dot{background:#c85a80;box-shadow:0 0 0 5px #c85a801c}
/* Large record is a true HTML link, not a rasterized illustration. */
.sky-world .sky-record-position{position:absolute;left:73%;top:49%;transform:translate(-50%,-50%);gap:12px;z-index:7}
.sky-world .sky-record-link{width:clamp(330px,36vw,620px);aspect-ratio:1;filter:drop-shadow(0 45px 45px #01030bbf);animation:v5-vinyl-hover 10s ease-in-out infinite;transform:none}
.sky-world .sky-record-plane{width:100%;height:100%;transform:rotateX(13deg) rotateY(-22deg) rotateZ(-9deg);transition:transform .75s}
.sky-world .sky-record-link:hover .sky-record-plane{transform:rotateX(8deg) rotateY(-9deg) rotateZ(-4deg)}
.sky-world .sky-record-disc{background:repeating-radial-gradient(circle,#0d0c13 0 2px,#25242c 3px,#111019 4px,#22212a 6px);border:4px solid #282530;box-shadow:8px 12px 0 #080a11,14px 21px 0 #181723,22px 30px 55px #000c,inset 0 0 30px #fff2;animation:record-turn 48s linear infinite;mask-image:none;-webkit-mask-image:none}
.sky-world .sky-record-disc:before{background:conic-gradient(from 30deg,transparent 0deg,#fff3 25deg,transparent 59deg,transparent 130deg,#c37b9137 175deg,transparent 208deg,transparent 270deg,#fff2 309deg,transparent 340deg)}
.sky-world .sky-record-label{background:radial-gradient(circle at 34% 24%,#bf4f70,#8e2747 49%,#5a172e 93%);width:31%;border:2px solid #ba6580;box-shadow:0 0 5px #0009,inset 0 0 21px #0009}
.sky-world .sky-record-label img{width:44%;filter:brightness(1.35)}
.sky-world .sky-record-label>span{font-size:clamp(6px,.61vw,10px);letter-spacing:.2em}
.sky-world .sky-record-label small{font-size:clamp(4px,.4vw,7px);letter-spacing:.11em}
.sky-world .sky-enter{font:700 10px 'Segoe UI',Arial,sans-serif;letter-spacing:.31em;color:#d9b4c5;text-shadow:none;transform:none;margin-top:26px}
.sky-world .sky-enter span{color:#fff}
.vinyl-glow{position:absolute;width:105%;aspect-ratio:1;top:43%;left:50%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 90px 30px #8e244028;pointer-events:none}
.sky-world .record-orbit{display:block;position:absolute;top:44%;left:50%;z-index:-1;transform:translate(-50%,-50%);width:125%;aspect-ratio:1;border-radius:50%;border:1px solid #d28ba443;pointer-events:none}
.sky-world .orbit-two{width:146%;border-color:#cb829c25;border-style:dashed}
.sky-world .orbit-three{width:168%;border-color:#a95c7222;border-style:solid}
.hero-steps{position:absolute;top:39%;right:clamp(26px,4.6vw,85px);z-index:8;display:flex;flex-direction:column;gap:24px}
.hero-steps span{font-size:11px;letter-spacing:.14em;color:#727c8c;display:flex;align-items:center;gap:22px;white-space:nowrap}
.hero-steps span b{font-size:10px;letter-spacing:.19em;font-weight:750}
.hero-steps span.current{color:#e9a3bc}
.hero-steps span.current b{color:#e8e6eb}
.hero-steps span:before{content:'';position:absolute;width:1px;height:17px;background:#ffffff3b;transform:translate(6px,20px)}
.hero-steps span:last-child:before{display:none}
.sky-world .hero-index{position:absolute;left:clamp(35px,6.2vw,120px);right:clamp(35px,6.2vw,120px);bottom:36px;z-index:9;display:flex;align-items:center;gap:19px;color:#9ba5b5;letter-spacing:.19em;font-size:9px}
.hero-index:before{display:none}.hero-index span:first-child{order:0;color:#e59bb7}.hero-index i{order:1;width:58px;height:1px;background:#bd617d}.hero-index span:nth-of-type(2){order:2}.hero-index a{order:3;margin-left:auto;width:40px;height:40px;color:#ebd8dd;border-color:#ffffff45;border-radius:50%}
/* Five meaningful routes with honest coming-soon badge; no made-up user counts. */
.home-shortcuts{position:relative;z-index:2;max-width:1780px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px clamp(24px,4.65vw,86px) 50px;background:var(--v5-bg)}
.shortcut-card{min-width:0;min-height:255px;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:23px;border:1px solid #ffffff28;border-radius:7px;background:#141825;color:#fff;transition:transform .25s,border-color .25s,box-shadow .25s;isolation:isolate}
a.shortcut-card:hover{transform:translateY(-5px);border-color:#d68ba780;box-shadow:0 18px 28px #0006}
.shortcut-card:before{position:absolute;inset:0;content:'';z-index:-1;pointer-events:none}
.shortcut-player:before{background:radial-gradient(ellipse at 95% 45%,#80304c8a,#171724 74%)}
.shortcut-os:before{background:radial-gradient(ellipse at 85% 35%,#432344bb,#0e1a2b 75%)}
.shortcut-social:before{background:radial-gradient(ellipse at 75% 35%,#872e5070,#161725 70%)}
.shortcut-premium:before{background:radial-gradient(ellipse at 80% 45%,#5b1a4791,#191624 75%)}
.shortcut-garden:before{background:radial-gradient(ellipse at 80% 35%,#426e5877,#142228 75%)}
.shortcut-number{font:750 9px 'Segoe UI',Arial,sans-serif;letter-spacing:.19em;color:#d0b1c0}
.shortcut-info{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:3px 12px}
.shortcut-info h2{grid-column:1;grid-row:1;margin:0;font-size:clamp(22px,1.8vw,31px);font-weight:730;letter-spacing:-.045em;line-height:1.08}
.shortcut-info p{grid-column:1;grid-row:2;color:#bcc0cb;margin:6px 0 0;font-size:11px;line-height:1.4}
.shortcut-info>span{grid-column:2;grid-row:1/3;align-self:end;border:1px solid #d98bad8a;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#f7d6e5}
.shortcut-info>span.coming-soon{width:auto;height:auto;padding:7px;font-size:8px;letter-spacing:.07em;border-radius:3px}
.shortcut-vinyl{position:absolute;right:-38px;top:20px;width:180px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0b0b10 0 2px,#3c2833 3px,#100d15 5px);box-shadow:0 15px 35px #000a;transform:rotate(-25deg)}
.shortcut-vinyl:after{content:'';position:absolute;inset:34%;border-radius:50%;background:#812444;border:2px solid #cb829c}
.shortcut-os-art{position:absolute;right:30px;top:40px;transform:rotate(-26deg);width:125px;height:115px}
.shortcut-os-art i{position:absolute;inset:15% 5%;border:1px solid #bb729c;box-shadow:0 0 16px #b15a8c88;background:#4f274044;transform:skewY(18deg)}
.shortcut-os-art i:nth-child(2){translate:0 15px}.shortcut-os-art i:nth-child(3){translate:0 30px}
.shortcut-social-art{position:absolute;right:5%;top:11%;height:135px;width:170px;border-radius:50%;background:radial-gradient(circle,#c7608261,transparent 70%)}
.shortcut-social-art i{position:absolute;bottom:10px;border-radius:90px 90px 12px 12px;width:57px;height:90px;background:linear-gradient(#ad6987,#3b223a)}
.shortcut-social-art i:nth-child(1){left:5px;bottom:0;height:90px}.shortcut-social-art i:nth-child(2){left:58px;bottom:5px;height:120px;background:linear-gradient(#f0a3b6,#5e2844)}.shortcut-social-art i:nth-child(3){left:111px;bottom:0;height:95px}
.shortcut-premium-art,.shortcut-garden-art{position:absolute;right:13%;top:30%;font-family:Georgia,serif;font-size:110px;color:#cf7d9c;filter:drop-shadow(0 0 35px #bd3b6e74)}
.shortcut-garden-art{color:#a0c5ab;filter:drop-shadow(0 0 35px #a0c5ab50)}
/* Remaining platform sections stay functional and receive a consistent art direction. */
.home-explore,.home-worlds{padding-top:100px;padding-bottom:105px}
.home-section-heading h2 i,.worlds-intro h2 i{font-family:'Segoe UI',Arial,sans-serif;font-style:normal;letter-spacing:-.07em;color:#df8fab}
.home-worlds{padding-top:60px}
.home-download{background:#0f101c}
.sky-footer{background:#080b12}
/* Cinematic INTRO: all-black / burgundy record with no sky or cloud art. */
body.sky-page.intro-open{overflow:hidden}
#vinyl-intro.intro{background:radial-gradient(ellipse at 50% 42%,#281829 0%,#10121c 37%,#080a11 80%);color:#fff;z-index:200;grid-template-rows:auto minmax(0,1fr) auto}
.intro-top{padding:24px clamp(24px,5vw,90px);color:#f0bfd0;letter-spacing:.2em;font-size:11px;z-index:4}
.intro-top i{font-style:normal;color:#b4a1aa}
.intro-top button{border:1px solid #ffffff3b!important;padding:11px 16px!important;margin-left:8px;border-radius:3px;color:#f4e9ed!important}
.intro-stage{isolation:isolate;--record-size:min(45vh,57vw,485px)}
.intro-stage:before{content:'';position:absolute;width:min(74vh,76vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#9c3b5b45,transparent 70%);filter:blur(38px);z-index:-1}
.intro-ambient-ring{display:block;position:absolute;border:1px solid #d288a43d;border-radius:50%;width:calc(var(--record-size) * 1.28);aspect-ratio:1;pointer-events:none}
.intro-ambient-ring.ring-b{width:calc(var(--record-size) * 1.6);border-style:dashed;opacity:.7}
.intro-record{width:var(--record-size);animation:vinyl-spin 14s linear infinite;box-shadow:0 30px 80px #000d,0 0 55px #97324c42}
.intro-record:before{background:conic-gradient(transparent 0deg,#fff3 40deg,transparent 80deg,transparent 170deg,#fff2 225deg,transparent 258deg)}
.intro-arm{opacity:.7}
.intro-copy{padding:0 20px clamp(35px,5vh,70px);z-index:5}
.intro-copy>span{font-weight:750;font-size:10px;color:#e9a3bc}
.intro-copy h2{font-size:clamp(31px,4.5vw,65px);font-weight:750;letter-spacing:-.05em;line-height:1.08;margin:13px 0 10px}
.intro-copy h2 em{font-style:normal;color:#e7a2b9}
.intro-copy p{font-size:13px;color:#acb1c0;letter-spacing:.03em;margin:0 0 14px}
.intro-copy #intro-start{background:#751b32;border:1px solid #be6584!important;border-radius:4px;padding:16px 28px!important;font-weight:750;letter-spacing:.15em}
.intro-copy #intro-start:hover{background:#9c3356}
.intro.active .intro-arm{transform:rotate(31deg)}
.intro.zoom .intro-record{animation:v5-record-zoom 1.8s cubic-bezier(.6,0,.82,1) forwards;transform-origin:center}
@keyframes v5-record-zoom{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(22);opacity:1}}
/* Desktop and tablets */
@media(max-width:1250px){
 .sky-header{padding:19px 4vw}.sky-header nav{gap:13px}.sky-header nav a{font-size:11px}.sky-header nav a:last-child{margin-left:0;padding:11px 14px}
 .sky-world .sky-title{left:5%;width:49vw}.sky-world .sky-title h1{font-size:clamp(54px,6.6vw,86px)}
 .sky-world .sky-record-position{left:75%;top:48%}.sky-world .sky-record-link{width:36vw}
 .hero-steps{display:none}.home-shortcuts{padding-left:4vw;padding-right:4vw}.shortcut-card{padding:17px;min-height:225px}.shortcut-info h2{font-size:23px}
}
@media(max-width:900px){
 .sky-header{padding:18px 25px}.sky-menu{display:block;margin-left:auto;padding:11px 15px}
 .sky-header nav{display:none;position:absolute;top:75px;right:25px;left:25px;margin:0;background:#10141f;border:1px solid #704057;padding:15px;box-shadow:0 20px 50px #000b;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;z-index:30}
 .sky-header nav.open{display:grid}.sky-header nav a{font-size:13px;padding:12px!important;border-radius:3px;white-space:normal}.sky-header nav a:last-child{margin:0;text-align:center}
 .sky-world{height:780px;min-height:780px}.sky-world .sky-title{left:5%;top:48%;width:49vw}.sky-world .sky-title h1{font-size:clamp(50px,6.5vw,73px)}
 .sky-world .hero-description{font-size:14px;max-width:370px}.sky-world .sky-record-position{left:76%;top:50%}.sky-world .sky-record-link{width:37vw}
 .sky-world .home-button{min-height:48px;padding:12px 16px;font-size:11px;gap:13px}
 .home-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}.shortcut-card{min-height:205px}
}
/* Handheld — hero is a readable vertical composition, not a squashed desktop. */
@media(max-width:700px){
 .sky-header{position:absolute;min-height:74px;padding:14px 19px;background:#090d17cf;backdrop-filter:blur(15px);border-bottom:1px solid #ffffff20}
 .sky-brand img{width:36px;height:36px}.sky-brand{font-size:12px}.sky-brand small{font-size:6px;letter-spacing:.13em}
 .sky-header nav{top:70px;left:16px;right:16px}.sky-header nav.open{background:#101520;border:1px solid #745066}.sky-header nav a{color:#fff}
 .sky-world{height:880px;min-height:880px;max-height:none;background:radial-gradient(circle at 58% 70%,#243251 0%,#10182b 37%,#090d16 75%)}
 .hero-aurora{background:radial-gradient(circle at 50% 74%,#7d2c4a47,transparent 42%),linear-gradient(180deg,#080d16,#0e172a)}
 .sky-world .sky-title{top:117px;left:24px;right:24px;width:auto;transform:none;text-align:left;z-index:9}
 .sky-writing{margin-bottom:15px}.sky-writing p{font-size:9px;letter-spacing:.15em;line-height:1.6}
 .sky-world .sky-title h1{font-size:clamp(48px,10.5vw,71px);line-height:.97;letter-spacing:-.065em}
 .sky-world .hero-description{font-size:13px;line-height:1.52;margin:15px 0 16px;max-width:425px}
 .sky-world .home-button{min-height:43px;font-size:11px;padding:11px 13px;gap:9px}
 .sky-world .hero-kicker{margin-top:17px;font-size:8px;letter-spacing:.1em}
 .sky-world .sky-record-position{left:50%;top:76%;right:auto;transform:translate(-50%,-50%);gap:0;z-index:5}
 .sky-world .sky-record-link{width:clamp(215px,53vw,300px)}
 .sky-world .sky-enter{font-size:8px;margin-top:8px}
 .sky-world .hero-index{left:24px;right:24px;bottom:18px;font-size:8px;gap:12px}.sky-world .hero-index i{width:28px}
 .sky-world .record-orbit{width:118%}.sky-world .orbit-two{width:140%}.sky-world .orbit-three{width:155%}
 .home-shortcuts{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;gap:10px;padding:17px 20px 36px;scrollbar-color:#a45c7d #111725}
 .shortcut-card{flex:0 0 min(75vw,280px);min-height:230px;scroll-snap-align:center;padding:21px}
 .shortcut-info h2{font-size:26px}.home-explore,.home-worlds{padding-top:75px}
 .intro-stage{--record-size:min(55vw,36vh)}.intro-arm{display:none}.intro-copy{padding-bottom:42px}.intro-copy h2{font-size:clamp(31px,8vw,52px)}
 .intro-top{padding:18px 20px}.intro-top i{display:none}.intro-top button{font-size:9px!important;padding:10px!important;margin-left:3px}
}
@media(max-width:390px){
 .sky-world{height:880px;min-height:880px}.sky-world .sky-title{top:110px}.sky-world .sky-title h1{font-size:48px}.sky-world .hero-description{font-size:12px}
 .sky-world .sky-record-position{top:76%}.sky-world .sky-record-link{width:215px}.sky-world .hero-kicker{font-size:7px}
 .sky-header nav.open{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important}
 .sky-record-disc,.sky-record-link,.intro-record,.journey-disc{animation:none!important}
 .home-button,.shortcut-card{transition:none!important}.shortcut-card:hover{transform:none}
}
/* Final optical alignment: inline end punctuation, breathing room for stage labels. */
.sky-world .sky-title h1 span.hero-period{display:inline!important}
.sky-world .sky-record-position{left:71%}
.sky-world .sky-enter{position:relative;z-index:12;color:#e8c3d2!important;text-shadow:0 3px 16px #080811!important;opacity:1}
@media(max-width:1250px){.sky-world .sky-record-position{left:73%}}
@media(max-width:700px){.sky-world .sky-record-position{left:50%}}