/* SPDX-License-Identifier: GPL-3.0-only */
/* Adapted from ChanceTheMaker/sloop-smk 090588d; see THIRD_PARTY.md. */
.smk-simulator-shell { max-width:1600px; margin:auto; box-sizing:border-box; }
.sim-fullscreen-status { flex-basis:100%; font-size:12px; }
.sim-toolbar .sim-fullscreen-button[hidden] { display:none; }
.sim-toolbar { display:flex; align-items:center; gap:10px; margin:12px 0; flex-wrap:wrap; }
.sim-toolbar strong { margin-right:auto; font-size:14px; }
.sim-toolbar .sim-icon-button { display:inline-flex; align-items:center; justify-content:center; width:36px; height:34px; padding:6px; border-radius:8px; }
.sim-icon-button svg { display:block; width:22px; height:22px; }
.sim-toolbar .sim-help-button { font:bold 19px/1 var(--ui-font); }
.sim-finish-picker { position:relative; }
.sim-toolbar .sim-finish-toggle { width:54px; gap:5px; }
.sim-swatch { display:inline-block; width:22px; height:22px; flex:0 0 22px; border-radius:50%; border:1px solid #0008; box-shadow:inset 0 1px 2px #ffffff66,0 0 0 1px #ffffff33; }
.sim-caret { font-size:13px; }
.sim-finish-menu { position:absolute; z-index:60; right:0; top:calc(100% + 8px); min-width:170px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 12px 32px #0008; }
.sim-finish-menu[hidden] { display:none; }
.sim-finish-menu .sim-finish-option { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid transparent; background:transparent; box-shadow:none; color:var(--fg); text-align:left; font-size:12px; border-radius:7px; }
.sim-finish-option[aria-selected=true] { outline:1px solid var(--accent); outline-offset:-2px; }
.sim-finish-menu .sim-finish-option:is(:hover,:focus-visible) { background:var(--bg); }
.sim-tour { position:fixed; z-index:10020; box-sizing:border-box; width:min(340px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:16px 18px; border:1px solid var(--accent); border-radius:14px; background:var(--panel); color:var(--fg); box-shadow:0 12px 45px #0009,inset 0 1px #ffffff1a; font:13px/1.6 var(--ui-font); }
.sim-tour[hidden] { display:none; }
.sim-tour::before { content:''; position:absolute; left:calc(var(--arrow-x,30px) - 6px); width:12px; height:12px; background:var(--panel); transform:rotate(45deg); }
.sim-tour[data-side=below]::before { top:-7px; border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
.sim-tour[data-side=above]::before { bottom:-7px; border-bottom:1px solid var(--accent); border-right:1px solid var(--accent); }
.sim-tour-heading,.sim-tour-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sim-tour-count { font-size:10px; letter-spacing:.1em; color:var(--dim); }
.sim-tour h3 { margin:7px 0; font:700 17px/1.3 var(--ui-font); color:var(--fg); text-transform:none; }
.sim-tour p { margin:0 0 15px; }
.sim-tour .sim-tour-close { border:0; background:none; box-shadow:none; color:var(--fg); padding:0; width:24px; height:24px; font:23px/1 Arial,sans-serif; }
.sim-tour-actions button { font:600 12px var(--ui-font); padding:7px 16px; }
.sim-tour-actions [data-next] { background:var(--accent); color:var(--bg); }
.sim-tour-target { outline:2px solid var(--accent)!important; outline-offset:5px; }
.smk-simulator-shell { --case:#b92832; --case-edge:#53141a; --ink:#fff2e5; position:relative; padding:24px 24px 20px; border:1px solid #0009; border-radius:22px 22px 15px 15px; color:var(--ink); background:linear-gradient(110deg,#ffffff22,transparent 30%,#0002),var(--case); box-shadow:inset 0 2px 1px #fff5,inset 0 -8px 0 var(--case-edge),0 18px 32px #0005; font-family:Arial,sans-serif; }
.smk-simulator-shell[data-finish=white] { --case:#e8e7e0; --case-edge:#9b9c98; --ink:#303436; }
.smk-simulator-shell[data-finish=elite] { --case:#687481; --case-edge:#39434e; --ink:#f1f1e9; }
.smk-simulator-shell[data-finish=black] { --case:#16191b; --case-edge:#08090a; --ink:#e9eef0; }
.smk-simulator-shell[data-finish=pink] { --case:#e5a2b4; --case-edge:#9b6476; --ink:#392630; }
.smk-simulator-shell[data-finish=charcoal] { --case:#52575b; --case-edge:#2b2e31; --ink:#f2f0e6; }
.smk-simulator-shell::before,.smk-simulator-shell::after { content:'−'; position:absolute; top:10px; width:10px; height:10px; line-height:8px; font-size:11px; text-align:center; color:#202020; background:linear-gradient(135deg,#ddd,#666); border:1px solid #000b; border-radius:50%; box-shadow:0 1px 2px #0008; }
.smk-simulator-shell::before { left:10px; }.smk-simulator-shell::after { right:10px; }
.sim-top { display:grid; grid-template-columns:8% 21% 40% 1fr; gap:16px; align-items:start; }
.sim-left,.sim-center,.sim-right { min-width:0; }
.sim-bezel { padding:12px; background:linear-gradient(135deg,#2e3032,#090a0b); border:2px solid #111; border-radius:18px; box-shadow:0 2px 5px #0006,inset 0 1px 2px #fff3; }
.sim-lcd { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:7px; background:#0a1013; }
.sim-knobs { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; padding:4px 0 14px; }
.sim-encoder { display:grid; justify-items:center; gap:6px; min-width:0; font-size:10px; font-weight:bold; }
.sim-encoder small { font-size:8px; font-weight:normal; }
.smk-simulator-shell .sim-dial { padding:0; min-width:0; width:100%; max-width:45px; aspect-ratio:1; border-radius:50%; border:2px solid #111; background:repeating-conic-gradient(#222 0deg 6deg,#36393b 6deg 12deg); box-shadow:0 4px 5px #0008,inset 0 1px 1px #fff6; position:relative; cursor:ns-resize; touch-action:none; }
.sim-dial::before { content:''; position:absolute; inset:5px; border-radius:50%; background:radial-gradient(ellipse at 35% 20%,#696b6c,#292b2d 65%,#181a1c); box-shadow:inset 0 1px #fff4; }
.sim-dial::after { content:''; position:absolute; top:12%; left:calc(50% - 1px); width:2px; height:26%; border-radius:2px; background:#e8e8e4; transform-origin:50% 146%; transform:rotate(var(--angle,0deg)); }
.sim-pads { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; padding:9px; background:#0002; border:1px solid #0004; border-radius:10px; box-shadow:inset 0 2px 6px #0003; }
.smk-simulator-shell .sim-pad { min-width:0; padding:0; aspect-ratio:1.6; border-radius:6px; color:#bfc3c6; font-size:10px; border:2px solid #15191b; background:linear-gradient(135deg,#555a5e,#303437); box-shadow:inset 0 1px 2px #ffffff35,0 2px 2px #0006; touch-action:none; }
.smk-simulator-shell .sim-pad:is(.lit,[aria-pressed=true]) { background:linear-gradient(135deg,#fcad51,#d87523); border-color:#ffc76e; color:#321600; box-shadow:0 0 12px #ffbd5977,inset 0 1px #fff6; }
.sim-faders { display:flex; gap:8px; justify-content:space-evenly; padding:4px 0 12px; }
.sim-fader,.sim-wheel { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:9px; font-weight:bold; }
.sim-fader input,.sim-wheel input { writing-mode:vertical-lr; direction:rtl; touch-action:none; }
.sim-fader input { appearance:none; -webkit-appearance:none; width:40px; height:124px; margin:0; border:0; border-radius:0; background:repeating-linear-gradient(to top,transparent 0 11px,#ffffff40 11px 12px) left center/7px 108px no-repeat; cursor:ns-resize; }
.sim-fader input::-webkit-slider-runnable-track { width:6px; border:1px solid #090b0d; border-radius:5px; background:#141719; box-shadow:inset 1px 0 3px #000,1px 0 #ffffff30; }
.sim-fader input::-webkit-slider-thumb { -webkit-appearance:none; width:36px; height:23px; margin-left:-16px; border:1px solid #101214; border-radius:4px; background:linear-gradient(to bottom,#777c7f 0%,#414649 36%,#111416 43%,#dadcda 47%,#dadcda 53%,#171a1c 57%,#393e41 75%,#202427); box-shadow:0 3px 4px #0009,inset 0 1px #ffffff77; }
.sim-fader input::-moz-range-track { width:6px; height:100%; border:1px solid #090b0d; border-radius:5px; background:#141719; }
.sim-fader input::-moz-range-thumb { width:36px; height:23px; border:1px solid #101214; border-radius:4px; background:linear-gradient(#777c7f,#414649 36%,#111416 43%,#dadcda 47%,#dadcda 53%,#171a1c 57%,#202427); box-shadow:0 3px 4px #0009,inset 0 1px #ffffff77; }
.sim-banks,.sim-buttons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-top:8px; }
.sim-banks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; max-width:160px; margin:8px auto 0; }
.smk-simulator-shell .sim-button { min-width:0; min-height:27px; padding:7px 2px; font:700 8px/1.2 Arial,sans-serif; color:#e3e5e6; background:linear-gradient(#474b4e,#272b2e); border:1px solid #131617; border-radius:5px; box-shadow:0 2px 2px #0005,inset 0 1px #fff2; touch-action:none; }
.smk-simulator-shell .sim-button.lit { border-bottom:3px solid #ffad49; padding-bottom:5px; color:#ffe0a5; }
.smk-simulator-shell .sim-button[aria-pressed=true] { background:#171b1e; box-shadow:inset 0 2px 4px #0009; }
.smk-simulator-shell .sim-banks .sim-button { min-height:23px; padding:4px 2px; font-size:7px; border-radius:4px; }
.smk-simulator-shell .sim-banks .sim-button.lit { padding-bottom:2px; }
.sim-bottom { margin-top:20px; }
.sim-wheels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:end; padding-top:4px; }
.sim-wheels > button { grid-column:1/-1; }
.sim-wheels > .sim-banks { grid-column:1/-1; width:100%; margin:0; }
.sim-wheel { gap:6px; text-transform:uppercase; letter-spacing:.08em; }
.sim-wheel-housing { display:block; position:relative; width:min(42px,100%); height:104px; padding:5px 6px; box-sizing:border-box; overflow:hidden; border:1px solid #151819; border-radius:12px; background:#0b0d0f; box-shadow:inset 0 3px 6px #000,0 1px #ffffff40; }
.sim-wheel-tread { display:block; height:100%; border-radius:45% / 18%; background:linear-gradient(to bottom,#000e,transparent 30%,#ffffff15 48%,transparent 65%,#000e),linear-gradient(to right,#07090b,#4d5357 24%,#343a3e 55%,#14191d),repeating-linear-gradient(to bottom,#6b7378 0 2px,#202529 2px 5px); background-blend-mode:normal,soft-light,normal; background-position:0 0,0 0,0 var(--wheel-turn,0px); box-shadow:inset 1px 0 #ffffff30,inset -2px 0 #0008; }
.sim-wheel-housing::after { content:''; position:absolute; left:11px; right:11px; top:var(--wheel-position,50%); height:2px; background:#e0e4df; box-shadow:0 1px 2px #000; pointer-events:none; }
.sim-wheel-housing input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ns-resize; }
.sim-wheel-housing:focus-within { outline:2px solid #49d4ff; outline-offset:3px; }
.smk-simulator-shell .sim-pad { aspect-ratio:.95; }
.smk-simulator-shell[data-finish=elite] .sim-button { background:linear-gradient(#f78a4f,#cd4b16); color:#311f17; }
.smk-simulator-shell[data-finish=elite] .sim-key.black { background:linear-gradient(90deg,#ac3914,#ed733d 35%,#ce4e1e); border-color:#82341c; }
.smk-simulator-shell[data-finish=elite] .sim-pad:not(.lit) { background:linear-gradient(#fff5dc,#c5c3b1); color:#5e5950; }
.sim-piano { position:relative; height:180px; background:#111; border:5px solid #111; border-top:9px solid #111; border-radius:4px 4px 8px 8px; box-shadow:0 3px 4px #0006; overflow:hidden; }
.smk-simulator-shell .sim-key { position:absolute; top:0; margin:0; padding:0 0 8px; border-radius:0 0 4px 4px; text-align:center; display:flex; align-items:end; justify-content:center; font:9px Arial,sans-serif; left:calc(var(--key-x)*100%/var(--white-count)); width:calc(100%/var(--white-count)); min-width:0; touch-action:none; }
.smk-simulator-shell .sim-key.white { height:100%; color:#777; background:linear-gradient(90deg,#d5d5d0,#fcfcf7 20%,#eee 85%,#b8b9b6); border:1px solid #777; border-top:0; box-shadow:inset 0 -6px 0 #c5c6c2; }
.smk-simulator-shell .sim-key.black { z-index:2; height:62%; width:calc(62%/var(--white-count)); color:#999; background:linear-gradient(90deg,#151618,#3d4042 30%,#222426 75%,#070808); border:1px solid #060708; border-bottom:6px solid #0b0c0d; box-shadow:2px 4px 3px #0006; }
.smk-simulator-shell .sim-key[aria-pressed=true] { background:linear-gradient(#c48b36,#ffc76c); box-shadow:inset 0 3px 5px #0006; }
.smk-simulator-shell[data-finish=black] .sim-key.white:not([aria-pressed=true]) { color:#aaa; background:linear-gradient(90deg,#16181a,#34383b 20%,#25292c 85%,#111315); border-color:#080a0b; box-shadow:inset 0 -6px 0 #121416; }
.smk-simulator-shell[data-finish=black] .sim-key.black:not([aria-pressed=true]) { color:#b7b9ba; background:linear-gradient(90deg,#08090a,#202326 30%,#121416 75%,#030405); border-color:#020303; }
.sim-piano { touch-action:none; user-select:none; }
.smk-simulator-shell :is(button,input,select):focus-visible { outline:2px solid #49d4ff; outline-offset:3px; }

#smk-panel[hidden],#fm1-panel[hidden]{display:none!important}
#smk-panel .sim-key strong{display:block;font:700 clamp(7px,.8vw,11px)/1.4 monospace;color:#343434;white-space:normal}
#smk-panel .sim-key.unused{opacity:.75}#smk-panel .sim-key.white{padding-bottom:14px}
#smk-panel .sim-bezel{position:relative;padding:8px;border-radius:12px}
#smk-panel .sim-lcd{image-rendering:pixelated}
#smk-panel .smk-overlay{position:absolute;inset:8px;display:grid;place-items:center;background:#0004}
#smk-panel .smk-overlay[hidden]{display:none}
#smk-panel .smk-overlay button{font:700 12px monospace;padding:12px;color:#fff;background:#241a16e8;border:1px solid #fa5c35;border-radius:5px}
#smk-panel .sim-top{grid-template-columns:7% 24% 38% 1fr;gap:14px}
#smk-panel .sim-piano{height:170px}#smk-panel .smk-name{font:700 12px monospace;letter-spacing:.15em;margin:0 0 16px}
#smk-panel .sim-dial:disabled,#smk-panel .sim-pad:disabled{opacity:.85;cursor:default}
#smk-panel .sim-button:disabled{opacity:.65}
#smk-panel .browser-volume{display:block;width:100%;accent-color:#ffad49}
#smk-panel .volume-label{font:9px monospace;display:block;text-align:center;margin-top:8px}
.device-picker{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.device-picker button{font:700 11px monospace;background:#201e1a;border:1px solid #594d42;color:#ddd;padding:10px 18px;border-radius:5px}.device-picker [aria-pressed=true]{border-color:#ee9e50;background:#3c281d;color:#ffe7bc}
.simulator.expanded #smk-panel .sim-top{display:block}.simulator.expanded #smk-panel :is(.sim-wheels,.sim-center,.sim-right,.smk-name){display:none}.simulator.expanded #smk-panel .sim-left{max-width:560px;margin:auto}.simulator.expanded #smk-panel .sim-piano{height:110px}
@media(max-width:900px){#smk-panel .sim-top{grid-template-columns:1fr 1.3fr;gap:14px}#smk-panel .sim-wheels,#smk-panel .sim-right{display:none}#smk-panel .sim-encoder small{display:none}#smk-panel .sim-knobs{gap:4px}#smk-panel .sim-pads{gap:4px;padding:5px}}
@media(max-width:600px){#smk-panel .sim-center{display:none}#smk-panel .sim-top{display:block}#smk-panel .sim-left{max-width:280px;margin:auto}#smk-panel .sim-piano{height:120px;min-width:620px}#smk-panel .sim-bottom{overflow-x:auto;padding-bottom:8px}#smk-panel .smk-simulator-shell{padding:18px 12px}}