/* One compact recorder, with the tempo visible directly on the handpan rim. */
body:not([data-view=play]) .touch-record-button{display:none!important}
.touch-record-button,#music-floating>.touch-record-button{display:grid;place-items:center;width:42px;min-width:42px;padding:0;background:#fff3f3;border:1px solid #f5dada;border-radius:50%;min-height:42px}
.touch-record-button i{width:12px;height:12px;background:#de535c;border-radius:50%;box-shadow:0 0 0 4px #de535c12}.touch-record-button.has-take i{box-shadow:0 0 0 4px #de535c25}.touch-record-button.is-recording i{border-radius:3px}
#touch-recorder{position:absolute;z-index:65;right:50%;transform:translateX(50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(570px,calc(100% - 24px));max-height:calc(100dvh - 90px);overflow:auto;padding:12px 16px;border:1px solid #fff;border-radius:22px;background:#fffffff5;box-shadow:0 16px 55px #283f5124;backdrop-filter:blur(22px);color:#263f4c;font-size:14px;overscroll-behavior:contain}
#touch-recorder button,#touch-recorder select,#touch-recorder input{font:inherit;touch-action:manipulation}#touch-recorder button:focus-visible,#touch-recorder select:focus-visible,#touch-recorder input:focus-visible,#touch-recorder summary:focus-visible{outline:3px solid #ed9343;outline-offset:3px}
.recorder-heading{display:flex;align-items:center;gap:7px}.recorder-heading>div{flex:1;min-width:0}.recorder-heading h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;letter-spacing:-.02em;margin:0;font-weight:650}#recorder-summary{margin:4px 0 0;font-size:12px;color:#70848f;font-variant-numeric:tabular-nums}
.recorder-heading button{flex:none;display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;background:#f1f4f6;border-radius:50%;font-size:22px!important;color:#59717e}#recorder-fold{width:auto;min-width:73px;padding:0 10px;border-radius:11px;font-size:12px!important;font-weight:600!important}#recorder-click{display:flex;gap:4px;width:auto;padding:0 9px;font-size:13px!important;border-radius:11px;color:#657b87}#recorder-click[aria-pressed=true]{background:#e1f3ed;color:#256e5b}#recorder-play{background:#fff0e3;color:#99501e;font-size:16px!important}#recorder-play[aria-pressed=true]{background:#f9dfc6}
.recorder-settings{margin-top:12px;padding:12px 0;border-top:1px solid #e8edf0;border-bottom:1px solid #e8edf0}.is-compact .recorder-settings{display:none}.recorder-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.recorder-fields label{font-size:14px;color:#59717e;min-width:0}.recorder-fields select{display:block;width:100%;min-height:40px;margin-top:5px;padding:7px 9px;border:1px solid #dfe7eb;border-radius:10px;background:#f8fafb;color:#375361}.recorder-tempo-label{display:flex;align-items:center;justify-content:space-between;color:#59717e;font-size:14px}.recorder-tempo-label output{font-weight:650;color:#a85e32;font-variant-numeric:tabular-nums}
#recorder-bpm{appearance:none;-webkit-appearance:none;background:transparent;display:block;width:100%;height:32px;margin:3px 0 10px;padding:0;accent-color:#dc7733;cursor:pointer;touch-action:pan-y}#recorder-bpm::-webkit-slider-runnable-track{height:7px;border-radius:8px;background:linear-gradient(to right,#d98748 var(--tempo-progress,28.57%),#e6ebee var(--tempo-progress,28.57%))}#recorder-bpm::-webkit-slider-thumb{-webkit-appearance:none;width:23px;height:23px;margin-top:-8px;border:3px solid #fff;border-radius:50%;background:#d98748;box-shadow:0 2px 7px #79492435}#recorder-bpm::-moz-range-track{height:7px;border-radius:8px;background:#e6ebee}#recorder-bpm::-moz-range-progress{height:7px;border-radius:8px;background:#d98748}#recorder-bpm::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#d98748}
.recorder-performance{padding:9px 0 8px}.recorder-readout{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px;margin-bottom:7px}#recorder-status{min-width:0}#recorder-clock{font-variant-numeric:tabular-nums;color:#9e582d;font-weight:650;white-space:nowrap}
#recorder-timeline{--bars:4;--progress:0%;height:23px;position:relative;overflow:hidden;border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / var(--bars) - 1px),#e0e6ea calc(100% / var(--bars) - 1px),#e0e6ea calc(100% / var(--bars))),#f3f6f8;border:1px solid #e4eaed}.recorder-note{position:absolute;top:6px!important;width:5px;height:9px;border-radius:3px;background:#d78040;opacity:.8}.recorder-playhead{position:absolute;top:0;bottom:0;left:var(--progress);width:2px;background:#df555c;box-shadow:0 0 8px #df555c50}#touch-recorder[data-mode=preview] .recorder-playhead,#touch-recorder[data-mode=idle] .recorder-playhead,#touch-recorder[data-mode=armed] .recorder-playhead{display:none}
.recorder-actions{display:grid;grid-template-columns:minmax(130px,1fr) 44px minmax(105px,1fr) minmax(80px,.65fr);align-items:center;gap:8px}.recorder-actions>button{display:flex;justify-content:center;align-items:center;gap:7px;min-height:44px;min-width:0;border:0;border-radius:12px;padding:8px 10px;white-space:nowrap;font-weight:600!important;font-size:14px!important}#recorder-record{background:#366d68;color:#fff}.recorder-action-icon{display:flex;align-items:center;flex:none}.recorder-action-icon svg,#recorder-clear svg{width:17px;height:17px;flex:none}#recorder-record i{width:9px;height:9px;border-radius:50%;background:#fff}#recorder-record.is-stopping{background:#dd535d}#recorder-record.is-stopping i{border-radius:2px}#recorder-library{background:#f0f4f6;color:#445f70}#recorder-clear{background:#fff2f2;color:#b84c58}#touch-recorder button:disabled{opacity:.42;cursor:default}#touch-recorder input:disabled,#touch-recorder select:disabled{opacity:.6}
.recorder-secondary:has(> :not([hidden])){margin-top:6px}#recorder-undo{min-height:32px;padding:5px 0;border:0;background:none;color:#4c7387;font-size:12px!important}.recorder-export>summary{width:fit-content;min-height:30px;padding:7px 0;color:#70848f;font-size:12px;cursor:pointer}.recorder-export[open]{padding-bottom:3px}.recorder-export-row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:7px 0 9px}.recorder-export-row select{width:155px!important;min-height:38px}.recorder-export-row label{font-size:13px}#recorder-export,#recorder-cancel-export{width:100%;min-height:41px;border:1px solid #dce4e9;background:#fff;border-radius:12px;color:#445f70;font-weight:600}#recorder-cancel-export{margin-top:8px}#recorder-export-status{font-size:13px;color:#5b7583;margin:10px 0 0}#recorder-export-status:empty{display:none}#recorder-downloads{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}#recorder-downloads a,#recorder-downloads button{display:block;padding:10px;background:#fef0e3;border:0;border-radius:10px;font-size:14px;color:#915027;text-decoration:none}.recorder-license{display:block;text-align:center;font-size:12px;margin-top:10px;color:#82939c}.recorder-license a{color:inherit}
.recorder-open #music-floating{display:none!important}body[data-view=play] .recorder-open #stage-canvas{bottom:var(--recorder-space,200px)!important;right:0!important}
/* This light never intercepts a note or changes the instrument shading. */
.recorder-rim{position:absolute;inset:-2px;border:3px solid #fff;border-radius:50%;opacity:0;pointer-events:none;z-index:1;box-shadow:0 0 4px 2px var(--pulse-color),0 0 17px 7px var(--pulse-color),0 0 44px 13px color-mix(in srgb,var(--pulse-color) 30%,transparent),inset 0 0 9px 2px var(--pulse-color)}
@media(max-width:420px){#touch-recorder{width:calc(100% - 16px);padding:11px 12px}.recorder-heading{gap:5px}#recorder-fold{min-width:65px;padding:0 8px}.recorder-actions{gap:6px;grid-template-columns:minmax(120px,1.1fr) 42px minmax(100px,1fr) 42px}#recorder-clear span{display:none}.recorder-actions>button{padding:8px 5px;font-size:14px!important}.recorder-fields{gap:7px}.recorder-fields select{padding:7px}}
@media(max-height:500px) and (min-width:600px){#touch-recorder{width:380px;right:12px;transform:none;max-height:calc(100dvh - 24px);bottom:12px}body[data-view=play] .recorder-open #stage-canvas{right:404px!important;bottom:12px!important}}
@media(prefers-reduced-motion:reduce){.recorder-rim{box-shadow:0 0 6px 2px var(--pulse-color)}}

body:has(.recorder-open) #toast{top:70px;bottom:auto;pointer-events:none}
/* Focusing a toolbar control must not scroll the fixed instrument workspace. */
#atelier:has(.recorder-open){overflow:clip}

@media(max-width:359px){.recorder-actions{grid-template-columns:minmax(115px,1fr) 42px minmax(96px,1fr)}#recorder-clear{grid-column:1/-1;min-height:36px}#recorder-clear span{display:inline}.recorder-fields label{font-size:12px}}
@media(max-height:500px) and (min-width:600px){.recorder-actions{grid-template-columns:minmax(120px,1.1fr) 42px minmax(100px,1fr) 42px;gap:6px}#recorder-clear span{display:none}}
.recording-save-dialog{width:min(460px,calc(100% - 28px));padding:24px;border:1px solid #fff;border-radius:24px;color:#263f4c}.recording-save-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.recording-save-dialog h2{margin:0;font-size:21px;letter-spacing:-.03em}.recording-save-dialog header button{flex:none;width:36px;height:36px;background:#f0f4f6;border:0}.recording-save-dialog p{margin:20px 0 14px;font-size:15px;color:#637985}.recording-proposed-name{display:block;padding:23px 16px;margin:14px 0 22px;border:1px solid #e2ece9;border-radius:16px;background:#f0f7f4;color:#366d68;text-align:center;font-size:25px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}.recording-name-actions{display:flex;gap:8px}.recording-name-actions button{flex:1;min-height:44px;font-size:14px}.recording-save-dialog .button.primary{background:#366d68;color:#fff}.recording-save-dialog form{margin-top:23px}.recording-save-dialog label{display:block;font-size:14px;margin-bottom:8px}.recording-save-dialog input{font-size:16px;min-height:46px;margin-bottom:18px}.recording-save-status:empty{display:none}.recording-save-dialog button:disabled{opacity:.5}.recording-save-dialog button:focus-visible,.recording-save-dialog input:focus-visible{outline:3px solid #ed9343;outline-offset:3px}@media(max-width:420px){.recording-save-dialog{padding:20px}.recording-name-actions{flex-direction:column}.recording-proposed-name{font-size:23px}}
/* Fold only the interface. Recording and playback keep their existing clock. */
#recorder-minimize svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
#recorder-close{display:block;margin:12px 0 0;min-height:36px;color:#71818a;font-size:12px!important}
#touch-recorder.is-minimized{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:9px 12px;overflow:visible}
#touch-recorder.is-minimized .recorder-heading{grid-column:3;grid-row:1;gap:4px}
#touch-recorder.is-minimized .recorder-heading>div,#touch-recorder.is-minimized #recorder-fold,#touch-recorder.is-minimized .recorder-settings,#touch-recorder.is-minimized .recorder-secondary,#touch-recorder.is-minimized #recorder-timeline,#touch-recorder.is-minimized #recorder-library,#touch-recorder.is-minimized #recorder-clear{display:none}
#touch-recorder.is-minimized #recorder-minimize svg{transform:rotate(180deg)}
#touch-recorder.is-minimized #recorder-click{width:36px;height:36px;padding:0;justify-content:center;font-size:0!important}
#touch-recorder.is-minimized #recorder-click>span{font-size:17px}
#touch-recorder.is-minimized .recorder-performance{grid-column:1;grid-row:1;padding:0;min-width:0}
#touch-recorder.is-minimized .recorder-readout{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;font-size:13px;line-height:1.2}
#touch-recorder.is-minimized #recorder-status{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#touch-recorder.is-minimized #recorder-clock{display:none}
#recorder-progress{display:none;--bars:4;--loop-position:0}
#touch-recorder.is-minimized #recorder-progress{display:grid;grid-template-columns:repeat(var(--bars),minmax(0,1fr));height:19px;margin-top:6px;border:1px solid #ccd9df;border-radius:6px;background:#edf3f5;box-shadow:inset 0 1px 3px #3753650b;overflow:hidden;direction:ltr}
.recorder-measure{position:relative;min-width:0;border-right:1px solid #c8d6dc}
.recorder-measure:last-child{border-right:0}
.recorder-measure i{position:absolute;left:0;top:5px;height:7px;width:clamp(0%,calc((var(--loop-position) - var(--bar-index))*100%),100%);opacity:clamp(0,calc((var(--loop-position) - var(--bar-index))*1000),1);border-radius:2px;background:var(--bar-color);box-shadow:0 0 4px var(--bar-color),0 0 10px color-mix(in srgb,var(--bar-color) 60%,transparent),inset 0 1px 1px #ffffffb0}
#touch-recorder[data-mode=armed] .recorder-measure i,#touch-recorder[data-mode=loading] .recorder-measure i,#touch-recorder[data-mode=preview] .recorder-measure i{box-shadow:none}
#touch-recorder.is-minimized .recorder-actions{grid-column:2;grid-row:1;display:flex;gap:5px}
#touch-recorder.is-minimized .recorder-actions>button{min-width:42px;min-height:42px;padding:8px;font-size:13px!important}
#touch-recorder.is-minimized:is([data-mode=idle],[data-mode=playing]) #recorder-clear:not(:disabled){display:flex;width:42px;flex:none}
#touch-recorder.is-minimized #recorder-clear span{display:none}
#touch-recorder.is-minimized #recorder-record.is-saving-take .recorder-action-label{display:none}
#touch-recorder.is-minimized:is([data-mode=armed],[data-mode=loading],[data-mode=recording]) #recorder-play{display:none}
body[data-view=play] #instrument-view.artist-phone-layout.recorder-open #stage-canvas{top:max(76px,calc(env(safe-area-inset-top) + 64px))!important}
@media(max-height:500px) and (min-width:600px){
 #touch-recorder.is-minimized{right:50%;transform:translateX(50%);width:min(570px,calc(100% - 24px));bottom:max(12px,env(safe-area-inset-bottom))}
 body[data-view=play] .recorder-open.recorder-minimized #stage-canvas{right:0!important;bottom:var(--recorder-space,90px)!important}
}
@media(prefers-reduced-motion:reduce){#recorder-minimize svg{transition:none}}

.loop-monogram{display:block;font:750 10px/9px system-ui,sans-serif;letter-spacing:.06em;text-align:center;color:inherit}
.touch-record-button,#music-floating>.touch-record-button{color:#d44955;background:#ffeded;border-color:#f2c7cd}
#recorder-back{display:flex;align-items:center;gap:3px;width:max-content;min-height:32px;margin:-3px 0 7px;padding:2px 8px 2px 2px;border:0;border-radius:10px;background:#f0f5f5;color:#547579;font-size:12px!important}
#recorder-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#recorder-record.is-new-take{background:#d9f5e8;color:#168259;border:1px solid #aae1c8}
#recorder-record.is-new-take .loop-monogram{font-size:10px;line-height:9px}
#touch-recorder.is-minimized{grid-template-columns:auto minmax(64px,1fr) auto auto;gap:6px}
#touch-recorder.is-minimized #recorder-back{grid-column:1;grid-row:1;margin:0;width:32px;min-height:38px;justify-content:center;padding:0}
#touch-recorder.is-minimized #recorder-back span{display:none}
#touch-recorder.is-minimized .recorder-performance{grid-column:2}
#touch-recorder.is-minimized .recorder-actions{grid-column:3;gap:4px}
#touch-recorder.is-minimized .recorder-heading{grid-column:4}
#touch-recorder.is-minimized .recorder-action-label{display:none}
#touch-recorder.is-minimized .recorder-actions>button,#touch-recorder.is-minimized:is([data-mode=idle],[data-mode=playing]) #recorder-clear:not(:disabled){width:38px;min-width:38px;min-height:40px;padding:6px}
@media(max-width:380px){#touch-recorder.is-minimized{padding-inline:8px;gap:4px}#touch-recorder.is-minimized .recorder-actions>button,#touch-recorder.is-minimized:is([data-mode=idle],[data-mode=playing]) #recorder-clear:not(:disabled){width:34px;min-width:34px}#touch-recorder.is-minimized #recorder-click,#touch-recorder.is-minimized #recorder-minimize{width:32px}}
.loop-saved-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:stretch;gap:6px}
.loop-saved-row .loop-saved-item{width:100%;min-width:0}
.loop-saved-row .loop-saved-item small{font-size:12px;color:#567668;font-weight:550}
.loop-delete{display:grid;place-items:center;width:42px;min-height:44px;border:1px solid #ecdde0;border-radius:13px;background:#fff4f4;color:#aa5966}
.loop-delete svg{width:19px;height:19px}
.loop-delete:hover{background:#ffe6e9}
.loop-delete-confirm{grid-column:1/-1;padding:14px;border:1px solid #edcdd3;border-radius:15px;background:#fff7f8;font-size:14px}
.loop-delete-confirm p{margin:0 0 6px}.loop-delete-confirm>strong{display:block;overflow-wrap:anywhere}
.loop-delete-confirm>div{display:flex;gap:8px;margin-top:12px}
.loop-delete-confirm button{min-height:40px;padding:7px 14px;border:0;border-radius:10px;color:#79565b;background:#f4e8ea}
.loop-delete-confirm [data-confirm-delete]{background:#b95060;color:white}
.loop-saved-row.is-confirming>.loop-saved-item,.loop-saved-row.is-confirming>.loop-delete{display:none}
.loop-library.is-browsing>.loop-name-field,.loop-library.is-browsing>.button-row{display:none}
.loop-saved-row .loop-saved-item>strong,.loop-saved-row .loop-saved-item>small,.loop-saved-row .loop-saved-item>span:not(:last-child){grid-column:1}
.loop-saved-row .loop-saved-item>span:not(:last-child){font-size:12px;color:#827783}
.loop-saved-row .loop-saved-item>span:last-child{grid-column:2;grid-row:1/4}