:root {
  --bg: #0a0c10;
  --surface: #12151c;
  --border: #232834;
  --ink: #eef1f6;
  --ink-soft: #8b93a5;
  --accent: #d19bff;
  --accent-bright: #e5c2ff;
  --on-accent: #1a0630;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.topbar { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); }
.wordmark { font-weight: 800; letter-spacing: 0.08em; color: var(--accent-bright); display: block; }
.tagline { font-size: 0.85rem; color: var(--ink-soft); }

main { max-width: 900px; margin: 0 auto; padding: 1.5rem; }

.hint { color: var(--ink-soft); font-size: 0.9rem; }

.shots-grid { display: grid; gap: 0.6rem; margin: 1rem 0 2rem; }
.shot-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; }
.shot-card .n { color: var(--accent-bright); font-weight: 700; margin-right: 0.5rem; }
.shot-card .dur { color: var(--ink-soft); font-size: 0.8rem; }

.btn { background: var(--accent); color: var(--on-accent); border: none; padding: 0.8rem 1.4rem; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 1rem; }
.btn:hover { background: var(--accent-bright); }
.btn:disabled { opacity: 0.6; cursor: default; }

.log { margin-top: 1rem; font-family: monospace; font-size: 0.85rem; color: var(--ink-soft); white-space: pre-wrap; }
.log .err { color: #ff5c6a; }

#result-video { width: 100%; max-width: 400px; margin-top: 1.5rem; border-radius: 10px; display: block; }