:root { color-scheme: dark; font: 16px/1.55 "Segoe UI", sans-serif; background: #101821; color: #eff7f8; }
body { margin: 0; padding: 7vh 24px; }
main { max-width: 810px; margin: auto; padding: 34px; border: 1px solid #354956; border-radius: 16px; background: #182530; }
.eyebrow { font-size: 12px; letter-spacing: .15em; color: #80dec5; margin: 0 0 8px; }
h1 { font-size: clamp(22px,4vw,32px); margin: 0 0 16px; }
dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; }
dt, .label, .hint { color: #b6c9d4; } dd { margin: 0; overflow-wrap: anywhere; }
#token { font: bold clamp(18px,3vw,26px)/1.7 Consolas, monospace; overflow-wrap: anywhere; padding: 18px; background: #101821; border-radius: 8px; border-left: 4px solid #80dec5; }
#ready { color: #80dec5; font-weight: 700; letter-spacing: .07em; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 18px; }
button { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 7px; padding: 10px 16px; color: #0c2924; background: #80dec5; cursor: pointer; }
button.secondary { background: #263b49; border-color: #59727e; color: #eff7f8; }
button:disabled { opacity: .45; cursor: default; } :focus-visible { outline: 3px solid #c9f4eb; outline-offset: 3px; }
textarea, pre { box-sizing: border-box; width: 100%; padding: 14px; background: #101821; color: #eff7f8; border: 1px solid #59727e; border-radius: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
textarea { resize: vertical; } .hint { font-size: 13px; margin-top: 26px; }
[hidden] { display: none !important; }
a { color: #80dec5; }
@media (max-width: 560px) { body { padding: 16px; } main { padding: 20px; } dl { grid-template-columns: 1fr; gap: 2px; } dd { margin-bottom: 10px; } }