:root { color-scheme: light dark; font-family: system-ui, sans-serif; background: #f8fafc; color: #172033; }
* { box-sizing: border-box; }
body { max-width: 610px; margin: clamp(48px, 15vh, 140px) auto; padding: 0 28px; line-height: 1.65; }
h1 { margin: 0 0 18px; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.04em; line-height: 1.15; }
.description { margin: 0 0 28px; font-size: 1.12rem; color: #526078; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 20px; border: 0; border-radius: 9px; background: #245edb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #1e4fb9; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #7ba6ff; outline-offset: 4px; }
button svg { flex-shrink: 0; }
.hint { margin: 12px 0 0; font-size: .9rem; color: #64748b; }
#copy-status { min-height: 1.5em; margin: 12px 0; font-size: .9rem; }
textarea { display: block; width: 100%; height: 240px; margin-top: 10px; padding: 12px; border: 1px solid #94a3b8; border-radius: 8px; font: .85rem/1.5 ui-monospace, monospace; resize: vertical; }
a { color: #245edb; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  :root { background: #101722; color: #f1f5f9; }
  .description { color: #c0cad9; }
  .hint { color: #99a8be; }
  a { color: #9abbff; }
}