/* Variant: Ring — a 3D carousel of app windows rotating beneath the headline. Dark violet. */
:root {
  --bg: #0e0a1e; --surface: #18122e; --muted: #120d26; --ink: #f3efff; --ink-2: #a49cc4; --line: #2a2148;
  --accent: #b18cff; --accent-ink: #120a24; --accent-soft: #2a1f50; --green-soft: #1c1840; --amber-soft: #2e2238;
  --night: #18122e; --night-2: #211a3e; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #f3efff; --night-ink-2: #a49cc4;
  --ui-bg: #ffffff; --ui-line: #eceaf4; --ui-fill: #e2dfee; --ui-fill-2: #f3f1f8; --ui-strong: #1a1430; --ui-accent: #8a5cff; --ui-img: #efe9ff;
  --ui-tint-a: #e4dbff; --ui-tint-b: #ffe0ec; --ui-tint-c: #ffecd6;
  color-scheme: dark;
}
.rg-hero { overflow: hidden; background: radial-gradient(60rem 26rem at 50% 100%, rgba(140, 90, 255, 0.28), transparent 70%); }
.rg-inner { padding-bottom: 0; }
.rg { height: clamp(16rem, 28vw, 22rem); margin-top: 1rem; perspective: 1400px; }
.rg-spin { --r: clamp(14rem, 30vw, 26rem); position: relative; width: clamp(10rem, 16vw, 14rem); height: 100%; margin-inline: auto; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg); }
.rg-i { position: absolute; inset: 20% 0 auto; transform-style: preserve-3d; }
.rg-i .ui { box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6); }
.rg-i--1 { transform: rotateY(0deg) translateZ(var(--r)); } .rg-i--2 { transform: rotateY(45deg) translateZ(var(--r)); }
.rg-i--3 { transform: rotateY(90deg) translateZ(var(--r)); } .rg-i--4 { transform: rotateY(135deg) translateZ(var(--r)); }
.rg-i--5 { transform: rotateY(180deg) translateZ(var(--r)); } .rg-i--6 { transform: rotateY(225deg) translateZ(var(--r)); }
.rg-i--7 { transform: rotateY(270deg) translateZ(var(--r)); } .rg-i--8 { transform: rotateY(315deg) translateZ(var(--r)); }
@media (prefers-reduced-motion: no-preference) { .rg-spin { animation: rg-turn 40s linear infinite; } @keyframes rg-turn { from { transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(0deg); } to { transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(-360deg); } } }
.tile--dark { background: linear-gradient(160deg, #2a1f50, #18122e 70%); }