:root{--ink: #10131a;--muted: #5d6675;--paper: #fbfdff;--surface: #ffffff;--line: rgba(16, 19, 26, .11);--blue: #0965ff;--blue-2: #1ea7ff;--blue-3: #78dcff;--coral: #ef6f61;--gold: #f7c94b;--mint: #4ed2b4;--shadow: 0 22px 70px rgba(9, 101, 255, .11)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 8% -8%,rgba(30,167,255,.22),transparent 34rem),linear-gradient(180deg,#fff,#f7fbff 42%,#fff);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;overflow-x:hidden}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}.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-mark,.brand-mark svg{width:34px;height:34px;display:block}.brand-mark{flex:0 0 auto;filter:drop-shadow(0 12px 22px rgba(9,101,255,.22))}.brand-mark rect{fill:url(#brandGradientReact)}.brand-mark path{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:3}.brand-mark circle{fill:var(--gold)}.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 #0965ff38}.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:#0b70d8;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:880px;margin:0;font-size:clamp(3.6rem,8vw,7.3rem);line-height:.9;letter-spacing:0}h2{margin:0;font-size:clamp(2.4rem,5vw,5.4rem);line-height:.94;letter-spacing:0}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(30,167,255,.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 .12s ease,background .12s ease,color .12s ease}.tiny-piano button:nth-child(2n){background:#ebf7ffeb}.tiny-piano button:hover,.tiny-piano button.is-hit{background:var(--ink);color:#fff;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,#1ea7ff2e,#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:#0b70d8;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,#0965ff1a,#4ed2b41a 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,.catalog-card span{color:#0b70d8;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-card small,.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:radial-gradient(circle at 86% 12%,rgba(30,167,255,.2),transparent 28rem),linear-gradient(180deg,#f7fbff,#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:#f7c94b52;color:#4d3b00}.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:#075ad8}.compact-action{width:max-content}.pricing-section{border-top:1px solid var(--line);background:radial-gradient(circle at 12% 16%,rgba(30,167,255,.16),transparent 26rem),#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:#0b70d8;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{background:linear-gradient(90deg,rgba(51,154,240,.08),transparent 38%),linear-gradient(180deg,#fff,#fbfcfb 42%,#f4f8fb)}.catalog-hero{padding:clamp(110px,12vw,150px) clamp(20px,6vw,88px) clamp(36px,6vw,78px)}.catalog-hero-inner{max-width:1080px;margin-inline:auto}.catalog-hero h1{max-width:940px;font-size:clamp(3.1rem,8vw,6.2rem);line-height:.92}.catalog-hero p{max-width:720px;margin:20px 0 0;color:#454b58;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55}.catalog-summary{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;color:#4f5968;font-weight:820}.catalog-summary span{display:inline-flex;align-items:baseline;gap:8px}.catalog-summary strong{color:var(--ink);font-size:1.52rem;line-height:1}.catalog-shell{width:min(1120px,calc(100% - clamp(40px,10vw,136px)));margin-inline:auto;padding:0 0 92px}.catalog-continue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:end;margin:0 0 clamp(52px,7vw,84px);padding:0 0 clamp(30px,5vw,46px);border-bottom:1px solid rgba(17,19,26,.11)}.catalog-continue h2{font-size:clamp(2rem,4.6vw,4rem);line-height:.95}.catalog-continue p:not(.eyebrow){max-width:650px;margin:14px 0 0;font-size:1.04rem;line-height:1.56}.catalog-units{display:grid;gap:clamp(48px,7vw,84px)}.catalog-unit{scroll-margin-top:90px}.catalog-unit-header{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid rgba(17,19,26,.11)}.catalog-unit h2{font-size:clamp(1.7rem,3vw,2.7rem);line-height:.98}.catalog-unit p{max-width:760px;margin:10px 0 0;font-size:.97rem;line-height:1.55}.catalog-grid{display:grid;border-top:1px solid rgba(17,19,26,.11)}.catalog-card{position:relative;display:grid;grid-template-columns:minmax(98px,.22fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,34px);align-items:baseline;padding:24px 38px 24px 0;border-bottom:1px solid rgba(17,19,26,.11);color:var(--ink);transition:color .16s ease,transform .16s ease,border-color .16s ease}.catalog-card:after{content:"open";position:absolute;right:0;top:50%;color:#2a7cc1e0;font-size:.75rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase;transform:translateY(-50%);transition:transform .16s ease}.catalog-card:hover{border-color:#2a7cc152;color:#075bb8;transform:translate(6px)}.catalog-card:hover:after{transform:translate(5px,-50%)}.catalog-card.completed span,.catalog-card.completed small{color:#299d74}.catalog-card.current{color:#075bb8}.catalog-card.locked{color:#11131a94}.catalog-card.locked:after{content:"locked";color:#11131a6b}.catalog-card.current:before{content:"";position:absolute;left:-18px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--blue);transform:translateY(-50%)}.catalog-card strong{font-size:clamp(1.26rem,2vw,1.8rem);line-height:1.04}.catalog-card small{font-size:.9rem;font-weight:850;white-space:nowrap}.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:#0965ffb3;box-shadow:0 0 0 4px #0965ff1a}.auth-message{min-height:22px;margin:0;color:#0b70d8;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:radial-gradient(circle at 88% 6%,rgba(78,210,180,.2),transparent 28rem),linear-gradient(180deg,#fff,#f7fbff 46%,#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-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{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.complete-pill.as-button{gap:8px;border:0;cursor:pointer}.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:#0b70d8;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 #0965ff12}.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-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:#0965ff47;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:#0965ffb3;box-shadow:0 0 0 4px #0965ff1a}.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,#4ed2b429,#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 #4ed2b41f,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:#4ed2b4;color:#081f19}.consonance-choice.wrong{border-color:transparent;background:#ef6f61;color:#fff}.consonance-choice.selected:not(.correct):not(.wrong){outline:3px solid rgba(9,101,255,.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{display:block;width:100%;height:100%;min-height:320px}.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}.piano-keybed{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}.white-keys{display:grid;grid-template-columns:repeat(var(--piano-white-count, 8),minmax(0,1fr));height:100%}.white-keys button,.black-keys button{cursor:pointer;font-weight:950;transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease,opacity .12s ease}.white-keys button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0;border:1px solid rgba(16,19,26,.18);border-radius:0 0 7px 7px;padding:0 5px 14px;background:#fff;color:#273142}.white-keys button span,.black-keys button span{max-width:100%;overflow:hidden;line-height:1;text-overflow:ellipsis;white-space:pre-line}.white-keys button small,.black-keys button small{display:inline-flex;min-height:20px;align-items:center;border-radius:999px;padding:4px 7px;background:#10131a12;color:#667183;font-size:.62rem;line-height:1;text-transform:uppercase}.white-keys button.highlight{border-color:color-mix(in srgb,var(--note-color) 42%,rgba(16,19,26,.12));background:color-mix(in srgb,var(--note-color) 14%,#fff);box-shadow:inset 0 -8px color-mix(in srgb,var(--note-color) 54%,#fff)}.white-keys button.active,.white-keys button:hover:not(:disabled){background:var(--note-color, var(--blue));color:#fff}.white-keys button.inactive{border-color:#10131a14;background:#eef2f6;color:#8a95a5;cursor:not-allowed;box-shadow:none}.white-keys button:disabled,.black-keys button:disabled{pointer-events:none}.black-keys{position:absolute;inset:0;pointer-events:none}.black-keys button{position:absolute;top:0;width:min(calc(72% / var(--piano-white-count, 8)),52px);height:58%;border:0;border-radius:0 0 7px 7px;background:#111720;color:#fff;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:end;padding:0 5px 12px;transform:translate(-50%);pointer-events:auto}.black-keys button.highlight{background:color-mix(in srgb,var(--note-color) 68%,#111720);box-shadow:0 14px 26px color-mix(in srgb,var(--note-color) 24%,transparent)}.black-keys button.active,.black-keys button:hover:not(:disabled){background:var(--note-color, var(--coral));transform:translate(-50%) translateY(2px)}.black-keys button.inactive{background:#2a3038;color:#8c96a6;cursor:not-allowed;opacity:.74;box-shadow:none}.black-keys button small{background:#ffffff1f;color:#aab2bf}.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 #0965ff29}.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(9,101,255,.14);border-radius:999px;padding:0 10px;background:#0965ff12;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(9,101,255,.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,#0965ff47,#4ed2b46b)}.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(9,101,255,.08),transparent 38%,transparent 62%,rgba(78,210,180,.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 #0965ff29}.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(9,101,255,.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,#0965ff47,#4ed2b46b)}.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)}.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 #0965ff29}.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(9,101,255,.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,#0965ff47,#4ed2b46b)}.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(9,101,255,.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(9,101,255,.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:#0965ff5c;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:radial-gradient(circle at 8% 0%,rgba(30,167,255,.12),transparent 24rem),#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 #0965ff12}.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-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:#0965ff42;box-shadow:0 12px 28px #0965ff14}.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,#0965ff14,#4ed2b41a),#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,#0965ff1f,#4ed2b41f 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:#0965ff7a;box-shadow:inset 0 0 0 1px #0965ff2e,0 18px 42px #0965ff1f}.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 #0965ff52,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}.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-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{min-height:clamp(100px,11vw,128px)}.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}@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,.pricing-inner,.preview-lab,.lesson-widget,.lesson-pair-block,.pitch-volume-widget,.lesson-end-nav{grid-template-columns:1fr}.hero-demo{display:none}}@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{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}.wave-choice-card .wave-svg{min-height:112px}.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}.black-keys button small,.black-keys button.inactive span{display:none}.black-keys button:not(.inactive) span{min-width:22px;min-height:22px;display:inline-grid;place-items:center;border-radius:999px;padding:3px;background:#ffffff29;font-size:.68rem;overflow:visible}.lesson-preview-topline,.catalog-continue{align-items:start;grid-template-columns:1fr;flex-direction:column}.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:minmax(0,1fr) auto;gap:8px 18px;padding-right:34px}.path-row span,.catalog-card span{grid-column:1 / -1}.path-row small,.catalog-card 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}.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}.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,.pitch-volume-canvas canvas{min-height:240px}.white-keys button{font-size:.78rem}.black-keys button{font-size:0}.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}}