:root {
  --bg: #080808;
  --panel: #11100f;
  --panel-2: #171513;
  --ink: #f3eee5;
  --muted: #a89f94;
  --line: #302c28;
  --accent: #b88145;
  --accent-2: #e4b272;
  --danger: #a94035;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background:
  radial-gradient(circle at 80% -10%, #2c1e13 0, transparent 34rem),
  linear-gradient(180deg, #090909, #050505 65%); }
button, input, textarea, select { font: inherit; }
button, .button { border: 0; cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 20; display:flex; justify-content:space-between; align-items:center; padding: 18px max(24px, 4vw); border-bottom: 1px solid var(--line); background: rgba(8,8,8,.9); backdrop-filter: blur(18px); }
.eyebrow { margin: 0 0 2px; color: var(--muted); font-size: 11px; letter-spacing: .24em; }
h1 { margin: 0; font-size: clamp(25px,4vw,44px); line-height:.85; letter-spacing:-.06em; } h1 span { color: var(--accent-2); }
.top-actions, .action-row, .preview-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
main { width: min(1500px, 94vw); margin: 32px auto 70px; display:grid; gap:22px; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(22,20,18,.97), rgba(12,12,12,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.22); }
.setup, .timeline, .export { padding: clamp(18px,3vw,34px); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px; }
.section-heading.compact { margin-bottom:14px; align-items:center; }
.section-heading > div:first-child { display:flex; gap:12px; align-items:baseline; }
.section-heading span { color: var(--accent); font-weight:800; font-size:12px; letter-spacing:.1em; }
h2 { margin:0; font-size:clamp(20px,2vw,30px); letter-spacing:-.03em; }
.section-heading p { color:var(--muted); margin:0; max-width:610px; line-height:1.5; font-size:14px; }
.setup-grid, .export-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
.export-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.field input, .field textarea, .field select { width:100%; color:var(--ink); background:#0a0a0a; border:1px solid #39342f; border-radius:10px; padding:12px 13px; outline:none; text-transform:none; letter-spacing:normal; font-weight:500; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,129,69,.12); }
.file-field input { padding:9px; }
.lyrics-field { margin-top:14px; }
textarea { min-height:260px; resize:vertical; line-height:1.5; }
.action-row { margin-top:16px; }
.action-row span { color:var(--muted); font-size:13px; }
.primary, .secondary, .ghost, .button { border-radius:9px; padding:11px 15px; font-weight:800; }
.primary { background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#140e08; }
.secondary { color:var(--ink); background:#2a2520; border:1px solid #463d34; }
.ghost, .button { color:var(--ink); background:transparent; border:1px solid var(--line); text-decoration:none; }
button:disabled { opacity:.4; cursor:not-allowed; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; }
.preview, .look { padding:18px; }
.canvas-shell { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#030303; border-radius:12px; border:1px solid #292521; }
canvas { display:block; width:100%; height:100%; }
#dropHint { position:absolute; inset:0; display:grid; place-items:center; color:#736b62; font-size:14px; pointer-events:none; }
audio { width:100%; margin-top:12px; filter:sepia(.6) saturate(.7); }
.readout { display:flex; justify-content:space-between; color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px; margin-top:4px; }
.look { display:flex; flex-direction:column; gap:16px; }
.look .section-heading { width:100%; }
input[type="range"] { accent-color:var(--accent); padding:0; }
.check { display:flex; gap:9px; align-items:center; color:var(--ink); font-size:13px; }
.timeline-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; max-height:590px; }
table { width:100%; border-collapse:collapse; min-width:950px; font-size:13px; }
th { position:sticky; top:0; z-index:2; background:#1e1a17; color:#cbbfb2; text-align:left; padding:12px; }
td { padding:9px 12px; border-top:1px solid #282421; vertical-align:middle; }
tr:hover td { background:#181512; }
td input, td select { color:var(--ink); background:#090909; border:1px solid #37312c; border-radius:7px; padding:7px; }
td input[type="number"] { width:84px; }
td input[type="text"] { width:100%; min-width:320px; }
.empty { color:var(--muted); padding:50px 20px; text-align:center; border:1px dashed #3b352f; border-radius:12px; }
progress { width:100%; height:12px; margin-top:16px; accent-color:var(--accent); }
footer { color:#6f675f; text-align:center; padding:30px; font-size:12px; }
@media (max-width: 1000px) { .setup-grid { grid-template-columns:repeat(2,1fr); } .workspace { grid-template-columns:1fr; } .look { display:grid; grid-template-columns:repeat(2,1fr); } .look .section-heading { grid-column:1/-1; } }
@media (max-width: 650px) { .topbar { align-items:flex-start; gap:14px; flex-direction:column; } .setup-grid,.export-grid,.look { grid-template-columns:1fr; } .section-heading { flex-direction:column; gap:9px; } .top-actions { width:100%; } .top-actions > * { flex:1; text-align:center; } }