@layer auth {
    .auth-shell { min-block-size: 100dvh; display: grid; grid-template-columns: minmax(var(--auth-story-min), var(--auth-story-share)) minmax(0, 1fr); font-size: var(--font-size-sm); }
    .auth-shell a { text-underline-offset: var(--space-1); }
    .story { background: var(--color-dark); color: var(--color-on-dark); padding: var(--space-10) var(--space-14); display: flex; flex-direction: column; min-block-size: 100dvh; }
    .brand { display: inline-flex; align-self: flex-start; text-decoration: none; }
    .brand img { block-size: var(--logo-height); inline-size: auto; max-inline-size: 100%; }
    .story-content { margin-block: auto; max-inline-size: var(--auth-story-width); padding-block: var(--space-12); }
    .story h1 { font-size: var(--font-size-story); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); font-weight: var(--font-weight-heading); margin-block-end: var(--space-4); }
    .story-intro { color: var(--color-on-dark-muted); font-size: var(--font-size-base); }
    .benefits { list-style: none; padding: var(--space-0); margin-block-start: var(--space-10); display: grid; gap: var(--space-5); }
    .benefits li { display: flex; gap: var(--space-3); align-items: flex-start; }
    .benefits p { color: var(--color-on-dark-muted); }
    .benefit-icon { flex: 0 0 var(--feature-icon-size); block-size: var(--feature-icon-size); border-radius: var(--radius-md); display: grid; place-items: center; color: var(--color-teal); background: var(--color-dark-tile); }
    .benefit-icon svg { inline-size: var(--font-size-lg); block-size: var(--font-size-lg); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .story-footer { color: var(--color-on-dark-muted); }
    .auth-main { position: relative; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; padding: var(--space-32) var(--space-10) var(--space-8); }
    .language { position: absolute; inset-inline-end: var(--space-6); inset-block-start: var(--space-8); display: flex; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
    .language > * { border: var(--space-1) solid var(--color-note); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); color: inherit; text-decoration: none; }
    .language > a { border-color: transparent; background: transparent; font-weight: var(--font-weight-normal); }
    .language > a:hover { text-decoration: underline; }
    .auth-content { inline-size: 100%; max-inline-size: var(--auth-form-width); margin-block: auto var(--space-14); }
    .auth-content h2 { font-size: var(--font-size-auth-title); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); font-weight: var(--font-weight-heading); margin-block-end: var(--space-2); }
    .subtitle { color: var(--color-muted); margin-block-end: var(--space-5); }
    .button { inline-size: 100%; min-block-size: var(--control-height); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; gap: var(--space-3); text-decoration: none; cursor: pointer; }
    .button.passkey { background: var(--color-accent); color: var(--color-on-dark); }
    .button.primary { background: var(--color-dark); color: var(--color-on-dark); }
    .button.secondary { background: var(--color-surface); color: var(--color-ink); border: var(--border-width) solid var(--color-border); }
    .button[hidden] { display: none; }
    .form-actions { display: flex; gap: var(--space-3); }
    .form-actions .button.secondary { inline-size: auto; flex: none; }
    .button:hover { filter: brightness(.94); }
    .button:disabled { cursor: wait; opacity: .65; }
    .button svg { inline-size: var(--icon-size); block-size: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
    .divider { display: flex; gap: var(--space-3); align-items: center; color: var(--color-muted); margin-block: var(--space-5); }
    .divider::before, .divider::after { content: ''; block-size: var(--border-width); flex: 1; background: var(--color-divider); }
    .auth-content form > div > div, .auth-content form > div:not(.field-heading):not(.password-group) { margin-block-end: var(--space-3); }
    .auth-content label { display: block; margin-block-end: var(--space-1); font-weight: var(--font-weight-medium); }
    .auth-content :is(input, select) { border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-md); padding: var(--space-3); inline-size: 100%; min-block-size: var(--control-height); }
    .auth-content :is(input, select):focus-visible { border-color: var(--color-accent); }
    .field-heading { display: flex; justify-content: space-between; align-items: baseline; }
    .password-group { margin-block-end: var(--space-3); }
    .field-help { font-size: var(--font-size-xs); color: var(--color-muted); margin-block: var(--space-2) var(--space-4); }
    .auth-content form ul { padding: var(--space-0); list-style: none; color: var(--color-error); }
    .register-link { margin-block-start: var(--space-5); color: var(--color-muted); }
    .register-link a { font-weight: var(--font-weight-bold); }
    .auth-bottom { max-inline-size: var(--auth-note-width); inline-size: 100%; margin-block-start: auto; }
    .update-note { border-radius: var(--radius-lg); background: var(--color-note); padding: var(--space-3) var(--space-4); color: var(--color-muted); margin-block-end: var(--space-6); }
    .update-note strong { color: var(--color-ink); }
    .auth-bottom footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
    .auth-bottom footer a { color: var(--color-muted); }
    .notice { padding: var(--space-3) var(--space-4); background: var(--color-info-surface); border-inline-start: var(--focus-width) solid currentColor; border-radius: var(--radius-md); margin-block-end: var(--space-4); }
    .notice.error { color: var(--color-error); background: var(--color-error-surface); }
    .notice.error::before { content: '⚠ '; }
    .notice.success { color: var(--color-success); background: var(--color-success-surface); }
    .notice.success::before { content: '✓ '; }
    .qr { text-align: center; background: var(--color-surface); border: var(--border-width) solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); margin-block-end: var(--space-5); }
    .qr img { display: block; margin-inline: auto; max-inline-size: 100%; block-size: auto; }
    .qr code { display: block; overflow-wrap: anywhere; padding: var(--space-3); }
    .qr summary { cursor: pointer; color: var(--color-muted); }
    .recovery-codes { padding: var(--space-4); list-style: none; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); display: grid; gap: var(--space-2); }
    .recovery-help { background: var(--color-note); padding: var(--space-4); margin-block: var(--space-6); border-radius: var(--radius-md); }
    .connect-facts { display: grid; gap: var(--space-2); margin-block: var(--space-0) var(--space-5); padding: var(--space-4); background: var(--color-note); border-radius: var(--radius-md); }
    .connect-facts div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-3); }
    .connect-facts dt { color: var(--color-muted); }
    .connect-facts dd { margin: var(--space-0); overflow-wrap: anywhere; }
    .connect-code code { display: block; padding: var(--space-4); text-align: center; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
    @media (max-width: 30rem) { .connect-facts div { grid-template-columns: 1fr; gap: var(--space-0); } }
    @media (max-width: 64rem) {
        .auth-shell { grid-template-columns: 40% 60%; }
        .story { padding: var(--space-8); }
        .story h1 { font-size: var(--font-size-title); }
        .auth-main { padding-inline: var(--space-8); }
    }
    @media (max-width: 48rem) {
        .auth-shell { display: block; }
        .story { min-block-size: auto; padding: var(--space-6); }
        .story-content, .story-footer { display: none; }
        .auth-main { padding: var(--space-16) var(--space-6) var(--space-8); min-block-size: calc(100dvh - var(--space-20)); }
        .language { inset-block-start: var(--space-3); inset-inline-end: var(--space-5); }
        .auth-content { margin-block: var(--space-3) var(--space-10); }
        .auth-bottom footer { gap: var(--space-4); }
    }
}