:root{--height-topbar-vh: 7vh;--height-audioplayer-vh: 7vh;--main-area-height: calc(100vh - var(--height-topbar-vh) - var(--height-audioplayer-vh));--width-ratio-main: .7;--width-ratio-side: .3;--height-ratio-upper: .35;--height-ratio-lower: .65;--spacing-global: 1rem;--dropdown-padding-top: 6vh;--dropdown-padding-right: 2vw}.topbar-container{height:var(--height-topbar-vh);min-height:var(--height-topbar-vh);flex-shrink:0}.audioplayer-container{height:var(--height-audioplayer-vh);min-height:var(--height-audioplayer-vh);flex-shrink:0}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.text-truncate-fade{position:relative;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to right,black 95%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 95%,transparent 100%)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .2s ease-out forwards}html.dark .bg-white{background-color:#1f2937;box-shadow:0 1px 3px #0000004d,0 1px 2px -1px #0000004d}html.dark .shadow-lg{box-shadow:0 10px 15px -3px #0000004d,0 4px 6px -4px #0000004d}html.dark .shadow-sm{box-shadow:0 1px 2px #0000004d}html.dark .border-gray-200{border-color:#374151}html.dark .border-gray-300{border-color:#4b5563}html.dark .text-gray-900{color:#f3f4f6}html.dark .text-gray-700{color:#d1d5db}html.dark .text-gray-600{color:#9ca3af}html.dark .hover\:bg-gray-50:hover,html.dark .hover\:bg-gray-100:hover{background-color:#374151}@media (max-width: 768px){:root{--spacing-global: .75rem}.topbar-container,.audioplayer-container{--height-topbar-vh: 8vh;--height-audioplayer-vh: 8vh}}@media (max-width: 480px){:root{--spacing-global: .5rem}.topbar-container,.audioplayer-container{--height-topbar-vh: 9vh;--height-audioplayer-vh: 9vh}}@media (min-width: 768px){:root{--menu-option-size: 40px}}@media (min-width: 1024px){:root{--menu-option-size: 45px;--volume-menu-size: 120px}}.image-transition{transition:filter .3s ease}