:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111827; color: #edf2f7; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: .25rem; }
h2 { font-size: 1.25rem; }
.eyebrow { color: #93c5fd; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
.card { background: #1f2937; border: 1px solid #374151; border-radius: 14px; padding: 18px; margin-top: 18px; }
.muted { color: #cbd5e1; font-size: .94rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
button, a { min-height: 48px; border-radius: 9px; padding: 10px 15px; font: inherit; font-weight: 650; }
button { border: 0; background: #60a5fa; color: #07111f; cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
a { color: #bfdbfe; display: inline-flex; align-items: center; }
textarea { width: 100%; border: 1px solid #64748b; border-radius: 9px; background: #0f172a; color: #f8fafc; padding: 12px; font: 0.95rem ui-monospace, monospace; line-height: 1.45; resize: vertical; }
.captions { margin-top: 16px; max-height: 280px; overflow: auto; border-top: 1px solid #374151; }
.caption { padding: 10px 0; border-bottom: 1px solid #374151; white-space: pre-wrap; }
.caption strong { color: #93c5fd; }
@media (max-width: 420px) { main { padding-inline: 12px; } .card { padding: 15px; } .actions > * { flex: 1 1 100%; justify-content: center; } }