@layer core,playground,project;@layer project{body .playground-ui-bar-top-right,body .playground-ui-bar-bottom-right,body .playground-ui-mobile-navigation select{color:#e0e0e0;opacity:1;font-weight:300}body .playground-ui-bar-top-right a:hover,body .playground-ui-bar-bottom-right a:hover,body .playground-ui-mobile-navigation select a:hover{color:#fff}body .playground-ui-bar-bottom-right a:has(svg) svg{margin-right:0}body .playground-ui-bar-bottom-right a:has(svg) svg path{stroke-width:.8px}.top-11-21{display:grid;place-items:center;position:relative;width:100%;min-height:100dvh;overflow:hidden;background:#000;color:#fff;font-family:Martian Mono,monospace}.top-11-21-stage-loader{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:4;background:#000;font-size:12px;text-transform:uppercase;transition:opacity 3.2s .5s}.top-11-21-stage-loader p,.top-11-21-stage-loader span{transition:opacity .321s}.top-11-21-stage-loader span,.top-11-21-stage-loader[data-status=awaiting-start] p,.top-11-21-stage-loader[data-status=error] p,.top-11-21-stage-loader[data-status=webgl-unavailable] p{display:none}.top-11-21-stage-loader[data-status=awaiting-start]{pointer-events:none}.top-11-21-stage-loader[data-status=awaiting-start] [data-status-message=awaiting-start]{display:block}.top-11-21-stage-loader[data-status=buffering] p{opacity:0}.top-11-21-stage-loader[data-status=loading] p{opacity:1}.top-11-21-stage-loader[data-status=loaded]{opacity:0;pointer-events:none}.top-11-21-stage-loader[data-status=loaded] p{opacity:0}.top-11-21-stage-loader[data-status=error] p{display:none}.top-11-21-stage-loader[data-status=error] [data-status-message=media-error],.top-11-21-stage-loader[data-status=webgl-unavailable] [data-status-message=webgl-unavailable]{display:block;opacity:1}.top-11-21:has(.top-11-21-stage-loader[data-status=awaiting-start]) .top-11-21-stage-start,.top-11-21:has(.top-11-21-stage-loader[data-status=loaded]) .top-11-21-stage-start{display:block}.top-11-21-stage-start{display:none;position:absolute;inset:50% auto auto 50%;z-index:5;transform:translate(-50%,-50%);width:clamp(120px,21vw,340px);aspect-ratio:1;border-radius:50%;font-size:0}.top-11-21-stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#000}.top-11-21-stage[data-webgl=ready] .top-11-21-canvas{opacity:1}.top-11-21-stage[data-webgl=ready] .top-11-21-video{opacity:0}@media(width<1000px){.top-11-21-stage{margin:0 -30px;transition:transform 4s}.top-11-21-stage:not(:has(+.top-11-21-controls[hidden])){transform:translateY(-30px)}}.top-11-21-canvas,.top-11-21-video{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .321s}.top-11-21-canvas{z-index:2}.top-11-21-video{z-index:1;object-fit:cover}.top-11-21-controls{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;position:absolute;inset:auto auto 66px 50%;z-index:2;transform:translate(-50%);padding:16px 24px;color:#fff;background:color-mix(in srgb,#000,transparent 55%);border:1px solid color-mix(in srgb,#fff,transparent 87%);border-radius:123px;transition:opacity 2.1s}@media(width<1000px){.top-11-21-controls{gap:12px;bottom:90px}}.top-11-21-controls[hidden]{opacity:0;pointer-events:none}.top-11-21-controls[hidden] .top-11-21-credits{opacity:0}.top-11-21-controls button{color:inherit;color:#fff;background:transparent;cursor:pointer}.top-11-21-controls button[data-action=mute]{display:none}.top-11-21-controls button[data-action=play-pause] svg{display:none;width:36px;height:36px;color:#fff}@media(width<1000px){.top-11-21-controls button[data-action=play-pause] svg{width:24px;height:24px}}.top-11-21-controls button[data-action=play-pause][aria-pressed=false] svg:first-child{display:block}.top-11-21-controls button[data-action=play-pause][aria-pressed=true] svg:last-child{display:block}.top-11-21-controls input[type=range]{width:300px;height:18px;padding:0;border:1px solid color-mix(in srgb,#fff,transparent 87%);border-radius:4px;appearance:none}@media(width<1000px){.top-11-21-controls input[type=range]{width:min(30vw,200px);height:12px}}.top-11-21-controls input[type=range]::-webkit-slider-thumb{position:relative;z-index:2;appearance:none;width:42px;height:18px;border:0;border-radius:4px;background:#fff;cursor:grab;transition:transform .543s}@media(width<1000px){.top-11-21-controls input[type=range]::-webkit-slider-thumb{width:30px;height:10px;border-radius:3px}}.top-11-21-controls input[type=range]::-moz-range-thumb{position:relative;z-index:2;appearance:none;width:42px;height:18px;border:0;border-radius:4px;background:#fff;cursor:grab;transition:transform .543s}@media(width<1000px){.top-11-21-controls input[type=range]::-moz-range-thumb{width:30px;height:10px;border-radius:3px}}.top-11-21-controls input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.top-11-21-controls input[type=range]:active::-moz-range-thumb{cursor:grabbing}.top-11-21-controls output{margin-left:6px;font-size:12px;letter-spacing:-.1ch;white-space:nowrap}@media(width<1000px){.top-11-21-controls output{margin-left:3px;font-size:9px}}.top-11-21-credits{position:absolute;inset:100% 0 auto;z-index:2;padding:16px;font-size:10px;text-align:center;text-transform:uppercase;opacity:1;transition:opacity 3.2s 1.2s}@media(width<1000px){.top-11-21-credits{padding:19px 16px;font-size:8px}}.top-11-21-credits a{display:inline-block;padding:10px;opacity:.25;transition:opacity .543s}.top-11-21-credits a:hover{opacity:1}}