:root { color-scheme: dark; font-family: "IBM Plex Sans", sans-serif; background: var(--cs-bg); color: var(--cs-text); }
:root[data-controller-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--cs-bg); }
.invite-header { padding: 25px clamp(20px, 5vw, 48px); border-bottom: 1px solid var(--cs-divider); }
.invite-header a { display: inline-block; min-height: 44px; padding-top: 13px; }
.invite-main { width: min(100%, 600px); margin: clamp(38px, 8vw, 90px) auto; padding: 0 22px 80px; }
.invite-card { padding: clamp(24px, 5vw, 42px); border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); }
.invite-eyebrow { margin: 0 0 10px; color: var(--cs-text-muted); font: 500 11px/1.4 "IBM Plex Mono", monospace; letter-spacing: .08em; }
h1 { margin: 0 0 16px; font-size: clamp(28px, 7vw, 38px); line-height: 1.12; letter-spacing: -.03em; }
.invite-card p:not(.invite-eyebrow, .invite-status) { color: var(--cs-text-2); line-height: 1.55; }
.invite-card strong { color: var(--cs-text); overflow-wrap: anywhere; }
form { display: grid; gap: 18px; margin-top: 28px; }
label { display: grid; gap: 8px; color: var(--cs-text-muted); font: 500 11px/1.4 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
input { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface-raised); color: var(--cs-text); caret-color: var(--cs-accent); font: 400 16px/1.3 "IBM Plex Sans", sans-serif; letter-spacing: 0; text-transform: none; }
input:focus { outline: none; border-color: var(--cs-text-faint); }
#invite-code { font-family: "IBM Plex Mono", monospace; }
button { min-height: 48px; padding: 11px 16px; border: 1px solid var(--cs-accent-fill); border-radius: 8px; background: var(--cs-accent-fill); color: var(--cs-on-accent); font: 600 14px/1.25 "IBM Plex Sans", sans-serif; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cs-accent); outline-offset: 3px; }
#invite-google, #invite-development { display: block; width: 100%; margin-top: 22px; }
#invite-development, .invite-secondary { border-color: var(--cs-border-strong); background: transparent; color: var(--cs-text-2); }
.invite-note, .invite-status { color: var(--cs-text-muted); font-size: 13px; line-height: 1.5; }
.invite-status:empty { display: none; }
.invite-links { display: grid; gap: 4px; margin-top: 24px; }
.invite-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-accent); text-decoration: underline; text-underline-offset: 3px; }