:root{color-scheme:dark;--page:#121117;--side:#16151d;--panel:#1a1921;--raised:#211f29;--input:#201e29;--line:#292732;--text:#f6f3fb;--muted:#a6a1b4;--subtle:#827d94;--accent:#b397ff;--solid:#a982fa;--on-accent:#140b25;--active:#272039;--hero:#1c142e;--green:#65d5a2;--hero-art:url("./assets/hero-studio.svg");--shadow:0 16px 35px #09071066;--radius:15px;--side-width:225px;--player-height:90px}
:root[data-theme=neon]{--page:#0a0e18;--side:#0d1321;--panel:#10182a;--raised:#14223a;--input:#0d1726;--line:#203652;--text:#edfaff;--muted:#a4b6cf;--subtle:#8093ae;--accent:#59e9ff;--solid:#4ae7fd;--on-accent:#04151e;--active:#163145;--hero:#10142e;--green:#51ffbf;--hero-art:url("./assets/hero-neon.svg");--shadow:0 16px 35px #02061399}
:root[data-theme=cute]{color-scheme:light;--page:#fff7fb;--side:#fff0f6;--panel:#fffdfd;--raised:#fce9f4;--input:#fff8fb;--line:#f2d9e8;--text:#382842;--muted:#6c536d;--subtle:#755d76;--accent:#a32d78;--solid:#ed92c7;--on-accent:#401534;--active:#f9deef;--hero:#fbe2ef;--green:#227756;--hero-art:url("./assets/hero-cute.svg");--shadow:0 16px 35px #a95a862a;--radius:22px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--text);font:14px/1.45 "Segoe UI",system-ui,sans-serif;min-width:300px}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.48}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{min-height:100vh}
.sidebar{width:var(--side-width);position:fixed;inset:0 auto var(--player-height) 0;background:var(--side);border-right:1px solid var(--line);padding:28px 15px 17px;display:flex;flex-direction:column;z-index:5;overflow:auto}
.brand{display:flex;align-items:center;gap:11px;font-size:25px;font-weight:760;letter-spacing:-1.45px;margin:0 8px 43px;line-height:1.05;width:max-content}
.logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(150deg,var(--solid),var(--accent));color:var(--on-accent);box-shadow:0 4px 16px color-mix(in srgb,var(--solid) 25%,transparent)}
.logo svg{width:23px;height:23px;stroke-width:1.9}
.brand-accent{color:var(--accent)}
.brand small{display:block;font-size:8px;letter-spacing:1.9px;color:var(--subtle);font-weight:800;margin-top:6px}
.nav-label{font-size:10px;letter-spacing:1.55px;font-weight:750;color:var(--subtle);margin:0 0 10px 12px}
.nav-spaced{margin-top:30px}
.nav-item{height:42px;border-radius:9px;display:flex;align-items:center;gap:11px;padding:0 12px;font-weight:600;color:var(--muted);margin:2px 0;position:relative;white-space:nowrap}
.nav-item:hover,.side-help:hover{background:var(--raised);color:var(--text)}
.nav-item.active{background:var(--active);color:var(--accent)}
.nav-item.active::before{position:absolute;content:"";height:17px;width:3px;left:0;background:var(--accent);border-radius:0 3px 3px 0}
.nav-count{margin-left:auto;background:var(--raised);border-radius:6px;font-size:11px;padding:1px 6px;color:var(--muted)}
.sidebar-bottom{margin-top:auto;padding-top:25px}
.device-card{display:flex;align-items:center;gap:9px;padding:10px 9px;border:1px solid var(--line);border-radius:11px;margin:0 0 8px}
.device-icon,.empty-icon{display:grid;place-items:center;flex:none;border-radius:9px;background:var(--active);color:var(--accent);width:32px;height:32px}
.device-icon svg{width:17px;height:17px}
.device-card strong,.device-card small{display:block}
.device-card strong{font-size:11px}.device-card small{font-size:10px;color:var(--subtle);margin-top:2px}
.side-help{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--subtle);padding:8px 8px;border-radius:7px;font-size:11px;width:100%;text-align:left}
.side-help svg{width:15px;height:15px}
.workspace{margin-left:var(--side-width);padding-bottom:calc(var(--player-height) + 28px)}
.topbar{height:67px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,3.1vw,50px);border-bottom:1px solid var(--line);gap:12px}
.breadcrumb,.top-actions,.network{display:flex;align-items:center;gap:11px}
.breadcrumb{font-size:13px;color:var(--subtle)}.breadcrumb strong{color:var(--text);font-weight:650}
.crumb-arrow{width:13px;height:13px}.top-actions{gap:18px}.network{gap:7px;font-size:11px;font-weight:650;white-space:nowrap;color:var(--muted)}
.network i,.eyebrow i,.hero-index i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 11px color-mix(in srgb,var(--green) 55%,transparent)}
body.offline .network i{background:#ef9d64;box-shadow:none}
.button{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:35px;border-radius:8px;padding:0 12px;white-space:nowrap;font-size:12px;font-weight:700;border:1px solid transparent;transition:filter .15s,background .15s}
.button:hover{filter:brightness(1.1)}.button svg{width:15px;height:15px}
.secondary{border-color:var(--line);background:var(--raised);color:var(--text)}
.primary{background:var(--solid);color:var(--on-accent)}
.theme-btn .caret{width:12px;height:12px;color:var(--subtle)}
.theme-wrap{position:relative}.theme-menu{position:absolute;right:0;top:43px;z-index:12;width:223px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:13px;padding:8px}
.theme-menu p{margin:4px 7px 6px;color:var(--subtle);font-size:9px;font-weight:800;letter-spacing:1.4px}
.theme-menu button{display:flex;align-items:center;gap:9px;text-align:left;width:100%;padding:8px 7px;border:0;border-radius:7px;background:none}
.theme-menu button:hover,.theme-menu button[aria-pressed=true]{background:var(--active)}
.theme-menu button>svg{margin-left:auto;width:14px;height:14px;color:var(--accent);visibility:hidden}
.theme-menu button[aria-pressed=true]>svg{visibility:visible}
.theme-menu b,.theme-menu small{display:block}.theme-menu b{font-size:12px}.theme-menu small{font-size:10px;color:var(--muted)}
.swatch{height:24px;width:24px;border-radius:7px;flex:none}.swatch.studio{background:linear-gradient(145deg,#2b2242 48%,#a982fa 49%)}.swatch.neon{background:linear-gradient(145deg,#31d9f5 48%,#f84eae 49%)}.swatch.cute{background:linear-gradient(145deg,#f49bc8 48%,#b6f0df 49%)}
.icon-btn.mobile-install,.mobile-nav{display:none}
main{max-width:1530px;margin:0 auto;padding:25px clamp(22px,3.1vw,50px) 0}
.hero{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 19%,var(--line));border-radius:var(--radius);background:var(--hero);min-height:262px;display:flex;align-items:center;isolation:isolate}
.hero-art{position:absolute;z-index:-2;inset:0;background:var(--hero-art) right center / auto 118% no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--hero) 9%,color-mix(in srgb,var(--hero) 97%,transparent) 33%,transparent 76%)}
.hero-copy{padding:26px 32px 29px;width:min(565px,100%)}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--accent);display:inline-flex;gap:7px;align-items:center;padding:5px 8px;border:1px solid color-mix(in srgb,var(--accent) 23%,transparent);border-radius:6px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.eyebrow i,.hero-index i{width:5px;height:5px;background:var(--accent);box-shadow:none}
h1,h2,p{margin:0}
h1{font-size:clamp(39px,4.35vw,69px);font-weight:780;line-height:1.1;letter-spacing:-.068em;margin:11px 0 9px}
h1 em{color:var(--accent);font-style:normal}
.hero-copy>p{font-size:14px;color:var(--muted);line-height:1.55;max-width:360px}
.link-form{display:flex;align-items:center;gap:9px;margin-top:19px;padding:5px 5px 5px 11px;width:min(425px,100%);border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line));background:var(--input)}
.link-form>svg{width:17px;height:17px;color:var(--subtle)}.link-form input{border:0;outline:0;background:none;color:var(--text);flex:1;min-width:0;font-size:13px}.link-form input::placeholder{color:var(--subtle)}.link-form:focus-within{border-color:var(--accent)}.link-form .button{min-height:33px}
.hero-copy .link-error{margin-top:6px;color:var(--text);font-size:12px}
.hero-index{position:absolute;bottom:14px;right:18px;color:var(--accent);font:700 8px/1.3 ui-monospace,monospace;letter-spacing:1.8px;display:flex;align-items:center;gap:7px}
.hero-index span{opacity:.68;margin-left:3px}
.section,.youtube-panel{margin-top:26px}
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:13px}
.kicker{font-size:9px;line-height:1;letter-spacing:1.75px;font-weight:800;color:var(--accent)}
h2{font-size:25px;line-height:1.2;letter-spacing:-.7px;margin-top:2px;font-weight:740}
.section-heading p{font-size:12px;margin-top:4px;color:var(--muted)}
.text-btn{background:none;border:0;color:var(--accent);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:6px 0;font-size:12px}
.text-btn:hover{text-decoration:underline;text-underline-offset:4px}.text-btn svg{width:15px;height:15px}
.track-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.track-card{min-width:0;padding:8px 8px 9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:border-color .18s,transform .18s}
.track-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.track-art{position:relative;display:block;width:100%;aspect-ratio:2.05;border:0;border-radius:7px;overflow:hidden;background:var(--active);padding:0;text-align:left;color:#fff}
.track-art img{width:100%;height:100%;object-fit:cover;display:block}
.track-art::after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,#05051066,transparent 52%);pointer-events:none}
.track-art .source-badge{position:absolute;top:7px;left:7px;background:#100c1ad9;border:1px solid #ffffff22;border-radius:5px;font-size:9px;font-weight:700;padding:2px 5px;z-index:1;display:flex;align-items:center;gap:3px}
.source-badge svg{width:12px;height:12px;color:#ffa1a9}
.art-play{position:absolute;right:7px;bottom:7px;width:30px;height:30px;border:1px solid #fff5;border-radius:50%;background:#160f25cc;display:grid;place-items:center;z-index:1}
.art-play svg{width:14px;height:14px}.track-art:hover .art-play{background:var(--solid);color:var(--on-accent)}
.track-info{display:flex;align-items:center;gap:4px;justify-content:space-between;margin-top:7px;padding-left:3px}
.track-info>div,.row-copy,.now-playing>div{min-width:0}
.track-info strong,.track-info small,.row-copy strong,.row-copy small,.now-playing strong,.now-playing small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-info strong{font-size:12px}.track-info small{font-size:10px;color:var(--subtle);margin-top:2px}
.icon-btn{border:0;background:none;display:inline-grid;place-items:center;color:var(--muted);width:31px;height:31px;padding:0;border-radius:7px;flex:none}
.icon-btn:hover:not(:disabled),.icon-btn[aria-pressed=true]{color:var(--accent);background:var(--active)}
.icon-btn[aria-pressed=true] svg:has(use[href="#i-heart"]){fill:currentColor}.icon-btn svg{width:17px;height:17px}.outlined{border:1px solid var(--line);background:var(--raised)}
.section-actions{display:flex;align-items:center;gap:7px}
.library-section{margin-top:25px}
.count-pill{font-size:10px;letter-spacing:0;color:var(--accent);background:var(--active);border-radius:6px;padding:3px 6px;vertical-align:middle;margin-left:3px}
.empty{min-height:68px;border:1px dashed var(--line);border-radius:12px;background:var(--panel);padding:11px 14px;display:flex;align-items:center;gap:11px}
.empty-icon{height:35px;width:35px}.empty strong{font-size:12px}.empty p{font-size:11px;margin-top:2px;color:var(--subtle)}.empty .text-btn{margin-left:auto}
.library-section.dragging .empty,.library-section.dragging .library-list{outline:2px dashed var(--accent);outline-offset:3px}
.library-list{display:grid;gap:6px}
.library-row{display:flex;align-items:center;gap:10px;padding:7px 9px;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0}
.library-row.is-current{border-color:var(--accent)}
.row-copy{flex:1}.row-copy strong{font-size:13px}.row-copy small{font-size:11px;color:var(--subtle);margin-top:1px}
.row-play{background:var(--active);color:var(--accent)}
.youtube-panel{padding:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.youtube-panel .section-heading{align-items:center}
.video-holder{aspect-ratio:16/9;background:#000;border-radius:9px;overflow:hidden;min-height:200px;max-width:850px;margin:0 auto}
.video-holder iframe{display:block;width:100%;height:100%;border:0;min-height:200px}
.video-foot{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:10px;color:var(--muted);font-size:12px}.video-foot>div{display:flex;gap:6px;flex-wrap:wrap}
.player{position:fixed;inset:auto 0 0;z-index:8;min-height:var(--player-height);padding:9px 19px max(9px,env(safe-area-inset-bottom));background:var(--side);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(160px,1fr) minmax(240px,1.25fr) minmax(160px,1fr);align-items:center;gap:14px}
.now-playing{display:flex;align-items:center;gap:9px;min-width:0}.now-cover{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:8px;background:linear-gradient(145deg,var(--active),var(--raised));border:1px solid var(--line);color:var(--accent)}
.now-playing strong{font-size:12px}.now-playing small{font-size:10px;color:var(--subtle);margin-top:3px}.now-like{margin-left:2px}
.player-controls,.timeline,.player-right{display:flex;justify-content:center;align-items:center;gap:9px}
.player-controls{gap:12px;margin-bottom:4px}.round-play{width:34px;height:34px;display:grid;place-items:center;background:var(--solid);border:0;border-radius:50%;color:var(--on-accent);padding:0}
.round-play:hover{filter:brightness(1.12)}.round-play svg{width:18px;height:18px}
.timeline{font-size:10px;color:var(--subtle)}.timeline span{min-width:27px;text-align:center}
input[type=range]{accent-color:var(--accent);cursor:pointer;height:13px;margin:0;min-width:0}.timeline input{flex:1;width:100%}.player-right{justify-content:flex-end;gap:6px}.player-right input{width:min(75px,6vw)}
.offline-chip{font-size:8px;font-weight:800;letter-spacing:.85px;color:var(--green);white-space:nowrap;margin-right:6px;display:flex;align-items:center;gap:3px}.offline-chip svg{width:13px;height:13px}
dialog{width:min(510px,calc(100% - 28px));max-height:calc(100% - 28px);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--text);padding:20px;box-shadow:var(--shadow)}
dialog::backdrop{background:#08060eb5}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-head h2{margin:0}.help-lines{display:grid;gap:10px}dialog p{color:var(--muted);font-size:13px}dialog p strong{display:block;color:var(--text);margin-bottom:2px}.dialog-note{margin-top:9px;color:var(--subtle)}#convert-form{margin-top:12px;display:grid;justify-items:start;gap:8px}#convert-file{max-width:100%}#convert-form label{font-size:12px;font-weight:700}#convert-status{margin-top:8px}
.toast{position:fixed;z-index:15;right:16px;bottom:calc(var(--player-height) + 13px);background:var(--raised);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:9px;padding:10px 13px;max-width:calc(100% - 32px);font-size:13px}
@media(max-width:1150px){:root{--side-width:199px}.track-grid{gap:10px}.hero-copy{padding-left:25px}.brand{margin-bottom:35px}}
@media(max-width:830px){:root{--side-width:185px}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.offline-chip{display:none}.hero-art{opacity:.8}.hero::before{background:linear-gradient(90deg,var(--hero) 4%,color-mix(in srgb,var(--hero) 92%,transparent) 33%,transparent 90%)}.player{grid-template-columns:minmax(120px,1fr) minmax(175px,1.4fr) minmax(60px,.6fr)}}
@media(max-width:640px){:root{--player-height:75px}.sidebar{display:none}.workspace{margin-left:0}.topbar{height:55px;padding:0 13px}.breadcrumb{gap:6px}.crumb-root,.crumb-arrow{display:none}.top-actions{gap:8px}.theme-btn{padding:0 7px}.theme-btn .caret{display:none}main{padding:14px 13px 0}.hero{min-height:230px}.hero-copy{padding:20px 15px 24px}.hero-art{background-size:auto 100%;background-position:calc(100% + 95px) center;opacity:.53}.hero-index{display:none}h1{font-size:clamp(35px,9vw,51px)}.hero-copy>p{font-size:13px;max-width:315px}.section,.youtube-panel{margin-top:20px}.section-heading{align-items:flex-start}h2{font-size:21px}.section-heading p{font-size:11px}.section-heading .text-btn{font-size:10px;margin-top:13px}.library-section .section-heading{flex-wrap:wrap}.section-actions .button{min-height:32px}.empty{flex-wrap:wrap;gap:8px}.empty .text-btn{margin-left:43px;padding:0}.player{grid-template-columns:minmax(75px,1fr) minmax(125px,1fr);padding-inline:9px;gap:7px}.player-right,.extra-control,.now-like{display:none!important}.now-cover{width:35px;height:35px}.player-controls{gap:7px}.video-foot{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

.offline-status{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0;margin-top:2px;border:0;background:none;color:var(--muted);font-size:11px;text-align:left}
.offline-status:hover{text-decoration:underline;text-underline-offset:3px}
.offline-status i{width:6px;height:6px;background:var(--subtle);border-radius:50%;flex:none}
.offline-status.ready{color:var(--green)}
.offline-status.ready i{background:var(--green)}
@media(max-width:640px){
  :root{--player-height:73px;--nav-height:55px;--bottom-safe:env(safe-area-inset-bottom,0px)}
  .workspace{padding-bottom:calc(var(--player-height) + var(--nav-height) + var(--bottom-safe) + 16px)}
  .topbar{height:calc(59px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
  .breadcrumb{font-size:14px}.top-actions{gap:7px}.network{gap:4px;font-size:10px}
  .icon-btn.mobile-install{display:inline-grid;width:37px;height:39px;border:1px solid var(--line);background:var(--raised)}
  .mobile-install svg{width:19px;height:19px}
  .theme-btn{min-height:39px;padding:0 8px}
  .theme-menu button{min-height:46px}
  .link-form{margin-top:16px}
  .link-form input{font-size:16px}
  .link-form .button{min-height:40px;padding-inline:9px}
  .link-form .button svg{display:none}
  .section-actions .button,.video-foot .button{min-height:43px}
  .library-row{gap:5px;padding:6px}
  .library-row .icon-btn{width:40px;height:44px}
  .track-info .icon-btn{width:38px;height:40px}
  .offline-status{min-height:34px}
  .player{bottom:calc(var(--nav-height) + var(--bottom-safe));padding:4px 10px;gap:5px}
  .player-controls{gap:3px;margin-bottom:0}
  .player-controls .icon-btn,.round-play{width:42px;height:42px}
  .timeline{gap:4px}
  .mobile-nav{position:fixed;inset:auto 0 0;z-index:8;min-height:calc(var(--nav-height) + var(--bottom-safe));padding:0 5px var(--bottom-safe);background:var(--side);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .mobile-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:var(--muted);font-size:10px;font-weight:700;min-height:var(--nav-height)}
  .mobile-nav a[aria-current=page]{color:var(--accent);background:var(--active)}
  .mobile-nav svg{width:19px;height:19px}
  .toast{bottom:calc(var(--player-height) + var(--nav-height) + var(--bottom-safe) + 8px)}
}
@media(max-width:360px){
  .theme-btn span{display:none}
  .theme-btn{width:37px}
  .hero-copy{padding-inline:12px}
  .hero-copy .link-form>svg{display:none}
  .link-form{padding-left:7px;gap:4px}
  .link-form .button{padding-inline:7px}
  .track-info{padding-left:0}
}