#first-run { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--sb-ink, #0f1f1a) 55%, transparent); backdrop-filter: blur(6px); }
#first-run .fr-card { inline-size: min(440px, 100%); padding: 28px 24px; border-radius: 24px; background: var(--sb-sheet, #fff); color: var(--sb-ink, #0f1f1a); text-align: center; display: grid; gap: 14px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
#first-run .fr-logo { margin-inline: auto; border-radius: 16px; }
#first-run h2 { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.3; }
#first-run .fr-lead { margin: 0; color: var(--sb-muted, #5b6b64); font-size: 15px; font-weight: 700; }
#first-run form { display: grid; gap: 8px; text-align: start; }
#first-run label { font-size: 13px; font-weight: 800; }
#first-run input { min-block-size: 46px; padding: 0 14px; border: 1.5px solid var(--sb-line, #d4ddd9); border-radius: 12px; font: inherit; font-size: 15px; background: var(--sb-sunk, #f1f5f3); color: inherit; }
#first-run input:focus { outline: 0; border-color: var(--sb-brand, #0B5E3F); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-brand, #0B5E3F) 18%, transparent); }
#first-run .fr-go { min-block-size: 48px; margin-block-start: 6px; }
#first-run .fr-demo { justify-self: center; padding: 8px 14px; border: 0; background: transparent; color: var(--sb-muted, #5b6b64); font: inherit; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
#first-run .fr-demo:hover { color: var(--sb-ink, #0f1f1a); }
#first-run .fr-note { margin: 0; font-size: 12px; color: var(--sb-muted, #5b6b64); }
#first-run .fr-go { border: 0; border-radius: 12px; background: var(--sb-brand, #0B5E3F); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
#first-run .fr-go:hover { filter: brightness(1.08); } #first-run .fr-go:focus-visible, #first-run .fr-demo:focus-visible { outline: 3px solid var(--sb-brand, #0B5E3F); outline-offset: 3px; }