/* Isolated local Rubik alias: no global font/token or shared component changes. */
@font-face {
  font-family: RayonkaWelcomeRubik;
  src: url("rubik-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: RayonkaWelcomeRubik;
  src: url("rubik-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.rayonka-welcome-v1 {
  --rw-css-ready: 1;
  --rw-surface: var(--surface, #fcfcfd);
  --rw-ink: var(--ink, #1d1d1f);
  --rw-muted: var(--ink-2, #4f4f56);
  --rw-border: var(--border, #e7e7ec);
  --rw-action: var(--action-bg, var(--accent, #0067d8));
  /* The live bright hover blue fails small white-text contrast; use its darker token. */
  --rw-action-hover: var(--accent-press, #0054b3);
  --rw-action-text: var(--ink-inverse, #fff);
  --rw-soft: var(--accent-soft, #e8f2fd);
  --rw-focus: var(--accent-text, var(--accent, #0067d8));
  --rw-shadow: var(--elev-floating, 0 18px 48px -18px rgba(20, 40, 90, .30), 0 6px 18px -12px rgba(20, 24, 40, .22));
  --rw-font: RayonkaWelcomeRubik, Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rw-title: 1.125rem;
  --rw-body: var(--t-body, .9375rem);
  --rw-meta: var(--t-meta, .8125rem);
  --rw-action-size: var(--t-action, 1rem);
  --rw-title-leading: 1.5rem;
  --rw-body-leading: 1.375rem;
  --rw-meta-leading: 1.25rem;
  --rw-space-1: var(--space-1, 4px);
  --rw-space-2: var(--space-2, 8px);
  --rw-space-3: var(--space-3, 12px);
  --rw-space-4: var(--space-4, 16px);
  --rw-radius: var(--radius-lg, 24px);
  --rw-pill: var(--radius-pill, 999px);
  --rw-hit: var(--hit-min, 44px);
  --rw-icon: 18px;
  --rw-line: 1px;
  --rw-outline: 2px;
  --rw-motion: 5000ms;
  --rw-confetti-blue: #0a84ff;
  --rw-confetti-green: #32b586;
  --rw-confetti-gold: #ffc857;
  --rw-confetti-red: #f3716e;
  position: fixed;
  z-index: 45;
  left: var(--rw-left);
  bottom: calc(var(--rw-bottom, 16px) + var(--rw-safe-bottom, env(safe-area-inset-bottom, 0px)));
  width: var(--rw-width, 380px);
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  display: grid;
  gap: var(--rw-space-2);
  margin: 0;
  padding: var(--rw-space-4);
  border: var(--rw-line) solid var(--rw-border);
  border-radius: var(--rw-radius);
  background: var(--rw-surface);
  color: var(--rw-ink);
  box-shadow: var(--rw-shadow);
  font-family: var(--rw-font);
  font-size: var(--rw-body);
  font-weight: 400;
  line-height: var(--rw-body-leading);
  letter-spacing: 0;
  text-align: left;
  color-scheme: light;
  isolation: isolate;
}

.rayonka-welcome-v1 *,
.rayonka-welcome-v1 *::before,
.rayonka-welcome-v1 *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

.rayonka-welcome-v1 .rayonka-welcome-v1__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rw-hit);
  align-items: center;
  gap: var(--rw-space-2);
}

.rayonka-welcome-v1 .rayonka-welcome-v1__title {
  margin: 0;
  padding: 0;
  color: var(--rw-ink);
  font: 500 var(--rw-title)/var(--rw-title-leading) var(--rw-font);
  overflow-wrap: anywhere;
}

.rayonka-welcome-v1 .rayonka-welcome-v1__copy,
.rayonka-welcome-v1 .rayonka-welcome-v1__detail {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--rw-ink);
  font: 400 var(--rw-body)/var(--rw-body-leading) var(--rw-font);
  overflow-wrap: anywhere;
}

.rayonka-welcome-v1 .rayonka-welcome-v1__detail {
  color: var(--rw-muted);
  font-size: var(--rw-meta);
  line-height: var(--rw-meta-leading);
}

.rayonka-welcome-v1 .rayonka-welcome-v1__close {
  display: grid;
  place-items: center;
  width: var(--rw-hit);
  height: var(--rw-hit);
  min-width: var(--rw-hit);
  min-height: var(--rw-hit);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--rw-pill);
  background: transparent;
  color: var(--rw-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.rayonka-welcome-v1 .rayonka-welcome-v1__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rw-space-3);
  min-width: 0;
  margin-top: var(--rw-space-2);
}

.rayonka-welcome-v1 .rayonka-welcome-v1__call {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--rw-space-2);
  min-height: var(--rw-hit);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: var(--rw-space-3) var(--rw-space-4);
  border: var(--rw-line) solid transparent;
  border-radius: var(--rw-pill);
  background: var(--rw-action);
  color: var(--rw-action-text);
  font: 500 var(--rw-action-size)/var(--rw-meta-leading) var(--rw-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.rayonka-welcome-v1 .rayonka-welcome-v1__number {
  min-width: 0;
  color: var(--rw-muted);
  font: 400 var(--rw-meta)/var(--rw-meta-leading) var(--rw-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rayonka-welcome-v1 .rayonka-welcome-v1__icon {
  display: block;
  flex: 0 0 var(--rw-icon);
  width: var(--rw-icon);
  height: var(--rw-icon);
}

.rayonka-welcome-v1 .rayonka-welcome-v1__close:hover,
.rayonka-welcome-v1 .rayonka-welcome-v1__close:active {
  background: var(--rw-soft);
  color: var(--rw-ink);
}

.rayonka-welcome-v1 .rayonka-welcome-v1__call:hover,
.rayonka-welcome-v1 .rayonka-welcome-v1__call:active {
  background: var(--rw-action-hover);
  color: var(--rw-action-text);
}

.rayonka-welcome-v1 .rayonka-welcome-v1__close:focus-visible,
.rayonka-welcome-v1 .rayonka-welcome-v1__call:focus-visible {
  outline: var(--rw-outline) solid var(--rw-focus);
  outline-offset: var(--rw-space-1);
}

.rayonka-welcome-v1__confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 46;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  contain: strict;
}

@media (max-width: 599px) {
  .rayonka-welcome-v1 .rayonka-welcome-v1__number { display: none; }
  .rayonka-welcome-v1 .rayonka-welcome-v1__call { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rayonka-welcome-v1__confetti { display: none; }
}

@media (forced-colors: active) {
  .rayonka-welcome-v1 .rayonka-welcome-v1__call,
  .rayonka-welcome-v1 .rayonka-welcome-v1__close { border: var(--rw-line) solid ButtonText; }
  .rayonka-welcome-v1__confetti { display: none; }
}