/* Idea E: physics toys (real physics bodies you can push; the lab half is a cloud of molecules) */
.tz .half{isolation:isolate}
.tz .half.lab{background:radial-gradient(70% 55% at 55% 40%,#1a3778,#08102c 70%,#04061a)}
.tz .half.kids{background:radial-gradient(70% 55% at 50% 45%,#fff6e8,#f7dcbd 75%)}
.tz-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s}
.tz-lab .half.lab .tz-canvas,.tz-kids .half.kids .tz-canvas{opacity:1}
.tz-hit{position:absolute;inset:0;z-index:1;cursor:pointer}
.tz .labcard,.tz .kp-sign{z-index:3}
.tz .labcard{bottom:clamp(54px,8vh,90px)}
.tz .kp-sign.flat{top:auto;bottom:clamp(54px,8vh,90px);right:clamp(16px,4cqw,56px);width:min(380px,calc(100cqw - 32px));padding-top:0;transform:rotate(1.2deg)}
.tz .kp-big{font-size:min(clamp(28px,3.1vw,44px),14.5cqi)}
@container half (max-width:470px){.tz .labcard p,.tz .kp-sign p{display:none}.tz .kp-sign.flat{width:calc(100cqw - 32px)}}
.gate.v.tz .labcard{bottom:auto;top:12px;left:12px;width:auto;max-width:calc(100% - 76px)}
.gate.v.tz .kp-sign.flat{bottom:52px;left:12px;right:12px;width:auto;transform:rotate(-1deg)}
.tz .seamline{z-index:4}
.tz .kp-soon{z-index:5}
/* the name of the molecule under the pointer */
.tz-label{position:absolute;left:0;top:0;z-index:2;pointer-events:none;display:flex;align-items:baseline;gap:8px;padding:7px 13px 8px;border-radius:999px;white-space:nowrap;
 background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);box-shadow:0 8px 24px rgba(0,0,20,.35),inset 0 1px 0 rgba(255,255,255,.25);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
 color:#fff;font:600 14px/1 'DM Sans',sans-serif;opacity:0;transition:opacity .2s}
.tz-label.on{opacity:1}
.tz-label span{font:500 13px/1 'Unbounded',sans-serif;color:#9feaff;letter-spacing:.02em}
.gate.entering .tz-label{opacity:0}
/* the kindergarten: "Visit" opens the toy town full screen and hands over the bus */
.tz.tz-kids .kp-soon{display:none}
.tz:not(.tz-kids) .tz-hud{display:none}
.tz-hud{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.tz-hud.on{opacity:1;visibility:visible;transition:opacity .4s .3s}
.tz-hud.on .tz-back,.tz-hud.on .tz-joy{pointer-events:auto}
.tz-back{position:absolute;top:16px;left:16px;font-size:15px;padding:10px 16px 11px}
.tz-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;align-items:center;max-width:calc(100% - 32px);padding:10px 18px 11px;border-radius:22px;
 background:rgba(255,250,240,.92);color:#2b3170;font:700 16px/1.3 'Baloo Bhaijaan 2',sans-serif;box-shadow:0 10px 28px rgba(90,60,20,.22);transition:opacity .6s}
.tz-hint b{font-weight:800;color:#e4473c}
.tz-hint kbd{display:inline-block;min-width:26px;margin:0 2px;padding:2px 6px 3px;border-radius:7px;background:#fff;border:1px solid #d9cdb8;box-shadow:0 2px 0 #d9cdb8;font:800 13px/1.2 'DM Sans',sans-serif;text-align:center;color:#2b3170}
.tz-hud:not(.hinted) .tz-hint{opacity:0}
.tz-hint .t{display:none}
.tz-joy{position:absolute;left:22px;bottom:22px;width:128px;height:128px;border-radius:50%;background:rgba(255,255,255,.4);border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(90,60,20,.2);touch-action:none;backdrop-filter:blur(6px)}
.tz-joy i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:#ffc21a;box-shadow:0 4px 12px rgba(0,0,0,.25),inset 0 -4px 0 rgba(0,0,0,.12);transform:translate(var(--jx,0px),var(--jy,0px))}
@media (hover:hover) and (pointer:fine){.tz-joy{display:none}}
@media (hover:none),(pointer:coarse){.tz-hint .k{display:none}.tz-hint .t{display:inline}.tz-hint{bottom:auto;top:68px;left:16px;right:auto;transform:none}}
.tz-hint .r{flex-basis:100%;text-align:center;font-size:13px;font-weight:600;color:#6b6f9a}
/* "Drive me!" above the bus while it drives itself */
.tz-tag{position:absolute;left:0;top:0;z-index:2;pointer-events:none;padding:5px 12px 6px;border-radius:999px;background:#fff9ee;color:#e4473c;font:800 15px/1 'Baloo Bhaijaan 2',sans-serif;white-space:nowrap;
 box-shadow:0 6px 16px rgba(90,60,20,.25);opacity:0;transition:opacity .3s}
.tz-tag::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fff9ee}
.tz-tag.on{opacity:1}
.gate.entering .tz-tag{opacity:0}
/* coins collected while driving */
.tz-coins{position:absolute;z-index:6;top:18px;right:18px;display:flex;align-items:center;gap:8px;padding:8px 14px 9px 10px;border-radius:999px;background:rgba(255,250,240,.94);color:#2b3170;
 font:700 18px/1 'Baloo Bhaijaan 2',sans-serif;box-shadow:0 8px 22px rgba(90,60,20,.22);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;pointer-events:none}
.tz-coins.on{opacity:1;visibility:visible;transition:opacity .4s .3s}
.tz-coins i{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc93c 55%,#e9a316);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.tz-coins b{font-weight:800;color:#e4473c;font-size:20px}
.tz-coins span{color:#3e9150;font-weight:800}
@media (hover:none),(pointer:coarse){.tz-coins{top:auto;bottom:24px;right:16px}}