.wb-toy{--half:50%;--cap:.88;min-height:100svh;padding-top:calc(var(--nav,56px) + clamp(20px, 5vh, 64px));background:var(--mineral,#d9d8d3);color:var(--graphite,#2b2f33);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex;position:relative;overflow:clip}.wb-toy-copy{z-index:3;pointer-events:none;padding:0 clamp(16px,3vw,40px);position:relative}.wb-toy h1{letter-spacing:-.045em;color:var(--graphite,#2b2f33);animation:wb-toy-in 1s var(--ease,cubic-bezier(.2, .9, .1, 1)) both;font-size:clamp(2.4rem,min(6.4vw,12vh),8.6rem);font-weight:850;line-height:.92}.wb-toy h1 em{color:var(--cobalt,#1f3bd6);font-style:normal}.wb-toy-hint{color:#4a4f53;animation:wb-toy-in 1s var(--ease,cubic-bezier(.2, .9, .1, 1)) .9s both;transition:opacity .6s var(--ease,cubic-bezier(.2, .9, .1, 1)), letter-spacing .6s var(--ease,cubic-bezier(.2, .9, .1, 1));margin-top:clamp(30px,4.4vh,46px)}.wb-toy[data-touched] .wb-toy-hint{letter-spacing:.4em;animation:none;opacity:0!important}@keyframes wb-toy-in{0%{opacity:0;transform:translateY(.4em)}}.wb-toy-field{touch-action:none;cursor:grab;will-change:transform;flex:1;min-height:300px;margin-top:clamp(12px,3vh,36px);display:flex;position:relative}.wb-toy[data-drag] .wb-toy-field{cursor:grabbing}.wb-toy .col{outline:none;flex:1;min-width:0;position:relative}.wb-toy .up,.wb-toy .dn{height:var(--half);pointer-events:none;position:absolute;left:0;right:0}.wb-toy .up{margin-bottom:1px;bottom:50%}.wb-toy .dn{margin-top:1px;top:50%}.wb-toy .up i,.wb-toy .dn i{border-left:3px solid var(--mineral,#d9d8d3);will-change:transform;transition:background-color .18s var(--ease,cubic-bezier(.2, .9, .1, 1));position:absolute;inset:0}.wb-toy .up i{background:var(--cobalt,#1f3bd6);transform-origin:50% 100%;transform:scaleY(0)}.wb-toy .dn i{background:var(--graphite,#2b2f33);transform-origin:50% 0;transform:scaleY(0)}@media (hover:hover){.wb-toy .col:hover .up i{background:#3550f0}.wb-toy .col:hover .dn i{background:#3a4046}}.wb-toy .col[data-active] .up i{background:#3550f0}.wb-toy .col[data-active] .dn i{background:#3a4046}.wb-toy[data-kbd] .col:focus-visible:after{content:"";outline:1px solid var(--ink,#1c1e20);outline-offset:-1px;position:absolute;inset:0 0 0 3px}.wb-toy-wall{--f:0;z-index:2;left:0;right:0;top:calc(50% * (1 - var(--cap)));pointer-events:none;background:#8a8983;height:1px;position:absolute}.wb-toy-wall:before{content:"";background:var(--red,#e04b3a);opacity:var(--f);position:absolute;inset:-1px 0}.wb-toy-wall span{color:#5b5f63;font-size:.62rem;transition:color .2s;position:absolute;bottom:8px;right:clamp(16px,3vw,40px)}.wb-toy-wall:after{content:"";width:0;height:0;position:absolute;right:0}.wb-toy .axis{z-index:2;background:var(--red,#e04b3a);pointer-events:none;will-change:transform;height:3px;animation:wb-toy-axis 1.3s var(--ease,cubic-bezier(.2, .9, .1, 1)) .1s both;transform-origin:0;margin-top:-1.5px;position:absolute;top:50%;left:0;right:0}@keyframes wb-toy-axis{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.wb-toy .tag{z-index:4;pointer-events:none;opacity:0;font-size:.7rem;font-weight:600;transition:opacity .15s;position:absolute;top:50%;left:0}.wb-toy[data-drag] .tag{opacity:1}.wb-toy .tag span{background:var(--ink,#1c1e20);color:var(--paper,#f0efeb);text-align:center;min-width:34px;padding:3px 6px;display:block;transform:translate(-50%)}@media (width<=700px){.wb-toy-field{min-height:46svh}.wb-toy .axis{height:2px;margin-top:-1px}.wb-toy .up i,.wb-toy .dn i{border-left-width:2px}}@media (prefers-reduced-motion:reduce){.wb-toy h1,.wb-toy-hint,.wb-toy .axis{animation:none}.wb-toy-hint,.wb-toy .up i,.wb-toy .dn i{transition:none}}