:root {
  color-scheme: light dark;
  --identity-bg: var(--color-background, #f5f7fb);
  --identity-surface: var(--color-surface, #fff);
  --identity-text: var(--color-text, #172033);
  --identity-muted: var(--color-text-muted, #59657a);
  --identity-border: var(--color-border, #cad2df);
  --identity-accent: var(--color-primary, #4c3ccf);
  --identity-danger: var(--color-danger, #a51d31);
  --identity-attention: #9a5b08;
  --identity-success: var(--color-success, #18744a);
  --identity-focus: #f59e0b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-block-size: 100vh; background: var(--identity-bg); color: var(--identity-text); font: 1rem/1.6 system-ui, sans-serif; }
button, input, select { font: inherit; }
button, input, select { min-block-size: 2.75rem; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--identity-focus); outline-offset: 3px; }
.identity-skip { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 10; translate: 0 -200%; padding: .6rem 1rem; border-radius: .5rem; background: var(--identity-surface); color: var(--identity-text); }
.identity-skip:focus { translate: 0; }
.identity-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 5vw, 4rem); border-block-end: 1px solid var(--identity-border); background: var(--identity-surface); }
.identity-eyebrow, .identity-product { margin: 0; }
.identity-eyebrow { color: var(--identity-accent); font-weight: 800; letter-spacing: .14em; }
.identity-product { color: var(--identity-muted); }
.identity-locales { display: flex; gap: .35rem; }
.identity-locales button { min-inline-size: 2.75rem; border: 1px solid var(--identity-border); border-radius: .65rem; background: transparent; color: var(--identity-text); cursor: pointer; }
.identity-locales button[aria-pressed="true"] { border-color: var(--identity-accent); background: var(--identity-accent); color: #fff; }
.identity-main { inline-size: min(100% - 2rem, 44rem); margin-inline: auto; padding-block: clamp(1.25rem, 5vw, 4rem); }
.identity-card { overflow: hidden; padding: clamp(1rem, 4vw, 2.5rem); border: 1px solid var(--identity-border); border-radius: 1rem; background: var(--identity-surface); box-shadow: 0 .75rem 2.5rem rgb(20 30 60 / .08); }
.identity-progress { block-size: .35rem; margin: calc(clamp(1rem, 4vw, 2.5rem) * -1) calc(clamp(1rem, 4vw, 2.5rem) * -1) 1.75rem; background: var(--identity-border); }
.identity-progress span { display: block; block-size: 100%; inline-size: var(--identity-progress, 8%); background: var(--identity-accent); transition: inline-size .2s ease; }
.identity-kicker { margin: 0 0 .3rem; color: var(--identity-accent); font-size: .875rem; font-weight: 700; }
h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.25; }
.identity-summary { margin: .75rem 0 1.25rem; color: var(--identity-muted); }
.identity-alert { margin-block: 1rem; padding: .8rem 1rem; border-inline-start: .3rem solid var(--identity-danger); background: color-mix(in srgb, var(--identity-danger) 9%, var(--identity-surface)); }
.identity-alert[data-tone="attention"] { border-color: var(--identity-attention); background: color-mix(in srgb, var(--identity-attention) 9%, var(--identity-surface)); }
.identity-alert[data-tone="success"] { border-color: var(--identity-success); background: color-mix(in srgb, var(--identity-success) 9%, var(--identity-surface)); }
.identity-live { min-block-size: 1.5rem; margin: 0; color: var(--identity-muted); }
.identity-workspace, .identity-form, .identity-actions, .identity-factor-list { display: grid; gap: 1rem; }
.identity-workspace { margin-block-start: 1rem; }
.identity-field { display: grid; gap: .35rem; }
.identity-field label, .identity-factor-title { font-weight: 700; }
.identity-field input, .identity-field select { inline-size: 100%; padding: .65rem .75rem; border: 1px solid var(--identity-border); border-radius: .6rem; background: var(--identity-bg); color: var(--identity-text); }
.identity-password-wrap { position: relative; display: flex; align-items: stretch; }
.identity-password-wrap input { padding-inline-end: 6.5rem; }
.identity-password-toggle { position: absolute; inset-block: .25rem; inset-inline-end: .25rem; min-block-size: auto; border: 0; border-radius: .45rem; padding-inline: .75rem; background: transparent; color: var(--identity-accent); font-weight: 700; cursor: pointer; }
.identity-help, .identity-strength, .identity-countdown { margin: 0; color: var(--identity-muted); font-size: .9rem; }
.identity-strength { padding: .65rem .8rem; border-inline-start: .25rem solid var(--identity-attention); background: color-mix(in srgb, var(--identity-attention) 8%, var(--identity-surface)); }
.identity-factor { display: grid; gap: .25rem; text-align: start; min-block-size: 4rem; padding: .75rem 1rem; border: 1px solid var(--identity-border); border-radius: .7rem; background: var(--identity-surface); color: var(--identity-text); cursor: pointer; }
.identity-factor--strong { border-color: var(--identity-accent); }
.identity-factor--sms { border-style: dashed; }
.identity-factor__hint { color: var(--identity-muted); font-size: .85rem; font-weight: 400; }
.identity-button { min-block-size: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--identity-border); border-radius: .65rem; background: var(--identity-surface); color: var(--identity-text); font-weight: 700; cursor: pointer; }
.identity-button--primary { border-color: var(--identity-accent); background: var(--identity-accent); color: #fff; }
.identity-button:disabled, .identity-button[aria-busy="true"] { cursor: wait; opacity: .62; }
.identity-secret { display: block; max-inline-size: 100%; padding: .65rem .75rem; border: 1px solid var(--identity-border); border-radius: .55rem; background: var(--identity-bg); color: var(--identity-text); direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.identity-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.identity-recovery-codes li, .identity-recovery-codes bdi { min-inline-size: 0; }
.identity-recovery-codes .identity-secret { inline-size: 100%; text-align: center; }
@media (min-width: 42rem) { .identity-actions, .identity-factor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .identity-actions .identity-button:only-child { grid-column: 1 / -1; } }
@media (max-width: 24rem) { .identity-header { align-items: flex-start; } .identity-main { inline-size: min(100% - 1rem, 44rem); } .identity-recovery-codes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .identity-progress span { background: Highlight; } }