.keyboard-panel { position: fixed; z-index: 10000; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(850px, calc(100% - 36px)); box-sizing: border-box; padding: 18px 24px 12px; border: 1px solid #a68d5b; border-radius: 12px; background: #202820f2; color: #eee2bf; font-family: Georgia, serif; box-shadow: 0 8px 40px #0008; }
.keyboard-panel[hidden] { display: none; }
.keyboard-heading, .keyboard-settings { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keyboard-heading { flex-wrap: wrap; }
.keyboard-master { display: flex; align-items: center; gap: 8px; font: 12px sans-serif; color: #c7c9b7; }
.keyboard-master input { width: 110px; accent-color: #d0b46a; }
.keyboard-panel small { color: #b6a477; font: 10px sans-serif; letter-spacing: 2px; }
.keyboard-panel h2 { font-size: 25px; font-weight: normal; margin: 4px 0; }
.keyboard-panel p { font: 12px/1.5 sans-serif; color: #c7c9b7; }
.keyboard-panel button { cursor: pointer; background: #394338; color: #eee2bf; border: 1px solid #8d805e; border-radius: 5px; padding: 8px; }
.keyboard-panel button:focus-visible { outline: 2px solid #f5cc75; outline-offset: 2px; }
.keyboard-notes { display: flex; height: 76px; margin: 14px 0; padding: 6px; background: #493524; border-radius: 6px; }
.keyboard-notes button { flex: 1; display: flex; align-items: flex-end; justify-content: center; border-radius: 0 0 4px 4px; }
.keyboard-notes .white { background: #e0d7b7; color: #493524; }
.keyboard-notes .black { background: #252820; color: #d9cda6; height: 68%; margin: 0 -2.8%; z-index: 1; flex: 0 0 5.6%; }
.keyboard-notes button.pressed { background: #c49c4b; box-shadow: inset 0 4px 10px #0006; }
.keyboard-settings { font: 12px sans-serif; flex-wrap: wrap; justify-content: center; gap: 8px; }
.keyboard-settings label { display: flex; gap: 8px; align-items: center; }
.keyboard-settings input { width: 75px; accent-color: #d0b46a; }
.keyboard-status { margin-bottom: 0; min-height: 18px; }
.keyboard-effects { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; font: 11px sans-serif; color: #c7c9b7; }
.keyboard-effects button[aria-pressed="true"] { background: #a68a43; color: #171e16; box-shadow: 0 0 9px #d6b76144; }
.string-controls { margin-top: 10px; padding: 9px; border: 1px solid #6f6248; border-radius: 7px; background: #171b17c9; font: 11px sans-serif; }
.string-controls[hidden] { display: none; }
.string-sliders { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 7px 14px; }
.string-sliders label { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 6px; color: #d0c7ae; }
.string-sliders input { width: 100%; accent-color: #bd3d27; }
.string-registrations { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.string-registrations button { padding: 5px 7px; font-size: 10px; text-transform: uppercase; }
.string-registrations button[aria-pressed="true"] { background: #ad3322; border-color: #e07d53; color: #fff0d4; box-shadow: inset 0 -3px 0 #67170e, 0 0 7px #b6402844; }
@media (max-height: 580px) { .keyboard-panel { bottom: 8px; padding: 8px 16px; } .keyboard-notes { height: 46px; margin: 6px 0; } .keyboard-panel p { margin: 5px 0; } }
@media (max-width: 700px) { .string-sliders { grid-template-columns: repeat(2, minmax(125px, 1fr)); } }