.music-view { --music-forest:#164a3a; --music-ink:#283b34; --music-muted:#586b60; max-width:1060px; margin-inline:auto; padding:2px 0 28px; color:var(--music-ink); }
.music-view *, .music-player * { box-sizing:border-box; }
.music-view svg, .music-player svg { width:20px; height:20px; flex:none; vertical-align:middle; }
.music-view :is(button,a,input):focus-visible, .music-player :is(button,input):focus-visible { outline:3px solid #b26825; outline-offset:4px; }
.music-view ::selection, .music-player ::selection { background:#d8e8dc; color:#164a3a; }
.music-view input { caret-color:var(--music-forest); }
.music-view p { text-align:left; text-justify:auto; hyphens:none; }
.music-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }
.music-page-head h1 { font-family:Georgia,serif; font-size:32px; font-weight:400; letter-spacing:-.03em; line-height:1.2; }
.music-page-head p { font-size:13px; color:var(--music-muted); margin-top:9px; }
.music-provider { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; column-gap:7px; row-gap:3px; max-width:240px; font-size:12px; font-weight:600; padding-top:5px; text-align:right; }
.music-provider>svg { width:17px; height:17px; }
.music-provider small { display:block; width:100%; color:var(--music-muted); overflow-wrap:anywhere; font-size:11px; font-weight:400; }
.music-welcome { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(170px,1fr); gap:22px; overflow:hidden; position:relative; padding:42px 38px; background:var(--music-forest); color:#fff; border-radius:16px; }
.music-welcome-copy { position:relative; z-index:1; }
.music-welcome h2 { font-size:clamp(28px,3vw,40px); line-height:1.2; letter-spacing:-.035em; max-width:14ch; text-wrap:balance; font-weight:600; margin:0 0 18px; color:#fff; }
.music-welcome-copy>p { max-width:46ch; font-size:14px; line-height:1.75; color:#d4e4da; text-wrap:pretty; }
.music-welcome-action { margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.music-view .music-primary { background:#f7ead0; border:0; color:#243c30; min-height:46px; padding:12px 17px; }
.music-view .music-primary:hover { background:#fff6e4; }
.music-view .music-primary svg { width:17px; height:17px; margin-left:4px; }
.music-view .music-light { border-color:#82a693; color:#fff; background:transparent; }
.music-view .music-light:hover { background:#245d48; }
.music-seats { color:#c2d7ca; font-size:11px; }
.music-record { align-self:center; position:relative; min-width:0; height:250px; }
.music-record-disc { position:absolute; width:228px; height:228px; right:-46px; top:0; border-radius:50%; background:#0d3027; box-shadow:inset 0 0 0 1px #7f9c8b; }
.music-record-disc::before { content:''; position:absolute; inset:13px; border:1px solid #42614f; border-radius:50%; box-shadow:inset 0 0 0 8px #0d3027,inset 0 0 0 9px #344f40,inset 0 0 0 18px #0d3027,inset 0 0 0 19px #344f40,inset 0 0 0 28px #0d3027,inset 0 0 0 29px #344f40; }
.music-record-label { position:absolute; inset:65px; border-radius:50%; background:#dfc6a0; color:#173d2f; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; transform:rotate(-12deg); text-align:center; }
.music-record-label svg { width:24px; height:24px; }
.music-record-label span { font-size:10px; line-height:1.2; font-weight:600; }
.music-record-caption { position:absolute; bottom:-3px; left:0; font-size:12px; line-height:1.5; color:#c2d7ca; }
.music-intro { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:30px 6px 0; }
.music-intro h3 { font-size:14px; margin-bottom:8px; }
.music-intro p { font-size:12px; color:var(--music-muted); line-height:1.75; max-width:60ch; }
.music-settings { margin-top:32px; border-top:1px solid var(--line,#dde4dc); font-size:12px; color:var(--music-muted); }
.music-settings>summary { width:fit-content; padding:17px 0; cursor:pointer; color:var(--music-ink); font-weight:600; }
.music-settings>div { padding:2px 0 14px; }
.music-settings p { max-width:65ch; line-height:1.7; margin:0 0 12px; }
.music-settings .btn { font-size:12px; }
.music-leave { margin-top:18px; }
.music-leave>summary { cursor:pointer; padding:8px 0; width:fit-content; }
.music-connect { position:relative; background:#fff; padding:32px; border:1px solid var(--line,#dde4dc); border-radius:16px; }
.music-connect h2 { font-size:25px; letter-spacing:-.025em; padding-right:30px; margin-bottom:12px; }
.music-connect>p { font-size:14px; max-width:65ch; line-height:1.75; color:var(--music-muted); }
.music-connect-code { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; background:#f3f5ef; border-radius:12px; padding:16px 20px; margin:24px 0; width:fit-content; max-width:100%; }
.music-connect-code>span { color:var(--music-muted); font-size:12px; }
.music-connect-code>strong { font-size:27px; letter-spacing:.08em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; user-select:all; }
.music-connect-code .btn { min-height:36px; font-size:12px; }
.music-connect .music-connect-status { display:flex; align-items:center; flex-wrap:wrap; column-gap:6px; margin:20px 0 10px; font-size:12px; }
.music-connect .music-connect-status svg { width:16px; height:16px; }
.music-connect .music-small { font-size:11px; }
.music-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:40px; min-height:40px; padding:8px; background:transparent; border:0; border-radius:50%; color:inherit; cursor:pointer; }
.music-icon:hover { background:#edf4ef; }
.music-connect-close { position:absolute; right:14px; top:14px; }
.music-library { background:#fff; border:1px solid var(--line,#dde4dc); border-radius:16px; padding:24px; }
.music-search { display:flex; align-items:center; gap:11px; padding:0 13px; min-height:49px; border-radius:10px; background:#f4f5f0; border:1px solid #d9e1d7; color:var(--music-muted); }
.music-search:focus-within { outline:2px solid var(--green,#1c5b47); outline-offset:2px; }
.music-search input { border:0; background:transparent; box-shadow:none; width:100%; min-width:0; font:inherit; font-size:13px; color:var(--music-ink); min-height:47px; outline:none; }
.music-search input:focus-visible { outline:none; }
.music-search input::placeholder { color:#647369; opacity:1; }
.music-search>button { border:0; background:transparent; color:var(--green,#1c5b47); font-size:12px; font-weight:600; padding:10px 2px; }
.music-tabs { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line,#dde4dc); padding-top:14px; margin-bottom:24px; overflow:auto; scrollbar-width:thin; scrollbar-color:#bdcdbf transparent; }
.music-tabs>button { display:flex; align-items:center; justify-content:center; gap:7px; flex:none; position:relative; border:0; background:transparent; color:var(--music-muted); font-size:12px; font-weight:600; min-height:48px; padding:10px 0 14px; white-space:nowrap; }
.music-tabs>button:hover { color:var(--green,#1c5b47); }
.music-tabs>button svg { width:17px; height:17px; }
.music-tabs>button[aria-pressed="true"] { color:var(--green,#1c5b47); }
.music-tabs>button[aria-pressed="true"]::after { content:''; position:absolute; bottom:0; height:3px; inset-inline:0; border-radius:2px 2px 0 0; background:var(--green,#1c5b47); }
.music-tabs>.music-library-refresh { margin-left:auto; padding-inline:5px; }
.music-section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:19px; }
.music-section-head h2 { font-size:23px; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; text-wrap:balance; }
.music-section-head p, .music-section-head>span { color:var(--music-muted); font-size:11px; margin-top:5px; font-variant-numeric:tabular-nums; }
.music-view .music-play-all { flex:none; border-radius:9px; min-height:39px; padding:9px 13px; font-size:12px; }
.music-play-all svg { width:16px; height:16px; }
.music-track-labels { display:grid; grid-template-columns:44px minmax(0,1.8fr) minmax(0,1fr) 42px; gap:12px; font-size:10px; color:var(--music-muted); padding:0 8px 10px; border-bottom:1px solid #e7ece5; }
.music-track-labels>span:last-child { text-align:right; }
.music-track-labels svg { width:13px; height:13px; }
.music-tracks { list-style:none; padding:0; margin:0; }
.music-track { display:grid; grid-template-columns:44px minmax(0,1.8fr) minmax(0,1fr) 42px; align-items:center; gap:12px; padding:10px 8px; margin-inline:-1px; border-radius:9px; min-height:66px; transition:background .16s ease-out; }
.music-track:hover { background:#f5f7f2; }
.music-track.is-current { background:#edf4ef; }
.music-cover { width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex:none; background:#e7ece2; color:#406249; overflow:hidden; border-radius:6px; }
.music-cover>img { width:100%; height:100%; object-fit:cover; display:block; }
.music-cover>svg { width:21px; height:21px; }
.music-track-play { display:block; position:relative; background:transparent; border:0; padding:0; width:44px; height:44px; border-radius:6px; color:#fff; }
.music-track-hover { display:flex; position:absolute; align-items:center; justify-content:center; inset:0; background:#164a3ace; border-radius:6px; opacity:0; }
.music-track-play:hover .music-track-hover, .music-track-play:focus-visible .music-track-hover, .music-track.is-current .music-track-hover { opacity:1; }
.music-track-hover svg { width:18px; height:18px; }
.music-track-title { min-width:0; }
.music-track-title>button { color:var(--music-ink); font:inherit; font-size:12px; font-weight:600; background:transparent; border:0; text-align:left; padding:2px 0; max-width:100%; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.music-track.is-current .music-track-title>button { color:var(--green,#1c5b47); }
.music-track-title>span { display:block; font-size:11px; color:var(--music-muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-track-album { color:var(--music-muted); font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.music-track-duration { text-align:right; font-size:11px; color:var(--music-muted); font-variant-numeric:tabular-nums; }
.music-track.is-unavailable .music-cover { filter:grayscale(1); }
.music-track.is-unavailable button:disabled { opacity:.65; }
.music-playlists { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }
.music-playlist { display:block; text-align:left; min-width:0; position:relative; background:transparent; color:var(--music-ink); border:0; border-radius:9px; padding:0 0 8px; }
.music-playlist-cover { width:100%; height:auto; aspect-ratio:1; border-radius:10px; margin-bottom:12px; }
.music-playlist-cover>svg { width:44px; height:44px; }
.music-playlist>strong { display:block; padding-right:25px; overflow-wrap:anywhere; font-size:13px; line-height:1.45; }
.music-playlist>span:not(.music-cover):not(.music-playlist-arrow) { display:block; margin-top:5px; font-size:11px; color:var(--music-muted); }
.music-playlist-arrow { position:absolute; right:0; bottom:30px; color:var(--green,#1c5b47); }
.music-playlist-arrow svg { width:17px; height:17px; }
.music-playlist:hover>strong { text-decoration:underline; text-underline-offset:4px; }
.music-playlist:hover .music-playlist-cover { outline:2px solid #6f9179; outline-offset:3px; }
.music-back { display:flex; align-items:center; gap:6px; border:0; color:var(--green,#1c5b47); background:transparent; padding:0 0 20px; font-size:12px; }
.music-back svg { width:16px; height:16px; }
.music-more { padding:20px 0 4px; text-align:center; }
.music-empty { text-align:center; padding:44px 12px 52px; }
.music-empty>svg { width:34px; height:34px; color:#51705c; margin-bottom:15px; }
.music-empty h3 { font-size:17px; margin-bottom:9px; }
.music-empty p { font-size:12px; color:var(--music-muted); max-width:45ch; margin:auto; line-height:1.75; }
.music-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:60px 15px; min-height:220px; color:var(--music-muted); font-size:13px; }
.music-loading>span { width:17px; height:17px; border-radius:50%; border:2px solid #d4e0d5; border-top-color:var(--green,#1c5b47); animation:music-spin 1s linear infinite; }
.music-error { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background:#fbf0e9; color:#743e30; padding:22px; border-radius:12px; }
.music-error strong { font-size:14px; }
.music-error p { font-size:12px; margin-top:6px; line-height:1.7; max-width:60ch; }
.music-error svg { width:15px; height:15px; }
.music-message { margin-bottom:20px; padding:14px 17px; border-radius:10px; background:#fbf0e9; color:#743e30; font-size:12px; line-height:1.7; }
.music-player { --music-progress:0%; position:fixed; z-index:46; top:12px; left:12px; width:min(344px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#bdcdbf #fcfdf9; border-radius:16px; background:#fcfdf9; box-shadow:0 9px 36px #193c3038; color:#283b34; padding:0 16px 14px; }
.music-player-safe-area { position:absolute; pointer-events:none; visibility:hidden; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
.music-player [hidden] { display:none!important; }
.music-player .music-icon { min-width:44px; min-height:44px; padding:11px; border-radius:8px; }
.music-player-head { display:flex; align-items:center; margin:0 -6px 4px; gap:0; }
.music-player-move { display:flex; align-items:center; gap:6px; min-height:44px; min-width:44px; padding:10px 6px; flex:1; background:transparent; border:0; border-radius:8px; color:#586b60; cursor:grab; touch-action:none; user-select:none; }
.music-player-move>svg { width:18px; height:21px; stroke-width:3.4; }
.music-player-move>span { font-size:11px; }
.music-player-move:hover { background:#edf4ef; color:#164a3a; }
.music-player.is-dragging { cursor:grabbing; user-select:none; }
.music-player.is-dragging .music-player-move { cursor:grabbing; background:#e7eee4; color:#164a3a; }
.music-player-head>.music-icon { color:#586b60; }
.music-player-head>.music-icon svg { width:17px; height:17px; }
.music-now { min-width:0; display:flex; align-items:center; gap:12px; padding-top:1px; }
.music-now>.music-cover { width:48px; height:48px; border-radius:7px; }
.music-now>a { display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:48px; color:inherit; flex:1; border-radius:4px; }
.music-now>a:hover { color:#164a3a; text-decoration:none; }
.music-now>a:hover strong { text-decoration:underline; text-underline-offset:3px; }
.music-now strong { display:block; font-size:13px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.music-now a>span { display:block; font-size:11px; color:#586b60; margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.music-transport { display:flex; align-items:center; gap:3px; margin-top:3px; }
.music-transport>.music-icon { color:#28543f; }
.music-transport>.music-icon svg { width:18px; height:18px; }
.music-player-toggle { display:flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; padding:0; background:#1c5b47; border:0; border-radius:50%; color:#fff; }
.music-player-toggle:hover { background:#164a3a; }
.music-player-toggle:active { background:#103d2f; }
.music-player-toggle>svg { width:21px; height:21px; }
.music-player-toggle.is-loading { position:relative; opacity:1; }
.music-player-toggle.is-loading>svg { opacity:.2; }
.music-player-toggle.is-loading::after { content:''; position:absolute; width:21px; height:21px; border-radius:50%; border:2px solid #ffffff50; border-top-color:#fff; animation:music-spin 1s linear infinite; }
.music-volume { display:flex; flex:1; align-items:center; justify-content:flex-end; min-width:0; min-height:44px; gap:8px; margin-left:15px; }
.music-volume>svg { width:17px; height:17px; color:#586b60; }
.music-volume input { width:100%; min-width:0; max-width:82px; height:44px; margin:0; accent-color:#1c5b47; }
.music-timeline { display:flex; flex-direction:column; margin:5px 0 0; }
.music-times { display:flex; justify-content:space-between; margin-top:-6px; pointer-events:none; }
.music-timeline time { font-size:10px; line-height:1.4; color:#586b60; font-variant-numeric:tabular-nums; }
.music-timeline input { -webkit-appearance:none; appearance:none; width:100%; height:36px; min-width:0; margin:0; border:0; border-radius:2px; background:transparent; cursor:pointer; accent-color:#1c5b47; }
.music-timeline input::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,#1c5b47 0 var(--music-progress),#dce4d9 var(--music-progress) 100%); }
.music-timeline input::-webkit-slider-thumb { -webkit-appearance:none; width:11px; height:11px; margin-top:-4px; border-radius:50%; background:#1c5b47; border:0; }
.music-timeline input::-moz-range-track { height:3px; border-radius:3px; background:#dce4d9; }
.music-timeline input::-moz-range-progress { height:3px; background:#1c5b47; }
.music-timeline input::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:#1c5b47; border:0; }
.music-player-status { margin:9px 0 0; color:#8a4131; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.music-player.is-collapsed { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; align-items:center; width:min(304px,calc(100% - 24px)); padding:8px; border-radius:14px; }
.music-player.is-collapsed .music-player-head { display:contents; }
.music-player.is-collapsed .music-player-move { grid-column:1; grid-row:1; justify-content:center; padding:10px; }
.music-player.is-collapsed .music-player-fold { grid-column:4; grid-row:1; }
.music-player.is-collapsed .music-now { grid-column:2; grid-row:1; padding:0 7px 0 2px; }
.music-player.is-collapsed .music-now>a { min-height:44px; }
.music-player.is-collapsed .music-now strong { font-size:11px; }
.music-player.is-collapsed .music-transport { display:contents; }
.music-player.is-collapsed .music-player-toggle { grid-column:3; grid-row:1; width:44px; height:44px; }
.music-player.is-collapsed :is(.music-player-move>span,.music-player-reset,.music-player-close,.music-now>.music-cover,.music-now a>span,.music-transport>.music-icon,.music-volume) { display:none; }
.music-player.is-collapsed .music-player-status { grid-column:1/-1; padding-inline:7px; }
.music-sr { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.has-music-player .toast { z-index:80; }
body.has-music-player .archive-help { --music-help-bottom:max(24px,var(--help-bottom,0px),var(--music-help-clearance,0px)); bottom:var(--music-help-bottom); }
body.has-music-player .archive-help:has(.archive-help-panel:not([hidden])) { z-index:60; }
@keyframes music-spin { to { transform:rotate(360deg); } }
@media (min-width:1200px) { .music-welcome { padding-block:46px; } }
@media (max-width:760px) {
  body.has-music-player .archive-help { --music-help-bottom:max(calc(78px + env(safe-area-inset-bottom,0px)),var(--help-bottom,0px),var(--music-help-clearance,0px)); }
}
@media (max-width:680px) {
  .music-page-head { gap:14px; margin-bottom:22px; }
  .music-page-head h1 { font-size:28px; }
  .music-page-head p { max-width:25ch; font-size:12px; }
  .music-provider { max-width:140px; font-size:11px; }
  .music-provider>svg { width:15px; height:15px; }
  .music-welcome { padding:30px 24px; grid-template-columns:minmax(0,1fr) 100px; gap:0; }
  .music-welcome h2 { font-size:29px; }
  .music-welcome-copy>p { font-size:12px; }
  .music-welcome-action { margin-top:24px; }
  .music-welcome-action .btn { font-size:11px; padding:12px; }
  .music-record { height:220px; align-self:start; }
  .music-record-disc { width:185px; height:185px; right:-110px; top:20px; }
  .music-record-label { inset:54px; }
  .music-record-label span { font-size:8px; }
  .music-record-label svg { width:20px; height:20px; }
  .music-record-caption { display:none; }
  .music-intro { gap:22px; margin:25px 0 0; }
  .music-intro h3 { font-size:13px; }
  .music-intro p { font-size:11px; }
  .music-library { padding:18px 15px; }
  .music-search { gap:9px; padding-inline:10px; }
  .music-search input { font-size:12px; }
  .music-tabs { gap:17px; margin-bottom:22px; }
  .music-tabs>button { font-size:11px; }
  .music-section-head { gap:10px; }
  .music-section-head h2 { font-size:21px; }
  .music-playlists { gap:20px 13px; }
  .music-playlist>strong { font-size:12px; }
  .music-playlist>span:not(.music-cover):not(.music-playlist-arrow) { font-size:10px; }
  .music-track-labels,.music-track { grid-template-columns:42px minmax(0,1fr) 35px; gap:10px; }
  .music-track-labels>span:nth-child(3),.music-track-album { display:none; }
  .music-track { padding:9px 4px; }
  .music-track-play,.music-track-play .music-cover { width:42px; height:42px; }
  .music-track-title>button { font-size:12px; }
  .music-track-duration { font-size:10px; }
  .music-connect { padding:26px 22px; }
  .music-connect h2 { font-size:22px; }
  .music-connect>p { font-size:12px; }
  .music-connect-code { padding:13px 15px; gap:8px 12px; }
  .music-player { max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px)); }
  .music-player .music-volume { display:none; }
  .music-player:not(.is-collapsed) .music-transport { justify-content:center; gap:13px; }
}
@media (max-width:420px) {
  .music-page-head { flex-wrap:wrap; gap:9px; }
  .music-provider { justify-content:flex-start; text-align:left; padding-top:0; max-width:none; }
  .music-provider small { width:auto; padding-left:5px; }
  .music-welcome { padding:27px 20px; grid-template-columns:minmax(0,1fr) 55px; }
  .music-welcome h2 { font-size:28px; }
  .music-record-disc { right:-155px; }
  .music-welcome-action { margin-right:-48px; }
  .music-seats { font-size:10px; }
  .music-intro { grid-template-columns:1fr; gap:20px; }
  .music-intro p { max-width:60ch; }
  .music-library { padding:16px 12px; }
  .music-search input { font-size:11px; }
  .music-tabs { gap:16px; }
  .music-tabs>button { font-size:10px; gap:5px; }
  .music-tabs>button svg { width:15px; height:15px; }
  .music-playlists { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .music-section-head h2 { font-size:19px; }
  .music-view .music-play-all { font-size:11px; padding-inline:10px; }
  .music-track-title>button { font-size:11px; }
  .music-track-title>span { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .music-view *, .music-player, .music-player * { animation:none!important; transition:none!important; }
}