/* Feature pages (2026-10-23): /features/receipt, /features/rules, /features/limits.
   One headline, one sentence, one animated sample card, at most three sections.
   Base styles are the finished frame, so reduced motion (OS setting or html.rm) shows the end state and nothing moves.
   Motion is transform and opacity only, and starts when the card scrolls into view (feature.js adds .in). */
.fp-hero { padding: 96px 0 40px; text-align: center; }
.fp-hero h1 { max-width: 760px; margin: 18px auto 0; }
.fp-hero .lede { max-width: 540px; margin: 18px auto 0; }
.fp-stage { padding: 24px 0 96px; }
.fp-stage .wrap { display: flex; justify-content: center; }
.fp-card { width: 100%; max-width: 620px; text-align: left; }
@media (max-width: 700px) { .fp-hero { padding: 56px 0 24px; } .fp-stage { padding-bottom: 56px; } }

.fp-three { padding: 96px 0; }
.fp-three ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }   /* site 2: no grid of boxes */
.fp-three li { padding: 20px 0 0; border-top: 1px solid var(--line-1); font-size: var(--t-base); line-height: 22px; color: var(--fg-2); }
.fp-three li b { display: block; margin-bottom: 6px; font: 500 var(--t-md)/22px var(--font-ui); color: var(--fg-0); }
@media (max-width: 800px) { .fp-three ul { grid-template-columns: minmax(0, 1fr); } .fp-three { padding: 48px 0; } }
.fp-end { padding: 88px 0; text-align: center; border-top: 1px solid var(--line-1); }
.fp-end h2 { max-width: 640px; margin: 0 auto; }
.fp-end .ctas { justify-content: center; margin-top: 26px; }
.fp-note { margin: 14px auto 0; text-align: center; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }

/* the animation gate: hidden only while the script waits for the card to scroll into view */
.js .fp-card:not(.in) [data-seq] { opacity: 0; }
.fp-card.play [data-seq] { animation: fp-in 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes fp-in { from { opacity: 0; transform: translateY(8px); } }

/* tabs */
.fp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-1); background: var(--bg-0); overflow-x: auto; }
.fp-tabs button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 11px 16px; border: 0; border-right: 1px solid var(--line-1); background: transparent; color: var(--fg-2); font: 500 var(--t-sm)/16px var(--font-mono); cursor: pointer; position: relative; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.fp-tabs button:last-child { border-right: 0; }
.fp-tabs button:hover { color: var(--fg-0); }
.fp-tabs button[aria-selected="true"] { color: var(--fg-0); background: var(--bg-1); }
.fp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg-0); }
.fp-tabs button:focus-visible { outline: 1px solid var(--fg-0); outline-offset: -3px; }

/* receipt card */
.rc-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line-1); }
.rc-title b { font: 500 var(--t-md)/22px var(--font-ui); color: var(--fg-0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-title span { flex: none; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.rc-rows { display: grid; }
.rc-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line-1); font-size: var(--t-base); line-height: 20px; }
.rc-row .k { color: var(--fg-2); }
.rc-row .v { color: var(--fg-0); font: 500 var(--t-base)/20px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.rc-row .v small { margin-left: 8px; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.rc-row.total { padding: 18px 0; }
.rc-row.total .k { color: var(--fg-0); }
.rc-row.total .v { font-size: 34px; line-height: 40px; letter-spacing: -0.02em; }
.rc-row.rules { border-bottom: 0; }
.rc-row.bad::after { content: ""; position: absolute; inset: 0 -20px; background: var(--hl-2); opacity: 0; pointer-events: none; }
.fp-card.play .rc-row.bad::after { animation: rc-pulse 1400ms var(--ease) both; animation-delay: 900ms; }
@keyframes rc-pulse { 0%, 100% { opacity: 0; } 35% { opacity: 1; } }
.rc-row.bad .v { color: var(--fg-0); }
.rc-row.ok .v { color: var(--fg-1); }
.rc-foot { margin-top: 14px; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.rc-prog { display: flex; gap: 6px; margin-top: 16px; }
.rc-prog i { flex: 1; height: 2px; background: var(--line-2); position: relative; overflow: hidden; }
.rc-prog i::after { content: ""; position: absolute; inset: 0; background: var(--fg-0); transform: scaleX(0); transform-origin: left; }
.rc-prog i.on::after { transform: scaleX(1); }
.rc-prog i.run::after { animation: rc-fill var(--auto, 5000ms) linear forwards; }
@keyframes rc-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .js .fp-card:not(.in) [data-seq] { opacity: 1; }
  .fp-card.play [data-seq], .fp-card.play .rc-row.bad::after, .rc-prog i.run::after { animation: none; }
  .rc-prog i.run::after { transform: scaleX(1); }
}
html.rm .fp-card:not(.in) [data-seq] { opacity: 1; }
html.rm .fp-card.play [data-seq], html.rm .fp-card.play .rc-row.bad::after, html.rm .rc-prog i.run::after { animation: none; }
html.rm .rc-prog i.run::after { transform: scaleX(1); }

/* ---- rules ---- */
.fp-card.fp-wide { max-width: 860px; }
.rl-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0; padding: 0; }
.rl-side, .rl-main { padding: 22px 22px 24px; min-width: 0; }
.rl-side { border-right: 1px solid var(--line-1); }
@media (max-width: 700px) { .rl-grid { grid-template-columns: minmax(0, 1fr); } .rl-side { border-right: 0; border-bottom: 1px solid var(--line-1); } }
.rl-h { margin: 0 0 12px; font: 500 var(--t-xs)/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.rl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rl-sw { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 1px solid transparent; background: transparent; color: var(--fg-0); font: 400 var(--t-base)/20px var(--font-ui); text-align: left; cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.rl-sw:hover { background: var(--bg-2); border-color: var(--line-1); }
.rl-sw:focus-visible { outline: 1px solid var(--fg-0); outline-offset: -1px; }
.rl-sw .sw { flex: none; position: relative; width: 30px; height: 16px; border: 1px solid var(--line-2); }
.rl-sw .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--fg-3); transition: transform var(--base) var(--ease), background var(--base) var(--ease); }
.rl-sw .sw.on::after { transform: translateX(14px); background: var(--fg-0); }
.rl-sw .rl-n { flex: 1; min-width: 0; }
.rl-sw .rl-lv { flex: none; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.rl-run { list-style: none; margin: 0; padding: 0; display: grid; }
.rs { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 10px; border-bottom: 1px solid var(--line-1); font-size: var(--t-base); line-height: 20px; color: var(--fg-1); }
.rs .ic { width: 8px; height: 8px; border: 1px solid var(--fg-3); }
.rs .out { white-space: nowrap; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.rs::after { content: ""; position: absolute; inset: 0; background: var(--hl-2); opacity: 0; pointer-events: none; }
.rs.o-block { color: var(--fg-0); }
.rs.o-block .ic { background: var(--fg-0); border-color: var(--fg-0); }
.rs.o-block .out { color: var(--bg-0); background: var(--fg-0); padding: 1px 7px; }
.rs.o-ask .ic { border-color: var(--fg-0); border-style: dashed; }
.rs.o-ask .out { color: var(--fg-0); border: 1px solid var(--fg-2); padding: 0 6px; }
.rs.o-flag .ic { border-color: var(--fg-1); }
.rs.o-flag .out { color: var(--fg-1); border: 1px dotted var(--fg-3); padding: 0 6px; }
.rs.hit::after { opacity: 1; }
.fp-card.play .rs.hit::after { animation: rl-hit 1300ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 400ms); }
@keyframes rl-hit { from { opacity: 0; } 30% { opacity: 1; } }
.js .rl-run .rs.pend { opacity: 0; transform: translateY(6px); }
.rl-run .rs { transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.rl-sum { margin: 14px 10px 0; font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-2); }
.lvl { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; margin-right: 10px; vertical-align: -1px; }
.lvl i { width: 4px; background: var(--line-2); } .lvl i:nth-child(1) { height: 6px; } .lvl i:nth-child(2) { height: 10px; } .lvl i:nth-child(3) { height: 14px; }
.lvl[data-n="1"] i:nth-child(1), .lvl[data-n="2"] i:nth-child(-n+2), .lvl[data-n="3"] i { background: var(--fg-0); }

@media (prefers-reduced-motion: reduce) {
  .js .rl-run .rs.pend { opacity: 1; transform: none; }
  .fp-card.play .rs.hit::after { animation: none; }
  .rl-sw .sw::after, .rl-run .rs { transition: none; }
}
html.rm .js .rl-run .rs.pend, html.rm.js .rl-run .rs.pend { opacity: 1; transform: none; }
html.rm .fp-card.play .rs.hit::after { animation: none; }
html.rm .rl-sw .sw::after, html.rm .rl-run .rs { transition: none; }

/* ---- usage and limits ---- */
.gg { padding: 26px 26px 22px; }
.gg-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 26px; }
.gg-top .rl-h { margin-bottom: 6px; }
.gg-pct { margin: 0; font: 400 56px/56px var(--font-ui); letter-spacing: -0.035em; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.gg-clock { text-align: right; }
.gg-time { margin: 0; font: 500 var(--t-md)/22px var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.gg-bar { position: relative; height: 22px; border: 1px solid var(--line-2); background: var(--bg-2); margin-top: 38px; }
.gg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--fg-0); transform-origin: left; transform: scaleX(var(--p, .7333)); }
.gg-lock { position: absolute; left: 73.33%; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--line-2) 0 1px, transparent 1px 6px); overflow: hidden; }
.gg-lock em { position: absolute; inset: 0; display: grid; place-items: center; font: 400 var(--t-xs)/16px var(--font-mono); font-style: normal; color: var(--fg-3); white-space: nowrap; }
.gg-mark { position: absolute; left: 73.33%; top: -10px; bottom: -10px; width: 1px; background: var(--fg-0); }
.gg-mark b { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); margin-bottom: 8px; white-space: nowrap; font: 500 var(--t-xs)/16px var(--font-mono); color: var(--fg-0); }
.gg-ticks { display: flex; justify-content: space-between; margin-top: 10px; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.gg-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-1); }
.gg-heads { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-sm); line-height: 18px; color: var(--fg-1); }
.gg-heads .dot { flex: none; width: 7px; height: 7px; background: var(--fg-0); }
.gg-replay { flex: none; padding: 6px 12px; border: 1px solid var(--line-2); background: var(--bg-0); color: var(--fg-1); font: 500 var(--t-xs)/16px var(--font-mono); cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.gg-replay:hover { border-color: var(--fg-2); color: var(--fg-0); }
.gg-replay:focus-visible { outline: 1px solid var(--fg-0); outline-offset: 2px; }
/* running: the lock, marker label and heads-up wait for the fill to arrive; opacity only */
.gg.run .gg-lock, .gg.run .gg-mark b { opacity: 0; }
.gg .gg-lock, .gg .gg-mark b, .gg .gg-heads { transition: opacity 500ms var(--ease); }
.gg.run .gg-heads { opacity: 0; }
.gg.run.late .gg-heads, .gg.run.done .gg-lock, .gg.run.done .gg-mark b { opacity: 1; }
@media (max-width: 700px) {
  .gg { padding: 20px 16px 18px; } .gg-pct { font-size: 44px; line-height: 44px; }
  .gg-mark b { transform: translateX(-72%); } .gg-lock em { display: none; } .gg-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .gg .gg-lock, .gg .gg-mark b, .gg .gg-heads { transition: none; } }
html.rm .gg .gg-lock, html.rm .gg .gg-mark b, html.rm .gg .gg-heads { transition: none; }

/* ---- model registry ---- */
.grow { transform-origin: left; transform: scaleX(var(--p, 1)); }
.js .fp-card:not(.in) .grow { transform: scaleX(0); }
.fp-card.play .grow { animation: fp-grow 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
@keyframes fp-grow { from { transform: scaleX(0); } }
.mm-ver { margin-left: 8px; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.mm-champ { flex: none; padding: 2px 8px; border: 1px solid var(--fg-0); font: 500 var(--t-xs)/16px var(--font-mono); color: var(--fg-0); }
.mm-champ.off { visibility: hidden; }
.sc { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: 1px; }
.sc i { width: 14px; height: 8px; border: 1px solid var(--line-2); background: var(--bg-3); }
.sc i.on { background: var(--fg-0); border-color: var(--fg-0); }
.fp-card.play .sc i.on { animation: fp-in 320ms var(--ease) both; animation-delay: calc(var(--k, 0) * 120ms + 500ms); }
.js .fp-card:not(.in) .sc i.on { opacity: 0; }
.ln { display: flex; align-items: center; gap: 0; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-1); }
.ln-n { flex: none; padding: 6px 10px; border: 1px solid var(--line-2); font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-1); white-space: nowrap; }
.ln-n:last-child { border-color: var(--fg-0); color: var(--fg-0); }
.ln-c { flex: 1 1 0; min-width: 8px; height: 1px; background: var(--fg-2); }
@media (max-width: 560px) { .ln-n { padding: 5px 6px; font-size: 10px; } .rc-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .rc-row .v { text-align: left; } }
@media (prefers-reduced-motion: reduce) {
  .js .fp-card:not(.in) .grow { transform: scaleX(var(--p, 1)); } .js .fp-card:not(.in) .sc i.on { opacity: 1; }
  .fp-card.play .grow, .fp-card.play .sc i.on { animation: none; }
}
html.rm .fp-card:not(.in) .grow, html.rm .js .fp-card:not(.in) .grow { transform: scaleX(var(--p, 1)); }
html.rm .fp-card:not(.in) .sc i.on { opacity: 1; }
html.rm .fp-card.play .grow, html.rm .fp-card.play .sc i.on { animation: none; }

/* ---- traces ---- */
.tr-head, .tr-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 58px 54px; gap: 12px; align-items: center; }
.tr-head { padding: 0 0 10px; font: 500 var(--t-xs)/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.tr-head span:nth-child(n+3), .tr-row .d, .tr-row .c { text-align: right; }
.tr-row { position: relative; padding: 12px 0; border-top: 1px solid var(--line-1); font-size: var(--t-base); line-height: 20px; color: var(--fg-1); }
.tr-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row .d, .tr-row .c { font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk { position: relative; height: 8px; background: var(--bg-3); overflow: hidden; }
.tk i { position: absolute; left: var(--l); top: 0; bottom: 0; width: var(--w); background: var(--fg-2); }
.tr-row.bad .tk i { background: repeating-linear-gradient(135deg, var(--fg-1) 0 2px, transparent 2px 5px); outline: 1px solid var(--fg-1); outline-offset: -1px; }
.tr-row.hot { color: var(--fg-0); background: var(--hl); }
.tr-row.hot .tk i { background: var(--fg-0); }
.tr-row.hot .d, .tr-row.hot .c { color: var(--fg-0); }
.tr-row .chip { position: absolute; right: 0; top: -9px; padding: 0 6px; background: var(--fg-0); color: var(--bg-0); font: 500 10px/16px var(--font-mono); font-style: normal; display: none; }
.tr-row.hot .chip { display: block; }
.tr-sum { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-1); font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-1); }
@media (max-width: 560px) { .tr-head, .tr-row { grid-template-columns: minmax(0, 1fr) 52px 48px; row-gap: 8px; } .tr-head span:nth-child(2) { display: none; } .tr-row .tk { grid-column: 1 / -1; order: 5; } .tr-row .chip { top: -9px; } }

/* ---- savings ---- */
.sv-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 18px; }
.sv-top .rl-h { margin-bottom: 6px; }
.sv-big { margin: 0; font: 400 40px/44px var(--font-ui); letter-spacing: -0.03em; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.sv-row { display: grid; grid-template-columns: 18px minmax(0, 1.2fr) minmax(0, 1fr) auto 92px; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-1); font-size: var(--t-base); line-height: 20px; color: var(--fg-0); }
.sv-row .rk { font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.sv-row .nm { min-width: 0; }
.sv-row .tk { position: relative; height: 6px; background: var(--bg-3); overflow: hidden; }
.sv-row .tk i { position: absolute; inset: 0; background: var(--fg-1); }
.sv-row .am { font: 500 var(--t-sm)/18px var(--font-mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-row .am small { display: block; font: 400 10px/12px var(--font-mono); color: var(--fg-3); }
.vd { position: relative; display: block; height: 22px; text-align: center; font: 500 var(--t-xs)/20px var(--font-mono); }
.vd .a, .vd .b { position: absolute; inset: 0; border: 1px solid var(--line-2); color: var(--fg-2); }
.vd .b { opacity: 0; }
.vd .a { color: var(--fg-0); border-color: var(--fg-1); }
.sv-row:nth-of-type(2) .vd .a { background: var(--fg-0); color: var(--bg-0); border-color: var(--fg-0); }
.fp-card.play .vd .b { animation: sv-b 2600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.fp-card.play .vd .a { animation: sv-a 2600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes sv-b { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sv-a { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 640px) { .sv-row { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 8px; } .sv-row .tk { grid-column: 2 / -1; order: 5; } .sv-row .vd { grid-column: 3; grid-row: 1; width: 88px; } .sv-row .am { grid-column: 2; grid-row: 2; text-align: left; } .sv-row .tk { grid-row: 3; } .sv-big { font-size: 32px; line-height: 36px; } }
@media (prefers-reduced-motion: reduce) { .fp-card.play .vd .a, .fp-card.play .vd .b { animation: none; } }
html.rm .fp-card.play .vd .a, html.rm .fp-card.play .vd .b { animation: none; }

/* ---- hand-off ---- */
.hf { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.3fr) 40px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 28px 22px; }
.hf-col { min-width: 0; }
.hf-big { margin: 0 0 10px; font: 400 36px/40px var(--font-ui); letter-spacing: -0.03em; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.hf-big small { font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); letter-spacing: 0; }
.hf-bar { position: relative; height: 8px; background: var(--bg-3); overflow: hidden; }
.hf-bar i { position: absolute; inset: 0; background: var(--fg-0); }
.hf-note { margin: 10px 0 0; font-size: var(--t-sm); line-height: 18px; color: var(--fg-2); }
.hf-arrow { height: 1px; background: var(--fg-2); position: relative; }
.hf-sum ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); background: var(--bg-2); }
.hf-sum li { padding: 9px 12px; border-bottom: 1px solid var(--line-1); font-size: var(--t-sm); line-height: 18px; color: var(--fg-1); }
.hf-sum li:last-child { border-bottom: 0; }
.hf-sum li b { display: inline-block; width: 52px; font: 500 var(--t-xs)/18px var(--font-mono); color: var(--fg-3); }
@media (max-width: 760px) { .hf { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 16px; } .hf-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .hf .grow { transition: none; } }

/* trace loop demo (10-25): five stages, one lit at a time; reduced motion shows all lit */
.tl-demo { padding: 72px 0 24px; }
.tl-demo .sec-title { max-width: 22ch; margin-bottom: 24px; }
.tl-flow { margin-top: 8px; }
.tl-st { list-style: none; margin: 0; padding: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tl-c { position: relative; border: 1px solid var(--line-1); padding: 14px 14px 12px; background: var(--bg-1); opacity: .55;
        transition: opacity .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.tl-c.on, .tl-c.done { opacity: 1; }
.tl-c.on { border-color: var(--fg-2); transform: translateY(-2px); }
.tl-c .tl-n { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border: 1px solid var(--line-2);
              border-radius: 50%; font: 600 11px/1 var(--font-mono, monospace); color: var(--fg-1); }
.tl-c .k { display: block; margin-top: 10px; font: 500 11px/16px var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.tl-c b { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--fg-0); font-weight: 600; }
.tl-c p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.tl-c[data-k="error"] b, .tl-c[data-k="stop"] b { color: var(--fg-0); }
.tl-c[data-k="error"].on { border-color: color-mix(in srgb, var(--bad, #e5484d) 60%, var(--line-2)); }
.tl-note { margin-top: 14px; font-size: 14px; color: var(--fg-2); max-width: 70ch; }
html.rm .tl-c, .tl-flow:not(.play) .tl-c { opacity: 1; transform: none; }
@media (max-width: 900px) { .tl-st { grid-template-columns: minmax(0, 1fr); } }