:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172846; background: #f2f6fb; }
* { box-sizing: border-box; }
body { margin: 0; }
.preview-note { background: #eaf4ff; border-bottom: 1px solid #bbd8f6; color: #174a83; text-align: center; padding: 10px 18px; font-size: .9rem; }
.site-header { max-width: 1000px; margin: auto; padding: 24px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
a { color: #1257ae; }
.brand { color: #173d78; text-decoration: none; font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; }
.brand-dot { color: #2684ec; }
.sister { font-size: .9rem; text-decoration: none; }
main { max-width: 780px; margin: 34px auto 0; padding: 0 20px; }
.intro { margin-bottom: 32px; }
.eyebrow { color: #376ba7; font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: -.05em; margin: 10px 0; }
.lead { font-size: 1.22rem; margin: 0 0 14px; }
.scope { max-width: 620px; color: #52647e; line-height: 1.55; }
.card { background: white; border: 1px solid #dce6f1; border-radius: 16px; box-shadow: 0 7px 24px #1f46700a; margin: 16px 0; padding: 28px; }
.step { font-size: .8rem; font-weight: 800; color: #2475cf; letter-spacing: .06em; }
.step span { margin-left: 8px; color: #62758d; font-weight: 600; letter-spacing: 0; }
h2 { font-size: 1.45rem; margin: 12px 0 8px; }
h3 { font-size: 1.05rem; margin-top: 24px; }
p { line-height: 1.5; }
.card > p { color: #52647e; margin-top: 0; }
.address-row, .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.address-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: #f3f7fc; border: 1px solid #dce7f4; border-radius: 8px; padding: 14px; font-size: .95rem; }
button { border: 0; border-radius: 8px; background: #1469c5; color: white; padding: 13px 16px; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #0752a4; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid #f3ae29; outline-offset: 3px; }
.small { font-size: .86rem; color: #60728a; margin-top: 12px; }
dl { margin: 20px 0; }
dl > div { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 10px; border-bottom: 1px solid #ebeff4; padding: 10px 0; }
dt { color: #5a6a7e; }
dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f3f7fc; border-radius: 8px; padding: 14px; font-size: .85rem; }
.new-test { padding: 12px 4px; }
footer { max-width: 780px; margin: 40px auto; padding: 0 20px 20px; color: #60728a; font-size: .88rem; }
@media (max-width: 560px) { .site-header { padding: 18px 16px; } main { margin-top: 18px; padding: 0 14px; } .card { padding: 20px; } .address-row { align-items: stretch; } .address-row code, .address-row button { width: 100%; } dl > div { grid-template-columns: 1fr; gap: 3px; } }