:root{color-scheme:light dark;--page:#FAF8F4;--surface:#EFECE5;--text:#242B34;--muted:#646A72;--line:#DAD7D0;--blue:#4B8CDB;--link:#2866B3;--white:#fff}
@media(prefers-color-scheme:dark){:root{--page:#191B1E;--surface:#292C31;--text:#F4F2EE;--muted:#BBBDBF;--line:#44494F;--blue:#83B2EC;--link:#9BC4F6;--white:#191B1E}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55}a{color:var(--link);text-underline-offset:.18em}a:hover{text-decoration-thickness:2px}a:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}img{max-width:100%;height:auto}.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--text);color:var(--page);padding:.65rem 1rem;z-index:9}.skip-link:focus{top:1rem}.site-header{border-bottom:1px solid var(--line);background:var(--page)}.header-inner,.footer-inner{max-width:1160px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:32px}.header-inner{min-height:84px}.brand{display:inline-flex;gap:12px;align-items:center;color:var(--text);font-size:1.18rem;font-weight:760;letter-spacing:-.035em;text-decoration:none;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:var(--blue);color:#fff;font-size:1.45rem;line-height:1}.site-header nav{display:flex;flex-wrap:wrap;gap:7px 28px}.site-header nav a{color:var(--muted);text-decoration:none;font-size:.93rem;font-weight:650;white-space:nowrap}.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--link)}main{min-height:65vh}.hero,.discovery,.home-topics,.index-shell,.article-shell,.simple-page{max-width:1160px;margin:auto;padding-left:28px;padding-right:28px}.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);align-items:center;gap:clamp(32px,6vw,92px);padding-top:clamp(68px,8vw,130px);padding-bottom:clamp(76px,9vw,144px)}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:var(--link);font-size:.76rem;font-weight:800;margin:0 0 18px}.hero h1{font-size:clamp(3rem,5.7vw,5.5rem);line-height:1.04;letter-spacing:-.06em;max-width:11ch;margin:0 0 27px}.lead{font-size:clamp(1.12rem,1.55vw,1.3rem);line-height:1.65;color:var(--muted);max-width:48ch;margin:0}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;border-radius:12px;padding:14px 21px;font-weight:720;text-decoration:none;min-height:51px}.button.primary{background:var(--link);color:#fff}.button.secondary{border:1px solid var(--line);color:var(--text);background:var(--surface)}.button:hover{transform:translateY(-1px)}.hero-preview{padding:24px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 25px 65px rgba(17,31,47,.1);max-width:500px}.preview-top{display:flex;align-items:center;gap:15px;margin-bottom:22px}.preview-top img{width:62px;height:62px;border-radius:15px}.preview-top strong,.preview-top span{display:block}.preview-top strong{font-size:1.06rem;line-height:1.25}.preview-top span{color:var(--muted);font-size:.88rem;margin-top:4px}.preview-image{display:block;width:100%;border-radius:14px;background:#fff}.hero-preview p{font-size:.88rem;color:var(--muted);margin:19px 3px 1px}.discovery{padding-bottom:85px}.section-heading{margin-bottom:30px}.section-heading h2{font-size:clamp(2rem,3.7vw,3.25rem);line-height:1.12;letter-spacing:-.05em;margin:0 0 12px}.section-heading>p:last-child{color:var(--muted);font-size:1.08rem;margin:0}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.feature-card{display:block;border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:30px;color:var(--text);text-decoration:none;transition:transform .15s ease,border-color .15s ease}.feature-card:hover{transform:translateY(-3px);border-color:var(--blue)}.feature-icon{display:grid;place-items:center;width:53px;height:53px;border-radius:14px;background:var(--page);color:var(--link);font-size:1.9rem;margin-bottom:26px}.feature-card h3{font-size:1.5rem;letter-spacing:-.035em;margin:0 0 9px}.feature-card p{max-width:36ch;color:var(--muted);margin:0 0 28px}.feature-action{font-weight:720;color:var(--link)}.home-topics{padding-bottom:100px}.link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lesson-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 19px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;font-weight:650}.lesson-link:hover{border-color:var(--blue);color:var(--link)}.lesson-link span:last-child{color:var(--link)}.index-shell{padding-top:76px;padding-bottom:100px}.index-shell>h1,.article-content>h1,.simple-page h1{font-size:clamp(2.5rem,5vw,4.3rem);line-height:1.08;letter-spacing:-.055em;margin:0 0 24px}.index-intro{max-width:760px;color:var(--muted);font-size:1.08rem}.index-intro p{margin:0 0 16px}.index-groups{margin-top:60px}.topic-group{margin-top:48px}.topic-group h2{font-size:1.55rem;letter-spacing:-.03em;margin:0 0 16px}.article-shell{padding-top:44px;padding-bottom:100px}.breadcrumb{display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:var(--muted);font-size:.89rem;margin-bottom:40px}.breadcrumb a{text-decoration:none;font-weight:680}.article-content{max-width:760px;font-size:1.04rem;line-height:1.77}.article-content>h1{max-width:17ch;margin-bottom:32px}.article-content p{margin:0 0 1.35em}.article-content h2,.article-content h3,.article-content h4{line-height:1.25;letter-spacing:-.025em;margin:1.85em 0 .75em}.article-content h2{font-size:1.7rem}.article-content h3{font-size:1.35rem}.article-content h4{font-size:1.06rem}.article-content ul,.article-content ol{padding-left:1.5em;margin:0 0 1.5em}.article-content li{padding-left:.2em;margin:.25em 0}.article-content strong{font-weight:750}.article-content .image-reference{text-align:center}.lesson-diagram{display:block;margin:1.6em auto;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px;width:min(100%,calc(var(--diagram-width) + 34px))}.lesson-diagram img{display:block;width:100%;max-width:var(--diagram-width);height:auto;margin:auto}.article-content img:not(.lesson-diagram img){max-width:100%;height:auto}.article-content .musicopoulos-app-icon{float:left;margin:0 22px 15px 0}.article-content .available-on-the-app-store-icon{float:right;margin:0 0 15px 22px}.article-content .musicopoulos-app-icon img{max-width:150px;border-radius:20px}.article-content::after{content:"";display:block;clear:both}.lesson-trail{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;border-top:1px solid var(--line);margin-top:58px;padding-top:24px;font-size:.94rem;font-weight:720}.lesson-trail a{text-decoration:none}.simple-page{padding-top:80px;padding-bottom:100px;max-width:800px}.site-footer{border-top:1px solid var(--line);padding:42px 0 55px}.footer-inner{align-items:start}.footer-brand{color:var(--text);font-weight:760;text-decoration:none}.footer-inner p{color:var(--muted);font-size:.88rem;max-width:31ch;margin:.6em 0 0}.site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 22px;max-width:550px}.site-footer nav a{color:var(--muted);font-size:.86rem;text-decoration:none}.site-footer nav a:hover{color:var(--link)}
@media(max-width:760px){.header-inner{align-items:flex-start;flex-direction:column;gap:15px;padding-top:18px;padding-bottom:17px}.site-header nav{gap:6px 17px}.site-header nav a{font-size:.86rem}.hero{grid-template-columns:1fr;padding-top:63px;padding-bottom:76px}.hero h1{max-width:13ch}.hero-preview{width:100%;max-width:520px}.feature-grid,.link-grid{grid-template-columns:1fr}.discovery{padding-bottom:70px}.home-topics{padding-bottom:80px}.index-shell{padding-top:54px}.article-shell{padding-top:30px}.breadcrumb{margin-bottom:28px}.footer-inner{flex-direction:column}.site-footer nav{justify-content:flex-start}.article-content .musicopoulos-app-icon,.article-content .available-on-the-app-store-icon{float:none;display:inline-block;vertical-align:middle;margin:0 15px 18px 0}}
@media(max-width:420px){.header-inner,.footer-inner,.hero,.discovery,.home-topics,.index-shell,.article-shell,.simple-page{padding-left:20px;padding-right:20px}.hero{gap:42px}.hero h1{font-size:clamp(2.75rem,12vw,3.5rem)}.hero-preview{padding:17px;border-radius:20px}.feature-card{padding:23px}.actions{display:grid}.button{width:100%}.lesson-diagram{padding:10px;border-radius:10px}}
@media(prefers-color-scheme:dark){.button.primary{color:#191B1E}}
.apps-shell{max-width:1160px;margin:auto;padding:76px 28px 110px}.apps-shell>h1{font-size:clamp(2.5rem,5vw,4.3rem);line-height:1.08;letter-spacing:-.055em;margin:0 0 16px}.apps-intro{font-size:1.12rem;color:var(--muted);margin:0 0 46px}.app-list{display:grid;gap:24px}.app-card{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:clamp(22px,3vw,38px)}.app-card-heading{display:flex;align-items:center;gap:20px;margin-bottom:22px}.app-card-heading img{width:88px;height:88px;border-radius:19px;flex:none}.app-card h2{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.035em;margin:0 0 7px}.app-card h2 a{color:var(--text);text-decoration:none}.app-card h2 a:hover{color:var(--link)}.app-detail-link,.app-store-link{font-weight:720;text-decoration:none}.app-card-copy{max-width:760px}.app-card-copy p{margin:0 0 1em}.app-banner{display:block;width:auto;max-width:100%;height:auto;margin:22px 0;border-radius:12px}.app-store-link{display:inline-block;margin-top:2px}@media(max-width:420px){.apps-shell{padding:54px 20px 80px}.app-card-heading{align-items:flex-start;gap:14px}.app-card-heading img{width:64px;height:64px;border-radius:15px}}
.index-lead{font-size:1.12rem;color:var(--muted);margin:0;max-width:54ch}.index-groups{margin-top:34px}.topic-group:first-child{margin-top:0}.index-intro{margin-top:72px;border-top:1px solid var(--line);padding-top:34px}.index-intro h2{font-size:1.45rem;color:var(--text);letter-spacing:-.025em;margin:0 0 18px}
.breadcrumb{max-width:760px;margin-left:auto;margin-right:auto}.breadcrumb+.article-content{margin-left:auto;margin-right:auto}
.music-accidental{position:relative;top:.1em;font-size:1.22em;line-height:0}