@font-face{font-family:system;src:local("Avenir Next")}
:root{font-family:system,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#203c35;background:#f4f5ed;font-synthesis:none;--teal:#1d6759;--amber:#a86618;--muted:#52685f;--line:#c5d4c9}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 32%,#e7eee4 0,transparent 60%);min-height:100svh}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}button:focus-visible{outline:3px solid #a86618;outline-offset:4px}button:disabled{cursor:wait}button,.wheel{user-select:none;-webkit-user-select:none}.app{max-width:510px;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom))}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.brand{display:flex;align-items:center;gap:9px}.brand svg{width:30px;height:30px;fill:none;stroke:var(--teal);stroke-width:1.6}.brand svg .brand-dot{fill:var(--teal);stroke:#f4f5ed;stroke-width:2}h1{font-size:1.35rem;font-weight:750;letter-spacing:-.055em;margin:0}h1 span{font-weight:450;letter-spacing:-.045em}.stop{display:flex;gap:7px;align-items:center;border:1px solid #c3d0c4;border-radius:30px;background:#fff8;color:#314b40;min-height:44px;padding:0 15px;font-size:.875rem;font-weight:650}.stop:disabled{opacity:.45}.stop span{font-size:12px}.wheel{position:relative;width:100%;aspect-ratio:1;isolation:isolate}.wheel-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#c0d0c3;stroke-width:.8}.wheel-lines circle{opacity:.65}.wheel-lines #spokes{opacity:.2}.wheel-lines #connection{stroke:var(--teal);stroke-width:1.6;stroke-dasharray:4 5;opacity:.55}.chord{position:absolute;transform:translate(-50%,-50%);border:1px solid #aebfb2;border-radius:50%;width:10.6%;aspect-ratio:1;background:linear-gradient(145deg,#f1f4ec,#dde7dc);color:#25483d;font-size:clamp(.875rem,4.2vw,1.12rem);font-weight:650;box-shadow:0 2px 2px #203c3512;display:grid;place-items:center;padding:0;min-width:40px;min-height:40px;transition:background .15s,box-shadow .15s}.chord.minor{font-size:clamp(.8125rem,3.65vw,1rem);background:linear-gradient(145deg,#f4f6ef,#e6ece3);font-weight:550}.chord:not(:disabled):active{scale:.95}.chord.locked{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 0 0 4px #1d675918}.chord.target{border:2px solid var(--teal);box-shadow:0 0 0 4px #1d675918}.chord.target:not(.locked){background:#e0ede1}.chord.landing-flash{animation:land .65s ease}.readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:39%;text-align:center;display:flex;align-items:center;flex-direction:column;gap:7px;pointer-events:none}.eyebrow{font-size:.75rem;letter-spacing:.09em;color:#52685f;font-weight:650}.readout strong{font-size:clamp(1.35rem,6.6vw,2rem);letter-spacing:-.065em;line-height:1.12;font-weight:600;overflow-wrap:anywhere;color:var(--amber)}.readout strong.idle{font-size:1.3rem;color:var(--teal);letter-spacing:-.04em}#note-names{font-size:.75rem;color:var(--muted);line-height:1.4}.ring-key{display:flex;justify-content:center;gap:20px;font-size:.75rem;color:#586c61;margin-top:0}.journey{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.endpoints{display:flex;align-items:center;gap:20px}.endpoints>div{display:flex;flex-direction:column;gap:4px;min-width:100px}.endpoints strong{font-size:1.25rem;letter-spacing:-.025em;font-weight:600}.target-end{text-align:right}.journey-line{height:1px;background:#b8c9bc;flex:1}.progress{display:flex;justify-content:center;align-items:center;gap:9px;min-height:20px;margin-top:17px}.progress-dot{width:7px;height:7px;border-radius:50%;background:#cbd6cb;transition:background .12s}.progress-dot.done{background:#b1782b}.progress-dot.active{box-shadow:0 0 0 4px #b1782b18;background:#b1782b}.progress-dot.landing{width:11px;height:11px;border:1.5px solid var(--teal);background:transparent;margin-left:4px}.progress-dot.landing.done{background:var(--teal)}.hint{text-align:center;font-size:.875rem;color:#4d6559;margin:8px 0 0;min-height:2.5em;line-height:1.45}.lane-panel{margin-top:10px;padding:15px;border:1px solid #cad6cb;border-radius:18px;background:#e7ede3a0}.lane-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}h2{margin:0;font-size:.9375rem;font-weight:650}.lane-heading>span{font-size:.75rem;color:#52685f}.lanes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.lane{padding:0;border:1px solid #bfcfc0;border-radius:10px;background:#f8faf2;min-height:44px;font-size:1rem;color:#365245;font-weight:550}.lane.selected{background:var(--teal);color:white;border-color:var(--teal)}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#62766a;font-size:.75rem;margin-top:12px;min-height:38px}.text-button{border:0;color:var(--teal);background:none;font-size:.8125rem;text-decoration:underline;text-underline-offset:3px;padding:8px 0;min-height:44px}#install-tip{margin:4px 0 0;font-size:.875rem;line-height:1.55;padding:12px;border-radius:12px;background:#e5ece1}.error{font-size:.875rem;padding:12px;background:#ffe3df;color:#852c22;border-radius:10px;line-height:1.5}[hidden]{display:none!important}@keyframes land{0%,100%{box-shadow:0 0 0 4px #1d675918}45%{box-shadow:0 0 0 10px #1d67592c}}@media(min-width:700px){.app{padding-top:35px}.header{margin-bottom:18px}}@media(max-width:370px){.app{padding-left:12px;padding-right:12px}.lane-panel{padding:12px 10px}.lanes{gap:3px}.eyebrow{letter-spacing:.035em}.readout{gap:4px}.readout .eyebrow{font-size:.65rem}.readout strong{font-size:1.35rem}.ring-key{margin-top:7px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.studio-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:18px;padding-bottom:8px;border-bottom:1px solid var(--line)}.studio-tabs button{padding:0 2px;border:0;background:transparent;color:var(--muted);font-size:.75rem;min-height:44px;border-radius:9px}.studio-tabs button[aria-pressed=true]{background:var(--teal);color:white}.studio-panel{padding:18px 0 4px}.studio-panel h2{font-size:1.08rem}.studio-panel h3{font-size:.93rem;margin:22px 0 10px}.panel-note{color:var(--muted);font-size:.81rem;line-height:1.5}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:7px;font-size:.78rem;color:var(--muted);margin:10px 0;min-width:0}.field input:not([type=range]),.field select,.search{min-height:44px;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fcfcf6;color:#203c35;font:inherit;font-size:16px}.field input[type=range]{width:100%;min-height:32px;accent-color:var(--teal)}.range-field span{display:flex;justify-content:space-between;gap:8px}.range-field output{color:var(--teal);font-variant-numeric:tabular-nums}.button-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0}.control-button{border:1px solid #b8cbbc;background:#edf3e8;color:var(--teal);border-radius:9px;min-height:44px;padding:8px 12px;font-size:.8rem}.control-button:disabled{opacity:.4}.grow{flex:1;min-width:130px}.check{display:flex;align-items:center;gap:9px;font-size:.8rem;min-height:44px;color:var(--muted)}.check input{width:20px;height:20px;accent-color:var(--teal)}.pedals{display:flex;flex-wrap:wrap;gap:6px}.phrase-row,.history-row{background:#e7ede380;border:1px solid var(--line);padding:10px;border-radius:10px;margin-top:8px}.phrase-row button{border:0;background:none;color:var(--teal);font:inherit;font-size:.85rem;font-weight:600;min-height:35px;padding:0;text-align:left}.phrase-row span,.phrase-row small{display:block;font-size:.74rem;color:var(--muted);line-height:1.6}.mixer-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #c5d4c970}.mixer-toggle{width:52%;text-align:left;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:8px;color:var(--muted);background:#f7f9f1;font-size:.8rem}.mixer-toggle[aria-pressed=true]{color:white;background:var(--teal);border-color:var(--teal)}.mixer-row label{flex:1;text-align:right;font-size:.75rem;color:var(--muted)}.mixer-row input{display:block;width:100%;min-height:30px;accent-color:var(--teal)}details{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:12px 0}summary{cursor:pointer;min-height:35px;line-height:35px;font-size:.84rem;color:var(--teal)}.instrument-mixer{max-height:430px;overflow-y:auto;overscroll-behavior:contain}.search{width:100%;margin:8px 0}.loop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:16px 0}.loop-card{display:flex;flex-direction:column;gap:5px;justify-content:space-between;text-align:left;padding:8px;border:1px solid var(--line);border-radius:10px;background:#f1f3e9;color:var(--muted);min-height:90px;overflow-wrap:anywhere;min-width:0}.loop-card small,.loop-card span{font-size:.67rem}.loop-card strong{font-size:.81rem;font-weight:600}.loop-card.destination{background:#e0eee1;color:var(--teal)}.loop-card.passing{background:#f0e5cd;color:#8c591c}.loop-card.chosen{outline:2px solid #8972a6;outline-offset:1px}.loop-card.sounding{box-shadow:inset 0 0 0 3px var(--teal)}.mini-roll{height:65px;background:#f8faf0;border-radius:6px;overflow:hidden}.mini-roll svg{width:100%;height:100%;fill:var(--teal)}.history-row>small{color:var(--muted);font-size:.72rem;line-height:1.5}.learn-keyboard{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}.piano-key{padding:1px;border:1px solid #b8cbbc;border-radius:5px;background:#fcfdf5;color:var(--teal);min-height:68px;font-size:.62rem;writing-mode:vertical-rl;text-orientation:mixed}.piano-key.black{background:#3f5149;color:white}.piano-key.picked{background:#b87a22;color:white;border-color:#b87a22}.lesson-text{white-space:pre-line;color:var(--muted);font-size:.84rem;line-height:1.6}.chord:disabled{opacity:.35;cursor:default}#note-names{max-height:4.2em;overflow:hidden}.readout .eyebrow{font-size:.66rem}
.header{position:sticky;top:env(safe-area-inset-top);z-index:10;background:#f4f5edee;backdrop-filter:blur(12px);padding:7px 0}.studio-tabs{position:sticky;top:calc(58px + env(safe-area-inset-top));z-index:9;background:#f4f5ed}
.file-ready{position:sticky;bottom:env(safe-area-inset-bottom);padding:12px;border:1px solid var(--line);border-radius:10px;background:#e0eee1;z-index:11}.file-ready a{display:block;color:var(--teal);min-height:30px;line-height:30px;font-size:.85rem;overflow-wrap:anywhere}
/* Phone performance surface and dedicated studio pages. */
.app{min-height:100svh;height:100svh;max-width:510px;display:flex;flex-direction:column;padding:calc(8px + env(safe-area-inset-top)) 14px calc(6px + env(safe-area-inset-bottom));gap:5px}.header{position:static;padding:0;margin:0;min-height:44px;flex-shrink:0}.page-buttons{display:flex;gap:6px;flex-shrink:0}.page-buttons button{flex:1;border:1px solid var(--line);border-radius:10px;background:#eef3e8;color:var(--teal);min-height:44px;font-size:.8rem}.journey{order:0;margin:4px 0 0;padding:6px 8px 0;border:0}.endpoints{gap:12px}.endpoints .eyebrow{font-size:.6rem}.endpoints strong{font-size:1rem}.endpoints>div{min-width:80px;gap:1px}.progress{margin-top:5px;min-height:14px}.hint{font-size:.78rem;margin:3px 0;min-height:2em}.lane-panel{margin:0;padding:8px;flex-shrink:0;border-radius:12px}.lane-heading{margin-bottom:5px}.lane-heading h2{font-size:.8rem}.lane{min-height:38px}.performance-spacer{flex:1;min-height:8px}.performance-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}#destination-only{touch-action:none;border:1px solid var(--teal);border-radius:12px;background:#eef4e9;color:var(--teal);text-align:left;padding:8px 12px;font-size:.85rem;min-height:55px}#destination-only[aria-pressed=true]{background:var(--teal);color:white}#destination-mode{display:block;font-size:.61rem;margin-top:4px}.gesture-tip{text-align:right;font-size:.65rem;line-height:1.5;color:var(--muted)}.instrument{flex-shrink:0}.wheel{width:min(100%,38svh);margin:auto}.chord{touch-action:none;min-width:36px;min-height:36px}.ring-key{display:none}.readout strong{font-size:clamp(1.2rem,5.6vw,1.6rem)}.readout{gap:4px}#note-names{font-size:.64rem}.bottom-piano{flex-shrink:0;margin:2px -14px 0;background:#e3ebdf;border-top:1px solid var(--line);padding-top:3px}.piano-heading{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:0 8px;font-size:.6rem;color:var(--muted)}.piano-heading button{border:0;background:none;color:var(--teal);min-height:30px;font-size:.65rem;padding:2px 4px}#piano-scroll{overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none}#piano-keys{height:86px;position:relative}.live-key{position:absolute;top:0;touch-action:pan-x;width:28px;height:82px;border:1px solid #abbdb0;border-radius:0 0 5px 5px;background:#fcfdf6;color:#425e50;font-size:.48rem;padding:0 0 5px;display:flex;align-items:flex-end;justify-content:center}.live-key.black{width:18px;height:52px;background:#2d423a;color:#e6ece3;z-index:2;font-size:.43rem}.live-key.sounding{background:#328471;color:white}.live-key.pedalled{box-shadow:inset 0 -12px #dba33e}.live-key.black.pedalled{box-shadow:inset 0 -8px #dba33e}footer{flex-shrink:0;font-size:.57rem;min-height:18px;margin:0;gap:6px}footer .text-button{min-height:23px;font-size:.62rem;padding:2px}#install-tip{position:fixed;bottom:100px;left:15px;right:15px;z-index:25;box-shadow:0 5px 35px #203c3540}#error{position:fixed;top:70px;left:15px;right:15px;z-index:50}.studio-page{position:fixed;inset:0;z-index:30;background:#f4f5ed;overflow-y:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) max(16px,calc((100vw - 650px)/2)) calc(24px + env(safe-area-inset-bottom))}.page-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:#f4f5edf5;z-index:12;gap:10px;min-height:56px}.page-header button{border:1px solid var(--line);background:#eef3e8;border-radius:9px;min-height:42px;color:var(--teal);padding:6px 12px}.studio-tabs{top:56px;margin-top:0}.page-open{overflow:hidden}.history-export{position:sticky;top:108px;z-index:8;background:#f4f5edf5;padding:10px 0;border-bottom:1px solid var(--line)}.history-export .panel-note{font-size:.7rem;margin:4px 0}.history-export .button-row{margin:5px 0}#export-status{font-size:.8rem;margin:4px 0}#export-files a{font-size:.76rem;color:var(--teal);padding:5px 0;overflow-wrap:anywhere}.history-row .check{font-size:1rem;font-weight:650;min-height:50px}.history-row input{width:25px;height:25px}.drag-chord{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:2px solid #dba33e;background:var(--teal);color:white;font-size:1rem;box-shadow:0 4px 18px #203c3550}#drop-tray{position:fixed;z-index:20;top:calc(60px + env(safe-area-inset-top));left:14px;right:14px;max-width:480px;margin:auto;padding:14px;background:#eff4e8f5;border:1px solid var(--teal);border-radius:16px;box-shadow:0 10px 35px #203c3530}#drop-tray>strong{font-size:.86rem}#drop-tray>span{font-size:.68rem;color:var(--muted)}#drop-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}#drop-steps>div{min-height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#e0eee1;color:var(--teal)}#drop-steps>div.hover{background:var(--teal);color:white;outline:3px solid #dba33e}@media(max-height:750px){.wheel{width:min(100%,37svh)}.hint{min-height:1.5em}.endpoints{display:none}.gesture-tip{font-size:.57rem}.piano-heading{font-size:.55rem}#piano-keys{height:70px}.live-key{height:66px}.live-key.black{height:44px}.chord{min-width:31px;min-height:31px;font-size:.8rem}.chord.minor{font-size:.7rem}.performance-tools #destination-only{min-height:48px;padding:6px 10px}}
.preset-shortcut{align-self:flex-end;border:0;background:none;color:var(--teal);min-height:30px;padding:3px 8px;font-size:.72rem;flex-shrink:0}.preset-editor{position:fixed;z-index:70;top:25svh;left:18px;right:18px;max-width:460px;margin:auto;border:1px solid var(--teal);border-radius:16px;padding:20px;background:#f4f5ed;box-shadow:0 0 0 100vmax #173c3555}.preset-editor h2{font-size:1.1rem}.preset-editor input{width:100%}
.studio-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}

#preset-backdrop{position:fixed;inset:0;background:#173c3555;z-index:69}.preset-editor{box-shadow:0 8px 35px #173c3540}

#piano-keys{height:64px}.live-key{height:60px;width:20px}.live-key.black{height:38px;width:12px;font-size:.38rem}.piano-heading{min-height:25px}.piano-heading button{min-height:25px}@media(max-height:750px){#piano-keys{height:58px}.live-key{height:54px}.live-key.black{height:34px}}

/* Keep the keyboard off the portrait performance surface. */
@media (orientation:portrait){.bottom-piano{display:none}}
@media (orientation:landscape) and (min-width:600px){
  .app{max-width:1100px;display:grid;grid-template-columns:minmax(280px,.95fr) minmax(280px,1.05fr);grid-template-rows:38px auto auto minmax(44px,1fr) 24px auto 18px;gap:3px 16px;padding:calc(5px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))}
  .header{grid-column:1;grid-row:1;min-height:38px}.stop{min-height:38px}.page-buttons{grid-column:2;grid-row:1}.page-buttons button{min-height:38px}
  .journey{grid-column:1;grid-row:2;margin:0;padding:0}.endpoints{display:none}.hint{min-height:0;margin:2px 0;font-size:.7rem}.progress{margin:0;min-height:10px}
  .lane-panel{grid-column:1;grid-row:3;padding:5px 8px}.lane-heading{margin-bottom:3px}.lane{min-height:32px}
  .performance-spacer{display:none}.performance-tools{grid-column:1;grid-row:4;align-self:start}.performance-tools #destination-only{min-height:44px;padding:5px 10px}
  .preset-shortcut{grid-column:1;grid-row:5;justify-self:end;min-height:24px;padding:2px 8px}
  .instrument{grid-column:2;grid-row:2 / 6;display:flex;align-items:center;justify-content:center;min-height:0}.wheel{width:min(100%,calc(100svh - 180px))}
  .bottom-piano{grid-column:1 / -1;grid-row:6;margin:0}.piano-heading{padding:0 8px}
  footer{grid-column:1 / -1;grid-row:7;min-height:18px}footer .text-button{min-height:18px}
}

/* Use every available portrait pixel while keeping the lock above the wheel. */
@media (orientation:portrait){
  .app{max-width:none;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .performance-spacer{display:none}
  .performance-tools{margin-top:3px;margin-bottom:8px}
  .instrument{flex:1;min-height:0;container-type:size;display:grid;justify-items:center;align-items:end}
  .wheel{width:min(100%,100cqh);margin:0}
  .chord{width:12.8%;min-width:0;min-height:0;font-size:clamp(.875rem,4.2vw,1.2rem)}
  .chord.minor{font-size:clamp(.8rem,3.65vw,1.05rem)}
}