#full [hidden]{display:none!important}#full>.ctl{justify-content:space-between;max-width:400px;gap:12px}#full>.ctl .ib{min-width:44px;min-height:44px}#full>.top{justify-content:flex-start;gap:16px}#full>.top small{flex:1;text-align:center;padding-right:44px}
#full>.act{display:flex;justify-content:center;gap:24px;margin:0 0 16px}#full>.act button{width:48px;min-height:48px;padding:10px;border-radius:50%;background:var(--card);color:var(--tx);border:1px solid var(--ui-border)}#full>.act button svg,#full #hrt svg{width:24px;height:24px}#full>.act button.selected{color:var(--active-red);border-color:var(--active-red)}#full>.act button:disabled{opacity:.45}#full #hrt{border:1px solid var(--ui-border);border-radius:50%;width:48px;height:48px}
.player-queue-handle{flex-shrink:0;width:100%;max-width:460px;display:flex;align-items:center;flex-direction:column;gap:6px;padding:14px 10px calc(12px + env(safe-area-inset-bottom,0px));margin-top:12px;border:0;background:transparent;color:var(--tx);font:inherit;cursor:pointer;min-height:76px}.player-queue-handle i,.queue-drag-handle{display:block;width:38px;height:4px;border-radius:4px;background:var(--mu);opacity:.6}.player-queue-handle span{font-size:14px;font-weight:600}.player-queue-handle small{font-size:11px;color:var(--mu)}
.clean-queue>h3{margin:16px 0 6px}.clean-queue>small{color:var(--mu)}.clean-queue h4{margin:22px 0 10px;font-size:13px;color:var(--mu)}.queue-drag-handle{margin:0 auto}.clean-queue-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ui-border)}.clean-queue-row>button{border:0;background:none;color:var(--tx);font:inherit;min-height:56px;cursor:pointer}.clean-queue-row>button:first-child{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;padding:10px 0}.clean-queue-row img{width:48px;height:48px;object-fit:cover;border-radius:10px}.clean-queue-row span:first-of-type{flex:1;min-width:0}.clean-queue-row b{display:block;overflow-wrap:anywhere;font-size:14px}.clean-queue-row small{display:block;color:var(--mu);margin-top:4px;font-size:12px}.clean-queue-row [data-queue-remove]{width:44px;font-size:24px}.clean-queue-row button:focus-visible{outline:2px solid var(--active-red);outline-offset:2px}.queue-drag-handle{touch-action:pan-y}
@media(min-width:860px) and (min-height:600px){#full.open{grid-template-rows:auto auto 80px auto auto auto auto auto}.player-queue-handle{grid-column:2;grid-row:8}#full>.art{grid-row:2/9}}
@media(max-width:859px){#full>.art{max-height:min(42dvh,400px)}#full>.meta{margin-top:14px}#full>canvas{height:44px}#full>.ctl{margin-bottom:16px}}
.downloads-note{font-size:13px;color:var(--mu);line-height:1.5}.download-row{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px;border:1px solid var(--ui-border);border-radius:14px}.download-row>button:first-child{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left}.download-row button{min-height:44px;background:none;border:0;color:var(--tx);font:inherit;cursor:pointer}.download-row img{width:52px;height:52px;object-fit:cover;border-radius:10px}.download-row b,.download-row small{display:block;overflow-wrap:anywhere}.download-row small{color:var(--mu);margin-top:4px;font-size:12px}.offline-permission{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--mu);margin:8px 0}.offline-permission input{width:20px;height:20px}
html[data-theme] #full>.ctl{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}html[data-theme] #full>.ctl>*{grid-area:auto;margin:0}html[data-theme] #full>.ctl #shf{order:0}html[data-theme] #full>.ctl #pv{order:1}html[data-theme] #full>.ctl #pp{order:2}html[data-theme] #full>.ctl #nx{order:3}html[data-theme] #full>.ctl #rpt{order:4}

.clean-queue-row.is-playing{background:var(--card);border:1px solid var(--active-red);border-radius:14px;padding:0 10px}.clean-queue-row em{display:block;color:var(--active-red);font-size:11px;font-weight:700;font-style:normal;margin-top:5px}.queue-more{display:block;width:100%;min-height:44px;margin:16px 0;background:var(--card);color:var(--tx);border:1px solid var(--ui-border);border-radius:12px;font:inherit;cursor:pointer}

.clean-queue-row.is-playing{position:sticky;top:0;z-index:2;background:var(--bg);box-shadow:0 8px 18px #00000012;margin-bottom:12px;border-width:2px}.clean-queue-row.is-playing [data-playing-icon]{color:var(--active-red);font-size:22px;padding:8px}.clean-queue-row.is-playing em{letter-spacing:.2px}

#full{overscroll-behavior:contain}#full>.top small{padding-right:0}#full #player-share{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ritm-glass-button);color:var(--tx)}#full #player-share svg{width:21px;height:21px}#full>canvas{height:52px;background:transparent;opacity:1;border-radius:0}@media(min-width:860px) and (min-height:600px){#full>canvas{height:64px}}
/* Short, reversible motion; closing layers immediately stop receiving input. */
#full,.shw{pointer-events:none}
#full.open,.shw.open{pointer-events:auto}
@media(prefers-reduced-motion:no-preference){
 .vw.open{animation:ritm-page-enter 170ms ease-out both}
 @keyframes ritm-page-enter{from{opacity:.55;translate:0 8px}to{opacity:1;translate:0 0}}
 @supports(transition-behavior:allow-discrete){
  #full{opacity:0;translate:0 24px;transition:opacity 180ms ease,translate 220ms cubic-bezier(.22,1,.36,1),display 220ms allow-discrete}
  #full.open{opacity:1;translate:0 0}
  .shw{opacity:0;transition:opacity 180ms ease,display 240ms allow-discrete}
  .shw.open{opacity:1}
  .shw .sh2{translate:0 36px;transition:translate 240ms cubic-bezier(.22,1,.36,1)}
  .shw.open .sh2{translate:0 0}
  @starting-style{#full.open{opacity:0;translate:0 24px}.shw.open{opacity:0}.shw.open .sh2{translate:0 36px}}
 }
 @supports not (transition-behavior:allow-discrete){
  #full.open{animation:ritm-page-enter 220ms ease-out both}
  .shw.open .sh2{animation:ritm-page-enter 240ms ease-out both}
 }
}
@media(prefers-reduced-motion:reduce){#full,.shw,.shw .sh2,.vw.open{animation:none!important;transition:none!important;translate:none!important}}

/* Full-width mobile artwork: preserve the original cover without cropping. */
@media(max-width:859px){html[data-theme] #full>.art{width:100%;max-width:460px;max-height:none;height:auto;aspect-ratio:1;object-fit:contain}}
/* Each rhythm keeps its own identity across browsing and playback. */
html[data-theme] .post .pl,html[data-theme] .cs>button:not(.rhythm-all){background:var(--ac);color:#fff;border-color:var(--ac)}
html[data-theme] .chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
html[data-theme] .post .tag{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 50%,transparent);background:color-mix(in srgb,var(--ac) 7%,var(--card))}
html[data-theme=dark] .post .tag{color:color-mix(in srgb,var(--ac) 60%,white)}
html[data-theme] #full{--active-red:var(--rhythm,#b42340);--active-red-bg:color-mix(in srgb,var(--rhythm,#b42340) 14%,var(--card));background:color-mix(in srgb,var(--rhythm,#b42340) 8%,var(--bg))}
html[data-theme=dark] #full{--active-red:color-mix(in srgb,var(--rhythm,#b42340) 60%,white);background:color-mix(in srgb,var(--rhythm,#b42340) 12%,var(--bg))}
html[data-theme] #full>.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;filter:blur(26px) saturate(120%);background-size:cover;background-position:center;transform:none}
html[data-theme=dark] #full>.amb{opacity:.38;filter:blur(26px) saturate(120%) brightness(.65)}
html[data-theme] #full>.ctl #pp,html[data-theme] #mini #mp{background:var(--rhythm,#b42340);color:white;border-color:var(--rhythm,#b42340)}
html[data-theme] #full #sk{accent-color:var(--rhythm,#b42340)}
html[data-theme] #full>.lb{color:var(--active-red);border-color:color-mix(in srgb,var(--rhythm,#b42340) 25%,var(--ui-border));background:color-mix(in srgb,var(--rhythm,#b42340) 6%,var(--card))}
html[data-theme] #full>.act button{color:var(--active-red)}
html[data-theme] #full>.ctl button{transition:background-color 200ms ease,color 200ms ease}
@media(prefers-reduced-transparency:reduce){html[data-theme] #full>.amb{display:none}}
@media(prefers-reduced-motion:reduce){html[data-theme] #full>.ctl button{transition:none}}

/* Suspend the obscured home animation while the player covers it. */
body:has(#full.open)>.bg{animation-play-state:paused;visibility:hidden}
/* Exact genre colour for both pressed thumbs, including their filled SVG. */
html[data-theme] #full>.act :is(#hrt,#player-dislike)[aria-pressed=true]{color:var(--rhythm)!important;border-color:var(--rhythm);background:color-mix(in srgb,var(--rhythm) 12%,var(--card));box-shadow:0 0 0 2px color-mix(in srgb,var(--rhythm) 16%,transparent)}
html[data-theme] #full>.act :is(#hrt,#player-dislike)[aria-pressed=true] svg{fill:currentColor;stroke:currentColor}
html[data-theme] #full>canvas{height:76px;max-height:76px;background:transparent;opacity:1}
@media(min-width:860px) and (min-height:600px){html[data-theme] #full.open{grid-template-rows:auto auto 84px auto auto auto auto}}
html[data-theme] #full :is(#hrt,#player-dislike)[aria-pressed=true] svg,html[data-theme] #full :is(#hrt,#player-dislike)[aria-pressed=true] svg path{color:var(--rhythm)!important;fill:currentColor!important;stroke:currentColor!important}
