@font-face {
  font-family:"Google Sans";
  src:url('/app/googlesans.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap
}
:root {
  --bg:#060708;
  --surface:#151719;
  --line:#ffffff14;
  --fg:#f5f6f7;
  --muted:#b5b7bd;
  --accent:#ffcc33;
  --nav-h:58px;
  --player-h:72px;
  --top-h:64px;
  --safe-top:max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px));
  --content-top:calc(var(--safe-top) + var(--tg-content-top,0px));
  --content-bottom:calc(var(--safe-bottom) + var(--tg-content-bottom,0px));
  color-scheme:dark
}
* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent
}
html {
  height:100%;
  overscroll-behavior:none;
  background:var(--bg)
}
body {
  margin:0;
  height:var(--app-height,calc(100dvh / var(--ui-zoom)));
  overflow:hidden;
  color:var(--fg);
  font:15px/1.4 "Google Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-transform:lowercase
}
button,input {
  font:inherit;
  color:inherit
}
button {
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  touch-action:manipulation;
  text-transform:inherit;
  user-select:none
}
button:disabled {
  opacity:.45;
  cursor:wait
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
::selection {
  color:var(--bg);
  background:var(--accent)
}
input {
  caret-color:var(--accent)
}
svg {
  fill:currentColor;
  display:block
}
img {
  display:block
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap
}
.ambient {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-1;
  background:var(--bg)
}
.shape {
  width:100%;
  height:100%;
  opacity:.6
}
.shape[data-unavailable],.no-webgl .shape {
  visibility:hidden
}
.shape-fallback {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 67%);
  opacity:0
}
.no-webgl .shape-fallback,.shape[data-unavailable]+.shape-fallback {
  opacity:1
}
.ambient::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(#06070833,transparent 35%,#060708c9 88%)
}
.rail {
  position:fixed;
  z-index:40;
  inset:auto 0 0;
  height:calc(var(--nav-h) + var(--content-bottom));
  padding-bottom:var(--content-bottom);
  display:flex;
  align-items:center;
  justify-content:space-around;
  background:var(--bg);
  border-top:1px solid var(--line)
}
.logo,.me {
  display:none
}
.rail-btn {
  min-width:64px;
  height:48px;
  display:grid;
  place-items:center;
  color:var(--muted);
  border-radius:12px;
  transition:color .16s
}
.rail-btn svg {
  width:25px;
  height:25px
}
.rail-btn.active {
  color:var(--accent)
}
.topbar {
  position:fixed;
  z-index:30;
  pointer-events:none;
  top:var(--content-top);
  left:max(20px,var(--tg-safe-left,0px));
  right:max(14px,var(--tg-safe-right,0px));
  height:var(--top-h);
  display:flex;
  justify-content:space-between;
  align-items:center
}
.wordmark {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.02em
}
.top-actions {
  display:flex;
  gap:4px
}
.top-actions button { pointer-events:auto; }
.ib,.more {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--muted);
  flex:none;
  transition:background .16s,color .16s,transform .16s
}
.ib svg,.more svg {
  width:22px;
  height:22px
}
.top-actions .ib {
  color:var(--fg);
  background:none
}
.main {
  position:absolute;
  inset:calc(var(--content-top) + var(--top-h)) 0 calc(var(--nav-h) + var(--player-h) + var(--content-bottom));
  overflow:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#ffffff38 transparent;
  padding:0 20px 26px
}
.page {
  display:none
}
.page.active {
  display:block
}
.hero {
  position:relative;
  min-height:340px;
  height:clamp(340px,calc(var(--app-height,calc(100dvh / var(--ui-zoom))) - var(--content-top) - var(--content-bottom) - 310px),760px)
}
.hero-now {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  text-align:center
}
.hero-idle h1 {
  margin:0;
  font-size:clamp(38px,calc(9vw / var(--ui-zoom)),64px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.035em
}
.hero-play {
  width:76px;
  height:76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--bg);
  background:var(--fg);
  transition:transform .16s
}
.hero-play svg {
  width:30px;
  height:30px
}
.hero-now {
  opacity:0;
  pointer-events:none;
  gap:16px;
  padding:20px 0
}
.has-track .hero-idle {
  visibility:hidden;
  pointer-events:none
}
.has-track .hero-now {
  opacity:1;
  pointer-events:auto
}
.hero-cover {
  width:clamp(120px,calc(27vw / var(--ui-zoom)),188px);
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 12px 42px #0005
}
.hero-cover img {
  width:100%;
  height:100%;
  object-fit:cover
}
.hero-text {
  min-width:0;
  max-width:100%
}
.hero-title {
  font-size:clamp(25px,calc(6vw / var(--ui-zoom)),42px);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.hero-artist {
  color:var(--muted);
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.hero-why {
  display:none
}
.row-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:12px 0
}
.row-head h2,.page-title {
  font-size:23px;
  letter-spacing:-.025em;
  font-weight:600;
  margin:0
}
.page-title {
  margin:24px 0 18px
}
.row {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:42%;
  gap:14px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:10px
}
.row::-webkit-scrollbar {
  display:none
}
.card {
  text-align:left;
  min-width:0;
  display:flex;
  flex-direction:column
}
.art {
  position:relative;
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface)
}
.art img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .2s
}
.art img.ok {
  opacity:1
}
.card .art {
  margin-bottom:9px;
  width:100%
}
.card .t,.card .a {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%
}
.card .t {
  font-size:14px;
  font-weight:500
}
.card .a {
  color:var(--muted);
  font-size:13px
}
.ph {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffffff45
}
.ph svg {
  width:32%;
  height:32%
}
.skeleton .t,.skeleton .a {
  height:10px;
  border-radius:4px;
  background:var(--surface);
  margin-top:7px;
  width:75%
}
.skeleton .a {
  width:50%
}
.empty {
  color:var(--muted);
  padding:24px 0;
  text-align:left;
  grid-column:1/-1
}
.search-form {
  display:flex;
  gap:10px;
  margin-top:12px
}
.search {
  flex:1;
  min-width:0;
  height:50px;
  padding:0 14px;
  border-radius:12px;
  background:#17191df0;
  border:1px solid var(--line)
}
.search input {
  width:100%;
  height:100%;
  border:0;
  outline:none;
  background:none;
  font-size:16px
}
.search:focus-within {
  border-color:var(--accent)
}
.search input::placeholder {
  color:var(--muted)
}
.search-submit {
  padding:0 16px;
  border-radius:12px;
  background:var(--accent);
  color:var(--bg);
  font-weight:600
}
.chips {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:12px;
  scrollbar-width:none
}
.chip {
  flex:none;
  padding:10px 14px;
  border-radius:24px;
  background:var(--surface);
  color:var(--muted);
  font-size:14px
}
.tracks {
  list-style:none;
  margin:0;
  padding:0
}
.track {
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  padding:7px 0;
  border-radius:10px;
  cursor:pointer
}
.track .art {
  width:50px;
  border-radius:8px
}
.track .meta {
  min-width:0
}
.track .tt,.track .ta {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.track .tt {
  font-weight:500
}
.track .ta {
  color:var(--muted);
  font-size:13px
}
.track.current .tt {
  color:var(--accent)
}
.heart {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:var(--muted)
}
.heart svg {
  width:21px;
  height:21px
}
.on {
  color:var(--accent)!important
}
.on svg path {
  fill:currentColor
}
.player {
  position:fixed;
  z-index:35;
  left:0;
  right:0;
  bottom:calc(var(--nav-h) + var(--content-bottom));
  height:var(--player-h);
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:#101214;
  border-top:1px solid var(--line)
}
.progress {
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:16px;
  display:flex;
  align-items:center
}
#seek {
  width:100%;
  height:3px;
  margin:0
}
.p-left {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px
}
.p-cover {
  width:40px;
  height:40px;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
  flex:none
}
.p-cover img {
  width:100%;
  height:100%;
  object-fit:cover
}
.p-meta {
  min-width:0
}
.p-title,.p-artist {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.p-title {
  font-weight:500;
  font-size:14px
}
.p-artist {
  color:var(--muted);
  font-size:12px
}
.p-mid {
  display:flex;
  align-items:center;
  gap:0
}
.pp {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--fg)
}
.pp svg {
  width:23px;
  height:23px
}
#dislike,#prev {
  display:none
}
.p-right {
  display:flex
}
.time,.vol,#volume {
  display:none
}
/* The compact player shows the time under the seek bar; the desktop one keeps it inline. */
.seek-times,#repeat,#repeat-compact,.queue-close {
  display:none
}
.row-actions {
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:auto
}
.i-pause {
  display:none!important
}
.playing .i-play {
  display:none!important
}
.playing .i-pause {
  display:block!important
}
input[type=range] {
  appearance:none;
  background:linear-gradient(to right,var(--accent) var(--fill,0%),#ffffff30 var(--fill,0%));
  cursor:pointer;
  border-radius:3px
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--fg)
}
input[type=range]::-moz-range-thumb {
  width:12px;
  height:12px;
  border:0;
  border-radius:50%;
  background:var(--fg)
}
.toast {
  position:fixed;
  z-index:50;
  left:50%;
  bottom:calc(var(--nav-h) + var(--player-h) + 18px + var(--content-bottom));
  transform:translate(-50%,8px);
  opacity:0;
  pointer-events:none;
  padding:10px 14px;
  border-radius:14px;
  background:#181b20eb;
  color:var(--fg);
  border:1px solid #ffffff17;
  box-shadow:0 14px 38px #0009;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  font-size:13px;
  transition:opacity .2s,transform .2s;
  max-width:calc(86vw / var(--ui-zoom));
  width:max-content;
  text-align:center
}
.toast.error {
  background:linear-gradient(135deg,#2b1418f2,#170d0fee);
  border-color:#ff6f6f42;
  color:#ffdcdc
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.playback-error {
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  padding:14px 0;
  color:var(--muted)
}
.playback-error button {
  color:var(--fg);
  padding:10px 16px;
  background:var(--surface);
  border-radius:10px
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:64px;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.setting-row>:last-child {
  text-align:right
}
.setting-row span+span {
  color:var(--muted)
}
#accent {
  width:48px;
  height:40px;
  padding:3px;
  border:0;
  background:none;
  cursor:pointer
}
.swatches {
  display:flex;
  gap:14px;
  padding:18px 0 26px
}
.swatches button {
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--swatch);
  border:5px solid var(--bg)
}
.swatches button[aria-pressed=true] {
  outline:2px solid var(--fg);
  outline-offset:2px
}
.setting-note {
  color:var(--muted);
  max-width:52ch;
  margin:18px 0 26px
}
.setting-action {
  border-radius:12px;
  background:var(--surface);
  padding:14px 18px
}
#motion {
  width:22px;
  height:22px;
  accent-color:var(--accent)
}
#page-settings,#page-search,#page-liked {
  max-width:900px;
  margin:0 auto
}
@media(hover:hover) {
  .ib:hover,.more:hover,.heart:hover {
    color:var(--fg);
    background:#ffffff12
  }
  .card:hover .art {
    filter:brightness(1.1)
  }
  .hero-play:hover {
    transform:scale(1.04)
  }
  .track:hover {
    background:#ffffff09
  }
}
button:active {
  transform:scale(.96)
}
@media(min-width:1125px) {
  :root {
    --nav-h:0px;
    --player-h:80px;
    --top-h:76px
  }
  .rail {
    top:var(--content-top);
    right:auto;
    bottom:calc(var(--player-h) + var(--content-bottom));
    width:80px;
    height:auto;
    flex-direction:column;
    justify-content:flex-start;
    gap:20px;
    padding:18px 0;
    border:0;
    background:#06070840
  }
  .logo {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin-bottom:25px;
    color:var(--fg)
  }
  .logo img {
    width:34px;
    height:34px
  }
  .rail-btn {
    min-width:48px
  }
  .me {
    display:grid;
    place-items:center;
    margin-top:auto;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--surface);
    color:var(--muted)
  }
  .topbar {
    left:112px;
    right:30px
  }
  .main {
    left:80px;
    padding:0 40px 36px
  }
  .hero {
    min-height:330px;
    height:calc(var(--app-height,calc(100dvh / var(--ui-zoom))) - var(--content-top) - var(--content-bottom) - 350px)
  }
  .hero-idle h1 {
    font-size:clamp(52px,calc(6vw / var(--ui-zoom)),76px)
  }
  .hero-play {
    width:88px;
    height:88px
  }
  .hero-now {
    flex-direction:row;
    gap:32px;
    text-align:left
  }
  .hero-cover {
    width:190px
  }
  .hero-title {
    font-size:clamp(34px,calc(4vw / var(--ui-zoom)),56px);
    max-width:620px
  }
  .row {
    grid-auto-columns:164px;
    gap:18px
  }
  .row-head h2 {
    font-size:27px
  }
  .player {
    bottom:0;
    height:calc(var(--player-h) + var(--content-bottom));
    padding:0 28px var(--content-bottom);
    gap:20px
  }
  .p-left,.p-right {
    flex:1
  }
  .p-mid {
    gap:8px
  }
  .pp {
    background:var(--fg);
    color:var(--bg)
  }
  #dislike,#prev {
    display:grid
  }
  .p-right {
    justify-content:flex-end;
    align-items:center;
    gap:8px
  }
  .time {
    display:block;
    font-size:12px;
    font-variant-numeric:tabular-nums
  }
  .vol {
    display:block;
    width:22px;
    height:22px;
    color:var(--muted)
  }
  #volume {
    display:block;
    width:80px;
    height:3px
  }
  .page-title {
    font-size:32px
  }
}
@media(max-width:359px) {
  .p-cover {
    display:none
  }
  .player {
    padding:0 7px
  }
  .main {
    padding-inline:14px
  }
  .wordmark {
    font-size:17px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
body[data-page="settings"] .ambient::after,body[data-page="search"] .ambient::after,body[data-page="liked"] .ambient::after,body[data-page="album"] .ambient::after {
  background:#060708bb
}
/* Spotify Mix supplied by the owner; the archive has no Cyrillic glyphs. */
@font-face { font-family:"Spotify Mix"; src:url('/app/mixregular.woff2') format('woff2'); font-weight:400 500; font-display:swap; }
@font-face { font-family:"Spotify Mix"; src:url('/app/mixbold.woff2') format('woff2'); font-weight:600 900; font-display:swap; }
@font-face { font-family:"Spotify Mix Title"; src:url('/app/mixtitle.woff2') format('woff2'); font-weight:600 900; font-display:swap; }
:root { --accent:#25b5d1; --queue-width:116px; --queue-item:118px; --player-h:74px; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
body { font-family:"Spotify Mix","Google Sans",system-ui,sans-serif; }
.hero-title,.hero-idle h1,.page-title,.row-head h2 { font-family:"Spotify Mix Title","Google Sans",system-ui,sans-serif; }
.ambient { background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg) 72%); }
.ambient::after { background:linear-gradient(#06070818,transparent 55%,#06070855); }
.shape { opacity:.6; }
.shape-fallback { opacity:0; filter:brightness(var(--wave-brightness,.6)); }
.main { padding:0; overflow:hidden; }
.page { height:100%; overflow-y:auto; padding:0 20px 28px; }
#page-home { position:relative; overflow:hidden; padding:0; }
#page-search,#page-liked,#page-settings { padding:0 24px 32px; }
.hero { position:absolute; top:0; bottom:0; left:var(--queue-width); right:12px; height:auto; min-height:0; }
.hero-now,.hero-idle { padding:24px 8px; gap:22px; }
.hero-cover { width:min(calc(52vw / var(--ui-zoom)),260px); border-radius:16px; box-shadow:0 20px 52px #0007; }
.hero-title { font-size:clamp(23px,calc(5.8vw / var(--ui-zoom)),42px); line-height:1.08; }
.hero-artist { font-size:14px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hero-idle h1 { font-size:clamp(29px,calc(7vw / var(--ui-zoom)),56px); }
.queue-panel { position:absolute; left:0; top:0; bottom:0; width:var(--queue-width); display:flex; flex-direction:column; }
.row-head { flex:none; padding:8px 4px 4px 12px; margin:0; min-height:64px; gap:0; align-items:center; }
.row-head h2 { font-size:14px; line-height:1.15; font-weight:600; }
.row-head .more { width:32px; min-width:32px; height:44px; }
.row-head .more svg { width:17px; height:17px; }
.row { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; overflow-x:hidden; overflow-y:auto; padding:calc(calc(50dvh / var(--ui-zoom)) - 220px) 6px; scrollbar-width:none; overscroll-behavior:contain; overflow-anchor:none; scroll-snap-type:y proximity; touch-action:pan-y; }
.queue-item { flex:none; height:var(--queue-item); scroll-snap-align:center; }
.queue-item .card { display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; height:100%; text-align:center; transform-origin:center; border-radius:12px; padding:5px; }
.queue-item .art { width:76px; height:76px; aspect-ratio:1; margin:0; border-radius:9px; flex:none; }
.queue-meta { display:flex; flex-direction:column; min-width:0; width:100%; }
.queue-item .t,.queue-item .a { display:block; width:100%; max-width:100%; }
.queue-item .t { font-size:11px; line-height:1.2; }
.queue-item .a { font-size:10px; line-height:1.2; margin-top:3px; }
.queue-item .current { background:#0003; }
.queue-item .current .t { color:var(--accent); }
.queue-item .current .art { outline:1px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.queue-item button:active { filter:brightness(1.2); }
.queue-status { flex:none; color:var(--muted); padding:6px 10px; font-size:11px; min-height:26px; }
.playback-error { position:absolute; z-index:2; left:calc(var(--queue-width) + 12px); right:12px; bottom:12px; width:max-content; max-width:calc(100% - 24px); margin-inline:auto; padding:10px 14px; background:linear-gradient(135deg,#241417eb,#0d0b0deb); border:1px solid #ff6f6f2e; border-radius:14px; box-shadow:0 14px 34px #0008; font-size:12px; }
.player { background:#090b0de8; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid #ffffff0b; gap:4px; padding-inline:10px; }
.player::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 55%); pointer-events:none; }
.progress { top:-8px; height:16px; }
.progress .buffered { position:absolute; left:0; top:7px; height:2px; background:#ffffff25; pointer-events:none; }
#seek { height:2px; z-index:1; border-radius:0; }
#seek::-webkit-slider-thumb { width:7px; height:7px; }
#seek::-moz-range-thumb { width:7px; height:7px; }
.p-cover { width:40px; height:40px; border-radius:6px; }
.p-title { font-size:12px; }
.p-artist { font-size:11px; }
.p-mid { gap:0; }
.pp { width:40px; height:40px; background:#ffffff0b; color:var(--fg); }
.pp svg { width:21px; height:21px; }
.player .ib { width:36px; height:44px; }
.player .ib svg { width:21px; height:21px; }
#dislike { display:none; }
#prev { display:grid; }
#queue-open { display:none; }
#like { color:var(--muted); }
.rail-btn { position:relative; display:flex; flex-direction:column; gap:3px; justify-content:center; border-radius:12px; min-width:60px; }
.rail-btn.active { color:var(--fg); background:color-mix(in srgb,var(--accent) 16%,#101317); }
.rail-btn.active svg { color:var(--accent); }
.nav-label { font-size:10px; line-height:1.1; }
.top-actions [aria-current=page] { color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,#101317); }
.setting-slider { display:block; width:100%; height:6px; margin:22px 0 30px; accent-color:var(--accent); }
#hue { background:linear-gradient(to right,#f22,#ff2,#2f2,#2ff,#22f,#f2f,#f22); }
.setting-slider::-webkit-slider-thumb { width:20px; height:20px; border:3px solid var(--fg); box-shadow:0 2px 8px #0006; }
.setting-slider::-moz-range-thumb { width:16px; height:16px; border:3px solid var(--fg); }
#wave-visible { width:22px; height:22px; accent-color:var(--accent); }
@media(min-width:1125px) {
  :root { --queue-width:218px; --queue-item:104px; }
  .row-head { padding-left:22px; }
  .row-head h2 { font-size:19px; }
  .row { padding-inline:40px 12px; }
  .queue-item .card { flex-direction:row; text-align:left; gap:12px; padding:8px; }
  .queue-item .t { font-size:13px; }
  .queue-item .a { font-size:12px; }
  .queue-item .art { width:78px; height:78px; }
  .hero { left:calc(var(--queue-width) + 18px); right:26px; }
  .hero-cover { width:min(calc(38vw / var(--ui-zoom)),320px); }
}
@media(min-width:1125px) {
  :root { --player-h:64px; --queue-width:266px; --queue-item:108px; }
  .main { left:80px; padding:0 24px 0 12px; }
  .hero { left:calc(var(--queue-width) + 24px); right:24px; }
  .hero-now { flex-direction:row; text-align:left; gap:32px; padding:24px; }
  .hero-cover { width:clamp(250px,calc(27vw / var(--ui-zoom)),390px); border-radius:20px; }
  .hero-text { max-width:550px; }
  .hero-title { font-size:clamp(42px,calc(4.6vw / var(--ui-zoom)),76px); }
  .hero-artist { font-size:16px; margin-top:18px; }
  .hero-idle h1 { font-size:64px; }
  .player { height:calc(var(--player-h) + var(--content-bottom)); padding:0 24px var(--content-bottom); gap:16px; }
  .p-left,.p-right { flex:1; }
  .p-mid { position:absolute; left:50%; transform:translateX(-50%); gap:6px; }
  .p-right { gap:6px; }
  .player .ib { width:38px; }
  #queue-open { display:grid; }
  #repeat { display:grid; }
  .time { font-size:11px; margin-right:8px; }
  #volume { width:74px; }
  .rail { background:var(--bg); }
}
@media(min-width:2000px) {
  :root { --queue-width:310px; --queue-item:116px; }
  .hero-now { gap:40px; }
  .hero-cover { width:400px; }
  .queue-item .art { width:88px; height:88px; }
}
@media(max-width:359px) { .p-cover { display:none; } .player .ib { width:32px; } .pp { width:36px; } .hero-title { font-size:22px; } }
.row { padding-top:12px; }
.rail-btn.active { background:#24262a; color:#fff; }
.rail-btn.active svg { color:#fff; }
.top-actions [aria-current=page] { background:#24262a; color:#fff; }
.row-head .more { width:auto; min-width:0; padding:6px; color:var(--muted); font-size:12px; }
@media(max-width:1124px) {
  :root { --mobile-queue:206px; }
  .hero { left:12px; right:12px; bottom:var(--mobile-queue); }
  /* The compact layout keeps the artwork whole instead of cropping it to a square. */
  .hero-cover img { object-fit:contain; }
  .hero-now,.hero-idle { gap:12px; padding:12px; }
  .hero-cover { width:min(calc(53vw / var(--ui-zoom)),230px); max-height:none; object-fit:contain; }
  .hero-title { font-size:clamp(24px,calc(6.8vw / var(--ui-zoom)),34px); }
  .hero-artist { font-size:13px; margin-top:6px; }
  .queue-panel { top:auto; bottom:0; left:0; right:0; height:var(--mobile-queue); width:auto; }
  .row-head { min-height:32px; padding:0 14px 0 20px; }
  .row-head h2 { font-size:18px; }
  .row-head .more { font-size:13px; }
  .row { flex-direction:row; align-items:flex-start; gap:4px; overflow-x:auto; overflow-y:hidden; padding:4px calc(50% - 55px) 20px; scroll-snap-type:x proximity; touch-action:pan-x; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent); }
  .row::-webkit-scrollbar { display:none; }
  .queue-item { width:110px; height:142px; }
  .queue-item .card { padding:4px; gap:6px; }
  .queue-item .art { width:96px; height:96px; border-radius:11px; }
  .queue-item .t { font-size:12px; }
  .queue-item .a { font-size:11px; }
  .queue-status { position:absolute; left:20px; bottom:0; padding:0; min-height:18px; pointer-events:none; }
  .playback-error { left:14px; right:14px; bottom:calc(var(--mobile-queue) + 8px); }
}
@media(max-width:1124px) and (max-height:792px) {
  :root { --mobile-queue:180px; }
  .queue-item { height:112px; width:92px; }
  .queue-item .art { width:76px; height:76px; }
  .row { padding-inline:calc(50% - 46px); }
  .hero-cover { width:126px; min-height:100px; }
  .hero-now { gap:8px; }
  .hero-title { font-size:22px; }
}
.ambient { background:var(--bg); }
.top-actions .ib.active { background:#24262a; color:#fff; }
@media(max-width:1124px) {
  .hero-cover { width:min(calc(53vw / var(--ui-zoom)),230px); max-height:none; }
}
@media(max-width:1124px) and (max-height:792px) { .hero-cover { width:126px; } }
/* Interface scale. The page is laid out in a smaller box and zoomed like browser zoom, so the
   breakpoints above are the original ones multiplied by the desktop factor, and viewport units
   and platform insets are divided by --ui-zoom. */
:root {
  --ui-zoom:1.1;
  --safe-top:max(calc(env(safe-area-inset-top,0px) / var(--ui-zoom)),var(--tg-safe-top,0px));
  --safe-bottom:max(calc(env(safe-area-inset-bottom,0px) / var(--ui-zoom)),var(--tg-safe-bottom,0px));
}
@media(min-width:1125px) { :root { --ui-zoom:1.25; } }
body { zoom:var(--ui-zoom); }
.rail-btn { min-width:52px; }
.hero-idle { color:var(--muted); font-size:14px; }
.hero-idle #hero-idle { color:var(--fg); font-size:20px; }
#search-quip { margin-top:6px; min-height:1.3em; }
body:not(.has-track) .hero-now { opacity:1; }
body:not(.has-track) .hero-text,
body:not(.has-track):not(.finding-track) .hero-cover,
.has-track .hero-idle { display:none; }
/* The playing track sits on the centre of the wave whenever the queue leaves room for it. */
@media(min-width:1125px) {
  .hero { right:max(26px,min(calc(var(--queue-width) + 18px),calc(100% - var(--queue-width) - 338px))); }
}
@media(min-width:1125px) {
  .rail-btn { width:48px; min-width:48px; }
  .hero { right:max(24px,min(calc(var(--queue-width) + 104px),calc(100% - var(--queue-width) - 404px))); }
  .hero-now { flex-direction:column; text-align:center; gap:22px; padding:16px 0; }
  .hero-cover { width:clamp(170px,min(calc(26vw / var(--ui-zoom)),calc(var(--app-height,calc(100dvh / var(--ui-zoom))) - 400px)),340px); }
  .hero-text { max-width:100%; }
  .hero-title { font-size:clamp(26px,calc(2.9vw / var(--ui-zoom)),42px); max-width:none; }
  .hero-artist { font-size:15px; margin-top:10px; }
}
.artist-link { display:inline; color:inherit; font:inherit; text-align:inherit; border-radius:4px; user-select:text; }
/* The artist under the player title is a link too, with a thumb-sized tap area. */
.p-artist .artist-link { padding:3px 0; }
@media(hover:hover) { .artist-link:hover { color:var(--fg); text-decoration:underline; } }
.artist-link:active { transform:none; color:var(--accent); }
.section-title { font-size:15px; font-weight:600; color:var(--muted); margin:16px 0 10px; }
.albums { display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:14px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:6px; }
.albums::-webkit-scrollbar { display:none; }
.album-card { text-align:left; min-width:0; display:flex; flex-direction:column; gap:3px; scroll-snap-align:start; }
.album-card .art { width:100%; border-radius:10px; margin-bottom:5px; }
.album-card .t,.album-card .a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.album-card .t { font-size:13px; font-weight:500; }
.album-card .a { font-size:12px; color:var(--muted); }
#page-album { max-width:900px; margin:0 auto; padding:0 24px 32px; }
.album-back { color:var(--muted); padding:16px 0 8px; font-size:13px; }
.album-head { display:flex; gap:22px; align-items:flex-end; margin:6px 0 22px; }
.album-cover { width:min(40%,200px); flex:none; }
.album-cover .art { border-radius:14px; box-shadow:0 16px 40px #0007; }
.album-info { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.album-info .page-title { margin:0; overflow-wrap:anywhere; }
.album-kind,.album-meta { color:var(--muted); font-size:13px; }
.album-artists { font-size:15px; }
.album-play { margin-top:10px; padding:11px 24px; border-radius:24px; background:var(--accent); color:var(--bg); font-weight:600; }
#page-artist { width:calc(100% - 24px); max-width:900px; margin:0 auto; padding:12px clamp(12px,3vw,24px) 32px; border-radius:16px; background:#0b0c12df; }
.artist-avatar .art { border-radius:50%; box-shadow:0 16px 40px #0007; }
@media(max-width:760px) {
  .artist-head { align-items:center; }
  .artist-avatar { width:132px; }
}
.track.numbered { grid-template-columns:30px minmax(0,1fr) 44px; }
.track .no { color:var(--muted); text-align:center; font-size:13px; font-variant-numeric:tabular-nums; }
.track.current .no { color:var(--accent); }
@media(max-width:1124px) {
  .albums { grid-auto-columns:116px; }
  .album-head { gap:14px; }
  #page-album { padding-inline:20px; }
}
/* A narrow window, touch or not, gets the phone layout: bottom queue and the compact dock. */
/* Below the desktop layout the navigation is a small dock in the middle, not a bar across the window. */
@media(max-width:1124px) {
  .rail { left:50%; right:auto; bottom:calc(var(--content-bottom) + 7px); transform:translateX(-50%); width:max-content; height:44px; padding:4px; gap:4px; justify-content:center; border:1px solid var(--line); border-radius:22px; background:#111316e6; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .rail-btn { height:36px; min-width:54px; border-radius:18px; }
}
.topbar { justify-content:flex-end; }
#fullscreen .i-collapse,#fullscreen.full .i-expand { display:none; }
#fullscreen.full .i-collapse { display:block; }
@media(min-width:1125px) { .rail-settings { margin-top:auto; } }
.setting-choice { flex-wrap:wrap; }
.settings-group { margin:0 0 16px; padding:14px clamp(12px,3vw,24px) 10px; border-radius:16px; background:#090b0d66; }
.settings-group h3 { margin:0; font-size:17px; }
.settings-group .setting-row { min-height:48px; gap:8px 16px; border-bottom:0; }
.settings-group small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.settings-group .setting-slider { margin:14px 0 20px; }
.settings-group output { font-variant-numeric:tabular-nums; }
.settings-channel { display:inline-flex; align-items:center; min-height:44px; padding-inline:12px; color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.top-actions #fullscreen { background:#000a; }
.top-actions #fullscreen:hover { background:#000c; }
@media(min-width:1125px) {
  .topbar { right:max(calc(8px / var(--ui-zoom)),var(--tg-safe-right,0px)); }
  .top-actions #fullscreen { width:calc(44px / var(--ui-zoom)); height:calc(44px / var(--ui-zoom)); }
}
[data-wave-color="mono"] .shape-fallback { filter:grayscale(1) brightness(var(--wave-brightness,.6)); }
[data-wave-color="iridescent"] .shape-fallback { animation:wave-colors 16s linear infinite; }
@keyframes wave-colors { from { filter:hue-rotate(0deg) brightness(var(--wave-brightness,.6)); } to { filter:hue-rotate(360deg) brightness(var(--wave-brightness,.6)); } }
.choices { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.choice { padding:9px 15px; border-radius:20px; background:var(--surface); color:var(--muted); font-size:14px; border:1px solid transparent; transition:background .16s,color .16s,border-color .16s; }
.choice[aria-pressed=true] { background:color-mix(in srgb,var(--accent) 18%,#101317); color:var(--fg); border-color:color-mix(in srgb,var(--accent) 55%,transparent); }
/* A cover that is still loading shows a moving highlight instead of an empty box. */
.hero-cover,.p-cover { position:relative; }
/* The highlight is a very wide -25deg band drawn as a separate strip that sweeps top to bottom;
   it is soft and translucent, and the cover clips it, so there is no hard tile seam. */
.art.loading::after,.hero-cover.loading::after,.p-cover.loading::after,.finding-track .hero-cover::after,
body.track-loading .hero-cover::after,body.track-loading .p-cover::after {
  content:""; position:absolute; top:50%; left:50%; width:110%; height:230%;
  margin:-115% 0 0 -55%; pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 18%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.04) 82%,rgba(255,255,255,0) 100%);
  transform:translateY(-140%) rotate(-25deg);
  animation:shimmer 2.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
body.track-loading .hero-cover::after,body.track-loading .p-cover::after { z-index:2; }
.art.loading .ph { opacity:0; }
/* A single pass, then a pause: the band leaves the cover before the loop restarts. */
@keyframes shimmer {
  0% { transform:translateY(-140%) rotate(-25deg); }
  42% { transform:translateY(140%) rotate(-25deg); }
  100% { transform:translateY(140%) rotate(-25deg); }
}
/* The artwork is already here but the track itself is still loading: keep the shine moving over the cover. */
body.track-loading .hero-cover img,body.track-loading .p-cover img { filter:brightness(.8) saturate(.97); transition:opacity .35s var(--ease-out),filter .25s var(--ease-out); }
/* The seek bar is a full-height hit area with the line and its handle drawn inside, so the
   handle is never clipped; both grow a little under the pointer. */
/* the bar straddles the player's top edge: the player goes above the side rail so the handle is whole */
.player { z-index:41; }
#seek { height:16px; background:none; }
#seek::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right,var(--accent) var(--fill,0%),#ffffff30 var(--fill,0%)); transition:height .15s; }
#seek::-webkit-slider-thumb { width:11px; height:11px; margin-top:-4px; box-shadow:0 1px 4px #0009; transition:width .15s,height .15s,margin-top .15s; }
#seek::-moz-range-track { height:3px; border-radius:2px; background:#ffffff30; }
#seek::-moz-range-progress { height:3px; border-radius:2px; background:var(--accent); }
#seek::-moz-range-thumb { width:11px; height:11px; }
.progress .buffered { top:6.5px; height:3px; border-radius:2px; transition:height .15s,top .15s; }
.progress:hover #seek::-webkit-slider-runnable-track,#seek:active::-webkit-slider-runnable-track { height:5px; }
.progress:hover #seek::-webkit-slider-thumb,#seek:active::-webkit-slider-thumb { width:15px; height:15px; margin-top:-5px; }
.progress:hover #seek::-moz-range-track,.progress:hover #seek::-moz-range-progress { height:5px; }
.progress:hover #seek::-moz-range-thumb { width:15px; height:15px; }
.progress:hover .buffered { top:5.5px; height:5px; }
/* Lyrics take the place of the cover: the sung line is bright and centred, the rest recede. */
.lyrics { position:absolute; inset:0; overflow-y:auto; scrollbar-width:none; text-align:center; overscroll-behavior:contain; -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent); mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent); }
.lyrics::-webkit-scrollbar { display:none; }
.lyrics::before,.lyrics::after { content:""; display:block; height:44%; }
.lyrics .line { margin:0; padding:8px 12px; font:600 clamp(19px,calc(2.3vw / var(--ui-zoom)),30px)/1.25 "Spotify Mix Title","Google Sans",system-ui,sans-serif; color:var(--fg); opacity:.3; transform:scale(.93); cursor:pointer; transition:opacity .4s,transform .45s var(--ease-out); }
.lyrics .line.active { opacity:1; transform:scale(1); }
.lyrics .line.past { opacity:.18; }
.lyrics .line.gap { letter-spacing:.3em; }
.lyrics.plain { -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent); }
.lyrics.plain::before,.lyrics.plain::after { height:8%; }
.lyrics.plain .line { opacity:.85; transform:none; cursor:default; }
body[data-page="home"].lyrics-on .player { border-top-color:transparent; }
.player .repeat:hover { background:none; }
.hero-now { transition:opacity .24s var(--ease-out),right .36s var(--ease-out); }
body.lyrics-on .hero-now { opacity:0; pointer-events:none; }
.repeat[data-repeat="once"] { position:relative; }
.repeat[data-repeat="once"]::after { content:"1"; position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font:700 9px/1 system-ui,sans-serif; }
#lyrics-toggle[aria-pressed=true] { color:var(--accent); }
@media(min-width:1125px) {
  body[data-page="home"].lyrics-on .player .progress { top:0; left:24px; right:24px; height:10px; }
  body[data-page="home"].lyrics-on .progress .buffered { top:3.5px; }
  body[data-page="home"].lyrics-on .progress:hover .buffered { top:2.5px; }
  /* The side rail runs to the top of the window; only its buttons stay below the system controls. */
  .rail { top:0; padding-top:calc(var(--content-top) + 18px); }
  /* With room for both, the lyrics stand to the right of the cover instead of replacing it. */
  body.lyrics-on .hero { right:24px; }
  body.lyrics-on .hero-now { opacity:1; pointer-events:auto; right:60%; }
  .hero-now .hero-cover { max-width:100%; }
  body.lyrics-on .hero-title { font-size:clamp(20px,calc(1.9vw / var(--ui-zoom)),30px); }
  .lyrics { left:44%; text-align:left; }
  .lyrics .line { transform-origin:left center; padding-inline:4px 12px; }
}
@media(hover:hover) { .lyrics:not(.plain) .line:hover { opacity:.75; } }
/* "не нравится" stands at the left of the playback controls. */
#dislike { display:grid; }
@media(max-width:479px) { .p-cover { display:none; } .player .ib { width:32px; } }
/* No lyrics for this track: the button stays grey whether or not lyrics are switched on. */
#lyrics-toggle.unavailable,#lyrics-toggle.unavailable[aria-pressed=true] { color:var(--muted); opacity:.35; }

/* ---- queue: less dead space above the list, and a smooth hide/show ---- */
.row-head { min-height:36px; padding:4px 4px 6px 12px; align-items:center; }
.row-head .more { height:28px; padding:2px 6px; border-radius:10px; }
.row { padding-top:6px; }
.queue-panel { transition:opacity .3s var(--ease-out),transform .36s var(--ease-out); }
.hero { transition:left .36s var(--ease-out),right .36s var(--ease-out),bottom .36s var(--ease-out),transform .36s var(--ease-out); }
@media(min-width:1125px) {
  body[data-page="home"] .main { top:var(--content-top); }
  body[data-page="home"] .hero { top:var(--top-h); }
  .queue-panel .row-head { padding:0 4px 4px 22px; }
  .queue-panel .row { width:calc(100% + clamp(32px,4vw,80px)); padding-top:0; mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 32px),transparent); }
}
@media(min-width:1125px) {
  /* Equal margins either side of the window keep the cover and its title exactly centred. */
  .hero { right:calc(var(--queue-width) + 92px); }
  body.queue-hidden .queue-panel { opacity:0; transform:translateX(-24px); pointer-events:none; }
  body.queue-hidden .hero { left:12px; right:80px; }
  body.queue-hidden .playback-error { left:12px; }
}
/* The playing track sits a little above the exact centre of the wave. */
.hero-now { transform:translateY(clamp(-20px,-2.2vh,-10px)); }
/* Round buttons stay perfect circles; wider playback buttons stay neat rectangles. */
.player .ib { width:40px; height:40px; border-radius:50%; }
.heart { border-radius:50%; }
@media(max-width:479px) { .player .ib { width:32px; height:32px; } }
/* Lyrics slide into view instead of popping in. */
.lyrics:not([hidden]) { animation:lyrics-in .5s var(--ease-out) both; }
@keyframes lyrics-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
/* Search lives in the side rail on desktop; on small screens it stays in the corner. */
.rail-search { display:none; }
@media(min-width:1125px) {
  .rail-search { display:flex; }
  #search-open { display:none; }
  /* A slimmer top strip leaves less empty air above the queue. */
  :root { --top-h:48px; }
  /* Queue open: the track sits a touch right of the window centre, then glides back. */
  body:not(.queue-hidden) .hero { transform:translateX(30px); }
  body.queue-hidden .hero { transform:none; }
  /* The wave drifts with the cover, so the glow stays behind the artwork. */
  .ambient { transition:transform .36s var(--ease-out); will-change:transform; }
  body[data-page="home"]:not(.queue-hidden) .ambient { transform:translateX(30px) scale(1.035); }
  body[data-page="home"].queue-hidden .ambient { transform:none; }
  .wordmark { display:none; }
}
@media(max-width:1124px) {
  /* Compact layout follows the iPhone mini-app: wordmark, round actions, tight queue head. */
  .topbar { justify-content:space-between; }
  .wordmark { display:block; font-size:17px; }
  .top-actions { gap:8px; }
  .top-actions .ib { width:42px; height:42px; background:none; color:var(--fg); }
  /* The artwork and title sit centered between the search buttons and the deck, a little above the player. */
  .hero-now { justify-content:flex-end; transform:none; padding-bottom:56px; }
  .row-head { min-height:26px; padding:0 14px 0 20px; }
  .row-head h2 { font-size:17px; }
  .row-head .more { height:24px; padding:0 4px; font-size:12px; }
  .row { padding-top:0; }
}

/* ---- compact home: artwork, one clean control deck, and the queue that slides in its place ---- */
@media(max-width:1124px) {
  :root { --mobile-player:172px; --mobile-queue:236px; }
  .main { bottom:calc(var(--nav-h) + var(--content-bottom)); }
  /* The artwork and title sit directly on the deck: the player slot is only as tall as its controls. */
  .hero { left:12px; right:12px; bottom:var(--mobile-player); container-type:size; }
  /* One dark deck at the bottom: the blur is masked, so its top edge dissolves into the artwork. */
  .rail { left:0; right:0; bottom:0; transform:none; width:auto; height:calc(var(--nav-h) + var(--content-bottom)); padding:0 max(10px,var(--tg-safe-right,0px)) var(--content-bottom) max(10px,var(--tg-safe-left,0px)); justify-content:space-around; gap:0; border:0; border-radius:0; background:var(--bg); }
  .player { position:fixed; z-index:35; left:0; right:0; bottom:calc(var(--nav-h) + var(--content-bottom)); height:var(--mobile-player); padding:12px 20px 4px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; gap:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; transition:opacity .22s var(--ease-out),transform .3s var(--ease-out); }
  .player::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#06070800,#060708c4 24%,#060708f2 62%,var(--bg)); backdrop-filter:blur(18px) saturate(1.06); -webkit-backdrop-filter:blur(18px) saturate(1.06); -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%); mask-image:linear-gradient(180deg,transparent,#000 34%); }
  body[data-page="home"].lyrics-on .player::before { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .player .p-left { display:none; }
  /* The seek bar carries the elapsed time on the left, what is left on the right, and repeat beside it. */
  .player .progress { position:relative; left:auto; right:auto; top:auto; height:auto; display:grid; margin:0 0 4px; }
  .player .progress .buffered,.player .progress #seek { grid-area:1 / 1; align-self:center; }
  .player .progress .buffered { position:static; }
  #seek { height:16px; }
  #seek::-webkit-slider-thumb { width:11px; height:11px; }
  .seek-times { display:flex; align-items:center; justify-content:space-between; font-size:11px; line-height:1; color:var(--muted); font-variant-numeric:tabular-nums; }
  .seek-end { display:flex; align-items:center; gap:4px; }
  /* Quiet outline actions around one big play button. */
  .player .p-mid { position:static; transform:none; display:flex; align-items:center; justify-content:center; gap:2px; margin:0 auto; }
  .player .p-mid .ib { width:48px; height:48px; border:0; background:none; border-radius:50%; color:#edeff3; }
  .player .p-mid .ib svg { width:25px; height:25px; }
  .player .pp { width:78px; height:78px; margin:0 10px; background:#f6f7f9; color:#000; box-shadow:0 14px 34px #0008,inset 0 1px #ffffff; }
  .player .pp svg { width:34px; height:34px; }
  .player .pp .i-pause { width:40px; height:40px; }
  .player .pp .i-play { width:36px; height:36px; margin-left:2px; }
  .player #dislike { display:grid; color:#8f939b; }
  .player #like { color:#8f939b; }
  .player #like.on { color:var(--accent); }
  /* Secondary actions: lyrics on the left, send and the queue on the right. */
  .player .p-right { position:static; display:flex; align-items:center; justify-content:center; gap:2px; }
  .player .p-right .ib { width:42px; height:38px; border:0; background:none; border-radius:50%; color:#a7abb3; }
  .player .p-right .ib svg { width:20px; height:20px; }
  .player #lyrics-toggle { order:1; color:#a7abb3; }
  .player #send { order:2; }
  .player #queue-open { order:3; display:grid; }
  /* Repeat moved down beside the secondary actions, at the far right. */
  .player #repeat-compact { display:grid; order:4; }
  .player .time,.player #repeat,.player .vol,.player #volume { display:none; }
  .hero-now { display:grid; grid-template:minmax(0,1fr) auto minmax(auto,1fr) / minmax(0,1fr); justify-items:center; padding-block:0; }
  .hero-now > .hero-cover { grid-row:2; }
  .hero-now > .hero-text,.hero-now > .hero-idle { grid-row:3; align-self:start; }
  body:not(.has-track):not(.finding-track) .hero-idle { align-self:center; grid-row:2; }
  /* The artwork fills the phone the way a now-playing screen does; the title leads straight into the deck. */
  .hero-now > .hero-cover { --cover-size:min(calc(89vw / var(--ui-zoom)),calc(var(--app-height,calc(100dvh / var(--ui-zoom))) * .545),448px,max(0px,calc(100cqh - 142px))); width:var(--cover-size); height:var(--cover-size); min-height:0; border-radius:22px; }
  .hero-title { font-size:clamp(26px,calc(7.4vw / var(--ui-zoom)),38px); }
  .hero-artist { font-size:14px; }
  .hero-why { display:none; }
  /* The queue slides up over the player; a tap on a track brings the controls back. */
  .queue-panel { z-index:36; top:auto; bottom:0; left:0; right:0; width:auto; height:var(--mobile-queue); background:none; border:0; opacity:0; transform:translateY(26px); pointer-events:none; transition:opacity .26s var(--ease-out),transform .34s var(--ease-out); }
  .queue-panel::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#06070800,#060708c4 24%,#060708f2 62%,var(--bg)); backdrop-filter:blur(18px) saturate(1.06); -webkit-backdrop-filter:blur(18px) saturate(1.06); -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%); mask-image:linear-gradient(180deg,transparent,#000 34%); }
  body.queue-shown .queue-panel { opacity:1; transform:none; pointer-events:auto; }
  body.queue-shown .player { opacity:0; transform:translateY(18px); pointer-events:none; }
  /* The sheet takes over the bottom of the screen: the old title does not ghost through its header. */
  .hero-text { transition:opacity .2s var(--ease-out); }
  body.queue-shown .hero-text { opacity:0; }
  .queue-close { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--muted); }
  .queue-close svg { width:20px; height:20px; }
  .row-head { min-height:34px; padding:4px 12px 0 20px; }
  .row-head h2 { font-size:18px; }
  .row-head .more { height:28px; padding:2px 4px; font-size:12px; }
  .row { padding:4px calc(50% - 60px) 16px; gap:10px; align-items:flex-start; }
  .queue-item { width:120px; height:146px; }
  .queue-item .card { padding:0; gap:6px; }
  .queue-item .art { width:106px; height:106px; border-radius:16px; box-shadow:0 12px 28px #0008; }
  .queue-item .t { font-size:12px; }
  .queue-item .a { font-size:11px; margin-top:1px; }
  .queue-item .current { background:none; }
  .queue-item .current .art { outline:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 62%,transparent),0 0 36px color-mix(in srgb,var(--accent) 32%,transparent),0 16px 38px #0009; }
  .queue-status { left:20px; bottom:0; }
  /* Other tabs keep a slim one-row mini-player whose fade matches the deck, without a border line. */
  body:not([data-page="home"]) .player { height:56px; padding:0 14px; flex-direction:row; align-items:center; gap:8px; }
  body:not([data-page="home"]) .player::before { background:linear-gradient(180deg,#06070800,#060708e6 48%,var(--bg)); }
  body:not([data-page="home"]) .player .progress { display:none; }
  body:not([data-page="home"]) .player .p-left { display:flex; flex:1; min-width:0; }
  body:not([data-page="home"]) .player .p-mid { margin:0; flex:none; }
  body:not([data-page="home"]) .player .p-mid .ib { width:36px; height:36px; }
  body:not([data-page="home"]) .player .p-mid #dislike,body:not([data-page="home"]) .player .p-mid #like { display:none; }
  body:not([data-page="home"]) .player .pp { width:42px; height:42px; margin:0; box-shadow:none; }
  body:not([data-page="home"]) .player .pp svg { width:20px; height:20px; }
  body:not([data-page="home"]) .player .pp .i-pause { width:22px; height:22px; }
  body:not([data-page="home"]) .player .p-right { display:none; }
  body:not([data-page="home"]) .main { bottom:calc(var(--nav-h) + var(--content-bottom) + 56px); }
  /* The collection is a full-height list: no player deck over it. */
  body[data-page="liked"] .player { display:none; }
  body[data-page="liked"] .main { bottom:calc(var(--nav-h) + var(--content-bottom)); }
  /* The brand text gives way to the artwork and title; search stays in the top right corner. */
  .topbar { justify-content:flex-end; }
  .wordmark { display:none; }
  .rail-btn { flex:1; max-width:110px; min-width:0; height:48px; border-radius:0; background:none; color:#979aa2; }
  .rail-btn svg { width:26px; height:26px; }
  .rail-btn.active { background:none; color:var(--accent); }
  .rail-btn.active svg { color:var(--accent); }
  .album-back { display:inline-block; }
}
@media(max-width:1124px) and (max-height:792px) {
  :root { --mobile-player:150px; --mobile-queue:190px; }
  .hero-now > .hero-cover { --cover-size:min(calc(86vw / var(--ui-zoom)),calc(var(--app-height,calc(100dvh / var(--ui-zoom))) * .485),392px,max(0px,calc(100cqh - 128px))); border-radius:18px; }
  .player { padding:8px 16px 2px; }
  .player .progress { margin-bottom:2px; }
  .seek-times { margin-top:4px; }
  .seek-times .ib { height:26px; }
  .player .p-mid .ib { width:42px; height:42px; }
  .player .p-mid .ib svg { width:21px; height:21px; }
  .player .pp { width:56px; height:56px; margin:0 6px; }
  .player .pp svg { width:24px; height:24px; }
  .player .p-right .ib { width:38px; height:32px; }
  .row-head { min-height:28px; padding:2px 12px 0 20px; }
  .row-head h2 { font-size:17px; }
  .row { padding:2px calc(50% - 44px) 10px; gap:8px; }
  .queue-item { width:88px; height:118px; }
  .queue-item .card { padding:0; gap:5px; }
  .queue-item .art { width:78px; height:78px; border-radius:12px; box-shadow:0 10px 24px #0008; }
  .queue-item .t { font-size:11px; }
  .queue-item .a { font-size:10px; }
}

/* ---- artwork: the whole frame stays visible, a blurred copy fills the square behind it ---- */
.hero-cover { background:#0b0d10; border:0; box-shadow:0 22px 36px -24px #000a; }
.hero-cover::before { content:""; position:absolute; inset:-14%; background:var(--art, none) center/cover no-repeat; filter:blur(18px) brightness(.6) saturate(1.05); transform:scale(1.08); }
.hero-cover img { display:block; position:relative; z-index:1; object-fit:contain; opacity:0; transition:opacity .35s var(--ease-out); }
.hero-cover.loading img { transition:none; }
.queue-item .art::before { content:""; position:absolute; inset:-12%; background:var(--art, none) center/cover no-repeat; filter:blur(12px) brightness(.6); transform:scale(1.08); }
.queue-item .art img { object-fit:contain; }
/* The fallback glow follows the artwork as well. */
.shape-fallback { background:radial-gradient(ellipse at var(--focus-x,50%) var(--focus-y,50%),color-mix(in srgb,var(--wave-color,var(--accent)) 25%,transparent),transparent calc(67% * var(--wave-size,1))); }
@media(max-width:1124px) and (max-height:620px) {
  /* Even on a low window the artwork keeps a real size instead of collapsing to an icon. */
  .hero-now > .hero-cover { --cover-size:min(calc(89vw / var(--ui-zoom)),calc(var(--app-height,calc(100dvh / var(--ui-zoom))) * .525),430px,max(0px,calc(100cqh - 104px))); }
  .hero-now { gap:8px; }
  .hero-title { font-size:clamp(20px,calc(6vw / var(--ui-zoom)),28px); }
  .hero-artist { margin-top:4px; }
}

/* ---- вход через telegram на обычном сайте ---- */
.tg-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; margin:6px 0 8px; padding:12px 18px; border:1px solid #ffffff1f; border-radius:16px; color:#eef8ff; background:linear-gradient(135deg,#2aabee,#229ed9 52%,#1b8bca); font:600 15px/1 "Google Sans",system-ui,sans-serif; letter-spacing:-.01em; cursor:pointer; box-shadow:0 14px 30px -18px #22a1ddcc,inset 0 1px 0 #ffffff3d; transition:transform .16s var(--ease-out),filter .16s,box-shadow .16s; }
.tg-button svg { width:21px; height:21px; flex:none; }
.tg-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.tg-button:active { transform:translateY(0) scale(.985); }
.tg-button[hidden] { display:none; }
.account-text { color:var(--muted); font-size:13px; line-height:1.45; }
.account-text.ok { color:var(--fg); }