*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}* ::selection{background:#fff;color:#000}:root{background:#000;color:#fff;font-family:Jost,Google Sans Display,sans-serif;font-size:12px}#root{display:flex;flex-direction:column;height:100dvh}h1,h2,h3,h4,h5,h6{font-weight:400}li{list-style:none}input,textarea{font-family:Jost,Google Sans Display,sans-serif;background:none;color:#fff;border:none;outline:none;font-size:18px;resize:none;-webkit-user-select:text;user-select:text}input::placeholder,textarea::placeholder{-webkit-user-select:none;user-select:none}select{appearance:none;font-family:inherit;padding:10px;background:#000;color:#fff;border-radius:4px;font-size:16px;cursor:pointer}button{font-family:Jost,Google Sans Display,sans-serif;background:none;color:#fff;border:none;font-size:16px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:5px}button:focus{outline:none}button[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}button .icon{display:block}.button{display:inline-flex;padding:10px;border-radius:8px;gap:4px;align-items:center;justify-content:center;color:#000;background:#fff}.icon{font-family:Material Symbols Outlined;font-weight:300;line-height:1}header{display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;padding:20px;z-index:99}header>*{opacity:.3}header button{font-size:26px}header button:hover{opacity:1!important}.about{font-size:20px;display:flex;position:relative}.about>div{position:absolute;top:33px;right:0;background:#000c;padding:20px;border-radius:10px;opacity:0;transition:opacity .3s ease-out;width:max-content;max-width:70vw;font-family:Google Sans Mono,monospace;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.about>div p{font-size:13px}.about>div p a{color:#fff;text-decoration:underline}.about.show{opacity:1}.about.show>div{opacity:1}main{width:100vw;height:100vh;overflow:hidden;display:flex;flex:1}.intro{position:absolute;cursor:pointer;inset:0;padding:60px 40px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:999;font-size:18px;opacity:0;animation:fadeIn 2s ease-out forwards;animation-delay:7s;text-align:center}.intro.hidden{animation:fadeOut .5s ease-out forwards;pointer-events:none}.intro h1{font-size:80px;animation:spin 10s linear infinite}.intro button{color:#fff;font-size:clamp(18px,2vw,22px);background:#000000b3;padding:10px 20px;border-radius:40px;box-shadow:0 0 20px 20px #000000b3}.vidPlayer{width:100%;height:100%;position:relative;animation:fadeIn 2s ease-out;transition:filter 2s ease-out}.vidPlayer .video{position:absolute;width:100%;height:100%;object-fit:cover;pointer-events:none}.vidPlayer .video video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.vidPlayer .video video.show{visibility:visible}.vidPlayer .video.idle{transition:opacity .5s ease-out;transition-delay:.5s}.vidPlayer .video.idle.instant{opacity:1;transition:none}.vidPlayer .video.idle.hidden{opacity:0}.vidPlayer .video.scene.hidden{opacity:0;transition:opacity .5s ease-out}.vidPlayer .video.scene.instant{transition:none}.vidPlayer .input{position:absolute;display:flex;flex-direction:column;bottom:3vw;left:0;right:0;align-items:center;gap:20px;padding:30px;z-index:1;filter:drop-shadow(0 0 7px #000000);animation:fadeIn 2s ease-out forwards;animation-delay:2s;opacity:0}.vidPlayer .input em{font-style:normal}.vidPlayer .input h2,.vidPlayer .input input{white-space:nowrap;font-size:clamp(24px,2vw,50px)}.vidPlayer .input>div:first-child{display:flex;justify-content:center;gap:1.8ch;flex-wrap:wrap}.vidPlayer .input input{color:#ffe400;border-radius:0;border-bottom:2px solid #ffe400;position:relative;z-index:99;transition:width .5s ease-out;opacity:1}.vidPlayer .input input::placeholder{color:#fff0}.vidPlayer .input .presets{display:flex;gap:3ch;bottom:80px;opacity:0;transition:opacity .5s ease-out;pointer-events:none;overflow:hidden;width:100%;max-width:800px;mask:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%)}.vidPlayer .input .presets:hover .presetsCarousel{animation-play-state:paused}@media (hover: none){.vidPlayer .input .presets:hover .presetsCarousel{animation-play-state:running}}.vidPlayer .input .presets.show{opacity:1;transition-delay:1s;pointer-events:auto}.vidPlayer .input .presets .presetsCarousel{gap:3ch;flex-shrink:0;display:flex;justify-content:space-around;min-width:100%;animation:scrollHorizontal 33s linear infinite;will-change:transform}.vidPlayer .input .presets .presetsCarousel button{flex-shrink:0;min-width:max-content;text-align:center;font-size:2em;background:linear-gradient(90deg,#fff9,#fff,#fff9);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:shimmer 8s ease-in-out infinite}.vidPlayer .input .presets .presetsCarousel button:hover{color:#ffe400;background:none;-webkit-background-clip:initial;background-clip:initial}.vidPlayer .loader{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:80px;opacity:0;transition:opacity .5s ease-out}.vidPlayer .loader.show{opacity:1}.vidPlayer .loader p{animation:spin 1s linear infinite;color:#ffe400}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes floatUp{0%{transform:translateY(0);opacity:0;scale:.8}25%{opacity:1}50%{opacity:.5;scale:1}to{transform:translateY(-700%);opacity:0;scale:.8}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes scrollHorizontal{0%{transform:translate(0)}to{transform:translate(calc(-100% - 3ch))}}
