:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--imgc-bg-alpha: .7}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;flex-direction:column;min-height:100vh}.page-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:0;background-color:#242424;transition:opacity .4s ease,background-color .6s ease;--bg-blur: 12px;--bg-darken: .38}.page-bg.visible{opacity:1}.page-bg-slot{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease;filter:blur(var(--bg-blur));transform:scale(1.06);transform-origin:center;will-change:opacity,filter,transform}.page-bg-slot.active{opacity:1}.page-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,var(--bg-darken));pointer-events:none}html,body{-ms-overflow-style:none;scrollbar-width:none}body::-webkit-scrollbar{display:none}.container{min-height:100vh;display:flex;align-items:center;justify-content:center;width:100%}.music-header{display:flex;justify-content:center}.music-header-text{align-self:center;animation:fadeInUp2 .6s ease-out forwards}.spotify-embed{align-self:center;width:50svw;aspect-ratio:16 / 9;padding-left:5svw;animation:fadeInUp .6s ease-out forwards}h1{font-size:clamp(3rem,9vw,9em);line-height:.6;opacity:.8;white-space:nowrap;--text-shadow-md: 0px 0px 10 #000}h2{color:#fff3d5;font-size:clamp(1.5rem,3vw,3em);line-height:0;opacity:1;padding-left:.2em;white-space:nowrap;--text-shadow-md: 0px 0px 10 #000}h3{font-size:clamp(1rem,1.6vw,1.6em);line-height:.6;padding-bottom:-.4em}p{font-size:clamp(.875rem,1.5vw,1rem)}.image-caption{position:absolute;top:12vh;left:0;right:0;text-align:center;color:#fff;font-size:clamp(1.2rem,2.2vw,2.2em);opacity:0;transition:opacity .5s ease;pointer-events:none}.image-container{position:relative;width:38vw;height:100%;filter:saturate(0%);transition:transform .8s ease,filter .5s ease}.image-container:hover{transform:scale(1.05);filter:saturate(100%);cursor:pointer}.image-column{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 90%,black 100%),linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 90%,black 100%),linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in;transition:mask-image .5s ease}.image-container:first-child:hover .image-column{-webkit-mask-image:linear-gradient(to bottom,transparent 5%,black 90%,black 100%),linear-gradient(to right,black 0%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,transparent 5%,black 90%,black 100%),linear-gradient(to right,black 0%,black 85%,transparent 95%)}.image-container:nth-child(2):hover .image-column{-webkit-mask-image:linear-gradient(to bottom,transparent 5%,black 90%,black 100%),linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 5%,black 90%,black 100%),linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%)}.image-container:last-child:hover .image-column{-webkit-mask-image:linear-gradient(to bottom,transparent 5%,black 90%,black 100%),linear-gradient(to right,transparent 5%,black 15%,black 100%);mask-image:linear-gradient(to bottom,transparent 5%,black 90%,black 100%),linear-gradient(to right,transparent 5%,black 15%,black 100%)}.image-caption:after{content:"";display:block;width:0;height:2px;background:#fff;transition:width .4s ease-in-out .2s;margin:8px auto 0}.image-container:hover .image-caption{animation:fadeInUp .6s ease-out forwards;opacity:1}.image-container:hover .image-caption:after{width:60%}.image-container:first-child{margin-right:-4vw}.image-container:first-child .image-column{-webkit-mask-image:linear-gradient(to bottom,transparent 15%,black 90%,black 100%),linear-gradient(to right,black 0%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,transparent 15%,black 90%,black 100%),linear-gradient(to right,black 0%,black 85%,transparent 95%);mask-composite:intersect;-webkit-mask-composite:source-in}.image-container:nth-child(2){margin-right:-2vw;margin-left:-2vw}.image-container:nth-child(2) .image-column{-webkit-mask-image:linear-gradient(to bottom,transparent 15%,black 90%,black 100%),linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 15%,black 90%,black 100%),linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}.image-container:last-child{margin-left:-4vw}.image-container:last-child .image-column{-webkit-mask-image:linear-gradient(to bottom,transparent 15%,black 90%,black 100%),linear-gradient(to right,transparent 5%,black 15%,black 100%);mask-image:linear-gradient(to bottom,transparent 15%,black 90%,black 100%),linear-gradient(to right,transparent 5%,black 15%,black 100%);mask-composite:intersect;-webkit-mask-composite:source-in}.fade-in-up{animation:fadeInUp .6s ease-out forwards;position:relative;z-index:2;pointer-events:none;padding-top:35em}#app{position:relative;z-index:1;flex-grow:1;display:flex;justify-content:center;align-items:center;max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.car{height:20em;padding:1.5em;transition:transform .5s ease-in-out}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #3178c6aa)}.card{padding:2em}.read-the-docs{color:#888;margin-top:-4em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:clamp(.875rem,1.2vw,1em);font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.scroll-next-btn{position:fixed;bottom:2rem;right:2rem;width:60px;height:60px;background-color:#1a1a1acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffde;border:1px solid rgba(255,255,255,.2);padding:0;margin:0;font-size:clamp(1rem,1.5vw,1.5em);border-radius:50%;cursor:pointer;transition:all .3s ease;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:auto}.scroll-next-btn:hover{background-color:#1a1a1af2;border-color:#646cff;transform:translateY(4px)}.scroll-next-btn:active{transform:translateY(2px)}@keyframes initial-flicker{0%,to{font-family:inherit}20%{font-family:Courier New,Courier,monospace}40%{font-family:Times New Roman,Times,serif}60%{font-family:Wingdings,Zapf Dingbats,Apple Symbols,sans-serif}80%{font-family:Impact,Arial Black,sans-serif}}@keyframes font-flicker{0%{font-family:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit}20%{font-family:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none}40%{font-family:Impact,Arial Black,sans-serif;font-style:normal;font-weight:900;letter-spacing:1px;text-transform:uppercase}80%{font-family:Courier New,Courier,monospace;font-style:normal;font-weight:700;letter-spacing:0}80%{font-family:Wingdings,Zapf Dingbats,Apple Symbols,sans-serif;font-style:normal;font-weight:400;letter-spacing:3px}to{font-family:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit}}.labspic{height:400px;width:auto;margin-right:4em;margin-top:1em;margin-bottom:1em;border-radius:25px}.labst{margin-top:-1em;margin-bottom:3em;font-size:clamp(.875rem,1.5vw,1rem)}.back-button{position:fixed;top:20px;left:20px;z-index:1000;padding:12px 24px;background:#0000001a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:clamp(14px,1.5vw,16px);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.back-button:hover{background:#0003;border-color:#fff6;transform:translate(-2px)}.initial-flicker{animation:initial-flicker 1s ease-out}.font-flicker{animation:font-flicker .5s linear}.daws-org{align-items:start}.daws-imgcontainer{display:flex;justify-content:center;align-items:center;gap:2em;padding:4em 2em;background-color:rgba(26,26,26,var(--imgc-bg-alpha, .7));border-radius:1.5em}.dawsimg-logic{height:35svh;width:auto}.dawsimg-fl{height:30svh;width:auto}.daws-tbox{text-align:left;width:25svw;font-size:clamp(.875rem,1.5vw,1rem)}.mplust{align-items:start}.musicalighn{display:flex;align-items:center;justify-content:left}.musicalighn>audio{flex:1 1 120px;max-width:50%}.carousel{width:50svw;overflow:hidden;position:relative;background-color:rgba(26,26,26,var(--imgc-bg-alpha, .7));border-radius:1.5em;margin-left:2em;margin-top:2em}.carousel-2{width:75svw;overflow:hidden;position:relative;background-color:rgba(26,26,26,var(--imgc-bg-alpha, .7));border-radius:1.5em;margin-left:2em;margin-top:2em;margin-bottom:10em}.carousel-3{width:25svw;overflow:hidden;position:relative;background-color:rgba(26,26,26,var(--imgc-bg-alpha, .7));border-radius:1.5em;margin-top:2em;margin-bottom:0;height:70svh}.carousel,.carousel-2{cursor:grab;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.carousel:active,.carousel-2:active{cursor:grabbing}.carousel *,.carousel-2 *{user-select:none;-webkit-user-select:none}.carousel-track{display:flex;transition:transform .6s ease-in-out}.carousel-item{flex-shrink:0;width:100%;min-height:300px;display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.carousel-progress{position:absolute;left:50%;transform:translate(-50%);width:30vw;bottom:8px;height:4px;border-radius:999px;background:#ffffff40;overflow:hidden;pointer-events:none;z-index:10}.carousel-progress-bar{height:100%;width:0%;background:#fff;opacity:.9;transition:width .6s ease-in-out;border-radius:999px}.carousel-progress-indicator{position:absolute;top:0;height:100%;background:#ffffffe6;border-radius:2px;transition:left .6s ease-in-out}.carimg{max-width:40svw;max-height:60svh}h4{color:#fff;font-size:clamp(1.5rem,3vw,3em);line-height:0;opacity:1;padding-left:.2em;white-space:nowrap;--text-shadow-md: 0px 0px 10 #000}.horizontale{display:flex;align-content:center}.vmsection{border-radius:25px;background-color:rgba(26,26,26,var(--imgc-bg-alpha, .7));padding:2em;margin-bottom:7em;margin-top:3em}.vmtext{margin-left:2em;text-align:left;width:25svw}.info-panel{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(180deg,#000c,#0006,#0000);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:3rem 2rem;transition:opacity .3s ease}.info-content{max-width:1200px;margin:-2em auto;text-align:center;color:#ffffffe6}.info-content p{margin:0;font-size:clamp(.875rem,1.5vw,1rem)}.devcarousel1img{height:35svh;width:auto;border-radius:25px}.devtext{text-align:left;margin-left:2em;width:40svw;font-size:clamp(.875rem,1.5vw,1rem)}.devimg2{height:55svh;width:auto;border-radius:25px}.appcontainer{box-sizing:border-box;background-color:rgba(26,26,26,var(--imgc-bg-alpha, .7));border-radius:25px;padding:2em;margin-left:2em;margin-top:2em;width:60svw;height:70svh;display:flex;flex-direction:column;overflow:hidden}.scrollable-text{max-height:none;height:100%;overflow-y:auto;overflow-x:hidden;padding-right:1em;margin-top:2em;flex:1;font-size:clamp(.875rem,1.5vw,1rem)}.scrollable-text::-webkit-scrollbar{width:8px}.scrollable-text::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.scrollable-text::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.scrollable-text::-webkit-scrollbar-thumb:hover{background:#ffffff80}.scrollable-text{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) rgba(255,255,255,.1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp2{0%{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(-70px)}}.stack-container{position:relative;display:grid;place-items:center}.stack-layer{grid-area:1 / 1}.background-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;z-index:1}
