.composition-tools {min-width:0;background:#272c26;border:1px solid #3d4539;border-radius:10px;color:#dbe3d5;margin-bottom:14px}
.composition-tools summary {display:flex;gap:12px;align-items:center;padding:15px 18px;cursor:pointer;list-style:none}
.composition-tools summary:before {content:'♫';font-size:20px;color:#d6eda0}
.composition-tools summary strong {font-size:14px}
.composition-tools summary span {color:#a1ac9b;font-size:11px;margin-left:auto}
.composition-body {padding:0 18px 16px;border-top:1px solid #394134}
.composition-midi {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 0;border-bottom:1px solid #394134}
.composition-midi small {color:#a1ac9b;font-size:11px}
.composition-controls {display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:14px 0}
.composition-controls label {display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;color:#adb8a5}
.composition-tools button,.composition-tools select,.composition-tools input[type=number] {font:inherit;border-radius:5px;border:1px solid #4b5545;background:#323a2e;color:#e3eadc;min-height:34px;padding:6px 9px;font-size:11px}
.composition-tools input[type=number] {width:76px}
.composition-tools button {cursor:pointer;font-weight:700}
.composition-tools button:hover {background:#414b39;border-color:#7b8d63}
.composition-tools button[data-composition=insert] {background:#d6e887;color:#20271b;border-color:#d6e887}
.composition-tools :focus-visible {outline:2px solid #d6e887;outline-offset:3px}
.composition-guide {color:#d6e887;background:#30382c;padding:9px 12px;border-radius:5px;font-size:12px;letter-spacing:.03em}
.composition-tools [role=status] {min-height:15px;font-size:11px;color:#b7c1af;line-height:1.6;margin:10px 0 0}
@media(max-width:650px){.composition-tools summary{align-items:start;flex-wrap:wrap}.composition-tools summary span{margin-left:0;width:100%;padding-left:28px}.composition-midi small{width:100%}.composition-controls label{flex:1 1 90px}.composition-tools input[type=number]{width:100%}}