/* dot.css — the dot form (/dot) and its result page. */
.dot-col{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.dot-col h1{font-size:clamp(34px,5vw,48px)}
.dot-col .lead{color:var(--muted);font-size:17px;margin-top:-6px}
.dot-hello{display:flex;align-items:center;gap:14px;font-size:16px}
.dot-hello svg{width:44px;height:44px;flex:none}
.dot-hello b{font-weight:500}
.dot-form .field:last-of-type{margin-bottom:22px}
.dot-form input[aria-invalid=true],.dot-form textarea[aria-invalid=true]{border-color:var(--down);box-shadow:0 0 0 3px color-mix(in srgb,var(--down) 14%,transparent)}
.dot-after{text-align:center;font-size:14px;color:var(--muted);margin-top:12px}
.dot-preview{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);margin-top:4px}
.dot-preview img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.dot-facts{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--muted)}
.dot-facts b{color:var(--ink);font-weight:500}
.dot-result-mark svg{width:96px;height:96px}
.dot-links{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0 0 18px;font-size:15px}
.dot-links dt{color:var(--muted)}
.dot-links dd{margin:0;overflow-wrap:anywhere}
@media (max-width:640px){ .dot-links{grid-template-columns:1fr;gap:2px 0} .dot-links dd{margin-bottom:10px} }