.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; }
.matrix-export { display: grid; gap: 5px; color: var(--muted); font: 8px DM Mono,monospace; text-transform: uppercase; }
.matrix-export select { min-height: 36px; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 0 8px; font: 9px DM Mono,monospace; }
.download.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.audio-editor { padding: 34px 0; border-bottom: 1px solid var(--line); }
.editor-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }
.editor-head h2 { margin: 6px 0 0; font-size: 28px; }
.editor-head output { font: 12px DM Mono,monospace; }
#waveform { width: 100%; height: 180px; background: #f9f8f3; border: 1px solid var(--line); }
.trim-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 22px 0; }
.trim-fields label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; font: 10px DM Mono,monospace; text-transform: uppercase; }
.trim-fields input { width: 100%; accent-color: var(--ink); }
.trim-fields output { min-width: 70px; text-align: right; }
.editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
.canvas-wrap { height: auto; width: min(100%, calc((100vh - 190px) * var(--spectrogram-aspect, 1.777778))); aspect-ratio: var(--spectrogram-aspect, 1.777778); max-height: calc(100vh - 190px); min-height: 0; margin-inline: auto; }
.live-analyzer { position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 30vw; height: 30vh; min-width: 330px; min-height: 240px; border: 1px solid rgba(255,255,255,.35); background: #071611; padding: 16px; color: #f2efe7; box-shadow: 0 0 0 100vmax rgba(2,8,6,.68),0 24px 80px rgba(0,0,0,.5); }
.live-analyzer[hidden] { display: none; }
.analyzer-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.analyzer-head strong { display: block; margin-top: 5px; font-size: 19px; }
.analyzer-head label { display: flex; align-items: center; gap: 9px; font: 9px DM Mono,monospace; text-transform: uppercase; }
.analyzer-head select { border: 1px solid rgba(255,255,255,.45); background: #071611; color: white; padding: 8px; font: 10px DM Mono,monospace; }
#analyzerCanvas { width: 100%; height: calc(100% - 58px); display: block; background: #020806; }
.analyzer-close { position: absolute; right: 8px; top: 5px; width: 30px; height: 30px; border: 0; background: transparent; color: white; font-size: 24px; cursor: pointer; z-index: 2; }
@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}.trim-fields{grid-template-columns:1fr}.editor-actions{flex-direction:column}.editor-actions button{width:100%}.live-analyzer{width:88vw;height:30vh;min-width:0}.canvas-wrap{max-height:calc(100vh - 140px);width:min(100%,calc((100vh - 140px) * var(--spectrogram-aspect,1.777778)))}}

.stage-tabs { position: sticky; top: 0; z-index: 50; height: 58px; display: flex; justify-content: center; background: rgba(242,239,231,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.stage-tab { min-width: 180px; padding: 0 25px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font: 11px DM Mono,monospace; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }
.stage-tab:last-child { border-right: 1px solid var(--line); }
.stage-tab span { margin-right: 10px; font-size: 9px; }
.stage-tab.active { background: var(--ink); color: var(--paper); }
.stage-tab:disabled { opacity: .3; cursor: not-allowed; }
.stage-tab:not(:disabled):not(.active):hover { background: var(--lime); color: var(--ink); }
body:not([data-view="home"]) .hero, body:not([data-view="home"]) .source-grid, body:not([data-view="home"]) .method { display: none; }
body[data-view="home"] .workspace { display: none; }
body:not([data-view="home"]) .workspace { margin-top: 34px; }

@media(max-width:760px) {
  .stage-tabs { height: 52px; }
  .stage-tab { min-width: 0; flex: 1; padding: 0 6px; font-size: 9px; }
  .stage-tab span { display: none; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.source-grid { margin:0 8vw 8vw; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.source-card, .dropzone, .microphone-capture, .youtube-import { min-width:0; min-height:330px; margin:0; padding:24px; border:1px solid var(--ink); background:rgba(255,255,255,.14); display:flex; flex-direction:column; align-items:stretch; gap:0; transition:background .2s,box-shadow .2s,transform .2s; }
.source-card-top { display:flex; align-items:center; justify-content:space-between; min-height:18px; }
.source-number { color:var(--muted); font:9px DM Mono,monospace; letter-spacing:.08em; }
.source-icon { width:58px; height:58px; margin:22px 0 24px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; }
.source-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.youtube-import .source-icon svg path:last-child { fill:var(--ink); stroke:none; }
.source-card-copy { min-height:104px; }
.source-card-copy strong { display:block; margin:0 0 9px; font:500 21px/1.15 Manrope,Arial,sans-serif; letter-spacing:-.025em; }
.source-card-copy small { display:block; color:var(--muted); font:10px/1.55 DM Mono,monospace; }
.source-card .source-action { width:100%; min-height:48px; margin:18px 0 0; border:1px solid var(--ink); border-radius:0; padding:0 16px; background:var(--ink); color:white; cursor:pointer; font:500 10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.075em; }
.source-card .source-action:not(:disabled):hover { background:var(--lime); color:var(--ink); }
.dropzone .source-action, .microphone-capture .source-action, .youtube-import-form { margin-top:auto; }
.dropzone { cursor:pointer; }
.dropzone:hover, .dropzone.dragging { background:rgba(201,255,70,.28); box-shadow:6px 6px 0 var(--ink); transform:translate(-3px,-3px); }
.dropzone:hover .source-icon, .dropzone.dragging .source-icon { background:var(--lime); }
.microphone-capture.is-recording { background:var(--ink); color:var(--paper); box-shadow:6px 6px 0 #e34f42; transform:translate(-3px,-3px); }
.microphone-capture.is-recording .eyebrow, .microphone-capture.is-recording .source-number, .microphone-capture.is-recording small, .microphone-capture.is-recording .source-status { color:rgba(242,239,231,.7); }
.microphone-capture.is-recording .source-icon { border-color:var(--paper); animation:recording-pulse 1.2s ease-in-out infinite; }
.microphone-capture.is-recording .source-action { border-color:var(--paper); background:var(--paper); color:var(--ink); }
.recording-time { margin:2px 0 -5px; color:inherit; font:500 15px DM Mono,monospace; }
.recording-time::before { content:''; display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:50%; background:#e34f42; }
.youtube-import-form { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding-top:18px; }
.youtube-import-form input { width:100%; min-width:0; height:48px; border:1px solid var(--ink); border-radius:0; padding:0 13px; background:#f9f8f3; color:var(--ink); font:10px DM Mono,monospace; }
.youtube-import-form input:focus { outline:2px solid var(--lime); outline-offset:-3px; }
.youtube-import-form .source-action { margin:0; }
.source-status { display:block; min-height:30px; margin-top:10px; color:var(--muted); font:9px/1.45 DM Mono,monospace; }
.youtube-import-status[data-state="busy"] { color:#6a5417; }
.youtube-import-status[data-state="success"] { color:#1d6845; }
.youtube-import-status[data-state="error"] { color:#9a3028; }
@keyframes recording-pulse { 50% { opacity:.4; } }

@media(max-width:980px) {
  .source-grid { margin-inline:5vw; grid-template-columns:1fr; }
  .source-card, .dropzone, .microphone-capture, .youtube-import { min-height:0; }
  .source-card-copy { min-height:0; }
}

/* Tutti i parametri che modificano il raster canonico restano sulla stessa riga. */
.textile-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.textile-controls .control-title { flex: 1 0 270px; min-width: 270px; }
.textile-controls > label { flex: 0 0 auto; min-width: max-content; }
.textile-controls > label:first-of-type { min-width: 220px; }
.textile-controls .range-label { min-width: 145px; }
@media(max-width:1100px) {
  .textile-controls { display:flex; flex-wrap:nowrap; gap:16px; }
  .textile-controls .control-title { flex:1 0 250px; min-width:250px; }
}
@media(max-width:760px) {
  .textile-controls { display:flex; flex-wrap:nowrap; gap:14px; }
  .textile-controls .control-title { flex:0 0 230px; min-width:230px; }
}