.generation-duration-slider{display:grid;grid-template-columns:auto minmax(100px,1fr);gap:8px 12px;align-items:center;min-width:150px;max-width:100%;padding:8px 0}
.generation-duration-slider input{width:100%;min-width:0;accent-color:#edcc70;cursor:pointer}
.generation-duration-slider small{grid-column:2;color:inherit;opacity:.65;font-size:11px}
.generation-duration-slider output{font-variant-numeric:tabular-nums;min-width:3em}
.generation-frame-caption{position:absolute;left:3px;bottom:3px;border-radius:4px;background:#111c;color:white;font-size:11px;padding:2px 5px;pointer-events:none;z-index:2}
.generation-frame-slot,.generation-frame-swap{border:1px solid #5556;border-radius:12px;background:transparent;color:inherit;padding:10px;font:inherit;font-size:12px;cursor:pointer;min-height:54px}
.generation-frame-slot:hover,.generation-frame-swap:hover{background:#8882}
.generation-frame-slot:disabled{opacity:.4;cursor:default}
.generation-frame-swap{min-height:32px;align-self:center}
.generation-frame-control{display:flex;align-items:center;gap:8px;font-size:12px;margin:8px 0;color:inherit}
.generation-frame-control select{max-width:180px;border:1px solid #7775;border-radius:10px;padding:6px 10px;background:#222;color:#eee;font:inherit}
body[data-theme=light] .generation-frame-control select{background:#f5f5f5;color:#222}
.free-ref-preview{position:relative}
#freeDurationControl{min-width:160px;max-width:100%}
#freeDurationSelect{display:none}
@media(max-width:600px){.generation-duration-slider{min-width:120px}.generation-frame-slot{padding:8px;font-size:11px}}