/* ATHANOR — skin + motion on the theme.css palettes.
   Chamfered panels, display type, block gauges, lit ground. Numbers stay mono, states stay glyph + word.
   Motion: one easing family, nothing jumps on refresh, prefers-reduced-motion stops everything. */

@property --bg { syntax: "<color>"; inherits: true; initial-value: #132245; }
@property --bg-glow { syntax: "<color>"; inherits: true; initial-value: #1f3768; }
@property --bg-raised { syntax: "<color>"; inherits: true; initial-value: #1a2c55; }
@property --bg-sunken { syntax: "<color>"; inherits: true; initial-value: #0d1833; }
@property --bg-hover { syntax: "<color>"; inherits: true; initial-value: #223868; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #283f6e; }
@property --line-strong { syntax: "<color>"; inherits: true; initial-value: #3e5a8f; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #f3eee0; }
@property --text-dim { syntax: "<color>"; inherits: true; initial-value: #b2bdd6; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #e9b949; }
@property --accent-ink { syntax: "<color>"; inherits: true; initial-value: #0d1833; }
@property --accent-2 { syntax: "<color>"; inherits: true; initial-value: #7fbfe0; }
@property --syn-function { syntax: "<color>"; inherits: true; initial-value: #92cbe8; }
@property --text-faint { syntax: "<color>"; inherits: true; initial-value: #7886a8; }
@property --ok { syntax: "<color>"; inherits: true; initial-value: #6ee7a8; }
@property --warn { syntax: "<color>"; inherits: true; initial-value: #ffb454; }
@property --danger { syntax: "<color>"; inherits: true; initial-value: #ff8080; }
@property --highlight { syntax: "<color>"; inherits: true; initial-value: rgba(242, 193, 78, .3); }
@property --syn-keyword { syntax: "<color>"; inherits: true; initial-value: #f0cc7a; }
@property --syn-type { syntax: "<color>"; inherits: true; initial-value: #92cbe8; }
@property --syn-variable { syntax: "<color>"; inherits: true; initial-value: #ffb454; }
@property --syn-param { syntax: "<color>"; inherits: true; initial-value: #d6b8ff; }
@property --syn-constant { syntax: "<color>"; inherits: true; initial-value: #9ff0c3; }
@property --syn-global { syntax: "<color>"; inherits: true; initial-value: #7fe0d6; }
@property --syn-comment { syntax: "<color>"; inherits: true; initial-value: #d4c0ff; }
@property --syn-error { syntax: "<color>"; inherits: true; initial-value: #ff8a8a; }
@property --syn-mnemonic { syntax: "<color>"; inherits: true; initial-value: #b9e6ff; }
@property --syn-external { syntax: "<color>"; inherits: true; initial-value: #ff9ee0; }
@property --series-1 { syntax: "<color>"; inherits: true; initial-value: #e9b949; }
@property --series-2 { syntax: "<color>"; inherits: true; initial-value: #7fbfe0; }
@property --series-3 { syntax: "<color>"; inherits: true; initial-value: #6ee7a8; }
@property --series-4 { syntax: "<color>"; inherits: true; initial-value: #ff9ec7; }
@property --series-5 { syntax: "<color>"; inherits: true; initial-value: #d4c0ff; }
@property --series-upstream { syntax: "<color>"; inherits: true; initial-value: #9fb0d6; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: rgba(233, 185, 73, .12); }
@property --glow { syntax: "<color>"; inherits: true; initial-value: rgba(233, 185, 73, .35); }
@property --grid { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .05); }

:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --boot: 0s; }
/* Every colour token is registered and eases here, on the element the palettes set them on: light Paper
   used to snap its unregistered tokens (faint text, states, grid, tint) while the rest faded. */
:root { transition: --bg .8s var(--ease-io), --bg-glow .8s var(--ease-io), --bg-raised .8s var(--ease-io), --bg-sunken .8s var(--ease-io), --bg-hover .8s var(--ease-io), --line .8s var(--ease-io), --line-strong .8s var(--ease-io), --text .8s var(--ease-io), --text-dim .8s var(--ease-io), --text-faint .8s var(--ease-io), --accent .8s var(--ease-io), --accent-ink .8s var(--ease-io), --accent-2 .8s var(--ease-io), --ok .8s var(--ease-io), --warn .8s var(--ease-io), --danger .8s var(--ease-io), --highlight .8s var(--ease-io), --syn-keyword .8s var(--ease-io), --syn-type .8s var(--ease-io), --syn-function .8s var(--ease-io), --syn-variable .8s var(--ease-io), --syn-param .8s var(--ease-io), --syn-constant .8s var(--ease-io), --syn-global .8s var(--ease-io), --syn-comment .8s var(--ease-io), --syn-error .8s var(--ease-io), --syn-mnemonic .8s var(--ease-io), --syn-external .8s var(--ease-io), --series-1 .8s var(--ease-io), --series-2 .8s var(--ease-io), --series-3 .8s var(--ease-io), --series-4 .8s var(--ease-io), --series-5 .8s var(--ease-io), --series-upstream .8s var(--ease-io), --tint .8s var(--ease-io), --glow .8s var(--ease-io), --grid .8s var(--ease-io); }
:root.theme-swap { transition: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .7s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
.app, .app * { font-synthesis: none; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--highlight); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.fn { font-family: var(--font-mono); color: var(--syn-function); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 600 var(--text-xs)/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }

.app {
  --boot: 0s;
  min-height: 100vh; color: var(--text); font: var(--text-md)/1.5 var(--font-ui);
  background:
    radial-gradient(circle, var(--grid) 1px, transparent 1.5px) 0 0 / var(--grid-step) var(--grid-step),
    radial-gradient(120% 70% at 85% -10%, var(--bg-glow), transparent 60%),
    radial-gradient(80% 60% at -10% 110%, var(--bg-sunken), transparent 70%),
    var(--bg);
}
.app { --lead: 0s; }
/* --lead: entry delay. The boot length during the intro, nothing when a view is re-entered. */
.intro .app, .intro .enter { --lead: var(--boot); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 100vh; }

.side {
  grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) 0 var(--space-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sunken) 80%, transparent), transparent 130%);
  border-right: var(--hairline) solid var(--line);
  animation: slideIn .9s var(--ease) var(--boot) both;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-24px); } }

.sigil-brand { display: grid; justify-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-2); }
.sigil { position: relative; width: 224px; height: 224px; }
.sigil svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* One div per ring: Brave repaints a rotating svg on the main thread every frame, a rotating div stays on the compositor. */
.sigil .ring { position: absolute; inset: 0; transform-origin: 50% 50%; }
.sigil .r0 { animation: spin 160s linear infinite; }
.sigil .motto { font: 400 8.4px/1 var(--font-display); letter-spacing: 1px; fill: var(--text-dim); opacity: 0; animation: fadeIn 1.4s var(--ease) calc(var(--boot) + .9s) forwards; }
.sigil .motto .glyph { fill: var(--accent); font-family: var(--font-mono); }
.sigil .motto .sep { fill: var(--accent); }
.sigil .r1 { animation: spin 90s linear infinite; }
.sigil .r2 { animation: spin 140s linear infinite reverse; }
.sigil .r3 { animation: spin 220s linear infinite; }
.sigil .stroke { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.sigil .stroke.gold { stroke: var(--accent); }
.sigil .ticks { fill: none; stroke: var(--accent); stroke-width: 5; opacity: .55; }
.sigil .node { fill: var(--accent); }
.sigil .draw-in { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-io) calc(var(--boot) + .2s) forwards; }
.sigil img {
  position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; margin: -68px 0 0 -68px;
  filter: drop-shadow(0 0 16px var(--glow));
  animation: emblemIn 1.1s cubic-bezier(.2, .9, .25, 1.2) var(--boot) both;
}
/* The float sits on its own box: sharing transform with emblemIn on the img keeps it off the compositor. */
.sigil .emblem { position: absolute; inset: 0; pointer-events: none; animation: float 7s ease-in-out calc(var(--boot) + 1.1s) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.wordmark { text-align: center; display: grid; gap: 6px; }
.wm-name { font: 400 30px/1 var(--font-brand); letter-spacing: .1em; margin-right: -.1em; text-transform: uppercase; text-shadow: 0 0 24px var(--glow); }
.wm-tag { font: 500 10px/1 var(--font-mono); letter-spacing: .26em; color: var(--accent); }
.wm-sub { font: var(--text-xs) var(--font-mono); color: var(--text-dim); }

.side .label { padding: 0 var(--space-5); margin-bottom: var(--space-2); }
.nav { position: relative; display: grid; gap: 2px; padding: 0 var(--space-3); }
.nav-ind {
  position: absolute; left: var(--space-3); right: var(--space-3); top: 0; height: 40px; background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  transition: transform .55s var(--ease-io), background-color .4s;
}
.nav button {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 var(--space-3);
  border: 0; background: none; color: var(--text-dim); text-align: left; cursor: pointer;
  font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.nav button:hover { color: var(--text); padding-left: calc(var(--space-3) + 4px); }
.nav button.on { color: var(--accent-ink); }
.nav button.on:hover { padding-left: var(--space-3); }
.nav svg { flex: none; }
.nav .count { margin-left: auto; margin-right: 8px; font: 500 var(--text-xs) var(--font-mono); letter-spacing: 0; text-transform: none; opacity: .85; }
.proj {
  margin: 0 var(--space-4); padding: var(--space-3); display: grid; gap: 8px; text-align: left; width: calc(100% - 2 * var(--space-4)); cursor: pointer;
  background: var(--bg-raised); border: var(--hairline) solid var(--line-strong);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: border-color .3s, transform .3s var(--ease);
}
.proj:hover { border-color: var(--accent); transform: translateY(-2px); }
.proj-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.proj-top strong { font: 400 14px/1.2 var(--font-title); letter-spacing: .04em; text-transform: uppercase; }
.proj-top span { font: 500 var(--text-md) var(--font-mono); color: var(--accent); }
.mini-agents { display: grid; gap: 4px; padding: 0 var(--space-5); }
.mini-agents div { display: flex; justify-content: space-between; gap: var(--space-2); font: var(--text-xs)/1.9 var(--font-mono); }
.side-foot { margin-top: auto; padding: var(--space-3) var(--space-5) 0; border-top: var(--hairline) dashed var(--line); font: var(--text-xs)/1.5 var(--font-mono); color: var(--text-dim); }

/* ---------- Top bar ---------- */
.topbar {
  grid-column: 2; grid-row: 1; position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: 14px var(--space-6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 85%, transparent), color-mix(in srgb, var(--bg-sunken) 70%, transparent));
  border-bottom: var(--hairline) solid var(--line-strong);
  animation: fadeDown .8s var(--ease) calc(var(--boot) + .1s) both;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; transform-origin: left;
  background: linear-gradient(90deg, var(--accent) 0 58%, var(--accent-2) 58% 84%, var(--ok) 84% 100%);
  animation: grow 1.2s var(--ease-io) calc(var(--boot) + .3s) both;
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } }
@keyframes grow { from { transform: scaleX(0); } }
.brand-mini { display: none; align-items: center; gap: 10px; font: 400 22px/1 var(--font-brand); letter-spacing: .08em; text-transform: uppercase; }
.brand-mini img { width: 40px; height: 40px; }
.crumb { color: var(--text-dim); font: var(--text-sm) var(--font-mono); white-space: nowrap; }
.crumb b { display: inline-block; color: var(--accent); font-weight: 500; }
.crumb b.fa { animation: crumbA .5s var(--ease) both; } .crumb b.fb { animation: crumbB .5s var(--ease) both; }
@keyframes crumbA { from { opacity: 0; transform: translateY(8px); } }
@keyframes crumbB { from { opacity: 0; transform: translateY(8px); } }
.search {
  flex: 1 1 260px; max-width: 480px; display: flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 12px;
  background: var(--bg-sunken); border: var(--hairline) solid var(--line-strong); color: var(--text-dim);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .3s, color .3s, box-shadow .3s;
}
.search:focus-within { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 24px -8px var(--glow); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font: var(--text-sm) var(--font-mono); }
.search input::placeholder { color: var(--text-dim); }
.search kbd { font: 10px/1 var(--font-mono); border: var(--hairline) solid var(--line-strong); padding: 3px 6px; color: var(--text-dim); background: var(--bg-raised); }
.status { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.conn { position: relative; display: flex; align-items: center; font: var(--text-xs) var(--font-mono); color: var(--text-dim); white-space: nowrap; }
/* The ping ring is a scaled, fading square (compositor) instead of an animated box-shadow (repaint every frame). */
.conn::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--ok); }
.conn::after { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--ok); opacity: 0; pointer-events: none; animation: ping 3s ease-out infinite; }
.conn.fa { animation: flashA 1s var(--ease); } .conn.fb { animation: flashB 1s var(--ease); }
@keyframes flashA { from { color: var(--accent); } } @keyframes flashB { from { color: var(--accent); } }
@keyframes ping { 0% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: scale(3.286); } }
.conn.lost { color: var(--danger); }
.conn.lost::before { content: "[x]"; width: auto; height: auto; background: none; }
.conn.lost::after { content: none; }
.run-detail { font: var(--text-xs) var(--font-mono); color: var(--text-dim); max-width: 240px; }

.power {
  --tone: var(--ok); height: 38px; padding: 0 16px; min-width: 132px;
  font: 700 var(--text-sm)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tone); background: var(--bg-sunken); border: var(--hairline) solid var(--tone); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background-color .25s, color .25s, transform .2s var(--ease);
}
.power::before { content: "[>] "; font-family: var(--font-mono); }
.power:hover { background: var(--tone); color: var(--bg-sunken); }
.power:active { transform: scale(.96); }
.power.on { --tone: var(--danger); }
.power.on::before { content: "[\25A0] "; }
.power.stopping {
  --tone: var(--warn); cursor: wait;
  background: linear-gradient(color-mix(in srgb, var(--warn) 30%, transparent) 0 0) 0 0 / 0% 100% no-repeat, var(--bg-sunken);
  animation: fillup 1.8s linear forwards;
}
.power.stopping:hover { color: var(--tone); }
.power.stopping::before { content: "[..] "; display: inline-block; white-space: pre; animation: breathe .6s ease-in-out infinite alternate; }
@keyframes fillup { to { background-size: 100% 100%, auto; } }

.theme-picker { display: flex; gap: 5px; padding: 4px; background: var(--bg-sunken); border: var(--hairline) solid var(--line); }
.theme-picker button { width: 22px; height: 22px; padding: 0; cursor: pointer; border: 0; background: linear-gradient(135deg, var(--bg) 0 50%, var(--accent) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .25s var(--ease); }
.theme-picker button:hover { transform: scale(1.18) rotate(-6deg); }
.theme-picker button[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }

.alert { grid-column: 2; grid-row: 2; margin: 4px 0 0; padding: 10px var(--space-6); background: var(--bg-raised); box-shadow: inset 4px 0 0 var(--danger); border-bottom: var(--hairline) solid var(--danger); font: var(--text-sm) var(--font-mono); animation: fadeDown .5s var(--ease) both; }
.alert::before { content: "[x] "; color: var(--danger); font-weight: 700; }

/* ---------- Workspace ---------- */
.work { grid-column: 2; grid-row: 3; min-width: 0; padding: var(--space-6) var(--space-6) var(--space-7); }
.view { display: grid; gap: var(--space-5); align-content: start; }
.view > * { animation: none; }
:is(.intro .view, .view.enter) > * { animation: rise .75s var(--ease) both; animation-delay: var(--lead); }
:is(.intro .view, .view.enter) > :nth-child(2) { animation-delay: calc(var(--lead) + .07s); }
:is(.intro .view, .view.enter) > :nth-child(3) { animation-delay: calc(var(--lead) + .14s); }
:is(.intro .view, .view.enter) > :nth-child(4) { animation-delay: calc(var(--lead) + .21s); }
:is(.intro .view, .view.enter) > :nth-child(5) { animation-delay: calc(var(--lead) + .28s); }
:is(.intro .view, .view.enter) > :nth-child(n+6) { animation-delay: calc(var(--lead) + .35s); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes breathe { from { opacity: .4; } to { opacity: 1; } }

.view-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.view-head h1 { font: 400 30px/1.1 var(--font-title); letter-spacing: .04em; text-transform: uppercase; }
.view-head p { color: var(--text-dim); font: var(--text-sm) var(--font-mono); margin-top: 4px; }


/* ---------- Design motion (Claude Design bundle, bound to Athanor's own classes) ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes emblemIn { from { opacity: 0; transform: scale(.55) rotate(-24deg); filter: blur(10px); } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; transform: scale(1.06); filter: blur(8px); } }
@keyframes letterIn { from { opacity: 0; transform: translateY(18px) scale(.9); filter: blur(8px); } }
@keyframes cardA { from { opacity: 0; transform: translateY(24px) rotateX(18deg) scale(.94); filter: blur(4px); } }
@keyframes rowA { from { opacity: 0; transform: translateX(-14px); } }
@keyframes cellIn { from { opacity: 0; transform: scale(.1); } }
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }
@keyframes barIn { from { transform: scaleX(0); } }
@keyframes march { to { background-position: 17px 0; } }
@keyframes stageIn { from { opacity: 0; transform: scale(.9); filter: blur(4px); } }
@keyframes flowR { to { background-position: 12px 0; } }
@keyframes flowD { to { background-position: 0 12px; } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px -2px var(--warn); } }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, 24px); } 12%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Boot screen, built by theme.js once per tab session. */
.boot {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px; pointer-events: none;
  background: radial-gradient(55% 55% at 50% 45%, var(--bg-glow), var(--bg) 75%);
  animation: bootOut .75s var(--ease-io) 2.2s forwards;
}
.boot-mark { position: relative; width: 240px; height: 240px; }
.boot-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.boot-mark img { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; animation: emblemIn 1s cubic-bezier(.2, .9, .25, 1.25) .45s both; filter: drop-shadow(0 0 22px var(--glow)); }
.boot .draw { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease-io) forwards; }
.boot .draw.d2 { animation-delay: .25s; stroke: var(--line-strong); }
.boot .draw.d3 { animation-delay: .5s; stroke-width: .8; }
.boot-word { font: 400 56px/1 var(--font-brand); letter-spacing: .12em; margin-right: -.12em; text-transform: uppercase; color: var(--text); }
.boot-word span { display: inline-block; animation: letterIn .7s var(--ease) both; }
.boot-tag { font: 500 11px/1 var(--font-mono); letter-spacing: .32em; color: var(--accent); animation: fadeUp .8s var(--ease) 1.3s both; }

/* Library cards. */
:is(.intro, .enter) .game { animation: cardA .6s var(--ease) both; animation-delay: var(--lead); }
:is(.intro, .enter) .game:nth-child(2) { animation-delay: calc(var(--lead) + .05s); }
:is(.intro, .enter) .game:nth-child(3) { animation-delay: calc(var(--lead) + .1s); }
:is(.intro, .enter) .game:nth-child(4) { animation-delay: calc(var(--lead) + .15s); }
:is(.intro, .enter) .game:nth-child(5) { animation-delay: calc(var(--lead) + .2s); }
:is(.intro, .enter) .game:nth-child(n+6) { animation-delay: calc(var(--lead) + .25s); }

/* Table rows. */
:is(.intro, .enter) tbody tr { animation: rowA .45s var(--ease) both; animation-delay: calc(var(--lead) + .3s); }
:is(.intro, .enter) tbody tr:nth-child(2) { animation-delay: calc(var(--lead) + .34s); }
:is(.intro, .enter) tbody tr:nth-child(3) { animation-delay: calc(var(--lead) + .38s); }
:is(.intro, .enter) tbody tr:nth-child(4) { animation-delay: calc(var(--lead) + .42s); }
:is(.intro, .enter) tbody tr:nth-child(5) { animation-delay: calc(var(--lead) + .46s); }
:is(.intro, .enter) tbody tr:nth-child(6) { animation-delay: calc(var(--lead) + .5s); }
:is(.intro, .enter) tbody tr:nth-child(7) { animation-delay: calc(var(--lead) + .54s); }
:is(.intro, .enter) tbody tr:nth-child(n+8) { animation-delay: calc(var(--lead) + .58s); }

/* Function map: a diagonal wave (--d set per cell by app.js); the cell awaiting its check ripples. */
:is(.intro, .enter) .function-cell { animation: cellIn .5s var(--ease) both; animation-delay: calc(var(--lead) + var(--d, 0ms)); }
.function-cell { position: relative; transition: transform .2s var(--ease), filter .2s; }
.function-cell:hover { transform: scale(1.8); z-index: 1; filter: brightness(1.2); }
.function-cell.solved::after { content: ""; position: absolute; inset: -2px; border: 1px solid var(--ok); animation: ripple 1.6s ease-out infinite; pointer-events: none; }

/* Gauges grow from the left; a gauge with claims in flight marches. */
:is(.intro, .enter) .meter :is(progress, .shine) { transform-origin: left; animation: barIn 1.2s var(--ease-io) both; animation-delay: calc(var(--lead) + .3s); }
.meter.busy progress::-webkit-progress-value { background: repeating-linear-gradient(-45deg, var(--warn) 0 6px, color-mix(in srgb, var(--warn) 65%, transparent) 6px 12px) 0 0 / 17px 17px; animation: march 1s linear infinite; }
.meter.busy progress::-moz-progress-bar { background: repeating-linear-gradient(-45deg, var(--warn) 0 6px, color-mix(in srgb, var(--warn) 65%, transparent) 6px 12px) 0 0 / 17px 17px; }

/* Pipeline flow: candidate to merged. */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 36px; row-gap: 44px; margin: var(--space-4) 0 var(--space-5); }
.stage { position: relative; display: grid; gap: 2px; padding: var(--space-4); background: var(--bg-raised); border: var(--hairline) solid var(--line-strong); transition: transform .35s var(--ease); }
:is(.intro, .enter) .stage { animation: stageIn .6s var(--ease) both; }
:is(.intro, .enter) .flow > :nth-child(1) { animation-delay: calc(var(--lead) + .1s); }
:is(.intro, .enter) .flow > :nth-child(2) { animation-delay: calc(var(--lead) + .2s); }
:is(.intro, .enter) .flow > :nth-child(3) { animation-delay: calc(var(--lead) + .3s); }
:is(.intro, .enter) .flow > :nth-child(4) { animation-delay: calc(var(--lead) + .4s); }
:is(.intro, .enter) .flow > :nth-child(5) { animation-delay: calc(var(--lead) + .5s); }
:is(.intro, .enter) .flow > :nth-child(6) { animation-delay: calc(var(--lead) + .62s); }
:is(.intro, .enter) .flow > :nth-child(7) { animation-delay: calc(var(--lead) + .7s); }
.stage:hover { transform: translateY(-3px); }
.stage b { font: 500 30px/1.1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stage small { font: var(--text-xs) var(--font-mono); color: var(--text-dim); }
.stage.next::after { content: ""; position: absolute; top: 50%; right: -37px; width: 36px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px) 0 0 / 12px 2px; animation: flowR .7s linear infinite; }
.stage.next::before { content: ""; position: absolute; top: calc(50% - 5px); right: -38px; border: 6px solid transparent; border-left: 8px solid var(--accent); border-right: 0; z-index: 1; }
.stage.down::after { content: ""; position: absolute; left: 50%; top: -45px; width: 2px; height: 44px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px) 0 0 / 2px 12px; animation: flowD .7s linear infinite; }
.stage.live { border-color: var(--warn); animation: glowPulse 2.4s ease-in-out infinite; }
:is(.intro, .enter) .stage.live { animation: stageIn .6s var(--ease) both, glowPulse 2.4s ease-in-out infinite; }
.stage.ok { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 18%, var(--bg-raised)), var(--bg-raised)); border-color: var(--ok); }
.stage.ok b { color: var(--ok); }
.stage.warn b { color: var(--accent-2); }
.stage.bad b { color: var(--danger); }
.stage.col4 { grid-column: 4; }
.stage.col5 { grid-column: 5; }
.stage .live { color: var(--warn); }
.stage .live::before { content: "[>] "; display: inline-block; white-space: pre; animation: breathe 1.2s ease-in-out infinite alternate; }
.dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.dots i { width: 5px; height: 5px; background: var(--accent); animation: hop 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stage.col4, .stage.col5 { grid-column: auto; }
  .stage.next::after, .stage.next::before, .stage.down::after { display: none; }
}

/* Toast. */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 40; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 12px 18px;
  background: var(--bg-raised); border: var(--hairline) solid var(--accent); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); font: var(--text-sm) var(--font-mono);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); animation: toastIn 2.6s var(--ease) both; pointer-events: none;
}
.toast::before { content: "[i]"; color: var(--accent); font-weight: 600; }
.toast.bad { border-color: var(--danger); }
.toast.bad::before { content: "[x]"; color: var(--danger); }

/* Lite keeps the entries and drops every loop; Ultra adds depth. */
:root[data-motion=lite] .stage, :root[data-motion=lite] .stage::after, :root[data-motion=lite] .function-cell::after, :root[data-motion=lite] .dots i,
:root[data-motion=lite] .stage .live::before, :root[data-motion=lite] .meter progress::-webkit-progress-value { animation-iteration-count: 1 !important; }
/* The toast stays readable when motion is off: it is removed by script, not by its animation. */
:root[data-motion=off] .toast { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none !important; } }
:root[data-motion=ultra] .game:hover .cover-btn { transform: translateY(-10px) rotateX(8deg) rotateY(-9deg) scale(1.02); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); }
:root[data-motion=ultra] .stage:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 16px 34px -18px var(--glow); }
:root[data-motion=ultra] .function-cell.matched { box-shadow: 0 0 6px -1px var(--glow); }