:root{--cream:#faf6ed;--paper:#fffdf8;--ink:#453e38;--muted:#81776e;--sage:#afbea6;--moss:#6b806a;--clay:#c38e78;--peach:#efd0bd;--line:#e5ded2;--shadow:0 10px 36px #6453400c}*{box-sizing:border-box}body{margin:0;font-family:ui-rounded,'Avenir Next',Avenir,system-ui,sans-serif;background:var(--cream);color:var(--ink)}button,select,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fffdf8;color:var(--ink);border-radius:12px;padding:10px 14px;transition:transform .17s,background .17s,border-color .17s}button:hover{transform:translateY(-1px);border-color:var(--clay)}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sage);outline-offset:2px}button.primary{background:var(--moss);border-color:var(--moss);color:white}button.selected,.nav.active{background:#e3eadd;border-color:#bccbb4}button.outline{background:#fffdf8}.app{display:flex;min-height:100vh}.sidebar{width:246px;flex-shrink:0;background:#e9eadf;padding:26px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid #dedecf}.brand{display:flex;gap:10px;align-items:center;margin:5px 0 45px}.brand-icon{width:38px;height:38px;background:#f4d7c7;border-radius:14px;display:grid;place-items:center;font-size:25px}.brand strong{display:block;font-size:16px;letter-spacing:-.5px}.brand small{font-size:11px;color:var(--muted)}nav{display:grid;gap:10px}.nav{text-align:left;background:transparent;border-color:transparent}.sidebar-bottom{margin-top:auto;position:relative;text-align:center;min-height:190px;overflow:hidden}.sidebar-bottom small{display:block;margin-top:100px}.sidebar-bottom p{font-size:11px;color:var(--muted)}.sidebar-bottom .subtle{border:0;background:transparent;color:#697d6a;font-size:11px}.dog{position:absolute;top:40px;left:20px;width:78px;height:55px;animation:wander 10s ease-in-out infinite alternate;filter:drop-shadow(0 5px 4px #0002)}.dog-body{position:absolute;left:13px;top:20px;width:55px;height:26px;border-radius:50% 45% 36% 40%;background:#b98762}.dog-head{position:absolute;left:2px;top:12px;width:30px;height:27px;border-radius:48% 50% 45% 48%;background:#cda178}.dog-head:before{content:'';position:absolute;left:2px;top:-9px;width:12px;height:22px;background:#9e7051;border-radius:60% 25%;transform:rotate(-22deg)}.dog-eye{position:absolute;top:10px;left:9px;background:#342c29;width:4px;height:4px;border-radius:50%}.dog-tail{position:absolute;left:64px;top:15px;width:17px;height:9px;background:#b98762;border-radius:10px;transform:rotate(-38deg);transform-origin:left;animation:wag .6s infinite alternate}.dog-leg{position:absolute;top:39px;width:9px;height:15px;background:#a77759;border-radius:3px;animation:paw .55s infinite alternate}.dog-leg.a{left:22px}.dog-leg.b{left:56px;animation-delay:.3s}@keyframes wander{0%{transform:translateX(0)}50%{transform:translateX(65px)}100%{transform:translateX(115px)}}@keyframes paw{to{transform:rotate(15deg)}}@keyframes wag{to{transform:rotate(12deg)}}main{width:100%;max-width:1540px;margin:auto;padding:30px 38px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 24px}.eyebrow{font-size:10px;color:var(--moss);letter-spacing:2px;font-weight:750}h1{font-size:clamp(26px,3vw,35px);letter-spacing:-1.5px;margin:6px 0}h1 span{font-size:24px}header p{margin:0;color:var(--muted);font-size:13px}.view{display:none}.view.active{display:block}.layout{display:grid;grid-template-columns:1.2fr 1fr;gap:17px}.layout.second{grid-template-columns:1fr 1.2fr;margin-top:17px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:23px;margin-bottom:17px;box-shadow:var(--shadow)}.layout .panel{margin-bottom:0}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}h2{font-size:18px;letter-spacing:-.5px;margin:0}.chip{font-size:10px;color:#8b705e;background:#f5e8de;border-radius:99px;padding:5px 10px;white-space:nowrap}.controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:15px 0}label{font-size:12px;display:grid;gap:7px;color:var(--muted);flex:1;min-width:115px}select,input,textarea{border:1px solid var(--line);padding:9px 11px;background:#fffdf8;border-radius:10px;color:var(--ink);width:100%;outline:0}input[type=range]{padding:0;accent-color:var(--moss)}.scale-summary{background:#f4f4e9;border-radius:14px;padding:14px;margin:10px 0}.scale-summary strong{font-size:18px}.scale-summary p{margin:5px 0;font-size:13px}.muted,.hint{color:var(--muted)}.hint{font-size:12px;line-height:1.5}.keyboard-wrap{overflow-x:auto}.keyboard{height:176px;display:flex;position:relative;min-width:495px;background:#e8ddd2;border-radius:9px;padding:5px}.white-key{height:166px;flex:1;border:1px solid #cbc3b5;background:#fffefa;border-radius:0 0 6px 6px;position:relative;display:flex;align-items:end;justify-content:center;padding-bottom:12px;color:#716a60;font-size:10px;cursor:pointer;user-select:none}.white-key.on{background:#bfd0ad}.white-key.pressed{background:#e8b69d}.black-key{position:absolute;top:5px;width:6.15%;height:100px;border-radius:0 0 5px 5px;background:#454744;z-index:2;cursor:pointer;display:flex;align-items:end;justify-content:center;padding-bottom:9px;color:#ddd;font-size:9px}.black-key.on{background:#758d70}.black-key.pressed{background:#bb8268}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.circle-controls{display:flex;gap:8px;flex-wrap:wrap}.circle-controls button{padding:7px 11px;font-size:12px}#circle{width:100%;max-width:355px;display:block;margin:5px auto}#circle text{font-family:inherit;user-select:none;pointer-events:none}#circle .wheel-key{cursor:pointer;transition:fill .15s}#circle .wheel-key:hover{filter:brightness(.94)}.explainer{min-height:44px;font-size:12px;line-height:1.6;color:#756c62}.feature{background:#f6f1e9;border-radius:14px;padding:16px;line-height:1.7;font-size:13px;margin-top:12px}.feature strong{font-size:17px}.feature p{margin:6px 0}.progression{display:flex;flex-wrap:wrap;gap:7px;min-height:54px}.chord-pill{background:#e6efdf;border:1px solid #c5d4be;border-radius:11px;padding:10px;font-weight:700}.chord-pill span{margin-left:8px;cursor:pointer;color:#96695a}.sequencer{overflow-x:auto}.drum-row,.step-labels{display:grid;grid-template-columns:95px repeat(16,minmax(22px,1fr));gap:4px;align-items:center;margin:9px 0;min-width:535px}.drum-name{font-size:12px;font-weight:700}.step{border-radius:6px;height:30px;border:1px solid #e1dbd0;background:#eee9e0;padding:0}.step.beat-start{background:#e0e1d5}.step.on{background:#c28e79;border-color:#ad775e}.step.playing{outline:2px solid var(--moss)}.step-labels span{text-align:center;font-size:10px;color:var(--muted)}.bass-grid{display:grid;grid-template-columns:repeat(16,minmax(36px,1fr));gap:6px;overflow-x:auto;padding:4px 0}.bass-step{height:48px;font-size:11px;background:#f4f1e9;padding:3px}.bass-step.has-note{background:#e1e9d8;border-color:#bbcbb0}.bass-step.playing{outline:2px solid var(--clay)}.wide-label{margin:17px 0}.wide-label textarea{resize:vertical}.sound-role{display:flex;gap:9px;margin:8px 0}.sound-role b{min-width:85px;color:#657c65}footer{font-size:11px;text-align:center;color:#93877a;padding:24px}@media(max-width:950px){.sidebar{width:185px}main{padding:22px}.layout,.layout.second{grid-template-columns:1fr}.layout .panel{margin-bottom:17px}}@media(max-width:650px){.app{display:block}.sidebar{width:100%;position:relative;height:auto;padding:12px}.brand{margin:2px 0 10px}nav{display:flex;overflow:auto}.nav{white-space:nowrap;font-size:12px}.sidebar-bottom{display:none}main{padding:18px}header{align-items:start;flex-direction:column}.panel{padding:16px}.drum-row,.step-labels{grid-template-columns:70px repeat(16,minmax(23px,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Optional creator support: never blocks lessons or features */
.kofi-support{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 8px;padding:11px 12px;border:1px solid #caa58d;border-radius:15px;background:#f4dfd1;color:#694634;text-decoration:none;font-weight:700;font-size:13px;transition:background .18s ease,transform .18s ease}
.kofi-support:hover,.kofi-support:focus-visible{background:#f9e8dc;transform:translateY(-1px);outline-offset:2px}
.kofi-support span{font-size:12px}
footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.kofi-support{transition:none}.kofi-support:hover{transform:none}}