.bass-app{--bass:#7e9d99;--bass-light:#d9e6e0;--bass-deep:#345c55}.bass-app .count-pill,.bass-app .family-badge{background:#dde7df;color:#587568}.bass-app .genre-select{background:#e1eae3;border-color:#c5d3c7}.bass-app .play-button{background:#b8d6c8;border-color:#9fbeae;box-shadow:0 2px 0 #9db9a9}.bass-app .play-button.playing{background:var(--bass-deep);border-color:var(--bass-deep);color:#edf4e9}.bass-app .pattern-card.active{background:#dce8df;border-color:#b9cfbf}.bass-app .pattern-card.active:before{background:#6a8f79}.bass-app main{padding-top:28px}.bass-app .library-heading h2{font-size:16px}.bass-app .library-results{gap:8px}.bass-app .library-results>span{flex:1}.bass-key-panel{display:grid;grid-template-columns:85px 1.6fr 1fr 95px 110px;gap:17px;align-items:center;margin-top:24px;background:#e3e9df;border:1px solid #cbd7c5;border-radius:7px;padding:16px 18px 0}.bass-key-panel select,.note-inspector select{width:100%;background:#f5f7ef;border:1px solid #c5d1bd;padding:7px;border-radius:4px;font-size:12px;min-width:0}.transpose-control>div{display:flex;gap:4px}.transpose-control .button{padding:7px 9px;flex:1;font:12px var(--mono);background:#f5f7ef}.key-lock{font-size:10px;line-height:1.3;cursor:pointer;color:#5c7152}.key-lock input{accent-color:#608558;margin:0 5px 0 0;vertical-align:middle}.key-lock small{font-size:8px;margin-left:20px;color:var(--muted)}.scale-strip{grid-column:1/-1;display:flex;align-items:center;gap:17px;border-top:1px solid #cbd7c5;padding:10px 0}.scale-strip>#key-summary{font:10px var(--mono);color:#55744a}.scale-strip>#scale-notes{font:11px var(--mono);letter-spacing:.05em;flex:1}.scale-strip button{font-size:9px;color:var(--muted)}.bass-transport{grid-template-columns:100px 90px 1fr 1.5fr .85fr;margin:16px 0;gap:22px;padding:15px 18px}.bass-transport .play-button{height:48px}.bass-roll-scroll{overflow:auto;padding:0 18px 14px;max-height:420px;scrollbar-width:thin}.bass-roll{display:grid;grid-template-columns:90px repeat(16,minmax(24px,1fr));gap:2px 3px;min-width:680px}.bass-beat{position:sticky;top:0;z-index:4;background:var(--panel);font:9px var(--mono);height:25px;display:flex;align-items:center;justify-content:center;color:var(--muted);border-bottom:1px solid var(--line)}.bass-beat.current{background:#c9dfd1;color:#254e38}.bass-pitch-label{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);padding:0 10px 0 2px;height:21px;position:sticky;left:0;z-index:3;background:var(--panel);color:#7d8972}.bass-pitch-label.root{font-weight:500;color:#385b42}.bass-pitch-label span{font-size:8px;color:#9aab8e}.bass-cell{height:21px;background:#e9ece3;border:1px solid #dfe4d6;min-width:0;border-radius:2px;padding:0;position:relative;font:8px var(--mono);color:#254d3b;touch-action:manipulation}.bass-cell.beat-edge{border-left:2px solid #bdc9b1}.bass-cell.root-row{background:#e0e8d8}.bass-cell.note-start{background:#83a99a;border-color:#709783;color:#fff;text-align:left;padding-left:4px;z-index:1;box-shadow:inset 0 -2px 0 #315a3b15}.bass-cell.note-tail{background:#b0cbb9;border-color:#9fbea8;border-radius:0}.bass-cell.note-end{border-radius:0 3px 3px 0}.bass-cell.selected{outline:2px solid #345b45;outline-offset:-2px}.bass-cell.chromatic{background:#cda76a;border-color:#b18e54}.bass-cell.current{box-shadow:inset 0 0 0 1px #476b4699;background-image:linear-gradient(#92ae4320,#92ae4320)}.bass-cell.note-start.current{background:#476f5c;color:white}.bass-cell:hover{border-color:#6f8e63}.bass-cell.gated:after{content:'';position:absolute;right:0;top:0;height:100%;width:20%;background:#f1f3e780}.bass-grid-hint{font-size:9px;color:var(--muted)}.bass-chromatic-key{font-size:8px;white-space:nowrap;color:var(--muted)}.bass-chromatic-key i{display:inline-block;width:6px;height:6px;background:#cda76a;border-radius:1px;margin-right:5px}.note-inspector{display:grid;grid-template-columns:135px 60px 100px 107px 62px 1fr 1fr 47px;align-items:center;gap:11px;border:1px solid var(--line);border-top:0;padding:15px 16px;border-radius:0 0 7px 7px;background:#f2f4ea}.note-inspector-title strong{font-size:12px;font-weight:600;display:block}.note-inspector-title>span:last-child{font:8px var(--mono);color:var(--muted)}.note-inspector select{font-size:10px;padding:6px 3px;background:#fafbf6}.note-inspector .control-label{font-size:7px;margin-bottom:5px;letter-spacing:.04em}.note-inspector .text-button{font-size:9px;color:#8c6d4c}.bass-sequencer{border-radius:7px 7px 0 0}.bass-app .under-grid{padding-bottom:16px}.bass-mix{display:grid;grid-template-columns:155px 1.7fr 1fr 1fr 1fr;gap:17px;align-items:center;border-top:1px solid var(--line);padding:17px 0 15px}.companion-heading label{font-size:11px;font-weight:550;white-space:nowrap}.companion-heading input{accent-color:#6f8e58;vertical-align:middle;margin:0 5px 0 0}.companion-heading .text-button{display:block;font-size:9px;color:var(--muted);margin-left:18px}.bass-mix>select{min-width:0;width:100%;font-size:11px;padding:8px;background:#f4f5ed;border:1px solid var(--line);border-radius:4px}.bass-mix>p{grid-column:1/-1;font-size:9px;color:var(--muted);margin-top:-6px}.chromatic-note{font-size:10px!important;color:#9b773e!important;margin-top:9px!important}.bass-mini{display:flex;align-items:end;height:15px;gap:2px;min-width:52px}.bass-mini i{background:#7d9a85;width:3px;border-radius:1px;min-height:2px}.bass-mini i.rest{background:#c9d2c3;height:2px!important}.bass-app .groove-details{padding-top:20px}.bass-note-sequence{font:11px var(--mono);line-height:2;color:#587550;padding:12px;border:1px solid var(--line);border-radius:5px;margin:12px 0}.key-help-note{font-size:11px!important}
@media(max-width:1400px){.note-inspector{grid-template-columns:115px 60px 1fr 1fr 62px;gap:10px}.note-inspector>label:nth-last-of-type(2),.note-inspector>label:last-of-type{grid-column:span 2}.note-inspector>#delete-note{grid-column:5}.bass-grid-hint{display:none}.bass-key-panel{gap:11px;grid-template-columns:70px 1.4fr 1fr 80px 95px}.bass-transport{gap:15px;grid-template-columns:90px 75px .9fr 1.5fr}.tone-control{grid-column:1/-1;display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);padding-top:8px}.tone-control .control-label{margin:0}.tone-control input{max-width:160px}.bass-mix{gap:12px;grid-template-columns:145px 1.5fr 1fr 1fr}.bass-mix>label:last-of-type{grid-column:3/5;display:flex;gap:10px;align-items:center}.bass-mix>label:last-of-type .control-label{margin:0}}
@media(max-width:1050px){.bass-key-panel{grid-template-columns:70px 1.8fr 1fr;padding:13px 14px 0}.transpose-control{grid-column:1}.key-lock{grid-column:2/4}.key-lock br{display:none}.key-lock small{margin-left:4px}.scale-strip{flex-wrap:wrap;gap:8px 15px}.scale-strip button{margin-left:auto}.bass-transport{grid-template-columns:85px 75px 1fr}.bass-transport .kit-control{grid-column:1/4}.tone-control{grid-column:1/4}.bass-roll{min-width:620px;grid-template-columns:70px repeat(16,minmax(24px,1fr))}.note-inspector{grid-template-columns:100px 60px 1fr 1fr}.note-inspector>label:nth-last-of-type(2),.note-inspector>label:last-of-type{grid-column:auto}.note-inspector>#delete-note{grid-column:auto}.bass-mix{grid-template-columns:135px 1fr}.bass-mix>label:last-of-type{grid-column:1/3}.bass-mix>label:last-of-type input{max-width:240px}}
@media(max-width:640px){.bass-app .masthead{flex-wrap:wrap;height:98px;gap:5px 20px;padding-top:10px;padding-bottom:10px}.bass-app .masthead .brand{font-size:28px}.bass-app .masthead nav{gap:12px}.bass-app .instrument-switch{order:3;width:100%;justify-content:center;padding:3px}.bass-app main{padding-top:22px}.bass-key-panel{margin-top:19px;grid-template-columns:65px 1fr 90px;gap:12px 8px}.bass-key-panel select{font-size:11px;padding:7px 4px}.scale-strip{gap:6px}.scale-strip>#key-summary{width:100%}.scale-strip>#scale-notes{font-size:10px;letter-spacing:0}.scale-strip button{font-size:8px}.bass-transport{margin:13px 0}.bass-roll-scroll{max-height:380px;padding-left:10px;padding-right:10px}.bass-roll{min-width:620px}.bass-roll-scroll:after{content:'SWIPE HORIZONTALLY FOR ALL 16 STEPS · SCROLL FOR OTHER OCTAVES';font:7px var(--mono);color:var(--muted);display:block;padding:10px 0;position:sticky;left:0;width:320px;max-width:100%}.note-inspector{grid-template-columns:repeat(3,1fr);gap:12px 10px;padding:13px 12px}.note-inspector-title{grid-column:1/3}.note-inspector>label:nth-of-type(1){grid-column:3}.note-inspector>label:nth-last-of-type(2),.note-inspector>label:last-of-type{grid-column:auto}.note-inspector select{width:100%;font-size:10px}.note-inspector>#delete-note{grid-column:3}.bass-grid-hint{display:none}.bass-chromatic-key{font-size:7px}.bass-mix{gap:12px}.bass-mix>p{line-height:1.7}.bass-app .library{height:760px}.bass-app .library-heading h2{font-size:19px}}