/* LIGHT MODE */
:root {
  --color-background: #f9fafb;
  --color-foreground: #111827;
  --color-border: #e5e7eb;
  --color-card: #ffffff;
  --color-card-foreground: #111827;
  --color-muted-foreground: #6b7280;
  --color-primary: #111827;
  --color-primary-foreground: #ffffff;
  --color-secondary: #f3f4f6;
  --color-destructive: #b91c1c;
  --color-destructive-foreground: #ffffff;
  --font-sans: 'Inter', sans-serif;
  --radius-md: 0.5rem;
  --button-outline: rgba(0, 0, 0, 0.1);
  --badge-outline: rgba(0, 0, 0, 0.05);

  /* Automatic computation of border around primary / danger buttons */
  --opaque-button-border-intensity: -8; /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);

  --background: red; /*replace with H S L */

  --foreground: red; /*replace with H S L */

  --border: red; /*replace with H S L */

  --card: red; /*replace with H S L */

  --card-foreground: red; /*replace with H S L */

  --card-border: red; /*replace with H S L */

  --sidebar: red; /*replace with H S L */

  --sidebar-foreground: red; /*replace with H S L */

  --sidebar-border: red; /*replace with H S L */

  --sidebar-primary: red; /*replace with H S L */

  --sidebar-primary-foreground: red; /*replace with H S L */

  --sidebar-accent: red; /*replace with H S L */

  --sidebar-accent-foreground: red; /*replace with H S L */

  --sidebar-ring: red; /*replace with H S L */

  --popover: red; /*replace with H S L */

  --popover-foreground: red; /*replace with H S L */

  --popover-border: red; /*replace with H S L */

  --primary: red; /*replace with H S L */

  --primary-foreground: red; /*replace with H S L */

  --secondary: red; /*replace with H S L */

  --secondary-foreground: red; /*replace with H S L */

  --muted: red; /*replace with H S L */

  --muted-foreground: red; /*replace with H S L */

  --accent: red; /*replace with H S L */

  --accent-foreground: red; /*replace with H S L */

  --destructive: red; /*replace with H S L */

  --destructive-foreground: red; /*replace with H S L */

  --input: red; /*replace with H S L */
  --ring: red; /*replace with H S L */
  --chart-1: red; /*replace with H S L */
  --chart-2: red; /*replace with H S L */
  --chart-3: red; /*replace with H S L */
  --chart-4: red; /*replace with H S L */
  --chart-5: red; /*replace with H S L */

  --app-font-sans: 'Inter', sans-serif;
  --app-font-serif: Georgia, serif;
  --app-font-mono: Menlo, monospace;
  --radius: 0.5rem; /* 8px */
  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0); /*replace with H S L */
  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0); /*replace with H S L */
  --shadow-sm:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-md:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-lg:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xl:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(
    from hsl(var(--sidebar-primary)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(
    from hsl(var(--sidebar-accent)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(
    from hsl(var(--primary)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(
    from hsl(var(--secondary)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(
    from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) /
      alpha
  );

  /* Fallback for older browsers */
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(
    from hsl(var(--accent)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(
    from hsl(var(--destructive)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );
}

.dark {
  --button-outline: rgba(255, 255, 255, 0.1);
  --badge-outline: rgba(255, 255, 255, 0.05);

  --opaque-button-border-intensity: 9; /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);

  --background: red; /*replace with H S L */

  --foreground: red; /*replace with H S L */

  --border: red; /*replace with H S L */

  --card: red; /*replace with H S L */

  --card-foreground: red; /*replace with H S L */

  --card-border: red; /*replace with H S L */

  --sidebar: red; /*replace with H S L */

  --sidebar-foreground: red; /*replace with H S L */

  --sidebar-border: red; /*replace with H S L */

  --sidebar-primary: red; /*replace with H S L */

  --sidebar-primary-foreground: red; /*replace with H S L */

  --sidebar-accent: red; /*replace with H S L */

  --sidebar-accent-foreground: red; /*replace with H S L */

  --sidebar-ring: red; /*replace with H S L */

  --popover: red; /*replace with H S L */

  --popover-foreground: red; /*replace with H S L */

  --popover-border: red; /*replace with H S L */

  --primary: red; /*replace with H S L */

  --primary-foreground: red; /*replace with H S L */

  --secondary: red; /*replace with H S L */

  --secondary-foreground: red; /*replace with H S L */

  --muted: red; /*replace with H S L */

  --muted-foreground: red; /*replace with H S L */

  --accent: red; /*replace with H S L */

  --accent-foreground: red; /*replace with H S L */

  --destructive: red; /*replace with H S L */

  --destructive-foreground: red; /*replace with H S L */

  /* Used as the border around inputs. Dark mode: Should be a border that is light enough to have high contrast when rendered on a --card background. More contrast than standard --border */
  --input: red; /*replace with H S L */
  --ring: red; /*replace with H S L */
  --chart-1: red; /*replace with H S L */
  --chart-2: red; /*replace with H S L */
  --chart-3: red; /*replace with H S L */
  --chart-4: red; /*replace with H S L */
  --chart-5: red; /*replace with H S L */

  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-sm:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-md:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-lg:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xl:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
}

* {
  box-sizing: border-box;
  border-color: var(--color-border);
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/**
 * Using the elevate system.
 * Automatic contrast adjustment.
 *
 * <element className="hover-elevate" />
 * <element className="active-elevate-2" />
 *
 * // Using the tailwind utility when a data attribute is "on"
 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
 * // Or manually controlling the toggle state
 * <element className="toggle-elevate toggle-elevated" />
 *
 * Elevation systems have to handle many states.
 * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
 * - toggled or not
 * - focused or not (this is not handled with these utilities)
 *
 * Even without handling focused or not, this is six possible combinations that
 * need to be distinguished from eachother visually.
 */
/* Hide ugly search cancel button in Chrome until we can style it properly */
input[type='search']::-webkit-search-cancel-button {
  display: none;
}

/* Placeholder styling for contentEditable div */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-muted-foreground);
  pointer-events: none;
}

  /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
   * buttons/badges can remove the automatic brightness adjustment on interactions
   * and program their own. */
.no-default-hover-elevate {
}

.no-default-active-elevate {
}

  /**
   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
   * This way they can stack/compound. Both will overlap the parent's borders!
   * So borders will be automatically adjusted both on toggle, and hover/active,
   * and they will be compounded.
   */
.toggle-elevate::before,
.toggle-elevate-2::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  /*border-radius: inherit;   match rounded corners */
  border-radius: inherit;
  z-index: -1;
  /* sits behind content but above backdrop */
}

.toggle-elevate.toggle-elevated::before {
  background-color: var(--elevate-2);
}

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
.border.toggle-elevate::before {
  inset: -1px;
}

  /* Does not work on elements with overflow:hidden! */
.hover-elevate:not(.no-default-hover-elevate),
.active-elevate:not(.no-default-active-elevate),
.hover-elevate-2:not(.no-default-hover-elevate),
.active-elevate-2:not(.no-default-active-elevate) {
  position: relative;
  z-index: 0;
}

.hover-elevate:not(.no-default-hover-elevate)::after,
.active-elevate:not(.no-default-active-elevate)::after,
.hover-elevate-2:not(.no-default-hover-elevate)::after,
.active-elevate-2:not(.no-default-active-elevate)::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  /*border-radius: inherit;   match rounded corners */
  border-radius: inherit;
  z-index: 999;
  /* sits in front of content */
}

.hover-elevate:hover:not(.no-default-hover-elevate)::after,
.active-elevate:active:not(.no-default-active-elevate)::after {
  background-color: var(--elevate-1);
}

.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
.active-elevate-2:active:not(.no-default-active-elevate)::after {
  background-color: var(--elevate-2);
}

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
.border.active-elevate:not(.no-active-interaction-elevate)::after,
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
.border.active-elevate-2:not(.no-active-interaction-elevate)::after,
.border.hover-elevate:not(.no-hover-interaction-elevate)::after {
  inset: -1px;
}

/* Reachable starter-state styles are ordinary CSS so the public build has no Tailwind dependency. */
.rkl-error-fallback,
.rkl-not-found-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}

.rkl-error-fallback {
  padding: 1.5rem;
}

.rkl-error-fallback__content {
  width: 100%;
  max-width: 32rem;
  text-align: center;
}

.rkl-error-fallback h1 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.rkl-error-fallback p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #4b5563;
}

.rkl-error-fallback pre {
  margin-top: 1rem;
  overflow-x: auto;
  border-radius: 0.25rem;
  background: #f3f4f6;
  padding: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #1f2937;
}

.rkl-error-fallback button {
  margin-top: 1rem;
  border: 0;
  border-radius: 0.25rem;
  background: #111827;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #ffffff;
  cursor: pointer;
}

.rkl-error-fallback button:hover {
  background: #374151;
}

.rkl-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.rkl-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
}

.rkl-card-title {
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.rkl-card-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
}

.rkl-card-content {
  padding: 1.5rem;
  padding-top: 0;
}

.rkl-card-footer {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  padding-top: 0;
}

.rkl-not-found-card {
  width: 100%;
  max-width: 28rem;
  margin: 0 1rem;
}

.rkl-not-found-card__content {
  padding-top: 1.5rem;
}

.rkl-not-found-card__row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rkl-not-found-card__icon {
  width: 2rem;
  height: 2rem;
  color: #ef4444;
}

.rkl-not-found-card h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: #111827;
}

.rkl-not-found-card p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #4b5563;
}

.rkl-toast-viewport {
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  width: 100%;
  max-height: 100vh;
  flex-direction: column-reverse;
  padding: 1rem;
}

.rkl-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #ffffff;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  color: #111827;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
  transition: opacity 150ms ease, transform 150ms ease;
}

.rkl-toast--destructive {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #ffffff;
}

.rkl-toast-stack {
  display: grid;
  gap: 0.25rem;
}

.rkl-toast-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.rkl-toast-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  opacity: 0.9;
}

.rkl-toast-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  padding: 0.25rem;
  background: transparent;
  color: currentColor;
  opacity: 0.5;
  cursor: pointer;
}

.rkl-toast-close:hover,
.rkl-toast-close:focus-visible {
  opacity: 1;
}

.rkl-toast-icon {
  width: 1rem;
  height: 1rem;
}

.rkl-toast-action {
  display: inline-flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.rkl-tooltip-content {
  z-index: 50;
  overflow: hidden;
  border-radius: 0.375rem;
  background: #111827;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #ffffff;
}
.syntx-greeter-active {
    color-scheme: dark;
}

.syntx-greeter {
    --rkl-orange: #ff9100;
    --rkl-cyan: #55dff0;
    --rkl-orange-quarter: rgba(255, 145, 0, 0.25);
    --rkl-cyan-quarter: rgba(85, 223, 240, 0.25);
    --rkl-paper: #f3f0e9;
    position: fixed;
    inset: 0;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    overflow: clip;
    background: #03070a;
    color: var(--rkl-paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.syntx-greeter button,
.syntx-greeter input {
    font: inherit;
}

.syntx-greeter-atmosphere {
    --syntx-sky-position: center -18vh;
    --syntx-sky-size: 109.2% auto;
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(3, 10, 15, 0.08) 0%, rgba(3, 10, 15, 0.02) 48%, rgba(3, 7, 10, 0.22) 100%),
        radial-gradient(72% 60% at 12% 14%, rgba(85, 223, 240, 0.12), transparent 76%),
        radial-gradient(68% 66% at 92% 88%, rgba(255, 145, 0, 0.08), transparent 78%),
        linear-gradient(180deg, #55b9e6 0%, #78cdef 56%, #d7f3fb 100%);
}

@media (max-width: 720px) {
    .syntx-greeter-atmosphere {
        --syntx-sky-position: center -12vh;
        --syntx-sky-size: auto 70.2%;
    }
}

.syntx-greeter-atmosphere::before {
    content: "";
    position: absolute;
    inset: -25%;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
    animation: syntx-atmosphere-drift 18s steps(6) infinite;
}

.syntx-greeter-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--sky-bg) var(--syntx-sky-position) / var(--syntx-sky-size) no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 79%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 79%);
}

.syntx-greeter-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.syntx-greeter-canvas {
    width: 100% !important;
    height: 100% !important;
}

.syntx-dev-toggle {
    position: fixed;
    z-index: 32;
    left: max(1rem, env(safe-area-inset-left));
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
    min-width: 3.15rem;
    min-height: 1.8rem;
    padding: 0.35rem 0.62rem;
    border: 1px solid rgba(85, 223, 240, 0.28);
    border-radius: 999px;
    background: rgba(5, 14, 19, 0.78);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    color: #8fa0aa;
    font: 800 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.78;
    backdrop-filter: blur(10px);
    transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.syntx-dev-toggle:hover,
.syntx-dev-toggle:focus-visible,
.syntx-dev-toggle.is-open {
    border-color: rgba(85, 223, 240, 0.72);
    color: var(--rkl-cyan);
    opacity: 1;
}

.syntx-dev-toggle:focus-visible {
    outline: 2px solid var(--rkl-cyan);
    outline-offset: 3px;
}

.syntx-camera-panel {
    position: fixed;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: min(280px, calc(100vw - 16px));
    min-height: min(300px, calc(100vh - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
    border: 1px solid rgba(85, 223, 240, 0.34);
    border-radius: 12px;
    background: rgba(5, 13, 18, 0.94);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(14px);
    color: var(--rkl-paper);
    pointer-events: auto;
}

.syntx-camera-panel-header {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(85, 223, 240, 0.16);
    background: rgba(5, 13, 18, 0.96);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.syntx-camera-panel-header:active {
    cursor: grabbing;
}

.syntx-camera-panel-header span,
.syntx-camera-panel-header small {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.syntx-camera-panel-header span {
    margin-bottom: 0.32rem;
    color: var(--rkl-cyan);
    font-size: 0.52rem;
}

.syntx-camera-panel-header h2 {
    margin: 0;
    color: white;
    font-size: 1.2rem;
    line-height: 1;
}

.syntx-camera-panel-header small {
    margin-top: 0.45rem;
    color: #71828d;
    font-size: 0.44rem;
}

.syntx-camera-panel-header button,
.syntx-camera-panel-actions button {
    border: 1px solid rgba(85, 223, 240, 0.24);
    border-radius: 7px;
    background: rgba(12, 28, 36, 0.92);
    color: #b7c7cf;
    cursor: pointer;
}

.syntx-camera-panel-header button {
    flex: none;
    width: 2.15rem;
    height: 2.15rem;
    font-size: 1.25rem;
    line-height: 1;
}

.syntx-camera-panel-header button:hover,
.syntx-camera-panel-actions button:hover {
    border-color: var(--rkl-cyan);
    color: white;
}

.syntx-camera-panel-header button:focus-visible,
.syntx-camera-panel-actions button:focus-visible,
.syntx-camera-control input:focus-visible {
    outline: 2px solid var(--rkl-cyan);
    outline-offset: 2px;
}

.syntx-camera-panel-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 1rem 1rem;
    overscroll-behavior: contain;
}

.syntx-camera-control {
    display: block;
    padding: 0.52rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.syntx-camera-control > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: #ccd7dc;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.syntx-camera-control output {
    color: var(--rkl-cyan);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}

.syntx-camera-control input[type="range"] {
    width: 100%;
    height: 1.1rem;
    margin: 0.38rem 0 0;
    accent-color: var(--rkl-cyan);
    cursor: ew-resize;
}

.syntx-camera-control input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 145, 0, 0.58), rgba(85, 223, 240, 0.72));
}

.syntx-camera-control input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5.5px;
    border: 2px solid #061016;
    border-radius: 50%;
    background: #effcff;
    box-shadow: 0 0 0 1px rgba(85, 223, 240, 0.68);
    -webkit-appearance: none;
}

.syntx-camera-panel-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 0.85rem;
}

.syntx-camera-panel-actions button {
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.syntx-camera-panel-body footer {
    margin-top: 0.75rem;
    color: #71828d;
    font: 600 0.49rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.syntx-camera-resize-handle {
    position: absolute;
    z-index: 8;
    touch-action: none;
}

.syntx-camera-resize-handle.is-n,
.syntx-camera-resize-handle.is-s {
    left: 12px;
    right: 12px;
    height: 8px;
    cursor: ns-resize;
}

.syntx-camera-resize-handle.is-n { top: 0; }
.syntx-camera-resize-handle.is-s { bottom: 0; }

.syntx-camera-resize-handle.is-e,
.syntx-camera-resize-handle.is-w {
    top: 12px;
    bottom: 12px;
    width: 8px;
    cursor: ew-resize;
}

.syntx-camera-resize-handle.is-e { right: 0; }
.syntx-camera-resize-handle.is-w { left: 0; }

.syntx-camera-resize-handle.is-ne,
.syntx-camera-resize-handle.is-nw,
.syntx-camera-resize-handle.is-se,
.syntx-camera-resize-handle.is-sw {
    width: 18px;
    height: 18px;
}

.syntx-camera-resize-handle.is-ne { top: 0; right: 0; cursor: nesw-resize; }
.syntx-camera-resize-handle.is-nw { top: 0; left: 0; cursor: nwse-resize; }
.syntx-camera-resize-handle.is-se { right: 0; bottom: 0; cursor: nwse-resize; }
.syntx-camera-resize-handle.is-sw { left: 0; bottom: 0; cursor: nesw-resize; }

.syntx-camera-resize-grip {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 7;
    width: 11px;
    height: 11px;
    border-right: 2px solid rgba(85, 223, 240, 0.5);
    border-bottom: 2px solid rgba(85, 223, 240, 0.5);
    pointer-events: none;
}

body.syntx-camera-panel-interacting,
body.syntx-camera-panel-interacting * {
    user-select: none !important;
}

.syntx-greeter-thread {
    position: absolute;
    inset: 8.5rem clamp(1.1rem, 5vw, 6rem) 7rem;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    scrollbar-width: none;
    mask-image: linear-gradient(to bottom, transparent, black 11%, black 80%, transparent 98%);
}

.syntx-greeter-thread-spacer {
    height: 42%;
}

.syntx-greeter-thread-tail {
    height: 4rem;
}

.syntx-greeter-message {
    width: min(30rem, 40vw);
    margin: 0 0 clamp(2rem, 7vh, 6rem);
    padding: 0.9rem 1.05rem 1rem;
    border: 1px solid rgba(136, 223, 235, 0.12);
    border-radius: 1.25rem 1.25rem 1.25rem 0.3rem;
    background: rgba(6, 18, 25, 0.35);
    box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.2);
    color: rgba(222, 239, 241, 0.62);
    backdrop-filter: blur(3px);
    transform: translate3d(0, 0, 0) scale(calc(1 - (var(--message-index) * 0.006)));
    transform-origin: left center;
    animation: syntx-message-arrive 520ms cubic-bezier(.2, .8, .2, 1) both;
}

.syntx-greeter-message.is-user {
    margin-left: auto;
    border-color: rgba(255, 145, 0, 0.14);
    border-radius: 1.25rem 1.25rem 0.3rem 1.25rem;
    background: rgba(46, 27, 6, 0.32);
    transform-origin: right center;
}

.syntx-greeter-message.is-system {
    margin-right: auto;
    margin-left: auto;
    border-style: dashed;
    text-align: center;
}

.syntx-greeter-message span {
    display: block;
    margin-bottom: 0.34rem;
    color: rgba(85, 223, 240, 0.76);
    font: 700 0.62rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.syntx-greeter-message.is-user span {
    color: rgba(255, 169, 57, 0.72);
}

.syntx-greeter-message p {
    margin: 0;
    font-size: clamp(0.86rem, 1.15vw, 1rem);
    line-height: 1.48;
}

.syntx-greeter-header {
    position: absolute;
    inset: 1.25rem clamp(1.1rem, 3.4vw, 3.8rem) auto;
    z-index: 7;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    pointer-events: none;
}

.syntx-greeter-brand,
.syntx-greeter-header nav {
    pointer-events: auto;
}

.syntx-greeter-brand {
    display: block;
    width: clamp(7rem, 10vw, 9.4rem);
    opacity: 0.94;
    transition: opacity 160ms ease, transform 160ms ease;
}

.syntx-greeter-brand:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.syntx-greeter-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.syntx-greeter-header nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2.2vw, 2rem);
}

.syntx-greeter-header nav button,
.syntx-greeter-header nav a {
    appearance: none;
    padding: 0.45rem 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: rgba(231, 240, 240, 0.7);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.085em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.syntx-greeter-header nav button:hover,
.syntx-greeter-header nav a:hover {
    border-color: var(--rkl-orange);
    color: #fff;
}

.syntx-greeter-header nav button:focus-visible,
.syntx-greeter-header nav a:focus-visible,
.syntx-greeter-brand:focus-visible,
.syntx-greeter-composer input:focus-visible,
.syntx-greeter-composer button:focus-visible,
.syntx-greeter-info-close:focus-visible {
    outline: 2px solid var(--rkl-cyan);
    outline-offset: 4px;
}

.syntx-greeter-key-target {
    position: absolute;
    left: 69.5%;
    bottom: clamp(9.2rem, 21vh, 13.8rem);
    z-index: 6;
    width: clamp(6.3rem, 12vw, 10rem);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.syntx-greeter-key-target:focus-visible {
    outline: 1px solid rgba(85, 223, 240, 0.9);
    outline-offset: 0.5rem;
    box-shadow: 0 0 2.2rem rgba(85, 223, 240, 0.28);
}

.syntx-greeter-voice-status {
    position: absolute;
    left: 69.5%;
    bottom: clamp(7.7rem, 17vh, 11rem);
    z-index: 6;
    margin: 0;
    padding: 0.25rem 0.45rem;
    transform: translateX(-50%);
    color: rgba(222, 235, 235, 0.58);
    font: 650 0.61rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.syntx-greeter-voice-status.is-listening {
    color: var(--rkl-orange);
}

.syntx-greeter-voice-status.is-speaking,
.syntx-greeter-voice-status.is-ready {
    color: var(--rkl-cyan);
}

.syntx-greeter-composer {
    position: absolute;
    right: clamp(1.1rem, 3.4vw, 3.8rem);
    bottom: 1.2rem;
    left: clamp(1.1rem, 3.4vw, 3.8rem);
    z-index: 8;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.25rem 0.55rem 0;
    border-bottom: 1px solid rgba(154, 194, 201, 0.28);
    background: linear-gradient(to right, rgba(3, 7, 10, 0.24), rgba(3, 7, 10, 0.68) 30%, rgba(3, 7, 10, 0.24));
    backdrop-filter: blur(4px);
}

.syntx-greeter-composer label {
    color: var(--rkl-cyan);
    font: 700 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.syntx-greeter-composer input {
    min-width: 0;
    padding: 0.55rem 0;
    border: 0;
    background: transparent;
    color: #fff;
    outline: 0;
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
}

.syntx-greeter-composer input::placeholder {
    color: rgba(220, 231, 232, 0.35);
}

.syntx-greeter-composer button {
    display: grid;
    width: 2.45rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(85, 223, 240, 0.34);
    border-radius: 50%;
    background: rgba(4, 12, 17, 0.7);
    color: var(--rkl-cyan);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.syntx-greeter-composer button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--rkl-cyan);
    color: #fff;
}

.syntx-greeter-composer button:disabled {
    opacity: 0.28;
    cursor: default;
}

.syntx-greeter-info {
    position: absolute;
    top: 5.8rem;
    right: clamp(1.1rem, 3.4vw, 3.8rem);
    z-index: 10;
    width: min(25rem, calc(100vw - 2.2rem));
    padding: 2.5rem 2rem 2.1rem;
    border-top: 1px solid rgba(85, 223, 240, 0.4);
    border-right: 1px solid rgba(85, 223, 240, 0.15);
    background: linear-gradient(145deg, rgba(6, 17, 23, 0.95), rgba(4, 9, 13, 0.86));
    box-shadow: -1.8rem 2rem 6rem rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(12px);
    animation: syntx-info-arrive 260ms ease-out both;
}

.syntx-greeter-info > p {
    margin: 0 0 0.85rem;
    color: var(--rkl-orange);
    font: 700 0.65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.syntx-greeter-info h2 {
    max-width: 18ch;
    margin: 0 0 1.25rem;
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2.35rem);
    font-weight: 540;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.syntx-greeter-info div {
    color: rgba(224, 236, 237, 0.72);
    font-size: 0.93rem;
    line-height: 1.58;
}

.syntx-greeter-info div p,
.syntx-greeter-info div ul {
    margin: 0;
}

.syntx-greeter-info div ul {
    padding-left: 1.15rem;
}

.syntx-greeter-info div li + li {
    margin-top: 0.45rem;
}

.syntx-greeter-info-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    border: 0;
    background: transparent;
    color: rgba(226, 239, 239, 0.64);
    font-size: 1.45rem;
    cursor: pointer;
}

.syntx-greeter-skip {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    z-index: 20;
    padding: 0.55rem 0.8rem;
    transform: translate(-50%, -180%);
    border: 1px solid var(--rkl-cyan);
    border-radius: 0.2rem;
    background: #07131a;
    color: #fff;
    font-size: 0.76rem;
    text-decoration: none;
    transition: transform 150ms ease;
}

.syntx-greeter-skip:focus {
    transform: translate(-50%, 0);
}

@keyframes syntx-atmosphere-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    33% { transform: translate3d(2%, -1%, 0); }
    66% { transform: translate3d(-1%, 2%, 0); }
}

@keyframes syntx-message-arrive {
    from { opacity: 0; transform: translate3d(0, 1rem, 0) scale(0.98); }
    to { opacity: 1; }
}

@keyframes syntx-info-arrive {
    from { opacity: 0; transform: translate3d(1rem, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 720px) {
    .syntx-greeter-header {
        top: 0.85rem;
        align-items: center;
        gap: 1rem;
    }

    .syntx-greeter-brand {
        width: 6.6rem;
    }

    .syntx-greeter-header nav {
        position: absolute;
        top: 0;
        right: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: end;
        gap: 0.05rem 0.85rem;
        width: 10.5rem;
        max-width: none;
    }

    .syntx-greeter-header nav button,
    .syntx-greeter-header nav a {
        padding-block: 0.28rem;
        font-size: 0.54rem;
        text-align: right;
    }

    .syntx-greeter-thread {
        inset: 6.4rem 0.85rem 7.4rem;
    }

    .syntx-greeter-message {
        width: min(18rem, 68vw);
        margin-bottom: 4.5rem;
        padding: 0.75rem 0.85rem;
    }

    .syntx-greeter-message p {
        font-size: 0.77rem;
    }

    .syntx-greeter-key-target {
        left: 69%;
        bottom: 7.35rem;
        width: 5.8rem;
    }

    .syntx-greeter-voice-status {
        left: 50%;
        bottom: 5.8rem;
        width: 90vw;
        max-width: 90vw;
        white-space: normal;
    }

    .syntx-greeter-composer {
        right: 0.95rem;
        bottom: max(0.8rem, env(safe-area-inset-bottom));
        left: 0.95rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .syntx-greeter-composer label {
        display: none;
    }

    .syntx-greeter-composer button:disabled {
        opacity: 0.5;
    }

    .syntx-greeter-info {
        top: 5.2rem;
        right: 1rem;
        width: calc(100vw - 2rem);
        padding: 2.35rem 1.35rem 1.65rem;
    }
}

@media (max-height: 620px) and (orientation: landscape) {
    .syntx-greeter-thread {
        top: 4rem;
    }

    .syntx-greeter-voice-status {
        bottom: 4.7rem;
    }

    .syntx-greeter-key-target {
        bottom: 5.6rem;
        width: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .syntx-greeter-atmosphere::before,
    .syntx-greeter-message,
    .syntx-greeter-info {
        animation: none;
    }

    .syntx-greeter *,
    .syntx-greeter *::before,
    .syntx-greeter *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}