.br-page { min-width:0 }
.br-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line) }
.br-main { max-width: 48rem; padding: 2.5rem 1.5rem 4rem; margin: auto; overflow-wrap: anywhere }
.br-main h1 { margin:1.5rem 0 1rem }
.br-intro { font-size: var(--t-prose); line-height: var(--leading-prose); color: var(--ink-2); margin: 0 0 1.5rem }
.br-context { padding: 1rem; background: var(--panel-2); border:0; border-radius:.75rem }
.br-context p { margin: .25rem 0 0 }
.br-main button, .br-main input, .br-main textarea, .br-main select { font: inherit; color: var(--ink) }
.br-main button, .br-primary { display: inline-flex; justify-content: center; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--line-2); border-radius: .45rem; background: var(--panel); cursor: pointer; text-decoration: none }
.br-main button.br-primary, .br-primary { background: var(--accent); color: var(--panel); border-color: var(--accent); font-weight: 500 }
.br-main :is(button, input, textarea, select, a):focus-visible { outline: 2px solid var(--new); outline-offset: 3px }
.br-main button:disabled { opacity: .6; cursor: wait }
.br-main fieldset { display: grid; min-width: 0; padding: 0; margin: 0; border: 0 }
.br-main label { margin: 1.25rem 0 .4rem; font-weight: 500 }
.br-main label span { font-weight: 400; color: var(--ink-2) }
.br-main input, .br-main textarea, .br-main select { width: 100%; min-width: 0; max-width: 100%; padding: .65rem .75rem; border: 1px solid var(--line-2); border-radius: .4rem; background: var(--panel) }
.br-main textarea { resize: vertical; line-height: 1.5 }
.br-main select { text-overflow: ellipsis }
.br-main [hidden] { display: none }
.br-main [role="status"] { color: var(--ink-2) }
.br-main [role="status"][data-error="true"] { color: var(--crit) }
.br-audience { color: var(--ink-2); margin: 1.5rem 0 1rem; padding-top: 1rem; border-top:0 }
.br-actions { display: flex; align-items: center; gap: 1rem }
.br-actions span { color: var(--ink-2); font-size: var(--t-body-2) }
.br-settings { margin-top: 2rem; font-size: var(--t-body-2) }
.br-success { padding: 1.5rem 0 }
.br-success h2 { font-size: 1.5rem }
@media (max-width: 440px) {
  .br-header { padding: .75rem 1rem }
  .br-main { padding: 1.5rem 1rem 3rem }
  .br-actions { align-items: flex-start; flex-direction: column }
}