/* Ritual Row — home draft: appliance stage
   Standalone prototype. Nothing here touches the live homepage peels. */

:root {
  --rr-green: #00ff41;
  --rr-green-dim: #1f8f3c;
  --rr-rust: #b4551e;
  --rr-paper: #e8e2d3;
  --rr-ink: #070807;
  --rr-panel: #101211;
  --rr-panel-2: #171a18;
  --rr-line: #2a2e2b;
  --rr-font-display: "DotGothic16", "VT323", monospace;
  --rr-font-crt: "VT323", "DotGothic16", monospace;
  --rr-font-ui: "Fragment Mono", ui-monospace, Menlo, monospace;
  --rr-door-ease: cubic-bezier(.18, .82, .2, 1);
  --rr-door-ms: 720ms;
  /* opening run = FLIP travel (480ms pre-swing) + the swing itself */
  --rr-door-open-ms: 1200ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #050605; color: var(--rr-paper); }
body {
  font-family: var(--rr-font-ui);
  font-size: 13px;
  line-height: 1.4;
  background:
    radial-gradient(120% 80% at 50% 0%, #131513 0%, #050605 60%),
    #050605;
  min-height: 100vh;
}
/* Sewer gutters: on viewports wider than the 1520px frame the space either
   side is a static sewer wall (rusted pipes, drain grates leaking green).
   Each tile is the render stacked with its vertical mirror, so repeat-y is
   seamless. Only applied (and only downloaded) when there are gutters. */
@media (min-width: 1560px) {
  body {
    background:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.62) 58%, rgba(0,0,0,0) 100%),
      url("assets/sewer-left.webp") left top / 560px auto repeat-y,
      url("assets/sewer-right.webp") right top / 560px auto repeat-y,
      #050605;
  }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--rr-green); color: #000; }

.rr-skip {
  position: absolute; left: 8px; top: -40px; z-index: 100;
  background: var(--rr-green); color: #000; padding: 6px 10px; font-weight: 700;
}
.rr-skip:focus { top: 8px; }

/* ------------------------------------------------------------------ frame */
.rr-frame {
  max-width: 1520px;
  margin: 0 auto;
  border: 1px solid #000;
  box-shadow: 0 0 0 3px #1b1d1a, 0 0 0 4px #000, 0 30px 80px rgba(0,0,0,.7);
  background: var(--rr-ink);
  position: relative;
}
.rr-frame::before {
  /* grime vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ------------------------------------------------------------------- top
   Classic matrix CRT paint — same grid (brand | tabs | ticker | account). */
.rr-top {
  display: grid;
  grid-template-columns: auto auto minmax(160px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px 12px;
  background: #0d0208;
  border-bottom: 1px solid rgba(0, 255, 65, 0.35);
  box-shadow: inset 0 -1px 0 rgba(0, 255, 65, 0.12), 0 2px 0 #000;
  position: relative; z-index: 6;
  color: #00ff41;
}
.rr-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.22) 2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  opacity: 0.45;
  z-index: 1;
}
.rr-top > * { position: relative; z-index: 2; }
.rr-top__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.rr-top__brand-mark { display: none; } /* dropped — wordmark only */
.rr-top__brand-text {
  font-family: var(--rr-font-display); font-size: 16px; letter-spacing: .04em;
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 251, 51, 0.45);
  transition: color .18s ease, text-shadow .18s ease, transform .22s ease;
}
.rr-top__brand:hover .rr-top__brand-text {
  color: #e8ffe9;
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.85), 0 0 24px rgba(0, 251, 51, 0.4);
}
.rr-tabs { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.rr-tab {
  font-family: var(--rr-font-display);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; white-space: nowrap;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #008f11;
  text-decoration: none;
  transition: color .18s ease, text-shadow .18s ease, letter-spacing .18s ease;
}
.rr-tab:hover, .rr-tab:focus-visible {
  color: #00ff41;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.55);
  outline: none;
}

.rr-ticker {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px;
  min-width: 0;
  background: #030604; border: 1px solid rgba(0, 255, 65, 0.32);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.08), 0 0 12px rgba(0, 255, 65, 0.08);
  padding: 0 8px 0 0; height: 30px;
  position: relative;
  overflow: hidden;
}
.rr-ticker::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  opacity: 0.5;
  z-index: 1;
}
.rr-ticker__label {
  font-family: var(--rr-font-display); font-size: 11px; color: #000; background: var(--rr-green);
  height: 100%; display: inline-flex; align-items: center; padding: 0 8px; letter-spacing: .1em;
  position: relative; z-index: 2;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.45);
}
/* edge fades are two static gradients, not a mask (a mask re-composites the
   whole moving track every frame) */
.rr-ticker__viewport { overflow: hidden; min-width: 0; position: relative; z-index: 2; }
.rr-ticker__viewport::before, .rr-ticker__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 18px; z-index: 1; pointer-events: none;
}
.rr-ticker__viewport::before { left: 0; background: linear-gradient(90deg, #030604, rgba(3,6,4,0)); }
.rr-ticker__viewport::after { right: 0; background: linear-gradient(270deg, #030604, rgba(3,6,4,0)); }
.rr-ticker__track {
  display: inline-flex; gap: 42px; white-space: nowrap; will-change: transform;
  animation: rr-ticker 60s linear infinite;
  font-family: var(--rr-font-crt); font-size: 17px; color: #9dffb0;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.35);
}
.rr-ticker__track:hover { animation-play-state: paused; }
.rr-ticker__track b { color: var(--rr-green); font-weight: 400; }
@keyframes rr-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rr-top__account { display: inline-flex; gap: 8px; align-items: center; }
.rr-top__link {
  font-family: var(--rr-font-display); font-size: 12px; text-transform: uppercase;
  padding: 6px 8px; color: #008f11;
}
.rr-top__link:hover { color: #00ff41; text-shadow: 0 0 8px rgba(0, 255, 65, 0.45); }
.rr-top__cart {
  font-family: var(--rr-font-display); font-size: 12px; color: var(--rr-green);
  border: 1px solid rgba(0, 255, 65, 0.45); padding: 5px 8px 4px;
  display: inline-flex; gap: 6px; align-items: center;
  background: rgba(0, 20, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.15);
}
.rr-top__cart:hover { border-color: #00ff41; background: rgba(0, 40, 0, 0.55); }
.rr-top__cart b { background: var(--rr-green); color: #041004; font-weight: 400; padding: 0 5px; }

/* ------------------------------------------------------------------ grid */
.rr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 0;
  position: relative; z-index: 4;
}
.rr-right {
  background:
    linear-gradient(rgba(6,7,6,.62), rgba(6,7,6,.78)),
    url("assets/metal-corrugated.webp") center / 100% auto repeat-y;
  border-left: 1px solid #000;
  box-shadow: inset 1px 0 0 #23262a;
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ---------------------------------------------------------------- poster */
.rr-poster {
  position: relative; display: block; overflow: hidden;
  border: 2px solid #050605; box-shadow: 0 0 0 1px #2e332e, 0 10px 24px rgba(0,0,0,.6);
  background: #000;
  aspect-ratio: 4 / 3;
}
.rr-poster__img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.9); transition: transform .5s ease; }
.rr-poster:hover .rr-poster__img { transform: scale(1.04); }
.rr-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 35%, transparent 60%, rgba(0,0,0,.75));
}
.rr-poster__kicker, .rr-poster__title, .rr-poster__badge { position: absolute; z-index: 2; font-family: var(--rr-font-display); }
.rr-poster__kicker { left: 8px; top: 8px; font-size: 10px; letter-spacing: .12em; color: #cfe8d3; background: rgba(0,0,0,.6); padding: 3px 6px; }
.rr-poster__title { left: 8px; bottom: 8px; font-size: 17px; color: #fff; text-shadow: 0 0 10px rgba(0,255,65,.6), 0 2px 0 #000; }
.rr-poster__badge { right: 8px; bottom: 8px; font-size: 11px; color: #000; background: var(--rr-green); padding: 4px 8px 3px; box-shadow: 0 0 14px rgba(0,255,65,.5); }
.rr-rail .rr-poster { flex: 0 0 auto; margin: 8px 8px 0; }

/* ------------------------------------------------------------- crt tile */
.rr-crt-tile { display: block; }
.rr-crt-tile__bezel {
  background: linear-gradient(#5c584c, #3b3830);
  border: 1px solid #000; box-shadow: inset 0 1px 0 #75705f, 0 8px 18px rgba(0,0,0,.6);
  padding: 12px 12px 10px; border-radius: 6px 6px 3px 3px;
}
.rr-crt-tile__screen {
  margin: 0; height: 128px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 40%, #0a2612 0%, #030903 90%);
  color: var(--rr-green); font-family: var(--rr-font-crt); font-size: 15px; line-height: 1.15;
  padding: 8px 10px; border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.9), inset 0 0 2px var(--rr-green-dim);
  text-shadow: 0 0 6px rgba(0,255,65,.6);
  position: relative;
}
.rr-crt-tile__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.rr-crt-tile__deck {
  height: 22px; background: linear-gradient(#3b3830, #26241f); border: 1px solid #000; border-top: 0;
  display: flex; gap: 6px; align-items: center; padding: 0 10px; border-radius: 0 0 4px 4px;
}
.rr-crt-tile__deck span { width: 34px; height: 5px; background: #1b1a16; box-shadow: inset 0 1px 0 #000; }
.rr-crt-tile__deck i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--rr-green); box-shadow: 0 0 8px var(--rr-green); animation: rr-blink 2.4s steps(1) infinite; }
@keyframes rr-blink { 50% { opacity: .25; } }

/* ------------------------------------------------------------------ minis */
.rr-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-mini {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  background: linear-gradient(#1a1c19, #0c0d0c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2b2f2b, 0 8px 18px rgba(0,0,0,.55);
  overflow: hidden; padding: 12px;
}
.rr-mini:hover { box-shadow: inset 0 0 0 1px var(--rr-green-dim), 0 8px 18px rgba(0,0,0,.55); }
.rr-mini__label { position: absolute; left: 6px; bottom: 6px; font-family: var(--rr-font-display); font-size: 11px; letter-spacing: .12em; color: #d9d4c6; background: rgba(0,0,0,.65); padding: 2px 5px; }
.rr-mini__img { width: 100%; height: 100%; object-fit: cover; }
.rr-vinyl {
  position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #0b0b0b 0 1px, #1a1a1a 1px 2px),
    #111;
  box-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0,0,0,.7);
  display: grid; place-items: center;
  animation: rr-spin 9s linear infinite;
}
.rr-vinyl img { width: 38%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000; }
.rr-vinyl::after { content: ""; position: absolute; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #050605; }
@keyframes rr-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ stage */
.rr-stage { min-width: 0; display: flex; flex-direction: column; }
.rr-wall {
  position: relative; flex: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 100%),
    url("assets/wall-graffiti.webp") center top / cover no-repeat;
  padding: 8px 18px 14px;
  overflow: hidden;
  isolation: isolate;
}
.rr-wall::before {
  /* moss + drip pass */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 40% at 10% 100%, rgba(30,60,30,.35), transparent 60%),
    radial-gradient(50% 30% at 95% 100%, rgba(50,30,10,.35), transparent 60%);
}
.rr-wall__tags { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rr-tag {
  position: absolute; font-family: var(--rr-font-display); font-weight: 400;
  color: rgba(255,255,255,.14); letter-spacing: .1em; font-size: 28px; transform: rotate(-8deg);
  text-shadow: 0 0 1px rgba(0,0,0,.6);
}
.rr-tag--a { left: 3%; top: 36%; font-size: 30px; transform: rotate(-14deg); color: rgba(0,255,65,.12); }
.rr-tag--b { right: 5%; top: 30%; transform: rotate(6deg); color: rgba(255,255,255,.12); }
.rr-tag--c { left: 47%; top: 52%; font-size: 22px; transform: rotate(-3deg); color: rgba(255,120,120,.14); }
.rr-tag--d { right: 22%; top: 60%; font-size: 40px; transform: rotate(9deg); color: rgba(255,255,255,.08); }
.rr-tag--e { left: 20%; top: 64%; font-size: 26px; transform: rotate(-11deg); color: rgba(200,255,200,.1); }

.rr-wordmark {
  /* sit with the shelf appliances so the cluster packs tight instead of
     floating the wordmark in empty air above the microwave / TV */
  grid-area: logo; align-self: end; justify-self: center;
  margin: 0 0 4px; width: 100%; max-width: 300px; position: relative; z-index: 2; text-align: center;
}
.rr-wordmark__art { position: relative; display: block; }
/* static shadow pool under the wordmark instead of a filter on the image */
.rr-wordmark__art::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 14%; bottom: 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent 80%);
}
.rr-wordmark img { width: 100%; height: auto; }
/* spray-paint reveal: the canvas sits over the (hidden) wordmark img and is
   removed when the paint is dry; layout never changes */
.rr-wordmark__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rr-wordmark__art.is-spraying img { visibility: hidden; }
.rr-wordmark__sub {
  display: block; margin-top: -12px;
  font-family: var(--rr-font-crt); font-size: 18px; color: #c7e6cd; text-shadow: 0 0 8px rgba(0,255,65,.45), 0 1px 0 #000;
}

/* The plumbing run lives inside the shelf so it tracks the appliances, not
   the wall height: its pipe band crosses just above the washer / dryer /
   stove tops and disappears behind every body (the frayed ends hang into
   the gaps). Behind the appliances, never under the labels. */
.rr-pipes {
  position: absolute; z-index: -1; pointer-events: none; max-width: none;
  left: 50%; width: calc(var(--rr-floor-h) * 4.7); height: auto;
  bottom: calc(var(--rr-floor-h) * .36 + 14px);
  translate: -50% 0; rotate: -0.6deg;
  opacity: .9;
}

/* ------------------------------------------------------------------ shelf */
/* Small appliances sit on wall shelves either side of the wordmark; the four
   big ones stand on one floor line underneath, so the wall reads symmetric.
   Columns size to the appliances (not equal 1fr) so the cluster stays tight.
   Every appliance size derives from --rr-floor-h (washer = dryer = stove
   height), so the floor row always shares one top line. */
.rr-shelf {
  --rr-floor-h: 268px;
  position: relative; z-index: 2;
  display: grid;
  /* equal outer columns keep fridge / stove mirrored about the wordmark
     even though their sub-labels differ in length */
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "microwave logo   logo  crt"
    "fridge    washer dryer stove";
  justify-content: center;
  justify-items: center;
  column-gap: 14px;
  row-gap: 22px;
  align-items: end;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2px 8px;
}
/* steel wall shelf under the microwave and TV */
.rr-shelf .rr-app--microwave .rr-app__hit::before,
.rr-shelf .rr-app--crt .rr-app__hit::before {
  left: -9%; right: -9%; bottom: -11px; height: 11px; z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.55)),
    url("assets/steel-plate.webp") center / cover;
  border: 1px solid #000;
  box-shadow: 0 10px 14px -4px rgba(0,0,0,.75);
}
.rr-shelf .rr-app--microwave, .rr-shelf .rr-app--crt { gap: 10px; }
.rr-shelf::after {
  /* floor the big units stand on: starts just above their feet (label
     block ≈ 76px above the shelf bottom) and runs off both wall edges; the
     stencil labels read as painted on it */
  content: ""; position: absolute; left: -50vw; right: -50vw; bottom: -16px; height: 104px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.58) 16px, rgba(0,0,0,.5) 45%, rgba(0,0,0,.74) 100%);
  z-index: -1;
}

.rr-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; width: max-content; }
.rr-app--fridge { grid-area: fridge; }
.rr-app--microwave { grid-area: microwave; }
.rr-app--crt { grid-area: crt; }
.rr-app--stove { grid-area: stove; }
.rr-app--washer { grid-area: washer; }
.rr-app--dryer { grid-area: dryer; }

.rr-app__hit {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  width: 100%; display: block; position: relative;
  transition: transform .35s var(--rr-door-ease);
}
/* contact shadow + hover glow are static gradient layers; hover only moves
   the button (transform) and fades the glow (opacity) — nothing re-rasterises */
.rr-app__hit::before, .rr-app__hit::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
}
.rr-app__hit::before {
  left: 4%; right: 4%; bottom: -10px; height: 16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72), rgba(0,0,0,.3) 55%, transparent 80%);
}
.rr-app__hit::after {
  inset: -10% -14%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(0,255,65,.22), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.rr-app__hit:hover, .rr-app__hit:focus-visible {
  transform: translateY(-4px) scale(1.02);
  outline: none;
}
.rr-app__hit:hover::after, .rr-app__hit:focus-visible::after { opacity: 1; }
.rr-app__hit:focus-visible .rr-app__label-tag { box-shadow: 0 0 0 2px var(--rr-green); }
/* Floor units are sized by HEIGHT (width follows each render's aspect), so
   the washer and dryer can never drift apart in scale again; the two shelf
   units are sized by width so they read as a matched pair either side of
   the wordmark. */
.rr-app .rr-app__hit { width: max-content; max-width: none; }
.rr-app--washer .rr-body,
.rr-app--dryer .rr-body {
  /* Identical footprint so the pair reads matched. */
  width: calc(var(--rr-floor-h) * .74);
  height: var(--rr-floor-h);
  aspect-ratio: auto;
}
.rr-app--washer .rr-body__shell,
.rr-app--dryer .rr-body__shell { object-position: center bottom; }
.rr-app--stove .rr-body { height: var(--rr-floor-h); width: auto; }
.rr-app--fridge .rr-body { height: calc(var(--rr-floor-h) * 1.5); width: auto; }
.rr-app--microwave .rr-body,
.rr-app--crt .rr-body { width: calc(var(--rr-floor-h) * .7); height: auto; }

/* Wall peeks — microwave glass + old TV tube only. No fridge polaroid. */
.rr-peek {
  position: absolute; z-index: 8; overflow: hidden; pointer-events: none;
}
.rr-peek__well {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: #050505;
}
.rr-peek__img {
  position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1.15s ease;
}
.rr-peek__img.is-on { opacity: 1; }
.rr-peek__glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
}

/* Microwave: warm plate glow, light mesh so the sample stays readable. */
.rr-peek--microwave {
  border-radius: 3%;
}
.rr-peek--microwave .rr-peek__well {
  background:
    radial-gradient(75% 65% at 48% 55%, rgba(255,180,100,.35), transparent 68%),
    #1a100a;
}
.rr-peek--microwave .rr-peek__img {
  filter: saturate(.95) contrast(1.1) brightness(1.08);
}
.rr-peek--microwave .rr-peek__mesh {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  opacity: .38;
}
.rr-peek--microwave .rr-peek__glass {
  background:
    radial-gradient(90% 70% at 28% 22%, rgba(255,220,170,.16), transparent 48%),
    radial-gradient(100% 100% at 50% 55%, transparent 48%, rgba(0,0,0,.4));
  box-shadow: inset 0 0 14px rgba(0,0,0,.4);
}

/* Old TV: readable tube picture, light scanlines, soft vignette — not crushed. */
.rr-peek--crt {
  border-radius: 5% / 7%;
}
.rr-peek--crt .rr-peek__well {
  background: #000;
  border-radius: inherit;
}
.rr-peek--crt .rr-peek__img {
  filter: saturate(.9) contrast(1.08) brightness(1.0);
}
.rr-peek--crt .rr-peek__glass {
  background:
    radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.65)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    radial-gradient(70% 50% at 30% 18%, rgba(255,255,255,.1), transparent 45%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.65);
}

.rr-app.is-ghost .rr-peek { opacity: .15; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .rr-peek__img { transition: none; }
}

/* appliance body: layered shell / cavity / door */
.rr-body {
  position: relative; width: 100%;
  aspect-ratio: var(--w) / var(--h);
}
/* The swinging door has its own 3D box (.rr-door-rig). The body stays flat
   so the cavity's contents (shop tiles, cards, shelves) paint on phones. */
.rr-body--focus { transform-style: flat; }
.rr-door-rig {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  perspective: 1400px; transform-style: preserve-3d;
}
.rr-door-rig .rr-door { pointer-events: auto; }
.rr-body__shell { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* full-size render fades in over the half-size one in the focus copy */
.rr-hd { opacity: 0; transition: opacity .25s ease; }
.rr-hd.is-ready { opacity: 1; }
.rr-cavity {
  position: absolute; overflow: hidden; background: #050505;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9);
  /* clip the interior photo even when an ancestor is preserve-3d (mobile
     otherwise lets the picture paint a hair past the shell) */
  contain: paint;
}
.rr-cavity--round { border-radius: 50%; contain: none; }
.rr-cavity__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  min-width: 0; min-height: 0; max-width: 100%; max-height: 100%;
  filter: brightness(.88) contrast(1.06);
}
/* bulb / element light, positioned per appliance */
.rr-cavity__light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .8;
  background: radial-gradient(var(--ls, 60% 60%) at var(--lx, 50%) var(--ly, 50%), var(--lc, rgba(255,255,255,.4)), transparent 70%);
}
.rr-cavity__content { position: absolute; inset: var(--safe, 3%); z-index: 2; }
/* gasket + lip: dark outer edge, hairline light inner edge, depth vignette */
.rr-cavity__rim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.9),
    inset 0 0 0 3px rgba(255,255,255,.07),
    inset 0 0 22px 6px rgba(0,0,0,.72),
    inset 0 -16px 28px rgba(0,0,0,.45),
    inset 0 10px 18px rgba(0,0,0,.35);
}
.rr-cavity--round .rr-cavity__rim { box-shadow: inset 0 0 0 3px rgba(0,0,0,.9), inset 0 0 0 4px rgba(255,255,255,.06), inset 0 0 26px 10px rgba(0,0,0,.75); }
.rr-cavity--crt .rr-cavity__rim { box-shadow: inset 0 0 0 2px #000, inset 0 0 18px 4px rgba(0,0,0,.8), inset 0 0 40px rgba(0,255,65,.12); }
.rr-glow {
  /* window light leak at rest */
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,255,65,.35), rgba(0,255,65,0) 75%);
}
.rr-glow--round { border-radius: 50%; }
.rr-app__hit:hover .rr-glow, .rr-app__hit:focus-visible .rr-glow { opacity: .8; }

/* Doors swing with keyframes (not transitions): a keyframe animation is
   composited from its first frame even when the main thread is busy decoding
   the interior images, so the swing never snaps. The opening run starts with
   the FLIP: ~15° while the appliance travels (first 40%), then the full swing. */
.rr-door {
  position: absolute; overflow: hidden;
  transform-style: preserve-3d;
}
.is-opening .rr-door, .is-closing .rr-door {
  will-change: transform;
  animation-fill-mode: both;
  animation-delay: var(--door-delay, 0ms);
}
.is-opening .rr-door { animation-duration: var(--rr-door-open-ms); animation-timing-function: linear; }
.is-closing .rr-door { animation-duration: var(--rr-door-ms); animation-timing-function: var(--rr-door-ease); }
.is-opening .rr-door--hinge-right { animation-name: rr-door-right; }
.is-opening .rr-door--hinge-left { animation-name: rr-door-left; }
.is-opening .rr-door--hinge-bottom { animation-name: rr-door-bottom; }
.is-closing .rr-door--hinge-right { animation-name: rr-door-right-close; }
.is-closing .rr-door--hinge-left { animation-name: rr-door-left-close; }
.is-closing .rr-door--hinge-bottom { animation-name: rr-door-bottom-close; }
/* Signs matter: the free edge must come TOWARD the viewer (+z). For a hinge
   on the right the free edge is at x<0, so rotateY must be positive; hinge on
   the left → negative; hinge at the bottom (free edge y<0) → negative rotateX.
   With the signs the other way the door swings into the cavity and is hidden
   behind it until it clears the body — which reads as "snapping open". */
@keyframes rr-door-right {
  0% { transform: rotateY(0deg); animation-timing-function: ease-in-out; }
  40% { transform: rotateY(15deg); animation-timing-function: cubic-bezier(.18, .82, .2, 1); }
  100% { transform: rotateY(108deg); }
}
@keyframes rr-door-left {
  0% { transform: rotateY(0deg); animation-timing-function: ease-in-out; }
  40% { transform: rotateY(-15deg); animation-timing-function: cubic-bezier(.18, .82, .2, 1); }
  100% { transform: rotateY(-108deg); }
}
@keyframes rr-door-bottom {
  0% { transform: rotateX(0deg); animation-timing-function: ease-in-out; }
  40% { transform: rotateX(-14deg); animation-timing-function: cubic-bezier(.18, .82, .2, 1); }
  100% { transform: rotateX(-96deg); }
}
/* Hold the open pose even if a parent transform drops the keyframe (phones). */
.is-open .rr-door--hinge-right { transform: rotateY(108deg); }
.is-open .rr-door--hinge-left { transform: rotateY(-108deg); }
.is-open .rr-door--hinge-bottom { transform: rotateX(-96deg); }
@keyframes rr-door-right-close { from { transform: rotateY(108deg); } to { transform: rotateY(0deg); } }
@keyframes rr-door-left-close { from { transform: rotateY(-108deg); } to { transform: rotateY(0deg); } }
@keyframes rr-door-bottom-close { from { transform: rotateX(-96deg); } to { transform: rotateX(0deg); } }
.rr-door--round { border-radius: 50%; }
.rr-door--hinge-right { transform-origin: 100% 50%; }
.rr-door--hinge-left { transform-origin: 0 50%; }
.rr-door--hinge-bottom { transform-origin: 50% 100%; }
.rr-door__img {
  position: absolute; max-width: none; pointer-events: none; user-select: none;
  width: calc(100% / var(--fw)); height: calc(100% / var(--fh));
  left: calc(-1 * var(--fl) / var(--fw) * 100%); top: calc(-1 * var(--ft) / var(--fh) * 100%);
  backface-visibility: hidden;
}
.rr-door__back {
  position: absolute; inset: 0; backface-visibility: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.35)),
    #cfc8b8;
  box-shadow: inset 0 0 0 6px #b8b1a1, inset 0 0 40px rgba(0,0,0,.35);
}
.rr-door--round .rr-door__back { border-radius: 50%; }
.rr-door--hinge-right .rr-door__back, .rr-door--hinge-left .rr-door__back { transform: rotateY(180deg); }
.rr-door--hinge-bottom .rr-door__back { transform: rotateX(180deg); }

/* stencil label under each appliance */
/* labels never size a column: they take the appliance width plus a small
   bleed each side and wrap (balanced) when the wall is scaled down */
.rr-app__label { margin: 0 -16px; text-align: center; align-self: stretch; contain: inline-size; }
/* shelf units have the wordmark between them, so their labels can bleed wider */
.rr-app--microwave .rr-app__label, .rr-app--crt .rr-app__label { margin: 0 -30px; }
.rr-app__label-tag {
  display: inline-block; font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .16em;
  color: #e9e3d4; background: rgba(8,9,8,.82); border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #323632; padding: 5px 10px 4px;
  position: relative;
}
.rr-app__label-tag::before { content: "▸ "; color: var(--rr-green); }
.rr-app__label-sub { display: block; font-family: var(--rr-font-ui); font-size: 10px; color: #9aa79c; letter-spacing: .04em; margin-top: 4px; text-shadow: 0 1px 0 #000, 0 0 6px #000; text-wrap: balance;
  /* two lines reserved on every label, so a wrap (scaled wall, fallback
     font before Fragment Mono lands) never lifts one unit off the shared
     floor / shelf line */
  min-height: 2.8em; }

/* ------------------------------------------------------------------ strip */
.rr-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 12px 12px; background: linear-gradient(#0d0f0d, #070807); border-top: 2px solid #000; box-shadow: inset 0 1px 0 #262a26;
}
.rr-strip__panel { background: #0a0b0a; border: 1px solid #000; box-shadow: inset 0 0 0 1px #212421; padding: 8px 10px 10px; min-width: 0; }
.rr-strip__head { margin: 0 0 8px; font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .04em; color: #d9d4c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-strip__head span { color: var(--rr-green); }
.rr-strip__head em { font-style: normal; color: #b7c9ba; }
.rr-strip__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rr-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 1px solid #000; box-shadow: inset 0 0 0 1px #2a2e2a; }
.rr-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); transition: transform .4s ease; }
.rr-thumb:hover img { transform: scale(1.06); }
.rr-thumb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); pointer-events: none; }
.rr-thumb__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30px; height: 30px; border-radius: 50%;
  background: var(--rr-green); color: #000; display: grid; place-items: center; font-size: 12px; box-shadow: 0 0 14px rgba(0,255,65,.6); z-index: 1;
}
.rr-thumb__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3px 6px; font-size: 10px; background: rgba(0,0,0,.7); color: #dfe8df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-thumb--square { aspect-ratio: 1; }

/* ------------------------------------------------------------------- rail */
/* the rail is taken out of flow so it fills the column exactly (never taller than the stage)
   and the compose form can sit on the column's bottom edge */
.rr-right { position: relative; }
.rr-rail {
  position: absolute; inset: 12px;
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(5,6,5,.7); border: 1px solid #000; box-shadow: inset 0 0 0 1px #222622;
}
.rr-rail__head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .1em; color: #e9e3d4;
  background: linear-gradient(#1b1e1b, #0e100e); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #2d312d;
}
.rr-rail__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rr-green); box-shadow: 0 0 10px var(--rr-green); animation: rr-blink 1.8s steps(1) infinite; }
.rr-rail__more { margin-left: auto; color: var(--rr-green); font-size: 11px; }
.rr-feed { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; overflow: auto; flex: 1 1 0; min-height: 0; scrollbar-width: thin; scrollbar-color: #2b302b transparent; }
.rr-post { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 7px 8px; background: rgba(12,14,12,.9); border: 1px solid #000; box-shadow: inset 0 0 0 1px #1f231f; }
.rr-post:hover { box-shadow: inset 0 0 0 1px var(--rr-green-dim); }
.rr-post__avatar { width: 34px; height: 34px; background: #182018; border: 1px solid #000; display: grid; place-items: center; font-family: var(--rr-font-display); color: var(--rr-green); font-size: 14px; overflow: hidden; }
.rr-post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rr-post__name { font-family: var(--rr-font-display); font-size: 12px; color: #f0ebe0; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.rr-post__name small { font-family: var(--rr-font-ui); font-size: 9px; color: #7f8f82; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-post__body { font-size: 11px; color: #aab5ab; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-post__meta { font-size: 10px; color: var(--rr-green-dim); margin-top: 3px; }
.rr-post__img { margin-top: 6px; grid-column: 1 / -1; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border: 1px solid #000; filter: saturate(.85); }
.rr-say { display: grid; grid-template-columns: 1fr auto; margin-top: auto; border-top: 1px solid #000; box-shadow: inset 0 1px 0 #262a26; }
.rr-say__input { background: #060706; border: 0; color: #dfe8df; padding: 10px; font: inherit; font-family: var(--rr-font-crt); font-size: 16px; min-width: 0; }
.rr-say__input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--rr-green-dim); }
.rr-say__btn { background: var(--rr-green); border: 0; color: #000; font-family: var(--rr-font-display); font-size: 12px; padding: 0 14px; cursor: pointer; }

/* ------------------------------------------------------------------- foot */
.rr-foot {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 11px; color: #a6b0a7;
  background: linear-gradient(#0d0f0d, #050605); border-top: 2px solid #000; box-shadow: inset 0 1px 0 #262a26;
  position: relative; z-index: 6;
}
.rr-foot a { color: #d9d4c6; }
.rr-foot a:hover { color: var(--rr-green); }
.rr-foot__links { display: flex; gap: 18px; }
.rr-foot__donate { color: var(--rr-green) !important; font-family: var(--rr-font-display); letter-spacing: .1em; }

/* ------------------------------------------------------------------ focus */
/* While an appliance is open the page behind it cannot scroll. Body is
   fixed at the current scroll offset so the view does not jump. */
html.is-rr-locked, html.is-rr-locked body { overflow: hidden; height: 100%; }
html.is-rr-locked body {
  position: fixed; left: 0; right: 0; width: 100%;
  top: calc(-1 * var(--rr-lock-y, 0px));
}
.rr-focus { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.rr-focus[hidden] { display: none; }
.rr-focus__backdrop {
  /* plain darkening, no backdrop blur: a blur re-filters the whole page
     every frame the appliance moves */
  position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 50%, rgba(2,3,2,.82), rgba(2,3,2,.92));
  opacity: 0; transition: opacity .35s ease;
}
.rr-focus.is-visible .rr-focus__backdrop { opacity: 1; }
.rr-focus__dialog {
  position: relative; z-index: 1; outline: none;
  display: grid; grid-template-columns: minmax(0, auto) 300px; gap: 28px; align-items: center;
  width: min(96vw, 1180px); max-height: 96vh; padding: 20px;
}
.rr-focus__app {
  position: relative; justify-self: center;
  width: min(100%, calc((92vh - 40px) * var(--w) / var(--h)));
  transform-origin: 0 0;
}
/* floor shadow as a gradient layer (a drop-shadow filter on the FLIP-ing
   element would be re-run every frame of the travel) */
.rr-focus__app::before {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -4%; height: 14%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85), rgba(0,0,0,.4) 55%, transparent 80%);
}
.rr-focus__app.is-flipping { will-change: transform; transition: transform .5s var(--rr-door-ease), opacity .3s ease; }
.rr-focus__app .rr-body { width: 100%; }
.rr-focus__close {
  position: absolute; right: 12px; top: 8px; z-index: 5;
  background: #0a0b0a; border: 1px solid var(--rr-green-dim); color: var(--rr-green);
  font-family: var(--rr-font-display); font-size: 13px; padding: 7px 10px 6px; cursor: pointer;
}
.rr-focus__close span { font-size: 10px; color: #7f8f82; margin-left: 6px; }
.rr-focus__close:hover, .rr-focus__close:focus-visible { background: var(--rr-green); color: #000; outline: none; }
.rr-focus__close:hover span { color: #000; }
.rr-focus__panel {
  background: rgba(8,9,8,.9); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2a2e2a, 0 20px 40px rgba(0,0,0,.6);
  padding: 18px 18px 16px; opacity: 0; transform: translateX(14px); transition: opacity .4s ease .25s, transform .4s ease .25s;
}
.rr-focus.is-visible .rr-focus__panel { opacity: 1; transform: none; }
.rr-focus__kicker { font-family: var(--rr-font-ui); font-size: 10px; letter-spacing: .2em; color: var(--rr-green); }
.rr-focus__title { margin: 4px 0 8px; font-family: var(--rr-font-display); font-size: 26px; line-height: 1.05; color: #fff; text-shadow: 0 0 12px rgba(0,255,65,.35); }
.rr-focus__blurb { margin: 0 0 14px; color: #b3bdb4; font-size: 12px; }
.rr-focus__hint { margin: 14px 0 0; font-size: 10px; color: #6d7a6f; }

.rr-btn {
  display: inline-block; font-family: var(--rr-font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 14px 8px; border: 1px solid var(--rr-green-dim); color: var(--rr-green); background: rgba(0,0,0,.6);
}
.rr-btn:hover, .rr-btn:focus-visible { background: var(--rr-green); color: #000; outline: none; }
.rr-btn--primary { background: var(--rr-green); color: #000; box-shadow: 0 0 18px rgba(0,255,65,.35); }
.rr-btn--primary:hover { background: #fff; }
.rr-btn--tiny { font-size: 10px; padding: 5px 8px 4px; }

/* ------------------------------------------------------- interior widgets */
/* interiors sit back in the cavity, then come forward once the door is ~40% open */
.rr-int {
  position: absolute; inset: 0; font-family: var(--rr-font-ui); color: #eae4d6;
  opacity: 0; transform: scale(.93) translateY(2%); transform-origin: 50% 60%;
  transition: opacity .45s ease var(--int-delay, 300ms), transform .7s var(--rr-door-ease) var(--int-delay, 300ms);
}
.is-open .rr-int { opacity: 1; transform: none; }
.rr-int a { color: inherit; }

/* fridge: freezer band + tiles standing on the rendered shelves (rows are
   positioned inline from FRIDGE_SHELVES in app.js) */
.rr-fridge__freezer {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 3% 8% 2%;
  background: linear-gradient(180deg, rgba(210,240,225,.06), rgba(0,0,0,.28));
}
.rr-fridge__freezer h3 { margin: 0; font-family: var(--rr-font-display); font-size: clamp(14px, 2.6vw, 24px); color: #fff; text-shadow: 0 0 10px rgba(180,255,200,.6), 0 2px 0 #000; letter-spacing: .06em; }
.rr-fridge__freezer p { margin: 0; font-size: clamp(9px, 1.1vw, 12px); color: #cfe3d4; text-shadow: 0 1px 0 #000; }
.rr-fridge__freezer .rr-btn { align-self: flex-start; }
.rr-shelf-row {
  position: absolute; left: 9%; right: 9%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; align-items: end; padding-bottom: 1.2%;
}
.rr-shelf-row--drawer { left: 12%; right: 12%; padding-bottom: 5%; }
.rr-fridge__all { position: absolute; right: 8%; bottom: 1.5%; }
.rr-tile { display: grid; gap: 3px; text-align: center; transform-origin: 50% 100%; transition: transform .25s ease; }
.rr-tile:hover, .rr-tile:focus-visible { transform: translateY(-3px) scale(1.04); outline: none; }
.rr-tile:hover .rr-tile__name { color: var(--rr-green); }
.rr-tile__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border: 2px solid #f2f2f2; background: #000; box-shadow: 0 6px 8px rgba(0,0,0,.65); }
.rr-tile__img--emoji { display: grid; place-items: center; font-size: clamp(16px, 2.6vw, 30px); background: #101610; }
.rr-tile__name { font-family: var(--rr-font-display); font-size: clamp(8px, 1vw, 11px); letter-spacing: .04em; color: #f5f2ea; text-shadow: 0 1px 0 #000, 0 0 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-shelf-row--drawer .rr-tile__name { color: #cfe3d4; }

/* microwave: cards standing on the turntable (positions driven by app.js) */
.rr-micro { position: absolute; inset: 0; }
.rr-turntable { position: absolute; inset: 0; }
.rr-turntable__seat {
  position: absolute; translate: -50% -100%;
  transform: scale(var(--depth, 1)) rotate(var(--tilt, 0deg)); transform-origin: 50% 100%;
}
.rr-turntable__seat::after {
  /* contact shadow on the plate */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 8%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.7), transparent 80%); z-index: -1;
}
.rr-micro .rr-card { margin: 0; }

/* orbit primitive (washer + dryer drums) */
.rr-orbit { animation: rr-spin var(--spin, 50s) linear infinite; pointer-events: none; }
.rr-orbit__arm, .rr-orbit__seat, .rr-orbit__spin { pointer-events: none; }
.rr-orbit__spin > * { pointer-events: auto; }
.rr-orbit__arm { position: absolute; inset: 0; transform: rotate(var(--a)); }
.rr-orbit__seat {
  position: absolute; left: 50%; top: calc(50% - var(--r)); width: var(--size);
  translate: -50% -50%; transform: rotate(calc(-1 * var(--a)));
}
.rr-orbit__spin { animation: rr-counter var(--spin, 50s) linear infinite; }
.rr-orbit:hover, .rr-orbit:hover .rr-orbit__spin, .rr-orbit:focus-within, .rr-orbit:focus-within .rr-orbit__spin { animation-play-state: paused; }
@keyframes rr-counter { to { rotate: -360deg; } }
.rr-micro__hud {
  position: absolute; left: 4%; right: 4%; top: 3%; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--rr-font-crt); font-size: clamp(12px, 1.6vw, 20px); color: #ffd28a; text-shadow: 0 0 8px rgba(255,180,80,.6);
  background: rgba(0,0,0,.5); padding: 4px 8px; border: 1px solid rgba(255,210,138,.25);
}
.rr-micro__hud b { font-weight: 400; color: #fff; }

.rr-card {
  display: grid; gap: 4px; background: rgba(14,16,14,.94); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2c312c, 0 8px 20px rgba(0,0,0,.6);
  padding: 6px; text-align: left; transition: transform .25s ease;
}
.rr-card:hover, .rr-card:focus-visible { box-shadow: inset 0 0 0 1px var(--rr-green), 0 8px 20px rgba(0,0,0,.6); outline: none; }
.rr-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #000; background: #000; }
.rr-card__img--square { aspect-ratio: 1; }
.rr-card__kicker { font-size: clamp(7px, .8vw, 9px); letter-spacing: .12em; color: var(--rr-green); }
.rr-card__title { font-family: var(--rr-font-display); font-size: clamp(9px, 1.1vw, 12px); color: #fff; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-card__meta { font-size: clamp(7px, .85vw, 10px); color: #8ea093; }
.rr-card__price { font-family: var(--rr-font-crt); font-size: clamp(11px, 1.4vw, 16px); color: var(--rr-green); }

/* drums: washer (shop) + dryer (gallery); ring width = drum floor, set by orbit() */
.rr-drum { position: absolute; inset: 0; }
.rr-drum__ring { position: absolute; left: 50%; top: 50%; width: var(--ring, 100%); aspect-ratio: 1; translate: -50% -50%; }
.rr-drum__center {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 4px;
  background: radial-gradient(circle, rgba(0,0,0,.85), rgba(0,0,0,.6) 60%, transparent 100%);
}
.rr-drum__center .rr-btn { white-space: nowrap; }
.rr-drum__center h3 { margin: 0; font-family: var(--rr-font-display); font-size: clamp(11px, 1.4vw, 16px); color: #fff; text-shadow: 0 0 12px rgba(0,255,65,.5); }
.rr-gal { display: block; border: 3px solid #f3f0e8; background: #000; transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease; box-shadow: 0 8px 12px rgba(0,0,0,.75); }
.rr-gal img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rr-gal:hover, .rr-gal:focus-visible { transform: rotate(0deg) scale(1.06); outline: none; }
/* shop tile: square, image first, price badge; name only on hover / focus */
.rr-item {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #0b0d0b;
  border: 2px solid #ece7db; transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease;
  box-shadow: 0 8px 12px rgba(0,0,0,.75);
}
.rr-item img { width: 100%; height: 100%; object-fit: cover; }
.rr-item__price { position: absolute; left: 0; bottom: 0; font-family: var(--rr-font-crt); font-size: clamp(10px, 1.3vw, 15px); line-height: 1; color: #000; background: var(--rr-green); padding: 2px 5px 1px; }
.rr-item__name {
  position: absolute; inset: auto 0 0 0; padding: 18px 5px 4px; font-family: var(--rr-font-display); font-size: clamp(7px, .8vw, 10px); line-height: 1.15;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.9)); opacity: 0; transition: opacity .2s ease; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rr-item:hover, .rr-item:focus-visible { transform: rotate(0deg) scale(1.08); outline: none; border-color: var(--rr-green); }
.rr-item:hover .rr-item__name, .rr-item:focus-visible .rr-item__name { opacity: 1; }
.rr-item:hover .rr-item__price, .rr-item:focus-visible .rr-item__price { z-index: 1; }

/* stove: oven only — hero on the upper rack (front edge ≈ 49%), trays on the lower rack (≈ 86%) */
.rr-oven { position: absolute; inset: 0; }
.rr-oven__hero {
  position: absolute; left: 6%; right: 6%; bottom: 51%; height: 38%;
  display: flex; gap: 4%; align-items: flex-end;
}
.rr-oven__hero img { height: 100%; width: auto; flex: none; aspect-ratio: 1; object-fit: cover; border: 2px solid #f3e6c7; box-shadow: 0 0 24px rgba(255,120,40,.35), 0 8px 10px rgba(0,0,0,.8); }
.rr-oven__hero-text { display: grid; gap: 3px; padding-bottom: 2%; min-width: 0; flex: 1 1 0; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.rr-oven__hero strong { font-family: var(--rr-font-display); font-size: clamp(11px, 1.4vw, 17px); color: #fff; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-oven__hero small { font-size: clamp(8px, .9vw, 10px); color: #ffd28a; letter-spacing: .12em; }
.rr-oven__hero em { font-style: normal; font-family: var(--rr-font-crt); font-size: clamp(10px, 1.2vw, 14px); color: var(--rr-green); }
.rr-oven__hero:hover strong, .rr-oven__hero:focus-visible strong { color: var(--rr-green); }
.rr-oven__hero:focus-visible { outline: none; }
.rr-oven__trays {
  position: absolute; left: 10%; right: 10%; bottom: 14%; height: 26%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%; align-items: end;
}
.rr-oven__tray { display: grid; gap: 2px; justify-items: center; min-width: 0; transition: transform .25s ease; transform-origin: 50% 100%; }
.rr-oven__tray img { width: 100%; max-height: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #f3e6c7; box-shadow: 0 0 14px rgba(255,120,40,.3), 0 6px 8px rgba(0,0,0,.8); }
.rr-oven__tray span { font-family: var(--rr-font-display); font-size: clamp(7px, .8vw, 9px); color: #ffe3b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 0 #000; }
.rr-oven__tray:hover, .rr-oven__tray:focus-visible { transform: translateY(-4px) scale(1.05); outline: none; }
.rr-oven__tray:hover span { color: var(--rr-green); }

/* crt: video screen */
.rr-cavity--crt { background: #000; border-radius: 4% / 5%; }
.rr-screen {
  position: absolute; inset: 0; overflow: hidden; background: radial-gradient(110% 100% at 50% 50%, #0b1a0f 0%, #020402 85%);
  transform: scaleY(.004); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1) .15s, opacity .2s ease .15s;
}
.is-open .rr-screen { transform: scaleY(1); opacity: 1; }
.rr-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.rr-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(100% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.7)); }
.rr-screen__hud { position: absolute; left: 4%; right: 4%; top: 4%; z-index: 2; display: flex; justify-content: space-between; font-family: var(--rr-font-crt); font-size: clamp(12px, 1.6vw, 20px); color: var(--rr-green); text-shadow: 0 0 8px rgba(0,255,65,.7); }
.rr-screen__grid { position: absolute; left: 4%; right: 4%; top: 17%; bottom: 5%; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3%; }
.rr-vid { position: relative; display: block; overflow: hidden; border: 1px solid var(--rr-green-dim); background: #000; }
.rr-vid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.1); }
.rr-vid:hover img, .rr-vid:focus-visible img { filter: saturate(1) contrast(1.1); }
.rr-vid:focus-visible { outline: 1px solid var(--rr-green); }
.rr-vid__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: clamp(7px, .85vw, 10px); background: rgba(0,0,0,.75); color: #dfe8df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-vid__ch { position: absolute; left: 0; top: 0; padding: 2px 5px; font-size: clamp(6px, .7vw, 8px); letter-spacing: .12em; background: var(--rr-green); color: #000; }
.rr-vid__play { position: absolute; left: 50%; top: 45%; translate: -50% -50%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: rgba(0,255,65,.9); color: #000; display: grid; place-items: center; font-size: clamp(8px, 1vw, 12px); }

/* ghost the wall copy while the focus copy is open */
.rr-app.is-ghost .rr-app__hit { opacity: .18; transform: none; }
.rr-app.is-ghost .rr-app__hit::before, .rr-app.is-ghost .rr-app__hit::after { opacity: 0; }

/* all continuous motion pauses while the tab is hidden (app.js toggles the class) */
.is-hidden .rr-ticker__track, .is-hidden .rr-vinyl, .is-hidden .rr-orbit, .is-hidden .rr-orbit__spin,
.is-hidden .rr-rail__dot, .is-hidden .rr-crt-tile__deck i { animation-play-state: paused; }

/* ------------------------------------------------------------ responsive */
/* the shelf is ≈ 2.91 × --rr-floor-h + 46px wide; shrink the whole wall
   together (never one appliance) so ~30px of wall stays either side */
@media (max-width: 1240px) {
  .rr-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .rr-top { grid-template-columns: auto 1fr auto; }
  .rr-ticker { grid-column: 1 / -1; grid-row: 2; }
  .rr-shelf { --rr-floor-h: min(268px, calc((100vw - 404px) / 2.91)); }
}
@media (max-width: 1024px) {
  .rr-shelf { --rr-floor-h: min(268px, calc((100vw - 144px) / 2.91)); }
  .rr-grid { grid-template-columns: 1fr; }
  .rr-right { order: 2; border-left: 0; border-top: 1px solid #000; }
  .rr-stage { order: 1; }
  .rr-rail { position: static; inset: auto; }
  .rr-feed { max-height: 360px; }
  .rr-focus__dialog { grid-template-columns: 1fr; gap: 14px; overflow: auto; align-content: start; }
  .rr-focus__app { width: min(100%, calc((70vh) * var(--w) / var(--h))); }
}
@media (max-width: 720px) {
  .rr-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rr-top__account { display: none; }
  .rr-wall { padding: 12px 12px 18px; }
  .rr-shelf {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "logo logo"
      "fridge microwave"
      "washer crt"
      "stove dryer";
    gap: 18px 12px;
    justify-content: stretch;
  }
  .rr-shelf .rr-app--microwave .rr-app__hit::before,
  .rr-shelf .rr-app--crt .rr-app__hit::before { display: none; }
  .rr-shelf .rr-app--microwave, .rr-shelf .rr-app--crt { gap: 10px; }
  .rr-shelf { --rr-floor-h: min(200px, calc((100vw - 36px) / 1.48)); }
  .rr-wordmark { max-width: 260px; }
  .rr-wordmark__sub { font-size: 15px; }
  .rr-pipes { display: none; }
  .rr-strip { grid-template-columns: 1fr; }
  .rr-strip__row { grid-template-columns: repeat(3, 1fr); }
  /* The open appliance sits in the middle of the visible screen. The note
     panel is pinned under it. Touch on the scrim does not scroll the page. */
  .rr-focus {
    inset: 0;
    height: 100dvh; max-height: 100dvh;
    touch-action: none;
    overscroll-behavior: none;
  }
  .rr-focus__dialog {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: block;
  }
  .rr-focus__app {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    --rr-fit: min(42dvh, calc(100dvh - 300px));
    width: min(92%, calc(var(--rr-fit) * var(--w) / var(--h)));
    max-height: var(--rr-fit);
    min-height: 0;
  }
  .rr-focus__app .rr-body { width: 100%; max-height: var(--rr-fit); }
  .rr-focus__panel {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    transform: none;
    max-height: min(24dvh, 200px);
    overflow: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  /* Interiors were opacity 0 until .is-open. On a phone that paint often
     never lands, then flashes for a frame as the door shuts. Show them as
     soon as they mount; the door still covers them until it swings. */
  .rr-focus .rr-int, .rr-focus .rr-screen { opacity: 1; transform: none; transition: none; }
  /* Shop and gallery tiles: no rotate/spin. Those transforms inside the
     round porthole are what a phone fails to paint. */
  .rr-focus .rr-orbit, .rr-focus .rr-orbit__spin { animation: none; }
  .rr-focus .rr-orbit__arm { transform: none; }
  .rr-focus .rr-orbit__seat {
    transform: none; translate: none;
    left: calc(var(--x) - var(--size) / 2);
    top: calc(var(--y) - var(--size) / 2);
  }
  .rr-focus .rr-item, .rr-focus .rr-gal { transform: none; }
  .rr-focus .rr-item__name { opacity: 1; }
  /* Tuck the fridge photo inside the shell. Cover-fit was painting a hair
     past the metal on a narrow screen. */
  .rr-body--fridge .rr-cavity__img {
    inset: auto;
    left: 1.5%; top: 1.5%;
    width: 97%; height: 97%;
  }
  .rr-foot { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-ticker__track, .rr-vinyl, .rr-orbit, .rr-orbit__spin, .rr-rail__dot, .rr-crt-tile__deck i { animation: none !important; }
  .rr-door { transition: opacity .3s ease; }
  .is-opening .rr-door, .is-closing .rr-door { animation: none !important; }
  .is-open .rr-door { transform: none !important; opacity: 0; pointer-events: none; }
  .rr-focus__app.is-flipping { transition: opacity .25s ease; }
  .rr-int { transition: opacity .3s ease; transform: none; }
  .rr-app__hit, .rr-tile, .rr-gal, .rr-item, .rr-oven__tray, .rr-thumb img, .rr-poster__img { transition: none; }
  .rr-screen { transition: opacity .3s ease; transform: none; }
}