/*
 * rage-motion — stylesheet.
 *
 * Every component's static styling lives here so the JavaScript only ever
 * writes values, never rules. That split is what keeps the effects cheap: the
 * browser can composite a transform or a custom property without recalculating
 * a stylesheet.
 *
 * The palette defaults to the SoyRage line — cream, ink, and a blue that does
 * the pointing — but every value is a custom property, so overriding
 * `--rm-accent` once re-themes the whole kit.
 *
 * Crafted by SoyRage Agency — https://soyrage.es/
 * MIT licensed (see LICENSE).
 */

:root {
  /* SoyRage palette */
  --rm-ink: #0e0e0e;
  --rm-cream: #f1eee9;
  --rm-muted: #6c695f;
  --rm-accent: #2aa7e4;
  --rm-terracotta: #d28c65;
  --rm-yellow: #f4d738;

  /* Type */
  --rm-display: "Bricolage Grotesque", "Archivo Expanded", system-ui, sans-serif;
  --rm-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Shape */
  --rm-radius-sm: 4px;
  --rm-radius: 24px;
  --rm-radius-lg: 36px;
  --rm-radius-pill: 999px;

  /* Motion */
  --rm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Text splitting ─────────────────────────────────────────────────────── */

.rm-split .rm-word {
  display: inline-block;
  white-space: nowrap; /* a split word must never break mid-word */
}
.rm-split .rm-char { display: inline-block; }
.rm-split-lines .rm-line { display: block; }

/* A mask reveal needs the wrapper to clip, and the piece to move inside it. */
.rm-text-clip .rm-word,
.rm-text-clip .rm-line { overflow: hidden; }
.rm-text-clip .rm-char { will-change: transform; }
/* Descenders (g, y, p) are cut by a tight overflow, so give the box room. */
.rm-text-clip .rm-word,
.rm-text-clip .rm-line { padding-bottom: 0.12em; margin-bottom: -0.12em; }

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

.rm-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000; /* above anything a page is likely to stack */
  opacity: 0;
  transition: opacity 0.2s;
}
.rm-cursor.is-visible { opacity: 1; }
.rm-cursor-dot,
.rm-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
}
.rm-cursor-dot {
  width: var(--rm-cursor-size, 10px);
  height: var(--rm-cursor-size, 10px);
  background: var(--rm-cursor-color, #fff);
}
.rm-cursor-ring {
  width: var(--rm-cursor-ring, 38px);
  height: var(--rm-cursor-ring, 38px);
  border: 1px solid var(--rm-cursor-color, #fff);
}
/* Only hide the real cursor once the replacement has proved it is moving. */
html.rm-cursor-active,
html.rm-cursor-active * { cursor: none !important; }

.rm-splash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147482000;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.rm-spotlight {
  position: relative;
  isolation: isolate;
}
.rm-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(
    var(--rm-spot-size, 320px) circle at var(--rm-spot-x, 50%) var(--rm-spot-y, 50%),
    var(--rm-spot-color, rgba(42, 167, 228, 0.16)),
    transparent 70%
  );
}
.rm-spotlight:hover::before { opacity: 1; }

.rm-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  isolation: isolate;
}
.rm-tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--rm-glare-x, 50%) var(--rm-glare-y, 50%),
    rgba(255, 255, 255, 0.32),
    transparent 55%
  );
}

/*
 * An animated conic border needs the angle registered as a real angle type,
 * or the browser has no way to interpolate it and the gradient jumps.
 */
@property --rm-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.rm-border {
  position: relative;
  isolation: isolate;
}
.rm-border::before {
  content: "";
  position: absolute;
  inset: calc(var(--rm-border-width, 1.5px) * -1);
  border-radius: inherit;
  padding: var(--rm-border-width, 1.5px);
  background: conic-gradient(from var(--rm-border-angle), var(--rm-border-gradient, var(--rm-accent), var(--rm-terracotta), var(--rm-accent)));
  /* Punch out the middle so only the ring shows. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rm-border-spin var(--rm-border-duration, 4000ms) linear infinite;
  pointer-events: none;
}
@keyframes rm-border-spin { to { --rm-border-angle: 360deg; } }

/* ── Grain ──────────────────────────────────────────────────────────────── */

.rm-grain {
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  pointer-events: none;
  z-index: 2147481000;
  background-repeat: repeat;
}
.rm-grain.is-moving { animation: rm-grain-shift 0.7s steps(4) infinite; }
@keyframes rm-grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ── Text effects ───────────────────────────────────────────────────────── */

.rm-glitch { position: relative; display: inline-block; }
.rm-glitch::before,
.rm-glitch::after {
  content: attr(data-rm-glitch-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0);
}
.rm-glitch.is-glitching::before {
  opacity: 0.85;
  color: var(--rm-accent);
  animation: rm-glitch-a 0.42s steps(2, end) infinite;
}
.rm-glitch.is-glitching::after {
  opacity: 0.85;
  color: var(--rm-terracotta);
  animation: rm-glitch-b 0.42s steps(2, end) infinite;
}
@keyframes rm-glitch-a {
  0% { transform: translate(-2px, 1px); clip-path: inset(12% 0 62% 0); }
  50% { transform: translate(2px, -1px); clip-path: inset(58% 0 18% 0); }
  100% { transform: translate(-1px, 0); clip-path: inset(32% 0 44% 0); }
}
@keyframes rm-glitch-b {
  0% { transform: translate(2px, -1px); clip-path: inset(70% 0 8% 0); }
  50% { transform: translate(-2px, 1px); clip-path: inset(20% 0 55% 0); }
  100% { transform: translate(1px, 0); clip-path: inset(45% 0 30% 0); }
}

.rm-shiny {
  background: linear-gradient(
      100deg,
      var(--rm-shiny-base, #6b7280) 40%,
      var(--rm-shiny-highlight, #fff) 50%,
      var(--rm-shiny-base, #6b7280) 60%
    )
    0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rm-shine var(--rm-shiny-duration, 3200ms) linear infinite;
}
@keyframes rm-shine { to { background-position: -220% 0; } }

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

.rm-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--rm-progress-height, 3px);
  transform-origin: 0 50%;
  transform: scaleX(var(--rm-progress-value, 0));
  background: var(--rm-progress-color, var(--rm-accent));
  z-index: 2147480000;
}
/* Where the browser can drive it natively, hand the whole thing over. */
@supports (animation-timeline: scroll()) {
  .rm-progress-native {
    transform: scaleX(0);
    animation: rm-progress-grow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes rm-progress-grow { to { transform: scaleX(1); } }
}

/*
 * The track is wider than the screen by design — that is the whole component —
 * so the section has to clip it. Without this the track adds its full width to
 * the document and the entire page scrolls sideways, which on a phone is the
 * difference between a working site and one that wobbles under a thumb.
 *
 * `clip` rather than `hidden`: `hidden` on an ancestor makes it a scroll
 * container, and the track's `position: sticky` then pins to that instead of
 * to the viewport, which quietly breaks the whole effect.
 */
.rm-horizontal { position: relative; overflow-x: clip; }
.rm-horizontal .rm-horizontal-track {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  will-change: transform;
}
/* Reduced motion turns the pin into an ordinary sideways scroll. */
.rm-horizontal.is-reduced .rm-horizontal-track {
  position: static;
  height: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.rm-stack-card {
  position: sticky;
  will-change: transform;
}

/* ── Media ──────────────────────────────────────────────────────────────── */

.rm-image-reveal {
  position: relative;
  overflow: hidden;
  display: block;
}
.rm-image-reveal .rm-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}
.rm-image-reveal img,
.rm-image-reveal video { display: block; width: 100%; }

.rm-pixel { position: relative; overflow: hidden; isolation: isolate; }
.rm-pixel-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--rm-pixel-cols, 14), 1fr);
  grid-template-rows: repeat(var(--rm-pixel-rows, 8), 1fr);
  pointer-events: none;
  z-index: 2;
}
.rm-pixel-grid i { opacity: 0; display: block; }

.rm-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rm-preview-width, 300px);
  aspect-ratio: 4 / 3;
  border-radius: var(--rm-radius-sm);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s var(--rm-ease-out);
  will-change: transform;
  z-index: 5;
}
.rm-preview.is-visible { opacity: 1; }
.rm-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * The edges fade rather than cutting the content off at a hard boundary, which
 * is the single thing that separates a marquee that looks designed from one
 * that looks like overflow: hidden.
 *
 * pan-y so a vertical swipe still scrolls the page while a horizontal one
 * drags the strip.
 */
.rm-marquee {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
  cursor: grab;
  mask: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--rm-marquee-fade, 12%),
    #000 calc(100% - var(--rm-marquee-fade, 12%)),
    transparent 100%
  );
}
.rm-marquee.is-dragging { cursor: grabbing; user-select: none; }
.rm-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* The skew leans from the middle, not from a corner. */
  transform-origin: 50% 50%;
}
.rm-marquee-group { display: flex; align-items: center; flex: none; }

/*
 * Vertical: the same track, turned. The mask fades top and bottom instead of
 * left and right, the drag is pan-x so a horizontal swipe still works the
 * page, and the group stacks. Nothing else in the component changes.
 */
.rm-marquee.is-vertical {
  touch-action: pan-x;
  mask: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--rm-marquee-fade, 12%),
    #000 calc(100% - var(--rm-marquee-fade, 12%)),
    transparent 100%
  );
}
.rm-marquee.is-vertical .rm-marquee-track {
  flex-direction: column;
  width: auto;
  height: max-content;
}
.rm-marquee.is-vertical .rm-marquee-group { flex-direction: column; }

/*
 * Vertical: the same track, turned. The mask fades top and bottom instead of
 * left and right, the drag is pan-x so a horizontal swipe still works the page,
 * and the group stacks. Nothing else in the component changes.
 */
.rm-marquee.is-vertical {
  touch-action: pan-x;
  mask: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--rm-marquee-fade, 12%),
    #000 calc(100% - var(--rm-marquee-fade, 12%)),
    transparent 100%
  );
}
.rm-marquee.is-vertical .rm-marquee-track {
  flex-direction: column;
  width: auto;
  height: max-content;
}
.rm-marquee.is-vertical .rm-marquee-group { flex-direction: column; }

.rm-marquee.is-static {
  overflow-x: auto;
  cursor: auto;
  mask: none;
}
.rm-marquee.is-static .rm-marquee-track { transform: none !important; }

/* ── Showpiece ──────────────────────────────────────────────────────────── */

/* The sizer holds the width of the longest phrase so nothing beside it
 * jitters, and shares a grid cell with the visible text so it cannot push it
 * onto a second line. */
.rm-type { display: inline-grid; }
.rm-type-sizer,
.rm-type-text { grid-area: 1 / 1; }
.rm-type-sizer {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.rm-type.has-caret .rm-type-text::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.06em;
  vertical-align: -0.12em;
  background: var(--rm-accent);
  animation: rm-caret 1.05s steps(1) infinite;
}
@keyframes rm-caret { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }

.rm-wave .rm-char { will-change: transform; }

.rm-lines {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--rm-lines-cols, 14), 1fr);
  grid-template-rows: repeat(var(--rm-lines-rows, 9), 1fr);
  place-items: center;
  pointer-events: none; /* the field listens on the window, never blocks clicks */
}
.rm-lines i {
  display: block;
  width: var(--rm-lines-length, 22px);
  height: var(--rm-lines-thickness, 2px);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-lines-color, currentColor);
  transform: rotate(-90deg);
  will-change: transform;
}

.rm-ripple { position: relative; overflow: hidden; isolation: isolate; }
.rm-ripple-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}

/* ── Interactive ────────────────────────────────────────────────────────── */

.rm-compare {
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* let the page scroll vertically over the slider */
  user-select: none;
  --rm-compare: 50%;
}
.rm-compare img,
.rm-compare video { display: block; width: 100%; }
.rm-compare [data-rm-after] {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--rm-compare));
}
.rm-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rm-compare);
  width: 2px;
  margin-left: -1px;
  background: var(--rm-cream);
  cursor: ew-resize;
}
.rm-compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--rm-cream);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(4px);
}
.rm-compare-handle:focus-visible { outline: none; }
.rm-compare-handle:focus-visible::after {
  outline: 3px solid var(--rm-accent);
  outline-offset: 3px;
}

.rm-panels { display: flex; gap: 8px; }
.rm-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--rm-radius);
  transition: flex-grow var(--rm-panels-duration, 620ms) var(--rm-ease-out);
}
.rm-panel.is-open { flex-grow: var(--rm-panels-grow, 3.2); }
.rm-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rm-orbit {
  position: relative;
  display: grid;
  place-items: center;
  transform: rotateX(var(--rm-orbit-tilt, 0deg));
  animation: rm-orbit-spin var(--rm-orbit-duration, 24s) linear infinite;
}
.rm-orbit.is-reverse { animation-direction: reverse; }
.rm-orbit.is-still { animation: none; }
.rm-orbit-item {
  grid-area: 1 / 1;
  /* Place on the ring, then undo the ring's spin so the item stays upright. */
  transform:
    rotate(var(--rm-orbit-angle, 0deg))
    translateX(var(--rm-orbit-radius, 130px))
    rotate(calc(var(--rm-orbit-angle, 0deg) * -1));
  animation: rm-orbit-upright var(--rm-orbit-duration, 24s) linear infinite reverse;
}
.rm-orbit.is-reverse .rm-orbit-item { animation-direction: normal; }
.rm-orbit.is-still .rm-orbit-item { animation: none; }
@keyframes rm-orbit-spin { to { transform: rotateX(var(--rm-orbit-tilt, 0deg)) rotate(360deg); } }
@keyframes rm-orbit-upright {
  to {
    transform:
      rotate(var(--rm-orbit-angle, 0deg))
      translateX(var(--rm-orbit-radius, 130px))
      rotate(calc(var(--rm-orbit-angle, 0deg) * -1))
      rotate(360deg);
  }
}

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

.rm-pressure .rm-char { display: inline-block; will-change: font-variation-settings; }

.rm-morph { display: inline-grid; }
.rm-morph-sizer,
.rm-morph-stage { grid-area: 1 / 1; }
.rm-morph-sizer { height: 0; overflow: hidden; visibility: hidden; }
.rm-morph-stage { position: relative; white-space: pre; justify-self: start; }
.rm-morph-char { display: inline-block; will-change: transform, opacity; }

.rm-curve {
  display: inline-block;
  width: var(--rm-curve-size, 300px);
  height: var(--rm-curve-size, 300px);
}
.rm-curve svg { width: 100%; height: 100%; overflow: visible; }
.rm-curve text { fill: currentColor; font-size: 0.9rem; }
.rm-curve.is-spinning svg { animation: rm-curve-spin var(--rm-curve-spin, 18s) linear infinite; }
@keyframes rm-curve-spin { to { transform: rotate(360deg); } }

.rm-odometer { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.rm-odometer-column {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  /*
   * Fade the top and bottom of the window. A digit box is one em, but the ink
   * of a display face is taller than that, so a hard edge slices the digits
   * above and below mid-stroke while the wheel turns. Fading reads as depth
   * rather than as clipping.
   */
  mask: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}
.rm-odometer-strip { display: block; will-change: transform; }
.rm-odometer-strip span { display: block; height: 1em; line-height: 1; }
.rm-odometer-fixed { display: inline-block; }

/*
 * The unlit state is a muted colour, never `opacity: 0`. A paragraph that is
 * unreadable until you scroll far enough is a reading tax, and that is the
 * version of this effect everyone ships.
 */
.rm-highlight-word {
  color: color-mix(in srgb, currentColor calc(var(--rm-highlight-dim, 0.28) * 100%), transparent);
  transition: color 0.35s var(--rm-ease-out);
}
.rm-highlight-word.is-lit { color: currentColor; }

/* ── Surface ────────────────────────────────────────────────────────────── */

.rm-beam { position: relative; }
.rm-beam > svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

.rm-trail { position: relative; }
.rm-trail-light {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rm-trail-size, 60px);
  height: 3px;
  border-radius: var(--rm-radius-pill);
  background: linear-gradient(90deg, transparent, var(--rm-trail-color, #2aa7e4), transparent);
  box-shadow: 0 0 12px 1px var(--rm-trail-color, #2aa7e4);
  offset-distance: 0%;
  offset-rotate: auto;
  animation: rm-trail-run var(--rm-trail-duration, 4s) linear infinite;
  pointer-events: none;
}
@keyframes rm-trail-run { to { offset-distance: 100%; } }

.rm-glare { position: relative; overflow: hidden; isolation: isolate; }
.rm-glare::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: var(--rm-glare-intensity, 0.35);
  background: linear-gradient(
    var(--rm-glare-angle, 0deg),
    transparent 35%,
    rgb(255 255 255 / 0.85) 50%,
    transparent 65%
  );
  transform: translate(calc(var(--rm-glare-x, 50%) - 50%), calc(var(--rm-glare-y, 50%) - 50%));
  transition: transform 0.18s linear;
  mix-blend-mode: overlay;
}

.rm-electric { position: relative; }
.rm-electric-defs { position: absolute; width: 0; height: 0; }
.rm-electric-edge {
  position: absolute;
  inset: 0;
  border: var(--rm-electric-width, 2px) solid var(--rm-electric-color, #2aa7e4);
  border-radius: inherit;
  pointer-events: none;
}

.rm-blur-edge { position: relative; }
.rm-blur-edge > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}
.rm-blur-edge.is-bottom > span { bottom: 0; }
.rm-blur-edge.is-top > span { top: 0; }

/* ── Field ──────────────────────────────────────────────────────────────── */

.rm-waves,
.rm-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.rm-retro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 260px;
  z-index: 0;
  mask: linear-gradient(to bottom, transparent, #000 40%, #000 var(--rm-retro-fade, 0.85));
}
.rm-retro-plane {
  position: absolute;
  inset: -60% -60% -20%;
  transform: rotateX(var(--rm-retro-angle, 65deg));
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right, var(--rm-retro-color, #2aa7e4) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rm-retro-color, #2aa7e4) 1px, transparent 1px);
  background-size: var(--rm-retro-cell, 60px) var(--rm-retro-cell, 60px);
  animation: rm-retro-run var(--rm-retro-speed, 12s) linear infinite;
}
.rm-retro.is-still .rm-retro-plane { animation: none; }
@keyframes rm-retro-run { to { background-position: 0 var(--rm-retro-cell, 60px); } }

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

.rm-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.rm-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rm-carousel-item { flex: 0 0 auto; scroll-snap-align: center; }
/* A dragged carousel should not select its own captions. */
.rm-carousel.is-dragging * { user-select: none; }

.rm-ring {
  position: relative;
  perspective: 1100px;
  cursor: grab;
  overflow: hidden;
}
.rm-ring.is-dragging { cursor: grabbing; }
.rm-ring-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
}
.rm-ring-item {
  position: absolute;
  transform:
    rotateY(var(--rm-ring-angle, 0deg))
    translateZ(var(--rm-ring-radius, 340px));
  transition: filter 0.3s;
  filter: saturate(0.6);
  user-select: none;
}
.rm-ring-item.is-front { filter: none; }

.rm-deck { position: relative; display: grid; }
.rm-deck-card {
  grid-area: 1 / 1;
  transform:
    translateY(calc(var(--rm-deck-index, 0) * var(--rm-deck-offset, 16px)))
    scale(calc(1 - var(--rm-deck-index, 0) * var(--rm-deck-scale, 0.05)));
  transition: transform 0.45s var(--rm-ease-out);
}

/* Trailing images are thrown outward, so the frame has to clip them. */
.rm-image-trail { position: relative; overflow: clip; }
.rm-image-trail-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  border-radius: var(--rm-radius-sm);
  pointer-events: none;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  z-index: 3;
}

.rm-scratch { position: relative; overflow: hidden; }
.rm-scratch-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  transition: opacity 0.5s var(--rm-ease-out);
  z-index: 2;
}
.rm-scratch-reveal {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-cream);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rm-scratch.is-revealed .rm-scratch-layer { pointer-events: none; }

.rm-dock { display: flex; align-items: flex-end; gap: 10px; }
.rm-dock-item { transform-origin: 50% 100%; will-change: transform; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.rm-fill { position: relative; overflow: hidden; isolation: isolate; }
.rm-fill-sheet {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rm-fill-color, #2aa7e4);
  transform: scale(0);
  transition: transform var(--rm-fill-duration, 420ms) var(--rm-ease-out);
}

.rm-shimmer { position: relative; overflow: hidden; }
.rm-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--rm-shimmer-width, 90px);
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    color-mix(in srgb, var(--rm-shimmer-color, #fff) 55%, transparent),
    transparent
  );
  animation: rm-shimmer-run var(--rm-shimmer-duration, 2.6s) linear infinite;
}
@keyframes rm-shimmer-run {
  from { transform: translateX(calc(-1 * var(--rm-shimmer-width, 90px))); }
  to { transform: translateX(calc(100cqw + var(--rm-shimmer-width, 90px))); }
}

.rm-spark { position: relative; overflow: hidden; }
.rm-spark-bit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.rm-swap { display: inline-grid; }
/* One line tall, so the waiting label is clipped at the line, not at the
 * button's padding edge where a slice of it would always show. */
.rm-swap-window {
  display: grid;
  overflow: hidden;
  line-height: inherit;
}
.rm-swap-face {
  grid-area: 1 / 1;
  transition: transform var(--rm-swap-duration, 380ms) var(--rm-ease-out);
}
.rm-swap-face.is-next { transform: translateY(115%); }
.rm-swap:hover .rm-swap-face,
.rm-swap:focus-visible .rm-swap-face { transform: translateY(-115%); }
.rm-swap:hover .rm-swap-face.is-next,
.rm-swap:focus-visible .rm-swap-face.is-next { transform: translateY(0); }

/* ── Cursor extras ──────────────────────────────────────────────────────── */

.rm-target {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  transition: opacity 0.2s;
}
.rm-target.is-visible { opacity: 1; }
.rm-target i {
  position: absolute;
  width: var(--rm-target-corner, 7px);
  height: var(--rm-target-corner, 7px);
  border: var(--rm-target-thickness, 2px) solid var(--rm-target-color, #2aa7e4);
}
.rm-target i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rm-target i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.rm-target i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.rm-target i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.rm-target.is-locked i { opacity: 0.9; }

.rm-crosshair {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147482000;
  opacity: 0;
  transition: opacity 0.25s;
}
.rm-crosshair.is-visible { opacity: 1; }
.rm-crosshair-x,
.rm-crosshair-y { position: fixed; background: var(--rm-crosshair-color, #2aa7e4); }
.rm-crosshair-x { top: 0; left: 0; width: 1px; height: 100vh; }
.rm-crosshair-y { top: 0; left: 0; width: 100vw; height: 1px; }
.rm-crosshair-readout {
  position: fixed;
  top: 0;
  left: 0;
  margin: 10px 0 0 12px;
  font-family: var(--rm-mono);
  font-size: 11px;
  color: var(--rm-crosshair-color, #2aa7e4);
  white-space: nowrap;
}

/* ── Scroll set pieces ──────────────────────────────────────────────────── */

.rm-tracing { position: relative; }
.rm-tracing-line {
  position: absolute;
  top: 0;
  left: -34px;
  pointer-events: none;
}
.rm-tracing-head {
  position: absolute;
  top: 0;
  left: -34px;
  width: 9px;
  height: 9px;
  margin-left: 7.5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 12px 2px currentColor;
  transition: opacity 0.3s;
}
@media (max-width: 900px) {
  .rm-tracing-line, .rm-tracing-head { display: none; }
}

.rm-flatten {
  transform-style: preserve-3d;
  perspective: var(--rm-flatten-perspective, 1400px);
  will-change: transform;
}

.rm-sticky-frame { opacity: 0; transition: opacity 0.5s var(--rm-ease-out); }
.rm-sticky-frame.is-current { opacity: 1; }
.rm-sticky-panel { transition: opacity 0.4s; opacity: 0.4; }
.rm-sticky-panel.is-current { opacity: 1; }

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

.rm-pill { position: relative; }
.rm-pill-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-pill-color, rgb(0 0 0 / 0.07));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--rm-pill-duration, 420ms) var(--rm-ease-out),
    width var(--rm-pill-duration, 420ms) var(--rm-ease-out),
    height var(--rm-pill-duration, 420ms) var(--rm-ease-out),
    opacity 0.2s;
}
.rm-pill > :not(.rm-pill-indicator) { position: relative; z-index: 1; }

.rm-gooey { position: relative; }
.rm-gooey-defs { position: absolute; width: 0; height: 0; }
.rm-gooey-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rm-gooey-blob {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-gooey-color, #2aa7e4);
  will-change: transform, width, height;
}
.rm-gooey > :not(.rm-gooey-layer):not(.rm-gooey-defs) { position: relative; z-index: 1; }

.rm-condense {
  transition:
    transform 0.4s var(--rm-ease-out),
    padding 0.3s var(--rm-ease-out),
    background-color 0.3s;
}
.rm-condense.is-hidden { transform: translateY(-102%); }

.rm-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  /* Grows from the button that opened it, not from an arbitrary edge. */
  clip-path: circle(0 at var(--rm-overlay-x, 50%) var(--rm-overlay-y, 50%));
  transition: clip-path 0.62s var(--rm-ease-in-out);
}
.rm-overlay.is-open { clip-path: circle(150% at var(--rm-overlay-x, 50%) var(--rm-overlay-y, 50%)); }
.rm-overlay-locked, .rm-overlay-locked body { overflow: hidden; }

/*
 * An author `display` beats the user-agent rule for [hidden], so any component
 * that sets one has to say this or `hidden` silently stops working — and a
 * full-screen dialog that is "hidden" but still laid out swallows every click
 * on the page underneath it.
 */
.rm-tab-panel[hidden],
.rm-overlay[hidden],
.rm-dropdown-menu[hidden],
.rm-tooltip[hidden],
.rm-lightbox[hidden],
.rm-curtain-nav[hidden],
.rm-form-progress-step[hidden],
.rm-avatar-upload-preview[hidden],
.rm-identity-chip-card[hidden],
.rm-compare-tray[hidden],
.rm-filter-panel-count[hidden],
.rm-filter-panel-body[hidden],
.rm-cart-drawer[hidden],
.rm-checkout-steps fieldset[hidden],
.rm-address-form fieldset[hidden],
.rm-order-confirm[hidden] { display: none; }

/* ── Panel effects ──────────────────────────────────────────────────────── */

.rm-meteors { position: relative; overflow: hidden; }
.rm-meteors-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rm-meteors-layer i {
  position: absolute;
  width: var(--rm-meteor-length, 90px);
  height: 1px;
  border-radius: 999px;
  transform: rotate(var(--rm-meteor-angle, 215deg));
  transform-origin: right center;
  animation-name: rm-meteor-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}
.rm-meteors-layer i::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: inherit;
}
@keyframes rm-meteor-fall {
  0% { transform: rotate(var(--rm-meteor-angle, 215deg)) translateX(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: rotate(var(--rm-meteor-angle, 215deg)) translateX(var(--rm-meteor-travel, 120vmax)); opacity: 0; }
}

.rm-sparkles { position: relative; }
.rm-sparkles-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rm-sparkles-layer i {
  position: absolute;
  border-radius: 50%;
  animation-name: rm-sparkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes rm-sparkle {
  0%, 100% { transform: scale(0); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
  70% { transform: scale(0.6); opacity: 0.5; }
}

.rm-lamp { position: relative; overflow: hidden; isolation: isolate; }
.rm-lamp-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rm-lamp-cone {
  position: absolute;
  left: 50%;
  width: 140%;
  height: 78%;
  translate: -50% 0;
  /*
   * Two mirrored halves of one conic gradient. A blurred radial would give a
   * smudge in the corner; the cone is what makes the light have a source.
   */
  background:
    conic-gradient(
      from 90deg at 50% 0%,
      transparent 0deg,
      var(--rm-lamp-color, #2aa7e4) calc(90deg - var(--rm-lamp-spread, 42%) * 0.9),
      transparent calc(90deg + var(--rm-lamp-spread, 42%) * 0.9),
      transparent 360deg
    );
  opacity: var(--rm-lamp-intensity, 0.55);
  filter: blur(28px);
  animation: rm-lamp-breathe 6s ease-in-out infinite alternate;
}
.rm-lamp-line {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rm-lamp-color, #2aa7e4), transparent);
  box-shadow: 0 0 22px 2px var(--rm-lamp-color, #2aa7e4);
}
.rm-lamp.is-top .rm-lamp-cone { top: 0; }
.rm-lamp.is-top .rm-lamp-line { top: 0; }
.rm-lamp.is-bottom .rm-lamp-layer { transform: scaleY(-1); }
.rm-lamp.is-bottom .rm-lamp-cone { top: 0; }
.rm-lamp.is-bottom .rm-lamp-line { top: 0; }
.rm-lamp-layer.is-still .rm-lamp-cone { animation: none; }
@keyframes rm-lamp-breathe {
  from { opacity: calc(var(--rm-lamp-intensity, 0.55) * 0.7); }
  to { opacity: var(--rm-lamp-intensity, 0.55); }
}

.rm-beams { position: relative; overflow: hidden; isolation: isolate; }
.rm-beams-layer {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  z-index: 0;
  transform: rotate(var(--rm-beams-tilt, 12deg));
  /* Fade both ends, so they read as light rather than as stripes. */
  mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.rm-beams-layer i {
  position: absolute;
  top: 0;
  height: 100%;
  animation-name: rm-beam-sweep;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.rm-beams-layer.is-still i { animation: none; }
@keyframes rm-beam-sweep {
  from { transform: translateY(-14%); }
  to { transform: translateY(14%); }
}

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

/*
 * Height without measuring anything: a grid row from 0fr to 1fr. Every version
 * built on scrollHeight breaks when the content reflows, an image loads late
 * or a font swaps.
 */
.rm-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-accordion-duration, 380ms) var(--rm-ease-out);
}
.rm-accordion-body.is-open { grid-template-rows: 1fr; }
.rm-accordion-inner { overflow: hidden; min-height: 0; }
.rm-accordion-head { cursor: pointer; }

.rm-flip { display: grid; perspective: 1200px; cursor: pointer; }
.rm-flip-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transition: transform var(--rm-flip-duration, 620ms) var(--rm-ease-in-out);
}
.rm-flip.is-y .rm-flip-face.is-back { transform: rotateY(180deg); }
.rm-flip.is-y.is-turned .rm-flip-face.is-front { transform: rotateY(-180deg); }
.rm-flip.is-y.is-turned .rm-flip-face.is-back { transform: rotateY(0deg); }
.rm-flip.is-x .rm-flip-face.is-back { transform: rotateX(180deg); }
.rm-flip.is-x.is-turned .rm-flip-face.is-front { transform: rotateX(-180deg); }
.rm-flip.is-x.is-turned .rm-flip-face.is-back { transform: rotateX(0deg); }

.rm-expand { cursor: pointer; }
.rm-expand.is-expanded {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(var(--rm-expand-width, 720px), calc(100vw - 32px));
  max-height: 86vh;
  overflow: auto;
  cursor: default;
}
.rm-expand-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(3px);
}
.rm-expand-placeholder { pointer-events: none; }
.rm-expand-locked, .rm-expand-locked body { overflow: hidden; }

.rm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 4vmin;
  background: rgb(0 0 0 / 0.86);
  cursor: zoom-out;
}
.rm-lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--rm-radius-sm); }
.rm-lightbox-thumb { cursor: zoom-in; }

/* ── Motion primitives ──────────────────────────────────────────────────── */

.rm-drag { cursor: grab; touch-action: none; will-change: transform; }
.rm-drag.is-dragging { cursor: grabbing; }

.rm-shuffle-item[hidden] { display: none; }

.rm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2147482500; }
.rm-confetti i { position: absolute; border-radius: 1px; }

/* ── Progress ring ──────────────────────────────────────────────────────── */

.rm-ring-progress { position: relative; display: inline-grid; place-items: center; }
.rm-ring-progress > svg { position: absolute; inset: 0; margin: auto; pointer-events: none; }

/* ── Outline, roll and countdown ────────────────────────────────────────── */

/*
 * One element: a stroke for the empty part and a gradient clipped to the
 * glyphs for the filled part. Two stacked copies of the text would double the
 * antialiasing on every edge, which is what makes the usual version look
 * blurry as it fills.
 */
.rm-outline {
  color: transparent;
  -webkit-text-stroke: var(--rm-outline-width, 1px) var(--rm-outline-stroke, rgba(241, 238, 233, 0.28));
  background-image: linear-gradient(
    90deg,
    var(--rm-outline-color, #f1eee9) var(--rm-outline-fill, 0%),
    transparent var(--rm-outline-fill, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.rm-roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.rm-roll-face {
  grid-area: 1 / 1;
  transition: transform var(--rm-roll-duration, 420ms) var(--rm-ease-out);
}
.rm-roll.is-x .rm-roll-face.is-back { transform: translateY(105%); }
.rm-roll.is-x:hover .rm-roll-face.is-front,
.rm-roll.is-x:focus-visible .rm-roll-face.is-front { transform: translateY(-105%); }
.rm-roll.is-x:hover .rm-roll-face.is-back,
.rm-roll.is-x:focus-visible .rm-roll-face.is-back { transform: translateY(0); }
.rm-roll.is-y .rm-roll-face.is-back { transform: translateX(105%); }
.rm-roll.is-y:hover .rm-roll-face.is-front,
.rm-roll.is-y:focus-visible .rm-roll-face.is-front { transform: translateX(-105%); }
.rm-roll.is-y:hover .rm-roll-face.is-back,
.rm-roll.is-y:focus-visible .rm-roll-face.is-back { transform: translateX(0); }

.rm-countdown { display: inline-flex; gap: 18px; font-variant-numeric: tabular-nums; }
.rm-countdown-unit { display: grid; justify-items: center; gap: 4px; }
.rm-countdown-value { font-size: 1em; line-height: 1; }
.rm-countdown-label {
  font-family: var(--rm-mono);
  font-size: 0.28em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.55;
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */

/*
 * Two syntaxes on purpose. `scrollbar-width`/`scrollbar-color` is the standard
 * and the only one Firefox understands; `::-webkit-scrollbar` is the only one
 * that can be shaped. Together they cover everything, and neither replaces the
 * scrollbar with a div — which is what costs you the wheel's page-jump, the
 * keyboard, the context menu and every assistive technology.
 */
/*
 * Scrollbars, restrained.
 *
 * A scrollbar is chrome, not content. The default browser bar is 15 or 17
 * pixels of high-contrast furniture down the side of everything, and the usual
 * "custom scrollbar" makes it worse by painting a track, a border and a hover
 * colour on top. So the shape of all of these is the same: a hairline thumb
 * with no track at all, at a contrast that is legible without asking for
 * attention, going to full contrast only when the pointer is actually in the
 * region it belongs to.
 *
 *   • `--rm-scrollbar-size`  the width, one number, used by both engines
 *   • `--rm-scrollbar-color` the thumb at rest
 *   • `--rm-scrollbar-live`  the thumb while the region is reached
 *
 * The thumb keeps a minimum length, because a thumb that shrinks with the
 * content becomes a two-pixel speck in a long list and nobody can grab it.
 * And the corner where two bars meet is left transparent — the default is a
 * pale square that every custom scrollbar forgets.
 */
.rm-scrollbar {
  --rm-scrollbar-size: 7px;
  --rm-scrollbar-color: rgb(255 255 255 / 0.14);
  --rm-scrollbar-live: rgb(255 255 255 / 0.30);
  --rm-scrollbar-track: transparent;

  scrollbar-width: thin;
  scrollbar-color: var(--rm-scrollbar-color) var(--rm-scrollbar-track);
  /* No reflow when the bar appears and disappears. */
  scrollbar-gutter: auto;
}
.rm-scrollbar:hover,
.rm-scrollbar:focus-within { scrollbar-color: var(--rm-scrollbar-live) var(--rm-scrollbar-track); }

.rm-scrollbar::-webkit-scrollbar {
  width: var(--rm-scrollbar-size);
  height: var(--rm-scrollbar-size);
}
.rm-scrollbar::-webkit-scrollbar-track { background: var(--rm-scrollbar-track); }
.rm-scrollbar::-webkit-scrollbar-corner { background: transparent; }
.rm-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--rm-scrollbar-color);
  border-radius: 999px;
  /* Grabbable however long the content is. */
  min-height: 42px;
  transition: background-color 0.24s var(--rm-ease-out);
}
.rm-scrollbar:hover::-webkit-scrollbar-thumb,
.rm-scrollbar:focus-within::-webkit-scrollbar-thumb {
  background-color: var(--rm-scrollbar-live);
}

/* hairline — the least a scrollbar can be and still be one. */
.rm-scrollbar.is-hairline {
  --rm-scrollbar-size: 3px;
  --rm-scrollbar-color: rgb(255 255 255 / 0.12);
  --rm-scrollbar-live: rgb(255 255 255 / 0.26);
}

/* thin — the default, named so it can be asked for explicitly. */
.rm-scrollbar.is-thin { --rm-scrollbar-size: 7px; }

/* pill — a touch wider, with the thumb inset off both edges. */
.rm-scrollbar.is-pill { --rm-scrollbar-size: 11px; }
.rm-scrollbar.is-pill::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: content-box;
}

/* accent — the same restraint, in the brand colour. */
.rm-scrollbar.is-accent {
  --rm-scrollbar-color: color-mix(in srgb, var(--rm-accent) 38%, transparent);
  --rm-scrollbar-live: var(--rm-accent);
}

/* ghost — nothing at all until you reach for it. */
.rm-scrollbar.is-ghost { --rm-scrollbar-color: transparent; }

/* inset — a faint groove, for a panel that needs its edge described. */
.rm-scrollbar.is-inset {
  --rm-scrollbar-size: 9px;
  --rm-scrollbar-track: rgb(255 255 255 / 0.05);
}
.rm-scrollbar.is-inset::-webkit-scrollbar-track {
  border-radius: 999px;
  margin-block: 4px;
}
.rm-scrollbar.is-inset::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: content-box;
}

/* On a light surface the thumb has to be dark, not pale. */
@media (prefers-color-scheme: light) {
  .rm-scrollbar:not([class*="is-accent"]) {
    --rm-scrollbar-color: rgb(0 0 0 / 0.16);
    --rm-scrollbar-live: rgb(0 0 0 / 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-scrollbar::-webkit-scrollbar-thumb { transition-duration: 0s; }
}

/* ── Dropdown ───────────────────────────────────────────────────────────── */

.rm-dropdown { position: relative; display: inline-block; }
.rm-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 180px;
  display: grid;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity var(--rm-dropdown-duration, 220ms) var(--rm-ease-out),
    transform var(--rm-dropdown-duration, 220ms) var(--rm-ease-out);
}
.rm-dropdown.is-open .rm-dropdown-menu { opacity: 1; transform: translateY(0) scale(1); }
.rm-dropdown.is-above .rm-dropdown-menu {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom left;
}
.rm-dropdown-menu[hidden] { display: none; }

/* ── Tooltip ────────────────────────────────────────────────────────────── */

.rm-tooltip-host { position: relative; }
.rm-tooltip {
  position: absolute;
  z-index: 50;
  padding: 7px 11px;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s var(--rm-ease-out);
}
.rm-tooltip.is-open { opacity: 1; }
.rm-tooltip[hidden] { display: none; }
.is-top > .rm-tooltip { bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); }
.is-top > .rm-tooltip.is-open { transform: translate(-50%, 0); }
.is-bottom > .rm-tooltip { top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); }
.is-bottom > .rm-tooltip.is-open { transform: translate(-50%, 0); }

/* ── Toggle ─────────────────────────────────────────────────────────────── */

.rm-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
/*
 * The checkbox stays: focusable, submitted with the form, announced as a
 * checkbox. It is moved under the track rather than removed, because
 * `display: none` takes it out of the tab order and `visibility: hidden` stops
 * it receiving focus at all.
 */
.rm-toggle-input {
  position: absolute;
  width: 44px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rm-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: none;
  border-radius: var(--rm-radius-pill);
  background: rgb(255 255 255 / 0.14);
  transition: background-color var(--rm-toggle-duration, 260ms) var(--rm-ease-out);
}
.rm-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rm-cream);
  transition: transform var(--rm-toggle-duration, 260ms) var(--rm-ease-out);
}
.rm-toggle-input:checked ~ .rm-toggle-track { background: var(--rm-accent); }
.rm-toggle-input:checked ~ .rm-toggle-track .rm-toggle-knob { transform: translateX(20px); }
.rm-toggle-input:focus-visible ~ .rm-toggle-track { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Decoration ─────────────────────────────────────────────────────────── */

.rm-dots-decor-host, .rm-stripes-host, .rm-scanline-host, .rm-mesh-host, .rm-stars-host {
  position: relative;
  isolation: isolate;
}
.rm-dots-decor, .rm-stripes, .rm-scanline, .rm-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.rm-dots-decor {
  background-image: radial-gradient(
    var(--rm-dots-color, rgba(255, 255, 255, 0.16)) var(--rm-dots-size, 1.4px),
    transparent var(--rm-dots-size, 1.4px)
  );
  background-size: var(--rm-dots-gap, 22px) var(--rm-dots-gap, 22px);
  animation: rm-dots-drift var(--rm-dots-speed, 24s) linear infinite;
}
.rm-dots-decor.is-still { animation: none; }
@keyframes rm-dots-drift {
  to { background-position: var(--rm-dots-gap, 22px) var(--rm-dots-gap, 22px); }
}

.rm-stripes {
  background-image: repeating-linear-gradient(
    var(--rm-stripes-angle, 45deg),
    var(--rm-stripes-color, rgba(255, 255, 255, 0.06)) 0,
    var(--rm-stripes-color, rgba(255, 255, 255, 0.06)) var(--rm-stripes-width, 10px),
    transparent var(--rm-stripes-width, 10px),
    transparent calc(var(--rm-stripes-width, 10px) * 2)
  );
  background-size: calc(var(--rm-stripes-width, 10px) * 2.83) calc(var(--rm-stripes-width, 10px) * 2.83);
  animation: rm-stripes-run var(--rm-stripes-speed, 1600ms) linear infinite;
}
.rm-stripes.is-still { animation: none; }
@keyframes rm-stripes-run {
  to {
    background-position:
      calc(var(--rm-stripes-width, 10px) * 2.83)
      calc(var(--rm-stripes-width, 10px) * 2.83);
  }
}

.rm-corners { position: relative; }
.rm-corners-layer { position: absolute; inset: calc(var(--rm-corners-offset, 8px) * -1); pointer-events: none; }
.rm-corners-layer i {
  position: absolute;
  width: var(--rm-corners-size, 16px);
  height: var(--rm-corners-size, 16px);
  border: var(--rm-corners-width, 1.5px) solid var(--rm-corners-color, #2aa7e4);
  opacity: 0;
  transition:
    opacity var(--rm-corners-duration, 320ms) var(--rm-ease-out),
    translate var(--rm-corners-duration, 320ms) var(--rm-ease-out);
}
.rm-corners-layer i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; translate: 6px 6px; }
.rm-corners-layer i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; translate: -6px 6px; }
.rm-corners-layer i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; translate: -6px -6px; }
.rm-corners-layer i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; translate: 6px -6px; }
.rm-corners:hover .rm-corners-layer i,
.rm-corners:focus-within .rm-corners-layer i { opacity: 1; translate: 0 0; }

.rm-scanline.has-lines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.03) 0 1px,
    transparent 1px 3px
  );
}
.rm-scanline-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, var(--rm-scanline-color, rgba(42, 167, 228, 0.5)), transparent);
  opacity: 0.5;
  animation: rm-scanline-pass var(--rm-scanline-speed, 5200ms) linear infinite;
}
.rm-scanline.is-still .rm-scanline-bar { animation: none; opacity: 0; }
@keyframes rm-scanline-pass {
  from { transform: translateY(-120%); }
  to { transform: translateY(560%); }
}

.rm-mesh { filter: blur(var(--rm-mesh-blur, 70px)); opacity: var(--rm-mesh-opacity, 0.5); }
.rm-mesh i {
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rm-mesh-color);
  top: calc(var(--rm-mesh-index) * 16% - 10%);
  left: calc(var(--rm-mesh-index) * 21% - 12%);
  animation: rm-mesh-drift var(--rm-mesh-speed, 22s) ease-in-out infinite alternate;
  animation-delay: calc(var(--rm-mesh-index) * -3400ms);
}
.rm-mesh.is-still i { animation: none; }
@keyframes rm-mesh-drift {
  from { transform: translate3d(-8%, -6%, 0) scale(1); }
  to { transform: translate3d(16%, 12%, 0) scale(1.28); }
}

.rm-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ── Button hovers ──────────────────────────────────────────────────────── */

.rm-underline { position: relative; text-decoration: none; }
.rm-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--rm-underline-thickness, 1.5px);
  background: var(--rm-underline-color, currentColor);
  transform: scaleX(0);
  /* Which side it grows from is written by the component, from where you came. */
  transform-origin: var(--rm-underline-origin, left) center;
  transition: transform var(--rm-underline-duration, 340ms) var(--rm-ease-out);
}
.rm-underline.is-on::after { transform: scaleX(1); }

.rm-press {
  box-shadow: 0 var(--rm-press-depth, 4px) 0 0 var(--rm-press-color, #0e0e0e);
  transition:
    transform var(--rm-press-duration, 120ms) var(--rm-ease-out),
    box-shadow var(--rm-press-duration, 120ms) var(--rm-ease-out);
}
/* The face travels the same distance the shadow loses, so the bottom edge
 * stays exactly where it was and only the key moves. */
.rm-press:active {
  transform: translateY(var(--rm-press-depth, 4px));
  box-shadow: 0 0 0 0 var(--rm-press-color, #0e0e0e);
}

.rm-halo { position: relative; overflow: hidden; isolation: isolate; }
.rm-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    var(--rm-halo-size, 120px) circle at var(--rm-halo-x, 50%) var(--rm-halo-y, 50%),
    var(--rm-halo-color, rgba(255, 255, 255, 0.28)),
    transparent 70%
  );
}
.rm-halo:hover::before, .rm-halo:focus-visible::before { opacity: 1; }

.rm-stroke { position: relative; }
.rm-stroke-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rm-stroke-svg rect {
  stroke-dasharray: var(--rm-stroke-length, 400);
  stroke-dashoffset: var(--rm-stroke-length, 400);
  transition: stroke-dashoffset var(--rm-stroke-duration, 520ms) var(--rm-ease-out);
}
.rm-stroke:hover .rm-stroke-svg rect,
.rm-stroke:focus-visible .rm-stroke-svg rect { stroke-dashoffset: 0; }

/* ── Button kit ─────────────────────────────────────────────────────────── */

/*
 * The look layer only. Size, font and the resting colours stay with the page's
 * own button class — this adds behaviour on top, so a kit look can be dropped
 * onto an existing design system without a fight.
 *
 * Every variant answers to :hover and :focus-visible, never to :hover alone. A
 * button that only rewards a mouse is half a button.
 */
.rm-btn {
  --rm-btn-accent: var(--rm-accent);
  --rm-btn-ink: currentColor;
  --rm-btn-duration: 340ms;
  position: relative;
  isolation: isolate;
  transition:
    transform var(--rm-btn-duration) var(--rm-ease-out),
    color var(--rm-btn-duration) var(--rm-ease-out),
    background-color var(--rm-btn-duration) var(--rm-ease-out),
    border-color var(--rm-btn-duration) var(--rm-ease-out),
    box-shadow var(--rm-btn-duration) var(--rm-ease-out),
    letter-spacing var(--rm-btn-duration) var(--rm-ease-out),
    filter var(--rm-btn-duration) var(--rm-ease-out);
}
.rm-btn.is-still, .rm-btn.is-still * { transition-duration: 0ms !important; animation: none !important; }

.rm-btn-sheet {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rm-btn-accent);
  transition: transform var(--rm-btn-duration) var(--rm-ease-out),
              opacity var(--rm-btn-duration) var(--rm-ease-out),
              clip-path var(--rm-btn-duration) var(--rm-ease-out);
}
.rm-btn-face, .rm-btn-twin { display: block; transition: transform var(--rm-btn-duration) var(--rm-ease-out); }
.rm-btn-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rm-btn-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rm-btn-duration) var(--rm-ease-out);
}

/* Surface ------------------------------------------------------------- */

.rm-btn.is-solid { background: var(--rm-btn-accent); color: var(--rm-ink); border-color: transparent; }
.rm-btn.is-solid:hover, .rm-btn.is-solid:focus-visible { filter: brightness(1.12); }

.rm-btn.is-outline { border: 1px solid currentColor; background: transparent; }
.rm-btn.is-outline:hover, .rm-btn.is-outline:focus-visible {
  background: var(--rm-btn-accent);
  border-color: var(--rm-btn-accent);
  color: var(--rm-ink);
}

.rm-btn.is-ghost { background: transparent; border-color: transparent; }
.rm-btn.is-ghost:hover, .rm-btn.is-ghost:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }

.rm-btn.is-soft { background: color-mix(in srgb, var(--rm-btn-accent) 18%, transparent); border-color: transparent; }
.rm-btn.is-soft:hover, .rm-btn.is-soft:focus-visible { background: color-mix(in srgb, var(--rm-btn-accent) 32%, transparent); }

.rm-btn.is-glass { backdrop-filter: blur(10px); background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.rm-btn.is-glass .rm-btn-sheet { opacity: 0; background: color-mix(in srgb, currentColor 10%, transparent); }
.rm-btn.is-glass:hover .rm-btn-sheet, .rm-btn.is-glass:focus-visible .rm-btn-sheet { opacity: 1; }

.rm-btn.is-inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.45); }
.rm-btn.is-inset:hover, .rm-btn.is-inset:focus-visible { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.6); }

.rm-btn.is-depth { box-shadow: 0 1px 0 rgb(255 255 255 / 0.08), 0 10px 22px -14px rgb(0 0 0 / 0.9); }
.rm-btn.is-depth:hover, .rm-btn.is-depth:focus-visible { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.1), 0 18px 32px -16px rgb(0 0 0 / 0.95); }

/* The hard-shadow look, and the version where the key actually moves into it. */
.rm-btn.is-brutal { border: 2px solid currentColor; box-shadow: 4px 4px 0 0 currentColor; }
.rm-btn.is-brutal:hover, .rm-btn.is-brutal:focus-visible { box-shadow: 6px 6px 0 0 var(--rm-btn-accent); }
.rm-btn.is-brutal-move { border: 2px solid currentColor; box-shadow: 5px 5px 0 0 currentColor; }
.rm-btn.is-brutal-move:hover, .rm-btn.is-brutal-move:focus-visible { transform: translate(3px, 3px); box-shadow: 2px 2px 0 0 currentColor; }
.rm-btn.is-brutal-move:active { transform: translate(5px, 5px); box-shadow: 0 0 0 0 currentColor; }

/* Filling ------------------------------------------------------------- */

.rm-btn[class*="is-fill"], .rm-btn.is-curtain { overflow: hidden; }
.rm-btn[class*="is-fill"]:hover, .rm-btn[class*="is-fill"]:focus-visible,
.rm-btn.is-curtain:hover, .rm-btn.is-curtain:focus-visible { color: var(--rm-ink); }

.rm-btn.is-fill-up .rm-btn-sheet { transform: scaleY(0); transform-origin: 50% 100%; }
.rm-btn.is-fill-down .rm-btn-sheet { transform: scaleY(0); transform-origin: 50% 0%; }
.rm-btn.is-fill-left .rm-btn-sheet { transform: scaleX(0); transform-origin: 0% 50%; }
.rm-btn.is-fill-right .rm-btn-sheet { transform: scaleX(0); transform-origin: 100% 50%; }
.rm-btn.is-fill-center .rm-btn-sheet { transform: scale(0); border-radius: inherit; }
.rm-btn.is-fill-diagonal .rm-btn-sheet { transform: skewX(-18deg) scaleX(0); transform-origin: 0% 50%; }
.rm-btn[class*="is-fill"]:hover .rm-btn-sheet,
.rm-btn[class*="is-fill"]:focus-visible .rm-btn-sheet { transform: scale(1) skewX(0deg); }

/* Two halves closing in from top and bottom. */
.rm-btn.is-fill-split .rm-btn-sheet {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%, 0 100%);
}
.rm-btn.is-fill-split:hover .rm-btn-sheet,
.rm-btn.is-fill-split:focus-visible .rm-btn-sheet {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%, 0 50%, 100% 50%, 100% 100%, 0 100%);
}

.rm-btn.is-curtain .rm-btn-sheet { clip-path: inset(0 100% 0 0); }
.rm-btn.is-curtain:hover .rm-btn-sheet, .rm-btn.is-curtain:focus-visible .rm-btn-sheet { clip-path: inset(0 0 0 0); }

/* Light --------------------------------------------------------------- */

.rm-btn.is-glow:hover, .rm-btn.is-glow:focus-visible {
  box-shadow: 0 0 0 1px var(--rm-btn-accent), 0 0 24px -2px var(--rm-btn-accent);
}

.rm-btn.is-neon { color: var(--rm-btn-accent); border: 1px solid currentColor; text-shadow: 0 0 8px currentColor; }
.rm-btn.is-neon:hover, .rm-btn.is-neon:focus-visible { box-shadow: 0 0 18px -2px currentColor, inset 0 0 14px -6px currentColor; }
.rm-btn.is-neon-flicker { color: var(--rm-btn-accent); border: 1px solid currentColor; animation: rm-btn-flicker 4.5s steps(1) infinite; }
@keyframes rm-btn-flicker {
  0%, 42%, 46%, 100% { text-shadow: 0 0 9px currentColor; opacity: 1; }
  43%, 45% { text-shadow: none; opacity: 0.7; }
}

.rm-btn.is-sweep { overflow: hidden; }
.rm-btn.is-sweep .rm-btn-sheet {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rm-btn-accent) 60%, transparent), transparent);
  transform: translateX(-110%);
}
.rm-btn.is-sweep:hover .rm-btn-sheet, .rm-btn.is-sweep:focus-visible .rm-btn-sheet { transform: translateX(110%); }

.rm-btn.is-shine { overflow: hidden; }
.rm-btn.is-shine .rm-btn-sheet {
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 0.5) 50%, transparent 60%);
  transform: translateX(-100%);
}
.rm-btn.is-shine:hover .rm-btn-sheet, .rm-btn.is-shine:focus-visible .rm-btn-sheet { transform: translateX(100%); }

.rm-btn.is-gradient { overflow: hidden; color: var(--rm-ink); border-color: transparent; }
.rm-btn.is-gradient .rm-btn-sheet {
  z-index: -1;
  background: linear-gradient(100deg, var(--rm-accent), var(--rm-terracotta), var(--rm-yellow), var(--rm-accent));
  background-size: 300% 100%;
  animation: rm-btn-gradient 7s linear infinite;
}
@keyframes rm-btn-gradient { to { background-position: 300% 0; } }

.rm-btn.is-scan { overflow: hidden; }
.rm-btn.is-scan .rm-btn-sheet {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rm-btn-accent) 55%, transparent), transparent);
  height: 45%;
  inset: auto 0 auto 0;
  animation: rm-btn-scan 2.8s linear infinite;
}
@keyframes rm-btn-scan { from { transform: translateY(-160%); } to { transform: translateY(360%); } }

.rm-btn.is-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--rm-btn-accent);
  opacity: 0;
  pointer-events: none;
}
.rm-btn.is-pulse:hover::after, .rm-btn.is-pulse:focus-visible::after { animation: rm-btn-pulse 1.3s ease-out infinite; }
@keyframes rm-btn-pulse {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.22); }
}

/* Edges --------------------------------------------------------------- */

.rm-btn.is-border-grow { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.rm-btn.is-border-grow:hover, .rm-btn.is-border-grow:focus-visible {
  border-color: var(--rm-btn-accent);
  box-shadow: inset 0 0 0 2px var(--rm-btn-accent);
}

.rm-btn.is-border-dash { border: 1.5px dashed color-mix(in srgb, currentColor 45%, transparent); }
.rm-btn.is-border-dash:hover, .rm-btn.is-border-dash:focus-visible {
  border-color: var(--rm-btn-accent);
  animation: rm-btn-march 700ms linear infinite;
}
@keyframes rm-btn-march { to { background-position: 14px 0; } }

.rm-btn.is-corner-cut {
  border: 1px solid currentColor;
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: clip-path var(--rm-btn-duration) var(--rm-ease-out), color var(--rm-btn-duration);
}
.rm-btn.is-corner-cut:hover, .rm-btn.is-corner-cut:focus-visible {
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.rm-btn.is-double { border: 1px solid currentColor; box-shadow: 0 0 0 4px transparent, 0 0 0 5px currentColor; }
.rm-btn.is-double:hover, .rm-btn.is-double:focus-visible { box-shadow: 0 0 0 6px transparent, 0 0 0 7px var(--rm-btn-accent); }

.rm-btn.is-notch { border: 1px solid currentColor; border-radius: 0; }
.rm-btn.is-notch::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--rm-btn-accent);
  transform: translateY(-50%);
  transition: height var(--rm-btn-duration) var(--rm-ease-out);
}
.rm-btn.is-notch:hover::before, .rm-btn.is-notch:focus-visible::before { height: 70%; }

/* Motion -------------------------------------------------------------- */

.rm-btn.is-lift:hover, .rm-btn.is-lift:focus-visible { transform: translateY(-3px); }
.rm-btn.is-sink:hover, .rm-btn.is-sink:focus-visible { transform: translateY(3px); }
/*
 * A hint under the pointer and the full squash on the press. Every other look
 * in the kit answers a hover, so one that waits for a click reads as the one
 * that is broken.
 */
.rm-btn.is-squish:hover, .rm-btn.is-squish:focus-visible { transform: scale(0.985, 1.015); }
.rm-btn.is-squish:active { transform: scale(0.94, 1.04); }
.rm-btn.is-jelly:hover, .rm-btn.is-jelly:focus-visible { animation: rm-btn-jelly 600ms var(--rm-ease-out); }
@keyframes rm-btn-jelly {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.1, 0.9); }
  55% { transform: scale(0.94, 1.06); }
  75% { transform: scale(1.03, 0.98); }
  100% { transform: scale(1, 1); }
}
.rm-btn.is-wobble:hover, .rm-btn.is-wobble:focus-visible { animation: rm-btn-wobble 620ms ease-in-out; }
@keyframes rm-btn-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2deg); }
  75% { transform: rotate(-1deg); }
}
.rm-btn.is-tilt3d:hover, .rm-btn.is-tilt3d:focus-visible { transform: perspective(600px) rotateX(12deg) translateY(-2px); }
.rm-btn.is-nudge:hover, .rm-btn.is-nudge:focus-visible { transform: translateX(4px); }
.rm-btn.is-rotate-in:hover, .rm-btn.is-rotate-in:focus-visible { transform: rotate(-2deg) scale(1.03); }

/* Label --------------------------------------------------------------- */

.rm-btn[class*="is-slide"], .rm-btn.is-slice, .rm-btn.is-arrow { overflow: hidden; display: inline-grid; }
.rm-btn[class*="is-slide"] .rm-btn-face,
.rm-btn[class*="is-slide"] .rm-btn-twin,
.rm-btn.is-slice .rm-btn-face,
.rm-btn.is-slice .rm-btn-twin,
.rm-btn.is-arrow .rm-btn-face,
.rm-btn.is-arrow .rm-btn-twin { grid-area: 1 / 1; }

.rm-btn.is-slide-up .rm-btn-twin { transform: translateY(115%); }
.rm-btn.is-slide-up:hover .rm-btn-face, .rm-btn.is-slide-up:focus-visible .rm-btn-face { transform: translateY(-115%); }
.rm-btn.is-slide-up:hover .rm-btn-twin, .rm-btn.is-slide-up:focus-visible .rm-btn-twin { transform: translateY(0); }

.rm-btn.is-slide-down .rm-btn-twin { transform: translateY(-115%); }
.rm-btn.is-slide-down:hover .rm-btn-face, .rm-btn.is-slide-down:focus-visible .rm-btn-face { transform: translateY(115%); }
.rm-btn.is-slide-down:hover .rm-btn-twin, .rm-btn.is-slide-down:focus-visible .rm-btn-twin { transform: translateY(0); }

.rm-btn.is-slide-left .rm-btn-twin { transform: translateX(115%); }
.rm-btn.is-slide-left:hover .rm-btn-face, .rm-btn.is-slide-left:focus-visible .rm-btn-face { transform: translateX(-115%); }
.rm-btn.is-slide-left:hover .rm-btn-twin, .rm-btn.is-slide-left:focus-visible .rm-btn-twin { transform: translateX(0); }

/* The label splits at the middle and the twin arrives through the gap. */
.rm-btn.is-slice .rm-btn-face { clip-path: inset(0 0 0 0); }
.rm-btn.is-slice .rm-btn-twin { transform: translateY(100%); clip-path: inset(50% 0 0 0); }
.rm-btn.is-slice:hover .rm-btn-face, .rm-btn.is-slice:focus-visible .rm-btn-face { transform: translateY(-100%); }
.rm-btn.is-slice:hover .rm-btn-twin, .rm-btn.is-slice:focus-visible .rm-btn-twin { transform: translateY(0); clip-path: inset(0 0 0 0); }

.rm-btn.is-arrow .rm-btn-twin { transform: translateX(120%); }
.rm-btn.is-arrow:hover .rm-btn-face, .rm-btn.is-arrow:focus-visible .rm-btn-face { transform: translateX(-120%); }
.rm-btn.is-arrow:hover .rm-btn-twin, .rm-btn.is-arrow:focus-visible .rm-btn-twin { transform: translateX(0); }

.rm-btn.is-track:hover, .rm-btn.is-track:focus-visible { letter-spacing: 0.14em; }
.rm-btn.is-caps { text-transform: uppercase; letter-spacing: 0.08em; }
.rm-btn.is-caps:hover, .rm-btn.is-caps:focus-visible { letter-spacing: 0.18em; color: var(--rm-btn-accent); }

.rm-btn.is-strike::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rm-btn-duration) var(--rm-ease-out);
}
.rm-btn.is-strike:hover::after, .rm-btn.is-strike:focus-visible::after { transform: scaleX(1); }

.rm-btn.is-caret::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.15em;
  background: currentColor;
  animation: rm-btn-caret 1.1s steps(1) infinite;
}
@keyframes rm-btn-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

/* Progress ------------------------------------------------------------ */

.rm-btn.is-loading-bar:hover .rm-btn-rail,
.rm-btn.is-loading-bar:focus-visible .rm-btn-rail { transform: scaleX(1); }
.rm-btn.is-rail-grow .rm-btn-rail { transform-origin: center; }
.rm-btn.is-rail-grow:hover .rm-btn-rail, .rm-btn.is-rail-grow:focus-visible .rm-btn-rail { transform: scaleX(1); }
.rm-btn.is-progress .rm-btn-rail { height: 100%; opacity: 0.18; border-radius: inherit; }
.rm-btn.is-progress:hover .rm-btn-rail, .rm-btn.is-progress:focus-visible .rm-btn-rail { transform: scaleX(1); }

/* Texture ------------------------------------------------------------- */

.rm-btn.is-dots {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 8px 8px;
  background-position: 0 0;
  border: 1px solid currentColor;
  transition: background-position 1.4s linear, color var(--rm-btn-duration);
}
.rm-btn.is-dots:hover, .rm-btn.is-dots:focus-visible { background-position: 8px 8px; color: var(--rm-btn-accent); }

.rm-btn.is-stripes {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, currentColor 14%, transparent) 0 6px,
    transparent 6px 12px
  );
  background-size: 17px 17px;
  border: 1px solid currentColor;
  transition: background-position 900ms linear, color var(--rm-btn-duration);
}
.rm-btn.is-stripes:hover, .rm-btn.is-stripes:focus-visible { background-position: 17px 0; color: var(--rm-btn-accent); }

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

.rm-command {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: grid;
  place-items: start center;
  padding: 12vh 16px 16px;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s;
}
.rm-command.is-open { opacity: 1; }
.rm-command[hidden] { display: none; }
.rm-command > * { transform: translateY(-10px) scale(0.985); transition: transform 0.24s var(--rm-ease-out); }
.rm-command.is-open > * { transform: translateY(0) scale(1); }
.rm-command [role="option"][hidden] { display: none; }
.rm-command-empty { margin: 0; }
.rm-command-locked, .rm-command-locked body { overflow: hidden; }

.rm-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1000;
  width: min(360px, 86vw);
  overflow-y: auto;
  transition: transform var(--rm-sidebar-duration, 380ms) var(--rm-ease-out);
}
.rm-sidebar.is-left { left: 0; transform: translateX(-102%); }
.rm-sidebar.is-right { right: 0; transform: translateX(102%); }
.rm-sidebar.is-open { transform: translateX(0); }
.rm-sidebar[hidden] { display: none; }
.rm-sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgb(0 0 0 / 0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
.rm-sidebar-scrim.is-open { opacity: 1; }
.rm-sidebar-scrim[hidden] { display: none; }

.rm-rail { position: relative; display: grid; gap: 2px; }
.rm-rail-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: var(--rm-accent);
  border-radius: 999px;
  transition:
    transform var(--rm-rail-duration, 420ms) var(--rm-ease-out),
    height var(--rm-rail-duration, 420ms) var(--rm-ease-out);
}
.rm-rail-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.3s, transform 0.3s;
}
.rm-rail [aria-current] .rm-rail-dot { opacity: 1; transform: scale(1.4); background: var(--rm-accent); }

.rm-bottom {
  position: relative;
  display: flex;
  transition: transform var(--rm-bottom-duration, 380ms) var(--rm-ease-out);
}
.rm-bottom.is-hidden { transform: translateY(140%); }
.rm-bottom-pip {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition:
    transform var(--rm-bottom-duration, 380ms) var(--rm-ease-out),
    width var(--rm-bottom-duration, 380ms) var(--rm-ease-out);
}
.rm-bottom > :not(.rm-bottom-pip) { position: relative; z-index: 1; }

.rm-mega { position: relative; }
.rm-mega-item { position: static; }
.rm-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--rm-ease-out), transform 0.22s var(--rm-ease-out);
}
.rm-mega-item.is-open .rm-mega-panel { opacity: 1; transform: translateY(0); }
.rm-mega-panel[hidden] { display: none; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.rm-float { position: relative; }
.rm-float-label {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  transform-origin: left center;
  pointer-events: none;
  color: var(--rm-muted);
  transition: transform var(--rm-float-duration, 220ms) var(--rm-ease-out),
              color var(--rm-float-duration, 220ms);
}
/*
 * `:placeholder-shown` answers "is this empty?" in CSS, so the raised state
 * needs no JavaScript at all — the class is only there for a select, which has
 * no placeholder to shrink from.
 */
.rm-float :is(input, textarea):not(:placeholder-shown) ~ .rm-float-label,
.rm-float :is(input, textarea, select):focus ~ .rm-float-label,
.rm-float.is-filled .rm-float-label {
  transform: translateY(-140%) scale(0.82);
  color: var(--rm-accent);
}

/*
 * A grid row sized by an invisible copy of the text. Nothing is measured, so
 * it is right on the first paint, after a font swap and after a paste — where
 * the scrollHeight version is a frame late on all three.
 */
.rm-grow { display: grid; }
.rm-grow::after {
  content: attr(data-rm-grow-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
  /* Measured off the field itself, so the page keeps its own field styling. */
  padding: var(--rm-grow-pad, 0);
  border: var(--rm-grow-border, 0) solid transparent;
  line-height: var(--rm-grow-leading, normal);
}
.rm-grow > .rm-grow-field, .rm-grow::after {
  grid-area: 1 / 1;
  font: inherit;
  overflow: hidden;
}
.rm-grow-field { resize: none; }

.rm-charcount { font-family: var(--rm-mono); font-size: 11px; color: var(--rm-muted); }
.rm-charcount.is-near { color: var(--rm-terracotta); }
.rm-charcount.is-full { color: var(--rm-terracotta); font-weight: 500; }

.rm-password { position: relative; }
.rm-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.rm-password-toggle:hover, .rm-password-toggle:focus-visible { opacity: 1; }

.rm-validate-message {
  margin: 6px 0 0;
  color: var(--rm-terracotta);
  font-size: 13px;
}
.rm-validate .is-invalid { border-color: var(--rm-terracotta); }

/*
 * The input is untouched — still a range, still keyboard-operable, still
 * announced with its value. Only the track is painted from a custom property.
 */
.rm-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--rm-accent) var(--rm-range-fill, 0%),
    rgb(255 255 255 / 0.14) var(--rm-range-fill, 0%)
  );
}
.rm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rm-cream);
  border: 3px solid var(--rm-accent);
  cursor: grab;
}
.rm-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--rm-accent);
  border-radius: 50%;
  background: var(--rm-cream);
  cursor: grab;
}
.rm-range-output { font-family: var(--rm-mono); font-size: 12px; color: var(--rm-muted); }

.rm-drop { transition: border-color 0.2s, background-color 0.2s; }
.rm-drop.is-over { border-color: var(--rm-accent); background: color-mix(in srgb, var(--rm-accent) 10%, transparent); }
.rm-drop-readout { margin: 8px 0 0; font-size: 13px; color: var(--rm-muted); }

.rm-steps-bar { height: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.rm-steps-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--rm-accent);
  transform-origin: left center;
  transform: scaleX(calc(var(--rm-steps-at, 1) / var(--rm-steps-count, 1)));
  transition: transform var(--rm-steps-duration, 320ms) var(--rm-ease-out);
}
.rm-steps-status { margin: 8px 0 0; font-family: var(--rm-mono); font-size: 11px; color: var(--rm-muted); }
.rm-steps [data-rm-step][hidden] { display: none; }

/* Decoration on top of the real focus ring, never instead of it. */
.rm-field-focus { position: relative; }
.rm-field-focus:focus-visible {
  outline: 2px solid var(--rm-field-focus-color, #2aa7e4);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rm-field-focus-color, #2aa7e4) 18%, transparent);
  transition: box-shadow var(--rm-field-focus-duration, 260ms) var(--rm-ease-out);
}

.rm-submit[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* ── Mascot ─────────────────────────────────────────────────────────────── */

/*
 * The mascot.
 *
 * Every colour is a gradient defined in the SVG itself, so the shading travels
 * with the shape rather than being painted on top of it, and the whole
 * character is one paint. Nothing here animates a size — the hands, the lids
 * and the eyes all move on transforms, so the face never nudges the field it
 * is sitting above.
 */
.rm-mascot {
  width: var(--rm-mascot-size, 104px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
}
.rm-mascot svg { width: 100%; height: auto; overflow: visible; display: block; }

.rm-mascot-head { fill: url(#rmMascotSkin); }
.rm-mascot-ear { fill: url(#rmMascotEar); }
.rm-mascot-snout { fill: url(#rmMascotSnout); }
.rm-mascot-palm { fill: url(#rmMascotHand); }
.rm-mascot-fingers rect { fill: url(#rmMascotHand); }

/* The bounce light along the bottom edge: what makes the head read as round. */
.rm-mascot-rim {
  fill: none;
  stroke: rgba(255, 233, 204, 0.55);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.rm-mascot-eye { fill: #241a12; }
.rm-mascot-glint { fill: rgba(255, 255, 255, 0.92); }
.rm-mascot-nose { fill: #7c4d31; }
.rm-mascot-mouth { stroke: #7c4d31; fill: none; }

/* One transform for the pair, so both eyes track together. */
.rm-mascot-eyes {
  transform: translateX(calc(var(--rm-mascot-look, 0) * 1px));
  transition: transform 0.3s var(--rm-ease-out);
}

/*
 * The lids are the blink and the squint, both. Scaling a lid down to nothing is
 * the open eye; scaling it up covers the eye. One property, two states.
 */
.rm-mascot-lid {
  fill: url(#rmMascotSkin);
  transform: scaleY(0);
  transform-origin: center 44px;
  transition: transform 0.18s var(--rm-ease-out);
}

.rm-mascot-hands {
  transform: translateY(46px);
  transition: transform 0.42s var(--rm-ease-out);
}
.rm-mascot-hand { transition: transform 0.42s var(--rm-ease-out); }
.rm-mascot-fingers rect { transition: transform 0.34s var(--rm-ease-out); }

/* Hands up, eyes shut. */
.rm-mascot.is-hiding .rm-mascot-hands { transform: translateY(-58px); }
.rm-mascot.is-hiding .rm-mascot-lid { transform: scaleY(1); }

/*
 * Peeking: the right hand drops a little and two of its fingers part, so there
 * is a real gap for a real eye to look through. The eye behind it opens and
 * looks toward the gap. It is four small transforms and it is the whole
 * character of the thing.
 */
.rm-mascot.is-peeking .rm-mascot-hand.is-right { transform: translateY(7px) rotate(-7deg); }
.rm-mascot.is-peeking .rm-mascot-hand.is-right .rm-mascot-fingers rect:nth-child(2) {
  transform: translateX(-4px) rotate(-9deg);
}
.rm-mascot.is-peeking .rm-mascot-hand.is-right .rm-mascot-fingers rect:nth-child(3) {
  transform: translateX(5px) rotate(9deg);
}
.rm-mascot.is-peeking .rm-mascot-lid:last-child { transform: scaleY(0.15); }
.rm-mascot.is-peeking .rm-mascot-eyes { transform: translateX(2px) translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  /* The states still change; they simply arrive rather than travel. */
  .rm-mascot-hands,
  .rm-mascot-hand,
  .rm-mascot-lid,
  .rm-mascot-eyes,
  .rm-mascot-fingers rect { transition-duration: 0s; }
}

/* ── Success button ─────────────────────────────────────────────────────── */

.rm-success {
  position: relative;
  overflow: hidden;
  transition:
    width var(--rm-success-duration, 520ms) var(--rm-ease-in-out),
    background-color var(--rm-success-duration, 520ms),
    border-radius var(--rm-success-duration, 520ms) var(--rm-ease-in-out);
}
.rm-success-label { display: block; transition: opacity 0.2s, transform var(--rm-success-duration, 520ms) var(--rm-ease-out); }
.rm-success-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.rm-success-mark svg { width: 46%; height: 46%; }
/* stroke-dashoffset, so the tick is drawn rather than faded in. */
.rm-success-mark path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset var(--rm-success-duration, 520ms) var(--rm-ease-out) 120ms;
}
.rm-success.is-done { background: #2f9e63; border-color: transparent; color: #fff; }
.rm-success.is-done .rm-success-label { opacity: 0; transform: scale(0.9); }
.rm-success.is-done .rm-success-mark { opacity: 1; }
.rm-success.is-done .rm-success-mark path { stroke-dashoffset: 0; }
.rm-success.is-failed { animation: rm-shake 460ms var(--rm-ease-out); border-color: var(--rm-terracotta); }
.rm-success-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes rm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* ── One-time code ──────────────────────────────────────────────────────── */

.rm-otp { display: inline-flex; gap: 8px; }
.rm-otp-box {
  width: 46px;
  height: 56px;
  text-align: center;
  font-family: var(--rm-mono);
  font-size: 20px;
  border-radius: var(--rm-radius-sm);
  transition: border-color 0.2s, transform 0.2s var(--rm-ease-out);
}
.rm-otp-box.is-filled { border-color: var(--rm-accent); }
.rm-otp-box:focus { transform: translateY(-2px); }

/* ── Padlock ────────────────────────────────────────────────────────────── */

.rm-lock { position: relative; }
.rm-lock-body { width: var(--rm-lock-size, 68px); }
.rm-lock-body svg { width: 100%; height: auto; overflow: visible; }
.rm-lock-case { fill: var(--rm-accent); }
.rm-lock-pin { fill: var(--rm-ink); }
.rm-lock-shackle {
  transform-origin: 18px 32px;
  transition: transform 0.5s var(--rm-ease-out);
}
/* Up and swung open about the hinge, not lifted straight off. */
.rm-lock.is-open .rm-lock-shackle { transform: translateY(-10px) rotate(-22deg); }
.rm-lock.is-open .rm-lock-case { fill: #2f9e63; }
.rm-lock.is-open .rm-lock-body { animation: rm-lock-pop 520ms var(--rm-ease-out); }
.rm-lock.is-denied .rm-lock-body { animation: rm-shake 460ms var(--rm-ease-out); }
.rm-lock.is-denied .rm-lock-case { fill: var(--rm-terracotta); }
.rm-lock-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
@keyframes rm-lock-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.1, 0.9) translateY(3px); }
  70% { transform: scale(0.97, 1.04) translateY(-2px); }
  100% { transform: scale(1); }
}

/* ── Card kit ───────────────────────────────────────────────────────────── */

.rm-card {
  --rm-card-accent: var(--rm-accent);
  --rm-card-duration: 420ms;
  position: relative;
  isolation: isolate;
  transition:
    transform var(--rm-card-duration) var(--rm-ease-out),
    box-shadow var(--rm-card-duration) var(--rm-ease-out),
    border-color var(--rm-card-duration) var(--rm-ease-out),
    filter var(--rm-card-duration) var(--rm-ease-out);
}
.rm-card.is-still, .rm-card.is-still * { transition-duration: 0ms !important; }
.rm-card :is(img, video) { transition: transform var(--rm-card-duration) var(--rm-ease-out), filter var(--rm-card-duration); }

/* Raise */
.rm-card.is-lift:hover, .rm-card.is-lift:focus-within { transform: translateY(-6px); }
.rm-card.is-lift-glow:hover, .rm-card.is-lift-glow:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -28px var(--rm-card-accent);
}
.rm-card.is-lift-shadow:hover, .rm-card.is-lift-shadow:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / 0.95);
}
.rm-card.is-float:hover, .rm-card.is-float:focus-within { transform: translateY(-4px) scale(1.014); }
.rm-card.is-press-in:hover, .rm-card.is-press-in:focus-within { transform: scale(0.985); filter: brightness(1.06); }
.rm-card.is-settle:hover, .rm-card.is-settle:focus-within { transform: translateY(-3px) rotate(-0.4deg); }

/* Edge */
.rm-card.is-edge-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rm-card-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rm-card-duration) var(--rm-ease-out);
}
.rm-card.is-edge-line:hover::after, .rm-card.is-edge-line:focus-within::after { transform: scaleX(1); }
.rm-card.is-edge-grow:hover, .rm-card.is-edge-grow:focus-within { box-shadow: inset 0 0 0 2px var(--rm-card-accent); }
.rm-card.is-corner-fold::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent var(--rm-card-accent) transparent transparent;
  transition: border-width var(--rm-card-duration) var(--rm-ease-out);
}
.rm-card.is-corner-fold:hover::before, .rm-card.is-corner-fold:focus-within::before { border-width: 0 28px 28px 0; }
.rm-card.is-notch { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.rm-card.is-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  opacity: 0;
  transition: opacity var(--rm-card-duration), inset var(--rm-card-duration) var(--rm-ease-out);
  pointer-events: none;
}
.rm-card.is-frame:hover::after, .rm-card.is-frame:focus-within::after { opacity: 1; inset: 12px; }
.rm-card.is-outline-draw { box-shadow: inset 0 0 0 0 var(--rm-card-accent); }
.rm-card.is-outline-draw:hover, .rm-card.is-outline-draw:focus-within { box-shadow: inset 0 0 0 3px var(--rm-card-accent); }

/* Light */
.rm-card.is-sheen { overflow: hidden; }
.rm-card.is-sheen::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(100deg, transparent 42%, rgb(255 255 255 / 0.16) 50%, transparent 58%);
  transform: translateX(-60%);
  transition: transform 900ms var(--rm-ease-out);
  pointer-events: none;
}
.rm-card.is-sheen:hover::before, .rm-card.is-sheen:focus-within::before { transform: translateX(60%); }
.rm-card.is-gradient-edge { border: 1px solid transparent; background-clip: padding-box; }
.rm-card.is-gradient-edge:hover, .rm-card.is-gradient-edge:focus-within {
  box-shadow: 0 0 0 1px var(--rm-card-accent), 0 0 26px -10px var(--rm-card-accent);
}
.rm-card.is-glow-ring:hover, .rm-card.is-glow-ring:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rm-card-accent) 60%, transparent), 0 0 40px -18px var(--rm-card-accent);
}
.rm-card.is-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--rm-card-duration);
  background: radial-gradient(320px circle at 50% 0%, color-mix(in srgb, var(--rm-card-accent) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.rm-card.is-spot:hover::before, .rm-card.is-spot:focus-within::before { opacity: 1; }
.rm-card.is-beam-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rm-card-accent), transparent);
  opacity: 0;
  transition: opacity var(--rm-card-duration), left var(--rm-card-duration), right var(--rm-card-duration);
}
.rm-card.is-beam-top:hover::before, .rm-card.is-beam-top:focus-within::before { opacity: 1; left: 0; right: 0; }
.rm-card.is-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgb(0 0 0 / 0.5));
  opacity: 0.7;
  transition: opacity var(--rm-card-duration);
}
.rm-card.is-vignette:hover::after, .rm-card.is-vignette:focus-within::after { opacity: 0.25; }

/* Content */
.rm-card.is-zoom-media { overflow: hidden; }
.rm-card.is-zoom-media:hover :is(img, video),
.rm-card.is-zoom-media:focus-within :is(img, video) { transform: scale(1.07); }
.rm-card.is-pan-media { overflow: hidden; }
.rm-card.is-pan-media:hover :is(img, video),
.rm-card.is-pan-media:focus-within :is(img, video) { transform: scale(1.1) translateX(-3%); }
.rm-card.is-reveal-meta [data-rm-card-meta] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--rm-card-duration), transform var(--rm-card-duration) var(--rm-ease-out);
}
.rm-card.is-reveal-meta:hover [data-rm-card-meta],
.rm-card.is-reveal-meta:focus-within [data-rm-card-meta] { opacity: 1; transform: translateY(0); }
.rm-card.is-slide-title :is(h2, h3, h4) {
  transition: transform var(--rm-card-duration) var(--rm-ease-out);
}
.rm-card.is-slide-title:hover :is(h2, h3, h4),
.rm-card.is-slide-title:focus-within :is(h2, h3, h4) { transform: translateX(8px); }
.rm-card.is-blur-out { overflow: hidden; }
.rm-card.is-blur-out :is(img, video) { filter: blur(0); }
.rm-card.is-blur-out:hover :is(img, video),
.rm-card.is-blur-out:focus-within :is(img, video) { filter: blur(3px) brightness(0.8); }
.rm-card.is-split { overflow: hidden; }
.rm-card.is-split::before, .rm-card.is-split::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: color-mix(in srgb, var(--rm-card-accent) 16%, transparent);
  transition: transform var(--rm-card-duration) var(--rm-ease-out);
  pointer-events: none;
  z-index: -1;
}
.rm-card.is-split::before { top: 0; transform: translateY(-100%); }
.rm-card.is-split::after { bottom: 0; transform: translateY(100%); }
.rm-card.is-split:hover::before, .rm-card.is-split:focus-within::before,
.rm-card.is-split:hover::after, .rm-card.is-split:focus-within::after { transform: translateY(0); }

/* ── Cards that measure ─────────────────────────────────────────────────── */

.rm-layers { transform-style: preserve-3d; will-change: transform; }
.rm-layers [data-rm-depth] { will-change: transform; }

.rm-edge { position: relative; isolation: isolate; }
.rm-edge::before {
  content: "";
  position: absolute;
  inset: calc(var(--rm-edge-width, 1.5px) * -1);
  border-radius: inherit;
  padding: var(--rm-edge-width, 1.5px);
  background: conic-gradient(
    from var(--rm-edge-angle, 0deg),
    transparent 0deg,
    var(--rm-edge-color, #2aa7e4) var(--rm-edge-spread, 60deg),
    transparent calc(var(--rm-edge-spread, 60deg) * 2)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.rm-edge:hover::before, .rm-edge:focus-within::before { opacity: 1; }

.rm-fan { display: grid; place-items: center; }
.rm-fan-card {
  grid-area: 1 / 1;
  transition: transform 0.5s var(--rm-ease-out);
}
.rm-fan:hover .rm-fan-card, .rm-fan:focus-within .rm-fan-card {
  transform:
    translateX(var(--rm-fan-shift, 0))
    translateY(var(--rm-fan-lift, 0))
    rotate(var(--rm-fan-angle, 0deg));
}

.rm-card-parallax { overflow: hidden; }
.rm-card-parallax :is(img, video, [data-rm-card-media]) { will-change: transform; }

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

.rm-mosaic-tile { will-change: transform, opacity; }

/* Starts larger than its frame; without clipping the page scrolls sideways. */
.rm-zoom-out { position: relative; overflow: clip; }
.rm-zoom-out [data-rm-zoom-hero] { transform-origin: center; will-change: transform; }
.rm-zoom-out [data-rm-zoom-rest] { opacity: 0; }

.rm-lines-in .rm-line { display: block; overflow: hidden; }
.rm-lines-in .rm-line > * { display: inline-block; }

/*
 * background-clip on the real heading, so it is still a heading: selectable,
 * searchable, read aloud and translated. An SVG mask or a PNG is a picture of
 * a headline, and everything that makes text text is gone.
 */
.rm-text-mask {
  background-image: var(--rm-text-mask-image);
  background-size: cover;
  background-position: 50% calc(50% + var(--rm-text-mask-y, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rm-timeline { position: relative; list-style: none; }
.rm-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.rm-timeline::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 2px;
  height: calc(var(--rm-timeline-progress, 0) * 100%);
  background: var(--rm-accent);
}
.rm-timeline-item { position: relative; padding-left: 34px; }
.rm-timeline-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rm-ink);
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  transition: border-color 0.35s, transform 0.35s var(--rm-ease-out);
}
.rm-timeline-item.is-reached::before { border-color: var(--rm-accent); transform: scale(1.2); }
.rm-timeline-item { opacity: 0.45; transition: opacity 0.4s; }
.rm-timeline-item.is-reached { opacity: 1; }

.rm-split-scroll [data-rm-split-a], .rm-split-scroll [data-rm-split-b] { will-change: transform; }

.rm-reveal-grid > * { will-change: transform, opacity; }

.rm-pinned-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.6s var(--rm-ease-out), transform 0.9s var(--rm-ease-out);
}
.rm-pinned-frame.is-current { opacity: 1; transform: scale(1); }
.rm-pinned-chapter { opacity: 0.4; transition: opacity 0.4s; }
.rm-pinned-chapter.is-current { opacity: 1; }

/* ── Carousels ──────────────────────────────────────────────────────────── */

.rm-coverflow {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  perspective: 1400px;
  padding-inline: 25%;
  scrollbar-width: none;

  /*
   * One vanishing point for the whole row, and the slides live in its 3D
   * space rather than each flattening into its own plane.
   */
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  /* So the first and last slide can reach the middle. */
  scroll-padding-inline: 50%;
}
.rm-coverflow::-webkit-scrollbar { display: none; }
.rm-coverflow-slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: filter 0.3s;
  filter: saturate(0.65);
}
.rm-coverflow-slide.is-front { filter: none; }

.rm-thumbs-main {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rm-thumbs-main::-webkit-scrollbar { display: none; }
.rm-thumbs-main > * { flex: 0 0 100%; scroll-snap-align: center; }
.rm-thumbs-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.rm-thumbs-strip [aria-current] { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

.rm-autoplay-control {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.rm-autoplay-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}
/* Two bars while it is running, a triangle once you have paused it. */
.rm-autoplay-control:not(.is-paused) .rm-autoplay-icon {
  width: 9px;
  height: 11px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.rm-autoplay-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.rm-autoplay.is-running + .rm-autoplay-control .rm-autoplay-ring {
  border-color: var(--rm-accent);
  animation: rm-autoplay-tick var(--rm-autoplay-interval, 4200ms) linear infinite;
}
@keyframes rm-autoplay-tick {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.rm-wheel {
  position: relative;
  display: grid;
  place-items: center;
  transform: rotate(var(--rm-wheel-turn, 0deg));
  transition: none;
}
.rm-wheel-item {
  position: absolute;
  transform:
    rotate(var(--rm-wheel-angle, 0deg))
    translateY(calc(var(--rm-wheel-radius, 130px) * -1))
    rotate(calc((var(--rm-wheel-angle, 0deg) + var(--rm-wheel-turn, 0deg)) * -1));
  transition: opacity 0.3s, filter 0.3s;
  opacity: 0.55;
}
.rm-wheel-item.is-front { opacity: 1; }

.rm-peek {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Real scroll padding, so snapping and the scrollbar agree with the peek. */
  scroll-padding-inline: var(--rm-peek, 64px);
  padding-inline: var(--rm-peek, 64px);
}
.rm-peek-slide { flex: 0 0 calc(100% - var(--rm-peek, 64px) * 2); scroll-snap-align: center; }

.rm-ticker { display: grid; gap: 10px; overflow: hidden; }
.rm-ticker-row { display: flex; width: max-content; will-change: transform; }
.rm-ticker-group { display: flex; align-items: center; flex: none; }
.rm-ticker.is-static { overflow-x: auto; }
.rm-ticker.is-static .rm-ticker-row { transform: none !important; }

.rm-slideshow { position: relative; }
.rm-slideshow-slide { transition: opacity var(--rm-slideshow-duration, 520ms) var(--rm-ease-out); }
.rm-slideshow-slide[hidden] { display: none; }
.rm-slideshow-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rm-slideshow-controls button {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.rm-slideshow-dots { display: flex; gap: 6px; margin-inline: auto; }
.rm-slideshow-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  opacity: 0.45;
  transition: opacity 0.25s, transform 0.25s;
}
.rm-slideshow-dots button.is-current { opacity: 1; background: currentColor; transform: scale(1.25); }
.rm-slideshow-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* ── Phone shapes ───────────────────────────────────────────────────────── */

.rm-island {
  --rm-island-fade: 10px;

  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--rm-radius-pill);
  /* The box follows what is measured inside it, never a keyframe. */
  width: calc(var(--rm-island-width, 120px) + 34px);
  height: calc(var(--rm-island-height, 22px) + 20px);
  transition:
    width var(--rm-island-duration, 520ms) var(--rm-ease-in-out),
    height var(--rm-island-duration, 520ms) var(--rm-ease-in-out);

  /*
   * The content fades out against the top and bottom edges rather than being
   * cut off by them.
   *
   * While the island is growing or shrinking, whatever is inside is briefly
   * taller than the box — with plain `overflow: hidden` that lands as a hard
   * horizontal slice through a line of text, which is the one frame everybody
   * notices. A mask makes the same clipping soft, so the content appears to
   * dissolve into the shell instead of being guillotined by it.
   *
   * It costs one composited layer and nothing per frame.
   */
  mask: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--rm-island-fade),
    #000 calc(100% - var(--rm-island-fade)),
    transparent 100%
  );
}
.rm-island > * { white-space: nowrap; }

.rm-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--rm-radius-lg) var(--rm-radius-lg) 0 0;
  transform: translateY(102%);
  transition: transform var(--rm-sheet-duration, 420ms) var(--rm-ease-out);
  touch-action: none;
}
.rm-sheet.is-open { transform: translateY(0); }
/* While a finger is on it there is no transition, or it fights the drag. */
.rm-sheet.is-dragging { transition: none; }
.rm-sheet[hidden] { display: none; }
.rm-sheet-grip {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 26px;
  cursor: grab;
  touch-action: none;
}
.rm-sheet-grip::before {
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.3;
}
.rm-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.rm-sheet-scrim.is-open { opacity: 1; }
.rm-sheet-scrim[hidden] { display: none; }
.rm-sheet-locked, .rm-sheet-locked body { overflow: hidden; }

.rm-segmented { position: relative; display: inline-flex; }
.rm-segmented-pip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition:
    transform var(--rm-segmented-duration, 380ms) var(--rm-ease-out),
    width var(--rm-segmented-duration, 380ms) var(--rm-ease-out);
}
.rm-segmented > label { position: relative; z-index: 1; cursor: pointer; }
.rm-segmented input[type="radio"] {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rm-segmented input:focus-visible + * { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

.rm-frosted {
  transition: backdrop-filter 0.3s, background-color 0.3s, border-color 0.3s;
}
.rm-frosted.is-frosted { backdrop-filter: blur(var(--rm-frosted-blur, 16px)); }
.rm-frosted-mark { position: absolute; top: 0; left: 0; width: 1px; pointer-events: none; }

.rm-modal { border: 0; padding: 0; background: transparent; color: inherit; }
.rm-modal::backdrop { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(3px); }

.rm-actions {
  position: fixed;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  z-index: 1000;
  width: min(420px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform var(--rm-actions-duration, 380ms) var(--rm-ease-out),
    opacity var(--rm-actions-duration, 380ms);
}
.rm-actions.is-open { transform: translateY(0); opacity: 1; }
.rm-actions[hidden] { display: none; }
/* Each choice arrives a beat after the one above it. */
.rm-actions.is-open > * {
  animation: rm-actions-in var(--rm-actions-duration, 380ms) var(--rm-ease-out) backwards;
  animation-delay: calc(var(--rm-actions-index, 0) * 40ms);
}
@keyframes rm-actions-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.rm-actions-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgb(0 0 0 / 0.45);
  opacity: 0;
  transition: opacity 0.3s;
}
.rm-actions-scrim.is-open { opacity: 1; }
.rm-actions-scrim[hidden] { display: none; }

.rm-toasts {
  position: fixed;
  z-index: 1003;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}
.rm-toasts.is-bottom-right { right: 16px; bottom: 16px; }
.rm-toasts.is-bottom-left { left: 16px; bottom: 16px; }
.rm-toasts.is-top-right { right: 16px; top: 16px; }
.rm-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.26s var(--rm-ease-out), transform 0.26s var(--rm-ease-out);
}
.rm-toast.is-in { opacity: 1; transform: none; }
.rm-toast-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.rm-toast-close:hover, .rm-toast-close:focus-visible { opacity: 1; }

.rm-context-menu {
  position: fixed;
  z-index: 1002;
  opacity: 0;
  transform: scale(0.97);
  transform-origin: top left;
  transition: opacity 0.14s, transform 0.14s var(--rm-ease-out);
}
.rm-context-menu.is-open { opacity: 1; transform: scale(1); }
.rm-context-menu[hidden] { display: none; }

/*
 * The icon is given a fixed box so the labels line up down the menu whatever
 * each icon's own width happens to be — a menu whose text starts at a
 * different place on every row is a menu that reads as a list of accidents.
 */
.rm-context-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.rm-context-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.rm-skeleton-ghost { display: grid; gap: 10px; }
.rm-skeleton-ghost span {
  display: block;
  height: 0.85em;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.rm-skeleton.is-shimmering .rm-skeleton-ghost span {
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, currentColor 10%, transparent) 40%,
    transparent 60%
  );
  background-size: 260% 100%;
  animation: rm-skeleton-sweep 1.5s linear infinite;
}
@keyframes rm-skeleton-sweep { to { background-position: -260% 0; } }

.rm-spinner {
  display: inline-block;
  width: var(--rm-spinner-size, 24px);
  height: var(--rm-spinner-size, 24px);
  position: relative;
}
.rm-spinner.is-ring {
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: rm-spin 800ms linear infinite;
}
.rm-spinner.is-arc {
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: rm-spin 700ms cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}
.rm-spinner.is-dual { border-radius: 50%; border: 2px solid transparent; border-top-color: currentColor; animation: rm-spin 900ms linear infinite; }
.rm-spinner.is-dual i {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: currentColor;
  animation: rm-spin 700ms linear infinite reverse;
}
.rm-spinner.is-bars { display: inline-flex; align-items: center; gap: 2px; }
.rm-spinner.is-bars i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: rm-spinner-bar 900ms ease-in-out infinite;
}
.rm-spinner.is-bars i:nth-child(2) { animation-delay: 120ms; }
.rm-spinner.is-bars i:nth-child(3) { animation-delay: 240ms; }
.rm-spinner.is-bars i:nth-child(4) { animation-delay: 360ms; }
@keyframes rm-spinner-bar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.rm-spinner.is-orbit { animation: rm-spin 1200ms linear infinite; }
.rm-spinner.is-orbit i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: currentColor;
}
.rm-spinner.is-orbit i:nth-child(2) { top: auto; bottom: 0; opacity: 0.5; }
.rm-spinner.is-pulse { border-radius: 50%; background: currentColor; animation: rm-spinner-pulse 1100ms ease-in-out infinite; }
@keyframes rm-spinner-pulse { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } }
@keyframes rm-spin { to { transform: rotate(360deg); } }
/* Still, not gone: the message is "working", not "here is a wheel". */
.rm-spinner.is-still { animation: none !important; opacity: 0.55; }
.rm-spinner.is-still i { animation: none !important; }

.rm-progress-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  overflow: hidden;
}
.rm-progress-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--rm-accent);
  transform-origin: left center;
  /* `scale` rather than a transform, so the radius is not squashed with it. */
  scale: var(--rm-progress-value, 0%) 1;
  transition: scale var(--rm-progress-duration, 520ms) var(--rm-ease-out);
}

.rm-dots-loader { display: inline-flex; align-items: center; gap: 4px; }
.rm-dots-loader i {
  width: var(--rm-dots-loader-size, 6px);
  height: var(--rm-dots-loader-size, 6px);
  border-radius: 50%;
  background: currentColor;
  animation: rm-dots-bounce 1s ease-in-out infinite;
}
.rm-dots-loader.is-still i { animation: none; opacity: 0.5; }
@keyframes rm-dots-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.rm-status { display: inline-flex; align-items: center; gap: 8px; }
.rm-status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.rm-status.is-live .rm-status-dot { background: #2f9e63; }
.rm-status.is-busy .rm-status-dot { background: var(--rm-yellow); }
.rm-status.is-down .rm-status-dot { background: var(--rm-terracotta); }
.rm-status.is-idle .rm-status-dot { background: var(--rm-muted); }
/* Only the states that are actually live get a pulse. */
.rm-status.is-live .rm-status-dot::after,
.rm-status.is-busy .rm-status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: rm-status-pulse 1.8s ease-out infinite;
}
@keyframes rm-status-pulse {
  from { opacity: 0.7; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.6); }
}

.rm-badge { position: relative; display: inline-grid; overflow: hidden; }
.rm-badge-face { grid-area: 1 / 1; }
.rm-badge-face.is-arriving { animation: rm-badge-in var(--rm-badge-duration, 320ms) var(--rm-ease-out); }
.rm-badge-face.is-leaving {
  grid-area: 1 / 1;
  animation: rm-badge-out var(--rm-badge-duration, 320ms) var(--rm-ease-out) forwards;
}
@keyframes rm-badge-in { from { transform: translateY(110%); opacity: 0; } }
@keyframes rm-badge-out { to { transform: translateY(-110%); opacity: 0; } }

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

.rm-sparkline { position: relative; display: block; }
.rm-sparkline > svg { display: block; width: 100%; height: 100%; }

.rm-bars { list-style: none; }
.rm-bars-item { position: relative; }
.rm-bars-fill {
  display: block;
  border-radius: 4px 4px 0 0;
  background: var(--rm-accent);
  transform-origin: bottom center;
  transform: scaleY(var(--rm-bars-share, 1));
}
.rm-bars:not(.is-grown) .rm-bars-fill { transform: scaleY(0); }
.rm-bars.is-grown .rm-bars-fill { transform: scaleY(var(--rm-bars-share, 1)); }

.rm-donut, .rm-gauge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--rm-donut-size, var(--rm-gauge-size, 96px));
  height: var(--rm-donut-size, var(--rm-gauge-size, 96px));
}
.rm-donut > svg, .rm-gauge > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rm-donut > :not(svg), .rm-gauge > :not(svg) { position: relative; z-index: 1; }

.rm-stat { position: relative; }
.rm-stat-delta { font-family: var(--rm-mono); font-size: 12px; }
.rm-stat.is-up .rm-stat-delta { color: #2f9e63; }
.rm-stat.is-down .rm-stat-delta { color: var(--rm-terracotta); }
.rm-stat.is-flat .rm-stat-delta { color: var(--rm-muted); }

.rm-rating { display: inline-flex; gap: 2px; border: 0; padding: 0; margin: 0; }
.rm-rating-star { position: relative; cursor: pointer; font-size: 1.35em; line-height: 1; color: color-mix(in srgb, currentColor 26%, transparent); }
.rm-rating-star input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rm-rating-star.is-on { color: var(--rm-yellow); }
.rm-rating-star span { transition: transform 0.2s var(--rm-ease-out), color 0.2s; display: inline-block; }
.rm-rating-star:hover span { transform: scale(1.18); }
.rm-rating-star input:focus-visible + span { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

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

/*
 * The item positions are written by the script, because the arc depends on how
 * many items there are. What is here is only what the shape needs to exist at
 * all: a stacking context, and items that can leave the flow without moving
 * anything around them.
 */
.rm-circle-nav { position: relative; display: inline-flex; }
.rm-circle-nav-items {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.rm-circle-nav.is-open .rm-circle-nav-items { pointer-events: auto; }
.rm-circle-nav-item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}
.rm-circle-nav-item > a,
.rm-circle-nav-item > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rm-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 20, 20, 0.88);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.rm-circle-nav-item > a:hover,
.rm-circle-nav-item > button:hover { border-color: var(--rm-accent); }

.rm-curtain-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--rm-ink);
}
.rm-curtain-nav [data-rm-curtain-column] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  /* Each column is uncovered by its own clip-path; the content never moves. */
  will-change: clip-path;
}
.rm-curtain-nav [data-rm-curtain-column]:last-child { border-right: 0; }

/* Only the transform is ours; the row keeps whatever layout it had. */
.rm-hover-spread > * { will-change: transform; }

.rm-breadcrumbs ol,
.rm-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.4;
}
.rm-breadcrumbs-more button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}
.rm-breadcrumbs-more button:hover { border-color: var(--rm-accent); }

.rm-tree,
.rm-tree ul,
.rm-tree ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-tree ul,
.rm-tree ol { padding-left: 1.1rem; }
.rm-tree li > button,
.rm-tree li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0.22rem 0;
  cursor: pointer;
  text-decoration: none;
}
.rm-tree-branch > button::before,
.rm-tree-branch > a::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--rm-tree-duration, 320ms) var(--rm-ease-out);
}
.rm-tree-branch.is-open > button::before,
.rm-tree-branch.is-open > a::before { transform: rotate(90deg); }
/*
 * 0fr → 1fr is the whole trick: the row grows to exactly the height of what is
 * inside it, with nobody measuring anything and nothing to go stale.
 */
.rm-tree-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-tree-duration, 320ms) var(--rm-ease-out);
}
.rm-tree-branch.is-open > .rm-tree-shell { grid-template-rows: 1fr; }
.rm-tree-shell > * { overflow: hidden; min-height: 0; }

.rm-split-nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  isolation: isolate;
}
.rm-split-nav [data-rm-split-half] {
  position: relative;
  z-index: 2;
  background: var(--rm-ink);
  will-change: transform;
}
.rm-split-nav-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 0.4rem;
}
/*
 * :where() so this carries no specificity — it lifts the trigger above the
 * halves by default, and any placement the page wants still wins.
 */
:where(.rm-split-nav [data-rm-split-trigger]) { position: relative; z-index: 3; }

.rm-stack-nav { position: relative; }
.rm-stack-nav-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.rm-stack-nav-item {
  will-change: transform;
  transform-origin: 50% 0;
}
.rm-stack-nav:not(.is-open) .rm-stack-nav-item {
  /* Shut, the pile is decoration — nothing in it should take a click. */
  pointer-events: none;
}

.rm-dot-nav {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}
.rm-dot-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
.rm-dot-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: transform 0.25s var(--rm-ease-out), background 0.25s;
}
.rm-dot-nav-link.is-current .rm-dot-nav-dot {
  background: var(--rm-accent);
  transform: scale(1.5);
}
.rm-dot-nav-text {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s var(--rm-ease-out), transform 0.25s var(--rm-ease-out);
}
.rm-dot-nav-link:hover .rm-dot-nav-text,
.rm-dot-nav-link:focus-visible .rm-dot-nav-text,
.rm-dot-nav-link.is-current .rm-dot-nav-text { opacity: 1; transform: none; }

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

.rm-rings-host,
.rm-hex-host,
.rm-plus-host,
.rm-diagonals-host,
.rm-topography-host,
.rm-circuit-host,
.rm-vignette-host,
.rm-halftone-host { position: relative; isolation: isolate; }

.rm-rings,
.rm-hex,
.rm-plus,
.rm-diagonals,
.rm-topography,
.rm-circuit,
.rm-vignette,
.rm-halftone {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.rm-rings { display: grid; place-items: center; }
.rm-rings i {
  position: absolute;
  width: var(--rm-rings-size, 220px);
  height: var(--rm-rings-size, 220px);
  border: 1px solid var(--rm-rings-color, rgba(42, 167, 228, 0.3));
  border-radius: 50%;
  opacity: 0;
  animation: rm-rings-out var(--rm-rings-speed, 4200ms) linear infinite;
}
@keyframes rm-rings-out {
  0% { transform: scale(0.15); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.rm-rings.is-still i { animation: none; opacity: 0.5; transform: scale(0.6); }

.rm-hex svg { width: 100%; height: 100%; }
.rm-hex.is-lit svg {
  /* The light is a mask on the pattern, so it costs one composited layer. */
  mask: radial-gradient(
    circle var(--rm-hex-glow, 180px) at var(--rm-hex-x, 50%) var(--rm-hex-y, 50%),
    #000 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/*
 * The marks are drawn by an SVG pattern, so the layer is oversized and moved
 * by exactly one tile — the drift is seamless and costs one composited
 * transform rather than a background repaint.
 */
.rm-plus svg {
  position: absolute;
  top: calc(var(--rm-plus-step, 34px) * -1);
  left: calc(var(--rm-plus-step, 34px) * -1);
  width: calc(100% + var(--rm-plus-step, 34px) * 2);
  height: calc(100% + var(--rm-plus-step, 34px) * 2);
  animation: rm-plus-drift var(--rm-plus-speed, 26000ms) linear infinite;
}
@keyframes rm-plus-drift {
  to { transform: translate(var(--rm-plus-step, 34px), var(--rm-plus-step, 34px)); }
}
.rm-plus.is-still svg { animation: none; }

.rm-diagonals {
  background-image: repeating-linear-gradient(
    var(--rm-diagonals-angle, 135deg),
    var(--rm-diagonals-color, rgba(255, 255, 255, 0.05)) 0,
    var(--rm-diagonals-color, rgba(255, 255, 255, 0.05)) 1px,
    transparent 1px,
    transparent var(--rm-diagonals-width, 14px)
  );
  mask: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--rm-diagonals-fade, 22%),
    #000 calc(100% - var(--rm-diagonals-fade, 22%)),
    transparent 100%
  );
  animation: rm-diagonals-travel var(--rm-diagonals-speed, 2600ms) linear infinite;
}
@keyframes rm-diagonals-travel {
  to { background-position: var(--rm-diagonals-width, 14px) 0; }
}
.rm-diagonals.is-still { animation: none; }

.rm-topography svg {
  width: 140%;
  height: 140%;
  margin: -20% 0 0 -20%;
  animation: rm-topography-drift var(--rm-topography-speed, 34000ms) ease-in-out infinite alternate;
}
@keyframes rm-topography-drift {
  to { transform: translate3d(4%, -3%, 0) scale(1.06); }
}
.rm-topography.is-still svg { animation: none; }

.rm-circuit svg { width: 100%; height: 100%; }

/*
 * A radial gradient rather than an inset box-shadow: shadow blur and spread
 * take a length, never a percentage, so a shadow written in per cent is simply
 * dropped and the vignette silently does nothing at any element size.
 */
.rm-vignette {
  background: radial-gradient(
    ellipse at center,
    transparent var(--rm-vignette-spread, 34%),
    rgba(0, 0, 0, var(--rm-vignette-strength, 0)) 100%
  );
}

.rm-halftone {
  background-image: radial-gradient(
    var(--rm-halftone-color, rgba(255, 255, 255, 0.22)) var(--rm-halftone-dot, 1.6px),
    transparent var(--rm-halftone-dot, 1.6px)
  );
  background-size: var(--rm-halftone-gap, 12px) var(--rm-halftone-gap, 12px);
  opacity: 0.5;
  transition: opacity 0.3s var(--rm-ease-out);
}
.rm-halftone.is-lit {
  opacity: 1;
  /* Dots read as bigger toward the pointer because the mask lets more through. */
  mask: radial-gradient(
    circle var(--rm-halftone-reach, 190px) at var(--rm-halftone-x, 50%) var(--rm-halftone-y, 50%),
    #000 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* ── Field looks ────────────────────────────────────────────────────────── */

/*
 * The field keeps its own box; the look is applied around it.
 *
 * Everything below moves a colour, a shadow, a transform, a clip-path or a
 * decoration element. Nothing animates padding, width or font-size, so a
 * field never reflows the text being typed into it, and no look can push the
 * rest of the form around while someone is filling it in.
 */
:where(.rm-input) {
  --rm-input-line: rgba(255, 255, 255, 0.16);
  --rm-input-line-on: var(--rm-accent);
  --rm-input-ground: rgba(255, 255, 255, 0.03);
  --rm-input-radius: 10px;
  --rm-input-ease: var(--rm-ease-out);

  position: relative;
  display: grid;
  gap: 6px;
  isolation: isolate;
}

:where(.rm-input) > span,
:where(.rm-input) > label {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--rm-muted);
}

/*
 * :where() so the whole base carries no specificity: a page that styles its
 * own fields keeps winning, and the look classes below still apply on top.
 */
:where(.rm-input-field) {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rm-input-line);
  border-radius: var(--rm-input-radius);
  background: var(--rm-input-ground);
  color: inherit;
  font: inherit;
  transition:
    border-color 0.22s var(--rm-input-ease),
    background 0.22s var(--rm-input-ease),
    box-shadow 0.22s var(--rm-input-ease),
    transform 0.22s var(--rm-input-ease);
}
:where(.rm-input-field)::placeholder { color: var(--rm-muted); opacity: 0.7; }
:where(.rm-input-field):focus { outline: none; }
:where(.rm-input-field):focus-visible { outline: none; }

/* Keyboard focus must never be less visible than pointer focus. */
.rm-input:focus-within .rm-input-field { border-color: var(--rm-input-line-on); }

.rm-input-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rm-input-line-on);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.32s var(--rm-input-ease);
  pointer-events: none;
}

.rm-input-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--rm-input-line-on);
  opacity: 0;
  transition: opacity 0.24s var(--rm-input-ease), transform 0.32s var(--rm-input-ease);
  pointer-events: none;
}
.rm-input-corner.is-tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; transform: translate(6px, 6px); }
.rm-input-corner.is-tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; transform: translate(-6px, 6px); }
.rm-input-corner.is-bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; transform: translate(6px, -6px); }
.rm-input-corner.is-br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; transform: translate(-6px, -6px); }
.rm-input:focus-within .rm-input-corner { opacity: 1; transform: translate(0, 0); }

/* outline — the border simply answers, which is the honest default. */
.rm-input.is-outline:focus-within .rm-input-field {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-input-line-on) 22%, transparent);
}

/* underline — no box at all until the rule grows from the middle. */
.rm-input.is-underline .rm-input-field {
  border: 0;
  border-bottom: 1px solid var(--rm-input-line);
  border-radius: 0;
  background: none;
  padding-inline: 2px;
}
.rm-input.is-underline:focus-within .rm-input-rule { transform: scaleX(1); }

/* filled — the ground lifts rather than the border changing. */
.rm-input.is-filled .rm-input-field {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.06);
}
.rm-input.is-filled:focus-within .rm-input-field {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--rm-input-line-on);
}

/* soft — no border, a gentle ground. */
.rm-input.is-soft .rm-input-field {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.05);
}
.rm-input.is-soft:focus-within .rm-input-field { background: rgba(255, 255, 255, 0.09); }

/* glass — frosted, for a field over an image. */
.rm-input.is-glass .rm-input-field {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(140%);
}

/* inset — sunken, the way a slot looks. */
.rm-input.is-inset .rm-input-field {
  border-color: transparent;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
}

/* brutal — a hard shadow that snaps home on focus. */
.rm-input.is-brutal .rm-input-field {
  border: 2px solid currentColor;
  border-radius: 2px;
  background: none;
  box-shadow: 4px 4px 0 currentColor;
}
.rm-input.is-brutal:focus-within .rm-input-field {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 currentColor;
}

/* notch — a cut corner, drawn by clip-path so the box is unchanged. */
.rm-input.is-notch .rm-input-field {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* bracket — four marks close in; a border would move the text. */
.rm-input.is-bracket .rm-input-field { border-color: transparent; background: rgba(255, 255, 255, 0.04); }

/* terminal — mono, a caret block, a prompt. */
.rm-input.is-terminal .rm-input-field {
  font-family: var(--rm-mono);
  border-color: rgba(120, 255, 170, 0.35);
  background: rgba(0, 20, 10, 0.5);
  color: #b8ffd4;
  border-radius: 3px;
  padding-left: 26px;
}
.rm-input.is-terminal::before {
  content: "›";
  position: absolute;
  left: 11px;
  bottom: 12px;
  color: rgba(120, 255, 170, 0.7);
  font-family: var(--rm-mono);
  pointer-events: none;
}

/* glow — a ring that blooms outward. */
.rm-input.is-glow:focus-within .rm-input-field {
  border-color: var(--rm-input-line-on);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rm-input-line-on) 18%, transparent),
    0 8px 30px color-mix(in srgb, var(--rm-input-line-on) 22%, transparent);
}

/*
 * gradient — a lit border, drawn behind the field so the box never moves.
 *
 * The angle has to be registered, or it is a string as far as the animation is
 * concerned and the gradient jumps from 0 to 360 instead of turning.
 */
@property --rm-input-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.rm-input.is-gradient .rm-input-field { border-color: transparent; background: rgba(0, 0, 0, 0.4); }
.rm-input.is-gradient::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(100% - 0px);
  border-radius: var(--rm-input-radius);
  padding: 1px;
  background: conic-gradient(from var(--rm-input-angle, 0deg), var(--rm-accent), var(--rm-terracotta), var(--rm-yellow), var(--rm-accent));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 0.24s var(--rm-input-ease);
  pointer-events: none;
  z-index: -1;
}
.rm-input.is-gradient:focus-within::before {
  opacity: 1;
  animation: rm-input-turn 4s linear infinite;
}
.rm-input.is-gradient.is-still:focus-within::before { animation: none; }
@keyframes rm-input-turn { to { --rm-input-angle: 360deg; } }

/* dashed — a sketched box that firms up. */
.rm-input.is-dashed .rm-input-field {
  border-style: dashed;
  background: none;
}
.rm-input.is-dashed:focus-within .rm-input-field { border-style: solid; }

/* lift — the field rises off the page. */
.rm-input.is-lift:focus-within .rm-input-field {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* slot — a machined groove. */
.rm-input.is-slot .rm-input-field {
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* pill — round, for a search or a filter. */
.rm-input.is-pill .rm-input-field { border-radius: var(--rm-radius-pill); padding-inline: 18px; }

/* sweep — the rule runs left to right. */
.rm-input.is-sweep .rm-input-rule { transform-origin: 0 50%; }
.rm-input.is-sweep:focus-within .rm-input-rule { transform: scaleX(1); }

/* corner — one accent, top left. */
.rm-input.is-corner .rm-input-field { border-radius: 2px 10px 10px 10px; }
.rm-input.is-corner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 100%;
  max-height: 46px;
  background: var(--rm-input-line-on);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.3s var(--rm-input-ease);
  pointer-events: none;
}
.rm-input.is-corner:focus-within::after { transform: scaleY(1); }

/* shadow — a soft pool underneath. */
.rm-input.is-shadow .rm-input-field {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.rm-input.is-shadow:focus-within .rm-input-field { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); }

/* ghost — nothing until you reach it. */
.rm-input.is-ghost .rm-input-field {
  border-color: transparent;
  background: none;
  padding-inline: 4px;
}
.rm-input.is-ghost:hover .rm-input-field,
.rm-input.is-ghost:focus-within .rm-input-field {
  border-color: var(--rm-input-line);
  background: rgba(255, 255, 255, 0.04);
  padding-inline: 14px;
}

/* stamp — an offset second edge. */
.rm-input.is-stamp .rm-input-field { border-radius: 4px; }
.rm-input.is-stamp::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  border: 1px solid var(--rm-input-line);
  border-radius: 4px;
  transform: translate(5px, 5px);
  transition: transform 0.26s var(--rm-input-ease), border-color 0.26s;
  pointer-events: none;
  z-index: -1;
}
.rm-input.is-stamp:focus-within::before { transform: translate(0, 0); border-color: var(--rm-input-line-on); }

/* rail — a thin bar that fills from the left, under a borderless field. */
.rm-input.is-rail .rm-input-field {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  padding-inline: 12px;
}
.rm-input.is-rail .rm-input-rule { height: 3px; transform-origin: 0 50%; }
.rm-input.is-rail:focus-within .rm-input-rule { transform: scaleX(1); }

/* frame — the four marks sit outside the box. */
.rm-input.is-frame .rm-input-field { border-color: rgba(255, 255, 255, 0.10); }
.rm-input.is-frame .rm-input-corner { width: 16px; height: 16px; }

/* caret — a blinking block beside the text, for a fake console. */
.rm-input.is-caret .rm-input-field { font-family: var(--rm-mono); letter-spacing: 0.04em; }
.rm-input.is-caret::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 8px;
  height: 15px;
  background: var(--rm-input-line-on);
  opacity: 0;
  pointer-events: none;
}
.rm-input.is-caret:focus-within::after { animation: rm-input-blink 1.05s steps(2, start) infinite; }
.rm-input.is-caret.is-still:focus-within::after { animation: none; opacity: 1; }
@keyframes rm-input-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Under reduced motion the looks still change; they just arrive at once. */
.rm-input.is-still .rm-input-field,
.rm-input.is-still .rm-input-rule,
.rm-input.is-still .rm-input-corner,
.rm-input.is-still::before,
.rm-input.is-still::after { transition-duration: 0s; }

/* ── Fields that do something ───────────────────────────────────────────── */

/*
 * The search is always at its full width; only the clip and the icon move, so
 * the header it sits in never reflows and the input can be typed into the
 * moment it is reachable.
 */
.rm-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rm-search > input {
  clip-path: inset(0 0 0 100% round var(--rm-radius-pill));
  opacity: 0;
  transition: clip-path 0.42s var(--rm-ease-out), opacity 0.28s var(--rm-ease-out);
}
.rm-search.is-open > input { clip-path: inset(0 0 0 0 round var(--rm-radius-pill)); opacity: 1; }
.rm-search > button { flex: none; transition: transform 0.32s var(--rm-ease-out); }
.rm-search.is-open > button { transform: rotate(90deg); }

.rm-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--rm-input-line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
}
.rm-tags:focus-within { border-color: var(--rm-accent); }
.rm-tags-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-tags-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 9px;
  border-radius: var(--rm-radius-pill);
  background: rgba(255, 255, 255, 0.09);
  font-size: 12px;
  white-space: nowrap;
}
.rm-tags-drop {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s var(--rm-ease-out);
}
.rm-tags-drop:hover { background: var(--rm-terracotta); transform: scale(1.12); }
.rm-tags > input {
  flex: 1;
  min-width: 90px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 4px;
}
.rm-tags > input:focus { outline: none; }
/* Announced, never shown: the chips are already on the screen. */
.rm-tags-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * The native select is kept, full size and on top, and made invisible. It
 * takes every click and keystroke; the face underneath is only drawn.
 */
.rm-select { position: relative; display: grid; gap: 6px; }
.rm-select-native {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 44px;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  font: inherit;
}
.rm-select-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rm-input-line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--rm-muted);
  transition: border-color 0.2s var(--rm-ease-out), color 0.2s;
}
.rm-select.is-chosen .rm-select-face { color: inherit; }
.rm-select-native:focus-visible + .rm-select-face,
.rm-select:hover .rm-select-face { border-color: var(--rm-accent); }
.rm-select-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.24s var(--rm-ease-out);
}
.rm-select:hover .rm-select-caret { transform: translateY(2px); }

.rm-clearable { position: relative; display: grid; }
.rm-clearable-drop {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.7);
  transition: opacity 0.2s var(--rm-ease-out), transform 0.2s var(--rm-ease-out);
  pointer-events: none;
}
.rm-clearable.is-clearable .rm-clearable-drop {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
.rm-clearable.is-clearable input { padding-right: 38px; }

.rm-mask { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/*
 * Editing in place: the field is given the text's own typeface and box, so the
 * word does not move, change size or change weight at the moment it becomes
 * editable.
 */
.rm-inline-edit { display: inline-grid; }
.rm-inline-edit-text {
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  padding: 3px 6px;
  cursor: text;
  transition: background 0.18s, border-color 0.18s;
}
.rm-inline-edit-text:hover { background: rgba(255, 255, 255, 0.06); }
.rm-inline-edit-field {
  border: 1px solid var(--rm-accent);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  text-align: inherit;
  padding: 3px 6px;
  width: 100%;
}
.rm-inline-edit-field:focus { outline: none; }


/* ── Playful cursors ────────────────────────────────────────────────────── */

/*
 * All seven are a fixed layer moved by transform alone. Each is centred on its
 * own origin so the transform is the pointer position and nothing else, and
 * every one of them is out of the way of hit testing.
 */
.rm-cartoon-cursor,
.rm-blob-cursor,
.rm-trail-cursor,
.rm-say-cursor,
.rm-spotlight-cursor,
.rm-arrow-cursor,
.rm-lens-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rm-cartoon-cursor.is-visible,
.rm-blob-cursor.is-visible,
.rm-trail-cursor.is-visible,
.rm-say-cursor.is-visible,
.rm-spotlight-cursor.is-visible,
.rm-arrow-cursor.is-visible,
.rm-lens-cursor.is-visible { opacity: 1; }

/* The trail and the spotlight are full-screen layers; their parts move. */
.rm-trail-cursor,
.rm-spotlight-cursor { inset: 0; transform: none !important; }

.rm-cartoon-hand {
  display: block;
  width: var(--rm-cartoon-size, 42px);
  height: auto;
  /* Held at the fingertip, the way a pointing hand is. */
  margin: -6px 0 0 -12px;
  transform-origin: 40% 12%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}
.rm-cartoon-glove {
  fill: #f6f2ea;
  stroke: #101010;
  stroke-width: 4;
  stroke-linejoin: round;
}
.rm-cartoon-cuff { fill: #2aa7e4; }
.rm-cartoon-cursor.is-grabbing .rm-cartoon-glove { fill: #ffe9c9; }

.rm-blob-cursor-body {
  display: block;
  width: var(--rm-blob-size, 34px);
  height: var(--rm-blob-size, 34px);
  margin: calc(var(--rm-blob-size, 34px) / -2) 0 0 calc(var(--rm-blob-size, 34px) / -2);
  border-radius: 50%;
  background: rgba(241, 238, 233, 0.9);
  mix-blend-mode: difference;
}

.rm-trail-cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--rm-trail-cursor-size, 14px) * var(--rm-trail-cursor-share, 1));
  height: calc(var(--rm-trail-cursor-size, 14px) * var(--rm-trail-cursor-share, 1));
  margin: calc(var(--rm-trail-cursor-size, 14px) / -2) 0 0 calc(var(--rm-trail-cursor-size, 14px) / -2);
  border-radius: 50%;
  background: var(--rm-trail-cursor-color, #2aa7e4);
  opacity: calc(var(--rm-trail-cursor-share, 1) * 0.85);
}

.rm-say-cursor-word {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--rm-accent);
  color: #06121a;
  font-family: var(--rm-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.26s var(--rm-ease-out);
}
.rm-say-cursor.is-saying .rm-say-cursor-word { transform: translate(-50%, -50%) scale(1); }

/* One layer, one mask, two numbers a frame. */
.rm-spotlight-cursor {
  background: rgba(0, 0, 0, var(--rm-spotlight-cursor-dim, 0.62));
  mask: radial-gradient(
    circle var(--rm-spotlight-cursor-radius, 190px)
      at var(--rm-spotlight-cursor-x, 50%) var(--rm-spotlight-cursor-y, 50%),
    transparent 0%,
    transparent 55%,
    #000 100%
  );
  z-index: 9997;
}

.rm-arrow-cursor-mark {
  display: block;
  width: var(--rm-arrow-cursor-size, 26px);
  height: var(--rm-arrow-cursor-size, 26px);
  margin: calc(var(--rm-arrow-cursor-size, 26px) / -2) 0 0 calc(var(--rm-arrow-cursor-size, 26px) / -2);
  fill: var(--rm-arrow-cursor-color, #f1eee9);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* backdrop-filter magnifies the real page, so nothing is duplicated. */
.rm-lens-cursor {
  width: var(--rm-lens-cursor-size, 120px);
  height: var(--rm-lens-cursor-size, 120px);
  margin: calc(var(--rm-lens-cursor-size, 120px) / -2) 0 0 calc(var(--rm-lens-cursor-size, 120px) / -2);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(0px) saturate(115%);
  scale: 1;
  overflow: hidden;
}
.rm-lens-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backdrop-filter: blur(0.2px);
  transform: scale(var(--rm-lens-cursor-zoom, 1.35));
}

/* ── Galleries ──────────────────────────────────────────────────────────── */

/*
 * Every one of these leaves the pictures visible with the script removed. What
 * the classes add is arrangement and movement, never visibility — a gallery
 * that starts at opacity 0 is a gallery that is blank when the script fails.
 */

.rm-masonry { display: flex; align-items: flex-start; gap: var(--rm-masonry-gap, 14px); }
.rm-masonry-lane {
  display: flex;
  flex-direction: column;
  gap: var(--rm-masonry-gap, 14px);
  flex: 1 1 0;
  min-width: 0;
}

.rm-swipe-stack {
  position: relative;
  display: grid;
  touch-action: pan-y;
  cursor: grab;
}
.rm-swipe-stack:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; }
.rm-swipe-stack-card {
  grid-area: 1 / 1;
  will-change: transform;
  transition: opacity 0.24s var(--rm-ease-out);
}
.rm-swipe-stack-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.rm-filmstrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 16px 0;
  touch-action: pan-x pan-y;
  cursor: grab;
  /* Sprocket holes: one repeating gradient top and bottom, not 200 elements. */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 8px 22px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 8px 22px) 0 100% / 100% 5px no-repeat;
}
.rm-filmstrip.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.rm-filmstrip-frame { flex: none; scroll-snap-align: center; }

.rm-hover-peek { position: relative; }
.rm-hover-peek-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: auto;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s var(--rm-ease-out);
  will-change: transform;
  z-index: 3;
}
.rm-hover-peek.is-peeking .rm-hover-peek-image { opacity: 1; }

.rm-polaroids { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rm-polaroids-print {
  transform: rotate(var(--rm-polaroids-angle, 0deg)) translateY(var(--rm-polaroids-drop, 0px));
  transition: transform 0.34s var(--rm-ease-out), box-shadow 0.34s var(--rm-ease-out);
  will-change: transform;
}
.rm-polaroids-print:hover,
.rm-polaroids-print:focus-visible,
.rm-polaroids-print:focus-within {
  transform: rotate(0deg) translateY(-8px) scale(1.04);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  z-index: 20 !important;
}

/*
 * flex-grow rather than percentage widths: the browser distributes the space,
 * so the panels always exactly fill the strip whatever the count.
 */
.rm-fold { display: flex; gap: 6px; overflow: hidden; }
.rm-fold-panel {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.42s var(--rm-ease-out);
}
.rm-fold-panel:hover,
.rm-fold-panel:focus-visible,
.rm-fold-panel:focus-within { flex-grow: var(--rm-fold-open, 3); }

.rm-grid-zoom { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.rm-grid-zoom-tile {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 10px;
}
.rm-grid-zoom-tile.is-open {
  grid-column: 1 / -1;
  grid-row: span 2;
  cursor: zoom-out;
}

.rm-crossfade { position: relative; display: grid; }
.rm-crossfade-frame {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--rm-crossfade-duration, 700ms) var(--rm-ease-out);
}
.rm-crossfade-frame.is-current { opacity: 1; }
.rm-crossfade-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}
.rm-crossfade-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.22s var(--rm-ease-out), background 0.22s;
}
.rm-crossfade-dot[aria-selected="true"] { background: #fff; transform: scale(1.35); }

.rm-parallax-grid { display: grid; gap: 12px; }
.rm-parallax-grid-tile { will-change: transform; }

.rm-tilt-grid { display: grid; gap: 12px; }
.rm-tilt-grid-tile { will-change: transform; transform-style: preserve-3d; }

.rm-mask-reveal { overflow: hidden; }
.rm-mask-reveal img,
.rm-mask-reveal video { display: block; width: 100%; will-change: clip-path; }

.rm-slats { position: relative; display: flex; overflow: hidden; }
/* The original stays in the document for alt text and indexing. */
.rm-slats-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rm-slats-slat {
  flex: 1 1 0;
  min-width: 0;
  background-repeat: no-repeat;
  will-change: transform;
}

.rm-zoom-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 26px 40%;
}
.rm-zoom-strip-item {
  flex: none;
  scroll-snap-align: center;
  will-change: transform;
  transform-origin: 50% 50%;
}

.rm-spiral {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  rotate: var(--rm-spiral-turn, 0deg);
  transition: rotate 0.1s linear;
}
.rm-spiral-item {
  position: absolute;
  transform: translate(var(--rm-spiral-x, 0px), var(--rm-spiral-y, 0px))
    rotate(calc(var(--rm-spiral-turn, 0deg) * -1));
}

.rm-image-wall { overflow: hidden; cursor: grab; touch-action: none; }
.rm-image-wall:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }
.rm-image-wall.is-dragging { cursor: grabbing; user-select: none; }
.rm-image-wall-inner { will-change: transform; }

.rm-flip-grid { display: grid; gap: 12px; perspective: 1200px; }
.rm-flip-grid-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.rm-flip-grid-front,
.rm-flip-grid-back { backface-visibility: hidden; }
.rm-flip-grid-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.rm-peel { position: relative; display: grid; justify-items: center; }
.rm-peel-print { grid-area: 1 / 1; will-change: transform; }
.rm-peel-next {
  grid-area: 2 / 1;
  margin-top: 14px;
  justify-self: center;
  border: 1px solid var(--rm-input-line, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
}
.rm-peel-next:hover { border-color: var(--rm-accent); }
.rm-peel-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/*
 * The others give way rather than the reached one growing, so the grid never
 * changes size and nothing around it reflows.
 */
.rm-focus-grid { display: grid; gap: 12px; }
.rm-focus-grid-tile {
  transition: opacity 0.3s var(--rm-ease-out), transform 0.3s var(--rm-ease-out);
  will-change: transform, opacity;
}
.rm-focus-grid.has-focus .rm-focus-grid-tile {
  opacity: var(--rm-focus-grid-dim, 0.42);
  transform: scale(var(--rm-focus-grid-shrink, 0.96));
}
.rm-focus-grid.has-focus .rm-focus-grid-tile.is-reached { opacity: 1; transform: none; }

.rm-ribbon { position: relative; min-height: 260px; }
.rm-ribbon-item {
  position: absolute;
  top: 0;
  left: 0;
  offset-path: path("M 0 200 C 180 40, 420 40, 600 200 S 1020 360, 1200 200");
  offset-distance: calc(var(--rm-ribbon-at, 0%) + var(--rm-ribbon-slide, 0%));
  offset-rotate: 0deg;
  will-change: offset-distance;
}

.rm-contact-sheet {
  position: relative;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.rm-contact-sheet-frame {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 6px;
}
.rm-contact-sheet-frame img { display: block; width: 100%; height: auto; }
.rm-contact-sheet-stage {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 10px;
}
.rm-contact-sheet-stage[hidden] { display: none; }
.rm-contact-sheet-shown {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  border-radius: 8px;
  will-change: transform;
}
.rm-contact-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.rm-contact-sheet-close:hover { background: rgba(255, 255, 255, 0.24); }


/* ══ Task lists and boards ══════════════════════════════════════════════ */

/* ── Tasks ──────────────────────────────────────────────────────────────── */

/*
 * Three techniques carry most of this file.
 *
 * The strike-through on a completed task is a rule scaled from its left edge,
 * not `text-decoration: line-through`, because a decoration cannot be animated
 * and because scaling a pseudo-element changes nothing about the row's box —
 * so ticking the first of forty tasks moves none of the other thirty-nine.
 *
 * Progress fills are `scaleX` on a full-width bar with `transform-origin: left`.
 * A width transition reflows every sibling on every frame; a scale is one
 * composited layer. The value arrives as a unitless 0–1 custom property, so the
 * same variable drives the bar, the ring and the undo countdown.
 *
 * `rm-task-group` is the one place a box genuinely changes size, and it does it
 * by interpolating a grid track from `0fr` to `1fr`. The inner box needs
 * `min-height: 0` or the track can never reach zero, which is the single
 * reason this technique is usually reported as "not working".
 *
 * Every duration is read from a custom property the script sets, so reduced
 * motion is handled once in JavaScript rather than guessed at here.
 *
 * Nothing in this file hides authored content. The only rules that start from
 * an undrawn state — the tick's dash offset, the bulk toolbar's opacity — apply
 * to elements the script itself creates, so on a page whose JavaScript never
 * ran there is no element for them to match and every task is still readable.
 */

/* Announced, never drawn. Not `display: none`, which is not announced at all. */
.rm-task-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── taskList ───────────────────────────────────────────────────────────── */

.rm-task-list { list-style: none; margin: 0; padding: 0; }
.rm-task-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--rm-radius-sm, 6px);
  color: var(--rm-ink);
  font-family: var(--rm-body);
  transition: opacity var(--rm-task-strike-duration, 380ms) var(--rm-ease-out);
}
.rm-task-list-row.is-done { opacity: 0.55; }

.rm-task-list-box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--rm-muted);
  border-radius: 7px;
  background: transparent;
  color: var(--rm-cream);
  cursor: pointer;
  transition:
    background-color var(--rm-task-strike-duration, 380ms) var(--rm-ease-out),
    border-color var(--rm-task-strike-duration, 380ms) var(--rm-ease-out);
}
.rm-task-list-box[aria-checked="true"] {
  background: var(--rm-accent);
  border-color: var(--rm-accent);
}
.rm-task-list-box svg { width: 15px; height: 15px; }
/* The tick is clipped away until the box is checked, so the mark appears to be
   cut out of the fill rather than dropped on top of it. */
.rm-task-list-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rm-task-list-box[aria-checked="true"] .rm-task-list-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--rm-task-strike-duration, 380ms) var(--rm-ease-out);
}

.rm-task-list-label { position: relative; }
.rm-task-list-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rm-task-strike-duration, 380ms) var(--rm-ease-out);
}
.rm-task-list-row.is-done .rm-task-list-label::after { transform: scaleX(1); }

/* ── taskCheck ──────────────────────────────────────────────────────────── */

.rm-task-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--rm-muted);
  border-radius: 50%;
  background: transparent;
  color: var(--rm-accent);
  cursor: pointer;
  transition: border-color 240ms var(--rm-ease-out), transform 240ms var(--rm-ease-out);
}
.rm-task-check svg { width: 18px; height: 18px; overflow: visible; }
.rm-task-check.is-checked { border-color: var(--rm-accent); }
.rm-task-check:hover, .rm-task-check:focus-visible { transform: scale(1.06); }

/* ── taskReorder ────────────────────────────────────────────────────────── */

.rm-task-reorder { list-style: none; margin: 0; padding: 0; }
.rm-task-reorder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--rm-cream);
  border-radius: var(--rm-radius-sm, 6px);
  /* A row lifted by the pointer must paint above the ones it passes over. */
  position: relative;
  z-index: 0;
}
.rm-task-reorder-row.is-dragging {
  z-index: 2;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
  cursor: grabbing;
}
.rm-task-reorder-grip {
  border: 0;
  background: transparent;
  color: var(--rm-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px 2px;
  cursor: grab;
  /* Without this the browser scrolls the page instead of giving us the drag. */
  touch-action: none;
}
.rm-task-reorder-grip:focus-visible { color: var(--rm-accent); }

/* ── taskGroup ──────────────────────────────────────────────────────────── */

.rm-task-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rm-task-group-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  color: var(--rm-muted);
  font-family: var(--rm-mono);
  font-size: 0.78em;
}
.rm-task-group-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--rm-task-group-duration, 320ms) var(--rm-ease-in-out);
}
.rm-task-group.is-open .rm-task-group-chevron { transform: rotate(45deg); }

/* The grid track is the animation. `min-height: 0` on the inner box is what
   lets `0fr` actually mean zero rather than "as small as the content allows". */
.rm-task-group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-task-group-duration, 320ms) var(--rm-ease-in-out);
}
.rm-task-group.is-open .rm-task-group-panel { grid-template-rows: 1fr; }
.rm-task-group-inner { min-height: 0; overflow: hidden; }

/* ── kanban ─────────────────────────────────────────────────────────────── */

.rm-kanban {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.rm-kanban-column {
  flex: 1 0 220px;
  padding: 12px;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
}
.rm-kanban-well {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* A column with nothing in it still has to be a drop target. */
  min-height: 56px;
}
.rm-kanban-card {
  position: relative;
  padding: 12px 14px;
  border-radius: var(--rm-radius-sm, 8px);
  background: #fff;
  color: var(--rm-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  cursor: grab;
  touch-action: none;
  z-index: 0;
}
.rm-kanban-card:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-kanban-card.is-dragging,
.rm-kanban-card.is-held {
  z-index: 3;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.2);
}
/* Held by the keyboard rather than the pointer, so it needs to look picked up
   without a cursor anywhere near it. */
.rm-kanban-card.is-held { outline: 2px dashed var(--rm-accent); outline-offset: 3px; }

/* ── taskProgress ───────────────────────────────────────────────────────── */

.rm-task-progress {
  position: relative;
  height: 8px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-muted) 25%, transparent);
  overflow: hidden;
}
.rm-task-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--rm-accent);
  transform: scaleX(var(--rm-task-progress-value, 0));
  transform-origin: left center;
  transition: transform var(--rm-task-progress-duration, 420ms) var(--rm-ease-out);
}
.rm-task-progress.is-complete .rm-task-progress-fill { background: var(--rm-yellow); }

/* ── taskFilter ─────────────────────────────────────────────────────────── */

.rm-task-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-task-filter-chip {
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--rm-muted) 45%, transparent);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.86em;
  cursor: pointer;
  transition: color 200ms var(--rm-ease-out), border-color 200ms var(--rm-ease-out),
    background-color 200ms var(--rm-ease-out);
}
.rm-task-filter-chip[aria-pressed="true"] {
  background: var(--rm-ink);
  border-color: var(--rm-ink);
  color: var(--rm-cream);
}

/* ── subtasks ───────────────────────────────────────────────────────────── */

.rm-subtasks-ring { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--rm-accent); }
.rm-subtasks-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rm-subtasks-ring.is-complete { color: var(--rm-yellow); }
.rm-subtasks-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 22px;
  border-left: 1px solid color-mix(in srgb, var(--rm-muted) 30%, transparent);
}

/* ── taskDue ────────────────────────────────────────────────────────────── */

/* Tone is the reinforcement; the phrase itself carries the meaning. */
.rm-task-due {
  font-family: var(--rm-mono);
  font-size: 0.82em;
  padding: 2px 8px;
  border-radius: var(--rm-radius-pill);
  transition: color 300ms var(--rm-ease-out), background-color 300ms var(--rm-ease-out);
}
.rm-task-due.is-far { color: var(--rm-muted); background: color-mix(in srgb, var(--rm-muted) 12%, transparent); }
.rm-task-due.is-soon { color: var(--rm-terracotta); background: color-mix(in srgb, var(--rm-terracotta) 16%, transparent); }
.rm-task-due.is-today { color: var(--rm-ink); background: var(--rm-yellow); }
.rm-task-due.is-late { color: #fff; background: var(--rm-terracotta); }

/* ── taskPriority ───────────────────────────────────────────────────────── */

/*
 * The native select is kept and laid over the flag at zero opacity: it still
 * owns the value, the keyboard and the phone's picker, while the flag is what
 * anybody sees. `:focus-within` puts the ring on the flag, because the control
 * that has focus is invisible by design.
 */
.rm-task-priority { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.rm-task-priority select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}
.rm-task-priority-flag { width: 18px; height: 18px; color: var(--rm-muted); }
.rm-task-priority-flag svg { width: 100%; height: 100%; }
.rm-task-priority.is-low .rm-task-priority-flag { color: var(--rm-muted); }
.rm-task-priority.is-medium .rm-task-priority-flag { color: var(--rm-accent); }
.rm-task-priority.is-high .rm-task-priority-flag { color: var(--rm-terracotta); }
.rm-task-priority.is-urgent .rm-task-priority-flag { color: #c2452d; }
.rm-task-priority:focus-within { outline: 2px solid var(--rm-accent); outline-offset: 3px; border-radius: 6px; }

/* ── taskAssignee ───────────────────────────────────────────────────────── */

.rm-task-assignee { position: relative; display: inline-block; }
.rm-task-assignee-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--rm-muted) 40%, transparent);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rm-task-assignee-face {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rm-accent);
  color: #fff;
}
.rm-task-assignee-list {
  position: absolute;
  z-index: 5;
  margin: 6px 0 0;
  padding: 6px;
  min-width: 100%;
  list-style: none;
  border-radius: var(--rm-radius-sm, 10px);
  background: #fff;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.16);
}
.rm-task-assignee-option {
  padding: 7px 12px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.rm-task-assignee-option[aria-selected="true"] { background: var(--rm-cream); font-weight: 600; }
.rm-task-assignee-option:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -2px; }

/* ── taskSwipe ──────────────────────────────────────────────────────────── */

/*
 * The action sits underneath and the face slides off it. Nothing resizes, so
 * the rows below never move however far the gesture travels.
 */
.rm-task-swipe {
  position: relative;
  overflow: hidden;
  border-radius: var(--rm-radius-sm, 8px);
  touch-action: pan-y;
}
.rm-task-swipe-face {
  position: relative;
  z-index: 1;
  display: block;
  padding: 12px 14px;
  background: var(--rm-cream);
}
.rm-task-swipe-action {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  padding: 0 18px;
  border: 0;
  background: var(--rm-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.rm-task-swipe.is-armed .rm-task-swipe-action { background: var(--rm-yellow); color: var(--rm-ink); }
.rm-task-swipe.is-done .rm-task-swipe-face { opacity: 0.55; }

/* ── taskUndo ───────────────────────────────────────────────────────────── */

.rm-task-undo-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--rm-ink);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.82em;
  cursor: pointer;
}
/* The countdown is a conic sweep fed by one 0–1 variable, so no element has to
   be resized once per tick. */
.rm-task-undo-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(
    currentColor calc(var(--rm-task-undo-left, 1) * 360deg),
    transparent 0
  );
}

/* ── taskCount ──────────────────────────────────────────────────────────── */

/* The roll happens inside a clipped, fixed line box, so the sentence around the
   number never reflows while a digit is changing. */
.rm-task-count { position: relative; display: inline-flex; align-items: baseline; }
.rm-task-count-digits,
.rm-task-count-leaving {
  display: inline-block;
  font-family: var(--rm-mono);
  font-variant-numeric: tabular-nums;
}
.rm-task-count-leaving { position: absolute; left: 0; top: 0; }

/* ── taskEmpty ──────────────────────────────────────────────────────────── */

.rm-task-empty { text-align: center; padding: 40px 20px; color: var(--rm-muted); }
.rm-task-empty-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  color: var(--rm-accent);
  overflow: visible;
}

/* ── taskSearch ─────────────────────────────────────────────────────────── */

.rm-task-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--rm-muted) 40%, transparent);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
}
.rm-task-search:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-task-list mark,
.rm-task-search ~ * mark {
  background: var(--rm-yellow);
  color: var(--rm-ink);
  border-radius: 3px;
}

/* ── taskBulk ───────────────────────────────────────────────────────────── */

/*
 * The toolbar is always in the layout and only ever moves, so tasks never shift
 * down the page when one is selected. Hidden it is nudged away and faded;
 * `inert` on the actions keeps Tab out of it while it is.
 *
 * `visibility` is transitioned alongside the opacity with a delay equal to the
 * fade, which is the only way to have both. Opacity alone leaves an invisible
 * toolbar sitting in the accessibility tree announcing "0 selected"; visibility
 * alone snaps rather than fades. Delayed, it stays visible for the whole fade
 * out and flips back the instant it is needed.
 */
.rm-task-bulk {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 260ms var(--rm-ease-out),
    transform 260ms var(--rm-ease-out),
    visibility 0s linear 260ms;
}
.rm-task-bulk.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.rm-task-bulk-actions { display: flex; gap: 8px; margin-left: auto; }
.rm-task-bulk-count { font-family: var(--rm-mono); font-size: 0.8em; }
.rm-task-bulk-all,
.rm-task-bulk-box {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.rm-task-bulk-all[aria-checked="true"] { background: var(--rm-accent); border-color: var(--rm-accent); }
/* The state most custom checkboxes forget exists. */
.rm-task-bulk-all[aria-checked="mixed"] {
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat;
}
.rm-task-bulk-box[aria-checked="true"] {
  background: var(--rm-accent);
  border-color: var(--rm-accent);
}
.is-selected { background: color-mix(in srgb, var(--rm-accent) 10%, transparent); }

/* ── taskTimer ──────────────────────────────────────────────────────────── */

.rm-task-timer { display: inline-flex; align-items: center; gap: 10px; }
.rm-task-timer-face {
  font-family: var(--rm-mono);
  /* Tabular figures, or every second the whole row jitters as the digits change
     width — which is a layout shift sixty times a minute. */
  font-variant-numeric: tabular-nums;
  font-size: 1.05em;
}
.rm-task-timer-button {
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8em;
  cursor: pointer;
}
.rm-task-timer.is-running .rm-task-timer-face { color: var(--rm-accent); }

/* ── taskStreak ─────────────────────────────────────────────────────────── */

.rm-task-streak { position: relative; display: block; }
.rm-task-streak-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 4px;
  color: var(--rm-accent);
  overflow: visible;
}
.rm-task-streak-days {
  position: relative;
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rm-task-streak-day {
  position: relative;
  flex: 1 1 0;
  padding-top: 24px;
  text-align: center;
  font-family: var(--rm-mono);
  font-size: 0.72em;
  color: var(--rm-muted);
}
/* The dot sits above the label, drawn as a pseudo-element so the day cell keeps
   one simple box and the connecting line can pass behind all of them. */
.rm-task-streak-day::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--rm-cream);
  border: 2px solid color-mix(in srgb, var(--rm-muted) 40%, transparent);
}
.rm-task-streak-day.is-done { color: var(--rm-ink); }
.rm-task-streak-day.is-done::before { background: var(--rm-accent); border-color: var(--rm-accent); }

/* ── taskNote ───────────────────────────────────────────────────────────── */

.rm-task-note-toggle {
  padding: 2px 10px;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-muted) 15%, transparent);
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.76em;
  cursor: pointer;
}
.rm-task-note-toggle[aria-expanded="true"] { background: var(--rm-yellow); color: var(--rm-ink); }
.rm-task-note {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--rm-yellow);
  color: var(--rm-muted);
  font-size: 0.92em;
}
.rm-task-note:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/*
 * The script already sets every duration variable to zero, so this is the belt
 * to that pair of braces: transitions declared here without a variable are
 * switched off too. Nothing is hidden and nothing is left part-drawn — the
 * strike still strikes, the panel still opens, they simply arrive.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-task-list-row,
  .rm-task-list-box,
  .rm-task-list-label::after,
  .rm-task-list-tick,
  .rm-task-check,
  .rm-task-group-chevron,
  .rm-task-group-panel,
  .rm-task-progress-fill,
  .rm-task-filter-chip,
  .rm-task-due,
  .rm-task-bulk {
    transition-duration: 1ms;
  }
}


/* ══ Numbers, drawn — the second set ══════════════════════════════════════════════ */

/*
 * Metrics — the second set.
 *
 * Four things in here are not obvious, and all four are the difference between
 * a chart that works and one that only looks like it does.
 *
 * 1. No start state. Nothing below sets opacity 0, a zero scale or a dash
 *    array. Every reveal is applied from JavaScript immediately before it
 *    plays, so a page whose script never arrives shows finished charts rather
 *    than blank rectangles. If you add a `stroke-dasharray` here it will fight
 *    the `pathLength="1"` reveal the module sets and the drawing will stutter.
 *
 * 2. `transform-box: fill-box`. A `scale()` on an SVG child is measured from
 *    the SVG viewport's origin, not from the shape, so a dot asked to scale up
 *    from nothing flies in from the top-left corner instead of growing where it
 *    is. `fill-box` moves the origin onto the shape's own bounding box. It is
 *    set only on the two shapes that scale — the arcs in the pie and the
 *    activity rings carry a `transform="rotate(…)"` attribute with its own
 *    centre already in it, and giving those a transform-origin as well would
 *    rotate them twice.
 *
 * 3. The `-value` spans are hidden from the eye and not from the page. They are
 *    the real figure, sitting beside a face that counts or rolls, so clipping
 *    is used rather than `display: none` or `visibility: hidden` — both of
 *    which remove an element from the accessibility tree, which is the one
 *    place these have to remain.
 *
 * 4. Tabular figures on anything that changes. Proportional digits are
 *    different widths, so a number counting from 1 to 1,204 in a proportional
 *    face drags everything beside it back and forth for a second and a half.
 *
 * Part of rage-motion.
 * Crafted by SoyRage Agency — https://soyrage.es/
 */


/* ══ Ecommerce — product and catalogue ══════════════════════════════════════════════ */

/*
 * Ecommerce — product and catalogue.
 *
 * Three techniques here are worth explaining, because they look like mistakes
 * until you know what they are avoiding.
 *
 * 1. Nothing that moves has a width or a height in a transition. The stock
 *    meter, the review bars and the tab underline all move by `transform`, and
 *    the elements they live on are already at their final size before anything
 *    animates. A `width` transition on a bar re-lays-out its whole row sixty
 *    times a second for a decoration; a `scaleX` on the same bar is one
 *    composited layer the browser can hand to the GPU.
 *
 * 2. Radio and checkbox inputs are shrunk to a nearly transparent pixel, never
 *    `display: none` and never `visibility: hidden`. A hidden input is not
 *    focusable, so hiding one the lazy way removes the arrow keys, the focus
 *    ring and the form value — the three reasons for using a real input at
 *    all. Left in place at a pixel it keeps every one of them, and the visible
 *    chip picks the focus ring back up with `:has(input:focus-visible)`.
 *
 * 3. The panels that open — the filter disclosure, the quick view, the compare
 *    tray — are all on their own layer, out of the flow. That is what lets them
 *    animate without moving the catalogue behind them. It also means their
 *    closed state is the `hidden` attribute rather than a zero size, so before
 *    the script runs the page is complete and readable rather than collapsed.
 *
 * Crafted by SoyRage Agency — https://soyrage.es/
 * MIT licensed (see LICENSE).
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

/*
 * Read but not drawn. Not `display: none`, which removes it from the
 * accessibility tree along with everything else — this is the difference
 * between a strike-through that is announced and one that is only a picture.
 */
.rm-shop-said,
.rm-shop-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Any real input this kit hides keeps its focus, its keys and its value. */
.rm-swatches-chip input,
.rm-size-picker-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0.001; /* not 0: some engines skip focus on a fully transparent box */
  pointer-events: none;
}

/* ── Product card ───────────────────────────────────────────────────────── */

.rm-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font-family: var(--rm-body);
  transition:
    transform var(--rm-product-card-duration, 420ms) var(--rm-ease-out),
    box-shadow var(--rm-product-card-duration, 420ms) var(--rm-ease-out);
}
.rm-product-card.is-lifted {
  transform: translateY(var(--rm-product-card-lift, -6px));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--rm-ink) 60%, transparent);
}
.rm-product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--rm-radius) - 8px);
}

/*
 * One stretched link. The pseudo element is the hit area for the whole card,
 * and everything else in the card is lifted above it so its own clicks survive
 * — which is the part that a card wrapped in a single <a> cannot do at all.
 */
.rm-product-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.rm-product-card > :is(button, a:not(.rm-product-card-link), label, input, select),
.rm-product-card :is(button, label, input, select) {
  position: relative;
  z-index: 1;
}
.rm-product-card-link { text-decoration: none; color: inherit; }
.rm-product-card-link:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Product gallery ────────────────────────────────────────────────────── */

.rm-product-gallery { display: grid; gap: 0.7rem; font-family: var(--rm-body); }
.rm-product-gallery-main {
  display: block;
  width: 100%;
  border-radius: var(--rm-radius);
  background: color-mix(in srgb, var(--rm-ink) 6%, var(--rm-cream));
}
.rm-product-gallery-strip {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.rm-product-gallery-thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: calc(var(--rm-radius) / 2.4);
  background: none;
  cursor: pointer;
  transition: transform 240ms var(--rm-ease-out), border-color 240ms var(--rm-ease-out);
}
.rm-product-gallery-thumb img {
  display: block;
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: inherit;
}
.rm-product-gallery-thumb:hover,
.rm-product-gallery-thumb:focus-visible { transform: translateY(-3px); }
.rm-product-gallery-thumb.is-current { border-color: var(--rm-accent); }
.rm-product-gallery-thumb:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Product zoom ───────────────────────────────────────────────────────── */

/*
 * The frame is the lens. It clips, and the one real <img> inside it scales
 * around whichever point the pointer or the arrow keys have chosen — so there
 * is no second copy of the photograph to download, decode or announce.
 */
.rm-product-zoom {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  cursor: zoom-in;
}
.rm-product-zoom.is-zoomed { cursor: zoom-out; }
.rm-product-zoom-image {
  display: block;
  width: 100%;
  will-change: transform;
}
.rm-product-zoom-toggle {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 82%, transparent);
  color: var(--rm-cream);
  font: 500 0.78rem/1.4 var(--rm-body);
  cursor: pointer;
}
.rm-product-zoom-toggle[aria-pressed="true"] { background: var(--rm-accent); }
.rm-product-zoom:focus-visible,
.rm-product-zoom-toggle:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Colour swatches ────────────────────────────────────────────────────── */

.rm-swatches {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--rm-body);
}
.rm-swatches legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.rm-swatches-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 5%, transparent);
  font-size: 0.85rem;
  cursor: pointer;
}
.rm-swatches-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-ink) 22%, transparent);
}
/*
 * One ring for the whole group, placed from a measurement and moved with a
 * FLIP. It is appended last, so it paints over the chips — which is what an
 * outline should do — and `pointer-events: none` is what makes that safe: it
 * can lie across a label without ever swallowing the click meant for it.
 */
.rm-swatches-ring {
  position: absolute;
  border-radius: var(--rm-radius-pill);
  box-shadow: 0 0 0 2px var(--rm-accent);
  pointer-events: none;
  will-change: transform;
}
.rm-swatches-chip:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Size picker ────────────────────────────────────────────────────────── */

.rm-size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--rm-body);
}
.rm-size-picker legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.rm-size-picker-option {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3rem;
  padding: 0.5rem 0.7rem;
  border-radius: calc(var(--rm-radius) / 3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-ink) 25%, transparent);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rm-size-picker-option:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--rm-ink);
  background: var(--rm-ink);
  color: var(--rm-cream);
}
/* Struck and dimmed for the eye; the JS adds ", out of stock" for everyone else. */
.rm-size-picker-option.is-gone {
  color: var(--rm-muted);
  text-decoration: line-through;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    color-mix(in srgb, var(--rm-ink) 7%, transparent) 5px 10px
  );
}
.rm-size-picker-option:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Price tag ──────────────────────────────────────────────────────────── */

.rm-price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  overflow: hidden; /* the roll leaves and arrives inside this box */
  font-family: var(--rm-body);
  font-variant-numeric: tabular-nums; /* digits of one width: no jitter as it rolls */
}
.rm-price-tag-now { font-family: var(--rm-display); font-size: 1.35rem; }
.rm-price-tag.is-reduced .rm-price-tag-now { color: var(--rm-terracotta); }
.rm-price-tag-was { color: var(--rm-muted); font-size: 0.95rem; }

/* ── Discount badge ─────────────────────────────────────────────────────── */

.rm-discount-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-yellow);
  color: var(--rm-ink);
  font: 700 0.75rem/1.5 var(--rm-mono);
  letter-spacing: 0.02em;
  transform-origin: center; /* it scales out of its own middle, so nothing shifts */
}

/* ── Stock meter ────────────────────────────────────────────────────────── */

.rm-stock-meter { display: grid; gap: 0.35rem; font-family: var(--rm-body); font-size: 0.85rem; }
.rm-stock-meter-track {
  display: block;
  height: 6px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 10%, transparent);
  overflow: hidden;
}
/* Full width already; only the scale changes, so the row never re-lays-out. */
.rm-stock-meter-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rm-accent);
  transform: scaleX(var(--rm-stock-meter-value, 0));
  transform-origin: left center;
  transition: transform var(--rm-stock-meter-duration, 520ms) var(--rm-ease-out);
}
.rm-stock-meter.is-low .rm-stock-meter-track i { background: var(--rm-terracotta); }
.rm-stock-meter.is-low .rm-stock-meter-words { color: var(--rm-terracotta); font-weight: 600; }
.rm-stock-meter.is-gone .rm-stock-meter-words { color: var(--rm-muted); }

/* ── Rating stars ───────────────────────────────────────────────────────── */

.rm-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--rm-body);
}
.rm-rating-stars-shape { position: relative; display: inline-block; letter-spacing: 0.08em; }
.rm-rating-stars-back { color: color-mix(in srgb, var(--rm-ink) 18%, transparent); }
/* The filled copy sits exactly on top and is clipped to the score — so 4.3
   stars is genuinely four and a third, on its own layer, with no reflow. */
.rm-rating-stars-front {
  position: absolute;
  inset: 0;
  color: var(--rm-yellow);
  white-space: nowrap;
}
.rm-rating-stars-number { color: var(--rm-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ── Review summary ─────────────────────────────────────────────────────── */

.rm-review-summary {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rm-body);
  font-size: 0.85rem;
}
.rm-review-summary-row { display: grid; grid-template-columns: 4.5rem 1fr 5rem; gap: 0.6rem; align-items: center; }
.rm-review-summary-bar {
  height: 8px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 9%, transparent);
  overflow: hidden;
}
.rm-review-summary-bar i {
  display: block;
  height: 100%;
  background: var(--rm-yellow);
  transform: scaleX(var(--rm-review-summary-share, 0));
  transform-origin: left center;
}
.rm-review-summary-count { color: var(--rm-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Add to cart ────────────────────────────────────────────────────────── */

/*
 * All three faces share one grid cell, so the button is already as wide as its
 * widest state and swapping between them cannot resize it mid-click. Inactive
 * faces are `visibility: hidden` rather than transparent, because
 * invisible-but-present text is still read aloud and still found by
 * find-in-page — a tick nobody can see should not be in either. That is also
 * why the JS marks all three `aria-hidden` and gives the button a fixed
 * `aria-label`: with the faces in the tree the visible one *is* the button's
 * name, and the name would change under the live region saying the same thing.
 */
.rm-add-to-cart {
  display: inline-grid;
  place-items: center;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: 600 0.9rem/1.3 var(--rm-body);
  cursor: pointer;
}
.rm-add-to-cart-face { grid-area: 1 / 1; visibility: hidden; }
.rm-add-to-cart-face.is-on { visibility: visible; }
.rm-add-to-cart[aria-disabled="true"] { cursor: progress; }
.rm-add-to-cart:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Wishlist heart ─────────────────────────────────────────────────────── */

.rm-wishlist {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rm-cream) 88%, transparent);
  color: var(--rm-ink);
  cursor: pointer;
}
.rm-wishlist-heart { display: grid; place-items: center; width: 22px; height: 22px; }
.rm-wishlist-heart svg { width: 100%; height: 100%; }
.rm-wishlist.is-on { color: var(--rm-terracotta); }
.rm-wishlist.is-on svg path { fill: currentColor; }
/* The burst is its own layer; the heart never moves the card it sits on. */
.rm-wishlist-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid var(--rm-terracotta);
  pointer-events: none;
  transform: scale(0.5);
}
.rm-wishlist:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

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

/* Fixed, so the first product added does not push the catalogue upward. */
.rm-compare-tray {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  box-shadow: 0 20px 46px -24px rgb(0 0 0 / 0.7);
  font-family: var(--rm-body);
}
.rm-compare-tray-list { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.rm-compare-tray-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.35rem 0.25rem 0.25rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-cream) 14%, transparent);
  font-size: 0.8rem;
}
.rm-compare-tray-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.rm-compare-tray-drop {
  border: 0;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.rm-compare-tray-drop:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Quick view ─────────────────────────────────────────────────────────── */

.rm-quick-view-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--rm-ink) 62%, transparent);
  backdrop-filter: blur(3px);
}
.rm-quick-view {
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 81;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100vh - 2rem));
  overflow: auto;
  padding: 1.6rem;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font-family: var(--rm-body);
}
.rm-quick-view-close {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rm-ink) 8%, transparent);
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.rm-quick-view-close:focus-visible,
.rm-quick-view:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Product tabs ───────────────────────────────────────────────────────── */

.rm-product-tabs { font-family: var(--rm-body); }
.rm-product-tabs-bar {
  position: relative;
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
  overflow-x: auto;
}
.rm-product-tabs-tab {
  border: 0;
  background: none;
  padding: 0.7rem 0.9rem;
  color: var(--rm-muted);
  font: 600 0.9rem/1.3 var(--rm-body);
  white-space: nowrap;
  cursor: pointer;
}
.rm-product-tabs-tab.is-current { color: var(--rm-ink); }
.rm-product-tabs-tab:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -3px; }
/*
 * One underline for the whole bar. Its box is set once from a measurement and
 * the movement between tabs is a transform, so an indicator sliding across six
 * tabs costs nothing in layout.
 */
.rm-product-tabs-line {
  position: absolute;
  bottom: -1px;
  height: 2px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  pointer-events: none;
  will-change: transform;
}
.rm-product-tabs-panel { padding: 1rem 0; }
.rm-product-tabs-panel:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; }

/* ── Variant picker ─────────────────────────────────────────────────────── */

.rm-variant-picker { display: grid; gap: 1rem; font-family: var(--rm-body); }
.rm-variant-picker.is-unavailable .rm-swatches-ring { box-shadow: 0 0 0 2px var(--rm-terracotta); }
/* aria-disabled, not disabled — it can still be reached, and still explains itself. */
.rm-variant-picker .is-off { opacity: 0.55; }
.rm-variant-picker .is-off::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    color-mix(in srgb, var(--rm-ink) 45%, transparent) 50%,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* ── Breadcrumb trail ───────────────────────────────────────────────────── */

.rm-breadcrumb-trail { font-family: var(--rm-body); font-size: 0.85rem; }
.rm-breadcrumb-trail-list {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.rm-breadcrumb-trail-list > li { display: flex; align-items: center; gap: 0.4rem; }
.rm-breadcrumb-trail-list > li + li::before { content: "/"; color: var(--rm-muted); }
.rm-breadcrumb-trail-list a { color: var(--rm-muted); text-decoration: none; }
.rm-breadcrumb-trail-list a:hover,
.rm-breadcrumb-trail-list a:focus-visible { color: var(--rm-ink); text-decoration: underline; }
.rm-breadcrumb-trail-list .is-current { color: var(--rm-ink); font-weight: 600; }
/* A real button, not an ellipsis: the folded levels can be got back. */
.rm-breadcrumb-trail-more button {
  border: 0;
  border-radius: var(--rm-radius-pill);
  padding: 0.1rem 0.5rem;
  background: color-mix(in srgb, var(--rm-ink) 9%, transparent);
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
}
.rm-breadcrumb-trail-more button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Sort bar ───────────────────────────────────────────────────────────── */

.rm-sort-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rm-body);
  font-size: 0.85rem;
}
/* The native control, dressed — never replaced. */
.rm-sort-bar-select {
  appearance: none;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 20%, transparent);
  border-radius: var(--rm-radius-pill);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 15px) 55% / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px) 55% / 5px 5px no-repeat,
    var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
}
.rm-sort-bar-select:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Filter panel ───────────────────────────────────────────────────────── */

.rm-filter-panel { position: relative; font-family: var(--rm-body); font-size: 0.85rem; }
.rm-filter-panel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 20%, transparent);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
}
.rm-filter-panel.is-open .rm-filter-panel-trigger { border-color: var(--rm-ink); }
.rm-filter-panel-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-accent);
  color: var(--rm-cream);
  font: 700 0.7rem/1 var(--rm-mono);
}
/*
 * Absolutely positioned on purpose. A disclosure that opens in the flow has to
 * animate a height, and animating a height re-lays-out every product below it
 * on every frame. Out of the flow, opening is a clip-path and the grid behind
 * does not move at all.
 */
.rm-filter-panel-body {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  display: grid;
  gap: 0.4rem;
  min-width: 12rem;
  padding: 0.8rem;
  border-radius: calc(var(--rm-radius) / 1.6);
  background: var(--rm-cream);
  box-shadow: 0 22px 48px -26px rgb(0 0 0 / 0.55);
}
.rm-filter-panel-body label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.rm-filter-panel-trigger:focus-visible,
.rm-filter-panel-body input:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Result count ───────────────────────────────────────────────────────── */

.rm-result-count {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  overflow: hidden; /* the old digits leave inside this box, not beside it */
  font-family: var(--rm-body);
  font-size: 0.9rem;
}
.rm-result-count-face {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rm-result-count-face.is-leaving { position: absolute; }
.rm-result-count-noun { color: var(--rm-muted); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/*
 * Everything above still ends in its finished state; only the travel goes. The
 * bars stay filled, the underline stays under the chosen tab and the tray stays
 * open — nothing here is allowed to leave content invisible.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-product-card,
  .rm-product-gallery-thumb,
  .rm-stock-meter-track i {
    transition-duration: 1ms;
  }
  .rm-product-card.is-lifted { transform: none; }
  .rm-product-gallery-thumb:hover,
  .rm-product-gallery-thumb:focus-visible { transform: none; }
}


/* ══ Ecommerce — storefront and merchandising ══════════════════════════════════════════════ */

/*
 * Ecommerce — storefront and merchandising.
 *
 * Nothing in here hides content and waits for a script. Every start state that
 * belongs to an animation is written from JavaScript and cleared again when the
 * animation finishes, so a storefront whose bundle never arrives is a
 * storefront that is simply not animated. The only invisible things below are
 * elements this module creates itself, which do not exist at all without it.
 *
 * Part of rage-motion.
 * Crafted by SoyRage Agency — https://soyrage.es/
 * MIT licensed (see LICENSE).
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

/*
 * Read but not drawn. Not `display: none`, which would take it out of the
 * accessibility tree along with everything else — this is the difference
 * between a signal that is announced and one that is only a picture.
 */
.rm-storefront-said,
.rm-storefront-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * An author `display` beats the user-agent rule for `[hidden]`, so every class
 * in this file that is given a display and is also toggled with `el.hidden`
 * has to say so explicitly. Without these lines the panel is still laid out,
 * still takes clicks and still collects a Tab press while claiming to be gone.
 */
.rm-collection-grid-item[hidden],
.rm-lookbook-card[hidden],
.rm-sale-countdown-clock[hidden],
.rm-sale-countdown-over[hidden],
.rm-bundle-builder-saving[hidden],
.rm-size-guide[hidden],
.rm-size-guide-veil[hidden],
.rm-size-guide-table tbody[hidden],
.rm-stock-notify-error[hidden],
.rm-badge-stack-item[hidden],
.rm-badge-stack-more[hidden],
.rm-recently-bought-item[hidden],
.rm-upsell-row-ring[hidden],
.rm-subscribe-box-summary[hidden] { display: none; }

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

.rm-hero-banner {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.9rem;
  min-height: clamp(20rem, 56vh, 34rem);
  padding: clamp(1.4rem, 4vw, 3.2rem);
  overflow: hidden;
  border-radius: var(--rm-radius);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font-family: var(--rm-body);
  isolation: isolate;
}
.rm-hero-banner-art {
  position: absolute;
  inset: -6%;
  z-index: -1;
  width: 112%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
/* A wash under the copy, so a heading over a photograph stays legible. */
.rm-hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--rm-ink) 88%, transparent) 8%,
    color-mix(in srgb, var(--rm-ink) 20%, transparent) 62%,
    transparent
  );
}
.rm-hero-banner-copy { position: relative; margin: 0; max-width: 34ch; }
.rm-hero-banner :is(h1, h2, h3) {
  margin: 0;
  font-family: var(--rm-display);
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rm-hero-banner p { color: color-mix(in srgb, var(--rm-cream) 82%, transparent); }
.rm-hero-banner a[href] {
  justify-self: start;
  padding: 0.7rem 1.4rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-yellow);
  color: var(--rm-ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform 260ms var(--rm-ease-out);
}
.rm-hero-banner a[href]:hover,
.rm-hero-banner a[href]:focus-visible { transform: translateY(-2px); }
.rm-hero-banner a[href]:focus-visible { outline: 2px solid var(--rm-cream); outline-offset: 3px; }

/* ── Collection grid ────────────────────────────────────────────────────── */

.rm-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--rm-collection-grid-min, 220px), 1fr));
  gap: clamp(0.7rem, 2vw, 1.4rem);
  font-family: var(--rm-body);
}
.rm-collection-grid-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  will-change: transform;
}
.rm-collection-grid-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--rm-radius) - 10px);
  background: color-mix(in srgb, var(--rm-ink) 6%, var(--rm-cream));
}
.rm-collection-grid-item :is(h2, h3, h4) { margin: 0; font-size: 1rem; font-weight: 600; }

/* ── Lookbook ───────────────────────────────────────────────────────────── */

.rm-lookbook {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--rm-radius);
  overflow: hidden;
  font-family: var(--rm-body);
}
.rm-lookbook-image { display: block; width: 100%; height: auto; }
.rm-lookbook-spot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-cream) 92%, transparent);
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 260ms var(--rm-ease-out), background-color 260ms var(--rm-ease-out);
}
.rm-lookbook-spot:hover,
.rm-lookbook-spot:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.rm-lookbook-spot:focus-visible { outline: 2px solid var(--rm-ink); outline-offset: 3px; }
.rm-lookbook-spot.is-open { background: var(--rm-yellow); }
.rm-lookbook-dot {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--rm-accent);
}
/* The pulse is a ring on its own layer — a transform, never a box-shadow. */
.rm-lookbook-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--rm-accent);
  animation: rm-lookbook-pulse 2.4s var(--rm-ease-out) infinite;
}
@keyframes rm-lookbook-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.rm-lookbook-name { white-space: nowrap; font-weight: 600; }
.rm-lookbook-card {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.3rem;
  max-width: min(20rem, 70%);
  padding: 0.9rem 1.1rem;
  border-radius: calc(var(--rm-radius) - 8px);
  background: var(--rm-cream);
  color: var(--rm-ink);
  box-shadow: 0 20px 50px -26px color-mix(in srgb, var(--rm-ink) 80%, transparent);
}
.rm-lookbook-card :is(h2, h3, h4) { margin: 0; font-size: 1rem; }
.rm-lookbook-card p { margin: 0; color: var(--rm-muted); font-size: 0.9rem; }

/* ── Category tiles ─────────────────────────────────────────────────────── */

.rm-category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.6rem, 2vw, 1.2rem);
  font-family: var(--rm-body);
}
.rm-category-tiles-tile {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 15rem;
  padding: 1rem;
  overflow: hidden;
  border-radius: var(--rm-radius);
  background: var(--rm-ink);
  color: var(--rm-cream);
  text-decoration: none;
  isolation: isolate;
}
.rm-category-tiles-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform 620ms var(--rm-ease-out), filter 620ms var(--rm-ease-out);
}
.rm-category-tiles-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--rm-ink) 80%, transparent), transparent 68%);
}
.rm-category-tiles-tile:hover .rm-category-tiles-image,
.rm-category-tiles-tile:focus-visible .rm-category-tiles-image {
  transform: scale(var(--rm-category-tiles-zoom, 1.07));
}
.rm-category-tiles-tile:focus-visible { outline: 3px solid var(--rm-yellow); outline-offset: 2px; }
.rm-category-tiles-tile :is(h2, h3, h4) {
  margin: 0;
  font-family: var(--rm-display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.rm-category-tiles-tile[aria-current="page"] { outline: 2px solid var(--rm-yellow); outline-offset: -2px; }

/* ── Sale countdown ─────────────────────────────────────────────────────── */

.rm-sale-countdown {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 1.2rem;
  border-radius: var(--rm-radius);
  background: var(--rm-terracotta);
  color: var(--rm-ink);
  font-family: var(--rm-body);
}
.rm-sale-countdown-head { font-family: var(--rm-display); font-size: 1.1rem; }
.rm-sale-countdown-clock { display: flex; gap: 0.55rem; }
.rm-sale-countdown-unit {
  display: grid;
  justify-items: center;
  min-width: 3.2rem;
  padding: 0.35rem 0.5rem;
  border-radius: calc(var(--rm-radius) / 2.6);
  background: color-mix(in srgb, var(--rm-ink) 10%, transparent);
}
.rm-sale-countdown-unit b {
  display: block;
  overflow: hidden;
  font-family: var(--rm-mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rm-sale-countdown-unit small {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rm-ink) 70%, transparent);
}
.rm-sale-countdown-over { display: block; font-weight: 600; }
.rm-sale-countdown-note {
  display: block;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--rm-ink) 72%, transparent);
}
.rm-sale-countdown.is-over { background: color-mix(in srgb, var(--rm-ink) 8%, var(--rm-cream)); }

/* ── Bundle builder ─────────────────────────────────────────────────────── */

.rm-bundle-builder {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
  border-radius: var(--rm-radius);
  font-family: var(--rm-body);
}
.rm-bundle-builder legend { font-family: var(--rm-display); font-size: 1.1rem; padding-inline: 0.3rem; }
.rm-bundle-builder-pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: calc(var(--rm-radius) / 2.4);
  cursor: pointer;
  transition: background-color 220ms var(--rm-ease-out);
}
.rm-bundle-builder-pick:hover { background: color-mix(in srgb, var(--rm-ink) 5%, transparent); }
.rm-bundle-builder-pick:has(input:checked) { background: color-mix(in srgb, var(--rm-accent) 12%, transparent); }
.rm-bundle-builder-pick:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-bundle-builder-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
}
.rm-bundle-builder-figure {
  display: inline-block;
  min-width: 5ch;
  font-family: var(--rm-display);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.rm-bundle-builder-saving {
  display: inline-flex;
  padding: 0.15rem 0.6rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-yellow);
  font-size: 0.8rem;
  font-weight: 600;
}
.rm-bundle-builder-advice { flex: 1 1 100%; color: var(--rm-muted); font-size: 0.86rem; }

/* ── Size guide ─────────────────────────────────────────────────────────── */

.rm-size-guide-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  background: color-mix(in srgb, var(--rm-ink) 62%, transparent);
}
.rm-size-guide {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 0.9rem;
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(80vh, 46rem);
  padding: 1.4rem;
  overflow: auto;
  transform: translate(-50%, -50%);
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font-family: var(--rm-body);
}
.rm-size-guide :is(h1, h2, h3) { margin: 0; font-family: var(--rm-display); }
.rm-size-guide-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rm-ink) 8%, transparent);
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.rm-size-guide-close:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-size-guide-units {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
  border-radius: var(--rm-radius-pill);
}
.rm-size-guide-units legend { padding-inline: 0.3rem; font-size: 0.8rem; color: var(--rm-muted); }
.rm-size-guide-units label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.rm-size-guide-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rm-size-guide-table :is(th, td) {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--rm-ink) 12%, transparent);
}
.rm-size-guide-table thead th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.rm-size-guide-table tbody th {
  position: sticky;
  left: 0;
  background: var(--rm-cream);
  font-weight: 600;
}

/* ── Stock notify ───────────────────────────────────────────────────────── */

.rm-stock-notify {
  display: grid;
  font-family: var(--rm-body);
}
/*
 * Two faces, one grid cell. The box is already as tall as the taller of them,
 * so confirming does not shove the product page down — and `visibility` rather
 * than `display` keeps the inactive face out of the tab order and out of the
 * accessibility tree while it holds the space open.
 */
.rm-stock-notify-face,
.rm-subscribe-box-face {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  visibility: hidden;
}
.rm-stock-notify-face.is-on,
.rm-subscribe-box-face.is-on { visibility: visible; }
.rm-stock-notify label,
.rm-subscribe-box label { font-size: 0.86rem; font-weight: 600; }
.rm-stock-notify input:not([type="checkbox"]),
.rm-subscribe-box input:not([type="checkbox"]) {
  padding: 0.6rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  border-radius: calc(var(--rm-radius) / 2.6);
  background: var(--rm-cream);
  color: inherit;
  font: inherit;
}
.rm-stock-notify input[aria-invalid="true"],
.rm-subscribe-box input[aria-invalid="true"] { border-color: var(--rm-terracotta); }
.rm-stock-notify button[type="submit"],
.rm-subscribe-box button[type="submit"] {
  justify-self: start;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rm-stock-notify-error {
  display: block;
  margin: 0;
  color: var(--rm-terracotta);
  font-size: 0.84rem;
  font-weight: 600;
}
.rm-stock-notify-done,
.rm-subscribe-box-done {
  margin: 0;
  align-content: center;
  font-weight: 600;
}
.rm-stock-notify-done:focus-visible,
.rm-subscribe-box-done:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Product video ──────────────────────────────────────────────────────── */

.rm-product-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rm-radius);
  background: color-mix(in srgb, var(--rm-ink) 8%, var(--rm-cream));
  font-family: var(--rm-body);
}
.rm-product-video-media { display: block; width: 100%; height: auto; }
.rm-product-video figcaption { padding: 0.6rem 0.9rem; color: var(--rm-muted); font-size: 0.86rem; }
.rm-product-video-toggle {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-cream) 92%, transparent);
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 240ms var(--rm-ease-out);
}
.rm-product-video-toggle:hover,
.rm-product-video-toggle:focus-visible { transform: translateY(-2px); }
.rm-product-video-toggle:focus-visible { outline: 2px solid var(--rm-ink); outline-offset: 2px; }

/* ── Swatch gallery ─────────────────────────────────────────────────────── */

.rm-swatch-gallery { display: grid; gap: 0.8rem; font-family: var(--rm-body); }
.rm-swatch-gallery-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rm-radius);
  background: color-mix(in srgb, var(--rm-ink) 6%, var(--rm-cream));
}
.rm-swatch-gallery fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.rm-swatch-gallery legend { padding: 0 0 0.35rem; font-size: 0.86rem; font-weight: 600; }
.rm-swatch-gallery-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  border: 2px solid transparent;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 5%, transparent);
  font-size: 0.84rem;
  cursor: pointer;
}
/* A real input, kept focusable, kept in the form, kept on the arrow keys. */
.rm-swatch-gallery-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0.001; /* not 0: some engines skip focus on a fully transparent box */
  pointer-events: none;
}
.rm-swatch-gallery-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-ink) 24%, transparent);
}
.rm-swatch-gallery-chip:has(input:checked) { border-color: var(--rm-ink); }
.rm-swatch-gallery-chip:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Badge stack ────────────────────────────────────────────────────────── */

.rm-badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rm-body);
}
.rm-badge-stack-item {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 8%, transparent);
  color: var(--rm-ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.rm-badge-stack-item.is-low { background: var(--rm-terracotta); }
.rm-badge-stack-item.is-sale,
.rm-badge-stack-item.is-offer { background: var(--rm-yellow); }
.rm-badge-stack-item.is-new { background: var(--rm-accent); color: var(--rm-cream); }
.rm-badge-stack-more { display: inline-flex; }
.rm-badge-stack-more button {
  padding: 0.2rem 0.65rem;
  border: 1px dashed color-mix(in srgb, var(--rm-ink) 35%, transparent);
  border-radius: var(--rm-radius-pill);
  background: none;
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.rm-badge-stack-more button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Trust row ──────────────────────────────────────────────────────────── */

.rm-trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(0.7rem, 2vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rm-body);
}
.rm-trust-row-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border-radius: calc(var(--rm-radius) - 8px);
  background: color-mix(in srgb, var(--rm-ink) 5%, transparent);
}
.rm-trust-row-item strong { font-size: 0.94rem; }
.rm-trust-row-item span { color: var(--rm-muted); font-size: 0.84rem; }
.rm-trust-row-item :is(svg, img) { width: 1.5rem; height: 1.5rem; }

/* ── Shipping estimate ──────────────────────────────────────────────────── */

.rm-shipping-estimate {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  font-family: var(--rm-body);
  font-size: 0.9rem;
}
.rm-shipping-estimate-line time { font-weight: 600; white-space: nowrap; }
.rm-shipping-estimate-caveat { color: var(--rm-muted); font-size: 0.78rem; }

/* ── Recently bought ────────────────────────────────────────────────────── */

.rm-recently-bought {
  display: grid;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  border-radius: calc(var(--rm-radius) - 8px);
  background: color-mix(in srgb, var(--rm-ink) 5%, transparent);
  font-family: var(--rm-body);
}
.rm-recently-bought-list { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.rm-recently-bought-item { display: flex; gap: 0.4rem; font-size: 0.86rem; }
.rm-recently-bought-controls { display: flex; gap: 0.5rem; margin: 0; }
.rm-recently-bought-controls button {
  padding: 0.15rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 25%, transparent);
  border-radius: var(--rm-radius-pill);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}
.rm-recently-bought-controls button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-recently-bought-controls button[disabled] { opacity: 0.5; cursor: default; }
.rm-recently-bought-note { margin: 0; color: var(--rm-muted); font-size: 0.74rem; font-style: italic; }

/* ── Cross sell ─────────────────────────────────────────────────────────── */

.rm-cross-sell { position: relative; display: grid; gap: 0.7rem; font-family: var(--rm-body); }
.rm-cross-sell :is(h1, h2, h3) { margin: 0; font-family: var(--rm-display); font-size: 1.2rem; }
.rm-cross-sell-rail {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0 0 0.4rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rm-cross-sell-rail:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }
.rm-cross-sell-item { flex: 0 0 clamp(9rem, 32vw, 12rem); scroll-snap-align: start; }
.rm-cross-sell-item a { display: grid; gap: 0.35rem; color: inherit; text-decoration: none; }
.rm-cross-sell-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--rm-radius) - 10px);
  background: color-mix(in srgb, var(--rm-ink) 6%, var(--rm-cream));
}
.rm-cross-sell-item a:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }
.rm-cross-sell-nav { display: flex; gap: 0.4rem; justify-content: flex-end; margin: 0; }
.rm-cross-sell-page {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 220ms var(--rm-ease-out);
}
.rm-cross-sell-page:hover:not([disabled]) { transform: scale(1.08); }
.rm-cross-sell-page[disabled] { opacity: 0.35; cursor: default; }
.rm-cross-sell-page:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Upsell row ─────────────────────────────────────────────────────────── */

.rm-upsell-row {
  position: relative;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem;
  border: 0;
  font-family: var(--rm-body);
}
.rm-upsell-row legend { padding: 0 0 0.4rem; font-family: var(--rm-display); font-size: 1.05rem; }
.rm-upsell-row-tier {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: calc(var(--rm-radius) / 2.2);
  background: color-mix(in srgb, var(--rm-ink) 4%, transparent);
  cursor: pointer;
}
.rm-upsell-row-diff {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.rm-upsell-row-pick {
  padding: 0.1rem 0.55rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-yellow);
  font-size: 0.72rem;
  font-weight: 600;
}
/* One ring, moved by a measured FLIP — never an animated width. */
.rm-upsell-row-ring {
  position: absolute;
  z-index: 0;
  display: block;
  border: 2px solid var(--rm-ink);
  border-radius: calc(var(--rm-radius) / 2.2);
  pointer-events: none;
}
.rm-upsell-row-tier:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Gift card ──────────────────────────────────────────────────────────── */

.rm-gift-card { display: grid; gap: 0.7rem; font-family: var(--rm-body); }
.rm-gift-card fieldset { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.rm-gift-card legend { padding: 0 0 0.35rem; font-size: 0.86rem; font-weight: 600; }
.rm-gift-card fieldset label {
  padding: 0.35rem 0.85rem;
  border: 2px solid color-mix(in srgb, var(--rm-ink) 16%, transparent);
  border-radius: var(--rm-radius-pill);
  cursor: pointer;
}
.rm-gift-card fieldset label:has(input:checked) { border-color: var(--rm-ink); background: var(--rm-yellow); }
.rm-gift-card fieldset label:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-gift-card textarea {
  padding: 0.6rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  border-radius: calc(var(--rm-radius) / 2.6);
  background: var(--rm-cream);
  color: inherit;
  font: inherit;
  resize: vertical;
}
.rm-gift-card-preview { perspective: 800px; }
.rm-gift-card-face {
  display: grid;
  align-content: space-between;
  gap: 0.6rem;
  min-height: 9rem;
  padding: 1.1rem;
  border-radius: var(--rm-radius);
  background: linear-gradient(140deg, var(--rm-terracotta), var(--rm-yellow));
  color: var(--rm-ink);
  transform-style: preserve-3d;
}
.rm-gift-card-figure { font-family: var(--rm-display); font-size: 2rem; }
.rm-gift-card-words { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.rm-gift-card-counter { margin: 0; color: var(--rm-muted); font-size: 0.76rem; }

/* ── Loyalty points ─────────────────────────────────────────────────────── */

.rm-loyalty-points { display: grid; gap: 0.45rem; font-family: var(--rm-body); }
.rm-loyalty-points-head {
  position: relative; /* the rolling clone is absolute inside this box */
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  overflow: hidden;
}
.rm-loyalty-points-figure {
  display: inline-block;
  min-width: 3ch;
  font-family: var(--rm-display);
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.rm-loyalty-points-figure.is-leaving { position: absolute; }
.rm-loyalty-points-words { color: var(--rm-muted); font-size: 0.86rem; }
.rm-loyalty-points-track {
  position: relative;
  display: block;
  height: 0.55rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 10%, transparent);
  overflow: hidden;
}
.rm-loyalty-points-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--rm-accent);
  transform: scaleX(var(--rm-loyalty-points-value, 0));
  transform-origin: left center;
  transition: transform var(--rm-loyalty-points-duration, 620ms) var(--rm-ease-out);
}
.rm-loyalty-points-tiers {
  position: relative;
  display: block;
  height: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-loyalty-points-tier {
  position: absolute;
  top: 0;
  left: calc(var(--rm-loyalty-points-at, 0) * 100%);
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--rm-muted);
  font-size: 0.72rem;
}
.rm-loyalty-points-tier.is-reached { color: var(--rm-ink); font-weight: 600; }
.rm-loyalty-points-tier[aria-current="true"] { color: var(--rm-accent); font-weight: 600; }

/* ── Referral box ───────────────────────────────────────────────────────── */

.rm-referral-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rm-body);
}
.rm-referral-box label { flex: 1 1 100%; font-size: 0.86rem; font-weight: 600; }
.rm-referral-box-field {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  border-radius: calc(var(--rm-radius) / 2.6);
  background: color-mix(in srgb, var(--rm-ink) 4%, transparent);
  color: inherit;
  font-family: var(--rm-mono);
  font-size: 0.84rem;
}
.rm-referral-box-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rm-referral-box-copy:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }
.rm-referral-box-tick { opacity: 0; transition: opacity 240ms var(--rm-ease-out); }
.rm-referral-box.is-copied .rm-referral-box-tick { opacity: 1; }
.rm-referral-box.is-copied .rm-referral-box-copy { background: var(--rm-accent); }

/* ── Subscribe box ──────────────────────────────────────────────────────── */

.rm-subscribe-box { display: grid; font-family: var(--rm-body); }
.rm-subscribe-box-summary {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--rm-terracotta);
  border-radius: calc(var(--rm-radius) / 2.4);
}
.rm-subscribe-box-summary:focus-visible { outline: 2px solid var(--rm-terracotta); outline-offset: 3px; }
.rm-subscribe-box-summary-title { margin: 0; font-weight: 700; }
.rm-subscribe-box-summary ul { margin: 0; padding-left: 1.1rem; font-size: 0.86rem; }
.rm-subscribe-box-summary a { color: var(--rm-terracotta); }
.rm-subscribe-box label:has(input[type="checkbox"]) {
  display: flex;
  gap: 0.5rem;
  align-items: start;
  font-weight: 400;
  font-size: 0.84rem;
  cursor: pointer;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/*
 * Nothing below hides anything: every component ends at its finished state,
 * visible and readable, with only the travel taken away.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-lookbook-dot::after { animation: none; opacity: 0; }
  .rm-hero-banner a[href],
  .rm-lookbook-spot,
  .rm-category-tiles-image,
  .rm-product-video-toggle,
  .rm-cross-sell-page,
  .rm-loyalty-points-track i,
  .rm-referral-box-tick,
  .rm-bundle-builder-pick { transition-duration: 1ms; }
  .rm-category-tiles-tile:hover .rm-category-tiles-image,
  .rm-category-tiles-tile:focus-visible .rm-category-tiles-image { transform: none; }
  .rm-cross-sell-rail { scroll-behavior: auto; }
}


/* ══ Ecommerce — account, orders and support ══════════════════════════════════════════════ */

/* ═══ Ecommerce — account, orders and support ════════════════════════════════
 *
 * Styles for src/components/account.js.
 *
 * Two rules run through the whole file. Nothing here starts an element at
 * opacity 0, visibility hidden or display none waiting for a script to reveal
 * it — every hidden state is either the [hidden] attribute set from JavaScript
 * or a class the script adds, so a page whose script never arrives is a page
 * with all of its content in it. And nothing here transitions a width, a height
 * or a padding: the bars fill by transform and clip-path, the markers move by
 * transform, and the lists close up with a FLIP played from JavaScript.
 *
 * Part of rage-motion.
 * Crafted by SoyRage Agency — https://soyrage.es/
 * MIT licensed (see LICENSE).
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

/* Announced, never seen. Every component in this module owns one. */
.rm-account-live,
.rm-account-said {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * An author `display` beats the user-agent rule for [hidden], so every element
 * in this file that is given a display AND hidden from JavaScript needs saying
 * again explicitly. Without it the panel is still laid out and still takes
 * clicks — invisible to the eye, entirely present to a pointer.
 */
.rm-account-said[hidden],
.rm-order-list-row[hidden],
.rm-order-card-detail[hidden],
.rm-pause-subscription-panel[hidden],
.rm-invoice-list-row[hidden],
.rm-download-row-bar[hidden],
.rm-wishlist-grid-empty[hidden],
.rm-review-form-errors[hidden],
.rm-review-card-more[hidden],
.rm-support-ticket-thread[hidden],
.rm-support-ticket-reply[hidden],
.rm-chat-bubble-jump[hidden],
.rm-account-nav-marker[hidden] { display: none; }

.rm-order-list,
.rm-order-card,
.rm-tracking-map,
.rm-delivery-slot,
.rm-address-book,
.rm-address-card,
.rm-payment-cards,
.rm-subscription-card,
.rm-pause-subscription,
.rm-invoice-list,
.rm-download-row,
.rm-wishlist-grid,
.rm-review-form,
.rm-review-card,
.rm-question-answer,
.rm-support-ticket,
.rm-chat-bubble,
.rm-refund-status,
.rm-account-nav {
  font-family: var(--rm-body);
  color: var(--rm-ink);
}

.rm-order-card-toggle:focus-visible,
.rm-delivery-slot-option:focus-within,
.rm-address-card-action:focus-visible,
.rm-subscription-card-skip:focus-visible,
.rm-pause-subscription-trigger:focus-visible,
.rm-pause-subscription-confirm:focus-visible,
.rm-invoice-list-select:focus-visible,
.rm-download-row-button:focus-visible,
.rm-wishlist-grid-drop:focus-visible,
.rm-review-card-more:focus-visible,
.rm-review-card-helpful:focus-visible,
.rm-question-answer-vote:focus-visible,
.rm-support-ticket-toggle:focus-visible,
.rm-support-ticket-send:focus-visible,
.rm-chat-bubble-jump:focus-visible,
.rm-account-nav-link:focus-visible {
  outline: 2px solid var(--rm-accent);
  outline-offset: 2px;
}

/* One card shape, borrowed by everything in the account area. */
.rm-order-card,
.rm-address-card,
.rm-subscription-card,
.rm-review-card,
.rm-support-ticket {
  position: relative;
  display: block;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgb(14 14 14 / 10%);
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
}

/* ── Order list ─────────────────────────────────────────────────────────── */

.rm-order-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-order-list-row {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  /* The rows are FLIPped when the filter changes, so they need their own layer
     rather than inheriting one from a parent that also moves. */
  will-change: transform;
}

/* ── Order card ─────────────────────────────────────────────────────────── */

.rm-order-card-toggle {
  margin-top: 0.9rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.18s var(--rm-ease-out), border-color 0.18s var(--rm-ease-out);
}
.rm-order-card-toggle:hover { background: rgb(14 14 14 / 6%); border-color: rgb(14 14 14 / 28%); }

.rm-order-card-detail {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(14 14 14 / 10%);
}
.rm-order-card-detail ul { margin: 0; padding-left: 1.1rem; }

/* ── Order status pill ──────────────────────────────────────────────────── */

.rm-order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid currentcolor;
  border-radius: var(--rm-radius-pill);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  /* The pill's box never changes size as the word rolls, so a card full of
     these does not twitch when one of them updates. */
  white-space: nowrap;
}

/*
 * The dot changes shape as well as colour. A hue on its own is invisible to a
 * screen reader, unreliable for a colour vision deficiency and gone entirely in
 * a forced-colours theme, so the word beside it is the real message and this is
 * only ever a second, redundant cue.
 */
.rm-order-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  background: currentcolor;
  border-radius: var(--rm-radius-pill);
}
.rm-order-status.is-waiting { color: var(--rm-terracotta); }
.rm-order-status.is-moving { color: var(--rm-accent); }
.rm-order-status.is-done { color: #2f7d4a; }
.rm-order-status.is-stopped { color: var(--rm-muted); }
.rm-order-status.is-moving .rm-order-status-dot { border-radius: 2px; transform: rotate(45deg); }
.rm-order-status.is-done .rm-order-status-dot { border-radius: 2px; }
.rm-order-status.is-stopped .rm-order-status-dot { height: 2px; width: 0.7rem; border-radius: 0; }

.rm-order-status-word { font-weight: 500; }

/* ── Tracking map ───────────────────────────────────────────────────────── */

.rm-tracking-map { display: grid; gap: 1rem; }

.rm-tracking-map-frame {
  position: relative;
  /* A fixed ratio so the marker's pixel arithmetic has a stable box to work in
     — it is measured with a ResizeObserver, not assumed. */
  aspect-ratio: 5 / 2;
  width: 100%;
  color: rgb(14 14 14 / 16%);
}
.rm-tracking-map-frame > svg,
.rm-tracking-map-done > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rm-tracking-map-done {
  position: absolute;
  inset: 0;
  color: var(--rm-accent);
  /* Clipped, not resized: the completed part of the route is revealed by a
     paint-only property, so advancing it costs no layout at all. */
  clip-path: inset(0 100% 0 0);
}

.rm-tracking-map-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  border: 2px solid var(--rm-cream);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-accent);
  will-change: transform;
}

.rm-tracking-map-stops {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--rm-muted);
}
.rm-tracking-map-stop.is-reached { color: var(--rm-ink); }
.rm-tracking-map-stop[aria-current="step"] { font-weight: 600; }

/* ── Delivery slot ──────────────────────────────────────────────────────── */

.rm-delivery-slot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.rm-delivery-slot legend { grid-column: 1 / -1; padding: 0; font-family: var(--rm-display); }

.rm-delivery-slot-option {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius);
  cursor: pointer;
  transition: border-color 0.18s var(--rm-ease-out), background 0.18s var(--rm-ease-out);
}
.rm-delivery-slot-option:hover { background: rgb(14 14 14 / 4%); }
/* :has, not a class kept in step from JavaScript — the browser already knows
   which radio is checked and toggling a class on every arrow press is work that
   shows up in a profile and nowhere on the screen. */
.rm-delivery-slot-option:has(input:checked) {
  border-color: var(--rm-ink);
  box-shadow: inset 0 0 0 1px var(--rm-ink);
}
.rm-delivery-slot-option.is-full {
  color: var(--rm-muted);
  cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg, transparent 0 6px, rgb(14 14 14 / 5%) 6px 12px
  );
}

/*
 * Clipped, never display:none. A hidden input has no focus ring, no arrow-key
 * cycling and no form value, which is exactly what the div-based picker throws
 * away without noticing.
 */
.rm-delivery-slot-option input,
.rm-address-book-card input,
.rm-payment-cards-row input,
.rm-review-form-rating input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── Address book ───────────────────────────────────────────────────────── */

.rm-address-book {
  display: grid;
  gap: 0.6rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.rm-address-book legend { padding: 0; font-family: var(--rm-display); }

.rm-address-book-card {
  position: relative;
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(14 14 14 / 14%);
  border-radius: var(--rm-radius);
  cursor: pointer;
  will-change: transform;
}
.rm-address-book-card.is-default {
  border-color: var(--rm-ink);
  box-shadow: inset 0 0 0 1px var(--rm-ink);
}

/* ── Address card ───────────────────────────────────────────────────────── */

.rm-address-card-flag {
  margin: 0 0 0.4rem;
  color: var(--rm-terracotta);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-address-card-action {
  margin: 0.8rem 0.5rem 0 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.rm-address-card-action:hover { background: rgb(14 14 14 / 6%); }

/*
 * The fade only applies under `.is-quiet`, which JavaScript adds. With the
 * script absent the buttons are simply visible, and they come back on
 * :focus-within as well as :hover — hiding them with display:none until hover,
 * which is the usual build, deletes them for every keyboard and touch visitor.
 */
.rm-address-card.is-quiet .rm-address-card-action {
  opacity: 0.35;
  transition: opacity 0.2s var(--rm-ease-out);
}
.rm-address-card.is-quiet:hover .rm-address-card-action,
.rm-address-card.is-quiet:focus-within .rm-address-card-action { opacity: 1; }

/* ── Payment cards ──────────────────────────────────────────────────────── */

.rm-payment-cards {
  display: grid;
  gap: 0.55rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.rm-payment-cards legend { padding: 0; font-family: var(--rm-display); }

.rm-payment-cards-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(14 14 14 / 14%);
  border-radius: var(--rm-radius);
  cursor: pointer;
}
.rm-payment-cards-row:has(input:checked) {
  border-color: var(--rm-ink);
  box-shadow: inset 0 0 0 1px var(--rm-ink);
}

.rm-payment-cards-brand { font-weight: 500; }

/*
 * A masked stub and nothing else. The component will not draw more than four
 * digits whatever the markup says; this only makes the four look like what they
 * are.
 */
.rm-payment-cards-stub {
  font-family: var(--rm-mono);
  font-size: 0.9rem;
  color: var(--rm-muted);
  letter-spacing: 0.08em;
}

/* ── Subscription card ──────────────────────────────────────────────────── */

.rm-subscription-card-bar {
  position: relative;
  height: 0.5rem;
  margin: 1rem 0 0.6rem;
  border-radius: var(--rm-radius-pill);
  background: rgb(14 14 14 / 10%);
  overflow: hidden;
}
.rm-subscription-card-bar > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--rm-accent);
  /* Already full width, scaled down. Growing the width instead would re-lay-out
     the card on every frame. */
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--rm-ease-out);
}
.rm-subscription-card.is-skipped .rm-subscription-card-bar > i { background: var(--rm-muted); }

.rm-subscription-card-words { margin: 0 0 0.9rem; color: var(--rm-muted); font-size: 0.9rem; }

.rm-subscription-card-skip {
  padding: 0.45rem 0.95rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.rm-subscription-card-skip[aria-pressed="true"] {
  background: var(--rm-ink);
  border-color: var(--rm-ink);
  color: var(--rm-cream);
}

/* ── Pause subscription ─────────────────────────────────────────────────── */

.rm-pause-subscription { display: grid; gap: 0.7rem; justify-items: start; }

.rm-pause-subscription-trigger {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rm-ink);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
  transition: background 0.18s var(--rm-ease-out), color 0.18s var(--rm-ease-out);
}
.rm-pause-subscription-trigger:hover { background: var(--rm-ink); color: var(--rm-cream); }
.rm-pause-subscription.is-paused .rm-pause-subscription-trigger {
  border-color: var(--rm-terracotta);
  color: var(--rm-terracotta);
}
.rm-pause-subscription.is-paused .rm-pause-subscription-trigger:hover {
  background: var(--rm-terracotta);
  color: var(--rm-cream);
}

.rm-pause-subscription-panel {
  display: grid;
  gap: 0.8rem;
  justify-items: start;
  padding: 1rem 1.2rem;
  border: 1px solid rgb(14 14 14 / 14%);
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
}

.rm-pause-subscription-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.rm-pause-subscription-choices legend { padding: 0 0 0.5rem; width: 100%; }
.rm-pause-subscription-choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  cursor: pointer;
}
.rm-pause-subscription-choices label:has(input:checked) { border-color: var(--rm-ink); }

.rm-pause-subscription-confirm {
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: inherit;
  cursor: pointer;
}

/* ── Invoice list ───────────────────────────────────────────────────────── */

.rm-invoice-list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.rm-invoice-list-bar label { color: var(--rm-muted); font-size: 0.9rem; }

/* The browser's own select, dressed and otherwise left alone: type-ahead, Home
   and End, the platform picker on a phone and voice control all come free. */
.rm-invoice-list-select {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
}

.rm-invoice-list-total {
  margin: 0 0 0 auto;
  font-family: var(--rm-mono);
  font-variant-numeric: tabular-nums;
}

.rm-invoice-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgb(14 14 14 / 8%);
  list-style: none;
  will-change: transform;
}

/* ── Download row ───────────────────────────────────────────────────────── */

.rm-download-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgb(14 14 14 / 8%);
  list-style: none;
}
.rm-download-row-size { grid-column: 1; margin: 0; color: var(--rm-muted); font-size: 0.85rem; }

.rm-download-row-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0.45rem 1rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.rm-download-row-button:hover { background: rgb(14 14 14 / 6%); }

.rm-download-row-bar {
  grid-column: 1 / -1;
  height: 0.3rem;
  border-radius: var(--rm-radius-pill);
  background: rgb(14 14 14 / 10%);
  overflow: hidden;
}
.rm-download-row-bar > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--rm-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.25s linear;
}
.rm-download-row.is-done .rm-download-row-bar > i { background: #2f7d4a; }

/* ── Wishlist grid ──────────────────────────────────────────────────────── */

.rm-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-wishlist-grid-item {
  position: relative;
  padding: 0.75rem;
  border: 1px solid rgb(14 14 14 / 10%);
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  list-style: none;
  will-change: transform;
}
.rm-wishlist-grid-item img {
  display: block;
  width: 100%;
  border-radius: calc(var(--rm-radius) - 0.5rem);
}

.rm-wishlist-grid-drop {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: rgb(241 238 233 / 88%);
  color: var(--rm-ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s var(--rm-ease-out), color 0.16s var(--rm-ease-out);
}
.rm-wishlist-grid-drop:hover { color: var(--rm-terracotta); transform: rotate(90deg); }

.rm-wishlist-grid-empty {
  display: block;
  padding: 2rem 1.5rem;
  border: 1px dashed rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius);
  color: var(--rm-muted);
  text-align: center;
}
.rm-wishlist-grid-empty:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Review form ────────────────────────────────────────────────────────── */

.rm-review-form { display: grid; gap: 0.8rem; justify-items: start; }

.rm-review-form-errors {
  display: block;
  width: 100%;
  padding: 1rem 1.2rem;
  border: 2px solid var(--rm-terracotta);
  border-radius: var(--rm-radius);
  color: var(--rm-ink);
}
.rm-review-form-errors p { margin: 0 0 0.5rem; font-weight: 600; }
.rm-review-form-errors ul { margin: 0; padding-left: 1.1rem; }
.rm-review-form-errors a { color: var(--rm-terracotta); }

.rm-review-form-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.rm-review-form-rating legend { padding: 0 0 0.4rem; width: 100%; font-family: var(--rm-display); }
.rm-review-form-rating label {
  position: relative;
  padding: 0.3rem 0.5rem;
  border-radius: var(--rm-radius-sm, 4px);
  color: rgb(14 14 14 / 30%);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.16s var(--rm-ease-out), transform 0.16s var(--rm-ease-out);
}
.rm-review-form-rating label:hover { transform: translateY(-2px); }
.rm-review-form-rating label:has(input:checked) { color: var(--rm-yellow); }
.rm-review-form-rating label:has(input:focus-visible) {
  outline: 2px solid var(--rm-accent);
  outline-offset: 2px;
}

.rm-review-form-body {
  width: 100%;
  min-height: 7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}

.rm-review-form-count { margin: 0; color: var(--rm-muted); font-size: 0.82rem; }
.rm-review-form-count.is-over { color: var(--rm-terracotta); }

/* ── Review card ────────────────────────────────────────────────────────── */

.rm-review-card-body { margin: 0.5rem 0 0; }
/*
 * The clamp is a class the script adds, so an un-scripted page shows the whole
 * review. Line clamping is the one place a box genuinely changes height, which
 * is why opening it is a FLIP played from JavaScript rather than a transition.
 */
.rm-review-card.is-clamped .rm-review-card-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rm-review-card-lines, 4);
  line-clamp: var(--rm-review-card-lines, 4);
  overflow: hidden;
}

.rm-review-card-more {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rm-review-card-more:hover { color: var(--rm-terracotta); }

.rm-review-card-helpful {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.rm-review-card-helpful[aria-pressed="true"] { border-color: var(--rm-ink); background: rgb(14 14 14 / 6%); }

/* A slot the rolling number cannot resize, so the button never twitches. */
.rm-review-card-tally {
  display: inline-block;
  min-width: 2ch;
  overflow: hidden;
  font-family: var(--rm-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Question and answer ────────────────────────────────────────────────── */

.rm-question-answer-list { display: grid; gap: 0.7rem; margin: 0.8rem 0 0; padding: 0; }

.rm-question-answer-item {
  position: relative;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgb(14 14 14 / 12%);
  border-radius: var(--rm-radius);
  list-style: none;
  will-change: transform;
}
.rm-question-answer-item.is-seller { border-color: var(--rm-accent); }

.rm-question-answer-flag {
  margin: 0 0 0.35rem;
  color: var(--rm-accent);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-question-answer-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.rm-question-answer-vote[aria-pressed="true"] { border-color: var(--rm-ink); background: rgb(14 14 14 / 6%); }
.rm-question-answer-count { font-family: var(--rm-mono); font-variant-numeric: tabular-nums; }

/* ── Support ticket ─────────────────────────────────────────────────────── */

.rm-support-ticket-meta {
  margin: 0 0 0.5rem;
  color: var(--rm-muted);
  font-size: 0.85rem;
}
.rm-support-ticket-state { color: var(--rm-ink); font-weight: 500; }
.rm-support-ticket-state.is-moving { color: var(--rm-accent); }
.rm-support-ticket-state.is-waiting { color: var(--rm-terracotta); }
.rm-support-ticket-state.is-done { color: #2f7d4a; }

.rm-support-ticket-toggle {
  margin: 0.8rem 0.5rem 0 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 16%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.rm-support-ticket-toggle:hover { background: rgb(14 14 14 / 6%); }

.rm-support-ticket-thread {
  display: block;
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgb(14 14 14 / 12%);
}

.rm-support-ticket-reply {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin-top: 0.9rem;
}
.rm-support-ticket-reply textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.rm-support-ticket-send {
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

/* ── Chat bubbles ───────────────────────────────────────────────────────── */

.rm-chat-bubble {
  display: grid;
  gap: 0.5rem;
  max-height: 22rem;
  margin: 0;
  padding: 0.5rem;
  overflow-y: auto;
  list-style: none;
  /* This box is the scroll container, which is what lets the component decide
     whether the reader was at the bottom before a message arrived. */
  overscroll-behavior: contain;
}

.rm-chat-bubble-item {
  max-width: 78%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--rm-radius);
  list-style: none;
}
.rm-chat-bubble-item p { margin: 0; }
.rm-chat-bubble-item.is-them {
  justify-self: start;
  background: rgb(14 14 14 / 6%);
  border-bottom-left-radius: 0.35rem;
}
.rm-chat-bubble-item.is-you {
  justify-self: end;
  background: var(--rm-accent);
  color: #fff;
  border-bottom-right-radius: 0.35rem;
}

/* Which side of the column a bubble sits on is invisible to a screen reader, so
   the author is written down rather than implied. */
.rm-chat-bubble-author {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  opacity: 0.8;
}

.rm-chat-bubble-jump {
  display: block;
  margin: 0.5rem auto 0;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ── Refund status ──────────────────────────────────────────────────────── */

.rm-refund-status { display: grid; gap: 0.8rem; }

.rm-refund-status-track,
.rm-refund-status-fill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1rem;
  padding: 0 0.15rem;
}
.rm-refund-status-track {
  position: relative;
  color: rgb(14 14 14 / 18%);
}
.rm-refund-status-track::before,
.rm-refund-status-fill::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  height: 2px;
  background: currentcolor;
}
.rm-refund-status-track > i,
.rm-refund-status-fill > i {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--rm-radius-pill);
  background: currentcolor;
}

/*
 * The filled copy is revealed with clip-path, which paints and nothing more.
 * Transitioning its width instead re-lays-out the row on every frame — and on a
 * page listing four refunds, four rows on every frame.
 */
.rm-refund-status-fill {
  position: absolute;
  inset: 0;
  color: var(--rm-accent);
  clip-path: inset(0 100% 0 0);
}
.rm-refund-status.is-paid .rm-refund-status-fill { color: #2f7d4a; }

.rm-refund-status-words { margin: 0; }

/* ── Account nav ────────────────────────────────────────────────────────── */

.rm-account-nav {
  position: relative;
  display: grid;
  gap: 0.15rem;
}

.rm-account-nav-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--rm-radius-pill);
  color: var(--rm-muted);
  text-decoration: none;
  transition: color 0.18s var(--rm-ease-out);
}
.rm-account-nav-link:hover { color: var(--rm-ink); }
.rm-account-nav-link.is-current { color: var(--rm-ink); font-weight: 600; }

/* One marker for the whole column, placed by measurement and FLIPped between
   links — no per-link background to keep in step, and no animated top. */
.rm-account-nav-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--rm-radius-pill);
  background: rgb(14 14 14 / 8%);
  pointer-events: none;
  will-change: transform;
}

.rm-account-nav-tally {
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-terracotta);
  color: var(--rm-cream);
  font-family: var(--rm-mono);
  font-size: 0.72rem;
  text-align: center;
}

/* ── Shared ─────────────────────────────────────────────────────────────── */

/*
 * One sizing rule, and there are no exceptions to it in this module.
 *
 * Every viewBox is built at the proportions its chart wants to be drawn at — a
 * bullet strip is a hundred units by three, a treemap a hundred by sixty-two —
 * so all of them scale uniformly. Constrain one axis and let the other follow:
 * a width with `height: auto` for the charts that fill a column, or a height in
 * `em` with `width: auto` for the sparkline that has to sit inside a sentence.
 * Never both. Pin both and the SVG letterboxes itself inside the box you gave
 * it, drawing at a third of the width and looking, wrongly, like a bug in the
 * maths.
 *
 * The stretched alternative — `preserveAspectRatio: none` plus
 * `vector-effect: non-scaling-stroke` to rescue the line weights — is not used
 * anywhere here, and that is on purpose rather than by omission: a non-scaling
 * stroke measures its dash pattern in screen units, which turns the
 * `pathLength="1"` reveal every chart in this file depends on into a row of
 * dashes.
 */
.rm-area-chart-svg,
.rm-step-chart-svg,
.rm-candles-svg,
.rm-waterfall-svg,
.rm-funnel-svg,
.rm-treemap-svg,
.rm-compare-bars-svg,
.rm-scatter-svg,
.rm-timeline-chart-svg,
.rm-bullet-svg,
.rm-range-bar-svg,
.rm-spark-bars-svg,
.rm-meters-svg {
  display: block;
  width: 100%;
  height: auto;
  color: inherit;
  overflow: visible;
}

/* The figure a screen reader reads while the visible one is still moving. */
.rm-big-number-value,
.rm-delta-badge-value,
.rm-number-ticker-value {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * The source list for the dense charts: still in the page, still read aloud,
 * simply not repeated on screen where sixty numbers would drown the drawing.
 */
.rm-area-chart-data,
.rm-step-chart-data,
.rm-candles-data,
.rm-heat-calendar-data,
.rm-scatter-data {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The source list for the categorical charts, which reads as a legend. */
.rm-radar-data,
.rm-treemap-data,
.rm-activity-rings-data,
.rm-pie-data {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font: 400 0.78rem/1.4 var(--rm-body, system-ui, sans-serif);
  color: var(--rm-muted, #6c695f);
}

.rm-radar-data li,
.rm-treemap-data li,
.rm-activity-rings-data li,
.rm-pie-data li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* ── areaChart ──────────────────────────────────────────────────────────── */

.rm-area-chart {
  position: relative;
  display: block;
}

/* ── stepChart ──────────────────────────────────────────────────────────── */

.rm-step-chart {
  position: relative;
  display: block;
}

/* ── candlestick ────────────────────────────────────────────────────────── */

.rm-candles {
  position: relative;
  display: block;
}

.rm-candles-svg {
  width: min(100%, 520px);
}

/* ── waterfall ──────────────────────────────────────────────────────────── */

.rm-waterfall {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 0.75rem/1.3 var(--rm-body, system-ui, sans-serif);
  color: var(--rm-muted, #6c695f);
}

.rm-waterfall > li {
  flex: 1 1 0;
  text-align: center;
}

.rm-waterfall > li.is-fall {
  color: var(--rm-terracotta, #d28c65);
}

.rm-waterfall > li.is-total {
  color: inherit;
  font-weight: 600;
}

/* ── radar ──────────────────────────────────────────────────────────────── */

.rm-radar {
  position: relative;
  display: block;
}

.rm-radar-svg {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin-inline: auto;
  color: inherit;
}

/* ── heatCalendar ───────────────────────────────────────────────────────── */

.rm-heat-calendar {
  position: relative;
  display: block;
  overflow-x: auto;
}

/*
 * Height first, width from the grid. A year of squares is fifty-three columns
 * wide whatever the container is, so the cells keep their size and the strip
 * scrolls, rather than the squares swelling to fill a wide page.
 */
.rm-heat-calendar-svg {
  display: block;
  width: auto;
  height: clamp(78px, 13vw, 116px);
  color: inherit;
}

/*
 * The cells grow from where they are. Without `fill-box` the scale would be
 * measured from the corner of the whole grid, and a year of squares would
 * arrive from off screen.
 */
.rm-heat-calendar-cell {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── bulletChart ────────────────────────────────────────────────────────── */

.rm-bullet {
  position: relative;
  display: block;
  color: inherit;
}

.rm-bullet-band {
  color: var(--rm-muted, #6c695f);
}

/* ── funnel ─────────────────────────────────────────────────────────────── */

.rm-funnel-svg {
  width: min(100%, 380px);
  margin-inline: auto;
}

.rm-funnel {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 0.85rem/1.5 var(--rm-body, system-ui, sans-serif);
}

.rm-funnel > li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 2px;
}

.rm-funnel-drop {
  font: 500 0.78rem/1.5 var(--rm-mono, ui-monospace, monospace);
  color: var(--rm-terracotta, #d28c65);
}

/* ── treemap ────────────────────────────────────────────────────────────── */

.rm-treemap {
  position: relative;
  display: block;
}

.rm-treemap-swatch,
.rm-pie-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  vertical-align: baseline;
}

/* ── progressRings ──────────────────────────────────────────────────────── */

.rm-activity-rings {
  display: block;
}

.rm-activity-rings-svg {
  display: block;
  width: var(--rm-activity-rings-size, 120px);
  height: auto;
  margin-inline: auto;
}

.rm-activity-rings-row::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: var(--rm-radius-pill, 999px);
  background: var(--rm-activity-rings-ink, var(--rm-accent, #2aa7e4));
}

/* ── comparisonBars ─────────────────────────────────────────────────────── */

/*
 * The list is the caption, not a column inside the drawing. The gutter the maths
 * reserves is a separator holding the two series apart so a long left-hand bar
 * cannot touch a long right-hand one; the row names sit under the surface, in
 * real text that can be selected, searched and translated, which SVG text laid
 * down the middle of the chart could not be.
 */
.rm-compare-bars {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 0.78rem/1.5 var(--rm-body, system-ui, sans-serif);
  color: var(--rm-muted, #6c695f);
  text-align: center;
}

/* ── sparkBars ──────────────────────────────────────────────────────────── */

.rm-spark-bars {
  display: inline-block;
  vertical-align: middle;
  color: inherit;
}

/* Sized by its line, not by its column: it belongs in a sentence. */
.rm-spark-bars-svg {
  width: auto;
  height: 1.2em;
}

/*
 * The trough, held back rather than picked out. The peak keeps the colour the
 * component was configured with, so it is left to the `stroke` the script writes
 * on the element; the low bar has no such option, so it is stated here. A rule
 * beats a presentation attribute whatever its specificity, which is why this one
 * line is enough to override the inline `stroke` on the bar it matches — and why
 * there deliberately is no `.is-high` rule, since one would quietly outrank the
 * `peak` option and make it do nothing.
 */
.rm-spark-bars-bar.is-low {
  stroke: var(--rm-muted, #6c695f);
}

/* ── deltaBadge ─────────────────────────────────────────────────────────── */

.rm-delta-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--rm-radius-pill, 999px);
  font: 600 0.78rem/1.5 var(--rm-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.rm-delta-badge.is-up {
  color: var(--rm-accent, #2aa7e4);
}

.rm-delta-badge.is-down {
  color: var(--rm-terracotta, #d28c65);
}

.rm-delta-badge.is-flat {
  color: var(--rm-muted, #6c695f);
}

.rm-delta-badge-arrow {
  font-size: 0.7em;
}

/* ── bigNumber ──────────────────────────────────────────────────────────── */

.rm-big-number {
  position: relative;
  display: inline-block;
  font-family: var(--rm-display, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── rangeBar ───────────────────────────────────────────────────────────── */

.rm-range-bar {
  position: relative;
  display: block;
  color: inherit;
}

/* ── pieSlices ──────────────────────────────────────────────────────────── */

.rm-pie {
  display: block;
}

.rm-pie-svg {
  display: block;
  width: var(--rm-pie-size, 100px);
  height: auto;
  margin-inline: auto;
}

.rm-pie-share {
  font: 500 0.78rem/1.4 var(--rm-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* ── scatterPlot ────────────────────────────────────────────────────────── */

.rm-scatter {
  position: relative;
  display: block;
}

.rm-scatter-dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── timelineChart ──────────────────────────────────────────────────────── */

.rm-timeline-chart {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 0.8rem/1.5 var(--rm-body, system-ui, sans-serif);
}

.rm-timeline-chart-row::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--rm-timeline-chart-ink, var(--rm-accent, #2aa7e4));
}

/* ── meterRow ───────────────────────────────────────────────────────────── */

.rm-meters {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 0.82rem/1.5 var(--rm-body, system-ui, sans-serif);
}

.rm-meters-row {
  padding-block: 6px;
  color: inherit;
}

.rm-meters-svg {
  margin-top: 5px;
}

/* ── numberTicker ───────────────────────────────────────────────────────── */

.rm-number-ticker {
  position: relative;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}

.rm-number-ticker-face {
  display: inline-flex;
  align-items: flex-start;
}

/*
 * One digit's worth of window over a strip of ten. The column is exactly one
 * character wide so the figure keeps its width whatever is showing, and the
 * strip moves by transform alone — no digit is ever measured or reflowed.
 */
.rm-number-ticker-column {
  display: inline-block;
  width: 1ch;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.rm-number-ticker-strip {
  display: flex;
  flex-direction: column;
  transition: none;
}

.rm-number-ticker-strip > span {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.rm-number-ticker-fixed {
  display: inline-block;
  line-height: 1;
}


/* ══ Creative forms, the second set ══════════════════════════════════════════════ */

/* ==========================================================================
   Creative forms, the second set.

   Three techniques recur here and are worth stating once rather than eleven
   times.

   1. The real control is never hidden — it is made transparent and left
      exactly where it was, on top of the drawing, at full size. `opacity: 0`
      with the box intact keeps the hit area, the focus ring, the platform
      picker and the tab order; `display: none` or `visibility: hidden` throw
      all four away. Focus is therefore styled through `:focus-within` on the
      wrapper, so the outline appears around the thing you can see.

   2. Nothing fills by changing a width. Bars use `scale` on a full-size layer
      with `transform-origin: left`, so the radius is not squashed along with
      it; stars use `clip-path`; knobs use `translateX`. None of these touch
      layout, so a meter moving as you type cannot shuffle the form beneath it.

   3. Every start state that matters is set from JavaScript. Nothing in this
      file begins at `opacity: 0` and waits to be rescued, so the form is
      complete and usable in the moment before the script runs.

   Live regions are visually hidden with the width/height/clip-path recipe
   rather than `display: none`, which would stop them being announced at all.
   The colour field's description carries the same recipe for the same reason:
   it is read as part of the control, not printed a second time beside it.
   ========================================================================== */

.rm-colour-field-note,
.rm-error-summary-live,
.rm-strength-meter-live,
.rm-slider-pair-live,
.rm-rating-slider-live,
.rm-colour-field-live,
.rm-date-field-live,
.rm-signature-pad-live,
.rm-quantity-stepper-live,
.rm-consent-box-live,
.rm-form-progress-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   strengthMeter — segments that fill, and a word that says the same thing.
   -------------------------------------------------------------------------- */

.rm-strength-meter {
  position: relative;
  display: grid;
  gap: 6px;
  margin-block-start: 8px;
  font-family: var(--rm-body);
}
.rm-strength-meter-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.rm-strength-meter-cell {
  height: 5px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 12%, transparent);
  overflow: hidden;
}
/* The fill is a full-size layer scaled from the left, so the pill ends stay
   round instead of being flattened as they would be by a width transition. */
.rm-strength-meter-cell b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rm-muted);
  transform-origin: left center;
  scale: 0 1;
  transition: scale var(--rm-strength-meter-duration, 380ms) var(--rm-ease-out),
    background-color var(--rm-strength-meter-duration, 380ms) linear;
}
.rm-strength-meter-cell.is-on b { scale: 1 1; }

.rm-strength-meter.is-level-1 .rm-strength-meter-cell b { background: var(--rm-terracotta); }
.rm-strength-meter.is-level-2 .rm-strength-meter-cell b { background: var(--rm-yellow); }
.rm-strength-meter.is-level-3 .rm-strength-meter-cell b { background: color-mix(in srgb, var(--rm-accent) 70%, var(--rm-yellow)); }
.rm-strength-meter.is-level-4 .rm-strength-meter-cell b,
.rm-strength-meter.is-level-5 .rm-strength-meter-cell b,
.rm-strength-meter.is-level-6 .rm-strength-meter-cell b { background: var(--rm-accent); }

.rm-strength-meter-word {
  margin: 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--rm-muted);
}
.rm-strength-meter.is-level-1 .rm-strength-meter-word { color: var(--rm-terracotta); }

/* --------------------------------------------------------------------------
   sliderPair — two real ranges over one track.

   The inputs must not swallow each other's clicks, so the input itself is
   `pointer-events: none` and only the thumb takes the pointer back. Without
   this the upper input covers the whole track and the lower handle can never
   be grabbed.
   -------------------------------------------------------------------------- */

.rm-slider-pair {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 34px;
  font-family: var(--rm-body);
}
.rm-slider-pair-track {
  position: absolute;
  inset-inline: 0;
  height: 5px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 12%, transparent);
  overflow: hidden;
}
.rm-slider-pair-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--rm-accent);
  transform-origin: left center;
  transform: translateX(var(--rm-slider-pair-from, 0%)) scaleX(var(--rm-slider-pair-span, 0));
}

/* Both inputs occupy the same grid cell, so they share one track. */
.rm-slider-pair-input {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
  z-index: 2;
}
.rm-slider-pair-input.is-on-top { z-index: 3; }
.rm-slider-pair-input:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 6px; border-radius: var(--rm-radius); }
.rm-slider-pair-input::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.rm-slider-pair-input::-moz-range-track { height: 5px; background: transparent; }
.rm-slider-pair-input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  margin-block-start: -9px;
  border-radius: 50%;
  border: 2px solid var(--rm-cream);
  background: var(--rm-ink);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.28);
  cursor: grab;
}
.rm-slider-pair-input::-moz-range-thumb {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--rm-cream);
  background: var(--rm-ink);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.28);
  cursor: grab;
}
.rm-slider-pair-input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }

/* --------------------------------------------------------------------------
   ratingSlider — stars over a range.

   The lit row is revealed with `clip-path`, which costs no layout at all, and
   the ghost row previews a hovered value behind it.
   -------------------------------------------------------------------------- */

.rm-rating-slider {
  position: relative;
  display: inline-grid;
  align-items: center;
  line-height: 0;
}
.rm-rating-slider-bank {
  grid-area: 1 / 1;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.rm-rating-slider-bank svg { width: 30px; height: 30px; display: block; }
.rm-rating-slider-bank.is-dim { color: color-mix(in srgb, var(--rm-ink) 16%, transparent); }
.rm-rating-slider-bank.is-lit {
  color: var(--rm-yellow);
  clip-path: inset(0 calc(100% - var(--rm-rating-slider-at, 0%)) 0 0);
  transition: clip-path 200ms var(--rm-ease-out);
}
/* The preview is its own layer between the dim row and the lit one, drawn
   faintly, so the committed value stays distinguishable from the one being
   considered and the unrated stars never disappear under the clip. */
.rm-rating-slider-bank.is-ghost {
  color: color-mix(in srgb, var(--rm-yellow) 38%, transparent);
  clip-path: inset(0 calc(100% - var(--rm-rating-slider-ghost, 0%)) 0 0);
}
.rm-rating-slider-input {
  grid-area: 1 / 1;
  width: 100%;
  height: 34px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.rm-rating-slider:focus-within {
  border-radius: var(--rm-radius);
  outline: 2px solid var(--rm-accent);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   colourField — a drawn swatch under a real colour input.

   The input keeps its full box and simply goes transparent, so tabbing to it
   and pressing Enter still opens the operating system's picker.
   -------------------------------------------------------------------------- */

.rm-colour-field {
  position: relative;
  display: inline-grid;
  align-items: center;
  gap: 10px;
  grid-auto-flow: column;
  font-family: var(--rm-body);
}
.rm-colour-field-swatch {
  grid-area: 1 / 2;
  display: grid;
  place-items: center;
  min-width: 128px;
  height: 44px;
  padding-inline: 14px;
  border-radius: var(--rm-radius);
  border: 1px solid color-mix(in srgb, var(--rm-ink) 18%, transparent);
  background: var(--rm-colour-field-fill, var(--rm-accent));
}
.rm-colour-field-value {
  font-family: var(--rm-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--rm-cream);
}
.rm-colour-field-swatch.is-light .rm-colour-field-value { color: var(--rm-ink); }
.rm-colour-field-input {
  grid-area: 1 / 2;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  cursor: pointer;
}
.rm-colour-field:focus-within .rm-colour-field-swatch {
  outline: 2px solid var(--rm-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   dateField — a drawn card beside a real date input.
   -------------------------------------------------------------------------- */

.rm-date-field {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 12px;
  font-family: var(--rm-body);
}
.rm-date-field-face {
  display: grid;
  grid-template-rows: 16px 1fr;
  width: 46px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 18%, transparent);
  background: var(--rm-cream);
  transform-origin: top center;
  /* Perspective on the card itself, so the top sheet turning over reads as a
     page and not as a squash. */
  perspective: 320px;
}
.rm-date-field-face b {
  display: grid;
  place-items: center;
  background: var(--rm-terracotta);
  color: var(--rm-cream);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rm-date-field-face strong {
  display: grid;
  place-items: center;
  font-family: var(--rm-display);
  font-size: 1.25rem;
  color: var(--rm-ink);
}
.rm-date-field-face:not(.is-set) { opacity: 0.55; }
.rm-date-field-input {
  font: inherit;
  padding: 10px 12px;
  border-radius: var(--rm-radius);
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  background: var(--rm-cream);
  color: var(--rm-ink);
}

/* --------------------------------------------------------------------------
   signaturePad — a canvas and its keyboard equal.
   -------------------------------------------------------------------------- */

.rm-signature-pad {
  position: relative;
  display: grid;
  gap: 10px;
  font-family: var(--rm-body);
}
.rm-signature-pad-canvas {
  /* Sized by aspect ratio rather than a fixed height, so the box the pointer
     draws in and the bitmap behind it always agree after a resize. */
  width: 100%;
  aspect-ratio: 5 / 2;
  border-radius: var(--rm-radius);
  border: 1px dashed color-mix(in srgb, var(--rm-ink) 30%, transparent);
  background: var(--rm-cream);
  touch-action: none;
  cursor: crosshair;
}
.rm-signature-pad-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--rm-muted);
}
.rm-signature-pad-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.rm-signature-pad-typed-label { font-size: 0.8125rem; color: var(--rm-muted); }
.rm-signature-pad-typed {
  font: inherit;
  padding: 9px 12px;
  border-radius: var(--rm-radius);
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  background: var(--rm-cream);
  color: var(--rm-ink);
}
.rm-signature-pad-clear {
  font: inherit;
  font-size: 0.8125rem;
  padding: 9px 16px;
  border-radius: var(--rm-radius-pill);
  border: 1px solid color-mix(in srgb, var(--rm-ink) 22%, transparent);
  background: transparent;
  color: var(--rm-ink);
  cursor: pointer;
}
/* Clear is the destructive control here and the only way to undo a signature,
   so it gets the same treatment on focus as on hover. The UA ring alone on a
   dashed cream panel is the faintest indicator on the page. */
.rm-signature-pad-clear:hover,
.rm-signature-pad-clear:focus-visible { background: color-mix(in srgb, var(--rm-ink) 6%, transparent); }
.rm-signature-pad-clear:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   switchRow — a real checkbox wearing a track.
   -------------------------------------------------------------------------- */

.rm-switch-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  font-family: var(--rm-body);
  color: var(--rm-ink);
  cursor: pointer;
}
.rm-switch-row-input {
  grid-area: 1 / 1;
  width: 46px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.rm-switch-row-track {
  grid-area: 1 / 1;
  width: 46px;
  height: 26px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 20%, transparent);
  transition: background-color var(--rm-switch-row-duration, 260ms) var(--rm-ease-in-out);
}
.rm-switch-row-track i {
  display: block;
  width: 20px;
  height: 20px;
  margin: 3px;
  border-radius: 50%;
  background: var(--rm-cream);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  /* The knob travels, it does not grow: no reflow in the row as it moves. */
  transform: translateX(0);
  transition: transform var(--rm-switch-row-duration, 260ms) var(--rm-ease-out);
}
.rm-switch-row.is-on .rm-switch-row-track { background: var(--rm-accent); }
.rm-switch-row.is-on .rm-switch-row-track i { transform: translateX(20px); }
.rm-switch-row:focus-within .rm-switch-row-track {
  outline: 2px solid var(--rm-accent);
  outline-offset: 3px;
}
.rm-switch-row-word {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rm-muted);
}
.rm-switch-row.is-on .rm-switch-row-word { color: var(--rm-accent); }

/* --------------------------------------------------------------------------
   quantityStepper — buttons around a real number input.
   -------------------------------------------------------------------------- */

.rm-quantity-stepper {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: stretch;
  border-radius: var(--rm-radius-pill);
  border: 1px solid color-mix(in srgb, var(--rm-ink) 20%, transparent);
  overflow: hidden;
  font-family: var(--rm-body);
}
.rm-quantity-stepper-button {
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--rm-ink);
  cursor: pointer;
}
.rm-quantity-stepper-button:hover:not(:disabled) { background: color-mix(in srgb, var(--rm-ink) 8%, transparent); }
.rm-quantity-stepper-button:disabled { opacity: 0.32; cursor: not-allowed; }
.rm-quantity-stepper-button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -3px; }
.rm-quantity-stepper-input {
  font: inherit;
  width: 4ch;
  padding: 10px 0;
  border: 0;
  border-inline: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
  background: transparent;
  color: var(--rm-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* The native spinners duplicate the buttons either side and squeeze the
     digits; the arrow keys still step the field with them gone. */
  appearance: textfield;
}
.rm-quantity-stepper-input::-webkit-inner-spin-button,
.rm-quantity-stepper-input::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   consentBox — terms you can actually read, and a gate that opens two ways.
   -------------------------------------------------------------------------- */

.rm-consent-box {
  position: relative;
  display: grid;
  gap: 12px;
  font-family: var(--rm-body);
}
.rm-consent-box-terms {
  max-height: 220px;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: var(--rm-radius);
  border: 1px solid color-mix(in srgb, var(--rm-ink) 18%, transparent);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font-size: 0.875rem;
  line-height: 1.6;
}
.rm-consent-box-terms:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
/* "There is more below" is drawn as a mask on the same box rather than by
   changing its size, so opening the gate never nudges the page. */
.rm-consent-box-terms.is-more {
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.rm-consent-box-end {
  margin: 16px 0 0;
  padding-block-start: 10px;
  border-block-start: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rm-muted);
}
.rm-consent-box-end:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-consent-box-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--rm-muted);
}
.rm-consent-box.is-open .rm-consent-box-note { color: var(--rm-accent); }

/* --------------------------------------------------------------------------
   formProgress — a rail of markers over real fieldsets.

   The floor variable is a measurement taken once at mount, not an animation:
   every step reserves the height of the tallest, so moving between them never
   shifts what is underneath the form.
   -------------------------------------------------------------------------- */

.rm-form-progress { position: relative; font-family: var(--rm-body); }
.rm-form-progress-step { min-height: var(--rm-form-progress-floor, auto); }
.rm-form-progress-rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin-block-end: 24px;
}
.rm-form-progress-line {
  position: absolute;
  inset-inline: 8%;
  inset-block-start: 15px;
  height: 2px;
  background: color-mix(in srgb, var(--rm-ink) 14%, transparent);
}
.rm-form-progress-line::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--rm-accent);
  transform-origin: left center;
  scale: var(--rm-form-progress-at, 0) 1;
  transition: scale 420ms var(--rm-ease-out);
}
.rm-form-progress-mark {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--rm-muted);
  cursor: pointer;
  z-index: 1;
}
.rm-form-progress-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--rm-ink) 18%, transparent);
  background: var(--rm-cream);
  font-variant-numeric: tabular-nums;
  transition: transform 300ms var(--rm-ease-out), background-color 300ms linear, border-color 300ms linear;
}
.rm-form-progress-name { font-size: 0.75rem; letter-spacing: 0.02em; }
.rm-form-progress-mark.is-done .rm-form-progress-num { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-cream); }
.rm-form-progress-mark.is-now { color: var(--rm-ink); }
.rm-form-progress-mark.is-now .rm-form-progress-num { border-color: var(--rm-accent); transform: scale(1.12); }
.rm-form-progress-mark.is-ahead { cursor: default; opacity: 0.55; }
.rm-form-progress-mark:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; border-radius: var(--rm-radius); }
.rm-form-progress-bar { position: absolute; inset: 0; pointer-events: none; }
.rm-form-progress legend:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   errorSummary — the list that takes you to the problem.
   -------------------------------------------------------------------------- */

.rm-error-summary {
  padding: 18px 20px;
  border-radius: var(--rm-radius);
  border: 2px solid var(--rm-terracotta);
  background: color-mix(in srgb, var(--rm-terracotta) 8%, var(--rm-cream));
  color: var(--rm-ink);
  font-family: var(--rm-body);
}
/* It receives focus, so it needs a visible ring — the outline is the only
   thing telling a sighted keyboard user where they have just been sent. */
.rm-error-summary:focus-visible { outline: 3px solid var(--rm-terracotta); outline-offset: 3px; }
.rm-error-summary-title {
  margin: 0 0 10px;
  font-family: var(--rm-display);
  font-size: 1.125rem;
}
.rm-error-summary-list {
  margin: 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 6px;
  font-size: 0.9375rem;
}
.rm-error-summary-list a {
  color: var(--rm-terracotta);
  text-underline-offset: 3px;
}
.rm-error-summary-list a:hover,
.rm-error-summary-list a:focus-visible { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rm-strength-meter-cell b,
  .rm-rating-slider-bank.is-lit,
  .rm-switch-row-track,
  .rm-switch-row-track i,
  .rm-form-progress-line::after,
  .rm-form-progress-num {
    transition-duration: 1ms;
  }
}


/* ══ Profile and identity ══════════════════════════════════════════════ */

/*
 * Profile and identity — stylesheet.
 *
 * Three techniques in here are worth explaining, because they are the reason
 * nothing in this module reflows the page.
 *
 * The follow button stacks its three labels in one grid cell. Every state is
 * laid out at once, so the button is as wide as its widest word from the
 * moment it mounts and swapping between "Follow", "Following" and "Unfollow"
 * changes nothing but opacity. A button that sets `textContent` instead
 * resizes, and a row of profile cards visibly reshuffles every time anybody
 * follows anyone.
 *
 * The tab underline has a fixed base width and is moved with
 * `translateX` and `scaleX`. Animating `left` and `width` would be layout on
 * every frame of what is only a decoration; a 2px radius scaled horizontally
 * is not something an eye can catch.
 *
 * The bio uses `grid-template-rows: 0fr → 1fr`, which is the only honest way
 * to transition to a height nobody can know in advance. It is deliberately the
 * one place in this file where a box changes size, because a disclosure is
 * supposed to move the page beneath it.
 *
 * Nothing here hides content. Every collapsed state is set from JavaScript, so
 * with the script removed a profile is a name, a picture, a bio and some
 * links.
 *
 * Crafted by SoyRage Agency — https://soyrage.es/
 * MIT licensed (see LICENSE).
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

/* Real text with no visual weight. Not `display: none`, which is silence. */
.rm-profile-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One person, one colour, decided by a hash of the name in JavaScript. */
.is-tone-0 { --rm-profile-tone: var(--rm-accent); }
.is-tone-1 { --rm-profile-tone: var(--rm-terracotta); }
.is-tone-2 { --rm-profile-tone: var(--rm-yellow); }
.is-tone-3 { --rm-profile-tone: var(--rm-muted); }

/* ── Avatar ─────────────────────────────────────────────────────────────── */

.rm-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--rm-avatar-size, 48px);
  block-size: var(--rm-avatar-size, 48px);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-profile-tone, var(--rm-accent));
  color: var(--rm-cream);
  overflow: hidden;
  flex: none;
}
.rm-avatar.is-tone-2 { color: var(--rm-ink); }

.rm-avatar-initials {
  font-family: var(--rm-display);
  font-size: calc(var(--rm-avatar-size, 48px) * 0.38);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

/* The picture lies over the initials rather than replacing them, so a slow or
 * broken image leaves a legible circle instead of a hole. */
.rm-avatar-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── Avatar upload ──────────────────────────────────────────────────────── */

.rm-avatar-upload {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 2px dashed color-mix(in srgb, var(--rm-muted) 45%, transparent);
  border-radius: var(--rm-radius);
  background: color-mix(in srgb, var(--rm-cream) 70%, transparent);
  transition: border-color 200ms var(--rm-ease-out), transform 200ms var(--rm-ease-out);
}
.rm-avatar-upload.is-over {
  border-color: var(--rm-accent);
  transform: scale(1.01);
}
.rm-avatar-upload.is-refused { animation: rm-avatar-upload-refuse 420ms var(--rm-ease-in-out); }

@keyframes rm-avatar-upload-refuse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.rm-avatar-upload-frame {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--rm-avatar-upload-size, 96px);
  block-size: var(--rm-avatar-upload-size, 96px);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-muted);
  color: var(--rm-cream);
  overflow: hidden;
}
.rm-avatar-upload-initials {
  font-family: var(--rm-display);
  font-size: calc(var(--rm-avatar-upload-size, 96px) * 0.32);
  font-weight: 600;
}
.rm-avatar-upload-preview {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Present and functional, out of the tab order: the button is the control. */
.rm-avatar-upload-field {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.rm-avatar-upload-button {
  font: inherit;
  font-family: var(--rm-body);
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  cursor: pointer;
  transition: transform 180ms var(--rm-ease-out);
}
.rm-avatar-upload-button:hover,
.rm-avatar-upload-button:focus-visible { transform: translateY(-2px); }

.rm-avatar-upload-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--rm-muted);
}

/* ── Profile card ───────────────────────────────────────────────────────── */

.rm-profile-card {
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  color: var(--rm-ink);
  /* The FLIP scales the card and counter-scales the inner element, so both
   * need a stable origin and their own layer. */
  transform-origin: top left;
  will-change: transform;
  overflow: hidden;
}
.rm-profile-card-inner {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem;
  transform-origin: top left;
}
.rm-profile-card-detail {
  margin: 0;
  color: var(--rm-muted);
  line-height: 1.55;
}
.rm-profile-card-toggle {
  justify-self: start;
  font: inherit;
  font-family: var(--rm-body);
  padding: 0.4rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 20%, transparent);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  cursor: pointer;
  transition: background-color 180ms var(--rm-ease-out);
}
.rm-profile-card-toggle:hover,
.rm-profile-card-toggle:focus-visible {
  background: color-mix(in srgb, var(--rm-ink) 8%, transparent);
}

/* ── Profile header ─────────────────────────────────────────────────────── */

.rm-profile-header {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: end;
  gap: 0.5rem;
  min-block-size: 220px;
  padding: 1.5rem;
  border-radius: var(--rm-radius);
  overflow: hidden;
  isolation: isolate;
}
.rm-profile-header-cover {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  will-change: transform;
}
/* A cover is a photograph and a name has to sit on it legibly. */
.rm-profile-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--rm-ink) 78%, transparent), transparent 62%);
  pointer-events: none;
}
.rm-profile-header > .rm-avatar {
  box-shadow: 0 0 0 3px var(--rm-cream);
  will-change: transform;
}

/* ── User menu ──────────────────────────────────────────────────────────── */

.rm-user-menu { position: relative; display: inline-block; }

.rm-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: transparent;
  cursor: pointer;
  transition: transform 180ms var(--rm-ease-out);
}
.rm-user-menu-trigger:hover,
.rm-user-menu-trigger:focus-visible { transform: scale(1.04); }

.rm-user-menu-list {
  position: absolute;
  z-index: 20;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.5rem);
  min-inline-size: 200px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-cream);
  color: var(--rm-ink);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--rm-ink) 70%, transparent);
  /* It grows from the avatar it belongs to, not from its own middle. */
  transform-origin: top right;
}
.rm-user-menu-list [role="menuitem"] {
  display: block;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--rm-body);
  text-align: start;
  text-decoration: none;
  inline-size: 100%;
  cursor: pointer;
}
.rm-user-menu-list [role="menuitem"]:hover,
.rm-user-menu-list [role="menuitem"]:focus-visible {
  background: color-mix(in srgb, var(--rm-accent) 16%, transparent);
  outline-offset: -2px;
}

/* ── Account switcher ───────────────────────────────────────────────────── */

.rm-account-switcher { position: relative; display: inline-block; }

.rm-account-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 16%, transparent);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  font-family: var(--rm-body);
  cursor: pointer;
}

/* The one part of the trigger the component rewrites when you switch account.
 * Write it yourself to keep a name beside an avatar; leave it out and whatever
 * the button already says is wrapped in one on mount. */
.rm-account-switcher-face { display: inline-block; }

.rm-account-switcher-list {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  min-inline-size: 240px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-cream);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--rm-ink) 70%, transparent);
}

.rm-account-switcher-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--rm-radius-sm);
  cursor: pointer;
}
.rm-account-switcher-row:focus-visible { outline-offset: -2px; }

/* One mark for the whole list, translated from row to row. Two fading ticks
 * would lose the only thing the movement is there to say. */
.rm-account-switcher-mark {
  position: absolute;
  z-index: 0;
  inset-inline: 0.35rem;
  inset-block-start: 0;
  block-size: var(--rm-account-mark-height, 44px);
  border-radius: var(--rm-radius-sm);
  background: color-mix(in srgb, var(--rm-accent) 18%, transparent);
  pointer-events: none;
}

/* ── Presence ring ──────────────────────────────────────────────────────── */

.rm-presence-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  --rm-presence-colour: var(--rm-muted);
}
.rm-presence-ring.is-online { --rm-presence-colour: #3fae6f; }
.rm-presence-ring.is-away { --rm-presence-colour: var(--rm-yellow); }
.rm-presence-ring.is-busy { --rm-presence-colour: var(--rm-terracotta); }
.rm-presence-ring.is-offline { --rm-presence-colour: var(--rm-muted); }

.rm-presence-ring-ring,
.rm-presence-ring-pulse {
  position: absolute;
  inset: -4px;
  border-radius: var(--rm-radius-pill);
  border: 2px solid var(--rm-presence-colour);
  pointer-events: none;
}
/* The pulse is a second ring so the face underneath never moves. */
.rm-presence-ring-pulse { opacity: 0; }
.rm-presence-ring.is-pulsing .rm-presence-ring-pulse {
  animation: rm-presence-ring-pulse 2.4s var(--rm-ease-out) infinite;
}

@keyframes rm-presence-ring-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* The word is always in the markup; this only decides whether it is drawn. */
.rm-presence-ring-word.is-shown {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  clip-path: none;
  font-size: 0.8rem;
  color: var(--rm-presence-colour);
}

/* ── Follow button ──────────────────────────────────────────────────────── */

.rm-follow-button {
  position: relative;
  font: inherit;
  font-family: var(--rm-body);
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--rm-ink);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  cursor: pointer;
  transition: background-color 200ms var(--rm-ease-out), color 200ms var(--rm-ease-out);
}
.rm-follow-button.is-following {
  background: transparent;
  color: var(--rm-ink);
}
.rm-follow-button.is-following:hover,
.rm-follow-button.is-following:focus-visible {
  border-color: var(--rm-terracotta);
  color: var(--rm-terracotta);
}

/* Every label in one cell: the widest sets the width and nothing reflows. */
.rm-follow-button-stack { display: inline-grid; }
.rm-follow-button-face {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 160ms var(--rm-ease-out);
}
.rm-follow-button .rm-follow-button-face.is-follow { opacity: 1; }
.rm-follow-button.is-following .rm-follow-button-face.is-follow { opacity: 0; }
.rm-follow-button.is-following .rm-follow-button-face.is-following { opacity: 1; }
.rm-follow-button.is-following:hover .rm-follow-button-face.is-following,
.rm-follow-button.is-following:focus-visible .rm-follow-button-face.is-following { opacity: 0; }
.rm-follow-button.is-following:hover .rm-follow-button-face.is-unfollow,
.rm-follow-button.is-following:focus-visible .rm-follow-button-face.is-unfollow { opacity: 1; }

/* ── Bio reveal ─────────────────────────────────────────────────────────── */

.rm-bio-reveal { display: grid; gap: 0.75rem; justify-items: start; }

/* The `fr` track is what allows a transition to a height nobody knows yet. */
.rm-bio-reveal-window {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-bio-duration, 420ms) var(--rm-ease-out);
}
.rm-bio-reveal.is-open .rm-bio-reveal-window { grid-template-rows: 1fr; }
.rm-bio-reveal-body {
  overflow: hidden;
  line-height: 1.6;
  color: var(--rm-muted);
}
.rm-bio-reveal-toggle {
  font: inherit;
  font-family: var(--rm-body);
  padding: 0;
  border: 0;
  background: none;
  color: var(--rm-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Social row ─────────────────────────────────────────────────────────── */

.rm-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-social-row-link {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 8%, transparent);
  color: var(--rm-ink);
  text-decoration: none;
  /* The same feedback on focus as on hover, or keyboard users get none. */
  transition: transform 200ms var(--rm-ease-out), background-color 200ms var(--rm-ease-out);
}
.rm-social-row-link:hover,
.rm-social-row-link:focus-visible {
  transform: translateY(-3px);
  background: var(--rm-accent);
  color: var(--rm-cream);
}
.rm-social-row-mark {
  font-family: var(--rm-display);
  font-size: 1rem;
  font-weight: 600;
}

/* ── Stats row ──────────────────────────────────────────────────────────── */

.rm-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
}
.rm-stats-row > * { display: grid; gap: 0.15rem; }
.rm-stats-row-value {
  margin: 0;
  font-family: var(--rm-display);
  font-size: 1.6rem;
  font-weight: 600;
  /* Tabular figures: a counting number must not change width as it counts. */
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rm-stats-row dt,
.rm-stats-row-value + * {
  font-size: 0.85rem;
  color: var(--rm-muted);
}

/* ── Badge row ──────────────────────────────────────────────────────────── */

.rm-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-badge-row-badge { position: relative; }
.rm-badge-row-mark {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-yellow) 40%, var(--rm-cream));
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 220ms var(--rm-ease-out);
}
.rm-badge-row-mark:hover,
.rm-badge-row-mark:focus-visible { transform: translateY(-4px) rotate(-4deg); }

/* Grey and colour read the same to a lot of people, so the name says "locked"
 * as well. The filter is the decoration, not the message. */
.rm-badge-row-badge.is-locked .rm-badge-row-mark {
  filter: grayscale(1);
  opacity: 0.55;
}

/* Absolutely positioned, so revealing it never moves the row of badges. */
.rm-badge-row-caption {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: calc(100% + 0.35rem);
  z-index: 5;
  padding: 0.25rem 0.5rem;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 180ms var(--rm-ease-out), transform 180ms var(--rm-ease-out);
  pointer-events: none;
}
.rm-badge-row-mark:hover + .rm-badge-row-caption,
.rm-badge-row-mark:focus-visible + .rm-badge-row-caption {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Profile tabs ───────────────────────────────────────────────────────── */

.rm-profile-tabs { display: grid; gap: 1.25rem; }
.rm-profile-tabs-list {
  position: relative;
  display: flex;
  gap: 0.35rem;
  border-block-end: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
}
.rm-profile-tabs-tab {
  font: inherit;
  font-family: var(--rm-body);
  padding: 0.6rem 0.9rem;
  border: 0;
  background: none;
  color: var(--rm-muted);
  cursor: pointer;
  transition: color 180ms var(--rm-ease-out);
}
.rm-profile-tabs-tab[aria-selected="true"] { color: var(--rm-ink); }

/* Fixed base width, moved and scaled. Never `left` and `width`, which are
 * layout and would reflow the strip on every frame. */
.rm-profile-tabs-bar {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: var(--rm-profile-tabs-base, 100px);
  block-size: 2px;
  border-radius: 2px;
  background: var(--rm-accent);
  transform-origin: left center;
  pointer-events: none;
}
.rm-profile-tabs-panel:focus-visible { outline-offset: 4px; }

/* ── Cover parallax ─────────────────────────────────────────────────────── */

.rm-cover-parallax {
  position: relative;
  overflow: hidden;
  border-radius: var(--rm-radius);
}
.rm-cover-parallax-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* The overscale is written from JavaScript, sized to the exact distance the
   * image is about to travel, so no edge is ever exposed. */
  will-change: transform;
}

/* ── Identity chip ──────────────────────────────────────────────────────── */

/* The card hangs off this wrapper rather than off the chip. The chip is
 * usually a link, and anything inside a link becomes part of its accessible
 * name, so a card living in there would rename the link every time it opened.
 * The wrapper is the positioning context; the chip is left alone. */
.rm-identity-chip-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: baseline;
}

.rm-identity-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem 0.2rem 0.2rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 7%, transparent);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms var(--rm-ease-out);
}
.rm-identity-chip:hover,
.rm-identity-chip:focus-visible { background: color-mix(in srgb, var(--rm-accent) 18%, transparent); }

.rm-identity-chip-face {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-profile-tone, var(--rm-accent));
  color: var(--rm-cream);
  font-family: var(--rm-display);
  font-size: 0.7rem;
  font-weight: 600;
}
.rm-identity-chip-face.is-tone-2 { color: var(--rm-ink); }

/* Absolute, so the sentence or table row the chip sits in never reflows. */
.rm-identity-chip-card {
  position: absolute;
  z-index: 30;
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 0;
  display: grid;
  gap: 0.15rem;
  inline-size: max-content;
  max-inline-size: 260px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font-size: 0.85rem;
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--rm-ink) 80%, transparent);
}
.rm-identity-chip-handle { color: var(--rm-yellow); font-family: var(--rm-mono); font-size: 0.75rem; }
.rm-identity-chip-note { color: color-mix(in srgb, var(--rm-cream) 75%, transparent); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/*
 * Everything above ends in its finished state, so the only thing to remove is
 * the travel. Nothing here hides anything: the pulse stops as a visible ring,
 * the bio still opens, the captions still appear.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-presence-ring.is-pulsing .rm-presence-ring-pulse { animation: none; }
  .rm-avatar-upload.is-refused { animation: none; }
  .rm-bio-reveal-window { transition-duration: 1ms; }
  .rm-social-row-link:hover,
  .rm-social-row-link:focus-visible,
  .rm-badge-row-mark:hover,
  .rm-badge-row-mark:focus-visible,
  .rm-user-menu-trigger:hover,
  .rm-user-menu-trigger:focus-visible,
  .rm-avatar-upload-button:hover,
  .rm-avatar-upload-button:focus-visible { transform: none; }
  .rm-badge-row-mark:hover + .rm-badge-row-caption,
  .rm-badge-row-mark:focus-visible + .rm-badge-row-caption { transform: translate(-50%, 0); }
}


/* ══ Scroll animation, the second set ══════════════════════════════════════════════ */

/*
 * scroll2 — scroll animation, the second set.
 *
 * Three techniques here are worth explaining, because they are the difference
 * between an effect that composites and one that relayouts the page.
 *
 * No content rests hidden here. There is no closed `clip-path` at rest and
 * nothing an author wrote starts transparent, because the script owns the
 * start state: if the JavaScript never runs, every section below is simply a
 * finished, readable page. There is exactly one `opacity: 0` in the file, on
 * `.rm-scroll-gradient-layer.is-b` — a decorative layer the script itself
 * inserts and then drives, so it cannot exist unless the script ran, and it
 * has never held any content. Step visibility inside a pinned panel is written
 * from JavaScript too; the stylesheet only supplies the transition it moves on.
 *
 * The pinning is `position: sticky` on an inner stage inside a tall section
 * whose height is `calc()`d from a step count. That keeps the browser in
 * charge of the scroll: no fixed positioning, no placeholder to maintain, no
 * resize handler, and the scrollbar keeps meaning what it says.
 *
 * The gradient section paints two oversized rotated layers rather than moving
 * a `background-position`. `inset: -60%` gives a square-ish layer enough
 * overhang that rotating it never exposes a corner, and rotation and opacity
 * are both compositor properties, so the section repaints nothing per frame.
 */

/* ── Counter ────────────────────────────────────────────────────────────── */

/*
 * Tabular figures are not decoration here. Proportional digits change width as
 * they cycle, so an un-fixed counter visibly jitters its own box (and anything
 * beside it) several hundred times on the way up.
 */
.rm-scroll-count {
  display: inline-block;
  font-family: var(--rm-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.rm-scroll-count-face { display: inline-block; }
/* The announced value: read, never seen — the digits above are aria-hidden. */
.rm-scroll-count-said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Single-property scrubs ─────────────────────────────────────────────── */

.rm-scroll-rotate,
.rm-scroll-scale,
.rm-scroll-type { will-change: transform; backface-visibility: hidden; }

.rm-scroll-blur { will-change: filter; }

/*
 * A block box, so the transform has an edge to work against: the script's
 * default origin is `left center`, and on an inline heading that would be the
 * left edge of the first line box rather than of the column. The origin is
 * repeated here so the resting appearance matches before the script runs.
 *
 * A caveat rather than a rule: the glyphs overflow the box while the headline
 * is still oversized, so the author's own container wants `overflow-x: clip`
 * if the page is full-bleed, or the overflow will raise a horizontal
 * scrollbar. It is not set here because clipping a heading's column is the
 * author's decision, not the component's.
 */
.rm-scroll-type {
  display: block;
  transform-origin: left center;
}

.rm-scroll-mask {
  will-change: clip-path;
  /* The clip is applied by script; at rest there is none at all. */
}
.rm-scroll-mask img,
.rm-scroll-mask video { display: block; width: 100%; height: auto; }

/* ── Colour section ─────────────────────────────────────────────────────── */

/*
 * One custom property in, a whole subtree out. The fallbacks are the tokens,
 * so a section that the script never reached still has a palette.
 */
.rm-scroll-colour {
  background: var(--rm-scroll-colour-ground, var(--rm-cream));
  color: var(--rm-scroll-colour-ink, var(--rm-ink));
  transition: none; /* the value is already per-frame; a transition would lag it */
}
.rm-scroll-colour a,
.rm-scroll-colour h1,
.rm-scroll-colour h2,
.rm-scroll-colour h3 { color: inherit; }
.rm-scroll-colour hr,
.rm-scroll-colour .rm-scroll-colour-rule {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}

/* ── Pinned steps ───────────────────────────────────────────────────────── */

/*
 * The section is as tall as the number of steps times the travel each one
 * gets, which is what buys the pin its dwell time. Change the count or the
 * travel and the section resizes itself; nothing in the script measures it.
 */
.rm-pin-steps {
  position: relative;
  min-height: calc(var(--rm-pin-steps-count, 3) * var(--rm-pin-steps-travel, 90vh));
}
.rm-pin-steps-stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* Every step occupies the same cell, so the stage's height is the tallest of
 * them and no step arriving can change the size of the panel. */
.rm-pin-steps-step {
  grid-area: 1 / 1;
  max-width: 62ch;
  transition:
    opacity 0.45s var(--rm-ease-out),
    transform 0.45s var(--rm-ease-out);
  will-change: opacity, transform;
}
.rm-pin-steps-said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* Reduced motion: no pin, no stack, no hidden steps. An ordinary column. */
.rm-pin-steps.is-flat { min-height: 0; }
.rm-pin-steps.is-flat .rm-pin-steps-step {
  grid-area: auto;
  transition: none;
  margin-block-end: 2rem;
}

/* ── Drawn line ─────────────────────────────────────────────────────────── */

.rm-scroll-draw { display: block; max-width: 100%; overflow: visible; }
.rm-scroll-draw path,
.rm-scroll-draw polyline,
.rm-scroll-draw line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Depth layers ───────────────────────────────────────────────────────── */

/*
 * The frame clips, and each layer is given room to move without exposing an
 * edge: 120% tall, pulled up by a tenth, so a layer drifting by up to half its
 * overhang still covers the frame at both ends of the pass.
 */
.rm-scroll-depth {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  isolation: isolate;
}
.rm-scroll-depth-layer {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

/* ── Snap sections ──────────────────────────────────────────────────────── */

.rm-snap-sections {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.rm-snap-sections.is-mandatory { scroll-snap-type: y mandatory; }
.rm-snap-sections.is-proximity { scroll-snap-type: y proximity; }
.rm-snap-sections.is-none { scroll-snap-type: none; }
.rm-snap-sections-panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100%;
  display: grid;
  place-items: center;
}
/*
 * The nav is the scroller's first child and is exactly zero pixels tall, so it
 * sticks from the very first frame without taking a single pixel of flow —
 * which is what would otherwise push panel one down and put every snap point
 * out by the height of the nav.
 */
.rm-snap-sections-nav {
  position: sticky;
  top: 50%;
  z-index: 2;
  height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-inline-end: 18px;
  transform: translateY(-50%);
}
/*
 * The dot is the button's own text, clipped to a pixel rather than replaced by
 * an aria-label — so it stays real, translatable text, and the reveal below
 * can bring it back without the script re-inventing a tooltip.
 */
.rm-snap-sections-dot {
  position: relative;
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  inline-size: 12px;
  block-size: 12px;
  padding: 0;
  border-radius: var(--rm-radius-pill);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.25s var(--rm-ease-out), transform 0.25s var(--rm-ease-out);
}
.rm-snap-sections-dot.is-current {
  opacity: 1;
  background: currentColor;
  transform: scale(1.35);
}
.rm-snap-sections-dot:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; }
.rm-snap-sections-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/*
 * The label, given back. Hover and keyboard focus get the same affordance,
 * because a sighted keyboard visitor otherwise lands on a twelve-pixel
 * unlabelled circle with nothing to say which section it goes to. The pill is
 * absolutely positioned out of the dot and the nav is zero pixels tall with
 * visible overflow, so a label appearing displaces nothing and cannot move a
 * snap point. It is `pointer-events: none` so it can never sit between the
 * pointer and the button that summoned it.
 */
.rm-snap-sections-dot:hover .rm-snap-sections-name,
.rm-snap-sections-dot:focus-visible .rm-snap-sections-name {
  inset-inline-end: calc(100% + 10px);
  inset-block-start: 50%;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  transform: translateY(-50%);
  padding: 0.25em 0.7em;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font-family: var(--rm-body);
  font-size: 0.78rem;
  line-height: 1.35;
  pointer-events: none;
}
/* The current dot is scaled up for emphasis and the label is a child of it, so
 * the label is scaled back out about its own right edge. Without this the pill
 * on the section you are in reads a third larger than every other one. */
.rm-snap-sections-dot.is-current:hover .rm-snap-sections-name,
.rm-snap-sections-dot.is-current:focus-visible .rm-snap-sections-name {
  transform: translateY(-50%) scale(0.741);
  transform-origin: 100% 50%;
}
.rm-snap-sections-said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── Marquee tied to the scroll ─────────────────────────────────────────── */

.rm-scroll-marquee {
  overflow: hidden;
  font-family: var(--rm-display);
}
.rm-scroll-marquee-belt {
  display: flex;
  width: max-content;
  will-change: transform;
}
.rm-scroll-marquee-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline-end: 1.5rem;
  flex: 0 0 auto;
}
/* The seam copy is decoration and unreachable; it must never be selectable
 * either, or a copy-paste picks the strip up twice. */
.rm-scroll-marquee-track.is-echo { user-select: none; }

/* ── Gradient section ───────────────────────────────────────────────────── */

.rm-scroll-gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rm-scroll-gradient-layer {
  position: absolute;
  inset: -60%;
  z-index: -1;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
  background: linear-gradient(
    180deg,
    var(--rm-scroll-gradient-tint, var(--rm-terracotta)) 0%,
    transparent 70%
  );
}
.rm-scroll-gradient-layer.is-b {
  opacity: 0;
  background: linear-gradient(
    180deg,
    var(--rm-scroll-gradient-tint, var(--rm-accent)) 0%,
    transparent 70%
  );
}

/* ── Split halves ───────────────────────────────────────────────────────── */

/*
 * `isolation: isolate` is load-bearing, not tidiness. The revealed layer below
 * sits at a negative z-index, and a negative-z-index child of a parent that is
 * merely `position: relative` paints in the *ancestor's* stacking context —
 * which is to say behind this section's own background. Put a background or a
 * background-image on the split section, as anyone building one to part and
 * reveal something will, and the thing the component exists to show is painted
 * underneath it and never seen. Isolating contains the layer.
 */
.rm-scroll-split {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.rm-scroll-split-half { will-change: transform; }
/* Anything after the two halves is what the parting reveals: it sits in the
 * same cells, behind them, and never moves. */
.rm-scroll-split > :nth-child(n + 3) {
  grid-area: 1 / 1 / 2 / 3;
  z-index: -1;
  display: grid;
  place-items: center;
}
.rm-scroll-split-half.is-first { grid-area: 1 / 1; }
.rm-scroll-split-half.is-second { grid-area: 1 / 2; }
/*
 * The vertical split is a different arrangement, not just a different
 * direction of travel: the halves have to be stacked before there is anything
 * for them to part vertically. The script adds `is-y` alongside the axis it
 * writes into the transform, so the two can never disagree.
 */
.rm-scroll-split.is-y {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.rm-scroll-split.is-y > :nth-child(n + 3) { grid-area: 1 / 1 / 3 / 2; }
.rm-scroll-split.is-y .rm-scroll-split-half.is-first { grid-area: 1 / 1; }
.rm-scroll-split.is-y .rm-scroll-split-half.is-second { grid-area: 2 / 1; }

/* ── Pinned zoom ────────────────────────────────────────────────────────── */

.rm-scroll-zoom {
  position: relative;
  min-height: var(--rm-scroll-zoom-travel, 160vh);
}
.rm-scroll-zoom-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: var(--rm-radius);
}
.rm-scroll-zoom-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform-origin: center;
}


/* ══ Ecommerce — product and catalogue ══════════════════════════════════════════════ */

/*
 * Ecommerce — product and catalogue.
 *
 * Three techniques here are worth explaining, because they look like mistakes
 * until you know what they are avoiding.
 *
 * 1. Nothing that moves has a width or a height in a transition. The stock
 *    meter, the review bars and the tab underline all move by `transform`, and
 *    the elements they live on are already at their final size before anything
 *    animates. A `width` transition on a bar re-lays-out its whole row sixty
 *    times a second for a decoration; a `scaleX` on the same bar is one
 *    composited layer the browser can hand to the GPU.
 *
 * 2. Radio and checkbox inputs are shrunk to a nearly transparent pixel, never
 *    `display: none` and never `visibility: hidden`. A hidden input is not
 *    focusable, so hiding one the lazy way removes the arrow keys, the focus
 *    ring and the form value — the three reasons for using a real input at
 *    all. Left in place at a pixel it keeps every one of them, and the visible
 *    chip picks the focus ring back up with `:has(input:focus-visible)`.
 *
 * 3. The panels that open — the filter disclosure, the quick view, the compare
 *    tray — are all on their own layer, out of the flow. That is what lets them
 *    animate without moving the catalogue behind them. It also means their
 *    closed state is the `hidden` attribute rather than a zero size, so before
 *    the script runs the page is complete and readable rather than collapsed.
 *
 * Crafted by SoyRage Agency — https://soyrage.es/
 * MIT licensed (see LICENSE).
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

/*
 * Read but not drawn. Not `display: none`, which removes it from the
 * accessibility tree along with everything else — this is the difference
 * between a strike-through that is announced and one that is only a picture.
 */
.rm-shop-said,
.rm-shop-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Any real input this kit hides keeps its focus, its keys and its value. */
.rm-swatches-chip input,
.rm-size-picker-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0.001; /* not 0: some engines skip focus on a fully transparent box */
  pointer-events: none;
}

/* ── Product card ───────────────────────────────────────────────────────── */

.rm-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font-family: var(--rm-body);
  transition:
    transform var(--rm-product-card-duration, 420ms) var(--rm-ease-out),
    box-shadow var(--rm-product-card-duration, 420ms) var(--rm-ease-out);
}
.rm-product-card.is-lifted {
  transform: translateY(var(--rm-product-card-lift, -6px));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--rm-ink) 60%, transparent);
}
.rm-product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--rm-radius) - 8px);
}

/*
 * One stretched link. The pseudo element is the hit area for the whole card,
 * and everything else in the card is lifted above it so its own clicks survive
 * — which is the part that a card wrapped in a single <a> cannot do at all.
 */
.rm-product-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.rm-product-card > :is(button, a:not(.rm-product-card-link), label, input, select),
.rm-product-card :is(button, label, input, select) {
  position: relative;
  z-index: 1;
}
.rm-product-card-link { text-decoration: none; color: inherit; }
.rm-product-card-link:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Product gallery ────────────────────────────────────────────────────── */

.rm-product-gallery { display: grid; gap: 0.7rem; font-family: var(--rm-body); }
.rm-product-gallery-main {
  display: block;
  width: 100%;
  border-radius: var(--rm-radius);
  background: color-mix(in srgb, var(--rm-ink) 6%, var(--rm-cream));
}
.rm-product-gallery-strip {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.rm-product-gallery-thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: calc(var(--rm-radius) / 2.4);
  background: none;
  cursor: pointer;
  transition: transform 240ms var(--rm-ease-out), border-color 240ms var(--rm-ease-out);
}
.rm-product-gallery-thumb img {
  display: block;
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: inherit;
}
.rm-product-gallery-thumb:hover,
.rm-product-gallery-thumb:focus-visible { transform: translateY(-3px); }
.rm-product-gallery-thumb.is-current { border-color: var(--rm-accent); }
.rm-product-gallery-thumb:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Product zoom ───────────────────────────────────────────────────────── */

/*
 * The frame is the lens. It clips, and the one real <img> inside it scales
 * around whichever point the pointer or the arrow keys have chosen — so there
 * is no second copy of the photograph to download, decode or announce.
 */
.rm-product-zoom {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  cursor: zoom-in;
}
.rm-product-zoom.is-zoomed { cursor: zoom-out; }
.rm-product-zoom-image {
  display: block;
  width: 100%;
  will-change: transform;
}
.rm-product-zoom-toggle {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 82%, transparent);
  color: var(--rm-cream);
  font: 500 0.78rem/1.4 var(--rm-body);
  cursor: pointer;
}
.rm-product-zoom-toggle[aria-pressed="true"] { background: var(--rm-accent); }
.rm-product-zoom:focus-visible,
.rm-product-zoom-toggle:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Colour swatches ────────────────────────────────────────────────────── */

.rm-swatches {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--rm-body);
}
.rm-swatches legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.rm-swatches-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 5%, transparent);
  font-size: 0.85rem;
  cursor: pointer;
}
.rm-swatches-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-ink) 22%, transparent);
}
/*
 * One ring for the whole group, placed from a measurement and moved with a
 * FLIP. It is appended last, so it paints over the chips — which is what an
 * outline should do — and `pointer-events: none` is what makes that safe: it
 * can lie across a label without ever swallowing the click meant for it.
 */
.rm-swatches-ring {
  position: absolute;
  border-radius: var(--rm-radius-pill);
  box-shadow: 0 0 0 2px var(--rm-accent);
  pointer-events: none;
  will-change: transform;
}
.rm-swatches-chip:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Size picker ────────────────────────────────────────────────────────── */

.rm-size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--rm-body);
}
.rm-size-picker legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.rm-size-picker-option {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3rem;
  padding: 0.5rem 0.7rem;
  border-radius: calc(var(--rm-radius) / 3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rm-ink) 25%, transparent);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rm-size-picker-option:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--rm-ink);
  background: var(--rm-ink);
  color: var(--rm-cream);
}
/* Struck and dimmed for the eye; the JS adds ", out of stock" for everyone else. */
.rm-size-picker-option.is-gone {
  color: var(--rm-muted);
  text-decoration: line-through;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    color-mix(in srgb, var(--rm-ink) 7%, transparent) 5px 10px
  );
}
.rm-size-picker-option:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Price tag ──────────────────────────────────────────────────────────── */

.rm-price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  overflow: hidden; /* the roll leaves and arrives inside this box */
  font-family: var(--rm-body);
  font-variant-numeric: tabular-nums; /* digits of one width: no jitter as it rolls */
}
.rm-price-tag-now { font-family: var(--rm-display); font-size: 1.35rem; }
.rm-price-tag.is-reduced .rm-price-tag-now { color: var(--rm-terracotta); }
.rm-price-tag-was { color: var(--rm-muted); font-size: 0.95rem; }

/* ── Discount badge ─────────────────────────────────────────────────────── */

.rm-discount-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-yellow);
  color: var(--rm-ink);
  font: 700 0.75rem/1.5 var(--rm-mono);
  letter-spacing: 0.02em;
  transform-origin: center; /* it scales out of its own middle, so nothing shifts */
}

/* ── Stock meter ────────────────────────────────────────────────────────── */

.rm-stock-meter { display: grid; gap: 0.35rem; font-family: var(--rm-body); font-size: 0.85rem; }
.rm-stock-meter-track {
  display: block;
  height: 6px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 10%, transparent);
  overflow: hidden;
}
/* Full width already; only the scale changes, so the row never re-lays-out. */
.rm-stock-meter-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rm-accent);
  transform: scaleX(var(--rm-stock-meter-value, 0));
  transform-origin: left center;
  transition: transform var(--rm-stock-meter-duration, 520ms) var(--rm-ease-out);
}
.rm-stock-meter.is-low .rm-stock-meter-track i { background: var(--rm-terracotta); }
.rm-stock-meter.is-low .rm-stock-meter-words { color: var(--rm-terracotta); font-weight: 600; }
.rm-stock-meter.is-gone .rm-stock-meter-words { color: var(--rm-muted); }

/* ── Rating stars ───────────────────────────────────────────────────────── */

.rm-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--rm-body);
}
.rm-rating-stars-shape { position: relative; display: inline-block; letter-spacing: 0.08em; }
.rm-rating-stars-back { color: color-mix(in srgb, var(--rm-ink) 18%, transparent); }
/* The filled copy sits exactly on top and is clipped to the score — so 4.3
   stars is genuinely four and a third, on its own layer, with no reflow. */
.rm-rating-stars-front {
  position: absolute;
  inset: 0;
  color: var(--rm-yellow);
  white-space: nowrap;
}
.rm-rating-stars-number { color: var(--rm-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ── Review summary ─────────────────────────────────────────────────────── */

.rm-review-summary {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rm-body);
  font-size: 0.85rem;
}
.rm-review-summary-row { display: grid; grid-template-columns: 4.5rem 1fr 5rem; gap: 0.6rem; align-items: center; }
.rm-review-summary-bar {
  height: 8px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-ink) 9%, transparent);
  overflow: hidden;
}
.rm-review-summary-bar i {
  display: block;
  height: 100%;
  background: var(--rm-yellow);
  transform: scaleX(var(--rm-review-summary-share, 0));
  transform-origin: left center;
}
.rm-review-summary-count { color: var(--rm-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Add to cart ────────────────────────────────────────────────────────── */

/*
 * All three faces share one grid cell, so the button is already as wide as its
 * widest state and swapping between them cannot resize it mid-click. Inactive
 * faces are `visibility: hidden` rather than transparent, because
 * invisible-but-present text is still read aloud and still found by
 * find-in-page — a tick nobody can see should not be in either. That is also
 * why the JS marks all three `aria-hidden` and gives the button a fixed
 * `aria-label`: with the faces in the tree the visible one *is* the button's
 * name, and the name would change under the live region saying the same thing.
 */
.rm-add-to-cart {
  display: inline-grid;
  place-items: center;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: 600 0.9rem/1.3 var(--rm-body);
  cursor: pointer;
}
.rm-add-to-cart-face { grid-area: 1 / 1; visibility: hidden; }
.rm-add-to-cart-face.is-on { visibility: visible; }
.rm-add-to-cart[aria-disabled="true"] { cursor: progress; }
.rm-add-to-cart:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Wishlist heart ─────────────────────────────────────────────────────── */

.rm-wishlist {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rm-cream) 88%, transparent);
  color: var(--rm-ink);
  cursor: pointer;
}
.rm-wishlist-heart { display: grid; place-items: center; width: 22px; height: 22px; }
.rm-wishlist-heart svg { width: 100%; height: 100%; }
.rm-wishlist.is-on { color: var(--rm-terracotta); }
.rm-wishlist.is-on svg path { fill: currentColor; }
/* The burst is its own layer; the heart never moves the card it sits on. */
.rm-wishlist-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid var(--rm-terracotta);
  pointer-events: none;
  transform: scale(0.5);
}
.rm-wishlist:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

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

/* Fixed, so the first product added does not push the catalogue upward. */
.rm-compare-tray {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  box-shadow: 0 20px 46px -24px rgb(0 0 0 / 0.7);
  font-family: var(--rm-body);
}
.rm-compare-tray-list { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.rm-compare-tray-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.35rem 0.25rem 0.25rem;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in srgb, var(--rm-cream) 14%, transparent);
  font-size: 0.8rem;
}
.rm-compare-tray-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.rm-compare-tray-drop {
  border: 0;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.rm-compare-tray-drop:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Quick view ─────────────────────────────────────────────────────────── */

.rm-quick-view-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--rm-ink) 62%, transparent);
  backdrop-filter: blur(3px);
}
.rm-quick-view {
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 81;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100vh - 2rem));
  overflow: auto;
  padding: 1.6rem;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font-family: var(--rm-body);
}
.rm-quick-view-close {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rm-ink) 8%, transparent);
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.rm-quick-view-close:focus-visible,
.rm-quick-view:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Product tabs ───────────────────────────────────────────────────────── */

.rm-product-tabs { font-family: var(--rm-body); }
.rm-product-tabs-bar {
  position: relative;
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rm-ink) 14%, transparent);
  overflow-x: auto;
}
.rm-product-tabs-tab {
  border: 0;
  background: none;
  padding: 0.7rem 0.9rem;
  color: var(--rm-muted);
  font: 600 0.9rem/1.3 var(--rm-body);
  white-space: nowrap;
  cursor: pointer;
}
.rm-product-tabs-tab.is-current { color: var(--rm-ink); }
.rm-product-tabs-tab:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -3px; }
/*
 * One underline for the whole bar. Its box is set once from a measurement and
 * the movement between tabs is a transform, so an indicator sliding across six
 * tabs costs nothing in layout.
 */
.rm-product-tabs-line {
  position: absolute;
  bottom: -1px;
  height: 2px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  pointer-events: none;
  will-change: transform;
}
.rm-product-tabs-panel { padding: 1rem 0; }
.rm-product-tabs-panel:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; }

/* ── Variant picker ─────────────────────────────────────────────────────── */

.rm-variant-picker { display: grid; gap: 1rem; font-family: var(--rm-body); }
.rm-variant-picker.is-unavailable .rm-swatches-ring { box-shadow: 0 0 0 2px var(--rm-terracotta); }
/* aria-disabled, not disabled — it can still be reached, and still explains itself. */
.rm-variant-picker .is-off { opacity: 0.55; }
.rm-variant-picker .is-off::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    color-mix(in srgb, var(--rm-ink) 45%, transparent) 50%,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* ── Breadcrumb trail ───────────────────────────────────────────────────── */

.rm-breadcrumb-trail { font-family: var(--rm-body); font-size: 0.85rem; }
.rm-breadcrumb-trail-list {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.rm-breadcrumb-trail-list > li { display: flex; align-items: center; gap: 0.4rem; }
.rm-breadcrumb-trail-list > li + li::before { content: "/"; color: var(--rm-muted); }
.rm-breadcrumb-trail-list a { color: var(--rm-muted); text-decoration: none; }
.rm-breadcrumb-trail-list a:hover,
.rm-breadcrumb-trail-list a:focus-visible { color: var(--rm-ink); text-decoration: underline; }
.rm-breadcrumb-trail-list .is-current { color: var(--rm-ink); font-weight: 600; }
/* A real button, not an ellipsis: the folded levels can be got back. */
.rm-breadcrumb-trail-more button {
  border: 0;
  border-radius: var(--rm-radius-pill);
  padding: 0.1rem 0.5rem;
  background: color-mix(in srgb, var(--rm-ink) 9%, transparent);
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
}
.rm-breadcrumb-trail-more button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Sort bar ───────────────────────────────────────────────────────────── */

.rm-sort-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rm-body);
  font-size: 0.85rem;
}
/* The native control, dressed — never replaced. */
.rm-sort-bar-select {
  appearance: none;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 20%, transparent);
  border-radius: var(--rm-radius-pill);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 15px) 55% / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px) 55% / 5px 5px no-repeat,
    var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
}
.rm-sort-bar-select:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Filter panel ───────────────────────────────────────────────────────── */

.rm-filter-panel { position: relative; font-family: var(--rm-body); font-size: 0.85rem; }
.rm-filter-panel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--rm-ink) 20%, transparent);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
}
.rm-filter-panel.is-open .rm-filter-panel-trigger { border-color: var(--rm-ink); }
.rm-filter-panel-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-accent);
  color: var(--rm-cream);
  font: 700 0.7rem/1 var(--rm-mono);
}
/*
 * Absolutely positioned on purpose. A disclosure that opens in the flow has to
 * animate a height, and animating a height re-lays-out every product below it
 * on every frame. Out of the flow, opening is a clip-path and the grid behind
 * does not move at all.
 */
.rm-filter-panel-body {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  display: grid;
  gap: 0.4rem;
  min-width: 12rem;
  padding: 0.8rem;
  border-radius: calc(var(--rm-radius) / 1.6);
  background: var(--rm-cream);
  box-shadow: 0 22px 48px -26px rgb(0 0 0 / 0.55);
}
.rm-filter-panel-body label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.rm-filter-panel-trigger:focus-visible,
.rm-filter-panel-body input:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ── Result count ───────────────────────────────────────────────────────── */

.rm-result-count {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  overflow: hidden; /* the old digits leave inside this box, not beside it */
  font-family: var(--rm-body);
  font-size: 0.9rem;
}
.rm-result-count-face {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rm-result-count-face.is-leaving { position: absolute; }
.rm-result-count-noun { color: var(--rm-muted); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/*
 * Everything above still ends in its finished state; only the travel goes. The
 * bars stay filled, the underline stays under the chosen tab and the tray stays
 * open — nothing here is allowed to leave content invisible.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-product-card,
  .rm-product-gallery-thumb,
  .rm-stock-meter-track i {
    transition-duration: 1ms;
  }
  .rm-product-card.is-lifted { transform: none; }
  .rm-product-gallery-thumb:hover,
  .rm-product-gallery-thumb:focus-visible { transform: none; }
}


/* ══ Ecommerce — cart, checkout and order ══════════════════════════════════════════════ */

/*
 * cart — ecommerce: cart, checkout and order.
 *
 * Nothing in this file hides anything. There is no `opacity: 0` at rest and no
 * `display: none` waiting to be undone, because the script owns every start
 * state: if the JavaScript never runs, the drawer is a visible aside, the
 * summary is an open section, and every step of the checkout is a plain
 * fieldset stacked down the page. That is a worse page than the enhanced one,
 * but it is a page, and it sells things.
 *
 * Three techniques here are worth explaining.
 *
 * Every bar fills with `scaleX` from its left edge rather than a width. A
 * width animation relayouts the row on every frame and can drag the price
 * beside it half a pixel back and forth; a scale is a compositor property and
 * moves nothing. The fill is a plain `<i>` at full width with
 * `transform-origin: left`, driven by a 0–1 custom property.
 *
 * Every number that changes lives in a tabular slot. Proportional digits are
 * different widths, so a total counting from £48 to £72 jitters its own box
 * and everything after it. `font-variant-numeric: tabular-nums` plus a `ch`
 * based minimum makes the slot a fixed size, which is also why the cart badge
 * can reach three digits without nudging the header.
 *
 * The payment marker is one absolutely positioned box whose size and offset
 * come from custom properties the script measures. It is out of flow, so
 * writing its width changes nothing else on the page, and the travel between
 * two cards is a transform the script FLIPs. The alternative — a border on the
 * chosen card — cannot animate between cards at all.
 *
 * The checkout's `--rm-checkout-steps-min` is a minimum height measured once
 * from the tallest step. It is set, never animated: it exists precisely so
 * that changing step does not change the height of anything.
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */

/* Announced, never seen. Every one of these components has one. */
.rm-cart-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rm-cart-drawer,
.rm-cart-totals,
.rm-mini-cart-panel,
.rm-order-summary,
.rm-order-confirm,
.rm-return-request {
  font-family: var(--rm-body);
  color: var(--rm-ink);
}

.rm-cart-line-step:focus-visible,
.rm-cart-line-remove:focus-visible,
.rm-cart-drawer-close:focus-visible,
.rm-coupon-apply:focus-visible,
.rm-order-summary-toggle:focus-visible,
.rm-invoice-row-toggle:focus-visible,
.rm-recently-viewed-arrow:focus-visible,
.rm-checkout-steps-nav button:focus-visible {
  outline: 2px solid var(--rm-accent);
  outline-offset: 2px;
}

/* ── Cart drawer ────────────────────────────────────────────────────────── */

.rm-cart-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(420px, 92vw);
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--rm-cream);
  box-shadow: 0 0 60px rgb(14 14 14 / 18%);
  will-change: transform;
}
.rm-cart-drawer.is-right { right: 0; border-top-left-radius: var(--rm-radius); border-bottom-left-radius: var(--rm-radius); }
.rm-cart-drawer.is-left { left: 0; border-top-right-radius: var(--rm-radius); border-bottom-right-radius: var(--rm-radius); }

.rm-cart-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgb(14 14 14 / 45%);
}

.rm-cart-drawer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s var(--rm-ease-out), transform 0.18s var(--rm-ease-out);
}
.rm-cart-drawer-close:hover { color: var(--rm-ink); transform: rotate(90deg); }

/* ── Cart line ──────────────────────────────────────────────────────────── */

.rm-cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgb(14 14 14 / 8%);
  list-style: none;
}

.rm-cart-line-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem;
  border: 1px solid rgb(14 14 14 / 14%);
  border-radius: var(--rm-radius-pill);
}
.rm-cart-line-step {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s var(--rm-ease-out), transform 0.16s var(--rm-ease-out);
}
.rm-cart-line-step:hover:not(:disabled) { background: rgb(14 14 14 / 7%); }
.rm-cart-line-step:active:not(:disabled) { transform: scale(0.92); }
/* Disabled, not hidden: the limit should be visible before it is reached. */
.rm-cart-line-step:disabled { opacity: 0.35; cursor: not-allowed; }

.rm-cart-line-qty {
  width: 3ch;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.rm-cart-line-qty::-webkit-outer-spin-button,
.rm-cart-line-qty::-webkit-inner-spin-button { margin: 0; appearance: none; }

.rm-cart-line-cost {
  min-width: 6ch;
  margin: 0;
  font-family: var(--rm-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rm-cart-line-remove {
  grid-column: 3;
  border: 0;
  background: transparent;
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rm-cart-line-remove:hover { color: var(--rm-terracotta); }

/* ── Cart totals ────────────────────────────────────────────────────────── */

.rm-cart-totals-figures {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(14 14 14 / 12%);
}
.rm-cart-totals-figures dt { margin: 0; color: var(--rm-muted); }
.rm-cart-totals-figures dd {
  margin: 0;
  /* The counting figure needs a slot that cannot change size mid-count. */
  min-width: 8ch;
  font-family: var(--rm-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rm-cart-totals-figures dd.is-total {
  font-family: var(--rm-display);
  font-size: 1.25rem;
}

/* ── Cart empty ─────────────────────────────────────────────────────────── */

.rm-cart-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius);
  color: var(--rm-muted);
  text-align: center;
}

/* ── Cart badge ─────────────────────────────────────────────────────────── */

.rm-cart-badge { position: relative; display: inline-flex; align-items: center; }
.rm-cart-badge-pill {
  position: absolute;
  top: -0.5rem;
  right: -0.7rem;
  display: grid;
  place-items: center;
  /* A fixed slot, so 9 → 10 cannot widen the header. */
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  overflow: hidden;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-accent);
  color: var(--rm-cream);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Both faces occupy the same cell, so one can leave while the other arrives. */
.rm-cart-badge-face,
.rm-cart-badge-face.is-leaving { grid-area: 1 / 1; }

/* ── Mini cart ──────────────────────────────────────────────────────────── */

.rm-mini-cart { position: relative; display: inline-block; }
.rm-mini-cart-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  width: min(340px, 88vw);
  padding: 1rem;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  box-shadow: 0 18px 48px rgb(14 14 14 / 16%);
}
/*
 * The pointer has to cross the gap between trigger and panel. This pad gives
 * it something to stay inside on the way, which is why the panel does not
 * flicker shut halfway there.
 */
.rm-mini-cart-panel::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 0.6rem;
}

/* ── Free shipping bar ──────────────────────────────────────────────────── */

.rm-free-shipping { display: grid; gap: 0.5rem; }
.rm-free-shipping-note { margin: 0; font-size: 0.9rem; color: var(--rm-muted); }
.rm-free-shipping.is-reached .rm-free-shipping-note { color: var(--rm-ink); font-weight: 600; }

.rm-free-shipping-track {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--rm-radius-pill);
  background: rgb(14 14 14 / 10%);
}
.rm-free-shipping-track > i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--rm-accent);
  /* Full width, scaled down. Never a width animation. */
  transform: scaleX(var(--rm-free-shipping-fill, 0));
  transform-origin: left center;
  transition: transform 0.45s var(--rm-ease-out), background 0.3s linear;
}
.rm-free-shipping.is-reached .rm-free-shipping-track > i { background: var(--rm-yellow); }

/* ── Coupon field ───────────────────────────────────────────────────────── */

.rm-coupon { display: grid; gap: 0.5rem; }
.rm-coupon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: end;
}
.rm-coupon-label { grid-column: 1 / -1; font-size: 0.85rem; color: var(--rm-muted); }
.rm-coupon-field {
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--rm-mono);
  text-transform: uppercase;
  transition: border-color 0.2s var(--rm-ease-out);
}
.rm-coupon-field:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 1px; }
.rm-coupon-apply {
  padding: 0.7rem 1.2rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: inherit;
  cursor: pointer;
}
.rm-coupon-apply:disabled { opacity: 0.45; cursor: not-allowed; }
.rm-coupon-message { margin: 0; font-size: 0.85rem; min-height: 1.2em; }
.rm-coupon.is-applied .rm-coupon-message { color: var(--rm-accent); }
.rm-coupon.is-applied .rm-coupon-field { border-color: var(--rm-accent); }
/* The rejected state is a colour *and* a word — the message is always there. */
.rm-coupon.is-rejected .rm-coupon-message { color: var(--rm-terracotta); }
.rm-coupon.is-rejected .rm-coupon-field { border-color: var(--rm-terracotta); }
.rm-coupon-clear {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Checkout steps ─────────────────────────────────────────────────────── */

.rm-checkout-steps { display: grid; gap: 1.25rem; }
.rm-checkout-steps > fieldset {
  /* Measured once from the tallest step, so switching step never resizes. */
  min-height: var(--rm-checkout-steps-min, auto);
  margin: 0;
  padding: 0;
  border: 0;
}
.rm-checkout-steps legend {
  padding: 0;
  font-family: var(--rm-display);
  font-size: 1.3rem;
}
.rm-checkout-steps legend:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; }

.rm-checkout-steps-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--rm-muted);
  counter-reset: rm-checkout;
}
.rm-checkout-steps-mark { counter-increment: rm-checkout; }
.rm-checkout-steps-mark::before {
  content: counter(rm-checkout) ". ";
  font-variant-numeric: tabular-nums;
}
.rm-checkout-steps-mark.is-done { color: var(--rm-ink); }
.rm-checkout-steps-mark.is-current {
  color: var(--rm-accent);
  font-weight: 600;
}

.rm-checkout-steps-nav { display: flex; gap: 0.75rem; }
.rm-checkout-steps-nav button {
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--rm-ink);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: var(--rm-ink);
  font: inherit;
  cursor: pointer;
  transition: transform 0.16s var(--rm-ease-out);
}
.rm-checkout-steps-next { background: var(--rm-ink); color: var(--rm-cream); }
.rm-checkout-steps-nav button:active:not(:disabled) { transform: scale(0.97); }
.rm-checkout-steps-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Order summary ──────────────────────────────────────────────────────── */

.rm-order-summary {
  padding: 1.25rem;
  border: 1px solid rgb(14 14 14 / 10%);
  border-radius: var(--rm-radius);
}
.rm-order-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rm-order-summary-chevron {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.25s var(--rm-ease-out);
}
.rm-order-summary.is-open .rm-order-summary-chevron { transform: rotate(-135deg); }
.rm-order-summary-body { padding-top: 0.9rem; }

/* ── Payment methods ────────────────────────────────────────────────────── */

.rm-payment-methods {
  position: relative;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.rm-payment-methods-card,
.rm-delivery-options-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(14 14 14 / 14%);
  border-radius: var(--rm-radius);
  cursor: pointer;
  transition: border-color 0.2s var(--rm-ease-out), transform 0.2s var(--rm-ease-out);
}
.rm-payment-methods-card:hover,
.rm-delivery-options-card:hover { transform: translateY(-1px); }
/* The chosen card is marked by a word, a radio and a border — never colour alone. */
.rm-payment-methods-card.is-chosen,
.rm-delivery-options-card.is-chosen { border-color: var(--rm-accent); }
.rm-payment-methods-card:focus-within,
.rm-delivery-options-card:focus-within { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/*
 * Out of flow on purpose: the script writes its size and offset from a
 * measurement, and because nothing else depends on this box, writing them
 * cannot reflow a single other element. The travel between cards is a
 * transform the script FLIPs.
 */
.rm-payment-methods-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--rm-payment-marker-w, 0);
  height: var(--rm-payment-marker-h, 0);
  border-radius: var(--rm-radius);
  background: rgb(42 167 228 / 10%);
  translate: var(--rm-payment-marker-x, 0) var(--rm-payment-marker-y, 0);
  pointer-events: none;
}

/* ── Address form ───────────────────────────────────────────────────────── */

.rm-address-form { display: grid; gap: 0.9rem; }
.rm-address-form-summary {
  padding: 1rem 1.2rem;
  border: 2px solid var(--rm-terracotta);
  border-radius: var(--rm-radius);
}
.rm-address-form-summary:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }
.rm-address-form-summary-title { margin: 0 0 0.5rem; font-family: var(--rm-display); font-size: 1.05rem; }
.rm-address-form-summary ul { margin: 0; padding-left: 1.1rem; }
.rm-address-form-summary a { color: var(--rm-terracotta); }
.rm-address-form-note {
  margin: 0.25rem 0 0;
  color: var(--rm-terracotta);
  font-size: 0.85rem;
}
.rm-address-form .is-wrong { border-color: var(--rm-terracotta); }

/* ── Delivery options ───────────────────────────────────────────────────── */

.rm-delivery-options { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.rm-delivery-options-eta {
  margin-left: auto;
  color: var(--rm-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Gift note ──────────────────────────────────────────────────────────── */

.rm-gift-note { display: grid; gap: 0.5rem; }
.rm-gift-note-row { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.rm-gift-note-text {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.rm-gift-note-tally {
  margin: 0.3rem 0 0;
  color: var(--rm-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* ── Order confirm ──────────────────────────────────────────────────────── */

.rm-order-confirm {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.rm-order-confirm h1:focus-visible,
.rm-order-confirm h2:focus-visible,
.rm-order-confirm h3:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 6px; }
/*
 * Drawn in full at rest. The dash is applied by the script at the moment it is
 * going to animate, so a tick with no JavaScript is a tick, not a blank circle.
 */
.rm-order-confirm-tick { display: block; width: 64px; color: var(--rm-accent); }
.rm-order-confirm-tick svg { display: block; width: 100%; height: auto; }
.rm-order-confirm-reference {
  margin: 0;
  font-family: var(--rm-mono);
  font-size: 0.85rem;
  color: var(--rm-muted);
}

/* ── Order tracking ─────────────────────────────────────────────────────── */

.rm-order-tracking {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
}
/* The rail behind the dots, and its fill: one scaled element, no width change. */
.rm-order-tracking-line {
  position: absolute;
  top: 1.75rem;
  right: 1rem;
  left: 1rem;
  height: 2px;
  background: rgb(14 14 14 / 12%);
}
.rm-order-tracking-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rm-accent);
  transform: scaleX(var(--rm-order-tracking-fill, 0));
  transform-origin: left center;
  transition: transform 0.5s var(--rm-ease-out);
}
.rm-order-tracking-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  padding-top: 1.4rem;
  color: var(--rm-muted);
  font-size: 0.85rem;
  text-align: center;
}
.rm-order-tracking-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid rgb(14 14 14 / 20%);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  translate: -50% 0;
  transition: background 0.3s var(--rm-ease-out), border-color 0.3s var(--rm-ease-out), scale 0.3s var(--rm-ease-out);
}
.rm-order-tracking-stage.is-done { color: var(--rm-ink); }
.rm-order-tracking-stage.is-done .rm-order-tracking-dot { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-order-tracking-stage.is-current { color: var(--rm-ink); font-weight: 600; }
.rm-order-tracking-stage.is-current .rm-order-tracking-dot {
  border-color: var(--rm-accent);
  scale: 1.25;
}
/* The state in words, because a filled circle is not a status. */
.rm-order-tracking-state { display: block; font-weight: 400; font-size: 0.75rem; color: var(--rm-muted); }

/* ── Return request ─────────────────────────────────────────────────────── */

.rm-return-request { display: grid; gap: 0.9rem; }
.rm-return-request-set { display: grid; gap: 0.4rem; margin: 0; padding: 0; border: 0; }
.rm-return-request-set legend { padding: 0 0 0.4rem; font-family: var(--rm-display); }
.rm-return-request-choice { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.rm-return-request-more {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.rm-return-request-send {
  justify-self: start;
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: inherit;
  cursor: pointer;
}
.rm-return-request-done {
  padding: 1rem 1.2rem;
  border-radius: var(--rm-radius);
  background: rgb(42 167 228 / 10%);
}
.rm-return-request-done:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }

/* ── Invoice row ────────────────────────────────────────────────────────── */

.rm-invoice-row td { padding: 0.75rem 0.6rem; border-bottom: 1px solid rgb(14 14 14 / 8%); }
.rm-invoice-row-toggle {
  margin-right: 0.6rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.rm-invoice-row.is-open .rm-invoice-row-toggle { background: var(--rm-ink); color: var(--rm-cream); }
/* The state is the word inside the pill; the colour only agrees with it. */
.rm-invoice-row-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--rm-radius-pill);
  background: rgb(14 14 14 / 8%);
  font-size: 0.75rem;
}
.rm-invoice-row.is-paid .rm-invoice-row-pill { background: rgb(42 167 228 / 16%); }
.rm-invoice-row.is-due .rm-invoice-row-pill { background: rgb(244 215 56 / 32%); }
.rm-invoice-row.is-overdue .rm-invoice-row-pill { background: rgb(210 140 101 / 32%); }
.rm-invoice-row-detail td {
  padding: 0.9rem 0.6rem;
  background: rgb(14 14 14 / 3%);
  font-size: 0.9rem;
}

/* ── Save for later ─────────────────────────────────────────────────────── */

.rm-save-for-later ul,
.rm-save-for-later ol { margin: 0; padding: 0; list-style: none; }
.rm-save-for-later li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(14 14 14 / 8%);
  will-change: transform;
}
.rm-save-for-later li.is-saved { opacity: 0.78; }
.rm-save-for-later button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rm-save-for-later button:hover { color: var(--rm-accent); }

/* ── Recently viewed ────────────────────────────────────────────────────── */

.rm-recently-viewed {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /*
   * The edge fades are a mask whose fade *length* is a 0/1 flag the script
   * writes from scrollLeft: at 0 the gradient collapses to zero width and the
   * edge is simply opaque, at 1 it is a 2rem fade. A mask is paint-only, so
   * the rail can hint at more content without an overlay element sitting on
   * top of the links and eating their clicks.
   */
  mask-image:
    linear-gradient(to right, transparent, #000 calc(2rem * var(--rm-recently-viewed-start, 0))),
    linear-gradient(to left, transparent, #000 calc(2rem * var(--rm-recently-viewed-end, 0)));
  mask-composite: intersect;
}
.rm-recently-viewed-item {
  flex: 0 0 auto;
  width: 11rem;
  scroll-snap-align: start;
}
.rm-recently-viewed-item img { border-radius: var(--rm-radius-sm); }
.rm-recently-viewed-nav { display: flex; gap: 0.5rem; justify-content: flex-end; }
.rm-recently-viewed-arrow {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgb(14 14 14 / 18%);
  border-radius: var(--rm-radius-pill);
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s var(--rm-ease-out);
}
.rm-recently-viewed-arrow:hover:not(:disabled) { background: rgb(14 14 14 / 7%); }
.rm-recently-viewed-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/*
 * Transitions stop; nothing hides. Every rule above that moves something moves
 * it between two visible states, so removing the movement leaves the finished
 * state on screen rather than an empty box.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-cart-drawer-close,
  .rm-cart-line-step,
  .rm-free-shipping-track > i,
  .rm-order-summary-chevron,
  .rm-order-tracking-line::after,
  .rm-order-tracking-dot,
  .rm-payment-methods-card,
  .rm-delivery-options-card,
  .rm-checkout-steps-nav button,
  .rm-recently-viewed-arrow { transition: none; }
  .rm-recently-viewed { scroll-behavior: auto; }
}


/* ══ Thirty more, across the kit ══════════════════════════════════════════════ */

/*
 * extras — pricing, proof, docs, tables and the furniture.
 *
 * Four techniques recur below and are worth stating once rather than in
 * thirty comments.
 *
 * 1. Nothing starts at `opacity: 0` here. Every reveal writes its own start
 *    state from JavaScript, so a page with the script blocked shows a pricing
 *    table and a changelog rather than a column of empty boxes.
 *
 * 2. Anything that opens uses `grid-template-rows: 0fr → 1fr`. The row is the
 *    animated thing and the content inside it needs `min-height: 0` plus
 *    `overflow: hidden` to be clipped on the way; no height is ever measured,
 *    so the same rule works for three lines and for thirty.
 *
 * 3. The travelling indicators — the plan-toggle pill, the feature-matrix
 *    column beam, the split-panel ghost — are all one-pixel elements with
 *    `transform-origin: left`, stretched with `scaleX(<pixels>)`. A transform
 *    never touches layout, so hovering across a comparison table is free.
 *
 * 4. `.rm-extras-said` is the shared visually-hidden class. It is clipped
 *    rather than `display: none` because hidden text is text a screen reader
 *    skips, and the point of it is to be read.
 */

.rm-extras-said {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.rm-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}
.rm-pricing-plan {
  position: relative;
  padding: 28px 24px;
  border: 1px solid color-mix(in oklab, var(--rm-ink) 12%, transparent);
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  transition: transform 0.4s var(--rm-ease-out), box-shadow 0.4s var(--rm-ease-out);
}
.rm-pricing-plan:hover,
.rm-pricing-plan:focus-within {
  /* The lift is a transform, so the grid never re-measures its rows. */
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--rm-ink) 60%, transparent);
}
.rm-pricing-plan.is-recommended {
  border-color: var(--rm-accent);
  box-shadow: 0 0 0 1px var(--rm-accent);
}
.rm-pricing-plan.is-recommended::before {
  content: "Recommended";
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 3px 12px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-accent);
  color: var(--rm-cream);
  font: 600 11px/1.6 var(--rm-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rm-plan-toggle {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in oklab, var(--rm-ink) 8%, transparent);
}
.rm-plan-toggle-pill {
  position: absolute;
  top: 4px;
  left: 0;
  /* One pixel wide, stretched by scaleX to the chosen button. */
  width: 1px;
  transform-origin: left center;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-cream);
  box-shadow: 0 2px 8px -4px color-mix(in oklab, var(--rm-ink) 70%, transparent);
}
.rm-plan-toggle-choice {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--rm-radius-pill);
  background: none;
  color: var(--rm-muted);
  font: 500 14px/1 var(--rm-body);
  cursor: pointer;
  transition: color 0.24s var(--rm-ease-out);
}
.rm-plan-toggle-choice.is-on { color: var(--rm-ink); }
.rm-plan-toggle-choice:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

.rm-savings {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-yellow);
  color: var(--rm-ink);
  font: 600 12px/1.5 var(--rm-body);
  transition: opacity 0.3s var(--rm-ease-out), transform 0.3s var(--rm-ease-out);
}
.rm-savings.is-away { opacity: 0; transform: scale(0.86); pointer-events: none; }

/* ── Feature matrix ─────────────────────────────────────────────────────── */

/* The shell exists purely to be the beam's containing block. The beam is
   absolutely positioned and its offsets are measured against the table, so the
   two boxes have to share an origin; `position: relative` on the table itself
   does nothing for a bar that is not inside the table. The component builds
   this wrapper and unwraps it again on cleanup. */
.rm-feature-matrix-shell {
  position: relative;
}
.rm-feature-matrix {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  font: 14px/1.6 var(--rm-body);
}
.rm-feature-matrix th,
.rm-feature-matrix td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid color-mix(in oklab, var(--rm-ink) 10%, transparent);
}
.rm-feature-matrix-stub {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  background: var(--rm-cream);
  font-weight: 500;
}
.rm-feature-matrix tbody tr:hover { background: color-mix(in oklab, var(--rm-accent) 6%, transparent); }
.rm-feature-matrix-mark.is-yes { color: var(--rm-accent); font-size: 1.1em; }
.rm-feature-matrix-mark.is-no { color: var(--rm-muted); }

.rm-feature-matrix-beam {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 1px; /* stretched by scaleX to the hovered column */
  transform-origin: left top;
  border-radius: 8px;
  background: color-mix(in oklab, var(--rm-accent) 9%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s var(--rm-ease-out), opacity 0.24s var(--rm-ease-out);
}

/* ── Testimonials ───────────────────────────────────────────────────────── */

.rm-quote {
  position: relative;
  margin: 0;
  padding: 32px 28px 24px;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  border: 1px solid color-mix(in oklab, var(--rm-ink) 10%, transparent);
}
.rm-quote-mark {
  position: absolute;
  top: -6px;
  left: 18px;
  color: color-mix(in oklab, var(--rm-terracotta) 55%, transparent);
  font: 400 84px/1 var(--rm-display);
  pointer-events: none;
}
.rm-quote-body { margin: 0 0 16px; font: 400 17px/1.6 var(--rm-body); }
.rm-quote-who { display: flex; gap: 10px; align-items: center; color: var(--rm-muted); font-size: 13px; }

.rm-logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rm-logo-wall-item {
  display: grid;
  place-items: center;
  /* Muted at rest, full strength when reached — by pointer or by keyboard. */
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s var(--rm-ease-out), opacity 0.3s var(--rm-ease-out), transform 0.3s var(--rm-ease-out);
}
.rm-logo-wall-item:hover,
.rm-logo-wall-item:focus-within {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

.rm-rating-row {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font: 15px/1 var(--rm-body);
}
.rm-rating-row-empty,
.rm-rating-row-full {
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.rm-rating-row-empty { color: color-mix(in oklab, var(--rm-ink) 18%, transparent); }
.rm-rating-row-full {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--rm-yellow);
  /* The fraction is a clip, so 4.3 draws as four stars and a third. */
  transition: clip-path 0.5s var(--rm-ease-out);
}
.rm-rating-row-number { color: var(--rm-muted); font-size: 13px; }

/* ── FAQ and help ───────────────────────────────────────────────────────── */

.rm-faq { display: grid; gap: 2px; }
.rm-faq-item { border-bottom: 1px solid color-mix(in oklab, var(--rm-ink) 10%, transparent); }
.rm-faq-q {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rm-faq-q::after {
  content: "+";
  color: var(--rm-muted);
  font: 400 20px/1 var(--rm-mono);
  transition: transform 0.3s var(--rm-ease-in-out);
}
.rm-faq-item.is-open .rm-faq-q::after { transform: rotate(45deg); }
.rm-faq-q:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -2px; }
.rm-faq-a {
  display: grid;
  grid-template-rows: 0fr; /* no measurement, ever */
  transition: grid-template-rows var(--rm-faq-duration, 320ms) var(--rm-ease-in-out);
}
.rm-faq-item.is-open .rm-faq-a { grid-template-rows: 1fr; }
.rm-faq-a-inner { min-height: 0; overflow: hidden; padding-bottom: 4px; color: var(--rm-muted); }

.rm-help-tip { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.rm-help-tip-button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in oklab, var(--rm-ink) 25%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--rm-muted);
  font: 600 11px/1 var(--rm-body);
  cursor: pointer;
}
.rm-help-tip-button[aria-expanded="true"] { background: var(--rm-ink); color: var(--rm-cream); border-color: var(--rm-ink); }
.rm-help-tip-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--rm-ink);
  color: var(--rm-cream);
  font: 400 13px/1.5 var(--rm-body);
}

.rm-shortcuts {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 900;
  translate: -50% -50%;
  width: min(560px, calc(100vw - 32px));
  max-height: 80vh;
  overflow: auto;
  padding: 28px;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--rm-ink) 80%, transparent);
}
.rm-shortcuts dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; margin: 0; }
.rm-shortcuts dt { color: var(--rm-muted); font-size: 14px; }
.rm-shortcuts dd { margin: 0; }
.rm-shortcuts kbd {
  display: inline-block;
  min-width: 22px;
  padding: 3px 7px;
  border: 1px solid color-mix(in oklab, var(--rm-ink) 20%, transparent);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--rm-cream);
  font: 500 12px/1.4 var(--rm-mono);
  text-align: center;
}
.rm-shortcuts-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: none;
  color: var(--rm-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ── Onboarding ─────────────────────────────────────────────────────────── */

.rm-tour { position: fixed; inset: 0; z-index: 950; pointer-events: none; }
.rm-tour-veil {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--rm-ink) 62%, transparent);
  /* The hole is cut with clip-path, so nothing is resized to make it. */
  transition: clip-path 0.24s var(--rm-ease-out);
}
.rm-tour-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 18px 20px;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  pointer-events: auto;
  box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--rm-ink) 90%, transparent);
}
.rm-tour-count { margin: 0 0 8px; color: var(--rm-muted); font: 500 12px/1 var(--rm-mono); }
.rm-tour-row { display: flex; gap: 8px; margin-top: 16px; }
.rm-tour-row button {
  padding: 8px 14px;
  border: 1px solid color-mix(in oklab, var(--rm-ink) 18%, transparent);
  border-radius: var(--rm-radius-pill);
  background: none;
  font: 500 13px/1 var(--rm-body);
  cursor: pointer;
}
.rm-tour-next { background: var(--rm-ink) !important; border-color: var(--rm-ink) !important; color: var(--rm-cream); }
.rm-tour-end { margin-left: auto; color: var(--rm-muted); border-color: transparent !important; }
.rm-tour-row button[disabled] { opacity: 0.4; cursor: default; }

.rm-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rm-checklist-bar {
  height: 4px;
  margin-bottom: 8px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in oklab, var(--rm-ink) 12%, transparent);
  overflow: hidden;
}
.rm-checklist-bar > i {
  display: block;
  width: 100%;
  height: 100%;
  /* scaleX, never width: the card around it never reflows. */
  transform-origin: left center;
  border-radius: inherit;
  background: var(--rm-accent);
  /* The duration is written from JavaScript so the `duration` option actually
     reaches the motion; the literal here is only the no-script fallback. */
  transition: transform var(--rm-checklist-duration, 520ms) var(--rm-ease-out);
}
.rm-checklist-item { display: flex; gap: 10px; align-items: center; font: 15px/1.5 var(--rm-body); }
.rm-checklist-box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid color-mix(in oklab, var(--rm-ink) 22%, transparent);
  border-radius: 50%;
  color: var(--rm-cream);
}
.rm-checklist-box svg { width: 13px; height: 13px; }
.rm-checklist-box path { transition: stroke-dashoffset 0.5s var(--rm-ease-out); }
.rm-checklist-item.is-done .rm-checklist-box { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-checklist-item.is-done { color: var(--rm-muted); }

.rm-welcome {
  position: relative;
  padding: 28px;
  border-radius: var(--rm-radius);
  background: color-mix(in oklab, var(--rm-yellow) 24%, var(--rm-cream));
}
.rm-welcome-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  color: var(--rm-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ── Headers and footers ────────────────────────────────────────────────── */

.rm-footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
}
.rm-footer-columns-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Above the breakpoint the heading is a heading again: no pointer, no chevron. */
.rm-footer-columns-head[disabled] { cursor: default; opacity: 1; }
.rm-footer-columns-head::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  opacity: 0;
  transition: rotate 0.3s var(--rm-ease-in-out), opacity 0.2s;
}
.rm-footer-columns.is-folded .rm-footer-columns-head::after { opacity: 0.6; }
.rm-footer-columns-col.is-open .rm-footer-columns-head::after { rotate: -135deg; }
.rm-footer-columns-shell { display: grid; grid-template-rows: 1fr; }
.rm-footer-columns.is-folded .rm-footer-columns-shell {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-footer-columns-duration, 300ms) var(--rm-ease-in-out);
}
.rm-footer-columns.is-folded .rm-footer-columns-col.is-open .rm-footer-columns-shell { grid-template-rows: 1fr; }
.rm-footer-columns-shell > * { min-height: 0; overflow: hidden; }

.rm-announcement {
  position: relative;
  display: grid;
  padding: 10px 20px;
  background: var(--rm-ink);
  color: var(--rm-cream);
  text-align: center;
  font: 400 14px/1.5 var(--rm-body);
}
/* Every message occupies the same cell, so the strip is as tall as the
 * tallest one from the first frame and rotating cannot move the page. */
.rm-announcement-message { grid-area: 1 / 1; margin: 0; }

.rm-mega-footer { position: relative; overflow: hidden; }
.rm-mega-footer-word {
  margin-top: 32px;
  font: 700 clamp(56px, 18vw, 220px)/0.85 var(--rm-display);
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--rm-ink) 12%, transparent);
  user-select: none;
  white-space: nowrap;
  will-change: transform;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.rm-sortable { width: 100%; border-collapse: collapse; font: 14px/1.6 var(--rm-body); }
.rm-sortable th, .rm-sortable td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklab, var(--rm-ink) 10%, transparent);
}
.rm-sortable tbody tr { will-change: transform; }
.rm-sortable-head {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rm-sortable-head i {
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: -45deg;
  opacity: 0.25;
  transition: rotate 0.24s var(--rm-ease-in-out), opacity 0.2s;
}
[aria-sort="ascending"] .rm-sortable-head i { opacity: 1; rotate: 135deg; }
[aria-sort="descending"] .rm-sortable-head i { opacity: 1; rotate: -45deg; }

.rm-sticky-head-sentinel { height: 1px; margin-bottom: -1px; }
.rm-sticky-head thead th {
  position: sticky;
  top: var(--rm-sticky-head-top, 0px);
  z-index: 3;
  background: var(--rm-cream);
}
.rm-sticky-head thead th::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: color-mix(in oklab, var(--rm-ink) 20%, transparent);
  box-shadow: 0 8px 14px -8px color-mix(in oklab, var(--rm-ink) 70%, transparent);
  opacity: 0;
  transition: opacity 0.24s var(--rm-ease-out);
}
.rm-sticky-head.is-stuck thead th::after { opacity: 1; }

.rm-row-expand-toggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--rm-ink) 8%, transparent);
  color: var(--rm-muted);
  cursor: pointer;
}
.rm-row-expand-toggle span { display: block; transition: rotate 0.3s var(--rm-ease-in-out); }
.rm-row-expand-toggle[aria-expanded="true"] span { rotate: 180deg; }
.rm-row-expand-detail > * { padding-top: 0; padding-bottom: 0; }
.rm-row-expand-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-row-expand-duration, 300ms) var(--rm-ease-in-out);
}
.rm-row-expand-detail.is-open .rm-row-expand-shell { grid-template-rows: 1fr; }
.rm-row-expand-shell > * { min-height: 0; overflow: hidden; }
.rm-row-expand-detail.is-open .rm-row-expand-shell > * { padding: 8px 0 16px; }

.rm-table-empty-row td { padding: 48px 16px; text-align: center; }
.rm-table-empty-row p { margin: 0; color: var(--rm-muted); font: 15px/1.6 var(--rm-body); }

/* ── Code and docs ──────────────────────────────────────────────────────── */

.rm-code {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  border-radius: var(--rm-radius-sm, 8px);
  background: color-mix(in oklab, var(--rm-ink) 94%, var(--rm-accent));
  color: var(--rm-cream);
  overflow: hidden;
}
.rm-code-lang {
  grid-column: 1 / -1;
  padding: 8px 16px 0;
  color: color-mix(in oklab, var(--rm-cream) 55%, transparent);
  font: 500 11px/1 var(--rm-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rm-code-gutter {
  padding: 16px 10px 16px 16px;
  color: color-mix(in oklab, var(--rm-cream) 35%, transparent);
  font: 13px/1.7 var(--rm-mono);
  text-align: right;
  user-select: none;
  white-space: pre;
}
.rm-code-pre {
  grid-column: 2;
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font: 13px/1.7 var(--rm-mono);
}
.rm-code-pre:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -2px; }
.rm-code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 12px;
  border: 1px solid color-mix(in oklab, var(--rm-cream) 25%, transparent);
  border-radius: var(--rm-radius-pill);
  background: color-mix(in oklab, var(--rm-ink) 70%, transparent);
  color: var(--rm-cream);
  font: 500 12px/1.4 var(--rm-body);
  cursor: pointer;
}
.rm-code-copy.is-copied { border-color: var(--rm-accent); color: var(--rm-accent); }

.rm-diff { font: 13px/1.7 var(--rm-mono); border-radius: var(--rm-radius-sm, 8px); overflow: hidden; }
.rm-diff-line { display: flex; gap: 10px; padding: 1px 12px; white-space: pre-wrap; }
.rm-diff-sign { width: 1ch; flex: none; opacity: 0.6; }
.rm-diff-line.is-add { background: color-mix(in oklab, var(--rm-accent) 14%, transparent); }
.rm-diff-line.is-del { background: color-mix(in oklab, var(--rm-terracotta) 22%, transparent); }
/* Colour is never the only signal: each changed line also carries a word in
 * `.rm-extras-said`, and the sign in the gutter is visible on any display. */

.rm-api-row { border-bottom: 1px solid color-mix(in oklab, var(--rm-ink) 10%, transparent); }
.rm-api-row-head {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rm-api-row-method {
  padding: 3px 9px;
  border-radius: 6px;
  color: var(--rm-cream);
  font: 700 11px/1.4 var(--rm-mono);
  letter-spacing: 0.05em;
}
.rm-api-row-method.is-get { background: var(--rm-accent); }
.rm-api-row-method.is-post { background: #2e9e6b; }
.rm-api-row-method.is-put,
.rm-api-row-method.is-patch { background: var(--rm-terracotta); color: var(--rm-ink); }
.rm-api-row-method.is-delete { background: #c0492f; }
.rm-api-row-path { font: 500 13px/1.4 var(--rm-mono); }
.rm-api-row-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rm-api-row-duration, 300ms) var(--rm-ease-in-out);
}
.rm-api-row.is-open .rm-api-row-shell { grid-template-rows: 1fr; }
.rm-api-row-detail { min-height: 0; overflow: hidden; }

/* ── Status ─────────────────────────────────────────────────────────────── */

.rm-uptime { display: grid; gap: 6px; }
.rm-uptime:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 4px; border-radius: 4px; }
.rm-uptime-bars { display: flex; gap: 2px; height: 32px; align-items: stretch; }
.rm-uptime-bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: var(--rm-radius-pill);
  /* Grown with scaleY from the baseline; the strip's height never changes. */
  transform-origin: bottom center;
  transition: opacity 0.2s;
}
.rm-uptime-bar.is-up { background: color-mix(in oklab, var(--rm-accent) 70%, var(--rm-ink)); }
.rm-uptime-bar.is-down { background: var(--rm-terracotta); }
.rm-uptime-bars:hover .rm-uptime-bar { opacity: 0.45; }
.rm-uptime-bar:hover { opacity: 1 !important; }
.rm-uptime-read { margin: 0; min-height: 1.4em; color: var(--rm-muted); font: 12px/1.4 var(--rm-mono); }

.rm-changelog { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; display: grid; gap: 32px; }
.rm-changelog-rail {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 2px;
  transform-origin: top center;
  background: color-mix(in oklab, var(--rm-accent) 60%, transparent);
}
.rm-changelog-entry { position: relative; }
.rm-changelog-entry::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -27px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--rm-cream);
  border-radius: 50%;
  background: var(--rm-accent);
}
.rm-changelog-date { display: block; color: var(--rm-muted); font: 500 12px/1.6 var(--rm-mono); }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.rm-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.rm-bento-tile {
  grid-column: span var(--rm-bento-span, 1);
  padding: 24px;
  border-radius: var(--rm-radius);
  background: var(--rm-cream);
  border: 1px solid color-mix(in oklab, var(--rm-ink) 10%, transparent);
  transition: opacity 0.3s var(--rm-ease-out), transform 0.3s var(--rm-ease-out);
}
/* One class on the grid dims the siblings — no per-tile writes on pointer move. */
.rm-bento.is-focused .rm-bento-tile { opacity: 0.55; }
.rm-bento.is-focused .rm-bento-tile.is-lit { opacity: 1; transform: translateY(-4px); }

.rm-split-panel {
  position: relative;
  display: grid;
  grid-template-columns: var(--rm-split-panel-at, 50%) 10px 1fr;
  align-items: stretch;
}
.rm-split-panel-handle {
  position: relative;
  cursor: col-resize;
  background: none;
  border: 0;
  touch-action: none;
}
.rm-split-panel-handle::before {
  content: "";
  position: absolute;
  inset: 0 4px;
  border-radius: var(--rm-radius-pill);
  background: color-mix(in oklab, var(--rm-ink) 14%, transparent);
  transition: background 0.2s;
}
.rm-split-panel-handle:hover::before,
.rm-split-panel-handle:focus-visible::before { background: var(--rm-accent); }
.rm-split-panel-handle:focus-visible { outline: none; }
.rm-split-panel-ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rm-split-panel-at, 50%);
  z-index: 5;
  width: 2px;
  background: var(--rm-accent);
  pointer-events: none;
}
.rm-split-panel.is-dragging { user-select: none; }

.rm-sticky-aside-sentinel { height: 1px; margin-bottom: -1px; }
.rm-sticky-aside {
  position: sticky;
  top: var(--rm-sticky-aside-top, 24px);
  align-self: start;
  transition: opacity 0.3s var(--rm-ease-out);
}
.rm-sticky-aside.is-ended { opacity: 0.35; }

.rm-divider {
  position: relative;
  display: grid;
  place-items: center;
  height: 24px;
  margin: 48px 0;
}
.rm-divider-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 2px;
  stroke: color-mix(in oklab, var(--rm-ink) 22%, transparent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.rm-divider-mark {
  position: relative;
  padding: 0 14px;
  background: var(--rm-cream);
  color: var(--rm-muted);
  font: 400 15px/1 var(--rm-display);
}

.rm-section-mark {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  color: var(--rm-muted);
  font: 500 13px/1.4 var(--rm-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s var(--rm-ease-out);
}
.rm-section-mark.is-current { color: var(--rm-ink); }
.rm-section-mark-number { color: var(--rm-accent); }

/* Reduced motion: everything above still arrives, it just arrives instantly.
 * No rule here hides anything — that is the whole point of the preference. */
@media (prefers-reduced-motion: reduce) {
  .rm-pricing-plan,
  .rm-logo-wall-item,
  .rm-bento-tile,
  .rm-savings,
  .rm-sticky-aside,
  .rm-section-mark,
  .rm-checklist-bar > i,
  .rm-checklist-box path,
  .rm-rating-row-full,
  .rm-feature-matrix-beam { transition-duration: 0.01ms; }
  .rm-faq-a,
  .rm-footer-columns.is-folded .rm-footer-columns-shell,
  .rm-row-expand-shell,
  .rm-api-row-shell,
  .rm-tour-veil { transition: none; }
}

/* ── Shared ─────────────────────────────────────────────────────────────── */

/*
 * A blanket motion kill-switch is deliberately NOT here.
 *
 * `* { animation: none !important }` is the usual reduced-motion snippet and
 * it breaks more than it fixes: any element whose visible state is the end of
 * an animation stays stuck at its start, invisible. Each component handles the
 * preference itself, jumping to the finished state instead of skipping it.
 * The only blanket rule is for decoration that has no end state to preserve.
 */
@media (prefers-reduced-motion: reduce) {
  .rm-retro-plane,
  .rm-trail-light,
  .rm-shimmer::after,
  .rm-curve.is-spinning svg,
  .rm-grain.is-moving,
  .rm-shiny,
  .rm-glitch::before,
  .rm-glitch::after,
  .rm-type.has-caret .rm-type-text::after,
  .rm-orbit,
  .rm-orbit-item,
  .rm-lamp-cone,
  .rm-beams-layer i,
  .rm-sparkles-layer i,
  .rm-meteors-layer i,
  .rm-dots-decor,
  .rm-stripes,
  .rm-scanline-bar,
  .rm-mesh i,
  .rm-rings i,
  .rm-plus svg,
  .rm-diagonals,
  .rm-topography svg {
    animation: none !important;
  }
  .rm-shiny { color: var(--rm-shiny-highlight, currentColor); background: none; -webkit-text-fill-color: currentColor; }
}