: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{--ink:#161922;--muted:#61687a;--paper:#fffdf8;--gold:#d9a441;--rose:#ef6f7b;--teal:#1ca7a8;--blue:#3454d1;min-height:100svh;color:var(--ink);isolation:isolate;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:hidden}.staff-lines{transform-origin:50%;z-index:-1;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:fixed;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-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}.hero-stage{z-index:2;text-align:center;align-content:center;justify-items:center;min-height:calc(100svh - 230px);padding:64px 24px 238px;display:grid;position:relative}.brand-mark{width:82px;height:82px;color:var(--teal);background:#ffffffad;border:2px solid #1619221a;border-radius:50%;place-items:center;margin-bottom:18px;font-size:2.7rem;display:grid;box-shadow:0 22px 50px #1ca7a829}.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-stage h1{letter-spacing:0;max-width:860px;margin:0;font-size:clamp(3.2rem,8vw,7.7rem);line-height:.88}.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)}.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}.store-links{z-index:6;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:174px;left:26px}.store-links a{border-radius:8px;align-items:center;gap:10px;min-width:172px;padding:10px 14px;display:flex}.store-links svg{flex:none;font-size:1.85rem}.store-links span{color:var(--ink);text-align:left;font-size:1.02rem;font-weight:800;line-height:1.05;display:grid}.store-links small{color:var(--muted);text-transform:uppercase;font-size:.63rem;font-weight:700}.piano-wrap{z-index:4;background:linear-gradient(#272d39 0%,#11141b 32%,#050607 100%);height:clamp(136px,22svh,210px);position:absolute;bottom:0;left:0;right:0;box-shadow:0 -24px 70px #1b1f2b42}.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{transform-origin:top;will-change:transform;background:linear-gradient(#ffffffeb,#fff0 38%),linear-gradient(#fffdf9 0%,#f8efe0 100%);border-right:1px solid #11141b3d;justify-content:center;align-items:flex-end;min-width: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: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{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;transform:translateY(0)}.white-key.is-pressed span{opacity:.86;transform:translateY(-2px)scale(.94)}.black-keys{z-index:2;pointer-events:none;height:calc(clamp(136px,22svh,210px)/1.81818 - 9.9px);position:absolute;bottom:calc(clamp(136px,22svh,210px)/2.32558 - 7.74px);left:0;right:0}.black-key{top:0;left:calc((100% / 12 * var(--key-position)) - (100% / 12 * .28));background:linear-gradient(#252936 0%,#090a0f 78%,#000 100%);border-radius:0 0 5px 5px;width:4.66667%;height:100%;position:absolute;box-shadow:0 12px 16px #0000004d}@keyframes float-note{0%,to{transform:translate(0,0)rotate(-8deg)}50%{transform:translate(12px,-22px)rotate(10deg)}}@media (width<=760px){.social-links{gap:8px;top:18px;left:16px}.social-links a{width:38px;height:38px;font-size:1rem}.hero-stage{min-height:calc(100svh - 172px);padding:80px 18px 184px}.brand-mark{width:66px;height:66px;font-size:2.2rem}.intro{max-width:320px}.store-links{flex-direction:row;gap:8px;bottom:126px;left:auto;right:16px}.store-links a{min-width:0;padding:9px 10px}.store-links span{display:none}.store-links svg{font-size:1.6rem}.piano-wrap{height:118px}.white-keys{height:calc(100% - 14px)}.black-keys{height:57.2px;bottom:44.72px}}@media (prefers-reduced-motion:reduce){.floating-notes span{animation:none}.social-links a,.store-links a,.white-key,.white-key:after,.white-key span{transition:none}}
