.widget-animated-size{min-width:0}.widget-stable-slot{display:grid;min-width:0}span.widget-stable-slot{display:inline-grid;vertical-align:bottom}.widget-stable-slot>.widget-stable-variant{grid-area:1 / 1;min-width:0;align-self:start}.widget-stable-slot>.widget-stable-reserve{visibility:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}.widget-size-content{display:flow-root}.widget-layout-motion{position:relative;isolation:isolate}.widget-animated-size[data-resizing=true]{overflow:clip;overflow-clip-margin:6px}.interest-dialog{width:min(480px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);min-height:0;margin:auto;padding:0;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-family:var(--font-display);animation:interest-enter .2s ease-out}.interest-dialog::backdrop{background:#181a1f7a;animation:interest-fade .2s ease-out}.interest-dialog.is-closing{animation:interest-leave .18s ease-in forwards}.interest-dialog.is-closing::backdrop{animation:interest-fade .18s ease-in reverse forwards}.interest-panel{padding:42px 36px 32px;position:relative}.interest-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}.interest-close:hover{background:var(--line);color:var(--ink)}.interest-content{animation:interest-fade .2s ease-out}.interest-kicker{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--muted);font-size:12px;font-weight:500}.interest-heart{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:50%;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--paper))}.is-letter .interest-kicker{margin-bottom:12px}.interest-dialog h2{margin:0;padding:0;font-size:clamp(27px,5vw,32px);font-weight:650;letter-spacing:-.04em;line-height:1.15}.interest-dialog h2:focus{outline:none}.interest-intro,.interest-letter{color:var(--muted);font-size:14px;line-height:1.7}.interest-intro{margin:16px 0 24px}.interest-letter{margin:20px 0 26px}.interest-letter p{margin:0 0 14px}.interest-letter p:last-child{margin-bottom:0}.interest-letter .interest-letter-lead{color:var(--ink-soft);font-size:15px}.interest-letter .interest-letter-contact{padding-top:16px;margin-top:20px;border-top:1px solid var(--line)}.interest-letter .interest-signoff{color:var(--ink-soft);font-size:13px}.interest-dialog a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.interest-form{display:grid;gap:10px}.interest-form label{font-size:13px;font-weight:500}.interest-form input{min-width:0;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:5px;color:var(--ink);background:var(--surface);font:inherit;font-size:16px;transition:border-color .15s,background .15s}.interest-form input::placeholder{color:var(--muted-soft)}.interest-form input:focus{outline:2px solid var(--brand);outline-offset:2px}.interest-submit{width:100%;margin-top:4px;transition:background .15s,opacity .15s}.interest-submit[aria-disabled=true]{opacity:.65;cursor:progress}.interest-note{margin:2px 0 0;color:var(--muted);font-size:11px;line-height:1.6;text-align:center}.interest-error{margin:4px 0 0;color:var(--accent);font-size:13px;line-height:1.6;animation:interest-fade .18s ease-out}.interest-dialog :is(button,a):focus-visible{outline:2px solid var(--brand);outline-offset:3px}@keyframes interest-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes interest-leave{to{opacity:0;transform:translateY(5px)}}@keyframes interest-fade{0%{opacity:0}to{opacity:1}}@media(max-width:520px){.interest-panel{padding:42px 24px 26px}}@media(prefers-reduced-motion:reduce){.interest-dialog,.interest-dialog::backdrop,.interest-content,.interest-error{animation:none!important}.interest-dialog :is(button,input){transition:none}}.app-header .language-switcher{position:relative;flex-shrink:0}.app-header .language-switcher-trigger{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);box-shadow:none;font:500 12px/1 var(--font-body);cursor:pointer;transition:background-color .16s ease,border-color .16s ease}.app-header .language-switcher-trigger:is(:hover,[aria-expanded=true]){border-color:var(--line-strong);background:var(--surface-soft)}.app-header .language-switcher .language-switcher-trigger:focus-visible{outline:2px solid var(--brand);outline-offset:3px}.language-flag{display:block;flex:0 0 22px;width:22px;height:15px;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px #181a1f17}.language-chevron{color:var(--muted);transition:transform .16s ease}[aria-expanded=true]>.language-chevron{transform:rotate(180deg)}.language-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:1;width:192px;max-width:calc(100vw - 32px);padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 8px 24px #181a1f17;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px) scale(.98);transform-origin:top right;transition:opacity .14s ease,transform .16s cubic-bezier(.22,1,.36,1),visibility 0s linear .16s}.language-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}.app-header .language-option{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:10px;border:0;border-radius:5px;background:transparent;color:var(--ink);text-align:left;font:500 14px/1.4 var(--font-body);box-shadow:none;cursor:pointer;transition:background-color .14s ease}.app-header .language-option[aria-checked=true]{background:var(--surface-soft)}.app-header .language-option:hover{background:var(--surface-inset)}.app-header .language-switcher .language-option:focus-visible{background:var(--brand-tint);outline:2px solid var(--brand);outline-offset:-2px}.language-check{margin-left:auto;color:var(--brand);visibility:hidden}[aria-checked=true]>.language-check{visibility:visible}@media(max-width:520px){.app-header .header-cta,.app-header .header-login{display:none}.app-header .header-actions{gap:0}}@media(prefers-reduced-motion:reduce){.language-menu,.language-chevron,.app-header .language-switcher-trigger,.app-header .language-option{transition:none}.language-menu{transform:none}}.seo-page,.seo-footer{width:min(1184px,calc(100% - 56px));margin:0 auto}.seo-page{max-width:850px;padding-top:116px;padding-bottom:40px}.seo-page :is(h1,h2,h3),.seo-footer :is(h2,h3){color:var(--ink);font-weight:650}.seo-page a,.seo-footer a{transition:color .18s ease,border-color .18s ease,background-color .18s ease}.seo-breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px;margin-bottom:48px}.seo-breadcrumbs a:hover{color:var(--brand)}.seo-breadcrumbs [aria-current]{overflow-wrap:anywhere}.seo-intro{max-width:850px;margin-bottom:48px}.seo-kicker{margin:0 0 18px;color:var(--muted);font-size:12px;letter-spacing:.03em}.seo-intro h1{font-size:clamp(34px,4.3vw,60px);line-height:1.12;letter-spacing:-.045em;margin:0 0 26px}.seo-deck{max-width:730px;font-size:17px;line-height:1.8;color:var(--muted);margin:0 0 16px}.seo-reading-layout{max-width:740px;border-top:1px solid var(--line);padding-top:40px}.seo-body{min-width:0;font-size:16px;line-height:1.85;color:var(--ink-soft)}.seo-body>section{margin:0 0 48px;scroll-margin-top:112px}.seo-body h2{font-size:26px;line-height:1.3;letter-spacing:-.025em;margin:0 0 20px}.seo-body p{margin:0 0 20px}.seo-body :is(ul,ol){padding-left:24px;margin:20px 0}.seo-body li{padding-left:4px;margin-bottom:12px}.seo-body a{color:var(--brand);text-decoration:underline;text-underline-offset:4px}.seo-table-scroll{overflow-x:auto;max-width:100%;margin:26px 0;border:1px solid var(--line);border-radius:var(--radius-sm)}.seo-table-scroll table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.65}.seo-table-scroll :is(th,td){padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);min-width:115px;vertical-align:top}.seo-table-scroll th{color:var(--ink);font-weight:600}.seo-table-scroll thead{background:var(--surface-soft)}.seo-table-scroll tbody tr:last-child :is(th,td){border-bottom:0}.seo-related{margin:20px 0 64px}.seo-related>h2{font-size:28px;letter-spacing:-.03em;margin:0 0 26px}.seo-link-list{border-top:1px solid var(--line)}.seo-link-list>a{display:flex;justify-content:space-between;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}.seo-link-list h3{font-size:20px;line-height:1.4;margin:0 0 8px;letter-spacing:-.02em}.seo-link-list p{max-width:790px;color:var(--muted);font-size:14px;line-height:1.7;margin:0}.seo-link-list svg{flex-shrink:0}.seo-link-list>a:hover :is(h3,svg){color:var(--brand)}.seo-next-step{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:40px 0;border-top:1px solid var(--line)}.seo-next-step h2{font-size:32px;letter-spacing:-.035em;line-height:1.2;margin:0 0 20px}.seo-next-step p:not(.seo-kicker){max-width:530px;font-size:14px;line-height:1.75;color:var(--muted);margin:0}.seo-next-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.seo-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:28px 0;border-top:1px solid var(--line)}.seo-footer a{font-size:12px;color:var(--muted)}.seo-footer a:hover{color:var(--brand)}.seo-footer nav{display:flex;gap:24px}.seo-languages{display:flex;gap:20px}.seo-languages a[aria-current]{color:var(--ink)}@media(max-width:900px){.seo-footer{gap:32px}.seo-next-step{grid-template-columns:1fr;gap:24px}}@media(max-width:640px){.seo-page,.seo-footer{width:calc(100% - 36px)}.seo-page{max-width:850px;padding-top:96px}.seo-breadcrumbs{margin-bottom:32px;font-size:11px}.seo-intro{margin-bottom:32px}.seo-intro h1{font-size:36px}.seo-deck{font-size:15px;line-height:1.8}.seo-reading-layout{padding-top:28px}.seo-body{font-size:15px}.seo-body h2{font-size:24px}.seo-link-list h3{font-size:18px}.seo-link-list p{font-size:13px}.seo-footer{gap:24px;padding:24px 0}}@media(prefers-reduced-motion:reduce){.seo-page a,.seo-footer a{transition:none}}.rhythm-viewport-pulse{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none;contain:strict}.rhythm-viewport-pulse-presence{position:absolute;inset:0;opacity:0;transform:scale(1.14);transform-origin:center;transition:transform .52s cubic-bezier(.22,.68,.15,1),opacity .42s ease;will-change:transform,opacity}.rhythm-viewport-pulse[data-visible=true] .rhythm-viewport-pulse-presence{opacity:1;transform:scale(1)}.rhythm-viewport-pulse-aperture{--rhythm-frame-radius: clamp(100px, 14vw, 220px);position:absolute;inset:clamp(22px,2.7vw,42px);border-radius:var(--rhythm-frame-radius);box-shadow:0 0 0 calc(var(--rhythm-frame-radius) + 160px) #050605,inset 0 0 70px 20px #050605d1,inset 0 0 220px 48px #050605f0;filter:blur(20px);transform-origin:center;will-change:transform}@media(max-width:600px){.rhythm-viewport-pulse-aperture{--rhythm-frame-radius: 80px;inset:13px;box-shadow:0 0 0 calc(var(--rhythm-frame-radius) + 80px) #050605,inset 0 0 36px 7px #050605c7,inset 0 0 110px 18px #050605e0;filter:blur(10px)}}@media(prefers-reduced-motion:reduce){.rhythm-viewport-pulse-presence,.rhythm-viewport-pulse-aperture{transform:none!important;transition:none}}.widget-celebration{position:fixed;inset:0;z-index:1000;overflow:hidden;overflow:clip;pointer-events:none;contain:strict}.widget-celebration-burst{--celebration-spread-unit: clamp(.55px, .145vw, 1px);--celebration-height-unit: clamp(.75px, .145vw, 1px);position:absolute;width:0;height:0}.widget-celebration-particle{position:absolute;top:0;left:0;width:0;height:0;opacity:0;animation:widget-celebration-spread var(--celebration-duration) var(--celebration-delay) cubic-bezier(.12,.58,.35,1) both,widget-celebration-fade var(--celebration-duration) var(--celebration-delay) linear both}.widget-celebration-piece{position:absolute;top:calc(var(--celebration-height) * -.5);left:calc(var(--celebration-width) * -.5);width:var(--celebration-width);height:var(--celebration-height);animation:widget-celebration-fall var(--celebration-duration) var(--celebration-delay) both}.widget-celebration-piece:after{content:"";display:block;width:100%;height:100%;border-radius:2px;background:var(--celebration-color);animation:widget-celebration-tumble var(--celebration-duration) var(--celebration-delay) linear both}.widget-celebration-dot .widget-celebration-piece:after{border-radius:50%}.widget-celebration-ribbon .widget-celebration-piece:after{border-radius:1px}@keyframes widget-celebration-spread{0%{transform:translateZ(0)}to{transform:translate3d(calc(var(--celebration-x) * var(--celebration-spread-unit)),0,0)}}@keyframes widget-celebration-fall{0%{transform:translateZ(0);animation-timing-function:cubic-bezier(.18,.64,.44,1)}30%{transform:translate3d(0,calc(var(--celebration-peak-y) * var(--celebration-height-unit)),0);animation-timing-function:cubic-bezier(.55,0,.82,.48)}to{transform:translate3d(0,calc(var(--celebration-fall-y) * var(--celebration-height-unit)),0)}}@keyframes widget-celebration-tumble{0%{transform:rotate(var(--celebration-start)) rotateY(0)}to{transform:rotate(calc(var(--celebration-start) + var(--celebration-turn))) rotateY(var(--celebration-flip))}}@keyframes widget-celebration-fade{0%{opacity:0}.5%,78%{opacity:.98}to{opacity:0}}@media(prefers-reduced-motion:reduce){.widget-celebration{display:none}.widget-celebration-particle,.widget-celebration-piece,.widget-celebration-piece:after{animation:none}}.chord-lesson{--chord-ink: var(--ink);--chord-muted: var(--muted);--chord-blue: var(--brand);--chord-line: var(--line);display:grid;gap:24px;min-width:0;color:var(--chord-ink)}.chord-lesson .chord-lesson-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.chord-lesson .chord-lesson-top>div{min-width:0}.chord-lesson .chord-lesson-eyebrow{display:block;margin:0 0 7px;color:var(--chord-muted);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.07em;text-transform:uppercase}.chord-lesson .chord-lesson-top h3{margin:0;color:var(--chord-ink);font-size:clamp(23px,2.6vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.035em}.chord-lesson .chord-lesson-reset,.chord-lesson .chord-lesson-count{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:44px;padding:6px 0;border:0;border-radius:4px;background:transparent;color:var(--chord-blue);box-shadow:none;font:inherit;font-size:14px;font-weight:500;line-height:1.35;cursor:pointer}.chord-lesson .chord-lesson-reset{color:var(--chord-muted)}.chord-lesson .chord-lesson-reset:hover,.chord-lesson .chord-lesson-count:hover{color:var(--chord-ink)}.chord-lesson .chord-lesson-reset svg,.chord-lesson .chord-lesson-count svg{width:17px;height:17px}.chord-lesson .chord-lesson-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0 0 22px;border-bottom:1px solid var(--chord-line);list-style:none}.chord-lesson .chord-lesson-progress li{display:flex;align-items:center;gap:11px;min-width:0;margin:0;padding:0;color:var(--chord-muted);font-size:13px;line-height:1.45}.chord-lesson .chord-lesson-progress strong{display:inline-block;margin-top:2px;color:var(--chord-ink);font-size:22px;font-weight:500;line-height:1.2}.chord-lesson .chord-lesson-progress small{display:inline-block;margin-left:5px;font-size:13px;font-weight:400}.chord-lesson .chord-lesson-progress-copy{flex:1}.chord-lesson .chord-lesson-step-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--chord-muted);font-size:13px;font-variant-numeric:tabular-nums;transition:background .18s ease,border-color .18s ease,color .18s ease}.chord-lesson .chord-lesson-step-number svg{width:16px;height:16px}.chord-lesson .is-current .chord-lesson-step-number{border-color:var(--chord-blue);color:var(--chord-blue);background:var(--brand-tint)}.chord-lesson .is-done .chord-lesson-step-number{border-color:var(--chord-blue);color:var(--surface);background:var(--chord-blue)}.chord-lesson .chord-lesson-instruction{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:7px 24px}.chord-lesson .chord-lesson-instruction-copy{grid-column:1}.chord-lesson .chord-lesson-instruction h4{grid-column:1;margin:0;color:var(--chord-ink);font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.02em}.chord-lesson .chord-lesson-instruction p{grid-column:1;max-width:640px;margin:0;color:var(--chord-muted);font-size:15px;line-height:1.65}.chord-lesson .chord-lesson-instruction>.chord-lesson-count{grid-column:2;grid-row:1 / span 2;align-self:center}.chord-lesson .chord-lesson-keyboard{position:relative;min-width:0;padding-top:4px}.chord-lesson .chord-lesson-keyboard .piano-keybed{width:100%;max-width:none;height:220px}.chord-lesson .chord-lesson-keyboard button .piano-key-badge{display:inline-flex;order:-1;justify-content:center;min-height:23px;max-width:100%;padding:4px 5px;border-radius:4px;background:transparent;color:inherit;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none}.chord-lesson .chord-lesson-keyboard .white-keys button.annotated .piano-key-badge{background:var(--brand-tint);color:var(--brand)}.chord-lesson .chord-lesson-keyboard .black-keys button .piano-key-badge{padding-inline:2px;font-size:15px}.chord-lesson .chord-lesson-keyboard button.active .piano-key-badge{background:transparent;color:var(--piano-playing-ink)}.chord-lesson .chord-lesson-keyboard button:focus-visible{outline:2px solid var(--chord-blue);outline-offset:3px;z-index:2}.chord-lesson .chord-lesson-feedback{min-height:24px;margin:0;color:var(--chord-muted);font-size:14px;line-height:1.65}.chord-lesson .chord-lesson-feedback.is-error{color:#985b47}.chord-lesson .chord-lesson-result{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-top:20px;border-top:1px solid var(--chord-line)}.chord-lesson .chord-lesson-result-text{display:grid;gap:5px}.chord-lesson .chord-lesson-result-text>span{color:var(--chord-muted);font-size:13px;line-height:1.5}.chord-lesson .chord-lesson-result strong{color:var(--chord-ink);font-size:25px;font-weight:500;line-height:1.3;letter-spacing:-.025em}.chord-lesson .chord-lesson-actions{display:flex;flex-wrap:wrap;gap:10px}.chord-lesson .chord-lesson-actions .widget-play-button{min-height:46px;padding:10px 18px;font-size:14px;font-weight:500}.chord-lesson .chord-lesson-actions .widget-play-button:last-child{border-color:var(--ink);background:var(--ink);color:var(--surface)}.chord-lesson .chord-lesson-actions .widget-play-button:last-child:hover{background:var(--ink-soft);border-color:var(--ink-soft)}.chord-lesson .chord-lesson-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding-top:18px;border-top:1px solid var(--chord-line)}.chord-lesson .chord-lesson-root{display:flex;align-items:center;gap:12px;color:var(--chord-muted);font-size:14px;line-height:1.5}.chord-lesson .chord-lesson-root select{min-width:90px;min-height:44px;padding:8px 30px 8px 13px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--chord-ink);font:inherit;cursor:pointer}.chord-lesson .chord-lesson-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 15px;border:1px solid var(--line-strong);border-radius:6px;background:transparent;color:var(--brand);font:inherit;font-size:14px;font-weight:500;cursor:pointer}.chord-lesson .chord-lesson-next:hover{background:var(--brand-tint)}.chord-lesson .chord-lesson-quality{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:fit-content;max-width:100%}.chord-lesson .chord-lesson-quality button{min-width:108px;min-height:46px;padding:9px 20px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--chord-muted);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}.chord-lesson .chord-lesson-quality button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--surface)}.chord-lesson .chord-lesson-change{margin:0;color:var(--chord-ink);font-size:19px;font-weight:500;line-height:1.5}.chord-lesson .chord-lesson-legend{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--chord-muted);font-size:14px;line-height:1.65}.chord-lesson .chord-lesson-legend>span{display:inline-flex;align-items:center;gap:7px}.chord-lesson .chord-lesson-legend strong{color:var(--chord-ink);font-weight:500}.chord-lesson .chord-lesson-comparison-copy{flex:1 1 260px}.chord-lesson button:disabled{cursor:default;opacity:.5}.chord-lesson :is(button,select):focus-visible{outline:2px solid var(--chord-blue);outline-offset:3px;box-shadow:none}.chord-lesson .chord-lesson-reserved{opacity:1;visibility:visible;transition:opacity .18s ease,visibility .18s}.chord-lesson .chord-lesson-reserved[aria-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}.chord-lesson .chord-lesson-next-slot{display:grid;align-items:center}.chord-lesson .chord-lesson-next-slot>*{grid-area:1 / 1}.chord-lesson[data-mode=compare] .chord-lesson-instruction{grid-template-columns:minmax(0,1fr)}.chord-lesson[data-mode=compare] .chord-lesson-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1.2fr);align-items:center;gap:20px 28px;min-width:0}.chord-lesson[data-mode=compare] .chord-lesson-comparison-heading{display:grid;align-content:center;gap:6px;min-width:0;max-width:280px}.chord-lesson[data-mode=compare] .chord-lesson-comparison-heading>span{color:var(--chord-ink);font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-.015em}.chord-lesson[data-mode=compare] .chord-lesson-comparison-heading p{margin:0;color:var(--chord-muted);font-size:13px;font-weight:400;line-height:1.6}.chord-lesson[data-mode=compare] .chord-lesson-quality{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:stretch;gap:12px;width:100%}.chord-lesson[data-mode=compare] .chord-lesson-quality button{display:grid;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:7px;min-width:0;min-height:94px;padding:14px 16px;color:var(--chord-ink);box-shadow:none;text-align:center;transition:background .18s ease,color .18s ease,border-color .18s ease}.chord-lesson[data-mode=compare] .chord-lesson-quality button:hover:not([aria-pressed=true]){border-color:var(--chord-blue);background:var(--brand-tint)}.chord-lesson[data-mode=compare] .chord-lesson-quality button[aria-pressed=true]{border-color:var(--chord-ink);background:var(--chord-ink);color:var(--surface)}.chord-lesson[data-mode=compare] .chord-lesson-quality-note{color:inherit;font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.025em}.chord-lesson[data-mode=compare] .chord-lesson-quality-name{min-width:0;font-size:13px;font-weight:400;line-height:1.4;overflow-wrap:anywhere}.chord-lesson[data-mode=compare] .chord-lesson-swap-arrow{align-self:center;color:var(--chord-muted);font-size:22px;font-weight:400;line-height:1;text-align:center}.chord-lesson[data-mode=compare] .chord-lesson-footer{align-items:center}.chord-lesson[data-mode=compare] .chord-lesson-footer .chord-lesson-actions{margin-left:auto}@media(max-width:700px){.chord-lesson{gap:20px}.chord-lesson .chord-lesson-top{gap:12px}.chord-lesson .chord-lesson-top h3{font-size:24px}.chord-lesson .chord-lesson-reset{font-size:13px}.chord-lesson .chord-lesson-progress{gap:8px;padding-bottom:18px}.chord-lesson .chord-lesson-progress li{gap:7px;font-size:12px}.chord-lesson .chord-lesson-step-number{flex-basis:27px;width:27px;height:27px;font-size:12px}.chord-lesson .chord-lesson-progress strong{font-size:20px}.chord-lesson .chord-lesson-instruction{grid-template-columns:1fr;gap:6px}.chord-lesson .chord-lesson-instruction h4{font-size:18px}.chord-lesson .chord-lesson-instruction p{font-size:14px}.chord-lesson .chord-lesson-instruction>.chord-lesson-count{grid-column:1;grid-row:auto;justify-self:start;margin-top:3px}.chord-lesson .chord-lesson-keyboard .piano-keybed{height:200px}.chord-lesson .chord-lesson-keyboard button .piano-key-badge,.chord-lesson .chord-lesson-keyboard .black-keys button .piano-key-badge{padding-inline:2px;font-size:12px}.chord-lesson .chord-lesson-progress small{display:block;margin-left:0;font-size:12px}.chord-lesson .chord-lesson-feedback{font-size:13px}.chord-lesson .chord-lesson-result{align-items:flex-start;gap:16px}.chord-lesson .chord-lesson-actions{width:100%}.chord-lesson .chord-lesson-actions .widget-play-button{flex:1 1 auto;justify-content:center;padding-inline:13px;font-size:13px}.chord-lesson .chord-lesson-footer{align-items:flex-start;gap:14px}.chord-lesson .chord-lesson-root{gap:9px}.chord-lesson .chord-lesson-next{padding-inline:12px}.chord-lesson .chord-lesson-quality{width:100%}.chord-lesson .chord-lesson-quality button{min-width:0}.chord-lesson .chord-lesson-change{font-size:17px}.chord-lesson .chord-lesson-legend{gap:7px 16px;font-size:13px}.chord-lesson[data-mode=compare] .chord-lesson-comparison{grid-template-columns:minmax(0,1fr);gap:14px}.chord-lesson[data-mode=compare] .chord-lesson-comparison-heading{max-width:none}.chord-lesson[data-mode=compare] .chord-lesson-comparison-heading>span{font-size:15px}.chord-lesson[data-mode=compare] .chord-lesson-quality{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px}.chord-lesson[data-mode=compare] .chord-lesson-quality button{min-height:88px;padding:12px 10px}.chord-lesson[data-mode=compare] .chord-lesson-quality-note{font-size:28px}.chord-lesson[data-mode=compare] .chord-lesson-footer{gap:16px}.chord-lesson[data-mode=compare] .chord-lesson-footer .chord-lesson-actions{margin-left:0}}@media(prefers-reduced-motion:reduce){.chord-lesson *,.chord-lesson *:before,.chord-lesson *:after{animation:none!important;transition:none!important}}.piano-widget.piano-widget--key{display:grid;gap:20px;min-width:0;color:var(--ink)}.piano-widget--key .key-piano-heading h4{margin:0;color:var(--ink);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.03em}.piano-widget--key .key-piano-notes{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.5}.piano-widget--key .key-piano-legend{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}.key-piano-legend>span{display:inline-flex;align-items:center;gap:7px}:is(.key-piano-legend,.key-explorer-legend) .key-legend-swatch{position:relative;display:block;width:15px;height:10px;flex:0 0 15px;overflow:hidden;border-radius:2px;background:var(--lesson-note-4, #708474)}.key-legend-swatch:before,.key-legend-swatch:after{position:absolute;top:0;bottom:0;width:5px;content:""}.key-legend-swatch:before{left:0;background:var(--lesson-note-0, #a8624c)}.key-legend-swatch:after{right:0;background:var(--lesson-note-9, #81768e)}:is(.key-piano-legend,.key-explorer-legend) .key-legend-swatch.is-outside{background:var(--line-strong)}.key-legend-swatch.is-outside:before,.key-legend-swatch.is-outside:after{content:none}.piano-widget--key .piano-keybed-scroll{padding:0}.piano-widget.piano-widget--key .piano-keybed{width:100%;max-width:none;height:210px}.piano-widget--key .key-piano-hint{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.piano-widget--key>.widget-play-button{min-height:44px;margin-top:0}:is(.piano-widget--key,.key-explorer--neutral-keys) :is(.key-piano-legend,.key-explorer-legend) .key-legend-swatch{border:1px solid var(--line-strong);background:var(--surface)}:is(.piano-widget--key,.key-explorer--neutral-keys) .key-legend-swatch:before{content:none}:is(.piano-widget--key,.key-explorer--neutral-keys) .key-legend-swatch:after{width:6px;background:#24272d}:is(.piano-widget--key,.key-explorer--neutral-keys) :is(.key-piano-legend,.key-explorer-legend) .key-legend-swatch.is-outside{background:#d9dde2}@media(max-width:700px){.piano-widget.piano-widget--key{gap:18px}.piano-widget.piano-widget--key .piano-keybed{height:190px}}.key-tool-widget.key-explorer{display:grid;gap:26px;min-width:0;color:var(--ink)}.key-explorer .key-explorer-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px}.key-explorer-controls>label{display:inline-flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}.key-explorer-controls select{min-height:44px;min-width:100px;padding:8px 30px 8px 13px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit}.key-explorer-modes{display:flex;gap:6px}.key-explorer .key-explorer-modes button{min-height:44px;padding:9px 17px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}.key-explorer .key-explorer-modes button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--surface)}.key-explorer :is(button,select):focus-visible{outline:2px solid var(--brand);outline-offset:3px}.key-explorer .key-explorer-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 24px}.key-explorer .key-explorer-heading-copy{min-width:0}.key-explorer .key-explorer-heading h3{margin:0;color:var(--ink);font-size:clamp(25px,3vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.035em}.key-explorer .key-explorer-heading p{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.6}.key-explorer .key-explorer-legend{display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--muted);font-size:13px;line-height:1.5}.key-explorer-legend>span{display:inline-flex;align-items:center;gap:7px}.key-explorer-legend b{display:inline-grid;place-items:center;width:21px;height:21px;border:1px solid var(--line-strong);border-radius:50%;font-size:11px;font-weight:500}.key-explorer-legend>span:last-child{color:var(--muted)}.key-explorer .key-explorer-pattern,.key-explorer .key-explorer-keyboard{display:grid;min-width:0;gap:16px;margin:0;padding:24px 0 0;border-top:1px solid var(--line)}.key-explorer .key-explorer-section-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}.key-explorer .key-explorer-section-heading h4{margin:0;color:var(--ink);font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.02em}.key-explorer .key-explorer-section-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.key-explorer .key-explorer-caption,.key-explorer .key-explorer-takeaway{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.key-explorer .key-explorer-takeaway{padding-top:20px;border-top:1px solid var(--line)}.key-explorer-strip-scroll{overflow-x:auto;padding:3px 0 8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--surface-inset)}.key-explorer-strip-content{min-width:620px}.key-explorer-gaps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:30px;margin-inline:calc((100% - 48px) / 26)}.key-explorer-gaps>span{position:relative;display:flex;justify-content:center;align-items:flex-start;color:var(--muted)}.key-explorer-gaps>span:before{position:absolute;content:"";inset:10px 0 6px;border:1px solid var(--line-strong);border-bottom:0}.key-explorer-gaps b{position:relative;z-index:1;padding:0 5px;background:var(--surface-soft);font-size:12px;line-height:20px;font-weight:500}.note-rail.note-rail--key{display:grid;grid-template-columns:repeat(var(--rail-count),minmax(0,1fr));gap:4px;height:auto;min-height:90px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}.note-rail.note-rail--key .note-rail-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:90px;padding:12px 3px;border:1px solid color-mix(in srgb,var(--note-color) 55%,var(--line));border-radius:6px;background:color-mix(in srgb,var(--note-color) 10%,var(--surface));color:var(--ink);box-shadow:inset 0 -4px 0 var(--note-color);cursor:pointer;opacity:1;font:inherit;font-size:18px;font-weight:500;transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.note-rail.note-rail--key .note-rail-cell>span{color:inherit;font-size:inherit;line-height:1.2}.note-rail.note-rail--key .note-rail-cell>.note-rail-status{display:grid;place-items:center;height:20px;min-height:20px;font-size:12px;font-weight:500}.note-rail.note-rail--key .note-rail-cell:is(:hover,.playing):not(:disabled){border-color:var(--note-color);background:var(--note-color);color:#fff;box-shadow:none;transform:none}.note-rail.note-rail--key .note-rail-cell:disabled{border-color:var(--line);background:var(--surface-inset);color:var(--muted);box-shadow:none;cursor:not-allowed;opacity:1}.key-explorer--neutral-keys .note-rail.note-rail--key .note-rail-cell{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}.key-explorer--neutral-keys .note-rail.note-rail--key .note-rail-cell:hover:not(:disabled){background:var(--surface-soft);box-shadow:inset 0 -4px 0 var(--note-color)}.key-explorer--neutral-keys .note-rail.note-rail--key .note-rail-cell.playing:not(:disabled){background:var(--ink-soft);color:var(--surface);box-shadow:inset 0 -7px 0 var(--note-color)}.key-explorer--neutral-keys .note-rail.note-rail--key .note-rail-cell:disabled{background:#d9dde2;color:var(--muted);box-shadow:none}@media(max-width:700px){.key-tool-widget.key-explorer{gap:22px}.key-explorer .key-explorer-controls{align-items:stretch;gap:14px}.key-explorer .key-explorer-modes{flex:1 1 100%}.key-explorer .key-explorer-modes button{flex:1}.key-explorer .key-explorer-heading{grid-template-columns:minmax(0,1fr);align-items:start}.key-explorer .key-explorer-heading>.widget-play-button{justify-self:start}.key-explorer .key-explorer-heading h3{font-size:27px}.key-explorer .key-explorer-heading p{font-size:15px}.key-explorer .key-explorer-legend{gap:10px 16px;font-size:12px}.key-explorer .key-explorer-caption,.key-explorer .key-explorer-takeaway{font-size:13px}}@media(prefers-reduced-motion:reduce){.key-explorer *{transition:none!important}}.diatonic-chords-widget.diatonic-lesson{--dl-ink: var(--ink);--dl-muted: var(--muted);--dl-line: var(--line);--dl-blue: var(--brand);--dl-clay: #a8624c;display:grid;gap:24px;min-width:0;color:var(--dl-ink)}.diatonic-lesson .dl-top>span{display:block;margin-bottom:6px;color:var(--dl-muted);font-size:14px;line-height:1.5}.diatonic-lesson .dl-top{scroll-margin-top:104px}.diatonic-lesson .dl-top h3{margin:0;color:var(--dl-ink);font-size:clamp(23px,2.6vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.035em}.diatonic-lesson :is(.dl-tabs,.dl-quality){display:flex;flex-wrap:wrap;align-items:center;gap:8px}.diatonic-lesson .dl-tabs{padding-bottom:22px;border-bottom:1px solid var(--dl-line)}.diatonic-lesson :is(.dl-tabs,.dl-quality,.dl-root-options) button{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--dl-muted);box-shadow:none;font:inherit;font-size:14px;font-weight:500;line-height:1.4;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}.diatonic-lesson :is(.dl-tabs,.dl-quality,.dl-root-options) button:hover:not(:disabled){border-color:var(--line-strong);color:var(--dl-ink);background:var(--surface-soft)}.diatonic-lesson :is(.dl-tabs,.dl-quality,.dl-root-options) button[aria-pressed=true]{border-color:var(--dl-ink);background:var(--dl-ink);color:var(--surface)}.diatonic-lesson .dl-tabs button:disabled{color:var(--muted);background:transparent;cursor:default}.diatonic-lesson .dl-quality{gap:0;width:fit-content;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-inset)}.diatonic-lesson .dl-quality button{border-color:transparent;background:transparent}.diatonic-lesson .dl-quality button[aria-pressed=true]{border-color:var(--line);background:var(--surface);color:var(--dl-ink)}.diatonic-lesson :is(.dl-prompt,.dl-result){display:grid;min-width:0;gap:8px}.diatonic-lesson :is(.dl-prompt,.dl-result) h4{margin:0;color:var(--dl-ink);font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.02em}.diatonic-lesson :is(.dl-prompt,.dl-result) p{max-width:680px;margin:0;color:var(--dl-muted);font-size:15px;line-height:1.65}.diatonic-lesson .dl-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.diatonic-lesson .dl-notes>button{display:grid;align-content:start;justify-items:start;gap:6px;min-width:0;min-height:130px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--dl-ink);box-shadow:none;text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}.diatonic-lesson .dl-notes>button small{color:var(--dl-muted);font-size:14px;font-weight:400;line-height:1.4}.diatonic-lesson .dl-notes>button strong{color:inherit;font-size:30px;font-weight:500;line-height:1.15;letter-spacing:-.025em}.diatonic-lesson .dl-notes>button>span{color:var(--muted);font-size:14px;line-height:1.4}.diatonic-lesson .dl-notes>button:hover:not(:disabled){border-color:var(--dl-blue);background:var(--surface-soft)}.diatonic-lesson .dl-notes>button.is-found{border-color:#9fae9a}.diatonic-lesson .dl-notes>button.is-outside{border-color:#c69a87;background:#f4eae3}.diatonic-lesson .dl-notes>button.is-outside>span{color:#95523d}.diatonic-lesson .dl-notes>button.is-pending{border-style:dashed;background:transparent;cursor:default;opacity:1}.diatonic-lesson .dl-notes>button.is-pending :is(strong,span){color:var(--dl-muted)}.diatonic-lesson .dl-notes>button.is-playing{border-color:var(--dl-blue);box-shadow:inset 0 0 0 1px var(--dl-blue);background:var(--brand-tint)}.diatonic-lesson .dl-notes>button.is-outside.is-playing{border-color:var(--dl-clay);box-shadow:inset 0 0 0 1px var(--dl-clay);background:#ecd8cc}.diatonic-lesson .dl-keyboard{min-width:0;padding-top:2px}.diatonic-lesson .dl-keyboard .piano-keybed{height:220px}.diatonic-lesson .dl-keyboard .piano-keybed button .piano-key-badge{justify-content:center;min-width:22px;min-height:22px;padding:3px 4px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:14px;font-weight:500;line-height:1}.diatonic-lesson .dl-keyboard .piano-keybed .black-keys button .piano-key-badge{background:var(--surface-soft);color:var(--dl-ink)}.diatonic-lesson .dl-keyboard .piano-widget--neutral-keys .piano-keybed :is(.white-keys,.black-keys) button.chord-note{box-shadow:inset 0 0 0 2px var(--dl-blue),inset 0 calc(-1 * var(--piano-note-edge)) 0 var(--note-color)}.diatonic-lesson .dl-keyboard .piano-widget--neutral-keys .piano-keybed :is(.white-keys,.black-keys) button.outside-note{border-color:var(--dl-clay);box-shadow:inset 0 0 0 2px var(--dl-clay)}.diatonic-lesson .dl-keyboard .piano-keybed button.outside-note .piano-key-badge{background:#a8624c;color:var(--surface)}.diatonic-lesson .dl-keyboard .piano-widget--neutral-keys .piano-keybed :is(.white-keys,.black-keys) button.outside-note.active{box-shadow:inset 0 0 0 3px var(--dl-clay)}.diatonic-lesson .dl-feedback{min-height:24px;margin:-8px 0 0;color:var(--dl-muted);font-size:14px;line-height:1.65}.diatonic-lesson .dl-feedback.is-error{color:#95523d}.diatonic-lesson .dl-feedback.is-success{color:#52664d}.diatonic-lesson .dl-result{padding-top:20px;border-top:1px solid var(--dl-line)}.diatonic-lesson .dl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}.diatonic-lesson .dl-actions .widget-play-button{min-height:44px;margin:0;padding-inline:18px;font-size:14px}.diatonic-lesson .dl-text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 0;border:0;border-radius:4px;background:transparent;color:var(--dl-blue);box-shadow:none;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:color .16s ease}.diatonic-lesson .dl-text-button:hover{color:var(--dl-ink)}.diatonic-lesson .dl-text-button svg{width:17px;height:17px}.diatonic-lesson .dl-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--dl-line)}.diatonic-lesson .dl-root-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.diatonic-lesson .dl-root-options>span{flex-basis:100%;margin-bottom:2px;color:var(--dl-muted);font-size:14px;line-height:1.5}.diatonic-lesson .dl-root-options button{min-width:44px;padding-inline:12px}.diatonic-lesson .dl-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;max-width:100%;padding:11px 18px;border:1px solid var(--dl-ink);border-radius:6px;background:var(--dl-ink);color:var(--surface);box-shadow:none;font:inherit;font-size:14px;font-weight:500;line-height:1.4;cursor:pointer;transition:background .16s ease,border-color .16s ease}.diatonic-lesson .dl-next:hover{border-color:var(--ink-soft);background:var(--ink-soft)}.diatonic-lesson .dl-next svg{width:17px;height:17px;flex:0 0 17px}.diatonic-lesson :is(.dl-tabs,.dl-quality,.dl-notes,.dl-root-options) button:focus-visible,.diatonic-lesson :is(.dl-text-button,.dl-next):focus-visible{outline:2px solid var(--dl-blue);outline-offset:3px}@media(max-width:700px){.diatonic-chords-widget.diatonic-lesson{gap:20px}.diatonic-lesson .dl-top{scroll-margin-top:144px}.diatonic-lesson .dl-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:18px}.diatonic-lesson .dl-tabs button{padding-inline:9px}.diatonic-lesson .dl-notes{gap:8px}.diatonic-lesson .dl-notes>button{min-height:126px;padding:13px 10px}.diatonic-lesson .dl-notes>button strong{font-size:27px}.diatonic-lesson .dl-keyboard .piano-keybed{height:200px}.diatonic-lesson .dl-keyboard .piano-keybed button .piano-key-badge{min-width:20px;min-height:20px;padding-inline:2px}.diatonic-lesson .dl-root-options{gap:6px}.diatonic-lesson .dl-root-options button{padding-inline:10px}.diatonic-lesson .dl-next{width:100%}}@media(prefers-reduced-motion:reduce){.diatonic-lesson button{transition:none!important}}.diatonic-chords-widget.diatonic-lesson.diatonic-discovery{gap:24px}.diatonic-discovery .dd-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-width:0}.diatonic-discovery .dd-header h3{margin:0;color:var(--dl-ink);font-size:clamp(23px,2.6vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.035em}.diatonic-discovery .dd-count{flex-shrink:0;color:var(--dl-muted);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}.diatonic-discovery .dd-task{scroll-margin-top:140px;display:grid;gap:16px;min-width:0}.diatonic-discovery .dd-task--question{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:24px}.diatonic-discovery .dd-task h4{margin:0;color:var(--dl-ink);font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.02em}.diatonic-discovery .dd-qualities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:440px}.diatonic-discovery .dd-qualities button{min-height:52px;min-width:0;padding:12px 18px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--dl-ink);box-shadow:none;font:inherit;font-size:16px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.diatonic-discovery .dd-qualities button>.widget-stable-slot{width:100%}.diatonic-discovery .dd-qualities button:hover{border-color:var(--dl-blue);background:var(--surface-soft)}.diatonic-discovery .dd-qualities button.is-correct{border-color:var(--dl-blue);background:var(--brand-tint);color:var(--brand)}.diatonic-discovery .dd-qualities button.is-outside{border-color:var(--dl-clay);background:#f4eae3;color:#95523d}.diatonic-discovery .dd-qualities button:focus-visible{outline:2px solid var(--dl-blue);outline-offset:3px}.diatonic-discovery.diatonic-lesson .dl-keyboard[data-chord-preview] .piano-widget--neutral-keys .piano-keybed :is(.white-keys,.black-keys) button.chord-note:not(.active):not(:active){background:#dce8eb;color:#254b60}.diatonic-discovery.diatonic-lesson .dl-keyboard .piano-widget--neutral-keys .piano-keybed :is(.white-keys,.black-keys) button.outside-note{box-shadow:inset 0 0 0 2px var(--dl-clay),inset 0 calc(-1 * var(--piano-note-edge)) 0 var(--note-color)}.diatonic-discovery.diatonic-lesson .dl-keyboard .piano-widget--neutral-keys .piano-keybed :is(.white-keys,.black-keys) button.outside-note.active{box-shadow:inset 0 0 0 3px var(--dl-clay),inset 0 calc(-1 * var(--piano-note-edge)) 0 var(--note-color)}.diatonic-discovery .dd-feedback{margin:0;color:var(--dl-muted);font-size:15px;line-height:1.65}.diatonic-discovery .dd-feedback>.widget-stable-slot{width:100%}.diatonic-discovery .dd-feedback.is-error{color:#95523d}.diatonic-discovery .dd-feedback.is-success{color:#52664d}.diatonic-discovery .dd-footer{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:12px 20px;min-height:46px}.diatonic-discovery .dd-footer .widget-play-button{min-height:46px;margin:0 auto 0 0;padding-inline:18px;font-size:14px}.diatonic-discovery .dd-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;padding:0;margin:0;list-style:none}.diatonic-discovery .dd-results li{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 0;border-radius:4px;color:var(--dl-ink);font-size:15px;line-height:1.4;transition:color var(--piano-key-press-duration) ease}.diatonic-discovery .dd-results li svg{flex-shrink:0;color:#52664d}.diatonic-discovery .dd-results li.is-playing{color:var(--dl-blue)}.diatonic-discovery .dd-exception{margin:0;padding-top:20px;border-top:1px solid var(--dl-line);color:var(--dl-muted);font-size:14px;line-height:1.65}@media(max-width:1100px){.diatonic-discovery .dd-task--question{grid-template-columns:minmax(0,1fr);gap:16px}}@media(max-width:700px){.diatonic-chords-widget.diatonic-lesson.diatonic-discovery{gap:20px}.diatonic-discovery .dd-header{align-items:flex-start}.diatonic-discovery .dd-qualities{gap:8px;max-width:none}.diatonic-discovery .dd-qualities button{padding-inline:10px}.diatonic-discovery .dd-feedback{font-size:14px}.diatonic-discovery .dd-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}.diatonic-discovery .dd-footer .widget-play-button{flex:1}}@media(prefers-reduced-motion:reduce){.diatonic-discovery .dd-results li{transition:none}}.intro-step.with-instrument:has(.rhythm-studio){grid-template-columns:minmax(0,1fr);gap:25px}.intro-step:has(.rhythm-studio) .intro-step-copy{max-width:680px}.rhythm-grid-widget.rhythm-studio{--rhythm-ink: var(--ink);--rhythm-muted: var(--muted);--rhythm-accent: var(--brand);--rhythm-line: var(--line);--rhythm-surface: var(--surface-soft);--rhythm-cell: var(--surface);--rhythm-label-width: 98px;gap:22px;color:var(--rhythm-ink)}.rhythm-studio .rhythm-grid-controls{justify-content:flex-start;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--rhythm-line)}.rhythm-studio .rhythm-transport,.rhythm-studio .rhythm-tempo-control button{display:inline-flex;justify-content:center;align-items:center;gap:8px;width:auto;min-width:44px;min-height:44px;height:44px;padding:0 17px;border:1px solid var(--rhythm-line);border-radius:5px;background:var(--rhythm-cell);color:var(--rhythm-ink);box-shadow:none;font-size:13px;font-weight:500;transform:none;transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease}.rhythm-studio .rhythm-transport:first-child{min-width:100px;border-color:var(--rhythm-ink);background:var(--rhythm-ink);color:var(--surface)}.rhythm-studio .rhythm-transport:first-child:is(:hover,.active){background:var(--rhythm-accent);border-color:var(--rhythm-accent);color:#fff}.rhythm-studio .rhythm-transport.reset{margin-left:auto;padding-inline:8px;border-color:transparent;background:transparent;color:var(--rhythm-muted)}.rhythm-studio .rhythm-transport:hover,.rhythm-studio .rhythm-tempo-control button:hover:not(:disabled){transform:none;box-shadow:none;background:var(--brand-tint);border-color:var(--rhythm-accent)}.rhythm-studio .rhythm-transport:disabled{cursor:default;opacity:.45}.rhythm-studio .rhythm-transport>svg{flex:0 0 16px;width:16px;height:16px}.rhythm-studio .rhythm-transport-label{text-align:center}.rhythm-studio .rhythm-tempo-control{width:auto;gap:4px;padding:0;min-height:44px;border:0;border-radius:0;background:transparent}.rhythm-studio .rhythm-tempo-control strong{min-width:88px;gap:7px;color:var(--rhythm-ink);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}.rhythm-studio .rhythm-tempo-control strong span{color:var(--rhythm-muted);font-size:10px;font-weight:500;letter-spacing:.035em}.rhythm-studio .rhythm-meter{margin-left:4px;color:var(--rhythm-muted);font-size:12px}.rhythm-studio .rhythm-grid-scroll{gap:10px;padding:4px 3px 12px;box-shadow:none;scrollbar-color:var(--line-strong) transparent}.rhythm-studio .rhythm-grid-scroll::-webkit-scrollbar-thumb{background:var(--line-strong)}.rhythm-studio .rhythm-grid,.rhythm-studio .rhythm-grid-beats{width:100%;min-width:722px}.rhythm-studio .rhythm-grid{gap:10px}.rhythm-studio .rhythm-grid-row,.rhythm-studio .rhythm-grid-beats{grid-template-columns:var(--rhythm-label-width) repeat(var(--steps),minmax(32px,1fr));gap:6px}.rhythm-studio .rhythm-grid-beats{font-size:11px;font-weight:400}.rhythm-studio .rhythm-grid-beats>span{display:flex;align-items:center;min-height:26px;background:var(--rhythm-surface);color:var(--rhythm-muted);font-size:12px;font-weight:400}.rhythm-studio .rhythm-grid-beats i{min-height:26px;border-radius:3px;color:var(--muted);background:transparent}.rhythm-studio .rhythm-grid-beats i.downbeat{color:var(--rhythm-ink);font-weight:600}.rhythm-studio .rhythm-grid-beats i.playing{color:#fff;background:var(--rhythm-accent)}.rhythm-studio .rhythm-grid-row-label{height:44px;gap:8px;padding:0 7px 0 0;border:0;border-radius:0;background:var(--rhythm-surface);box-shadow:6px 0 0 var(--rhythm-surface);color:var(--rhythm-ink);font:inherit;font-size:12px;text-align:left;cursor:pointer;transition:color .18s ease}.rhythm-studio .rhythm-grid-row-label:disabled{cursor:default;opacity:1}.rhythm-studio .rhythm-grid-row-label:hover:not(:disabled){color:var(--rhythm-accent)}.rhythm-studio .rhythm-grid-row-label strong{font-size:inherit;font-weight:500}.rhythm-studio .rhythm-grid-row-label>span{width:5px;height:5px;border-radius:50%;background:var(--rhythm-accent);box-shadow:none}.rhythm-grid-row-label.rhythm-grid-row-label--icon{display:grid;grid-template-columns:12px 32px;justify-content:center;gap:8px;padding-inline:0}.rhythm-grid-row-label--icon>:is(span,.rhythm-row-lock){justify-self:center}.rhythm-grid-row-label.rhythm-grid-row-label--icon>span{width:5px;height:5px}.rhythm-grid-row-label--icon .rhythm-instrument-icon{display:block;width:32px;height:32px}.rhythm-grid-widget.rhythm-studio.rhythm-instrument-icons{--rhythm-label-width: 64px}.rhythm-studio .rhythm-grid-cell{width:100%;height:44px;border:1px solid var(--rhythm-line);border-radius:4px;background:var(--rhythm-cell);color:var(--rhythm-ink);box-shadow:none;transform:none;touch-action:manipulation;transition:background .16s ease,border-color .16s ease}.rhythm-studio .rhythm-grid-cell.alternate-beat{background:var(--surface-inset)}.rhythm-studio .rhythm-grid-cell.downbeat{border-left:2px solid var(--line-strong)}.rhythm-studio .rhythm-grid-cell:hover{border-color:var(--rhythm-accent);transform:none}.rhythm-studio .rhythm-grid-cell.active{background:var(--rhythm-accent);border-color:var(--rhythm-accent);box-shadow:none;color:#fff}.rhythm-studio .rhythm-grid-cell.active:after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}.rhythm-studio .rhythm-grid-cell.active:has(span):after{display:none}.rhythm-studio .rhythm-grid-cell.playing{transform:none;border-color:var(--rhythm-accent);box-shadow:inset 0 0 0 2px var(--rhythm-accent);transition:none}.rhythm-studio .rhythm-grid-cell:not(.active).playing{background:#dbe4e6}.rhythm-studio .rhythm-grid-cell.active.playing{background:#354e60;box-shadow:inset 0 0 0 2px var(--surface-soft)}.rhythm-studio :is(button):focus-visible{outline:2px solid var(--rhythm-accent);outline-offset:2px;z-index:4}.rhythm-studio .rhythm-grid-footer{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}.rhythm-studio .rhythm-grid-footer p,.rhythm-studio .rhythm-load-status p{margin:0;color:var(--rhythm-muted);font-size:12px;line-height:1.65}.rhythm-studio .rhythm-scroll-hint{color:var(--rhythm-muted);font-size:11px}.rhythm-studio .rhythm-load-status button{padding:4px 8px;border:0;background:transparent;color:var(--rhythm-accent);font:inherit;text-decoration:underline;cursor:pointer}.rhythm-studio>.widget-animated-size{margin-top:-22px}.rhythm-studio .rhythm-load-status:not(:empty){padding-top:14px}.rhythm-tutorial .rhythm-coach-wrap{min-width:0}.rhythm-tutorial .rhythm-coach-wrap>.widget-animated-size{margin:0}.rhythm-tutorial .rhythm-coach{display:grid;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--rhythm-line)}.rhythm-tutorial .rhythm-coach-top{display:grid;gap:14px}.rhythm-tutorial .rhythm-coach-kicker{margin:0;color:var(--rhythm-muted);font-size:12px;font-weight:500;line-height:1.5}.rhythm-tutorial .rhythm-coach-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}.rhythm-tutorial .rhythm-coach-progress li{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:0;color:var(--rhythm-muted);font-size:12px;font-weight:500;line-height:1.4;transition:color .18s ease}.rhythm-tutorial .rhythm-coach-progress b{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--rhythm-line);border-radius:50%;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;transition:background .18s ease,border-color .18s ease,color .18s ease}.rhythm-tutorial .rhythm-coach-progress b svg{width:14px;height:14px}.rhythm-tutorial .rhythm-coach-progress li.current{color:var(--rhythm-ink);font-weight:500}.rhythm-tutorial .rhythm-coach-progress .current b{border-color:var(--rhythm-accent);background:var(--brand-tint);color:var(--rhythm-accent)}.rhythm-tutorial .rhythm-coach-progress .done b{border-color:var(--rhythm-accent);background:var(--rhythm-accent);color:#fff}.rhythm-tutorial .rhythm-coach-instruction{--rhythm-coach-attention: color-mix(in srgb, var(--brand) 16%, var(--surface));display:grid;gap:16px;min-width:0;padding:20px 22px;border:1px solid var(--line-strong);border-left:3px solid var(--rhythm-accent);border-radius:8px;background:var(--brand-tint);scroll-margin-top:100px}.rhythm-tutorial .rhythm-coach-copy{display:grid;align-content:start;gap:10px;min-width:0}.rhythm-tutorial .rhythm-coach-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-bottom:2px;line-height:1.4}.rhythm-tutorial .rhythm-coach-action-label{color:var(--rhythm-accent);font-size:12px;font-weight:600}.rhythm-tutorial .rhythm-coach-step{color:var(--rhythm-muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}.rhythm-tutorial .rhythm-coach-copy h4{margin:0;color:var(--rhythm-ink);font-size:23px;font-weight:500;line-height:1.3;letter-spacing:-.025em}.rhythm-tutorial .rhythm-coach-copy p{max-width:680px;margin:0;color:var(--rhythm-ink);font-size:15px;font-weight:400;line-height:1.65}.rhythm-tutorial .rhythm-coach-copy p.rhythm-coach-detail{color:var(--rhythm-muted);font-size:13px;line-height:1.6}.rhythm-tutorial .rhythm-coach-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);align-items:center;gap:8px 16px;min-height:44px}.rhythm-tutorial .rhythm-coach-next-slot{max-width:100%}.rhythm-tutorial .rhythm-coach-count{color:var(--rhythm-accent);font-size:13px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums}.rhythm-tutorial .rhythm-coach-next{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:100%;min-height:44px;margin:0;padding:10px 15px;border:1px solid var(--rhythm-accent);border-radius:5px;background:var(--rhythm-accent);color:#fff;box-shadow:none;font:inherit;font-size:13px;font-weight:500;line-height:1.4;text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease}.rhythm-tutorial .rhythm-coach-next svg{flex:0 0 16px;width:16px;height:16px}.rhythm-tutorial .rhythm-coach-next.is-hidden{visibility:hidden;pointer-events:none}.rhythm-tutorial .rhythm-coach-next:hover:not(:disabled){border-color:var(--ink-soft);background:var(--ink-soft)}.rhythm-tutorial .rhythm-coach-next:disabled{opacity:.45;cursor:default}.rhythm-tutorial .rhythm-grid-cell.locked{border-color:var(--line);background:var(--surface-inset);opacity:1;cursor:default}.rhythm-tutorial .rhythm-grid-cell.locked.downbeat{border-left-color:var(--line-strong)}.rhythm-tutorial .rhythm-grid-cell.target:not(.active){border:2px dashed var(--rhythm-accent);background:var(--brand-tint);color:var(--rhythm-accent)}.rhythm-tutorial .rhythm-grid-cell.target:not(.active):before{content:"+";font-size:23px;font-weight:400;line-height:1}.rhythm-tutorial .rhythm-grid-cell.target:hover:not(:disabled){background:#dbe4e6}.rhythm-tutorial .rhythm-grid-cell.target:not(.active).playing{background:#dbe4e6;transition:none}.rhythm-tutorial .rhythm-grid-cell.tutorial-editable:not(.active):not(.playing){border-color:var(--line-strong)}.rhythm-tutorial .rhythm-grid-cell.tutorial-editable:not(.target):not(.active):not(.playing){background:var(--rhythm-cell)}.rhythm-tutorial .rhythm-grid-cell.active.locked{border-color:var(--rhythm-accent);background:var(--rhythm-accent)}.rhythm-tutorial .rhythm-grid-cell.locked.playing{transition:none}.rhythm-tutorial .rhythm-grid-cell.locked:not(.active).playing{background:#dbe4e6;border-color:var(--rhythm-accent)}.rhythm-tutorial .rhythm-grid-cell.active.locked.playing{background:#354e60}.rhythm-tutorial .rhythm-grid-row.is-current .rhythm-grid-row-label{color:var(--rhythm-accent)}.rhythm-tutorial .rhythm-grid-row.is-locked .rhythm-grid-row-label{color:var(--rhythm-muted)}.rhythm-tutorial .rhythm-row-lock{flex:0 0 11px;width:11px;height:11px;color:var(--rhythm-muted)}.rhythm-tutorial .rhythm-bass-note{display:inline-flex;align-items:center;gap:7px;color:var(--rhythm-muted);font-size:12px;font-weight:400;line-height:1.5}.rhythm-tutorial .rhythm-bass-note>span{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--rhythm-muted)}.rhythm-tutorial .rhythm-bass-note>span.active{background:var(--rhythm-accent)}@media(max-width:960px){.rhythm-tutorial .rhythm-coach-instruction{scroll-margin-top:145px}}@media(min-width:1250px){.rhythm-studio .rhythm-scroll-hint,.rhythm-studio .rhythm-grid-footer--scroll-only{display:none}}@media(max-width:600px){.rhythm-grid-widget.rhythm-studio{--rhythm-label-width: 88px;gap:18px}.rhythm-studio .rhythm-grid-controls{gap:6px;padding-bottom:16px}.rhythm-studio .rhythm-meter{flex-basis:100%;order:2;margin:6px 0 0}.rhythm-studio .rhythm-transport:first-child{min-width:90px;padding-inline:14px}.rhythm-studio .rhythm-tempo-control strong{min-width:80px}.rhythm-studio>.widget-animated-size{margin-top:-18px}.rhythm-tutorial .rhythm-coach{gap:16px;padding-bottom:18px}.rhythm-tutorial .rhythm-coach-progress{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.rhythm-tutorial .rhythm-coach-instruction{gap:14px;padding:16px}.rhythm-tutorial .rhythm-coach-copy h4{font-size:21px}.rhythm-tutorial .rhythm-coach-copy p{font-size:14px}.rhythm-tutorial .rhythm-coach-foot{grid-template-columns:minmax(0,1fr);gap:10px}.rhythm-tutorial .rhythm-coach-next-slot{justify-self:start}.rhythm-tutorial .rhythm-bass-note{flex-basis:100%;order:3}}@media(prefers-reduced-motion:reduce){.rhythm-studio .rhythm-grid-cell,.rhythm-studio .rhythm-transport,.rhythm-studio .rhythm-tempo-control button,.rhythm-studio .rhythm-grid-row-label,.rhythm-tutorial .rhythm-coach-progress li,.rhythm-tutorial .rhythm-coach-progress b,.rhythm-tutorial .rhythm-coach-next{transition:none}}.home-widget{--blue: var(--brand);--blue-2: var(--brand);--blue-3: var(--line-strong);--coral: #a8624c;--gold: #9b8958;--mint: #708474;--lesson-note-0: #a8624c;--lesson-note-1: #a27656;--lesson-note-2: #9b8958;--lesson-note-3: #8a8c64;--lesson-note-4: #708474;--lesson-note-5: #64857f;--lesson-note-6: #62808b;--lesson-note-7: #536f83;--lesson-note-8: #747c92;--lesson-note-9: #81768e;--lesson-note-10: #947687;--lesson-note-11: #a47677;min-width:0;width:100%;color:var(--ink)}.home-widget *,.home-widget *:before,.home-widget *:after{background-image:none!important;text-shadow:none!important}.home-widget .lesson-widget{width:100%;min-width:0;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.home-widget .lesson-widget-copy{margin:0 0 18px}.home-widget .lesson-widget-copy h3{font:500 18px/1.3 var(--font-display);letter-spacing:-.025em}.home-widget .lesson-widget-copy p{color:var(--muted);font-size:14px;font-weight:400}.home-widget .lesson-widget-surface{min-width:0;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);box-shadow:none}.home-widget .lesson-widget.open-widget .lesson-widget-surface{padding:24px;background:var(--surface-soft);border:1px solid var(--line)}.home-widget :is(button,input,strong,small,.wave-label){font-weight:500}.home-widget :is(button,input):focus-visible{outline:2px solid var(--brand);outline-offset:4px}.home-widget .widget-play-button,.home-widget .widget-ghost-button,.home-widget .wave-choice-check,.home-widget .diatonic-build-heading button{width:fit-content;min-height:42px;padding-inline:16px;border:1px solid var(--line-strong);border-radius:50px;background:var(--surface);color:var(--ink);box-shadow:none;font-size:13px;font-weight:500}.home-widget .widget-play-button svg{color:currentColor}.home-widget .widget-play-button:focus-visible{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:-2px;box-shadow:none}.home-widget :is(.widget-play-button,.widget-ghost-button,.wave-choice-check,.diatonic-build-heading button):hover{border-color:var(--brand);background:var(--brand-tint);box-shadow:none}.home-widget .widget-mini-heading>button:not(.widget-play-button){min-height:40px;padding:0 15px;font-size:12px;font-weight:500;background:var(--ink)}.home-widget .wave-svg{min-height:150px}.home-widget .wave-svg.compact{min-height:95px}.home-widget .wave-figure{display:grid;min-width:0;gap:8px}.home-widget .wave-caption{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-soft);font-size:16px;font-weight:500;line-height:1.5}.home-widget .wave-caption:empty{display:none}.home-widget .wave-caption span{display:inline-flex;align-items:center;gap:9px;text-transform:capitalize}.home-widget .wave-caption span:before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--wave-color)}.home-widget .wave-figure .wave-label{display:none}.home-widget .wave-axis{stroke:var(--line);stroke-width:1}.home-widget .wave-origin{stroke:var(--line-strong);stroke-width:1}.home-widget .wave-origin-dot{fill:var(--brand)}.home-widget .wave-label{fill:var(--muted);font-size:14px;font-family:var(--font-body)}.home-widget .piano-keybed{width:100%;max-width:none;height:190px}.home-widget .pitch-volume-widget{grid-template-columns:minmax(0,1fr) minmax(160px,.48fr);gap:18px}.home-widget .pitch-volume-canvas,.home-widget .pitch-volume-pad{background:var(--surface-inset);border-color:var(--line);box-shadow:none}.home-widget .pitch-volume-canvas{min-height:290px}.home-widget .pitch-volume-pad{min-height:160px}.home-widget .pitch-volume-pad-panel{padding:0;border:0;background:transparent}.home-widget .pitch-volume-dot{box-shadow:0 0 0 1px var(--brand);width:28px;height:28px;border:4px solid var(--paper)}.home-widget .pitch-volume-pad.is-dragging{border-color:var(--brand);box-shadow:none}.home-widget .pad-readout span{background:var(--surface);border-color:var(--line);font-size:10px;font-weight:500}.home-widget .pad-readout strong{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}.home-widget :is(.pitch-volume-sliders span,.pad-axis,.axis-label){color:var(--muted);font-weight:500;font-size:10px;letter-spacing:.04em}.home-widget input[type=range]{accent-color:var(--brand)}.home-widget .touchpad-hint{background:var(--paper);color:var(--muted);box-shadow:none;font-size:9px;font-weight:500;letter-spacing:.04em}.pitch-volume-widget.pitch-volume-widget--stacked{grid-template-columns:minmax(0,1fr);gap:24px}.pitch-volume-widget--stacked .pitch-volume-canvas{height:220px;min-height:0}.pitch-volume-widget--stacked .pitch-volume-pad-panel{grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr);grid-template-rows:auto 1fr auto;gap:16px 28px}.pitch-volume-widget--stacked .pitch-volume-pad{grid-column:1;grid-row:1 / span 3;width:100%;height:220px;min-height:0;aspect-ratio:auto}.pitch-volume-widget--stacked .pad-readout{grid-column:2;grid-row:1;gap:12px}.pitch-volume-widget--stacked .pad-readout span{min-width:0;min-height:86px;padding:14px 16px;font-size:12px}.pitch-volume-widget--stacked .pad-readout strong{color:var(--ink);font-size:27px;white-space:nowrap;font-variant-numeric:tabular-nums}.pitch-volume-widget--stacked :is(.pitch-volume-sliders,.pitch-volume-instruction){grid-column:2;grid-row:2}.pitch-volume-widget--stacked .pitch-volume-instruction{align-self:center;margin:0;color:var(--muted);font-size:14px;line-height:1.5}.pitch-volume-widget--stacked .pitch-volume-pad-panel>.widget-play-button{grid-column:2;grid-row:3;width:100%;min-height:46px;justify-content:center}.home-widget .pitch-volume-widget--stacked :is(.axis-label,.pad-axis){font-size:12px;letter-spacing:0;text-transform:none}.home-widget .pitch-volume-widget--stacked :is(.axis-label,.pad-axis):first-letter{text-transform:uppercase}.pitch-volume-widget--stacked .pitch-volume-canvas .axis-label{display:none}.pitch-volume-widget--stacked .pitch-volume-pad:focus-visible{outline:2px solid var(--brand);outline-offset:3px}.home-widget :is(.note-rail,.chord-formula-strip){box-shadow:none;border-radius:4px}.home-widget .note-rail-cell{background:var(--note-color);font-weight:500}.home-widget .note-rail-cell.playing{filter:none;box-shadow:inset 0 0 0 3px #fff}.home-widget .note-rail.key-map .note-rail-cell{background:var(--surface);color:var(--ink);box-shadow:inset 0 -4px 0 var(--note-color)}.home-widget .key-tool-widget .note-rail.key-tool-rail .note-rail-cell.active{background:var(--note-color);color:#fff;box-shadow:inset 0 0 0 2px var(--paper)}.home-widget .note-rail.key-map .note-rail-cell.skipped,.home-widget .key-tool-widget .note-rail.key-tool-rail .note-rail-cell.skipped{background:var(--surface-inset);color:var(--muted);box-shadow:none}.home-widget :is(.note-chip-row,.segmented-row) button{min-height:38px;background:var(--surface);color:var(--ink-soft);font-weight:500;box-shadow:inset 0 0 0 1px var(--line)}.home-widget :is(.note-chip-row,.segmented-row) button.active{background:var(--ink);color:#fff;box-shadow:none}.home-widget .degree-pad button,.home-widget .phrase-readout span{box-shadow:none;font-weight:500}.home-widget .degree-pad button{transform:scale(1);transition:transform .15s ease-out,filter .15s ease-out}.home-widget .degree-pad button:hover{transform:scale(1);box-shadow:none}.home-widget .degree-pad button:is(.playing,:active){transform:scale(.9);box-shadow:none;transition-duration:0ms}.home-widget .degree-pad button:is(.playing,:active):not(:focus-visible){outline:none}.home-widget .degree-pad button:focus-visible{outline:2px solid var(--brand);outline-offset:4px}.home-widget :is(.chord-tone-card,.chord-build-path-item button){background:color-mix(in srgb,var(--note-color) 12%,var(--surface));color:var(--ink);box-shadow:none;border-color:color-mix(in srgb,var(--note-color) 35%,var(--line))}.home-widget .chord-build-ruler{box-shadow:none;border-color:var(--line)}.home-widget .chord-build-ruler button{background:var(--surface);font-weight:500}.home-widget .chord-build-ruler button.chord-tone{background:color-mix(in srgb,var(--note-color) 15%,var(--surface));box-shadow:inset 0 -4px 0 var(--note-color)}.home-widget .chord-build-ruler button.root{box-shadow:inset 0 0 0 2px var(--note-color),inset 0 -4px 0 var(--note-color)}.home-widget .chord-build-summary span,.home-widget .chord-build-connector{background:var(--surface);border-color:var(--line);font-weight:500}.home-widget :is(.chord-tone-card,.chord-build-path-item button,.chord-build-ruler button).playing{filter:none;outline:2px solid var(--note-color);outline-offset:2px;box-shadow:none}.home-widget :is(.diatonic-key-card,.diatonic-build-card){border-color:var(--line);background:var(--surface);box-shadow:none}.home-widget .diatonic-build-path>span.used{background:color-mix(in srgb,var(--note-color) 16%,var(--surface));box-shadow:inset 0 -4px 0 var(--note-color)}.home-widget .diatonic-build-path>span.skipped,.home-widget .diatonic-key-strip>span.skipped{background:var(--surface-inset);color:var(--muted);box-shadow:none}.home-widget .diatonic-result-card{background:#e7ece5;border-color:#ccd5c8}.home-widget .diatonic-result-card :is(span,p){color:#566951;font-weight:500}.home-widget .diatonic-choice-list>button{background:var(--surface);border-color:var(--line);box-shadow:none}.home-widget .diatonic-choice-list>button.active{background:var(--ink);color:#fff}.home-widget .wave-choice-card{padding:14px;background:var(--surface);border-color:var(--line);box-shadow:none}.home-widget .wave-choice-card.selected{background:var(--brand-tint);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}.home-widget :is(.wave-choice-card,.wave-choice-reveal).correct{border-color:#708474;background:#e7ece5;box-shadow:none}.home-widget :is(.wave-choice-card,.wave-choice-reveal).wrong{border-color:#a8624c;background:#f3e9e2;box-shadow:none}.home-widget .wave-choice-card.correct .wave-choice-card-status{background:#d4dfd0;color:#455a44}.home-widget .wave-choice-card.wrong .wave-choice-card-status{background:#ecdbcf;color:#8d503d}.home-widget :is(.choice-answer,.wave-choice-picked,.wave-choice-listen-note){font-size:13px;font-weight:400}.home-widget .wave-choice-card-head strong{font-size:13px;font-weight:500}.home-widget .wave-choice-widget{gap:16px}.home-widget .choice-question strong{font-size:18px;line-height:1.45;font-weight:500}.home-widget .wave-choice-card{grid-template-rows:auto auto 26px;gap:8px;padding:16px;min-height:0;transition:border-color .18s ease,background .18s ease}.home-widget .wave-choice-card:hover{transform:none}.home-widget .wave-choice-card.selected:not(.correct):not(.wrong){border-color:var(--brand);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand)}.home-widget .wave-choice-card-head strong{font-size:16px}.home-widget .wave-choice-card-head small{background:transparent;padding:0;color:var(--muted);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}.home-widget .wave-choice-card .wave-svg{height:auto;min-height:0}.home-widget .wave-choice-card-status{font-size:12px;font-weight:500;padding:5px 9px}.home-widget .wave-choice-actions .choice-answer{font-size:13px;line-height:1.5}.home-widget .wave-choice-check:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;box-shadow:none}.home-widget .wave-choice-reveal:is(.correct,.wrong){padding:22px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;gap:12px}.home-widget .wave-choice-result-title{font-size:18px;font-weight:550;line-height:1.4}.home-widget .wave-choice-reveal :is(.choice-answer,.wave-choice-picked){font-size:14px;line-height:1.7;margin:0}.home-widget .wave-choice-play-row{gap:10px;margin-top:6px}.home-widget .wave-choice-play-row .widget-play-button{min-height:44px;font-size:13px}@media(max-width:700px){.home-widget .lesson-widget-surface,.home-widget .lesson-widget.open-widget .lesson-widget-surface{padding:18px}.home-widget .pitch-volume-widget{grid-template-columns:1fr}.home-widget .pitch-volume-canvas{height:180px;min-height:180px}.home-widget .pitch-volume-pad-panel{grid-template-columns:1fr 1fr;align-items:start}.home-widget .pitch-volume-pad{grid-column:2;grid-row:1 / span 2;min-height:155px}.home-widget .pitch-volume-pad-panel>.widget-play-button{grid-column:1 / -1}.home-widget .wave-choice-grid{grid-template-columns:1fr}.home-widget .wave-choice-card{padding:14px 16px}.home-widget .wave-choice-actions{align-items:stretch;flex-direction:column;gap:12px}.home-widget .wave-choice-actions .wave-choice-check{width:100%}.home-widget .wave-choice-play-row{display:grid;grid-template-columns:1fr}.home-widget .wave-choice-play-row .widget-play-button{width:100%;justify-content:center}.home-widget .piano-keybed{height:155px}.home-widget .note-rail.key-map{overflow-x:auto;grid-template-columns:repeat(var(--rail-count, 13),minmax(32px,1fr))}.home-widget .chord-build-path-item{flex-basis:100%}.home-widget .diatonic-key-strip{gap:4px}.home-widget .diatonic-key-strip small{padding-inline:4px;font-size:9px}.home-widget .diatonic-build-path{gap:4px}.home-widget .diatonic-build-path>span{padding-inline:3px}.home-widget .diatonic-build-path small{padding-inline:4px;font-size:9px}}@media(max-width:700px){.pitch-volume-widget.pitch-volume-widget--stacked{gap:20px}.pitch-volume-widget.pitch-volume-widget--stacked .pitch-volume-pad-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:16px}.pitch-volume-widget.pitch-volume-widget--stacked .pad-readout{grid-column:1;grid-row:1}.pitch-volume-widget.pitch-volume-widget--stacked .pitch-volume-pad{grid-column:1;grid-row:2;height:220px;min-height:0}.pitch-volume-widget.pitch-volume-widget--stacked :is(.pitch-volume-instruction,.pitch-volume-sliders){grid-column:1;grid-row:3}.pitch-volume-widget.pitch-volume-widget--stacked .pitch-volume-pad-panel>.widget-play-button{grid-column:1;grid-row:4}}@media(prefers-reduced-motion:reduce){.home-widget *{transition:none!important}.home-widget .degree-pad button:is(.playing,:active){transform:none;filter:brightness(.8)}}.course-catalog{--cc-paper: var(--paper);--cc-ink: var(--ink);--cc-muted: var(--muted);--cc-line: var(--line);--cc-clay: var(--accent);--cc-blue: var(--brand);width:100%;padding:148px max(28px,calc((100% - 1184px)/2)) 72px;background:var(--cc-paper);color:var(--cc-ink);font-family:var(--font-body)}.course-catalog h1,.course-catalog h2,.course-catalog p,.course-catalog ol{margin:0}.course-catalog h1,.course-catalog h2{font-family:inherit;font-weight:600}.course-catalog a:focus-visible,.course-catalog button:focus-visible{outline:2px solid var(--cc-blue);outline-offset:5px}.course-catalog .cc-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.95fr);gap:clamp(48px,7vw,96px);align-items:center;padding-bottom:64px;border-bottom:1px solid var(--cc-line)}.course-catalog .cc-overline{color:var(--cc-muted);font-size:13px;font-weight:500;line-height:1.4}.course-catalog h1{margin-top:22px;font-size:clamp(48px,4.6vw,64px);line-height:1.04;letter-spacing:-.055em}.course-catalog .cc-description{max-width:525px;margin-top:26px;color:var(--cc-muted);font-size:16px;line-height:1.75}.course-catalog .cc-course-details{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:29px;font-size:12px;color:var(--cc-muted)}.course-catalog .cc-course-details span+span:before{content:"·";margin-right:18px;color:var(--line-strong)}.course-catalog .cc-music-overview{min-width:0;margin:0;padding:30px 30px 12px;border-radius:4px;background:var(--surface-soft)}.course-catalog .cc-music-overview figcaption{max-width:260px;margin-bottom:24px;font-size:26px;font-weight:550;line-height:1.25;letter-spacing:-.035em}.course-catalog .cc-music-layers{margin:0;padding:0;list-style:none}.course-catalog .cc-music-layer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:center;min-height:86px;padding:12px 0;border-top:1px solid var(--cc-line)}.course-catalog .cc-music-layer strong{display:block;font-size:14px;font-weight:600;line-height:1.4}.course-catalog .cc-music-layer p{max-width:140px;margin:5px 0 0;color:var(--cc-muted);font-size:11px;line-height:1.5}.course-catalog .cc-music-layer svg{display:block;width:100%;height:64px;overflow:visible}.course-catalog .cc-music-guide{fill:none;stroke:var(--cc-line);stroke-width:1}.course-catalog .cc-music-layer-melody svg{color:var(--cc-blue)}.course-catalog .cc-curriculum{display:grid;grid-template-columns:234px minmax(0,1fr);gap:72px;align-items:start;padding-top:48px}.course-catalog .cc-sidebar{position:sticky;top:110px;padding-bottom:24px}.course-catalog .cc-nav-label{margin-bottom:19px;font-size:12px;font-weight:500;color:var(--cc-muted)}.course-catalog .cc-chapter-nav ol{display:grid;gap:4px;padding:0;list-style:none}.course-catalog .cc-chapter-nav a{display:flex;align-items:baseline;gap:12px;margin-left:-14px;padding:9px 12px;border-left:2px solid transparent;color:var(--cc-muted);font-size:13px;line-height:1.4;transition:color .16s,border-color .16s,background .16s}.course-catalog .cc-chapter-nav a>span{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.course-catalog .cc-chapter-nav a:hover{color:var(--cc-ink);background:var(--surface-soft)}.course-catalog .cc-chapter-nav a.is-active{color:var(--cc-ink);border-left-color:var(--brand)}.course-catalog .cc-chapter-nav a.is-active>span{color:var(--brand)}.course-catalog .cc-sidebar-note,.course-catalog .cc-progress{margin-top:32px;padding-top:24px;border-top:1px solid var(--cc-line);color:var(--cc-muted);font-size:12px;line-height:1.7}.course-catalog .cc-progress-caption{display:flex;justify-content:space-between;gap:12px}.course-catalog .cc-progress-caption strong{color:var(--cc-ink);font-weight:500}.course-catalog .cc-progress-track{height:4px;margin:13px 0 10px;overflow:hidden;border-radius:4px;background:var(--surface-inset)}.course-catalog .cc-progress-track>span{display:block;height:100%;background:var(--cc-blue)}.course-catalog .cc-account-email{display:block;margin-top:10px;overflow-wrap:anywhere;color:var(--muted);font-size:11px}.course-catalog .cc-start{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:56px;padding:27px 30px;border-radius:4px;background:var(--surface-soft)}.course-catalog .cc-start h2{margin-top:8px;font-size:24px;line-height:1.3;letter-spacing:-.035em}.course-catalog .cc-start h2:first-child{margin-top:0}.course-catalog .cc-start-copy>p:last-child{margin-top:8px;max-width:420px;color:var(--cc-muted);font-size:12px;line-height:1.6}.course-catalog .cc-start-link{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:20px;min-height:44px;padding:11px 17px;border:1px solid var(--cc-ink);border-radius:4px;background:var(--cc-ink);color:var(--cc-paper);font-size:12px;font-weight:500;cursor:pointer;transition:background .16s,transform .16s}.course-catalog .cc-start-link:not(:disabled):hover{background:var(--ink-soft);transform:translateY(-1px)}.course-catalog .cc-start-link:disabled{border-color:var(--cc-line);background:var(--surface-inset);color:var(--cc-muted);cursor:default}.course-catalog .cc-chapter{margin-top:54px;scroll-margin-top:115px}.course-catalog .cc-chapter-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:24px}.course-catalog .cc-chapter-meta{display:flex;align-items:center;gap:16px;color:var(--cc-muted);font-size:11px;line-height:1.5}.course-catalog .cc-chapter-meta>span:first-child{color:var(--brand)}.course-catalog .cc-chapter-meta>span+span:before{content:"/";margin-right:16px;color:var(--line-strong)}.course-catalog .cc-chapter h2{margin-top:10px;font-size:30px;line-height:1.2;letter-spacing:-.04em}.course-catalog .cc-chapter-copy>p:last-child{margin-top:11px;max-width:550px;color:var(--cc-muted);font-size:13px;line-height:1.65}.course-catalog .cc-chapter-drawing{width:82px;height:64px;flex-shrink:0;color:var(--cc-blue)}.course-catalog .cc-drawing-1,.course-catalog .cc-drawing-4,.course-catalog .cc-drawing-7{color:var(--brand)}.course-catalog .cc-drawing-2,.course-catalog .cc-drawing-6,.course-catalog .cc-drawing-8{color:var(--cc-ink)}.course-catalog .cc-lesson-list{border-top:1px solid var(--cc-line)}.course-catalog .cc-lesson{display:grid;width:100%;grid-template-columns:36px minmax(0,1fr) auto 18px;align-items:center;gap:16px;min-height:64px;padding:15px 12px 15px 2px;border:0;border-bottom:1px solid var(--cc-line);background:transparent;text-align:left;cursor:pointer;transition:background .15s}.course-catalog .cc-lesson:not(:disabled):hover{background:var(--surface-soft)}.course-catalog .cc-lesson:disabled{cursor:default}.course-catalog .cc-lesson:disabled .cc-lesson-arrow{visibility:hidden}.course-catalog .cc-lesson-number{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.course-catalog .is-complete .cc-lesson-number{color:var(--cc-blue)}.course-catalog .cc-lesson-title{color:var(--cc-ink);font-size:14px;font-weight:450;line-height:1.5}.course-catalog .cc-lesson-status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;white-space:nowrap}.course-catalog .cc-free-label{border:1px solid var(--line-strong);border-radius:3px;padding:3px 8px;color:var(--cc-blue);line-height:1.3}.course-catalog .cc-lesson-arrow{color:var(--muted);transition:transform .16s}.course-catalog .cc-lesson:not(:disabled):hover .cc-lesson-arrow{transform:translate(3px)}.course-catalog .cc-endnote{margin-top:64px;padding:24px 0 0;color:var(--cc-muted);text-align:center;font-size:13px}@media(max-width:1100px){.course-catalog .cc-curriculum{grid-template-columns:200px minmax(0,1fr);gap:40px}.course-catalog .cc-start{align-items:flex-start;flex-direction:column;gap:18px}.course-catalog .cc-intro{gap:48px}}@media(max-width:800px){.course-catalog{padding:124px 24px 56px}.course-catalog .cc-intro{grid-template-columns:1fr;gap:36px;padding-bottom:40px}.course-catalog .cc-music-overview{width:100%;max-width:570px}.course-catalog .cc-description{max-width:570px}.course-catalog .cc-curriculum{display:block;padding-top:28px}.course-catalog .cc-sidebar{position:relative;top:auto;margin-bottom:30px;padding-bottom:0}.course-catalog .cc-chapter-nav ol{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}.course-catalog .cc-nav-label{margin-bottom:10px}.course-catalog .cc-chapter-nav li{flex:0 0 auto}.course-catalog .cc-chapter-nav a{gap:8px;margin:0;padding:11px 13px;border:1px solid var(--cc-line);border-radius:4px;font-size:12px;white-space:nowrap}.course-catalog .cc-chapter-nav a.is-active{border-color:var(--brand);background:var(--surface-soft)}.course-catalog .cc-sidebar-note{display:none}.course-catalog .cc-progress{max-width:420px;margin-top:18px;padding-top:18px}.course-catalog .cc-account-email{display:none}.course-catalog .cc-start{flex-direction:row;align-items:center;margin-bottom:44px}.course-catalog .cc-chapter{margin-top:44px}}@media(max-width:520px){.course-catalog{padding:112px 20px 40px}.course-catalog h1{margin-top:16px;font-size:46px}.course-catalog .cc-description{margin-top:22px;font-size:14px;line-height:1.75}.course-catalog .cc-course-details{gap:8px 12px;margin-top:22px;font-size:10px}.course-catalog .cc-course-details span+span:before{margin-right:12px}.course-catalog .cc-music-overview{padding:24px 24px 8px}.course-catalog .cc-music-overview figcaption{margin-bottom:18px;font-size:24px}.course-catalog .cc-music-layer{min-height:76px}.course-catalog .cc-start{flex-direction:column;align-items:flex-start;padding:24px}.course-catalog .cc-start-link{gap:20px}.course-catalog .cc-chapter-heading{gap:16px;align-items:flex-start;padding-bottom:20px}.course-catalog .cc-chapter h2{font-size:25px}.course-catalog .cc-chapter-copy>p:last-child{font-size:12px}.course-catalog .cc-chapter-drawing{width:55px;height:49px;margin-top:21px}.course-catalog .cc-lesson{grid-template-columns:25px minmax(0,1fr) auto 14px;gap:10px;min-height:64px;padding-right:0}.course-catalog .cc-lesson-title{font-size:13px}.course-catalog .cc-lesson-status{font-size:9px}.course-catalog .cc-lesson-status>span:not(.cc-free-label){display:none}.course-catalog .cc-free-label{padding:3px 5px}.course-catalog .cc-lesson-arrow{width:14px}}@media(prefers-reduced-motion:reduce){.course-catalog a,.course-catalog button,.course-catalog .cc-lesson-arrow{transition:none}}:root{--ink: #181a1f;--ink-soft: #383d45;--muted: #626974;--muted-soft: #757d89;--paper: #ffffff;--surface: #ffffff;--surface-soft: #f3f4f6;--surface-inset: #e9ecf0;--line: #dce0e5;--line-strong: #bfc6ce;--brand: #245bd7;--brand-2: #245bd7;--brand-3: #5265a3;--brand-deep: #1744ab;--brand-tint: #edf2ff;--accent: #d44228;--coral: #a8624c;--gold: #9b8958;--mint: #708474;--blue: var(--brand);--blue-2: var(--brand);--blue-3: #c4d5fb;--grad-brand: var(--brand);--grad-brand-soft: var(--brand-tint);--grad-text: var(--ink);--radius-xs: 6px;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: none;--shadow: none;--shadow-lg: none;--shadow-glow: none;--font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;--font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-kerning:normal;-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}body:before{display:none}#root{position:relative;z-index:1}body.modal-open{overflow:hidden}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0;text-wrap:pretty}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.018em}.app-header{position:fixed;inset:0 0 auto;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:14px clamp(18px,4vw,54px);border-bottom:1px solid rgba(16,19,26,.08);background:#fbfdffd1;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand,.nav-links,.header-actions{display:flex;align-items:center}.brand{gap:10px;min-width:0;width:max-content;font-size:1.02rem;font-weight:950}.brand-logo{width:184px;max-width:100%;height:auto;display:block;flex:0 0 auto}.nav-links{justify-content:center;gap:clamp(14px,3vw,30px);color:#515a68;font-size:.94rem;font-weight:850}.nav-links a:hover,.header-login:hover{color:var(--ink)}.header-actions{justify-self:end;gap:10px}.header-login,.header-cta,.primary-action,.secondary-action,.play-button,.big-play,.ratio-picker button,.auth-tabs button,.static-action{min-height:44px;border:1px solid transparent;border-radius:8px;cursor:pointer;font-weight:900;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.header-login{padding:0 10px;background:transparent;color:#566071}.header-cta,.primary-action,.play-button,.big-play,.static-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;background:var(--blue);color:#fff;box-shadow:0 14px 34px #0bb5d638}.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border-color:#10131a26;background:#ffffffc7;color:var(--ink)}.header-cta:hover,.primary-action:hover,.secondary-action:hover,.play-button:hover,.big-play:hover,.ratio-picker button:hover,.static-action:hover{transform:translateY(-1px)}.section-inner{width:min(1120px,calc(100dvw - 40px));margin-inline:auto}.eyebrow{margin:0 0 12px;color:#0bb5d6;font-size:.76rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;padding:108px clamp(20px,5vw,70px) 54px;border-bottom:1px solid rgba(16,19,26,.08)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(0deg,#fbfdfffa,#fbfdff00);pointer-events:none}.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.88}.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.96fr) minmax(500px,.82fr);gap:clamp(28px,4vw,64px);align-items:center;width:min(1320px,100%);margin-inline:auto}.hero-content{max-width:780px}h1{max-width:920px;margin:0;font-size:clamp(3.5rem,7.6vw,6.9rem);line-height:.92;letter-spacing:-.035em;font-weight:800}h2{margin:0;font-size:clamp(2.3rem,4.8vw,5rem);line-height:.96;letter-spacing:-.028em;font-weight:700}h3{margin:0;font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.06}.hero-copy{max-width:650px;margin:26px 0 0;color:#333b49;font-size:clamp(1.08rem,2vw,1.3rem)}.hero-actions,.completion-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.hero-actions{margin-top:32px}.hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.hero-proof span{min-height:34px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid rgba(31,155,240,.22);border-radius:999px;background:#ffffffb3;color:#303846;font-size:.88rem;font-weight:850}.tiny-piano{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;max-width:430px;margin-top:24px}.tiny-piano button{min-width:0;min-height:74px;border:1px solid rgba(16,19,26,.12);border-radius:7px;background:#ffffffe0;color:#202838;cursor:pointer;font-weight:950;transition:transform var(--piano-mini-key-press-duration) ease,background var(--piano-mini-key-press-duration) ease,color var(--piano-mini-key-press-duration) ease}.tiny-piano button:nth-child(2n){background:#ebf7ffeb}.tiny-piano button:hover,.tiny-piano button.is-hit,.tiny-piano button:active{background:var(--piano-playing);color:var(--piano-playing-ink);border-color:var(--piano-playing-line);transform:translateY(1px)}.hero-demo{position:relative;align-self:end;display:grid;gap:18px;padding:clamp(22px,3vw,30px);border:1px solid rgba(16,19,26,.1);border-radius:8px;background:linear-gradient(180deg,#ffffffe0,#ffffffb3),linear-gradient(135deg,#1f9bf02e,#f7c94b24);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.demo-topline{display:flex;justify-content:space-between;gap:14px;align-items:center}.demo-topline .eyebrow{margin:0}.demo-topline span,.range-control output{color:#0bb5d6;font-weight:950}.hero-demo h2{max-width:440px;font-size:clamp(2.05rem,4vw,3.8rem)}.mini-wave{display:grid;gap:9px;padding:12px 0}.mini-wave span{display:block;width:100%;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-2),var(--gold));transform-origin:left center;animation:wavePulse 1.6s ease-in-out infinite alternate}.mini-wave span:nth-child(2){width:84%;animation-delay:80ms}.mini-wave span:nth-child(3){width:62%;animation-delay:.16s}.mini-wave span:nth-child(4){width:38%;animation-delay:.24s}@keyframes wavePulse{to{transform:scaleX(.72);opacity:.62}}.microcopy{margin:0;color:var(--muted);font-size:.94rem}.ratio-picker,.auth-tabs{display:flex;flex-wrap:wrap;gap:8px}.ratio-picker button,.auth-tabs button{min-height:38px;padding:0 13px;border-color:#10131a1f;background:#ffffffc7}.ratio-picker button.active,.auth-tabs button.active{border-color:transparent;background:var(--ink);color:#fff}.hero-shaper-card{align-self:center;width:100%;gap:10px;padding:clamp(16px,1.8vw,20px);transform:translateY(-28px);background:linear-gradient(180deg,#fffffff0,#fffc),linear-gradient(135deg,#0bb5d61a,#18e0c81a 58%,#f7c94b1f)}.hero-shaper-copy{display:grid;gap:8px}.hero-shaper-copy .eyebrow{margin:0}.hero-shaper-card h2{max-width:480px;font-size:clamp(2rem,3.5vw,3.15rem)}.hero-shaper-copy p:not(.eyebrow){max-width:430px;margin:0;color:var(--muted);font-size:.98rem;line-height:1.48}.flow-section{padding:clamp(68px,10vw,120px) 0;background:#fff}.flow-section h2,.path-preview h2,.pricing-section h2{max-width:840px}.flow-list{display:grid;margin-top:clamp(28px,5vw,52px);border-top:1px solid var(--line)}.flow-list article{display:grid;grid-template-columns:86px minmax(0,1fr);gap:clamp(18px,4vw,40px);align-items:start;padding:clamp(22px,4vw,34px) 0;border-bottom:1px solid var(--line)}.flow-list span,.preview-story article>span,.path-row span,.lesson-number{color:#0bb5d6;font-size:.76rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.flow-list h3{font-size:clamp(1.3rem,2.4vw,2rem)}.flow-list p,.preview-story p,.pricing-copy,.price-card p,.path-row small,.catalog-unit p,.catalog-continue p{color:var(--muted)}.flow-list p{max-width:640px;margin:8px 0 0;font-size:1.04rem}.lesson-preview{padding:clamp(62px,9vw,118px) 0;background:#fff;border-block:1px solid rgba(16,19,26,.08)}.lesson-preview-inner{width:min(1080px,calc(100dvw - 40px));margin-inline:auto}.lesson-preview-topline{display:flex;justify-content:space-between;gap:28px;align-items:end;padding-bottom:clamp(26px,4vw,42px)}.complete-pill{min-height:36px;display:inline-flex;align-items:center;border-radius:999px;padding:0 13px;color:#334052;background:#10131a12;font-weight:900;white-space:nowrap}.complete-pill.done{background:#16805e1a;color:#16805e}.preview-story{display:grid;border-top:1px solid var(--line)}.preview-story article{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:clamp(18px,4vw,42px);align-items:center;padding:clamp(34px,6vw,62px) 0;border-bottom:1px solid var(--line)}.preview-story article>p,.preview-story article>h3{max-width:650px}.preview-story article>p{margin:12px 0 0;font-size:clamp(1rem,1.5vw,1.16rem)}.big-play{width:clamp(150px,18vw,210px);height:clamp(150px,18vw,210px);flex-direction:column;border-radius:50%;padding:22px;text-align:center}.preview-lab{grid-column:2 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.42fr);gap:18px;align-items:stretch;width:100%}.visual-frame{min-height:286px;overflow:hidden;border:1px solid rgba(16,19,26,.1);border-radius:8px;background:linear-gradient(rgba(16,19,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,19,26,.045) 1px,transparent 1px),#f8fbff;background-size:34px 34px}.visual-frame canvas{display:block;width:100%;height:100%;min-height:286px}.control-stack{display:grid;gap:16px;align-content:center;min-width:0;padding:18px;border:1px solid rgba(16,19,26,.1);border-radius:8px;background:#ffffffc7}.range-control{display:grid;gap:8px}.range-control span{display:flex;justify-content:space-between;gap:16px;color:#303846}input[type=range]{width:100%;accent-color:var(--blue)}.path-preview,.pricing-section{padding:clamp(72px,10vw,126px) 0;background:#fff}.path-preview-list{display:grid;margin:clamp(28px,5vw,52px) 0 26px;border-top:1px solid var(--line)}.path-row{position:relative;display:grid;grid-template-columns:132px minmax(0,.42fr) minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:baseline;padding:24px 34px 24px 0;border-bottom:1px solid var(--line)}.path-row strong{font-size:clamp(1.32rem,2.4vw,2.08rem);line-height:1.02}.path-row small{font-size:1rem}.path-row.current{color:#0bb5d6}.compact-action{width:max-content}.pricing-section{border-top:1px solid var(--line);background:#fbfdff}.pricing-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,360px);gap:clamp(32px,7vw,90px);align-items:start}.pricing-copy{max-width:650px;margin:22px 0 0;font-size:clamp(1.04rem,1.7vw,1.18rem)}.price-card{display:grid;gap:14px;padding:24px;border:1px solid rgba(16,19,26,.1);border-radius:8px;background:#ffffffdb;box-shadow:var(--shadow)}.price-label{margin:0;color:#0bb5d6;font-size:.78rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.price{margin:0;color:var(--ink);font-size:4.3rem;font-weight:950;line-height:.92}.price-card p:not(.price-label):not(.price){margin:0}.course-page{min-height:100vh;background:linear-gradient(180deg,#f8fbff,#fff 38%,#f6f9fc)}.catalog-hero{padding:clamp(96px,11vw,128px) clamp(20px,6vw,88px) clamp(34px,5vw,58px)}.catalog-hero-inner{max-width:1080px;margin-inline:auto}.catalog-title-block{max-width:820px}.catalog-hero h1{max-width:720px;font-size:clamp(2.4rem,5vw,4.8rem);line-height:.96}.catalog-hero p{max-width:680px;margin:18px 0 0;color:#454b58;font-size:clamp(1rem,1.45vw,1.16rem);line-height:1.55}.catalog-account{display:grid;gap:16px;max-width:700px;margin-top:clamp(26px,4vw,38px);padding:24px 0 0;border-top:1px solid rgba(17,19,26,.13)}.catalog-account-topline{display:flex;align-items:baseline;justify-content:space-between;gap:18px;color:#5a6473;font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.catalog-account-topline strong{color:var(--ink);font-size:clamp(2rem,4vw,3rem);letter-spacing:0;line-height:1;text-transform:none}.catalog-progress-bar{height:8px;overflow:hidden;border-radius:999px;background:#11131a1a}.catalog-progress-bar span{display:block;min-width:8px;max-width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0bb5d6,#25a9ff)}.catalog-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0}.catalog-stats div{display:grid;gap:4px}.catalog-stats dt{color:#667080;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.catalog-stats dd{margin:0;color:var(--ink);font-size:1.35rem;font-weight:950;line-height:1}.catalog-account p{margin:0;color:#5a6473;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}.catalog-shell{width:min(1120px,calc(100% - clamp(40px,10vw,136px)));margin-inline:auto;padding:0 0 clamp(72px,10vw,110px)}.catalog-continue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;margin:0 0 clamp(40px,6vw,70px);padding:clamp(22px,4vw,34px) 0;border-bottom:1px solid rgba(17,19,26,.11);border-top:1px solid rgba(17,19,26,.11)}.catalog-continue h2{font-size:clamp(1.8rem,3.3vw,3.1rem);line-height:1}.catalog-continue p:not(.eyebrow){max-width:650px;margin:10px 0 0;font-size:1rem;line-height:1.56}.catalog-units{display:grid;gap:clamp(34px,5vw,58px)}.catalog-unit{scroll-margin-top:90px}.catalog-unit-header{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:start;margin:0;padding:0 0 18px;border-bottom:1px solid rgba(17,19,26,.11)}.catalog-unit-meta{display:flex;flex-wrap:wrap;gap:8px 14px;padding-top:5px;color:#657083;font-size:.76rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.catalog-unit-meta span:first-child{color:#0bb5d6}.catalog-unit h2{font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1}.catalog-unit p{max-width:760px;margin:8px 0 0;font-size:.98rem;line-height:1.55}.catalog-grid{display:grid}.catalog-card{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr) minmax(96px,auto);gap:clamp(16px,3vw,30px);align-items:center;min-height:76px;padding:18px 0;border-bottom:1px solid rgba(17,19,26,.11);color:var(--ink);transition:color .16s ease,border-color .16s ease,background-color .16s ease}.catalog-card:hover{background:#0bb5d609;border-color:#2a7cc152;color:#075bb8}.lesson-check{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#16805e1a;color:#16805e}.catalog-card.locked{color:#11131a94}.catalog-card strong{min-width:0;font-size:clamp(1.18rem,1.55vw,1.55rem);line-height:1.08}.lesson-status{justify-self:end;display:inline-flex;align-items:center;min-width:86px;justify-content:center;padding:7px 10px;border:1px solid rgba(17,19,26,.12);border-radius:999px;color:#596475;font-size:.74rem;font-weight:950;letter-spacing:.07em;line-height:1;text-transform:uppercase;white-space:nowrap}.catalog-card.locked .lesson-status{border-color:#11131a1a;background:#11131a0a;color:#11131a7a}.auth-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}.auth-scrim{position:absolute;inset:0;border:0;background:#0b101b6b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-panel{position:relative;z-index:2;width:min(480px,100%);padding:clamp(22px,4vw,32px);border:1px solid rgba(16,19,26,.12);border-radius:8px;background:#fff;box-shadow:0 30px 90px #10131a38}.auth-panel h2{font-size:clamp(2rem,5vw,3.35rem)}.auth-intro{margin:12px 0 18px;color:var(--muted)}.auth-close{position:absolute;top:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(16,19,26,.12);border-radius:8px;background:#fff;cursor:pointer}.auth-form{display:grid;gap:14px;margin-top:18px}.auth-form label{display:grid;gap:6px;color:#303846;font-weight:850}.auth-form input{width:100%;min-height:48px;border:1px solid rgba(16,19,26,.16);border-radius:8px;padding:0 13px;background:#fbfdff;color:var(--ink);outline:0}.auth-form input:focus{border-color:#0bb5d6b3;box-shadow:0 0 0 4px #0bb5d61a}.auth-message{min-height:22px;margin:0;color:#0bb5d6;font-weight:850}.not-found{min-height:100svh;display:grid;align-content:center;justify-items:start;gap:18px;width:min(760px,calc(100dvw - 40px));margin-inline:auto;padding-top:80px}.not-found h1{font-size:clamp(2.5rem,7vw,5.2rem)}.not-found p{max-width:560px;color:var(--muted);font-size:1.1rem}.lesson-page{min-height:100svh;background:#fff}.lesson-page-hero{overflow-x:clip;padding:clamp(104px,11vw,142px) clamp(20px,6vw,80px) clamp(42px,6vw,66px);border-bottom:1px solid var(--line)}.lesson-page-hero-inner,.lesson-article,.lesson-end-nav{width:min(1160px,calc(100dvw - 40px));margin-inline:auto}.lesson-page-hero-inner{position:relative}.lesson-back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:34px;color:#4d5868;font-weight:900}.lesson-page-hero h1{max-width:920px;font-size:clamp(3rem,7vw,5.8rem)}.lesson-deck{max-width:760px;margin:22px 0 0;color:#252b37;font-size:clamp(1.18rem,2.3vw,1.55rem);font-weight:850;line-height:1.32}.lesson-summary{max-width:760px;margin:14px 0 0;color:var(--muted);font-size:clamp(1.02rem,1.7vw,1.18rem)}.lesson-hero-actions{position:absolute;top:0;right:0;display:flex}.complete-pill.as-button{gap:8px;border:0;cursor:pointer}.complete-pill.as-button:disabled{cursor:wait;opacity:.7}.lesson-progress-error{max-width:620px;margin:12px 0 0;color:#ad3b3b;font-size:.95rem;font-weight:800}.lesson-article{padding:clamp(8px,2vw,24px) 0 clamp(40px,7vw,82px)}.lesson-block{padding:clamp(34px,5.5vw,68px) 0;border-bottom:1px solid rgba(17,19,26,.1)}.lesson-copy-block,.lesson-list-block{width:min(760px,100%);margin-inline:auto}.lesson-copy-block h2,.lesson-pair-copy h2,.lesson-list-block h2{max-width:760px;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1}.lesson-copy-block p:not(.eyebrow),.lesson-pair-copy p:not(.eyebrow),.lesson-list-block p{margin:16px 0 0;color:#434b59;font-size:clamp(1rem,1.45vw,1.13rem);line-height:1.6}.lesson-list-block ul{display:grid;gap:13px;margin:20px 0 0;padding-left:1.25rem;color:#303744;font-size:clamp(1rem,1.45vw,1.13rem);line-height:1.55}.lesson-list-block li::marker{color:var(--blue)}.lesson-list-block li ul{gap:8px;margin-top:8px;font-size:.96em}.lesson-quote-block{width:min(820px,100%);margin-inline:auto}.lesson-quote-block blockquote{margin:0;padding:clamp(22px,4vw,36px);border-left:5px solid var(--gold);border-radius:8px;background:linear-gradient(90deg,#f7c94b24,#ffffffe0);box-shadow:0 18px 48px #10131a12}.lesson-quote-block p{margin:0;color:#2b313c;font-size:clamp(1.08rem,1.9vw,1.38rem);font-weight:780;line-height:1.48}.lesson-quote-block cite{display:block;margin-top:16px;color:var(--muted);font-size:.9rem;font-style:normal;font-weight:850}.lesson-pair-block{display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr);gap:clamp(24px,5vw,58px);align-items:start}.lesson-pair-copy{max-width:380px}.definition-block-wrap{display:grid;place-items:center}.definition-card{width:min(700px,100%);padding:clamp(22px,4vw,34px);border:1px solid rgba(16,19,26,.1);border-radius:8px;background:#ffffffe6;box-shadow:0 20px 60px #10131a12}.definition-card div{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline}.definition-card h2{font-size:clamp(1.5rem,3vw,2.2rem)}.definition-card span{color:#778190;font-weight:850}.definition-card p{margin:12px 0 0;color:#252c39;font-size:1.08rem}.definition-card small{display:block;margin-top:16px;color:var(--muted);font-size:.96rem;line-height:1.5}.lesson-widget{display:grid;gap:12px;min-width:0;scroll-margin-top:88px}.lesson-widget.standalone-widget{width:min(940px,100%);margin-inline:auto}.lesson-widget.inline-widget{width:100%}.lesson-widget.open-widget.standalone-widget{width:min(1120px,100%)}.lesson-widget-chromaticRainbow.open-widget.standalone-widget,.lesson-widget-piano.open-widget.standalone-widget,.lesson-widget-pianoCompare.open-widget.standalone-widget{width:min(760px,100%)}.lesson-widget-chromaticRainbow.open-widget.standalone-widget:has(.chromatic-map.scrollable){width:min(1120px,100%)}.lesson-widget-copy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:baseline;padding:0 2px}.lesson-widget-copy span{color:#0bb5d6;font-size:.72rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.lesson-widget-copy h3{margin:0;font-size:clamp(1.02rem,1.55vw,1.28rem);line-height:1.18}.lesson-widget-copy.no-eyebrow h3{grid-column:1 / -1}.lesson-widget-copy p{grid-column:1 / -1;max-width:760px;margin:0;color:var(--muted);font-size:.94rem;line-height:1.48}.lesson-widget-surface{min-width:0;overflow:hidden;padding:clamp(16px,2.4vw,24px);border:1px solid rgba(16,19,26,.1);border-radius:8px;background:linear-gradient(rgba(16,19,26,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(16,19,26,.026) 1px,transparent 1px),#ffffffdb;background-size:34px 34px;box-shadow:0 18px 52px #0bb5d612}.lesson-widget.open-widget .lesson-widget-surface{overflow:visible;padding:clamp(8px,1.4vw,14px) 0;border-color:transparent;background:transparent;box-shadow:none}.bar-chart-widget{display:grid;gap:14px}.bar-chart-axis{margin:0;color:#667182;font-size:.82rem;font-weight:900}.bar-chart-plot{min-width:0;display:grid;grid-template-columns:repeat(var(--bar-count, 7),minmax(46px,1fr));gap:clamp(8px,1.7vw,16px);align-items:end;min-height:clamp(230px,36vw,310px);border-left:1px solid rgba(16,19,26,.12);border-bottom:1px solid rgba(16,19,26,.12);padding:16px 4px 4px 12px}.bar-chart-item{min-width:0;display:grid;grid-template-rows:1fr auto auto;gap:8px;align-items:end;text-align:center}.bar-chart-track{position:relative;height:clamp(164px,28vw,244px);display:flex;align-items:flex-end;overflow:hidden;border-radius:8px 8px 3px 3px;background:#10131a0d;box-shadow:inset 0 0 0 1px #10131a0d}.bar-chart-bar{width:100%;height:var(--bar-height, 50%);border-radius:inherit;background:linear-gradient(180deg,#fff3,#10131a14),var(--note-color);box-shadow:0 -10px 22px color-mix(in srgb,var(--note-color) 34%,transparent)}.bar-chart-item.emphasized .bar-chart-bar{box-shadow:0 -12px 28px color-mix(in srgb,var(--note-color) 46%,transparent),inset 0 0 0 2px #ffffff61}.bar-chart-item strong{color:#252c39;font-size:1rem;font-weight:950}.bar-chart-item span{color:#667182;font-size:.74rem;font-weight:850}.lesson-copy-block:has(+.lesson-block>.lesson-widget.open-widget){padding-bottom:clamp(10px,1.8vw,18px);border-bottom:0}.lesson-block:has(>.lesson-widget.open-widget){padding-top:0}.lesson-action-block{display:flex;justify-content:center;padding-top:0}.lesson-widget-harmonyQuiz,.lesson-widget-scaleQuiz,.lesson-widget-intervalQuiz,.lesson-widget-chordQuiz,.lesson-widget-diatonicChordQuiz,.lesson-widget-consonanceQuiz{width:100%}.lesson-widget-harmonyQuiz .lesson-widget-surface,.lesson-widget-scaleQuiz .lesson-widget-surface,.lesson-widget-intervalQuiz .lesson-widget-surface,.lesson-widget-chordQuiz .lesson-widget-surface,.lesson-widget-diatonicChordQuiz .lesson-widget-surface,.lesson-widget-consonanceQuiz .lesson-widget-surface{padding:0;border-color:transparent;background:#222a36;box-shadow:0 24px 80px #10131a3d}.widget-play-button,.widget-ghost-button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;cursor:pointer;font-size:.94rem;font-weight:850;line-height:1}.widget-play-button{border:1px solid rgba(42,124,193,.24);padding:0 15px;background:#ffffffdb;color:#1f4f72;box-shadow:0 8px 20px #10131a0f;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease}.widget-play-button svg{color:#2a7cc1;fill:currentColor}.widget-play-button:hover{border-color:#2a7cc15c;background:#eef7fc;color:#174463;box-shadow:0 10px 24px #2a7cc11a;transform:translateY(-1px)}.widget-play-button:focus-visible{outline:0;box-shadow:0 0 0 4px #2a7cc124,0 10px 24px #2a7cc11a}.compare-play-button{border:1px solid color-mix(in srgb,var(--button-accent, var(--blue)) 58%,transparent);border-left-width:8px;background:#fff;color:var(--ink);box-shadow:0 10px 22px #10131a14}.widget-play-button:disabled{cursor:not-allowed;opacity:.52;transform:none}.widget-ghost-button{border:1px solid rgba(16,19,26,.13);padding:0 14px;background:#ffffffdb}.widget-button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.wave-widget,.ratio-wave-view,.ratio-explorer-widget,.consonance-slider-widget,.piano-widget,.fretboard-widget,.melody-grid-widget,.note-row-widget,.pentatonic-pad-widget,.chromatic-widget,.piano-compare-widget,.embedded-media-widget,.note-naming-tool-widget,.relative-key-table-widget{display:grid;gap:18px}.wave-figure{display:contents}.wave-caption{display:none}.wave-svg{display:block;width:100%;min-height:220px;overflow:visible}.wave-svg.compact{min-height:120px}.consonance-slider-widget{justify-items:center;width:100%;gap:clamp(14px,2.4vw,22px)}.consonance-slider-widget .wave-svg{width:min(1180px,calc(100dvw - 24px));min-height:clamp(150px,20vw,240px)}.consonance-spectrum{width:min(100%,640px);display:grid;gap:12px}.consonance-spectrum-labels{display:flex;justify-content:space-between;gap:18px;color:#3a4453;font-size:.78rem;font-weight:950}.consonance-track-wrap{position:relative;min-height:50px;padding:18px 0 16px}.consonance-track-wrap input,.consonance-track-static{width:100%;height:4px;display:block;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--gold),var(--coral))}.consonance-track-wrap input{accent-color:var(--coral);cursor:pointer}.consonance-track-static{margin-top:9px}.consonance-marker{position:absolute;left:var(--marker-left);bottom:0;display:grid;justify-items:center;gap:3px;min-width:92px;border:0;padding:0;background:transparent;color:#273142;cursor:pointer;font-weight:950;line-height:1.05;text-align:center;transform:translate(-50%)}.consonance-marker:before{content:"";width:0;height:0;border-inline:6px solid transparent;border-bottom:9px solid var(--marker-color)}.consonance-marker span{max-width:132px;border-radius:999px;padding:4px 8px;background:#ffffffdb;box-shadow:0 8px 18px #10131a14}.consonance-marker.active span{background:var(--ink);color:#fff}.consonance-slider-widget.hide-track-labels .consonance-marker{min-width:18px}.consonance-slider-widget.hide-track-labels .consonance-marker span{display:none}.consonance-marker:disabled{cursor:default}.consonance-marker-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.consonance-marker-buttons button{display:grid;gap:2px;min-height:44px;border:1px solid rgba(16,19,26,.12);border-radius:8px;padding:7px 12px;background:#ffffffe6;color:var(--ink);cursor:pointer;font-weight:950}.consonance-marker-buttons button.active{border-color:transparent;background:var(--ink);color:#fff}.consonance-marker-buttons small{color:inherit;opacity:.72;font-weight:900}.consonance-readout{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-weight:900}.consonance-readout strong,.consonance-readout span,.consonance-readout small{border-radius:999px;padding:6px 10px;background:#ffffffe0;box-shadow:0 8px 18px #10131a0f}.consonance-readout strong{color:var(--ink)}.lesson-widget-chromaticRainbow.open-widget .widget-play-button,.lesson-widget-consonanceSlider.open-widget .widget-play-button,.lesson-widget-piano.open-widget .widget-play-button,.lesson-widget-ratioWaves.open-widget .widget-play-button,.lesson-widget-wave.open-widget .widget-play-button{justify-self:center;min-width:112px;max-width:220px}.wave-axis{stroke:#10131a1f;stroke-width:2}.wave-origin{stroke:#0bb5d647;stroke-width:3}.wave-origin-dot{fill:var(--blue)}.wave-label{fill:#495466;font-size:15px;font-weight:900}.feedback-widget{display:grid;gap:14px}.feedback-form-widget{gap:18px}.feedback-prompt-grid{display:flex;flex-wrap:wrap;gap:8px}.feedback-prompt-grid button{min-height:40px;border:1px solid rgba(16,19,26,.12);border-radius:999px;padding:0 14px;background:#fff;cursor:pointer;font-weight:900}.feedback-prompt-grid button.active{border-color:transparent;background:var(--ink);color:#fff}.feedback-widget textarea{min-height:126px;resize:vertical;border:1px solid rgba(16,19,26,.14);border-radius:8px;padding:14px;background:#ffffffeb;color:var(--ink);outline:0}.feedback-widget textarea:focus{border-color:#0bb5d6b3;box-shadow:0 0 0 4px #0bb5d61a}.feedback-field-list{display:grid;gap:14px}.feedback-field{display:grid;gap:8px}.feedback-field span{color:#2b3340;font-weight:900}.feedback-field textarea{min-height:92px}.feedback-widget p,.quiz-actions p{margin:0;color:var(--muted);font-weight:850}.harmony-quiz-widget.consonance-quiz-widget{position:relative;min-height:clamp(600px,76vh,760px);align-content:start;overflow:hidden;background:linear-gradient(150deg,#222a36eb,#10131af0),linear-gradient(90deg,#18e0c829,#f7c94b24 54%,#ef6f6129)}.harmony-quiz-widget.consonance-quiz-widget.consonance-quiz-ready{min-height:clamp(560px,74vh,720px);align-content:center;place-items:center}.consonance-quiz-ready-panel{display:grid;justify-items:center;gap:20px;text-align:center}.consonance-quiz-ready-panel h2{margin:0;color:#fff;font-size:clamp(2rem,4vw,3.5rem)}.consonance-ear-stage{display:grid;justify-items:center;gap:clamp(18px,3vw,28px);padding:clamp(12px,3vw,24px) 0 0}.consonance-ear-question{width:min(720px,100%);padding:10px 0 0;text-align:center}.consonance-ear-question h2{margin:0;font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.02}.consonance-ear-question p{max-width:520px;margin-inline:auto;color:#ffffffad}.consonance-ear-play{display:grid;place-items:center;gap:8px;width:clamp(132px,19vw,184px);aspect-ratio:1;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:linear-gradient(180deg,#fff,#dfe7f3);color:var(--ink);cursor:pointer;font-weight:950;box-shadow:0 24px 70px #00000047,inset 0 -10px 22px #10131a1f;transition:transform .16s ease,box-shadow .16s ease}.consonance-ear-play:hover,.consonance-ear-play.playing{transform:translateY(-2px) scale(1.02);box-shadow:0 28px 82px #00000057,0 0 0 10px #18e0c81f,inset 0 -10px 22px #10131a1f}.consonance-ear-play span{font-size:.78rem;letter-spacing:0;text-transform:uppercase}.consonance-choice-row{width:min(620px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.consonance-choice{min-height:66px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffffeb;color:var(--ink);cursor:pointer;font-size:1.02rem;font-weight:950;box-shadow:0 14px 30px #00000029}.consonance-choice:disabled:not(.correct):not(.wrong){cursor:not-allowed;opacity:.56}.consonance-choice.correct{border-color:transparent;background:#00d6b4;color:#081f19}.consonance-choice.wrong{border-color:transparent;background:#ef6f61;color:#fff}.consonance-choice.selected:not(.correct):not(.wrong){outline:3px solid rgba(11,181,214,.48)}.consonance-answer-reveal{width:min(680px,100%);display:grid;gap:10px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:14px;background:#ffffffe6;color:var(--ink)}.consonance-answer-chipline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.consonance-answer-chipline strong,.consonance-answer-chipline span,.consonance-answer-chipline small{border-radius:999px;padding:6px 10px;background:#10131a0f;font-weight:950}.consonance-answer-chipline strong{background:var(--ink);color:#fff}.consonance-answer-reveal .wave-svg{min-height:112px}.consonance-quiz-widget .quiz-actions p{color:#ffffffc2}.consonance-quiz-widget .consonance-feedback-actions{width:min(680px,100%);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:14px;background:#10131a57}.consonance-quiz-widget .consonance-feedback-actions p{flex:1 1 280px}.consonance-idle-actions.answered{display:none}.pitch-volume-widget{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.34fr);gap:16px}.pitch-volume-canvas{position:relative;min-height:320px;overflow:hidden;border:1px solid rgba(16,19,26,.08);border-radius:8px;background:#f8fbffd1;cursor:crosshair;touch-action:none}.pitch-volume-canvas canvas{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0}.axis-label{position:absolute;color:#10131a85;font-size:.72rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.axis-label.top{top:12px;left:14px}.axis-label.bottom{bottom:12px;left:14px}.axis-label.left{left:14px;top:50%;transform:translateY(-50%)}.axis-label.right{right:14px;top:50%;transform:translateY(-50%)}.widget-controls{background:#ffffffdb}.widget-ratio-picker button{display:grid;gap:2px;min-height:54px;align-content:center}.widget-ratio-picker small{color:inherit;opacity:.72;font-size:.78rem}.fretboard{display:grid;gap:8px;overflow-x:auto;padding-bottom:4px}.fret-string{display:grid;grid-template-columns:34px repeat(7,minmax(52px,1fr));align-items:center}.fret-string>span{color:#5d6675;font-weight:950}.fret-string button{min-height:44px;border:0;border-top:2px solid rgba(16,19,26,.18);background:transparent;color:transparent;cursor:pointer}.fret-string button.has-note{display:grid;place-items:center;width:38px;height:38px;min-height:38px;justify-self:center;border:0;border-radius:50%;background:var(--blue);color:#fff;font-size:.8rem;font-weight:950}.melody-grid{display:grid;gap:8px}.melody-row{display:grid;grid-template-columns:34px repeat(var(--columns),minmax(30px,1fr));gap:7px;align-items:center}.melody-row span{color:#5d6675;font-weight:950}.melody-row button{aspect-ratio:1;min-height:34px;border:1px solid rgba(16,19,26,.1);border-radius:7px;background:#ffffffdb;cursor:pointer}.melody-row button.active{border-color:transparent;background:linear-gradient(135deg,var(--blue),var(--mint));box-shadow:0 10px 22px #0bb5d629}.melody-grid-sequencer-widget{justify-items:center}.melody-grid-scroll{width:100%;display:grid;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 8px}.melody-grid-scroll.chords-only{justify-items:center}.melody-grid-beats{display:grid;grid-template-columns:34px repeat(var(--columns),minmax(24px,1fr));gap:4px;width:100%;min-width:min(680px,calc(100vw - 56px))}.melody-grid-sequencer-widget.compact .melody-grid-beats{min-width:min(640px,calc(100vw - 56px))}.melody-grid-beats span,.melody-grid-beats i{min-height:18px;display:grid;place-items:center;border-left:1px solid rgba(16,19,26,.05);color:#10131a7a;font-size:.66rem;font-style:normal;font-weight:950}.melody-grid-beats i.beat{border-left-color:#10131a1f}.melody-sequencer{position:relative;display:grid;grid-template-columns:34px repeat(var(--columns),minmax(24px,1fr));grid-template-rows:repeat(var(--rows),minmax(21px,1fr));gap:4px;width:100%;min-width:min(680px,calc(100vw - 56px))}.melody-grid-sequencer-widget.compact .melody-sequencer{grid-template-rows:repeat(var(--rows),minmax(15px,1fr));min-width:min(640px,calc(100vw - 56px))}.melody-grid-row-label{display:grid;place-items:center;color:#5d6675;font-size:.78rem;font-weight:950}.melody-grid-sequencer-widget.compact .melody-grid-row-label{font-size:.68rem}.melody-grid-cell{min-height:21px;border-radius:4px;background:#10131a11;box-shadow:inset 0 0 0 1px #ffffffb8}.melody-grid-sequencer-widget.compact .melody-grid-cell,.melody-grid-sequencer-widget.compact .melody-step{min-height:15px}.melody-chord-tone,.melody-step{border-radius:5px;background:color-mix(in srgb,var(--note-color) 22%,transparent)}.melody-chord-tone{z-index:1;opacity:.72;transition:opacity .14s ease,box-shadow .14s ease}.melody-chord-tone.playing{opacity:1;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--note-color) 48%,#fff)}.melody-step{z-index:2;min-width:0;min-height:21px;border:0;padding:0 8px;background:color-mix(in srgb,var(--note-color) 82%,#fff);color:#fff;cursor:pointer;font-size:.74rem;font-weight:950;line-height:1;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.26);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.melody-step:hover,.melody-step.playing{filter:saturate(1.12) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 0 0 3px #ffffffb8,0 10px 24px #10131a1f}.melody-chord-lane{display:grid;grid-template-columns:repeat(var(--columns),minmax(24px,1fr));gap:4px;width:calc(100% - 38px);min-width:min(646px,calc(100vw - 90px));margin-left:38px}.melody-chord-lane.solo{width:min(100%,680px);min-width:min(620px,calc(100vw - 56px));margin-left:0}.melody-chord-lane button{min-width:0;min-height:58px;display:grid;align-content:center;justify-items:center;gap:3px;border:0;border-radius:6px;padding:9px 6px;background:color-mix(in srgb,var(--note-color) 78%,#fff);color:#fff;cursor:pointer;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.24);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.melody-grid-sequencer-widget.compact .melody-chord-lane button{min-height:50px;padding-block:8px}.melody-chord-lane button:hover,.melody-chord-lane button.playing{filter:saturate(1.12) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 0 0 4px #ffffff9e,0 14px 30px #10131a1f}.melody-chord-lane strong{font-size:clamp(1rem,1.8vw,1.22rem);font-weight:950;line-height:1}.melody-chord-lane span{overflow:hidden;max-width:100%;font-size:.76rem;font-weight:950;line-height:1;text-overflow:ellipsis;white-space:nowrap}.note-row-widget{min-width:0;display:grid;gap:12px;justify-items:center}.note-row-toolbar{width:100%;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}.note-row-toolbar.compact{justify-content:center}.note-row-toolbar-copy{min-width:min(100%,260px);display:flex;flex:1 1 320px;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end;color:var(--muted);font-size:.84rem;font-weight:850;line-height:1.35;text-align:right}.note-row-toolbar-copy span{min-width:min(100%,220px)}.note-row-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.note-row-badges em{min-height:28px;display:inline-flex;align-items:center;border:1px solid rgba(11,181,214,.14);border-radius:999px;padding:0 10px;background:#0bb5d612;color:#195ea9;font-size:.72rem;font-style:normal;font-weight:950;white-space:nowrap}.note-row-linked-melody{width:100%;display:grid;gap:12px;border-top:1px solid rgba(16,19,26,.09);padding-top:14px}.note-row-linked-melody .melody-grid-scroll{overflow-x:visible;padding-bottom:0}.note-row-linked-melody .melody-grid-beats,.note-row-linked-melody .melody-sequencer{width:100%;min-width:0}.note-row-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 10px;box-shadow:inset -18px 0 18px -18px #10131a3d;scrollbar-color:rgba(11,181,214,.42) transparent;scrollbar-width:thin}.note-row-scroll::-webkit-scrollbar{height:8px}.note-row-scroll::-webkit-scrollbar-track{background:transparent}.note-row-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(90deg,#0bb5d647,#18e0c86b)}.note-row-track{position:relative;display:grid;gap:8px;min-width:calc(var(--note-row-units, 8) * 40px)}.note-row-track.with-gutter{min-width:calc(var(--note-row-gutter, 82px) + var(--note-row-units, 8) * 40px)}.note-row-beats,.note-duration-row{display:grid;grid-template-columns:repeat(var(--note-row-units, 8),minmax(36px,1fr));gap:4px}.note-row-beats.with-gutter,.note-duration-row.with-gutter{grid-template-columns:var(--note-row-gutter, 82px) repeat(var(--note-row-units, 8),minmax(36px,1fr))}.note-row-beats span{min-height:18px;display:grid;place-items:center;border-left:1px solid rgba(16,19,26,.12);color:#10131a7a;font-size:.66rem;font-weight:950}.note-row-beats span:not(.beat){border-left-color:#10131a0d}.note-row-beats .measure-start{border-left-color:#10131a70;color:#1f2633}.note-row-beats .note-row-beat-spacer{border-left:0}.note-row-label{position:relative;z-index:1;display:grid;align-items:center;padding-right:8px;color:var(--muted);font-size:.76rem;font-weight:950}.note-row-label.spacer{padding-right:0}.note-duration-row{position:relative;isolation:isolate}.note-row-measure-bars{position:absolute;z-index:0;inset:-5px 0;display:grid;grid-template-columns:inherit;gap:inherit;pointer-events:none}.note-row-measure-bars span{align-self:stretch;border-left:2px solid rgba(16,19,26,.48);box-shadow:1px 0 #ffffffb3}.duration-tile{position:relative;z-index:1;grid-column:span var(--duration-units, 2);min-width:0;min-height:clamp(58px,8vw,76px);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--duration-color) 36%,rgba(16,19,26,.12));border-radius:7px;padding:0;background:linear-gradient(180deg,#ffffff57,#ffffff14),color-mix(in srgb,var(--duration-color) 54%,#fff);color:#1f2633;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff80,0 10px 22px #10131a12;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.duration-tile:hover,.duration-tile.playing{filter:saturate(1.08) brightness(1.02);transform:translateY(-1px);box-shadow:inset 0 0 0 3px #ffffffad,0 16px 32px #10131a1f}.duration-note-symbol{position:relative;width:38px;height:42px;display:block}.duration-note-symbol:before{content:"";position:absolute;left:4px;bottom:5px;width:25px;height:16px;border:3px solid #26303f;border-radius:50%;transform:rotate(-13deg)}.duration-symbol-quarter:before,.duration-symbol-eighth:before{background:#26303f}.duration-symbol-half:after,.duration-symbol-quarter:after,.duration-symbol-eighth:after{content:"";position:absolute;left:27px;top:1px;width:4px;height:33px;border-radius:999px;background:#26303f}.duration-symbol-eighth i{position:absolute;left:28px;top:2px;width:6px;height:12px;border-top:3px solid #26303f;border-right:3px solid #26303f;border-radius:0 13px 0 0;transform:skewY(18deg)}.time-signature-widget{display:grid;gap:18px}.time-signature-guide{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,3vw,28px);align-items:center;padding:clamp(14px,2.5vw,22px);border:1px solid rgba(16,19,26,.08);border-radius:8px;background:linear-gradient(90deg,rgba(11,181,214,.08),transparent 38%,transparent 62%,rgba(24,224,200,.1)),#ffffffb8}.time-signature-guide span{min-width:0;color:#4c596b;font-size:clamp(.82rem,1.4vw,.96rem);font-weight:950;line-height:1.25;text-align:center}.time-signature-fraction{min-width:46px;display:inline-grid;grid-template-rows:auto 2px auto;place-items:center;color:#202735;font-weight:950;line-height:.94}.time-signature-fraction.large{min-width:72px}.time-signature-fraction strong{font-size:clamp(1.4rem,3.2vw,2.1rem)}.time-signature-fraction.large strong{font-size:clamp(2.2rem,6vw,4.2rem)}.time-signature-fraction i{width:100%;height:2px;margin:5px 0;border-radius:999px;background:#202735}.time-signature-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:10px}.time-signature-strip figure{min-width:0;display:grid;justify-items:center;gap:8px;margin:0;padding:14px 8px;border:1px solid rgba(16,19,26,.08);border-radius:8px;background:#ffffffd1;box-shadow:0 10px 24px #10131a0d}.time-signature-strip figcaption{overflow:hidden;max-width:100%;color:var(--muted);font-size:.74rem;font-weight:900;line-height:1.2;text-align:center;text-overflow:ellipsis;white-space:nowrap}.rhythm-grid-widget{min-width:0;display:grid;gap:18px}.rhythm-grid-widget.compact{justify-items:center}.rhythm-grid-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.rhythm-transport,.rhythm-tempo-control button{width:42px;height:42px;display:inline-grid;place-items:center;border:1px solid rgba(16,19,26,.11);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 12px 26px #10131a14;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease}.rhythm-transport:hover,.rhythm-tempo-control button:hover:not(:disabled),.rhythm-transport.active{transform:translateY(-1px);box-shadow:0 16px 34px #0bb5d629}.rhythm-transport.active{border-color:transparent;background:var(--blue);color:#fff}.rhythm-transport.stop{color:#cc4c43}.rhythm-transport.reset{color:#596678}.rhythm-tempo-control{min-height:46px;display:inline-flex;gap:8px;align-items:center;padding:4px;border:1px solid rgba(16,19,26,.1);border-radius:999px;background:#ffffffd1}.rhythm-tempo-control strong{min-width:92px;display:inline-flex;gap:5px;align-items:baseline;justify-content:center;color:var(--ink);font-size:1.1rem;font-weight:950;line-height:1}.rhythm-tempo-control span{color:var(--muted);font-size:.74rem;font-weight:900;text-transform:uppercase}.rhythm-tempo-control button:disabled{cursor:not-allowed;opacity:.42;box-shadow:none}.rhythm-grid-scroll{min-width:0;display:grid;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 10px;box-shadow:inset -18px 0 18px -18px #10131a3d;scrollbar-color:rgba(11,181,214,.42) transparent;scrollbar-width:thin}.rhythm-grid-widget.compact .rhythm-grid-scroll{width:fit-content;max-width:100%}.rhythm-grid-scroll::-webkit-scrollbar{height:8px}.rhythm-grid-scroll::-webkit-scrollbar-track{background:transparent}.rhythm-grid-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(90deg,#0bb5d647,#18e0c86b)}.rhythm-grid,.rhythm-grid-beats{width:max-content;min-width:100%}.rhythm-grid{display:grid;gap:8px}.rhythm-grid-beats,.rhythm-grid-row{display:grid;grid-template-columns:108px repeat(var(--steps),34px);gap:6px;align-items:center}.rhythm-grid-beats{padding-bottom:2px;color:#667182;font-size:.72rem;font-weight:950}.rhythm-grid-beats>span{position:sticky;left:0;z-index:3;min-height:18px;background:linear-gradient(90deg,#fffffffa 0 76%,#fff0)}.rhythm-grid-beats i{display:grid;min-height:18px;place-items:center;border-radius:999px;font-style:normal}.rhythm-grid-beats i.downbeat{color:#303744;background:#10131a0f}.rhythm-grid-row-label{position:sticky;left:0;z-index:3;min-width:0;display:inline-flex;gap:8px;align-items:center;padding-right:8px;background:linear-gradient(90deg,#fffffffa 0 76%,#fff0);color:#3a4350;font-size:.84rem;font-weight:950}.rhythm-grid-row-label span{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 18%,transparent 19%),color-mix(in srgb,var(--instrument-color) 86%,#fff);box-shadow:0 10px 20px color-mix(in srgb,var(--instrument-color) 26%,transparent)}.rhythm-grid-row-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rhythm-grid-cell{position:relative;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(16,19,26,.11);border-radius:7px;background:#ffffffe0;color:#fff;cursor:pointer;font-size:.9rem;font-weight:950;line-height:1;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}.rhythm-grid-cell span{transform:translateY(-1px);text-shadow:0 1px 4px rgba(16,19,26,.18)}.rhythm-grid-cell.downbeat{border-color:#10131a33}.rhythm-grid-cell.active{border-color:transparent;background:color-mix(in srgb,var(--instrument-color) 82%,#fff);box-shadow:0 10px 22px color-mix(in srgb,var(--instrument-color) 24%,transparent)}.rhythm-grid-cell.playing{transform:translateY(-2px);box-shadow:inset 0 0 0 3px #ffffffc7,0 16px 30px #10131a29}.rhythm-grid-cell:not(.active).playing{background:color-mix(in srgb,var(--instrument-color) 18%,#fff)}.rhythm-grid-cell:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--instrument-color) 52%,rgba(16,19,26,.14))}.degree-pad{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,16px);align-items:center;justify-content:center}.degree-pad button{width:clamp(52px,9vw,76px);height:clamp(52px,9vw,76px);border:0;border-radius:50%;background:var(--degree-color);color:#fff;cursor:pointer;font-weight:950;box-shadow:0 14px 30px color-mix(in srgb,var(--degree-color) 28%,transparent);transition:transform .14s ease,box-shadow .14s ease}.pentatonic-pad-widget.compact .degree-pad{gap:clamp(6px,1.5vw,10px)}.pentatonic-pad-widget.compact .degree-pad button{width:clamp(44px,7vw,54px);height:clamp(44px,7vw,54px)}.degree-pad button:hover{transform:translateY(-2px);box-shadow:0 18px 36px color-mix(in srgb,var(--degree-color) 38%,transparent)}.pentatonic-pad-widget.single-row .degree-pad{display:grid;grid-template-columns:repeat(var(--degree-count),minmax(0,1fr));gap:clamp(6px,1.2vw,16px);justify-items:center}.pentatonic-pad-widget.single-row .degree-pad button{width:min(100%,76px);height:auto;min-width:0;aspect-ratio:1;font-size:17px}.pentatonic-pad-widget.has-melodies{gap:24px}.pentatonic-melody-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--muted) 22%,transparent)}.pentatonic-melody-readout{display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:0;color:var(--ink);font-size:14px;line-height:1.4}.pentatonic-melody-count{flex-shrink:0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.pentatonic-pad-widget .pentatonic-melody-hint{margin:-8px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.phrase-readout{min-height:28px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.phrase-readout span{width:12px;height:12px;border-radius:50%;background:var(--blue)}.phrase-readout small{color:var(--muted);font-weight:850}.chromatic-map{min-width:0;max-width:100%}.chromatic-map.scrollable{overflow-x:auto;overscroll-behavior-x:contain;padding:4px 0 12px;box-shadow:inset -20px 0 18px -20px #10131a52}.chromatic-widget{min-width:0}.chromatic-strip{display:grid;grid-template-columns:repeat(var(--chromatic-count, 13),minmax(32px,1fr));overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px #10131a1a}.chromatic-map.scrollable .chromatic-strip,.chromatic-map.scrollable .chromatic-interval-row{min-width:var(--chromatic-min-width)}.chromatic-strip button{min-height:58px;display:grid;gap:4px;align-content:center;justify-items:center;border:0;background:var(--step-color);color:#fff;cursor:pointer;font-weight:950;text-shadow:0 1px 8px rgba(16,19,26,.24)}.chromatic-strip button span{max-width:100%;overflow:hidden;line-height:1;text-overflow:ellipsis;white-space:pre-line}.chromatic-strip button small{min-width:22px;display:inline-grid;place-items:center;border-radius:999px;padding:3px 6px;background:#10131ac7;font-size:.66rem;line-height:1;text-shadow:none}.chromatic-strip button.highlight{opacity:1;box-shadow:inset 0 0 0 4px #ffffffc2}.chromatic-strip button.dimmed{opacity:.24}.chromatic-strip button:hover{filter:saturate(1.18) brightness(1.04)}.chromatic-interval-row{display:grid;grid-template-columns:repeat(var(--chromatic-count, 13),minmax(32px,1fr));gap:0;min-height:34px;padding-top:8px}.chromatic-interval-row.top{align-items:end;padding:0 0 8px}.chromatic-interval-row strong{grid-column:1 / -1;justify-self:center;color:var(--muted);font-size:.75rem;font-weight:950}.chromatic-interval-row span{position:relative;display:grid;place-items:end center;min-height:30px;color:var(--ink);font-size:.76rem;font-weight:950}.chromatic-interval-row.top span{place-items:start center;padding-top:0;padding-bottom:18px}.chromatic-interval-row span:before,.chromatic-interval-row span:after{content:"";position:absolute;inset-inline:8px}.chromatic-interval-row span:before{top:2px;height:14px;border-block-start:3px solid rgba(16,19,26,.42);border-inline:3px solid rgba(16,19,26,.42);border-radius:8px 8px 0 0}.chromatic-interval-row.top span:before{top:auto;bottom:2px;border-block-start:0;border-block-end:3px solid rgba(16,19,26,.42);border-radius:0 0 8px 8px}.chromatic-interval-row span:after{top:2px;height:3px;background:var(--blue);opacity:0}.chromatic-interval-row.top span:after{top:auto;bottom:2px}.chromatic-interval-row span.active{color:var(--blue)}.chromatic-interval-row span.active:before{border-color:color-mix(in srgb,var(--blue) 72%,#fff)}.chromatic-interval-row span.active:after{opacity:1}.lesson-widget-embeddedMedia .lesson-widget-surface{padding-inline:0}.embedded-media-widget{padding-inline:clamp(12px,2vw,18px)}.embedded-media-widget .note-rail{margin-inline:calc(-1*clamp(12px,2vw,18px))}.media-frame{overflow:hidden;border-radius:8px;background:#10131a;aspect-ratio:16 / 9;box-shadow:0 18px 44px #10131a29}.media-frame iframe{width:100%;height:100%;display:block;border:0}.embedded-media-widget .widget-play-button{justify-self:center;min-width:112px;max-width:220px}.lesson-widget-noteNamingTool.standalone-widget{width:min(1120px,100%)}.note-naming-tool-widget{gap:20px}.naming-tool-header{display:flex;align-items:center;justify-content:center;text-align:center}.naming-tool-header h3{margin:0;font-size:clamp(1.2rem,2.4vw,1.72rem);line-height:1.1}.naming-strip-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 10px}.naming-strip{display:grid;grid-template-columns:repeat(var(--naming-count, 37),minmax(40px,1fr));min-width:1120px;overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px #10131a1a}.naming-strip button{min-height:62px;display:grid;place-items:center;border:0;border-right:1px solid rgba(255,255,255,.42);background:color-mix(in srgb,var(--note-color) 76%,#f8fbff);color:#fff;cursor:pointer;font-size:clamp(.62rem,.95vw,.8rem);font-weight:950;line-height:1.02;opacity:.24;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.22);transition:opacity .14s ease,filter .14s ease,box-shadow .14s ease;white-space:pre-line}.naming-strip button.active{opacity:1;box-shadow:inset 0 0 0 4px #ffffffb8}.naming-strip button.playing{z-index:1;filter:saturate(1.2) brightness(1.04);box-shadow:inset 0 0 0 4px #fffffff2,0 14px 30px #10131a29;opacity:1}.scale-spelling-row,.naming-key-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.scale-spelling-row button,.naming-key-options button{min-width:42px;min-height:42px;border:1px solid rgba(16,19,26,.12);border-radius:999px;background:#ffffffdb;color:var(--ink);cursor:pointer;font-weight:950}.scale-spelling-row button{border-color:color-mix(in srgb,var(--note-color) 42%,rgba(16,19,26,.12));border-left-width:6px;border-radius:8px;padding-inline:12px}.scale-spelling-row button.playing,.naming-key-options button.active{border-color:transparent;background:var(--ink);color:#fff;box-shadow:0 12px 28px #10131a2e}.relative-key-table-widget{width:min(620px,100%);margin-inline:auto;overflow-x:auto}.relative-key-table-widget table{width:100%;min-width:420px;border-collapse:collapse;overflow:hidden;border-radius:8px;background:#ffffffeb;box-shadow:inset 0 0 0 1px #10131a1a}.relative-key-table-widget th,.relative-key-table-widget td{padding:11px 16px;border-bottom:1px solid rgba(16,19,26,.08);text-align:left}.relative-key-table-widget th{background:#f4f7fb;color:var(--ink);font-size:.78rem;font-weight:950}.relative-key-table-widget td{color:#3c4553;font-weight:850}.interval-pair-widget{display:grid;gap:14px;justify-items:center}.interval-pair-notes{width:min(100%,520px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}.interval-pair-notes button{min-height:96px;display:grid;gap:4px;place-items:center;border:0;border-radius:8px;background:color-mix(in srgb,var(--interval-note-color) 82%,#fff 18%);color:#fff;cursor:pointer;text-shadow:0 1px 10px rgba(16,19,26,.25);transition:filter .14s ease,transform .14s ease}.interval-pair-notes button:hover,.interval-pair-notes button.playing{filter:saturate(1.15) brightness(1.04);transform:translateY(-1px)}.interval-pair-notes strong{font-size:clamp(1.25rem,3vw,2rem);font-weight:950}.interval-pair-notes span{font-weight:950;opacity:.82}.interval-pair-arc{width:min(100%,520px);display:grid;place-items:center;min-height:46px;color:#333b48;font-weight:950}.interval-pair-arc span{position:relative;min-width:58%;padding-top:18px;text-align:center}.interval-pair-arc span:before{content:"";position:absolute;inset:2px 0 auto;height:22px;border-block-start:3px solid rgba(16,19,26,.42);border-inline:3px solid rgba(16,19,26,.42);border-radius:14px 14px 0 0}.interval-table-widget{width:100%}.interval-table-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px}.interval-table-widget table{width:100%;min-width:680px;border-collapse:collapse;color:var(--ink)}.interval-table-widget th,.interval-table-widget td{border-bottom:1px solid rgba(16,19,26,.09);padding:12px 14px;text-align:left;vertical-align:middle}.interval-table-widget thead th{color:var(--muted);font-size:.74rem;font-weight:950;text-transform:uppercase}.interval-table-widget tbody tr{transition:background .14s ease,box-shadow .14s ease}.interval-table-widget tbody tr.active{background:color-mix(in srgb,var(--blue) 8%,transparent);box-shadow:inset 4px 0 0 var(--blue)}.interval-table-widget tbody tr.simple .interval-ratio-pill{background:color-mix(in srgb,var(--mint) 24%,#fff);color:#176c55}.interval-table-name{display:grid;gap:2px}.interval-table-name strong{font-weight:950}.interval-table-name small{color:var(--muted);font-weight:800}.interval-table-steps,.interval-ratio-pill{display:inline-grid;min-width:46px;place-items:center;border-radius:999px;padding:6px 10px;background:#f2f5f9;font-weight:950}.interval-ratio-pill{min-width:64px;background:color-mix(in srgb,var(--blue) 10%,#fff);color:var(--blue)}.interval-table-action-heading{width:1%}.interval-table-play{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;padding:0 14px;background:var(--blue);color:#fff;cursor:pointer;font-weight:950;white-space:nowrap;box-shadow:0 10px 24px #0bb5d629}.interval-table-play:hover{filter:saturate(1.12) brightness(1.03)}.mode-table-widget{width:100%}.mode-table-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px}.mode-table-widget table{width:100%;min-width:760px;border-collapse:collapse;color:var(--ink)}.mode-table-widget th,.mode-table-widget td{border-bottom:1px solid rgba(16,19,26,.09);padding:12px 14px;text-align:left;vertical-align:middle}.mode-table-widget thead th{color:var(--muted);font-size:.74rem;font-weight:950;text-transform:uppercase}.mode-table-widget tbody tr{--mode-color: var(--blue);transition:background .14s ease,box-shadow .14s ease}.mode-table-widget tbody tr.active{background:color-mix(in srgb,var(--mode-color) 10%,transparent);box-shadow:inset 4px 0 0 var(--mode-color)}.mode-table-name{display:inline-flex;gap:10px;align-items:center;font-weight:950}.mode-table-name i{width:12px;height:32px;border-radius:999px;background:var(--mode-color);box-shadow:0 8px 18px color-mix(in srgb,var(--mode-color) 26%,transparent)}.mode-starting-note{display:inline-grid;min-width:46px;min-height:38px;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--mode-color) 14%,#fff);color:color-mix(in srgb,var(--mode-color) 82%,#10131a);font-size:1.05rem;font-weight:950}.mode-degree-path{display:flex;flex-wrap:wrap;gap:6px}.mode-degree-path span{display:inline-grid;min-width:30px;min-height:30px;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--mode-color) 16%,#fff);color:#253044;font-size:.82rem;font-weight:950}.mode-degree-path span:first-child,.mode-degree-path span:last-child{background:var(--mode-color);color:#fff;text-shadow:0 1px 6px rgba(16,19,26,.22)}.mode-table-action-heading{width:1%}.mode-table-play{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;padding:0 14px;background:var(--mode-color);color:#fff;cursor:pointer;font-weight:950;white-space:nowrap;box-shadow:0 10px 24px color-mix(in srgb,var(--mode-color) 22%,transparent)}.mode-table-play:hover{filter:saturate(1.12) brightness(1.03)}.mode-explorer-widget{display:grid;gap:12px;width:100%}.mode-explorer-head{display:grid;grid-template-columns:minmax(190px,.34fr) minmax(0,1fr);gap:12px;padding:0 14px;color:var(--muted);font-size:.74rem;font-weight:950;text-transform:uppercase}.mode-explorer-list{display:grid;gap:10px}.mode-explorer-row{--mode-color: var(--blue);display:grid;grid-template-columns:minmax(190px,.34fr) minmax(0,1fr);gap:12px;align-items:center;border:1px solid rgba(16,19,26,.09);border-radius:8px;padding:10px;background:#ffffffc7;box-shadow:0 14px 34px #10131a0f}.mode-explorer-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-width:0}.mode-explorer-meta strong,.mode-explorer-meta small{display:block}.mode-explorer-meta strong{color:var(--ink);font-size:1rem;font-weight:950;line-height:1.15}.mode-explorer-meta small{margin-top:3px;color:var(--muted);font-weight:850}.mode-explorer-play{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;padding:0 13px;background:var(--mode-color);color:#fff;cursor:pointer;font-weight:950;white-space:nowrap;box-shadow:0 10px 24px color-mix(in srgb,var(--mode-color) 22%,transparent)}.mode-explorer-play:hover{filter:saturate(1.12) brightness(1.03)}.mode-explorer-strip{display:grid;grid-template-columns:repeat(13,minmax(34px,1fr));min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px;background:#10131a0a;box-shadow:inset 0 0 0 1px #10131a0f,inset -18px 0 18px -18px #10131a3d;scrollbar-color:rgba(11,181,214,.42) transparent;scrollbar-width:thin}.mode-explorer-strip::-webkit-scrollbar{height:8px}.mode-explorer-strip::-webkit-scrollbar-track{background:transparent}.mode-explorer-strip::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(90deg,#0bb5d647,#18e0c86b)}.mode-explorer-strip button{min-width:34px;min-height:42px;display:grid;place-items:center;border:0;border-left:1px solid rgba(255,255,255,.72);padding:6px 4px;background:#10131a0a;color:#10131a61;cursor:pointer;font-weight:950}.mode-explorer-strip button:first-child{border-left:0}.mode-explorer-strip button:hover{background:#10131a14;color:var(--ink)}.mode-explorer-strip button.active{background:color-mix(in srgb,var(--mode-color) 78%,#fff);color:#fff;text-shadow:0 1px 6px rgba(16,19,26,.24);box-shadow:inset 0 -4px #10131a2e}.mode-explorer-strip button.playing{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--mode-color) 68%,#fff)}.mode-explorer-strip button span{white-space:pre-line;text-align:center;font-size:.78rem;line-height:1.05}.mode-scale-widget{--mode-color: var(--coral);display:grid;gap:14px;width:100%}.mode-scale-identity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:clamp(12px,2vw,16px);background:linear-gradient(135deg,color-mix(in srgb,var(--mode-color) 14%,#fff),#ffffffe0),#fff}.mode-scale-identity strong,.mode-scale-identity span{display:block}.mode-scale-identity strong{color:var(--ink);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:950;line-height:1.1}.mode-scale-identity span{margin-top:4px;color:var(--muted);font-weight:900}.mode-scale-strip{grid-template-columns:repeat(13,minmax(42px,1fr));box-shadow:inset 0 0 0 1px #10131a0f,inset -20px 0 20px -20px #10131a42}.mode-scale-roots{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.mode-scale-roots button{min-width:42px;min-height:44px;border:1px solid rgba(16,19,26,.1);border-radius:8px;padding:0 12px;background:#ffffffdb;color:var(--ink);cursor:pointer;font-weight:950;transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.mode-scale-roots button:hover,.mode-scale-roots button.active{border-color:color-mix(in srgb,var(--mode-color) 62%,#fff);background:color-mix(in srgb,var(--mode-color) 86%,#fff);color:#fff;transform:translateY(-1px)}.mode-keyboard-widget{display:grid;gap:14px;width:100%}.mode-keyboard-readout{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;justify-content:space-between;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:12px 14px;background:#f6f8fb}.mode-keyboard-readout strong{color:var(--ink);font-weight:950}.mode-keyboard-readout span{color:var(--muted);font-size:.88rem;font-weight:850}.mode-key-grid{display:grid;grid-template-columns:repeat(8,minmax(60px,1fr));gap:6px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;scrollbar-color:rgba(11,181,214,.42) transparent;scrollbar-width:thin}.mode-key-grid button{min-width:60px;min-height:92px;display:grid;grid-template-rows:auto 1fr;align-items:center;justify-items:center;gap:8px;border:0;border-radius:8px;padding:10px 8px 12px;background:linear-gradient(180deg,#ffffff38,#10131a12),color-mix(in srgb,var(--mode-key-color) 74%,#fff);color:#fff;cursor:pointer;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.24);box-shadow:0 12px 24px color-mix(in srgb,var(--mode-key-color) 18%,transparent);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.mode-key-grid button:hover,.mode-key-grid button.playing{filter:saturate(1.14) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 0 0 4px #ffffffb3,0 14px 30px color-mix(in srgb,var(--mode-key-color) 24%,transparent)}.mode-key-grid span{min-width:28px;height:26px;display:inline-grid;place-items:center;border-radius:999px;background:#10131a38;font-size:.72rem;font-weight:950;line-height:1}.mode-key-grid strong{align-self:center;font-size:clamp(1.05rem,2vw,1.34rem);font-weight:950}.mode-keyboard-widget .widget-play-button{justify-self:start}.harmony-quiz-widget{min-height:720px;display:grid;gap:24px;padding:clamp(20px,4vw,44px);color:#f8fbff}.scale-quiz-widget{min-height:clamp(560px,74vh,680px);gap:clamp(16px,2.4vw,22px)}.quiz-topline{display:flex;justify-content:space-between;gap:16px;color:#ffffffeb;font-weight:950}.quiz-progress{display:grid;grid-template-columns:repeat(var(--quiz-progress-count, 10),1fr);gap:6px}.quiz-progress span{height:10px;border-radius:999px;background:#ffffff1f}.quiz-progress span.filled{background:var(--blue-2)}.quiz-question{width:min(720px,100%);padding:24px 0 8px}.scale-quiz-widget .quiz-question{width:min(760px,100%);padding:12px 0 2px}.quiz-question>span{color:#e0cc82;font-size:2.1rem;font-weight:950}.quiz-question h2{margin-top:18px;color:#fff;font-size:clamp(1.9rem,4vw,3.6rem)}.scale-quiz-widget .quiz-question h2{margin-top:12px;font-size:clamp(1.45rem,2.55vw,2.35rem);line-height:1.08}.quiz-question small{display:inline-flex;margin-top:14px;color:#ffffffad;font-weight:950;letter-spacing:0}.quiz-question p{max-width:660px;margin:18px 0 0;color:#ffffffa8;font-size:1.08rem}.scale-quiz-widget .quiz-question p{max-width:720px;margin-top:12px;font-size:1rem}.quiz-choices{display:grid;gap:16px}.quiz-choice-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.24fr) minmax(138px,.18fr);gap:14px;align-items:center;min-height:154px;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:14px 18px;background:#fffffff2;color:var(--ink);text-align:center}.quiz-choice-card .wave-svg{min-height:128px}.quiz-choices .wave-axis{stroke:#10131a1a}.quiz-choice-meta{display:flex;gap:12px;align-items:center;justify-content:center}.quiz-choice-badge{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border:2px solid rgba(16,19,26,.18);border-radius:50%;font-weight:950}.quiz-choice-meta div{display:grid;gap:4px;min-width:0;text-align:left}.quiz-choice-meta strong{color:#252d3a;font-weight:950}.quiz-choice-meta small{color:#647084;font-weight:950}.quiz-choice-actions{display:grid;gap:9px}.quiz-choice-actions .widget-play-button,.quiz-choice-actions .widget-ghost-button{width:100%}.quiz-choice-card.correct{outline:3px solid rgba(47,185,134,.7)}.quiz-choice-card.wrong{outline:3px solid rgba(239,111,97,.72)}.quiz-choice-card.selected:not(.correct):not(.wrong){outline:3px solid rgba(11,181,214,.42)}.scale-quiz-choice-card{grid-template-columns:minmax(0,1fr) minmax(180px,.28fr) minmax(130px,.18fr);text-align:left}.scale-choice-visual{overflow-x:auto;padding:4px 0 8px}.scale-choice-strip{display:grid;grid-template-columns:repeat(var(--scale-choice-count, 13),minmax(30px,1fr));width:100%;min-width:calc(var(--scale-choice-count, 13) * 32px);overflow:hidden;border:1px solid rgba(16,19,26,.1);border-radius:8px;background:#10131a0a}.scale-choice-strip span{display:grid;place-items:center;min-height:44px;border-right:1px solid rgba(255,255,255,.72);background:color-mix(in srgb,var(--note-color) 18%,#fff 82%);color:#10131aa3;font-size:.88rem;font-weight:950;transition:background .16s ease,box-shadow .16s ease,opacity .16s ease}.scale-choice-strip span:last-child{border-right:0}.scale-choice-strip span.active{background:color-mix(in srgb,var(--note-color) 76%,#fff 24%);color:#10131a;box-shadow:inset 0 -5px #10131a5c}.scale-choice-strip span.dimmed{opacity:.54}.scale-choice-strip span.playing{background:#10131a;color:#fff;opacity:1;box-shadow:inset 0 -5px 0 var(--note-color)}.scale-choice-text-panel{display:grid;align-content:center;min-height:72px}.scale-choice-chip-row{display:flex;flex-wrap:wrap;gap:8px}.scale-choice-chip-row span{display:inline-grid;min-height:36px;place-items:center;border:1px solid rgba(16,19,26,.1);border-radius:8px;padding:6px 11px;background:#f3f6fb;color:#263040;font-weight:950;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.scale-choice-chip-row span.playing{background:#10131a;color:#fff;box-shadow:inset 0 -5px 0 var(--note-color, var(--blue))}.scale-quiz-widget .quiz-choice-meta{justify-content:flex-start}.interval-quiz-widget{min-height:clamp(640px,78vh,760px);gap:18px}.interval-quiz-ready{min-height:clamp(460px,64vh,620px);place-items:center}.interval-quiz-ready-panel{width:min(520px,100%);display:grid;gap:18px;justify-items:center;text-align:center}.interval-quiz-ready-panel h2{margin:0;color:#fff;font-size:2.6rem;line-height:1.05}.interval-quiz-ready-panel p{margin:0;color:#ffffffb3;font-weight:850}.interval-quiz-question{width:min(760px,100%);padding:10px 0 0}.interval-quiz-question h2{margin-top:10px;font-size:3rem;line-height:1.04}.interval-quiz-question p{max-width:760px;margin-top:10px}.interval-quiz-stage{display:grid;gap:14px;justify-items:center}.interval-quiz-visual{width:min(100%,820px);display:grid;gap:0}.interval-quiz-arc-row{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));min-height:58px;align-items:end;padding-inline:1px}.interval-quiz-arc-row span{position:relative;grid-column:1 / span var(--interval-span, 2);display:grid;place-items:start center;min-height:54px;color:#f6d76f;font-size:1.22rem;font-weight:950;text-align:center}.interval-quiz-arc-row span:before{content:"";position:absolute;inset:22px 9px auto;height:25px;border-block-start:3px solid rgba(246,215,111,.84);border-inline:3px solid rgba(246,215,111,.84);border-radius:18px 18px 0 0}.interval-quiz-strip{display:grid;grid-template-columns:repeat(var(--interval-strip-count, 13),minmax(0,1fr));overflow:hidden;border-radius:8px;box-shadow:0 18px 48px #00000038,inset 0 0 0 1px #ffffff24}.interval-quiz-note-cell{min-height:66px;display:grid;gap:4px;align-content:center;justify-items:center;border:0;border-right:1px solid rgba(255,255,255,.24);background:color-mix(in srgb,var(--note-color) 70%,#253040);color:#fff;cursor:pointer;font-weight:950;opacity:.42;text-shadow:0 1px 8px rgba(16,19,26,.26);transition:opacity .14s ease,filter .14s ease,box-shadow .14s ease}.interval-quiz-note-cell:last-child{border-right:0}.interval-quiz-note-cell.between{opacity:.7}.interval-quiz-note-cell.start,.interval-quiz-note-cell.target,.interval-quiz-note-cell.playing{opacity:1}.interval-quiz-note-cell.playing{filter:saturate(1.2) brightness(1.06);box-shadow:inset 0 0 0 4px #ffffffd9}.interval-quiz-note-cell span{min-height:1em;font-size:.9rem;line-height:1}.interval-quiz-note-cell small{min-width:24px;display:inline-grid;place-items:center;border-radius:999px;padding:3px 6px;background:#10131aad;font-size:.68rem;line-height:1}.interval-quiz-note-readout{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;color:#ffffffb8;font-weight:950}.interval-quiz-note-readout strong{min-width:74px;border-radius:999px;padding:7px 12px;background:#ffffff1a;color:#fff;text-align:center}.interval-quiz-sound-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.interval-quiz-sound-row .widget-ghost-button{border-color:#ffffff3d;background:#ffffff1f;color:#fff}.interval-quiz-sound-row .widget-ghost-button:hover{background:#ffffff2e}.interval-quiz-choice-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.interval-quiz-choice{min-height:54px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#fffffff0;color:var(--ink);cursor:pointer;font-weight:950;transition:background .14s ease,box-shadow .14s ease,color .14s ease,transform .14s ease}.interval-quiz-choice:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px #00000029}.interval-quiz-choice:disabled{cursor:default}.interval-quiz-choice.correct{background:var(--mint);color:#073a2b;box-shadow:inset 0 0 0 3px #ffffff9e}.interval-quiz-choice.wrong{background:var(--coral);color:#fff;box-shadow:inset 0 0 0 3px #ffffff94}.interval-quiz-choice.selected:not(.correct):not(.wrong){box-shadow:inset 0 0 0 3px var(--blue-2)}.chord-quiz-widget{min-height:clamp(680px,82vh,820px);gap:clamp(16px,2.5vw,24px);padding-bottom:clamp(24px,5vw,48px)}.chord-quiz-question{width:min(820px,100%);padding:10px 0 0}.chord-quiz-question h2{margin-top:10px;font-size:clamp(1.75rem,3.8vw,3rem);line-height:1.05}.chord-quiz-question p{max-width:780px;margin-top:10px}.chord-quiz-stage{width:min(860px,100%);display:grid;gap:16px;justify-self:center}.chord-quiz-stage-heading{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.chord-quiz-stage-heading strong{color:#fff;font-size:1rem;font-weight:950}.chord-quiz-stage-heading .widget-ghost-button{border-color:#ffffff38;background:#ffffff1f;color:#fff}.chord-quiz-strip-wrap{display:grid;gap:12px}.chord-quiz-strip{display:grid;grid-template-columns:repeat(var(--chord-quiz-strip-count, 13),minmax(0,1fr));overflow:hidden;border-radius:8px;box-shadow:0 18px 48px #00000038,inset 0 0 0 1px #ffffff24}.chord-quiz-strip button{min-width:0;min-height:68px;display:grid;place-items:center;gap:5px;border:0;border-right:1px solid rgba(255,255,255,.24);background:color-mix(in srgb,var(--note-color) 68%,#253040);color:#fff;cursor:pointer;font-weight:950;line-height:1;opacity:.46;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.26);transition:opacity .14s ease,filter .14s ease,box-shadow .14s ease,transform .14s ease;white-space:pre-line}.chord-quiz-strip button:last-child{border-right:0}.chord-quiz-strip button:hover{opacity:.82}.chord-quiz-strip button.chord-tone,.chord-quiz-strip button.root{opacity:1}.chord-quiz-strip button.root{box-shadow:inset 0 -7px #10131a57}.chord-quiz-strip button.playing{z-index:1;filter:saturate(1.22) brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 0 0 4px #ffffffeb,0 15px 30px #10131a3d}.chord-quiz-strip button span{min-width:0;overflow:hidden;font-size:clamp(.62rem,.9vw,.82rem);text-overflow:ellipsis}.chord-quiz-strip button small{min-width:25px;min-height:25px;display:inline-grid;place-items:center;border-radius:999px;padding:3px 7px;background:#ffffffeb;color:var(--ink);font-size:.68rem;text-shadow:none}.chord-quiz-count-row{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:2px}.chord-quiz-count-row span{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:#ffffff1a;color:#ffffffad;font-weight:950}.chord-quiz-count-row span.active{background:#fff;color:var(--ink)}.chord-quiz-compare-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chord-quiz-compare-card{display:grid;gap:6px;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:12px 14px;background:#ffffff1a}.chord-quiz-compare-card strong{color:#fff;font-weight:950}.chord-quiz-compare-card span{color:#ffffffb8;font-weight:850}.chord-quiz-answer-panel{margin-inline:calc(clamp(20px,4vw,44px)*-1);padding:clamp(24px,4.5vw,42px) clamp(20px,4vw,44px);background:#f6f8fb;color:var(--ink)}.chord-quiz-choice-grid{width:min(680px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-inline:auto}.chord-quiz-choice{min-height:82px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:2px solid rgba(16,19,26,.14);border-radius:8px;padding:14px 16px;background:#fff;color:var(--ink);cursor:pointer;text-align:left;box-shadow:0 12px 28px #10131a12;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease,background .14s ease}.chord-quiz-choice:hover:not(:disabled){transform:translateY(-1px);border-color:#0bb5d65c;box-shadow:0 16px 34px #10131a1c}.chord-quiz-choice:disabled{cursor:default}.chord-quiz-choice-copy{display:grid;gap:4px;min-width:0}.chord-quiz-choice-copy strong{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.18rem);font-weight:950;line-height:1.12}.chord-quiz-choice-copy small{color:var(--muted);font-size:.8rem;font-weight:850}.chord-quiz-choice-badge{width:44px;height:44px;display:grid;place-items:center;border:2px solid rgba(16,19,26,.18);border-radius:999px;color:#808999;font-weight:950}.chord-quiz-choice.correct{border-color:transparent;background:color-mix(in srgb,var(--mint) 28%,#fff);box-shadow:inset 0 0 0 3px #2fb98661}.chord-quiz-choice.wrong{border-color:transparent;background:color-mix(in srgb,var(--coral) 28%,#fff);box-shadow:inset 0 0 0 3px #ef6f616b}.chord-quiz-choice.selected:not(.correct):not(.wrong){border-color:var(--blue)}.chord-quiz-choice.correct .chord-quiz-choice-badge{border-color:transparent;background:var(--mint);color:#073a2b}.chord-quiz-choice.wrong .chord-quiz-choice-badge{border-color:transparent;background:var(--coral);color:#fff}.chord-quiz-actions{align-self:end}.chord-quiz-actions p{color:#ffffffc7}.quiz-actions{display:flex;justify-content:space-between;gap:14px;align-items:center}.quiz-actions p{color:#ffffffbd}.lesson-end-nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:clamp(38px,7vw,72px) 0 clamp(64px,10vw,110px)}.lesson-end-nav h2{font-size:clamp(2rem,4vw,4.1rem)}.lesson-end-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:end}.home-lesson{scroll-margin-top:76px;padding:clamp(68px,10vw,120px) 0 clamp(84px,12vw,138px);border-bottom:1px solid rgba(16,19,26,.08);background:#fff}.home-lesson-shell{width:min(900px,calc(100dvw - 40px));margin-inline:auto}.home-lesson-cover{display:grid;gap:18px;justify-items:center;padding-bottom:clamp(64px,9vw,108px);text-align:center}.home-lesson-cover h2{max-width:620px;font-size:clamp(2.8rem,7vw,5.4rem)}.home-lesson-cover>p:not(.eyebrow){max-width:520px;margin:0;color:var(--muted);font-size:1.08rem}.home-lesson-cover .lesson-widget{width:min(900px,100%);margin-top:6px;text-align:left}.home-lesson-cover .piano-keybed{width:100%;max-width:none}.home-lesson-cover .lesson-widget-copy{justify-content:center;text-align:center}.home-lesson-intro{width:min(700px,100%);margin-top:clamp(18px,4vw,34px);padding-top:28px;border-top:1px solid rgba(16,19,26,.1);text-align:left}.home-lesson-intro h3,.home-lesson-section header h3,.home-lesson-step h4{margin:0;letter-spacing:0}.home-lesson-intro h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}.home-lesson-intro p,.home-lesson-section header p,.home-lesson-step p{color:var(--muted)}.home-lesson-intro p{margin:12px 0 0;font-size:1rem;line-height:1.64}.home-lesson-section{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr);gap:24px;padding:clamp(54px,8vw,92px) 0;border-top:1px solid rgba(16,19,26,.1)}.home-lesson-number{color:#10131a1f;font-size:clamp(4rem,10vw,6rem);font-weight:950;line-height:.82}.home-lesson-section-body{min-width:0}.home-lesson-section header{padding-bottom:clamp(28px,5vw,48px)}.home-lesson-section header h3{color:var(--ink);font-size:clamp(1.78rem,4vw,3.2rem);line-height:1}.home-lesson-section header p{max-width:660px;margin:10px 0 0;font-size:1rem;font-style:italic}.home-lesson-step{display:grid;gap:16px;padding:clamp(28px,5vw,48px) 0;border-top:1px solid rgba(16,19,26,.08)}.home-lesson-step:first-of-type{border-top:0}.home-lesson-step-copy{max-width:720px}.home-lesson-step h4{color:var(--ink);font-size:clamp(1.28rem,2.5vw,1.72rem);line-height:1.12}.home-lesson-step p{margin:9px 0 0;font-size:.98rem;line-height:1.58}.home-lesson-step ul{margin:12px 0 0 1.15rem;padding:0;color:var(--muted);font-size:.98rem;line-height:1.58}.home-lesson-step li+li{margin-top:4px}.home-lesson-step strong,.home-lesson-intro strong{color:var(--ink);font-weight:850}.home-lesson .lesson-widget-copy{margin-bottom:2px}.home-lesson .lesson-widget-copy span{display:none}.home-lesson .lesson-widget-surface{box-shadow:0 16px 46px #0bb5d612}.home-lesson-next{display:grid;gap:12px;max-width:680px;margin:clamp(42px,7vw,82px) auto 0;padding-top:clamp(34px,5vw,56px);border-top:1px solid rgba(16,19,26,.1);text-align:left}.home-lesson-next h3{margin:0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:0;line-height:1}.home-lesson-next p:not(.eyebrow){max-width:560px;margin:0;color:var(--muted);line-height:1.6}.home-lesson-next .primary-action{justify-self:start}.widget-ghost-button:disabled{cursor:not-allowed;opacity:.45}.note-rail-widget,.chord-formula-widget,.key-tool-widget,.diatonic-chords-widget{display:grid;gap:14px}.note-rail{display:grid;grid-template-columns:repeat(var(--rail-count, 13),minmax(0,1fr));height:68px;min-height:68px;overflow:hidden;border-radius:8px;background:#ffffffb8;box-shadow:inset 0 0 0 1px #10131a1a}.note-rail-transpose{gap:20px}.note-rail-transpose .note-rail-cell{padding:0 1px}.note-rail-transpose .note-rail-cell>span{font-size:clamp(12px,1.2vw,14px)}.note-rail-comparison{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);gap:10px;align-items:center;width:fit-content;max-width:100%;color:#6f726a;font-size:14px;line-height:1.45}.note-rail-comparison>span:not(:nth-child(2)){display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:6px;transition:background .16s ease,color .16s ease,border-color .16s ease}.note-rail-comparison>span.is-playing{background:#e4e9e9;border-color:#b7c3c8;color:#40596a}.note-rail-comparison strong{font-size:20px;font-weight:500}@media(max-width:600px){.note-rail-comparison{gap:5px;font-size:13px}.note-rail-comparison>span:not(:nth-child(2)){padding:6px;gap:6px}}@media(prefers-reduced-motion:reduce){.note-rail-comparison>span{transition:none}}.note-rail-cell{position:relative;min-width:0;min-height:68px;display:grid;place-items:center;gap:2px;border:0;border-right:1px solid rgba(255,255,255,.45);background:color-mix(in srgb,var(--note-color) 84%,#fff);color:#fff;cursor:pointer;font-weight:950;text-shadow:0 1px 8px rgba(16,19,26,.18);transition:filter .14s ease,box-shadow .14s ease,opacity .14s ease}.note-rail>span.note-rail-cell{cursor:default}.note-rail-cell span{max-width:100%;overflow:hidden;font-size:clamp(.58rem,.9vw,.86rem);line-height:1;text-overflow:ellipsis;white-space:nowrap}.note-rail-cell strong{width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:#10131ad1;color:#fff;font-size:.72rem;line-height:1;text-shadow:none}.note-rail-cell.dimmed{opacity:.34}.note-rail-cell.active,.note-rail-cell.has-marker{opacity:1;box-shadow:inset 0 0 0 4px #ffffffa3}.note-rail-cell.playing{z-index:1;filter:saturate(1.22) brightness(1.05);box-shadow:inset 0 0 0 4px #ffffffe6,0 14px 30px #10131a2e}.note-rail.key-map{grid-template-columns:repeat(var(--rail-count, 13),minmax(0,1fr));height:auto;min-height:86px;overflow:hidden;border-radius:6px;background:#ffffffd6}.note-rail.key-map .note-rail-cell{min-height:86px;align-content:center;justify-items:center;gap:7px;padding:10px 8px;background:#fff;color:#172033;text-shadow:none;box-shadow:inset 0 0 0 1px #10131a0a,inset 0 -7px color-mix(in srgb,var(--note-color) 58%,#fff)}.note-rail.key-map .note-rail-cell span{font-size:clamp(.78rem,1.25vw,1rem);white-space:pre-line}.note-rail.key-map .note-rail-cell.skipped{background:#eef2f6;color:#8792a3;opacity:1;box-shadow:inset 0 0 0 1px #10131a0f}.note-rail.key-map .note-rail-cell.skipped span{color:#8792a3}.note-rail.key-map .note-rail-cell.skipped strong{background:#10131a14;color:#6c7584}.note-rail.key-map .note-rail-cell.playing{box-shadow:inset 0 0 0 4px #ffffffe6,inset 0 -7px color-mix(in srgb,var(--note-color) 74%,#fff),0 14px 30px #10131a24}.key-tool-widget .note-rail.key-tool-rail{height:auto;min-height:88px}.key-tool-widget .note-rail.key-tool-rail .note-rail-cell{min-height:88px;padding:10px 6px;box-shadow:inset 0 0 0 1px #10131a0d}.key-tool-widget .note-rail.key-tool-rail .note-rail-cell span{display:grid;min-height:2.1em;align-content:center;font-size:clamp(.72rem,1.05vw,.9rem);line-height:1.05;text-align:center;white-space:pre-line}.key-tool-widget .note-rail.key-tool-rail .note-rail-cell.active{background:color-mix(in srgb,var(--note-color) 82%,#fff);color:#fff;opacity:1;box-shadow:inset 0 0 0 4px #ffffffad}.key-tool-widget .note-rail.key-tool-rail .note-rail-cell.skipped{background:repeating-linear-gradient(135deg,#10131a09 0 8px,#10131a14 8px 9px),#eef2f6;color:#8d97a7;opacity:1;box-shadow:inset 0 0 0 1px #10131a12}.key-tool-widget .note-rail.key-tool-rail .note-rail-cell.skipped span{color:#8d97a7}.key-tool-widget .note-chip-row{display:grid;grid-template-columns:repeat(auto-fit,44px);gap:8px}.key-tool-widget .note-chip-row button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0}.key-tool-widget .segmented-row button{min-width:82px}.widget-mini-heading{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.widget-mini-heading strong{color:#252c39;font-size:1rem}.widget-mini-heading>button:not(.widget-play-button){min-height:36px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:0 12px;background:var(--ink);color:#fff;cursor:pointer;font-weight:950}.note-chip-row,.segmented-row{display:flex;flex-wrap:wrap;gap:8px}.note-chip-row button,.segmented-row button,.diatonic-choice-row button{min-height:36px;border:0;border-radius:999px;padding:0 13px;background:#ffffffdb;color:#303848;cursor:pointer;font-size:.82rem;font-weight:950;box-shadow:inset 0 0 0 1px #10131a14}.note-chip-row button.active,.segmented-row button.active,.diatonic-choice-row button.active{background:var(--ink);color:#fff;box-shadow:none}.chord-tone-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}.chord-tone-card{min-width:0;min-height:96px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;border:1px solid color-mix(in srgb,var(--note-color) 36%,rgba(16,19,26,.1));border-radius:8px;padding:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--note-color) 20%,#fff),#ffffffeb);color:#252c39;cursor:pointer;text-align:left;transition:border-color .14s ease,box-shadow .14s ease,filter .14s ease,opacity .14s ease}.chord-tone-card span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--note-color);color:#fff;font-weight:950}.chord-tone-card strong{overflow:hidden;font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:950;line-height:1;text-overflow:ellipsis;white-space:nowrap}.chord-tone-card small{grid-column:2;color:var(--muted);font-size:.78rem;font-weight:900;line-height:1.2}.chord-tone-card.playing{border-color:color-mix(in srgb,var(--note-color) 74%,#fff);filter:saturate(1.12);box-shadow:0 16px 34px color-mix(in srgb,var(--note-color) 20%,transparent)}.chord-tone-card.outside{opacity:.48;background:#ffffffb8}.chord-tone-card.outside span{background:#10131a42}.chord-build-view{display:grid;gap:16px}.chord-build-summary{display:flex;flex-wrap:wrap;gap:10px}.chord-build-summary span{min-height:46px;display:inline-grid;gap:2px;align-content:center;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:8px 12px;background:#ffffffbd;color:var(--muted);font-size:.72rem;font-weight:950;text-transform:uppercase}.chord-build-summary strong{color:#172033;font-size:1rem;letter-spacing:0;text-transform:none}.chord-build-ruler{display:grid;grid-template-columns:repeat(var(--chord-build-count, 8),minmax(66px,1fr));overflow-x:auto;overscroll-behavior-x:contain;border:1px solid rgba(16,19,26,.08);border-radius:8px;background:#ffffffb8;box-shadow:0 18px 44px #10131a0f}.chord-build-ruler button{min-width:0;min-height:82px;display:grid;gap:4px;align-content:center;justify-items:center;border:0;border-right:1px solid rgba(16,19,26,.06);padding:8px 6px;background:#ffffff80;color:#657083;cursor:pointer;font-weight:950;transition:background .14s ease,box-shadow .14s ease,color .14s ease,filter .14s ease}.chord-build-ruler button:last-child{border-right:0}.chord-build-ruler button small{width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:#10131a14;color:#4f5a6c;font-size:.72rem;line-height:1}.chord-build-ruler button strong{overflow:hidden;max-width:100%;font-size:clamp(.8rem,1.2vw,1.05rem);line-height:1;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chord-build-ruler button span{min-height:1em;color:#252c39b8;font-size:.68rem;line-height:1;text-align:center}.chord-build-ruler button.chord-tone{background:color-mix(in srgb,var(--note-color) 22%,#fff);color:#172033;box-shadow:inset 0 -6px color-mix(in srgb,var(--note-color) 62%,#fff)}.chord-build-ruler button.chord-tone small{background:var(--note-color);color:#fff}.chord-build-ruler button.root{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--note-color) 72%,#fff),inset 0 -6px color-mix(in srgb,var(--note-color) 62%,#fff)}.chord-build-ruler button.playing{z-index:1;filter:saturate(1.15) brightness(1.03);box-shadow:inset 0 0 0 4px #ffffffe6,0 14px 28px #10131a24}.chord-build-path{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}.chord-build-path-item{display:flex;flex:1 1 180px;min-width:min(100%,180px);gap:10px;align-items:stretch}.chord-build-connector{min-width:72px;display:grid;place-items:center;border:1px dashed rgba(16,19,26,.16);border-radius:8px;padding:8px;background:#ffffffa8;color:#3f4a5c;font-size:.76rem;font-weight:950;text-align:center}.chord-build-path-item button{flex:1;min-width:0;min-height:112px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;align-items:center;border:1px solid color-mix(in srgb,var(--note-color) 34%,rgba(16,19,26,.1));border-radius:8px;padding:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--note-color) 18%,#fff),#fffffff0);color:#172033;cursor:pointer;text-align:left;transition:border-color .14s ease,box-shadow .14s ease,filter .14s ease}.chord-build-path-item button small{width:42px;height:42px;display:grid;place-items:center;border-radius:999px;background:var(--note-color);color:#fff;font-size:.7rem;font-weight:950;line-height:1;text-transform:uppercase}.chord-build-path-item button strong{overflow:hidden;font-size:clamp(1.28rem,2.8vw,1.85rem);font-weight:950;line-height:1;text-overflow:ellipsis;white-space:nowrap}.chord-build-path-item button span{grid-column:2;color:var(--muted);font-size:.8rem;font-weight:900;line-height:1.15}.chord-build-path-item button.playing{filter:saturate(1.12);box-shadow:0 16px 34px color-mix(in srgb,var(--note-color) 20%,transparent)}.chord-formula-strip-wrap{display:grid;gap:10px}.chord-formula-strip-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 10px}.chord-formula-strip{display:grid;grid-template-columns:repeat(var(--chord-strip-count, 37),minmax(40px,1fr));min-width:calc(var(--chord-strip-count, 37) * 40px);overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px #10131a1a}.chord-formula-strip button{min-height:58px;display:grid;place-items:center;gap:2px;border:0;border-right:1px solid rgba(255,255,255,.42);background:color-mix(in srgb,var(--note-color) 54%,#fff);color:#172033;cursor:pointer;font-size:clamp(.6rem,.95vw,.78rem);font-weight:950;line-height:1;opacity:.28;text-align:center;text-shadow:none;transition:opacity .14s ease,filter .14s ease,box-shadow .14s ease;white-space:pre-line}.chord-formula-strip button.chord-tone,.chord-formula-strip button.root{opacity:1;box-shadow:inset 0 0 0 4px #ffffffb8}.chord-formula-strip button.root{box-shadow:inset 0 0 0 4px #fff,inset 0 -8px #10131a3d}.chord-formula-strip button.playing{z-index:1;filter:saturate(1.2) brightness(1.04);box-shadow:inset 0 0 0 4px #fffffff2,0 14px 30px #10131a29}.chord-formula-strip button small{min-width:22px;display:inline-grid;place-items:center;border-radius:999px;padding:3px 6px;background:#10131ad1;color:#fff;font-size:.66rem;text-shadow:none}.chord-formula-count-row{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:2px}.chord-formula-count-row span{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:#10131a14;color:#4f5a6c;font-weight:950}.chord-formula-count-row span.active{background:var(--ink);color:#fff}.chord-root-picker{display:grid;gap:8px}.chord-root-picker>span{color:var(--muted);font-size:.78rem;font-weight:950;text-transform:uppercase}.chord-inversions-widget{display:grid;gap:14px}.inversion-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.inversion-tabs button{min-height:56px;display:grid;gap:3px;align-content:center;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:10px 12px;background:#ffffffd6;color:#252c39;cursor:pointer;text-align:left}.inversion-tabs button.active{border-color:#10131a1a;background:var(--ink);color:#fff}.inversion-tabs button strong{font-size:.96rem;font-weight:950}.inversion-tabs button span{color:var(--muted);font-size:.78rem;font-weight:850}.inversion-tabs button.active span{color:#ffffffb8}.inversion-rail-wrap{display:grid;gap:8px}.inversion-rail-scroll,.inversion-matrix-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.inversion-rail,.inversion-arrow-row{display:grid;grid-template-columns:repeat(var(--inversion-rail-count, 13),minmax(42px,1fr));min-width:calc(var(--inversion-rail-count, 13) * 42px)}.inversion-arrow-row{min-height:36px;align-items:end}.inversion-arrow-row span{position:relative;display:grid;place-items:start center;min-height:30px;color:var(--ink);font-size:.72rem;font-weight:950;text-align:center}.inversion-arrow-row span:before{content:"";position:absolute;right:8px;bottom:2px;left:8px;height:16px;border-block-start:3px solid rgba(16,19,26,.52);border-inline-end:3px solid rgba(16,19,26,.52);border-radius:0 10px 0 0}.inversion-arrow-row span:after{content:"";position:absolute;right:4px;bottom:-1px;width:10px;height:10px;border-block-start:3px solid rgba(16,19,26,.52);border-inline-end:3px solid rgba(16,19,26,.52);transform:rotate(45deg)}.inversion-rail{overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px #10131a1a}.inversion-rail button{min-height:62px;display:grid;place-items:center;gap:3px;border:0;border-right:1px solid rgba(255,255,255,.42);background:color-mix(in srgb,var(--note-color) 50%,#fff);color:#172033;cursor:pointer;font-size:.72rem;font-weight:950;opacity:.34;text-align:center;white-space:pre-line}.inversion-rail button.active{opacity:1;box-shadow:inset 0 0 0 4px #fffc}.inversion-rail button small{min-width:22px;display:inline-grid;place-items:center;border-radius:999px;padding:3px 6px;background:#10131ad1;color:#fff;font-size:.66rem;text-shadow:none}.inversion-tone-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.inversion-tone-row button{min-height:58px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;border:1px solid color-mix(in srgb,var(--note-color) 34%,rgba(16,19,26,.1));border-radius:8px;padding:10px;background:color-mix(in srgb,var(--note-color) 14%,#fff);color:#252c39;cursor:pointer}.inversion-tone-row button span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--note-color);color:#fff;font-size:.76rem;font-weight:950}.inversion-tone-row button strong{overflow:hidden;font-size:1.08rem;font-weight:950;line-height:1;text-overflow:ellipsis;white-space:nowrap}.inversion-matrix{display:grid;grid-template-columns:minmax(92px,.9fr) repeat(var(--inversion-chord-count, 7),minmax(68px,1fr));min-width:calc(92px + var(--inversion-chord-count, 7) * 68px);gap:4px}.inversion-matrix-row{display:contents}.inversion-matrix-corner,.inversion-row-label,.inversion-matrix-heading,.inversion-matrix button{min-height:58px;border-radius:8px}.inversion-matrix-corner,.inversion-row-label{display:grid;align-content:center;padding:8px 10px;background:#10131a12;color:var(--muted);font-size:.74rem;font-weight:950}.inversion-matrix-heading{display:grid;align-content:center;gap:2px;padding:8px;background:#ffffffd6;color:#252c39;text-align:center}.inversion-matrix-heading strong{font-weight:950}.inversion-matrix-heading small{color:var(--muted);font-size:.7rem;font-weight:850}.inversion-matrix button{border:0;background:linear-gradient(180deg,#ffffff2e,#10131a14),color-mix(in srgb,var(--note-color) 74%,#fff);color:#fff;cursor:pointer;font-weight:950;text-shadow:0 1px 8px rgba(16,19,26,.24)}.inversion-matrix button.active,.inversion-matrix button:hover{filter:saturate(1.12) brightness(1.04);box-shadow:inset 0 0 0 4px #ffffffa8}.diatonic-key-card,.diatonic-build-card{display:grid;gap:12px;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:clamp(14px,2vw,18px);background:#ffffffd1;box-shadow:0 18px 44px #10131a0d}.diatonic-key-heading,.diatonic-build-heading{display:grid;gap:4px 12px;align-items:center;color:#252c39}.diatonic-key-heading span,.diatonic-build-heading span{color:var(--muted);font-size:.9rem;font-weight:800;line-height:1.35}.diatonic-key-heading strong,.diatonic-build-heading strong{color:#172033;font-size:clamp(1rem,1.8vw,1.25rem);font-weight:950;line-height:1.1}.diatonic-build-heading{grid-template-columns:minmax(0,1fr) auto}.diatonic-build-heading span,.diatonic-build-heading strong{grid-column:1}.diatonic-build-heading button{grid-column:2;grid-row:1 / span 2;min-height:38px;display:inline-flex;gap:8px;align-items:center;justify-content:center;border:1px solid rgba(42,124,193,.24);border-radius:999px;padding:0 14px;background:#ffffffe6;color:#1f4f72;cursor:pointer;font-size:.9rem;font-weight:850;box-shadow:0 8px 20px #10131a0f;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.diatonic-build-heading button:hover{border-color:#2a7cc15c;background:#eef7fc;box-shadow:0 10px 24px #2a7cc11a;transform:translateY(-1px)}.diatonic-key-strip,.diatonic-build-path{display:grid;gap:8px}.diatonic-key-strip{grid-template-columns:repeat(7,minmax(0,1fr))}.diatonic-key-strip>span,.diatonic-build-path>span{min-width:0;display:grid;gap:5px;align-content:center;justify-items:center;border-radius:8px;text-align:center}.diatonic-key-strip>span{min-height:72px;border:1px solid rgba(16,19,26,.07);background:#fff;color:#344052;box-shadow:inset 0 -6px #10131a0a}.diatonic-key-strip>span.used{border-color:color-mix(in srgb,var(--note-color) 36%,rgba(16,19,26,.08));background:color-mix(in srgb,var(--note-color) 16%,#fff);box-shadow:inset 0 -6px color-mix(in srgb,var(--note-color) 54%,#fff)}.diatonic-key-strip>span.skipped{background:#eef2f6;color:#7d8796;box-shadow:inset 0 -6px #10131a0a}.diatonic-key-strip>span.root{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--note-color) 64%,#fff),inset 0 -6px color-mix(in srgb,var(--note-color) 54%,#fff)}.diatonic-key-strip strong,.diatonic-build-path strong{overflow:hidden;max-width:100%;font-weight:950;line-height:1;text-overflow:ellipsis;white-space:nowrap}.diatonic-key-strip strong{font-size:clamp(1rem,1.8vw,1.25rem)}.diatonic-key-strip small{min-height:22px;border-radius:999px;padding:5px 8px;background:#ffffffc7;color:#546072;font-size:.68rem;font-weight:950;line-height:1;text-transform:uppercase}.diatonic-build-path{grid-template-columns:repeat(5,minmax(0,1fr))}.diatonic-build-path>span{min-height:118px;border:1px solid rgba(16,19,26,.08);padding:12px 8px;background:#fff;color:#172033;box-shadow:0 10px 24px #10131a0a;transition:box-shadow .14s ease,filter .14s ease}.diatonic-build-path>span.used{border-color:color-mix(in srgb,var(--note-color) 40%,rgba(16,19,26,.08));background:linear-gradient(145deg,color-mix(in srgb,var(--note-color) 20%,#fff),#fffffff0);box-shadow:inset 0 -7px color-mix(in srgb,var(--note-color) 58%,#fff)}.diatonic-build-path>span.skipped{background:#f0f3f7;color:#7c8797}.diatonic-build-path>span.playing{filter:saturate(1.16) brightness(1.03);box-shadow:inset 0 0 0 4px #ffffffe0,inset 0 -7px color-mix(in srgb,var(--note-color) 68%,#fff),0 14px 28px color-mix(in srgb,var(--note-color) 18%,transparent)}.diatonic-build-path small{min-height:25px;display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;background:#10131a12;color:#4f5a6c;font-size:.68rem;font-weight:950;line-height:1;text-transform:uppercase}.diatonic-build-path>span.used small{background:var(--note-color);color:#fff}.diatonic-build-path strong{font-size:clamp(1.35rem,3vw,2rem)}.diatonic-build-path em{color:var(--muted);font-size:.78rem;font-style:normal;font-weight:850;line-height:1.1}.diatonic-result-card{display:grid;gap:5px;border:1px solid rgba(47,185,134,.18);border-radius:8px;padding:12px 14px;background:#f0faf6c2;color:#172033}.diatonic-result-card span{color:#18805b;font-size:.72rem;font-weight:950;line-height:1;text-transform:uppercase}.diatonic-result-card strong{font-size:clamp(1rem,2vw,1.2rem);font-weight:950;line-height:1.15}.diatonic-result-card p{margin:0;color:#36614f;font-size:.9rem;font-weight:800;line-height:1.35}.diatonic-choice-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.diatonic-choice-list>button{min-height:74px;display:grid;gap:5px;align-content:center;border:1px solid rgba(16,19,26,.09);border-radius:8px;padding:12px;background:#ffffffdb;color:#252c39;cursor:pointer;text-align:left;box-shadow:0 10px 24px #10131a0d;transition:background .14s ease,box-shadow .14s ease,transform .14s ease}.diatonic-choice-list>button:hover{transform:translateY(-1px);box-shadow:0 14px 28px #10131a17}.diatonic-choice-list>button.active{background:var(--ink);color:#fff;box-shadow:0 16px 32px #10131a29}.diatonic-choice-list>button span{color:var(--blue);font-size:.76rem;font-weight:950}.diatonic-choice-list>button.active span,.diatonic-choice-list>button.active small{color:#ffffffb8}.diatonic-choice-list>button strong{font-weight:950}.diatonic-choice-list>button small{color:var(--muted);font-weight:850}.diatonic-chord-quiz-widget{gap:18px}.diatonic-chord-quiz-question h2{max-width:720px}.diatonic-chord-quiz-question small{margin-left:8px}.diatonic-chord-quiz-scale{display:grid;gap:10px;border-radius:8px;padding:14px;background:#ffffffb8;box-shadow:inset 0 0 0 1px #10131a14}.diatonic-chord-quiz-scale-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.diatonic-chord-quiz-scale-scroll .note-rail{min-width:520px}.diatonic-chord-answer-grid{display:grid;gap:10px}.diatonic-chord-answer-row{display:grid;grid-template-columns:minmax(116px,.5fr) minmax(0,1fr);gap:10px;align-items:stretch;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:8px;background:#fffc;transition:border-color .14s ease,box-shadow .14s ease}.diatonic-chord-answer-row.playing{border-color:#0bb5d642;box-shadow:0 12px 28px #0bb5d614}.diatonic-chord-degree{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;border-radius:8px;padding:8px 10px;background:#f8fbffeb;color:#252c39}.diatonic-chord-degree span{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:950}.diatonic-chord-degree strong{overflow:hidden;font-size:1.05rem;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.diatonic-quality-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.diatonic-quality-option{min-width:0;min-height:46px;border:1px solid rgba(16,19,26,.1);border-radius:8px;padding:0 10px;background:#ffffffe0;color:#303848;cursor:pointer;font-size:.82rem;font-weight:950;transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.diatonic-quality-option:hover:not(:disabled){transform:translateY(-1px);border-color:#10131a2e}.diatonic-quality-option.selected{border-color:#10131ab3;background:#252c39;color:#fff}.diatonic-quality-option.correct{border-color:#2fb9866b;background:#2fb98629;color:#16704f}.diatonic-quality-option.wrong{border-color:#ef6f6175;background:#ef6f6129;color:#a83d33}.diatonic-quality-option:disabled{cursor:default}.relative-notation-widget{display:grid;gap:14px}.relative-key-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.relative-key-picker button{min-height:38px;border:0;border-radius:8px;padding:0 13px;background:#ffffffdb;color:#303848;cursor:pointer;font-weight:950;box-shadow:inset 0 0 0 1px #10131a14}.relative-key-picker button.active{background:var(--ink);color:#fff;box-shadow:none}.relative-notation-stage{display:grid;gap:14px}.relative-notation-stage .widget-mini-heading strong{font-size:1.08rem}.relative-roman-row{display:grid;grid-template-columns:repeat(8,minmax(72px,1fr));gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.relative-roman-row button{min-width:72px;min-height:74px;display:grid;align-content:center;justify-items:center;gap:6px;border:0;border-radius:8px;padding:10px 8px;background:color-mix(in srgb,var(--note-color) 72%,#fff);color:#fff;cursor:pointer;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.22);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.relative-roman-row button:hover,.relative-roman-row button.playing{filter:saturate(1.14) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 0 0 4px #ffffffa8,0 14px 30px #10131a1f}.relative-roman-row button.return-home{box-shadow:inset 0 -7px #10131a38}.relative-roman-row strong{font-size:1.12rem;font-weight:950}.relative-roman-row span{font-size:.82rem;font-weight:950;white-space:nowrap}.relative-notation-rail-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.relative-notation-rail-scroll .note-rail{min-width:calc(var(--rail-count, 37) * 42px)}.relative-mapping-list{display:grid;gap:8px}.relative-mapping-list div{display:grid;grid-template-columns:minmax(0,1fr) minmax(72px,auto) minmax(42px,auto);gap:12px;align-items:center;border-radius:8px;padding:10px 12px;background:#ffffffc7;color:#252c39}.relative-mapping-list span{font-weight:900}.relative-mapping-list em{color:var(--muted);font-family:Georgia,serif;font-style:italic;font-weight:700}.relative-mapping-list strong{color:var(--blue);font-size:1.05rem;font-weight:950;text-align:right}.chord-progression-widget{display:grid;gap:14px}.chord-progression-player{display:grid;grid-template-columns:auto minmax(62px,auto) minmax(0,1fr);gap:8px;align-items:center;min-height:44px;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:8px 10px;background:#f6f8fb;color:#313947}.chord-progression-player span,.chord-progression-player em{min-width:0;color:#667182;font-size:.78rem;font-style:normal;font-weight:850}.chord-progression-player strong{color:var(--blue);font-size:1rem;font-weight:950;text-align:center}.chord-progression-playhead{display:grid;gap:4px}.chord-progression-playhead-row{display:grid;grid-template-columns:repeat(var(--progression-row-columns, var(--progression-columns, 4)),minmax(0,1fr));gap:4px}.chord-progression-playhead-row span{height:8px;border-radius:999px;background:color-mix(in srgb,var(--note-color) 38%,#d9e1ec);opacity:.56;transition:opacity .14s ease,transform .14s ease,background .14s ease}.chord-progression-playhead-row span.playing{background:var(--note-color);opacity:1;transform:scaleY(1.35)}.chord-progression-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}.chord-progression-row{display:grid;grid-template-columns:repeat(var(--progression-row-columns, var(--progression-columns, 4)),minmax(74px,1fr));gap:4px}.chord-progression-grid button{min-height:78px;display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;gap:4px;border:0;border-radius:8px;padding:8px 8px 10px;background:linear-gradient(180deg,#ffffff29,#10131a14),color-mix(in srgb,var(--note-color) 74%,#fff);color:#fff;cursor:pointer;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.24);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.chord-progression-grid button:hover,.chord-progression-grid button.playing{filter:saturate(1.14) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 0 0 4px #ffffffa8,0 14px 30px #10131a1f}.chord-progression-grid small{width:24px;height:24px;display:inline-grid;place-items:center;border-radius:999px;background:#10131a33;color:#ffffffe0;font-size:.72rem;font-weight:950;line-height:1}.chord-progression-grid strong{font-size:1.12rem;font-weight:950}.chord-progression-grid span{font-size:.82rem;font-weight:950;white-space:nowrap}.chord-map-widget{display:grid;gap:16px}.chord-map-key-picker{justify-content:center}.chord-map-mode-row{display:inline-flex;justify-self:center;overflow:hidden;border:1px solid rgba(16,19,26,.1);border-radius:8px;background:#eef2f6}.chord-map-mode-row button{min-width:96px;min-height:44px;border:0;border-radius:0;background:transparent;color:#4d5867;font-weight:950}.chord-map-mode-row button.active{background:#252c39;color:#fff}.chord-map-stage{display:grid;gap:14px}.chord-map-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:4px 0 8px}.chord-map-board{position:relative;width:min(100%,600px);min-width:440px;min-height:560px;margin-inline:auto;border:1px solid rgba(16,19,26,.08);border-radius:8px;background:linear-gradient(rgba(16,19,26,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(16,19,26,.022) 1px,transparent 1px),#f8fbffd1;background-size:42px 42px}.chord-map-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.chord-map-arrows line{stroke:#3139478a;stroke-width:.9;vector-effect:non-scaling-stroke}.chord-map-arrows line.active{stroke:var(--blue);stroke-width:1.35}.chord-map-arrows marker path{fill:#3139479e}.chord-map-board button{position:absolute;left:var(--map-x);top:var(--map-y);width:82px;height:82px;display:grid;place-items:center;gap:2px;border:0;border-radius:8px;padding:9px;background:linear-gradient(180deg,#ffffff2e,#10131a1a),color-mix(in srgb,var(--note-color) 74%,#fff);color:#fff;cursor:pointer;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.24);transform:translate(-50%,-50%);transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.chord-map-board button:hover,.chord-map-board button.active{filter:saturate(1.14) brightness(1.04);transform:translate(-50%,calc(-50% - 1px));box-shadow:inset 0 0 0 4px #ffffffa8,0 16px 34px #10131a24}.chord-map-board button strong{font-size:1.3rem;font-weight:950;line-height:1}.chord-map-board button span{font-size:.82rem;font-weight:950;line-height:1}.chord-map-feedback{display:grid;gap:4px;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:12px 14px;background:#f6f8fb}.chord-map-feedback p,.chord-map-feedback small{margin:0;color:#4d5867;font-weight:850;line-height:1.42}.chord-map-feedback small{color:var(--blue)}.progression-workbench-widget{display:grid;gap:18px}.progression-workbench-header{display:flex;gap:16px;align-items:start;justify-content:space-between;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:16px;background:linear-gradient(135deg,#0bb5d614,#18e0c81a),#fff}.progression-workbench-header div{display:grid;gap:6px}.progression-workbench-header span,.progression-palette>span,.progression-builder-heading span{color:var(--muted);font-size:.76rem;font-weight:950;letter-spacing:.04em;text-transform:uppercase}.progression-workbench-header h3{margin:0;font-size:clamp(1.28rem,2.2vw,1.9rem)}.progression-workbench-header p{max-width:56ch;margin:0;color:#3c4656}.progression-workbench-header button,.progression-builder-heading button,.progression-workbench-actions button{display:inline-flex;gap:8px;align-items:center;justify-content:center;border:0;border-radius:8px;min-height:40px;padding:10px 14px;background:#10131a;color:#fff;font-weight:950;cursor:pointer}.progression-workbench-grid{display:grid;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);gap:14px;align-items:start}.progression-palette,.progression-builder{display:grid;gap:12px;border:1px solid rgba(16,19,26,.08);border-radius:8px;padding:14px;background:#ffffffc2}.progression-palette>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.progression-palette-card{display:grid;gap:5px}.progression-add-chord,.progression-hear-chord,.progression-slots button,.progression-empty-slot{display:grid;align-content:center;justify-items:center;gap:4px;border:0;border-radius:8px;padding:10px 8px;background:linear-gradient(180deg,#ffffff29,#10131a14),color-mix(in srgb,var(--note-color) 72%,#fff);color:#fff;cursor:pointer;text-align:center;text-shadow:0 1px 8px rgba(16,19,26,.24);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.progression-add-chord,.progression-slots button,.progression-empty-slot{min-height:72px}.progression-hear-chord{min-height:34px;display:inline-flex;font-size:.74rem}.progression-add-chord:hover,.progression-hear-chord:hover,.progression-slots button.filled:hover,.progression-slots button.playing{filter:saturate(1.12) brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 0 0 4px #fff9,0 14px 30px #10131a1f}.progression-add-chord strong,.progression-slots strong{font-size:1.08rem;font-weight:950}.progression-add-chord small,.progression-slots span{font-size:.82rem;font-weight:950;white-space:nowrap}.progression-builder-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.progression-builder-heading button{min-height:34px;padding:8px 10px;background:#10131a14;color:#252c39}.progression-slots{display:grid;grid-template-columns:repeat(4,minmax(76px,1fr));gap:8px}.progression-empty-slot{background:#eef3f8;color:#667182;text-shadow:none}.progression-slots button.filled{color:#fff;text-shadow:0 1px 8px rgba(16,19,26,.24)}.progression-slots small{color:#ffffffc7;font-size:.66rem;font-weight:900;text-transform:uppercase}.progression-workbench-actions{display:flex;gap:10px;flex-wrap:wrap}.progression-workbench-actions button:disabled{opacity:.48;cursor:not-allowed}.progression-feedback{display:grid;gap:6px;min-height:72px;border-radius:8px;padding:12px 14px;background:#f6f8fb;color:#313947}.progression-feedback p,.progression-feedback small{margin:0}.progression-feedback p{font-weight:850}.progression-feedback small{color:var(--muted);font-weight:750}.pitch-volume-widget{grid-template-columns:minmax(0,1fr) minmax(260px,.38fr)}.pitch-volume-canvas{-webkit-user-select:none;user-select:none}.pitch-volume-canvas canvas{pointer-events:none}.pitch-volume-pad-panel{display:grid;gap:14px;align-content:start;padding:14px;border:1px solid rgba(16,19,26,.08);border-radius:8px;background:#ffffffc2}.pad-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pad-readout span{display:grid;gap:2px;min-height:58px;align-content:center;border-radius:8px;padding:10px 12px;background:#f8fbffeb;color:#5d6675;font-size:.78rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase}.pad-readout strong{color:var(--blue);font-size:1.22rem;letter-spacing:0;text-transform:none}.pitch-volume-sliders{display:grid;gap:10px}.pitch-volume-sliders label{display:grid;gap:6px}.pitch-volume-sliders span{color:#4f5a69;font-size:.8rem;font-weight:950;text-transform:uppercase}.pitch-volume-sliders input{width:100%}.pitch-volume-pad{position:relative;min-height:220px;aspect-ratio:1 / 1;overflow:hidden;border:1px solid rgba(16,19,26,.1);border-radius:8px;background:linear-gradient(rgba(16,19,26,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,19,26,.035) 1px,transparent 1px),linear-gradient(135deg,#0bb5d61f,#18e0c81f 58%,#f7c94b24);background-size:28px 28px,28px 28px,auto;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.pitch-volume-pad:before,.pitch-volume-pad:after{position:absolute;content:"";background:#10131a1a;pointer-events:none}.pitch-volume-pad:before{left:0;right:0;top:50%;height:1px}.pitch-volume-pad:after{bottom:0;left:50%;top:0;width:1px}.pitch-volume-pad.is-dragging{border-color:#0bb5d67a;box-shadow:inset 0 0 0 1px #0bb5d62e,0 18px 42px #0bb5d61f}.pad-axis{position:absolute;color:#10131a80;font-size:.66rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.pad-axis.top{top:10px;left:12px}.pad-axis.bottom{bottom:10px;left:12px}.pad-axis.left{left:12px;top:50%;transform:translateY(-50%)}.pad-axis.right{right:12px;top:50%;transform:translateY(-50%)}.pitch-volume-dot{position:absolute;z-index:2;width:34px;height:34px;border:5px solid #fff;border-radius:999px;background:var(--blue);box-shadow:0 12px 30px #0bb5d652,0 0 0 1px #10131a0f;transform:translate(-50%,-50%);pointer-events:none}.touchpad-hint{position:absolute;right:12px;bottom:12px;min-height:30px;display:inline-flex;align-items:center;border-radius:999px;padding:0 11px;background:#ffffffd1;color:#516074;font-size:.72rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px #10131a14}.touchpad-hint.widget-stable-slot>.widget-stable-variant{align-self:center;justify-self:center;text-align:center}.hero-shaper-card .pitch-volume-widget{grid-template-columns:1fr;grid-template-rows:130px 188px;gap:10px}.hero-shaper-card .pitch-volume-canvas{height:130px;min-height:0;background:#f8fbffb8}.hero-shaper-card .pitch-volume-canvas canvas{height:130px;min-height:0}.hero-shaper-card .axis-label,.hero-shaper-card .pad-axis,.hero-shaper-card .touchpad-hint,.hero-shaper-card .widget-play-button,.hero-shaper-card .pad-readout span,.hero-shaper-card .pad-readout strong{white-space:nowrap}.hero-shaper-card .axis-label.top,.hero-shaper-card .axis-label.bottom{left:50%;right:auto;transform:translate(-50%)}.hero-shaper-card .pitch-volume-pad-panel{grid-template-columns:minmax(156px,.34fr) minmax(0,1fr);grid-template-rows:132px 46px;align-items:stretch;gap:10px;height:188px;padding:0;border:0;background:transparent}.hero-shaper-card .pad-readout{height:132px;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.hero-shaper-card .pad-readout span{overflow:hidden;min-height:0;padding:8px 12px;background:#f8fbffe0}.hero-shaper-card .pad-readout strong{min-width:7ch;font-size:clamp(1.34rem,1.8vw,1.75rem);font-variant-numeric:tabular-nums;line-height:1}.hero-shaper-card .pitch-volume-sliders{display:none}.hero-shaper-card .pitch-volume-pad{grid-column:2;grid-row:1;height:132px;min-height:0;aspect-ratio:auto}.hero-shaper-card .pad-axis.top,.hero-shaper-card .pad-axis.bottom{left:50%;right:auto;transform:translate(-50%)}.hero-shaper-card .pitch-volume-dot{width:30px;height:30px;border-width:4px}.hero-shaper-card .touchpad-hint{min-height:28px;padding-inline:10px;font-size:.66rem}.hero-shaper-card .widget-play-button{grid-column:1 / -1;grid-row:2;justify-self:start;width:auto;min-height:42px;height:42px;font-size:.94rem}.wave-choice-widget{display:grid;gap:clamp(14px,2vw,20px)}.choice-question{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center}.choice-question strong{color:#252c39}.wave-choice-check{min-height:36px;border:1px solid rgba(16,19,26,.12);border-radius:999px;padding:0 14px;background:#ffffffdb;color:#233044;cursor:pointer;display:inline-flex;gap:7px;align-items:center;justify-content:center;font-size:.82rem;font-weight:950;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.wave-choice-check:hover{border-color:#2a7cc14d;box-shadow:0 8px 18px #10131a14;transform:translateY(-1px)}.wave-choice-check:disabled{cursor:not-allowed;opacity:.5;transform:none}.wave-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,16px)}.wave-choice-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.wave-choice-actions .wave-choice-check{flex-shrink:0}.wave-choice-feedback{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transform:translateY(8px);transition:grid-template-rows .32s ease,opacity .24s ease,transform .32s ease,visibility 0s .32s}.wave-choice-feedback.is-revealed{grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}.wave-choice-feedback-inner{min-height:0;overflow:hidden}.wave-choice-card .wave-choice-card-status{display:inline-flex;align-items:center;gap:6px}.wave-choice-card-status[data-empty=true]{visibility:hidden}.wave-choice-card:is(.correct,.wrong) .wave-choice-card-status{animation:wave-choice-status-in .24s ease both}@keyframes wave-choice-status-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.wave-choice-feedback{transition:none;transform:none}.wave-choice-card:is(.correct,.wrong) .wave-choice-card-status{animation:none}}.wave-choice-card{min-width:0;border:1px solid rgba(16,19,26,.1);border-radius:8px;padding:14px;background:#ffffffd6;color:var(--ink);cursor:pointer;display:grid;gap:10px;text-align:left;box-shadow:0 14px 34px #10131a0f;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.wave-choice-card:hover{border-color:#2a7cc14d;background:#fff;box-shadow:0 18px 38px #10131a17;transform:translateY(-1px)}.wave-choice-card.selected{border-color:#2a7cc185;box-shadow:0 0 0 3px #2a7cc11a,0 16px 36px #10131a14}.wave-choice-card.correct{border-color:#2fb98694;background:#f1fbf6;box-shadow:0 0 0 3px #2fb9861f,0 16px 36px #2fb9861f}.wave-choice-card.wrong{border-color:#da4b4480;background:#fff4f2;box-shadow:0 0 0 3px #da4b441a,0 16px 36px #da4b441a}.wave-choice-card:disabled{cursor:default;opacity:1;transform:none}.wave-choice-card-head{display:flex;gap:10px;align-items:center;justify-content:space-between}.wave-choice-card-head strong{color:#252c39;font-size:.95rem;font-weight:950}.wave-choice-card-head small{min-height:26px;border-radius:999px;padding:5px 9px;background:#10131a0d;color:#516071;display:inline-flex;align-items:center;font-size:.74rem;font-weight:900;line-height:1}.wave-choice-card .wave-svg{height:auto;min-height:0}.wave-choice-card .wave-figure{display:grid;min-width:0;align-self:center;gap:8px}.wave-choice-card .wave-caption{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;font-weight:500}.wave-choice-card .wave-caption:empty{display:none}.wave-choice-card .wave-caption span{color:var(--wave-color)}.wave-choice-card .wave-label{display:none}.wave-choice-card-status{width:fit-content;min-height:26px;border-radius:999px;padding:5px 9px;background:#10131a0f;color:#3d4858;font-size:.72rem;font-weight:950;line-height:1}.wave-choice-card.correct .wave-choice-card-status{background:#2fb98624;color:#14704d}.wave-choice-card.wrong .wave-choice-card-status{background:#da4b4421;color:#9d332d}.choice-answer{min-height:24px;margin:0;color:var(--muted);font-size:.92rem;font-weight:850;line-height:1.45}.choice-answer.visible{color:#263241}.wave-choice-reveal{display:grid;gap:10px;border:1px solid rgba(16,19,26,.1);border-radius:8px;padding:14px;background:#ffffffc7}.wave-choice-reveal.correct{border-color:#2fb98647;background:#f1fbf6d6}.wave-choice-reveal.wrong{border-color:#da4b4438;background:#fff8f6d6}.wave-choice-picked,.wave-choice-listen-note{margin:0;color:var(--muted);font-size:.9rem;font-weight:780;line-height:1.45}.wave-choice-play-row{display:flex;flex-wrap:wrap;gap:8px}.wave-choice-play-row .widget-play-button{width:auto;min-height:38px;padding-inline:13px;font-size:.86rem}.fret-string button.has-note.playing{background:var(--coral);box-shadow:0 0 0 6px #ef6f6129}.melody-row button.playing{background:linear-gradient(135deg,var(--coral),var(--gold));box-shadow:0 0 0 5px #ef6f6129,0 14px 28px #ef6f612e}.degree-pad button.playing{outline:5px solid rgba(255,255,255,.9);outline-offset:-8px;box-shadow:0 18px 36px color-mix(in srgb,var(--degree-color) 38%,transparent)}.phrase-readout{min-height:36px;gap:8px}.phrase-readout span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--degree-color);color:#fff;font-size:.78rem;font-weight:950;box-shadow:0 10px 22px color-mix(in srgb,var(--degree-color) 24%,transparent)}.chromatic-strip button.playing{filter:saturate(1.18) brightness(1.04);box-shadow:inset 0 0 0 4px #ffffffeb,0 14px 30px #10131a29}.eyebrow,.price-label{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:.16em}.header-login,.header-cta,.primary-action,.secondary-action,.play-button,.big-play,.ratio-picker button,.auth-tabs button,.static-action{border-radius:12px;font-weight:700;letter-spacing:-.01em;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s ease,background .2s ease,box-shadow .24s ease,filter .2s ease}.header-cta,.primary-action,.play-button,.big-play,.static-action{position:relative;background:var(--brand);box-shadow:none;color:#fff;border-radius:999px}.header-cta:hover,.primary-action:hover,.play-button:hover,.big-play:hover,.static-action:hover{transform:translateY(-1px);background:var(--brand-deep)}.primary-action:active,.header-cta:active,.static-action:active{transform:translateY(0)}.secondary-action{border-radius:999px;border-color:var(--line-strong);background:#ffffffb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);color:var(--ink)}.secondary-action:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand-deep);transform:translateY(-2px)}.compact-action{margin-top:8px}.app-header{inset:14px auto auto 50%;transform:translate(-50%);width:min(1200px,calc(100% - 28px));padding:10px 12px 10px 20px;border:1px solid var(--line);border-radius:999px;background:#ffffffd9;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:box-shadow .24s ease,background .24s ease}.brand{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}.nav-links{font-weight:600}.nav-links a{position:relative;padding:4px 2px;transition:color .18s ease}.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:999px;background:var(--grad-brand);transition:right .22s cubic-bezier(.22,1,.36,1)}.nav-links a:hover:after{right:0}.hero{border-bottom:none}.hero-content .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:#ffffffa8;-webkit-background-clip:border-box;background-clip:border-box;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--brand-deep);-webkit-text-fill-color:currentColor}.hero-content .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 0 3px var(--brand-tint)}.hero-copy{color:#3a4258}.hero-proof span{border:1px solid var(--line);background:#ffffff9e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;box-shadow:var(--shadow-sm)}.hero-demo,.hero-shaper-card{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:#fff}.price-card,.control-stack,.visual-frame{border-radius:var(--radius-lg);border:1px solid var(--line)}.price-card{background:#fff;box-shadow:var(--shadow)}.price{font-family:var(--font-display);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}.tiny-piano button{border-radius:10px;border-color:var(--line)}.tiny-piano button:hover,.tiny-piano button.is-hit,.tiny-piano button:active{background:var(--piano-playing);color:var(--piano-playing-ink);border-color:var(--piano-playing-line);transform:translateY(2px);box-shadow:var(--shadow-glow)}.path-row{border-radius:var(--radius);padding:24px clamp(16px,3vw,30px);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.path-row:before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;pointer-events:none;transition:border-color .2s ease}.path-row:hover{background:#ffffffb3;transform:translate(4px);box-shadow:var(--shadow-sm)}.path-row:hover:before{border-color:color-mix(in srgb,var(--brand) 28%,transparent)}.path-row strong{font-family:var(--font-display)}.catalog-unit-header{grid-template-columns:minmax(0,1fr);gap:10px;padding:0 0 6px;border-bottom:none}.catalog-unit-meta{align-items:center;gap:10px;color:var(--muted)}.catalog-unit-meta span:first-child{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border-radius:12px;background:var(--grad-brand);box-shadow:var(--shadow-glow);color:#fff;font-size:.95rem;letter-spacing:0}.catalog-unit-meta span:not(:first-child){padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff9}.catalog-unit h2{font-family:var(--font-display)}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:16px;margin-top:clamp(18px,2.5vw,26px)}.catalog-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:168px;padding:20px 20px 18px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--radius);background:#ffffffb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,border-color .24s ease,background .24s ease}.catalog-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)}.catalog-card:not(.locked):hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 36%,transparent);box-shadow:var(--shadow);background:#fff;color:var(--ink)}.catalog-card:not(.locked):hover:before{transform:scaleX(1)}.catalog-card .lesson-number{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--brand-tint);color:var(--brand-deep);font-family:var(--font-mono);font-size:1.05rem;font-weight:700;letter-spacing:0;-webkit-text-fill-color:currentColor}.catalog-card strong{font-family:var(--font-display);font-size:clamp(1.16rem,1.4vw,1.4rem);line-height:1.12;letter-spacing:-.015em;margin-top:16px}.catalog-card .lesson-status{margin-top:auto;align-self:flex-start;justify-self:start;min-width:0}.catalog-card:not(.locked) .lesson-status{border-color:color-mix(in srgb,var(--brand) 28%,transparent);color:var(--brand-deep);background:#ffffff80}.catalog-card.completed{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:#18e0c80f}.catalog-card.completed .lesson-number,.lesson-check{background:#0e9c7b24;color:#0e9c7b}.catalog-card.locked{background:#ffffff6b}.catalog-card.locked .lesson-number{background:#0a283a0f;color:var(--muted)}.catalog-progress-bar span,.catalog-account-topline strong{background:var(--grad-brand)}.catalog-account-topline strong{-webkit-background-clip:text;background-clip:text;color:transparent}.catalog-progress-bar span{border-radius:999px}.catalog-continue{padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)}.catalog-continue h2{font-family:var(--font-display)}.lesson-page-hero h1{letter-spacing:-.035em}.definition-card,.lesson-widget-surface,.lesson-quote-block blockquote{border-radius:var(--radius-lg)}.lesson-widget-surface{border:1px solid var(--line);box-shadow:var(--shadow-sm)}.lesson-quote-block blockquote{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}.complete-pill.as-button{border-radius:999px}.auth-scrim{background:#0c0e188c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.auth-panel{border-radius:var(--radius-xl);border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#fff}.auth-form input{border-radius:12px;border-color:var(--line-strong)}.auth-form input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--brand) 60%,transparent);box-shadow:0 0 0 4px var(--brand-tint)}.widget-play-button{border-radius:999px}:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}@media(max-width:980px){.app-header{grid-template-columns:1fr auto}.nav-links{display:none}.hero{min-height:0;padding-top:98px;padding-bottom:34px}.hero-inner,.catalog-hero-inner,.pricing-inner,.preview-lab,.lesson-widget,.lesson-pair-block,.pitch-volume-widget,.lesson-end-nav{grid-template-columns:1fr}.hero-demo{display:none}.catalog-account{max-width:520px}}@media(max-width:860px){.mode-table-scroll{overflow-x:visible}.mode-table-widget table,.mode-table-widget thead,.mode-table-widget tbody,.mode-table-widget tr,.mode-table-widget th,.mode-table-widget td{display:block}.mode-table-widget table{min-width:0}.mode-table-widget thead{display:none}.mode-table-widget tbody{display:grid;gap:12px}.mode-table-widget tbody tr{padding:14px;border:1px solid rgba(16,19,26,.09);border-radius:8px;background:#ffffffbd}.mode-table-widget tbody tr.active{box-shadow:inset 4px 0 0 var(--mode-color)}.mode-table-widget th,.mode-table-widget td{border-bottom:0;padding:0}.mode-table-widget td:not(.mode-table-action-cell){display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}.mode-table-widget td:not(.mode-table-action-cell):before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:950;text-transform:uppercase}.mode-table-action-cell{margin-top:14px}.mode-table-play{width:100%}}@media(max-width:720px){.header-actions{gap:6px}.header-login{display:none}.header-cta{min-height:40px;padding-inline:14px}h1{font-size:clamp(3.05rem,18vw,4.6rem)}.hero,.catalog-hero{padding-inline:18px}.section-inner,.lesson-preview-inner,.catalog-shell,.lesson-page-hero-inner,.lesson-article,.lesson-end-nav{width:min(100% - 36px,680px)}.bar-chart-plot{overflow-x:auto;overscroll-behavior-x:contain;grid-template-columns:repeat(var(--bar-count, 7),minmax(44px,1fr));padding-bottom:8px}.wave-choice-grid{grid-template-columns:1fr}.wave-choice-card{padding:13px}.bar-chart-item{min-width:44px}.mode-scale-identity{grid-template-columns:1fr}.mode-scale-identity .widget-play-button,.mode-keyboard-widget .widget-play-button{width:100%}.mode-key-grid{grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible}.mode-key-grid button{min-width:0;min-height:78px}.lesson-preview-topline,.catalog-continue{align-items:start;grid-template-columns:1fr;flex-direction:column}.catalog-unit-header{grid-template-columns:1fr;gap:10px}.catalog-unit-meta{padding-top:0}.lesson-hero-actions{position:static;margin-top:24px}.preview-story article{grid-template-columns:1fr;gap:16px}.preview-lab{grid-column:auto}.lesson-pair-copy{max-width:720px}.lesson-widget-copy{grid-template-columns:1fr;gap:6px}.big-play{width:100%;height:72px;flex-direction:row;border-radius:8px}.path-row,.catalog-card{grid-template-columns:44px minmax(0,1fr);gap:8px 18px;min-height:0;padding-block:18px}.path-row span{grid-column:1 / -1}.lesson-status{grid-column:2;justify-self:start;min-width:0;margin-top:4px}.path-row small{display:none}.flow-list article{grid-template-columns:1fr;gap:10px}.lesson-end-actions{justify-content:start}.quiz-choice-card{grid-template-columns:1fr;min-height:0}.quiz-choice-meta{justify-content:start}.interval-quiz-widget{min-height:0;gap:16px}.interval-quiz-question h2{font-size:2rem}.interval-quiz-ready-panel h2{font-size:2.2rem}.interval-quiz-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.interval-quiz-choice-grid .interval-quiz-choice:last-child:nth-child(odd){grid-column:1 / -1}.chord-quiz-widget{min-height:0}.chord-quiz-question h2{font-size:clamp(1.5rem,6vw,2.2rem)}.chord-quiz-strip-wrap{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px}.chord-quiz-strip{min-width:520px}.chord-quiz-compare-panel{grid-template-columns:1fr}.diatonic-key-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.diatonic-key-strip>span{min-height:64px}.diatonic-build-heading{grid-template-columns:1fr}.diatonic-build-heading span,.diatonic-build-heading strong,.diatonic-build-heading button{grid-column:1}.diatonic-build-heading button{grid-row:auto;justify-self:start}.diatonic-build-path{grid-template-columns:1fr}.diatonic-build-path>span{min-height:72px;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;justify-items:start;padding:10px;text-align:left}.diatonic-build-path small{grid-row:1 / span 2}.diatonic-build-path strong,.diatonic-build-path em{grid-column:2}.diatonic-build-path strong{font-size:1.4rem}.diatonic-chord-answer-row{grid-template-columns:1fr}.diatonic-chord-degree{min-height:46px}.relative-mapping-list div{grid-template-columns:1fr auto}.relative-mapping-list em{grid-column:1}.relative-mapping-list strong{grid-column:2;grid-row:1 / span 2}.interval-quiz-visual{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px}.interval-quiz-arc-row,.interval-quiz-strip{min-width:520px}.interval-quiz-note-cell{min-height:54px}.interval-quiz-note-cell span{font-size:.78rem}.interval-quiz-note-cell small{min-width:20px;padding-inline:4px}.chromatic-strip{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.chromatic-interval-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:10px}.chromatic-interval-row span{min-width:38px;min-height:28px;padding-top:18px}.chromatic-map.scrollable .chromatic-strip,.chromatic-map.scrollable .chromatic-interval-row{display:grid;grid-template-columns:repeat(var(--chromatic-count, 13),minmax(44px,1fr));min-width:var(--chromatic-min-width)}.chromatic-map.scrollable .chromatic-interval-row span{min-width:0}.interval-table-scroll,.mode-table-scroll{overflow-x:visible}.interval-table-widget table,.interval-table-widget thead,.interval-table-widget tbody,.interval-table-widget tr,.interval-table-widget th,.interval-table-widget td,.mode-table-widget table,.mode-table-widget thead,.mode-table-widget tbody,.mode-table-widget tr,.mode-table-widget th,.mode-table-widget td{display:block}.interval-table-widget table,.mode-table-widget table{min-width:0}.interval-table-widget thead,.mode-table-widget thead{display:none}.interval-table-widget tbody,.mode-table-widget tbody{display:grid;gap:12px}.interval-table-widget tbody tr,.mode-table-widget tbody tr{padding:14px;border:1px solid rgba(16,19,26,.09);border-radius:8px;background:#ffffffbd}.interval-table-widget tbody tr.active,.mode-table-widget tbody tr.active{box-shadow:inset 4px 0 0 var(--blue)}.mode-table-widget tbody tr.active{box-shadow:inset 4px 0 0 var(--mode-color)}.interval-table-widget th,.interval-table-widget td,.mode-table-widget th,.mode-table-widget td{border-bottom:0;padding:0}.interval-table-widget td:not(.interval-table-action-cell),.mode-table-widget td:not(.mode-table-action-cell){display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}.interval-table-widget td:not(.interval-table-action-cell):before,.mode-table-widget td:not(.mode-table-action-cell):before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:950;text-transform:uppercase}.interval-table-action-cell,.mode-table-action-cell{margin-top:14px}.interval-table-play,.mode-table-play{width:100%}.mode-explorer-head{display:none}.mode-explorer-row{grid-template-columns:1fr;padding:12px}.mode-explorer-meta{grid-template-columns:1fr}.mode-explorer-play{width:100%}.mode-explorer-strip{grid-template-columns:repeat(13,minmax(42px,1fr))}.mode-explorer-strip button{min-width:42px}.consonance-spectrum{width:100%}.consonance-track-wrap{min-height:62px}.consonance-marker{min-width:76px;font-size:.72rem}.consonance-marker span{max-width:94px;white-space:normal}}@media(max-width:520px){.app-header{grid-template-columns:auto minmax(0,1fr);gap:10px;padding-inline:14px}.header-actions{min-width:0}.header-cta{min-width:0;max-width:100%;padding-inline:12px;text-align:center;white-space:normal}.brand span{display:none}.catalog-card{grid-template-columns:36px minmax(0,1fr);gap:8px 14px}.lesson-status{padding:6px 9px;font-size:.68rem}.hero-proof span,.ratio-picker button{flex:1 1 auto;justify-content:center}.tiny-piano{gap:4px}.tiny-piano button{min-height:60px}.primary-action,.secondary-action,.play-button,.static-action{width:100%}.hero-actions,.completion-actions{align-items:stretch;flex-direction:column}.visual-frame,.visual-frame canvas{min-height:220px}.lesson-page-hero{padding-inline:18px}.complete-pill.as-button{width:100%;justify-content:center}.lesson-widget-surface{padding:12px}.chord-build-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.chord-build-ruler button{min-height:76px}.chord-build-ruler button strong{font-size:.82rem}.chord-build-ruler button span{font-size:.62rem}.chord-build-path{gap:8px}.chord-build-path-item{flex-basis:100%}.chord-build-connector{min-width:62px}.chord-build-path-item button{min-height:104px}.note-rail.key-map{grid-template-columns:repeat(4,minmax(0,1fr))}.note-rail.key-map .note-rail-cell{min-height:72px}.lesson-copy-block p:not(.eyebrow),.lesson-list-block p,.lesson-quote-block p,.lesson-widget-copy p{overflow-wrap:anywhere}.note-row-track{min-width:calc(var(--note-row-units, 8) * 37px)}.note-row-track.with-gutter{min-width:calc(var(--note-row-gutter, 70px) + var(--note-row-units, 8) * 37px)}.note-row-beats,.note-duration-row{grid-template-columns:repeat(var(--note-row-units, 8),37px)}.note-row-beats.with-gutter,.note-duration-row.with-gutter{grid-template-columns:var(--note-row-gutter, 70px) repeat(var(--note-row-units, 8),37px)}.duration-tile{min-height:56px}.duration-note-symbol{width:28px;height:32px}.duration-note-symbol:before{left:3px;bottom:4px;width:18px;height:12px;border-width:2px}.duration-symbol-half:after,.duration-symbol-quarter:after,.duration-symbol-eighth:after{left:21px;top:2px;width:3px;height:25px}.duration-symbol-eighth i{left:21px;top:3px;width:7px;height:9px;border-top-width:2px;border-right-width:2px}.note-row-toolbar{align-items:stretch;flex-direction:column}.note-row-toolbar-copy,.note-row-badges{justify-content:flex-start;text-align:left}.note-row-toolbar-copy{width:100%;flex:0 1 auto;min-width:0}.time-signature-guide{grid-template-columns:1fr}.time-signature-fraction.large{justify-self:center}.rhythm-grid-controls{justify-content:start}.rhythm-tempo-control{width:100%;justify-content:space-between}.rhythm-grid-beats,.rhythm-grid-row{grid-template-columns:92px repeat(var(--steps),30px);gap:5px}.rhythm-grid-cell{width:30px;height:30px}.rhythm-grid-row-label{gap:6px;padding-right:6px;font-size:.78rem}.rhythm-grid-row-label span{width:24px;height:24px}.lesson-widget-chromaticRainbow.open-widget .widget-play-button,.lesson-widget-consonanceSlider.open-widget .widget-play-button,.lesson-widget-piano.open-widget .widget-play-button,.lesson-widget-ratioWaves.open-widget .widget-play-button,.lesson-widget-wave.open-widget .widget-play-button{justify-self:center;max-width:100%}.pitch-volume-canvas{min-height:240px}.widget-button-row,.quiz-actions{align-items:stretch;flex-direction:column}.scale-quiz-widget{min-height:0;gap:16px}.scale-quiz-widget .quiz-question h2{font-size:clamp(1.28rem,6.8vw,1.75rem)}.interval-quiz-choice-grid,.chord-quiz-choice-grid{grid-template-columns:1fr}.chord-quiz-choice{min-height:74px}.chord-quiz-strip button{min-height:64px;gap:4px}.chord-quiz-strip button span{font-size:.7rem}.chord-quiz-strip button small{min-width:24px;min-height:24px;padding:3px 6px;font-size:.66rem}.chord-quiz-count-row{min-width:520px;gap:8px}.chord-quiz-count-row span{width:34px;height:34px}.diatonic-chord-quiz-scale{padding:12px}.diatonic-quality-options{gap:6px}.diatonic-quality-option{min-height:44px;padding-inline:6px;font-size:.74rem}.relative-key-picker{justify-content:start}.relative-key-picker button{flex:1 1 68px}.relative-roman-row{grid-template-columns:repeat(8,minmax(78px,1fr))}.relative-notation-rail-scroll .note-rail{min-width:calc(var(--rail-count, 37) * 44px)}.chord-progression-player{grid-template-columns:minmax(0,1fr);gap:2px}.chord-progression-player strong{text-align:left}.chord-progression-playhead{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.chord-progression-playhead-row{grid-template-columns:repeat(var(--progression-row-columns, var(--progression-columns, 4)),minmax(12px,1fr))}.chord-progression-playhead-row span{min-width:12px}.chord-progression-grid{grid-template-columns:minmax(0,1fr);overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.chord-progression-row{grid-column:1 / -1;grid-template-columns:repeat(var(--progression-row-columns, var(--progression-columns, 4)),minmax(74px,1fr))}.chord-progression-grid button{min-width:74px}.chord-map-key-picker{justify-content:start}.chord-map-key-picker button{flex:1 1 68px}.chord-map-mode-row{justify-self:stretch}.chord-map-mode-row button{flex:1}.chord-map-board{min-width:390px;min-height:520px}.chord-map-board button{width:74px;height:74px}.progression-workbench-header,.progression-workbench-grid{grid-template-columns:1fr}.progression-workbench-header{display:grid}.progression-workbench-header button{width:100%}.progression-palette>div{grid-template-columns:repeat(4,minmax(68px,1fr));overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.progression-palette-card{min-width:68px}.progression-slots{grid-template-columns:repeat(4,minmax(76px,1fr));overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.progression-slots button,.progression-empty-slot{min-width:76px}.consonance-quiz-widget{min-height:0}.consonance-choice-row{grid-template-columns:1fr}.consonance-ear-play{width:min(150px,48vw)}.consonance-quiz-widget .consonance-feedback-actions{min-height:0;align-items:stretch;flex-direction:column;justify-content:flex-start}.consonance-quiz-widget .consonance-feedback-actions p{flex:0 1 auto}.interval-quiz-choice-grid .interval-quiz-choice:last-child:nth-child(odd){grid-column:auto}.widget-play-button,.widget-ghost-button{width:100%}.lesson-widget-chromaticRainbow.open-widget .widget-play-button,.lesson-widget-consonanceSlider.open-widget .widget-play-button,.lesson-widget-piano.open-widget .widget-play-button,.lesson-widget-ratioWaves.open-widget .widget-play-button,.lesson-widget-wave.open-widget .widget-play-button{width:auto}.wave-choice-play-row .widget-play-button{width:auto;flex:1 1 130px}.embedded-media-widget .widget-play-button{max-width:none}.price-card{padding:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}body:has(.discovery-shell){background:var(--paper)}body:has(.discovery-shell):before{display:none}.site-shell{color:var(--ink);background:var(--paper);min-height:100vh}.site-shell :is(a,button,input):focus-visible{outline:2px solid var(--brand);outline-offset:5px}.site-shell .app-header{position:fixed;inset:0 0 auto;transform:none;width:100%;max-width:none;margin:0;height:80px;grid-template-columns:1fr auto 1fr;gap:24px;padding:0 max(28px,calc((100% - 1184px)/2));background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}.site-shell .brand{line-height:1}.site-shell .nav-links{color:var(--muted);font-size:13px;font-weight:500;gap:28px}.site-shell .header-login{font-size:13px;font-weight:500;color:var(--ink);max-width:160px;overflow:hidden;text-overflow:ellipsis}.site-shell .header-cta{min-height:40px;padding:0 20px;border-radius:5px;font-size:13px;font-weight:500;background:var(--ink);color:var(--surface);box-shadow:none;border:1px solid var(--ink)}.site-shell .header-cta:hover{background:var(--ink-soft);transform:none;box-shadow:none}.home-page{width:min(1184px,calc(100% - 56px));margin:0 auto;padding-top:80px}.home-page :is(h1,h2,h3,h4){font-weight:650}.home-page .section-kicker{display:flex;align-items:center;gap:9px;margin:0 0 24px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.03em}.kicker-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}.discovery-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(40px,7vw,104px);padding:76px 0 64px}.discovery-hero h1{margin:0;font-size:clamp(54px,5.9vw,80px);font-weight:650;line-height:1.04;letter-spacing:-.055em}.discovery-hero h1 span{color:var(--ink)}.discovery-deck{max-width:415px;margin:27px 0 30px;color:var(--muted);font-size:16px;line-height:1.7}.discovery-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px}.discovery-button{display:inline-flex;min-height:48px;justify-content:center;align-items:center;gap:24px;padding:12px 22px;border:1px solid var(--ink);border-radius:5px;background:var(--ink);color:var(--surface);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}.discovery-button:hover{background:var(--ink-soft)}.discovery-text-link{font-size:13px;font-weight:500;padding:10px 0;border-bottom:1px solid var(--line-strong)}.discovery-text-link:hover{border-color:var(--ink)}.discovery-smallprint{margin:16px 0 0;font-size:11px;color:var(--muted)}.sound-specimen{position:relative;align-self:stretch;display:flex;flex-direction:column;min-width:0;padding:23px 27px 25px;border:1px solid transparent;border-radius:10px;background:var(--surface-soft);color:var(--ink)}.home-page .sound-specimen .pitch-volume-dot{border-color:var(--surface)}.home-page .sound-specimen .pitch-volume-pad:before,.home-page .sound-specimen .pitch-volume-pad:after{background:var(--line)}.home-page .sound-specimen .pitch-volume-pad-panel>.widget-play-button:hover{background:var(--brand-tint)}.specimen-caption>span:last-child{display:flex;align-items:center;gap:7px}.specimen-caption>span:last-child:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}.specimen-caption{font-family:var(--font-body);display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}.specimen-caption>span:last-child{white-space:nowrap}.specimen-heading{margin:23px 0 20px}.specimen-heading h2{margin:0;font-size:30px;line-height:1.17;font-weight:600;letter-spacing:-.045em}.specimen-note{margin:10px 0 0;font-size:11px;color:var(--muted)}.home-page .sound-specimen .home-widget{margin-top:auto}.home-page .sound-specimen .lesson-widget{margin:0}.home-page .sound-specimen .lesson-widget-surface{overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.home-page .sound-specimen .pitch-volume-widget{grid-template-columns:minmax(0,1fr);gap:16px}.home-page .sound-specimen .pitch-volume-canvas{height:clamp(180px,16vw,210px);min-height:0;border-radius:6px;background:transparent;border-color:transparent}.home-page .sound-specimen .pitch-volume-canvas .axis-label{display:none}.home-page .sound-specimen .pitch-volume-canvas canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0}.home-page .sound-specimen .pitch-volume-pad-panel{grid-template-columns:minmax(0,1fr) minmax(155px,1fr);grid-template-rows:1fr auto;gap:12px 16px;align-items:start;padding:0;border:0;background:transparent}.home-page .sound-specimen .pad-readout{grid-column:1;grid-row:1;grid-template-columns:1fr 1fr;gap:8px;align-self:start}.home-page .sound-specimen .pad-readout span{min-width:0;min-height:67px;padding:11px 9px;border:1px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:10px;letter-spacing:.035em}.home-page .sound-specimen .pad-readout strong{font-size:19px;font-weight:500;color:var(--ink);white-space:nowrap}.home-page .sound-specimen .pitch-volume-pad{grid-column:2;grid-row:1 / span 2;width:100%;height:155px;min-height:0;aspect-ratio:auto;border-radius:6px;background:var(--surface);border-color:var(--line)}.home-page .sound-specimen .pitch-volume-pad.is-dragging{border-color:var(--brand)}.home-page .sound-specimen .pitch-volume-pad:focus-visible{outline:2px solid var(--brand);outline-offset:4px}.home-page .sound-specimen .pitch-volume-pad-panel>.widget-play-button{grid-column:1;grid-row:2;align-self:end;justify-self:stretch;width:100%;min-height:42px;padding:0 10px;gap:8px;border-radius:5px;font-size:11px;white-space:nowrap;background:var(--paper)}.home-page .sound-specimen .widget-play-button svg{width:14px;height:14px}.home-page .sound-specimen .pad-axis{font-size:8px;letter-spacing:.02em}.home-page .sound-specimen .pad-axis.left{left:9px}.home-page .sound-specimen .pad-axis.right{right:9px;text-align:right}.home-page .sound-specimen .pad-axis:is(.left,.right){max-width:calc(50% - 16px);white-space:normal;line-height:1.3}.home-page .sound-specimen .touchpad-hint{display:none}.discovery-course-strip{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;align-items:center;gap:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;font-size:12px}.discovery-course-strip p{margin:0;color:var(--muted);line-height:1.55}.discovery-course-strip strong{font-weight:500;color:var(--ink)}.discovery-course-strip p:nth-child(2) strong,.discovery-course-strip p:nth-child(3) strong{margin-right:8px;font-size:25px;letter-spacing:-.04em}.discovery-course-strip a{display:flex;align-items:center;gap:20px;font-weight:500}.intro-lesson{padding:82px 0 0;scroll-margin-top:88px}.intro-banner{display:flex;align-items:end;justify-content:space-between;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}.intro-banner .section-kicker{margin-bottom:14px}.intro-banner h2{margin:0;font-size:clamp(36px,4.1vw,54px);letter-spacing:-.055em;line-height:1.13}.intro-banner>p{margin:0 90px 0 0;color:var(--muted);font-size:14px}.intro-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:70px;align-items:start;padding-top:48px}.intro-sidebar{position:sticky;top:113px;padding-bottom:28px}.intro-sidebar .section-kicker{margin-bottom:18px;font-size:11px}.intro-sidebar nav{display:grid;gap:4px}.intro-sidebar nav a{display:flex;gap:13px;align-items:baseline;margin-left:-13px;padding:10px 13px;border-radius:4px;color:var(--muted);font-size:12px;box-shadow:inset 2px 0 0 transparent;transition:color .18s ease,background-color .18s ease,box-shadow .18s ease}.intro-sidebar nav a span{font-size:10px;color:var(--muted);font-family:var(--font-mono);transition:color .18s ease}.intro-sidebar nav a[aria-current]{color:var(--ink);background-color:var(--brand-tint);box-shadow:inset 2px 0 0 var(--brand)}.intro-sidebar nav a[aria-current] span{color:var(--brand)}.intro-sidebar nav a:hover{color:var(--ink)}.intro-side-note{display:flex;align-items:start;gap:10px;margin-top:46px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted)}.intro-side-note p{font-size:11px;margin:0}.intro-content{min-width:0}.intro-opening{padding:0 0 60px}.intro-opening h3{margin-bottom:18px;font-size:23px;letter-spacing:-.035em}.intro-opening>div:first-child>p{max-width:650px;margin:0 0 30px;font-size:15px;line-height:1.85;color:var(--muted)}.instrument-caption{color:var(--muted);font-size:11px;margin:13px 0 0;text-align:center}.intro-topic{border-top:1px solid var(--line-strong);padding:40px 0 48px;scroll-margin-top:115px}.intro-topic-heading{display:flex;align-items:start;gap:20px;padding-bottom:20px}.intro-topic-number{display:flex;align-items:center;justify-content:center;height:40px;width:40px;flex:0 0 40px;border:1px solid var(--line-strong);border-radius:50%;font:11px var(--font-mono);color:var(--muted);background:var(--surface-soft)}.intro-topic-heading h3{margin:2px 0 0;font-size:clamp(25px,3vw,36px);line-height:1.15;letter-spacing:-.045em}.intro-topic-heading p{margin:12px 0 0;color:var(--muted);font-size:13px}.intro-step{padding:29px 0;border-top:1px solid var(--line)}.intro-step:first-of-type{border-top:0}.intro-step.with-instrument{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:35px}.intro-step-copy{min-width:0}.intro-step.with-instrument:has(.pitch-volume-widget--stacked){grid-template-columns:1fr;gap:24px}.intro-step:has(.pitch-volume-widget--stacked) .intro-step-copy{max-width:650px}.intro-step h4{margin:0 0 13px;font-size:19px;line-height:1.35;letter-spacing:-.025em}.intro-step p,.intro-step ul{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.intro-step p+p{margin-top:15px}.intro-step ul{padding-left:18px;margin-top:14px}.intro-step li+li{margin-top:8px}.intro-step strong{color:var(--ink);font-weight:550}.intro-step:has(.chord-formula-widget),.intro-step:has(.key-tool-widget),.intro-step:has(.diatonic-chords-widget),.intro-step:has(.note-rail-widget),.intro-step:has(.wave-choice-widget){grid-template-columns:1fr}.intro-step:has(.chord-formula-widget) .intro-step-copy,.intro-step:has(.diatonic-chords-widget) .intro-step-copy{max-width:650px}.intro-step.with-instrument:has(.chord-lesson){grid-template-columns:minmax(0,1fr);gap:24px}.intro-step:has(.chord-lesson) .intro-step-copy{max-width:680px}.intro-finish{padding:38px;background:var(--surface-soft);border-radius:4px;margin-bottom:40px}.intro-finish .section-kicker{margin-bottom:15px}.intro-finish h3{margin:0 0 14px;font-size:32px;letter-spacing:-.045em}.intro-finish>p:not(.section-kicker){color:var(--muted);font-size:14px;margin-bottom:26px}.discovery-path{border-top:1px solid var(--line);padding:80px 0}.discovery-path-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:end;margin-bottom:44px}.discovery-path h2,.discovery-pricing h2{font-size:clamp(32px,3.6vw,46px);line-height:1.13;letter-spacing:-.055em;margin:0}.discovery-path-heading>p{color:var(--muted);font-size:14px;line-height:1.8;margin:0;max-width:350px}.discovery-path-list a{display:grid;grid-template-columns:65px 1fr 130px 24px;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--line)}.discovery-path-list a:last-child{border-bottom:1px solid var(--line)}.path-index{color:var(--muted);font:11px var(--font-mono)}.discovery-path-list h3{margin:0;font-size:23px;letter-spacing:-.03em}.path-count{font-size:12px;color:var(--muted)}.discovery-path-list a:hover h3{color:var(--accent)}.discovery-pricing{display:grid;grid-template-columns:1.4fr 1fr;gap:100px;align-items:center;background:var(--surface-soft);border-radius:4px;padding:56px;margin-bottom:64px;scroll-margin-top:100px}.discovery-pricing .section-kicker{margin-bottom:20px}.discovery-pricing>div>p:last-child{max-width:350px;color:var(--muted);font-size:14px;line-height:1.8;margin:24px 0 0}.discovery-price>div{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}.discovery-price strong{font-size:64px;line-height:1;font-weight:500;letter-spacing:-.06em}.discovery-price span{font-size:12px;color:var(--muted)}.discovery-price>button{width:100%}.discovery-price>a{display:block;text-align:center;margin:16px 0 0;font-size:12px;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}.discovery-footer{display:flex;align-items:center;justify-content:space-between;padding:28px 0 40px;border-top:1px solid var(--line);font-size:12px}.discovery-footer .brand-logo{width:160px}.discovery-footer p{margin:0;color:var(--muted)}.discovery-footer>a:last-child{display:flex;align-items:center;gap:16px}.discovery-button:active{transform:translateY(1px)}.site-shell .header-cta{transition:background-color .16s ease,border-color .16s ease}.discovery-text-link{transition:border-color .16s ease}.discovery-path-list h3{transition:color .16s ease}.home-page .pad-readout strong{font-family:var(--font-mono);letter-spacing:-.04em}.discovery-course-strip p:nth-child(2) strong,.discovery-course-strip p:nth-child(3) strong{font-family:var(--font-mono)}@media(max-width:1080px){.site-shell .app-header{grid-template-columns:1fr auto}.site-shell .nav-links{display:none}.discovery-hero{gap:36px}.specimen-heading h2{font-size:26px}.intro-layout{grid-template-columns:175px minmax(0,1fr);gap:36px}.intro-step.with-instrument{grid-template-columns:1fr;gap:24px}.intro-banner>p{margin-right:0}.discovery-pricing{gap:50px;padding:42px}}@media(max-width:760px){.site-shell .app-header{height:68px;padding:0 22px;gap:12px}.site-shell .brand-logo{width:156px}.site-shell .header-login{display:none}.site-shell .header-cta{min-height:36px;font-size:11px;padding:0 14px}.home-page{width:calc(100% - 44px);padding-top:68px}.discovery-hero{grid-template-columns:minmax(0,1fr);gap:38px;padding:46px 0 35px}.discovery-hero h1{font-size:clamp(52px,10vw,70px)}:lang(ru) .discovery-hero h1{font-size:clamp(36px,12.5vw,70px)}.discovery-hero .section-kicker{margin-bottom:24px;font-size:11px}.discovery-deck{font-size:14px;max-width:430px;margin:24px 0}.discovery-hero-actions{gap:22px}.discovery-button{font-size:13px;min-height:46px;padding:11px 18px;gap:18px}.discovery-smallprint{font-size:10px}.sound-specimen{padding:20px 23px 24px;border-radius:10px}.specimen-heading{margin:22px 0 20px}.specimen-heading h2{font-size:28px}.home-page .sound-specimen .pitch-volume-canvas{height:180px}.discovery-course-strip{grid-template-columns:1fr 1fr;gap:24px 12px;padding:24px 0}.discovery-course-strip p:first-child{grid-column:1/-1}.discovery-course-strip p:first-child br{display:none}.discovery-course-strip p:first-child strong:before{content:" "}.discovery-course-strip a{grid-column:1/-1;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line)}.intro-lesson{padding-top:50px;scroll-margin-top:84px}.intro-banner{display:block;padding-bottom:28px}.intro-banner h2{font-size:36px}.intro-banner>p{margin-top:20px;font-size:13px}.intro-banner>p br{display:none}.intro-layout{display:block;padding-top:0}.intro-sidebar{position:sticky;top:68px;margin:0 -22px 30px;padding:12px 0;background:var(--paper);z-index:15;border-bottom:1px solid var(--line)}.intro-sidebar .section-kicker,.intro-side-note{display:none}.intro-sidebar nav{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:0 22px}.intro-sidebar nav a{flex-shrink:0;gap:8px;padding:9px 12px;margin:0;font-size:11px}.intro-opening{padding-bottom:35px}.intro-opening h3{font-size:21px}.intro-opening>div:first-child>p{font-size:14px;line-height:1.8}.intro-topic{padding:30px 0;scroll-margin-top:143px}.intro-topic-heading{gap:14px;padding-bottom:14px}.intro-topic-number{width:34px;height:34px;flex-basis:34px}.intro-topic-heading h3{font-size:27px}.intro-step{padding:24px 0}.intro-step h4{font-size:19px}.intro-step p,.intro-step ul{font-size:14px}.intro-finish{padding:26px;margin-bottom:32px}.intro-finish h3{font-size:28px}.discovery-path{padding:48px 0}.discovery-path-heading{display:block;margin-bottom:32px}.discovery-path-heading>p{margin-top:22px}.discovery-path-list a{grid-template-columns:28px 1fr 18px;gap:12px;padding:20px 0}.discovery-path-list h3{font-size:19px}.path-count{display:none}.discovery-pricing{grid-template-columns:1fr;padding:30px 26px;gap:35px;margin-bottom:38px}.discovery-price strong{font-size:58px}.discovery-footer{flex-wrap:wrap;gap:22px;padding-bottom:30px}.discovery-footer p{order:3;flex-basis:100%}}@media(min-width:761px)and (max-width:1080px),(max-width:430px){.sound-specimen{padding-inline:18px}.home-page .sound-specimen .pitch-volume-pad-panel{grid-template-columns:minmax(0,1fr) 138px;gap:12px}.home-page .sound-specimen .pitch-volume-pad{height:150px}.home-page .sound-specimen .pad-readout{grid-template-columns:1fr;gap:6px}.home-page .sound-specimen .pad-readout span{display:flex;justify-content:space-between;align-items:center;gap:4px;min-height:37px;padding:6px 8px;font-size:8px}.home-page .sound-specimen .pad-readout strong{font-size:14px}.home-page .sound-specimen .pitch-volume-pad-panel>.widget-play-button{font-size:10px;padding-inline:6px;gap:5px}}@media(max-width:340px){.home-page .sound-specimen .pitch-volume-pad-panel{grid-template-columns:minmax(0,1fr)}.home-page .sound-specimen .pad-readout{grid-row:1;grid-template-columns:1fr 1fr}.home-page .sound-specimen .pitch-volume-pad{grid-column:1;grid-row:2;height:170px}.home-page .sound-specimen .pitch-volume-pad-panel>.widget-play-button{grid-row:3}}@media(prefers-reduced-motion:reduce){html:has(.discovery-shell){scroll-behavior:auto}.discovery-shell *,.discovery-shell *:before,.discovery-shell *:after{animation:none!important;transition:none!important}}@media(max-width:400px){:lang(ru) .home-page .chord-lesson .chord-lesson-progress li{gap:3px}:lang(ru) .home-page .chord-lesson .chord-lesson-step-number{flex-basis:25px;width:25px;height:25px}}:root{--piano-playing: #8bc8df;--piano-playing-ink: #163444;--piano-playing-line: #4d8196;--piano-key-press-duration: calc(.14s / 1.5);--piano-mini-key-press-duration: calc(.12s / 1.5)}.piano-keybed{--lesson-note-0: #a8624c;--lesson-note-1: #a27656;--lesson-note-2: #9b8958;--lesson-note-3: #8a8c64;--lesson-note-4: #708474;--lesson-note-5: #64857f;--lesson-note-6: #62808b;--lesson-note-7: #536f83;--lesson-note-8: #747c92;--lesson-note-9: #81768e;--lesson-note-10: #947687;--lesson-note-11: #a47677;--piano-white: var(--surface);--piano-black: #24272d;--piano-ink: var(--ink);--piano-line: var(--line-strong);--piano-disabled: #d9dde2;--piano-disabled-ink: var(--muted);position:relative;height:clamp(180px,24vw,250px);max-width:760px;min-width:var(--piano-min-width, 0)}.piano-keybed.long{max-width:none}.piano-keybed-scroll{overflow-x:auto;padding:0 0 8px}.piano-keybed .white-keys{display:grid;grid-template-columns:repeat(var(--piano-white-count, 8),minmax(0,1fr));height:100%}.piano-keybed :is(.white-keys,.black-keys) button{--piano-note-edge: 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-width:0;border:1px solid var(--piano-line);border-radius:0 0 4px 4px;opacity:1;box-shadow:none;font-weight:500;cursor:pointer;transition:background var(--piano-key-press-duration) ease,border-color var(--piano-key-press-duration) ease,color var(--piano-key-press-duration) ease,box-shadow var(--piano-key-press-duration) ease}.piano-keybed .white-keys button{padding:0 2px 18px;background:var(--piano-white);color:var(--piano-ink);font-size:17px}.piano-keybed .black-keys{position:absolute;inset:0;pointer-events:none}.piano-keybed .black-keys button{--piano-note-edge: 6px;position:absolute;top:0;width:min(calc(72% / var(--piano-white-count, 8)),52px);height:58%;padding:0 2px 16px;border-color:var(--piano-black);background:var(--piano-black);color:var(--piano-white);font-size:12px;transform:translate(-50%);pointer-events:auto}.piano-keybed :is(.white-keys,.black-keys) button:not(:disabled){box-shadow:inset 0 calc(-1 * var(--piano-note-edge)) 0 var(--note-color)}.piano-keybed .white-keys button:hover:not(:disabled){background:var(--surface-soft)}.piano-keybed .black-keys button:hover:not(:disabled){background:var(--ink-soft)}.piano-keybed :is(.white-keys,.black-keys) button:is(.active,.playing,:active):not(:disabled){--piano-note-edge: 10px;background:var(--piano-playing);border-color:var(--piano-playing-line);color:var(--piano-playing-ink);box-shadow:inset 0 calc(-1 * var(--piano-note-edge)) 0 var(--note-color)}.piano-keybed :is(.white-keys,.black-keys) button:disabled{border-color:var(--piano-line);background:var(--piano-disabled);color:var(--piano-disabled-ink);box-shadow:none;opacity:1;cursor:not-allowed;pointer-events:auto}.piano-keybed :is(.white-keys,.black-keys) button:focus-visible{outline:2px solid var(--piano-playing-line);outline-offset:-3px}.piano-keybed button>span{display:block;min-width:0;min-height:0;max-width:100%;padding:0;overflow:hidden;border-radius:0;background:none;font-size:inherit;line-height:1.2;text-overflow:ellipsis;white-space:pre-line}.piano-keybed button small{display:inline-flex;align-items:center;justify-content:center;min-height:20px;max-width:100%;padding:3px 4px;border-radius:4px;background:var(--brand-tint);color:var(--brand);font-size:12px;font-weight:500;line-height:1.2}.piano-keybed .black-keys button small{background:var(--surface-soft);color:var(--piano-ink)}.piano-keybed button>.piano-key-status{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:inherit}.piano-keybed button.range-padding{color:transparent;pointer-events:none}.piano-keybed.moving-range{overflow:clip}.piano-keybed.moving-range .white-keys{position:relative;display:block}.piano-keybed.moving-range .white-keys button{position:absolute;top:0;height:100%}.piano-keybed.moving-range :is(.white-keys,.black-keys) button{transition:left .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),background var(--piano-key-press-duration) ease,border-color var(--piano-key-press-duration) ease,color var(--piano-key-press-duration) ease,box-shadow var(--piano-key-press-duration) ease,opacity .2s ease}.piano-keybed.moving-range button[aria-hidden=true]{opacity:0;pointer-events:none}.piano-keybed.moving-range button.range-padding{opacity:1;pointer-events:none}@media(max-width:700px){.piano-keybed .white-keys button{font-size:15px}.piano-keybed .black-keys button{font-size:11px}}@media(prefers-reduced-motion:reduce){.piano-keybed :is(.white-keys,.black-keys) button{transition:none}}