@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Baloo+2:wght@600;800&display=swap";:root{--palette-white:#fff;--palette-sunglow:#ffca3a;--palette-brick-red:#d1495b;--palette-sizzling-red:#ff595e;--palette-indigo-dye:#003d5b;--palette-green-blue-crayola:#1982c4;--palette-azure:#3a86ff;--palette-african-violet:#aa7bc3;--palette-davys-grey:#46494c;--palette-yellow-green:#8ac926;--color-canvas:var(--palette-indigo-dye);--color-canvas-deep:color-mix(in srgb, var(--palette-indigo-dye) 65%, black);--color-surface:color-mix(in srgb, var(--palette-white) 12%, transparent);--color-surface-strong:color-mix(in srgb, var(--palette-white) 22%, transparent);--color-surface-border:color-mix(in srgb, var(--palette-white) 30%, transparent);--color-surface-recessed:color-mix(in srgb, black 55%, var(--color-canvas) 45%);--color-surface-recessed-border:color-mix(in srgb, var(--palette-white) 15%, transparent);--color-overlay:color-mix(in srgb, var(--palette-davys-grey) 80%, transparent);--color-text:color-mix(in srgb, var(--palette-white) 90%, var(--palette-indigo-dye) 10%);--color-text-muted:color-mix(in srgb, var(--palette-white) 75%, transparent);--color-text-on-accent:var(--palette-davys-grey);--color-accent:var(--palette-sunglow);--color-positive:var(--palette-yellow-green);--color-danger:var(--palette-brick-red);--color-danger-strong:var(--palette-sizzling-red);--color-info:var(--palette-african-violet);--color-info-glow:color-mix(in srgb, var(--palette-african-violet) 65%, transparent);--color-score-half:var(--palette-azure);--color-score-full:var(--palette-green-blue-crayola);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:999px;--shadow-sm:0 1px 2px #00000040;--shadow-md:0 4px 16px #0000004d;--shadow-lg:0 12px 32px #00000059;--font-body:"Open Sans", system-ui, sans-serif;--font-display:"Baloo 2", var(--font-body);--font-size-sm:clamp(.8rem, .77rem + .15vw, .9rem);--font-size-base:clamp(.95rem, .92rem + .15vw, 1.05rem);--font-size-lg:clamp(1.1rem, 1.02rem + .35vw, 1.35rem);--font-size-xl:clamp(1.4rem, 1.25rem + .7vw, 1.85rem);--font-size-2xl:clamp(1.8rem, 1.5rem + 1.3vw, 2.6rem);--duration-fast:.12s;--duration-base:.22s;--duration-slow:.4s;--ease-standard:cubic-bezier(.2, 0, 0, 1);--content-max-width:980px}*,:before,:after{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font-family:var(--font-body);font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-canvas);color:var(--color-text);margin:0;line-height:1.5}h1,h2,h3{font-family:var(--font-display);margin:0 0 var(--space-3) 0;line-height:1.2}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0 0 var(--space-3) 0}a{color:inherit}ul,ol{margin:0;padding:0;list-style:none}fieldset{border:none;margin:0;padding:0}legend{font-family:var(--font-display);font-size:var(--font-size-lg);margin:0 0 var(--space-3) 0;padding:0}label{margin-bottom:var(--space-2);display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{justify-content:center;align-items:center;gap:var(--space-2);height:2.5rem;padding:0 var(--space-4);border-radius:var(--radius-sm);font-family:var(--font-body);font-weight:700;font-size:var(--font-size-base);cursor:pointer;background-color:var(--color-surface);border:1px solid #0000;border-color:var(--color-surface-border);color:var(--color-text);transition:background-color var(--duration-base) var(--ease-standard);text-decoration:none;display:inline-flex;position:relative}@property --spin-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.btn:before{content:"";border-radius:inherit;background:conic-gradient(from var(--spin-angle), transparent 0deg, currentColor 40deg, transparent 90deg);-webkit-mask-composite:xor;opacity:0;pointer-events:none;transition:opacity var(--duration-base) var(--ease-standard);-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:2px;position:absolute;top:-2px;bottom:-2px;left:-2px;right:-2px;-webkit-mask-image:linear-gradient(#000 0,#000 0),linear-gradient(#000 0,#000 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.btn:hover:not(:disabled):before{opacity:1;animation:4s linear infinite btn-glow-spin}@keyframes btn-glow-spin{to{--spin-angle:360deg}}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-loading,.btn-loading-done{overflow:hidden}.btn-loading:after,.btn-loading-done:after{content:"";border-radius:inherit;background:var(--btn-role-color,currentColor);opacity:.8;pointer-events:none;position:absolute;top:auto;bottom:0;left:0;right:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 360 300%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0,24 C4,10 14,10 18,24 C21,19 25,19 28,24 C31,14 39,14 42,24 C45,17 51,17 54,24 C59,8 69,8 74,24 C77,18 83,18 86,24 C90,13 98,13 102,24 C106,15 114,15 120,24 L120,300 L0,300 Z M120,24 C124,10 134,10 138,24 C141,19 145,19 148,24 C151,14 159,14 162,24 C165,17 171,17 174,24 C179,8 189,8 194,24 C197,18 203,18 206,24 C210,13 218,13 222,24 C226,15 234,15 240,24 L240,300 L120,300 Z M240,24 C244,10 254,10 258,24 C261,19 265,19 268,24 C271,14 279,14 282,24 C285,17 291,17 294,24 C299,8 309,8 314,24 C317,18 323,18 326,24 C330,13 338,13 342,24 C346,15 354,15 360,24 L360,300 L240,300 Z%27 fill=%27white%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 360 300%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0,24 C4,10 14,10 18,24 C21,19 25,19 28,24 C31,14 39,14 42,24 C45,17 51,17 54,24 C59,8 69,8 74,24 C77,18 83,18 86,24 C90,13 98,13 102,24 C106,15 114,15 120,24 L120,300 L0,300 Z M120,24 C124,10 134,10 138,24 C141,19 145,19 148,24 C151,14 159,14 162,24 C165,17 171,17 174,24 C179,8 189,8 194,24 C197,18 203,18 206,24 C210,13 218,13 222,24 C226,15 234,15 240,24 L240,300 L120,300 Z M240,24 C244,10 254,10 258,24 C261,19 265,19 268,24 C271,14 279,14 282,24 C285,17 291,17 294,24 C299,8 309,8 314,24 C317,18 323,18 326,24 C330,13 338,13 342,24 C346,15 354,15 360,24 L360,300 L240,300 Z%27 fill=%27white%27/%3E%3C/svg%3E");-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-size:300% 100px;mask-size:300% 100px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn-loading:after{height:0%;animation:btn-fill-rise .5s var(--ease-standard) forwards, btn-fill-wave 3.5s linear infinite}.btn-loading-done:after{height:calc(25% + 8px);animation:btn-fill-complete .4s var(--ease-standard) forwards;-webkit-mask-image:none;mask-image:none}@keyframes btn-fill-rise{0%{height:0%}to{height:calc(25% + 8px)}}@keyframes btn-fill-wave{0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:top;mask-position:top}}@keyframes btn-fill-complete{0%{height:calc(25% + 8px)}to{height:100%}}.btn-confirm{position:relative;overflow:hidden}.btn-confirm:after{content:"";z-index:-1;background:var(--btn-role-color,currentColor);pointer-events:none;width:0%;animation:btn-confirm-fill .5s var(--ease-standard) forwards;position:absolute;top:0;bottom:0;left:0;right:auto}@keyframes btn-confirm-fill{0%{width:0%}to{width:100%}}.btn-confirm.is-armed{animation:btn-confirm-text .5s var(--ease-standard) forwards}@keyframes btn-confirm-text{0%{color:var(--color-danger)}to{color:var(--palette-white)}}.btn-accent{--btn-role-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent);background-color:#0000}.btn-positive{--btn-role-color:var(--color-positive);border-color:var(--color-positive);color:var(--color-positive);background-color:#0000}.btn-danger{--btn-role-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-danger);background-color:#0000}.btn-danger-strong{--btn-role-color:var(--color-danger-strong);border-color:var(--color-danger-strong);color:var(--color-danger-strong);background-color:#0000}.btn-score-half{--btn-role-color:var(--color-score-half);border-color:var(--color-score-half);color:var(--color-score-half);background-color:#0000}.btn-score-full{--btn-role-color:var(--color-score-full);border-color:var(--color-score-full);color:var(--color-score-full);background-color:#0000}.btn-ghost{color:var(--color-text);background-color:#0000;border-color:#0000}.field{box-sizing:border-box;width:100%;height:2.5rem;padding:0 var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--color-surface-border);background-color:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--font-size-base)}.field:focus-visible{border-color:var(--color-accent)}.panel{padding:var(--space-4);border:1px solid var(--color-surface-border);background-color:var(--color-surface);border-radius:var(--radius-md)}.panel-separator{text-align:center;margin:var(--space-3) 0;color:var(--color-text-muted);display:block}.Home .panel{align-items:flex-end;gap:var(--space-3);flex-direction:column;max-width:28rem;display:flex}.Home .panel p{text-align:left;margin:0}.provider-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(100px,120px));display:grid}.provider-tile{justify-content:center;align-items:center;gap:var(--space-2);aspect-ratio:1;background-color:var(--color-surface);border:1px solid var(--color-surface-border);border-radius:var(--radius-md);height:auto;color:inherit;cursor:pointer;transition:border-color var(--duration-base) var(--ease-standard);flex-direction:column;font-weight:700;display:flex;position:relative}.provider-tile:hover{border-color:var(--provider-color)}.provider-tile:focus-visible{border-color:var(--provider-color)}.provider-tile[aria-pressed=true]{border-color:var(--provider-color);box-shadow:0 0 12px color-mix(in srgb, var(--provider-color) 50%, transparent)}.provider-tile:disabled{cursor:not-allowed;opacity:.6}.provider-tile[aria-pressed=true]:disabled{opacity:1}.provider-icon{width:36px;height:36px;color:var(--provider-color);flex-shrink:0}.provider-status{font-size:var(--font-size-sm);color:var(--color-positive);font-weight:400}.playlists-container{gap:var(--space-2);flex-flow:wrap;display:flex}.playlists-container li{display:flex}.playlists-container span,.playlists-container .btn{justify-content:center}@media (max-width:640px){.playlists-container{scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;margin-inline:calc(-1 * var(--space-4));flex-wrap:nowrap;gap:0;overflow-x:auto}.playlists-container li{scroll-snap-align:start;padding-inline:var(--space-4);flex:0 0 100%}.playlists-container span,.playlists-container .btn{width:100%}}.playlists-container span{height:2.5rem;padding:0 var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--color-info);color:var(--color-info);box-shadow:0 0 12px var(--color-info-glow);background-color:#0000;align-items:center;font-weight:700;display:flex;position:relative}.create-playlist-dialog{background:0 0;border:none;width:min(100vw,28rem);max-width:none;padding:0}.create-playlist-dialog::backdrop{background-color:var(--color-overlay)}.create-playlist-dialog .panel{background-color:var(--color-surface-recessed);border-color:var(--color-surface-recessed-border);flex-direction:column;display:flex;box-shadow:inset 0 1px 4px #00000080}.create-playlist-dialog .field{margin-bottom:var(--space-3)}.create-playlist-dialog button{align-self:center}.Result{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;border-bottom:1px solid var(--color-surface-border);display:flex}.Result .preview-control{margin-left:auto;font-size:1.25rem}.Search-container{box-sizing:border-box;width:100vw;max-width:var(--content-max-width);background-color:var(--color-surface);padding:var(--space-3);border-radius:var(--radius-md)}.Search-ResultList{max-height:80vh;overflow:auto}.Search-Input-container{gap:var(--space-2);width:100%;margin-bottom:var(--space-3);display:flex}.Search-Input-container .field{flex:1}.reset-search-button{font-size:1.4rem}.track-list{border:1px solid var(--color-surface-border);background-color:var(--color-surface);border-radius:var(--radius-md);margin-bottom:var(--space-3);overflow:hidden}.track{align-items:center;gap:var(--space-2);text-align:left;width:100%;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-surface-border);display:flex}.track:last-child{border-bottom:none}.track-placeholder{height:2.75rem;margin:var(--space-1) var(--space-2);border:2px dashed var(--color-accent);border-radius:var(--radius-sm);display:block}.drag-handle{color:var(--color-text-muted);cursor:grab;flex-shrink:0;font-size:1.25rem}.track-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.track-actions{flex-shrink:0;align-items:center;display:flex}.trash-button{color:var(--color-danger)}.search-dialog{max-width:none;width:min(100vw, calc(var(--content-max-width) + var(--space-6)));background:0 0;border:none;padding:0}.search-dialog::backdrop{background-color:var(--color-overlay)}.ConfigureSession{align-items:center;gap:var(--space-5);flex-direction:column;display:flex}.config-step{width:100%;padding:var(--space-4);border:1px solid var(--color-surface-border);background-color:var(--color-surface);border-radius:var(--radius-md);transition:opacity var(--duration-slow) var(--ease-standard)}.config-step[inert]{opacity:.45;filter:grayscale(.5)}.config-step h2{margin-bottom:var(--space-3)}.config-step-hint{color:var(--color-text-muted);font-size:var(--font-size-sm)}.launch-button{min-width:220px}.Player-container{text-align:center;margin-bottom:var(--space-6);flex-direction:column;display:flex}.Player-container .current-track{font-size:var(--font-size-lg);margin-bottom:0}.Player-container .next-track{color:var(--color-text-muted)}.Player-container .controls-container{justify-content:center;gap:var(--space-2);margin-top:var(--space-2);display:flex}.Player-container .controls-container .btn{font-size:1.5rem}main:has(>.Session-Step){justify-content:center;align-items:center;display:flex}.Session-Step{align-items:center;gap:var(--space-4);width:100%;max-width:var(--content-max-width);flex-direction:column;display:flex}.Session-Step>.controls-container{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.controls-container .session-actions{justify-content:space-evenly;gap:var(--space-2);flex-wrap:wrap;width:100%;display:flex}.session-actions a{align-items:center;gap:var(--space-1);display:inline-flex}.challenge-buttons-container{gap:var(--space-2);display:flex}.challenger-list{grid-area:challengers}.challenger-ranking li{padding:var(--space-1) 0;justify-content:flex-start;align-items:center;display:flex}.active-challenger-row{align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}p.active-challenger{padding:var(--space-2);border-radius:var(--radius-sm);text-align:center;background-color:var(--player-color);border:1px solid var(--player-color);flex:1;margin:0;font-weight:700}.challenger-ranking li.first{font-size:var(--font-size-lg);font-weight:700}.challenger-ranking span:last-child{margin:0 0 0 auto}.challenger-ranking svg{margin-right:var(--space-2);color:var(--color-accent);font-size:1.25rem}.App{flex-direction:column;min-height:100dvh;display:flex}.App-header{box-sizing:border-box;height:3rem;padding:0 var(--space-4);background-color:var(--color-canvas-deep);align-items:center;display:flex}.App-brand{font-family:var(--font-display);font-weight:800;font-size:var(--font-size-lg);color:var(--color-accent);text-decoration:none}.App main{width:100%;max-width:var(--content-max-width);padding:var(--space-4);box-sizing:border-box;flex:1;margin:0 auto}.Session{width:100%;max-width:var(--content-max-width)}.Join-Session-Form{flex-direction:column;display:flex}.Join-Session-Form .panel{flex-direction:column;display:flex;position:relative}.Join-Session-Form .colors{justify-content:space-between;gap:var(--space-2);border:none;flex-wrap:wrap;margin:0;padding:0;display:flex}.color-button{border-radius:var(--radius-full);background-color:var(--swatch-color);cursor:pointer;height:2.5rem;transition:transform var(--duration-fast) var(--ease-standard);border:3px solid #0000;flex-basis:2.5rem}.color-button[aria-pressed=true]{border-color:var(--color-text);transform:scale(1.1)}.Join-Session-Form .join-button{width:150px;margin-top:var(--space-4);align-self:center}.Join-Session-Form select{box-sizing:border-box}.Session-challenge-button,.Session .challenger-list-wrapper{width:100vw;max-width:var(--content-max-width)}.Session-challenge-button{box-sizing:border-box;border-radius:var(--radius-lg);background-color:var(--player-color);height:66.6667dvh;max-height:980px;color:var(--color-text-on-accent);font-family:var(--font-display);font-weight:800;font-size:var(--font-size-2xl);cursor:pointer;border:none;padding:0}.Session-challenge-button:disabled{cursor:not-allowed;opacity:.85}.Session-leave-button{margin:var(--space-4) auto 0 auto;display:block}.challenger-list-trigger{width:100vw;max-width:var(--content-max-width);background-color:var(--color-canvas-deep);color:var(--color-text);height:2.5rem;padding:0 var(--space-3);box-sizing:border-box;border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:space-between;align-items:center;font-weight:700;display:flex;position:fixed;bottom:0;left:50%;translate:-50%}.challenger-list-wrapper{width:100vw;max-width:var(--content-max-width);background-color:var(--color-canvas-deep);height:100dvh;color:var(--color-text);border:none;margin:0;padding:0;position:fixed;top:0;bottom:0;left:0;right:0}.challenger-list-opener{background-color:var(--color-canvas-deep);box-sizing:border-box;width:100%;height:2.5rem;padding:0 var(--space-3);color:var(--color-text);cursor:pointer;border:none;justify-content:space-between;align-items:center;font-weight:700;display:flex}.challenger-list{padding:0 var(--space-3) var(--space-3) var(--space-3);max-height:calc(100dvh - 2.5rem);overflow:auto}.challenger-list li{padding:var(--space-1) 0;justify-content:flex-start;align-items:center;display:flex}.challenger-list li.challenger{color:var(--color-accent);font-weight:700}.challenger-list span:last-child{margin:0 0 0 auto}@media (min-width:980px){.challenger-list-trigger{display:none}.challenger-list-wrapper{background-color:#0000;width:100%;height:auto;display:block;position:static;top:auto;bottom:auto;left:auto;right:auto}.challenger-list-opener{display:none}.challenger-list{max-height:none;padding:var(--space-3) 0 0 0}}.Board{width:100vw;max-width:var(--content-max-width);container:board/inline-size}.Board-layout{gap:var(--space-4);flex-direction:column;display:flex}.Board .join-info{display:none}.Board .qrcode-button{cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-self:center;padding:0;display:block}.Board .qrcode-button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.Board .qrcode-dialog{background:0 0;border:none;max-width:none}.Board .qrcode-dialog::backdrop{background-color:var(--color-overlay)}.Board .qrcode-dialog .panel{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.Board .join-url-full{color:var(--color-text);word-break:break-all;text-align:center}.Board .result-dialog{background:0 0;border:none;max-width:none;padding:0}.Board .result-dialog::backdrop{background-color:var(--color-overlay)}.Board .result-content{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.Board .gif-big{border-radius:var(--radius-md);max-width:min(90vw,600px);height:auto;display:block}.Board .result-content .track{background-color:var(--color-surface);border:1px solid var(--color-surface-border);border-radius:var(--radius-md);text-align:center;padding:var(--space-3);flex-direction:column;display:flex}.Board .result-content .track .current-song:first-child{font-size:var(--font-size-lg)}.Board .active-challenger-big{padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);border:1px solid var(--player-color);background-color:var(--player-color);text-align:center;font-family:var(--font-display);font-size:var(--font-size-2xl);margin:0;font-weight:700}@container board (width>=640px){.Board-layout{gap:var(--space-4);grid-template:"challengers join-info"/auto 20%;display:grid}.Board .challenger-list{grid-area:challengers}.Board .join-info{align-items:center;gap:var(--space-2);flex-direction:column;grid-area:join-info;display:flex}}