.br-main { min-height: calc(100vh - 150px); padding-top: 3rem; padding-bottom: 2rem; }
.br-form { max-width: 640px; margin-inline: auto; }
.br-wide { max-width: 1000px; margin-inline: auto; }
.br-intro { margin-bottom: 1.75rem; }
.br-intro h1 { font-size: 1.9rem; letter-spacing: -.045em; margin-bottom: .6rem; }
.br-intro p { color: var(--bs-secondary-color); line-height: 1.6; }
.br-steps { display: flex; gap: 1.25rem; padding: 0; margin: 0 0 2rem; list-style: none; font-size: .8rem; color: var(--bs-secondary-color); }
.br-steps [aria-current="step"] { color: var(--bs-primary-text-emphasis); }
.br-site { transition: border-color .15s; }
.br-site:hover { border-color: var(--bs-primary); }
.br-site h2 { font-size: 1.15rem; }
.br-code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; margin: 0; }
.br-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.br-note { font-size: .85rem; line-height: 1.6; color: var(--bs-secondary-color); }
.br-form .card { margin-bottom: 1.25rem; }
@media (max-width: 575px) { .br-main { padding-top: 1.75rem; } .hd-in { flex-wrap: wrap; row-gap: .8rem; } }