@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap";:root{font-family:DM Sans,system-ui,sans-serif;color:#3b2730;background:#fcf7f4;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#3b2730;--muted:#89737d;--rose:#e85d75;--rose-soft:#ffe2e7;--cream:#fffaf6;--line:#eadbd8;--shadow:0 24px 60px rgba(117,72,79,.12)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 12% 0%,#fff 0,#fcf7f4 32%,#f7eeeb)}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:28px 0 34px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand-lockup{display:flex;align-items:center;gap:13px}.brand-mark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:#fff8f2;font-size:22px;box-shadow:0 7px 20px #3b27302d}.eyebrow,.section-kicker{margin:0 0 4px;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:700;color:var(--rose)}h1,h2,h3,p{margin-top:0}h1{font-size:15px;margin:0;font-weight:700;letter-spacing:-.02em}.icon-button{border:1px solid var(--line);background:#ffffffa6;color:var(--ink);width:38px;height:38px;border-radius:50%;font-weight:700}.hero-card{display:flex;align-items:stretch;justify-content:space-between;gap:32px;padding:34px 38px;border:1px solid #f2e5e0;border-radius:30px;background:linear-gradient(115deg,#fffefa,#fff7f2 57%,#ffecef);box-shadow:var(--shadow);overflow:hidden;position:relative}.hero-card:after{content:"";position:absolute;width:250px;height:250px;right:130px;top:-130px;border-radius:50%;background:#fff6;filter:blur(4px)}.hero-copy{position:relative;z-index:1;max-width:650px}.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#fff;color:#a04d61;border:1px solid #f4d3d8;font-size:11px;font-weight:700;letter-spacing:.04em}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px #f8cfd6}.hero-copy h2{font-family:Playfair Display,Georgia,serif;font-size:clamp(45px,7vw,79px);letter-spacing:-.07em;line-height:.98;margin:18px 0 14px;color:var(--ink)}.hero-copy>p{max-width:520px;line-height:1.65;color:var(--muted);font-size:15px}.track-meta{display:flex;align-items:center;gap:12px;margin-top:25px}.track-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#f8c5cd;color:#9f4255}.track-meta strong,.track-meta small{display:block}.track-meta strong{font-size:14px}.track-meta small{color:var(--muted);font-size:11px;margin-top:3px}.cover-art{width:185px;min-width:185px;border-radius:19px;overflow:hidden;box-shadow:0 14px 30px #b8758260;transform:rotate(3deg);background:#ebc3c9;min-height:185px;position:relative;z-index:1}.cover-art img{width:100%;height:100%;object-fit:cover;display:block}.placeholder-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#d9c5d0,#f4d6d2 52%,#c5d2dc);color:#fff8f2;text-align:center;text-transform:uppercase;letter-spacing:.1em}.placeholder-cover span{font-size:35px;line-height:1;margin-bottom:10px}.placeholder-cover small{font-size:8px;line-height:1.45}.player-card,.piano-card{margin-top:18px;border:1px solid var(--line);background:#ffffffc7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:25px;padding:25px 28px;box-shadow:0 10px 35px #7a4d5510}.player-head,.piano-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.section-kicker{font-size:10px}.player-head h3,.piano-head h3{margin:0;font-size:18px;letter-spacing:-.03em}.time-readout{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;padding-top:3px}.progress-wrap{position:relative;margin:20px 0 18px}.progress-wrap input{width:100%;accent-color:var(--rose);height:4px}.progress-glow{position:absolute;left:0;top:7px;width:40%;height:20px;background:#f8b7c2;opacity:.16;filter:blur(14px);pointer-events:none}.controls{display:flex;align-items:center;justify-content:center;gap:12px}.control{border:0;border-radius:14px;height:43px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700}.control.ghost{background:#f5ecea;color:#74545b;min-width:43px}.control.primary{background:var(--rose);color:#fff;box-shadow:0 10px 20px #e85d7540;padding:0 23px}.piano-card{padding-bottom:19px}.hint-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin:20px 0 14px}.sound-toggle{border:0;background:transparent;color:#8a5560;font-size:11px;font-weight:700}.keyboard{position:relative;height:230px;display:flex;border-radius:15px;overflow:hidden;background:#3b2730;padding:8px;gap:3px;box-shadow:inset 0 2px #ffffff12,0 18px 35px #4d263015}.piano-key{position:relative;border:0;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.piano-key.natural{flex:1;background:linear-gradient(180deg,#fffdfa,#f8f0ec 78%,#e3d3d0);border-radius:0 0 9px 9px;border:1px solid #eadeda;border-top:0;box-shadow:inset 0 -5px #dfd1ce;color:#b59699;z-index:1}.piano-key.black{position:absolute;z-index:3;top:8px;height:137px;width:6.5%;background:linear-gradient(180deg,#5f4650,#2f2029 92%);border-radius:0 0 7px 7px;border:1px solid #76535c;box-shadow:inset 0 -4px #21171d,0 4px 8px #26151a88;color:#e9cbd0}.piano-key.black[data-note="C#3"]{left:7.1%}.piano-key.black[data-note="D#3"]{left:14.2%}.piano-key.black[data-note="F#3"]{left:28.4%}.piano-key.black[data-note="G#3"]{left:35.5%}.piano-key.black[data-note="A#3"]{left:42.6%}.piano-key.black[data-note="C#4"]{left:56.8%}.piano-key.black[data-note="D#4"]{left:63.9%}.piano-key.black[data-note="F#4"]{left:78.1%}.piano-key.black[data-note="G#4"]{left:85.2%}.piano-key.black[data-note="A#4"]{left:92.3%}.piano-key.is-playing,.piano-key.is-guided{background:linear-gradient(180deg,#f8a1b0,#e85d75 83%,#c64158)!important;color:#fff!important;box-shadow:0 0 0 2px #fff8 inset,0 0 28px #e85d75aa!important;transform:translateY(2px)}.piano-key.is-mistake{background:linear-gradient(180deg,#ffb4aa,#e85d75)!important;color:#fff!important;animation:shake .18s linear 1}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.piano-key.is-correct{box-shadow:0 0 0 3px #fff8 inset,0 0 28px #f6a7b3!important}.key-name{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-weight:700;font-size:13px}.key-octave{position:absolute;bottom:27px;left:0;right:0;text-align:center;font-size:9px;opacity:.7}.piano-key.black .key-name{bottom:8px;font-size:10px}.piano-key.black .key-octave{display:none}.mode-chip{border:1px solid #f3d8dc;padding:7px 10px;border-radius:999px;color:#a34f61;background:#fff6f7;font-size:10px;font-weight:700}.mode-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rose);margin-right:5px}.keyboard-footer{display:flex;justify-content:space-between;color:#aa9194;font-size:10px;margin-top:10px}footer{display:flex;justify-content:space-between;color:#ae9799;font-size:10px;padding:20px 4px 0}dialog{border:1px solid var(--line);border-radius:20px;padding:28px;max-width:370px;color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:#3b273066;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog h2{font-family:Playfair Display,serif}.dialog-close{float:right;border:0;background:#f5ecea;border-radius:50%;width:28px;height:28px;font-size:20px;color:var(--muted)}@media (max-width:700px){.app-shell{width:min(100% - 22px,560px);padding-top:17px}.hero-card{padding:27px 22px;gap:17px}.cover-art{width:110px;min-width:110px;min-height:110px;height:110px}.hero-copy h2{font-size:51px}.hero-copy>p{font-size:13px}.player-card,.piano-card{padding:20px 16px}.keyboard{height:200px}.piano-key.black{height:120px}.hint-row{font-size:10px}.hint-row span{max-width:205px}footer{padding-bottom:8px}}@media (max-width:430px){.hero-card{display:block}.cover-art{position:absolute;right:20px;top:23px;width:92px;min-width:92px;height:92px;min-height:92px}.hero-copy{padding-right:90px}.hero-copy h2{font-size:45px}.track-meta{margin-top:20px}.keyboard{height:180px;padding:6px}.piano-key.black{top:6px;height:106px}}.listen-card small{color:#9f8f92;font-size:12px}.listen-card audio{width:100%;margin-top:18px;height:42px;accent-color:#e85d75}.piano-key.black[data-note="C#3"]{left:6.25%}.piano-key.black[data-note="D#3"]{left:12.5%}.piano-key.black[data-note="F#3"]{left:25%}.piano-key.black[data-note="G#3"]{left:31.25%}.piano-key.black[data-note="A#3"]{left:37.5%}.piano-key.black[data-note="C#4"]{left:50%}.piano-key.black[data-note="D#4"]{left:56.25%}.piano-key.black[data-note="F#4"]{left:68.75%}.piano-key.black[data-note="G#4"]{left:75%}.piano-key.black[data-note="A#4"]{left:81.25%}.piano-key.black[data-note="C#5"]{left:93.75%}