:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #1a1a2e; color: #e0e0e0; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(440px, calc(100% - 40px)); padding: 32px 0; }
h1 { color: #e94560; margin-top: 0; }
p { line-height: 1.55; }
textarea { width: 100%; box-sizing: border-box; background: #24243b; color: inherit; border: 1px solid #66667d; border-radius: 6px; padding: 10px; font: inherit; }
textarea { margin-top: 12px; font: 12px/1.6 monospace; resize: vertical; }
button { width: 100%; padding: 14px; border: 0; border-radius: 8px; background: #e94560; color: white; font: 600 1rem system-ui, sans-serif; cursor: pointer; }
button:hover { background: #d03550; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #ffb7c3; outline-offset: 4px; }
#status { min-height: 1.55em; }
summary { cursor: pointer; }
.links, summary { font-size: .9rem; color: #b5b5c7; }
a { color: #d8d8ea; }