/* tinker.css — THE EXHIBITS. Shared by every Tinkering Experiments concept.
   One rule for the whole archive: an exhibit only runs while it is open or on screen.
   Nothing here loops in the background — the page is a workshop, not an aquarium. */

/* ---- the cell: a reserved plate with registration crosses, like every other figure here ---- */
.tx-cell{position:relative;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);overflow:hidden;box-sizing:border-box;container-type:inline-size}
.tx-cell>.tx-x{position:absolute;width:9px;height:9px;opacity:.5;pointer-events:none;z-index:4}
.tx-cell>.tx-x::before,.tx-cell>.tx-x::after{content:"";position:absolute;background:var(--ink-faint)}
.tx-cell>.tx-x::before{left:4px;top:0;width:1px;height:9px}.tx-cell>.tx-x::after{top:4px;left:0;height:1px;width:9px}
.tx-x.a{top:6px;left:6px}.tx-x.b{top:6px;right:6px}.tx-x.c{bottom:6px;left:6px}.tx-x.d{bottom:6px;right:6px}
.tx-run{position:absolute;inset:0;display:grid;place-items:center;padding:22px 20px 30px;box-sizing:border-box;overflow:hidden}
.tx-cell:has(.tx-sw) .tx-run{padding-top:42px}
.tx-tag{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:6px 9px;font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);background:linear-gradient(to top,color-mix(in srgb,var(--bg) 88%,transparent),transparent);z-index:5;pointer-events:none}
.tx-tag span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-tag span+span{flex:none}

/* ---- the switch every two-state exhibit uses ---- */
.tx-sw{position:absolute;top:8px;right:8px;z-index:6;display:flex;border:1px solid var(--line);background:var(--bg)}
.tx-sw button{appearance:none;border:0;background:transparent;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--ink-faint);padding:4px 8px;cursor:pointer}
.tx-sw button[data-on]{background:var(--uv);color:var(--bg)}
.tx-sw button:active{transform:translateY(1px)}
.tx-note{position:absolute;left:9px;top:10px;z-index:6;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- the fate stamp ---- */
.tx-stamp{display:inline-flex;align-items:center;gap:6px;border:1px solid;padding:3px 7px;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* ============ the exhibits themselves ============ */
/* 01 stroked numeral */
.tx-num-dead{font-family:var(--font-display);font-weight:900;font-stretch:115%;font-size:clamp(58px,17cqw,92px);line-height:.8;color:var(--fill);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.tx-num-live{font-family:'VT323',monospace;font-size:clamp(66px,19cqw,104px);line-height:.8;letter-spacing:.02em;color:var(--uv)}

/* 02 teletype ghost */
.tx-tty{font-family:var(--font-mono);font-size:13px;line-height:2;color:var(--ink-soft);width:100%;max-width:290px}
.tx-tty i{display:block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--uv);width:0;font-style:normal}
.tx-live .tx-tty i{animation:tx-type 1.6s steps(22,end) infinite alternate}
.tx-live .tx-tty i:nth-child(2){animation-duration:2.1s;animation-delay:.2s}
.tx-live .tx-tty i:nth-child(3){animation-duration:1.3s;animation-delay:.4s}
@keyframes tx-type{from{width:0}to{width:100%}}

/* 03 scanlines */
.tx-page{position:relative;width:100%;max-width:320px;background:var(--bg);border:1px solid var(--line);padding:16px;box-sizing:border-box}
.tx-page h4{margin:0 0 10px;font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:26px;line-height:.92;text-transform:lowercase;color:var(--uv)}
.tx-bar{height:6px;background:var(--ink-faint);opacity:.5;margin-bottom:6px}
.tx-scan{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 22%,transparent) 0 1px,transparent 1px 3px)}
.tx-scan::after{content:"";position:absolute;left:0;right:0;height:22%;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--ink) 14%,transparent),transparent)}
.tx-cell[data-on="1"] .tx-scan{opacity:1}
.tx-cell[data-on="1"].tx-live .tx-scan::after{animation:tx-roll 3.4s linear infinite}
@keyframes tx-roll{from{top:-25%}to{top:105%}}

/* 04 sixteen heroes */
.tx-roll{width:100%;max-width:330px;font-family:var(--font-mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;display:grid;gap:5px}
.tx-roll b{display:flex;justify-content:space-between;gap:10px;font-weight:400;color:var(--ink-faint)}
.tx-roll b[data-cut]{text-decoration:line-through;text-decoration-color:var(--uv-dim);opacity:.55}
.tx-roll b[data-at]{color:var(--ink);opacity:1;text-decoration:none}
.tx-roll b[data-kept]{color:var(--uv);opacity:1;text-decoration:none}

/* 05 the plate */
.tx-plate-wrap{display:grid;place-items:center;width:100%}

/* 06 door B */
.tx-doorb{width:100%;max-width:340px;text-align:center}
.tx-doorb .q{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(19px,6.5cqw,30px);line-height:.95;text-transform:lowercase;color:var(--uv)}
.tx-doorb .q em{font-style:normal;color:var(--ink)}
.tx-ghostline{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;opacity:0}
.tx-live .tx-ghostline{animation:tx-fade .8s steps(4,end) 1.1s both}
.tx-ghostline span{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.06em;color:var(--ink-soft)}
.tx-ghostline span b{font-family:'Grenze Gotisch',serif;font-weight:400;font-size:17px;letter-spacing:0;color:var(--uv)}
.tx-selfie{width:46px;height:46px;flex:none;border:1px solid var(--line);background-image:var(--tex-dither);background-size:5px 5px;background-color:color-mix(in srgb,var(--uv) 10%,transparent);opacity:.75}
@keyframes tx-fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* 07 the drawn terminal */
.tx-term{position:relative;width:100%;max-width:300px;height:132px;font-family:var(--font-mono);font-size:13.5px;color:var(--uv)}
.tx-term i{position:absolute;background:var(--uv);font-style:normal}
.tx-term i.t,.tx-term i.b{left:0;height:1px;width:0}.tx-term i.t{top:0}.tx-term i.b{bottom:0}
.tx-term i.l,.tx-term i.r{top:0;width:1px;height:0}.tx-term i.l{left:0}.tx-term i.r{right:0}
.tx-live .tx-term i.t{animation:tx-w 1.1s steps(12,end) infinite}
.tx-live .tx-term i.b{animation:tx-w 1.1s steps(12,end) .35s infinite}
.tx-live .tx-term i.l{animation:tx-h .9s steps(8,end) .7s infinite}
.tx-live .tx-term i.r{animation:tx-h .9s steps(8,end) .9s infinite}
@keyframes tx-w{0%{width:0}55%,100%{width:100%}}
@keyframes tx-h{0%{height:0}55%,100%{height:100%}}
.tx-term p{margin:0;padding:18px 14px;opacity:0}
.tx-live .tx-term p{animation:tx-fade .5s steps(3,end) 1.9s infinite}

/* 08 reduced motion */
.tx-mo{display:grid;gap:14px;justify-items:center;font-family:var(--font-mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.tx-mo .big{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(18px,6cqw,28px);letter-spacing:-.01em;text-transform:lowercase;color:var(--uv)}
.tx-cur{display:inline-block;width:.5em;height:.11em;background:currentColor;vertical-align:-.03em;margin-left:.08em}
.tx-cell[data-on="0"].tx-live .tx-cur,.tx-cell[data-on="0"].tx-live .tx-dot{animation:tx-blink 1s steps(2,end) infinite}
.tx-dot{color:var(--uv)}
@keyframes tx-blink{50%{opacity:0}}
.tx-cell[data-on="1"] .tx-mo{color:var(--ink-faint)}

/* 09 the random guess */
.tx-guess{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(18px,6.4cqw,32px);line-height:.95;text-transform:lowercase;color:var(--ink);text-align:center}
.tx-guess u{text-decoration:none;color:var(--uv)}
.tx-flag{display:block;margin-top:11px;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--uv);min-height:14px}

/* 10 redaction */
.tx-red{width:100%;max-width:320px;display:grid;gap:9px}
.tx-red i{display:block;height:13px;background:var(--ink);opacity:.86}
.tx-red i:nth-child(2){width:88%}.tx-red i:nth-child(3){width:64%}
.tx-red .st{justify-self:start;margin-top:5px;border:1px solid var(--cy);color:var(--cy);font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.14em;padding:3px 7px;cursor:default}
.tx-red:hover .st{border-color:var(--uv);color:var(--uv)}
.tx-red:hover .st b{display:none}.tx-red .st i.ask{display:none;height:auto;background:none;opacity:1}
.tx-red:hover .st i.ask{display:inline;font-style:normal}

/* 11 the backdrop 26 */
.tx-26{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.tx-26 b{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(120px,48cqw,190px);line-height:.8;color:var(--uv);opacity:.14;transform:translate(calc(var(--mx,0)*16px),calc(var(--my,0)*10px));transition:transform .2s linear}
.tx-26 span{position:relative;font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(17px,5.6cqw,26px);text-transform:lowercase;color:var(--ink);text-align:center;line-height:.98}

/* 12 the grain bug */
.tx-grain{position:relative;width:100%;max-width:300px;height:120px;background:var(--uv);display:grid;place-items:center}
.tx-grain::after{content:"";position:absolute;inset:0;background-image:var(--tex-dither);background-size:3px 3px;mix-blend-mode:multiply;opacity:0}
.tx-cell[data-on="0"] .tx-grain::after{opacity:.55}
.tx-grain em{font-family:var(--font-mono);font-size:13.5px;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--bg);z-index:2}

/* 13 the trace dots */
.tx-trace{display:grid;gap:14px;justify-items:center}
.tx-trace .wh{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.06em;color:var(--ink-faint)}
.tx-trace .dots{display:flex;gap:9px}
.tx-trace .dots i{width:4px;height:4px;background:var(--uv);opacity:.18}
.tx-live .tx-trace .dots i{animation:tx-breathe 2.6s steps(4,end) infinite}
@keyframes tx-breathe{0%,70%,100%{opacity:.14}35%{opacity:.85}}

/* 14 the odometer */
.tx-odo{display:flex;gap:3px;font-family:'VT323',monospace;font-size:clamp(32px,11cqw,50px);line-height:1;color:var(--uv)}
.tx-odo span{display:block;width:.62em;height:1em;overflow:hidden;border:1px solid var(--line);background:var(--bg);text-align:center}
.tx-odo span i{display:block;font-style:normal;transform:translateY(0)}
.tx-live .tx-odo span:nth-child(3) i{animation:tx-roll10 2.4s steps(10,end) infinite}
.tx-live .tx-odo span:nth-child(4) i{animation:tx-roll10 .28s steps(10,end) infinite}
@keyframes tx-roll10{to{transform:translateY(-10em)}}

/* 15 four galleries */
.tx-lay{width:100%;max-width:300px}
.tx-lay .fr{display:grid;gap:4px;border:1px solid var(--line);padding:6px;background:var(--bg);min-height:66px;align-content:start}
.tx-lay .fr i{display:block;background:var(--ink-faint);opacity:.4;height:7px}
.tx-lay .fr .big{height:24px;background:var(--uv);opacity:.5}
.tx-lay .row{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tx-lay .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.tx-lay .strip i{height:14px}
.tx-lay .opts{display:flex;gap:4px;margin-top:5px}
.tx-lay .opts button{flex:1;appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-faint);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;padding:2px 0;cursor:pointer}
.tx-lay .opts button[data-on]{border-color:var(--uv);color:var(--uv)}

/* 16 the 38px drag */
.tx-drag{width:100%;max-width:300px}
.tx-drag .vp{position:relative;border:1px solid var(--line);height:72px;overflow:hidden;background:var(--bg)}
.tx-drag .vp i{position:absolute;top:10px;bottom:10px;width:54px;background:color-mix(in srgb,var(--uv) 45%,transparent);border:1px solid var(--uv)}
.tx-drag .vp i.p{background:color-mix(in srgb,var(--ink) 16%,transparent);border-color:var(--line)}
.tx-drag .vp i:nth-child(1){left:-34px}.tx-drag .vp i:nth-child(2){left:38px;width:150px;background:var(--uv);opacity:.7}
.tx-drag .vp i:nth-child(3){left:196px}
.tx-cell[data-on="1"] .tx-drag .vp>span{position:absolute;right:0;top:0;bottom:0;width:38px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--signal) 55%,transparent) 0 4px,transparent 4px 8px);border-left:1px solid var(--signal)}
.tx-cell[data-on="0"] .tx-drag .vp>span{display:none}
.tx-drag .lab{margin-top:6px;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 17 the guestbook */
.tx-gb{width:100%;max-width:300px;display:grid;gap:5px;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint)}
.tx-gb .in{border:1px solid var(--line);padding:6px 9px;letter-spacing:.06em;color:var(--ink-faint);background:var(--bg)}
.tx-gb .in.big{height:24px}
.tx-gb .bt{border:1px solid var(--uv-dim);color:var(--ink-faint);text-align:center;padding:5px;letter-spacing:.12em;text-transform:uppercase}

/* the honest no-exhibit state: a plate reserved at the printer */
.tx-none{display:grid;gap:10px;justify-items:center;align-content:center;text-align:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);max-width:260px;line-height:1.5}
.tx-none b{font-weight:400;color:var(--ink-soft);border:1px solid var(--line);padding:5px 10px}

@media (prefers-reduced-motion:reduce){
  .tx-26 b{transition:none}
  .tx-live .tx-term i.t,.tx-live .tx-term i.b,.tx-live .tx-term i.l,.tx-live .tx-term i.r{animation:none;width:100%;height:100%}
  .tx-live .tx-term i.t,.tx-live .tx-term i.b{height:1px}.tx-live .tx-term i.l,.tx-live .tx-term i.r{width:1px}
  .tx-live .tx-term p{animation:none;opacity:1}
  .tx-live .tx-ghostline{animation:none;opacity:1}
}