html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;line-height:120%;font-family:Verdana,Geneva,Tahoma,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,*::before,*::after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:root{font-size:16px}html,body,.global{background-color:#0b0a11}.global{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.global .volume-btns{display:flex;height:12px;position:relative}.global .volume-btns>*{height:100%;width:64px;cursor:pointer;position:relative}.global .volume-btns>*:not(:last-child){margin-right:16px}.global .volume-btns>*::after{content:"";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;border-top-right-radius:9999px;border-top-left-radius:9999px;transition:top 50ms ease-out,bottom 50ms ease-out}.global .volume-btns>*:hover::after{top:3px;bottom:-3px}.global .soundboard{position:relative;z-index:5;max-width:1024px;width:100%;height:512px;background-color:gray;border-radius:24px;box-shadow:inset 0 0 8px rgba(255,255,255,.8666666667);padding-block:16px;padding-right:32px;padding-left:64px;display:flex}.global .soundboard .volume-show{background-color:rgba(56,182,98,.6666666667);padding:8px 16px;color:#fff;display:flex;position:absolute;z-index:1000;top:16px;right:96px;left:64px;border-radius:8px;border-bottom-right-radius:0;border-bottom-left-radius:0}.global .soundboard .volume-show.hidden{display:none}.global .soundboard .volume-show input{width:100%}.global .soundboard .volume-show label{width:64px;text-align:end}.global .soundboard .fake-top,.global .soundboard .screen{background-color:#000;border-radius:8px}.global .soundboard .fake-top{width:32px;height:100%;border-bottom-right-radius:0;border-top-right-radius:0;position:relative}.global .soundboard .fake-top .sensors{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background-color:gray;height:128px;border-radius:9999px;border-bottom-left-radius:0;border-top-left-radius:0;padding-right:4px;display:flex;flex-direction:column;align-items:center;justify-content:center}.global .soundboard .fake-top .sensors::before,.global .soundboard .fake-top .sensors::after{content:"";width:75%;aspect-ratio:1/1;border-radius:9999px;background:radial-gradient(circle, rgb(30, 30, 102) 0%, rgb(15, 15, 38) 50%)}.global .soundboard .fake-top .sensors::before{width:100%;margin-bottom:8px}.global .soundboard .screen{width:100%;height:100%;color:#fff;padding:16px;padding-right:0;overflow-y:scroll;scrollbar-width:none;border-bottom-left-radius:0;border-top-left-radius:0}.global .soundboard .screen .scroll-container{display:flex;flex-wrap:wrap}.global .soundboard .screen .scroll-container h1{width:100%;margin-bottom:24px;text-align:center;font-size:2rem;letter-spacing:.25rem;font-weight:700}.global .soundboard .screen .scroll-container>*:not(h1){display:flex;justify-content:center;align-items:center;text-align:center;width:6rem;height:6rem;aspect-ratio:1/1;margin-right:16px;margin-bottom:16px;border-radius:8px;background-color:red;cursor:pointer;box-shadow:inset 2px 2px 4px rgba(255,255,255,.8666666667),inset -2px -2px 4px rgba(0,0,0,.8666666667)}.global .soundboard .screen .scroll-container>*:not(h1) *{-webkit-user-select:none;-moz-user-select:none;user-select:none;text-transform:uppercase}.global .soundboard .screen .scroll-container>*:not(h1).ambient{background-color:blue;border:solid #38b662;border-width:0;transition:border-width 100ms ease-out}.global .soundboard .screen .scroll-container>*:not(h1).ambient.playing{border-width:4px}.global .soundboard .screen .scroll-container>*:not(h1).sound{background-color:purple;border:solid #38b662;border-width:0;transition:border-width 100ms ease-out}.global .soundboard .screen .scroll-container>*:not(h1).sound.playing{border-width:4px;transition:border-width 0ms ease-out}.global .soundboard .buttons{width:64px;min-width:64px;max-width:64px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.global .soundboard .buttons>*{width:48px;aspect-ratio:1/1;border-radius:9999px;background-color:#fff;cursor:pointer;box-shadow:inset 0 0 4px rgba(0,0,0,.6);transition:box-shadow 150ms ease-out;position:relative}.global .soundboard .buttons>*:hover{box-shadow:inset 0 0 12px rgba(0,0,0,.6)}.global .soundboard .buttons>*:not(:last-child){margin-bottom:24px}.global .soundboard .buttons>* span{display:block;position:absolute;top:0;bottom:0;right:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40px' viewBox='0 -960 960 960' width='40px' fill='%23000'%3E%3Cpath d='M401.67-480.67 208.67-674l46.66-46.67 240 240-240 240-46.66-46.66 193-193.34Zm256.66 0L465.33-674 512-720.67l240 240-240 240-46.67-46.66 193-193.34Z'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat;background-size:32px}.global .soundboard .buttons>*#up span{rotate:-90deg}.global .soundboard .buttons>*#stop{border:solid #38b662;border-width:0;transition:border-width 100ms ease-out;transition:border-width 100ms ease-out,box-shadow 150ms ease-out}.global .soundboard .buttons>*#stop.playing{border-width:4px}.global .soundboard .buttons>*#stop span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40px' viewBox='0 -960 960 960' width='40px' fill='%23000'%3E%3Cpath d='M200-325.33v-309.34L426.67-480 200-325.33ZM533.33-320v-320H600v320h-66.67Zm160 0v-320H760v320h-66.67Z'/%3E%3C/svg%3E")}.global .soundboard .buttons>*#down span{rotate:90deg}/*# sourceMappingURL=app.css.map */