.trio-media.presets-demo { max-width: 420px; border-color: #2c2c30; background: #101012; box-shadow: 0 20px 45px #0004; }
.presets-demo-header { display: flex; align-items: center; gap: 9px; padding: 15px 20px; border-bottom: 1px solid #232327; color: #e4e4e7; font-size: 13px; font-weight: 500; }
.presets-demo-header > svg { color: #909098; }
.presets-demo-body { padding: 20px; }
.presets-demo-controls { display: flex; gap: 8px; }
.presets-demo-picker, .presets-demo-save { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 8px 11px; border: 1px solid #29292d; border-radius: 5px; background: #151517; font-size: 11px; }
.presets-demo-picker { flex: 1; justify-content: space-between; min-width: 0; color: #00dd61; border-color: #00dd6170; }
.presets-demo-save { flex-shrink: 0; color: #d1d1d6; }
.presets-demo svg { flex-shrink: 0; }
.presets-demo-menu { margin-top: 7px; padding: 10px 5px 5px; border: 1px solid #29292d; border-radius: 6px; background: #151517; }
.presets-demo-group { padding: 3px 10px 6px; color: #777780; font-family: var(--font-mono); font-size: 9px; }
.presets-demo-group--saved { margin-top: 8px; padding-top: 11px; border-top: 1px solid #29292d; }
.presets-demo-option { display: flex; align-items: center; justify-content: space-between; min-height: 31px; padding: 7px 10px; border-radius: 4px; color: #c7c7cd; font-size: 12px; }
.presets-demo-option--selected { color: #00dd61; background: #00dd610c; }
.presets-demo-files { display: flex; gap: 8px; margin-top: 15px; }
.presets-demo-files > span { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1; padding: 9px 10px; border: 1px solid #29292d; border-radius: 5px; color: #b6b6bd; font-size: 11px; }
@media (max-width: 540px) {
  .presets-demo-header { padding-inline: 16px; }
  .presets-demo-body { padding: 16px; }
}