/* rn-site.css: roachnet.org's main-site layer on the shared RoachWares system (rw-system/).
   The page frame, the header and its phone menu, the footer, the live roach, and the parts the
   landing, Home, iOS, Homebrew, API, Developers, the sitemap and the 404 share: eyebrows and
   display type, cards on lit glass, product screenshots with depth, consoles, the LED lines that
   power on as a section arrives, and the toast. Each page composes its own layout on top
   (rn-site-<page>.css).
   Colours come only from the theme tokens (--rw-*), so every theme, light and
   dark, carries its own contrast; the one exception is the roach, which is brand artwork in its
   own colours. Unlayered, so it wins over rw-components.css without fighting specificity. */

: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; }
/* The rule above is unlayered, so it would beat the system's layered button ink: give link buttons theirs back */
a.rw-btn { color: var(--_ink); }
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, .rn-stats__v, .rn-card h3, .rn-card__title {
  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 row that stands on the bare field takes a veil (data-veil in the markup), sized to its buttons */
.rn-actions[data-veil], .rn-home-get__foot { width: fit-content; max-width: 100%; }
/* 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); }
/* A tag hangs half over a screenshot and half over the field, so it carries an opaque surface: on glass its
   small label fell under 4.5:1 over the dark screenshot in the light themes */
.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-surface-1); 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; } }

/* ------------------------------------------------------------------ cards
   A card is the theme's glass colour without the blur (the contrast gate checked text on it over
   the brightest field pixel), a lit top edge and layered shadows tinted by the theme. Blur stays
   on the few surfaces that need it, because every blurred card re-blurs the moving field. */
.rn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 1.4vw + 12px, 30px);
  border: var(--rw-border-width) solid var(--rn-card-edge);
  border-radius: var(--rw-r-lg);
  background-color: var(--rn-card);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--rw-highlight) 90%, transparent), transparent 46%);
  box-shadow: var(--rw-elev-1);
  color: var(--rw-text-muted);
  list-style: none;
  text-align: left;
}
.rn-card h3, .rn-card__title { font-size: clamp(1.18rem, 1rem + 0.5vw, 1.45rem); line-height: 1.14; font-weight: 760; color: var(--rw-text); }
.rn-card p { font-size: 0.98rem; line-height: 1.58; }
.rn-card code { color: var(--rw-text); }   /* a chip's tint under the pointer light took muted code under 4.5:1 */
.rn-card__kicker { font: 600 0.72rem/1.3 var(--rw-font-mono); letter-spacing: var(--rw-tracking-caps); text-transform: uppercase; color: var(--rw-accent-strong); }   /* the strong accent: the regular one dips under 4.5:1 on glass over the brighter fields */
.rn-card__n { font: 600 0.8rem/1 var(--rw-font-mono); color: var(--rw-signal-text); }
.rn-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--rw-r-md); border: 1px solid var(--rw-line-strong); background: color-mix(in srgb, var(--rw-action) 22%, transparent); color: var(--rw-accent-strong); margin-bottom: 6px; }
.rn-card__body { font-size: 0.96rem; line-height: 1.55; }
.rn-card__note { font-size: 0.88rem; color: var(--rw-text-muted); }
.rn-card--signal { border-color: color-mix(in srgb, var(--rw-signal) 36%, transparent); }
.rn-card--signal .rn-card__kicker { color: var(--rw-signal-text); }
.rn-card--panel { gap: 14px; }
.rn-card--link, button.rn-card { cursor: pointer; text-decoration: none; font: inherit; transition: transform var(--rw-dur-3) var(--rw-ease-assemble), border-color var(--rw-dur-2) var(--rw-ease-gentle), box-shadow var(--rw-dur-3) var(--rw-ease-assemble); }
.rn-card--link:hover, button.rn-card:hover { border-color: var(--rw-line-strong); box-shadow: var(--rw-elev-2); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rn-card--link:hover, button.rn-card:hover, .rn-card--lift:hover { transform: translate3d(0, -3px, 0); }
}
.rn-card--link:focus-visible { outline-offset: 4px; }
.rn-card.rw-lit::after { border-radius: inherit; }
/* The pointer light runs at 45% on the surfaces that carry text: at full strength it lifts the glass enough to
   take muted body text and accent kickers under 4.5:1 in the brighter themes */
:is(.rn-card, .rn-console, .rn-proof, .rn-share, .rn-ports, .rn-fields).rw-lit::after { opacity: calc(var(--rw-lit, 0) * 0.45); }
.rn-card ul, .rn-card ol { margin-top: 4px; }

/* ------------------------------------------------------------------ product screenshots
   Each one sits in a bezel of lit glass: an inner top highlight, a soft violet glow from the
   theme behind it and a deep shadow under it. data-depth tilts it a little in perspective and
   rn-site.js eases it flat as you scroll it to the middle of the screen. */
.rn-shot { position: relative; display: block; isolation: isolate; }
.rn-shot::before {
  content: "";
  position: absolute;
  inset: 8% 6% -4%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 45%, var(--rw-glow), transparent 72%);
  filter: blur(28px);
  opacity: 0.9;
  pointer-events: none;
}
.rn-shot__bezel {
  position: relative;
  padding: clamp(6px, 0.6vw, 10px);
  border: 1px solid var(--rw-line-strong);
  border-radius: calc(var(--rw-r-lg) + 4px);
  background: var(--rn-bezel);
  box-shadow: inset 0 1px 0 var(--rw-highlight), 0 2px 6px var(--rw-shadow), 0 40px 80px -30px var(--rw-shadow-tint), 0 24px 40px -24px var(--rw-shadow);
  transform: perspective(1600px) rotateX(var(--rn-tilt-x, 0deg)) rotateY(var(--rn-tilt-y, 0deg)) translate3d(0, var(--rn-lift, 0px), 0);
  transform-origin: 50% 80%;
  transition: transform var(--rw-dur-4) var(--rw-ease-assemble);
  will-change: transform;
}
.rn-shot__bezel img { display: block; width: 100%; height: auto; border-radius: var(--rw-r-md); background: var(--rw-surface-0); }
.rn-shot__bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; font: 500 0.72rem/1 var(--rw-font-mono); color: var(--rw-text-soft); }
.rn-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rw-line-strong); }
.rn-shot__bar span { margin-left: 8px; }
.rn-shot figcaption:not(.rn-shot__tags) { justify-self: center; width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 8px 14px; border: 1px solid var(--rw-line); border-radius: var(--rw-r-pill); background: var(--rw-glass); font-size: 0.88rem; color: var(--rw-text-muted); text-align: center; }
.rn-shot--tilt { --rn-tilt-x: 8deg; --rn-tilt-y: -10deg; }
.rn-shot.rw-lit::after { border-radius: calc(var(--rw-r-lg) + 4px); }
.rn-phone { position: relative; display: block; isolation: isolate; padding: 7px; border: 1px solid var(--rw-line-strong); border-radius: 38px; background: var(--rn-bezel); box-shadow: inset 0 1px 0 var(--rw-highlight), 0 30px 60px -26px var(--rw-shadow-tint), 0 18px 30px -20px var(--rw-shadow); transform: perspective(1400px) rotateX(var(--rn-tilt-x, 0deg)) rotateY(var(--rn-tilt-y, 0deg)) translate3d(0, var(--rn-lift, 0px), 0); transition: transform var(--rw-dur-4) var(--rw-ease-assemble); }
.rn-phone img { display: block; width: 100%; height: auto; border-radius: 31px; background: var(--rw-surface-0); }
.rn-phone.rw-lit::after { border-radius: 38px; }
/* data-depth: rn-site.js writes --rw-progress (0 as it enters, 0.5 mid-screen, 1 as it leaves) on
   wide screens; the shot leans back below the middle of the screen and settles flat there. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-depth] > .rn-shot__bezel, .rn-phone[data-depth] {
    --rn-tilt-x: calc((0.5 - var(--rw-progress, 0.5)) * 14deg);
    --rn-lift: calc((0.5 - var(--rw-progress, 0.5)) * 44px);
    transition: none;
  }
}

/* ------------------------------------------------------------------ consoles (machine text) */
.rn-console { position: relative; overflow: hidden; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-lg); background: var(--rw-surface-0); box-shadow: inset 0 1px 0 var(--rw-highlight), var(--rw-elev-2); }
.rn-console__bar { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-bottom: 1px solid var(--rw-line); font: 500 0.76rem/1 var(--rw-font-mono); color: var(--rw-text-muted); }   /* muted: soft read 4.4:1 on a console in Daylight and Bone */
.rn-console__dots { display: inline-flex; gap: 6px; }
.rn-console__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rw-line-strong); }
.rn-console__dots i:first-child { background: color-mix(in srgb, var(--rw-danger) 70%, var(--rw-line-strong)); }
.rn-console__dots i:nth-child(2) { background: color-mix(in srgb, var(--rw-warn) 70%, var(--rw-line-strong)); }
.rn-console__dots i:nth-child(3) { background: color-mix(in srgb, var(--rw-ok) 70%, var(--rw-line-strong)); }
.rn-console__body { margin: 0; padding: 18px 18px 20px; overflow-x: auto; font: 450 0.86rem/1.75 var(--rw-font-mono); color: var(--rw-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.rn-console__body code { font: inherit; }
.rn-console__cmd { display: block; color: var(--rw-text); }
.rn-console__cmd::before { content: "$ "; color: var(--rw-signal-text); }
.rn-console__out { display: block; color: var(--rw-text-muted); }   /* muted, not soft: output lines are small, and soft sits near 4.5:1 on Daylight and Bone */
.rn-console__out--hash { color: var(--rw-signal-text); }
.rn-console__tools { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 14px; }
.rn-caret { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--rw-signal); }
@media (prefers-reduced-motion: no-preference) { .rn-caret { animation: rn-caret 1.1s steps(1) infinite; } }
@keyframes rn-caret { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ stats and steps */
.rn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 32px; overflow: hidden; list-style: none; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-lg); background: var(--rw-line); }
.rn-stats li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; padding: clamp(18px, 2vw, 28px); background: var(--rn-card); }
.rn-stats__v { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); line-height: 1; color: var(--rw-text); }
.rn-stats__l { font-size: 0.9rem; color: var(--rw-text-muted); }
@media (min-width: 900px) { .rn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rn-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: rn-step; list-style: none; }
.rn-steps li { position: relative; padding-left: 40px; counter-increment: rn-step; color: var(--rw-text); font-weight: 600; font-size: 0.96rem; }
.rn-steps li::before { content: counter(rn-step); position: absolute; left: 0; top: -1px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rw-line-strong); font: 600 0.78rem/1 var(--rw-font-mono); color: var(--rw-signal-text); }

/* ------------------------------------------------------------------ power on
   A section powers on as it arrives: its LED lights, its line of LED dots fills from the left
   and the field's contour lines brighten behind it (rn-site.js). Without JavaScript, or with
   Reduce Motion, everything is already on. Text never waits on any of it. */
.rn-power { position: relative; display: block; height: 4px; background: radial-gradient(circle, var(--rw-line-strong) 1.2px, transparent 1.7px) 0 50% / 10px 4px repeat-x; }
.rn-power::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--rw-signal) 1.4px, transparent 1.9px) 0 50% / 10px 4px repeat-x;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rw-signal) 80%, transparent));
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--rw-dur-scene) var(--rw-ease-assemble);
}
.rn-power--v { width: 4px; height: 100%; background-size: 4px 10px; background-repeat: repeat-y; background-position: 50% 0; }
.rn-power--v::after { background-size: 4px 10px; background-repeat: repeat-y; background-position: 50% 0; }
html.rw-js[data-motion="full"] [data-power]:not(.is-on) .rn-power::after { clip-path: inset(0 100% 0 0); }
html.rw-js[data-motion="full"] [data-power]:not(.is-on) .rn-power--v::after { clip-path: inset(0 0 100% 0); }

/* ------------------------------------------------------------------ quiet behind text
   rn-site.js calms the field behind the text blocks on screen (quiet regions), and each block also
   carries data-veil: rw-system's soft, round-cornered pool of the theme's own ground (8.1.1), so text
   keeps its contrast over the busiest patch of any theme's field. Cards and consoles carry their
   own surfaces and need neither. */
/* On a phone the reading runs edge to edge, with no margin for the field to show in: the reading
   and quiet sections lay one soft veil over it, fading out at their top and bottom, so the field
   stays loud only in the hero, the story and the calls to action. */
@media (max-width: 759px) {
  .rn-main > section:is([data-field="reading"], [data-field="quiet"]) { isolation: isolate; }
  .rn-main > section:is([data-field="reading"], [data-field="quiet"])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--rw-ground) 62%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 96px, #000 calc(100% - 96px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 96px, #000 calc(100% - 96px), transparent);
  }
}

/* ------------------------------------------------------------------ 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; }

/* ------------------------------------------------------------------ the 404 */
.rn-lost__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; min-height: calc(100vh - var(--rn-head-h) - 120px); padding-block: 48px 72px; }
.rn-lost__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.rn-lost__code { font-family: var(--rw-font-display); font-weight: 900; font-stretch: 150%; letter-spacing: -0.04em; font-size: clamp(6rem, 3rem + 18vw, 17rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--rw-line-strong); user-select: none; }
.rn-roach--lost { position: absolute; width: min(56%, 300px); bottom: -6%; }
.rn-lost__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 34rem; }
.rn-lost__copy .rn-eyebrow { margin-bottom: 0; }
@media (min-width: 900px) { .rn-lost__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 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 .rn-res__list a, .rn-main .rn-index a, .rn-main .rw-link, .rn-facts a, .rn-dev-talk__mark { 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-shot__bezel, .rn-phone { transition: none; --rn-tilt-x: 0deg; --rn-tilt-y: 0deg; --rn-lift: 0px; }
  .rn-card, .rn-head__link, .rn-head::before, .rn-power::after { transition: none; }
}
@media (forced-colors: active) {
  .rn-display__lit, .rn-lit-text { background: none; color: CanvasText; }
  .rn-card, .rn-console, .rn-shot__bezel, .rn-phone { border-color: CanvasText; }
  .rn-power::after, .rn-led { forced-color-adjust: none; }
}
@media print {
  .rn-head, .rn-skip-link, .rn-roach, .rn-power, .rn-foot__sign, .rn-netlify { display: none !important; }
  .rn-card, .rn-console { box-shadow: none; }
}