:root{--ink:#31203b;--pink:#ff76b0;--purple:#9269ef;--aqua:#38d4df;--blue:#68b9ff;--cream:#fff9f2;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#fff8fc,#f1eaff 55%,#fffaf5);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}.skip{position:fixed;top:-100px;left:15px;z-index:50;background:#fff;padding:12px;border-radius:10px}.skip:focus{top:15px}header{height:80px;padding:0 clamp(18px,5vw,64px);display:flex;align-items:center;justify-content:space-between;background:#fff9;border-bottom:1px solid #eadff0;backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:11px;font:700 18px Fredoka}.brand span{display:grid;place-items:center;width:40px;height:40px;background:var(--ink);color:#fff;border-radius:50%}header nav{display:flex;gap:24px;font-weight:700;color:#6e567a}.intro{position:relative;width:min(1160px,calc(100% - 40px));margin:auto;padding:clamp(60px,8vw,105px) 0 60px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:520px}.intro:before{content:'';position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,#ffd1e7,#dacaff 68%,transparent 69%);right:-90px;z-index:-1}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;color:#a44f83}.intro h1{font:700 clamp(64px,9vw,112px)/.82 Fredoka;margin:20px 0}.intro h1 em{font-style:normal;color:var(--pink)}.intro>div>p:last-child{max-width:560px;font-size:18px;line-height:1.7;color:#76677c}.music-orbit{position:relative;width:min(360px,80vw);aspect-ratio:1;margin:auto;border:2px dashed #ae87d0;border-radius:50%;animation:float 5s ease-in-out infinite}.music-orbit:before,.music-orbit:after{content:'';position:absolute;border-radius:50%}.music-orbit:before{inset:17%;background:linear-gradient(145deg,#30d9e5,#b068ee 58%,#ff79ad);box-shadow:0 28px 60px #73469442}.music-orbit:after{inset:32%;background:#fff8;border:3px solid #fff}.music-orbit span{position:absolute;z-index:2;left:39%;top:27%;font:700 110px Fredoka;color:#fff}.music-orbit b{position:absolute;right:-10px;top:24%;font-size:54px;color:#ff79ad}.music-orbit i{position:absolute;left:-8px;bottom:22%;width:56px;height:56px;background:#ffe177;border-radius:50%;box-shadow:0 0 0 15px #ffe17742}.game-wrap{width:min(1040px,calc(100% - 24px));margin:0 auto 70px;background:#fff;border-radius:38px;padding:clamp(20px,4vw,46px);box-shadow:0 30px 90px rgba(70,38,89,.17)}.game-header{display:flex;align-items:end;justify-content:space-between;gap:20px}.game-header h2{font:700 clamp(34px,5vw,53px) Fredoka;margin:7px 0}.actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.actions button,.start,.game-over button{border:0;border-radius:13px;padding:12px 16px;background:#ede5f5;color:#533d60;font-weight:800;cursor:pointer}.actions button:last-child{background:var(--ink);color:#fff}.actions button:disabled{opacity:.45;cursor:not-allowed}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 14px}.stats div{background:#faf6fd;border:1px solid #eee4f3;border-radius:16px;text-align:center;padding:13px}.stats small{display:block;font-size:10px;letter-spacing:.15em;font-weight:800;color:#917e9a}.stats strong{font:700 25px Fredoka}.status{text-align:center;min-height:24px;font-weight:700;color:#7a5a88}.stage-shell{width:min(560px,100%);margin:auto}.stage{position:relative;overflow:hidden;height:min(660px,72vh);min-height:480px;border-radius:26px 26px 8px 8px;background:linear-gradient(180deg,#232340,#44264e 70%,#26182f);box-shadow:0 22px 50px #30203e42;touch-action:manipulation;outline:none}.stage:focus-visible{box-shadow:0 0 0 5px #ff9bc5,0 22px 50px #30203e42}.sky i{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 12px #fff}.sky i:nth-child(1){left:8%;top:9%}.sky i:nth-child(2){left:47%;top:18%}.sky i:nth-child(3){right:9%;top:8%}.sky i:nth-child(4){right:31%;top:31%}.lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}.lanes span{border-right:1px solid #ffffff29;background:linear-gradient(180deg,transparent 20%,#ffffff05)}.lanes span:last-child{border:0}.hit-zone{position:absolute;left:0;right:0;bottom:56px;height:92px;border-top:3px solid #fff9;border-bottom:3px solid #fff3;display:grid;grid-template-columns:repeat(4,1fr);background:#fff1}.hit-zone:before{content:'';position:absolute;inset:-18px 0;background:linear-gradient(90deg,#38d4df22,#ff76b022,#9269ef22,#68b9ff22);filter:blur(14px)}.hit-zone span{display:grid;place-items:center;color:#fff;font-size:23px;text-shadow:0 0 14px #fff}.tiles{position:absolute;inset:0}.tile{position:absolute;width:calc(25% - 12px);height:112px;border-radius:16px;background:linear-gradient(160deg,#fff,#c7fcff);box-shadow:0 0 24px #40efff78,0 12px 22px #10092055;border:2px solid #fff;display:grid;place-items:center;color:#277b84;font:700 34px Fredoka;will-change:transform}.tile[data-lane="1"]{background:linear-gradient(160deg,#fff,#ffc8e0);color:#a94a75;box-shadow:0 0 24px #ff76b088,0 12px 22px #10092055}.tile[data-lane="2"]{background:linear-gradient(160deg,#fff,#d8c9ff);color:#7154b4;box-shadow:0 0 24px #9269ef88,0 12px 22px #10092055}.tile[data-lane="3"]{background:linear-gradient(160deg,#fff,#bee0ff);color:#427eae;box-shadow:0 0 24px #68b9ff88,0 12px 22px #10092055}.tile.hit{animation:pop .22s forwards}.start{position:absolute;z-index:5;left:50%;top:48%;transform:translate(-50%,-50%);padding:18px 34px;background:#fff;color:#6f4784;font:700 23px Fredoka;box-shadow:0 14px 35px #0d071c55}.start span{color:#ff5fa3}.start[hidden]{display:none}.game-over{position:absolute;z-index:10;inset:0;background:#22152fd9;display:grid;place-items:center;padding:20px;text-align:center}.game-over[hidden]{display:none}.game-over>div{width:min(360px,100%);background:#fff;border-radius:28px;padding:34px 24px}.game-over h3{font:700 37px Fredoka;margin:8px}.game-over p{color:#796d7d}.game-over button{background:var(--pink);color:#fff}.over-note{font-size:55px;color:var(--purple)}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.keys button{height:76px;border:0;border-radius:0 0 15px 15px;color:#19484c;background:#80e7ee;font-weight:900;cursor:pointer;box-shadow:inset 0 -8px 0 #42bec7}.keys button:nth-child(2){background:#ff9bc5;color:#71364f;box-shadow:inset 0 -8px 0 #df6f9f}.keys button:nth-child(3){background:#b9a1fa;color:#493a77;box-shadow:inset 0 -8px 0 #8c70d5}.keys button:nth-child(4){background:#9bd2ff;color:#315b7d;box-shadow:inset 0 -8px 0 #65a7dc}.keys button.active{transform:translateY(5px);box-shadow:none}.keys span{display:grid;place-items:center;margin:auto;width:34px;height:34px;border-radius:50%;background:#fff9}.tip,.safe{text-align:center;color:#847589;font-size:13px}.how{width:min(1000px,calc(100% - 30px));margin:0 auto 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.how article{background:#fff;border-radius:23px;padding:28px;box-shadow:0 13px 35px #5a377617}.how article span{font:700 13px Fredoka;color:#b46c96}.how h3{font:700 27px Fredoka;margin:8px 0}.how p{color:#7b6e80;line-height:1.6}.safe{padding:0 20px 55px}@keyframes pop{to{transform:scale(1.35);opacity:0}}@keyframes float{50%{transform:translateY(-15px)}}@media(max-width:760px){header{height:70px;padding:0 16px}header nav{gap:12px;font-size:13px}.intro{grid-template-columns:1fr;text-align:center;min-height:auto;padding:62px 0}.intro>div>p:last-child{margin-inline:auto}.music-orbit{width:230px;margin-top:35px}.music-orbit span{font-size:76px}.game-header{align-items:flex-start;flex-direction:column}.actions{justify-content:flex-start}.stats{grid-template-columns:repeat(2,1fr)}.stage{height:590px;max-height:68vh}.how{grid-template-columns:1fr}.tip{line-height:1.7}}@media(max-width:430px){.brand{font-size:15px}.brand span{width:35px;height:35px}header nav a:last-child{display:none}.intro h1{font-size:58px}.game-wrap{border-radius:24px;padding:16px 10px 24px}.game-header{padding:8px}.actions button{font-size:12px;padding:10px}.stage{min-height:470px}.tile{height:90px;width:calc(25% - 9px)}.keys button{height:66px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}