@layer base{:root{--color-slate: #64748b;--color-gray: #6b7280;--color-zinc: #71717a;--color-neutral: #737373;--color-stone: #78716c;--color-red: #ef4444;--color-orange: #f97316;--color-amber: #f59e0b;--color-yellow: #eab308;--color-lime: #84cc16;--color-green: #22c55e;--color-emerald: #10b981;--color-teal: #14b8a6;--color-cyan: #06b6d4;--color-sky: #0ea5e9;--color-blue: #3b82f6;--color-indigo: #6366f1;--color-violet: #8b5cf6;--color-purple: #a855f7;--color-fuchsia: #d946ef;--color-pink: #ec4899;--color-rose: #f43f5e;--color-app-primary: var(--color-indigo)}.theme{--color-theme-50: color-mix(in oklab, var(--color-theme), #fff 90%);--color-theme-100: color-mix(in oklab, var(--color-theme), #fff 80%);--color-theme-200: color-mix(in oklab, var(--color-theme), #fff 60%);--color-theme-300: color-mix(in oklab, var(--color-theme), #fff 40%);--color-theme-400: color-mix(in oklab, var(--color-theme), #fff 20%);--color-theme-500: var(--color-theme);--color-theme-600: color-mix(in oklab, var(--color-theme), #000 20%);--color-theme-700: color-mix(in oklab, var(--color-theme), #000 40%);--color-theme-800: color-mix(in oklab, var(--color-theme), #000 60%);--color-theme-900: color-mix(in oklab, var(--color-theme), #000 80%);--color-theme-950: color-mix(in oklab, var(--color-theme), #000 90%)}.contrast{--color-contrast-base: rgb( from var(--color-bg) clamp(0, calc((r/255*.2126 + g/255*.7152 + b/255*.0722 - .5) * -64000), 255) clamp(0, calc((r/255*.2126 + g/255*.7152 + b/255*.0722 - .5) * -64000), 255) clamp(0, calc((r/255*.2126 + g/255*.7152 + b/255*.0722 - .5) * -64000), 255) );--color-contrast-50: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 5%) h calc(s*1) l);--color-contrast-100: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 10%) h calc(s*1.5) l);--color-contrast-200: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 20%) h calc(s*2) l);--color-contrast-300: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 30%) h calc(s*3) l);--color-contrast-400: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 40%) h calc(s*4) l);--color-contrast-500: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 50%) h calc(s*5) l);--color-contrast-600: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 60%) h calc(s*6) l);--color-contrast-700: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 70%) h calc(s*7) l);--color-contrast-800: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 80%) h calc(s*8) l);--color-contrast-900: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 90%) h calc(s*9) l);--color-contrast-950: hsl(from color-mix(in oklab, var(--color-bg), var(--color-contrast-base) 95%) h calc(s*9.5) l)}.text-constrast-50{color:var(--color-contrast-50);--color-text: var(--color-contrast-50)}.text-constrast-100{color:var(--color-contrast-100);--color-text: var(--color-contrast-100)}.text-constrast-200{color:var(--color-contrast-200);--color-text: var(--color-contrast-200)}.text-constrast-300{color:var(--color-contrast-300);--color-text: var(--color-contrast-300)}.text-constrast-400{color:var(--color-contrast-400);--color-text: var(--color-contrast-400)}.text-constrast-500{color:var(--color-contrast-500);--color-text: var(--color-contrast-500)}.text-constrast-600{color:var(--color-contrast-600);--color-text: var(--color-contrast-600)}.text-constrast-700{color:var(--color-contrast-700);--color-text: var(--color-contrast-700)}.text-constrast-800{color:var(--color-contrast-800);--color-text: var(--color-contrast-800)}.text-constrast-900{color:var(--color-contrast-900);--color-text: var(--color-contrast-900)}.text-constrast-950{color:var(--color-contrast-950);--color-text: var(--color-contrast-950)}.bg-theme-50{background-color:var(--color-theme-50);--color-bg: var(--color-theme-50)}.bg-theme-100{background-color:var(--color-theme-100);--color-bg: var(--color-theme-100)}.bg-theme-200{background-color:var(--color-theme-200);--color-bg: var(--color-theme-200)}.bg-theme-300{background-color:var(--color-theme-300);--color-bg: var(--color-theme-300)}.bg-theme-400{background-color:var(--color-theme-400);--color-bg: var(--color-theme-400)}.bg-theme-500{background-color:var(--color-theme-500);--color-bg: var(--color-theme-500)}.bg-theme-600{background-color:var(--color-theme-600);--color-bg: var(--color-theme-600)}.bg-theme-700{background-color:var(--color-theme-700);--color-bg: var(--color-theme-700)}.bg-theme-800{background-color:var(--color-theme-800);--color-bg: var(--color-theme-800)}.bg-theme-900{background-color:var(--color-theme-900);--color-bg: var(--color-theme-900)}.bg-theme-950{background-color:var(--color-theme-950);--color-bg: var(--color-theme-950)}}@layer base{:root{--border-radius-sm: 4px;--border-radius: 6px;--border-radius-lg: 8px;--border-radius-xl: 12px;--s-0_5: .125rem;--s-1: .25rem;--s-2: .5rem;--s-3: .75rem;--s-4: 1rem;--s-5: 1.25rem;--s-6: 1.5rem;--s-7: 1.75rem;--s-8: 2rem;--s-9: 2.25rem;--s-10: 2.5rem;--s-11: 2.75rem;--s-12: 3rem}.frosted{--color-bg: var(--color-theme-700);--frosted-box-shadow: inset 10px -10px 30px 5px rgba(from var(--color-theme-400) r g b / .1);--frosted-gradient: linear-gradient(15deg, var(--color-theme-700), var(--color-theme-800));border:1px solid var(--color-contrast-50);background:var(--frosted-gradient) var(--color-bg);box-shadow:var(--frosted-box-shadow);color:var(--contrast-100)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.remote-screen{position:relative;display:inline-block;border:2px solid white;border-radius:4px;background-color:#000;aspect-ratio:16 / 9;overflow:hidden;max-height:100%}.remote-screen__info{position:absolute;top:0;left:0;right:0;background-color:#00000080;padding:4px;text-align:center}.remote-screen__loading{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;font-size:2rem;color:#fff;background-color:#00000080}.remote-screen__loading span{transform-origin:44% 54%;animation:spin 1s linear infinite}.remote-screen__connect{position:absolute;bottom:0;left:0;right:0;background-color:#00000080;padding:4px;text-align:center}.remote-screen--dragover{border-color:orange}.icon-button{anchor-scope:--icon-button;position:relative;cursor:pointer;font-size:1rem;color:var(--color-theme);background:var(--color-contrast-500);border:none;background:#fff;border-radius:4px;padding:0}.icon-button__content{padding:4px;text-align:center;anchor-name:--icon-button}.icon-button>*{display:inline-block;width:32px;height:32px}.icon-button__popover{color:var(--color-theme);background:#fff;border:none;pointer-events:none;opacity:0;position:absolute;inset:initial;margin:0;padding:4px 8px;width:auto;height:auto;position-anchor:--icon-button;top:anchor(--icon-button top);right:calc(anchor(--icon-button left) + 8px);border-radius:4px;transition:opacity .2s}.icon-button__popover:popover-open{opacity:1}.icon-button__popover::backdrop{pointer-events:none;display:none}.screens{display:flex;height:200px;gap:1rem;justify-items:center;align-items:center}.remote-devices__available-device{padding:10px;border:1px solid #ccc;margin:5px;cursor:pointer}.remote-devices__available-device:hover{background-color:#f0f0f0}.device-volumes{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.device-sink{--color-theme: var(--device-color);display:inline-flex;padding:var(--s-2);border-radius:var(--border-radius);flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-2)}.device-sink--chromecast{--device-color: var(--color-sky)}.device-sink--second-screen{--device-color: var(--color-emerald)}.device-sink--local{--device-color: var(--color-rose)}.device-sink input{accent-color:var(--device-color)}@layer component{@property --beat-color{syntax: "<color>"; inherits: true; initial-value: transparent;}.a-card{--box-color: var(--audio-box-color-playlist, #ffb308);--box-color-900: color-mix(in lab, var(--box-color), #000 80%);--box-color-800: color-mix(in lab, var(--box-color), #000 60%);--box-color-100: color-mix(in lab, var(--box-color), #fff 80%);--box-color-300: color-mix(in lab, var(--box-color), #fff 40%);width:160px;aspect-ratio:4/5;border:1px solid rgba(from var(--box-color) r g b / .15);padding:4px;background:linear-gradient(45deg,var(--box-color-900),color-mix(in lab,var(--box-color-900),#000 60%));box-shadow:inset 10px -10px 30px 5px rgba(from var(--box-color-300) r g b / .05);color:var(--box-color-100);border-radius:8px;display:flex;flex-direction:column;--beat-color: rgba(from var(--box-color) r g b / 0);transition:--beat-color linear 1s;box-shadow:inset 10px -10px 30px 5px rgba(from var(--box-color-300) r g b / .05),0 0 var(--beat-color),0 0 0 8px var(--beat-color),0 0 0 16px var(--beat-color)}.a-card--playing{--beat-color: rgba(from var(--box-color) r g b / .3);animation:ripples 1s linear infinite}.a-card__controls{height:1.5rem;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;margin-bottom:1rem}.a-card__play-button{width:2rem;height:2rem;margin-left:.5rem;margin-right:.5rem;display:inline-flex;justify-content:center;align-items:center;background:var(--box-color);color:var(--box-color-900);border-radius:50%}.a-card input{accent-color:var(--box-color)}.a-card__volume{display:flex;flex-direction:row;padding:0rem .5rem}.a-card__label-wrapper{position:relative;width:100%;text-align:center;margin-top:-1rem;padding-bottom:1rem}.a-card__label{display:inline-block;width:80%;text-align:center;border:1px solid rgba(from var(--box-color) r g b / .2);background:var(--box-color-900);color:var(--box-color-100);font-size:1rem;font-weight:semibold;padding:.125rem;border-radius:6px}.a-card__content{flex:1;display:flex;flex-direction:column;border-radius:4px;justify-content:center;align-items:center;cursor:pointer}.a-card__popover{height:calc(100% - 10rem);width:calc(100% - 10rem);background:var(--box-color-900);color:var(--box-color-100);padding:1rem;border-radius:4px;border:2px solid rgba(from var(--box-color) r g b / .2);background:linear-gradient(45deg,var(--box-color-900),color-mix(in lab,var(--box-color-900),#000 60%));box-shadow:inset 10px -10px 30px 5px rgba(from var(--box-color-300) r g b / .05)}.a-card__popover-volumes{margin-bottom:1rem}}.a-card__delete{position:absolute;top:0;right:-1rem;width:1.5rem;height:1.5rem;color:var(--box-color-100);background:var(--box-color-900);border-radius:.25rem;cursor:pointer;border:1px solid rgba(from var(--box-color) r g b / .2);opacity:0%}.a-card:hover .a-card__delete{opacity:100%}@keyframes ripples{to{box-shadow:inset 10px -10px 30px 5px rgba(from var(--box-color-300) r g b / .05),0 0 0 8px var(--beat-color),0 0 0 16px var(--beat-color),0 0 0 32px rgba(from var(--beat-color) r g b / 0)}}@layer component{.a-playlist{--box-color: var(--audio-box-color-playlist, #f59e0b);--box-color-900: color-mix(in lab, var(--box-color), #000 80%);--box-color-100: color-mix(in lab, var(--box-color), #fff 80%);--box-color-300: color-mix(in lab, var(--box-color), #fff 40%);width:160px;aspect-ratio:4/5;border:2px solid rgba(from var(--box-color) r g b / .2);padding:4px;background:var(--box-color-900);color:var(--box-color-100);border-radius:4px;display:flex;flex-direction:column}.a-playlist input{accent-color:var(--box-color)}.a-playlist__top,.a-playlist__bottom{height:1.5rem;text-align:center}.a-playlist__content{flex:1;display:flex;flex-direction:column;border-radius:4px;justify-content:center;align-items:center}.a-playlist__popover{height:calc(100% - 10rem);width:calc(100% - 10rem);background:var(--box-color-900);color:var(--box-color-100);border-radius:4px;border:2px solid var(--box-color-300)}}.a-playlist__song{display:flex;flex-direction:row;cursor:pointer;padding:.5rem;border-bottom:1px solid var(--box-color-800);transition:background-color .2s}.a-playlist__song-name{flex:1}.a-playlist__song--playing{background-color:var(--box-color-800)}.a-playlist__song:first-child{border-top:1px solid var(--box-color-800)}.a-playlist__song-play-indicator{opacity:0;transition:opacity .2s;margin-right:.5rem}.a-playlist__song:hover .a-playlist__song-play-indicator,.a-playlist__song--playing .a-playlist__song-play-indicator{opacity:1}.a-sfx-sound{width:100%;height:var(--box-size);--color-theme: var(--box-color);position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;cursor:pointer}.a-sfx-sound__controls{position:absolute;top:0;right:0;padding:.5rem}.a-sfx-sound__alternatives{position:absolute;bottom:0;right:0;left:0;color:var(--color-contrast-700);display:flex;flex-direction:row;gap:var(--s-0_5);padding:var(--s-0_5)}.a-sfx-sound__alternative{flex:1;padding:.5rem;text-align:center;color:var(--color-contrast-700);border:1px solid var(--color-contrast-50);background-color:rgba(from var(--color-theme-950) r g b / .4);border-radius:var(--border-radius-sm)}.a-sfx-sound__name{text-align:center;color:var(--color-contrast-900);font-weight:400;padding:var(--s-1) var(--s-2)}.a-sfx-sound{--beat-color: rgba(from var(--box-color) r g b / 0);transition:--beat-color linear 1s;box-shadow:inset 10px -10px 30px 5px rgba(from var(--box-color-300) r g b / .05),0 0 var(--beat-color),0 0 0 8px var(--beat-color),0 0 0 16px var(--beat-color)}.a-sfx-sound--playing{--beat-color: rgba(from var(--box-color) r g b / .3);animation:ripples 1s linear infinite}.a-sfx__popover{--box-size: 160px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--box-size),1fr));gap:var(--s-5)}@layer component{.a-parallel{--box-color: var(--audio-box-color-parallel, #10b981);--box-color-900: color-mix(in lab, var(--box-color), #000 80%);--box-color-100: color-mix(in lab, var(--box-color), #fff 80%);--box-color-300: color-mix(in lab, var(--box-color), #fff 40%);width:160px;aspect-ratio:4/5;border:2px solid rgba(from var(--box-color) r g b / .2);padding:4px;background:var(--box-color-900);color:var(--box-color-100);border-radius:4px;display:flex;flex-direction:column}.a-parallel input{accent-color:var(--box-color)}.a-parallel__top,.a-parallel__bottom{height:1.5rem;text-align:center}.a-parallel__content{flex:1;display:flex;flex-direction:column;border-radius:4px;justify-content:center;align-items:center}.a-parallel__popover{height:calc(100% - 10rem);width:calc(100% - 10rem);background:var(--box-color-900);color:var(--box-color-100);border-radius:4px;border:2px solid var(--box-color-300)}}.a-parallel__song{display:flex;flex-direction:row;cursor:pointer;padding:.5rem;border-bottom:1px solid var(--box-color-800);transition:background-color .2s}.a-parallel__song-name{flex:1}.a-parallel__song--playing{background-color:var(--box-color-800)}.a-parallel__song:first-child{border-top:1px solid var(--box-color-800)}.a-parallel__song-play-indicator{opacity:0;transition:opacity .2s;margin-right:.5rem}.a-parallel__song:hover .a-parallel__song-play-indicator,.a-parallel__song--playing .a-parallel__song-play-indicator{opacity:1}.soundboard__controls{display:flex;flex-direction:row;padding:0 1rem 2rem;gap:1rem}.soundboard__sounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:3rem 1rem;padding:1rem}.soundboard-add-card__btn{text-align:center;border:1px solid;margin:.25rem;background:var(--box-color-900);border:1px solid rgba(from var(--box-color) r g b / .2);cursor:pointer}.soundboard-add-card__btn:hover{background:var(--box-color-800)}.map-control{display:inline-block;border:1px solid white;background:#fff;position:relative}.map-control--over:before{content:"Drop here";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:3px solid black}.file-manager-file{cursor:pointer}.file-manager-file__wrapper{cursor:pointer;display:inline-block;margin:-2px;padding:2px;-webkit-user-select:none;user-select:none}.file-manager-file__size{display:inline;padding:0 .25em;border-radius:4px;background-color:#088a1e;color:#fff}.file-manager-file__animated{display:inline;padding:0 .25em;border-radius:4px;background-color:#07b480;color:#fff}.file-manager-file__size--unknown{background-color:#801e1e}.file-manager-file__wrapper:hover{border-radius:4px;background-color:#ffffff4d}.file-preview{width:100%;height:30vh;overflow:hidden;position:relative}.file-preview__audio,.file-preview__video,.file-preview__image{width:100%;height:100%;object-fit:contain}.file-manager{display:grid;height:100%;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:.5rem;padding:.5rem .25rem}.file-manager__search{flex:1;border-radius:4px;border:none;padding:2px 8px}.file-manager__toolbar{padding:4px;display:flex;flex-direction:row;grid-gap:4px}.file-manager-dir{list-style-type:none;padding-left:1rem}.file-manager__files{overflow:auto}.file-manager-dir__label{cursor:pointer}.file-manager-dir__label:before{content:"📁";margin-right:.5rem;display:inline-block}.file-manager-dir__label--open:before{content:"📂"}.files__aside{--animation-duration: .2s;display:flex;flex-direction:column;position:fixed;inset:auto;height:auto;right:0;top:0;bottom:0;width:500px;max-width:100vw;background:#ffffff80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translate(100%);border:none;transition:all var(--animation-duration) allow-discrete}.files__aside-content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.files__aside:popover-open{transform:translate(0);transition-behavior:allow-discrete}@starting-style{.files__aside:popover-open{transform:translate(100%)}}.files__aside--dragging:popover-open{transform:translate(25%)}.files__file-preview{position:fixed;left:0;top:0;width:100px;height:100px}.app-layout{display:grid;grid-template-columns:1fr 64px;grid-template-rows:max-content 1fr;grid-template-areas:"overview topAside" "main menu";height:100dvh;--color-theme: var(--color-app-primary)}.app-layout__aside{padding:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.5rem}.app-layout__overview,.app-layout__main{padding:1rem}.aside{position:fixed;width:300px;height:100vh;overflow:auto;right:0;background:#000c;border-left:#555 2px solid;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}