/* Blog figures: diagrams, screenshots, annotated terminals, callout components and "living figures".
   Generated by website/editorial/figures.cjs. Local only: no external fonts or images.

   Motion. One registered number, --t, runs 0 -> 1 on each .lf-clock, holds, rewinds and loops. Elements with a
   k-* class derive their progress --p from --t and their own start --s and duration --d. The resting value of --t
   is 1, so without animation (reduced motion, no @property, print) every figure shows its finished state. */
@property --t { syntax: '<number>'; inherits: true; initial-value: 1; }

.fig {
  --tone: #7c85f5; --tone-bg: #151628; --tone-line: #3c4170;
  margin: 34px 0 40px; min-width: 0;
}
.fig figcaption { margin-top: 12px; font-size: .86rem; line-height: 1.55; color: #a9aab3; max-width: 660px; }
.fig figcaption code { font-size: .92em; }
.fig-panel { position: relative; border: 1px solid #2e2f34; border-radius: 14px; background: radial-gradient(ellipse 80% 70% at 10% 0%, rgb(124 133 245 / .09), transparent 70%), #0d0e11; padding: 22px; overflow: hidden; }
.fig-kicker { font: 600 .7rem/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: #a3a9fa; margin: 0 0 16px !important; }
.fig p, .fig li { color: inherit; margin: 0; }
.fig ul, .fig ol { list-style: none; margin: 0; padding: 0; }
.fig li { margin: 0; }

/* Tones */
.t-brand { --tone: #a3a9fa; --tone-bg: #151628; --tone-line: #3c4170; }
.t-sky { --tone: #89c8fd; --tone-bg: #0c1620; --tone-line: #2a4a66; }
.t-lilac { --tone: #c1a3fb; --tone-bg: #17121f; --tone-line: #4a3c66; }
.t-ok { --tone: #5fd39a; --tone-bg: #0e1a14; --tone-line: #2a5640; }
.t-warn { --tone: #f2c14e; --tone-bg: #1c1709; --tone-line: #5c4a1c; }
.t-danger { --tone: #f2766b; --tone-bg: #1c0f0e; --tone-line: #63302b; }
.t-muted { --tone: #a9aab3; --tone-bg: #121316; --tone-line: #2e2f34; }

/* Small CSS icons */
.ico { display: inline-block; flex: none; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -.16em; border-radius: 50%; background: var(--tone); position: relative; }
.ico-check::after { content: ''; position: absolute; left: 34%; top: 18%; width: 26%; height: 46%; border: solid #0b0c10; border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.ico-cross::before, .ico-cross::after { content: ''; position: absolute; left: 46%; top: 22%; width: .13em; height: 56%; background: #0b0c10; transform: rotate(45deg); }
.ico-cross::after { transform: rotate(-45deg); }
.ico-warn { border-radius: 3px; }
.ico-warn::after { content: '!'; position: absolute; inset: 0; font: 800 .74em/1.42 system-ui, sans-serif; text-align: center; color: #0b0c10; }
.ico-dot { background: transparent; box-shadow: inset 0 0 0 .17em var(--tone); }
.ico-file { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 .12em #a9aab3; width: .85em; }

/* Images: diagrams and screenshots */
.fig-diagram img, .shot-frame img { display: block; width: 100%; height: auto; }
.fig-diagram img { border: 1px solid #2e2f34; border-radius: 14px; background: #09090b; }
.shot-frame { border: 1px solid #2e2f34; border-radius: 12px; overflow: hidden; background: #09090b; box-shadow: 0 24px 60px -28px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .02); }

/* Terminal (static and animated) */
.term { border: 1px solid #2e2f34; border-radius: 12px; overflow: hidden; background: #0b0c0e; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .9); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid #1f2023; background: #121316; font-size: .74rem; color: #8a8b95; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2e2f34; }
.term-bar span { margin-left: 8px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.article-body .term-body { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 16px 18px 18px; font-size: .8rem; line-height: 1.75; }
.term-body .tl { display: block; white-space: pre; color: #ececee; min-height: 1.75em; }
.term-body .tp { color: #7c85f5; user-select: none; }
.term-body .to { color: #c6c7d0; }
.term-body .tcm { color: #8a8b95; }
.fig-term:not(.fig-session) .term-body .tl { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 2.4em; text-indent: -2.4em; }
.term-body .tl-c { display: flex; align-items: flex-start; }
.term-body .tl-c .tp { flex: none; }
.term-body .tc { display: inline-block; vertical-align: top; min-width: 0; }
.tok { color: #5fd39a; } .twarn { color: #f2c14e; } .terr { color: #f2766b; } .tsky { color: #89c8fd; } .tdim { color: #8a8b95; }
.tn { text-indent: 0; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-left: .8em; border-radius: 50%; background: #7c85f5; color: #0b0c1a; font: 700 .7rem/1 system-ui, sans-serif; vertical-align: .1em; }
.tcur { display: inline-block; width: .55em; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: #a3a9fa; }
.term-notes { display: grid; gap: 10px; margin-top: 16px !important; }
.term-notes li { display: flex; gap: 12px; align-items: baseline; font-size: .92rem; line-height: 1.6; color: #c6c7d0; }
.term-notes .tn { margin: 0; flex: none; }

/* Compare cards */
.cmp { display: grid; gap: 14px; }
.cmp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-card { border: 1px solid var(--tone-line); border-radius: 12px; background: var(--tone-bg); padding: 18px; min-width: 0; }
.cmp-label { display: flex; align-items: center; font: 700 .72rem/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); margin-bottom: 10px !important; }
.cmp-title { font-weight: 650; font-size: 1.02rem; line-height: 1.4; color: #ececee; margin-bottom: 8px !important; }
.cmp-body { font-size: .9rem; line-height: 1.6; color: #c6c7d0; }
.cmp-list { display: grid; gap: 7px; margin-top: 10px !important; }
.cmp-list li { position: relative; padding-left: 18px; font-size: .9rem; line-height: 1.55; color: #c6c7d0; }
.cmp-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--tone); }
.cmp-foot { margin-top: 16px !important; font-size: .88rem; line-height: 1.6; color: #a9aab3; text-align: center; }

/* Steps */
.rail { display: grid; gap: 4px; counter-reset: none; }
.rail-step { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 14px; }
.rail-step:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 38px; bottom: 0; width: 2px; background: #2e2f34; }
.rail-n { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--tone); background: var(--tone-bg); color: var(--tone); font-weight: 700; font-size: .95rem; }
.rail-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--tone); opacity: 0; }
.rail-t { font-weight: 650; color: #ececee; line-height: 1.45; padding-top: 7px; }
.rail-b { font-size: .9rem; line-height: 1.6; color: #a9aab3; margin-top: 4px; }
.rail-b code { font-size: .88em; }

/* Checklist */
.ck-list { display: grid; gap: 10px; }
.ck { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #23242a; background: #111215; border-radius: 10px; padding: 11px 14px; }
.ck-box { position: relative; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 6px; border: 2px solid #3a3b44; }
.ck-tick { position: absolute; inset: -2px; border-radius: 6px; background: #5fd39a; }
.ck-tick::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #0b0c10; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ck-ring { position: absolute; inset: -7px; border-radius: 10px; border: 2px solid #7c85f5; opacity: 0; }
.ck-t { font-size: .95rem; line-height: 1.55; color: #ececee; }
.ck-done { display: flex; align-items: center; margin-top: 16px !important; color: #5fd39a; font-weight: 650; font-size: .95rem; --tone: #5fd39a; }

/* Sequence rows */
.seq { display: grid; gap: 9px; }
.seq-row { display: grid; grid-template-columns: minmax(0, var(--tagw, 13rem)) minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid #23242a; background: #111215; border-radius: 10px; padding: 11px 14px; }
.seq-row.t-brand, .seq-row.t-sky, .seq-row.t-lilac, .seq-row.t-ok, .seq-row.t-warn, .seq-row.t-danger { border-color: var(--tone-line); }
.seq-head { border: 0; background: none; padding-block: 0 2px; font: 700 .7rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #8a8b95; }
.seq-head .seq-tag, .seq-head .seq-text { color: #8a8b95; font: inherit; }
.seq-head .seq-badge { background: none; border: 0; color: #8a8b95; padding: 0; }
.seq-tag { font: 600 .82rem/1.45 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--tone, #ececee); overflow-wrap: anywhere; }
.seq-text { font-size: .9rem; line-height: 1.55; color: #c6c7d0; }
.seq-badge { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid var(--tone-line); background: var(--tone-bg); color: var(--tone); border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 650; }
.seq-foot { margin-top: 14px !important; font-size: .88rem; line-height: 1.6; color: #a9aab3; }

/* Note file card */
.note-card { border: 1px solid #2e2f34; border-radius: 12px; overflow: hidden; background: #0f1013; }
.note-bar { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid #1f2023; background: #141518; font: 600 .78rem/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #a9aab3; }
.note-card dl { margin: 0; padding: 8px 0; }
.note-card dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding: 8px 18px; }
.note-card dl > div + div { border-top: 1px dashed #1f2023; }
.note-card dt { font: 600 .78rem/1.65 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #a3a9fa; text-transform: uppercase; letter-spacing: .06em; }
.note-card dd { margin: 0; font-size: .92rem; line-height: 1.6; color: #ececee; }

/* Mini cards */
.cards { display: grid; gap: 12px; }
.cards-2, .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cards-5 .mini { grid-column: span 2; }
.cards-5 .mini:nth-child(n+4) { grid-column: span 3; }
.mini { border: 1px solid var(--tone-line); background: var(--tone-bg); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.mini-k { font: 700 .68rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); margin-bottom: 6px !important; }
.mini-t { font-weight: 650; color: #ececee; font-size: .96rem; line-height: 1.4; }
.mini-b { font-size: .86rem; line-height: 1.55; color: #a9aab3; margin-top: 6px; }
.article-body .mini-code { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #23242a; background: #0b0c0e; font-size: .74rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Motion ---- */
.lf-clock { --t: 1; }
.k-in, .k-dim, .k-pop, .k-x, .k-type, .k-draw { --p: clamp(0, (var(--t) - var(--s, 0)) / var(--d, .06), 1); }
.k-in { opacity: var(--p); translate: 0 calc((1 - var(--p)) * 10px); }
.k-dim { opacity: calc(.34 + .66 * var(--p)); }
.k-pop { opacity: var(--p); scale: calc(.55 + .45 * var(--p)); }
.k-x { scale: var(--p) 1; transform-origin: left center; }
.k-type { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.k-draw { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.k-cur { opacity: clamp(0, min((var(--t) - var(--s, 0)) / .015, (var(--s, 0) + var(--w, .1) - var(--t)) / .015), 1); }
.rail-live .rail-n { transition: none; }
.rail-live .rail-step { --lit: clamp(0, (var(--t) - var(--s, 0)) / .04, 1); }
.rail-live .rail-n { background: color-mix(in srgb, var(--tone) calc(var(--lit) * 100%), var(--tone-bg)); color: color-mix(in srgb, #0b0c10 calc(var(--lit) * 100%), var(--tone)); }

@media (prefers-reduced-motion: no-preference) {
  .lf-clock { animation: lf-clock var(--lf-dur, 14s) linear infinite; }
  .lf-clock.lf-paused { animation-play-state: paused; }
  .tcur-end { animation: lf-blink 1.1s steps(1) infinite; }
}
@keyframes lf-clock { 0% { --t: 0; } 84% { --t: 1; } 95% { --t: 1; } 100% { --t: 0; } }
@keyframes lf-blink { 50% { opacity: 0; } }
@media print { .lf-clock { animation: none !important; } }

/* ------------------------------------------------------------------ Layout ---- */
.article-body > section > .fig:last-child { margin-bottom: 8px; }
@media (max-width: 760px) {
  .fig { margin: 26px 0 30px; }
  .fig-panel { padding: 16px; border-radius: 12px; }
  .cmp-2, .cmp-3, .cards-2, .cards-3, .cards-4, .cards-5 { grid-template-columns: minmax(0, 1fr); }
  .cards-5 .mini, .cards-5 .mini:nth-child(n+4) { grid-column: auto; }
  .seq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .seq-row .seq-tag { flex: 1 1 auto; overflow-wrap: normal; }
  .seq-row .seq-badge { order: 1; }
  .seq-row .seq-text { order: 2; flex-basis: 100%; }
  .seq-head .seq-text { display: none; }
  .note-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .article-body .term-body { font-size: .74rem; padding: 14px; }
  .term-body .tl { white-space: pre-wrap; overflow-wrap: anywhere; }
}