.mini-synth { position: fixed; z-index: 12000; inset: 4vh auto auto 50%; transform: translateX(-50%); width: min(1220px, 96vw); max-height: 93vh; overflow: auto; background: #242622; border: 10px solid #896037; border-image: repeating-linear-gradient(3deg,#664325 0px,#b58550 3px,#a27143 5px,#84552e 7px) 10; box-shadow: 0 18px 90px #000d,inset 0 0 0 1px #d2b079; color: #efeddd; font: 12px/1.3 Arial,sans-serif; box-sizing: border-box; }
.mini-synth[hidden] { display: none; }
.mini-synth button { color: inherit; cursor: pointer; font: inherit; }
.mini-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: #171b17; border-bottom: 2px solid #aa8052; }
.mini-toolbar strong { font: 22px Georgia,serif; letter-spacing: 1px; display: block; }
.mini-toolbar small { color: #b9b89d; font-size: 9px; letter-spacing: 2px; }
.mini-brand { display: flex; flex-direction: column; min-width: 190px; }
.mini-toolbar-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.mini-master { display: flex; align-items: center; gap: 7px; color: #c7c9b7; font-size: 11px; }
.mini-master input { width: 102px; accent-color: #d0b46a; }
.mini-toolbar button,.mini-tools button,.mini-interface-row button,.mini-file { padding: 7px 10px; background: #363c34; border: 1px solid #8e8768; border-radius: 3px; }
.mini-synth button:focus-visible { outline: 2px solid #ffdc84; outline-offset: 3px; }
.mini-scroll { overflow-x: auto; }
.mini-face { position: relative; width: 100%; min-width: 1100px; aspect-ratio: 1000 / 450; background: repeating-linear-gradient(0deg,#292b28 0px,#292b28 2px,#2c2e2b 3px); }
.mini-face:after { content: ''; pointer-events: none; position: absolute; top: 72.4%; left: 0; right: 0; height: 3.1%; background: repeating-linear-gradient(3deg,#987247 0px,#bd9765 2px,#946334 4px); box-shadow: 0 3px 5px #0008; }
.mini-section { position: absolute; top: 0; height: 72.2%; border: 1px solid #a9ac96; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; letter-spacing: 1.6px; font-size: clamp(9px,1vw,13px); }
.mini-subtitle { position: absolute; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.6px; color: #d9dbc6; white-space: nowrap; }
.mini-control { position: absolute; width: 7.2%; transform: translate(-50%,-50%); display: flex; align-items: center; flex-direction: column; z-index: 1; }
.mini-label { font-size: 9px; line-height: 1.1; text-transform: uppercase; text-align: center; height: 22px; display: flex; align-items: flex-end; justify-content: center; margin-top: -23px; margin-bottom: 6px; max-width: 80px; letter-spacing: 0.2px; pointer-events: none; }
.mini-dial { position: relative; width: clamp(32px,3.5vw,44px); height: clamp(32px,3.5vw,44px); padding: 0; border-radius: 50%; border: 3px solid #171914; background: conic-gradient(#afb1a2,#383d36 28%,#686d62 47%,#b1b2a1 68%,#41483c 82%,#afb1a2); box-shadow: 2px 5px 5px #000b,0 0 0 3px #666957,0 0 0 5px #171a16; touch-action: none; }
.mini-dial:after { content:''; position:absolute; inset: 3px; border-radius:50%; background: linear-gradient(90deg,transparent 45%,#fffee5 45%,#fffee5 55%,transparent 55%) top center/100% 42% no-repeat; transform: rotate(var(--turn,0deg)); }
.mini-value { font-size: 9px; color: #d5c6a1; margin-top: 7px; height: 12px; white-space: nowrap; pointer-events: none; }
.mini-rocker { height: 18px; width: 32px; border: 2px solid #121711; border-radius: 1px; background: linear-gradient(90deg,#b4b4a4 50%,#505747 50%); box-shadow: 1px 2px 2px #000; }
.mini-rocker[aria-pressed=true] { transform: rotate(180deg); box-shadow: -1px -2px 2px #000; }
.mini-orange .mini-rocker,.mini-control.orange .mini-rocker { background: linear-gradient(90deg,#e39b52 50%,#8c552b 50%); }
.mini-control.blue .mini-rocker { background: linear-gradient(90deg,#9cc9d8 50%,#497a89 50%); }
.mini-keyboard { position: relative; height: 91px; margin: 0 13px; background: #151811; border: 6px solid #745332; border-top-width: 10px; touch-action: none; }
.mini-keyboard button { position: absolute; top: 0; height: 100%; width: calc(100% / 22); border: 1px solid #736f5c; border-radius: 0 0 3px 3px; background: linear-gradient(#cfc9b0,#f1ead5); }
.mini-keyboard .mini-black-key { height: 63%; width: calc(100% / 22 * 0.6); z-index: 2; background: linear-gradient(#141811,#353b30); border: 1px solid #050805; box-shadow: 0 3px 3px #000a; }
.mini-keyboard button.held { background: #cbab63; box-shadow: inset 0 4px 9px #0008; }
.mini-synth footer { padding: 9px 14px 4px; background: #1c211b; }
.mini-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:7px; font-size:11px; }
.mini-tools label { display:flex; align-items:center; gap:5px; }
.mini-tools input { accent-color:#b79b5c; width:70px; background:#2c362b; color:#ede9cf; border:1px solid #776f53; }
.mini-tools [data-bend] { width:85px; }
.mini-file { cursor:pointer; position:relative; overflow:hidden; }
.mini-file input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.mini-led { font-size:9px; color:#817450; padding-left:12px; position:relative; }
.mini-led:before { content:''; position:absolute; left:0; top:3px; width:6px; height:6px; border-radius:50%; background:#5d3524; }
.mini-led.on:before { background:#ff9a47; box-shadow:0 0 8px #ff8427; }
.mini-synth p { font-size:10px; margin:6px 0; color:#b4bda7; }
.mini-synth .mini-status { color:#dccda7; }
.mini-interface-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-effects { display: flex; align-items: center; justify-content: center; gap: 7px; margin-left: auto; }
.mini-effects button[aria-pressed="true"] { border-color: #dfbf70; background: #735329; color: #fff0bb; box-shadow: inset 0 0 0 1px rgba(255, 222, 139, .28); }
.mini-key-guide { display: flex; align-items: flex-end; height: 34px; padding: 4px; background: #493524; border-radius: 4px; }
.mini-key-guide span,.mini-key-guide b { display: grid; place-items: end center; box-sizing: border-box; width: 27px; height: 32px; padding-bottom: 3px; border: 1px solid #736f5c; border-radius: 0 0 2px 2px; background: #e0d7b7; color: #493524; font: 9px Arial,sans-serif; }
.mini-key-guide b { z-index: 1; width: 18px; height: 21px; margin: 0 -9px 11px; background: #252820; color: #d9cda6; border-color: #050805; }
.mini-compact { inset:auto auto 12px 50%; max-height:35vh; width:min(980px,96vw); }
.mini-compact .mini-editor { display:none; }
.mini-compact .mini-toolbar { padding:7px 12px; }
.mini-compact .mini-toolbar strong { font-size:16px; }
.mini-synth.mini-physical { inset: auto auto 12px 50%; width: min(960px,96vw); max-height: 34vh; border: 1px solid #a38a59; border-radius: 7px; border-image: none; background: #172017ec; box-shadow: 0 8px 30px #0008; }
.mini-physical .mini-toolbar { padding: 7px 12px; border-bottom: 0; background: transparent; }
.mini-physical .mini-toolbar strong { margin-top: 2px; font-size: 22px; font-weight: normal; }
.mini-physical .mini-toolbar small { display: block; color: #b6a477; }
.mini-physical footer { padding: 0 12px 6px; background: transparent; }
.mini-physical:not(.mini-settings-open) .mini-tools { display: none; }
.mini-physical [data-help] { margin-top: 0; }
@media(max-width:700px) { .mini-toolbar { flex-wrap:wrap; } .mini-toolbar strong { font-size:18px; } .mini-toolbar small { font-size:8px; } .mini-tools { gap:5px; } .mini-synth { top:2vh; max-height:96vh; } .mini-compact { top:auto; max-height:35vh; } }