/* Lab: the three project scenes (built by /lab/lab.js) and the showcase layout. Shared look comes from /styles.css.
   Scenes animate transform and opacity only, pause offscreen or in a hidden tab, and show a still under reduced motion.
   Every element's resting style is the finished frame, so reduced motion simply turns the animations off. */

.lscene { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden; border-radius: 18px;
          box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.14), 0 6px 16px rgba(0,0,0,.05); background: var(--card); isolation: isolate; }
.lscene > * { --u: calc(100cqw / 640); }
.lscene svg { display: block; width: 100%; height: 100%; }
.lscene:not(.run) *, .lscene:not(.run) *::before, .lscene:not(.run) *::after,
.tab-hidden .lscene *, .tab-hidden .lscene *::before, .tab-hidden .lscene *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lscene *, .lscene *::before, .lscene *::after { animation: none !important; transition: none !important; } }

/* ---------- ToneMatch (12 s loop: noon, encoder guess, search, matched) ---------- */
.ls-tonematch { --tm-bg: #efe9df; --tm-panel: #ffffff; --tm-ink: #1b1a19; --tm-soft: #7b766e; --tm-song: #2563eb; --tm-you: #e0672b; background: var(--tm-bg); }
@media (prefers-color-scheme: dark) { .ls-tonematch { --tm-bg: #17150f; --tm-panel: #201d18; --tm-ink: #f3efe7; --tm-soft: #a59e92; --tm-song: #74a3ff; --tm-you: #ff9a5c; } }
.tm text { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; fill: var(--tm-ink); }
.tm-amp { fill: #1d1b19; stroke: #3a3530; stroke-width: 2; }
.tm-brand { fill: #efe3c4 !important; font: italic 700 21px Georgia, "Times New Roman", serif !important; letter-spacing: .01em; }
.tm-b { fill: #d9c79c !important; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; opacity: 0; }
.tm-jewel { fill: #6b1d16; stroke: #b9a06a; stroke-width: 2; }
.tm-glow { fill: #ff4b35; opacity: .85; filter: drop-shadow(0 0 6px #ff4b35); }
.tm-ticks line { stroke: #4a3c22; stroke-width: 1.6; stroke-linecap: round; }
.tm-skirt { fill: #2a2622; }
.tm-cap { fill: #141311; stroke: #5b544b; stroke-width: 1.5; }
.tm-ptr { stroke: #f4ead2; stroke-width: 3; stroke-linecap: round; }
.tm-k { transform: rotate(var(--f)); }
.tm-lbl { fill: #3d311c !important; font-size: 8.6px; font-weight: 750; letter-spacing: .12em; }
.tm-panel { fill: var(--tm-panel); stroke: rgba(0,0,0,.07); }
@media (prefers-color-scheme: dark) { .tm-panel { stroke: rgba(255,255,255,.07); } }
.tm-cap-t { fill: var(--tm-soft) !important; font: 650 10px ui-monospace, "SF Mono", Menlo, monospace !important; letter-spacing: .14em; }
.tm-legend text { fill: var(--tm-soft) !important; font-size: 11px; font-weight: 600; }
.sw-song { fill: var(--tm-song); } .sw-you { fill: var(--tm-you); }
.tm-grid { stroke: var(--tm-soft); stroke-opacity: .18; stroke-dasharray: 3 5; fill: none; }
.tm-song, .tm-you { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tm-song { stroke: var(--tm-song); }
.tm-you { stroke: var(--tm-you); opacity: 0; }
.tm-you.y2 { opacity: 1; }
.tm-breathe { transform-box: view-box; transform-origin: 0 356px; }
.tm-num text { font-size: 50px; font-weight: 780; letter-spacing: -.04em; opacity: 0; font-variant-numeric: tabular-nums; }
.tm-db { fill: var(--tm-soft) !important; font-size: 15px; font-weight: 650; }
.tm-st { font-size: 13px; font-weight: 650; opacity: 0; }
.tm-num .n2, .tm-st.n2 { opacity: 1; fill: var(--tm-song); }
.tm-num .n2 { fill: var(--tm-ink); }
.tm-foot { fill: var(--tm-soft) !important; font-size: 10.5px; }
.tm-b.b3 { opacity: 1; }

.ls-tonematch * { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.tm-k { animation-name: tm-knob; }
@keyframes tm-knob { 0%, 8% { transform: rotate(0deg); } 21%, 27% { transform: rotate(var(--e)); }
  34% { transform: rotate(calc(var(--f) + (var(--f) - var(--e)) * .45)); } 42% { transform: rotate(calc(var(--f) - (var(--f) - var(--e)) * .2)); }
  50%, 91% { transform: rotate(var(--f)); } 99%, 100% { transform: rotate(0deg); } }
.tm-you.y0 { animation-name: tm-y0; } .tm-you.y1 { animation-name: tm-y1; } .tm-you.y2 { animation-name: tm-y2; }
@keyframes tm-y0 { 0%, 9% { opacity: 1; } 20%, 93% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes tm-y1 { 0%, 9% { opacity: 0; } 20%, 28% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes tm-y2 { 0%, 28% { opacity: 0; } 49%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.tm-breathe { animation: tm-breathe 3s ease-in-out infinite; }
@keyframes tm-breathe { 50% { transform: scaleY(.965); } }
.tm-num .n0, .tm-st.n0 { animation-name: tm-n0; } .tm-num .n1, .tm-st.n1 { animation-name: tm-n1; } .tm-num .n2, .tm-st.n2 { animation-name: tm-n2; }
@keyframes tm-n0 { 0%, 17% { opacity: 1; } 19%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes tm-n1 { 0%, 17% { opacity: 0; } 19%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes tm-n2 { 0%, 46% { opacity: 0; } 48%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
.tm-b.b0 { animation-name: tm-b0; } .tm-b.b1 { animation-name: tm-b1; } .tm-b.b2 { animation-name: tm-b2; } .tm-b.b3 { animation-name: tm-b3; }
@keyframes tm-b0 { 0%, 7% { opacity: 1; } 9%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tm-b1 { 0%, 7% { opacity: 0; } 9%, 25% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes tm-b2 { 0%, 25% { opacity: 0; } 27%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes tm-b3 { 0%, 50% { opacity: 0; } 52%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
.tm-glow { animation-name: tm-glow; }
@keyframes tm-glow { 0%, 26% { opacity: .2; } 30%, 38%, 46% { opacity: .95; } 34%, 42% { opacity: .35; } 52%, 92% { opacity: .85; } 100% { opacity: .2; } }

/* ---------- football-cv (16 s loop: detect, track, teams, line, positions, then the play call) ---------- */
.fc { position: absolute; inset: 0; background: #0f1a12; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.fc-film { position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden; }
.fc-film img, .fc-film svg, .fc-dim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; margin: 0; border-radius: 0; aspect-ratio: auto; object-fit: cover; }
.fc-w, .fc-t { fill: none; stroke-width: 3; }
.fc-w { stroke: #fff; opacity: 0; }
.fc-box.o .fc-t { stroke: #2ec4e3; } .fc-box.d .fc-t { stroke: #e8b21c; }
.fc-box { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fc-trails path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 11; opacity: 0; }
.fc-id { fill: #fff; font: 700 15px ui-monospace, "SF Mono", Menlo, monospace; opacity: 0; paint-order: stroke; stroke: rgba(0,0,0,.5); stroke-width: 4px; }
.fc-los line { stroke: #fff; stroke-width: 4; stroke-dasharray: 14 10; }
.fc-los text { fill: #fff; font: 800 17px -apple-system, system-ui, sans-serif; letter-spacing: .12em; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 5px; }
.fc-los { transform-box: view-box; transform-origin: 280px 606px; }
.fc-chip { opacity: 0; }
.fc-chip > g { transform-box: fill-box; transform-origin: 0 100%; }
.fc-chip rect { fill: #2ec4e3; } .fc-chip.d rect { fill: #e8b21c; }
.fc-chip text { fill: #0b1a24; font: 800 14px -apple-system, system-ui, sans-serif; }
.fc-arrow path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.fc-arrow path:first-child { stroke-dasharray: 1; }
.fc-arrow { opacity: 0; }
.fc-dim { background: linear-gradient(90deg, rgba(5,10,8,.15), rgba(5,10,8,.62)); opacity: 0; }
.fc-card { position: absolute; right: calc(16 * var(--u)); top: calc(16 * var(--u)); width: calc(214 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u));
           border-radius: calc(14 * var(--u)); background: rgba(250,250,252,.94); color: #121214; box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.35);
           font-size: calc(11 * var(--u)); line-height: 1.3; opacity: 0; }
@media (prefers-color-scheme: dark) { .fc-card { background: rgba(28,28,32,.94); color: #f3f3f5; } }
.fc-k { font: 700 calc(9 * var(--u))/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6c6c74; margin: 0 0 calc(6 * var(--u)); }
.fc-k span { color: #2563eb; letter-spacing: .04em; text-transform: none; font-weight: 600; margin-left: calc(4 * var(--u)); }
.fc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.fc-rows span { background: rgba(0,0,0,.05); border-radius: calc(7 * var(--u)); padding: calc(5 * var(--u)) calc(7 * var(--u)); font-weight: 700; font-size: calc(12 * var(--u)); }
@media (prefers-color-scheme: dark) { .fc-rows span { background: rgba(255,255,255,.08); } .fc-k { color: #9c9ca5; } .fc-k span { color: #74a3ff; } }
.fc-rows i { display: block; font-style: normal; font-weight: 500; font-size: calc(8.5 * var(--u)); color: #8a8a93; }
.fc-rows.fc-sit { grid-template-columns: 1fr; }
.fc-prob { display: flex; height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); overflow: hidden; background: rgba(0,0,0,.08); margin-bottom: calc(8 * var(--u)); }
.fc-prob i { display: flex; align-items: center; font-style: normal; color: #fff; font-size: calc(10.5 * var(--u)); transform-origin: left; white-space: nowrap; overflow: hidden; }
.fc-prob .p { flex: 62; background: #2563eb; padding-left: calc(7 * var(--u)); }
.fc-prob .r { flex: 38; background: #16a34a; padding-left: calc(6 * var(--u)); }
.fc-dir { font-weight: 600; font-size: calc(11.5 * var(--u)); }
.fc-note { margin-top: calc(7 * var(--u)); font-size: calc(9 * var(--u)); color: #8a8a93; }
.fc-steps { position: absolute; inset: auto 0 0; height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u));
            background: #0f1a12; color: rgba(255,255,255,.55); font: 650 calc(10.5 * var(--u))/1 -apple-system, system-ui, sans-serif; }
.fc-steps span { position: relative; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 999px; }
.fc-steps span::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.16); opacity: 0; z-index: -1; }
.fc-steps span:last-child { color: #fff; } .fc-steps span:last-child::before { opacity: 1; background: #2563eb; }
.fc-steps { isolation: isolate; }
/* the finished frame: labelled film with the play-call card over it */
.fc-card, .fc-dim, .fc-arrow, .fc-los { opacity: 1; }

.ls-football * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
.fc-box { animation-name: fc-box; animation-delay: calc(var(--i) * 45ms); }
@keyframes fc-box { 0%, 3% { opacity: 0; transform: scale(1.25); } 7%, 45% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; } }
.fc-w { animation-name: fc-w; } .fc-t { animation-name: fc-t; }
@keyframes fc-w { 0%, 21% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes fc-t { 0%, 21% { opacity: 0; } 26%, 100% { opacity: 1; } }
.fc-trails path { animation-name: fc-trail; }
@keyframes fc-trail { 0%, 12% { opacity: 0; transform: translateX(14px); } 18%, 44% { opacity: .9; transform: none; } 48%, 100% { opacity: 0; } }
.fc-id { animation-name: fc-id; animation-delay: calc(var(--i) * 30ms); }
@keyframes fc-id { 0%, 12.5% { opacity: 0; } 14%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } }
.fc-los { animation-name: fc-los; }
@keyframes fc-los { 0%, 27% { opacity: 0; transform: scale(0); } 28% { opacity: 1; } 35%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
.fc-chip { animation-name: fc-chip; animation-delay: calc(var(--i) * 70ms); }
.fc-chip > g { animation-name: fc-pop; animation-delay: calc(var(--i) * 70ms); }
@keyframes fc-chip { 0%, 35% { opacity: 0; } 37%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fc-pop { 0%, 35% { transform: scale(.2); } 38% { transform: scale(1.15); } 40%, 100% { transform: none; } }
.fc-dim { animation-name: fc-dim; } .fc-card { animation-name: fc-card; }
@keyframes fc-dim { 0%, 56% { opacity: 0; } 59%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes fc-card { 0%, 57% { opacity: 0; transform: translateX(calc(30 * var(--u))); } 61%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.fc-rows span, .fc-k, .fc-dir { animation-name: fc-row; }
.fc-rows span:nth-child(2) { animation-delay: .25s; } .fc-rows span:nth-child(3) { animation-delay: .5s; } .fc-rows span:nth-child(4) { animation-delay: .75s; }
.fc-k.fc-sit, .fc-rows.fc-sit span { animation-delay: 1.1s; } .fc-k.fc-x { animation-delay: 1.5s; } .fc-dir { animation-delay: 2.6s; }
@keyframes fc-row { 0%, 60% { opacity: 0; transform: translateY(calc(5 * var(--u))); } 63%, 100% { opacity: 1; transform: none; } }
.fc-prob i { animation-name: fc-bar; animation-delay: 1.8s; }
.fc-prob .r { animation-delay: 2.1s; }
@keyframes fc-bar { 0%, 61% { transform: scaleX(0); } 66%, 100% { transform: none; } }
.fc-arrow { animation-name: fc-arrow; } .fc-arrow path:first-child { animation-name: fc-draw; }
@keyframes fc-arrow { 0%, 76% { opacity: 0; } 77%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes fc-draw { 0%, 76% { stroke-dashoffset: 1; } 83%, 100% { stroke-dashoffset: 0; } }
.fc-steps span::before { animation: var(--k) 16s ease infinite both; }
.fc-steps span:last-child { color: rgba(255,255,255,.55); }
.fc-steps span:last-child::before { background: #2563eb; }
.fc-steps span:nth-child(1)::before { --k: fc-s1; } .fc-steps span:nth-child(2)::before { --k: fc-s2; } .fc-steps span:nth-child(3)::before { --k: fc-s3; }
.fc-steps span:nth-child(4)::before { --k: fc-s4; } .fc-steps span:nth-child(5)::before { --k: fc-s5; } .fc-steps span:nth-child(6)::before { --k: fc-s6; }
@keyframes fc-s1 { 0%, 2% { opacity: 0; } 3%, 12% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes fc-s2 { 0%, 12% { opacity: 0; } 13%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes fc-s3 { 0%, 21% { opacity: 0; } 22%, 27% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes fc-s4 { 0%, 27% { opacity: 0; } 28%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes fc-s5 { 0%, 35% { opacity: 0; } 36%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes fc-s6 { 0%, 56% { opacity: 0; } 57%, 94% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fc-steps span:last-child { color: #fff; } .fc-box, .fc-chip, .fc-trails path, .fc-id { opacity: 0; } }

/* ---------- AgentFloor (14 s timeline in lab.js) ---------- */
.ls-agentfloor { background: #0d1117; }
.af { position: absolute; inset: 0; color: #e6edf3; font: 500 calc(11 * var(--u))/1.25 ui-monospace, "SF Mono", Menlo, monospace; padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.af b { font-weight: 700; }
.af-top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: 1px solid #1f2a37; }
.af-top > b { letter-spacing: .22em; font-size: calc(13 * var(--u)); } .af-top > b i { font-style: normal; color: #ffb000; }
.af-path { color: #7e8fa3; }
.af-meta { margin-left: auto; display: flex; gap: calc(12 * var(--u)); color: #7e8fa3; white-space: nowrap; }
.af-meta b { color: #e6edf3; } .af-meta [data-k="running"] { color: #ffb000; }
.af-mock { color: #43c98a; border: 1px solid rgba(67,201,138,.4); border-radius: 999px; padding: 0 calc(6 * var(--u)); }
.af-main { display: grid; grid-template-columns: 1fr calc(212 * var(--u)); gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.af-strips { display: grid; gap: calc(5 * var(--u)); align-content: start; }
.af-strip { position: relative; display: grid; grid-template-columns: calc(78 * var(--u)) 1fr auto; align-items: center; gap: calc(8 * var(--u));
            height: calc(43 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(14 * var(--u)); background: #121a24; border: 1px solid #1f2a37; border-radius: calc(5 * var(--u)); overflow: hidden; }
.af-rail { position: absolute; left: 0; top: 0; bottom: 0; width: calc(4 * var(--u)); background: #2f8f5b; }
.af-rail::after { content: ""; position: absolute; inset: 0; background: #ffb000; opacity: 0; transition: opacity .3s; }
.af-who b { display: block; font-size: calc(12 * var(--u)); } .af-who small { color: #7e8fa3; font-size: calc(9.5 * var(--u)); }
.af-what { position: relative; height: 100%; min-width: 0; }
.af-idle, .af-task, .af-fin { position: absolute; left: 0; right: 0; top: calc(9 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s, transform .3s; }
.af-idle { color: #7e8fa3; } .af-task { color: #ffb000; opacity: 0; transform: translateY(calc(4 * var(--u))); }
.af-bar { position: absolute; left: 0; right: 0; bottom: calc(8 * var(--u)); height: calc(3 * var(--u)); border-radius: 9px; background: #1f2a37; overflow: hidden; opacity: 0; transition: opacity .3s; }
.af-bar i { position: absolute; inset: 0; background: #ffb000; transform: scaleX(0); transform-origin: left; }
.af-tok { color: #43c98a; opacity: 0; transition: opacity .3s; font-size: calc(10 * var(--u)); }
.af-strip.on .af-rail::after { opacity: 1; animation: af-pulse 1.2s ease-in-out infinite; }
@keyframes af-pulse { 50% { opacity: .45; } }
.af-strip.on .af-idle { opacity: 0; } .af-strip.on .af-task { opacity: 1; transform: none; }
.af-strip.on .af-bar, .af-strip.done .af-bar { opacity: 1; }
.af-strip.on .af-bar i { transform: none; transition: transform var(--d, 4s) linear; }
.af-strip.done .af-bar i { transform: none; background: #43c98a; }
.af-fin { color: #43c98a; opacity: 0; }
.af-strip.done .af-idle { opacity: 0; } .af-strip.done .af-fin { opacity: 1; }
.af-strip.done .af-tok { opacity: 1; }
.af-strip::after { content: ""; position: absolute; inset: 0; background: rgba(67,201,138,.16); opacity: 0; pointer-events: none; }
.af-strip.done::after { animation: af-flash 1.1s ease-out; }
@keyframes af-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.af-side { display: grid; gap: calc(8 * var(--u)); align-content: start; }
.af-box { border: 1px solid #1f2a37; border-radius: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(9 * var(--u)); background: #0f151d; }
.af-box h6 { margin: 0 0 calc(6 * var(--u)); color: #7e8fa3; font: 600 calc(9 * var(--u))/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.af-job { display: flex; justify-content: space-between; padding: calc(4 * var(--u)) calc(7 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: calc(4 * var(--u));
          background: #1a2330; border: 1px solid #263345; transition: opacity .4s, transform .5s cubic-bezier(.3,.7,.2,1); }
.af-job small { color: #7e8fa3; font-size: inherit; }
.af-job .c { display: none; color: #ffb000; }
.af-job.claimed { border-color: rgba(255,176,0,.55); transform: translateX(calc(-6 * var(--u))); } .af-job.claimed .q { display: none; } .af-job.claimed .c { display: inline; }
.af-job.gone { opacity: .35; transform: none; border-color: #263345; } .af-job.gone .c { color: #43c98a; }
.af-meter { height: calc(6 * var(--u)); border-radius: 9px; background: #1f2a37; overflow: hidden; }
.af-meter i { display: block; height: 100%; background: linear-gradient(90deg, #43c98a, #ffb000); transform-origin: left; transform: scaleX(.7); transition: transform .5s ease; }
.af-count { margin-top: calc(5 * var(--u)); color: #7e8fa3; } .af-count b { color: #e6edf3; }
.af-feedbox { height: calc(128 * var(--u)); overflow: hidden; }
.af-feed { list-style: none; margin: 0; padding: 0; transition: transform .35s ease; }
.af-feed li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: calc(2.5 * var(--u)) 0; font-size: calc(9.5 * var(--u)); color: #c3ccd6; animation: af-in .35s ease both; }
.af-feed li.ok em { color: #43c98a; }
.af-feed time { color: #56657a; margin-right: calc(6 * var(--u)); } .af-feed b { margin-right: calc(5 * var(--u)); }
.af-feed em { font-style: normal; color: #ffb000; }
@keyframes af-in { from { opacity: 0; } }
/* ---------- Lab overview showcase ---------- */
.show { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 52px; align-items: center; background: var(--card);
        border: 1px solid var(--line); border-radius: 32px; padding: 48px; box-shadow: var(--shadow); text-align: left; overflow: hidden; }
.show + .show { margin-top: 28px; }
.show.flip { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.show.flip > :first-child { order: 2; }
.show .num { font: 650 13px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--soft); letter-spacing: .12em; }
.show h3 { font-size: clamp(36px, 4.4vw, 50px); letter-spacing: -.045em; line-height: 1.02; margin: 12px 0 10px; }
.show .pitch { font-size: 20px; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 12px; font-weight: 600; }
.show p { color: var(--soft); font-size: 16.5px; margin: 0 0 18px; }
.show .buttons { justify-content: flex-start; margin: 22px 0 0; }
.lab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.lab-tags span { font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); }
.lab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.lab-stats span { color: var(--soft); font-size: 13.5px; line-height: 1.35; }
.lab-stats b { display: block; color: var(--ink); font-size: 26px; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.show.lead-show { background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, #e0672b 9%, var(--card)), var(--card) 60%); }
@media (max-width: 900px) { .show, .show.flip { grid-template-columns: 1fr; gap: 26px; padding: 22px; border-radius: 26px; } .show.flip > :first-child { order: 0; } }
@media (max-width: 480px) { .lab-stats b { font-size: 21px; } .show .pitch { font-size: 18px; } }

/* project page heroes and the home Lab cards */
.lab-hero { max-width: 1000px; margin: 56px auto 0; }
.lab-hero .lscene { border-radius: 24px; }
.scene-cap { color: var(--soft); font-size: 14px; text-align: center; margin: 14px 0 0; }
.home-lab .lscene { margin-bottom: 16px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.home-lab .lscene img { margin: 0; border-radius: 0; aspect-ratio: auto; background: none; }

/* ---------- Tars (19 s timeline in lab.js: hear the command, split and route it, carry it out on two displays) ---------- */
.ls-tars { --tr-bg: #eef1f6; --tr-panel: #ffffff; --tr-ink: #16181d; --tr-soft: #737884; --tr-line: rgba(0,0,0,.08); --tr-blue: #2563eb; --tr-green: #16a34a;
           --f-windows: #2563eb; --f-music: #db2777; --f-system: #7c3aed; --f-time: #e0672b; background: var(--tr-bg); }
@media (prefers-color-scheme: dark) { .ls-tars { --tr-bg: #0f1218; --tr-panel: #1a1e26; --tr-ink: #eef0f4; --tr-soft: #9aa0ab; --tr-line: rgba(255,255,255,.09);
           --tr-blue: #74a3ff; --tr-green: #4ade80; --f-windows: #74a3ff; --f-music: #f472b6; --f-system: #a78bfa; --f-time: #ff9a5c; } }
.tr { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); color: var(--tr-ink);
      font: 500 calc(10 * var(--u))/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --k: 1; transition: opacity .6s ease; }
.tr[data-state="fade"] { opacity: 0; }
.snap * { transition: none !important; }
.tr .f-windows { --fc: var(--f-windows); } .tr .f-music { --fc: var(--f-music); } .tr .f-system { --fc: var(--f-system); } .tr .f-time { --fc: var(--f-time); }

/* the spoken command */
.tr-voice { display: grid; grid-template-columns: calc(30 * var(--u)) auto 1fr; align-items: center; gap: calc(10 * var(--u)); min-height: calc(62 * var(--u));
            padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)); background: var(--tr-panel); border-radius: calc(16 * var(--u));
            box-shadow: 0 0 0 1px var(--tr-line), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.06); }
.tr-mic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: var(--tr-blue); display: grid; place-items: center; transition: background .4s; }
.tr-mic svg { width: 58%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; } .tr-mic rect { fill: #fff; stroke: none; }
.tr:not([data-state="listen"]) .tr-mic { background: var(--tr-soft); }
.tr-slot { display: grid; align-items: center; } .tr-slot > * { grid-area: 1 / 1; transition: opacity .35s, transform .35s; }
.tr-wave { display: flex; align-items: center; gap: calc(2.5 * var(--u)); width: calc(64 * var(--u)); height: calc(26 * var(--u)); }
.tr-wave i { flex: 1; height: 100%; border-radius: 9px; background: var(--tr-blue); transform: scaleY(.12); }
.tr[data-state="listen"] .tr-wave i { animation: tr-wave .9s ease-in-out infinite alternate; }
.tr-wave i:nth-child(3n) { animation-delay: -.3s !important; } .tr-wave i:nth-child(3n+1) { animation-delay: -.62s !important; } .tr-wave i:nth-child(4n) { animation-duration: .7s !important; }
@keyframes tr-wave { 0% { transform: scaleY(.15); } 100% { transform: scaleY(.95); } }
.tr-think, .tr-ok { font-weight: 650; font-size: calc(9.5 * var(--u)); white-space: nowrap; opacity: 0; transform: translateY(calc(4 * var(--u))); }
.tr-think b { color: var(--tr-blue); } .tr-think i { display: inline-block; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin-left: calc(2 * var(--u)); border-radius: 50%; background: var(--tr-blue); animation: tr-dot 1s ease-in-out infinite; }
.tr-think i:nth-child(3) { animation-delay: .15s; } .tr-think i:nth-child(4) { animation-delay: .3s; }
@keyframes tr-dot { 50% { opacity: .2; } }
.tr-ok { color: var(--tr-green); }
.tr[data-state="think"] .tr-wave, .tr[data-state="act"] .tr-wave, .tr[data-state="done"] .tr-wave, .tr[data-state="fade"] .tr-wave { opacity: 0; }
.tr[data-state="think"] .tr-think, .tr[data-state="act"] .tr-ok, .tr[data-state="done"] .tr-ok, .tr[data-state="fade"] .tr-ok { opacity: 1; transform: none; }
.tr .tr-said { color: var(--tr-ink); margin: 0; font-size: calc(12.5 * var(--u)); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; }
.tr-w { opacity: 0; transition: opacity .25s, color .4s; } .tr-w.on { opacity: 1; }
.tr-seg { border-radius: calc(4 * var(--u)); padding: calc(1 * var(--u)) 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .4s, box-shadow .4s; }
.tr-seg.on { background: color-mix(in srgb, var(--fc) 15%, transparent); box-shadow: inset 0 calc(-1.5 * var(--u)) 0 var(--fc); }
.tr-seg.on ~ .tr-j { color: var(--tr-soft); }
.tr-cut { display: inline-block; width: 0; height: 1.1em; margin: 0; vertical-align: -.18em; border-radius: 2px; background: var(--tr-ink); transform: scaleY(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tr-cut.on { transform: none; width: calc(2 * var(--u)); margin-right: calc(2 * var(--u)); }  /* takes no space until it cuts */

/* two displays */
.tr-desk { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.tr-mon { display: flex; flex-direction: column; align-items: center; }
.tr-scr { width: calc(300 * var(--u) * var(--k)); height: calc(172 * var(--u) * var(--k)); padding: 0; border: calc(4 * var(--u)) solid #1c1d21; border-radius: calc(9 * var(--u)); overflow: hidden;
          box-sizing: content-box; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.16); background: #1c1d21; }
.tr-stand { width: calc(46 * var(--u)); height: calc(14 * var(--u)); background: linear-gradient(#c9ccd3, #aeb2ba); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
@media (prefers-color-scheme: dark) { .tr-stand { background: linear-gradient(#3a3d45, #2a2c32); } }
.tr-in { position: relative; width: calc(300 * var(--u)); height: calc(172 * var(--u)); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; font-size: calc(8 * var(--u)); }
.tr-in.m1 { background: linear-gradient(135deg, #a9c8ff, #cdb8ff 60%, #f3c5e4); }
.tr-in.m2 { background: linear-gradient(135deg, #ffd7ae, #ffb9c9 55%, #c9b8ff); }
@media (prefers-color-scheme: dark) { .tr-in.m1 { background: linear-gradient(135deg, #1e3a73, #3b2a6e 60%, #5a2a55); } .tr-in.m2 { background: linear-gradient(135deg, #6b3d1f, #6e2a40 55%, #33296e); } }
.tr-menu { height: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(7 * var(--u)); background: rgba(255,255,255,.45); color: #1c1d21; font-size: calc(6 * var(--u)); font-weight: 650; }
.tr-menu b { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #1c1d21; }
@media (prefers-color-scheme: dark) { .tr-menu { background: rgba(0,0,0,.35); color: #eef0f4; } .tr-menu b { background: #eef0f4; } }
.tr-win { position: absolute; background: var(--tr-panel); border-radius: calc(7 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.25), 0 0 0 1px var(--tr-line);
          overflow: hidden; opacity: 0; transform: translateY(calc(8 * var(--u))) scale(.92); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.3,1.15); }
.tr-win.open { opacity: 1; transform: none; }
.tr-bar { display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(14 * var(--u)); padding: 0 calc(6 * var(--u)); border-bottom: 1px solid var(--tr-line); color: var(--tr-soft); font-weight: 650; font-size: calc(6.5 * var(--u)); }
.tr-bar i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #ff5f57; } .tr-bar i:nth-child(2) { background: #febc2e; } .tr-bar i:nth-child(3) { background: #28c840; }
.tr-bar span { margin-left: calc(4 * var(--u)); }
.tr-ink { left: calc(56 * var(--u)); top: calc(18 * var(--u)); width: calc(188 * var(--u)); height: calc(118 * var(--u)); background: #fffdf5; transform-origin: 20% 100%; }
@media (prefers-color-scheme: dark) { .tr-ink { background: #23211b; } }
.tr-ink1.out { opacity: 1; transform: translateX(calc(330 * var(--u))); transition: transform .9s cubic-bezier(.55,0,.35,1); }   /* slides off the laptop... */
.tr-ink2 { transform: translateX(calc(-330 * var(--u))); opacity: 1; }
.tr-ink2.open { transform: none; transition: transform .9s cubic-bezier(.55,0,.35,1); }                                         /* ...and onto the right monitor */
.tr-doc { display: grid; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); font-size: calc(7 * var(--u)); }
.tr-doc b { font-size: calc(11 * var(--u)); } .tr-doc span:nth-child(2) { color: var(--tr-soft); font-size: calc(6.5 * var(--u)); }
.tr-tune { left: calc(14 * var(--u)); top: calc(16 * var(--u)); width: calc(176 * var(--u)); height: calc(124 * var(--u)); display: flex; flex-direction: column; transform-origin: 40% 100%; }
.tr-pl { display: flex; gap: calc(7 * var(--u)); align-items: center; padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); }
.tr-pl small { display: block; color: var(--tr-soft); font-size: calc(6 * var(--u)); } .tr-pl b { display: block; font-size: calc(11 * var(--u)); }
.tr-art { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(5 * var(--u)); background: linear-gradient(135deg, #f472b6, #7c3aed); flex: none; }
.tr-tracks { padding: 0 calc(6 * var(--u)); flex: 1; }
.tr-tracks > div { display: grid; grid-template-columns: calc(12 * var(--u)) 1fr auto; align-items: center; height: calc(13 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(6.8 * var(--u)); }
.tr-tracks > div > span { color: var(--tr-soft); } .tr-tracks small { color: var(--tr-soft); font-size: calc(6 * var(--u)); }
.tr-tracks .now { background: color-mix(in srgb, var(--f-music) 12%, transparent); } .tr-tracks .now b { color: var(--f-music); }
.tr-eq { display: inline-flex; align-items: flex-end; gap: 1px; height: calc(7 * var(--u)); }
.tr-eq i { width: calc(1.6 * var(--u)); height: 100%; background: var(--f-music); transform-origin: bottom; transform: scaleY(.3); }
.tr-tune.play .tr-eq i { animation: tr-eq .5s ease-in-out infinite alternate; } .tr-eq i:nth-child(2) { animation-delay: -.2s !important; } .tr-eq i:nth-child(3) { animation-delay: -.35s !important; }
@keyframes tr-eq { to { transform: scaleY(1); } }
.tr-prog { margin: 0 calc(9 * var(--u)) calc(7 * var(--u)); height: calc(2.5 * var(--u)); border-radius: 9px; background: var(--tr-line); overflow: hidden; }
.tr-prog i { display: block; height: 100%; width: 4%; background: var(--f-music); transition: width 7s linear; } .tr-tune.play .tr-prog i { width: 22%; }
.tr-menu em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.tr-moon { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; box-shadow: inset calc(-1.6 * var(--u)) calc(-.6 * var(--u)) 0 currentColor; opacity: .25; transition: opacity .3s; }
.tr-moon.on { opacity: 1; color: var(--f-system); }
.tr-clock { opacity: 0; transition: opacity .3s; color: var(--f-time); } .tr-clock.on { opacity: 1; }
.i-ink { background: linear-gradient(#f7d046 0 32%, #fffdf5 32%); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.i-tune { background: radial-gradient(circle at 42% 64%, #fff 0 16%, transparent 17%), linear-gradient(#fff, #fff) 58% 30% / 9% 38% no-repeat, linear-gradient(135deg, #f472b6, #7c3aed); }
.i-files { background: linear-gradient(#5ac8fa 0 30%, #2f9bf0 30%); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) calc(3.5 * var(--u)) calc(3.5 * var(--u)); }
.i-cal { background: linear-gradient(#ff3b30 0 30%, #fff 30%); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.i-moon { background: radial-gradient(circle at 62% 38%, transparent 0 30%, #fff 31% 44%, transparent 45%), #7c3aed; }
.i-timer { border-radius: 50%; background: conic-gradient(#e0672b 0 300deg, #fff 300deg); box-shadow: inset 0 0 0 calc(2 * var(--u)) #fff; }
.tr-dock { position: absolute; left: 50%; bottom: calc(5 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(5 * var(--u)); padding: calc(3.5 * var(--u)) calc(6 * var(--u));
           border-radius: calc(7 * var(--u)); background: rgba(255,255,255,.4); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
@media (prefers-color-scheme: dark) { .tr-dock { background: rgba(0,0,0,.3); box-shadow: 0 0 0 1px rgba(255,255,255,.08); } }
.ic { display: block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(3.5 * var(--u)); flex: none; }
.ic.hop { animation: tr-hop .6s ease; }
@keyframes tr-hop { 40% { transform: translateY(calc(-6 * var(--u))); } }
.tr-banner { position: absolute; right: calc(8 * var(--u)); top: calc(15 * var(--u)); display: flex; gap: calc(6 * var(--u)); align-items: center; width: calc(132 * var(--u)); padding: calc(6 * var(--u)) calc(7 * var(--u));
             border-radius: calc(8 * var(--u)); background: color-mix(in srgb, var(--tr-panel) 92%, transparent); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.22), 0 0 0 1px var(--tr-line);
             font-size: calc(7 * var(--u)); opacity: 0; transform: translateX(calc(30 * var(--u))); transition: opacity .35s, transform .5s cubic-bezier(.2,.9,.3,1.1); }
.tr-banner small { display: block; color: var(--tr-soft); font-size: calc(6 * var(--u)); } .tr-banner b { display: block; }
.tr-banner.in { opacity: 1; transform: none; }
.tr .tr-cursor { position: absolute; left: 0; top: 0; width: calc(13 * var(--u)); height: auto; overflow: visible; z-index: 2; opacity: 0; pointer-events: none;
             transition: transform .65s cubic-bezier(.45,.05,.25,1), opacity .4s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.tr-cursor path { fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.tr[data-state="act"] .tr-cursor { opacity: 1; }
.tr-cursor::after { content: none; }
.tr-cursor.click path { animation: tr-click .35s ease; }
@keyframes tr-click { 50% { transform: scale(.82); } } .tr-cursor path { transform-origin: 2px 2px; }

/* the plan */
.tr-steps { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(7 * var(--u)); margin: 0; padding: 0; list-style: none; }
.tr-steps li { position: relative; display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)); border-radius: calc(11 * var(--u));
               background: var(--tr-panel); box-shadow: 0 0 0 1px var(--tr-line); opacity: 0; transform: translateY(calc(10 * var(--u)));
               transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.15), box-shadow .3s; }
.tr-steps li.in { opacity: 1; transform: none; }
.tr-steps li.on { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--fc), 0 calc(6 * var(--u)) calc(16 * var(--u)) color-mix(in srgb, var(--fc) 25%, transparent); }
.tr-steps li > b { display: grid; place-items: center; width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: var(--tr-ink); color: var(--tr-panel); font-size: calc(8.5 * var(--u)); transition: background .3s, opacity .3s; }
.tr-st { font-weight: 650; font-size: calc(9.5 * var(--u)); line-height: 1.25; flex: 1; }
.tr-chip { display: block; font-size: calc(7.5 * var(--u)); color: var(--tr-soft); line-height: 1.3; }
.tr-chip em { font-style: normal; font-weight: 700; color: var(--fc); margin-right: calc(3 * var(--u)); }
.tr-chip em::after { content: " ›"; color: var(--tr-soft); font-weight: 500; }
.tr-chip i { font-style: normal; font-weight: 700; color: var(--tr-ink); margin-left: calc(3 * var(--u)); font-variant-numeric: tabular-nums; }
.tr .tr-tick { position: absolute; right: calc(7 * var(--u)); top: calc(7 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: var(--tr-green);
           fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s cubic-bezier(.3,1.7,.5,1); }
.tr-steps li.done .tr-tick { opacity: 1; transform: none; }

/* phones: a taller layout so the words stay readable; the two displays shrink side by side */
@media (max-width: 600px) {
  .lscene.ls-tars { aspect-ratio: auto; }
  .ls-tars > * { --u: calc(100cqw / 360); }
  .tr { position: relative; inset: auto; --k: .515; gap: calc(12 * var(--u)); }
  .tr-voice { grid-template-columns: calc(30 * var(--u)) 1fr; grid-template-rows: auto auto; row-gap: calc(6 * var(--u)); }
  .tr-slot { justify-self: start; width: calc(70 * var(--u)); } .tr .tr-said { grid-column: 1 / -1; font-size: calc(14 * var(--u)); }
  .tr-steps { grid-template-columns: 1fr; gap: calc(6 * var(--u)); }
  .tr-steps li { display: grid; grid-template-columns: calc(18 * var(--u)) 1fr calc(18 * var(--u)); align-items: center; column-gap: calc(8 * var(--u)); row-gap: calc(2 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u)); }
  .tr-steps li > b { grid-row: 1 / 3; width: calc(18 * var(--u)); height: calc(18 * var(--u)); font-size: calc(10 * var(--u)); }
  .tr-st { font-size: calc(12 * var(--u)); } .tr-chip { font-size: calc(10 * var(--u)); grid-column: 2; }
  .tr .tr-tick { position: static; grid-column: 3; grid-row: 1 / 3; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
}