.effect-controls { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.effect-controls__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.effect-controls .button--quiet { padding: 7px 10px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: .75rem; letter-spacing: 0; text-transform: none; }
.effect-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.effect-presets button { padding: 11px 9px; border: 1px solid var(--rule); background: #fbf8f2; color: var(--ink); text-align: left; }
.effect-presets button:hover, .effect-presets button.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.effect-presets strong, .effect-presets span { display: block; }
.effect-presets strong { font-size: .82rem; }
.effect-presets span { margin-top: 2px; font-size: .7rem; opacity: .72; }
.effect-positions { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 0; padding: 0; border: 0; }
.effect-positions legend { width: 100%; margin-bottom: 4px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.effect-positions label { margin: 0; font-size: .84rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.effect-positions input { accent-color: var(--violet); }
.effect-controls__hint { margin: 14px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.range output { float: right; color: var(--violet); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .effect-presets { grid-template-columns: 1fr; } }