.music-app{--ink:#303154;--muted:#696b88;--violet:#6651c9;color:var(--ink);max-width:960px;margin:0 auto;font-family:inherit}.music-app *{box-sizing:border-box}.music-app button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.music-app button:focus-visible{outline:3px solid #3c67dc;outline-offset:3px}.music-hero{position:relative;overflow:hidden;text-align:center;padding:42px 24px 38px;border-radius:32px;background:radial-gradient(circle at 12% 9%,#fff9d2,transparent 29%),radial-gradient(circle at 88% 16%,#e8dbff,transparent 26%),linear-gradient(135deg,snow,#edf8ff);box-shadow:0 18px 42px #737aaf21;border:1px solid #ffffffeb}.music-eyebrow{font-size:12px;letter-spacing:.22em;font-weight:900;color:#705cc9}.music-hero h1{margin:7px 0 6px;font-size:clamp(30px,5vw,52px);line-height:1.2;letter-spacing:.02em;font-weight:900}.music-hero h1 span{color:#fa9d62}.music-hero p{margin:0;color:var(--muted);font-weight:700;font-size:17px}.music-hero-star{position:absolute;color:#f4a262;pointer-events:none}.star-one{left:9%;top:37%;font-size:34px}.star-two{right:10%;bottom:17%;font-size:32px;color:#8e79da;transform:rotate(-14deg)}.music-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.music-mode-card{display:flex;align-items:center;gap:18px;text-align:left;min-height:158px;width:100%;border:1px solid #fff;border-radius:28px;padding:22px;box-shadow:0 11px 24px #565a9420,inset 0 1px #fff;transition:transform .18s,box-shadow .18s}.music-mode-card:hover,.music-mode-card:active{transform:translateY(-3px);box-shadow:0 16px 28px #565a9429,inset 0 1px #fff}.music-mode-card.violet{background:linear-gradient(135deg,#eeeaff,#f8f3ff)}.music-mode-card.peach{background:linear-gradient(135deg,#ffe8dc,#fff5de)}.music-mode-card.mint{background:linear-gradient(135deg,#dbf8ee,#f2fff8)}.music-mode-card.sky{background:linear-gradient(135deg,#dff0ff,#edf4ff)}.music-mode-icon{width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:24px;background:#fff;font-family:Georgia,serif;font-size:52px;line-height:1;box-shadow:0 7px 14px #565a9420;color:#765ed5}.peach .music-mode-icon{color:#ee8a50}.mint .music-mode-icon{color:#37a887}.sky .music-mode-icon{color:#568bd7}.music-mode-copy{display:grid;gap:6px}.music-mode-copy strong{font-size:clamp(17px,2vw,23px);font-weight:900;line-height:1.35}.music-mode-copy small{color:#62647e;font-size:14px;line-height:1.5;font-weight:700}.music-mode-arrow{margin-left:auto;align-self:flex-end;display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:#fff;font-size:20px;color:#5d5a86}.music-game-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.music-game-title{margin:0;font-size:clamp(20px,3vw,27px);font-weight:900}.music-game-title span{color:#765ed5}.music-easy-badge{font-size:12px;font-weight:900;color:#7a62ca;background:#f0ebff;border-radius:99px;padding:8px 12px}.music-back{border:1px solid #dcdcf0;border-radius:99px;background:#fff;color:#514b7c;padding:10px 14px;font-size:14px!important;font-weight:800!important;box-shadow:0 3px 8px #51568d12}.music-back:active{transform:translateY(2px)}.music-game-body{padding:23px;border-radius:28px;background:linear-gradient(150deg,#fff,#f9f8ff);border:1px solid #efecfa;box-shadow:0 16px 36px #6d6d9a1b}.music-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.music-stat{display:grid;gap:1px;padding:10px 16px;border-radius:17px;background:#f4f2ff;border:1px solid #ece9ff}.music-stat span{font-size:11px;color:#706f91;font-weight:800}.music-stat strong{font-size:22px;line-height:1.2;font-weight:900;color:#4d3faa}.music-stat.is-pop strong{animation:music-pop .28s ease-out}.music-choices{display:flex;justify-content:center;gap:8px;margin:0 0 14px}.music-choices button{border:1px solid #dedaf1;background:#fff;color:#6c6588;border-radius:99px;padding:8px 18px;font-size:13px;font-weight:800}.music-choices button.is-selected{background:#6450bf;color:#fff;border-color:#6450bf}.music-stage,.music-listen-stage,.music-melody-stage{border:1px solid #ebe7f6;border-radius:24px;background:linear-gradient(140deg,#fdfbff,#fffaf3);padding:15px;text-align:center;min-height:188px}.music-stage-label{font-size:14px;font-weight:900;color:#625a94;margin-bottom:8px}.music-staff{display:block;width:min(100%,600px);height:auto;margin:auto;border-radius:18px;filter:drop-shadow(0 5px 9px #66619012)}.music-countdown{min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:900;color:#5d4cb1}.music-countdown strong{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#6651c9;color:#fff;font-size:27px;line-height:1;box-shadow:0 5px 12px #6651c947}.music-feedback{position:relative;text-align:center;min-height:56px;display:grid;place-items:center;color:#625b89;font-weight:900;font-size:17px}.music-feedback.success{color:#278365}.music-feedback.soft-miss{color:#b46b51}.music-sparkles{position:absolute;top:-5px;left:calc(50% + 70px);color:#eda354;font-size:20px;white-space:nowrap;pointer-events:none;animation:music-spark .48s ease-out both}.music-keyboard{position:relative;width:100%;max-width:720px;margin:0 auto;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none}.music-white-keys{display:flex;width:100%;gap:3px}.music-key{transition:transform .1s,background .15s,box-shadow .15s;border:0}.music-key-white{flex:1;min-width:0;height:clamp(125px,24vw,180px);border-radius:0 0 13px 13px;background:linear-gradient(#fff,#f8f6ff);border:1px solid #d4d0e8;box-shadow:0 7px #d8d4e8,0 10px 16px #54517e21;display:flex;align-items:flex-end;justify-content:center;padding:0 0 15px;color:#555274;font-weight:900;font-size:clamp(13px,2.5vw,20px)}.music-key-white:active,.music-key-white.is-lit{transform:translateY(5px);background:linear-gradient(#d9f8e9,#e9fff5);box-shadow:0 2px #8dcfad,0 0 22px #83e1b97d;color:#236d54}.music-key-white.is-wrong{animation:music-shake .3s;background:#ffebe4}.music-key-black{position:absolute;top:0;transform:translate(-50%);height:55%;z-index:2;border-radius:0 0 9px 9px;background:linear-gradient(#464161,#26233b);color:#fff;box-shadow:0 5px 6px #2d294668;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;font-size:11px}.music-key-black:active,.music-key-black.is-lit{background:#7d69d6;transform:translate(-50%) translateY(3px)}.music-key:disabled{cursor:default}.music-key:disabled:not(.is-lit){opacity:.76}.music-listen-stage{min-height:220px;display:grid;justify-items:center;align-content:center;gap:9px}.music-listen-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#e9e2ff;color:#6b55c5;font-size:48px;line-height:1}.music-listen-stage strong{font-size:19px}.music-secondary,.music-primary{border:1px solid #bdb5e6;border-radius:99px;background:#fff;color:#5e4ea9;padding:11px 20px;font-weight:900!important;min-height:46px;box-shadow:0 4px 9px #4d4b7519;transition:transform .15s,box-shadow .15s}.music-secondary:active,.music-primary:active{transform:translateY(2px);box-shadow:none}.music-primary{background:#6651c9;border-color:#6651c9;color:#fff}.music-melody-stage{min-height:220px;display:grid;justify-items:center;align-content:center;gap:12px}.music-melody-dots{display:flex;gap:11px;justify-content:center}.music-melody-dots span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ebe7f7;color:#a39bbc;font-size:23px;font-weight:900}.music-melody-dots span.is-filled{background:#d9f7e8;color:#2f946c}.music-tap-pad{position:relative;overflow:hidden;display:grid;place-items:center;align-content:center;gap:2px;width:min(100%,600px);height:155px;margin:0 auto 6px;border:0;border-radius:30px;background:linear-gradient(145deg,#ffae78,#f27e8e);color:#fff;box-shadow:0 9px #d76472,0 14px 22px #d7647266;touch-action:manipulation;transition:transform .1s,box-shadow .1s}.music-tap-pad span{font-size:36px;font-weight:900}.music-tap-pad small{font-size:14px;font-weight:800}.music-tap-pad:active,.music-tap-pad.is-hit{transform:translateY(6px);box-shadow:0 3px #d76472,0 5px 11px #d7647244}.music-tap-pad.is-hit:after{content:"";position:absolute;width:30px;height:30px;border:3px solid #fff9;border-radius:50%;animation:music-ripple .35s ease-out forwards}.music-tap-pad:disabled{opacity:.6;transform:none;box-shadow:0 9px #d76472}.music-start-button{display:block;width:min(100%,600px);min-height:94px;margin:0 auto 6px;border:0;border-radius:27px;background:linear-gradient(145deg,#7a64dc,#5946bd);color:#fff;font-size:25px!important;font-weight:900!important;box-shadow:0 7px #473697,0 12px 21px #5946bd55;transition:transform .12s,box-shadow .12s}.music-start-button:active{transform:translateY(5px);box-shadow:0 2px #473697}.music-result{text-align:center;padding:30px 12px 34px}.music-result-icon{width:86px;height:86px;display:grid;place-items:center;margin:0 auto 13px;border-radius:50%;background:#fff2cc;color:#e6a344;font-size:53px}.music-result h2{font-size:37px;line-height:1.15;margin:0 0 8px;font-weight:900}.music-result p{color:#6f6d86;font-weight:700}.music-result-numbers{display:flex;justify-content:center;gap:15px;margin:22px auto}.music-result-numbers span{display:grid;min-width:116px;padding:13px;border-radius:18px;background:#f0ecff}.music-result-numbers strong{font-size:29px;color:#5947ba}.music-result-numbers small{font-weight:800;color:#6c668f}.music-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}@keyframes music-pop{50%{transform:scale(1.19)}}@keyframes music-spark{0%{opacity:0;transform:translateY(9px) scale(.7)}to{opacity:1;transform:translateY(-10px) scale(1)}}@keyframes music-shake{25%,75%{transform:translate(3px)}50%{transform:translate(-3px)}}@keyframes music-ripple{to{opacity:0;transform:scale(7)}}@media (max-width:660px){.music-hero{padding:35px 45px}.music-mode-grid{grid-template-columns:1fr;gap:12px}.music-mode-card{min-height:112px;padding:16px 19px}.music-mode-icon{width:64px;height:64px;border-radius:19px;font-size:42px}.music-game-body{padding:14px}.music-game-heading{flex-wrap:wrap}.music-game-title{order:-1;width:100%}.music-stat{padding:8px 10px}.music-stat strong{font-size:17px}.music-staff{min-height:145px}.music-key-white{padding-bottom:12px}.music-mode-copy small{font-size:13px}}@media (prefers-reduced-motion:reduce){.music-app *{animation-duration:.01ms!important;transition-duration:.01ms!important}}