@import url('fonts.css?v=bard-1');
@import url('home.css?v=bard-1');
:root { --ll-night:#12152a; --ll-ink:#1f2340; --ll-ink-2:#2b3156; --ll-ink-3:#3a4170; --ll-lantern:#e9a23b; --ll-lantern-soft:#f5c978; --ll-parchment:#f4ead6; --ll-parchment-c:#f4ead6; --ll-ember-text:#8f4e12; --ll-moss:#5e7a4f; --ll-madder:#b9473a; --ll-muted:#b9b3c9; --ll-line:rgba(244,234,214,.14); --ll-display:'Berkshire Swash',Georgia,serif; --ll-text:'Alegreya Sans','Trebuchet MS',sans-serif; --mw-bg:#12152a; --mw-panel:#1f2340; --mw-ink:#f4ead6; --mw-muted:#b9b3c9; --mw-gold:#e9a23b; --theme_color:233,162,59; --font-family:'Alegreya Sans'; }
body.mw-ui { background:var(--mw-bg)!important; color:var(--mw-ink); font-family:var(--ll-text)!important; overflow:hidden!important; height:100dvh; }
body.mw-ui #main { position:fixed!important; padding:0!important; min-height:0!important; max-height:calc(100dvh - 180px); }
body.mw-ui:not(.que_active) .queue { visibility:hidden; }
body.mw-ui.que_active .queue { visibility:visible; }
body.mw-ui .mw-top { width:100%; }
@media(max-width:760px){body.mw-ui #main{max-height:calc(100dvh - 210px);}}
.mw-ui *, .mw-ui *:before,.mw-ui *:after { box-sizing:border-box; }
.mw-ui a:focus-visible,.mw-ui button:focus-visible,.mw-ui input:focus-visible { outline:2px solid var(--mw-gold);outline-offset:4px; }
.mw-ui .sidebar,.mw-ui .sidebar_fl,.mw-ui .header>.logo_wrapper,.mw-ui .header>.counterAlign,.mw-ui .header .counterAlign { display:none!important; }
.mw-ui #main { left:214px!important; width:calc(100% - 214px)!important; top:78px!important; height:calc(100% - 180px)!important; bottom:102px!important; background:var(--mw-bg)!important; margin:0!important; }
.mw-ui #main .main_content { padding:28px 36px 45px!important; min-height:100%; }
.mw-ui.mw-is-home #main .main_content { padding-top:0!important; }
.mw-ui .header { position:fixed!important;top:0!important;left:214px!important;right:0!important;width:calc(100% - 214px)!important;height:78px!important;padding:0 36px!important;background:var(--mw-bg)!important;border-bottom:1px solid #2b3156;z-index:100!important;transform:none!important; }
.mw-ui .header .align { position:absolute;right:28px;top:17px;z-index:2;width:auto!important;pointer-events:none; }
.mw-ui .header .align a,.mw-ui .header .align button,.mw-ui .header .align .bof_dropdown {pointer-events:auto;}
.mw-ui .header .download_menu_wrapper,.mw-ui .header .chapar_menu_wrapper,.mw-ui .header .guest_dropdownHandler { display:none!important; }
/* Login pill only for visitors: vendor hides .notLoggedIn via body.logged, which this rule used to override. */
body.mw-ui.notLogged .header .notLoggedInLogin {display:block;}
body.mw-ui.logged .header .notLoggedIn {display:none!important;}
.mw-ui .header .btn {border-radius:5px!important;background:#2b3156!important;color:var(--mw-gold)!important;border:1px solid #3a4170!important;min-height:44px;display:inline-flex;align-items:center;}
.mw-ui .header .btn-user ._u {max-width:120px;overflow:hidden;text-overflow:ellipsis;}
.mw-top {height:78px;display:flex;align-items:center;gap:22px;padding-right:140px;}
.mw-breadcrumb {color:var(--mw-ink);font-size:13px;white-space:nowrap;}
.mw-breadcrumb span {color:var(--mw-muted);font-size:11px;margin-left:12px;}
.mw-search {margin-left:auto;display:flex;align-items:center;width:330px;max-width:48%;height:40px;border:1px solid #3a4170;border-radius:6px;background:#171a33;}
.mw-search label {flex:1;min-width:0;margin:0;}
.mw-search input {width:100%;min-width:0;padding:10px 12px;background:transparent!important;border:0!important;color:var(--mw-ink)!important;font:12px var(--ll-text);outline-offset:0;}
.mw-search input::placeholder {color:var(--mw-muted);}
.mw-search button {width:44px;min-height:44px;background:none;border:0;color:var(--mw-muted);font-size:27px;cursor:pointer;}
.mw-mobile-brand,.mw-mobile-collection {display:none;}
.mw-rail {position:fixed;left:0;top:0;bottom:102px;width:214px;background:#0e1022;border-right:1px solid #2b3156;padding:30px 22px;z-index:101;display:flex;flex-direction:column;overflow:auto;}
.mw-brand {display:flex;gap:8px;align-items:center;color:var(--mw-ink);font:31px var(--ll-display);white-space:nowrap;}
.mw-brand img {width:35px;height:49px;object-fit:contain;}
.mw-brand small {display:block;font:6.5px var(--ll-text);letter-spacing:1.35px;color:var(--mw-muted);margin-top:2px;}
.mw-rail-label {font:9px var(--ll-text);letter-spacing:1.8px;color:var(--mw-muted);margin:49px 0 15px 9px;}
.mw-rail nav {display:grid;gap:3px;}
.mw-rail nav a,.mw-rail nav button {display:flex;align-items:center;gap:12px;min-height:46px;color:var(--mw-ink);padding:0 12px;font:13px var(--ll-text);text-align:left;border:0;background:transparent;cursor:pointer;text-decoration:none;}
.mw-is-home .mw-explore {background:#2b3156;color:var(--mw-gold);border-radius:5px;}
.mw-divider {height:1px;min-height:1px;background:#3a4170;margin:27px 9px 0;}
.mw-divider+.mw-rail-label {margin-top:27px;}
.mw-rail .mw-moods a {font-size:12px;color:var(--mw-muted);}
.mw-moods a:before {content:'·';color:var(--mw-gold);}
.mw-rail-bottom {margin-top:auto;padding:35px 9px 0;color:var(--mw-gold);font-size:22px;}
.mw-rail-bottom p {font:11px/1.8 var(--ll-text);color:var(--mw-ink);margin-top:12px;}
.mw-rail-bottom span {color:var(--mw-muted);}
.mw-empty {margin:35px 0 0;border-top:1px solid #3a4170;padding-top:30px;max-width:760px;}
.mw-empty h2 {font:38px/1.1 var(--serif);margin:10px 0 12px;}
.mw-empty p:not(.eyebrow) {color:var(--mw-muted);font-size:13px;line-height:1.8;max-width:590px;}
.mw-empty a {display:inline-flex;align-items:center;gap:15px;min-height:44px;margin-top:14px;color:var(--mw-gold);font-size:13px;}
.mw-empty small {display:block;font-size:10px;color:var(--mw-muted);margin-top:5px;line-height:1.6;}
.mw-loading {visibility:hidden;}
.mw-idle {position:fixed;inset:auto 0 0;height:102px;background:#171a33;border-top:1px solid #3a4170;z-index:105;display:flex;align-items:center;gap:17px;padding:15px 28px;color:var(--mw-ink);}
.mw-idle>img {height:62px;width:62px;object-fit:cover;border-radius:4px;}
.mw-idle>div {display:grid;gap:5px;}
.mw-idle small {font:8px var(--ll-text);letter-spacing:1.4px;color:var(--mw-gold);}
.mw-idle strong {font-size:13px;font-weight:500;}
.mw-idle span {font-size:11px;color:var(--mw-muted);}
.mw-idle-search {margin-left:auto;font-size:12px;color:var(--mw-gold);min-height:44px;display:flex;align-items:center;}
.mw-idle button {background:none;color:var(--mw-gold);border:0;min-width:44px;min-height:44px;font-size:25px;cursor:pointer;}
.mw-ui.muse_player_active .mw-idle {display:none;}
/* Native authentication pages must not retain the fixed idle-player overlay. */
.mw-ui.auth_page .mw-idle {display:none;}
/* Native decorative auth scrim must never intercept form pointer events. */
.mw-ui.auth_page::after {pointer-events:none;}
.mw-ui #players,.mw-ui .queue {background:#1f2340!important;color:var(--mw-ink);}
.mw-ui .queue {z-index:110!important;}
.mw-ui .btn-primary {background:#e9a23b!important;color:#12152a!important;border-color:#e9a23b!important;}
.mw-ui .page_bg {opacity:.14;}
.mw-ui .input_wrapper input,.mw-ui .input_wrapper textarea {color:var(--mw-ink);}
.mw-ui .bof_dropdown {background:#1f2340!important;color:var(--mw-ink);}
.mw-catalogue-filters {border:1px solid #3a4170;border-radius:7px;margin-bottom:26px;background:#1f2340;}
.mw-catalogue-filters summary {min-height:48px;padding:14px 18px;cursor:pointer;color:#e9a23b;}
body.mw-ui.page_object_browse #main .bb_filters {position:static!important;width:100%!important;left:auto!important;top:auto!important;bottom:auto!important;background:transparent!important;border:0;padding-bottom:22px;}
body.mw-ui.page_object_browse #main .bb_filters .bb_title {display:none;}
body.mw-ui.page_object_browse #main .bb_filters .bb_items {max-height:none!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
body.mw-ui.page_object_browse #main .bb_content {width:100%!important;margin:0!important;}
.mw-sample-notice {font-size:12px;line-height:1.7;color:var(--mw-muted);margin:0 0 25px;}
.mw-empty-queue {width:480px;max-width:calc(100vw - 32px);padding:35px;background:#1f2340;color:#f4ead6;border:1px solid #3a4170;border-radius:8px;}
.mw-empty-queue::backdrop {background:#0a0c1ae0;}
.mw-empty-queue h2 {font:38px var(--ll-display);margin:0 0 20px;}
.mw-empty-queue p {font:13px/1.8 var(--ll-text);color:#b9b3c9;}
.mw-empty-queue a {display:inline-flex;align-items:center;color:#e9a23b;min-height:44px;margin-top:15px;}
.mw-empty-queue button {float:right;min-width:44px;min-height:44px;border:0;background:none;color:#f4ead6;font-size:26px;cursor:pointer;}
.mw-room {padding:0;border:1px solid #3a4170;background:#12152a;max-width:94vw;max-height:90vh;color:#f4ead6;}
.mw-room::backdrop {background:#0a0c1ae0;}
.mw-room img {display:block;max-width:90vw;max-height:85vh;object-fit:contain;}
.mw-room button {position:absolute;right:12px;top:12px;width:44px;height:44px;background:#12152adb;color:#f4ead6;border:1px solid #b9b3c9;border-radius:50%;font-size:25px;cursor:pointer;}
.mw-visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:1150px) and (min-width:761px){.mw-breadcrumb span{display:none}.mw-top{gap:10px}.mw-search{max-width:65%;}.mw-ui .header{padding:0 24px}.mw-ui #main .main_content{padding-left:24px!important;padding-right:24px!important}}
@media(max-width:760px){
 .mw-rail{display:none}.mw-ui #main{left:0!important;width:100%!important;top:122px!important;height:calc(100% - 210px)!important;bottom:88px!important;}.mw-ui #main .main_content{padding:8px 20px 30px!important;}.mw-ui.mw-is-home #main .main_content{padding-top:8px!important;}
 .mw-ui .header{left:0!important;width:100%!important;height:122px!important;padding:12px 20px!important;}.mw-ui .header .align{right:20px;top:13px;}.mw-ui .header .btn{font-size:11px;min-height:40px;padding:0 12px;}.mw-ui .header .btn-user ._u{display:none;}.mw-ui .header .btn-user img{max-width:30px;}
 .mw-top{height:auto;min-height:98px;padding:0;gap:12px;flex-wrap:wrap;}.mw-breadcrumb{display:none}.mw-mobile-brand{display:flex;align-items:center;gap:7px;font:600 29px var(--ll-display);color:var(--mw-ink);height:40px;}.mw-mobile-brand img{width:28px;height:36px;}.mw-mobile-collection{display:flex;align-items:center;justify-content:center;margin-left:auto;margin-right:78px;width:36px;height:40px;color:var(--mw-gold);font-size:23px;}.mw-search{order:3;width:100%;max-width:none;margin:0;height:38px;}.mw-search input{font-size:12px;}
 .mw-home .filters a{font-size:10px;padding:0 12px}.mw-home .world h3{font-size:23px}.mw-home .world:first-child h3{font-size:29px}.mw-home .world p{font-size:10px;}.mw-empty h2{font-size:32px;}.mw-empty p:not(.eyebrow){font-size:12px;}.mw-idle{height:88px;padding:12px 16px;gap:12px;}.mw-idle>img{width:48px;height:48px;}.mw-idle>div{min-width:0;flex:1;}.mw-idle strong{font-size:12px;}.mw-idle span{font-size:9px;}.mw-idle small{font-size:7px;}.mw-idle-search{display:none}.mw-ui #players{bottom:0!important;}.mw-ui .mw-home .refuge{margin-top:0;}
 .mw-ui .main_content .container{max-width:100%;}.mw-ui .main_content input{max-width:100%;}
}
@media(max-width:350px){.mw-ui .header{padding-left:15px!important;padding-right:15px!important;}.mw-ui #main .main_content{padding-left:15px!important;padding-right:15px!important;}.mw-mobile-brand{font-size:26px}.mw-mobile-collection{margin-right:69px;width:26px}.mw-ui .header .align{right:15px;}.mw-home .world h3{font-size:21px;}}
@media(prefers-reduced-motion:reduce){.mw-ui *{scroll-behavior:auto!important;}}

/* ===== LuteLoot bard layer (presentation only; vendor markup, routes and handlers unchanged) ===== */
html:root{--theme_color:233,162,59;--font-family:'Alegreya Sans'}
body.mw-ui{font-size:16px}
.mw-ui button,.mw-ui input,.mw-ui select,.mw-ui textarea,.mw-ui .btn{font-family:var(--ll-text)!important}
.mw-ui #main h1,.mw-ui #main h2,.mw-ui #main .d_head .title,.mw-ui #main .widget_head .title,.mw-ui #main .widget .widget_title,.mw-ui #main #plans_wrapper>.title,.mw-ui #uploader .wrapper>.title,.mw-ui .title_404,.mw-ui .auth_form h1{font-family:var(--ll-display)!important;font-weight:400!important;font-synthesis:none;letter-spacing:.005em}
.mw-ui #main .d_head .title{font-size:clamp(2rem,4vw,3.4rem);line-height:1.08}
.mw-ui #main .page_content .d_head .detail .is .i,.mw-ui #main .page_content .d_head .detail .is a.i{font-size:13px;color:var(--ll-muted)}
.mw-ui #main .page_content .d_head .cover_wrapper img{border-radius:14px}
.mw-ui #main .widget .widget_content .item .cover_wrapper,.mw-ui #main .widget .widget_content .item .cover_wrapper img{border-radius:12px}
.mw-ui #main .widget .widget_content .item .data .title{font-weight:700;color:var(--ll-parchment)}
.mw-ui #main a:not(.btn):not(.ll-btn):hover{color:var(--ll-lantern-soft)}
.mw-ui #main .btn,.mw-ui .header .btn{border-radius:999px!important}
.mw-ui #main .btn-primary,.mw-ui .btn-primary{background:var(--ll-lantern)!important;color:var(--ll-night)!important;border-color:var(--ll-lantern)!important;font-weight:700}
.mw-ui #main .btn-secondary,.mw-ui #main .btn-light,.mw-ui #main .btn-default{background:transparent!important;color:var(--ll-parchment)!important;border:1px solid var(--ll-line)!important}
.mw-ui #main input[type=text],.mw-ui #main input[type=email],.mw-ui #main input[type=password],.mw-ui #main input[type=search],.mw-ui #main input[type=number],.mw-ui #main textarea,.mw-ui #main select{background:var(--ll-ink)!important;color:var(--ll-parchment)!important;border:1px solid var(--ll-ink-3)!important;border-radius:10px}
.mw-ui #main input::placeholder,.mw-ui #main textarea::placeholder{color:var(--ll-muted)!important}
.mw-ui .bof_dropdown{border:1px solid var(--ll-ink-3);border-radius:12px}
/* Player: native controls restyled, never hidden */
.mw-ui #player{background:var(--ll-ink)!important;border-top:1px solid var(--ll-ink-3)!important;color:var(--ll-parchment)}
.mw-ui #player .controls_wrapper .control.play,.mw-ui #player .play{background:var(--ll-lantern)!important;color:var(--ll-night)!important;border-radius:50%}
.mw-ui #player .progress_bar .progress{background:var(--ll-lantern)!important}
.mw-ui #player .data_wrapper .source_data ._title{font-weight:700}
.mw-ui #player .data_wrapper .source_data ._sub_title{color:var(--ll-muted)}
/* Rail and header brand */
.mw-brand img.mw-lockup{width:168px;height:auto;max-width:100%}
.mw-rail .mw-brand{padding:0 4px}
.mw-rail-label{font:700 11px var(--ll-text)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--ll-lantern)!important}
.mw-rail nav a,.mw-rail nav button{font:500 15px var(--ll-text)!important}
.mw-rail nav a small,.mw-rail nav button small{display:block;font-size:11px;color:var(--ll-muted);font-weight:400;margin-top:1px}
.mw-rail nav a span,.mw-rail nav button span{line-height:1.15}
.mw-rail .mw-moods a{font-size:14px!important}
.mw-rail-bottom{color:var(--ll-parchment)!important;font-size:inherit!important}
.mw-rail-bottom img{width:56px;height:auto}
.mw-rail-bottom p{font:13px/1.6 var(--ll-text)!important}
.mw-mobile-brand img.mw-lockup{width:126px;height:auto}
.mw-breadcrumb{font-size:15px}.mw-breadcrumb span{font-size:13px}
.mw-search input{font-size:15px!important}
.mw-idle small{font:700 10px var(--ll-text)!important;letter-spacing:.14em}
.mw-idle strong{font-size:15px}.mw-idle span{font-size:13px}
.mw-idle>img{object-fit:cover}
.mw-idle-search{font-size:14px}
.mw-empty-queue{border-radius:22px;text-align:center}
.mw-empty-queue h2{font-family:var(--ll-display)!important;font-weight:400}
.mw-empty-queue img{width:180px;height:auto;margin:0 auto 6px;display:block}
.mw-empty-queue p{font-size:15px!important}
.mw-room{border-radius:16px;overflow:hidden}
.mw-catalogue-filters summary{font-weight:700}
.mw-sample-notice{font-size:14px}
/* Illustrated empty and error states */
.ll-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 16px;color:var(--ll-muted);max-width:520px;margin:0 auto}
.ll-empty img{width:min(260px,70%);height:auto}
.ll-empty strong{font:400 1.6rem/1.15 var(--ll-display);color:var(--ll-parchment)}
.ll-empty a{color:var(--ll-lantern-soft);min-height:44px;display:inline-flex;align-items:center;font-weight:700}
.mw-ui .wrapper_404{text-align:center}
.mw-ui .wrapper_404 .icon_404{display:none}
.mw-ui .wrapper_404 .ll-404-art{width:min(320px,70vw);height:auto;margin:0 auto 10px;display:block}
/* Auth: illustration panel replaces the flat theme-colour block; scrim stays pointer-transparent */
.mw-ui.auth_page{background:var(--ll-night)!important}
.mw-ui.auth_page::after{background:var(--ll-night) url('art/bard-tamsin-800.webp') no-repeat 50% 55%/auto 78%!important;opacity:1!important;left:50%!important;border-left:1px solid var(--ll-ink-3)}
.mw-ui.auth_page .auth_form_wrapper .logo_wrapper .mw-brand img{width:180px!important;height:auto!important;max-width:100%}
.mw-ui.auth_page .auth_form .btn-primary,.mw-ui.auth_page .auth_form .btn{border-radius:999px!important}
@media(max-width:760px){.mw-ui.auth_page::after{display:none}}
/* Upload header art */
.mw-ui.page_upload #uploader .wrapper>.title{position:relative}
.ll-upload-banner{display:flex;align-items:center;gap:18px;background:var(--ll-ink);border:1px solid var(--ll-line);border-radius:18px;padding:14px;margin:0 0 20px}
.ll-upload-banner img{width:160px;height:auto;border-radius:12px;flex-shrink:0}
.ll-upload-banner b{font:400 1.5rem/1.1 var(--ll-display);display:block;color:var(--ll-parchment)}
.ll-upload-banner span{color:var(--ll-muted);font-size:14px}
@media(max-width:520px){.ll-upload-banner{flex-direction:column;align-items:flex-start}.ll-upload-banner img{width:100%}}
.ll-noplans{margin-top:8vh}
.ll-noplans img{width:min(200px,50%)}
.mw-ui #main .d_head .title{overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:760px){.mw-ui #main .d_head .title{font-size:clamp(1.5rem,6.4vw,2.4rem)!important}}
.mw-ui.auth_page .auth_form_wrapper .logo_wrapper,.mw-ui.auth_page .auth_form_wrapper .logo_wrapper img{opacity:1!important;filter:none!important}

/* ===== Player, queue, header and catalogue polish (presentation only; vendor controls stay native) ===== */
/*
   Vendor markup, handlers and routes are unchanged; every native control stays visible and clickable.
   Display headings: Berkshire Swash. UI: Alegreya Sans. Lantern gold on navy ink. */
:root{--ll-bar-h:88px;--ll-head-h:78px;--ll-track:rgba(244,234,214,.14);--ll-buffer:rgba(244,234,214,.32)}

/* Vendor .clearafter adds a block ::after; inside the flex/grid containers below it would take a track. */
body.mw-ui #player.clearafter::after,body.mw-ui #player .controls_wrapper::after,body.mw-ui #player .buttons_wrapper::after,body.mw-ui .header.clearafter::after,body.mw-ui .header .align::after,body.mw-ui .queue .data_wrapper .tabs::after,body.mw-ui .queue .data_wrapper .tabs::before,body.mw-ui .queue .list ._items .item::after,body.mw-ui #main .d_head .detail .is::after,body.mw-ui #main .d_head .detail::after{content:none!important;display:none!important}

/* ---------- Shell offsets: content and rail end exactly at the player bar ---------- */
body.mw-ui #main{bottom:var(--ll-bar-h)!important;height:calc(100% - var(--ll-head-h) - var(--ll-bar-h))!important;max-height:none!important}
body.mw-ui .mw-rail{bottom:var(--ll-bar-h)!important}
body.mw-ui .mw-idle{height:var(--ll-bar-h)!important}
@media(max-height:760px){body.mw-ui .mw-rail-bottom{display:none!important}}

/* ---------- Header: one flex row, pills never overlap search, equal pill heights ---------- */
@media(min-width:761px){
  body.mw-ui .header{display:flex!important;align-items:center;gap:16px}
  body.mw-ui .header .mw-top{order:1;flex:1 1 auto;min-width:0;padding-right:0!important}
  body.mw-ui .header .align{order:2;position:static!important;flex:0 0 auto;display:flex!important;align-items:center;gap:10px;height:100%;top:auto!important;right:auto!important}
  body.mw-ui .mw-search{width:auto;flex:0 1 360px;min-width:180px;max-width:none;height:44px}
}
body.mw-ui .header .align>.i{align-items:center;gap:10px;float:none!important;margin:0!important;padding:0!important;height:auto!important}
body.mw-ui:not(.logged) .header .align>.i.notLoggedInLogin,body.mw-ui.logged .header .align>.i.loggedIn{display:flex}
body.mw-ui.logged .header .align>.i.notLoggedIn{display:none!important}
body.mw-ui .header .align .btn{height:44px!important;min-height:44px!important;margin:0!important;padding:0 16px!important;line-height:1!important;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--ll-text)!important;white-space:nowrap;box-sizing:border-box}
body.mw-ui .header .align .btn .mdi{font-size:18px;line-height:1;margin:0}
body.mw-ui .header .align .btn-user{padding:0 14px 0 4px!important;background:var(--ll-ink-2)!important;color:var(--ll-parchment)!important;border:1px solid var(--ll-ink-3)!important}
body.mw-ui .header .align .btn-user picture,body.mw-ui .header .align .btn-user img{width:32px!important;height:32px!important;border-radius:50%;object-fit:cover;margin:0!important;max-width:none!important}

/* ---------- Mini player bar ---------- */
body.mw-ui #player{--player_height:var(--ll-bar-h);height:var(--ll-bar-h)!important;display:grid!important;grid-template-columns:minmax(180px,340px) auto minmax(120px,1fr) auto;grid-template-rows:100%;align-items:center;column-gap:clamp(12px,2vw,28px);padding:0 clamp(12px,2vw,24px);background:linear-gradient(180deg,#232848,#1b1f3b)!important;border-top:1px solid var(--ll-ink-3)!important;box-shadow:0 -12px 32px rgba(6,8,20,.45)}
body.mw-ui #player>div{float:none!important;height:auto!important;margin:0!important;width:auto!important;border:0!important;min-width:0}
body.mw-ui #player .mdi{line-height:1!important}
body.mw-ui #player .data_wrapper{padding:0!important;background:none!important;grid-column:1;grid-row:1}
body.mw-ui #player .controls_wrapper{grid-column:2;grid-row:1}
body.mw-ui #player .progress_bar{grid-column:3;grid-row:1}
body.mw-ui #player .buttons_wrapper{grid-column:4;grid-row:1}
body.mw-ui #player .data_wrapper .source_data{display:grid!important;grid-template-columns:56px minmax(0,1fr) 40px;align-items:center;column-gap:12px;padding:0!important;height:auto!important;margin:0!important;overflow:visible!important;width:100%}
body.mw-ui #player .data_wrapper .source_data .cover_holder{position:relative!important;left:auto!important;width:56px!important;height:56px!important;border-radius:10px;overflow:hidden;background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.35)}
body.mw-ui #player .data_wrapper .source_data .cover_holder>div{width:100%!important;height:100%!important;background-size:cover!important;background-position:center!important}
body.mw-ui #player .data_wrapper .source_data .data{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:center!important;gap:2px;height:auto!important;min-width:0;overflow:hidden}
body.mw-ui #player .data_wrapper .source_data ._title,body.mw-ui #player .data_wrapper .source_data ._sub_title{display:block!important;position:static!important;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3!important;opacity:1!important}
body.mw-ui #player .data_wrapper .source_data ._title{font:700 15px var(--ll-text)!important;color:var(--ll-parchment)!important}
body.mw-ui #player .data_wrapper .source_data ._sub_title{font:500 13px var(--ll-text)!important;color:var(--ll-muted)!important}
body.mw-ui #player .data_wrapper .source_data .button_wrapper.more{position:static!important;width:40px;height:40px;display:grid!important;place-items:center;margin:0!important;border-radius:50%;color:var(--ll-muted)}
body.mw-ui #player .data_wrapper .source_data .button_wrapper.more .mdi{background:none!important;color:inherit!important;font-size:22px!important}
body.mw-ui #player .data_wrapper .source_data .button_wrapper.more:hover{background:rgba(244,234,214,.08);color:var(--ll-parchment)}
body.mw-ui #player .controls_wrapper{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:10px}
body.mw-ui #player .controls_wrapper .control{width:40px;height:40px;flex:0 0 40px;display:grid!important;place-items:center;border-radius:50%;opacity:1!important;color:var(--ll-parchment);background:transparent!important}
body.mw-ui #player .controls_wrapper .control .mdi{font-size:24px!important}
body.mw-ui #player .controls_wrapper .control:hover{background:rgba(244,234,214,.08)!important}
body.mw-ui #player .controls_wrapper .control.play{width:48px!important;height:48px!important;flex:0 0 48px;padding:0!important;background:var(--ll-lantern)!important;color:var(--ll-night)!important;border-radius:50%!important;box-shadow:0 6px 18px rgba(233,162,59,.35)}
body.mw-ui #player .controls_wrapper .control.play .mdi{font-size:28px!important;color:var(--ll-night)!important}
body.mw-ui #player .controls_wrapper .control.play:hover{background:var(--ll-lantern-soft)!important}
/* Progress: track, buffered and played are three distinct layers; scrubber on hover/focus */
body.mw-ui #player .progress_bar{position:relative!important;height:40px!important;display:flex!important;align-items:center;cursor:pointer}
body.mw-ui #player .progress_bar .progress{position:relative!important;inset:auto!important;margin:0 52px!important;width:auto;flex:1;height:4px!important;border-radius:999px;background:var(--ll-track)!important;transition:height .15s ease}
body.mw-ui #player .progress_bar .progress>div:not(.time){border-radius:999px}
body.mw-ui #player .progress_bar .progress .progress_b{background:var(--ll-buffer)!important}
body.mw-ui #player .progress_bar .progress .progress_e{background:var(--ll-lantern)!important;z-index:1}
body.mw-ui #player .progress_bar .progress .progress_e:after{width:14px!important;height:14px!important;right:-7px!important;background:var(--ll-parchment)!important;border:3px solid var(--ll-lantern);opacity:0}
body.mw-ui #player .progress_bar:hover .progress,body.mw-ui #player .progress_bar:focus-within .progress{height:6px!important}
body.mw-ui #player .progress_bar:hover .progress .progress_e:after,body.mw-ui #player .progress_bar:focus-within .progress .progress_e:after{opacity:1}
body.mw-ui #player .progress_bar .progress .time{font:500 12px var(--ll-text)!important;font-variant-numeric:tabular-nums;color:var(--ll-muted)!important;opacity:1!important;left:-52px!important;width:44px!important;text-align:right;line-height:1}
body.mw-ui #player .progress_bar .progress .time.tot{left:auto!important;right:-52px!important;text-align:left}
body.mw-ui #player .progress_bar .progress input{top:-18px!important;height:40px!important}
body.mw-ui #player .buttons_wrapper{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:4px}
body.mw-ui #player .buttons_wrapper .button{width:40px;height:40px;display:grid!important;place-items:center;border-radius:50%}
body.mw-ui #player .buttons_wrapper .button:hover{background:rgba(244,234,214,.08)}
body.mw-ui #player .buttons_wrapper .button .mdi{font-size:21px!important;opacity:.85}
body.mw-ui.que_active #player .buttons_wrapper .que_toggle .mdi{color:var(--ll-lantern)!important}

/* ---------- Expanded player (the stage) ---------- */
body.mw-ui .queue{bottom:var(--ll-bar-h)!important;overflow:hidden;background:radial-gradient(120% 90% at 18% 20%,rgba(233,162,59,.16),transparent 55%),linear-gradient(160deg,#1b1f3b 0%,#12152a 70%)!important}
body.mw-ui .queue::before{content:'';position:absolute;inset:-60px;background:var(--ll-cover,none) center/cover no-repeat;filter:blur(70px) saturate(1.25);opacity:.32;pointer-events:none}
body.mw-ui .queue>#preview,body.mw-ui .queue>.data_wrapper{position:relative;z-index:1}
/* HLS audio plays through a hidden video element: keep it playing, never let it cover the artwork or controls. */
body.mw-ui #players.hls_audio{background:transparent!important;pointer-events:none!important;box-shadow:none!important}
body.mw-ui #players.hls_audio .a_player,body.mw-ui #players.hls_audio video{opacity:0!important}
body.mw-ui #players.hls_audio .vjs-picture-in-picture-control{display:none!important}
body.mw-ui .queue #preview .preview_wrapper{width:max(220px,min(540px,calc(100dvh - var(--ll-bar-h) - 260px),calc(100% - 64px)))!important;max-width:none!important;min-height:0!important;max-height:none!important;left:0!important;right:0!important}
body.mw-ui .queue #preview .text_wrapper{margin:0 0 18px!important;padding-right:48px}
body.mw-ui .queue #preview .text_wrapper>a.title{font:400 clamp(1.7rem,2.6vw,2.6rem)/1.1 var(--ll-display)!important;color:var(--ll-parchment)!important;margin:0 0 6px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mw-ui .queue #preview .text_wrapper>a.sub_title{font:600 15px var(--ll-text)!important;color:var(--ll-lantern-soft)!important;opacity:1!important}
body.mw-ui .queue #preview .text_wrapper .more{font-size:26px!important;color:var(--ll-muted);width:44px;height:44px;display:grid;place-items:center}
body.mw-ui .queue #preview .graph_wrapper{border-radius:20px!important;background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat!important;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(244,234,214,.08)}
body.mw-ui .queue #preview .types{margin-top:16px!important}
body.mw-ui .queue #preview .types .type{border-radius:999px!important;font:700 11px var(--ll-text)!important;letter-spacing:.12em}
body.mw-ui .queue .data_wrapper{padding:28px 32px 0 12px!important}
body.mw-ui .queue .data_wrapper .tabs{display:flex!important;gap:6px;padding:4px;border-radius:999px;background:rgba(244,234,214,.06);border:1px solid var(--ll-line);margin-bottom:18px}
body.mw-ui .queue .data_wrapper .tabs .tab{flex:1 1 0!important;padding:0!important;height:40px!important;float:none!important;width:auto!important;min-height:40px;display:flex!important;flex-direction:row!important;flex-wrap:nowrap;white-space:nowrap;align-items:center;justify-content:center;border-radius:999px;border:0!important;font:700 13px var(--ll-text)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ll-muted)!important;opacity:1!important;cursor:pointer}
body.mw-ui .queue .data_wrapper .tabs .tab.has_not{opacity:.7!important}
body.mw-ui .queue .data_wrapper .tabs .tab._lyrics.has_not::after{content:'none yet';margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(244,234,214,.08);font:600 11px var(--ll-text);letter-spacing:.04em;text-transform:none;color:var(--ll-muted)}
body.mw-ui .queue .data_wrapper .tabs .tab.active{background:var(--ll-lantern)!important;color:var(--ll-night)!important}
body.mw-ui .queue .data_wrapper .list ._items .item{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;column-gap:14px;min-height:64px;height:auto!important;padding:8px 10px!important;border-radius:12px;border:0!important;opacity:1!important}
body.mw-ui .queue .data_wrapper .list ._items .item>div{float:none!important;height:auto!important;position:static!important;margin:0!important;width:auto!important}
body.mw-ui .queue .data_wrapper .list ._items .item .cover_holder,body.mw-ui .queue .data_wrapper .list ._items .item .cover_holder .cover{width:48px!important;height:48px!important;border-radius:9px;position:relative!important;inset:auto!important}
body.mw-ui .queue .data_wrapper .list ._items .item .cover_holder{overflow:hidden;background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat}
body.mw-ui .queue .data_wrapper .list ._items .item .cover_holder .cover{background-size:cover!important;background-position:center!important}
body.mw-ui .queue .data_wrapper .list ._items .item .detail{display:flex!important;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:0!important}
body.mw-ui .queue .data_wrapper .list ._items .item .detail .title,body.mw-ui .queue .data_wrapper .list ._items .item .detail .sub_title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.35!important;height:auto!important;max-height:none!important;opacity:1!important}
body.mw-ui .queue .data_wrapper .list ._items .item .detail .title{font:700 15px var(--ll-text)!important;color:var(--ll-parchment)!important}
body.mw-ui .queue .data_wrapper .list ._items .item .detail .sub_title{font:500 13px var(--ll-text)!important;color:var(--ll-muted)!important}
body.mw-ui .queue .data_wrapper .list ._items .item .duration{position:static!important;font:500 12px var(--ll-text)!important;font-variant-numeric:tabular-nums;color:var(--ll-muted)!important;opacity:1!important}
body.mw-ui .queue .data_wrapper .list ._items .item:hover{background:rgba(244,234,214,.06)}
body.mw-ui .queue .data_wrapper .list ._items .item.active_que{background:rgba(233,162,59,.14)!important;box-shadow:inset 3px 0 0 var(--ll-lantern)}
body.mw-ui .queue .data_wrapper .list ._items.next_items .item{opacity:.78!important}
body.mw-ui .queue .data_wrapper .list ._items.next_items .item:hover{opacity:1!important}
body.mw-ui .queue .data_wrapper .list .infinite{border:1px solid var(--ll-line)!important;border-radius:14px;padding:12px 14px!important;margin:12px 0!important;background:rgba(244,234,214,.04)}
body.mw-ui .queue .data_wrapper .list .infinite ._t{font:700 15px var(--ll-text)!important;color:var(--ll-parchment)!important}
body.mw-ui .queue .data_wrapper .list .infinite ._s{font:500 13px var(--ll-text)!important;color:var(--ll-muted)!important;opacity:1!important}
/* Lyrics: an explained empty state instead of a blank pane (native errors stay visible) */
body.mw-ui .queue.second_tab .data_wrapper .tBody .lyrics:empty{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:320px}
body.mw-ui .queue.second_tab .data_wrapper .tBody .lyrics:empty::before{content:'';width:200px;height:156px;background:url('art/empty-stage-400.webp') center/contain no-repeat}
body.mw-ui .queue.second_tab .data_wrapper .tBody .lyrics:empty::after{content:'No lyrics for this track yet. Most LuteLoot music is instrumental.';max-width:300px;font:500 15px/1.6 var(--ll-text);color:var(--ll-muted)}

/* ---------- Catalogue pages ---------- */
body.mw-ui #main .d_head .pre a[href]{text-transform:none!important}
body.mw-ui #main .d_head .pre a[href]{display:inline-block}
body.mw-ui #main .d_head .pre a[href]::first-letter{text-transform:uppercase}
body.mw-ui #main .page_bg.dropColor{display:none!important}
/* Hero (artist, album, playlist, track): cover and details side by side, no fixed-height banner gap,
   meta row in the flow (no offset band). Stacks on phones. */
body.mw-ui #main .page_content .d_head{height:auto!important;min-height:0!important;flex-direction:row!important;align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(12px,3vh,32px) 0 4px!important;margin-bottom:28px!important}
body.mw-ui #main .page_content .d_head .cover_wrapper{display:block!important;position:relative!important;left:auto!important;top:auto!important;flex:0 0 auto;width:clamp(150px,19vw,260px)!important;height:clamp(150px,19vw,260px)!important;margin:0!important;border:0!important;box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 0 1px rgba(244,234,214,.1)}
body.mw-ui #main .page_content .d_head .detail{flex:1 1 auto;min-width:0}
body.mw-ui #main .page_content .d_head .detail .above{display:flex!important;flex-direction:column;align-items:flex-start;padding-bottom:10px!important}
body.mw-ui #main .page_content .d_head .detail .above .title{margin-bottom:6px!important;max-width:100%}
body.mw-ui #main .page_content .d_head .detail .is{position:static!important;margin:0 0 18px!important;padding:0!important;background:none!important;border:0!important;z-index:auto!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 18px;font-size:14px!important;opacity:1!important}
body.mw-ui #main .page_content .d_head .detail .is .i{float:none!important;display:flex;align-items:center;gap:6px;opacity:.85!important;line-height:1.4!important}
body.mw-ui #main .page_content .d_head .detail .is .i>div{float:none!important}
body.mw-ui #main .page_content .d_head .detail .is .i::before,body.mw-ui #main .page_content .d_head .detail .is .i::after{display:none!important}
body.mw-ui #main .widget.type_ads:not(:has(iframe,img,ins,video)){display:none!important}
body.mw-ui #main .page_content .d_head .detail .buttons{height:auto!important;display:flex!important;flex-wrap:wrap;align-items:center!important;align-content:center!important;gap:12px;margin:0!important;position:static!important}
body.mw-ui #main .page_content .d_head .detail .buttons .button_wrapper{margin:0!important;float:none!important}
@media(max-width:600px){
  body.mw-ui #main .page_content .d_head{flex-direction:column!important;align-items:flex-start;gap:16px;padding-top:8px!important}
  body.mw-ui #main .page_content .d_head .cover_wrapper{width:clamp(120px,40vw,180px)!important;height:clamp(120px,40vw,180px)!important}
}
@media(max-width:600px){body.mw-ui #main .widget .table_wrapper table tr.item td:nth-child(3),body.mw-ui #main .widget .table_wrapper table thead td.secondary_title{display:none!important}}
body.mw-ui #main .page_bg.imageOnly{opacity:.28!important;mask-image:linear-gradient(180deg,#000 30%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}
body.mw-ui #main table td.cover .cover_wrapper{width:48px;height:48px;border-radius:9px;overflow:hidden;background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat}
body.mw-ui #main table td.cover .cover_wrapper img{width:100%;height:100%;object-fit:cover}
body.mw-ui #main .widget .widget_content .item .cover_wrapper{background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat}

/* ---------- Narrow screens: two-row player, every native control reachable ---------- */
@media(max-width:900px){
  :root{--ll-bar-h:132px}
  body.mw-ui #player{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:72px 52px;column-gap:8px;padding:4px 12px 6px}
  body.mw-ui #player .data_wrapper{grid-column:1 / 3;grid-row:1}
  body.mw-ui #player .controls_wrapper{grid-column:3;grid-row:1;gap:4px}
  body.mw-ui #player .progress_bar{grid-column:1;grid-row:2}
  body.mw-ui #player .buttons_wrapper{grid-column:2 / 4;grid-row:2;justify-content:flex-end;gap:0}
  body.mw-ui #player .data_wrapper .source_data{grid-template-columns:48px minmax(0,1fr) 36px;column-gap:10px}
  body.mw-ui #player .data_wrapper .source_data .cover_holder{width:48px!important;height:48px!important}
  body.mw-ui #player .progress_bar .progress{margin:0 44px!important}
  body.mw-ui #player .progress_bar .progress .time{left:-44px!important;width:38px!important}
  body.mw-ui #player .progress_bar .progress .time.tot{right:-44px!important;left:auto!important}
}
@media(max-width:760px){
  :root{--ll-head-h:122px}
  body.mw-ui .queue{top:0!important;display:flex!important;flex-direction:column}
  /* Compact now-playing card: artwork, title, artist, the native menu and source types stay available. */
  body.mw-ui .queue #preview{float:none!important;width:100%!important;flex:0 0 auto;padding:14px 14px 0!important;height:auto!important}
  body.mw-ui .queue #preview .preview_wrapper{position:static!important;width:100%!important;min-height:0!important;display:grid!important;grid-template-columns:88px minmax(0,1fr);column-gap:14px;align-items:center;margin:0!important}
  body.mw-ui .queue #preview .graph_wrapper{grid-column:1;grid-row:1 / 3;width:88px!important;border-radius:14px!important}
  body.mw-ui .queue #preview .text_wrapper{grid-column:2;grid-row:1;margin:0!important;padding-right:44px}
  body.mw-ui .queue #preview .text_wrapper>a.title{font-size:1.5rem!important;white-space:normal;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  body.mw-ui .queue #preview .types{grid-column:2;grid-row:2;margin:6px 0 0!important;text-align:left!important}
  body.mw-ui .queue .data_wrapper{width:100%!important;float:none!important;flex:1 1 auto;min-height:0;padding:12px 14px 0!important}
}
@media(max-width:360px){
  body.mw-ui #player .progress_bar .progress{margin:0 4px!important}
  body.mw-ui #player .progress_bar .progress .time{display:none!important}
  body.mw-ui #player .buttons_wrapper .button{width:36px;height:36px}
  body.mw-ui #player .controls_wrapper .control{width:36px;height:36px;flex-basis:36px}
  body.mw-ui #player .controls_wrapper .control.play{width:44px!important;height:44px!important;flex-basis:44px}
  body.mw-ui #player .data_wrapper .source_data{grid-template-columns:44px minmax(0,1fr) 32px}
  body.mw-ui #player .data_wrapper .source_data .cover_holder{width:44px!important;height:44px!important}
}
@media(prefers-reduced-motion:reduce){body.mw-ui #player .progress_bar .progress{transition:none}}

/* Native mobile loads its vendor sheet asynchronously after the shell. Keep the
   same player grid in both queue states; do not change native mobile handlers. */
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player{padding:4px 8px 6px!important;grid-template-columns:minmax(0,1fr) 64px 136px;column-gap:4px;position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;height:var(--ll-bar-h)!important;border-radius:0!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player>div{position:relative!important;inset:auto!important;opacity:1!important;transform:none!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .data_wrapper{display:block!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .data_wrapper:after{content:none!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .controls_wrapper .control{position:static!important;transform:none!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .controls_wrapper .control.repeat,body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .controls_wrapper .control.shuffle{display:none!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .buttons_wrapper .button{font-size:0!important;display:grid!important;padding:0!important;margin:0!important;position:relative!important;inset:auto!important;flex:0 0 auto}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .buttons_wrapper .button .mdi{margin:0!important;top:auto!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) #player .buttons_wrapper .button ._t{display:none!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) .queue #preview .preview_wrapper>*{position:relative!important;inset:auto!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) .queue #preview .graph_wrapper{display:block!important;height:88px!important}
body.mw-ui.mobile:is(.que_active,:not(.que_active)) .queue #preview .graph_wrapper img{height:100%!important;width:100%!important;object-fit:cover}
body.mw-ui.mobile #player.muted .volume_control .mdi-volume-high,body.mw-ui.mobile #player.unmuted .volume_control .mdi-volume-off{display:none!important}
body.mw-ui.mobile #player.muted .volume_control .mdi-volume-off,body.mw-ui.mobile #player.unmuted .volume_control .mdi-volume-high{display:block!important}
@media(max-width:760px){body.mw-ui .header .align{top:4px!important}body.mw-ui .header .align .btn{height:40px!important;min-height:40px!important}}

/* ===== Shared LuteLoot design tokens and components (reusable by any Moonwater page) =====
   Tokens: --ll-night, --ll-ink, --ll-ink-2, --ll-ink-3, --ll-lantern, --ll-lantern-soft, --ll-parchment,
   --ll-muted, --ll-line (top of this file), plus --ll-bar-h, --ll-head-h, --ll-track, --ll-buffer below.
   Components: .ll-hero (+ __cover, __body, __eyebrow, __title, __meta, __actions), .ll-card (+ __cover,
   __title, __sub), .ll-grid, .ll-play (48px circular play button), .ll-icon-btn, .ll-pill, .ll-chip,
   .ll-section-title, .ll-progress (+ __buffer, __played), .ll-surface. Display font only on titles. */
.ll-surface{background:linear-gradient(180deg,#232848,#1b1f3b);border:1px solid var(--ll-ink-3);border-radius:18px;box-shadow:0 20px 40px rgba(6,8,20,.35)}
.ll-section-title{font:400 clamp(1.6rem,2.4vw,2.4rem)/1.1 var(--ll-display);color:var(--ll-parchment);margin:0 0 16px}
.ll-hero{display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(12px,3vh,32px) 0 4px;margin-bottom:28px}
.ll-hero__cover{flex:0 0 auto;width:clamp(150px,19vw,260px);aspect-ratio:1;border-radius:14px;overflow:hidden;object-fit:cover;background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat;box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 0 1px rgba(244,234,214,.1)}
.ll-hero__cover--round{border-radius:50%}
.ll-hero__body{flex:1 1 auto;min-width:0}
.ll-hero__eyebrow{font:700 13px var(--ll-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ll-lantern);margin:0 0 6px}
.ll-hero__title{font:400 clamp(2rem,4vw,3.4rem)/1.08 var(--ll-display);color:var(--ll-parchment);margin:0 0 8px}
.ll-hero__meta{display:flex;flex-wrap:wrap;gap:4px 18px;font:500 14px var(--ll-text);color:var(--ll-muted);margin:0 0 18px}
.ll-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media(max-width:600px){.ll-hero{flex-direction:column;align-items:flex-start;gap:16px}.ll-hero__cover{width:clamp(120px,40vw,180px)}}
.ll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.ll-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;background:rgba(244,234,214,.04);border:1px solid var(--ll-line);color:var(--ll-parchment);text-decoration:none;transition:background .15s ease,transform .15s ease}
.ll-card:hover{background:rgba(244,234,214,.08)}
.ll-card__cover{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;background:var(--ll-ink-2) url('art/listening-room-640.webp') center/cover no-repeat}
.ll-card__title{font:700 15px/1.3 var(--ll-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ll-card__sub{font:500 13px/1.3 var(--ll-text);color:var(--ll-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ll-play{width:48px;height:48px;flex:0 0 48px;display:inline-grid;place-items:center;border-radius:50%;border:0;background:var(--ll-lantern);color:var(--ll-night);box-shadow:0 6px 18px rgba(233,162,59,.35);cursor:pointer}
.ll-play:hover{background:var(--ll-lantern-soft)}
.ll-icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--ll-parchment);cursor:pointer}
.ll-icon-btn:hover{background:rgba(244,234,214,.08)}
.ll-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ll-ink-3);background:var(--ll-ink-2);color:var(--ll-lantern);font:600 14px var(--ll-text);text-decoration:none;white-space:nowrap}
.ll-pill--primary{background:var(--ll-lantern);border-color:var(--ll-lantern);color:var(--ll-night)}
.ll-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(244,234,214,.08);color:var(--ll-parchment);font:600 13px var(--ll-text)}
.ll-progress{position:relative;height:4px;border-radius:999px;background:var(--ll-track)}
.ll-progress__buffer,.ll-progress__played{position:absolute;inset:0 auto 0 0;border-radius:999px}
.ll-progress__buffer{background:var(--ll-buffer)}.ll-progress__played{background:var(--ll-lantern)}