.rm { --grad: linear-gradient(135deg, #7B3FF2, #2F5BEA); --glow: rgb(91 76 240 / .35); position: relative; padding-bottom: clamp(40px, 7vw, 72px); }
:root[data-theme="dark"] .rm { --glow: rgb(123 110 255 / .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rm { --glow: rgb(123 110 255 / .45); } }
.rm-back { display: inline-flex; gap: 6px; margin-top: clamp(24px, 4vw, 40px); font-size: 14px; color: var(--muted); text-decoration: none; }
.rm-back:hover { color: var(--accent); }
.rm-hero { display: grid; gap: 12px; padding-block: 18px 28px; }
.rm-eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rm-hero h1 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; letter-spacing: -0.045em;
  text-wrap: balance; width: fit-content; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rm-hero p { margin: 0; color: var(--muted); max-width: 64ch; line-height: 1.65; }

.rm-panel {
  max-width: 860px; border-radius: 18px; padding: clamp(18px, 3vw, 28px);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  box-shadow: 0 0 0 1px var(--rule), 0 24px 60px -40px var(--glow);
}
.rm-panel + .rm-panel { margin-top: 18px; }
.rm-phead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; }
.rm .ver { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.rm .pill { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.rm .pill.live { color: var(--live); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 45%, transparent); }
.rm .pill.live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--live); vertical-align: 1px; }
.rm .pill.road { color: #fff; background: var(--grad); }
.rm .note { flex-basis: 100%; margin: 0; font: 400 14px/1.5 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); }
.ok { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad); }

.meter { display: grid; gap: 10px; margin-bottom: 26px; }
.meter-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.meter-top b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.segs { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.segs i { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--rule) 80%, transparent); }
.segs i.on { background: var(--grad); }
.segs i.cur { position: relative; overflow: hidden; background: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.segs i.cur::after { content: ""; position: absolute; inset: 0; background: var(--grad); animation: rm-breathe 1.6s ease-in-out infinite; }

.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before, .tl::after { content: ""; position: absolute; left: 13px; top: 14px; width: 2px; border-radius: 2px; }
.tl::before { bottom: 14px; background: var(--rule); }
.tl::after { height: var(--fill, 0px); background: linear-gradient(180deg, #7B3FF2, #2F5BEA); box-shadow: 0 0 12px var(--glow); }
.st { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-block: 9px; }
.node { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.done .node { color: #fff; background: var(--grad); box-shadow: 0 0 0 4px var(--surface); }
.plan .node { background: var(--surface); box-shadow: inset 0 0 0 2px var(--rule), 0 0 0 4px var(--surface); }
.now .node { background: var(--surface); box-shadow: 0 0 0 4px var(--surface); }
.now .node::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, #7B3FF2 65%, #2F5BEA);
  -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px);
  animation: rm-spin 1s linear infinite; }
.now .node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 60%, transparent); animation: rm-pulse 2s ease-out infinite; }
.bd { display: grid; gap: 2px; align-content: center; min-height: 28px; min-width: 0; }
.ph { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.done .ph { color: var(--accent); }
.st .name { font-weight: 600; }
.plan .name { color: var(--muted); font-weight: 500; }

.now .bd { gap: 10px; padding: 16px; border-radius: 14px; margin-block: 4px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--grad) border-box; border: 1px solid transparent;
  box-shadow: 0 18px 40px -26px var(--glow); }
.now-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.now .name { font-size: 18px; }
.tag { margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 6px 10px; border-radius: 999px; background: var(--grad); }
.tag .dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: rm-dots 1.4s steps(4, end) infinite; }
.bar { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--rule) 80%, transparent); }
.bar b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; overflow: hidden; background: var(--grad); }
.bar b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-100%); animation: rm-shine 1.8s ease-in-out infinite; }
.steps { display: flex; justify-content: space-between; align-items: baseline; font: 400 12px/1 var(--mono); color: var(--muted); }
.steps .pct { color: var(--ink); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }

@keyframes rm-spin { to { transform: rotate(1turn); } }
@keyframes rm-shine { to { transform: translateX(100%); } }
@keyframes rm-pulse { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes rm-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rm-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) {
  .now .node::before, .now .node::after, .bar b::after, .segs i.cur::after, .tag .dots::after { animation: none; }
}
@media (max-width: 520px) { .tag { margin-left: 0; } }