@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}.container{--beam-color-dark: #fcc71a;--beam-color-soft: #fffeba;--beam-color-bright: #fefff8;--beam-softness: clamp(.2rem, .75vw, .7rem);--background-color: color-mix(in srgb, #212121, black 21%);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;width:100%;min-height:100dvh;overflow:hidden;background:var(--background-color);isolation:isolate}.container .beams{--beam-border-shadow-x: -.05vw;--beam-offset-x: -1.1vw;--mouse-offset-x: .2;position:fixed;inset:0;left:var(--playground-ui-sidebar-width);z-index:1;display:grid;grid-template-columns:repeat(21,minmax(0,1fr));width:100%;height:100%;overflow:hidden;isolation:isolate}.container .beam{position:relative;z-index:1;overflow:hidden}.container .beam-gradient{position:absolute;inset:50% auto auto 50%;z-index:1;transform:translate(-50%,-50%);width:30vw;height:100vh;background:radial-gradient(ellipse at 50% 50%,var(--beam-color-bright),var(--beam-color-soft) 24%,color-mix(in srgb,var(--beam-color-dark) 55%,transparent) 48%,transparent 74%);filter:blur(calc(var(--beam-softness) * 2))}.container .beam-border{position:absolute;inset:0 0 0 calc(100% - 4px);z-index:2;mix-blend-mode:overlay;isolation:isolate;box-shadow:var(--beam-border-shadow-x) 0 2vw 0 var(--background-color);opacity:.5}@media(width<1234px){.container .beam-border{left:calc(100% - 3px)}}@media(width<768px){.container .beam-border{left:calc(100% - 2px)}}.container .beam:nth-child(1) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 1)) translateY(1.2vw) scaleY(1.02) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(2) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 2)) translateY(2.4vw) scaleY(1.04) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(3) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 3)) translateY(calc(1.2 * 3vw)) scaleY(1.06) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(4) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 4)) translateY(4.8vw) scaleY(1.08) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(5) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 5)) translateY(6vw) scaleY(1.1) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(6) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 6)) translateY(calc(1.2 * 6vw)) scaleY(1.12) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(7) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 7)) translateY(8.4vw) scaleY(calc(1 + .02 * 7)) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(8) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 8)) translateY(9.6vw) scaleY(1.16) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(9) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 9)) translateY(calc(1.2 * 9vw)) scaleY(1.18) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(10) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 10)) translateY(12vw) scaleY(1.2) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(11) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 11)) translateY(13.2vw) scaleY(1.22) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(12) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 12)) translateY(calc(1.2 * 12vw)) scaleY(1.24) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(13) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 13)) translateY(15.6vw) scaleY(1.26) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(14) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 14)) translateY(16.8vw) scaleY(1.28) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(15) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 15)) translateY(18vw) scaleY(1.3) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(16) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 16)) translateY(19.2vw) scaleY(1.32) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(17) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 17)) translateY(20.4vw) scaleY(1.34) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(18) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 18)) translateY(calc(1.2 * 18vw)) scaleY(calc(1 + .02 * 18)) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(19) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 19)) translateY(22.8vw) scaleY(1.38) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(20) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 20)) translateY(24vw) scaleY(1.4) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beam:nth-child(21) .beam-gradient{transform:translate(-50%,-50%) translate(calc(var(--beam-offset-x) * 21)) translateY(25.2vw) scaleY(1.42) translate(calc(var(--mouse-x) * var(--mouse-offset-x))) translateY(calc(var(--mouse-y) * .3))}.container .beams+.beams{--beam-border-shadow-x: .05vw;--beam-offset-x: 1.1vw;--mouse-offset-x: -.45;z-index:2}.container .noise{position:fixed;inset:0;left:var(--playground-ui-sidebar-width);z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:color-burn}.container img{display:none;position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}}