.sound-basic-details { min-width: 0; margin-top: 12px; }
.sound-basic-details > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; padding: 8px 0; }
.sound-basic-details > summary::before { content: '▸'; color: var(--muted, #a1a797); }
.sound-basic-details[open] > summary::before { content: '▾'; }
.sound-basic-details > summary span { color: var(--muted, #a1a797); font-size: 11px; font-weight: 400; }
.sound-basic-details > summary:focus-visible { outline: 2px solid var(--accent, #c9f36a); outline-offset: 3px; }
.sound-basic-detail-body { display: grid; gap: 12px; padding-top: 12px; min-width: 0; }
.sound-basic-note, .sound-preset-note { color: var(--muted, #a1a797); font-size: 11px; line-height: 1.6; margin: 4px 0; }
.sound-basic-curves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; min-width: 0; }
.basic-graph-editor { min-width: 0; padding: 12px; border: 1px solid var(--line, #30382b); border-radius: 10px; background: rgba(0, 0, 0, .12); }
.basic-graph-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; font-size: 12px; }
.basic-graph-heading label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; cursor: pointer; }
.basic-graph-heading input[type='checkbox'] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent, #c9f36a); }
.basic-graph-heading > span { color: var(--muted, #a1a797); font-size: 11px; }
.basic-graph-wrap { position: relative; min-width: 0; }
.basic-design-graph { display: block; width: 100%; height: 126px; overflow: visible; border-radius: 6px; background: rgba(0, 0, 0, .14); touch-action: none; }
.basic-graph-grid { fill: none; stroke: var(--line, #30382b); stroke-width: 1; vector-effect: non-scaling-stroke; }
.basic-graph-line { fill: none; stroke: var(--accent, #c9f36a); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.basic-graph-fill { fill: var(--accent, #c9f36a); opacity: .07; pointer-events: none; }
.basic-design-graph ellipse { fill: #151b12; stroke: var(--accent, #c9f36a); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.basic-design-graph ellipse.is-selected { fill: var(--accent, #c9f36a); }
.basic-design-graph ellipse:focus-visible { outline: none; stroke: #fff; stroke-width: 3; }
.basic-design-graph ellipse:active { cursor: grabbing; }
.basic-design-graph[aria-disabled='true'] { opacity: .5; }
.basic-design-graph[aria-disabled='true'] ellipse { cursor: default; }
.sound-curve-editor.is-off .basic-graph-line, .sound-curve-editor.is-off .basic-graph-fill { opacity: .45; }
.sound-curve-editor.is-off .basic-graph-fill { opacity: .03; }
.basic-graph-axis { position: absolute; display: flex; justify-content: space-between; left: 3.75%; right: 3.75%; bottom: 3px; color: var(--muted, #a1a797); font-size: 10px; pointer-events: none; }
.basic-graph-ceiling, .basic-graph-floor { position: absolute; right: 5%; color: var(--muted, #a1a797); font-size: 10px; pointer-events: none; }
.basic-graph-ceiling { top: 12px; }.basic-graph-floor { bottom: 26px; }
.basic-graph-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.basic-graph-toolbar label { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted, #a1a797); margin-right: auto; }
.basic-graph-editor select, .basic-graph-editor input[type='number'] { min-width: 0; width: 100%; padding: 5px 6px; border: 1px solid var(--line, #30382b); border-radius: 5px; background: var(--panel, #1c2319); color: inherit; font: inherit; }
.basic-graph-toolbar select { width: auto; max-width: 100%; }
.basic-graph-editor button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--line, #30382b); border-radius: 5px; background: var(--panel-raised, #202521); font-size: 11px; }
.basic-graph-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 9px; }
.basic-graph-fields > label { display: grid; gap: 4px; min-width: 0; color: var(--muted, #a1a797); font-size: 11px; }
.basic-graph-fields > label > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.basic-graph-hint { margin: 8px 0 0; color: var(--muted, #a1a797); font-size: 11px; line-height: 1.6; }
.basic-graph-hint[hidden] { display: none; }
.fm-envelope-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.fm-envelope-values button { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 5px; min-width: 0; }
.fm-envelope-values output { color: var(--muted, #a1a797); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .basic-graph-editor { padding: 9px; }
  .basic-graph-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .basic-graph-fields > label:first-child { grid-column: 1 / -1; }
  .sound-basic-details > summary { flex-wrap: wrap; gap: 5px 8px; }
}