/* tinker-lab.css — the second wave of exhibits: the visual ones out of the concept labs.
   Sized in container units (cqw) so the same exhibit holds at 258px in the gallery and
   at 440px in the viewer. */

/* 19 · MISCLASSIFIED — the machine tries to name you */
.tx-mis{position:relative;width:100%;height:100%;display:grid;place-items:center}
.tx-mis .plate{position:relative;height:100%;max-height:100%;width:auto;aspect-ratio:3/4;max-width:72cqw;border:1px solid var(--line);background:color-mix(in srgb,var(--uv) 7%,transparent)}
.tx-mis .plate::after{content:"";position:absolute;inset:0;background-image:var(--tex-dither);background-size:5px 5px;opacity:.4}
.tx-mis .bb{position:absolute;border:1.5px solid var(--uv);z-index:2}
.tx-mis .bb.b2{border-color:var(--cy);border-style:dashed}
.tx-mis .bb span{position:absolute;left:-1px;top:-15px;font-family:'VT323',monospace;font-size:14px;line-height:1;letter-spacing:.02em;color:var(--uv);white-space:nowrap;background:var(--bg);padding:0 3px;z-index:3}
.tx-mis .bb.b2 span{color:var(--cy)}
.tx-mis .rd{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;gap:8px;background:color-mix(in srgb,var(--bg) 88%,transparent);border-top:1px solid var(--line);padding:3px 5px;font-family:'VT323',monospace;font-size:15px;line-height:1.1;letter-spacing:.02em;color:var(--uv);overflow:hidden;white-space:nowrap}
.tx-mis .rd span:first-child{overflow:hidden;text-overflow:ellipsis}

/* 20 · DEAD CHANNEL — the test card */
.tx-tc{position:relative;height:100%;max-height:100%;width:auto;aspect-ratio:4/3;max-width:100%;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-rows:1fr auto}
.tx-tc .bars{display:grid;grid-template-columns:repeat(7,1fr)}
.tx-tc .bars i{display:block}
.tx-tc .strip{height:22%;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bg)}
.tx-tc .cap{position:absolute;left:0;right:0;top:44%;text-align:center;font-family:var(--font-mono);font-size:clamp(9px,3.4cqw,12px);font-weight:700;letter-spacing:.16em;color:var(--bg);background:color-mix(in srgb,var(--ink) 86%,transparent);padding:4px 0}
.tx-tc .roll{position:absolute;left:0;right:0;height:16%;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--ink) 30%,transparent),transparent);pointer-events:none}
.tx-live .tx-tc .roll{animation:tx-tcroll 4.2s linear infinite}
@keyframes tx-tcroll{from{top:-18%}to{top:104%}}

/* 21 · SCREENSAVER.EXE */
.tx-ss{position:relative;width:100%;height:100%}
.tx-ss canvas{position:absolute;inset:0;width:100%;height:100%}
.tx-ss .hint{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);pointer-events:none}

/* 22 · Y2K DIALOG STORM */
.tx-y2k{position:relative;width:100%;height:100%;overflow:hidden}
.tx-y2k .hl{position:absolute;left:0;right:0;top:4%;text-align:center;font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(14px,4.6cqw,22px);text-transform:lowercase;color:var(--ink)}
.tx-dlg{position:absolute;width:min(62cqw,190px);border:1px solid var(--ink-soft);background:var(--panel);box-shadow:3px 3px 0 color-mix(in srgb,var(--bg) 70%,transparent)}
.tx-dlg .tb{display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--ink-soft);color:var(--bg);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 5px}
.tx-dlg .tb b{width:11px;height:11px;border:1px solid var(--bg);display:block;font-size:0}
.tx-dlg .bd{padding:9px 8px;font-family:var(--font-mono);font-size:11px;line-height:1.4;color:var(--ink-soft)}
.tx-dlg .bt{display:flex;justify-content:center;gap:6px;padding:0 8px 8px}
.tx-dlg .bt span{border:1px solid var(--ink-faint);padding:2px 12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft)}
@media (prefers-reduced-motion:no-preference){.tx-dlg{animation:tx-pop .16s steps(2,end) both}}
@keyframes tx-pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}

/* 23 · 56K HANDSHAKE */
.tx-56{width:100%;max-width:300px;display:grid;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.tx-56 .pk{display:grid;gap:3px;min-height:54px;align-content:start;font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
.tx-56 .track{height:10px;border:1px solid var(--line);position:relative}
.tx-56 .track i{position:absolute;inset:1px auto 1px 1px;background:var(--uv);display:block}
.tx-56 .pct{display:flex;justify-content:space-between;letter-spacing:.12em;text-transform:uppercase}
.tx-56 .pct b{color:var(--uv);font-weight:400;font-family:'VT323',monospace;font-size:17px}

/* 24 · INSERT CARTRIDGE */
.tx-cart{position:relative;width:min(78cqw,240px);height:100%;max-height:160px}
.tx-cart .deck{position:absolute;left:0;right:0;bottom:0;height:44px;border:1px solid var(--uv);background:color-mix(in srgb,var(--uv) 8%,transparent)}
.tx-cart .deck .slot{position:absolute;left:18%;right:18%;top:-1px;height:10px;border:1px solid var(--uv);background:var(--bg)}
.tx-cart .deck .led{position:absolute;right:9px;bottom:9px;width:7px;height:7px;background:var(--uv-dim)}
.tx-cart[data-st="in"] .deck .led{background:var(--uv)}
.tx-live .tx-cart[data-st="in"] .deck .led{animation:tx-blink 1.1s steps(2,end) infinite}
.tx-cart .cart{position:absolute;left:50%;bottom:36px;width:44%;height:54px;margin-left:-22%;border:2px solid var(--cy);background:color-mix(in srgb,var(--cy) 12%,transparent);cursor:pointer;display:grid;align-content:center;justify-items:center;gap:4px;transition:transform .34s cubic-bezier(.3,.8,.4,1);z-index:2}
.tx-cart .cart i{display:block;width:60%;height:9px;border:1px solid var(--cy);font-style:normal}
.tx-cart .cart em{font-family:var(--font-mono);font-size:11px;font-style:normal;letter-spacing:.1em;color:var(--cy)}
.tx-cart[data-st="idle"] .cart{transform:translateY(-46px)}
.tx-cart[data-st="in1"] .cart{transform:translateY(-4px)}
.tx-cart[data-st="fail"] .cart{transform:translateY(-24px) rotate(-2deg)}
.tx-cart[data-st="blow"] .cart{transform:translateY(-24px) rotate(2deg)}
.tx-cart[data-st="in"] .cart{transform:translateY(12px)}
.tx-cart .say{position:absolute;left:0;right:0;top:4px;text-align:center;font-family:var(--font-mono);font-size:clamp(10px,3.6cqw,12px);letter-spacing:.08em;color:var(--uv);min-height:16px}
.tx-cart[data-st="fail"] .say{color:var(--signal);color:var(--ink)}

/* 25 · CHANNEL ZAP */
.tx-zap{position:relative;height:100%;max-height:100%;width:auto;aspect-ratio:16/10;max-width:100%;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;cursor:pointer}
.tx-zap .ch{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;box-sizing:border-box;font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(14px,5cqw,22px);line-height:.98;text-transform:lowercase}
.tx-zap .num{position:absolute;right:8px;top:7px;font-family:'VT323',monospace;font-size:20px;line-height:1;color:currentColor;opacity:.85}
.tx-zap .snow{position:absolute;inset:0;opacity:0;background-image:var(--tex-dither);background-size:2px 2px;pointer-events:none}
.tx-zap[data-snow="1"] .snow{opacity:.9}
.tx-zap[data-snow="1"] .ch{opacity:.25}

/* 26 · TUMBLERS */
.tx-tum{display:grid;gap:14px;justify-items:center;width:100%}
.tx-tum .top{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(16px,5.4cqw,26px);text-transform:lowercase;color:var(--ink);display:flex;gap:.02em}
.tx-tum .top i{font-style:normal;display:inline-block}
.tx-live .tx-tum .top i{animation:tx-drop 2.8s ease-in infinite}
@keyframes tx-drop{0%,28%{transform:none;opacity:1}44%{transform:translateY(46px) rotate(6deg);opacity:0}45%,100%{opacity:0;transform:translateY(46px)}}
.tx-tum .line{display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:13px;color:var(--uv);border-bottom:1px solid var(--uv-dim);padding-bottom:4px;min-height:20px}
.tx-tum .line i{font-style:normal;opacity:0}
.tx-live .tx-tum .line i{animation:tx-land 2.8s steps(1,end) infinite}
@keyframes tx-land{0%,44%{opacity:0}46%,92%{opacity:1}93%,100%{opacity:0}}

/* 27 · CURTAIN */
.tx-curt{position:relative;width:100%;height:100%;display:grid;place-items:center}
.tx-curt .stage{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(15px,5cqw,24px);text-transform:lowercase;color:var(--ink);text-align:center}
.tx-curt .dim{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.tx-curt .term{position:absolute;left:12%;right:12%;top:32%;border:1px solid var(--uv);background:color-mix(in srgb,var(--uv) 7%,transparent);padding:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--uv);opacity:0}
.tx-live .tx-curt .dim{animation:tx-dim 5.4s ease-in-out infinite}
.tx-live .tx-curt .term{animation:tx-term 5.4s ease-in-out infinite}
.tx-live .tx-curt .stage{animation:tx-stage 5.4s ease-in-out infinite}
@keyframes tx-dim{0%,26%{opacity:0}44%,74%{opacity:.88}94%,100%{opacity:0}}
@keyframes tx-stage{0%,26%{opacity:1}44%,78%{opacity:0}96%,100%{opacity:1}}
@keyframes tx-term{0%,40%{opacity:0;filter:blur(6px)}54%,76%{opacity:1;filter:blur(0)}88%,100%{opacity:0;filter:blur(6px)}}

/* 28 · TUNE THE SIGNAL */
.tx-tune{width:100%;display:grid;gap:14px;justify-items:center}
.tx-tune .st{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(15px,5.2cqw,24px);text-transform:lowercase;color:var(--ink);text-align:center;line-height:.98;position:relative}
.tx-tune .st b{position:absolute;inset:0;color:var(--uv);opacity:.55;font-weight:900}
.tx-tune .dialrow{width:min(86cqw,260px);display:grid;gap:6px}
.tx-tune input[type=range]{width:100%;accent-color:var(--uv);cursor:ew-resize}
.tx-tune .read{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.tx-tune .read b{font-family:'VT323',monospace;font-size:17px;font-weight:400;color:var(--uv)}

/* 29 · MAGNETIC TYPE */
.tx-mag{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(17px,6cqw,30px);text-transform:lowercase;color:var(--ink);text-align:center;line-height:1;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%}
.tx-mag i{font-style:normal;display:inline-block;transition:transform .34s cubic-bezier(.2,.9,.3,1)}
.tx-mag .sp{width:.3em}

/* 30 · THE REACTIVE FIELD */.tx-field{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.tx-field .glow{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--uv) 30%,transparent),transparent 68%);transform:translate(-50%,-50%);left:var(--gx,50%);top:var(--gy,50%);pointer-events:none;transition:left .18s linear,top .18s linear}
.tx-field .xs{position:absolute;inset:0;background:var(--ink);opacity:.14;-webkit-mask-image:var(--tex-crosses);mask-image:var(--tex-crosses)}
.tx-field .st{position:relative;font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(15px,5cqw,24px);text-transform:lowercase;color:var(--ink);text-align:center}

/* 31 · THE GUTTER TICKER */
.tx-tick{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;width:100%;height:100%;align-items:stretch}
.tx-tick .gut{position:relative;overflow:hidden;border-right:1px solid var(--line)}
.tx-tick .rail{position:absolute;left:0;top:0;display:grid;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--uv);opacity:.8}
.tx-live .tx-tick .rail{animation:tx-crawl 9s linear infinite}
@keyframes tx-crawl{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.tx-tick .col{display:grid;gap:9px;align-content:center}
.tx-tick .col b{display:block;height:7px;background:var(--ink-faint);opacity:.35}

/* 32 · THE OSCILLOSCOPE */
.tx-scope{position:relative;width:100%;height:100%}
.tx-scope canvas{position:absolute;inset:0;width:100%;height:100%}

/* 33 · TELEMETRY EXHAUST */
.tx-telem{position:relative;width:100%;height:100%;overflow:hidden}
.tx-telem .rail{position:absolute;left:0;right:0;top:0;display:grid;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.tx-telem .rail i{font-style:normal}
.tx-telem .rail i.q{color:var(--cy);text-transform:none;letter-spacing:.02em;font-size:12px}
.tx-live .tx-telem .rail{animation:tx-crawl 14s linear infinite}

/* 34 · THE CURSOR IS THE RUNNER */
.tx-ret{position:relative;width:100%;height:100%;display:grid;place-content:center;gap:12px;justify-items:center;cursor:none}
.tx-ret .tgt{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding:2px 4px}
.tx-ret .hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}
.tx-ret .ret{position:absolute;left:50%;top:50%;width:26px;height:26px;pointer-events:none;transition:left .12s linear,top .12s linear,width .12s linear,height .12s linear}
.tx-ret .ret i{position:absolute;width:7px;height:7px;border:1.5px solid var(--uv)}
.tx-ret .ret i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.tx-ret .ret i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.tx-ret .ret i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.tx-ret .ret i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.tx-ret .ret[data-lock] i{border-color:var(--cy)}

/* 35 · THE THINKING CURSOR */
.tx-think{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(17px,5.6cqw,28px);line-height:1;text-transform:lowercase;color:var(--ink);text-align:center}
.tx-think b{color:var(--uv);font-weight:900}