:root{
  --ink:#F6F3ED;
  --ink-soft:#D7D2C9;
  --bg:#15170F;
  --bg-deep:#0A0B08;
  --accent-lit:#FF7A55;
  /* Reserved privacy link color, canon 2026-08-26. Nothing else uses it. */
  --rk-privacy:#c7b6f5;
  --hand:'Patrick Hand','Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-lit);text-decoration:none}
a:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;padding:8px 12px;background:var(--bg-deep);color:var(--ink);font-family:var(--mono);font-size:12px;border:1px solid var(--accent-lit);border-radius:8px;z-index:10}
.skip:focus{left:8px}
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--bg)}
.hero-layer{position:absolute;inset:0;pointer-events:none}
.hero-photo{background-image:url(/assets/bg.png);background-image:image-set(url(/assets/bg.webp) type("image/webp"),url(/assets/bg.png) type("image/png"));background-size:cover;background-position:center}
/* Backdrop toggle (rk-backdrop, canon rk_branding PR 19). Site default is
   rk_fa11back; html[data-backdrop] flips the artwork before first paint. */
html[data-backdrop="fallback"] .hero-photo{background-image:url(/assets/bg-fallback.png);background-image:image-set(url(/assets/bg-fallback.webp) type("image/webp"),url(/assets/bg-fallback.png) type("image/png"))}
/* The fallback artwork carries its own purple glow ramp baked into the
   image. The canon grid and orange edge glow are for the default artwork
   only; painted over the fallback art they clash with its built-in ramp.
   The veil stays: it is artwork-neutral darkening, not a canon accent. */
html[data-backdrop="fallback"] .hero-grid,html[data-backdrop="fallback"] .hero-glow{display:none}
/* Canon backdrop darkening (rk_branding/canon/site-canon.md). */
.hero-veil{background:linear-gradient(180deg,rgba(8,9,7,.72),rgba(8,9,7,.94))}
/* Lighter veil over the fallback artwork only. The canon veil above is
   tuned for bg.png and buries bg-fallback.png. The top stop is measured,
   not chosen: it is the smallest step at which the near-white body text
   and mono labels clear 4.5:1 over the artwork brightest band at 1440.
   The bottom stop stays at or under .55 so the purple ramp survives. */
html[data-backdrop="fallback"] .hero-veil{background:linear-gradient(180deg,rgba(8,9,7,.40),rgba(8,9,7,.50))}
/* Canon grid: orange 58x42 at .18/.14, fading out toward the top. Replaces
   the white 40x40 grid and its top-anchored mask. */
.hero-grid{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,124,72,.18) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(0deg,rgba(255,124,72,.14) 0 1px,transparent 1px 42px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.34) 46%,transparent 72%);
  mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.34) 46%,transparent 72%);
}
/* Canon edge glow, the ramp. rk_branding/canon/site-canon.md, ratified
   2026-08-26. One inverted radial masked to the bottom band, replacing three
   additive sources that read as three hot spots at wide viewports. The alpha
   is .24, not .4: that is what keeps the grid legible through the wider band. */
.hero-glow{
  background-image:
    radial-gradient(66% 60% at 50% 36%,transparent 89%,rgba(255,104,54,.24) 100%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 22%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.22) 50%,transparent 66%);
  mask-image:linear-gradient(0deg,#000 0%,#000 22%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.22) 50%,transparent 66%);
}
.hero-inner{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:var(--pad)}
/* Canonical XYZ header lockup: property mark plus domain text, IBM Plex Mono
   .82rem, ink, 12px gap, 42px mark. The .engineering accent uses the shared
   engineering accent #ff7a55 (the pair has no family footer color). */
.site-header{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;padding:18px 30px;pointer-events:none}
.site-brand{display:inline-flex;min-height:44px;align-items:center;gap:12px;pointer-events:auto;color:var(--ink);font-family:var(--mono);font-size:.82rem;letter-spacing:.05em}
.site-brand img{display:block;width:auto;height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.site-brand:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:3px}
.site-tld{color:var(--accent-lit)}
/* Mirrors the app's app-bar BETA chip (_Rand0mBetaChip, per xyz #275/#286):
   borderless black scrim + white text, so it reads on any background instead
   of a brand-tinted fill that can wash out. Remove at v1. */
.beta-chip{display:inline-flex;align-items:center;margin-left:16px;padding:3px 7px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;flex-shrink:0;font:800 10px var(--mono);letter-spacing:.06em}
.placeholder{align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);text-align:center;max-width:680px}
h1{margin:0;font-family:var(--hand);font-size:clamp(2.6rem,7vw,4.2rem);font-weight:400;line-height:1.08;color:var(--ink)}
#status{margin:0;font-family:var(--sans);font-size:clamp(16px,1.25vw,20px);line-height:1.5;color:var(--ink-soft)}
.privacy{max-width:680px;color:var(--ink-soft);font-size:12px;line-height:1.5;text-align:left}
.privacy summary{cursor:pointer;color:var(--rk-privacy);font-family:var(--mono);text-align:center}
.privacy p{margin:10px 0 0}
.privacy code{color:var(--ink);font-family:var(--mono)}
/* Site canon: NO top separator at all, not even a transparent one. The
   footer is set off by its padding and the edge glow. No dark grounding
   plate, no footer-local grid, no footer-local glow. isolation and overflow
   went with the pseudo-elements they existed to contain. */
.footer{position:relative;align-self:end;display:flex;justify-content:center;padding-top:clamp(10px,1.4vh,14px);margin-bottom:7vh}
.footer p{margin:0;text-align:center;font-family:var(--mono);font-size:clamp(11px,.3vw + 10px,12px);line-height:1.8;color:#F3EEE6;white-space:nowrap}
.footer .foot-domains{display:inline}
/* Canon: no resting underline on a family link. */
.footer a.foot-xyz{color:#faafa5}
.footer a.foot-llc{color:#e97862}
.footer a.foot-org{color:#f45d43}
.footer a.foot-random{color:#ff4124}
.footer a:hover,.footer a:focus-visible{color:#FFEDE6}
@media (max-width:760px) {
  .site-domain{display:none}
  /* Canon grid, tighter spacing and lower opacity under 760px. */
  .hero-grid {
    background-image:
      repeating-linear-gradient(90deg, rgba(255, 124, 72, 0.16) 0 1px, transparent 1px 46px),
      repeating-linear-gradient(0deg, rgba(255, 124, 72, 0.12) 0 1px, transparent 1px 40px);
  }
}
@media (max-width:640px){
  .site-header{padding:14px 16px}
  .site-brand img{height:34px}
  .hero-inner{padding:20px 10px 10px}
  .placeholder{gap:12px}
  .mark{width:clamp(180px,29vh,245px)}
  .footer p{font-size:clamp(9px,2.45vw,10px);line-height:1.4;white-space:normal}
  .footer .foot-separator{display:none}
  .footer .foot-domains{display:block}
  .footer .foot-lead,.footer .foot-domains{white-space:nowrap}
  .footer .foot-family{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.backdrop-toggle{transition:none}}
/* Character art motion. The source SVGs in ruok/design/mascots declare these
   animations inline but define no keyframes, so the art is static without
   them. Shapes come from ruok/lib/widgets/mascots/mascot_motion.dart, which
   documents each track in CSS terms and test-pins its bounds, so the web and
   the app move the same way. */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-1.2deg)}}
@keyframes bodybob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5px) scaleY(.985)}}
@keyframes blink{0%,88%{transform:scaleY(1)}92%{transform:scaleY(.08)}96%,100%{transform:scaleY(1)}}
@keyframes eartwitch{0%,88%{transform:rotate(0)}90%{transform:rotate(-7deg)}94%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes whisk{0%,88%{transform:rotate(0)}90%{transform:rotate(3deg)}94%{transform:rotate(-2deg)}97%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@keyframes tailwave{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(3deg)}}
@keyframes twitch{0%,78%{transform:rotate(0) translate(0,0)}82%{transform:rotate(7deg) translate(1px,-3.5px)}86%{transform:rotate(-5deg) translate(0,0)}90%{transform:rotate(4deg) translate(1px,-3.5px)}94%{transform:rotate(-2deg) translate(0,0)}100%{transform:rotate(0) translate(0,0)}}
@keyframes shadowpulse{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}

/* The hero character replaces the centred logo. Transparent, so it sits on
   the canon backdrop rather than carrying one of its own. */
.hero-mascot{display:block;width:clamp(190px,31vh,330px);height:auto}

/* A reader who asked for less motion gets the first frame and nothing else. */
/* Head and pupil moves ease rather than snapping. Pointer tracking sets the
   transform attribute; this is what makes it read as a glance. */
.hero-mascot g[id]{transition:transform .15s ease-out}
@media (prefers-reduced-motion: reduce){
  .hero-mascot *{animation:none !important}
  /* No ambient motion, no easing, and mascot.js attaches no listeners at all. */
  .hero-mascot g[id]{transition:none !important}
}

/* Locked state, top right. VISUAL PLACEHOLDER ONLY: there is no auth, no
   login form, no provider wiring and no route behind this. It is not
   interactive and it is not a button, so it cannot be tabbed to or clicked.
   Intent when it is built: @rand0m.ai accounts only, and the unlocked state
   arrives once auth and the gated pages exist, at which point the random1y
   and knight1y pages migrate off ruok. None of that is built here. */
.locked-affordance{margin-left:8px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink-soft);font:600 11px var(--mono);letter-spacing:.04em;opacity:.72;pointer-events:none}
.locked-affordance svg{display:block;width:12px;height:12px;fill:currentColor}
/* Backdrop toggle. Sibling of the BETA chip and the home link, never inside
   either. Sits at the right edge of the header, immediately before the
   sign-in affordance: margin-left:auto claims the leftover flex space so the
   toggle and sign-in form one cluster on the right, clear of the chip and
   home link on the left. Icon button, keyboard reachable, no button chrome:
   border, background and padding are all zeroed so the lamp icon sits bare,
   matching the rand0m app bar. The 44px hit target below stays transparent. */
.backdrop-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:0;border-radius:0;color:var(--ink-soft);cursor:pointer;pointer-events:auto;white-space:nowrap;transition:color .15s ease,opacity .15s ease}
/* Lamp icon swap (owner addition, lane randomly--backdrop-fallback-layers-0910):
   one img, the lit/unlit lamp from the app, in place of the old SVG plus
   visible mono label. fallback shows lamp-dark (the lamp is on); default
   shows lamp-light. The accessible name comes from the hidden label below. */
.backdrop-toggle-icon{display:block;height:38px;width:auto}
.backdrop-toggle:hover{color:var(--ink);opacity:.82}
.backdrop-toggle:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px}
@media (max-width:760px){.backdrop-toggle{min-width:44px;min-height:44px;justify-content:center}}
/* Standard accessible-hiding pattern: present to assistive tech, removed from
   the visual layout without display:none (which would drop it from the
   accessibility tree in some readers). */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}