.precision-site {
  --mfa-qr-light: #ffffff;
  --mfa-qr-dark: #111c2a;
}
.precision-site[data-security-size="17"] { --desk-reading-size: 17px; }
.precision-site[data-security-size="21"] { --desk-reading-size: 21px; }
.precision-site[data-security-size="23"] { --desk-reading-size: 23px; }
.security-mast { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px var(--gutter); border-bottom: 1px solid var(--hair); }
.security-label { color: var(--mute); font: 600 var(--t-small)/1.5 var(--font-sans); }
.security-card { width: min(100% - 40px, 600px); margin: 48px auto 72px; }
.security-card h1 { font: 600 var(--t-section)/1.2 var(--font-sans); letter-spacing: -.025em; margin: 10px 0 24px; }
.security-card h2 { font: 600 var(--t-body)/1.5 var(--font-sans); margin: 28px 0 12px; }
.security-card p { margin: 16px 0; line-height: 1.7; }
.security-card form { margin: 24px 0; }
.security-card label { display: block; margin: 16px 0 8px; font-weight: 600; }
.security-card input, .security-card textarea { display: block; width: 100%; max-width: 100%; padding: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--radius); font: 400 var(--t-body)/1.5 var(--font-sans); }
.security-card input:focus-visible, .security-card textarea:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.security-card .btn { margin-top: 18px; white-space: normal; height: auto; min-height: 48px; }
.security-card .security-note { font-size: var(--t-small); color: var(--mute); }
.security-card .security-error { border-left: 3px solid var(--down); padding: 12px 16px; background: var(--raise); color: var(--ink); }
.security-card .security-state { border-left: 3px solid var(--cobalt); padding: 16px 20px; background: var(--raise); }
.security-card details { border-top: 1px solid var(--hair); margin-top: 28px; padding-top: 20px; }
.security-card summary { cursor: pointer; padding-block: 8px; }
.security-card .security-key { font-family: var(--font-data); overflow-wrap: anywhere; }
.owner-mfa-qr { display: block; width: min(100%, 280px); height: auto; margin: 24px 0; }
.security-card textarea[data-mfa-recovery] { min-height: 20em; resize: vertical; font-family: var(--font-data); font-size: var(--t-small); }
.security-card .security-cancel { margin-top: 8px; }
@media (max-width: 480px) {
  .security-mast { align-items: start; }
  .security-mast > .security-label { text-align: right; max-width: 9ch; }
  .security-card { margin-top: 32px; }
  .security-card .btn { width: 100%; }
}