/* Looped transformers article, version 2. Components are plain HTML first; article.js adds the labs. */
.article-body {
  --lx-bg: #060a08;
  --lx-panel: #0b1210;
  --lx-line: rgba(255, 255, 255, .09);
  --lx-line-strong: rgba(255, 255, 255, .18);
  --lx-ink: #f1f5f4;
  --lx-ink-2: #b6c2be;
  --lx-ink-3: #8b9894;
  --lx-accent: #00ff94;
  --lx-state: #7cc7ff;
  --lx-warn: #ffb454;
  --lx-s1: #2ba06d;
  --lx-s2: #4d8be0;
  --lx-s3: #c98232;
}

/* ---------- frame ---------- */
.lx { margin: 40px 0 46px; border: 1px solid var(--lx-line-strong); border-radius: 16px; background: var(--lx-bg); color: var(--lx-ink-2); overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); }
.lx-head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--lx-line); background: linear-gradient(to right, rgba(0, 255, 148, .06), transparent 60%); }
.lx-tag { flex: none; font: 700 .68rem/1 var(--font-mono, monospace); letter-spacing: .14em; color: var(--lx-accent); }
.lx-title { flex: 1; font-size: 1.02rem; font-weight: 600; color: var(--lx-ink); letter-spacing: -.01em; line-height: 1.3; }
.lx-kind { flex: none; padding: 5px 9px; border: 1px solid rgba(0, 255, 148, .3); border-radius: 999px; font: 600 .62rem/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-accent); }
.lx-kind::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--lx-accent); vertical-align: 1px; }
.lx:not(.is-live) .lx-kind { display: none; }
.lx-live, .lx-static { padding: 20px; }
.lx-live[hidden] { display: none; }
.lx.is-live .lx-static { padding: 0 20px 14px; }
.article-body .lx figcaption { padding: 14px 20px 16px; border-top: 1px solid var(--lx-line); font-size: .84rem; line-height: 1.6; color: var(--lx-ink-3); }
.article-body .lx figcaption strong { color: var(--lx-ink); }
.lx-text > summary { cursor: pointer; padding: 8px 0; font: 600 .7rem/1.4 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); list-style: none; }
.lx-text > summary::-webkit-details-marker { display: none; }
.lx-text > summary::before { content: "+ "; color: var(--lx-accent); }
.lx-text[open] > summary::before { content: "- "; }
.lx-text > summary:hover { color: var(--lx-ink); }
.lx-text > :not(summary) { margin-top: 10px; }
@media (min-width: 1040px) {
  .lx--wide { width: 920px; margin-left: calc((100% - 920px) / 2); }
}

/* reset the essay's list markers inside components */
.article-body .lx ul, .article-body .lx ol, .article-body .lx-recap ol { margin: 0; gap: 0; }
.article-body .lx li, .article-body .lx-recap li { padding-left: 0; color: inherit; max-width: none; }
.article-body .lx li::before, .article-body .lx-recap li::before { content: none; }
.article-body .lx p { margin: 0 0 10px; font-size: .95rem; line-height: 1.6; }
.article-body .lx p:last-child { margin-bottom: 0; }
.article-body .lx strong { color: var(--lx-ink); }

/* ---------- shared controls ---------- */
.lx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lx-label { font: 600 .68rem/1.2 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-seg { display: inline-flex; padding: 3px; border: 1px solid var(--lx-line-strong); border-radius: 10px; background: #050807; }
.lx-seg button { min-width: 44px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--lx-ink-2); font: 600 .88rem/1 var(--font-sans, sans-serif); cursor: pointer; transition: background-color .15s, color .15s; }
.lx-seg button:hover { color: #fff; }
.lx-seg button[aria-pressed="true"] { background: var(--lx-accent); color: #02130b; }
.lx-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--lx-line-strong); border-radius: 10px; background: #0e1614; color: var(--lx-ink); font: 600 .88rem/1 var(--font-sans, sans-serif); cursor: pointer; transition: border-color .15s, background-color .15s, transform .1s; }
.lx-btn:hover:enabled { border-color: var(--lx-accent); }
.lx-btn:active:enabled { transform: translateY(1px); }
.lx-btn:disabled { opacity: .45; cursor: default; }
.lx-btn--go { border-color: var(--lx-accent); background: var(--lx-accent); color: #02130b; }
.lx-btn--go:hover:enabled { background: #5cffb9; }
.lx-btn--hint { border-color: var(--lx-warn); color: var(--lx-warn); animation: lx-nudge 1.6s ease-in-out infinite; }
@keyframes lx-nudge { 50% { box-shadow: 0 0 0 5px rgba(255, 180, 84, .16); } }
.lx button:focus-visible, .lx input:focus-visible, .lx summary:focus-visible, .lx a:focus-visible { outline: 3px solid var(--lx-state); outline-offset: 3px; }
.article-body .lx .lx-status { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--lx-accent); border-radius: 0 8px 8px 0; background: rgba(0, 255, 148, .05); color: var(--lx-ink); font-size: .98rem; line-height: 1.5; min-height: 3.2em; }
.article-body .lx .lx-status--warn { border-left-color: var(--lx-warn); background: rgba(255, 180, 84, .07); }
.article-body .lx .lx-fine { margin: 12px 0 0; font-size: .8rem; line-height: 1.5; color: var(--lx-ink-3); }

/* ---------- tables (plain content) ---------- */
.lx-table-wrap { overflow-x: auto; border: 1px solid var(--lx-line); border-radius: 10px; }
.lx-table { width: 100%; border-collapse: collapse; font-size: .84rem; line-height: 1.5; }
.lx-table caption { padding: 10px 12px; text-align: left; font: 600 .68rem/1.4 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-table th, .lx-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--lx-line); }
.lx-table thead th { font: 600 .66rem/1.4 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-accent); white-space: nowrap; }
.lx-table tbody th { color: var(--lx-ink); font-weight: 600; min-width: 9rem; }
.lx-table td { min-width: 9rem; }
.article-body .lx-steps { counter-reset: lx; display: grid; gap: 8px; margin-bottom: 16px; }
.article-body .lx-steps li { counter-increment: lx; padding-left: 34px; position: relative; font-size: .95rem; }
.article-body .lx-steps li::before { content: counter(lx, decimal-leading-zero); position: absolute; left: 0; top: 3px; font: 600 .72rem/1.5 var(--font-mono, monospace); color: var(--lx-accent); }
.article-body .lx-plain { display: grid; gap: 8px; }
.article-body .lx .lx-note { margin-top: 12px; font-size: .86rem; color: var(--lx-warn); }

/* ---------- brief, routes, recap ---------- */
.lx-brief { margin: 30px 0 22px; padding: 22px 24px 20px; border: 1px solid rgba(0, 255, 148, .28); border-radius: 16px; background: linear-gradient(160deg, rgba(0, 255, 148, .07), rgba(0, 255, 148, .015) 55%); }
.lx-brief-h, .lx-recap-h { margin: 0 0 14px; font: 700 .7rem/1.4 var(--font-mono, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--lx-accent); }
.article-body .lx-brief ul { margin: 0; gap: 9px; }
.article-body .lx-brief li { font-size: .98rem; line-height: 1.55; max-width: none; }
.lx-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 40px; font: 600 .7rem/1 var(--font-mono, monospace); letter-spacing: .06em; }
.lx-routes span { color: var(--lx-ink-3); text-transform: uppercase; letter-spacing: .14em; margin-right: 4px; }
.article-body .lx-routes a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--lx-line-strong); border-radius: 999px; color: var(--lx-ink); transition: border-color .15s, color .15s; }
.article-body .lx-routes a:hover { border-color: var(--lx-accent); color: var(--lx-accent); }
.lx-recap { margin: 34px 0; padding: 26px 26px 20px; border: 1px solid rgba(0, 255, 148, .28); border-radius: 16px; background: var(--lx-bg); }
.article-body .lx-recap ol { counter-reset: rc; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.article-body .lx-recap li { counter-increment: rc; padding: 16px 16px 14px; border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-panel); font-size: .92rem; line-height: 1.5; color: var(--lx-ink-2); }
.article-body .lx-recap li::before { content: counter(rc, decimal-leading-zero); display: block; position: static; margin-bottom: 8px; font: 700 .7rem/1 var(--font-mono, monospace); color: var(--lx-accent); }
.lx-recap li strong { display: block; color: var(--lx-ink); font-size: 1.05rem; }
.lx-recap-f { margin: 16px 0 0; font: 500 .74rem/1.4 var(--font-mono, monospace); }
.lx-review-note { color: var(--lx-ink-3); font-size: .85rem; }

/* ---------- LAB 01: loop machine ---------- */
.lx-loop-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 8px; }
.lx-loop-svg { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.lx-loop-svg text { font-family: var(--font-sans, sans-serif); fill: var(--lx-ink); }
.lx-loop-svg .t-mono { font-family: var(--font-mono, monospace); letter-spacing: .08em; fill: var(--lx-ink-3); }
.lx-loop-svg .t-sub { fill: var(--lx-ink-2); }
.lx-loop-svg .t-pass { font-family: var(--font-mono, monospace); font-weight: 700; letter-spacing: .08em; fill: var(--lx-accent); }
.lx-loop-svg .wire { fill: none; stroke: #33423d; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lx-loop-svg .wire--loop { stroke: rgba(0, 255, 148, .55); stroke-dasharray: 2 7; }
.lx-loop-svg .wire--hot { stroke: var(--lx-accent); stroke-width: 3; animation: lx-dash .5s linear infinite; }
.lx-loop-svg .wire--chev { stroke: rgba(0, 255, 148, .75); stroke-dasharray: none; }
@keyframes lx-dash { to { stroke-dashoffset: -9; } }
.lx-loop-svg .box { fill: #0c1412; stroke: #3b4a45; stroke-width: 1.5; transition: stroke .2s, fill .2s; }
.lx-loop-svg .box--core { stroke: rgba(0, 255, 148, .6); }
.lx-loop-svg .on .box { stroke: var(--lx-state); fill: #0f1c22; }
.lx-loop-svg .on .box--core { stroke: var(--lx-accent); fill: #0b1d15; }
.lx-loop-svg .tick { stroke: #4a5a55; stroke-width: 2; }
.lx-loop-svg .box-core .tick { stroke: rgba(0, 255, 148, .55); }
.lx-loop-svg .chip { fill: #101917; stroke: #3b4a45; }
.lx-loop-svg .on .chip { stroke: var(--lx-accent); fill: #0b2217; }
.lx-loop-svg .on .t-sub { fill: var(--lx-ink); }
.lx-loop-svg .gate { fill: var(--lx-bg); stroke: var(--lx-accent); stroke-width: 2; }
.lx-loop-svg .packet { fill: var(--lx-state); }
.lx-loop-svg .halo { fill: var(--lx-state); opacity: .22; }
.lx-loop-panels { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; margin-top: 12px; }
.lx-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lx-snap { padding: 6px; border: 1px solid var(--lx-line); border-radius: 8px; opacity: .22; transition: opacity .35s, border-color .35s; }
.lx-snap.on { opacity: 1; }
.lx-snap.cur { border-color: var(--lx-state); box-shadow: 0 0 0 3px rgba(124, 199, 255, .14); }
.lx-snap span { display: block; margin-top: 6px; font: 600 .6rem/1.3 var(--font-mono, monospace); color: var(--lx-ink-3); }
.lx-snap.cur span { color: var(--lx-state); }
.lx-mini--w .lx-snap { max-width: 110px; border-color: var(--lx-line-strong); }
.lx-mini { padding: 14px 14px 12px; border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-panel); }
.lx-mini-h { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 600 .66rem/1.3 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-mini-h b { font-weight: 700; color: var(--lx-state); }
.lx-mini--w .lx-mini-h b { color: var(--lx-ink); }
.lx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.lx-grid i { aspect-ratio: 1; border-radius: 2px; background: var(--lx-state); }
.lx-mini--w .lx-grid i { background: #dfe7e4; }
.lx-mini p { margin: 10px 0 0 !important; font-size: .8rem !important; color: var(--lx-ink-3); }
.lx-mini--flash { animation: lx-flash .7s ease; }
@keyframes lx-flash { 30% { border-color: #dfe7e4; } }
.lx-meter { margin-top: 16px; display: grid; gap: 10px; }
.lx-meter-row { display: grid; grid-template-columns: 9.5rem 1fr 3.2rem; align-items: center; gap: 12px; }
.lx-meter-k { font: 600 .68rem/1.3 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-meter-v { text-align: right; font: 700 1.25rem/1 var(--font-mono, monospace); color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-meter-row--run .lx-meter-v { color: var(--lx-accent); }
.lx-track { display: flex; gap: 2px; height: 22px; }
.lx-track i { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 3px; background: #2a3632; color: #7f918c; font: 700 .62rem/1 var(--font-mono, monospace); font-style: normal; transition: background-color .25s, color .25s; }
.lx-track i.done { color: #06120c; }
.lx-track i.done { background: #9fb0ab; }
.lx-meter-row--run .lx-track i.done { background: var(--lx-accent); }
.lx-track i.pad { background: transparent; }

/* ---------- LAB 02: puzzle ---------- */
.lx-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.lx-fact { padding: 8px 12px; border: 1px solid var(--lx-line-strong); border-radius: 8px; background: var(--lx-panel); font-size: .88rem; color: var(--lx-ink); }
.lx-fact small { display: block; margin-bottom: 2px; font: 600 .6rem/1.3 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-fact--q { border-color: rgba(0, 255, 148, .4); }
.lx-pz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-top: 14px; align-items: start; }
.lx-pz-board { border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-panel); padding: 10px; }
.lx-pz-board svg { display: block; width: 100%; height: auto; }
.lx-pz-board text { font-family: var(--font-sans, sans-serif); fill: var(--lx-ink); }
.lx-pz-board .n { fill: #101917; stroke: #50605b; stroke-width: 2; transition: stroke .3s, fill .3s; }
.lx-pz-board .n--win { stroke: var(--lx-accent); fill: #0b2217; }
.lx-pz-board .e { stroke: var(--lx-state); stroke-width: 2.5; fill: none; opacity: 0; transition: opacity .4s; }
.lx-pz-board .e.show { opacity: 1; }
.lx-pz-board .e--chain { stroke: var(--lx-accent); }
.lx-pz-board .rank { font-family: var(--font-mono, monospace); font-size: 11px; fill: var(--lx-ink-3); opacity: 0; transition: opacity .4s; }
.lx-pz-board .rank.show { opacity: 1; }
.lx-pz-board .time { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 15px; }
.lx-pz-board .time--missing { fill: var(--lx-warn); }
.lx-pz-board .time--found { fill: var(--lx-accent); }
.lx-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lx-count { padding: 10px 12px; border: 1px solid var(--lx-line); border-radius: 10px; background: #080d0b; }
.lx-count small { display: block; font: 600 .6rem/1.3 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-count b { font: 700 1.5rem/1.2 var(--font-mono, monospace); color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.article-body .lx-log { display: grid; gap: 6px; min-height: 9rem; align-content: start; }
.article-body .lx-log li { padding: 8px 12px; border-radius: 8px; background: #0a100e; border-left: 3px solid var(--lx-state); font-size: .88rem; line-height: 1.5; color: var(--lx-ink-2); animation: lx-in .3s ease; }
.article-body .lx-log li.idle { border-left-color: #50605b; color: var(--lx-ink-3); }
.article-body .lx-log li.stuck { border-left-color: var(--lx-warn); }
.article-body .lx-log li.tool { border-left-color: var(--lx-accent); color: var(--lx-ink); }
.lx-log b { font: 700 .66rem/1.5 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink); margin-right: 6px; }
@keyframes lx-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- LAB 03: scales ---------- */
.lx-sc { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 22px; align-items: start; }
.lx-sc svg { display: block; width: 100%; height: auto; }
.lx-sc svg text { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .04em; fill: var(--lx-ink-3); transition: fill .2s; }
.lx-sc .ring rect { fill: rgba(255, 255, 255, .012); stroke: #3a4844; stroke-width: 1.5; transition: stroke .2s, fill .2s; cursor: pointer; }
.lx-sc .ring:hover rect { stroke: #7f918c; }
.lx-sc .ring.sel rect { stroke: var(--lx-accent); stroke-width: 2.5; fill: rgba(0, 255, 148, .05); }
.lx-sc .ring.sel text { fill: var(--lx-accent); }
.lx-sc .runner { fill: var(--lx-accent); }
.lx-sc .layer { fill: #1b2724; stroke: #50605b; }
.lx-sc .ring .pic { fill: #101917; stroke: #50605b; stroke-width: 1; }
.lx-sc .ring.sel .pic { stroke: var(--lx-accent); fill: rgba(0, 255, 148, .1); }
.lx-sc svg .pic-t { font-size: 10.5px; letter-spacing: 0; fill: var(--lx-ink-2); }
.lx-sc .ring.sel .pic-t { fill: var(--lx-ink); }
.lx-sc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.lx-sc-tabs button { min-height: 48px; padding: 8px 12px; border: 1px solid var(--lx-line-strong); border-radius: 10px; background: #0b1210; color: var(--lx-ink-2); font: 600 .86rem/1.25 var(--font-sans, sans-serif); text-align: left; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.lx-sc-tabs button small { display: block; font: 600 .6rem/1.4 var(--font-mono, monospace); letter-spacing: .1em; color: var(--lx-ink-3); }
.lx-sc-tabs button:hover { border-color: #7f918c; color: #fff; }
.lx-sc-tabs button[aria-pressed="true"] { border-color: var(--lx-accent); background: rgba(0, 255, 148, .08); color: #fff; }
.lx-sc-tabs button[aria-pressed="true"] small { color: var(--lx-accent); }
.lx-sc-rows { display: grid; gap: 0; border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-panel); overflow: hidden; }
.lx-sc-row { display: grid; grid-template-columns: 8.2rem 1fr; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--lx-line); font-size: .9rem; line-height: 1.5; color: var(--lx-ink); animation: lx-in .25s ease; }
.lx-sc-row:first-child { border-top: 0; }
.lx-sc-row span:first-child { font: 600 .62rem/1.6 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); }

/* ---------- timeline ---------- */
.article-body .lx-timeline { position: relative; display: grid; gap: 0; }
.article-body .lx-timeline li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 16px; padding: 10px 0 10px 22px; position: relative; font-size: .93rem; line-height: 1.55; }
.article-body .lx-timeline li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: #2a3632; }
.article-body .lx-timeline li::after { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--lx-bg); border: 2px solid var(--lx-accent); }
.article-body .lx-timeline li:first-child::before { top: 17px; }
.article-body .lx-timeline li:last-child::before { bottom: calc(100% - 22px); }
.article-body .lx-timeline li:last-child::after { background: var(--lx-accent); }
.article-body .lx-timeline li.lx-branch::after { border-color: var(--lx-state); border-style: dashed; }
.lx-when { font: 700 .72rem/2 var(--font-mono, monospace); letter-spacing: .06em; color: var(--lx-accent); white-space: nowrap; }
.lx-branch .lx-when { color: var(--lx-state); }

/* ---------- evidence cards ---------- */
.lx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lx-card { padding: 18px 18px 16px; border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-panel); }
.article-body .lx .lx-card .lx-card-meta { margin: 0 0 4px; font: 600 .64rem/1.4 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-3); }
.article-body .lx .lx-card .lx-card-name { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.article-body .lx .lx-card .lx-card-stat { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--lx-line); font: 700 2rem/1.05 var(--font-mono, monospace); letter-spacing: -.02em; color: var(--lx-ink); }
.lx-card-stat small { display: block; margin-top: 6px; font: 400 .8rem/1.4 var(--font-sans, sans-serif); letter-spacing: 0; color: var(--lx-ink-3); }
.article-body .lx .lx-card p { font-size: .88rem; }
.lx-ms { display: grid; gap: 6px; margin: 0 0 12px; }
.lx-ms-row { display: grid; grid-template-columns: 4.6rem 1fr 3.6rem; align-items: center; gap: 10px; font: 500 .74rem/1 var(--font-mono, monospace); color: var(--lx-ink-2); }
.lx-ms-row span:last-child { text-align: right; color: var(--lx-ink); }
.lx-ms-bar { height: 12px; width: var(--v); border-radius: 0 4px 4px 0; background: #9fb0ab; }
.lx-ms-bar--hot { background: var(--lx-warn); }

/* ---------- LAB 04: curves ---------- */
.lx-cv-plot { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: ew-resize; }
.lx-cv-plot text { font-family: var(--font-mono, monospace); font-size: 11px; fill: var(--lx-ink-3); }
.lx-cv-plot .lbl { font-family: var(--font-sans, sans-serif); font-size: 12.5px; font-weight: 600; fill: var(--lx-ink); }
.lx-cv-plot .grid { stroke: rgba(255, 255, 255, .07); }
.lx-cv-plot .axis { stroke: #50605b; }
.lx-cv-plot .ln { fill: none; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.lx-cv-plot .cursor { stroke: #dfe7e4; stroke-width: 1; stroke-dasharray: 3 4; }
.lx-cv-plot .dot { stroke: var(--lx-bg); stroke-width: 2; }
.lx-cv-plot .past { opacity: .32; }
.lx-cv-ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 6px 0 14px; }
.lx-cv-ctl input { width: 100%; min-height: 44px; accent-color: var(--lx-accent); cursor: pointer; }
.lx-cv-ctl output { font: 700 1.3rem/1 var(--font-mono, monospace); color: var(--lx-accent); min-width: 1.4em; text-align: right; }
.lx-cv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-cv-card { padding: 12px 14px; border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-panel); }
.lx-cv-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: var(--lx-ink); }
.lx-cv-card h4 svg { flex: none; }
.article-body .lx .lx-cv-card p { font-size: .86rem; line-height: 1.45; color: var(--lx-ink-2); min-height: 2.9em; }
.lx-cv-cost { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--lx-line); border-radius: 12px; background: #080d0b; }
.lx-cv-cost .lx-track i.done { background: var(--lx-warn); }

/* ---------- LAB 05: ledger ---------- */
.lx-lg { margin-top: 16px; border: 1px solid var(--lx-line); border-radius: 12px; overflow: hidden; background: var(--lx-panel); }
.lx-lg-row { display: grid; grid-template-columns: 11rem 9.5rem 9.5rem 1fr; gap: 14px; align-items: center; padding: 13px 16px; border-top: 1px solid var(--lx-line); }
.lx-lg-row:first-child { border-top: 0; }
.lx-lg-row--total { background: rgba(0, 255, 148, .05); }
.lx-lg-k { font-size: .93rem; font-weight: 600; color: var(--lx-ink); }
.lx-lg-v { font: 700 1.05rem/1.2 var(--font-mono, monospace); color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-lg-n { font-size: .82rem; line-height: 1.45; color: var(--lx-ink-3); }
.lx-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--lx-line-strong); font: 600 .68rem/1.2 var(--font-mono, monospace); letter-spacing: .04em; color: var(--lx-ink-2); white-space: nowrap; }
.lx-chip--up { border-color: rgba(255, 180, 84, .5); color: var(--lx-warn); }
.lx-chip--down { border-color: rgba(0, 255, 148, .45); color: var(--lx-accent); }
.lx-chip--ask { border-color: rgba(124, 199, 255, .5); color: var(--lx-state); }

/* ---------- budget tiles ---------- */
.lx-tiles { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.lx-tile { padding: 18px; border: 1px solid var(--lx-line-strong); border-radius: 12px; background: var(--lx-panel); text-align: center; }
.lx-tile--on { border-color: rgba(0, 255, 148, .5); }
.article-body .lx .lx-tile-k { margin: 0 0 6px; font: 600 .68rem/1.3 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--lx-ink-3); }
.article-body .lx .lx-tile-v { margin: 0; font: 700 3.2rem/1 var(--font-mono, monospace); color: var(--lx-ink); }
.lx-tile--on .lx-tile-v { color: var(--lx-accent) !important; }
.lx-tile-arrow { font: 400 1.6rem/1 var(--font-mono, monospace); color: var(--lx-ink-3); }
.article-body .lx .lx-tile-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: .86rem; color: var(--lx-ink-2); text-align: center; }

/* ---------- LAB 06: trace ---------- */
.article-body .lx-trace { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--lx-line); border-radius: 12px; background: #040706; font: 500 .86rem/1.55 var(--font-mono, monospace); }
.article-body .lx-trace li { display: grid; grid-template-columns: 5.6rem 1fr; gap: 12px; padding: 7px 8px; border-radius: 6px; color: var(--lx-ink-2); transition: opacity .3s, background-color .3s; }
.lx-trace .lx-k { align-self: start; padding: 2px 0; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-trace [data-k="model"] .lx-k { color: var(--lx-state); }
.lx-trace [data-k="tool"] .lx-k, .lx-trace [data-k="check"] .lx-k { color: var(--lx-accent); }
.lx-trace [data-k="evidence"] { background: rgba(255, 180, 84, .08); color: var(--lx-ink); }
.lx-trace [data-k="evidence"] .lx-k { color: var(--lx-warn); }
.lx-trace [data-k="answer"] { color: var(--lx-ink); }
.lx-trace li.wait { opacity: .12; }
.lx-trace li.now { background: rgba(255, 255, 255, .06); }
.lx.is-live[data-lab="trace"] .lx-static { padding: 20px 20px 16px; }
.lx-trace-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.lx-trace-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 .7rem/1.4 var(--font-mono, monospace); color: var(--lx-ink-3); }
.lx-trace-key i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; }

/* ---------- LAB 07: decide ---------- */
.lx-dc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.lx-dc-list { display: grid; gap: 8px; }
.lx-dc-list button { min-height: 48px; padding: 10px 14px; border: 1px solid var(--lx-line-strong); border-radius: 10px; background: #0b1210; color: var(--lx-ink-2); font: 500 .9rem/1.35 var(--font-sans, sans-serif); text-align: left; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.lx-dc-list button:hover { border-color: #7f918c; color: #fff; }
.lx-dc-list button[aria-pressed="true"] { border-color: var(--lx-accent); background: rgba(0, 255, 148, .08); color: #fff; }
.lx-dc-out { position: sticky; top: 96px; padding: 20px; border: 1px solid rgba(0, 255, 148, .35); border-radius: 12px; background: var(--lx-panel); min-height: 12rem; }
.lx-dc-out small { display: block; margin-bottom: 8px; font: 600 .64rem/1.4 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--lx-accent); }
.lx-dc-out h4 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--lx-ink); }
.lx-dc-out.empty { border-style: dashed; border-color: var(--lx-line-strong); }
.lx-dc-out.empty small { color: var(--lx-ink-3); }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .lx { margin: 30px -8px 36px; border-radius: 14px; }
  .lx-live, .lx-static { padding: 16px 14px; }
  .lx.is-live .lx-static { padding: 0 14px 12px; }
  .lx-head, .article-body .lx figcaption { padding-left: 14px; padding-right: 14px; }
  .lx-loop-panels, .lx-pz, .lx-sc, .lx-cards, .lx-dc, .lx-cv-cards { grid-template-columns: minmax(0, 1fr); }
  .lx-strip { gap: 5px; }
  .lx-snap { padding: 4px; }
  .lx-snap span { font-size: .52rem; }
  .lx-meter-row, .lx-cv-cost { grid-template-columns: 1fr 3.2rem; }
  .lx-meter-row .lx-track, .lx-cv-cost .lx-track { grid-column: 1 / -1; order: 3; }
  .lx-cv-cost { grid-template-columns: 1fr; }
  .lx-lg-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .lx-lg-row .lx-chip { grid-column: 1; }
  .lx-lg-row .lx-lg-n { grid-column: 1 / -1; }
  .lx-lg-v { text-align: right; }
  .article-body .lx-recap ol { grid-template-columns: 1fr; }
  .article-body .lx-timeline li { grid-template-columns: 1fr; gap: 0; }
  .lx-sc-row { grid-template-columns: 1fr; gap: 2px; }
  .lx-dc-out { position: static; }
  .article-body .lx-trace li { grid-template-columns: 1fr; gap: 0; }
  .lx-tile-v { font-size: 2.4rem !important; }
  .article-body .lx .lx-cv-card p { min-height: 0; }
  .lx-cv-ctl { grid-template-columns: 1fr auto; }
  .lx-cv-ctl .lx-label { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .lx *, .lx *::before { animation: none !important; transition: none !important; }
}
@media print {
  .lx-live, .lx-kind, .lx-routes, .lx-recap-f { display: none !important; }
  .lx-text > :not(summary) { display: block; }
  .lx, .lx-brief, .lx-recap { break-inside: avoid; box-shadow: none; }
}