:root{
  color-scheme:dark;
  --bg:#0d0e11;--panel:#15171c;--raised:#1d2027;--line:#2a2d37;
  --text:#e9ebf0;--muted:#9097a8;
  --accent:#a99bff;--accent-hover:#bcb1ff;--accent-ink:#17122e;
  --ok:#86efac;--warn:#fde047;--error:#fca5a5;
  --r:.6rem;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:.875rem/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}

/* Cabecera mínima */
.bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;max-width:80rem;margin:0 auto;padding:.9rem 1rem .6rem}
h1{margin:0;font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
.privacy{margin:0;color:var(--muted);font-size:.78rem}

/* Disposición: escenario a la izquierda, ajustes a la derecha */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:1rem;align-items:start;max-width:80rem;margin:0 auto;padding:0 1rem 1rem}
.stage{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.6rem;padding:.6rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.side{display:flex;flex-direction:column;gap:.5rem;min-width:0}

/* Lienzo */
.canvas-wrap{
  position:relative;margin:0 auto;overflow:hidden;background:#000;
  width:min(100%,calc(68vh*var(--ratio,1.7778)));
  aspect-ratio:var(--ratio,16/9);
  border:1px solid var(--line);border-radius:.4rem;
}
canvas{position:absolute;inset:0;width:100%;height:100%}

/* Transporte */
.transport{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center}
.transport output{min-width:5.5rem;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
progress{width:100%;height:.3rem;border:0;border-radius:99px;background:var(--line);accent-color:var(--accent);overflow:hidden}
progress::-webkit-progress-bar{background:var(--line)}
progress::-webkit-progress-value{background:var(--accent)}
progress::-moz-progress-bar{background:var(--accent)}
#exportStatus{min-height:1.2rem;font-size:.8rem;font-weight:600;color:var(--muted)}
#exportStatus[data-kind=ok]{color:var(--ok)}
#exportStatus[data-kind=error]{color:var(--error)}
#exportStatus[data-kind=busy]{color:var(--warn)}

/* Secciones plegables */
.sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
summary{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;font-weight:600;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"▾";color:var(--muted);transition:transform .15s}
details:not([open])>summary::after{transform:rotate(-90deg)}
.body{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.1rem .8rem .8rem}
.wide{grid-column:1/-1}

/* Campos */
label.f{display:flex;flex-direction:column;gap:.25rem;min-width:0;font-size:.75rem;font-weight:500;color:var(--muted)}
.lb{display:flex;justify-content:space-between;gap:.5rem}
output{color:var(--accent);font-variant-numeric:tabular-nums}
small{color:var(--muted);font-size:.7rem;font-weight:400}
.row{display:flex;gap:.4rem}
.row select{flex:1;min-width:0}
button,input,select{font:inherit}
select,input[type=file],button{
  min-height:2rem;padding:.3rem .55rem;color:var(--text);
  background:var(--raised);border:1px solid var(--line);border-radius:.4rem;
}
select{width:100%;min-width:0}
input[type=file]{width:100%;padding:.2rem;font-size:.75rem}
input[type=file]::file-selector-button{margin-right:.5rem;padding:.25rem .6rem;border:0;border-radius:.3rem;background:var(--line);color:var(--text);font:inherit;cursor:pointer}
input[type=color]{width:2.2rem;min-height:2rem;padding:.15rem;background:var(--raised);border:1px solid var(--line);border-radius:.4rem}
input[type=range]{width:100%;margin:.2rem 0;accent-color:var(--accent)}
button{font-weight:650;cursor:pointer}
button:hover:not(:disabled){background:#272b35}
button.primary{background:var(--accent);color:var(--accent-ink);border:0;min-height:2.3rem}
button.primary:hover:not(:disabled){background:var(--accent-hover)}
button:disabled,input:disabled,select:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Capas */
.layer-card{padding-top:.6rem;border-top:1px solid var(--line)}
.layer-card:first-child{padding-top:0;border-top:0}
.layer-head{display:flex;align-items:center;gap:.6rem;font-weight:600}
.layer-head label{cursor:pointer}
.layer-head input[type=checkbox]{
  appearance:none;position:relative;flex:none;width:2rem;height:1.15rem;margin:0;
  background:var(--line);border-radius:99px;cursor:pointer;transition:background .15s;
}
.layer-head input[type=checkbox]::after{
  content:"";position:absolute;top:.15rem;left:.15rem;width:.85rem;height:.85rem;
  border-radius:50%;background:var(--text);transition:transform .15s;
}
.layer-head input[type=checkbox]:checked{background:var(--accent)}
.layer-head input[type=checkbox]:checked::after{transform:translateX(.85rem);background:var(--accent-ink)}
.layer{display:none;grid-template-columns:1fr 1fr;gap:.6rem;padding-top:.6rem}
.layer.visible{display:grid}

.audio-note{margin:0;color:var(--muted);font-size:.72rem}
footer{max-width:80rem;margin:0 auto;padding:.5rem 1rem 1.2rem;color:var(--muted);font-size:.75rem}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .stage{position:static}
  .canvas-wrap{width:min(100%,calc(60vh*var(--ratio,1.7778)))}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}