/* Type Remix Preloader — styles (ported as-is from the React component; every rule is .rtp- prefixed) */
.rtp-root { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.rtp-root.rtp-fixed { position: fixed; inset: 0; z-index: 2000; width: auto; height: 100vh; height: 100svh; }
.rtp-gate {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #0b0b0b; color: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none;
  transition: background-color 700ms ease, opacity 600ms ease; touch-action: manipulation;
  --rtp-heavy: "Archivo Black", "Arial Black", Impact, sans-serif;
  --rtp-cond: "Anton", Impact, "Arial Narrow", sans-serif;
  --rtp-round: "Titan One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --rtp-script: "Shrikhand", "Brush Script MT", cursive;
  --rtp-felt: "Rubik", "Arial Black", sans-serif;
  --rtp-serif: "DM Serif Display", Georgia, serif;
  --rtp-fat: "Abril Fatface", "DM Serif Display", Georgia, serif;
  --rtp-hand: "Caveat", "Comic Sans MS", cursive;
  --rtp-mono: "Space Mono", ui-monospace, Menlo, monospace;
}
.rtp-gate[data-stick="true"] { cursor: crosshair; }
.rtp-gate[data-phase="scatter"][data-loop="false"] { background-color: transparent; }
.rtp-gate[data-phase="skip"] { opacity: 0; }
.rtp-stage { position: absolute; inset: 0; }
.rtp-slide { position: absolute; inset: 0; animation: rtp-wipe-b 620ms cubic-bezier(.77,0,.18,1) both; }
.rtp-slide[data-dir="1"] { animation-name: rtp-wipe-l; }
.rtp-slide[data-dir="2"] { animation-name: rtp-wipe-t; }
.rtp-slide[data-dir="3"] { animation-name: rtp-wipe-r; }
.rtp-slide[data-first="true"] { animation-name: rtp-fade-in; animation-duration: 500ms; }
@keyframes rtp-wipe-b { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rtp-wipe-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rtp-wipe-t { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rtp-wipe-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rtp-fade-in { from { opacity: 0; } }

.rtp-take {
  position: absolute; inset: 0; overflow: hidden; container-type: size;
  background: var(--bg); color: var(--ink); display: grid; place-items: center;
}
.rtp-take svg { max-width: none; overflow: visible; display: block; }
.rtp-take[data-still="true"] .rtp-in { animation: none !important; }
.rtp-word { position: relative; margin: 0; white-space: nowrap; }
.rtp-line { display: block; white-space: nowrap; }
.rtp-ch { display: inline-block; position: relative; }
.rtp-par {
  translate: calc(var(--rtp-px, 0) * var(--dp, 10) * 1px) calc(var(--rtp-py, 0) * var(--dp, 10) * 1px);
  transition: translate 700ms cubic-bezier(.2,.8,.2,1);
}
.rtp-abs { position: absolute; }
.rtp-sticker { filter: drop-shadow(0 0.5cqmin 0.9cqmin rgba(0,0,0,.38)); }
.rtp-die * { fill: #fff !important; stroke: #fff !important; stroke-width: 9px; stroke-linejoin: round; stroke-linecap: round; }
.rtp-slap { animation: rtp-slap 560ms cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--dl, 0ms); }
@keyframes rtp-slap { from { transform: scale(1.9) rotate(-18deg); opacity: 0; } 40% { opacity: 1; } }
.rtp-spin { animation: rtp-spin 14s linear infinite; transform-origin: 50px 50px; }
.rtp-spin-r { animation-direction: reverse; }
@keyframes rtp-spin { to { transform: rotate(360deg); } }
.rtp-bob { animation: rtp-bob 2.6s ease-in-out infinite; }
@keyframes rtp-bob { 50% { translate: 0 -5%; } }

/* ---- sticker ---- */
.rtp-t-sticker .rtp-word {
  font-family: var(--rtp-heavy); font-size: min(calc(112cqw / var(--n2)), 29cqh);
  line-height: .8; letter-spacing: -.035em; text-transform: uppercase; translate: 0 -3cqh;
}
.rtp-t-sticker .rtp-line:first-child { padding-left: .34em; }
.rtp-t-sticker .rtp-ch { animation: rtp-pop 640ms cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 45ms + 140ms); }
@keyframes rtp-pop { from { transform: translateY(.35em) scale(.6); opacity: 0; } 55% { opacity: 1; } }
.rtp-arc { left: 30%; top: -.16em; width: 42%; }
.rtp-arc path { stroke-dasharray: 220; animation: rtp-draw 900ms cubic-bezier(.65,0,.35,1) both 520ms; }
@keyframes rtp-draw { from { stroke-dashoffset: 220; } }
.rtp-badge { left: 50%; top: 50%; width: 1.16em; translate: -50% -50%; }
.rtp-hand {
  position: absolute; left: 50%; top: calc(50% + min(calc(112cqw / var(--n2)), 29cqh) * .9); translate: -50% 0;
  font-family: var(--rtp-hand); color: var(--ac); font-size: min(4.4cqw, 7cqh); line-height: 1; rotate: -4deg;
}
.rtp-hand span { display: inline-block; animation: rtp-pop 500ms cubic-bezier(.34,1.56,.64,1) both 900ms; }

/* ---- felt ---- */
.rtp-t-felt .rtp-col { display: flex; flex-direction: column; align-items: center; translate: 0 2cqh; }
.rtp-tags {
  position: absolute; top: 7cqh; left: 0; right: 0; display: flex; justify-content: center; gap: 4.5cqw;
  font-family: var(--rtp-mono); font-weight: 700; font-size: clamp(8px, 1.15cqw, 13px); letter-spacing: .14em; text-transform: uppercase;
}
.rtp-tags i { font-style: normal; opacity: .9; }
.rtp-tags b { font-size: .7em; }
.rtp-hat { width: min(15cqw, 25cqh); margin-bottom: -1.2cqh; }
.rtp-t-felt .rtp-word {
  font-family: var(--rtp-felt); font-weight: 900; font-size: min(calc(112cqw / var(--n1)), 26cqh);
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase; display: flex; align-items: center;
}
.rtp-t-felt .rtp-ch { animation: rtp-drop 700ms cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 55ms + 160ms); }
@keyframes rtp-drop { from { transform: translateY(-.7em) rotate(-14deg); opacity: 0; } 50% { opacity: 1; } }
.rtp-felt-ch { display: inline-block; color: var(--c); text-shadow: 0 .045em 0 var(--sh); rotate: var(--rz); }
.rtp-wheel { width: .92em; height: .92em; margin: 0 .02em; }
.rtp-byline {
  margin-top: 2.4cqh; font-family: var(--rtp-heavy); font-size: clamp(10px, 1.7cqw, 22px); letter-spacing: .04em; text-transform: uppercase;
}
.rtp-wave { position: absolute; left: 50%; bottom: 11cqh; width: min(52cqw, 90cqh); translate: -50% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.rtp-wave g { animation: rtp-wave 2.4s linear infinite; }
@keyframes rtp-wave { to { transform: translateX(-100px); } }

/* ---- bubble ---- */
.rtp-t-bubble { background:
  radial-gradient(60cqw 50cqh at 18% 12%, rgba(255,255,255,.07), transparent 60%),
  radial-gradient(50cqw 60cqh at 85% 90%, rgba(255,255,255,.05), transparent 60%),
  linear-gradient(160deg, #222226, var(--bg) 55%, #101012); }
.rtp-pill {
  position: absolute; font-family: var(--rtp-heavy); font-size: clamp(8px, 1.05cqw, 12px); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ac); border: 1.5px solid var(--ac); border-radius: 99px; padding: .45em 1.1em .4em; background: rgba(0,0,0,.35); line-height: 1;
}
.rtp-pill-top { top: 7cqh; left: 50%; translate: -50% 0; }
.rtp-rule { position: absolute; top: calc(7cqh + 1em); height: 1px; background: rgba(255,255,255,.22); }
.rtp-pill-bot { right: 9cqw; bottom: 17cqh; }
.rtp-t-bubble .rtp-word {
  font-family: var(--rtp-round); font-size: min(calc(118cqw / var(--n2)), 28cqh);
  line-height: .9; letter-spacing: -.01em; text-transform: uppercase; text-align: center;
}
.rtp-t-bubble .rtp-ch { animation: rtp-boing 900ms cubic-bezier(.25,.8,.3,1) both; animation-delay: calc(var(--i) * 60ms + 120ms); transform-origin: 50% 100%; }
@keyframes rtp-boing {
  0% { transform: translateY(-60cqh) scale(.85, 1.25); opacity: 0; }
  45% { transform: translateY(0) scale(1.18, .78); opacity: 1; }
  65% { transform: translateY(-9%) scale(.94, 1.08); }
  82% { transform: translateY(0) scale(1.04, .96); }
}
.rtp-bub { display: inline-block; color: var(--c); rotate: var(--rz); text-shadow: var(--ts); position: relative; }
.rtp-bub::after {
  content: attr(data-ch); position: absolute; inset: 0; text-shadow: none; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.75), rgba(255,255,255,0) 38%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rtp-float { display: inline-block; animation: rtp-float 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -310ms); }
@keyframes rtp-float { 50% { translate: 0 -4%; } }
.rtp-burst { left: -.62em; top: .05em; width: .6em; }
.rtp-spark { width: .26em; }
.rtp-twinkle { animation: rtp-twinkle 1.8s ease-in-out infinite; transform-origin: 50px 50px; }
@keyframes rtp-twinkle { 50% { transform: scale(.55) rotate(45deg); opacity: .6; } }
.rtp-drip { width: .2em; }

/* ---- script ---- */
.rtp-t-script { background: radial-gradient(90cqw 70cqh at 50% 40%, #5a97f6, var(--bg) 70%); }
.rtp-t-script .rtp-word {
  font-family: var(--rtp-script); font-size: min(calc(128cqw / var(--n1)), 30cqh); line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink); translate: 0 -3cqh;
  -webkit-text-stroke: .15em var(--ac); paint-order: stroke fill;
  filter: drop-shadow(0 .035em 0 rgba(0,0,0,.18)) drop-shadow(0 .1em .14em rgba(0,0,0,.28));
}
.rtp-t-script .rtp-ch { animation: rtp-rise 700ms cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 50ms + 140ms); }
@keyframes rtp-rise { from { transform: translateY(.4em) rotate(-10deg) scale(.8); opacity: 0; } 60% { opacity: 1; } }
.rtp-yr {
  right: .1em; top: .5em; font-family: var(--rtp-heavy); font-size: .17em; color: var(--ink);
  -webkit-text-stroke: .32em var(--ac); letter-spacing: 0; line-height: 1;
}
.rtp-sub {
  position: absolute; top: calc(50% + min(calc(128cqw / var(--n1)), 30cqh) * .42); left: 50%; translate: -50% 0;
  width: min(calc(128cqw / var(--n1) * 5.8), 84cqw); display: flex; justify-content: space-between; gap: 2em;
  font-family: var(--rtp-mono); font-size: clamp(9px, 1.45cqw, 18px); letter-spacing: .08em; text-transform: uppercase; color: var(--ac);
}
.rtp-sub span { animation: rtp-fade-in 600ms ease both 700ms; }
.rtp-sub small { font-size: .62em; vertical-align: super; margin-right: .5em; }
.rtp-xbox { width: clamp(12px, 2cqw, 26px); }
.rtp-xbox.rtp-in { animation: rtp-blink 380ms steps(2, end) both; animation-delay: var(--dl); }
@keyframes rtp-blink { from { opacity: 0; } }

/* ---- stretch ---- */
.rtp-t-stretch { place-items: stretch; }
.rtp-meta-serif { position: absolute; font-family: var(--rtp-serif); color: var(--ac); line-height: 1; }
.rtp-stretch-yr { top: 7cqh; left: 3.5cqw; font-size: clamp(14px, 2.6cqw, 34px); }
.rtp-stretch-row {
  position: absolute; left: 1cqw; right: 1cqw; bottom: 30cqh; display: flex; align-items: flex-end; justify-content: space-between;
  font-family: var(--rtp-cond); font-size: min(calc(172cqw / var(--n1)), 30cqh); line-height: .78; text-transform: uppercase; color: var(--ink);
}
.rtp-t-stretch .rtp-ch { transform-origin: 50% 100%; animation: rtp-grow 820ms cubic-bezier(.2,1.25,.35,1) both; animation-delay: calc(var(--i) * 50ms + 120ms); }
@keyframes rtp-grow { from { transform: scaleY(0); } }
.rtp-st { display: inline-block; transform-origin: 50% 100%; scale: 1 var(--sy); rotate: var(--rz); animation: rtp-breathe 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -380ms); }
@keyframes rtp-breathe { 50% { scale: 1 calc(var(--sy) * .84); } }
.rtp-band { position: absolute; left: 0; right: 0; bottom: 0; height: 30cqh; background: linear-gradient(180deg, #2a1650, #0d0a14); }
.rtp-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40cqw 22cqh at 30% 100%, rgba(255,120,80,.22), transparent 70%), radial-gradient(30cqw 18cqh at 75% 0%, rgba(140,90,255,.35), transparent 70%); }
.rtp-stretch-name { left: 4cqw; bottom: 11cqh; text-align: left; font-size: clamp(14px, 2.5cqw, 32px); letter-spacing: .02em; }
.rtp-stretch-name i { display: block; font-family: var(--rtp-mono); font-style: normal; font-size: .38em; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-top: .9em; }

/* ---- vector ---- */
.rtp-t-vector { background-color: var(--bg); background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 3.2cqmin 3.2cqmin; }
.rtp-kicker { position: absolute; top: 9cqh; left: 8cqw; font-family: var(--rtp-heavy); color: var(--ac); font-size: clamp(16px, 3.6cqw, 48px); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.rtp-kicker.rtp-in { animation: rtp-type 700ms steps(9, end) both 200ms; }
@keyframes rtp-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rtp-t-vector .rtp-word {
  font-family: var(--rtp-heavy); font-size: min(calc(104cqw / var(--n2)), 27cqh); line-height: .96; letter-spacing: .1em;
  text-transform: uppercase; translate: 0 6cqh;
}
.rtp-t-vector .rtp-ch { animation: rtp-up 700ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 50ms + 160ms); }
@keyframes rtp-up { from { transform: translateY(40%); opacity: 0; filter: blur(8px); } }
.rtp-eye { left: 50%; top: 50%; width: .66em; translate: -50% -50%; filter: drop-shadow(0 .02em .04em rgba(0,0,0,.3)); }
.rtp-bbox { inset: .02em -.06em .04em -.08em; border: max(1.5px, .012em) solid var(--ac); }
.rtp-bbox.rtp-in { animation: rtp-type 600ms cubic-bezier(.65,0,.35,1) both 700ms; }
.rtp-bbox i { position: absolute; width: .09em; height: .09em; background: var(--ac); border: max(1px, .01em) solid var(--bg); }
.rtp-bbox i:nth-child(1) { left: -.05em; top: -.05em; }
.rtp-bbox i:nth-child(2) { right: -.05em; top: -.05em; }
.rtp-bbox i:nth-child(3) { left: -.05em; bottom: -.05em; }
.rtp-bbox i:nth-child(4) { right: -.05em; bottom: -.05em; }
.rtp-bbox i:nth-child(5) { left: calc(50% - .045em); top: -.05em; }
.rtp-bbox i:nth-child(6) { left: calc(50% - .045em); bottom: -.05em; }
.rtp-cursor { width: .2em; left: 22%; top: -.3em; }
.rtp-cursor-move { translate: calc(var(--rtp-px, 0) * 24cqw) calc(var(--rtp-py, 0) * 18cqh); transition: translate 900ms cubic-bezier(.2,.8,.2,1); }
.rtp-cursor-idle { animation: rtp-idle 4.8s ease-in-out infinite; }
@keyframes rtp-idle { 25% { translate: 1.4cqw 1cqh; } 60% { translate: -1cqw 1.6cqh; } }
.rtp-pen { width: .42em; left: 49%; top: .78em; }
.rtp-rings { width: .3em; right: 20%; top: -.42em; }
.rtp-seal { width: .82em; right: -.5em; bottom: -.08em; }

/* ---- cut-out ---- */
.rtp-t-cutout { background: radial-gradient(80cqw 70cqh at 50% 46%, #1c1c1c, var(--bg) 72%); }
.rtp-cut-row { display: flex; align-items: center; justify-content: center; gap: 0; translate: 0 -2cqh; font-size: min(calc(100cqw / var(--n1)), 28cqh); line-height: 1; }
.rtp-t-cutout .rtp-ch { animation: rtp-paste 420ms cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * 85ms + 120ms); filter: drop-shadow(0 .03em .05em rgba(0,0,0,.55)); }
@keyframes rtp-paste { from { transform: scale(1.7) rotate(-12deg); opacity: 0; } 30% { opacity: 1; } }
.rtp-cut {
  display: inline-block; position: relative; padding: .1em .12em .06em; margin: 0 -.03em; background: var(--ac); color: var(--ink);
  clip-path: var(--clip); rotate: var(--rz); translate: 0 var(--ty); text-transform: uppercase;
}
.rtp-cut[data-inv="true"] { background: #111; color: var(--ac); box-shadow: inset 0 0 0 .05em var(--ac); }
.rtp-cut[data-dots="true"]::after {
  content: ""; position: absolute; left: 0; top: 0; width: 60%; height: 34%;
  background-image: radial-gradient(currentColor 28%, transparent 32%); background-size: .07em .09em; opacity: .9;
}
.rtp-bars { display: flex; gap: .06em; margin-left: .14em; align-self: stretch; padding: .06em 0; }
.rtp-bars i { width: .012em; min-width: 1px; background: var(--ac); opacity: .9; }
.rtp-bars i:nth-child(2) { width: .03em; }
.rtp-foot {
  position: absolute; left: 0; right: 0; top: calc(50% + min(calc(100cqw / var(--n1)), 28cqh) * .66); text-align: center; color: var(--ac);
}
.rtp-foot b { display: block; font-family: var(--rtp-heavy); font-weight: 400; font-size: clamp(11px, 2cqw, 26px); letter-spacing: .02em; text-transform: uppercase; }
.rtp-foot i { display: block; font-family: var(--rtp-mono); font-size: clamp(8px, 1.1cqw, 13px); letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-top: .7em; }
.rtp-foot.rtp-in { animation: rtp-fade-in 600ms ease both 1000ms; }

/* ---- stickers you drop ---- */
.rtp-drops { position: absolute; inset: 0; z-index: 3; pointer-events: none; container-type: size; transition: opacity 400ms ease, transform 600ms cubic-bezier(.7,0,.3,1); }
.rtp-drops[data-gone="true"] { opacity: 0; transform: scale(.94); }
.rtp-drop { position: absolute; width: min(11cqw, 17cqh); translate: -50% -50%; }
.rtp-drop > svg { animation: rtp-slap 520ms cubic-bezier(.2,1.6,.4,1) both; }

/* ---- HUD ---- */
.rtp-hud {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #fff; mix-blend-mode: difference;
  font-family: var(--rtp-mono); font-size: clamp(8px, 1.4vmin, 11px); letter-spacing: .16em; text-transform: uppercase;
  transition: opacity 500ms ease;
}
.rtp-hud[data-gone="true"] { opacity: 0; }
.rtp-hud-top, .rtp-hud-bot { position: absolute; left: clamp(14px, 3vw, 36px); right: clamp(14px, 3vw, 36px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.rtp-hud-top { top: clamp(14px, 3vh, 28px); align-items: flex-start; }
.rtp-hud-top span:nth-child(2) { text-align: center; }
.rtp-hud-top span:nth-child(3) { text-align: right; }
.rtp-hud-bot { bottom: clamp(14px, 3vh, 28px); }
.rtp-hud-take { white-space: nowrap; }
.rtp-hud-hint { opacity: .6; transition: opacity 400ms ease; text-align: center; }
.rtp-hud-hint[data-off="true"] { opacity: 0; }
.rtp-count { font-family: var(--rtp-heavy); font-size: clamp(30px, 7vmin, 76px); letter-spacing: -.04em; line-height: .78; font-variant-numeric: tabular-nums; }
.rtp-count small { font-family: var(--rtp-mono); font-size: 11px; letter-spacing: .16em; vertical-align: top; margin-left: .3em; }
.rtp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 560px) { .rtp-hud-top span:nth-child(2), .rtp-hud-hint { display: none; } }

/* Skip button (added for the site: lets visitors go straight to the page) */
.rtp-skip {
  position: absolute; z-index: 6; left: 50%; bottom: calc(clamp(14px, 3vh, 28px) + 40px); translate: -50% 0;
  font: 700 11px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #111; background: #fff; border: 0; border-radius: 99px; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: opacity 400ms ease, transform 200ms ease;
}
.rtp-skip:hover { transform: translateY(-2px); }
.rtp-skip:focus-visible { outline: 2px solid #d8f03c; outline-offset: 3px; }
.rtp-skip[data-gone="true"] { opacity: 0; pointer-events: none; }

/* ---- moodboard ---- */
.rtp-board {
  position: absolute; inset: 0; z-index: 2; display: grid; padding: var(--gap); gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
}
.rtp-board[data-phase="zoom"] { animation: rtp-zoom 1300ms cubic-bezier(.76,0,.2,1) both; }
@keyframes rtp-zoom { from { transform: scale(var(--zs)); } }
.rtp-cell { position: relative; overflow: hidden; border-radius: var(--rad); contain: strict; }
.rtp-board[data-phase="zoom"] .rtp-cell { animation: rtp-round 1300ms cubic-bezier(.76,0,.2,1) both; }
@keyframes rtp-round { from { border-radius: 0; } }
.rtp-board[data-phase="scatter"] .rtp-cell { animation: rtp-fly 1000ms cubic-bezier(.55,0,.8,.25) both; animation-delay: var(--sd); }
@keyframes rtp-fly { to { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(.9); opacity: 0; } }
.rtp-tile { position: absolute; inset: 0; container-type: size; padding: 7cqmin; display: flex; flex-direction: column; justify-content: space-between; }
.rtp-tile-index { background: #f4f0e6; color: #121212; }
.rtp-tile-count { background: #d8f03c; color: #121212; }
.rtp-tile-k { font-family: var(--rtp-mono); font-size: max(7px, 5cqmin); letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; }
.rtp-tile-name { font-family: var(--rtp-serif); font-size: 15cqmin; line-height: .95; letter-spacing: -.01em; }
.rtp-tile-roles { font-family: var(--rtp-mono); font-size: max(7px, 4.6cqmin); letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; }
.rtp-tile-roles span { opacity: .45; margin-right: .8em; }
.rtp-tile-big { font-family: var(--rtp-heavy); font-size: 46cqmin; line-height: .8; letter-spacing: -.05em; }

.rtp-grain {
  position: absolute; inset: -50%; z-index: 5; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: rtp-grain 900ms steps(4) infinite;
}
.rtp-gate[data-phase="scatter"] .rtp-grain { opacity: 0; transition: opacity 400ms ease; }
@keyframes rtp-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }
.rtp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .rtp-in, .rtp-loop, .rtp-slide, .rtp-grain { animation: none !important; }
  .rtp-board[data-phase="zoom"], .rtp-board[data-phase="zoom"] .rtp-cell { animation: none; }
  .rtp-board[data-phase="scatter"] .rtp-cell { animation: rtp-out 500ms ease both; }
  .rtp-par, .rtp-cursor-move { transition: none; translate: none; }
}
@keyframes rtp-out { to { opacity: 0; } }