.toren{aspect-ratio:1/.92;perspective:1400px;position:relative;container-type:inline-size}.toren__knop{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:16px;width:100%;display:block;position:absolute;inset:0}.toren__rig{--u:1cqi;--ease:cubic-bezier(.65, 0, .35, 1);width:0;height:0;transform-style:preserve-3d;transform:rotateX(calc(-18deg + var(--px,0deg))) rotateY(calc(-24deg + var(--py,0deg)));position:absolute;top:77%;left:50%}.toren__rig>*,.toren__stapel>*{display:block;position:absolute}.toren__stapel{transform-style:preserve-3d;transition:rotate .52s var(--ease);top:0;left:0}.toren__stapel[data-wiebel]{animation:toren-wiebel .76s var(--ease)}@keyframes toren-wiebel{30%{rotate:1.6deg}65%{rotate:-1deg}}.toren__rig[data-stand="2"] .toren__stapel{rotate:2.4deg}.toren__blok{left:calc(var(--u) * (var(--x,0) - var(--w) / 2));top:calc(var(--u) * -1 * (var(--b) + var(--h)));width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h));transform-style:preserve-3d;transform:rotateY(var(--ry,0deg)) translateZ(calc(var(--u) * var(--d) / 2));transition:translate .42s var(--ease) var(--vertraging,0s), rotate .42s var(--ease) var(--vertraging,0s), opacity .3s var(--ease) var(--vertraging,0s)}.toren__blok--0{--i:0;--w:46;--h:10;--d:30;--b:0;--x:0;--ry:0deg;--vx:-6;--vr:-4deg}.toren__blok--1{--i:1;--w:44;--h:8;--d:28;--b:10;--x:1.5;--ry:3deg;--vx:8;--vr:6deg}.toren__blok--2{--i:2;--w:42;--h:7;--d:26;--b:18;--x:-2;--ry:-4deg;--vx:-14;--vr:-14deg}.toren__blok--3{--i:3;--w:41;--h:7;--d:26;--b:25;--x:2.5;--ry:5deg;--vx:16;--vr:18deg}.toren__blok--4{--i:4;--w:40;--h:7;--d:24;--b:32;--x:-1.5;--ry:-3deg;--vx:-18;--vr:-24deg}.toren__blok--5{--i:5;--w:40;--h:7;--d:24;--b:39;--x:2;--ry:6deg;--vx:20;--vr:30deg}.toren__vlak{display:block;position:absolute}.toren__voor{justify-content:space-between;align-items:center;gap:calc(var(--u) * 1);padding:0 calc(var(--u) * 2.2);border-radius:calc(var(--u) * .6);background:linear-gradient(#ffffff12,#0000 40%),linear-gradient(#2a2b2f,#1b1b1e);display:flex;inset:0;box-shadow:inset 0 1px #ffffff1f}.toren__top{width:100%;height:calc(var(--u) * var(--d));transform-origin:50% 0;border-radius:calc(var(--u) * .6);background:linear-gradient(180deg, rgb(var(--world-light-rgb) / .07), transparent 70%), linear-gradient(180deg, #34353a, #2a2b2f);top:0;left:0;transform:rotateX(-90deg)}.toren__zij{width:calc(var(--u) * var(--d));background:linear-gradient(#1f2023,#121214);height:100%;top:0}.toren__zij--links{transform-origin:0;left:0;transform:rotateY(90deg)}.toren__zij--rechts{transform-origin:100%;right:0;transform:rotateY(-90deg)}.toren__label{font-family:var(--font-mono);font-size:calc(var(--u) * 2.3);letter-spacing:.04em;white-space:nowrap;text-overflow:clip;color:#b9b7b1;overflow:hidden}.toren__blok--0 .toren__label{font-size:calc(var(--u) * 2.6);color:#d8d6d0}.toren__teken{width:calc(var(--u) * 2.4);height:calc(var(--u) * 2.4);opacity:0;box-shadow:0 0 calc(var(--u) * 1.4) #ff3d2e8c;transition:opacity .22s var(--ease);background:#ff3d2e;border-radius:50%;flex:none}.toren__schaduw{left:calc(var(--u) * -34);width:calc(var(--u) * 68);height:calc(var(--u) * 48);transform-origin:50% 0;transform:translateZ(calc(var(--u) * 24)) rotateX(-90deg);background:radial-gradient(closest-side,#0009,#0000);border-radius:50%;top:0}.toren__blok[data-kapot] .toren__voor{background:linear-gradient(#ff3d2e29,#ff3d2e0a),linear-gradient(#2a2b2f,#1b1b1e);box-shadow:inset 0 1px #ffffff1f,inset 0 0 0 1px #ff3d2e73}.toren__blok[data-kapot] .toren__teken{opacity:1}.toren__blok--5[data-kapot]{translate:calc(var(--u) * 6) calc(var(--u) * .6) 0;rotate:7deg}.toren__blok--4[data-kapot]{translate:calc(var(--u) * -4.5) 0 0;rotate:-5deg}.toren__rig[data-stand="3"] .toren__stapel .toren__blok{--vertraging:calc((5 - var(--i)) * 50ms);translate:calc(var(--u) * var(--vx)) calc(var(--u) * var(--b)) 0;rotate:z var(--vr);opacity:0}.toren__rig[data-stand="0"] .toren__stapel .toren__blok{--vertraging:calc(var(--i) * 60ms + .12s)}.toren__massief{--w:46;--h:30;--d:30;--b:0;transform-origin:50% 100%;opacity:0;transition:scale .3s var(--ease), opacity .22s var(--ease);scale:1 0}.toren__rig[data-stand="3"] .toren__massief{opacity:1;transition:scale .48s cubic-bezier(.34, 1.3, .64, 1) .38s, opacity .22s var(--ease) .38s;scale:1}.toren__massief .toren__voor{justify-content:flex-end;align-items:flex-start;gap:calc(var(--u) * .8);padding:calc(var(--u) * 3);box-shadow:inset 0 1px 0 #ffffff24, inset 0 0 0 1px rgb(var(--world-light-rgb) / .22);flex-direction:column}.toren__massief .toren__top{background:linear-gradient(180deg, rgb(var(--world-light-rgb) / .16), transparent 70%), linear-gradient(180deg, #34353a, #2a2b2f)}.toren__naam{font-family:var(--font-display);font-size:calc(var(--u) * 5.4);letter-spacing:-.03em;color:var(--color-text-primary);font-weight:700;line-height:1}.toren__code{font-family:var(--font-mono);font-size:calc(var(--u) * 2.4);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-primary)}.toren__hint{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);justify-content:center;gap:.5rem;font-size:.6875rem;transition:color .2s;display:flex;position:absolute;bottom:0;left:0;right:0}.toren__knop:hover .toren__hint{color:var(--color-accent-primary)}.toren__knop:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){.toren__stapel,.toren__blok,.toren__teken,.toren__massief,.toren__rig[data-stand="3"] .toren__massief{transition:none}.toren__stapel[data-wiebel]{animation:none}}