:root{color-scheme:light;--ink:#1d1d1f;--muted:#6e6e73;--paper:#f5f5f7;--accent:#bd1765;--link:#0066cc;--line:#d2d2d7}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;color:var(--ink);background:#fff;font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:5px}
img,svg{max-width:100%;vertical-align:middle}button:disabled{cursor:default}
h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.06;letter-spacing:-.045em}
h1{font-size:clamp(54px,6.7vw,88px);font-weight:700}h2{font-size:clamp(38px,4.8vw,64px);font-weight:650}h3{font-size:28px;font-weight:650}
section{scroll-margin-top:20px}.wrap{width:min(1080px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;top:-100px;left:20px;padding:12px 20px;background:#fff;z-index:100}.skip:focus{top:8px}
.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid #00000012;background:#ffffffeb;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav-inner,.nav>.glass{width:min(1080px,calc(100% - 64px));margin:auto;display:flex;align-items:center;justify-content:space-between;min-height:65px;gap:24px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:22px;font-weight:650;letter-spacing:-.6px}.brand:hover{text-decoration:none}.brand img{width:30px;height:30px;border-radius:7px}
nav{display:flex;align-items:center;gap:28px}nav a{color:var(--ink);font-size:12px}nav .nav-download{background:var(--ink);color:#fff;border-radius:20px;padding:6px 15px}
.availability{background:var(--paper);text-align:center;padding:12px 24px;font-size:12px;color:#515154}.availability span{margin-inline:7px;color:#aaa}
.hero{padding-top:66px;text-align:center;overflow:hidden}.product-name{display:flex;align-items:center;justify-content:center;gap:9px;font-size:20px;font-weight:600;margin-bottom:24px}.product-name img{width:40px;height:40px;border-radius:10px}
.hero h1 span{color:var(--accent)}.hero .lead{max-width:630px;margin:24px auto 25px;font-size:21px;line-height:1.45;letter-spacing:-.4px;color:#515154}
.btns{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 23px;border-radius:30px;background:var(--ink);color:#fff;font-size:16px;border:1px solid transparent}.btn:hover{background:#333336;text-decoration:none}.btn.primary{background:var(--accent)}.btn.primary:hover{background:#a81258}
.text-link{font-size:17px}.text-link span{margin-left:5px}.hero-note{font-size:12px;color:var(--muted);margin-top:17px}
.device-stage{width:min(1060px,calc(100% - 64px));margin:48px auto 0;padding-bottom:15px}.device-frame{padding:9px;border-radius:22px 22px 6px 6px;background:#232326;border:1px solid #5c5c61;box-shadow:0 20px 55px #0000001c;position:relative}
.device-base{height:17px;margin:0 -35px;border-radius:1px 1px 55% 55% / 1px 1px 15px 15px;background:linear-gradient(#d6d6da,#a4a4aa 60%,#d6d6da);box-shadow:0 15px 23px -15px #0007;position:relative}.device-base::before{content:"";position:absolute;width:16%;height:6px;left:42%;top:0;border-radius:0 0 8px 8px;background:#a1a1a7}
.practice-preview{background:#fcfbf8;color:#343434;border-radius:13px 13px 2px 2px;overflow:hidden}.preview-toolbar{min-height:48px;display:flex;align-items:center;padding:0 18px;gap:16px;background:#eeede9;border-bottom:1px solid #0000000a;font-size:12px}
.window-dots{display:flex;gap:6px}.window-dots i{width:9px;height:9px;background:#ff6057;border-radius:50%}.window-dots i:nth-child(2){background:#febc2e}.window-dots i:nth-child(3){background:#28c840}
.preview-title{font-weight:600;flex:1;text-align:left}.preview-connected{display:flex;gap:6px;align-items:center;color:#366645;font-size:10px}.preview-connected::before{content:"";width:5px;height:5px;border-radius:50%;background:#49885a}
.score-art{display:block;width:100%;height:auto}.score-art .staff{fill:none;stroke:#b5b3ac;stroke-width:1}.score-art .note{fill:#326dc0;stroke:#326dc0;stroke-width:2}.score-art .bass{fill:#458a68;stroke:#458a68}.score-art .clef{fill:#444;font-family:"Apple Symbols","Times New Roman",serif}.score-art .playhead{stroke:var(--accent);stroke-width:2}
.blocks-art{display:block;width:100%;height:125px;background:linear-gradient(#f1f0eb,#fcfbf8);border-top:1px solid #00000008}.keyboard-art{height:86px;width:100%;display:block;border-top:2px solid #a1a1a1}
.preview-transport{display:flex;justify-content:center;align-items:center;gap:23px;padding:10px;background:#f6f5f0;font-size:10px}.transport-play{font-size:13px}.transport-track{width:35%;height:3px;background:#d9d8d4;border-radius:3px}.transport-track i{display:block;height:100%;width:27%;background:var(--accent)}.preview-caption{margin:16px 0 0;font-size:11px;color:var(--muted)}
.section{padding:112px 0}.eyebrow{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--muted);margin-bottom:16px}.section-intro{margin-top:24px;color:var(--muted);font-size:21px;line-height:1.45;letter-spacing:-.4px;max-width:640px}.center{text-align:center}.center .section-intro{margin-inline:auto}
.modes-section{background:var(--paper);margin-top:62px}.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}.mode-option{border:0;padding:30px;border-radius:22px;background:#fff;color:var(--ink);text-align:left;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s}.mode-option:hover{box-shadow:inset 0 0 0 2px #d2d2d7}.mode-option[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.mode-symbol{display:block;height:50px;color:var(--accent);font:36px/1 "Apple Symbols",sans-serif;margin-bottom:15px}.mode-option strong{font-size:24px;letter-spacing:-.6px;display:block}.mode-option .mode-copy{display:block;font-size:15px;color:var(--muted);line-height:1.5;margin-top:9px}.mode-option .mode-action{display:none;color:var(--accent);font-size:12px;margin-top:14px}.js .mode-option .mode-action{display:block}.mode-option[aria-pressed="true"] .mode-action::after{content:" ✓"}.mode-description{min-height:50px;margin:24px auto 0;font-size:14px;color:var(--muted);max-width:600px;text-align:center}
.follow-layout{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.follow-copy h2{font-size:clamp(38px,4.5vw,60px)}.follow-copy p:not(.eyebrow){margin-top:24px;color:var(--muted);font-size:19px}.follow-demo{padding:42px 28px 30px;background:var(--paper);border-radius:28px;text-align:center}
.follow-track{display:flex;justify-content:center;gap:15px;margin:25px 0 36px}.follow-track span{width:42px;height:56px;display:grid;place-items:center;border-radius:10px;color:#707075;border:1px solid #d9d9df;font-size:19px;background:#fff}.follow-track span.is-current{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px #bd176514}.follow-track span.is-done{color:#427453;background:#e4eee7;border-color:#d4e4d8}.follow-status{min-height:30px;font-size:16px;font-weight:600;color:var(--accent)}
.follow-key{width:100%;min-height:98px;border-radius:8px 8px 14px 14px;border:1px solid #d2d2d7;border-bottom:6px solid #d9d9df;background:#fff;font-weight:600;color:var(--ink);box-shadow:0 4px 8px #00000006}.follow-key:hover{background:#fdf7fa}.follow-key:active{transform:translateY(3px);border-bottom-width:3px}.follow-key:disabled{color:#356d49;background:#eaf3ed}.demo-note{font-size:11px;color:var(--muted);margin-top:16px}.restart-demo{display:none;margin:15px auto 0;background:none;border:0;color:var(--link);font-size:13px}.restart-demo.is-visible{display:block}.follow-controls{display:none}.js .follow-controls{display:block}.follow-fallback{color:var(--muted);font-size:14px}.js .follow-fallback{display:none}
.features-section{background:var(--paper)}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}.feature{background:#fff;border-radius:24px;padding:42px;min-height:300px;overflow:hidden}.feature p{color:var(--muted);margin-top:17px;font-size:17px;max-width:390px}.feature-visual{height:84px;margin-bottom:35px;display:flex;align-items:center;gap:10px}
.tempo-visual{color:var(--accent);font-size:60px;line-height:1;font-weight:650;letter-spacing:-3px}.tempo-visual span{color:#b4b4bb;font-size:24px;letter-spacing:-1px}.loop-visual{width:100%;max-width:330px;position:relative}.loop-visual::before{content:"";position:absolute;height:3px;top:41px;left:0;right:0;background:#e8e8ed}.loop-range{position:relative;height:44px;width:68%;margin-left:17%;border-inline:3px solid var(--accent);background:#bd176510;display:flex;justify-content:space-between;align-items:center;padding:0 10px;color:var(--accent);font-size:13px;font-weight:600}.file-visual{width:72px;height:84px;border:1.5px solid #d2d2d7;border-radius:12px;display:grid;place-items:center;font-size:17px;font-weight:600;color:var(--accent);box-shadow:5px 5px 0 #f5f5f7}.swatches{gap:12px}.swatches i{display:block;width:42px;height:42px;border:1px solid #00000015;border-radius:50%;background:#faf9f2}.swatches i:nth-child(2){background:#f5e8cc}.swatches i:nth-child(3){background:#e0edf2}.swatches i:nth-child(4){background:#333}.swatches i:nth-child(5){background:#000}
.lessons{display:grid;grid-template-columns:.9fr 1.1fr;gap:85px;align-items:center}.lesson-list{list-style:none;padding:0;margin:0}.lesson-list li{display:flex;align-items:center;gap:18px;padding:24px 0;border-bottom:1px solid #e8e8ed}.lesson-number{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--paper);color:var(--accent);font-size:20px;flex-shrink:0}.lesson-list strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.3px}.lesson-list small{display:block;color:var(--muted);font-size:13px;margin-top:4px}.lesson-tag{margin-left:auto;color:var(--muted);font-size:11px}
.connection-section{background:#1d1d1f;color:#f5f5f7}.connection-section .eyebrow,.connection-section .section-intro{color:#a1a1a6}.connection-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:64px;list-style:none;padding:0}.step-num{display:block;color:#f279ab;font-size:20px;margin-bottom:22px}.connection-steps h3{font-size:24px}.connection-steps p{color:#a1a1a6;margin-top:15px;font-size:16px}.connection-section .connection-footnote{color:#a1a1a6;font-size:12px;margin-top:42px}.connection-section a{color:#86baf0}
.download-section{padding-bottom:100px}.download-section .section-intro{max-width:580px}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;text-align:left}.download-card{border-top:1px solid var(--line);padding-top:30px}.platform-icon{display:block;width:58px;height:58px;margin-bottom:24px;fill:none;stroke:currentColor;stroke-width:1.3}.download-card h3{font-size:28px}.download-card p{color:var(--muted);font-size:14px;margin:14px 0 22px;min-height:64px}.download-card a{font-size:15px}.coming-soon{display:inline-block;color:var(--muted);background:var(--paper);border-radius:30px;padding:8px 15px;font-size:13px}.build-note{margin-top:34px;font-size:12px;color:var(--muted)}
.free-note{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line);padding-top:54px;margin-top:70px;text-align:left}.free-note h3{font-size:29px}.free-note p{color:var(--muted);font-size:15px;margin-top:14px}.faq-section{background:var(--paper)}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px}.faq-layout h2{font-size:42px}
details{border-bottom:1px solid var(--line);padding:23px 0}details:first-child{padding-top:0}summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;position:relative;padding-right:30px}summary::-webkit-details-marker{display:none}summary::after{content:"+";position:absolute;top:-4px;right:0;font-size:26px;font-weight:400;color:var(--muted)}details[open] summary::after{content:"−"}details p,details ol{margin-top:16px;font-size:15px;color:var(--muted)}details ol{padding-left:20px}details li+li{margin-top:8px}
footer{background:var(--paper);color:var(--muted);padding:28px 0;font-size:11px}.footer-inner{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px}.footer-links{display:flex;gap:22px}footer a{color:#515154}.prose{margin:65px 0 90px;max-width:760px}.prose h1{font-size:clamp(36px,5vw,54px);margin-bottom:30px}.prose p,.prose ul{margin-top:20px}.prose li{margin-top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[hidden]{display:none!important}
.about-section{background:var(--paper)}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-layout h2{font-size:clamp(38px,4vw,54px)}
.about-copy{color:var(--muted);font-size:18px;line-height:1.65;padding-top:8px}
.about-copy a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.about-copy a:hover{color:var(--link);text-decoration-color:currentColor}
.about-copy .support-note{font-size:14px;line-height:1.6;margin-top:24px}
.download-card{min-width:0}.download-card .btn{max-width:100%;text-align:center}
.follow-layout>*{min-width:0}.follow-track span{min-width:0}.swatches i{height:auto;aspect-ratio:1;flex:0 1 42px}
@media(min-width:1440px){.device-stage{margin-top:60px}}
@media(max-width:850px){nav{gap:20px}.hide-s{display:none}.hero{padding-top:48px}.hero .lead{font-size:19px}.section{padding:80px 0}.follow-layout,.lessons,.faq-layout{gap:40px}.mode-options{gap:14px}.mode-option{padding:24px}.mode-option strong{font-size:21px}.feature{padding:32px}.free-note{gap:40px}.preview-toolbar{min-height:38px}.blocks-art{height:100px}.keyboard-art{height:70px}}
@media(max-width:600px){.wrap,.nav-inner,.nav>.glass{width:calc(100% - 40px)}.nav-inner,.nav>.glass{min-height:59px;gap:15px}.brand{font-size:20px}nav{gap:16px}nav .nav-download{font-size:11px;padding-inline:13px}.availability{font-size:11px}.availability span{margin-inline:4px}.hero{padding-top:40px}.product-name{font-size:17px;margin-bottom:24px}.product-name img{width:32px;height:32px}h1{font-size:clamp(44px,11.6vw,64px)}.hero .lead{font-size:17px;max-width:380px;margin-top:24px}.hero-note{font-size:11px}.btns{gap:20px}.btn{font-size:14px;padding:10px 19px}.text-link{font-size:15px}.device-stage{width:calc(100% - 48px);margin-top:38px}.device-frame{padding:5px;border-radius:12px 12px 3px 3px}.device-base{height:10px;margin-inline:-14px}.device-base::before{height:3px}.practice-preview{border-radius:7px 7px 0 0}.preview-toolbar{min-height:27px;gap:8px;padding-inline:10px}.window-dots{gap:3px}.window-dots i{width:5px;height:5px}.preview-title{font-size:7px}.preview-connected{font-size:6px;gap:3px}.preview-connected::before{width:3px;height:3px}.blocks-art{height:65px}.keyboard-art{height:42px}.preview-transport{font-size:7px;padding:5px;gap:12px}.transport-play{font-size:9px}.preview-caption{font-size:10px}.section{padding:66px 0}.eyebrow{font-size:15px;margin-bottom:14px}h2,.follow-copy h2,.faq-layout h2{font-size:38px}.section-intro,.follow-copy p:not(.eyebrow){font-size:18px}.modes-section{margin-top:38px}.mode-options{grid-template-columns:1fr;margin-top:32px}.mode-option{padding:24px;display:grid;grid-template-columns:40px 1fr;column-gap:16px}.mode-symbol{grid-row:1 / 4;margin:2px 0 0;height:auto;font-size:30px}.mode-option strong{font-size:22px}.mode-option .mode-copy{font-size:14px}.mode-option .mode-action{margin-top:10px}.follow-layout,.lessons,.faq-layout,.free-note{grid-template-columns:1fr;gap:35px}.follow-demo{padding:28px 24px}.feature-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}.feature{padding:32px;min-height:280px}.feature h3{font-size:27px}.feature p{font-size:16px}.feature-visual{margin-bottom:25px;height:65px}.connection-steps{grid-template-columns:1fr;gap:32px;margin-top:42px}.step-num{margin-bottom:12px}.connection-steps p{margin-top:12px}.download-grid{grid-template-columns:1fr;gap:32px;margin-top:35px}.download-card{display:grid;grid-template-columns:48px 1fr;column-gap:20px}.platform-icon{grid-row:1 / 4;width:44px;height:44px}.download-card p{min-height:0;margin:10px 0 15px}.download-card .coming-soon,.download-card a{justify-self:start}.free-note{margin-top:48px;padding-top:36px}.free-note h3{font-size:27px}.faq-layout{gap:35px}.footer-inner{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){.nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(max-width:850px){.about-layout{gap:40px}}
@media(max-width:600px){.about-layout{grid-template-columns:1fr;gap:26px}.about-copy{font-size:17px;padding-top:0}.download-card .btn{font-size:13px;padding-inline:14px}.footer-links{flex-wrap:wrap;row-gap:12px}}
.prose h1{overflow-wrap:anywhere}
nav .nav-download{white-space:nowrap;flex-shrink:0}
.footer-languages{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 18px;margin-top:12px}
.footer-languages a{display:inline-flex;align-items:center;min-height:32px;padding:2px 0;color:#515154;font-size:12px;line-height:1.4}
.footer-languages a[aria-current=page]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.footer-languages{justify-content:flex-start;gap:4px 16px}}