.app-symbol{display:inline-block;width:30px;height:30px;flex-shrink:0;vertical-align:middle;background:currentColor;-webkit-mask:url('assets/trixmusic.svg') center/contain no-repeat;mask:url('assets/trixmusic.svg') center/contain no-repeat}.breadcrumbs .app-symbol{width:26px;height:26px;margin-right:9px;vertical-align:-5px}.drawer-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:5px;margin-bottom:16px}.drawer-header .brand{display:flex;align-items:center;gap:9px;font-size:22px;min-width:0}.drawer-header .brand small{font-size:6px;line-height:1.4;letter-spacing:1px;padding:5px 0 0;white-space:nowrap}.drawer-header .brand-label{line-height:1;white-space:nowrap}.drawer-toggle{min-width:32px;min-height:36px;padding:7px;color:var(--muted)}.drawer-toggle svg{width:20px;height:20px;transition:transform .22s ease}.drawer-toggle:hover{color:var(--accent-readable)}html[data-drawer=expanded] .drawer-toggle svg{transform:rotate(180deg)}
@media(min-width:651px){html{--drawer-width:76px}html[data-drawer=expanded]{--drawer-width:248px}body>.sidebar{width:var(--drawer-width);padding:22px 14px;transition:width .22s ease}.workspace{margin-left:var(--drawer-width);transition:margin-left .22s ease}.sidebar .side-bottom{min-height:42px}.sidebar .side-bottom button{flex-shrink:0}html[data-drawer=collapsed] .drawer-header{flex-direction:column;gap:15px;margin-bottom:14px}html[data-drawer=collapsed] .drawer-header .brand{justify-content:center;width:44px}html[data-drawer=collapsed] .brand-label,html[data-drawer=collapsed] .sidebar>.navlabel,html[data-drawer=collapsed] .side-library>.navlabel,html[data-drawer=collapsed] .side-library>button>span:not(.icon-label),html[data-drawer=collapsed] .side-library>button>i,html[data-drawer=collapsed] .side-bottom>.status-dot{display:none}html[data-drawer=collapsed] #nav button{width:44px;height:44px;min-height:44px;justify-content:center;gap:0;padding:12px;font-size:0;margin:5px auto}html[data-drawer=collapsed] #nav .nav-icon{width:20px;height:20px}html[data-drawer=collapsed] #nav button.active:before{top:11px;bottom:11px}html[data-drawer=collapsed] .side-library{overflow-x:hidden;margin-top:19px;scrollbar-width:none}html[data-drawer=collapsed] .side-library::-webkit-scrollbar{display:none}html[data-drawer=collapsed] .side-library>button{display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;height:44px;padding:10px;margin:4px auto;font-size:0}html[data-drawer=collapsed] .side-library button span{margin:0}html[data-drawer=collapsed] .side-library .icon-label{font-size:0;gap:0}html[data-drawer=collapsed] .side-library .icon-label svg{width:21px;height:21px}html[data-drawer=collapsed] .side-library hr{margin:18px 8px}html[data-drawer=collapsed] .playlist-link{display:flex;justify-content:center;align-items:center;width:44px;height:42px;margin:2px auto;padding:11px;font-size:0;gap:0}html[data-drawer=collapsed] .playlist-link svg{width:19px;height:19px}html[data-drawer=collapsed] .side-bottom{font-size:0;justify-content:center;width:44px;margin:12px auto 0}html[data-drawer=collapsed] .side-bottom button{margin:0;width:44px;height:42px}html[data-drawer=collapsed] .side-bottom button svg{width:21px;height:21px}html[data-drawer=expanded] .side-library>button{padding-left:8px}html[data-drawer=expanded] #nav button{font-size:13px;padding-left:12px}html[data-drawer=expanded] .side-bottom{font-size:9px}}
@media(max-width:650px){.breadcrumbs .app-symbol{width:25px;height:25px;margin-right:7px;vertical-align:-4px}.breadcrumbs{font-size:24px}body>.sidebar{display:none}.workspace{margin-left:0}}
@media(prefers-reduced-motion:reduce){body>.sidebar,.workspace,.drawer-toggle svg{transition:none}}