/* Synth visual hierarchy only. Existing controls, IDs and audio paths are reused. */
#synth .synth-title{display:block}
#synth .synth-title .synth-source-badge{display:inline-block;margin-top:7px;padding:3px 7px;border:1px solid #567180;border-radius:6px;background:#243c4b;color:#d8dfd8;font-size:10px;line-height:1.3;letter-spacing:.05em}
#synth .synth-top{gap:14px;align-items:center;margin:12px 0}
#synth .synth-root{padding:10px 12px;font-size:11px}
#synth .synth-root strong{font-size:17px}
#synth .synth-root small{font-size:11px;line-height:1.4}
#synth .synth-trim{gap:12px;padding:10px}
#synth .synth-trim p{font-size:12px;line-height:1.45;margin:5px 0 0}
#synth .synth-presets{margin:14px 0}
#synth .synth-hero{padding:14px 12px}
#synth .synth-hero-icon{font-size:28px}
#synth .synth-hero h3{font-size:18px}
#synth .synth-hero p{font-size:12px}
#synth .synth-envelope-panel{padding:13px;margin:14px 0}
#synth #sy-env-graph{height:145px}
#synth .synth-advanced{margin:14px 0}
#synth .synth-advanced>p{font-size:12px;margin:5px 0 10px}
#synth .synth-save{background:#243d4d;color:#f4ead4;border:1px solid #6c8490;border-radius:12px;padding:13px;margin:16px 0}
#synth .synth-save h3{margin:0 0 5px;font-size:16px;color:#f4ead4}
#synth .synth-save .synth-save-hint{font-size:12px;color:#d4e0df;margin:0 0 10px}
#synth .synth-save>.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
#synth .synth-save :is(input,select){min-width:0;max-width:100%;min-height:44px}
#synth .synth-save p,#synth .synth-save small{color:#d4e0df;font-size:12px;line-height:1.5}
#synth .synth-save-explanation>summary{cursor:pointer;min-height:36px;line-height:36px;color:#f3d29a;font-size:13px;font-weight:700}
#synth .synth-reset-area{margin-top:8px;gap:10px}
#synth .synth-reset-area button{min-height:44px}
#synth .synth-reset-area span{font-size:12px}
#synth .synth-keyboard-dock{position:static!important;inset:auto!important;z-index:auto!important;width:100%;margin:16px 0 0;box-shadow:none;border:2px solid #dfa154;border-radius:12px;padding:13px;background:#1b3343}
#synth .synth-dock-heading{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#synth .synth-dock-heading>div:first-child{flex:1 1 240px;min-width:0}
#synth .synth-keyboard-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#synth .synth-keyboard-actions label{display:grid;grid-template-columns:auto auto;gap:2px 7px;font-size:12px;color:#f4ead4;min-width:110px}
#synth .synth-keyboard-actions input{grid-column:1/-1;width:120px;max-width:100%;min-height:32px}
#synth .synth-keyboard-actions output{color:#ffcb7d;text-align:right}
#synth .synth-keyboard-dock .keyboard{height:150px;margin:12px 0 8px}
#synth #synth-status{margin:7px 0 12px}
#synth #sy-midi-connection{min-width:0}
#synth .ss-midi{position:static;z-index:auto;box-shadow:none;width:100%;max-width:100%;padding:8px;margin:0;border:1px solid #567180;border-radius:8px;background:#243d4d}
#synth .ss-midi .midi-row{max-width:100%;gap:8px}
#synth .ss-midi details[open]{flex-basis:100%}
#synth .ss-midi .midi-options{position:static;width:100%;max-height:none;overflow:visible;margin-top:6px;box-shadow:none}
#synth #sy-midi-drawer{margin-top:10px;background:#243d4d;border:1px solid #567180;border-radius:8px}
#synth #sy-midi-drawer>summary{cursor:pointer;font-size:13px;font-weight:700;min-height:44px;padding:12px}
#synth #sy-midi-drawer .synth-midi{margin:0;border:0;min-width:0;padding:12px}
#synth #sy-midi-drawer .synth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#synth :is(.synth-save,.synth-keyboard-dock){min-width:0}
@media(max-width:750px){#synth .synth-keyboard-dock .keyboard{height:125px}#synth .synth-hero{padding:12px 7px}}
@media(max-width:470px){#synth .synth-keyboard-dock{padding:10px}#synth .synth-keyboard-dock .keyboard{height:112px}#synth .synth-keyboard-actions{width:100%;justify-content:space-between;gap:8px}#synth .synth-save>.row>label{flex-basis:100%}#synth .synth-save>.row :is(input,select){width:100%}#synth #sy-midi-drawer .synth-grid{grid-template-columns:minmax(0,1fr)}#synth .synth-dock-heading strong{font-size:14px}}

#synth .synth-key-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
#synth .synth-key-scroll .keyboard{min-width:560px}
#synth .synth-key-scroll:focus-visible{outline:3px solid #ffcf64;outline-offset:2px}