/*
 * The demo page.
 *
 * This is the site, not the library. The library's own stylesheet is loaded
 * first and is never edited here — everything below is page furniture, so what
 * you see running is genuinely the shipped components rather than a special
 * demo build of them.
 *
 * It is a catalogue, not a landing page: dark, dense, monospace labels, and
 * every cell carrying a live component rather than a description of one.
 *
 * Crafted by SoyRage Agency — https://soyrage.es/
 */

:root {
  --ink: #0b0b0b;
  --panel: #121212;
  --panel-2: #171717;
  --line: #242424;
  --line-soft: #1c1c1c;
  --text: #f1eee9;
  --dim: #8d8880;
  --accent: var(--rm-accent);
  --shell: 1240px;

  /* The library reads these; keep the demo and the kit on one palette. */
  --rm-pill-color: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--rm-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
code, pre { font-family: var(--rm-mono); }
img { display: block; max-width: 100%; }

.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto; }

/*
 * Entrances that arrive from the side are transforms, and a transform still
 * counts toward the scrollable area even though it changes no layout. On a
 * wide screen there is room to absorb it; on a phone it is the difference
 * between a page that sits still and one that slides under your thumb. This is
 * a decision about the page rather than a patch on the components, which is
 * why it lives here and not in the library.
 */
main { overflow-x: clip; }

/* ── Type scale ──────────────────────────────────────────────────────── */

/*
 * Section marks.
 *
 * The number is the display face at a size you can read across the room, the
 * name beside it is a sentence rather than a category, and a hairline carries
 * the eye to the right. Monospace is kept for what monospace is for — code and
 * attribute names — and stays out of the headings.
 */
.section-mark {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--rm-display);
  font-size: clamp(14px, 1.7vw, 17px);
  letter-spacing: -0.01em;
  color: var(--text);
}
.section-mark em {
  flex: none;
  font-style: normal;
  font-family: var(--rm-display);
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--accent);
}
.section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.pair-mark {
  margin: 0 0 12px;
  font-family: var(--rm-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--dim);
}
.pair-mark.is-on { color: var(--accent); }

.hero-readout {
  margin: 0 0 18px;
  font-family: var(--rm-display);
  font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: 0.01em;
  color: var(--dim);
  /* The scramble changes every glyph; tabular figures keep it from jittering. */
  font-variant-numeric: tabular-nums;
}

.mono-label {
  margin: 0 0 18px;
  font-family: var(--rm-display);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.mono-label.accent { color: var(--accent); }

.h2 {
  margin: 0 0 18px;
  font-family: var(--rm-display);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 20ch;
}

.lede { margin: 0; color: var(--dim); max-width: 62ch; font-size: 16.5px; }
.prose { color: #c9c4bc; max-width: 62ch; }
.prose.small { font-size: 14.5px; }
.note { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.55; }
.hint { margin: 14px 0 0; color: #6c675f; font-size: 13px; }

code { font-size: 0.9em; }
.prose code, .lede code, .note code, .cursor-note code {
  background: #1d1d1d;
  padding: 1px 6px;
  border-radius: 5px;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px max(20px, calc((100% - var(--shell)) / 2));
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.bar.is-small { border-bottom-color: var(--line); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rm-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.bar-nav { display: flex; gap: 2px; }
.bar-nav a {
  padding: 7px 14px;
  border-radius: var(--rm-radius-pill);
  text-decoration: none;
  font-size: 14px;
  color: var(--dim);
}
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--text); }

.bar-end { display: flex; align-items: center; gap: 8px; }
.only-narrow { display: none; }
@media (max-width: 900px) {
  .bar-nav { display: none; }
  .only-narrow { display: inline-flex; }
}

/* ── Controls ────────────────────────────────────────────────────────── */

.ghost, .solid {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: var(--rm-radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.ghost:hover { border-color: #3a3a3a; }
.solid { background: var(--text); color: var(--ink); border-color: transparent; }
.big { padding: 14px 24px; font-size: 15px; }
.big code { font-size: 13.5px; }

.mono-hint {
  font-family: var(--rm-display);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}
/* The directional fill lands behind the label. */
.rm-fill > * { position: relative; z-index: 1; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(60px, 9vw, 110px) 0 clamp(48px, 7vw, 88px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; }

.hero-title {
  margin: 0 0 24px;
  font-family: var(--rm-display);
  font-weight: 700;
  font-size: clamp(46px, 8.6vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 15ch;
  font-variation-settings: "wght" 700, "wdth" 100;
}

.hero-lede { margin: 0 0 32px; max-width: 54ch; color: #b6b0a8; font-size: clamp(16px, 1.6vw, 19px); }
.hero-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 6vw, 72px); }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 28px;
  margin: 0;
  border-top: 1px solid var(--line);
}
.hero-facts > div { padding: 20px 0 0; }
.hero-facts dt {
  font-family: var(--rm-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-facts dd { margin: 8px 0 0; color: var(--dim); font-size: 13.5px; }

/* ── Sections ────────────────────────────────────────────────────────── */

.section { padding: clamp(56px, 8vw, 104px) 0; border-bottom: 1px solid var(--line-soft); }
.head { margin-bottom: clamp(32px, 4vw, 56px); }

/* ── Index ───────────────────────────────────────────────────────────── */

/*
 * Columns rather than a grid: with six families of very different lengths, a
 * grid leaves the longest one alone on a second row with four empty tracks
 * beside it. Multi-column flows them and balances the height.
 */
.index-grid { columns: 5 200px; column-gap: 30px; }
.index-family { break-inside: avoid; margin-bottom: 28px; }
.index-family h3 {
  margin: 0 0 12px;
  font-family: var(--rm-display);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-weight: 600;
}
.index-family h3:not(:first-child) { margin-top: 26px; }
.index-family ul { margin: 0; padding: 0; list-style: none; }
.index-family li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.index-family b { font-weight: 500; font-size: 14.5px; }
.index-family code { color: #5f5b54; font-size: 11px; white-space: nowrap; }

/* ── Rails and cells ─────────────────────────────────────────────────── */

.rail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(40px, 5vw, 64px) auto 18px;
}
.rail-name {
  font-family: var(--rm-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.rail::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}
.cell-wide { grid-column: span 2; }
@media (max-width: 620px) { .cell-wide { grid-column: span 1; } }

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  min-height: 216px;
}
.cell-tall { min-height: 320px; }

.cell-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--rm-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
}
.cell-hint {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5f5b54;
}

.cell-body {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  min-height: 132px;
}
.cell-body.flush, .cell-body-flush { padding: 0; }
.cell-body-tall { min-height: 210px; }

.cell-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--rm-radius-pill);
  background: var(--panel);
  color: #6c675f;
  font-family: var(--rm-mono);
  font-size: 10.5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.cell:hover .cell-copy, .cell-copy:focus-visible { opacity: 1; }
.cell-copy:hover { border-color: var(--accent); color: var(--accent); }
.cell-copy.is-done { border-color: var(--accent); color: var(--accent); opacity: 1; }
.cell-copy.inline, .cell-copy.wide { position: static; opacity: 1; }
.cell-copy.inline { margin-top: 18px; padding: 9px 16px; font-size: 11.5px; }

/*
 * The type inside a cell. Stated with the cell in the selector so it beats the
 * cell's own paragraph rules — the first version of this page lost every demo
 * headline to a 14px grey `p` rule and rendered the whole gallery as captions.
 */
.cell .type-lg, .cell .type-xl, .cell .type-mono-lg {
  margin: 0;
  text-align: center;
  color: var(--text);
}
.cell .type-lg {
  font-family: var(--rm-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.cell .type-xl {
  font-family: var(--rm-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cell .type-mono-lg { font-family: var(--rm-mono); font-size: 16px; letter-spacing: 0.08em; }

.chip {
  font-family: var(--rm-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  border-radius: var(--rm-radius-pill);
  border: 1px solid #2f2f2f;
  color: #cfcac2;
  white-space: nowrap;
}
.plate { background: #0e0e0e; }

.curve { color: var(--accent); font-family: var(--rm-mono); font-size: 10px; letter-spacing: 0.1em; }

.ticker { display: flex; gap: 14px; font-family: var(--rm-mono); font-size: 13px; color: #cfcac2; }
.ticker span:nth-child(even) { color: var(--accent); }

/* ── Beam and blur cells ─────────────────────────────────────────────── */

.beam-body { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; }
.node {
  font-family: var(--rm-mono);
  font-size: 11px;
  padding: 10px 14px;
  border: 1px solid #2f2f2f;
  border-radius: 9px;
  background: var(--panel);
  position: relative;
  z-index: 1;
}

.blur-body { position: relative; display: block; padding: 0; }
.blur-scroll { height: 100%; padding: 16px; font-size: 13px; color: #b6b0a8; }
.blur-scroll p { margin: 0 0 10px; }
.blur-cap { position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; }

/* ── Buttons and cursor cells ────────────────────────────────────────── */

.button-body { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; justify-content: center; }
.cursor-body { display: grid; gap: 14px; place-items: center; text-align: center; }
.cursor-note { margin: 0; color: var(--dim); font-size: 13px; max-width: 46ch; }
.cursor-picker { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cursor-picker button {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--dim);
  font-family: var(--rm-display);
  font-size: 11px;
  cursor: pointer;
}
.cursor-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ── Carousel strip ──────────────────────────────────────────────────── */

.carousel-strip { margin: clamp(40px, 5vw, 64px) 0 14px; }
.strip-name { margin-bottom: 14px; }
.carousel-pad { padding-inline: max(20px, calc((100% - var(--shell)) / 2)); }
.slide {
  width: min(320px, 74vw);
  min-height: 200px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.slide-n { font-family: var(--rm-mono); font-size: 11px; color: var(--accent); }
.slide h4 {
  margin: 0;
  font-family: var(--rm-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.slide p { margin: auto 0 0; font-family: var(--rm-mono); font-size: 11.5px; color: var(--dim); line-height: 1.75; }

/* ── Gallery cells ───────────────────────────────────────────────────── */

.ring-body { padding: 0; background: #0e0e0e; }
.ring-body img { width: 108px; border-radius: 8px; }

.deck-body { padding: 20px; }
.deck-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  height: 168px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #161616;
}
.deck-card b { font-family: var(--rm-display); font-size: 20px; letter-spacing: -0.02em; }
.deck-card span { font-size: 13px; color: var(--dim); }

.panels-body { padding: 10px; align-items: stretch; }
.panels-body .panel { display: block; height: 100%; min-height: 200px; }
.panels-body img { width: 100%; height: 100%; object-fit: cover; }

.orbit-body { min-height: 190px; }
.bead {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #2f2f2f;
  background: var(--panel);
  font-family: var(--rm-mono);
  font-size: 10px;
  color: #cfcac2;
}

.lines-body { color: #3d3d3d; padding: 10px; }

.dock-body nav { display: flex; align-items: flex-end; gap: 8px; }
.dock-body a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  background: #161616;
  text-decoration: none;
  font-family: var(--rm-mono);
  font-size: 11px;
  color: #cfcac2;
}

.pixel-holder, .scratch-holder, .cell-body.flush figure { width: 100%; height: 100%; margin: 0; }
.pixel-holder img, .scratch-holder img, .cell-body.flush figure img { width: 100%; height: 100%; object-fit: cover; }

.preview-body { padding: 0; align-items: stretch; }
.preview-list { position: relative; margin: 0; padding: 0; list-style: none; width: 100%; }
.preview-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.preview-list a {
  font-family: var(--rm-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.preview-list span { font-family: var(--rm-mono); font-size: 11px; color: #5f5b54; }

.trail-body { position: relative; min-height: 240px; }
.trail-hint {
  font-family: var(--rm-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #46423c;
}

/* ── Navigation cells ────────────────────────────────────────────────── */

.nav-body { padding: 20px; }
.mini-nav { display: flex; gap: 2px; }
.mini-nav a {
  padding: 8px 14px;
  border-radius: var(--rm-radius-pill);
  text-decoration: none;
  font-size: 14px;
  color: var(--dim);
  white-space: nowrap;
}
.mini-nav a[aria-current], .mini-nav a:hover { color: var(--text); }
.mini-nav.is-gooey a { color: var(--text); }

.tabs-body { display: block; padding: 8px; }
.tab-list { display: flex; gap: 4px; margin-bottom: 6px; }
.tab {
  padding: 8px 15px;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--dim);
  cursor: pointer;
}
.tab.is-current { background: var(--text); color: var(--ink); }
.tabs-body .tab-panel { padding: 10px 14px 4px; }
.tabs-body p { margin: 0; color: #b6b0a8; font-size: 14px; }

/* ── Scroll section ──────────────────────────────────────────────────── */

.tracing { position: relative; padding-left: 6px; margin-bottom: clamp(56px, 7vw, 96px); }
.tracing .cell-name { margin-bottom: 16px; }
.tracing .prose { margin: 0 0 18px; }

.scroll-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 800px) { .scroll-pair { grid-template-columns: 1fr; } }

.parallax-frame, .scrub-frame, .flatten-frame, .stack-frame, .sticky-frame {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.parallax-frame .cell-name, .scrub-frame .cell-name,
.flatten-frame .cell-name, .stack-frame .cell-name, .sticky-frame .cell-name { margin-bottom: 14px; }

.parallax-stack { position: relative; height: 300px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #0e0e0e; }
.parallax-stack img { position: absolute; width: 150px; border-radius: 8px; }
.parallax-stack img:last-child { width: 190px; }

.scrub-demo { display: grid; gap: 16px; align-content: center; height: 300px; }
.scrub-bar { height: 8px; border-radius: 4px; background: #1f1f1f; overflow: hidden; }
.scrub-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  /* The component only writes --rm-progress; what it means is decided here. */
  width: calc(var(--rm-progress, 0) * 100%);
}
.scrub-demo .prose { opacity: calc(0.35 + var(--rm-progress, 0) * 0.65); }

.flatten-frame { margin-bottom: clamp(56px, 7vw, 96px); perspective: 1400px; }
.flatten-frame img { width: min(720px, 100%); margin-inline: auto; border-radius: 12px; border: 1px solid var(--line); }

.stack-frame { margin-bottom: clamp(56px, 7vw, 96px); }
/*
 * A sticky stack needs somewhere to happen.
 *
 * With the cards 14px apart the whole pile formed inside a third of a screen,
 * so it was over before the eye caught it — correct, and invisible. The gap
 * between two cards is exactly how far you scroll between one pinning and the
 * next, so it is measured in screens, not pixels.
 */
.stack-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 20px;
  align-content: start;
  min-height: 178px;
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid var(--line);
  /* Opaque, and a shade lighter than the page: a pile has to hide what is
   * behind it or it is not a pile. */
  background: #17171a;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55);
  margin-bottom: 52vh;
}
/* The strip that stays visible when the next card lands on top of it. */
.stack-card b {
  grid-column: 1;
  align-self: center;
}
.stack-card h4 {
  grid-column: 2;
  margin: 0;
  font-family: var(--rm-display);
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--text);
}
.stack-card p { grid-column: 2; }
.stack-card:last-child { margin-bottom: 0; }
.stack-card b { font-family: var(--rm-mono); font-size: 12px; color: var(--accent); }
.stack-card p { margin: 0; color: #b6b0a8; max-width: 58ch; font-size: 14.5px; }

.sticky-frame { margin-bottom: clamp(56px, 7vw, 96px); }
.sticky-grid { display: grid; grid-template-columns: 300px 1fr; gap: 32px; }
.sticky-media { position: sticky; top: 110px; height: 340px; border-radius: 12px; overflow: hidden; background: #0e0e0e; }
.sticky-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sticky-panels > div { padding: 60px 0; }
.sticky-panels h3 { margin: 0 0 10px; font-family: var(--rm-display); font-size: 24px; letter-spacing: -0.02em; }
.sticky-panels p { margin: 0; color: #b6b0a8; max-width: 52ch; }
@media (max-width: 800px) {
  .sticky-grid { grid-template-columns: 1fr; }
  .sticky-media { position: static; }
}

.horizontal-frame { position: relative; }
.horizontal-track { display: flex; gap: 16px; align-items: center; height: 100vh; padding-inline: 4px; }
.h-card {
  flex: 0 0 auto;
  width: min(380px, 76vw);
  padding: 26px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.h-card .cell-name { margin-bottom: 12px; }

/* ── Compare ─────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.compare-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }

/* ── MCP ─────────────────────────────────────────────────────────────── */

.section-accent { background: #080808; }
.mcp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; }
@media (max-width: 860px) { .mcp-pair { grid-template-columns: 1fr; } }

.mcp-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.mcp-card.is-good { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.mcp-card pre {
  margin: 0 0 14px;
  padding: 15px;
  border-radius: 9px;
  background: #050505;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
}
.is-bad .mono-label { color: #d98a70; }

.install { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.install-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.install-row:last-of-type { border-bottom: 0; }
.install-row > span { font-size: 13.5px; color: var(--dim); }
@media (max-width: 720px) { .install-row { grid-template-columns: 1fr; gap: 8px; } }
.cell-copy.wide {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 12px;
  color: #cfcac2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Start ───────────────────────────────────────────────────────────── */

.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.start-card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.start-card h3 { margin: 0 0 12px; font-family: var(--rm-display); font-size: 21px; letter-spacing: -0.02em; }
.start-card p { margin: 0 0 12px; color: var(--dim); font-size: 14.5px; }
.start-card pre {
  margin: 0 0 10px;
  padding: 13px;
  border-radius: 9px;
  background: #050505;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.6;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer { padding: 44px 0 60px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: end; }
.footer-brand { margin: 0 0 6px; font-family: var(--rm-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.footer-links a { color: var(--dim); text-decoration: none; }
.footer-links a:hover { color: var(--text); }

/* ── Overlay menu ────────────────────────────────────────────────────── */

.menu { background: var(--ink); color: var(--text); text-align: center; }
.menu nav { display: grid; gap: 4px; }
.menu a {
  font-family: var(--rm-display);
  font-size: clamp(32px, 7vw, 66px);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
  line-height: 1.06;
}
.menu a:hover { color: var(--accent); }
.menu-hint { margin: 36px 0 0; font-family: var(--rm-mono); font-size: 11px; letter-spacing: 0.12em; color: #5f5b54; }

/* ── Toast ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 11px 20px;
  border-radius: var(--rm-radius-pill);
  background: var(--text);
  color: var(--ink);
  font-size: 14px;
  z-index: 1000;
}

/* ── Focus ───────────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Light cells ─────────────────────────────────────────────────────── */

.plate[data-rm-meteors], .plate[data-rm-lamp], .plate[data-rm-beams] { background: #080808; }

/* ── Disclosure cells ────────────────────────────────────────────────── */

.flip-body { padding: 14px; }
.flip-card { width: 100%; height: 100%; min-height: 200px; }
.flip-face {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #161616;
}
.flip-face.is-reverse { background: #10202e; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.flip-face b { font-family: var(--rm-display); font-size: 22px; letter-spacing: -0.02em; }
.flip-face span { font-size: 13px; color: var(--dim); }

.expand-body { padding: 14px; align-items: stretch; }
.expand-card {
  width: 100%;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #161616;
}
.expand-card h4 { margin: 0 0 6px; font-family: var(--rm-display); font-size: 21px; letter-spacing: -0.02em; }
.expand-card .note + .note { margin-top: 10px; }
.rm-expand.is-expanded { background: var(--panel); border-color: #333; padding: 28px; }

.accordion-body { display: block; padding: 8px; }
.acc-head {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.acc-head:hover { background: #1c1c1c; }
.acc-head.is-open { color: var(--accent); }
.acc-body .note { padding: 0 14px 14px; }

.drag-puck {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #161616;
  font-family: var(--rm-mono);
  font-size: 11px;
  color: var(--dim);
  user-select: none;
}

.shuffle-body { display: block; padding: 14px; align-self: stretch; }
.shuffle-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; width: 100%; }
.shuffle-filters button {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--dim);
  font-family: var(--rm-mono);
  font-size: 11px;
  cursor: pointer;
}
.shuffle-filters button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.shuffle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.shuffle-grid article {
  padding: 16px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #161616;
  font-family: var(--rm-mono);
  font-size: 11.5px;
  color: #cfcac2;
  text-align: center;
}

.roll-body { display: flex; flex-wrap: wrap; gap: 26px; align-content: center; justify-content: center; }
.roll-link {
  font-family: var(--rm-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.roll-link:hover .rm-roll-face.is-back, .roll-link .rm-roll-face.is-back { color: var(--accent); }

.cell time.type-lg { font-family: var(--rm-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }

/* ── Cursor dock ─────────────────────────────────────────────────────── */

/*
 * Offered, not imposed. Four custom cursors ship, and the point of shipping
 * four is that a site chooses one on purpose — so the page starts on the
 * system cursor and puts the switch somewhere you can find it.
 */
.cursor-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(12px);
}
.cursor-dock-label {
  font-family: var(--rm-display);
  font-size: 12px;
  letter-spacing: -0.005em;
  color: #5f5b54;
  padding-left: 4px;
}
@media (max-width: 720px) { .cursor-dock { display: none; } }

/* ── Chrome cells ────────────────────────────────────────────────────── */

.scrollbars-body { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: stretch; padding: 12px; }
.scroller {
  height: 150px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #141414;
}
.scroller p { margin: 0 0 8px; font-family: var(--rm-mono); font-size: 10.5px; color: var(--dim); }
.scroller span { display: block; height: 420px; background: linear-gradient(#1e1e1e, #101010); border-radius: 6px; }
@media (max-width: 720px) { .scrollbars-body { grid-template-columns: repeat(2, 1fr); } }

.menu-panel {
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: 0 20px 50px -30px rgb(0 0 0 / 0.9);
}
.menu-panel button {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.menu-panel button:hover, .menu-panel button:focus-visible { background: #202020; }

.chrome-body { display: grid; gap: 18px; place-items: center; }

.hover-body { display: flex; flex-wrap: wrap; gap: 16px; align-content: center; justify-content: center; }
.hover-link { font-family: var(--rm-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

.corner-card {
  display: grid;
  place-items: center;
  width: 78%;
  height: 108px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #141414;
}

/* ── The two big grids ───────────────────────────────────────────────── */

.rail-note { margin-bottom: 22px; }

.effect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}
.effect-tile {
  display: grid;
  place-items: center;
  height: 88px;
  padding: 8px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: center;
}
.effect-tile b {
  font-family: var(--rm-display);
  font-size: 12px;
  font-weight: 400;
  color: #cfcac2;
  word-break: break-word;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}
.button-cell {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: center;
  min-height: 108px;
  padding: 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
}
/*
 * The kit supplies the look; the page still supplies the shape. Wrapped in
 * :where() so it carries no specificity — otherwise these resets would sit at
 * the same weight as the kit's own rules, load later, and quietly cancel every
 * variant that sets a background.
 */
.button-cell :where(.rm-btn) {
  padding: 10px 18px;
  border-radius: var(--rm-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
/* A hard shadow and a cut corner both want a squarer box than a pill. */
.button-cell :where(.is-brutal, .is-brutal-move, .is-corner-cut, .is-notch, .is-dots, .is-stripes) {
  border-radius: 6px;
}
.button-cell :where(.is-corner-cut, .is-notch) { border-radius: 0; }
.button-cell-name {
  font-family: var(--rm-display);
  font-size: 11.5px;
  letter-spacing: -0.005em;
  color: #5f5b54;
}

/* ── Large navigation cells ──────────────────────────────────────────── */

.rail-body { padding: 18px; }
.mini-rail { display: grid; gap: 6px; padding-left: 14px; }
.mini-rail a { text-decoration: none; font-size: 14px; color: var(--dim); }
.mini-rail a[aria-current] { color: var(--text); }

.mini-bottom { display: flex; gap: 4px; padding: 6px; border-radius: var(--rm-radius-pill); border: 1px solid var(--line); }
.mini-bottom a { padding: 8px 14px; border-radius: var(--rm-radius-pill); text-decoration: none; font-size: 13.5px; color: var(--dim); }
.mini-bottom a[aria-current] { color: var(--text); }

.mega-body { align-items: start; padding: 18px; }
.mini-mega { width: 100%; }
.mega-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.mega-panel a { padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: 13.5px; color: var(--dim); }
.mega-panel a:hover, .mega-panel a:focus-visible { background: #202020; color: var(--text); }

/* ── Palette and drawer ──────────────────────────────────────────────── */

.palette-box {
  width: min(560px, 100%);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / 1);
}
.palette-input {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.palette-input:focus { outline: none; }
.palette-list { display: grid; padding: 6px; max-height: 46vh; overflow-y: auto; }
.palette-list a {
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  color: var(--dim);
}
.palette-list a.is-active { background: #202020; color: var(--text); }
.rm-command-empty { padding: 14px 18px; color: #5f5b54; font-size: 13.5px; }

.drawer {
  padding: 24px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.drawer nav { display: grid; gap: 4px; margin-bottom: 22px; }
.drawer nav a {
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  font-family: var(--rm-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.drawer nav a:hover, .drawer nav a:focus-visible { background: #1c1c1c; }

/* ── Form cells ──────────────────────────────────────────────────────── */

.form-body { display: grid; gap: 14px; place-items: center; align-content: center; width: 100%; }
.mascot-form { display: grid; gap: 12px; justify-items: center; width: min(300px, 100%); }
.field { position: relative; width: 100%; }
.input {
  width: 100%;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0e0e0e;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
.input:focus { outline: none; }
.range { width: min(260px, 100%); }
.lock-demo { display: grid; gap: 14px; justify-items: center; }
.lock-input { width: min(220px, 100%); text-align: center; letter-spacing: 0.3em; }
.grow-form, .grow-wrap { width: min(420px, 100%); }
.rm-otp-box { border: 1px solid var(--line); background: #0e0e0e; color: var(--text); }
.rm-float-label { color: #7d786e; }

/* ── Card looks ──────────────────────────────────────────────────────── */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.look-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
}
.look-media {
  display: block;
  height: 92px;
  border-radius: 9px;
  background: linear-gradient(140deg, #1b2a3c, #241c2e 60%, #2b2318);
}
.look-card h4 { margin: 0; font-family: var(--rm-display); font-size: 13px; font-weight: 500; color: #cfcac2; }
.look-meta { font-family: var(--rm-display); font-size: 11px; color: #5f5b54; }

/* ── Page set pieces ─────────────────────────────────────────────────── */

.page-piece { margin-bottom: clamp(48px, 6vw, 84px); }
.page-piece .cell-name { margin-bottom: 16px; }

.mosaic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mosaic-grid img { width: 100%; border-radius: 10px; }

.big-copy {
  font-family: var(--rm-display);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: 0;
  color: var(--text);
}

.timeline-demo { margin: 0; padding: 0; display: grid; gap: 26px; }
.timeline-demo li { display: grid; gap: 4px; }
.timeline-demo b { font-family: var(--rm-display); font-size: 19px; letter-spacing: -0.02em; }
.timeline-demo span { color: var(--dim); font-size: 14.5px; }

.wave-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.wave-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #161616, #101010);
}

/* ── More carousel cells ─────────────────────────────────────────────── */

.coverflow-pad { padding-block: 10px; }
.flow-slide { margin: 0; width: 200px; }
.flow-slide img { width: 100%; border-radius: 12px; }

.thumbs-body { padding: 14px; align-items: stretch; }
.thumbs-demo { display: grid; gap: 10px; width: 100%; }
.thumbs-main img { width: 100%; border-radius: 10px; }
.thumbs-strip button {
  flex: 0 0 auto;
  width: 62px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.thumbs-strip img { width: 100%; display: block; }

.wheel-body { min-height: 230px; }
.wheel-demo { width: 100%; height: 100%; }
.wheel-demo a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #2f2f2f;
  background: var(--panel);
  text-decoration: none;
  font-family: var(--rm-mono);
  font-size: 11px;
  color: #cfcac2;
}
.wheel-demo a.is-front { border-color: var(--accent); color: var(--accent); }

.slideshow-body { padding: 14px; align-items: stretch; }
.slideshow-demo { width: 100%; }
.slideshow-demo img { width: 100%; border-radius: 10px; }

.ticker-demo { padding: 16px 0; width: 100%; }
.ticker-line span {
  padding: 0 14px;
  font-family: var(--rm-mono);
  font-size: 13px;
  color: #cfcac2;
  white-space: nowrap;
}
.ticker-line:nth-child(2) span { color: var(--accent); }

.autoplay-holder { display: grid; gap: 10px; justify-items: center; padding: 14px; width: 100%; }
.peek-demo { width: 100%; }
.peek-demo span, .autoplay-holder .peek-demo span {
  display: grid;
  place-items: center;
  min-height: 96px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #161616;
  font-family: var(--rm-mono);
  font-size: 12px;
  color: var(--dim);
}
.autoplay-holder .peek-demo {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.autoplay-holder .peek-demo span { flex: 0 0 60%; scroll-snap-align: center; }
.rm-autoplay-control { color: var(--dim); border-color: var(--line); }

/* ── Phone shape cells ───────────────────────────────────────────────── */

.island-body { display: grid; gap: 14px; place-items: center; }
.island { background: #000; border: 1px solid var(--line); color: var(--text); font-size: 13px; padding: 0 4px; }
.island b { color: var(--accent); font-weight: 600; }
.small { padding: 7px 14px; font-size: 12.5px; }

.segmented { padding: 4px; border-radius: var(--rm-radius-pill); border: 1px solid var(--line); background: #0e0e0e; }
.segmented label { padding: 8px 16px; border-radius: var(--rm-radius-pill); font-size: 13.5px; color: var(--dim); }
.segmented label.is-current { color: var(--text); }

.context-zone {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 110px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  font-family: var(--rm-mono);
  font-size: 11.5px;
  color: var(--dim);
}

.sheet { background: var(--panel); border-top: 1px solid var(--line); }
.sheet-inner { padding: 8px 24px 32px; display: grid; gap: 12px; max-width: 620px; margin-inline: auto; }
.sheet-inner h3, .modal-inner h3 { margin: 0; font-family: var(--rm-display); font-size: 24px; letter-spacing: -0.02em; }

.modal-inner {
  width: min(460px, calc(100vw - 32px));
  padding: 26px;
  display: grid;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.actions .action {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.actions .is-danger { color: var(--rm-terracotta); }
.actions .is-cancel { margin-top: 6px; font-weight: 600; }

.rm-toast { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; }
.rm-toast.is-good { border-color: color-mix(in srgb, #2f9e63 50%, var(--line)); }
.rm-toast.is-bad { border-color: color-mix(in srgb, #d98a70 50%, var(--line)); }

/* ── Feedback cells ──────────────────────────────────────────────────── */

.spinner-body { display: flex; flex-wrap: wrap; gap: 22px; align-content: center; justify-content: center; color: var(--accent); }
.skeleton-body { align-items: stretch; padding: 16px; }
.skeleton-holder { width: 100%; color: var(--text); }
.bar-holder { width: min(240px, 100%); }
.status-line { font-size: 14px; color: var(--dim); }
.badge-holder { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); }
.badge-pill {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--rm-mono);
  font-size: 11px;
  text-align: center;
}
.empty-body { align-items: center; }
.empty-demo { display: grid; gap: 10px; justify-items: center; text-align: center; }
.empty-demo h4 { margin: 0; font-family: var(--rm-display); font-size: 22px; letter-spacing: -0.02em; }
.empty-demo .note { max-width: 42ch; }

/* ── Data cells ──────────────────────────────────────────────────────── */

.spark-holder { width: 100%; height: 90px; color: var(--accent); }
.bars-holder {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 130px;
  width: 100%;
}
.bars-holder li { display: grid; gap: 6px; justify-items: center; flex: 1; height: 100%; align-content: end; }
.bars-holder .rm-bars-fill { width: 100%; height: 100px; }
.bars-holder span { font-family: var(--rm-mono); font-size: 10px; color: #5f5b54; }
.chart-body { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.donut-holder strong { font-family: var(--rm-display); font-size: 20px; letter-spacing: -0.02em; }
.stat-card { display: grid; gap: 2px; justify-items: center; }
.stat-card strong { font-family: var(--rm-display); font-size: 30px; letter-spacing: -0.03em; }
.stat-card span { font-size: 13px; color: var(--dim); }
.stars-holder { color: var(--text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Menu shapes ─────────────────────────────────────────────────────────── */

.circle-body { min-height: 210px; }
.circle-nav { position: relative; display: inline-flex; }
.circle-nav .rm-circle-nav-item > a {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.circle-nav .rm-circle-nav-item > a:hover { border-color: var(--accent); color: var(--accent); }

.spread-nav { display: flex; gap: 22px; font-size: 13px; }
.spread-nav a { color: var(--dim); text-decoration: none; }
.spread-nav a:hover, .spread-nav a:focus-visible { color: var(--text); }

.crumbs { font-size: 12px; color: var(--dim); }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); }

.tree-body { align-items: start; justify-items: start; padding: 18px 20px; }
.tree { font-size: 12px; width: 100%; }
.tree button, .tree a { color: var(--dim); font-size: 12px; }
.tree button:hover, .tree a:hover { color: var(--text); }
.tree a { color: var(--dim); }

.split-body { padding: 0; }
.split-bar {
  width: 100%;
  height: 100%;
  min-height: 132px;
  align-items: stretch;
  background: var(--panel-2);
}
.split-bar .split-half {
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  font-family: var(--rm-display);
  letter-spacing: 0.02em;
  font-size: 15px;
}
.split-back {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.split-back a { color: var(--dim); text-decoration: none; }
.split-back a:hover { color: var(--accent); }
.split-trigger {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  padding: 3px 12px;
  cursor: pointer;
}
.split-trigger:hover { color: var(--text); border-color: var(--accent); }

.stack-body { min-height: 190px; align-content: start; padding-top: 20px; }
.stack-nav { display: grid; gap: 12px; justify-items: center; width: 100%; }
.stack-nav ul { width: min(190px, 100%); }
.stack-nav li a {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--dim);
  font-size: 12px;
  text-decoration: none;
  text-align: center;
}
.stack-nav li a:hover { color: var(--text); border-color: var(--accent); }

.dot-nav { padding: 4px 0; }
.dot-nav .rm-dot-nav-text { color: var(--dim); }

.curtain { background: var(--ink); }
.curtain-col { border-right-color: var(--line-soft); }
.curtain-head {
  margin: 0 0 6px;
  font-family: var(--rm-display);
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--dim);
}
.curtain-col a {
  font-family: var(--rm-display);
  font-size: clamp(20px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.curtain-col a:hover { color: var(--accent); }
.curtain-col .ghost { margin-top: 14px; justify-self: start; }

/* ── Texture ─────────────────────────────────────────────────────────────── */

.texture-body { position: relative; min-height: 150px; padding: 0; }
.texture-label {
  position: relative;
  z-index: 1;
  font-family: var(--rm-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Text box cells ──────────────────────────────────────────────────────── */

.search-line { width: min(320px, 100%); }
.search-line .icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.search-line .icon-button:hover { border-color: var(--accent); }
.input.is-pill { border-radius: 999px; padding-inline: 18px; }

.tags-holder, .select-holder, .clear-holder, .mask-holder, .inline-holder {
  width: min(300px, 100%);
}
.inline-holder { justify-self: center; font-family: var(--rm-display); font-size: 19px; }

.input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.input-cell {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel);
}
.input-cell > span:first-child {
  font-family: var(--rm-display);
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--dim);
}

/* ── Phone ───────────────────────────────────────────────────────────────── */

/*
 * Everything here is a size, not a different design. The catalogue reads the
 * same on a phone as on a desk — one column instead of four, a tighter shell,
 * and the pieces that only mean something with a pointer stood down.
 */
@media (max-width: 560px) {
  .shell { width: calc(100% - 28px); }

  .bar { gap: 10px; padding: 10px 14px; }
  .bar-end { gap: 8px; }
  .bar .solid, .bar .ghost { padding: 8px 13px; font-size: 13px; }
  /* The star count is a nicety; the button it sits beside is the point. */
  .bar .stars-link { display: none; }

  .cells { grid-template-columns: 1fr; gap: 12px; }
  .effect-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .button-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .input-grid { grid-template-columns: 1fr; }
  .mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  .index-families { grid-template-columns: 1fr; }

  .cell-body { min-height: 118px; padding: 14px; }
  .stage-display { font-size: clamp(26px, 9vw, 40px); }

  /* A hover-only control on a touch screen is a control nobody can reach. */
  .cursor-dock { display: none; }
}

@media (max-width: 400px) {
  .shell { width: calc(100% - 20px); }
  .effect-grid { grid-template-columns: repeat(2, 1fr); }
  .button-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
}


/* ── Marquee wall ────────────────────────────────────────────────────────── */

.cell-tall .cell-body { min-height: 210px; }
.marquee-wall {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px 0;
  width: 100%;
}
.marquee-row {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.marquee-row span { display: inline-block; }
/* The separator is a shape rather than a bullet character. */
.marquee-row i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  flex: none;
}
.marquee-row.is-loud span {
  font-family: var(--rm-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
.marquee-row.is-loud:nth-child(3) span {
  color: transparent;
  -webkit-text-stroke: 1px var(--dim);
}
.marquee-row.is-quiet span {
  font-family: var(--rm-display);
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--dim);
}


/* ── Gallery cells ───────────────────────────────────────────────────────── */

.gallery-body { padding: 12px; overflow: hidden; }
.gallery-body img { display: block; width: 100%; height: auto; border-radius: 8px; }

.gal-masonry { width: 100%; }
.gal-swipe { width: min(180px, 100%); }
.gal-swipe article { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.gal-film { width: 100%; }
.gal-film img { width: 120px; border-radius: 4px; }

.gal-peek { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gal-peek li {
  padding: 7px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--rm-display);
  font-size: 15px;
  color: var(--dim);
  cursor: default;
}
.gal-peek li:hover, .gal-peek li:focus-visible { color: var(--text); }

.gal-polaroids figure {
  margin: 0;
  width: 84px;
  padding: 6px 6px 18px;
  background: #f1eee9;
  border-radius: 3px;
}
.gal-polaroids img { border-radius: 1px; }

.gal-fold { width: 100%; height: 130px; }
.gal-fold figure { margin: 0; border-radius: 8px; }
.gal-fold img { height: 130px; object-fit: cover; }

.gal-zoomgrid { width: 100%; }
.gal-crossfade { width: 100%; position: relative; }
.gal-parallax { grid-template-columns: repeat(3, 1fr); width: 100%; }
.gal-tilt { grid-template-columns: repeat(2, 1fr); width: 100%; }
.gal-tilt figure { margin: 0; }

.gal-mask { margin: 0; width: 100%; }
.gal-slats { width: 100%; height: 130px; border-radius: 8px; }
.gal-zoomstrip { width: 100%; }
.gal-zoomstrip img { width: 110px; border-radius: 8px; }

.gal-spiral { width: 100%; min-height: 240px; }
.gal-spiral img { width: 54px; border-radius: 6px; }

.gal-wall { width: 100%; height: 170px; }
.gal-wall > div { display: grid; grid-template-columns: repeat(6, 90px); gap: 8px; width: max-content; }

.gal-flip { grid-template-columns: repeat(3, 1fr); width: 100%; }
.gal-flip article { aspect-ratio: 1; }
.gal-flip article > div:last-child {
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: var(--rm-display);
  text-align: center;
}
.gal-flip b { color: var(--accent); font-size: 15px; }
.gal-flip span { font-size: 11px; color: var(--dim); }

.gal-peel { width: min(150px, 100%); }
.gal-peel figure { margin: 0; }
.gal-focus { grid-template-columns: repeat(2, 1fr); width: 100%; }
.gal-focus figure { margin: 0; }
.gal-ribbon { width: 100%; min-height: 220px; }
.gal-ribbon img { width: 92px; border-radius: 8px; }
.gal-contact { width: 100%; }

/* Cells are narrow; the galleries inside them need their own proportions. */
.gal-zoomgrid { grid-template-columns: repeat(2, 1fr); }
.gal-zoomgrid img { aspect-ratio: 1; object-fit: cover; }
.gal-crossfade img { aspect-ratio: 4 / 3; object-fit: cover; }
.gal-parallax img, .gal-focus img, .gal-tilt img { aspect-ratio: 1; object-fit: cover; }
.gal-mask img { aspect-ratio: 4 / 3; object-fit: cover; }
.gal-slats { height: 150px; }
.gal-contact img { aspect-ratio: 1; object-fit: cover; }
.gal-spiral { min-height: 210px; }
.gal-ribbon { min-height: 200px; overflow: hidden; }


/* ── The inverted hover cell ─────────────────────────────────────────────── */

/*
 * One cell on cream, everything else on ink.
 *
 * These six effects are all about a surface reacting under the pointer, and on
 * a dark page a dark effect on a dark button is a rumour. Putting them on the
 * light side of the palette makes each one legible for what it is, and proves
 * the components carry their colour from the markup rather than assuming a
 * dark background — the tokens are the only thing that changes.
 */
.cell-invert .cell-body {
  background: var(--rm-cream);
  border-color: #d8d2c8;
  color: var(--rm-ink);
}
.invert-body {
  display: grid;
  gap: 14px;
  place-items: center;
  align-content: center;
  padding: 26px 20px;
}
.invert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.invert-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--rm-radius-pill);
  border: 1px solid rgba(14, 14, 14, 0.22);
  /*
   * An explicit ground, not transparent.
   *
   * These buttons isolate their own stacking context so the effect sheets stay
   * inside them — which also means anything blending in there blends against
   * the group's backdrop, and a transparent group has nothing to blend with.
   * Painting the same cream the cell uses costs nothing and makes the group
   * self-contained.
   */
  background: var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  font-family: var(--rm-display);
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.24s var(--rm-ease-out), color 0.24s var(--rm-ease-out);
}
.invert-btn:hover, .invert-btn:focus-visible { border-color: var(--rm-ink); }
.invert-btn:focus-visible { outline: 2px solid var(--rm-ink); outline-offset: 3px; }

/* The fill sheet arrives from below and the label inverts as it passes. */
.invert-btn.is-fill:hover, .invert-btn.is-fill:focus-visible { color: var(--rm-cream); }

/* The shimmer needs a dark ground to travel across. */
.invert-btn.is-shimmer {
  background: var(--rm-ink);
  color: var(--rm-cream);
  border-color: var(--rm-ink);
}

.invert-btn.is-magnetic { border-style: dashed; }

.invert-note {
  margin: 6px 0 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--rm-display);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(14, 14, 14, 0.62);
}

/*
 * Two details the cell needs to be honest.
 *
 * `swap` lays its two faces in one grid cell; the button rule above sets
 * inline-flex and would stack them, so the twin ends up hanging below the
 * button. The component's own display wins here.
 *
 * And the fill label must not turn cream until the dark sheet has actually
 * arrived under it — otherwise the word disappears for the length of the
 * travel, which is exactly the frame everybody sees. A delay on the way in and
 * none on the way out is the whole fix.
 */
/*
 * The fill label inverts against whatever is behind it, with no timing at all.
 *
 * Switching the colour on :hover means guessing when the sheet arrives, and
 * whatever delay you pick is wrong on the way out — for a sixth of a second
 * the word is cream on cream and simply gone. `mix-blend-mode: difference`
 * has no schedule: the label is the inverse of the pixel under it, so it is
 * dark on the cream button and light on the dark sheet, correct on every
 * frame of the travel including the ones nobody planned for.
 */
.invert-btn.is-fill .invert-label {
  mix-blend-mode: difference;
  color: var(--rm-cream);
}

/*
 * The label sits above whatever the effect paints.
 *
 * fill and ripple both put a sheet inside the button at z-index 1; a bare text
 * node has no stacking position of its own, so the sheet covers the word at
 * exactly the moment it is meant to be legible against it. One span fixes it,
 * and it is why the kit's own examples always wrap the label.
 */
.invert-label { position: relative; z-index: 2; }

/* ── Built sections ──────────────────────────────────────────────────────── */

/*
 * The cells built from the catalogue's own examples. The markup inside them is
 * whatever the component documents, so this styles the container and lets each
 * component's own stylesheet do the rest.
 */
.built-body {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: stretch;
  padding: 16px;
  overflow: hidden;
}
.built-body > * { min-width: 0; max-width: 100%; }
.built-body img { max-width: 100%; height: auto; border-radius: 8px; }
.built-body ul, .built-body ol { margin: 0; padding: 0; list-style: none; }
.built-body fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.built-body legend { font-size: 11px; color: var(--dim); padding: 0; }
.built-body label { font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.built-body h3, .built-body h4 { margin: 0; font-family: var(--rm-display); font-size: 15px; }
.built-body p { margin: 0; font-size: 13px; }
.built-body button { font: inherit; }

/*
 * The built cells hold real component markup, so the cell has to be a good
 * host rather than a designer: cap what would otherwise be full-bleed, put
 * radio groups on a row where they belong, and let anything genuinely wide
 * scroll inside its own box instead of bursting the grid.
 */
.built-body img { max-height: 190px; object-fit: cover; }
.built-body [data-rm-product-gallery] > img,
.built-body [data-rm-product-zoom] img { max-height: 200px; width: 100%; }

.built-body fieldset:has(input[type="radio"]),
.built-body fieldset:has(input[type="checkbox"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.built-body fieldset legend { flex-basis: 100%; }

.built-body nav ol,
.built-body nav ul { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Anything that insists on being wider than the cell scrolls inside it. */
.built-body table,
.built-body [data-rm-kanban],
.built-body [data-rm-checkout-steps] { max-width: 100%; overflow-x: auto; }

.built-body select {
  font: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

/*
 * The wall pairs three horizontal rows with one running upward beside them,
 * which is the point of the vertical direction: the two axes are the same
 * component and they read as one piece of furniture rather than two demos.
 */
.marquee-wall {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 16px;
  align-items: center;
  padding: 18px 0 18px 0;
  min-height: 230px;
}
.marquee-rows { display: grid; gap: 12px; min-width: 0; }

.marquee-column {
  height: 210px;
  border-left: 1px solid var(--line-soft);
  padding-left: 14px;
}
.mq-tag {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: var(--rm-mono);
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
}

.marquee-row.is-chips { align-items: center; }
.mq-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  font-family: var(--rm-display);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.marquee-row.is-outline span {
  color: transparent;
  -webkit-text-stroke: 1px var(--dim);
}

@media (max-width: 720px) {
  .marquee-wall { grid-template-columns: 1fr; }
  .marquee-column { display: none; }
}