@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0d0b0c;--panel:#171314;--line:#35272a;--text:#f5eeee;--muted:#b0a0a4;--mint:#b71f2c;--amber:#d96b59}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}button,a,label[for=file]{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button,select{color:var(--text)}.topbar{height:82px;border-bottom:1px solid var(--line);padding:0 4%;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:var(--text);font:800 28px Manrope,system-ui;display:flex;align-items:center;gap:10px;letter-spacing:-1px}.brand-icon{display:inline-flex;border:1px solid #70292c;background:#341315;color:var(--mint);width:35px;height:38px;align-items:center;justify-content:center;border-radius:9px;font-size:33px}.brand-sub{font:600 9px 'DM Sans',system-ui;letter-spacing:2px;margin-left:14px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:10px}.privacy{font-size:11px;color:var(--muted);margin-right:12px}.privacy:first-letter{color:var(--mint)}.button{border:1px solid #51313b;background:#281618;border-radius:8px;padding:11px 16px;display:inline-flex;justify-content:center;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:600}.button:hover{background:#3c1a1c}.button.primary{background:var(--mint);color:#260b12;border-color:var(--mint)}.button.primary:hover{background:#d6323e}.button.small{padding:9px 13px;font-size:12px}.text-button{border:0;background:none;color:var(--muted);font-size:11px;padding:5px}.text-button:hover{color:var(--mint)}main{max-width:1600px;margin:auto;padding:32px 4% 0}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px;color:var(--muted)}.heading .eyebrow{color:var(--mint)}h1{font:600 34px Manrope,system-ui;letter-spacing:-1.5px;margin:7px 0 8px}p{color:var(--muted);line-height:1.6}.heading p{margin:0;font-size:13px}.heading .button{background:transparent}.heading .button span{margin-left:14px}.help{border:1px solid #793746;padding:20px;border-radius:12px;margin-bottom:22px;line-height:1.6;background:#29171c}.help a{color:var(--mint);font-size:12px}.session-bar{display:flex;align-items:center;gap:14px;padding:16px 19px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(110deg,#271215,#201113);margin-bottom:18px}.song-icon{width:40px;height:40px;border-radius:9px;background:#40191c;color:var(--mint);display:grid;place-items:center;font-size:23px}.song-info{min-width:0}.song-info h2{font-size:14px;font-weight:600;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-info>span{font-size:11px;color:var(--muted)}.session-meta{margin-left:auto;display:flex;align-items:center;gap:16px;white-space:nowrap;font-size:12px}.tag{font-size:8px;letter-spacing:1px;border:1px solid #61323e;color:#d2b6bf;padding:6px 9px;border-radius:5px}.workspace{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(0,1fr);gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-heading{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}.panel-heading>div{display:flex;align-items:center;gap:9px}.panel-heading h2{font:600 13px Manrope,system-ui;margin:0}.subtle{font-size:8px;letter-spacing:1px;color:var(--muted)}.panel-heading .subtle{margin-left:6px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%}.mint,.mint-bg{background:var(--mint)}.amber,.amber-bg{background:var(--amber)}.roll-wrap{height:352px;position:relative;background:#100c0e}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.roll-empty{position:absolute;inset:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#180e13f0;text-align:center;padding:20px}.roll-empty>span{font-size:30px;color:var(--mint);margin-bottom:10px}.roll-empty strong{font:600 17px Manrope,system-ui}.roll-empty p{font-size:12px;margin:8px 0 15px}.roll-empty[hidden]{display:none}.panel-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 17px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}.panel-footer>span{display:flex;gap:5px;align-items:center}.swatch{width:6px;height:6px;border-radius:2px;display:inline-block}.current-cue{padding:17px 19px 14px;display:flex;align-items:center;justify-content:space-between}.current-cue strong{display:block;font:600 20px Manrope,system-ui;margin:5px 0}.current-cue #cue-kind{font-size:10px;color:var(--muted)}.beat-dots{display:flex;gap:6px}.beat-dots i{width:7px;height:7px;border-radius:50%;background:#412629}.beat-dots i.on{background:var(--mint);box-shadow:0 0 10px #b71f2c55}.board-scroll{overflow-x:auto;padding:0 10px 2px;scrollbar-color:#733b50 #211017;scrollbar-width:thin}.board{min-width:460px;display:flex;flex-direction:column;gap:7px;padding:10px 8px 12px}.button-row{display:flex;align-items:center;gap:5px;justify-content:center}.row-name{font-size:9px;color:var(--muted);width:65px;flex-shrink:0;text-align:right;margin-right:10px}.bass-key{height:25px;width:25px;flex:0 0 25px;border:1px solid #5b2a30;border-radius:50%;background:radial-gradient(circle at 35% 25%,#412629,#291315);font-size:9px;padding:0;color:#c4aaaa;position:relative;box-shadow:0 2px 0 #0d080a;transition:background .07s,color .07s,box-shadow .07s}.bass-key:hover{border-color:var(--mint);color:var(--text)}.bass-key.home{border:1px solid #d5899d}.bass-key.home:after{content:'';width:3px;height:3px;border:1px solid #efd0da;border-radius:50%;position:absolute;bottom:2px;left:10px}.bass-key.used{color:#f2dfe5;border-color:#a4546b}.bass-key.active-bass{background:var(--amber);color:#3c1218;border-color:#e68a78;box-shadow:0 0 15px #d96b5966}.bass-key.active-chord{background:var(--mint);color:#360c17;border-color:#de5860;box-shadow:0 0 15px #b71f2c55}.bass-key.next{outline:1px dashed #b71f2c66;outline-offset:3px}.upcoming{margin:8px 18px 10px;border-top:1px solid var(--line);padding-top:10px;min-height:42px;display:flex;align-items:center;gap:13px}.upcoming>div{font-size:10px;color:var(--muted);display:flex;gap:6px}.next-pill{padding:5px 8px;border:1px solid #5c292e;border-radius:5px;color:#d4b4b4;white-space:nowrap}.next-pill b{color:var(--mint);margin-right:5px}.bass-panel .panel-footer{border-top:0;padding-top:8px}.transport{margin-top:18px;padding:17px 20px}.timeline-row{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.timeline-row input{flex:1;width:50px}.transport-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}.play-group,.loop-controls{display:flex;align-items:center;gap:12px}.icon-button{border:0;background:none;color:#d3bdc5;font-size:22px;padding:6px}.play-button{width:43px;height:39px;border-radius:9px;background:var(--mint);color:#330d19;border:0;font-size:16px}.transport-divider{height:20px;border-left:1px solid #5a2f3d;margin:0 2px}.speed,.volume{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted)}select{border:1px solid #3a4940;background:#291314;border-radius:6px;padding:8px;font-size:11px;max-width:100%}.speed select{border:0;background:transparent;font-weight:700;color:var(--text);padding:5px}.loop-controls{font-size:10px;color:var(--muted);gap:8px}.loop-controls .button{background:transparent}.loop-controls .button[aria-pressed=true]{color:var(--mint);border-color:var(--mint);background:#45202e}.volume input{width:75px}input[type=range]{appearance:none;height:4px;border-radius:5px;background:#572229;accent-color:var(--mint);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:var(--mint)}.mapping{margin-top:18px;padding:18px 20px;display:grid;grid-template-columns:1.15fr 1.15fr 1.15fr .8fr 1fr;gap:17px;align-items:center}.mapping h3{font:600 12px Manrope,system-ui;margin:0 0 4px}.mapping p{font-size:10px;margin:0}.mapping label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);min-width:0}.mapping select{width:100%}footer{display:flex;justify-content:space-between;margin:22px 0;color:#a18490;font-size:9px}.footer-dot{padding:0 10px;color:#623044}.drop-overlay{position:fixed;inset:0;z-index:20;background:#101b15ed;display:grid;place-items:center;border:4px dashed var(--mint);text-align:center;color:var(--mint);font-size:50px}.drop-overlay[hidden]{display:none}.drop-overlay h2{font:600 35px Manrope,system-ui}.drop-overlay p{font-size:16px}#notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:90vw;padding:12px 20px;background:#552334;border:1px solid #d26680;border-radius:9px;font-size:12px;z-index:30;box-shadow:0 8px 30px #0004}#notice:empty{display:none}
@media(min-width:1500px){.roll-wrap{height:400px}.board{gap:11px;padding-top:17px;padding-bottom:17px}.bass-key{width:30px;height:30px;flex-basis:30px}.bass-key.home:after{left:12px}}
@media(max-width:1100px){.brand-sub,.privacy{display:none}.workspace{grid-template-columns:1fr}.roll-wrap{height:340px}.board{min-width:500px;max-width:800px;margin:auto}.bass-key{width:32px;height:32px;flex-basis:32px;font-size:10px}.bass-key.home:after{left:13px}.board-scroll{padding:0 20px}.mapping{grid-template-columns:repeat(4,1fr)}.mapping-intro{grid-column:1/-1}.transport-controls{flex-wrap:wrap}.volume{margin-left:auto}.bass-panel .panel-footer{justify-content:flex-start;gap:25px}.current-cue{padding-bottom:4px}}
@media(max-width:620px){.topbar{height:67px;padding:0 18px}.brand{font-size:23px}.brand-icon{width:28px;height:32px;font-size:27px}.top-actions{gap:6px}.top-actions .button{padding:8px;font-size:10px}main{padding:25px 16px 0}h1{font-size:28px}.heading{gap:12px;align-items:flex-start}.heading p{font-size:11px;max-width:230px}.heading .button{font-size:10px;white-space:nowrap;padding:7px}.heading .button span{display:none}.tag{display:none}.session-bar{padding:12px;gap:10px}.session-meta{font-size:10px}.song-info h2{max-width:190px;font-size:12px}.song-info>span{font-size:9px}.song-icon{width:33px;height:33px;flex-shrink:0}.panel-heading{padding:0 12px}.panel-heading .subtle{font-size:7px}.roll-wrap{height:300px}.transport{padding:15px 12px}.transport-controls{gap:16px}.play-group{gap:7px}.loop-controls{width:100%;justify-content:space-between;order:3}.volume{font-size:9px}.volume input{width:55px}.mapping{grid-template-columns:1fr 1fr;gap:15px;padding:16px}.board-scroll{padding:0}.current-cue{padding-left:16px}.current-cue strong{font-size:18px}.upcoming{margin-left:16px;margin-right:12px}.upcoming>div{gap:4px}.next-pill{padding:4px;font-size:9px}footer{font-size:8px;gap:15px}footer>span{max-width:50%}.panel-footer{font-size:8px}}
/* Player's view: bass left, bellows center, vertical piano right. */
.workspace{grid-template-columns:minmax(320px,.82fr) 22px minmax(0,1.18fr);gap:12px;align-items:stretch}.bellows{position:relative;margin:55px 0 25px;border-radius:5px;background:repeating-linear-gradient(90deg,#441b20 0px,#441b20 2px,#190d12 3px,#190d12 5px);border:1px solid #62252b;display:flex;align-items:center;justify-content:center}.bellows span{font-size:7px;letter-spacing:3px;writing-mode:vertical-rl;background:#1f0e10dc;padding:12px 5px;color:#ac7477;border-radius:4px}.roll-wrap{height:538px}.roll-empty{inset:0 64px 0 0}.board-scroll{padding:0 12px}.board{min-width:0;max-width:350px;margin:auto;padding:10px 12px 12px;gap:7px}.button-row{gap:12px}.bass-key{width:25px;height:25px;flex-basis:25px}.bass-key.home:after{left:10px}.board-labels{display:grid;grid-template-columns:repeat(6,25px);justify-content:center;gap:12px;padding:0 0 5px}.board-labels span{font-size:8px;color:#bb8588;text-align:center}.bass-panel .panel-footer{justify-content:space-between}.current-cue{padding-top:15px;padding-bottom:8px}.upcoming{margin-top:5px;min-height:47px}.upcoming>div{flex-wrap:wrap}.piano-panel .panel-footer{min-height:40px}
@media(min-width:1500px){.board{gap:7px}.bass-key{width:25px;height:25px;flex-basis:25px}}
@media(max-width:1100px) and (min-width:721px){.workspace{grid-template-columns:minmax(280px,.85fr) 15px minmax(0,1.15fr);gap:8px}.panel-heading{padding:0 12px}.panel-heading .subtle{font-size:7px}.button-row,.board-labels{gap:9px}.current-cue{padding-left:12px;padding-right:12px}.upcoming{margin-left:12px;margin-right:12px}.current-cue strong{font-size:17px}.bass-panel .panel-footer{gap:5px;font-size:8px}}
@media(max-width:720px){.workspace{grid-template-columns:minmax(0,1fr);gap:14px}.bellows{display:none}.roll-wrap{height:450px}.board{max-width:370px;gap:6px}.bass-key{width:27px;height:27px;flex-basis:27px}.board-labels{grid-template-columns:repeat(6,27px)}.bass-key.home:after{left:11px}.piano-panel{order:2}.bass-panel{order:1}.board-scroll{padding:0 15px}.current-cue strong{font-size:20px}.bass-panel .panel-footer{justify-content:space-between}.board-labels span{font-size:8px}}

/* Deep crimson accents with light text for contrast. */
.button.primary,.play-button{color:#fff1ec}.bass-key.active-chord{color:#fff1ec}.button.primary:hover{background:#cb2e39}.bass-key.active-bass{color:#2c0c0d}

/* Each Stradella rank follows the diagonal of a physical bass board. */
.board{padding-bottom:42px}.board-labels{margin-bottom:5px}.board-labels span:nth-child(1){transform:translateY(30px)}.board-labels span:nth-child(2){transform:translateY(24px)}.board-labels span:nth-child(3){transform:translateY(18px)}.board-labels span:nth-child(4){transform:translateY(12px)}.board-labels span:nth-child(5){transform:translateY(6px)}

.orientation-label{text-align:center;color:#c4aaaa;font-size:10px;font-weight:700;letter-spacing:3px;padding:8px 0 12px;margin:0 18px;border-top:1px solid var(--line)}

.bass-key.reference:not(.active-bass){border-color:#deb2aa;color:#ffe9e0;background:radial-gradient(circle at 35% 25%,#694047,#3e1d24);box-shadow:0 0 0 2px #793a43,0 2px 0 #0d080a}.bass-key.reference:before{content:"";position:absolute;right:1px;top:1px;width:4px;height:4px;border-radius:50%;background:#ffe0ca}.reference-legend{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#deb2aa;padding:4px 12px 12px}.reference-dot{display:inline-block;width:7px;height:7px;border:1px solid #deb2aa;border-radius:50%;box-shadow:0 0 0 2px #793a43}
/* Hand customization */
.customization{margin-top:18px;padding:22px}.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}.setup-heading h2{font:600 17px Manrope,system-ui;margin:0 0 7px}.setup-heading p{font-size:11px;margin:0}.setup-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.setup-actions>span{font-size:10px;color:#c49d9d}.setup-actions .dirty{color:#eaa188}.hand-settings{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-top:23px}.hand-settings fieldset{min-width:0;padding:0;border:0;margin:0}.hand-settings legend{font:600 13px Manrope,system-ui;margin-bottom:19px;color:#e6b4b4}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 17px}.settings-grid>label{display:flex;flex-direction:column;gap:9px;min-width:0;font-size:11px;color:var(--muted)}.settings-grid label>span:not(.settings-label){font-size:10px;color:#ddb5b5}.settings-grid input[type=number]{width:100%;padding:8px;border:1px solid #572229;border-radius:6px;background:#291314;color:#f5eeee}.settings-grid input[type=range]{margin:7px 0}.setting-wide{grid-column:1/-1}.settings-label{font-size:11px;color:var(--muted);display:block;margin-bottom:10px}.reference-choices{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}.reference-choices label{cursor:pointer}.reference-choices input{position:absolute;opacity:0;width:1px;height:1px}.reference-choices span{display:grid;place-items:center;width:32px;height:30px;border:1px solid #5b2a30;border-radius:6px;font-size:11px;color:#c4aaaa;background:#241115}.reference-choices input:checked+span{color:#fff1e8;border-color:#d88f88;background:#69323b;box-shadow:inset 0 0 0 1px #ad6264}.reference-choices input:focus-visible+span{outline:2px solid #f3a0a0;outline-offset:2px}.settings-grid small{font-size:10px;color:#a88085}.keyboard-summary{border:1px solid #5b2a30;border-radius:8px;padding:13px;color:#efd5cf;font-size:12px;background:#241115}.setup-note{font-size:11px;margin:0;line-height:1.8}.board-scroll{max-height:550px;overflow-y:auto}.board .bass-key{width:var(--bass-size,25px);height:var(--bass-size,25px);flex-basis:var(--bass-size,25px)}.board .bass-key.home:after{left:calc(50% - 2px)}.board .board-labels{grid-template-columns:repeat(6,var(--bass-size,25px))}.heading-actions{display:flex;gap:9px;align-items:center}
@media(max-width:1000px){.setup-heading{align-items:flex-start;flex-direction:column}.setup-actions{justify-content:flex-start}.setup-actions>span{width:100%}.hand-settings{gap:22px}.settings-grid{gap:17px 12px}.heading-actions{flex-direction:column}}
@media(max-width:700px){.customization{padding:17px}.hand-settings{grid-template-columns:1fr;gap:25px}.hand-settings fieldset+fieldset{border-top:1px solid var(--line);padding-top:22px}.setup-actions{gap:8px}.heading-actions .button{font-size:9px;padding:7px}.settings-grid{gap:18px 13px}}

.bass-key.next{outline:1px dashed #e0a09a;outline-offset:3px}.bass-key.next-first{outline:2px solid #ffb8a1;outline-offset:3px}.bass-key.next-first:not(.active-bass):not(.active-chord){color:#ffe1d4}.bass-panel .upcoming{padding-bottom:4px}

/* Clear upcoming buttons, distinct from solid playing notes. */
.bass-key.next:not(.active-bass):not(.active-chord){background:#713126;color:#fff4dc;border:2px solid #ffcc79;outline:2px solid #ffc879;outline-offset:2px;box-shadow:0 0 10px #ff9e4580;font-weight:800}
.bass-key.next-first:not(.active-bass):not(.active-chord){background:#ffd695;color:#34110c;border-color:#fff6dd;outline:3px solid #fff0c4;z-index:2;animation:next-button-glow 1s ease-in-out infinite alternate}
@keyframes next-button-glow{from{box-shadow:0 0 8px #ffb14d,0 0 0 3px #ffb14d33}to{box-shadow:0 0 20px #ffba62,0 0 0 5px #ffb14d55}}
.edit-hand{padding:5px 8px!important;font-size:10px!important;white-space:nowrap}.hand-settings fieldset{scroll-margin:30px;transition:border-color .2s,box-shadow .2s}.hand-settings fieldset.editing-hand,.hand-settings fieldset:focus{outline:none;border-color:#f3ad8c;box-shadow:0 0 0 3px #d96b5933}
@media(prefers-reduced-motion:reduce){.bass-key.next-first:not(.active-bass):not(.active-chord){animation:none;box-shadow:0 0 14px #ffba62}}

/* Yellow means play now; crimson means the single next press. */
.bass-key.active-bass,.bass-key.active-chord{background:#ffd695;color:#34110c;border:2px solid #fff6dd;box-shadow:0 0 16px #ffb14da0;outline:none}
.bass-key.next:not(.active-bass):not(.active-chord),.bass-key.next-first:not(.active-bass):not(.active-chord){background:#a0182a;color:#fff1ef;border:2px solid #ff8390;outline:2px solid #ed4159;outline-offset:2px;animation:next-red-glow 1s ease-in-out infinite alternate}
@keyframes next-red-glow{from{box-shadow:0 0 6px #d9224670}to{box-shadow:0 0 16px #f53559b0}}
@media(prefers-reduced-motion:reduce){.bass-key.next:not(.active-bass):not(.active-chord),.bass-key.next-first:not(.active-bass):not(.active-chord){animation:none;box-shadow:0 0 12px #f5355980}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stradella-layout-control select{font-size:10px;padding:6px;max-width:150px}.bass-panel .panel-heading{height:auto;min-height:53px;flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}.bass-panel .panel-heading>div{flex-wrap:wrap}

.stradella-time{display:flex;align-items:center;justify-content:space-between;margin:0 18px 10px;padding:9px 12px;background:#271317;border:1px solid #573038;border-radius:7px;color:#f5d9ce;font-size:13px;font-variant-numeric:tabular-nums}.stradella-time>span:first-child{font-size:9px;letter-spacing:1.3px;color:#c59696}

.stradella-time{flex-wrap:wrap;gap:8px}.note-hold-track{width:100%;height:6px;background:#4b232c;border-radius:5px;overflow:hidden}#note-hold-fill{height:100%;width:0;background:#ffd695;border-radius:5px}

.midi-file-picker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px;padding:12px 16px;border:1px solid #60313b;border-radius:9px;background:#211114}.midi-file-picker label{font-size:12px;color:#eed4d0}.midi-file-picker input{max-width:100%;font-size:12px;color:#dfbec0}.midi-file-picker input::file-selector-button{background:#a91e2e;color:#fff;border:1px solid #db5965;border-radius:6px;padding:8px 12px;margin-right:10px;cursor:pointer}

/* Note changes must light immediately, without a fading color transition. */
.bass-key{transition:none}

#stradella-next{line-height:1.7;font-size:15px;color:#ffced1;overflow-wrap:anywhere}

.simplify-midi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 18px 12px;font-size:12px;color:#f2d5d0;cursor:pointer}.simplify-midi input{accent-color:#b71f2c}.simplify-midi small{width:100%;padding-left:24px;color:#b89398;font-size:10px}

#treble-system{font-size:10px;max-width:170px}.piano-panel .panel-heading{height:auto;min-height:53px;flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}.piano-panel .panel-heading>div{flex-wrap:wrap}
#chromatic-preview{padding:18px;border-top:1px solid #57303a;background:#170d12}#chromatic-preview[hidden]{display:none}.chromatic-intro p,.chromatic-legend{font-size:11px}.chromatic-intro>span{font-size:9px;color:#bd909a}#chromatic-board{position:relative;margin:15px auto;background:linear-gradient(90deg,#2b131d,#1d1016);border-radius:14px}.chromatic-key{position:absolute;width:43px;height:31px;padding:0;border-radius:50%;border:1px solid #b89a96;font-size:10px;font-weight:700}.chromatic-key.white{background:#e9ded7;color:#44242c}.chromatic-key.black{background:#29141f;color:#ead4db;border-color:#784557}.chromatic-key.playing{background:#ffd695;color:#331011;border-color:#fff1d3;box-shadow:0 0 14px #ffc16a99}.chromatic-key.coming{outline:2px solid #ed4159;outline-offset:2px}.chromatic-mode .roll-wrap{height:260px}.chromatic-mode .roll-wrap:after{content:'Buttons below ↓';position:absolute;right:0;top:0;bottom:0;width:64px;background:#211019;color:#caa0ac;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;font-size:11px;border-left:2px solid #bd303a;pointer-events:none}

.chromatic-range{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:16px 0}.chromatic-range label{display:grid;gap:7px;font-size:11px;color:#d6aab3}.chromatic-range button{background:#742033;border:1px solid #b14c63;border-radius:6px;padding:8px;color:#fff;font-size:11px}.chromatic-range>span{width:100%;font-size:11px;color:#ffd6bd}#chromatic-board{max-height:650px;overflow-y:auto}

.session-bar+.transport{margin-top:0;margin-bottom:18px}