.textile-brand { font-size: 16px; letter-spacing: -.045em; }
.textile-controls { display: grid; grid-template-columns: 1.45fr 1.25fr 1fr repeat(3,auto); align-items: center; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.control-title strong { display: block; margin-top: 7px; font-size: 14px; }
.textile-controls label { font: 9px DM Mono,monospace; text-transform: uppercase; letter-spacing: .04em; display: grid; gap: 7px; }
.textile-controls select { border: 1px solid var(--ink); border-radius: 0; padding: 9px; background: transparent; color: var(--ink); font: 10px DM Mono,monospace; }
.textile-controls input[type=range] { width: 130px; accent-color: var(--ink); }
.textile-controls output { color: var(--muted); font: 9px DM Mono,monospace; }
.textile-controls .switch { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.textile-controls .image-duration { min-width: 150px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { width: 30px; height: 17px; padding: 2px; border: 1px solid var(--ink); transition: .2s; }
.switch span::after { content: ''; display: block; width: 11px; height: 11px; background: var(--ink); transition: .2s; }
.switch input:checked + span { background: var(--lime); }
.switch input:checked + span::after { transform: translateX(13px); }
.switch input:disabled + span { opacity: .3; }
.exports { display: flex; gap: 7px; margin-left: 0; }
.download.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
@media(max-width:1100px){.textile-controls{grid-template-columns:repeat(3,1fr)}.control-title{grid-column:1/-1}.textile-controls .switch{justify-self:start}}
@media(max-width:760px){.textile-controls{grid-template-columns:1fr 1fr;gap:18px}.control-title{grid-column:1/-1}.controls .exports{width:100%;margin-left:0}.exports .download{flex:1;padding:14px 8px}}