:root{--ink:#15243e;--ink-soft:#495875;--muted:#7a8aa6;--blue:#3182f6;--blue-dark:#1768e0;--line:#dfe7f3;--line-soft:#ebf0f9;--canvas:#f7f9fd;--white:#fff;--shadow:0 16px 46px rgba(29,53,96,.055);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-synthesis:none;color:var(--ink);background:var(--canvas)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.44;cursor:not-allowed}.wheel-note:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8cbdff;outline-offset:3px}h1,h2,h3,h4,p{margin-top:0}p{line-height:1.62}.shell{width:min(1200px,calc(100% - 64px));margin:auto}.skip-link{position:absolute;top:-70px;left:20px;background:#11234e;color:#fff;z-index:20;padding:13px 18px;border-radius:12px}.skip-link:focus{top:10px}.site-header{height:72px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line-soft)}.header-inner{height:100%;display:flex;align-items:center;gap:38px}.brand{display:flex;align-items:center;gap:9px;font-weight:780;letter-spacing:-.75px;font-size:21px;white-space:nowrap}.brand-mark{width:31px;height:31px;background:#3289f6;display:grid;place-items:center;color:#fff;border-radius:10px;font-size:21px;font-weight:900;box-shadow:0 5px 12px rgba(49,130,246,.22)}.brand-accent{color:var(--blue)}.header-nav{display:flex;gap:29px;color:var(--ink-soft);font-size:13px;font-weight:630}.header-nav a:hover,.site-footer a:hover{color:var(--blue)}.privacy-label{margin-left:auto;border:1px solid #dcebe3;background:#f6fff9;color:#32784f;font-size:12px;font-weight:660;border-radius:30px;padding:8px 12px;white-space:nowrap}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#36b36b;margin-right:7px}.intro{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center;padding:57px 3px 43px}.eyebrow,.section-overline{letter-spacing:2px;font-weight:790;font-size:10px;color:var(--blue-dark)}.eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:20px}.eyebrow-line{width:20px;height:2px;background:var(--blue)}.intro h1{font-size:clamp(35px,4.1vw,56px);line-height:1.12;letter-spacing:-2.8px;font-weight:800;margin-bottom:18px}.intro h1 span{color:var(--blue)}.intro p{max-width:620px;font-size:16px;color:var(--ink-soft);margin-bottom:20px}.intro-highlights{display:flex;flex-wrap:wrap;gap:9px}.intro-highlights span{display:inline-flex;background:#eaf2fe;color:#35649f;border:1px solid #dceafa;padding:8px 12px;border-radius:30px;font-weight:675;font-size:11px}.intro-decoration{height:176px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:26px;background:linear-gradient(130deg,#e6f0fe,#eef4fe 60%,#e1f0fb);border:1px solid #dfebfc;overflow:hidden}.intro-decoration:after,.intro-decoration:before{content:'';position:absolute;border:1px solid rgba(85,150,239,.17);width:280px;height:280px;border-radius:50%;right:-90px;top:-180px}.intro-decoration:after{right:auto;left:-175px;top:57px;width:320px;height:320px}.mini-staff{display:flex;gap:34px;position:absolute;top:19px;right:31px;color:#8aafe2;font-size:25px;transform:rotate(-9deg)}.hero-interval{font-size:28px;font-weight:780;letter-spacing:-1.5px;color:#3775c6;z-index:1}.hero-interval small{font-size:19px;opacity:.5;margin:0 5px}.hero-caption{font-size:12px;color:#708aaa;z-index:1;margin-top:11px}.surface{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.piano-surface{padding:28px 30px 22px}.surface-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:23px}.surface-heading h2{margin:7px 0 6px;font-size:23px;letter-spacing:-.75px}.surface-heading p{color:var(--muted);font-size:12px;margin:0}.heading-tag{font-size:10px;letter-spacing:0;vertical-align:middle;padding:6px 9px;border-radius:30px;color:#2072d4;background:#eaf4ff;margin-left:7px}.audio-state{color:#477d60;background:#effaf3;padding:9px 13px;border-radius:10px;font-weight:700;font-size:11px;white-space:nowrap}.piano-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:22px}.tool-field{display:flex;flex-direction:column;gap:7px;min-width:0}.tool-field>label{font-size:11px;color:#63728d;font-weight:720}.add-controls select,.tool-field input[type=number],.tool-field select{border:1px solid #dbe4f1;border-radius:10px;background:#fafcff;color:var(--ink);padding:10px 31px 10px 11px;min-height:40px;min-width:112px;max-width:100%;font-size:12px;font-weight:650}.tool-field select{appearance:none;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2372849e" stroke-width="2.5"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 11px center}.volume-field{min-width:110px}.volume-field label{display:flex;justify-content:space-between;gap:6px}.volume-field input{accent-color:var(--blue);width:112px;height:38px;cursor:pointer}.piano-toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:17px;padding-bottom:1px}.toggle-row{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:650;color:#546786;white-space:nowrap;cursor:pointer}.toggle-row input{accent-color:var(--blue);width:14px;height:14px}.icon-action,.small-outline{border:1px solid var(--line);background:#fff;color:#45617f;padding:11px 13px;border-radius:10px;font-weight:750;font-size:11px;white-space:nowrap}.btn-light:hover,.icon-action:hover,.small-outline:hover{border-color:#a8c8ef;background:#f3f8ff}.keyboard-frame{background:#f1f5fb;border:1px solid #dee7f3;padding:14px 14px 19px;border-radius:16px;overflow-x:auto;scrollbar-color:#c5d5e8 transparent;scrollbar-width:thin}.keyboard{position:relative;height:205px;min-width:max-content;display:flex;align-items:stretch;user-select:none;touch-action:pan-x;--white-width:45px}.piano-key{position:relative;display:flex;align-items:end;justify-content:center;padding-bottom:11px;border:1px solid #cbd7e8;transition:background .12s ease,box-shadow .12s ease;outline-offset:-3px;flex-shrink:0;cursor:pointer}.piano-key .key-label{pointer-events:none;line-height:1;font-size:9px;font-weight:800}.piano-key.white{height:100%;width:var(--white-width);background:linear-gradient(#fff,#fdfefe 65%,#f0f4fa);border-radius:0 0 6px 6px;color:#9aa7bc;box-shadow:0 3px 0 #cbd5e2,0 6px 12px #b4c0d143}.piano-key.white.selected{background:linear-gradient(#daebff,#afd6ff);color:#2267b9;border-color:#83b5f6}.piano-key.white.in-scale:not(.selected){background:linear-gradient(#fff,#f4faff 65%,#e6f3ff);color:#5686b4}.piano-key.white.active{background:linear-gradient(#98c7ff,#5fafff);color:#fff}.piano-key.black{position:absolute;z-index:2;top:0;width:calc(var(--white-width)*.62);height:126px;background:linear-gradient(115deg,#23354b,#0e192b 75%);border-color:#1a2e43;border-radius:0 0 5px 5px;color:#93a7be;box-shadow:2px 4px 5px #1e35584d}.piano-key.black.selected{background:linear-gradient(#4f9afe,#1f69d8);border-color:#4087dc;color:#eaf4ff}.piano-key.black.in-scale:not(.selected){background:linear-gradient(#3c5575,#203a5f)}.piano-key.black.active{background:linear-gradient(#95bdff,#377ee1);color:#fff}.piano-key:hover:not(.active){filter:brightness(.97)}.piano-key.black:hover{filter:brightness(1.18)}.keyboard-footer{display:flex;gap:20px;justify-content:space-between;align-items:center;margin:14px 0 16px}.keyboard-help{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.keyboard-help kbd{display:inline-grid;place-items:center;border:1px solid #e0e8f2;background:#f8fafd;border-radius:5px;font-size:9px;font-weight:750;width:18px;height:20px;color:#65758d}.keyboard-help span{font-size:10px;color:#98a5b8;margin-left:6px}.keyboard-actions{display:flex;gap:13px;align-items:center;white-space:nowrap}.keyboard-actions span{font-size:10px;color:var(--muted)}.text-button{border:0;background:0 0;color:var(--blue-dark);font-size:11px;font-weight:790;padding:5px}.text-button:hover{text-decoration:underline}.note-strip{border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:16px;padding-top:17px;min-height:49px}.micro-heading,.strip-label{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#8c9ab1;white-space:nowrap}.selected-pills{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap;min-height:29px}.selected-note{background:#eaf4ff;color:#2273ce;border:1px solid #d6e8fd;border-radius:8px;font-size:11px;font-weight:780;padding:6px 10px}.selected-note small{color:#6287ad;margin-left:5px;font-size:9px}.selected-note button{padding:0 0 0 6px;border:0;background:0 0;color:#668db7;font-size:13px}.muted{font-size:12px;color:#a2adc0}.workspace{padding-top:52px}.workspace-header{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:20px}.workspace-header h2{font-size:27px;letter-spacing:-1.2px;margin:7px 0 0}.workspace-header>p{font-size:12px;color:var(--muted);margin:0 0 3px}.tablist{display:flex;gap:8px;padding:6px;background:#eef3f9;border-radius:15px;margin-bottom:19px;max-width:695px}.tablist button{border:0;background:0 0;color:#6c7b95;border-radius:11px;padding:13px 16px;font-weight:760;font-size:12px;flex:1;white-space:nowrap}.tablist button span{color:#96a7c3;font-size:10px;letter-spacing:1px;margin-right:8px}.tablist button[aria-selected=true]{background:#fff;color:#1e68c3;box-shadow:0 3px 9px #213d6212}.tablist button[aria-selected=true] span{color:#5b94d6}.tab-panel[hidden]{display:none!important}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(320px,1fr);gap:18px;align-items:start}.result-card{padding:27px;min-height:545px}.card-heading{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-bottom:23px}.card-heading h3,.compact-card h3{font-size:21px;letter-spacing:-.55px;margin:8px 0 7px}.card-heading p,.compact-card p{color:var(--muted);font-size:12px;margin-bottom:0}.soft-icon{width:45px;height:45px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;background:#ebf4ff;color:#4186d9;font-size:22px}.empty-state{border:1px dashed #d6e5f6;background:linear-gradient(165deg,#f8fbff,#f1f7ff);border-radius:15px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:39px 22px;min-height:330px}.empty-symbol{font-size:36px;color:#6c9fdf;background:#e5f1ff;border-radius:18px;padding:10px;width:69px;height:69px;margin-bottom:20px}.empty-state h4{font-size:19px;letter-spacing:-.4px;margin-bottom:5px}.empty-state p{font-size:12px;color:#8292ad;max-width:330px;margin:0}.right-stack{display:grid;gap:18px}.compact-card{padding:24px}.compact-card h3{font-size:19px}.compact-card p{font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:11px;margin:19px 0 15px}.form-grid select{width:100%}.button-pair{display:flex;gap:9px;flex-wrap:wrap}.btn-dark,.btn-light,.btn-primary{border-radius:10px;min-height:40px;padding:11px 16px;letter-spacing:-.1px;font-size:11px;font-weight:800;white-space:nowrap}.btn-primary{background:#3486f7;border:1px solid #3486f7;color:#fff;box-shadow:0 5px 12px #3182f631}.btn-primary:hover{background:#136fef}.btn-light{background:#fff;color:#37648c;border:1px solid #dce6f3}.btn-dark{color:#fff;background:#183354;border:1px solid #183354}.btn-dark:hover{background:#244b7a}.inline-formula{border-radius:10px;background:#f5f8fd;padding:10px 12px;margin-top:14px;color:#7c8ba3;font-weight:730;font-size:11px}.fifths-wheel{width:225px;height:225px;position:relative;margin:11px auto 0;background:radial-gradient(circle at center,#f4f8ff 0 32%,transparent 32% 48%,#e8f1fc 49% 50%,transparent 51%);border-radius:50%}.wheel-note{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border-radius:50%;background:#fff;border:1px solid #d5e4f4;color:#52789f;font-size:11px;font-weight:820;display:grid;place-items:center;box-shadow:0 3px 7px #355a7a13}.wheel-note.selected,.wheel-note.tonic{background:#e3f1ff;color:#126dda;border:1px solid #8fbef4}.wheel-note.selected{box-shadow:0 0 0 4px #d8eafd}.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:750;color:#98abc3;text-align:center;letter-spacing:1px;line-height:1.6;pointer-events:none}.wheel-center strong{display:block;color:#4377b4;font-size:11px;letter-spacing:1px}.chord-match{background:linear-gradient(145deg,#eff7ff,#f7fbff);border:1px solid #d8eafb;border-radius:16px;padding:26px 24px;margin-bottom:14px}.match-caption{font-size:10px;letter-spacing:1.1px;font-weight:850;color:#5890cc}.match-name{font-weight:860;letter-spacing:-1.5px;font-size:51px;line-height:1.2;margin:9px 0 8px;color:#226cc8;overflow-wrap:anywhere}.match-description{color:#536d90;font-size:12px;font-weight:690}.match-details{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:22px}.match-detail{background:#fff;border:1px solid #e4eef9;border-radius:10px;padding:12px}.match-detail small{color:#8292a9;display:block;font-size:10px;margin-bottom:5px}.match-detail strong{font-size:12px;color:#344968;overflow-wrap:anywhere}.match-secondary{padding:10px 0;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:10px}.match-secondary strong{color:#304a71}.match-secondary span{color:#8292a9;font-size:11px}.result-note{color:#8b9bb0;font-size:11px;padding:10px 0}.scale-selectors{margin-top:20px}.scale-note-list{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 24px}.scale-degree{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:56px;min-height:65px;border-radius:11px;background:#f0f7ff;color:#2875ce;border:1px solid #dfedfc}.scale-degree strong{font-size:16px}.scale-degree small{font-weight:780;font-size:9px;color:#87a2c2}.next-heading{margin-bottom:11px}.scale-formula{font-size:13px;font-weight:750;color:#566e91;margin-bottom:16px}.scale-visual{border-radius:14px;border:1px solid #e2eaf5;background:#f8fbff;padding:17px 13px 8px;display:flex;gap:5px;align-items:end;justify-content:space-between;height:135px;margin-bottom:20px}.scale-visual .interval-column{display:flex;align-items:center;justify-content:end;flex-direction:column;gap:6px;flex:1;min-width:0}.interval-column>div{background:linear-gradient(#89bfff,#3687ed);border-radius:6px 6px 2px 2px;width:min(100%,36px);min-height:12px}.interval-column>small{font-size:9px;color:#7896b4;font-weight:800;padding-bottom:2px}.segment-switch{display:inline-flex;padding:4px;border-radius:10px;background:#f0f4fa;margin:18px 0}.segment-switch button{border:0;border-radius:8px;background:0 0;padding:9px 17px;font-size:11px;font-weight:780;color:#8491a6}.segment-switch button.active{color:#2a70bd;background:#fff;box-shadow:0 2px 5px #29466d1a}.diatonic-list{display:grid;gap:8px}.diatonic-item{display:grid;grid-template-columns:47px 1fr auto;gap:12px;align-items:center;border:1px solid #e7ecf5;border-radius:11px;padding:10px;background:#fff;width:100%;text-align:left}.diatonic-item:hover{background:#f5f9ff;border-color:#c4ddfb}.roman-pill{display:grid;place-items:center;background:#eef5fe;color:#337aca;border-radius:7px;font-size:11px;font-weight:820;min-height:35px}.diatonic-item strong{font-size:13px;display:block;color:#365272}.diatonic-item small{font-size:10px;color:#8a9ab0}.diatonic-item .play-glyph{font-size:13px;color:#468bd9}.helper-line{color:#95a2b5;font-size:10px!important;margin-top:13px}.progression-surface{padding:28px}.progression-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:19px 0}.preset-field{flex:1;min-width:180px}.preset-field select{width:100%}.tempo-field input{width:101px;min-width:0!important;padding-right:6px!important}.control-load{height:40px}.progression-playline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:23px 0 17px}.progression-summary{color:#4b6f99;font-size:15px;font-weight:750;line-height:1.5;margin:7px 0 0}.transport{display:flex;gap:7px;flex-shrink:0}.progression-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:17px}.progression-step{border:1px solid #dce6f2;border-radius:13px;padding:14px 12px 11px;background:#fbfdff;position:relative;min-width:0;transition:box-shadow .2s,border .2s}.progression-step.playing{border-color:#61a4ff;box-shadow:0 0 0 3px #dcecff;background:#eff7ff}.step-head{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:8px}.step-num{font-size:10px;color:#9aa8bb;font-weight:780}.step-roman{font-size:10px;background:#e5f1ff;padding:5px 7px;color:#3f83ce;border-radius:6px;font-weight:860}.step-name{font-weight:850;font-size:21px;letter-spacing:-.65px;line-height:1.3;margin-bottom:2px;overflow-wrap:anywhere}.step-notes{font-size:10px;color:#8094ae;min-height:29px}.step-actions{display:flex;gap:4px;margin-top:10px;border-top:1px solid #ebf0f8;padding-top:9px}.step-actions button{width:27px;height:25px;border:1px solid #e6edf6;background:#fff;color:#7290ac;border-radius:6px;font-size:12px;font-weight:720}.step-actions button:hover{background:#e6f1ff;color:#2270ca}.step-actions button:disabled{opacity:.3}.step-settings{display:flex;gap:7px;align-items:center;margin-top:10px}.step-settings select{width:50%;min-width:0;border:1px solid #e0e8f2;border-radius:6px;padding:5px 2px;background:#fff;color:#536c88;font-size:10px;font-weight:700}.step-settings select.duration{width:100%}.step-settings label{font-size:10px;color:#8394ab}.step-inline{margin-top:8px;border-top:1px solid #edf2f8;padding-top:9px;display:grid;grid-template-columns:1fr;gap:6px}.step-inline select{font-size:10px;width:100%;border:1px solid #dbe6f5;border-radius:6px;padding:7px;background:#fff;color:#355576}.step-inline .inline-apply{border:0;color:#2172cd;background:#eaf4ff;padding:7px;border-radius:7px;font-size:10px;font-weight:780}.builder-panel{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px;border-radius:13px;border:1px dashed #d4e4f4;background:#f8fbff;margin-bottom:18px}.builder-panel p{font-size:11px;color:#8294ad;max-width:400px;margin:7px 0 0}.add-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.add-controls select{min-width:100px}.add-controls select:nth-child(2){min-width:132px}.export-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;border-top:1px solid var(--line-soft)}.export-description{font-size:12px;font-weight:760;color:#455f7e}.export-description span{color:#b3bfce;margin:0 4px}.export-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.guide{padding:85px 0 75px}.guide-intro{text-align:center;max-width:610px;margin:0 auto 28px}.guide-intro h2{font-size:30px;letter-spacing:-1.1px;margin:10px 0}.guide-intro p{color:#8b99ad;font-size:13px}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.guide-grid article{border:1px solid var(--line);border-radius:15px;background:#fff;padding:23px 20px;box-shadow:0 7px 24px #28456b08}.guide-count{color:#4886d1;font-size:10px;letter-spacing:1px;font-weight:850}.guide-grid h3{margin:13px 0 8px;font-size:15px;letter-spacing:-.3px}.guide-grid p{font-size:12px;color:#8391a6;margin:0}.guide-footnote{color:#91a1b4;font-size:11px;line-height:1.7;text-align:center;max-width:840px;margin:21px auto 0}.site-footer{background:#fff;border-top:1px solid var(--line-soft)}.footer-inner{display:flex;gap:15px;justify-content:space-between;align-items:center;min-height:68px;color:#8997ab;font-size:11px}.footer-inner strong{color:#3669a4}.toast{position:fixed;bottom:25px;right:25px;z-index:50;max-width:min(380px,calc(100% - 40px));background:#193b65;color:#fff;padding:14px 17px;box-shadow:0 16px 40px #16365e42;border-radius:12px;font-size:12px;line-height:1.5}.toast[hidden]{display:none}@media(max-width:1050px){.shell{width:min(100% - 40px,1200px)}.piano-toolbar-actions{margin-left:0}.workspace-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.77fr)}.progression-steps{grid-template-columns:repeat(3,1fr)}.guide-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:740px){.shell{width:calc(100% - 28px)}.site-header{height:64px}.header-inner{gap:12px}.header-nav{display:none}.brand{font-size:18px}.privacy-label{font-size:10px;padding:7px 9px}.intro{display:block;padding:40px 2px 27px}.intro h1{font-size:38px;letter-spacing:-1.6px}.intro p{font-size:14px}.intro-decoration{display:none}.piano-surface{padding:19px 15px 17px;border-radius:16px}.surface-heading h2{font-size:20px}.surface-heading p{font-size:11px}.audio-state{display:none}.heading-tag{display:none}.piano-toolbar{gap:9px}.piano-toolbar .tool-field{flex:1;min-width:100px}.piano-toolbar .tool-field select{width:100%}.piano-toolbar-actions{width:100%;justify-content:space-between}.keyboard-frame{padding:11px 10px 14px;margin:0 -3px}.keyboard{height:180px;--white-width:41px}.piano-key.black{height:108px}.keyboard-footer{align-items:start;gap:8px;flex-direction:column}.keyboard-help span{font-size:9px}.keyboard-actions{width:100%;justify-content:space-between}.note-strip{align-items:start;flex-wrap:wrap;gap:10px}.note-strip .strip-label{padding-top:7px}.note-strip .small-outline{margin-left:auto}.workspace{padding-top:38px}.workspace-header{display:block}.workspace-header h2{font-size:23px}.workspace-header>p{margin-top:8px}.tablist{gap:3px}.tablist button{padding:12px 5px;font-size:10px}.tablist button span{display:none}.workspace-grid{grid-template-columns:1fr}.result-card{min-height:0;padding:20px}.compact-card{padding:20px}.right-stack{grid-template-columns:1fr}.fifths-wheel{width:205px;height:205px}.progression-surface{padding:19px}.progression-playline{align-items:start;flex-direction:column}.progression-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.builder-panel,.export-row{flex-direction:column;align-items:stretch}.export-actions{justify-content:flex-start}.guide{padding:60px 0}.guide-grid{grid-template-columns:1fr 1fr}.guide-grid article{padding:17px 14px}.footer-inner{flex-wrap:wrap;padding:19px 0;gap:10px;justify-content:center}.toast{bottom:12px;right:12px}}@media(max-width:440px){.intro h1{font-size:33px}.piano-toolbar .volume-field{min-width:100%;flex:1}.volume-field input{width:100%}.tablist button{font-size:10px}.progression-steps{grid-template-columns:1fr 1fr;gap:7px}.progression-step{padding:10px 8px}.guide-grid{grid-template-columns:1fr}.card-heading h3{font-size:19px}.btn-light,.btn-primary{padding:10px 11px;font-size:10px}.export-actions button{flex:1}}@media(prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.scale-lookup{margin:20px 0;padding:16px;border:1px solid #dae8f7;border-radius:13px;background:#f8fbff}.scale-lookup-hint,.scale-lookup>p{color:#526b8a;font-size:12px;margin:8px 0}.scale-match-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:280px;overflow:auto;scrollbar-width:thin}.scale-match{display:flex;flex-direction:column;text-align:left;gap:4px;min-width:0;padding:9px 10px;border-radius:9px;border:1px solid #d9e7f9;background:#fff;color:#204b7f}.scale-match:hover{border-color:#76b0f2;background:#eaf4ff}.scale-match strong{font-size:12px;overflow-wrap:anywhere}.scale-match span{font-size:11px;color:#677e9c}.loop-option{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#526b8a;white-space:nowrap;margin-right:4px}.loop-option input{accent-color:var(--blue);width:16px;height:16px}.step-settings select.duration,.step-settings select.inversion{width:50%;font-size:11px}.step-settings select.inversion{flex:1}.piano-key{touch-action:none}@media(max-width:740px){.progression-playline .transport{flex-wrap:wrap;align-items:center}.scale-match-list{grid-template-columns:1fr 1fr}}@media(max-width:380px){.scale-match-list{grid-template-columns:1fr}.step-settings{flex-direction:column}.step-settings select.duration,.step-settings select.inversion{width:100%}}