:root { color: #eef2ea; background: #101310; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 80% 0%, #274318, transparent 30%), #101310; }
main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 13vh 0 72px; }
.eyebrow { color: #b9f457; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 18px 0; font-size: clamp(44px, 8vw, 76px); letter-spacing: -.06em; line-height: .96; }
h1 em { color: #b9f457; font-style: normal; }
.lead, .privacy, .caveat, footer { color: #b7beb2; line-height: 1.75; }
form, .result, .checklist { margin-top: 42px; padding: 24px; border: 1px solid #334033; border-radius: 20px; background: rgba(18, 24, 18, .8); }
label, h2 { display: block; margin: 0 0 12px; font-size: 18px; }
.input-row { display: flex; gap: 10px; }
input { flex: 1; min-width: 0; padding: 15px; color: inherit; background: #0b0e0b; border: 1px solid #455245; border-radius: 12px; font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
button, .explorer { padding: 15px 19px; border: 0; border-radius: 12px; color: #11160d; background: #b9f457; font-weight: 800; cursor: pointer; text-decoration: none; }
button.secondary { color: #eef2ea; background: #263126; border: 1px solid #455245; }
.privacy { margin: 12px 0 0; font-size: 13px; }
.hidden { display: none; }
.result.error { border-color: #cf705f; }.result.warning { border-color: #d5ad58; }.result.success { border-color: #b9f457; }
dl { display: grid; gap: 12px; } dl div { display: grid; gap: 5px; padding-top: 12px; border-top: 1px solid #334033; } dt { color: #aab5a4; font-size: 13px; } dd { margin: 0; overflow-wrap: anywhere; } code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.explorer { display: inline-block; }.checklist li { margin: 12px 0; color: #cdd4c8; line-height: 1.6; }
footer { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 48px; font-size: 13px; }
@media (max-width: 560px) { .input-row { flex-direction: column; } button, .result-actions .explorer { width: 100%; text-align: center; } }