@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#e7e9ee;background:#101219;font-synthesis:none;font-weight:400;--muted:#818590;--line:#272d3e;--accent:#96afee}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}svg{width:20px;height:20px}header{height:95px;max-width:1440px;margin:auto;padding:0 5.5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:65px}.brand{display:flex;align-items:center;font-family:Manrope,sans-serif;font-size:24px;font-weight:750;letter-spacing:-1px}.brand-light{font-weight:400}.brand-dot{color:var(--accent)}.brand-icon{width:35px;height:36px;margin-right:10px;background:var(--accent);color:#1f2534;border-radius:9px;display:grid;place-items:center}.brand-icon svg{width:23px;height:23px}nav{display:flex;align-items:center;gap:32px;font-size:13px;color:var(--muted);height:100%}nav a{height:100%;display:flex;align-items:center;gap:8px}.nav-active{color:#e7eaf1;border-bottom:2px solid var(--accent)}.byline{margin-left:auto;font-size:11px;color:var(--muted)}.byline a{color:#b7bac3}main{max-width:1440px;margin:auto;padding:0 5.5%}.intro{display:flex;justify-content:space-between;align-items:center;padding:53px 0 40px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:#9ba4ba;display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-family:Manrope,sans-serif;font-size:clamp(32px,4vw,51px);letter-spacing:-2px;line-height:1.2;margin:16px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro p{color:#989ca5;font-size:14px;margin:0}.intro-note{border-left:1px solid #363f55;padding:10px 0 10px 20px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:#bec2cc}.intro-note small{font-size:11px;color:var(--muted)}.workspace{display:grid;grid-template-columns:308px 1fr;gap:22px}.controls,.player{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#151821}.panel-heading{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;border-bottom:1px solid var(--line)}h2,h3,p{margin:0}.panel-heading h2{font-size:14px;font-weight:550}.panel-heading>span{font-size:8px;letter-spacing:1.2px;color:#7e8492}.control-body{padding:24px 23px 20px}label,.label-row{font-size:12px;color:#c7cbd4}.label-row{display:flex;justify-content:space-between;align-items:center}.label-row>span,label>span{font-size:8px;color:#787e8c;letter-spacing:1px}.control-body>label{display:flex;justify-content:space-between;margin-bottom:10px}.key-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:13px 0 24px}.key-button{height:36px;color:#a5aab8;background:#1c202c;border:1px solid #2c3346;border-radius:5px;font-size:12px}.key-button:hover{border-color:#7c8bb2}.key-button.selected{color:#1c2232;background:var(--accent);border-color:var(--accent);font-weight:700}.select-wrap{position:relative}.select-wrap:after{content:"⌄";position:absolute;right:12px;top:9px;color:#969cac;pointer-events:none}select{appearance:none;border:1px solid #2d3549;color:#d1d6e1;background:#1d222e;width:100%;padding:11px 28px 11px 12px;border-radius:6px;font-size:12px;cursor:pointer}option{background:#1d222e}.mode-hint{font-size:10px;color:#787f92;margin-top:10px}.divider{height:1px;background:var(--line);margin:23px 0}output{color:var(--accent);font-size:16px;font-weight:600}output span{font-size:9px;color:var(--muted);font-weight:400}input[type=range]{appearance:none;background:#30384c;height:3px;border-radius:3px;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;border:2px solid #1c2335}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--accent);border-radius:50%;border:2px solid #1c2335}#tempo{width:100%;margin:20px 0 13px}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#777d8d;margin-bottom:24px}.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.two-controls label{display:block;font-size:11px;margin-bottom:8px}.two-controls select{font-size:10px;padding-left:9px}.two-controls .switch-label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:17px}.switch-label input{position:absolute;opacity:0;width:32px;height:20px}.switch{width:29px;height:17px;border-radius:12px;background:#30384c;position:relative}.switch:after{content:"";position:absolute;width:11px;height:11px;top:3px;left:3px;background:#9399a8;border-radius:50%;transition:.2s}input:checked+.switch{background:var(--accent)}input:checked+.switch:after{left:15px;background:#1e2432}input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:3px}.surprise{display:flex;align-items:center;gap:8px;border:1px dashed #363f57;border-radius:5px;background:transparent;width:100%;padding:11px;color:#98a2bc;font-size:11px;margin-top:22px}.surprise>span{margin-left:auto}.surprise svg{width:15px;height:15px}.surprise:hover{background:#1e2431}.player{padding:27px 28px 22px;min-width:0;background:radial-gradient(ellipse at 90% 0,#20253366,transparent 50%),#151821}.player-top{display:flex;justify-content:space-between;align-items:center}.status{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:1.1px;color:#7f8595}.status i{width:5px;height:5px;border-radius:50%;background:#7d8393}.status.playing{color:var(--accent)}.status.playing i{background:var(--accent);box-shadow:0 0 8px #96afee66}.melody-title{display:flex;align-items:center;gap:16px;margin:17px 0 32px}.melody-title h2{font-family:Manrope,sans-serif;font-size:32px;letter-spacing:-1px;font-weight:600}.pill{font-size:10px;padding:6px 10px;border-radius:20px;border:1px solid #353e54;background:#2329387a;color:#97a4c6}.roll-header{display:flex;justify-content:space-between;color:#858c9d;font-size:11px;margin-bottom:13px}.roll-header>span:last-child{font-size:8px;letter-spacing:1px}.piano-roll{height:216px;position:relative;border-top:1px solid #2b3244;border-bottom:1px solid #2b3244;background:repeating-linear-gradient(to bottom,transparent 0,transparent 26px,#262c3c 27px),repeating-linear-gradient(to right,transparent 0,transparent calc(12.5% - 1px),#252c3c 12.5%);margin-left:26px}.roll-labels{position:absolute;left:-27px;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-around;color:#636b7e;font-size:8px}.piano-roll>svg{width:100%;height:100%;overflow:hidden}.piano-roll rect{fill:#869ed9}.piano-roll .new-note{fill:#b8ccff}.playhead{position:absolute;right:8px;height:100%;top:0;width:1px;background:#7f95cb55;pointer-events:none}#roll-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#70788e;letter-spacing:.3px}#roll-empty[hidden]{display:none}.transport{display:flex;align-items:center;gap:15px;padding:23px 0;border-bottom:1px solid var(--line)}.play-button{display:flex;align-items:center;gap:9px;border:0;background:var(--accent);color:#1e2535;border-radius:6px;padding:12px 17px;font-size:12px;font-weight:650;white-space:nowrap}.play-button:hover{background:#b1c7ff}.play-button svg{width:16px;height:16px}.transport-caption{font-size:10px;color:#767e94;max-width:170px;line-height:1.6}.volume{margin-left:auto;display:flex;align-items:center;gap:10px;color:#767e94}.volume svg{width:17px}.volume input{width:65px}#error{color:#ffc39c;font-size:12px;padding-top:8px}#error:empty{display:none}.scale-section{padding-top:24px}.section-label{display:flex;justify-content:space-between;align-items:center}.section-label h3{font-size:12px;font-weight:500}.section-label>span{font-size:8px;color:#7f879b;letter-spacing:.8px}.scale-notes{display:flex;gap:8px;margin:18px 0 24px}.scale-note{position:relative;flex:1;border-radius:7px;background:#1d222f;border:1px solid #2c3346;color:#bcc3d3;height:69px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.scale-note strong{font-size:20px;font-weight:500}.scale-note>span{font-size:10px;color:#7b87a7}.scale-note.tonic{background:#232a3d;border-color:#4b597d;color:#abbeef}.scale-note small{position:absolute;top:-5px;background:#91a6da;color:#232a3a;border-radius:2px;padding:1px 4px;font-size:6px;letter-spacing:1px}.scale-note.sounding{background:var(--accent);color:#182034;border-color:var(--accent)}.scale-note.sounding>span{color:#293656}.piano{height:103px;position:relative;display:flex;gap:3px;padding:5px;background:#0d0f15;border:1px solid #282f40;border-radius:7px}.piano-key{border:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;transition:background .1s}.piano-key.white{flex:1;min-width:0;height:100%;border-radius:2px 2px 4px 4px;background:#b6bac5;color:#555b6b;padding-bottom:8px;font-size:8px}.piano-key.white.in-scale{background:#d9deea;color:#353e56}.piano-key.black{position:absolute;top:5px;width:4.4%;height:59px;background:#161a24;z-index:1;border-radius:0 0 3px 3px;box-shadow:0 2px 2px #0007;font-size:8px;color:#acb8d7;padding:0 0 5px}.piano-key i{width:4px;height:4px;border-radius:50%;background:#5d72a6}.piano-key.root-key i{background:#2b3e6e}.piano-key.sounding,.piano-key:hover{background:var(--accent)!important;color:#1b2642}.piano-caption{display:flex;justify-content:space-between;margin-top:11px;font-size:9px;color:#777f92}.piano-caption i{display:inline-block;width:5px;height:5px;background:#758cc6;border-radius:50%;margin-right:4px}.piano-caption b{margin:0 5px;font-weight:400;color:#4d556b}#current-note{color:#9dacd3}.guide{display:grid;grid-template-columns:120px 1fr 280px;gap:26px;padding:35px 0;margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:20px}.guide-marker{font-family:Manrope;font-size:24px;color:#5b6376;display:flex;flex-direction:column;gap:11px}.guide-marker>span{font-family:DM Sans;font-size:8px;letter-spacing:1.2px;color:#788093}.guide-content .eyebrow{font-size:8px;letter-spacing:1.6px}.guide-content h2{font-family:Manrope;font-size:22px;letter-spacing:-.5px;margin:9px 0 12px;font-weight:550}.guide-content p,.listening-tip p{font-size:12px;line-height:1.8;color:#8b92a3;max-width:530px}.formula{display:flex;align-items:center;gap:20px;margin-top:18px}.formula>span{font-size:8px;letter-spacing:1px;color:#747c92}.formula>div{display:flex;align-items:center;gap:9px;font-size:10px}.formula b{font-weight:400;color:#4a5163}.formula div>span{color:#a8b6d8}.listening-tip{padding:0 0 0 25px;border-left:1px solid var(--line)}.tip-icon{color:var(--accent);font-size:20px}.listening-tip h3{font-size:12px;font-weight:500;margin:8px 0}.listening-tip p{font-size:11px}.listening-tip button{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#a5b7e5;font-size:10px;padding:0;margin-top:13px}.listening-tip svg{width:14px;height:14px}footer{display:flex;justify-content:space-between;padding:24px 0 30px;font-size:10px;color:#687084}footer b{font-weight:400;margin:0 9px}.footer-star{margin-left:20px;color:#8092c0;font-size:15px}@media(min-width:1500px){.workspace{grid-template-columns:330px 1fr}.piano-roll{height:245px}.control-body{padding-top:28px}.player{padding:30px 34px}}@media(max-width:1050px){header{gap:30px}.byline{display:none}.workspace{grid-template-columns:275px 1fr;gap:16px}.player{padding:24px 20px}.transport{gap:12px}.transport-caption{display:none}.melody-title{flex-wrap:wrap;gap:10px}.melody-title h2{font-size:28px}.section-label>span{font-size:7px}.guide{grid-template-columns:75px 1fr 235px;gap:20px}.intro-note{display:none}}@media(max-width:740px){header{height:76px;padding:0 6%;justify-content:space-between;gap:12px}.brand{font-size:21px}nav{font-size:11px;gap:18px}.brand-icon{width:29px;height:31px}main{padding:0 6%}.intro{padding:35px 0 28px}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:36px;letter-spacing:-1.5px}.intro p{font-size:12px;line-height:1.7;max-width:285px}.workspace{display:flex;flex-direction:column}.player{order:0;padding:23px 19px 20px}.controls{order:1}.control-body{padding:22px}.key-grid{grid-template-columns:repeat(6,1fr)}.melody-title{margin-bottom:24px}.melody-title h2{font-size:28px}.pill{font-size:9px}.piano-roll{height:175px}.player-top .eyebrow{font-size:9px}.status{font-size:7px}.scale-notes{gap:5px}.scale-note{height:60px}.scale-note strong{font-size:17px}.section-label>span{display:none}.piano{height:95px}.piano-key.black{height:54px}.piano-key.white{font-size:7px}.piano-caption{font-size:8px}.transport{padding:20px 0}.play-button{font-size:11px;padding:11px 13px}.volume input{width:55px}.guide{grid-template-columns:1fr;gap:22px;margin-top:24px;padding:27px 0}.guide-marker{flex-direction:row;align-items:center;font-size:18px}.listening-tip{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.guide-content p,.listening-tip p{font-size:12px}footer{flex-direction:column;gap:12px;font-size:9px}.formula{gap:15px}.formula>div{gap:7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}.degree-display{display:flex;align-items:center;gap:17px;padding:14px 18px;background:#1f2432;border:1px solid #333c53;border-radius:8px;margin:-10px 0 23px;min-height:78px}.degree-number{font-family:Manrope,sans-serif;font-size:39px;line-height:1;font-weight:650;color:#acc0f2;min-width:48px;letter-spacing:-1px}.degree-label{color:#8e98b2;font-size:8px;letter-spacing:1.3px;margin-bottom:7px}#live-interval{font-size:13px;color:#cbd3e6}#live-pitch{margin-left:auto;font-size:12px;color:#8f9ec4;text-align:right}.degree-display:has(#live-degree:empty){opacity:.5}@media(max-width:740px){.degree-display{padding:12px;gap:11px}.degree-number{font-size:34px;min-width:37px}.degree-label{font-size:6px;letter-spacing:1px}#live-interval{font-size:11px}#live-pitch{font-size:10px;max-width:65px}}@media(min-width:741px)and (max-height:900px){header{height:80px}.intro{padding:36px 0 30px}.piano-roll{height:155px}.melody-title{margin-bottom:27px}.player{padding-top:24px}.degree-display{margin-bottom:20px}}.formula-legend{font-size:9px;color:#747c92;margin-top:10px}.piano-window{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#454f67 #141821}.piano-window .piano{min-width:var(--piano-width)}.roll-labels{justify-content:space-between;padding:3px 0 9px}.ensemble-hint{font-size:9px;color:#787f92;line-height:1.6;margin:9px 0 20px}.band-mixer{padding:21px 0 17px;border-bottom:1px solid var(--line)}.band-tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:15px}.band-track{padding:12px;background:#1d222f;border:1px solid #30384c;border-radius:6px;transition:border-color .12s,background .12s}.track-toggle{display:flex;align-items:center;gap:7px;font-size:11px;color:#b7c0d7;cursor:pointer}.track-toggle input{width:12px;height:12px;accent-color:var(--accent);margin:0}.track-light{width:4px;height:4px;border-radius:50%;background:#525e7b}.band-track.active{border-color:#6c82b8;background:#22293c}.band-track.active .track-light{background:#acc0f2;box-shadow:0 0 6px #96afee}.band-track.muted{opacity:.5}.band-track input[type=range]{width:100%;margin:17px 0 3px}.band-mixer>p{font-size:9px;color:#7d859b;margin-top:12px}.harmony-strip{display:flex;align-items:center;gap:30px;margin:0 0 23px;padding:0 2px}.harmony-strip>div:not(.progression){display:flex;flex-direction:column;gap:5px}.harmony-strip span{font-size:7px;letter-spacing:1px;color:#7f889e}.harmony-strip strong{font-size:11px;font-weight:500;color:#b4bfdb}.progression{margin-left:auto;display:flex;align-items:center;gap:7px}.progression span{padding:7px 8px;border:1px solid #2e364b;border-radius:4px;color:#7886aa;font-size:10px;letter-spacing:0}.progression span.current{background:#96afee;color:#1d253b;border-color:#96afee}.progression b{font-size:9px;color:#505a74;font-weight:400}@media(max-width:740px){.band-tracks{grid-template-columns:repeat(2,1fr)}.harmony-strip{gap:18px;flex-wrap:wrap}.progression{margin-left:0}.band-mixer .section-label>span{display:none}.band-mixer>p{line-height:1.7}}.energy-control{margin:20px 0}.energy-control output{font-size:12px}.energy-control input{width:100%;margin:19px 0 13px}.energy-control .range-labels{margin-bottom:0}.ensemble-hint+.two-controls{margin-top:0;margin-bottom:20px}.melody-options{border-top:1px solid var(--line);padding-top:15px}.melody-options summary{font-size:12px;color:#b2bcd5;cursor:pointer;list-style-position:inside;margin-bottom:15px}.melody-options>label{display:block;font-size:11px;margin-bottom:9px}.player{align-self:start}.quick-picks{margin:0 0 26px}.quick-picks h2{font-size:13px;font-weight:500}.quick-picks .section-label>span{font-size:8px;color:#7f879b;letter-spacing:1px}.preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:15px 0 10px}.preset-button{position:relative;text-align:left;padding:17px 14px 15px 37px;background:#171b25;border:1px solid #2d3447;border-radius:8px;color:#c9d0e1}.preset-button strong{display:block;font-size:12px;font-weight:550}.preset-button small{display:block;color:#7f889e;font-size:9px;margin-top:6px}.preset-star{position:absolute;left:14px;top:17px;color:#7d8fbc;font-size:13px}.preset-button:hover{border-color:#6c81b6;background:#1f2535}.preset-button.selected{border-color:#89a0db;background:#232b3f}.preset-button.selected strong,.preset-button.selected .preset-star{color:#a8bdf2}.quick-picks>p{font-size:10px;line-height:1.7;color:#818aa1}.preset-button:focus-visible{outline-offset:3px}@media(max-width:1050px){.preset-button{padding-left:13px}.preset-star{display:none}.preset-button strong{font-size:11px}.preset-button small{font-size:8px}}@media(max-width:740px){.preset-grid{grid-template-columns:repeat(2,1fr);gap:8px}.preset-button{padding:13px 14px}.preset-button:last-child{grid-column:1/-1}.quick-picks .section-label>span{display:none}.quick-picks>p{font-size:9px}.quick-picks{margin-bottom:22px}}.melody-title+.transport{padding-top:0;margin:-7px 0 25px}.band-mixer{margin-top:5px}.player{width:100%}:root{--accent:#9eceff;--muted:#8e9bb6;--line:#303c55;background:#101625;color:#e8edf7}h1 em{color:#ffb59c}.brand-icon{background:#9eceff;color:#19273f}.brand-dot{color:#ffad96}.eyebrow{color:#aabce3}.eyebrow>span{background:#f1c77e}.pill{background:#302941;border-color:#54436f;color:#d8bbff}.degree-display{background:linear-gradient(115deg,#263448,#32243a);border-color:#4a4564}.degree-number{color:#a3dbf2}.degree-label{color:#c2b2d3}.play-button{background:#ffb299;color:#352229}.play-button:hover{background:#ffccb8}.play-button:disabled{opacity:.6;cursor:wait}.key-button.selected{background:#9eceff;border-color:#9eceff;color:#1a2944}.scale-note{border-color:color-mix(in srgb,var(--note-color) 28%,#2b354b);background:color-mix(in srgb,var(--note-color) 8%,#182236);color:var(--note-color)}.scale-note>span{color:var(--note-color);opacity:.75}.scale-note.tonic{background:color-mix(in srgb,var(--note-color) 16%,#182236);border-color:var(--note-color);color:var(--note-color)}.scale-note small{background:var(--note-color);color:#192538}.scale-note.sounding{background:var(--note-color);border-color:var(--note-color);color:#192538}.scale-note.sounding>span{color:#192538;opacity:1}.piano-roll rect{fill:revert}.piano-roll .new-note{filter:brightness(1.25)}.preset-button[data-preset=phish]{--band-color:#b5a3f5}.preset-button[data-preset=dead]{--band-color:#f1b184}.preset-button[data-preset=meters]{--band-color:#f2d380}.preset-button[data-preset=floyd]{--band-color:#eea3c2}.preset-button[data-preset=khruangbin]{--band-color:#88d5e5}.preset-star,.preset-button strong{color:var(--band-color)}.preset-button.selected{border-color:var(--band-color);background:color-mix(in srgb,var(--band-color) 17%,#182136)}.preset-button.selected strong,.preset-button.selected .preset-star{color:var(--band-color)}.preset-button:hover{border-color:var(--band-color)}.band-track[data-track=bass]{--track-color:#b5a3f5}.band-track[data-track=drums]{--track-color:#f2a58c}.band-track[data-track=keyboard]{--track-color:#f3d280}.band-track[data-track=guitar]{--track-color:#86d8e8}.track-toggle{color:var(--track-color)}.track-toggle input{accent-color:var(--track-color)}.band-track input[type=range]::-webkit-slider-thumb{background:var(--track-color);border-color:#273449}.band-track input[type=range]::-moz-range-thumb{background:var(--track-color);border-color:#273449}.band-track.active{border-color:var(--track-color);background:color-mix(in srgb,var(--track-color) 12%,#192338)}.band-track.active .track-light{background:var(--track-color);box-shadow:0 0 8px var(--track-color)}.progression span.current{background:#bca5ef;border-color:#bca5ef;color:#252039}.piano-key.white{background:#bac2d3;color:#68738a}.piano-key.white.in-scale{background:#e4eaf5;color:#435675}.piano-key.black{background:#111a2c;color:#aed2ed}.audio-credit-link{margin-left:13px;color:#adb8d0}.footer-star{color:#f3c87c}.listening-tip button{color:#ffb59c}.tip-icon{color:#f3d280}.melody-options>.sustain-label{margin-top:20px}