/* rn-apps-chrome.css: the RoachNet chrome for apps.roachnet.org, accounts.roachnet.org and
   RoachClaw on the web, on the shared RoachWares system (rw-system/).
   The page frame, the header with its phone menu and account chip, the footer, the eyebrows and
   display type, the live roach and the toast. They carry the same classes, markup and rules as the
   main site's (rn-site.css), so every RoachNet surface wears one header and one footer; keep the
   two in step. Each surface composes its own layout on top (rn-apps.css, rn-account.css,
   rn-claw.css). Colours come only from the theme tokens (--rw-*), except the roach, which is brand
   artwork in its own colours. Unlayered, so it wins over rw-components.css. */

:root {
  --rn-max: 1240px;
  --rn-wide: 1480px;
  --rn-head-h: 64px;
  --rn-gh-mark: #fff;
  --rn-bezel: color-mix(in srgb, var(--rw-surface-2) 86%, transparent);
  --rn-card: var(--rw-glass);
  --rn-card-edge: var(--rw-line);
  --rn-veil: color-mix(in srgb, var(--rw-ground) 72%, transparent);
  scroll-padding-top: calc(var(--rn-head-h) + 16px);
}
:root[data-scheme="light"] { --rn-gh-mark: #000; }
@media (prefers-color-scheme: light) { :root:not([data-scheme]) { --rn-gh-mark: #000; } }
:root:not([data-theme]):has(.rw-theme-fallback option[value="daylight"]:checked),
:root:not([data-theme]):has(.rw-theme-fallback option[value="bone"]:checked) { --rn-gh-mark: #000; }

/* ------------------------------------------------------------------ base */
body {
  margin: 0;
  min-height: 100vh;
  font-size: var(--rw-t-body);
  line-height: var(--rw-leading-body);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: inherit; }
code, kbd, pre { font-family: var(--rw-font-mono); }
.rn-nowrap { white-space: nowrap; }
code { font-size: 0.9em; padding: 0.06em 0.34em; border-radius: var(--rw-r-xs); background: color-mix(in srgb, var(--rw-text) 8%, transparent); overflow-wrap: anywhere; }
pre code { padding: 0; background: none; overflow-wrap: normal; }
kbd { display: inline-block; min-width: 1.6em; padding: 0.04em 0.4em; margin: 0 0.08em; border: 1px solid var(--rw-line-strong); border-bottom-width: 2px; border-radius: var(--rw-r-xs); background: var(--rw-surface-2); color: var(--rw-text); font-size: 0.86em; line-height: 1.4; text-align: center; }
strong { font-weight: 700; color: var(--rw-text); }
section[id], [id].rn-anchor { scroll-margin-top: calc(var(--rn-head-h) + 20px); }

.rn-skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: var(--rw-z-dialog);
  padding: 12px 18px;
  border-radius: var(--rw-r-md);
  background: var(--rw-text);
  color: var(--rw-ground);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--rw-dur-2) var(--rw-ease-assemble);
}
.rn-skip-link:focus, .rn-skip-link:focus-visible { top: 12px; outline-offset: 2px; }
.rn-main { display: block; position: relative; outline: none; }
.rn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ------------------------------------------------------------------ layout */
.rn-wrap { width: min(100% - 2 * var(--rw-gutter), var(--rn-max)); margin-inline: auto; }
.rn-wrap--wide { width: min(100% - 2 * var(--rw-gutter), var(--rn-wide)); }
.rn-main > section { position: relative; padding-block: clamp(64px, 5vw + 40px, 140px); }

/* ------------------------------------------------------------------ type */
.rn-eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font: 600 0.74rem/1.3 var(--rw-font-mono);
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-text-muted);
}
.rn-led {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rw-signal) 30%, var(--rw-line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-signal) 0%, transparent);
  transition: background-color var(--rw-dur-3) var(--rw-ease-gentle), box-shadow var(--rw-dur-4) var(--rw-ease-assemble);
}
.rn-led--warn { background: var(--rw-warn); }
/* An eyebrow can wrap on a phone: its light sits on the first line, not between the two. */
.rn-eyebrow > .rn-led { margin-top: calc((1.3em - 8px) / 2); }
.is-on .rn-led, html:not(.rw-js) .rn-led, .rn-led.is-on { background: var(--rw-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-signal) 22%, transparent), 0 0 14px color-mix(in srgb, var(--rw-signal) 55%, transparent); }
.is-on .rn-led--warn, html:not(.rw-js) .rn-led--warn { background: var(--rw-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-warn) 22%, transparent), 0 0 14px color-mix(in srgb, var(--rw-warn) 50%, transparent); }

.rn-display, .rn-h1, .rn-h2, .rn-statement {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-display-wght);
  font-stretch: var(--rw-display-wdth);
  letter-spacing: var(--rw-display-tracking);
}
.rn-display { font-size: var(--rw-t-display); line-height: 0.98; color: var(--rw-text); }
.rn-display__lit, .rn-lit-text {
  background: linear-gradient(100deg, var(--rw-accent) 10%, var(--rw-signal-text) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rn-h1 { font-size: var(--rw-t-h1); line-height: 1.04; }
.rn-h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.3rem); line-height: 1.02; color: var(--rw-text); }
.rn-h2 code { font-size: 0.82em; font-stretch: 100%; letter-spacing: 0; white-space: nowrap; }
.rn-lede { font-size: var(--rw-t-lead); line-height: 1.55; color: var(--rw-text-muted); max-width: 62ch; }
.rn-statement { font-size: var(--rw-t-statement); line-height: 1.08; font-weight: 760; color: var(--rw-text); max-width: 22ch; }
.rn-fine { font-size: var(--rw-t-small); color: var(--rw-text-soft); max-width: 60ch; }
.rn-head-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 3vw + 16px, 64px); }
.rn-head-block .rn-eyebrow { margin-bottom: 0; }
.rn-head-block--split { max-width: none; align-items: end; }
@media (min-width: 900px) { .rn-head-block--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } }
.rn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rn-actions--center { justify-content: center; }
/* A long label on a small phone takes two lines rather than pushing past the edge */
@media (max-width: 399px) { .rn-main .rw-btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; padding-block: 8px; } }
.rn-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; font: 500 0.82rem/1.5 var(--rw-font-mono); color: var(--rw-text-soft); }
.rn-facts > span { display: inline-flex; align-items: center; gap: 14px; }
.rn-facts > span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--rw-line-strong); margin-left: -8px; margin-right: -4px; }
.rn-facts code { background: none; padding: 0; color: var(--rw-text-muted); }
.rn-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; list-style: none; }
.rn-status li { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-pill); background: var(--rn-card); font: 500 0.78rem/1 var(--rw-font-mono); color: var(--rw-text-muted); }
.rn-status li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rw-text-soft); }
.rn-status li[data-state="online"]::before { background: var(--rw-signal); box-shadow: 0 0 8px color-mix(in srgb, var(--rw-signal) 60%, transparent); }
.rn-status li[data-state="offline"]::before { background: var(--rw-warn); }
.rn-tag { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-md); background: var(--rw-glass); box-shadow: var(--rw-elev-2); font-size: 0.86rem; line-height: 1.3; color: var(--rw-text); }
.rn-tag b { font: 600 0.68rem/1.2 var(--rw-font-mono); letter-spacing: var(--rw-tracking-caps); text-transform: uppercase; color: var(--rw-signal-text); }
.rn-tag code { background: none; padding: 0; }
.rn-ticks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; }
.rn-ticks li { position: relative; padding-left: 30px; color: var(--rw-text); }
.rn-ticks li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 12px; height: 6px; border-left: 2px solid var(--rw-signal-text); border-bottom: 2px solid var(--rw-signal-text); transform: rotate(-45deg); }
.rn-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; list-style: none; margin-top: 20px; }
.rn-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font: 600 0.9rem/1.2 var(--rw-font-text); color: var(--rw-accent); }
.rn-more::after { content: ""; width: 18px; height: 1.5px; background: currentColor; transition: width var(--rw-dur-2) var(--rw-ease-assemble); }
a:hover .rn-more::after, button:hover .rn-more::after { width: 28px; }


/* ------------------------------------------------------------------ the header
   The compact lockup, the primary navigation, then the theme selector and the account chip on
   the right. Under 1024 px the navigation and the end controls fold into a menu panel. The bar is
   clear over the top of the page and turns to glass, with a lit hairline, once you scroll. */
.rn-head { position: sticky; top: 0; z-index: var(--rw-z-nav); }
.rn-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rw-glass);
  -webkit-backdrop-filter: blur(min(var(--rw-glass-blur), 18px)) saturate(1.2);
  backdrop-filter: blur(min(var(--rw-glass-blur), 18px)) saturate(1.2);
  border-bottom: 1px solid var(--rw-line);
  transition: box-shadow var(--rw-dur-3) var(--rw-ease-gentle), border-color var(--rw-dur-3) var(--rw-ease-gentle);
}
.rn-head:not(.is-scrolled):not(.is-open)::before { border-bottom-color: transparent; }
.rn-head.is-scrolled::before, .rn-head.is-open::before { box-shadow: 0 10px 30px -18px var(--rw-shadow); }
@media (prefers-reduced-transparency: reduce) { .rn-head::before { background: var(--rw-surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.rw-low-power .rn-head::before { background: var(--rw-surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rn-head__in { display: flex; align-items: center; gap: 20px; min-height: var(--rn-head-h); width: min(100% - 2 * var(--rw-gutter), var(--rn-wide)); margin-inline: auto; }
.rn-head__home { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 4px 2px; border-radius: var(--rw-r-sm); }
.rn-head__mark { height: 26px; width: auto; }
/* On the smallest phones the lockup gives up a little width so the menu button keeps its label */
@media (max-width: 359px) { .rn-head__in { gap: 12px; } .rn-head__mark { height: 22px; } }
.rn-mark--light { display: none; }
:root[data-scheme="light"] .rn-mark--dark { display: none; }
:root[data-scheme="light"] .rn-mark--light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-scheme]) .rn-mark--dark { display: none; }
  :root:not([data-scheme]) .rn-mark--light { display: block; }
}
:root:not([data-theme]):has(.rw-theme-fallback option[value="daylight"]:checked) .rn-mark--dark,
:root:not([data-theme]):has(.rw-theme-fallback option[value="bone"]:checked) .rn-mark--dark { display: none; }
:root:not([data-theme]):has(.rw-theme-fallback option[value="daylight"]:checked) .rn-mark--light,
:root:not([data-theme]):has(.rw-theme-fallback option[value="bone"]:checked) .rn-mark--light { display: block; }
.rn-head__panel { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.rn-head__nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.rn-head__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--rw-r-pill);
  color: var(--rw-text-muted);
  font: 600 0.94rem/1 var(--rw-font-text);
  text-decoration: none;
  transition: color var(--rw-dur-1) var(--rw-ease-gentle), background-color var(--rw-dur-2) var(--rw-ease-gentle);
}
.rn-head__link::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--rw-signal); opacity: 0; transform: scale(0.4); transition: opacity var(--rw-dur-2) var(--rw-ease-gentle), transform var(--rw-dur-2) var(--rw-ease-snap); }
.rn-head__link:hover { color: var(--rw-text); background: color-mix(in srgb, var(--rw-text) 6%, transparent); }
.rn-head__link[aria-current] { color: var(--rw-text); }
.rn-head__link[aria-current]::after { opacity: 1; transform: none; box-shadow: 0 0 8px color-mix(in srgb, var(--rw-signal) 70%, transparent); }
.rn-head__end { display: flex; align-items: center; gap: 10px; }
.rn-head__theme .rw-ts__label { display: none; }
.rn-head__theme .rw-ts__button { padding-right: 14px; }
.rn-head__menu { display: none; }

.rn-acct {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--rw-line-strong);
  border-radius: var(--rw-r-pill);
  background: color-mix(in srgb, var(--rw-surface-2) 82%, transparent);
  color: var(--rw-text);
  font: 600 0.88rem/1 var(--rw-font-text);
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--rw-highlight);
  transition: border-color var(--rw-dur-1) var(--rw-ease-gentle);
}
.rn-acct:hover { border-color: var(--rw-text-soft); }
.rn-acct__led { width: 8px; height: 8px; border-radius: 50%; background: var(--rw-text-soft); }
.rn-acct.is-in .rn-acct__led { background: var(--rw-signal); box-shadow: 0 0 8px color-mix(in srgb, var(--rw-signal) 70%, transparent); }

@media (min-width: 1024px) and (max-width: 1279px) {
  .rn-head__theme .rw-ts__value { display: none; }
  .rn-head__link { padding: 0 10px; }
}
@media (max-width: 1023px) {
  :root { --rn-head-h: 58px; }
  .rn-head__in { justify-content: space-between; }
  .rn-head__menu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--rw-line-strong);
    border-radius: var(--rw-r-pill);
    background: color-mix(in srgb, var(--rw-surface-2) 82%, transparent);
    color: var(--rw-text);
    font: 600 0.9rem/1 var(--rw-font-text);
    cursor: pointer;
  }
  .rn-burger { position: relative; width: 16px; height: 10px; }
  .rn-burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--rw-dur-2) var(--rw-ease-assemble), top var(--rw-dur-2) var(--rw-ease-assemble); }
  .rn-burger i:first-child { top: 0; }
  .rn-burger i:last-child { top: 8px; }
  .rn-head.is-open .rn-burger i:first-child { top: 4px; transform: rotate(45deg); }
  .rn-head.is-open .rn-burger i:last-child { top: 4px; transform: rotate(-45deg); }
  .rn-head__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--rn-head-h);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    max-height: calc(100dvh - var(--rn-head-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--rw-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--rw-surface-1);
    border-bottom: 1px solid var(--rw-line-strong);
    box-shadow: 0 30px 60px -20px var(--rw-shadow);
  }
  .rn-head.is-open .rn-head__panel { display: flex; }
  .rn-head__nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .rn-head__link { min-height: 56px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--rw-line); font: var(--rw-display-wght) 1.5rem/1 var(--rw-font-display); font-stretch: var(--rw-display-wdth); letter-spacing: var(--rw-display-tracking); color: var(--rw-text); }
  .rn-head__link::after { left: auto; right: 6px; bottom: auto; top: 50%; margin: -2.5px 0 0; }
  .rn-head__link:hover { background: none; }
  .rn-head__end { flex-wrap: wrap; gap: 12px; }
  .rn-head__theme .rw-ts__label { display: inline; }
  html:not(.rw-js) .rn-head__panel { position: static; display: flex; padding: 8px 0 16px; background: none; box-shadow: none; border: 0; }
  html:not(.rw-js) .rn-head__in { flex-wrap: wrap; }
  html:not(.rw-js) .rn-head__menu { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .rn-head.is-open .rn-head__panel { animation: rn-panel-in var(--rw-dur-3) var(--rw-ease-assemble); }
  .rn-head.is-open .rn-head__link { animation: rn-link-in var(--rw-dur-4) var(--rw-ease-assemble) both; }
  .rn-head.is-open .rn-head__link:nth-child(2) { animation-delay: 40ms; }
  .rn-head.is-open .rn-head__link:nth-child(3) { animation-delay: 80ms; }
  .rn-head.is-open .rn-head__link:nth-child(4) { animation-delay: 120ms; }
  .rn-head.is-open .rn-head__link:nth-child(5) { animation-delay: 160ms; }
}
@keyframes rn-panel-in { from { opacity: 0; } }
@keyframes rn-link-in { from { opacity: 0; transform: translate3d(0, 10px, 0); font-stretch: 80%; } }

/* ------------------------------------------------------------------ the footer
   The same content on every RoachNet surface: the creed, the product links, "Made by RoachWares",
   GitHub's own mark and the sitemap. Here the creed is the footer's headline. */
.rn-foot { position: relative; margin-top: clamp(40px, 6vw, 96px); padding: clamp(56px, 6vw, 96px) 0 28px; border-top: 1px solid var(--rw-line); background: linear-gradient(180deg, color-mix(in srgb, var(--rw-ground) 50%, transparent), var(--rw-ground) 42%); }
.rn-foot__in { width: min(100% - 2 * var(--rw-gutter), var(--rn-wide)); margin-inline: auto; }
.rn-foot__creed { max-width: 20ch; margin-bottom: clamp(40px, 5vw, 72px); font-family: var(--rw-font-display); font-weight: var(--rw-display-wght); font-stretch: var(--rw-display-wdth); letter-spacing: var(--rw-display-tracking); font-size: clamp(1.9rem, 1rem + 3.4vw, 4.4rem); line-height: 1.02; color: var(--rw-text); }
.rn-foot__grid { display: grid; gap: 36px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rn-foot__brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; color: var(--rw-text-muted); font-size: 0.95rem; }
.rn-foot__lockup { display: inline-flex; margin-bottom: 8px; }
.rn-foot__mark { height: 34px; width: auto; }
.rn-foot__brand a { color: var(--rw-text); text-underline-offset: 0.2em; }
.rn-foot__col h2 { margin-bottom: 12px; font: 600 0.72rem/1.3 var(--rw-font-mono); letter-spacing: var(--rw-tracking-caps); text-transform: uppercase; color: var(--rw-text-soft); }
.rn-foot__col nav { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.rn-foot__col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--rw-text-muted); text-decoration: none; transition: color var(--rw-dur-1) var(--rw-ease-gentle); }
.rn-foot__col a:hover, .rn-foot__col a[aria-current] { color: var(--rw-text); }
.rn-foot__col a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.rn-gh-link { min-height: 44px; }
.rn-gh-logo { display: block; fill: var(--rn-gh-mark); }
.rn-foot__sign { margin: clamp(40px, 6vw, 88px) 0 24px; opacity: 0.9; }
.rn-foot__word { width: 100%; height: auto; max-width: 1222px; }
.rn-foot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 20px; border-top: 1px solid var(--rw-line); font-size: 0.86rem; color: var(--rw-text-soft); }
.rn-release { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--rw-signal) 40%, transparent); border-radius: var(--rw-r-pill); color: var(--rw-signal-text); font: 600 0.8rem/1 var(--rw-font-mono); text-decoration: none; }
.rn-netlify { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; color: var(--rw-text-soft); text-decoration: none; }
.rn-netlify img { height: 36px; width: auto; }
/* The privacy notice, linked from every footer */
.rn-foot__privacy { display: inline-flex; align-items: center; min-height: 32px; color: var(--rw-text-muted); text-decoration: underline; text-underline-offset: 0.2em; }
.rn-foot__privacy:hover { color: var(--rw-accent); }
@media (min-width: 720px) { .rn-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rn-foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } .rn-foot__brand { grid-column: auto; } }
@media (max-width: 560px) { .rn-netlify { margin-left: 0; } }

/* ------------------------------------------------------------------ the toast (rn-site.js, app.js and api.js share it) */
.nx-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: var(--rw-z-toast);
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border: 1px solid var(--rw-line-strong);
  border-radius: var(--rw-r-pill);
  background: var(--rw-surface-3);
  color: var(--rw-text);
  font: 600 0.92rem/1.35 var(--rw-font-text);
  box-shadow: var(--rw-elev-3);
  opacity: 0;
  transform: translate3d(-50%, 12px, 0);
  pointer-events: none;
  transition: opacity var(--rw-dur-2) var(--rw-ease-gentle), transform var(--rw-dur-3) var(--rw-ease-assemble);
}
.nx-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }


/* ------------------------------------------------------------------ the live roach (rn-site-roach.js)
   RN06 v8 in its own colours: wing case Kernel 600 #703093, the cap's light #36ff84, pale #f7eeff,
   and the board's night #06060b as its face and outline (so it holds on light grounds too). It moves
   only at its joints: legs at the hips in two tripods, antennae at the cap, eyes inside the face,
   the head where it meets the collar. The states are classes on the element marked data-roach. */
.rn-roach { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 28px; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rn-roach:focus-visible { outline: var(--rw-focus-width, 3px) solid var(--rw-focus); outline-offset: 6px; }
.rn-roach__body { position: relative; display: block; transform-origin: 50% 92%; }
.rn { display: block; width: 100%; height: auto; aspect-ratio: 260 / 160; overflow: visible; --rn-ink: #06060b; --rn-wing: #703093; --rn-pale: #f7eeff; --rn-cap: #36ff84; }
.rn * { transform-box: view-box; }
.rn__ink { fill: var(--rn-ink); stroke: var(--rn-ink); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.rn__ink .rn__ant { stroke-width: 3.4; }
.rn--color .rn__paint { fill: var(--rn-pale); }
.rn--color .rn__paint .rn__wing { fill: var(--rn-wing); }
.rn--color .rn__led { fill: var(--rn-cap); }
.rn__eye { transform-box: fill-box; transform-origin: 50% 50%; }
.rn__leg--mf { transform-origin: 103.38px 56.38px; }
.rn__leg--hf { transform-origin: 69px 81.75px; }
.rn__leg--hn { transform-origin: 41.25px 117px; }
.rn__leg--mn { transform-origin: 118.5px 116.25px; }
.rn__leg--fn { transform-origin: 144.25px 102px; }
.rn__leg--ff { transform-origin: 160.25px 105.25px; }
.rn__ant--far { transform-origin: 162.75px 49.25px; }
.rn__ant--near { transform-origin: 176px 57.25px; }
.rn__head { transform-origin: 160.5px 83px; }
.rn__all { transform-origin: 130px 150px; }
.rn__bang, .rn__zz { opacity: 0; transition: opacity 0.3s ease; }
.rn__bang path { fill: none; stroke: var(--rn-cap); stroke-width: 5; stroke-linecap: round; }
.rn__bang circle { fill: var(--rn-cap); }
.rn__zz { font-family: var(--rw-font-mono); font-weight: 700; fill: var(--rw-accent); }
.rn__z--1 { font-size: 15px; }
.rn__z--2 { font-size: 19px; }
.rn--live .rn__eyes { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); }
.rn--live .rn__head { transform: rotate(calc(var(--ht, 0) * 1deg)); transition: transform 0.25s var(--rw-ease-assemble); }
.rn--live .rn__eye { transform: scaleY(var(--lid, 1)); transition: transform 0.09s ease-out; }
.rn--live .rn__ant { transition: transform 0.45s var(--rw-ease-snap); }
.rn--live .rn__led { transition: opacity 0.4s ease, filter 0.4s ease; }
@keyframes rn-sway-far { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes rn-sway-near { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
@keyframes rn-tri-a { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes rn-tri-b { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes rn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes rn-hop { 0% { transform: none; } 14% { transform: translateY(2px) scale(1.05, 0.92); } 42% { transform: translateY(-18%) scale(0.97, 1.05); } 66% { transform: translateY(0) scale(1.03, 0.95); } 82% { transform: translateY(-2%); } 100% { transform: none; } }
@keyframes rn-happy { 0%, 100% { transform: none; } 35% { transform: translateY(-6%) rotate(-3deg); } 70% { transform: translateY(0) rotate(2deg); } }
@keyframes rn-cap-flash { 0% { filter: brightness(1); } 18% { filter: brightness(1.5) drop-shadow(0 0 6px #36ff84); } 100% { filter: brightness(1); } }
@keyframes rn-pulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px #36ff84); } 50% { opacity: 0.55; filter: none; } }
@keyframes rn-work-far { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-11deg); } }
@keyframes rn-work-near { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-8deg); } }
@keyframes rn-doze { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.016); } }
@keyframes rn-z { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -12px); opacity: 0; } }
@keyframes rn-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-0.6px) scaleY(1.016); } }
@media (prefers-reduced-motion: no-preference) {
  [data-roach] .rn__ant--far { animation: rn-sway-far 4.2s ease-in-out infinite; }
  [data-roach] .rn__ant--near { animation: rn-sway-near 3.6s ease-in-out -1.3s infinite; }
  [data-roach] .rn__all { animation: rn-breathe 4.2s var(--rw-ease-gentle) infinite; }
  [data-roach].is-near .rn__ant--far { animation: none; transform: rotate(-9deg); }
  [data-roach].is-near .rn__ant--near { animation: none; transform: rotate(-6deg); }
  [data-roach].is-hover .rn__leg--a, [data-roach].is-run .rn__leg--a { animation: rn-tri-a 0.16s linear infinite; }
  [data-roach].is-hover .rn__leg--b, [data-roach].is-run .rn__leg--b { animation: rn-tri-b 0.16s linear infinite; }
  [data-roach].is-hover .rn__all, [data-roach].is-run .rn__all { animation: rn-bob 0.16s linear infinite; }
  [data-roach].is-hop .rn-roach__body { animation: rn-hop 0.72s var(--rw-ease-assemble); }
  [data-roach].is-hop .rn__led { animation: rn-cap-flash 0.5s ease-out; }
  [data-roach].is-hop .rn__eye { --lid: 1.18; }
  [data-roach].is-hop .rn__bang { opacity: 1; }
  [data-roach].is-hop .rn__ant--far { animation: none; transform: rotate(10deg); }
  [data-roach].is-hop .rn__ant--near { animation: none; transform: rotate(8deg); }
  [data-roach].is-happy .rn-roach__body { animation: rn-happy 0.6s var(--rw-ease-snap); }
  [data-roach].is-think .rn__led { animation: rn-pulse 1.1s ease-in-out infinite; }
  [data-roach].is-think .rn__ant--far { animation: rn-work-far 0.5s ease-in-out infinite; }
  [data-roach].is-think .rn__ant--near { animation: rn-work-near 0.5s ease-in-out -0.25s infinite; }
  [data-roach].is-doze .rn__all { animation: rn-doze 3.4s ease-in-out infinite; }
  [data-roach].is-doze .rn__ant--far { animation: none; transform: rotate(12deg); }
  [data-roach].is-doze .rn__ant--near { animation: none; transform: rotate(14deg); }
  [data-roach].is-doze .rn__zz { opacity: 1; }
  [data-roach].is-doze .rn__z--1 { animation: rn-z 3.4s ease-in-out infinite; }
  [data-roach].is-doze .rn__z--2 { animation: rn-z 3.4s ease-in-out -1.7s infinite; }
  [data-roach].is-paused, [data-roach].is-paused * { animation-play-state: paused !important; }
}
[data-roach].is-doze .rn__led { opacity: 0.38; }
[data-roach].is-doze .rn__eye { --lid: 0.24; }
[data-roach].is-squint .rn__eye { --lid: 0.5; }
[data-roach].is-blink .rn__eye { --lid: 0.1; }
[data-roach].is-happy .rn__eye { --lid: 0.45; }
.rn-roach__ground { position: absolute; left: 10%; right: 6%; bottom: 3%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rw-shadow) 90%, transparent), transparent); z-index: -1; }


/* ---------------------------------------------------------------- touch
   Where a finger is likely (any coarse pointer, or a window narrower than a laptop), everything you
   can press is at least 44 px tall: footer and index links, small buttons, the release chip. */
@media (any-pointer: coarse), (max-width: 1023px) {
  .rn-foot__col a, .rn-foot__brand a, .rn-release, .rn-foot__privacy, .rn-main .rw-link, .rn-facts a { min-height: 44px; }
  .rn-foot__col a { min-width: 44px; }
  .rn-foot__brand a, .rn-main .rw-link, .rn-facts a { display: inline-flex; align-items: center; }
  .rn-main .rw-btn--sm { min-height: 44px; }
}

/* ------------------------------------------------------------------ preferences and print */
@media (prefers-reduced-motion: reduce) {
  .rn, .rn *, .rn-roach, .rn-roach * { animation: none !important; transition: none !important; }
  .rn-head__link, .rn-head::before { transition: none; }
}
@media (forced-colors: active) {
  .rn-display__lit, .rn-lit-text { background: none; color: CanvasText; }
  .rn-led { forced-color-adjust: none; }
}
@media print {
  .rn-head, .rn-skip-link, .rn-roach, .rn-foot__sign, .rn-netlify, .rw-field { display: none !important; }
}

/* ------------------------------------------------------------------ additions for these three surfaces
   hidden means hidden, whatever display a component sets; and form controls on these surfaces
   size from their border box, so a 44 px control is 44 px tall */
[hidden] { display: none !important; }
.rn-form-box, .rn-form-box .rw-input, .rn-form-box .rw-select, .rn-form-box .rw-textarea, textarea.rc-compose__input { box-sizing: border-box; }
/* a link drawn as a button keeps the button's ink: the base `a { color: inherit }` is unlayered, so
   it would beat the system's layered button colour and leave dark text on the violet fill in the
   light themes */
a.rw-btn { color: var(--_ink); }