:root{color:#161922;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fffdf8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#fffdf8;min-width:320px}body{min-width:320px;min-height:100svh;margin:0}button,a{font:inherit}.coming-soon-page{--piano-height:clamp(136px, 22svh, 210px);--pointer-x:50vw;--pointer-y:42vh;--scroll-progress:0;--ink:#161922;--muted:#61687a;--paper:#fffdf8;--gold:#d9a441;--rose:#ef6f7b;--teal:#1ca7a8;--blue:#3454d1;min-height:100svh;color:var(--ink);isolation:isolate;padding-bottom:calc(var(--piano-height) + env(safe-area-inset-bottom));background:radial-gradient(circle at 84% 12%,#ef6f7b38,#0000 26%),radial-gradient(circle at 20% 18%,#1ca7a82e,#0000 28%),linear-gradient(145deg,#fffdf8 0%,#f7fbff 45%,#fff8ee 100%);position:relative;overflow-x:hidden}.coming-soon-page:before{z-index:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), #d9a4412e, #1ca7a81a 16rem, transparent 28rem);content:"";mix-blend-mode:multiply;position:fixed;inset:0}.landing-stage{isolation:isolate;min-height:100svh;position:relative;overflow:hidden}.parallax-depth{z-index:0;pointer-events:none;transform-style:preserve-3d;position:absolute;inset:0}.parallax-depth span{will-change:transform;display:block;position:absolute}.depth-note{color:#16192229;text-shadow:0 18px 45px #2d32441f;font-family:Georgia,serif;font-weight:900;line-height:1}.depth-note-a{transform:translate3d(0, calc(var(--scroll-progress) * -80px), -80px) rotate(-12deg);font-size:clamp(4.8rem,12vw,10rem);top:11%;right:18%}.depth-note-b{color:#ef6f7b33;transform:translate3d(0, calc(var(--scroll-progress) * 64px), -40px) rotate(16deg);font-size:clamp(3.2rem,8vw,6.5rem);top:33%;left:7%}.depth-note-c{color:#1ca7a838;transform:translate3d(0, calc(var(--scroll-progress) * -110px), -20px) rotate(10deg);font-size:clamp(3rem,7vw,5.4rem);bottom:24%;right:8%}.depth-note-d{color:#3454d129;transform:translate3d(0, calc(var(--scroll-progress) * -48px), -30px) rotate(-8deg);font-size:clamp(2.8rem,7vw,5.8rem);bottom:10%;left:18%}.depth-key{background:linear-gradient(90deg,#fffdf8,#eef8ff);border:1px solid #1619221a;border-radius:8px;width:clamp(150px,22vw,310px);height:clamp(28px,4vw,54px);box-shadow:0 24px 70px #2d324414}.depth-key-a{transform:translate3d(0, calc(var(--scroll-progress) * 92px), -90px) rotate(-18deg);top:28%;right:-72px}.depth-key-b{transform:translate3d(0, calc(var(--scroll-progress) * -72px), -70px) rotate(13deg);background:linear-gradient(90deg,#fff6f8,#fffdf8);bottom:30%;left:-82px}.staff-lines{transform-origin:50%;z-index:0;will-change:transform;background:repeating-linear-gradient(#0000 0 28px,#16192214 28px 30px);height:245px;position:absolute;inset:16% 0 auto;transform:rotate(-4deg)scaleX(1.08)}.social-links{z-index:5;flex-direction:column;gap:10px;display:flex;position:absolute;top:28px;left:28px}.social-links a,.store-links a{color:var(--ink);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border:1px solid #1619221f;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:0 14px 35px #2d32441f}.social-links a{border-radius:50%;place-items:center;width:42px;height:42px;font-size:1.1rem;display:grid}.social-link.is-facebook{color:#1877f2}.social-link.is-linkedin{color:#0a66c2}.social-link.is-instagram{color:#e4405f;background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4) border-box;border-color:#0000}.social-link.is-tiktok{color:#111;text-shadow:-1px 0 #25f4ee,1px 0 #fe2c55}.social-link.is-reddit{color:#ff4500}.social-link svg{filter:drop-shadow(0 7px 10px #2d324429);animation:4.8s ease-in-out infinite social-wave;animation-delay:calc(var(--social-delay,0) * .14s)}.social-link:first-child{--social-delay:1}.social-link:nth-child(2){--social-delay:2}.social-link:nth-child(3){--social-delay:3}.social-link:nth-child(4){--social-delay:4}.social-link:nth-child(5){--social-delay:5}.social-links a:hover,.store-links a:hover{border-color:#3454d157;transform:translateY(-2px);box-shadow:0 18px 44px #2d32442e}.social-links a:focus-visible,.store-links a:focus-visible{outline-offset:3px;outline:3px solid #1ca7a873}.legal-links{z-index:6;gap:10px;display:flex;position:absolute;top:28px;right:28px}.legal-links a,.home-link,.legal-footer a{color:var(--ink);text-decoration:none}.legal-links a{text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border:1px solid #1619221f;border-radius:8px;min-width:78px;padding:10px 14px;font-size:.92rem;font-weight:800;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:0 14px 35px #2d32441f}.legal-links a:hover{border-color:#3454d157;transform:translateY(-2px);box-shadow:0 18px 44px #2d32442e}.legal-links a:focus-visible,.home-link:focus-visible,.legal-footer a:focus-visible{outline-offset:3px;outline:3px solid #1ca7a873}.hero-stage{z-index:2;min-height:calc(100svh - var(--piano-height));text-align:center;align-content:center;justify-items:center;padding:104px 24px 34px;display:grid;position:relative}.brand-mark{appearance:none;cursor:pointer;background:#ffffffad;border:2px solid #1619221a;border-radius:50%;place-items:center;width:clamp(190px,18vw,246px);height:clamp(190px,18vw,246px);margin-bottom:22px;padding:0;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;overflow:hidden;box-shadow:0 22px 50px #1ca7a829}.brand-mark:hover,.brand-mark:focus-visible{border-color:#3454d147;transform:translateY(-2px)rotate(-2deg)scale(1.04);box-shadow:0 28px 62px #1ca7a838}.brand-mark:focus-visible{outline-offset:4px;outline:3px solid #1ca7a873}.brand-mark img{object-fit:contain;width:92%;height:92%;display:block}.eyebrow{color:var(--blue);letter-spacing:0;text-transform:uppercase;margin:0 0 12px;font-size:clamp(.74rem,1.6vw,.88rem);font-weight:800}.hero-title{--title-x:0;--title-y:0;letter-spacing:0;perspective:900px;max-width:860px;transform:rotateY(calc(var(--title-x) * 7deg)) rotateX(calc(var(--title-y) * -5deg));transform-style:preserve-3d;text-shadow:0 22px 42px #2d324433;flex-wrap:wrap;justify-content:center;gap:0 clamp(.16em,1.3vw,.28em);margin:0;font-size:clamp(3.2rem,8vw,7.7rem);line-height:.88;transition:transform .16s;display:flex}.title-word{white-space:nowrap;display:inline-flex}.title-letter,.title-space{place-items:center;min-width:.45em;display:inline-grid}.title-letter{color:#121826;filter:drop-shadow(0 4px #fffffff2)drop-shadow(0 18px 18px #2d32443d);text-shadow:.018em .018em #ffffffeb,.04em .055em #1619221f;transform:translate3d(calc(var(--title-x) * (var(--letter-index) - 8) * -.9px), calc(var(--title-y) * (var(--letter-index) - 8) * .5px), var(--letter-depth)) rotateY(calc(var(--title-x) * 13deg)) rotateX(calc(var(--title-y) * -10deg));border-radius:8px;transition:background .18s,box-shadow .18s,color .18s,filter .18s,transform .18s;position:relative;overflow:hidden}.title-letter:before{content:"";opacity:0;background:linear-gradient(115deg,#0000 0 38%,#ffffffbd 48%,#0000 58%);transition:opacity .18s,transform .42s;position:absolute;inset:0;transform:translate(-140%)skew(-12deg)}.title-letter:after{content:"";opacity:0;background:#1218263d;border-radius:999px;height:.08em;transition:opacity .18s;position:absolute;inset:auto 14% 2px}.title-letter:nth-child(3n+1){color:#111827}.title-letter:nth-child(3n+2){color:#1e293b}.title-letter:nth-child(3n+3){color:#172033}.title-letter:hover,.title-letter:focus-visible{color:#0f172a;filter:none;text-shadow:0 0 #0000;transform:translateY(.12em) rotateX(-10deg) scaleX(.96) rotateZ(calc((var(--letter-index) - 8) * -.25deg));background:linear-gradient(#fffffffa,#ecf2f8f5);box-shadow:inset 0 -.12em #3454d133,0 18px 28px #2d32442e}.hero-title:hover .title-letter{animation:1.4s ease-in-out infinite title-breathe;animation-delay:calc(var(--letter-index) * 28ms)}.title-letter:hover:before,.title-letter:focus-visible:before{opacity:1;transform:translate(130%)skew(-12deg)}.title-letter:hover:after,.title-letter:focus-visible:after{opacity:1}.intro{max-width:600px;color:var(--muted);margin:24px 0 0;font-size:clamp(1rem,2vw,1.22rem);line-height:1.55}.notation-icons{color:var(--rose);gap:18px;margin-top:28px;font-size:2rem;display:flex}.notation-icons svg:nth-child(2){color:var(--gold);font-size:2.5rem}.notation-icons svg:nth-child(3){color:var(--teal)}.play-ribbon{grid-template-columns:minmax(280px,.9fr) minmax(280px,1fr);align-items:center;gap:12px;width:min(100%,720px);margin-top:24px;display:grid}.mode-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.mode-tabs button,.pulse-button{appearance:none;min-height:42px;color:var(--ink);cursor:pointer;font:inherit;touch-action:manipulation;background:#ffffffd1;border:1px solid #1619221f;border-radius:8px;font-size:.86rem;font-weight:900;transition:transform .18s,border-color .18s,background .18s,color .18s}.mode-tabs button:hover,.mode-tabs button:focus-visible,.mode-tabs button.is-active,.pulse-button:hover,.pulse-button:focus-visible{color:#fff;background:#3454d1;border-color:#3454d161;transform:translateY(-1px)}.ribbon-summary{text-align:left;gap:4px;display:grid}.ribbon-summary strong{color:var(--ink);font-size:1.05rem;line-height:1.2}.ribbon-summary span{color:var(--muted);font-size:.9rem;line-height:1.42}.practice-readout{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.practice-readout div,.pulse-button{min-width:0;padding:10px}.practice-readout div{background:#fffdf8cc;border:1px solid #1619221a;border-radius:8px;gap:3px;display:grid}.practice-readout span{color:var(--muted);text-transform:uppercase;font-size:.72rem;font-weight:900}.practice-readout strong{color:var(--ink);font-size:1.18rem}.melody-staff{background:#f7fbffcc;border-radius:8px;grid-column:1/-1;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;gap:8px;min-height:52px;padding:8px;display:grid;position:relative;overflow:hidden}.staff-rails{pointer-events:none;background:repeating-linear-gradient(#1619221f 0 1px,#0000 1px 8px);position:absolute;inset:8px}.melody-staff span{z-index:1;min-width:0;min-height:34px;color:var(--blue);transform:translateY(calc((var(--trail-step) % 3) * -3px));background:#fffdf8;border-radius:999px;place-items:center;font-size:.76rem;font-weight:950;display:grid;position:relative;box-shadow:0 8px 18px #2d32441f}.melody-staff span.is-sharp{color:#fffdf8;background:#161922}.playground-section{z-index:3;width:min(100% - 40px,1100px);padding:clamp(52px, 8vw, 92px) 0 calc(var(--piano-height) + 108px + env(safe-area-inset-bottom));gap:26px;margin:0 auto;display:grid;position:relative}.content-band{border-top:1px solid #1619221f;border-bottom:1px solid #16192214;gap:12px;padding:26px 0;display:grid}.content-band h2,.benefit-panel h2,.learning-paths h2,.topic-cloud h2,.faq-section h2{max-width:840px;color:var(--ink);margin:0;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.02}.content-band p:not(.eyebrow){color:#313747;max-width:790px;margin:0;font-size:clamp(1rem,1.8vw,1.14rem);line-height:1.72}.highlight-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.highlight-card{background:#ffffffc2;border:1px solid #1619221f;border-radius:8px;min-width:0;padding:18px;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:0 16px 38px #2d32441a}.highlight-card:hover,.highlight-card:focus-within,.path-card:hover,.path-card:focus-within,.benefit-panel li:hover,.faq-section details:hover{border-color:#3454d147;transform:translateY(-3px);box-shadow:0 22px 48px #2d324424}.highlight-card h3{color:var(--blue);margin:0 0 10px;font-size:1.08rem;line-height:1.22}.highlight-card p{color:var(--muted);margin:0;font-size:.97rem;line-height:1.6}.sound-garden{perspective:1000px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;padding:34px 0;display:grid;position:relative}.sound-garden:before{content:"";opacity:.7;pointer-events:none;height:220px;transform:translateY(calc(var(--scroll-progress) * -80px)) rotate(3deg);background:repeating-linear-gradient(#16192212 0 2px,#0000 2px 24px);position:absolute;inset:5% -12% auto}.sound-garden-copy{z-index:1;gap:12px;display:grid;position:relative}.sound-garden-copy h2{max-width:680px;color:var(--ink);margin:0;font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.02}.sound-garden-copy p:not(.eyebrow){color:#313747;margin:0;font-size:clamp(1rem,1.8vw,1.14rem);line-height:1.7}.sound-garden-grid{z-index:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid;position:relative}.sound-tile{appearance:none;width:100%;min-height:190px;color:var(--ink);cursor:pointer;font:inherit;text-align:left;touch-action:manipulation;transform-style:preserve-3d;background:radial-gradient(circle at 84% 18%,#ffffffb8,#0000 28%),linear-gradient(145deg,#ffffffdb,#f7fbffc7);border:1px solid #1619221f;border-radius:8px;gap:9px;padding:18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;position:relative;overflow:hidden;box-shadow:0 20px 48px #2d32441f}.sound-tile:before{content:"";opacity:0;background:linear-gradient(115deg,#0000 0 34%,#ffffff70 44%,#0000 54%),radial-gradient(circle at 16% 82%,#d9a44129,#0000 24%);transition:opacity .18s,transform .52s;position:absolute;inset:0;transform:translate(-42%)}.sound-tile:after{color:#16192214;content:"♪";font-family:Georgia,serif;font-size:8.5rem;font-weight:900;transition:color .18s,transform .18s;position:absolute;bottom:-36px;right:-18px;transform:translateZ(24px)rotate(-12deg)}.sound-tile:hover,.sound-tile:focus-visible,.sound-tile:active{border-color:#3454d152;transform:translateY(-3px);box-shadow:0 26px 60px #2d32442b}.sound-tile:hover:before,.sound-tile:focus-visible:before,.sound-tile:active:before{opacity:1;transform:translate(44%)}.sound-tile:hover:after,.sound-tile:focus-visible:after,.sound-tile:active:after{color:#16192221;transform:translate3d(-8px,-12px,34px)rotate(2deg)scale(1.06)}.sound-tile span{width:fit-content;color:var(--blue);text-transform:uppercase;background:#ffffffad;border-radius:999px;padding:7px 9px;font-size:.72rem;font-weight:950}.sound-tile strong{z-index:1;font-size:1.25rem;line-height:1.14;position:relative;transform:translateZ(18px)}.sound-tile p{z-index:1;color:var(--muted);margin:0;font-size:.94rem;line-height:1.5;position:relative;transform:translateZ(12px)}.sound-tile small{z-index:1;color:var(--ink);font-size:.8rem;font-weight:900;position:relative;transform:translateZ(22px)}.sound-tile.is-rose span{color:var(--rose)}.sound-tile.is-gold span{color:#9b6e08}.sound-tile.is-teal span{color:var(--teal)}.learning-paths{border-top:1px solid #1619221f;gap:18px;padding:30px 0;display:grid}.learning-paths>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.path-card{background:#ffffffc2;border:1px solid #1619221f;border-radius:8px;gap:8px;min-width:0;padding:18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;box-shadow:0 16px 38px #2d32441a}.path-card p{color:var(--rose);text-transform:uppercase;margin:0;font-size:.78rem;font-weight:900}.path-card h3{color:var(--ink);margin:0;font-size:1.24rem;line-height:1.2}.path-card span{color:var(--muted);line-height:1.62}.benefit-panel{border-top:1px solid #1619221f;border-bottom:1px solid #16192214;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);align-items:start;gap:24px;padding:30px 0;display:grid}.benefit-panel div{gap:12px;display:grid}.benefit-panel p:not(.eyebrow){color:#313747;max-width:740px;margin:0;font-size:clamp(1rem,1.8vw,1.14rem);line-height:1.72}.benefit-panel ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.benefit-panel li{min-width:0;color:var(--ink);background:#ffffffc2;border:1px solid #1619221f;border-radius:8px;padding:12px;font-size:.95rem;font-weight:850;line-height:1.25;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:0 12px 30px #2d324414}.topic-cloud,.faq-section{gap:16px;padding:26px 0;display:grid}.topic-cloud div{flex-wrap:wrap;gap:10px;display:flex}.topic-cloud span{color:#313747;background:#ffffffbd;border:1px solid #1619221f;border-radius:999px;padding:9px 12px;font-size:.95rem;font-weight:800}.faq-section details{background:#ffffffc2;border:1px solid #1619221f;border-radius:8px;transition:transform .18s,border-color .18s,box-shadow .18s}.faq-section summary{cursor:pointer;color:var(--ink);padding:16px 18px;font-weight:900}.faq-section p{color:var(--muted);margin:0;padding:0 18px 18px;line-height:1.62}.floating-notes{z-index:1;pointer-events:none;position:absolute;inset:0}.floating-notes span{top:var(--note-top);left:var(--note-left);color:#1619225c;font-family:Georgia,serif;font-size:var(--note-size);animation:8s ease-in-out infinite float-note;animation-delay:var(--note-delay);font-weight:700;position:absolute}.floating-notes span:nth-child(3n+1){color:#ef6f7b80}.floating-notes span:nth-child(3n+2){color:#1ca7a87a}.floating-notes span:nth-child(3n+3){color:#d9a4418f}.cursor-notes{z-index:70;pointer-events:none;position:fixed;inset:0}.cursor-notes span{top:var(--cursor-y);left:var(--cursor-x);color:#3454d1b8;text-shadow:0 8px 20px #3454d12e;transform:translate(-50%, -50%) rotate(var(--cursor-rotate));font-family:Georgia,serif;font-size:1.55rem;font-weight:900;line-height:1;animation:.85s ease-out forwards cursor-note;position:fixed}.cursor-notes span:nth-child(3n+1){color:#ef6f7bb8}.cursor-notes span:nth-child(3n+2){color:#1ca7a8b8}.store-links{left:26px;bottom:calc(var(--piano-height) + 24px);z-index:90;flex-direction:column;gap:10px;display:flex;position:absolute}.store-links a{transform-origin:50%;border-radius:8px;align-items:center;gap:10px;min-width:194px;padding:12px 16px;animation:2.6s ease-in-out infinite store-beg;display:flex;position:relative;overflow:hidden}.store-link:before{content:"";opacity:0;background:linear-gradient(115deg,#0000 0 32%,#ffffff59 44%,#0000 56%);animation:2.6s ease-in-out infinite store-shine;position:absolute;inset:0;transform:translate(-80%)}.store-link.is-app-store{color:#fff;background:linear-gradient(135deg,#0d8bff 0%,#0066d6 52%,#003f9e 100%);border-color:#0066d659;box-shadow:0 16px 36px #0066d647,0 0 0 7px #0d8bff1a}.store-link.is-play-store{color:#fff;background:linear-gradient(135deg,#00a173 0%,#00c853 42%,#00a1ff 100%);border-color:#00c85359;animation-delay:.22s;box-shadow:0 16px 36px #00a1ff3d,0 0 0 7px #00c8531a}.store-links svg{z-index:1;color:#fff;filter:drop-shadow(0 8px 12px #00000038);flex:none;font-size:2.2rem;animation:1.3s ease-in-out infinite store-icon-pop;position:relative}.store-links span{z-index:1;color:#fff;text-align:left;text-shadow:0 2px 10px #00000038;font-size:1.08rem;font-weight:950;line-height:1.05;display:grid;position:relative}.store-links small{color:#ffffffc7;text-transform:uppercase;font-size:.63rem;font-weight:850}.piano-wrap{z-index:2147483647;height:var(--piano-height);isolation:isolate;will-change:transform;background:linear-gradient(#272d39 0%,#11141b 32%,#050607 100%);position:fixed;bottom:0;left:0;right:0;transform:translate(0,0);box-shadow:0 -34px 80px #1b1f2b57,0 -1px #ffffff1f}.white-keys{background:#11141b;border:2px solid #11141b;border-radius:0;grid-template-columns:repeat(12,minmax(0,1fr));height:calc(100% - 18px);display:grid;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.white-key{appearance:none;min-width:0;color:inherit;cursor:pointer;font:inherit;touch-action:manipulation;transform-origin:top;will-change:transform;background:linear-gradient(#ffffffeb,#fff0 38%),linear-gradient(#fffdf9 0%,#f8efe0 100%);border:0;border-right:1px solid #11141b3d;justify-content:center;align-items:flex-end;margin:0;padding:0 2px clamp(10px,1.5vw,18px);transition:transform .26s,filter .26s,box-shadow .26s;display:flex;position:relative;box-shadow:inset 0 -13px 18px #795b271f}.white-key:hover,.white-key:focus-visible{filter:brightness(.96)saturate(1.05)}.white-key:focus-visible{z-index:3;outline-offset:-6px;outline:3px solid #1ca7a88c}.white-key:after{content:"";opacity:0;background:#11141b26;border-radius:999px 999px 0 0;height:5px;transition:opacity .26s;position:absolute;inset:auto 13% 0}.white-key.is-pressed{filter:brightness(.95);transform:scaleY(.94);box-shadow:inset 0 12px 22px #11141b29,inset 0 -4px 10px #795b271f}.white-key.is-pressed:after{opacity:1}.white-key:nth-child(3n+1) span{color:var(--rose)}.white-key:nth-child(3n+2) span{color:var(--teal)}.white-key:nth-child(3n+3) span{color:var(--blue)}.white-key span{z-index:1;letter-spacing:0;text-align:center;text-shadow:0 2px #fffc;width:min(100%,48px);font-size:clamp(1.1rem,4vw,3rem);font-weight:950;line-height:1;transition:transform .26s,opacity .26s;position:relative;transform:translateY(0)}.white-key small{color:#16192275;font-size:clamp(.58rem,1.2vw,.82rem);font-weight:900;line-height:1;position:absolute;top:clamp(12px,2.2vw,24px);left:50%;transform:translate(-50%)}.white-key.is-pressed span{opacity:.86;transform:translateY(-2px)scale(.94)}.black-keys{right:0;bottom:calc((var(--piano-height) - 18px) * .48);z-index:2;height:calc((var(--piano-height) - 18px) * .5);pointer-events:auto;position:absolute;left:0}.black-key{appearance:none;top:0;left:calc((100% / 12 * var(--key-position)) - (100% / 12 * .2));cursor:pointer;width:3.33333%;height:100%;font:inherit;touch-action:manipulation;transform-origin:top;background:linear-gradient(#252936 0%,#090a0f 78%,#000 100%);border:0;border-radius:0 0 5px 5px;margin:0;transition:transform .18s,filter .18s,box-shadow .18s;position:absolute;box-shadow:0 12px 16px #0000004d}.black-key:hover,.black-key:focus-visible,.black-key.is-pressed{filter:brightness(1.14);transform:scaleY(.94);box-shadow:0 9px 12px #00000057}.black-key:focus-visible{outline-offset:2px;outline:3px solid #ef6f7ba6}.legal-page{--ink:#161922;--muted:#61687a;--paper:#fffdf8;--gold:#d9a441;--rose:#ef6f7b;--teal:#1ca7a8;--blue:#3454d1;min-height:100svh;color:var(--ink);background:linear-gradient(#fffdf8f5,#f7fbfff0),repeating-linear-gradient(#0000 0 30px,#1619220e 30px 32px)}.legal-hero{gap:14px;width:min(100%,940px);margin:0 auto;padding:48px 24px 18px;display:grid}.home-link{width:fit-content;color:var(--teal);align-items:center;gap:10px;margin-bottom:18px;font-weight:900;display:inline-flex}.home-link img{object-fit:cover;border-radius:50%;width:34px;height:34px}.legal-hero .eyebrow{margin:0}.legal-hero h1{max-width:760px;margin:0;font-size:clamp(2.4rem,7vw,5.6rem);line-height:.96}.legal-hero p:last-child{max-width:720px;color:var(--muted);margin:0;font-size:1.08rem;line-height:1.55}.legal-notice,.legal-document,.legal-footer{width:min(100% - 36px,940px);margin-left:auto;margin-right:auto}.legal-notice{border-left:5px solid var(--teal);color:var(--muted);background:#ffffffc2;margin-top:14px;padding:18px 20px;line-height:1.65;box-shadow:0 18px 46px #2d32441a}.legal-notice strong{color:var(--ink)}.legal-document{gap:28px;padding:34px 0 18px;display:grid}.legal-document section{padding-top:2px}.legal-document h2{color:var(--blue);margin:0 0 10px;font-size:clamp(1.28rem,2.2vw,1.72rem);line-height:1.2}.legal-document p{color:#313747;margin:0;font-size:1rem;line-height:1.78}.legal-document p+p{margin-top:12px}.legal-footer{flex-wrap:wrap;gap:12px;padding:24px 0 46px;display:flex}.legal-footer a{background:#ffffffc7;border:1px solid #1619221f;border-radius:8px;padding:9px 12px;font-weight:800}@keyframes float-note{0%,to{transform:translate(0,0)rotate(-8deg)}50%{transform:translate(12px,-22px)rotate(10deg)}}@keyframes cursor-note{0%{opacity:0;transform:translate(-50%, -50%) scale(.72) rotate(var(--cursor-rotate))}18%{opacity:1}to{opacity:0;transform:translate(-50%, -115%) scale(1.2) rotate(calc(var(--cursor-rotate) + 24deg))}}@keyframes title-breathe{0%,to{filter:drop-shadow(0 4px #fffffff2)drop-shadow(0 18px 18px #2d32443d)}50%{filter:drop-shadow(0 6px #fffffffa)drop-shadow(0 24px 24px #2d324447)}}@keyframes social-wave{0%,76%,to{transform:translateY(0)rotate(0)scale(1)}82%{transform:translateY(-4px)rotate(-8deg)scale(1.08)}88%{transform:translateY(1px)rotate(7deg)scale(.98)}94%{transform:translateY(-2px)rotate(-3deg)scale(1.04)}}@keyframes store-beg{0%,to{transform:translate(0,0)rotate(0)scale(1)}8%{transform:translate(3px,-3px)rotate(1.5deg)scale(1.04)}14%{transform:translate(-2px,1px)rotate(-1deg)scale(1.01)}20%{transform:translate(2px,-1px)rotate(.7deg)scale(1.025)}30%{transform:translate(0,0)rotate(0)scale(1)}}@keyframes store-shine{0%,40%,to{opacity:0;transform:translate(-80%)}12%{opacity:1}28%{opacity:0;transform:translate(90%)}}@keyframes store-icon-pop{0%,to{transform:rotate(0)scale(1)}28%{transform:rotate(-8deg)scale(1.12)}52%{transform:rotate(6deg)scale(1.04)}}@media (width<=760px){.coming-soon-page{--piano-height:118px}.social-links{gap:8px;top:18px;left:16px}.social-links a{width:38px;height:38px;font-size:1rem}.legal-links{gap:8px;top:18px;right:16px}.legal-links a{min-width:0;padding:9px 10px;font-size:.84rem}.hero-stage{min-height:calc(100svh - var(--piano-height));padding:68px 16px 16px}.hero-title{font-size:clamp(2.35rem,11vw,3.25rem);line-height:.92}.brand-mark{width:clamp(138px,36vw,168px);height:clamp(138px,36vw,168px);margin-bottom:12px}.intro{max-width:320px;margin-top:14px;font-size:.96rem;line-height:1.42}.notation-icons{gap:12px;margin-top:14px;font-size:1.35rem}.notation-icons svg:nth-child(2){font-size:1.72rem}.play-ribbon{grid-template-columns:1fr;gap:10px;width:min(100%,360px);margin-top:12px}.mode-tabs{gap:6px}.mode-tabs button,.pulse-button{min-height:38px;font-size:.78rem}.ribbon-summary{display:none}.practice-readout{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.practice-readout div,.pulse-button{padding:8px 6px}.practice-readout span{font-size:.62rem}.practice-readout strong{font-size:1rem}.melody-staff{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:42px}.playground-section{width:min(100% - 32px,1100px);padding-top:42px;padding-bottom:calc(var(--piano-height) + 84px + env(safe-area-inset-bottom))}.content-band{padding:22px 0}.highlight-grid{grid-template-columns:1fr}.sound-garden{grid-template-columns:1fr;gap:18px;padding:24px 0}.sound-garden-grid{grid-template-columns:1fr}.sound-tile{min-height:156px;padding:16px}.learning-paths>div{grid-template-columns:1fr}.benefit-panel{grid-template-columns:1fr;gap:16px}.benefit-panel ul{grid-template-columns:1fr}.highlight-card{padding:16px}.store-links{flex-direction:row;gap:8px;bottom:126px;left:auto;right:16px}.store-links a{min-width:0;padding:10px 11px}.store-links span{display:none}.store-links svg{font-size:1.8rem}.piano-wrap{z-index:2147483647;height:var(--piano-height);transform:translate(0,0)}.white-keys{height:calc(100% - 14px)}.black-keys{height:49.92px;bottom:52px}.black-key{left:calc((100% / 12 * var(--key-position)) - (100% / 12 * .29));width:4.83333%}.white-key small{opacity:.42;font-size:.38rem;top:8px}.legal-hero{padding:30px 18px 14px}.legal-notice,.legal-document,.legal-footer{width:min(100% - 32px,940px)}.legal-document{gap:24px;padding-top:28px}}@media (width<=760px) and (height<=690px){.hero-stage{padding-top:58px}.social-links,.legal-links{top:12px}.brand-mark{width:128px;height:128px}.intro{max-width:300px;margin-top:10px}.notation-icons{display:none}.play-ribbon{margin-top:10px}.melody-staff{display:none}}@media (prefers-reduced-motion:reduce){.floating-notes span,.cursor-notes span,.social-link svg,.store-links a,.store-links svg,.store-link:before{animation:none}.coming-soon-page:before{display:none}.parallax-depth span,.sound-garden:before{transform:none}.social-links a,.legal-links a,.store-links a,.mode-tabs button,.pulse-button,.highlight-card,.path-card,.benefit-panel li,.faq-section details,.black-key,.white-key,.white-key:after,.white-key span{transition:none}}