* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #171717; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width: min(860px, calc(100% - 32px)); margin: 48px auto; }
form { display: grid; gap: 12px; margin-bottom: 12px; }
textarea { display: block; width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: inherit; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; outline: none; }
textarea:focus { border-color: #777; }
button { justify-self: end; min-width: 88px; padding: 9px 20px; border: 0; border-radius: 6px; background: #171717; color: #fff; font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
#result.error { color: #c42626; border-color: #e6b1b1; }
.result-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
#copy:disabled { cursor: default; }
@media (max-width: 600px) { main { margin: 24px auto; } }