/* An instrument surface, sharing the selected arrangement voice's color. */
.synth-panel{--synth-color:var(--selected);position:relative;margin:0 0 23px;color:var(--text);font-family:var(--mono);isolation:isolate}
.synth-patches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:9px}
.synth-patches button{min-width:0;min-height:28px;border:1px solid #294b35;border-radius:2px;font:9px var(--mono);color:#acd1b6;background:linear-gradient(180deg,#ffffff04,transparent)}
.synth-patches button[aria-pressed=true]{border-color:color-mix(in srgb,var(--synth-color) 72%,#163323);color:var(--synth-color);background:color-mix(in srgb,var(--synth-color) 10%,#06130b);box-shadow:inset 0 1px color-mix(in srgb,var(--synth-color) 16%,transparent)}
.synth-patches button:hover:not(:disabled){border-color:var(--synth-color);color:var(--synth-color)}
.synth-pad-wrap{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:10px;align-items:stretch}
.synth-pad{position:relative;height:77px;border:1px solid #315640;border-radius:2px;overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(90deg,#010b0600,color-mix(in srgb,var(--synth-color) 9%,transparent)),repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),#a6e7b214 calc(12.5% - 1px) 12.5%),repeating-linear-gradient(0deg,transparent 0 calc(25% - 1px),#a6e7b214 calc(25% - 1px) 25%),#040e08;box-shadow:inset 0 0 22px #0004}
.synth-pad:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65px 40px at var(--pad-x) var(--pad-y),color-mix(in srgb,var(--synth-color) 18%,transparent),transparent);pointer-events:none}
.synth-pad-visual{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.synth-pad-cross{position:absolute;pointer-events:none;background:color-mix(in srgb,var(--synth-color) 38%,transparent)}
.synth-pad-cross-x{left:var(--pad-x);top:0;bottom:0;width:1px}.synth-pad-cross-y{top:var(--pad-y);left:0;right:0;height:1px}
.synth-pad-point{position:absolute;left:var(--pad-x);top:var(--pad-y);height:9px;width:9px;transform:translate(-50%,-50%);border:1px solid var(--synth-color);background:#06180c;border-radius:50%;box-shadow:0 0 9px color-mix(in srgb,var(--synth-color) 50%,transparent);pointer-events:none}
.synth-pad-point:after{content:'';position:absolute;inset:2px;background:var(--synth-color);border-radius:50%}
.synth-pad-caption{position:absolute;top:6px;left:7px;color:#8eb69c;pointer-events:none;font:7px var(--mono);letter-spacing:.4px;line-height:1.2;text-shadow:0 1px 3px #000}
.synth-pad-caption-x{top:auto;left:auto;bottom:5px;right:6px}
.synth-pad-values{display:flex;flex-direction:column;justify-content:center;gap:11px;font:8px var(--mono);color:#93b69f;min-width:0}
.synth-pad-values label{position:relative;display:grid;gap:4px;cursor:pointer}
.synth-pad-values output{font:11px var(--mono);color:var(--synth-color);font-variant-numeric:tabular-nums;white-space:nowrap}
.synth-access-range{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
.synth-pad-values label:focus-within{outline:1px solid var(--synth-color);outline-offset:3px}
.synth-play-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:31px;margin:3px 0 1px}
.synth-play-caption{color:#9fc6aa;font:8px var(--mono)}
.synth-octaves{display:flex;align-items:center;gap:5px}
.synth-octaves button{width:25px;height:25px;border:1px solid #2d4c36;border-radius:2px;color:#b7dbc0;font:13px var(--mono);padding:0;line-height:1}
.synth-octaves button:hover:not(:disabled){border-color:var(--synth-color);color:var(--synth-color)}
.synth-octaves output{min-width:47px;text-align:center;color:#9abfa4;font:8px var(--mono);font-variant-numeric:tabular-nums}
.synth-keyboard{position:relative;height:66px;touch-action:none;user-select:none;border:1px solid #385b41;border-radius:2px;overflow:hidden;box-shadow:0 3px 9px #0005,inset 0 1px #b5ffc711;background:#06130b}
.synth-key{position:absolute;padding:0;top:0;touch-action:none;border-radius:0 0 2px 2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;-webkit-user-select:none;user-select:none;transition:background .06s,box-shadow .06s;outline-offset:-3px!important}
.synth-key-white{left:calc(var(--key-position)*12.5%);width:12.5%;height:100%;border-right:1px solid #183a24;background:linear-gradient(90deg,#0a2314,#102b1b 45%,#0a2113);box-shadow:inset 0 -4px #031009,inset 0 1px #a1dfb01f;color:#9cbea6;z-index:1;padding-bottom:8px}
.synth-key-white:last-child{border-right:0}
.synth-key-black{left:calc(var(--key-position)*12.5%);width:8%;min-width:24px;height:59%;border:1px solid #34523b;border-top:0;background:linear-gradient(90deg,#020905,#08130c 52%,#020905);box-shadow:0 3px 4px #0007,inset 0 -4px #010603;color:#8fa899;z-index:2;padding-bottom:6px}
.synth-key-name{font:7px var(--mono);pointer-events:none}.synth-key-black .synth-key-name{display:none}
.synth-key kbd{font:8px var(--mono);color:inherit;pointer-events:none;line-height:1}
.synth-key:hover:not(:disabled){color:var(--synth-color);background:color-mix(in srgb,var(--synth-color) 15%,#06140c)}
.synth-key.is-held,.synth-key.is-held:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--synth-color) 38%,#07130b),color-mix(in srgb,var(--synth-color) 64%,#08170e));color:#041108!important;box-shadow:inset 0 -3px color-mix(in srgb,var(--synth-color) 32%,#06130b),inset 0 0 15px color-mix(in srgb,var(--synth-color) 20%,transparent)}
.synth-key-black.is-held,.synth-key-black.is-held:hover{background:color-mix(in srgb,var(--synth-color) 80%,#06130b);box-shadow:0 0 13px color-mix(in srgb,var(--synth-color) 45%,transparent),inset 0 -3px #0003}
.synth-panel.is-playing .synth-keyboard{border-color:color-mix(in srgb,var(--synth-color) 65%,#24472d)}
.synth-disabled{margin:8px 0 0;line-height:1.5;color:#a5c1ad;font:9px/1.5 var(--mono)}
.synth-panel.is-disabled .synth-pad{opacity:.45;cursor:default}.synth-panel.is-disabled .synth-pad-values{opacity:.5}.synth-panel.is-disabled .synth-play-caption{opacity:.5}
@media(max-width:1050px) and (min-width:721px){.synth-pad-wrap{grid-template-columns:minmax(0,1fr) 62px;gap:8px}.synth-patches{gap:3px}.synth-patches button{font-size:8px}.synth-pad-values{font-size:7px}.synth-pad-values output{font-size:10px}.synth-play-caption{font-size:7px}.synth-octaves{gap:2px}.synth-octaves output{font-size:7px;min-width:42px}.synth-octaves button{width:24px;height:24px}}
@media(max-width:720px){.synth-keyboard{height:73px}.synth-key-black{width:8%;min-width:24px}.synth-pad{height:82px}.synth-patches button{min-height:30px}.synth-pad-caption{font-size:8px}.synth-play-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.synth-key{transition:none}}

.synth-panic{display:none}
@media(max-width:720px){.synth-panic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border:1px solid #34533e;border-radius:2px;color:#aacbb3;font:10px var(--mono);padding:0}.synth-panic:hover{border-color:var(--synth-color);color:var(--synth-color)}}