.wb{display:grid;grid-gap:14px;gap:14px}.wb.is-dragging,.wb.is-dragging *{cursor:-webkit-grabbing!important;cursor:grabbing!important}.wb-starters{display:grid;grid-template-columns:repeat(4,minmax(0,200px));justify-content:center;grid-gap:16px;gap:16px}.wb-mini{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:linear-gradient(color-mix(in srgb,var(--style) 55%,var(--ix-paper)) 62%,var(--ix-kraft) 62%)}.wb-mini>span{position:absolute;width:17%;transform:translate(-50%,-80%)}.wb-col{display:grid;grid-gap:20px;gap:20px;min-width:0}.wb-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;container-type:inline-size;box-shadow:0 0 0 10px var(--ix-paper),0 2px 2px 10px rgba(80,60,30,.12),0 10px 28px 10px rgba(80,60,30,.14);margin:10px;background:linear-gradient(color-mix(in srgb,var(--style) 50%,var(--ix-paper)),color-mix(in srgb,var(--style) 30%,var(--ix-paper)) 58%,transparent 58%),var(--ix-kraft);transition:background .4s ease}.wb-stage:before{content:"";position:absolute;left:0;right:0;top:calc(58% - 11px);height:12px;background:var(--ix-kraft);-webkit-mask:var(--deckle) left bottom /480px 12px repeat-x;mask:var(--deckle) left bottom /480px 12px repeat-x}.wb-stage:after{content:"";background-image:var(--grain);z-index:3}.wb-curtains,.wb-stage:after{position:absolute;inset:0;pointer-events:none}.wb-curtains{width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(80,60,30,.2))}.wb-plat{--role:#F6927F;position:absolute;z-index:1;width:17cqw;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-72%);transition:transform .2s ease,opacity .2s ease}.wb-seat{width:13cqw;aspect-ratio:1;display:grid;place-items:end center;margin-bottom:-1.2cqw;position:relative;z-index:1}.wb-riser,.wb-seat .ix-play{width:100%}.wb-riser{height:4.6cqw;background:var(--role) var(--grain);border-radius:3px 3px 2px 2px;box-shadow:inset 0 -1.1cqw 0 rgba(80,60,30,.16),0 1px 1px rgba(80,60,30,.16),0 6px 10px rgba(80,60,30,.18)}.wb-empty{width:100%;height:100%;display:grid;place-items:center;padding:8%;border:0;background:none;cursor:pointer;position:relative}.wb-empty .ix-svg{opacity:.22;filter:grayscale(.6);transition:opacity .2s ease}.wb-empty:hover .ix-svg{opacity:.4}.wb-plus{position:absolute;display:grid;place-items:center;width:4cqw;height:4cqw;font:800 2.6cqw/1 var(--display);color:var(--ink);-webkit-clip-path:var(--ix-torn);clip-path:var(--ix-torn)}.wb-ctl,.wb-plus{background:var(--ix-paper) var(--grain)}.wb-ctl{display:flex;gap:.5cqw;margin-top:.8cqw;padding:.4cqw;border-radius:var(--ix-cut);box-shadow:var(--ix-shadow)}.wb-ctl button{display:grid;place-items:center;width:max(24px,2.6cqw);height:max(24px,2.6cqw);padding:0;border:0;border-radius:6px;background:none;color:var(--ink);font:800 max(12px,1.3cqw)/1 var(--body);cursor:pointer}.wb-ctl button:hover{background:var(--cream)}.wb-ctl .wb-part{width:auto;display:flex;gap:3px;padding:0 6px;background:color-mix(in srgb,var(--role) 45%,var(--ix-paper))}.wb-part span{width:max(6px,.7cqw);height:max(6px,.7cqw);border-radius:50%;background:rgba(31,42,55,.25)}.wb-part span.is-on{background:var(--ink);transform:scale(1.35)}.wb-mute.is-on{background:var(--ink)!important;color:var(--cream)}.wb-plat.is-muted .wb-seat{opacity:.4;filter:grayscale(.7)}.wb-plat.is-ok{transform:translate(-50%,-74%) scale(1.06)}.wb-plat.is-ok .wb-riser{box-shadow:0 0 0 3px var(--ix-paper),0 0 0 6px var(--role),0 8px 14px rgba(80,60,30,.2)}.wb-plat.is-no{opacity:.35}.wb-plat.is-nope{animation:wb-nope .45s ease}@keyframes wb-nope{0%,to{transform:translate(-50%,-72%)}25%{transform:translate(-54%,-72%) rotate(-3deg)}75%{transform:translate(-46%,-72%) rotate(3deg)}}.wb-beats{position:absolute;left:50%;bottom:2.4%;z-index:2;display:flex;gap:.7cqw;transform:translateX(-50%)}.wb-beats span{width:1.1cqw;height:1.1cqw;border-radius:50%;background:rgba(80,60,30,.22);transition:transform .08s ease,background .08s ease}.wb-beats span.is-bar{margin-left:.9cqw}.wb-beats span:first-child{margin-left:0}.wb-beats span.is-on{background:var(--coral);transform:scale(1.5)}.wb-transport{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px 16px;background:var(--ix-kraft) var(--grain);box-shadow:var(--ix-shadow)}.wb-transport:before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--ix-kraft);-webkit-mask:var(--deckle) left bottom /480px 12px repeat-x;mask:var(--deckle) left bottom /480px 12px repeat-x;pointer-events:none}.wb-play{position:relative;display:grid;place-items:center;width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;filter:var(--ix-drop);transition:transform .15s ease}.wb-play:before{content:"";position:absolute;inset:0;background:#F6927F var(--grain);-webkit-clip-path:var(--ix-torn);clip-path:var(--ix-torn)}.wb-play.is-on:before{background-color:#F8DFA0}.wb-play svg{position:relative;fill:var(--ink)}.wb-play:hover{transform:scale(1.06) rotate(-4deg)}.wb-play:disabled{opacity:.45;cursor:default;transform:none}.wb-styles{display:flex;flex-wrap:wrap;gap:6px}.wb-style{padding:6px 12px;border:0;border-radius:3px;background:color-mix(in srgb,var(--c) 55%,var(--ix-paper)) var(--grain);font:inherit;font-weight:800;color:var(--ink);cursor:pointer;transform:rotate(-1deg);transition:transform .12s ease,box-shadow .12s ease}.wb-style:nth-child(2n){transform:rotate(1deg)}.wb-style.is-on{background-color:var(--c);box-shadow:var(--ix-lift);transform:translateY(-3px) rotate(-2deg)}.wb-tempo input{width:120px}.wb-shuffle{margin-left:auto}.ix-tray-item.is-dim{opacity:.4}.wb.is-full{position:fixed;inset:0;z-index:100;display:block;padding:0;background:var(--cream) var(--grain)}.wb.is-full .ix-drawer,.wb.is-full .ix-top,.wb.is-full .wb-starters{display:none}.wb.is-full .ix-work,.wb.is-full .wb-col{display:block}.wb.is-full .wb-stage{top:10px;width:min(calc(100vw - 20px),calc((100dvh - 120px) * 16 / 9));margin:0}.wb.is-full .wb-stage,.wb.is-full .wb-transport{position:fixed;left:50%;transform:translateX(-50%);box-shadow:var(--ix-lift)}.wb.is-full .wb-transport{bottom:10px;z-index:15;width:max-content;max-width:calc(100vw - 20px)}.wb.is-full .wb-transport:before{display:none}.wb.is-full .ix-tray{position:fixed;left:14px;top:66px;bottom:110px;width:232px;z-index:15;max-height:none;align-content:start;box-shadow:var(--ix-lift);transform:translateX(calc(-100% - 40px)) rotate(-3deg);transition:transform .3s cubic-bezier(.3,1.2,.5,1)}.wb.is-full.is-tray-open .ix-tray{transform:rotate(-.6deg)}.wb.is-locked .ix-tray,.wb.is-locked .wb-ctl,.wb.is-locked .wb-transport{display:none}.wb.is-locked .wb-stage{top:50%;width:min(calc(100vw - 20px),calc((100dvh - 20px) * 16 / 9));transform:translate(-50%,-50%)}.wb-play-locked{position:fixed;left:16px;bottom:16px;z-index:20;width:76px;height:76px}body:has(.wb.is-full){overflow:hidden}@media (max-width:860px){.wb-starters{grid-template-columns:repeat(2,minmax(0,200px))}.wb.is-full .ix-tray{right:14px;width:auto;top:auto;bottom:200px}.wb-shuffle{margin-left:0}}