.instrument-dialog.jam-instrument-dialog{box-sizing:border-box;width:min(1040px,calc(100vw - 28px));max-width:1040px;max-height:92dvh;overflow:auto;border:1px solid #819ba1;background:#142733;color:#f0efdf;border-radius:20px;padding:24px;box-shadow:0 24px 100px #0009;font:14px/1.4 system-ui,sans-serif}.jam-instrument-dialog::backdrop{background:#071622cc;backdrop-filter:blur(4px)}.jam-instrument-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.jam-instrument-dialog header small{font-size:10px;letter-spacing:.13em;color:#b4d5cf}.jam-instrument-dialog h2{font:600 30px/1.15 Georgia,serif;margin:6px 0}.jam-instrument-dialog p{color:#bdd0d7;font-size:13px}.jam-instrument-dialog button,.jam-instrument-dialog select{font:inherit;min-height:38px;border:1px solid #66868d;border-radius:8px;padding:8px 11px;background:#284753;color:#f4f0dc}.jam-instrument-dialog button{cursor:pointer}.jam-instrument-dialog button:disabled{opacity:.5;cursor:default}.jam-instrument-dialog button:focus-visible,.jam-instrument-dialog select:focus-visible,.jam-instrument-dialog input:focus-visible{outline:3px solid #efc676;outline-offset:3px}.jam-instrument-dialog button[aria-pressed=true]{background:#a5d8c4;color:#102833}.jam-instrument-dialog [data-share]{border-color:#d5b067;background:#796137}.jam-instrument-dialog [data-share][aria-pressed=true]{background:#a5d8c4}.jam-instrument-dialog [data-share-status],.jam-instrument-dialog [data-instrument-status]{font-size:12px;min-height:17px;color:#e8c994}.instrument-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px}.instrument-toolbar label{display:flex;align-items:center;gap:9px}.instrument-preset{margin-right:auto}.instrument-preset select{min-width:180px}.instrument-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:#0e202b;border:1px solid #3a5864;border-radius:12px;padding:14px}.instrument-controls label{display:grid;grid-template-columns:1fr auto;gap:9px;font-size:12px;color:#d8e6e4}.instrument-controls input{grid-column:1 / 3;grid-row:2;width:100%;accent-color:#d9b670;min-width:0;margin:0;touch-action:manipulation}.instrument-controls output{grid-column:2;grid-row:1;color:#d9b670;font-variant-numeric:tabular-nums}.instrument-performance{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:17px 0 12px;font-size:12px}.instrument-performance label{display:flex;align-items:center;gap:6px}.instrument-octaves{display:flex;align-items:center;gap:7px}.instrument-octaves button{font-size:20px;padding:2px 12px}.instrument-octaves output{min-width:68px;text-align:center;font-variant-numeric:tabular-nums}.instrument-performance [data-range-help]{margin-left:auto;color:#b3cad0}.instrument-keyboard-wrap{overflow-x:auto;padding:4px 3px 10px}.jam-instrument-dialog .instrument-keys{position:relative;display:block;height:185px;min-height:185px;margin:0;background:#071521;border-radius:10px;padding:0}.jam-instrument-dialog .instrument-keys button{box-sizing:border-box;position:absolute;top:0;height:100%;min-height:0;padding:0 0 13px;border:1px solid #233949;border-radius:0 0 8px 8px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;font-size:12px;overflow:hidden}.jam-instrument-dialog .instrument-keys .white-key{background:linear-gradient(#fff9e8,#e2d9bf);color:#273845;z-index:1}.jam-instrument-dialog .instrument-keys .black-key{height:62%;background:linear-gradient(#20323f,#07101a);color:#e8eee8;z-index:2;box-shadow:0 5px 6px #0005}.jam-instrument-dialog .instrument-keys kbd{font:10px system-ui,sans-serif;opacity:.65;min-height:14px}.jam-instrument-dialog .instrument-keys .sounding{background:#e4b569!important;color:#152a34;box-shadow:inset 0 -6px 0 #ba813f}.jam-instrument-dialog .instrument-keys.drum-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;height:auto;min-height:218px;background:transparent}.jam-instrument-dialog .instrument-keys.drum-pads button{position:static;width:auto;height:auto;min-height:104px;background:linear-gradient(140deg,#367b87,#224451);color:#f5edda;border:2px solid #68a49f;border-radius:12px;justify-content:center;padding:13px;font-size:14px;box-shadow:inset 0 -7px 0 #132f3c}.jam-instrument-dialog .instrument-keys.drum-pads button:nth-child(2n){background:linear-gradient(140deg,#885d67,#49313f);border-color:#b7868b}.instrument-key-hint{font-size:12px!important}.instrument-midi{border-top:1px solid #40606a;padding-top:12px;margin-top:13px}.instrument-midi summary{font-size:13px;cursor:pointer;color:#d1e6df}.instrument-midi-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}.instrument-midi-controls label{display:flex;align-items:center;gap:7px;font-size:12px}.instrument-midi-controls select{max-width:210px}.instrument-midi-map{font-size:11px!important}.jam-instrument-dialog [data-instrument-status]:empty{display:none}@media(max-width:700px){.instrument-dialog.jam-instrument-dialog{padding:17px;max-height:95dvh}.jam-instrument-dialog h2{font-size:24px}.jam-instrument-dialog .instrument-intro{font-size:12px}.instrument-toolbar{gap:7px}.instrument-toolbar button{flex:1;padding:8px;font-size:12px}.instrument-preset{width:100%;margin:0}.instrument-preset select{flex:1;min-width:0}.instrument-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:12px}.instrument-performance{gap:9px}.instrument-performance [data-range-help]{width:100%;margin:0;font-size:11px}.jam-instrument-dialog .instrument-keys{height:156px;min-height:156px}.jam-instrument-dialog .instrument-keys button{font-size:10px}.jam-instrument-dialog .instrument-keys.drum-pads{gap:7px;min-height:185px}.jam-instrument-dialog .instrument-keys.drum-pads button{min-height:89px;font-size:12px}.instrument-midi-controls{align-items:stretch}.instrument-midi-controls label{width:100%}.instrument-midi-controls select{flex:1;max-width:100%}.jam-instrument-dialog .instrument-keys kbd{font-size:9px}}

/* Play surfaces own touch gestures; settings and the rest of the page retain native behavior. */
.jam-instrument-dialog .instrument-keys,.jam-instrument-dialog .instrument-keys *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.jam-instrument-dialog :is(button,button *,kbd,output,label,.instrument-key-hint,[data-range-help]),.jam-instrument-dialog .instrument-keyboard-wrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.jam-instrument-dialog .instrument-keys button *{pointer-events:none}
.instrument-dialog.jam-instrument-dialog{width:calc(100vw - 20px);max-width:none;height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);margin:auto;padding:20px 24px;border-radius:16px}
.instrument-dialog.jam-instrument-dialog[open]{display:flex;flex-direction:column;gap:0}
.jam-instrument-dialog>header,.jam-instrument-dialog>.instrument-intro,.jam-instrument-dialog>.instrument-toolbar,.jam-instrument-dialog>.instrument-performance,.jam-instrument-dialog>.instrument-sound-settings,.jam-instrument-dialog>.instrument-midi,.jam-instrument-dialog>p{flex-shrink:0}
.jam-instrument-dialog .instrument-intro{margin:5px 0 8px}.jam-instrument-dialog .instrument-toolbar{margin-top:7px}.jam-instrument-dialog [data-share-status]{margin:7px 0;font-size:12px}.jam-instrument-dialog h2{font-size:30px;margin:3px 0}
.instrument-sound-settings{border:1px solid #3a5864;border-radius:10px;background:#0e202b;margin:2px 0 4px}.instrument-sound-settings>summary{cursor:pointer;padding:9px 12px;color:#d7e8e0;font-size:12px;min-height:20px}.instrument-sound-settings>summary span{font-size:11px;color:#aabfca;margin-left:10px}.instrument-sound-settings .instrument-controls{border:0;border-top:1px solid #314b58;border-radius:0 0 9px 9px;padding:11px 13px}
.jam-instrument-dialog .instrument-performance{margin:9px 0}.jam-instrument-dialog .instrument-keyboard-wrap{flex:1 0 220px;min-height:220px;overflow:visible;padding:3px 3px 8px;box-sizing:border-box}.jam-instrument-dialog .instrument-keys{height:100%;min-height:210px}.jam-instrument-dialog .instrument-keys button{font-size:15px;padding-bottom:18px;gap:8px}.jam-instrument-dialog .instrument-keys kbd{font-size:12px}.jam-instrument-dialog .instrument-keys.drum-pads{height:100%;min-height:210px;grid-template-rows:repeat(2,minmax(90px,1fr))}.jam-instrument-dialog .instrument-keys.drum-pads button{font-size:17px;min-height:90px;padding:12px}.jam-instrument-dialog .instrument-key-hint{margin:4px 0;font-size:12px!important}.jam-instrument-dialog .instrument-midi{margin-top:7px;padding-top:8px}.jam-instrument-dialog [data-instrument-status]{margin:5px 0 0}
@media(max-width:700px){.instrument-dialog.jam-instrument-dialog{width:calc(100vw - 10px);height:calc(100dvh - 10px);max-height:calc(100dvh - 10px);padding:12px;border-radius:12px}.jam-instrument-dialog h2{font-size:23px}.jam-instrument-dialog header{gap:8px}.jam-instrument-dialog header small{font-size:8px;letter-spacing:.09em}.jam-instrument-dialog [data-close]{font-size:12px;padding:7px 10px;min-height:38px;white-space:nowrap}.jam-instrument-dialog .instrument-intro{display:none}.jam-instrument-dialog .instrument-toolbar{gap:6px;margin-top:8px}.jam-instrument-dialog .instrument-preset{width:100%}.jam-instrument-dialog .instrument-toolbar button{min-height:38px;padding:7px 5px;font-size:11px}.jam-instrument-dialog .instrument-performance{gap:7px;font-size:11px}.jam-instrument-dialog .instrument-performance [data-range-help]{display:none}.jam-instrument-dialog .instrument-performance label{gap:4px}.jam-instrument-dialog .instrument-performance button,.jam-instrument-dialog .instrument-performance select{min-height:36px;padding:5px 7px;font-size:11px}.jam-instrument-dialog .instrument-octaves{gap:5px}.jam-instrument-dialog .instrument-octaves output{min-width:54px}.jam-instrument-dialog .instrument-keys button{font-size:12px;padding-bottom:15px}.jam-instrument-dialog .instrument-keys kbd{font-size:10px}.instrument-sound-settings>summary span{font-size:10px;margin-left:5px}.jam-instrument-dialog .instrument-key-hint{font-size:10px!important}.jam-instrument-dialog .instrument-midi summary{font-size:12px;min-height:22px}.jam-instrument-dialog .instrument-keys.drum-pads button{font-size:13px}}
@media(max-height:650px){.instrument-dialog.jam-instrument-dialog{padding:10px 16px}.jam-instrument-dialog .instrument-intro,.jam-instrument-dialog header small,.jam-instrument-dialog .instrument-key-hint,.jam-instrument-dialog [data-range-help]{display:none}.jam-instrument-dialog h2{font-size:22px}.jam-instrument-dialog header{align-items:center}.jam-instrument-dialog header button{min-height:32px;padding:5px 10px}.jam-instrument-dialog .instrument-toolbar{margin-top:5px;gap:5px}.jam-instrument-dialog .instrument-toolbar button,.jam-instrument-dialog .instrument-toolbar select{min-height:32px;padding:5px 8px}.jam-instrument-dialog .instrument-preset{width:auto;flex:1}.jam-instrument-dialog .instrument-preset select{min-width:0;max-width:160px}.jam-instrument-dialog [data-share-status]{font-size:10px;margin:3px 0;min-height:14px}.instrument-sound-settings{margin:2px 0}.instrument-sound-settings>summary{padding:5px 9px;min-height:16px;font-size:11px}.jam-instrument-dialog .instrument-performance{margin:5px 0;gap:8px}.jam-instrument-dialog .instrument-performance button,.jam-instrument-dialog .instrument-performance select{min-height:30px;padding:3px 8px}.jam-instrument-dialog .instrument-keyboard-wrap{flex-basis:145px;min-height:145px}.jam-instrument-dialog .instrument-keys{min-height:135px}.jam-instrument-dialog .instrument-keys.drum-pads{min-height:135px;grid-template-rows:repeat(2,minmax(62px,1fr));gap:6px}.jam-instrument-dialog .instrument-keys.drum-pads button{min-height:62px;padding:6px;font-size:13px}.jam-instrument-dialog .instrument-midi{padding-top:5px;margin-top:4px}.jam-instrument-dialog .instrument-midi summary{font-size:11px}}

/* Semitone range controls keep every key visible, including a leading black key. */
.instrument-first-key{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.instrument-first-key label{white-space:nowrap}.instrument-first-key select{min-width:66px}.instrument-first-key [data-key-step]{min-width:34px;padding:5px 9px;font-size:18px}.instrument-first-key [data-key-reset]{font-size:11px;white-space:nowrap}.jam-instrument-dialog .instrument-performance .instrument-first-key{max-width:100%}@media(max-width:700px){.jam-instrument-dialog .instrument-first-key{width:100%;gap:5px}.jam-instrument-dialog .instrument-first-key label{margin-right:auto}.jam-instrument-dialog .instrument-first-key select{min-width:65px}.jam-instrument-dialog .instrument-first-key [data-key-step]{min-width:36px;min-height:36px;font-size:17px}}
