:root{color:#333;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:400;line-height:1.5}html,body,#root{min-height:100%}body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.modal-overlay{height:100dvh;min-height:100svh;z-index:10000;pointer-events:auto;background-color:#00000080;justify-content:center;align-items:center;min-height:-webkit-fill-available;display:flex;position:fixed!important;inset:0!important}.modal-content{box-sizing:border-box;-webkit-overflow-scrolling:touch}.card-image,.modal-content img{object-fit:contain;width:100%;height:auto;max-height:800px}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}p{margin:0}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}input,select,textarea{font-family:inherit}:focus{outline:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:2px solid #4472ff}html{scroll-behavior:smooth}button{-webkit-user-select:none;user-select:none}:root{--joe-primary:30 100 200;--joe-secondary:20 50 140;--joe-accent:220 60 150;--joe-text:78 78 78}@font-face{font-family:geomanist;src:url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.eot),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.woff),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.woff2);font-weight:200;font-style:normal}@font-face{font-family:geomanist;src:url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.eot),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.woff),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.woff2);font-weight:300;font-style:normal}@font-face{font-family:geomanist;src:url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.eot),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.woff),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.woff2);font-weight:400;font-style:normal}@font-face{font-family:geomanist;src:url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.eot),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.woff),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.woff2);font-weight:500;font-style:normal}@font-face{font-family:geomanist;src:url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.eot),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.woff),url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.woff2);font-weight:600;font-style:normal}html,body{overscroll-behavior:contain}.app{-ms-overflow-style:none;scrollbar-width:none;width:100%;min-height:100vh;padding-top:env(safe-area-inset-top);flex-direction:column;margin:0 auto;font-family:geomanist,Helvetica,Arial,sans-serif;display:flex}@support (height: 100dvh){.app { min-height: 100dvh; }}:root{--joe-accent-hover:#d52688;--joe-white:#fff}::-webkit-scrollbar{display:none}.page{box-sizing:border-box;width:100%;min-height:100vh;color:var(--joe-white);background-color:#0a1d55;background-image:url(/JOEKERST_WEBACHTERGROND_V2.webp);background-position:top;background-repeat:no-repeat;background-size:cover;grid-template-rows:auto 1fr;align-items:start;display:grid}.page-background-contain{background-size:contain}.page-header{text-align:center;width:100%;padding:2rem .5rem .5rem}.joe-header-logo{width:60px;height:auto}.joe-tagline{color:var(--joe-white);font-size:.8rem;font-weight:700}main{flex-direction:column;align-self:center;align-items:center;padding:1rem 1rem 2rem;display:flex}h2.homepage-title{text-align:center;font-size:2.2rem}p.intro{text-align:center;max-width:400px;margin:1.5rem 0;font-size:1.1rem}.loading{border:3px solid #f3f3f3;border-top:3px solid rgb(var(--joe-primary));border-radius:50%;width:2rem;height:2rem;animation:1s linear infinite spin;display:inline-block}.loading-message{color:var(--joe-white);margin-top:1rem;font-size:1.25rem}.loading-submessage{height:1.125rem;margin-top:1rem;font-size:.75rem;overflow:hidden}.loading-submessage p{color:var(--joe-white);font-size:.75rem;transition:transform .5s ease-in-out}.card-preview{background-color:var(--joe-white);border-radius:1rem;max-width:90%;padding:.5rem}.card-preview .track-info{max-width:100%}.christmas-image{object-fit:cover;border-radius:.5rem;width:100%;height:auto;margin-bottom:.5rem;margin-left:auto;margin-right:auto;display:block}.socials{flex-direction:column;align-items:center;gap:.25rem;margin-top:2rem;display:flex}.socials a{border-radius:50%;width:40px;height:40px;display:block}.socials a img{border-radius:50%;width:100%;height:100%}@media (min-width:768px){.page-header{padding:2rem 1rem 1rem}h2.homepage-title{font-size:3rem}.joe-header-logo{width:160px;margin-bottom:10px}.joe-tagline{font-size:1.3rem}.card-preview{max-width:800px}.primary-button{border-radius:2.5rem;min-width:300px;padding:1.5rem 3rem;font-size:1.2rem}.secondary-button{border-radius:2.5rem;padding:1.2rem 2.5rem;font-size:1.1rem}.form-group{max-width:450px}.form-input,.form-select{border-radius:1.5rem;padding:1.2rem 1.5rem;font-size:1.1rem}.share-buttons{gap:1.5rem;max-width:450px}.share-button{border-radius:2rem;padding:1.2rem 1.5rem;font-size:1.1rem}.checkbox-group{max-width:450px;margin-bottom:2rem}.checkbox-item label{font-size:1rem}.loading-message{font-size:1.75rem}.loading-submessage{height:1.5rem;font-size:1rem}.loading-submessage p{font-size:1rem}}@media (min-width:1200px){.page-background-contain{background-size:cover}.joe-tagline{font-size:1.4rem}.primary-button{padding:1.8rem 3.5rem;font-size:1.3rem}}h3.title{text-align:left;width:85%;max-width:400px;margin-bottom:.5rem}.primary-button{background:rgb(var(--joe-accent));color:var(--joe-white);cursor:pointer;text-align:center;border:none;border-radius:2rem;min-width:200px;padding:1rem 2rem;font-size:1rem;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.primary-button:hover{background:var(--joe-accent-hover)}.secondary-button{color:var(--joe-white);border:2px solid var(--joe-white);cursor:pointer;text-align:center;background:0 0;border-radius:2rem;min-width:200px;padding:1rem 2rem;font-size:1rem;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.secondary-button:hover{background:var(--joe-white);color:rgb(var(--joe-primary))}.create-own-card{margin-top:1.5rem}.audio-control-button{background:rgb(var(--joe-accent));color:var(--joe-white);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .3s;display:flex;position:relative;overflow:hidden}.audio-control-button:hover{background:var(--joe-accent-hover);box-shadow:0 6px 20px #4472ff66}.audio-control-button:active{box-shadow:0 3px 8px #4472ff4d}.audio-control-button:before{content:"";background:linear-gradient(45deg,#ffffff1a 0%,#fff0 100%);border-radius:50%;position:absolute;inset:0}.audio-control-button svg{z-index:1;filter:drop-shadow(0 1px 2px #0000001a);position:relative}.share-buttons{flex-direction:column;gap:1rem;width:fit-content;margin-top:1.5rem;display:flex}.form-group{width:100%;max-width:300px;margin-bottom:1.5rem}.form-input{box-sizing:border-box;border:2px solid #ddd;border-radius:1rem;width:100%;padding:1rem;font-size:1rem}.form-input:focus{border-color:rgb(var(--joe-primary));outline:none}.form-select{background:var(--joe-white);cursor:pointer;box-sizing:border-box;border:2px solid #ddd;border-radius:1rem;width:100%;padding:1rem;font-size:1rem}.checkbox-group{text-align:left;flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.checkbox-item{align-items:flex-start;gap:.5rem;display:flex}.checkbox-item input[type=checkbox]{margin-top:.25rem}.checkbox-item label{color:var(--joe-white);font-size:.9rem;line-height:1.4}.checkbox-item label .small-text{font-size:.7rem}.tracks h3{text-align:left;color:var(--joe-white);margin-bottom:.5rem}.tracks-list{flex-direction:column;gap:.5rem;max-height:400px;margin-bottom:1.5rem;display:flex;overflow-y:auto}.track-info{background-color:rgb(var(--joe-primary));color:var(--joe-white);text-align:left;border-radius:.5rem;grid-template-columns:auto 1fr;gap:.25rem .75rem;width:100%;max-width:400px;padding:.5rem;line-height:1;display:grid}.track-info.molecule{grid-template-columns:auto 1fr auto}.audio-player{justify-content:center;align-items:center;gap:"1rem";grid-area:1/3/span 2;align-self:center;display:flex}@media (hover:hover) and (pointer:fine){.track-info.selectable:hover{cursor:pointer;background-color:var(--joe-white);color:rgb(var(--joe-secondary))}.track-info.selectable:hover .track-title{color:rgb(var(--joe-secondary))}}.track-info.selected{background-color:var(--joe-white);color:rgb(var(--joe-secondary))}.track-info.selected .track-title{color:rgb(var(--joe-secondary))}.track-info .track-title{color:var(--joe-white);align-self:end;margin:0;font-weight:700}.track-info .track-cover{border-radius:4px;grid-row:span 2;align-self:center;width:50px;height:50px}.track-info .track-cover img{border-radius:4px;grid-row:span 2;align-self:center;width:50px;height:50px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (max-width:768px){.toast-container{max-width:none!important;left:1rem!important;right:1rem!important}}.visually-hidden{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}:focus,button:focus,input:focus,select:focus{outline:2px solid rgb(var(--joe-primary));outline-offset:2px}.snowflake{color:#fff;text-shadow:0 0 5px #000;font-family:Arial,sans-serif;font-size:1em}.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}to{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,to{transform:translate(0)}50%{transform:translate(80px)}}.snowflake{z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out;position:fixed;top:-10%}.snowflake .inner{animation-name:snowflakes-fall;animation-duration:10s;animation-timing-function:linear}.snowflake:first-of-type{animation-delay:0s;left:3%}.snowflake:first-of-type .inner{animation-delay:0s}.snowflake:nth-of-type(2){animation-delay:1.2s;left:8%}.snowflake:nth-of-type(2) .inner{animation-delay:4s}.snowflake:nth-of-type(3){animation-delay:.4s;left:13%}.snowflake:nth-of-type(3) .inner{animation-delay:2s}.snowflake:nth-of-type(4){animation-delay:2.2s;left:18%}.snowflake:nth-of-type(4) .inner{animation-delay:6s}.snowflake:nth-of-type(5){animation-delay:1s;left:23%}.snowflake:nth-of-type(5) .inner{animation-delay:3s}.snowflake:nth-of-type(6){animation-delay:.7s;left:28%}.snowflake:nth-of-type(6) .inner{animation-delay:5s}.snowflake:nth-of-type(7){animation-delay:1.5s;left:33%}.snowflake:nth-of-type(7) .inner{animation-delay:7s}.snowflake:nth-of-type(8){animation-delay:.3s;left:38%}.snowflake:nth-of-type(8) .inner{animation-delay:1.5s}.snowflake:nth-of-type(9){animation-delay:2.7s;left:43%}.snowflake:nth-of-type(9) .inner{animation-delay:8s}.snowflake:nth-of-type(10){animation-delay:1.8s;left:48%}.snowflake:nth-of-type(10) .inner{animation-delay:4.5s}.snowflake:nth-of-type(11){animation-delay:.2s;left:53%}.snowflake:nth-of-type(11) .inner{animation-delay:2.8s}.snowflake:nth-of-type(12){animation-delay:1.1s;left:58%}.snowflake:nth-of-type(12) .inner{animation-delay:6.3s}.snowflake:nth-of-type(13){animation-delay:.9s;left:63%}.snowflake:nth-of-type(13) .inner{animation-delay:5.5s}.snowflake:nth-of-type(14){animation-delay:2.1s;left:68%}.snowflake:nth-of-type(14) .inner{animation-delay:7.2s}.snowflake:nth-of-type(15){animation-delay:.6s;left:73%}.snowflake:nth-of-type(15) .inner{animation-delay:3.1s}.snowflake:nth-of-type(16){animation-delay:.4s;left:78%}.snowflake:nth-of-type(16) .inner{animation-delay:1.8s}.snowflake:nth-of-type(17){animation-delay:1.7s;left:83%}.snowflake:nth-of-type(17) .inner{animation-delay:5.2s}.snowflake:nth-of-type(18){animation-delay:2.9s;left:88%}.snowflake:nth-of-type(18) .inner{animation-delay:8.4s}.snowflake:nth-of-type(19){animation-delay:1.3s;left:93%}.snowflake:nth-of-type(19) .inner{animation-delay:4.1s}.snowflake:nth-of-type(20){animation-delay:.8s;left:96%}.snowflake:nth-of-type(20) .inner{animation-delay:3.4s}.snowflake:nth-of-type(21){animation-delay:2.4s;left:15%}.snowflake:nth-of-type(21) .inner{animation-delay:6.8s}.snowflake:nth-of-type(22){animation-delay:.5s;left:35%}.snowflake:nth-of-type(22) .inner{animation-delay:2.6s}.snowflake:nth-of-type(23){animation-delay:1.9s;left:55%}.snowflake:nth-of-type(23) .inner{animation-delay:7.6s}.snowflake:nth-of-type(24){animation-delay:.3s;left:75%}.snowflake:nth-of-type(24) .inner{animation-delay:3.8s}.snowflake:nth-of-type(25){animation-delay:2.3s;left:5%}.snowflake:nth-of-type(25) .inner{animation-delay:9s}.snowflake:nth-of-type(26){animation-delay:.1s;left:27%}.snowflake:nth-of-type(26) .inner{animation-delay:1.3s}.snowflake:nth-of-type(27){animation-delay:1.6s;left:47%}.snowflake:nth-of-type(27) .inner{animation-delay:4.9s}.snowflake:nth-of-type(28){animation-delay:.9s;left:67%}.snowflake:nth-of-type(28) .inner{animation-delay:6.1s}.snowflake:nth-of-type(29){animation-delay:2.5s;left:87%}.snowflake:nth-of-type(29) .inner{animation-delay:7.9s}.snowflake:nth-of-type(30){animation-delay:1.4s;left:98%}.snowflake:nth-of-type(30) .inner{animation-delay:5.7s}.image-upload-container{width:100%;max-width:400px}.image-upload-dropzone{text-align:center;cursor:pointer;background-color:#f9fafb;border:2px dashed #d1d5db;border-radius:12px;justify-content:center;align-items:center;min-height:200px;padding:2rem;transition:all .2s;display:flex}.image-upload-dropzone:hover:not(.disabled):not(.uploading){background-color:#eff6ff;border-color:#3b82f6}.image-upload-dropzone.drag-active{background-color:#dbeafe;border-color:#3b82f6;transform:scale(1.02)}.image-upload-dropzone.uploading{cursor:not-allowed;background-color:#f3f4f6}.image-upload-dropzone.disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.upload-prompt{flex-direction:column;align-items:center;gap:.5rem;display:flex}.upload-icon{opacity:.6;font-size:3rem}.upload-text{color:#374151;margin:0;font-size:1rem}.upload-text strong{color:#3b82f6}.upload-hint{color:#6b7280;margin:0;font-size:.875rem}.upload-progress{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.upload-spinner{border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.progress-bar{background-color:#e5e7eb;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-fill{background-color:#3b82f6;border-radius:4px;height:100%;transition:width .3s}.progress-text{color:#6b7280;margin:0;font-size:.875rem;font-weight:500}.upload-preview{background-color:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;position:relative;overflow:hidden}.preview-image{object-fit:cover;width:100%;height:auto;max-height:300px;display:block}.remove-button{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#ef4444e6;border:none;border-radius:6px;padding:.5rem .75rem;font-size:.875rem;font-weight:500;transition:all .2s;position:absolute;top:8px;right:8px}.remove-button:hover:not(:disabled){background-color:#dc2626e6;transform:scale(1.05)}.remove-button:disabled{cursor:not-allowed;opacity:.6}@media (prefers-color-scheme:dark){.image-upload-dropzone{background-color:#1f2937;border-color:#4b5563}.image-upload-dropzone:hover:not(.disabled):not(.uploading){background-color:#1e3a8a;border-color:#3b82f6}.image-upload-dropzone.drag-active{background-color:#1e40af}.upload-text{color:#d1d5db}.upload-hint{color:#9ca3af}.upload-preview{background-color:#1f2937;border-color:#4b5563}}@media (max-width:640px){.image-upload-dropzone{min-height:150px;padding:1.5rem}.upload-icon{font-size:2rem}.upload-text{font-size:.875rem}.upload-hint{font-size:.75rem}}