.gateway-scene { --gateway-progress:#3498ff;position:relative;isolation:isolate;min-height:100dvh;background:var(--theme-app,#060709);color:var(--theme-text-primary,#f4f5f8); }
:root[data-theme=grey] .gateway-scene { --gateway-progress:#8acbff; }
:root[data-theme=white] .gateway-scene { --gateway-progress:#0067dd; }
body:has(.gateway-scene) { min-width:0; }
.gateway-flow-slot { position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none; }
.gateway-flow-canvas { width:100%;height:100%;display:block; }
.gateway-scene::before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 40%,rgba(var(--theme-app-rgb,0,0,0),.1)); }
.gateway-scene .entry-header { position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;min-height:32px;gap:16px; }
.gateway-scene .brand { font-size:22px;letter-spacing:.22em;font-weight:800;color:var(--theme-text-primary); }
.gateway-scene>.entry-header .brand { font-size:22px;letter-spacing:.22em; }
.gateway-scene .gateway-home-link { display:inline-flex;align-items:center;min-height:40px;padding:7px 10px;margin:-7px -10px;border-radius:10px;text-decoration:none;cursor:pointer;-webkit-app-region:no-drag;transition:background 180ms ease,box-shadow 180ms ease,transform 140ms ease; }
.gateway-scene .gateway-home-link:hover { background:color-mix(in srgb,var(--theme-surface-hover,#23242a) 65%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-border-subtle,#44444c) 50%,transparent); }
.gateway-scene .gateway-home-link:active { transform:scale(.97); }
.gateway-scene .invite-room-code { font-size:12px;color:var(--theme-text-secondary);padding:8px 12px;border:1px solid color-mix(in srgb,var(--theme-border-subtle) 65%,transparent);border-radius:30px; }
.gateway-scene .gateway-kicker { display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--theme-text-secondary); }
.gateway-scene .gateway-kicker i { width:5px;height:5px;border-radius:50%;background:var(--gateway-progress); }
.gateway-scene .gateway-card {
  border:1px solid color-mix(in srgb,var(--theme-border-subtle,#44444c) 72%,transparent);border-radius:26px;
  background:linear-gradient(150deg,rgba(var(--theme-surface-elevated-rgb,16,17,20),.82),rgba(var(--theme-app-rgb,6,7,9),.78));
  box-shadow:0 24px 80px rgba(var(--theme-shadow-rgb,0,0,0),.18),inset 0 1px rgba(var(--theme-highlight-rgb,255,255,255),.035);
  animation:gateway-enter 320ms cubic-bezier(.2,.75,.3,1) both;
}
.gateway-scene .gateway-symbol { display:grid;place-items:center;position:relative;width:58px;height:58px;margin:0 auto;color:var(--theme-text-primary);background:var(--theme-surface-card);border:1px solid var(--theme-border-subtle);border-radius:19px;box-shadow:0 0 0 7px rgba(var(--theme-text-primary-rgb,244,245,248),.025); }
.gateway-scene .gateway-symbol svg { width:25px;height:25px; }
.gateway-scene .gateway-symbol::after { content:'';position:absolute;inset:-8px;border:1px solid rgba(var(--theme-text-primary-rgb,244,245,248),.09);border-radius:25px;animation:gateway-breathe 2600ms ease-in-out infinite; }
.gateway-scene :is(button,a.button) { -webkit-app-region:no-drag;transition:background 180ms ease,border-color 180ms ease,color 180ms ease,box-shadow 180ms ease,transform 140ms cubic-bezier(.22,.8,.25,1); }
.gateway-scene :is(button,a.button):active { transform:scale(.98); }
.gateway-scene :is(button,a,input):focus-visible { outline:2px solid var(--theme-focus,#3498ff);outline-offset:3px; }
.gateway-scene .gateway-primary { display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border-radius:14px;font-size:13px;font-weight:700; }
.gateway-scene .gateway-primary svg { width:17px;height:17px;transition:transform 180ms ease; }
.gateway-scene .gateway-primary:hover svg { transform:translateX(3px); }
.gateway-scene .gateway-primary:hover { box-shadow:0 5px 20px rgba(var(--theme-shadow-rgb,0,0,0),.2); }
.gateway-scene .transition-footer { color:var(--theme-text-muted);font-size:11px;line-height:1.5;gap:16px; }
/* 1–3: actual event-gated progress; decorative movement never marks completion. */
.gateway-scene.transition-shell { display:flex;flex-direction:column;justify-content:center;align-items:center;padding:96px 24px; }
.gateway-scene.transition-shell>.entry-header { position:absolute;top:28px;left:32px;right:32px; }
.gateway-scene .transition-center { width:min(510px,100%);padding:36px 28px; }
.gateway-scene .transition-wordmark { margin:18px 0 0;font-size:39px;font-weight:800;letter-spacing:.24em;text-indent:.24em; }
.gateway-scene .transition-center h1 { margin:25px 0 9px;font-size:27px;line-height:1.25;letter-spacing:-.025em;font-weight:700; }
.gateway-scene.transition-boot .transition-center h1 { font-size:23px;margin-top:20px; }
.gateway-scene .transition-center p { margin:0;font-size:13px;line-height:1.6;color:var(--theme-text-secondary); }
.gateway-scene .transition-steps { width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:34px 0 0;padding:0; }
.gateway-scene .transition-steps li { min-width:0;gap:10px;font-size:10px;line-height:1.4;color:var(--theme-text-muted); }
.gateway-scene .transition-steps li>svg { position:relative;z-index:1;width:38px;height:38px;padding:10px;box-sizing:border-box;background:var(--theme-surface-card);border:1px solid var(--theme-border-subtle);border-radius:50%;color:inherit;transition:border-color 200ms,background 200ms; }
.gateway-scene .transition-steps li+li::before { top:18px;left:calc(-50% + 24px);right:auto;width:calc(100% - 48px);height:1px;box-shadow:none;border-radius:2px;animation:none;background:linear-gradient(to right,var(--gateway-progress) 0 var(--gateway-step-fill,0%),var(--theme-border-subtle) var(--gateway-step-fill,0%) 100%); }
.gateway-scene .transition-steps li+li::after { display:none; }
.gateway-scene .transition-center { transform:none; }
.gateway-scene .transition-steps li:nth-child(2) { --gateway-step-fill:calc(var(--transition-first,0)*100%); }
.gateway-scene .transition-steps li:nth-child(3) { --gateway-step-fill:calc(var(--transition-second,0)*100%); }
.gateway-scene .transition-steps li:is(.is-active,.is-complete) { color:var(--theme-text-primary); }
.gateway-scene .transition-steps li:is(.is-active,.is-complete)>svg { color:var(--gateway-progress);border-color:color-mix(in srgb,var(--gateway-progress) 75%,transparent);filter:none; }
.gateway-scene .transition-steps li.is-active>svg { box-shadow:0 0 0 4px color-mix(in srgb,var(--gateway-progress) 8%,transparent);animation:gateway-breathe 1800ms ease-in-out infinite; }
.gateway-scene.transition-shell>.transition-footer { bottom:26px;left:32px;right:32px;justify-content:space-between; }
/* 4–5: a focused invitation with existing account/authentication/guest controls. */
.gateway-scene.invite-shell { display:flex;flex-direction:column;gap:24px;padding:28px 32px; }
.gateway-scene .invite-content { flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;width:min(490px,100%);padding:20px 0; }
.gateway-scene .invite-copy { display:grid;gap:9px;text-align:center;justify-items:center; }
.gateway-scene .invite-copy h1 { max-width:none;font-size:29px;line-height:1.2;letter-spacing:-.03em; }
.gateway-scene .invite-copy p { font-size:13px;line-height:1.6;max-width:390px; }
.gateway-scene .invite-kicker { font-size:10px;letter-spacing:.12em;color:var(--theme-text-muted); }
.gateway-scene .invite-panel { width:100%;padding:28px;gap:14px; }
.gateway-scene .invite-signal { justify-self:center;margin:0 0 4px;width:58px;height:58px; }
.gateway-scene .invite-panel h2 { font-size:24px;line-height:1.25;letter-spacing:-.03em; }
.gateway-scene .invite-panel>p { font-size:12px;color:var(--theme-text-secondary);margin:0 0 3px; }
.gateway-scene .invite-room-state { display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;min-height:42px;border:1px solid var(--theme-border-subtle);border-radius:13px;background:var(--theme-surface-card);color:var(--theme-text-secondary); }
.gateway-scene .invite-room-state>svg { width:15px;height:15px;color:inherit; }
.gateway-scene .invite-room-state:hover { border-color:var(--theme-border-strong);background:var(--theme-surface-hover); }
.gateway-scene .invite-room-state .invite-people-chevron { display:grid;place-items:center;width:14px;height:14px;margin-left:auto;transition:transform 180ms; }
.gateway-scene .invite-people-chevron svg { width:14px;height:14px; }
.gateway-scene .invite-room-state[aria-expanded=true] .invite-people-chevron { transform:rotate(180deg); }
.gateway-scene .invite-room-state-button { padding:8px 12px; }
.gateway-scene .invite-people-avatars { display:flex;flex-shrink:0;margin-right:3px; }
.gateway-scene .invite-people-avatars .avatar { width:23px;height:23px;flex-basis:23px;font-size:8px;border:2px solid var(--theme-surface-card);margin-right:-6px; }
.gateway-scene .invite-account { min-height:48px;padding:9px 0;border-radius:0;background:transparent;border:0;font-size:12px;display:flex;gap:11px;align-items:center; }
.gateway-scene .invite-account .avatar { width:34px;height:34px;flex-basis:34px; }
.gateway-scene .invite-privacy { font-size:11px;color:var(--theme-text-muted);margin:2px 0 0;gap:7px; }
.gateway-scene .invite-privacy>svg { width:14px;height:14px; }
.gateway-scene .invite-name-form { margin:0;gap:10px; }
.gateway-scene .invite-name-form input:not([type=hidden]),.gateway-scene .invite-auth-form input { min-height:44px;border-radius:12px; }
.gateway-scene .invite-actions { gap:10px; }
.gateway-scene .invite-actions p { font-size:12px; }
.gateway-scene .invite-participant-popover { padding:12px;border-radius:14px;font-size:12px;animation:gateway-enter 200ms ease-out; }
.gateway-scene .invite-participant-popover header button { width:27px;height:27px;display:grid;place-items:center;border-radius:50%; }
.gateway-scene .invite-participant-popover header button svg { width:15px;height:15px; }
.gateway-scene .invite-participant-popover li { padding:6px 2px; }
.gateway-scene .invite-participant-popover li .avatar { width:27px;height:27px;flex-basis:27px; }
/* 6: no fake ETA or progress; the room's approval remains the only entry gate. */
.gateway-scene.approval-screen { padding:28px 32px;gap:24px; }
.gateway-scene.approval-screen>.entry-header>span { border:1px solid var(--theme-border-subtle);padding:8px 12px;font-size:12px; }
.gateway-scene.approval-screen main { padding:22px 0;gap:16px; }
.gateway-scene .approval-card { width:min(480px,100%);padding:30px;text-align:center; }
.gateway-scene .approval-card .gateway-kicker { margin-top:23px; }
.gateway-scene .approval-card h1 { margin:11px 0;font-size:26px;line-height:1.25;letter-spacing:-.03em; }
.gateway-scene .approval-card p { margin:0;font-size:13px;line-height:1.7; }
.gateway-scene .approval-name { gap:12px;border:0;border-top:1px solid var(--theme-border-subtle);border-radius:0;padding:18px 0 0;margin-top:22px; }
.gateway-scene .approval-name>svg { width:30px;height:30px; }
.gateway-scene .approval-name .avatar { width:36px;height:36px;flex-basis:36px; }
.gateway-scene .approval-name small { font-size:11px;margin-bottom:4px; }
.gateway-scene .approval-name strong { font-size:13px; }
.gateway-scene #cancel-room-request { width:100%;min-width:0;min-height:44px;margin-top:20px;border:1px solid var(--theme-border-subtle);border-radius:13px;color:var(--theme-text-secondary);background:var(--theme-surface-card);font-size:12px; }
.gateway-scene #cancel-room-request:hover { border-color:var(--theme-danger);color:var(--theme-danger-text);background:var(--theme-danger-surface); }
.gateway-scene .approval-next { display:flex;justify-content:center;align-items:center;gap:7px;color:var(--theme-text-muted);font-size:11px;line-height:1.5;text-align:center; }
.gateway-scene .approval-next svg { width:14px;height:14px;flex:none; }
.gateway-scene.approval-screen>footer { width:min(800px,100%);gap:25px; }
.gateway-scene.approval-screen>footer>div { gap:10px; }
.gateway-scene.approval-screen>footer strong { font-size:11px;font-weight:600; }
.gateway-scene.approval-screen>footer p { margin:5px 0 0;font-size:10px; }
.gateway-scene.approval-screen>footer svg,.gateway-scene .approval-info { width:20px;height:20px;flex-basis:20px; }
@keyframes gateway-enter { from { opacity:0;transform:translateY(9px) scale(.988); } to { opacity:1;transform:none; } }
@keyframes gateway-breathe { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@media(max-width:600px) {
  .gateway-scene.invite-shell,.gateway-scene.approval-screen { padding:18px 16px;gap:18px; }
  .gateway-scene.transition-shell { padding:90px 16px; }
  .gateway-scene.transition-shell>.entry-header { top:22px;left:18px;right:18px; }
  .gateway-scene .transition-center { padding:30px 20px; }
  .gateway-scene .transition-center h1 { font-size:23px; }
  .gateway-scene .transition-wordmark { font-size:32px; }
  .gateway-scene .transition-steps { margin-top:28px; }
  .gateway-scene .transition-steps li { font-size:9px; }
  .gateway-scene .invite-content { padding:16px 0;gap:17px; }
  .gateway-scene .invite-copy h1 { font-size:25px; }
  .gateway-scene .invite-panel,.gateway-scene .approval-card { padding:24px 20px; }
  .gateway-scene.approval-screen>footer { flex-direction:column;gap:14px;max-width:480px; }
  .gateway-scene.approval-screen>footer>div { align-items:center; }
  .gateway-scene.approval-screen>footer p { font-size:11px; }
  .gateway-scene.approval-screen>footer strong { font-size:12px; }
  .gateway-scene .transition-footer { font-size:10px; }
}
@media(max-height:720px) and (min-width:601px) {
  .gateway-scene.invite-shell,.gateway-scene.approval-screen { padding-block:18px;gap:10px; }
  .gateway-scene .invite-content { gap:12px;padding:10px 0; }
  .gateway-scene .invite-panel { padding:20px;gap:10px; }
  .gateway-scene .invite-signal { width:46px;height:46px; }
  .gateway-scene .approval-card { padding:23px; }
}
@media(prefers-reduced-motion:reduce) {
  .gateway-scene *,.gateway-scene *::after,.gateway-scene *::before { animation:none!important;transition:none!important; }
  .gateway-scene :is(button,a.button,.gateway-home-link):active,.gateway-scene .gateway-primary:hover svg { transform:none; }
}