/* Generated from site-new/styles/ by scripts/build-site-bundles.mjs — edit the chunks, not this file. */
/* styles.css chunk 1/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Self-hosted fonts — DM Sans (UI) + Outfit (display), served from ./fonts/ instead of Google.
   Faster (no third-party DNS/TLS handshake), private (no request to google), and resilient.
   These are the variable woff2 files Google itself serves; the unicode-ranges match Google's CSS
   so the browser only downloads the subset a glyph actually needs. font-display:swap keeps text
   visible while a face loads. Do not re-add the render-blocking @import / Google <link>. */
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(./fonts/dmsans-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(./fonts/dmsans-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url(./fonts/dmsans-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url(./fonts/dmsans-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:500 900;
  font-display:swap;
  src:url(./fonts/outfit-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:500 900;
  font-display:swap;
  src:url(./fonts/outfit-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Self-hosted pixel display font (Silkscreen, OFL) — used only by the Retro '90s skin headings. */
@font-face{
  font-family:'Silkscreen';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(./fonts/silkscreen-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Silkscreen';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(./fonts/silkscreen-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+FEFF,U+FFFD;
}

:root{
  --bg:#000000; --bg2:#000000; --panel:#000000; --line:#1a1a1a;
  --text:#f5f5f5; --muted:#b3b3b3; --accent:#1ed760;
  --accent-dim:rgba(30,215,96,.22);
  --glow-edge:rgba(255,255,255,.06);
  --memerap-font-ui:"DM Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Outfit is common “AI landing” display — keep for now; logo uses stamped tracking instead of soft SaaS weight */
  --memerap-font-display:"Outfit","DM Sans",system-ui,sans-serif;
  /* Sidebar bottom inset so rail mascot sits above the fixed player (.sticky z-index 1220) */
  --memerap-rail-player-clearance:104px;
  /* DM panel — space above .sticky player + room below topbar (see .memerap-chat-root) */
  --memerap-chat-above-player-gap:12px;
  --memerap-chat-top-reserve:96px;
  /* Left column width — keep in sync with .app-shell grid and memerap-bg-clear offsets */
  --memerap-rail-width:236px;
  /* Shared keyboard focus ring (see .rail-link:focus-visible block) */
  --memerap-focus:var(--accent);
  /* Soft accent glow for hovers (themes keep --accent) */
  --memerap-glow-accent:0 0 42px color-mix(in srgb,var(--accent) 18%,transparent);
}
*{box-sizing:border-box}
/* Keyboard a11y: hidden until focused, then pinned top-left above all chrome. */
.skip-link{
  position:fixed;left:-9999px;top:10px;z-index:400;
  background:var(--accent);color:#000;padding:10px 16px;border-radius:8px;
  font-weight:700;text-decoration:none;font-size:.9rem;
}
.skip-link:focus{left:10px;outline:2px solid #fff;outline-offset:2px}
main[tabindex="-1"]:focus{outline:none}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:var(--memerap-font-ui);
  font-optical-sizing:auto;
  /* Flat black; theme presets override when active. */
  background:var(--bg);
}
/* Full-screen cover / folder wallpapers (disabled — see player.js). */
.now-bg{display:none!important}
/* Background FX toggle removed from UI. */
#bgFxBtn{display:none!important}
/* seasonal-effects.js — fixed canvas FX; under .sticky player (1220), no hit-testing */
#memerapSeasonFx{
  position:fixed;
  inset:0;
  z-index:1210;
  pointer-events:none;
  overflow:hidden;
}
#memerapSeasonFx canvas{display:block;width:100%;height:100%}
/* memerap-fx.js — full-viewport flash + speed canvas (z-index below modals, above main UI) */
#memerapFxFlash{
  position:fixed;
  inset:0;
  z-index:1218;
  pointer-events:none;
  background:#fff;
  opacity:0;
  will-change:opacity;
}
#memerapSpeedFx{will-change:transform}
.sticky-inner.memerap-fx-impact{
  transition:transform .12s ease-out;
  transform:scale(1.01);
}
/* memerap-motion.js — eyecatch + title impact; --memerap-beat from player.js */
.memerap-eyecatch{
  position:fixed;
  inset:0;
  z-index:12380;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s;
}
.memerap-eyecatch.memerap-eyecatch--show{
  opacity:1;
  visibility:visible;
}
.memerap-eyecatch__rays{
  position:absolute;
  inset:-25%;
  transform-origin:50% 50%;
  background:repeating-conic-gradient(
    from 0deg,
    transparent 0deg 7deg,
    rgba(255,255,255,.045) 7deg 8deg
  );
  opacity:.55;
  animation:memerap-eye-spin 18s linear infinite;
}
.memerap-eyecatch__panel{
  position:relative;
  z-index:1;
  padding:22px 36px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,#444);
  background:linear-gradient(165deg,rgba(18,22,20,.94),rgba(6,8,8,.92));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 24px 80px rgba(0,0,0,.55),
    0 0 64px color-mix(in srgb,var(--accent) 22%,transparent);
  text-align:center;
}
.memerap-eyecatch__kicker{
  font-family:var(--memerap-font-display);
  font-weight:900;
  font-size:clamp(1.4rem,4vw,2.1rem);
  letter-spacing:.28em;
  color:color-mix(in srgb,var(--accent) 88%,#fff);
  text-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent);
}
.memerap-eyecatch__sub{
  margin-top:8px;
  font-size:clamp(0.78rem,2.1vw,0.92rem);
  font-weight:650;
  letter-spacing:0.02em;
  line-height:1.35;
  color:color-mix(in srgb,var(--muted) 90%,#fff);
}
.memerap-eyecatch__line{
  margin-top:12px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.85;
}
.memerap-eyecatch__dismiss{
  position:absolute;
  bottom:max(18px, env(safe-area-inset-bottom, 0px));
  left:50%;
  transform:translateX(-50%);
  pointer-events:auto;
  cursor:pointer;
  font:inherit;
  font-size:.78rem;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #444;
  background:#1a1a1a;
  color:var(--muted);
}
.memerap-eyecatch__dismiss:hover{
  color:var(--text);
  border-color:#666;
}
@keyframes memerap-eye-spin{
  to{transform:rotate(360deg)}
}
/* memerap-mascot-quips.js — speech bubble on .rail (anchored up from bottom so it sits near the art on tall sidebars) */
.memerap-mascot-bubble{
  position:absolute;
  left:50%;
  bottom:clamp(80px, 22vh, 300px);
  transform:translateX(-50%) translateY(10px);
  max-width:min(260px, calc(100% - 16px));
  padding:8px 28px 8px 10px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,#444);
  background:linear-gradient(155deg,rgba(14,16,18,.94),rgba(8,9,10,.92));
  box-shadow:0 10px 32px rgba(0,0,0,.4);
  font-size:0.78rem;
  font-weight:600;
  color:var(--text);
  line-height:1.25;
  text-align:center;
  z-index:30;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s var(--ease),visibility .28s var(--ease),transform .28s cubic-bezier(0.2,0.85,0.25,1);
}
.memerap-mascot-bubble.memerap-mascot-bubble--show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.memerap-mascot-bubble__text{display:block}
.memerap-mascot-bubble__mute{
  position:absolute;
  top:4px;
  right:6px;
  width:22px;
  height:22px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0;
  pointer-events:auto;
}
.memerap-mascot-bubble__mute:hover{color:var(--text)}
.memerap-live-rec{
  position:absolute;
  top:7px;
  right:max(10px,env(safe-area-inset-right,0px));
  z-index:4;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.14em;
  color:#ffb4b4;
  padding:3px 6px 3px 5px;
  border-radius:4px;
  border:1px solid rgba(255,80,80,0.45);
  background:rgba(40,0,0,0.35);
  box-shadow:0 0 0 1px rgba(0,0,0,0.35) inset;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
body.memerap-is-playing .memerap-live-rec{
  opacity:1;
  visibility:visible;
}
@keyframes memerap-title-pop{
  0%{transform:skewX(-3deg) scale(1.03);filter:brightness(1.25)}
  45%{transform:skewX(1.2deg) scale(1);filter:none}
  100%{transform:none;filter:none}
}
#nowTitle.memerap-title-hit,
#bigTitle.memerap-title-hit{
  animation:memerap-title-pop .5s cubic-bezier(.2,.85,.25,1) both;
}
#cover img.cover-img{
  transform:scale(calc(1 + var(--memerap-beat, 0) * 0.042));
  transition:transform .12s ease-out;
  will-change:transform;
}
#bigCover img.cover-img{
  transform:scale(calc(1 + var(--memerap-beat, 0) * 0.036));
  transition:transform .12s ease-out;
  will-change:transform;
}
/* Web Audio spectrum (player.js → #visualizer canvas.memerap-viz-canvas) */
.viz{
  /* Never shrink in the horizontal .ctrls scroller — flex-shrink was collapsing the canvas on dense pages (e.g. artist + now dock). */
  flex:0 0 96px;
  width:96px;
  min-width:88px;
  max-width:120px;
  height:36px;
  flex-shrink:0;
  align-self:center;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  transform-origin:50% 100%;
  transform:scaleY(calc(1 + var(--memerap-beat, 0) * 0.12));
  transition:transform .12s ease-out;
}
.viz canvas.memerap-viz-canvas{
  display:block;
  width:100%;
  height:100%;
  vertical-align:top;
}
.app-shell{
  position:relative; z-index:1;
  display:grid;grid-template-columns:var(--memerap-rail-width) 1fr;gap:16px;width:min(1720px,97%);margin:0 auto;
  overflow-x:hidden;
}

/* styles.css chunk 2/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Sticky column: single rail panel (.rail) with nav + mascot. */
.rail-col{
  position:sticky;top:10px;align-self:start;
  height:calc(100vh - 20px);
  min-height:0;min-width:0;width:var(--memerap-rail-width);
  display:flex;flex-direction:column;
  /* Sit above main column so wide mascot art / glow isn't painted under .wrap (z-index:3). */
  z-index:35;
  isolation:isolate;
  /* Clip vertical bleed: .rail box-shadow + mascot drop-shadows otherwise paint into padding-below-player strip */
  overflow:hidden;
  background:var(--bg);
}
.rail{
  flex:1 1 auto;
  min-height:0;
  padding:14px;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
  contain:paint;
  border:1px solid var(--line);border-radius:16px;
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 8px 22px rgba(0,0,0,.3);
  /* Beat glow was spamming the whole rail (incl. bottom profile) green — keep pulse on the player bar only. */
  transition:none;
  overflow:hidden;
}
@media (min-width:981px){
  /* Shorten the column instead of padding-bottom — empty padding was still catching shadow / glow */
  .rail-col{
    height:calc(100vh - 20px - var(--memerap-rail-player-clearance) - env(safe-area-inset-bottom,0px));
  }
}
.rail-logo{
  flex-shrink:0;
  margin-bottom:14px;
  /* Hard wordmark — no gradient text (reads as generic AI SaaS) */
  font-family:var(--memerap-font-display);
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
  -webkit-text-fill-color:#fff;
  line-height:1.15;
}
.rail-nav{display:grid;gap:8px;flex-shrink:0}
/* Decorative mascot — images from assets/mascots (see mascots-scan.php + rail-mascot.js) */
.rail-mascot{
  flex:1 1 auto;
  min-height:0;
  margin:0;
  position:relative;
  width:100%;
  padding-top:6px;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  z-index:6;
  overflow:hidden;
}
.rail-mascot[hidden]{display:none!important}
/* Corner GIFs — optional; profile bar stays visible (Discord-style) */
body.memerap-rail-mascot-off .rail-mascot{display:none!important}
.rail-footer{
  flex-shrink:0;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:10px;
  border-top:1px solid var(--line);
  position:relative;
  z-index:8;
}
.rail-mascot-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line)!important;
  background:#0a0a0a!important;
  color:#c8c8c8;font:inherit;font-size:.72rem;cursor:pointer;
}
.rail-mascot-toggle:hover{background:#141414!important;color:#fff}
.rail-mascot-switch{
  position:relative;width:36px;height:20px;flex-shrink:0;
  border-radius:999px;background:#333;border:1px solid #444;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.rail-mascot-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#888;transition:transform .18s var(--ease),background .18s var(--ease);
}
.rail-mascot-toggle.is-on .rail-mascot-switch{
  background:color-mix(in srgb,var(--accent) 35%,#1a1a1a);
  border-color:color-mix(in srgb,var(--accent) 55%,#444);
}
.rail-mascot-toggle.is-on .rail-mascot-switch::after{
  transform:translateX(16px);background:var(--accent);
}
.rail-mascot-toggle-label{font-weight:600;color:inherit}
.rail-mascot-toggle-mini{
  width:28px;height:28px;padding:0;margin:0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:#0a0a0a;color:#9a9a9a;cursor:pointer;
}
.rail-mascot-toggle-mini svg{width:14px;height:14px}
.rail-mascot-toggle-mini.is-on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.rail-mascot-hint{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(12px);
  z-index:12000;padding:10px 14px;border-radius:8px;
  background:#111;border:1px solid #333;color:#eee;font-size:.82rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.rail-mascot-hint.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.rail-profile-banner-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.rail-profile-banner-link:hover .rail-profile-banner{filter:brightness(1.08)}
.rail-mascot-toggle.is-on{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;
  background:color-mix(in srgb,var(--accent) 10%,#0a0a0a)!important;
}
.rail-mascot-toggle-label{font-weight:600}
.rail-user-mount{min-width:0}
.rail-user-panel{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a0a0a;
}
.rail-user-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 6px;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  border-radius:8px;
  text-align:left;
  font:inherit;
}
.rail-user-main:hover{background:#141414}
.rail-user-main[aria-expanded="true"]{background:#181818}
.rail-user-avatar-btn{
  appearance:none;border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:999px;flex-shrink:0;line-height:0;
}
.rail-user-avatar-btn:hover .rail-user-avatar{box-shadow:0 0 0 2px var(--accent,#1ed760)}
.rail-user-avatar-wrap{
  position:relative;
  flex-shrink:0;
  width:32px;height:32px;
}
.rail-user-avatar,
.rail-profile-avatar{
  width:32px;height:32px;
  border-radius:999px;
  object-fit:cover;
  display:block;
}
.rail-profile-avatar{width:56px;height:56px;border:4px solid #121212;background:#121212}
.rail-user-avatar.is-initial,
.rail-profile-avatar.is-initial{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent,#1ed760);color:#000;font-weight:800;font-size:.82rem;
}
.rail-profile-avatar.is-initial{width:56px;height:56px;font-size:1rem}
.rail-user-status-dot{
  position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:999px;
  background:var(--accent,#1ed760);border:2px solid #0a0a0a;box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.rail-user-copy{min-width:0;display:grid;gap:1px}
.rail-user-name{
  font-size:.82rem;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rail-user-status{
  font-size:.72rem;color:#9a9a9a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rail-user-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.rail-user-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:8px;
  background:transparent;color:#d8d8d8;cursor:pointer;
}
.rail-user-icon-btn:hover{background:#1a1a1a;color:#fff}
.rail-profile-popout{
  position:fixed;z-index:12820;
  width:340px;max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;
  border:1px solid #2b2d31;
  border-radius:8px;
  background:#111214;
  box-shadow:0 16px 40px rgba(0,0,0,.62);
  overflow:hidden;
  animation:railProfileIn .14s ease;
}
.rail-profile-popout.hidden{display:none!important}
@keyframes railProfileIn{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:none}
}
.rail-profile-head{position:relative;flex-shrink:0;padding-bottom:40px}
.rail-profile-banner-link{display:block;width:100%;border:0;padding:0;background:transparent;cursor:pointer}
.rail-profile-banner{
  height:60px;background-size:cover;background-position:center;
  background-color:#1a2420;
}
.rail-profile-body{padding:8px 12px 12px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rail-profile-avatar-row{position:absolute;left:12px;bottom:0;margin:0}
.rail-profile-avatar-wrap{position:relative;display:inline-block;width:72px;height:72px}
.rail-profile-avatar{width:72px;height:72px;border-radius:999px;border:6px solid #111214;background:#111214;object-fit:cover;display:block}
.rail-profile-avatar.is-initial{width:72px;height:72px;font-size:1.18rem}
.rail-profile-ident{display:grid;gap:2px;margin-bottom:10px}
.rail-profile-name{font-size:1.08rem;font-weight:800;color:#fff;line-height:1.2}
.rail-profile-handle{font-size:.78rem;color:#b5bac1}
.rail-profile-status-line{
  margin:8px 0 0;font-size:.78rem;color:#dbdee1;line-height:1.35;
  padding:8px 10px;border-radius:8px;background:#2b2d31;
}
.rail-profile-meta{margin:0 0 10px;font-size:.72rem;color:#b5bac1}
.rail-profile-actions{display:grid;gap:6px}
.rail-profile-action{
  display:flex;align-items:center;justify-content:center;
  min-height:32px;padding:6px 10px;border-radius:8px;
  border:0;background:#5865f2;color:#fff;
  font:inherit;font-size:.82rem;font-weight:600;text-decoration:none;cursor:pointer;
}
.rail-profile-action:hover{background:#4752c4;color:#fff;text-decoration:none}
.rail-profile-action--ghost{
  background:#2b2d31;color:#dbdee1;
}
.rail-profile-action--ghost:hover{background:#3a3c41}
.rail-profile-action--danger{background:transparent;color:#f23f43;min-height:28px;font-size:.72rem}
.rail-profile-action--danger:hover{background:#2a1414;color:#ff8a8a}
.rail-profile-anime{
  margin:0 0 10px;padding:10px;border-radius:8px;
  background:#2b2d31;
}
.rail-profile-anime-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:8px;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#b5bac1;
}
.rail-profile-anime-row{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;
}
.rail-profile-anime-poster{
  flex:0 0 auto;width:48px;height:68px;border-radius:4px;overflow:hidden;
  background:#1e1f22;
}
.rail-profile-anime-poster img{width:100%;height:100%;object-fit:cover;display:block}
.rail-profile-anime-empty{margin:0;font-size:.72rem;color:#9a9a9a;line-height:1.35}
.rail-profile-anime-head a,
.rail-profile-anime-head button{
  appearance:none;border:0;background:none;padding:0;font:inherit;
  color:#00a8fc;text-decoration:none;font-size:.62rem;cursor:pointer;
}
.rail-profile-anime-head a:hover,
.rail-profile-anime-head button:hover{text-decoration:underline}
.rail-card-overlay{
  position:fixed;inset:0;z-index:14000;
  display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.72);
}
.rail-card-overlay.hidden{display:none!important}
.rail-card-overlay-panel{
  position:relative;
  width:min(920px,96vw);
  height:min(680px,88vh);
  max-height:min(780px,90vh);
  display:grid;
  grid-template-columns:minmax(300px,340px) minmax(0,1fr);
  background:#111214;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #2b2d31;
  box-shadow:0 28px 80px rgba(0,0,0,.6);
}
.rail-profile-avatar-wrap .rail-user-status-dot{
  right:4px;bottom:4px;width:16px;height:16px;border-width:4px;border-color:#111214;
}
.discord-profile-av-wrap .rail-user-status-dot{
  right:4px;bottom:4px;width:18px;height:18px;border-width:4px;border-color:#2b2d31;
}
.rail-card-overlay-close{
  position:absolute;top:10px;right:10px;z-index:2;
  appearance:none;width:32px;height:32px;border:0;border-radius:8px;
  background:rgba(0,0,0,.45);color:#dbdee1;font-size:1.18rem;cursor:pointer;line-height:1;
}
.rail-card-overlay-close:hover{background:rgba(0,0,0,.7);color:#fff}
.discord-profile-card{
  background:#2b2d31;min-width:0;min-height:0;display:flex;flex-direction:column;
}
.discord-profile-head{position:relative;flex-shrink:0;padding-bottom:46px}
.discord-profile-banner{height:120px;background-size:cover;background-position:center;background-color:#1a2420}
.discord-profile-card-body{padding:8px 16px 16px;overflow:auto;flex:1;min-height:0;scrollbar-width:thin}
.discord-profile-av-row{position:absolute;left:16px;bottom:0;margin:0}
.discord-profile-av-wrap{position:relative;display:inline-block;width:80px;height:80px}
.discord-profile-msg-row{display:grid;gap:8px;margin-top:14px}
.discord-profile-msg-row .discord-profile-msg{margin:0}
.discord-profile-msg--ghost{background:#1e1f22;color:#fff}
.discord-profile-msg--ghost:hover{background:#111214;color:#fff}
.discord-profile-av,.discord-profile-av.is-initial{
  width:80px;height:80px;border-radius:999px;border:6px solid #2b2d31;object-fit:cover;display:block;
}
.discord-profile-av.is-initial{display:flex;align-items:center;justify-content:center;background:#5865f2;color:#fff;font-weight:800;font-size:1.4rem}
.discord-profile-name{margin:0;font-size:1.25rem;font-weight:800;color:#fff}
.discord-profile-handle{margin:2px 0 0;font-size:.82rem;color:#b5bac1}
.discord-profile-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.discord-profile-badge{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;
  background:#1e1f22;color:#dbdee1;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.discord-profile-bio{margin:8px 0 0;color:#dbdee1;font-size:.86rem;line-height:1.4}
.discord-profile-status{margin:8px 0 0;font-size:.82rem;color:#b5bac1}
.discord-profile-msg{
  display:flex;align-items:center;justify-content:center;margin:14px 0 0;
  min-height:38px;border:0;border-radius:8px;background:#5865f2;color:#fff;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
}
.discord-profile-msg:hover{background:#4752c4;color:#fff;text-decoration:none}
.discord-profile-dl{margin:14px 0 0;display:grid;gap:10px}
.discord-profile-dl div{display:grid;gap:2px}
.discord-profile-dl dt{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b5bac1}
.discord-profile-dl dd{margin:0;color:#dbdee1;font-size:.86rem}
.discord-profile-board{
  min-width:0;min-height:0;display:flex;flex-direction:column;background:#1e1f22;
}
.discord-profile-foot{
  margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px;
  font-size:.72rem;
}
.discord-profile-foot a,
.discord-profile-foot button{
  appearance:none;border:0;background:none;padding:0;font:inherit;
  color:#00a8fc;cursor:pointer;text-decoration:none;
}
.discord-profile-foot a:hover,
.discord-profile-foot button:hover{text-decoration:underline}
.discord-profile-foot .is-danger{color:#f23f43}
.rail-card-overlay-tabs{display:flex;gap:4px;padding:14px 16px 0;border-bottom:1px solid #2b2d31}
.rail-card-overlay-tab{
  appearance:none;border:0;background:transparent;color:#b5bac1;
  font:inherit;font-size:.82rem;font-weight:700;padding:8px 10px;border-radius:8px 8px 0 0;cursor:pointer;
}
.rail-card-overlay-tab.is-on{color:#fff;box-shadow:inset 0 -2px 0 #fff}
.rail-card-overlay-body{flex:1;min-height:0;overflow:auto;padding:16px;scrollbar-gutter:stable;scrollbar-width:thin}
.rail-card-overlay-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px;
}
.rail-card-overlay-item{
  display:grid;gap:6px;color:#dbdee1;text-decoration:none;min-width:0;
}
.rail-card-overlay-item img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:#111;
  display:block;
}
.rail-card-overlay-item .is-fallback{
  width:100%;aspect-ratio:2/3;border-radius:8px;background:#111;
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.rail-card-overlay-item span{
  font-size:.72rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rail-card-overlay-empty{margin:18px 4px;color:#9a9a9a;font-size:.82rem;line-height:1.45}
.rail-card-overlay-widget{
  background:#2b2d31;border-radius:12px;padding:12px;
}
.rail-card-overlay-widget h3{margin:0 0 10px;font-size:.78rem;font-weight:800;color:#fff;display:flex;align-items:baseline;gap:8px}
.rail-card-overlay-widget h3 span{font-weight:650;color:#b5bac1;font-size:.72rem}
@media (max-width:860px){
  .rail-card-overlay-panel{grid-template-columns:1fr;max-height:min(94vh,920px)}
  .discord-profile-banner{height:90px}
}
.rail-mascot-glow{
  position:absolute;
  left:-6%; right:-6%; bottom:0;
  height:58%;
  background:radial-gradient(ellipse 88% 85% at 50% 100%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%);
  opacity:.42;
  z-index:0;
  animation:rail-mascot-glow-pulse 4.8s ease-in-out infinite;
}
@keyframes rail-mascot-glow-pulse{
  0%,100%{opacity:.3;transform:scale(1) rotate(0deg)}
  50%{opacity:.5;transform:scale(1.02) rotate(.6deg)}
}
.rail-mascot-frame{
  --rail-mascot-box: min(308px, 92%);
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:var(--rail-mascot-box);
  height:var(--rail-mascot-box);
  max-width:280px;
  max-height:min(280px, 42vh);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  transform-origin:50% 100%;
}
.rail-mascot.is-visible .rail-mascot-frame{
  animation:rail-mascot-enter .72s cubic-bezier(.22,1,.36,1) both;
}
.rail-mascot-img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
  transform-origin:50% 100%;
  opacity:1;
  transition:opacity .38s var(--ease), filter .35s var(--ease);
}
/* Idle motion on the image so it does not fight with enter keyframes on .rail-mascot-frame */
.rail-mascot--motion.is-visible .rail-mascot-img{
  will-change:transform;
  animation:rail-mascot-idle 5.8s ease-in-out .65s infinite;
}
.rail-mascot-img.is-fading{
  opacity:0;
  animation-play-state:paused!important;
}
/* Small Discord / myEmotes stickers: center, soft plate, fill more of the rail slot */
.rail-mascot--sticker .rail-mascot-frame{
  align-items:center;
  justify-content:center;
  mask-image:none;
  -webkit-mask-image:none;
}
.rail-mascot--sticker .rail-mascot-frame::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:78%;
  height:78%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 22%,#fff6) 0%,transparent 58%),
    radial-gradient(circle at 50% 55%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 62%,transparent 78%);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:0;
  pointer-events:none;
}
.rail-mascot--sticker .rail-mascot-img{
  position:relative;
  z-index:1;
  width:86%;
  height:86%;
  max-width:86%;
  max-height:86%;
  object-fit:contain;
  object-position:center center;
  transform-origin:50% 50%;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.rail-mascot--sticker.rail-mascot--motion.is-visible .rail-mascot-img{
  animation:rail-mascot-sticker-idle 5.4s ease-in-out .5s infinite;
}
@keyframes rail-mascot-enter{
  0%{opacity:0;transform:translateY(18px) scale(.88)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes rail-mascot-idle{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  26%{transform:translate(3px,-7px) rotate(.9deg) scale(1.015)}
  52%{transform:translate(-3px,-11px) rotate(-.6deg) scale(1.022)}
  78%{transform:translate(-4px,-4px) rotate(.42deg) scale(1.01)}
}
@keyframes rail-mascot-sticker-idle{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1.08)}
  30%{transform:translate(2px,-5px) rotate(1.1deg) scale(1.12)}
  58%{transform:translate(-3px,-8px) rotate(-.8deg) scale(1.14)}
  82%{transform:translate(-2px,-3px) rotate(.5deg) scale(1.1)}
}
/* Clear wallpaper mode (player bg FX): main full width; sidebar hidden; mascot centered in left band */
body.memerap-bg-clear .app-shell{
  display:block;
  width:min(1560px,98%);
}
body.memerap-bg-clear .main-col{
  width:auto;
  margin-left:min(calc(var(--memerap-rail-width) + 16px), 92vw);
}
body.memerap-bg-clear .rail{
  display:flex !important;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:0!important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  justify-content:center;
}
body.memerap-bg-clear .rail-logo,
body.memerap-bg-clear .rail-nav{
  display:none !important;
}
body.memerap-bg-clear .rail-col{
  position:fixed;
  left:max(0px,calc((100vw - min(1560px, 98vw)) / 2));
  top:10px;
  bottom:calc(10px + var(--memerap-rail-player-clearance) + env(safe-area-inset-bottom,0px));
  width:min(var(--memerap-rail-width),28vw);
  max-width:var(--memerap-rail-width);
  z-index:40;
  pointer-events:none;
  height:auto;
  padding:0;
  justify-content:center;
  align-items:center;
  background:transparent;
  overflow:visible;
  border-radius:0;
}
body.memerap-bg-clear .rail-mascot{
  margin-top:0;
  flex:1;
  min-height:0;
  width:100%;
  max-height:none;
  padding-top:0;
  justify-content:center;
}
body.memerap-bg-clear .rail-mascot-frame{
  --rail-mascot-box: min(420px, 86%);
  flex:0 0 auto;
  width:var(--rail-mascot-box);
  height:var(--rail-mascot-box);
  max-width:392px;
  max-height:min(392px, calc(100vh - var(--memerap-rail-player-clearance) - 48px));
  align-items:center;
  justify-content:center;
  mask-image:none;
  -webkit-mask-image:none;
}
body.memerap-bg-clear .rail-mascot-img{
  width:100%;
  height:100%;
  object-position:center center;
}
body.memerap-bg-clear .rail-mascot-glow{
  inset:12% -10% 12% -10%;
  height:auto;
}
.rail-link{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:8px;
  font-size:.9rem;line-height:1.25;
  color:#f1f1f1;text-decoration:none;border:1px solid transparent;transition:.18s var(--ease);
  background:transparent;appearance:none;-webkit-appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer
}
.rail-link:link,
.rail-link:visited,
.rail-link:hover,
.rail-link:active,
.rail-link:focus,
.rail-link:focus-visible{
  color:#f1f1f1;
  text-decoration:none;
}
.rail-ico{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.rail-link:hover .rail-ico,.rail-link.active .rail-ico{opacity:1}
.rail-link:hover,.rail-link.active{background:#141414;border-color:var(--line)}
.rail-nav .rail-link:not(.active){background:#0a0a0a;border-color:var(--line)}
.rail-nav .rail-link:hover{background:#141414;border-color:#2a2a2a}
.rail-nav .rail-link.active{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:inset 3px 0 0 var(--accent);
}
.main-col{
  min-width:0;
  position:relative;
  z-index:1;
  overflow-x:hidden;
}
.topbar{
  /* Above #nowPanel in .main-col so Shortcuts / auth stay clickable under the dock */
  position:sticky;top:10px;z-index:30;margin-bottom:12px;padding:8px 4px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border:none;border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
  transition:none;
}
.topbar:hover{
  border-color:transparent;
  box-shadow:none;
}

/* styles.css chunk 3/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Soft “title card” inner glow (anime BGM / key-visual vibe) */
.topbar::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 38%),
    radial-gradient(110% 90% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 58%);
  opacity:.9;
}
.topbar-left,.topbar-right{position:relative;z-index:1;display:flex;gap:8px;align-items:center}
.topbar-search{
  position:relative;z-index:1;flex:1 1 auto;min-width:0;
  display:flex;justify-content:center;align-items:center;
  max-width:min(520px,46vw);margin:0 auto;
}
.topbar-search-shell{
  display:flex;align-items:center;gap:8px;width:100%;
  min-height:38px;padding:0 12px 0 12px;
  border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 78%,#000);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
  cursor:text;
}
.topbar-search-shell:focus-within{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
.topbar-search-icon{
  flex:0 0 auto;opacity:.55;font-size:1rem;line-height:1;color:var(--muted,#aaa);
}
.topbar-search-input{
  flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;
  color:inherit;font:inherit;font-size:.9rem;padding:8px 0;
}
.topbar-search-input::placeholder{color:var(--muted,#888);opacity:.9}
.topbar-search-kbd{
  flex:0 0 auto;font-size:.68rem;letter-spacing:.02em;
  padding:3px 7px;border-radius:6px;border:1px solid var(--line);
  color:var(--muted,#999);background:rgba(255,255,255,.04);
  font-family:inherit;
}
@media (max-width:720px){
  .topbar-search{max-width:none;flex:1 1 140px}
  .topbar-search-kbd{display:none}
}
body.memerap-mobile-shell-on .topbar-search{
  order:3;flex:1 1 100%;max-width:none;margin-top:2px;
}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;border:1px solid var(--line);background:#0a0a0a;color:#f2f2f2;border-radius:999px;padding:7px 12px;cursor:pointer;
  font-size:.86rem;text-decoration:none;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.chip:hover{
  background:#2a2a2a;
  border-color:color-mix(in srgb,var(--accent) 28%,#555);
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);
}
.chip.mode-on{background:#1e6f42;border-color:#2aa65f}
.wrap{width:100%;max-width:100%;margin:0 auto;padding:0 0 130px;box-sizing:border-box}
.wrap{position:relative;z-index:3}
.hero{
  border:1px solid var(--line);border-radius:16px;background:var(--bg);
  padding:18px 20px 20px;margin-bottom:0;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 20px 56px -28px rgba(0,0,0,.5);
}
/* AI-generated hero art (right side) with a left-to-right scrim so the title stays readable. */
.hero:not(.artist-hero){
  background:
    linear-gradient(90deg, var(--bg) 22%, color-mix(in srgb,var(--bg) 55%,transparent) 62%, color-mix(in srgb,var(--bg) 18%,transparent)),
    url(./assets/memerap-hero-bg.png) right center / cover no-repeat,
    var(--bg);
  min-height:148px;
}
/* Vault hero: dusk “sky” bands + screentone + corner brackets (content above via z-index) */
.hero:not(.artist-hero)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 58%,transparent),transparent) left 11px top 11px / 22px 2px no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 58%,transparent),transparent) left 11px top 11px / 2px 22px no-repeat,
    linear-gradient(270deg,color-mix(in srgb,var(--accent) 58%,transparent),transparent) right 11px top 11px / 22px 2px no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 58%,transparent),transparent) right 11px top 11px / 2px 22px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%,transparent),transparent) left 11px bottom 11px / 22px 2px no-repeat,
    linear-gradient(0deg,color-mix(in srgb,var(--accent) 42%,transparent),transparent) left 11px bottom 11px / 2px 22px no-repeat,
    linear-gradient(270deg,color-mix(in srgb,var(--accent) 42%,transparent),transparent) right 11px bottom 11px / 22px 2px no-repeat,
    linear-gradient(0deg,color-mix(in srgb,var(--accent) 42%,transparent),transparent) right 11px bottom 11px / 2px 22px no-repeat,
    radial-gradient(120% 85% at 50% -15%,rgba(138,99,210,.22),transparent 55%),
    radial-gradient(90% 55% at 0% 0%,rgba(255,122,168,.12),transparent 50%),
    radial-gradient(80% 50% at 100% 8%,rgba(110,200,255,.1),transparent 52%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 1.35px);
  background-size:
    22px 2px,2px 22px,22px 2px,2px 22px,22px 2px,2px 22px,22px 2px,2px 22px,
    100% 100%,100% 100%,100% 100%,5px 5px;
  opacity:.95;
  transition:transform .28s ease-out;
  transform:translate(
    calc((var(--memerap-px, 0.5) - 0.5) * 18px),
    calc((var(--memerap-py, 0.5) - 0.5) * 12px)
  );
}
.hero:not(.artist-hero) > *{position:relative;z-index:1}
.hero:not(.artist-hero)::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:200px;background:radial-gradient(60% 80% at 50% 0, rgba(30,215,96,.2), transparent 70%);pointer-events:none;z-index:0}
.hero:not(.artist-hero) h1{
  margin:0;line-height:1.12;
  font-size:clamp(1.65rem,3.4vw,2.15rem);
  letter-spacing:-.02em;
}
.hero:not(.artist-hero) p{margin:6px 0 0;color:var(--muted);font-size:.96rem;max-width:42em}
/* Search + shortcut row (index vault) */
.hero .search-row{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:min(520px,100%);margin:10px auto 0;
}
.hero .search-shell{position:relative;flex:1;min-width:min(280px,100%)}
.hero .search-shell .search{margin-top:0;width:100%;padding-right:40px}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;padding:0;border-radius:999px;
  border:1px solid #444;background:#2a2a2e;color:#e8e8e8;font-size:1rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.search-clear:hover{background:#333;border-color:#555}
.search-shortcut{flex-shrink:0;font-size:.68rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.kbd-hint.kbd-hint--neutral{
  border-color:#3d3d44;background:#252528;color:var(--muted);
}
.wrap > section + section{margin-top:1.25rem}
.hero-artist{
  display:flex;align-items:flex-end;gap:14px;padding:16px;border:1px solid #2d2d2d;border-radius:12px;
  background:linear-gradient(180deg,rgba(45,45,45,.95),rgba(18,18,18,.92));
}
.hero-cover{width:86px;height:86px;border-radius:12px;overflow:hidden;background:#0a0a0a;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#b8b8b8}
.hero-cover img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  image-orientation:from-image;
}
.artist-meta-row .hero-cover{
  width:clamp(186px,36vw,242px);
  height:clamp(186px,36vw,242px);
  border-radius:20px;
  flex-shrink:0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 14px 48px rgba(0,0,0,.55);
}
.hero.artist-hero{
  border-radius:16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 32px 80px -28px rgba(0,0,0,.75);
}
.artist-hero{
  min-height:300px;padding:0;display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;overflow:hidden;
  background:var(--bg);
}
.artist-hero::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--accent) 38%,transparent) 50%,
    transparent
  );
  pointer-events:none;
  z-index:1;
  opacity:.9;
}
.artist-hero-bg{
  display:none;
}
.artist-hero-fade{
  display:none;
}
.artist-banner-admin-wrap{
  position:absolute;top:14px;right:14px;z-index:6;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  max-width:min(560px,94vw);
}
.artist-banner-admin-wrap .chip:disabled{opacity:.45;cursor:not-allowed}
.artist-banner-admin-wrap.hidden{display:none!important;}
.artist-hero-content{
  position:relative;z-index:2;
  width:100%;
  max-width:min(960px,100%);
  padding:22px 22px 28px;
  box-sizing:border-box;
}
.artist-hero-text-block{
  min-width:0;
  max-width:min(720px,100%);
  margin:0 auto;
  text-align:center;
}
.artist-hero-kicker{
  margin:0 0 8px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 28%,#f8fcff);
  text-shadow:0 1px 2px rgba(0,0,0,.85);
}
.artist-name-lg{
  font-family:var(--memerap-font-display);
  font-size:clamp(2.25rem,5.8vw,4.75rem);
  line-height:1.02;
  margin:.1rem 0 .5rem;
  font-weight:900;
  letter-spacing:-.03em;
  color:#fafafa;
  text-shadow:0 2px 28px rgba(0,0,0,.88), 0 1px 3px rgba(0,0,0,.95);
}
.artist-hero-stats{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:10px auto 0;
  max-width:100%;
  padding:12px 20px;
  border-radius:12px;
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  color:#f0f4fa;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#0d0d0d,#080808);
  border:1px solid color-mix(in srgb,var(--line) 85%,#2a2a2a);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.artist-hero-text-block .open-btn{
  margin-top:14px;
  padding:9px 20px;
  font-size:.86rem;
  letter-spacing:.02em;
}
.artist-top-links{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.artist-top-links .link{
  border-color:color-mix(in srgb,var(--line) 70%,#333);
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.artist-top-links .link:hover{
  background:#1a1a1a;
  border-color:#4a4a4a;
  transform:translateY(-1px);
}
.artist-meta-row{
  display:flex;
  gap:clamp(18px,3.5vw,32px);
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px;
}
/* Artist: section links + media filters in one card */
.artist-nav-stack{
  position:sticky;top:68px;z-index:18;
  margin:0 0 14px;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 44px -20px rgba(0,0,0,.5);
}
.artist-nav-stack .artist-tabs{
  position:static;
  margin:0;
  padding:9px 11px 10px;
  border:none;
  border-radius:0;
  border-bottom:1px solid var(--line);
  background:#050505;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.artist-nav-stack .artist-toolbar{
  margin:0;
  padding:8px 11px 10px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  background:#0a0a0a;
}
.artist-filter-chip{
  font-size:.82rem;
  padding:6px 11px;
}
.artist-tabs{
  position:sticky;top:68px;z-index:18;margin:0 0 12px;padding:8px 10px;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  display:flex;gap:8px;flex-wrap:wrap;
}
.artist-toolbar{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;
  max-width:100%;
  box-sizing:border-box;
}
.artist-tab{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:#0a0a0a;color:#efefef;text-decoration:none;font-size:.86rem
}
.artist-tab:hover{background:#2a2a2a;border-color:#4a4a4a}
.search{margin-top:12px;width:100%;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:#0a0a0a;color:var(--text);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.search:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 45%,#4b4b4b);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent)}
.panel{
  position:relative;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:.55;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.038) 1px,transparent 1.25px);
  background-size:4px 4px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12));
}
.panel-head,.panel-body{position:relative;z-index:1}
.panel-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Playlist detail: avoid a stretched empty “column” between title and action chips */
.panel-head.panel-head--playlist-detail{
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
}
.panel-head.panel-head--playlist-detail .pl-detail-title{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:0 1 auto;
}
.panel-head.panel-head--playlist-detail .pl-detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-left:auto;
}
.panel-head strong{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 55%,var(--text));
}
.panel-body{padding:15px 16px}
@keyframes memerap-tracks-reveal{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes memerap-card-shine{
  0%{background-position:12% 20%}
  50%{background-position:88% 55%}
  100%{background-position:12% 20%}
}
#tracks.memerap-tracks-reveal > .cards{
  animation:memerap-tracks-reveal .42s ease-out both;
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:18px}
.memerap-share-menu{
  min-width:240px;
  max-width:min(320px, calc(100vw - 16px));
  padding:6px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background:#151922;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.memerap-share-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:.86rem;
  cursor:pointer;
}
.memerap-share-menu-item:hover{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
}
.continue-panel{margin-top:0}
.continue-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(160px,200px);
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
}
.continue-card{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0a0a0a;
  padding:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  scroll-snap-align:start;
  overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:220px;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.continue-card:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.continue-card .thumb{aspect-ratio:1;overflow:hidden}
.continue-card .meta{padding:10px 12px 12px}
.continue-card .name{font-size:.9rem;font-weight:600}
.continue-card .sub{font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.35}
.h-rail{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.h-rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow:auto;scroll-behavior:smooth;padding:2px 0 6px}
.h-rail-track .card{min-width:260px}
.h-rail-track .card.row{
  grid-template-columns:40px minmax(0,1fr) 36px 36px;
  gap:10px;
  padding:12px;
  border-radius:12px;
  border-bottom:none;
  align-items:center;
}
.h-rail-track .card.row .play{width:36px;height:36px}
.h-rail-track .card.row .col-title .title{
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.h-rail-track .card.row .tiny{
  white-space:normal;
  line-height:1.35;
}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0a0a0a;cursor:pointer;text-decoration:none;color:inherit;transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);content-visibility:auto;contain-intrinsic-size:220px}
.card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 32%,#3d3d3d);
  box-shadow:
    0 14px 34px rgba(0,0,0,.36),
    0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),
    0 0 48px color-mix(in srgb,var(--accent) 10%,transparent);
}
.thumb{aspect-ratio:1/1;background:#0a0a0a;display:flex;align-items:center;justify-content:center;color:#a9a9a9}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* Respect JPEG/WebP EXIF orientation so uploads aren’t stuck sideways in the grid */
  image-orientation:from-image;
}

/* styles.css chunk 4/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Covers ease in as they decode. Base stays opaque on purpose: if the animation never
   runs (content-visibility skipping, reduced motion, older engines) the art still shows. */
.thumb .cover-img{
  animation:memerap-cover-fade .32s ease both;
}
@keyframes memerap-cover-fade{
  from{opacity:0;transform:scale(1.02)}
  to{opacity:1;transform:none}
}
.thumb .cover-img,
.cover .cover-img,
#nowPanel .np-cover .cover-img{
  background:#141414;
}
@media (prefers-reduced-motion: reduce){
  .thumb .cover-img{animation:none;transform:none}
}
.thumb picture,
.cover picture,
#nowPanel .np-cover picture{
  display:contents;
}
.member-card{overflow:visible}
.member-thumb{aspect-ratio:16/7;position:relative;background:#1d2a42;overflow:hidden;border-radius:12px 12px 0 0;min-height:72px}
.member-thumb-banner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
  image-orientation:from-image;
}
.member-avatar{
  position:absolute;left:12px;bottom:-22px;width:56px;height:56px;border-radius:999px;
  border:2px solid var(--bg,#121212);background:#23355a;color:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-weight:800;font-size:1.05rem;
  z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.member-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;image-orientation:from-image}
.member-card .meta{padding:36px 12px 12px}
.member-profile-hero{display:grid;gap:8px}
.member-profile-banner{
  position:relative;
  min-height:170px;border:1px solid #2f3f5e;border-radius:12px;overflow:hidden;background:#1a2740;
  background-size:cover;background-position:center;
}
.member-profile-banner-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
  image-orientation:from-image;
}
.member-profile-overlay{
  position:relative;
  z-index:1;
  min-height:170px;background:linear-gradient(180deg, rgba(6,10,18,.25), rgba(6,10,18,.84));
  display:flex;align-items:flex-end;gap:12px;padding:12px;
}
.member-profile-avatar{
  width:88px;height:88px;border-radius:999px;border:2px solid #213255;background:#253962;color:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800;font-size:1.3rem;
}
.member-profile-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;image-orientation:from-image}
.meta{padding:11px 12px 13px;display:flex;flex-direction:column;gap:2px;min-height:0}
.name{
  font-weight:700;font-size:1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2;
}
.sub{font-size:.82rem;color:var(--muted)}
.open-btn{
  display:inline-block;margin-top:6px;padding:6px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,#3a3a3a);
  background:linear-gradient(180deg,rgba(36,52,40,.95),rgba(22,28,24,.98));
  color:#ecfdf3;font-size:.78rem;font-weight:600;text-decoration:none;
  box-shadow:0 4px 22px var(--accent-dim),0 0 0 1px rgba(255,255,255,.04) inset;
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.open-btn:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 65%,#444);
  box-shadow:0 10px 32px rgba(30,215,96,.32),0 0 0 1px rgba(255,255,255,.06) inset;
}
/* Library grid: calmer secondary line + ghost CTA so cover art dominates */
.cards > a.card .sub{
  font-size:.82rem;
  color:color-mix(in srgb,var(--muted) 88%,transparent);
  margin-top:1px;
}
.cards > a.card .open-btn{
  align-self:flex-start;
  margin-top:10px;
  padding:7px 14px;
  min-height:34px;
  font-size:.82rem;
  border:1px solid #3a3a3a;
  background:#1e1e1e;
  color:color-mix(in srgb,var(--muted) 70%,#e8e8e8);
  box-shadow:none;
}
.cards > a.card .open-btn:hover{
  color:#f4fdf6;
  border-color:color-mix(in srgb,var(--accent) 48%,#444);
  background:linear-gradient(180deg,rgba(32,46,36,.92),rgba(20,24,22,.98));
  box-shadow:0 4px 20px var(--accent-dim);
  transform:translateY(-1px);
}
.list{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
@keyframes memerap-row-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.panel-body .list .row{
  animation:memerap-row-in .42s cubic-bezier(.22,1,.36,1) backwards;
}
.panel-body .list .row:nth-child(1){animation-delay:.03s;}
.panel-body .list .row:nth-child(2){animation-delay:.06s;}
.panel-body .list .row:nth-child(3){animation-delay:.09s;}
.panel-body .list .row:nth-child(4){animation-delay:.12s;}
.panel-body .list .row:nth-child(5){animation-delay:.15s;}
.panel-body .list .row:nth-child(6){animation-delay:.18s;}
.panel-body .list .row:nth-child(7){animation-delay:.21s;}
.panel-body .list .row:nth-child(8){animation-delay:.24s;}
.panel-body .list .row:nth-child(9){animation-delay:.27s;}
.panel-body .list .row:nth-child(10){animation-delay:.30s;}
.row{
  display:grid;
  grid-template-columns:24px 34px minmax(0,1.5fr) minmax(0,1fr) minmax(0,.85fr) minmax(52px,72px) 36px 36px;
  gap:10px;
  align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--line); cursor:pointer;transition:background .18s var(--ease), transform .18s var(--ease);
  content-visibility:auto;
  contain-intrinsic-size:auto 52px;
}
.row:last-child{border-bottom:none}
.row:hover{background:#0a0a0a;transform:translateX(2px)}
.row-index{color:#8c8c8c;font-size:.82rem;min-width:20px;text-align:right}
.row.is-active{
  background:linear-gradient(90deg, rgba(30,215,96,.18), rgba(30,215,96,.04));
  box-shadow:inset 3px 0 0 rgba(30,215,96,.65);
}
.play{
  position:relative;
  overflow:hidden;
  width:32px;height:32px;border:1px solid var(--line);background:#0a0a0a;color:#fff;border-radius:999px;cursor:pointer;
}
.play.has-cover{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  border-color:#5a5a5a;
}
.play.has-cover .play-cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
  image-orientation:from-image;
}
.play.has-cover .play-glyph{
  position:relative;
  z-index:1;
}
.title{font-weight:700}
.tiny{font-size:.82rem;color:var(--muted)}
.col-title{min-width:0}
.col-title .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Track lists: allow up to two lines so long meme titles don’t blow the grid */
.panel-body .list .row .col-title .title{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.28;
}
.col-album,.col-added,.col-duration{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:.72rem;border:1px solid #3a3a3a;border-radius:999px;padding:5px 9px;color:#ddd}
button.tag.memerap-time-chip{
  font:inherit;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  min-width:7.2rem;
  text-align:center;
  cursor:pointer;
  background:linear-gradient(180deg,#1f1f23,#161618);
  color:var(--text);
}
button.tag.memerap-time-chip:hover{
  border-color:color-mix(in srgb,var(--accent) 35%,#484848);
}
.row .icon.row-more,
.row .icon.row-dl{
  opacity:.7;
  flex-shrink:0;
  align-self:center;
  justify-self:center;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  font-size:.82rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.row:hover .icon.row-more,.row:hover .icon.row-dl{opacity:1}
/* Playlist track row: extra ✕ column — base .row is 8 tracks; without 9 cols the ⋯ wraps alone */
.row.row--pl{
  grid-template-columns:24px 34px minmax(0,1.1fr) minmax(0,.72fr) minmax(0,.62fr) minmax(44px,56px) 36px 36px 36px;
}
.row .icon.row-rm-pl{
  opacity:.7;
  flex-shrink:0;
  align-self:center;
  justify-self:center;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  font-size:.78rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.row:hover .icon.row-rm-pl{opacity:1}
.empty{padding:16px 14px;color:var(--muted);font-size:.9rem;line-height:1.45}
.empty.load-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 16px}
.load-error-title{color:var(--text);font-size:1rem;font-weight:600}
.load-error-sub{color:var(--muted);font-size:.9rem}
.empty.load-error .chip{margin-top:4px;cursor:pointer}
a.link{color:#f5f5f5;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#0a0a0a}

.video-wrap{display:none;margin-bottom:12px}
.video-wrap.show{display:block}
.video-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
#videoPlayer{width:100%;max-height:58vh;background:#000;display:block}

/* Permanent host outside #main — SPA nav must not unmount the MV player */
#memerapVideoHost{
  position:fixed;
  inset:auto;
  right:0;
  bottom:0;
  width:0;
  height:0;
  z-index:1280;
  pointer-events:none;
  overflow:visible;
}
#memerapVideoHost .video-wrap{
  pointer-events:auto;
}

/* Floating music-video popout — pinned above sticky, clear of corner chrome */
.video-wrap.video-wrap--popout.show,
#memerapVideoHost .video-wrap.video-wrap--popout.show{
  display:block !important;
  position:fixed !important;
  right:max(16px, env(safe-area-inset-right)) !important;
  bottom:calc(var(--memerap-player-height, 96px) + 18px + env(safe-area-inset-bottom, 0px)) !important;
  left:auto !important;
  top:auto !important;
  width:min(420px, calc(100vw - 32px)) !important;
  height:auto !important;
  max-height:min(70vh, 520px) !important;
  z-index:1280 !important;
  margin:0 !important;
  /* Do NOT set inset:auto here — it overrides right/bottom and parks the MV off-screen. */
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 40%, rgba(0,0,0,.35)),
    #0c0c0e;
  box-shadow:
    0 22px 56px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 1px 0 rgba(255,255,255,.1) inset;
  overflow:hidden;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.video-wrap.video-wrap--popout .video-popout-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 12px;
  background:rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.video-wrap.video-wrap--popout .video-popout-title{
  font-size:12px;
  font-weight:650;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1;
}
.video-wrap.video-wrap--popout .video-popout-actions{
  display:flex;
  gap:6px;
  flex:none;
}
.video-wrap.video-wrap--popout .video-popout-actions .chip{
  padding:4px 10px;
  font-size:11px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
}
.video-wrap.video-wrap--popout .video-popout-actions .chip:hover{
  background:rgba(255,255,255,.14);
}
.video-wrap.video-wrap--popout .video-box{
  border:0;
  border-radius:0;
  background:#000;
  position:relative;
  line-height:0;
}
.video-wrap.video-wrap--popout #videoPlayer,
.video-wrap.video-wrap--popout video{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:min(42vh, 280px) !important;
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:#000;
  position:relative !important;
  inset:auto !important;
}
/* Don't stack float mini on top of the MV window */
body.memerap-video-popout-on .memerap-float-mini,
html.memerap-video-popout-on .memerap-float-mini,
body:has(#memerapVideoHost .video-wrap.show) .memerap-float-mini,
html:has(#memerapVideoHost .video-wrap.show) .memerap-float-mini{
  display:none!important;
}
@media (max-width:700px){
  .video-wrap.video-wrap--popout.show,
  #memerapVideoHost .video-wrap.video-wrap--popout.show{
    left:10px !important;
    right:10px !important;
    width:auto !important;
    bottom:calc(var(--memerap-player-height, 78px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .video-wrap.video-wrap--popout #videoPlayer,
  .video-wrap.video-wrap--popout video{
    max-height:32vh !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .video-wrap.video-wrap--popout.show{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

.sticky{
  /* Above #nowPanel dock in .main-col (z-index 12) so time chip + Big View receive clicks; below queue drawer (1300) + modals. */
  position:fixed;left:0;right:0;bottom:0;z-index:1220;
  border-top:1px solid color-mix(in srgb,var(--accent) 26%,#2f2f34);
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.06),
    0 -20px 56px rgba(0,0,0,.55),
    0 0 0 1px var(--glow-edge) inset;
}
.sticky-inner{
  width:min(1560px,98%);margin:0 auto;padding:10px 0;
  /* Now-playing column capped so transport controls sit left of remaining space (no huge mid-gap). */
  display:grid;grid-template-columns:76px minmax(200px,min(520px,44vw)) minmax(0,1fr);gap:12px;align-items:center
}
.sticky-inner > div:nth-child(2){
  min-width:0;
}
.cover{
  --memerap-aura-r:30;
  --memerap-aura-g:215;
  --memerap-aura-b:96;
  width:76px;height:76px;border-radius:12px;border:1px solid var(--line);background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;overflow:hidden;color:#b0b0b0;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35),
    0 0 28px var(--accent-dim),
    0 0 36px rgba(var(--memerap-aura-r),var(--memerap-aura-g),var(--memerap-aura-b),.28);
}
.cover img{width:100%;height:100%;object-fit:cover;object-position:center;image-orientation:from-image}
.meta-title{
  font-weight:800;font-size:clamp(.92rem,1.45vw,1.04rem);
  letter-spacing:-.015em;
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.meta-sub{
  font-size:.78rem;font-weight:500;color:color-mix(in srgb,var(--muted) 92%,transparent);
  margin-top:1px;
  line-height:1.28;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ctrls{
  display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px 10px;
  justify-content:flex-start;
  max-width:none;
}

/* styles.css chunk 5/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Play-bar volume: chip + accent fill + ticks + mobile sheet (see player.js) */
.memerap-volume-wrap{
  --memerap-vol-pct:90%;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px 3px 5px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  background:linear-gradient(180deg,#26262a,#1b1b1f);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 0 0 1px rgba(0,0,0,.25) inset;
  flex-shrink:0;
  align-self:center;
  transition:border-color .18s var(--ease),box-shadow .28s var(--ease),background .18s var(--ease);
}
.memerap-volume-wrap:hover{
  border-color:color-mix(in srgb,var(--accent) 28%,#484848);
}
.memerap-volume-wrap.memerap-volume-active{
  border-color:color-mix(in srgb,#2aa65f 52%,var(--line));
  box-shadow:
    0 0 18px rgba(30,215,96,.18),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 0 0 1px rgba(0,0,0,.22) inset;
}
.memerap-volume-wrap.memerap-volume-muted{
  opacity:.88;
}
.memerap-volume-wrap .memerap-volume-mute.icon{
  min-width:34px;
  min-height:34px;
  padding:5px 9px;
  font-size:.78rem;
}
.memerap-vol-range{
  -webkit-appearance:none;
  appearance:none;
  --memerap-vol-pct:90%;
  width:96px;
  max-width:min(96px,18vw);
  height:32px;
  margin:0;
  padding:0 2px;
  background:transparent;
  cursor:pointer;
  align-self:center;
  vertical-align:middle;
  transition:filter .12s var(--ease);
}
.memerap-vol-range:focus{outline:none}
.memerap-vol-range::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.38) inset;
  background-image:
    linear-gradient(90deg,
      transparent 0 calc(25% - .4px),
      rgba(255,255,255,.11) 25%,
      transparent calc(25% + .4px) calc(50% - .4px),
      rgba(255,255,255,.11) 50%,
      transparent calc(50% + .4px) calc(75% - .4px),
      rgba(255,255,255,.11) 75%,
      transparent calc(75% + .4px) 100%
    ),
    linear-gradient(90deg,
      color-mix(in srgb,var(--accent) 82%,#050505) 0%,
      color-mix(in srgb,var(--accent) 72%,#121212) var(--memerap-vol-pct,0%),
      #2e2e34 var(--memerap-vol-pct,0%),
      #2e2e34 100%
    );
}
.memerap-vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:15px;
  height:15px;
  margin-top:-5px;
  border-radius:50%;
  background:linear-gradient(180deg,#f6f6f8,#cacad0);
  border:1px solid #141418;
  box-shadow:0 1px 5px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14) inset;
  cursor:pointer;
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.memerap-vol-range:hover::-webkit-slider-thumb{
  transform:scale(1.08);
  box-shadow:0 2px 8px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.18) inset;
}
.memerap-vol-range:active::-webkit-slider-thumb{
  transform:scale(1.14);
  background:linear-gradient(180deg,#fff,#dadadf);
}
.memerap-vol-range::-moz-range-track{
  height:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.38) inset;
  background-image:
    linear-gradient(90deg,
      transparent 0 calc(25% - .4px),
      rgba(255,255,255,.11) 25%,
      transparent calc(25% + .4px) calc(50% - .4px),
      rgba(255,255,255,.11) 50%,
      transparent calc(50% + .4px) calc(75% - .4px),
      rgba(255,255,255,.11) 75%,
      transparent calc(75% + .4px) 100%
    ),
    linear-gradient(90deg,#2e2e34,#2e2e34);
}
.memerap-vol-range::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 82%,#050505),
    color-mix(in srgb,var(--accent) 72%,#121212));
}
.memerap-vol-range::-moz-range-thumb{
  width:15px;
  height:15px;
  border:none;
  border-radius:50%;
  background:linear-gradient(180deg,#f6f6f8,#cacad0);
  box-shadow:0 1px 5px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14) inset;
  cursor:pointer;
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.memerap-vol-range:hover::-moz-range-thumb{
  transform:scale(1.08);
  box-shadow:0 2px 8px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.18) inset;
}
.memerap-vol-range:active::-moz-range-thumb{
  transform:scale(1.14);
  background:linear-gradient(180deg,#fff,#dadadf);
}
.memerap-vol-range::-moz-focus-outer{border:0}
.memerap-volume-wrap:focus-within{
  outline:2px solid var(--memerap-focus,var(--accent));
  outline-offset:2px;
}
.memerap-volume-wrap .memerap-vol-range:focus-visible{
  outline:none;
}
.memerap-volume-sheet-btn{
  display:none;
  flex-shrink:0;
  touch-action:manipulation;
  min-width:34px;
  min-height:34px;
  padding:5px 8px;
  font-size:1rem;
  line-height:1;
}
.memerap-volume-sheet-layer{
  display:none;
  position:fixed;
  inset:0;
  z-index:2100;
  align-items:flex-end;
  justify-content:center;
  padding:0 12px max(10px, env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
.memerap-volume-sheet-backdrop{
  position:absolute;
  inset:0;
  border:none;
  padding:0;
  margin:0;
  background:rgba(0,0,0,.58);
  cursor:pointer;
}
.memerap-volume-sheet-panel{
  position:relative;
  z-index:1;
  width:min(420px,100%);
  border-radius:16px 16px 12px 12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#1a1a1e,#121214);
  box-shadow:0 -16px 52px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  padding:14px 16px 16px;
  box-sizing:border-box;
}
.memerap-volume-sheet-panel:focus-within{
  outline:2px solid var(--memerap-focus,var(--accent));
  outline-offset:2px;
}
.memerap-volume-sheet-panel .memerap-vol-range:focus-visible{
  outline:none;
}
.memerap-volume-sheet-title{
  font-weight:800;
  font-size:.96rem;
  letter-spacing:.02em;
  margin:0 0 12px;
  color:var(--text);
}
.memerap-vol-range.memerap-vol-range--sheet{
  display:block;
  width:100%;
  max-width:none;
  height:44px;
  padding:0 4px;
}
.memerap-vol-range.memerap-vol-range--sheet::-webkit-slider-thumb{
  width:22px;
  height:22px;
  margin-top:-8px;
}
.memerap-vol-range.memerap-vol-range--sheet::-moz-range-thumb{
  width:22px;
  height:22px;
}
.memerap-volume-sheet-done{
  width:100%;
  margin-top:14px;
  min-height:44px;
  justify-content:center;
  font-weight:700;
}
html.memerap-volume-sheet-open body{
  overflow:hidden;
}
html.memerap-volume-sheet-open .memerap-volume-sheet-layer{
  display:flex;
}
@media (max-width:640px){
  .memerap-volume-sheet-btn{display:inline-flex}
  .memerap-vol-range#volumeSlider{
    width:76px;
    max-width:min(76px,22vw);
  }
}
@media (max-width:560px){
  .sticky-inner .ctrls .memerap-volume-wrap .memerap-volume-mute.icon,
  .sticky-inner .ctrls .memerap-volume-wrap .memerap-volume-sheet-btn{
    min-height:40px;
    min-width:40px;
    padding:7px 11px;
  }
}

/* Wide screens: keep transport on one line (avoids a lone “Big view” chip wrapping under seek) */
@media (min-width: 981px){
  /* Keep native <audio controls> inside the middle grid cell so it cannot overlap .ctrls hit targets. */
  .sticky-inner > div:nth-child(2){
    overflow:hidden;
  }
  .sticky-inner > div:nth-child(2) audio{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .sticky-inner > .ctrls{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .sticky-inner > .ctrls::-webkit-scrollbar{height:4px}
  .sticky-inner > .ctrls::-webkit-scrollbar-thumb{background:#3a3a42;border-radius:999px}
}
.icon{
  border:1px solid #3d3d42;background:linear-gradient(180deg,#2c2c30,#232326);color:#f3f3f3;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 12px;font-size:.82rem;
  cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
select.icon{
  min-height:40px;
  padding:8px 10px;
  font-size:.78rem;
}
.icon:hover{background:linear-gradient(180deg,#343438,#28282c);border-color:#555}
.icon:active{transform:scale(.96)}
.icon.mode-on{
  background:linear-gradient(180deg,#1a5c38,#14502f);border-color:#2aa65f;
  box-shadow:0 0 20px rgba(30,215,96,.22),0 1px 0 rgba(255,255,255,.08) inset;
}

/* Primary play/pause button in the sticky player (built by player.js setupCompactPlayerControls). */
.icon.memerap-play-btn{
  width:46px;min-width:46px;height:46px;min-height:46px;padding:0;
  font-size:1.08rem;line-height:1;border-radius:999px;
  background:linear-gradient(180deg,#1ed760,#16b34d);
  border-color:#16b34d;color:#04150a;font-weight:700;
  box-shadow:0 4px 16px rgba(30,215,96,.30);
}
.icon.memerap-play-btn:hover{
  background:linear-gradient(180deg,#28e96d,#19c456);border-color:#19c456;
  transform:scale(1.05);
}
.icon.memerap-play-btn:active{transform:scale(.97)}
.icon.memerap-play-btn.is-playing{
  background:linear-gradient(180deg,#2a2a2e,#222226);border-color:#3d3d42;color:#f3f3f3;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}

/* Overflow "⋯" menu that holds the secondary controls (speed, skin, share, download, +playlist). */
.memerap-more-wrap{display:inline-flex;flex:0 0 auto}
.memerap-more-menu{
  position:fixed;left:0;top:0;z-index:1330;
  min-width:210px;padding:8px;
  background:#16161a;border:1px solid #2c2c33;border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.04) inset;
  display:flex;flex-direction:column;gap:4px;
}
.memerap-more-menu.hidden{display:none}
.memerap-more-section{
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:10px 8px 4px;
}
.memerap-more-section:not(:first-child){
  border-top:1px solid rgba(255,255,255,.07);
  margin-top:4px;padding-top:12px;
}
.memerap-more-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 8px;border-radius:8px;
}
.memerap-more-row:hover{background:rgba(255,255,255,.04)}
.memerap-more-label{
  font-size:.82rem;color:var(--muted);white-space:nowrap;
}
.memerap-more-row .icon,
.memerap-more-row select.icon{flex:0 0 auto}

/* Left-corner player bar track actions button */
.memerap-player-actions-btn{
  flex-shrink:0;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;
  margin-right:6px;font-size:1.08rem;line-height:1;
}
body[data-theme="spotify"] .memerap-player-actions-btn{
  color:#b3b3b3;background:transparent;border:none;box-shadow:none;
}
body[data-theme="spotify"] .memerap-player-actions-btn:hover{color:#fff}
body[data-theme="spotify"] .memerap-spotify-player-left .memerap-player-actions-btn{
  align-self:center;
}

/* styles.css chunk 6/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Empty states */
.memerap-empty-state{
  text-align:center;padding:36px 20px 32px;max-width:420px;margin:0 auto;
}
.memerap-empty-icon{font-size:2rem;margin-bottom:10px;opacity:.85}
.memerap-empty-title{display:block;font-size:1.08rem;margin-bottom:8px}
.memerap-empty-body{margin:0 0 16px;color:var(--muted);font-size:.9rem;line-height:1.45}
.memerap-empty-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.memerap-empty-cta{min-height:38px}

/* First-visit tips banner */
.memerap-onboarding-banner{
  position:fixed;left:50%;bottom:calc(var(--memerap-player-height,72px) + 72px);
  transform:translateX(-50%);z-index:1400;width:min(560px,calc(100vw - 24px));
  pointer-events:none;
}
.memerap-onboarding-inner{
  pointer-events:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;background:#282828;border:1px solid #3e3e3e;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.memerap-onboarding-text{margin:0;font-size:.82rem;color:#e5e5e5;line-height:1.45;flex:1;min-width:200px}
.memerap-onboarding-dismiss{flex-shrink:0}

/* Artist grid pagination */
.memerap-load-more-wrap{display:flex;justify-content:center;padding:18px 0 8px}

/* Home — start here quick actions */
.memerap-start-here{margin-bottom:4px}
.memerap-start-here-body{display:flex;flex-direction:column;gap:10px}
.memerap-start-here-actions{display:flex;flex-wrap:wrap;gap:8px}
.memerap-start-chip{cursor:pointer;text-decoration:none}
.memerap-board-hangout{margin-bottom:4px}
.memerap-site-status{
  margin-left:4px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted,#a9a9a9);
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  white-space:nowrap;
  line-height:1.2;
  user-select:none;
  cursor:default;
}
body[data-theme="spotify"] .memerap-site-status{
  border-color:rgba(255,255,255,.1);
  background:rgba(0,0,0,.25);
  color:#b3b3b3;
}
@media (max-width:980px){
  .memerap-site-status{display:none}
}
.memerap-new-vault-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.memerap-new-vault-head-left{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.memerap-new-vault-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Artist story + start-here (additive; hidden until data exists) */
.artist-start-here-panel{margin-top:10px}

/* Scene graph (crew conspiracy board) */
.scene-wrap{max-width:none}
.scene-hero{margin-bottom:12px}
.scene-hero-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.scene-hero-head h1{margin:0}
.scene-layout{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  min-height:min(70vh,720px);
}
.scene-side{min-height:0}
.scene-side-body{display:flex;flex-direction:column;gap:12px}
.scene-field{display:flex;flex-direction:column;gap:6px}
.scene-search{width:100%;max-width:none;margin:0;box-sizing:border-box}
.scene-legend{display:flex;flex-direction:column;gap:6px;opacity:.85}
.scene-legend span{display:flex;align-items:center;gap:8px}
.scene-swatch{
  display:inline-block;width:14px;height:3px;border-radius:2px;
  background:#c43030;
}
.scene-swatch-album{background:#c48c46}
.scene-swatch-era{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,#c45c26,#5b8fd4);
}
.scene-selected{
  margin-top:4px;padding-top:10px;border-top:1px solid var(--line);
  min-height:4.5rem;
}
.scene-link-list{margin:8px 0 0;padding:0 0 0 1.1rem}
.scene-link-list li{margin:4px 0}
.scene-link-btn{
  border:0;background:none;color:var(--accent);padding:0;font:inherit;cursor:pointer;text-align:left;
}
.scene-link-btn:hover{text-decoration:underline}
.scene-open-btn{width:100%;justify-content:center}
.scene-open-btn[hidden]{display:none!important}
.scene-board{
  position:relative;
  min-height:min(70vh,720px);
  border:1px solid #3a2a1c;
  border-radius:12px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,220,160,.04), 0 12px 40px rgba(0,0,0,.45);
  background:#1a1410;
}
.scene-board canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.scene-tip{
  position:absolute;z-index:2;pointer-events:none;
  padding:6px 10px;border-radius:8px;
  background:rgba(20,14,10,.92);border:1px solid rgba(196,48,48,.45);
  color:#f3ebe1;font-size:.78rem;max-width:220px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
@media (max-width:900px){
  .scene-layout{grid-template-columns:1fr;min-height:0}
  .scene-board{min-height:58vh}
}
.artist-story-panel{
  margin:14px 0 12px;
  padding:0;
  max-width:none;
  width:100%;
}
.artist-story-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.9;
}
.artist-story-toggle:hover{
  color:var(--text);
  opacity:1;
}
.artist-story-chevron{
  display:inline-block;
  width:.55em;
  height:.55em;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .18s var(--ease);
  margin-top:-2px;
}
.artist-story-panel.is-open .artist-story-chevron{
  transform:rotate(45deg);
  margin-top:2px;
}
.artist-story-body{
  margin-top:0;
  line-height:1.55;
  color:var(--text);
  font-size:.96rem;
  max-height:none;
  overflow:visible;
}
.artist-story-genius{
  border-radius:16px;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.artist-story-banner-wrap{
  position:relative;
  height:120px;
  background:#0a0a0a;
}
.artist-story-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  display:block;
  transform:scale(1.06);
  filter:saturate(1.02) brightness(.88);
}
.artist-story-banner-empty{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#1a1a1a,#0a0a0a);
}
.artist-story-banner-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));
  pointer-events:none;
}
.artist-story-row{
  display:grid;
  grid-template-columns:minmax(160px,220px) minmax(0,1fr);
  gap:18px 22px;
  align-items:start;
  padding:16px 18px 18px;
}
.artist-story-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  margin-top:-52px;
  position:relative;
  z-index:2;
}
.artist-story-avatar-wrap{
  width:96px;
  height:96px;
  border-radius:50%;
  padding:3px;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  flex-shrink:0;
}
.artist-story-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:#141414;
}
.artist-story-avatar-empty{
  background:linear-gradient(145deg,#2a2a2a,#111);
}
.artist-story-identity{
  margin:0;
  padding:0;
  text-align:center;
}
.artist-story-title{
  font-size:1.18rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
  line-height:1.15;
}
.artist-story-aka{
  margin-top:5px;
  font-size:.72rem;
  color:var(--muted);
  font-weight:600;
}
.artist-story-loading-line{
  opacity:.65;
  animation: memerap-artist-about-pulse 1.1s ease-in-out infinite;
}
@keyframes memerap-artist-about-pulse{
  0%,100%{opacity:.4}
  50%{opacity:.85}
}
.artist-story-genius-link{
  display:inline-block;
  margin-top:8px;
  margin-right:10px;
  font-size:.72rem;
  font-weight:700;
  color:var(--accent, #f5c542);
  text-decoration:none;
}
.artist-story-genius-link:hover{
  text-decoration:underline;
}
.artist-story-id-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.artist-story-profile-link{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.artist-story-profile-link:hover{
  border-color:var(--accent, #f5c542);
  color:var(--accent, #f5c542);
}
.artist-story-cite{
  margin:6px 0 0;
  font-size:.72rem;
  color:var(--muted);
  opacity:.9;
}
.artist-story-cite a{
  color:inherit;
}
.artist-story-enrich{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.artist-story-sec{
  margin:0;
}
.artist-story-sec-head{
  margin:0 0 8px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.artist-story-meta-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 12px;
}
.artist-story-enrich .artist-story-meta-pills{
  margin:0;
}
.artist-story-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:650;
  color:var(--text);
  background:rgba(29,185,84,.12);
  border:1px solid rgba(29,185,84,.28);
}
.artist-story-pill-link{
  color:var(--accent, #1db954);
  text-decoration:none;
}
.artist-story-pill-link:hover{
  text-decoration:underline;
}
.artist-story-logo{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:2;
  max-height:44px;
  max-width:42%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
  pointer-events:none;
}
.artist-story-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
}
.artist-story-tag{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:650;
  letter-spacing:.02em;
  color:var(--muted);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.artist-story-ext-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.artist-story-ext-link{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:650;
  color:var(--accent, #f5c542);
  text-decoration:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.artist-story-ext-link:hover{
  border-color:var(--accent, #f5c542);
  background:rgba(255,255,255,.07);
}
.artist-story-similar-head{
  margin:0 0 6px;
  font-size:.68rem;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.artist-story-similar-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.artist-story-similar-chip{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.artist-story-similar-chip:hover{
  border-color:var(--accent, #f5c542);
  color:var(--accent, #f5c542);
}
.artist-story-deezer-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.artist-story-deezer-cover-link{
  display:block;
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  line-height:0;
}
.artist-story-deezer-cover{
  width:64px;
  height:64px;
  object-fit:cover;
  display:block;
  background:#141414;
}
.artist-story-preview-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.artist-story-preview-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.artist-story-preview-art{
  width:44px;
  height:44px;
  border-radius:4px;
  object-fit:cover;
  flex-shrink:0;
  background:#141414;
}
.artist-story-preview-meta{
  min-width:0;
  flex:1;
}
.artist-story-preview-title{
  display:block;
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
a.artist-story-preview-title:hover{
  color:var(--accent, #f5c542);
}
.artist-story-preview-album{
  margin-top:2px;
  font-size:.68rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.artist-story-preview-btn{
  flex-shrink:0;
  appearance:none;
  border:1px solid rgba(29,185,84,.35);
  background:rgba(29,185,84,.14);
  color:var(--accent, #1db954);
  font:inherit;
  font-size:.72rem;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
}
.artist-story-preview-btn:hover,
.artist-story-preview-btn.is-playing{
  background:rgba(29,185,84,.22);
  border-color:rgba(29,185,84,.55);
}
.artist-story-bio-empty a{
  color:inherit;
  font-weight:700;
}
.artist-story-about-card{
  margin:0;
  padding:14px 16px;
  border-radius:12px;
  background:#0a0a0a;
  border:1px solid var(--line);
  min-width:0;
}
.artist-story-about-head{
  margin:0 0 10px;
  font-size:.9rem;
  font-weight:750;
  color:var(--text);
}
.artist-story-bio,
.artist-story-note{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size:.9rem;
  line-height:1.55;
}
.artist-story-bio + .artist-story-note{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
}
@media (max-width:720px){
  .artist-story-banner-wrap{height:100px}
  .artist-story-row{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
  }
  .artist-story-side{
    margin-top:-44px;
    flex-direction:row;
    justify-content:flex-start;
    text-align:left;
    gap:12px;
  }
  .artist-story-identity{text-align:left}
  .artist-story-avatar-wrap{width:84px;height:84px}
  .artist-story-title{font-size:1.08rem}
}
.artist-start-here-panel .panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.artist-start-chip{max-width:100%;text-align:left}

/* styles.css chunk 7/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Continue listening prominence */
.continue-panel.memerap-continue-prominent{
  border-color:rgba(29,185,84,.28);
  box-shadow:0 0 0 1px rgba(29,185,84,.08) inset;
}
body[data-theme="spotify"] .continue-panel.memerap-continue-prominent .panel-head strong{
  color:#1ed760;
}

/* Track list loading skeletons */
.memerap-track-skeleton .row-skeleton{align-items:center;gap:10px;padding:10px 8px}
.memerap-mobile-bottom-link.memerap-mobile-nav-hidden{display:none!important}

@media (max-width:980px){
  .memerap-mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .memerap-mobile-bottom-label{font-size:.62rem}
  .memerap-onboarding-banner{bottom:calc(var(--memerap-mobile-chrome-bottom,120px) + 8px)}
}

audio{width:min(430px,42vw)}
.queue-drawer{
  position:fixed; right:-380px; top:0; height:100vh; width:min(380px,92vw); z-index:1300;
  background:#121212; border-left:1px solid #2b2b2b; transition:right .28s var(--ease); padding:12px;
}
.queue-drawer.show{right:0}
.queue-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;row-gap:8px;margin-bottom:10px}

/* Row ⋯ menu + playlist picker (player.js) */
.memerap-row-menu{
  position:fixed;
  z-index:10002;
  min-width:188px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#161616,#0c0c0c);
  box-shadow:0 14px 44px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.04) inset;
  padding:6px;
  overflow:hidden;
  isolation:isolate;
}
.memerap-row-menu.hidden{display:none!important}
.memerap-row-menu-item{
  display:block;width:100%;
  text-align:left;padding:10px 12px;border:none;border-radius:8px;
  background:transparent;color:var(--text);font-size:.9rem;cursor:pointer;
}
.memerap-row-menu-item:hover{background:#222}

.memerap-pl-picker .memerap-pl-card,
.memerap-pl-card{
  width:min(92vw,400px);
  text-align:left;
  max-height:min(90dvh,90vh);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.memerap-pl-heading{margin:0 0 10px;font-size:1.08rem;font-weight:800}
.memerap-pl-filter{
  width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;
  border:1px solid var(--line);background:#0a0a0a;color:var(--text);font-size:.86rem;
}
.memerap-pl-picker-list{
  margin-top:10px;
  flex:1;
  min-height:80px;
  max-height:min(38vh,300px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.memerap-pl-empty{padding:10px 4px;color:var(--muted);font-size:.86rem}
.memerap-pl-name-btn{
  text-align:left;padding:10px 12px;border-radius:8px;border:1px solid var(--line);
  background:#121212;color:var(--text);font-size:.86rem;cursor:pointer;width:100%;
}
.memerap-pl-name-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,#444);background:#181818}
.memerap-pl-new{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.memerap-pl-new-label{display:block;margin-bottom:4px}
.memerap-pl-new-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.memerap-pl-new-row input{
  flex:1;min-width:140px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:#0a0a0a;color:var(--text);font-size:.86rem;box-sizing:border-box;
}
.queue-list{display:grid;gap:8px;max-height:calc(100vh - 80px);overflow:auto;position:relative}
.queue-v-track{position:relative;width:100%}
.queue-v-window{display:grid;gap:8px}
.q-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#1a1a1a;border:1px solid #2e2e2e;padding:8px;border-radius:8px;cursor:pointer;min-height:52px;content-visibility:auto;contain-intrinsic-size:auto 52px}
.q-item.active{border-color:#2aa65f;background:#1a2b20}

/* Make room for the Now Playing dock so cards are not covered */
body.memerap-now-dock-open .main-col .wrap{
  padding-right:min(340px,32vw);
  transition:padding-right .18s var(--ease);
}
@media (max-width:1219px){
  body.memerap-now-dock-open .main-col .wrap{padding-right:24px}
}
/* Floating Now Playing dock (player.js #nowPanel) */
#nowPanel{
  position:fixed;
  right:clamp(10px,1.6vw,18px);
  top:84px;
  width:min(312px,calc(100vw - 32px));
  max-height:min(64vh,calc(100vh - 200px));
  overflow:auto;
  z-index:12;
  box-sizing:border-box;
  background:linear-gradient(180deg,#0d0d0d,#080808);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 16px 18px;
  box-shadow:
    0 22px 56px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.05) inset;
  -webkit-overflow-scrolling:touch;
}
#nowPanel .np-head{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 38%,#fff);
  margin-bottom:12px;
}
#nowPanel .np-cover{
  aspect-ratio:1/1;
  border-radius:12px;
  background:#0a0a0a;
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  margin-bottom:12px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45) inset;
}
#nowPanel .np-cover-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-orientation:from-image;
  display:block;
}
#nowPanel .np-title{
  font-weight:750;
  font-size:clamp(.92rem,1.2vw,1.05rem);
  line-height:1.3;
  letter-spacing:-.02em;
  margin-bottom:4px;
}
#nowPanel .np-meta{
  color:color-mix(in srgb,var(--muted) 88%,#f0f0f0);
  font-size:.82rem;
  line-height:1.4;
  margin-bottom:12px;
}
#nowPanel .np-section{
  font-size:.65rem;
  font-weight:650;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 48%,#fff);
  margin-bottom:6px;
}
#nowPanel .np-section.np-section--divider{
  margin-top:14px;
  margin-bottom:8px;
  text-transform:uppercase;
  font-size:.65rem;
  font-weight:650;
  letter-spacing:.11em;
  color:color-mix(in srgb,var(--muted) 48%,#fff);
  opacity:1;
}
#nowPanel .np-lyrics{
  margin-top:0;
  padding:12px 14px 16px;
  border-radius:10px;
  background:rgba(255, 255, 255, 0.03);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow:none;
  color:#e8e8e8;
  font-size:.9rem;
  font-weight:400;
  line-height:1.62;
  letter-spacing:0.01em;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:min(36rem, 100%);
  margin-left:auto;
  margin-right:auto;
  max-height:min(44vh, 400px);
  overflow:auto;
  -webkit-font-smoothing:antialiased;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--line) 70%, #333) transparent;
}
#nowPanel .np-lyrics.np-lyrics--plain{
  white-space:normal;
}
#nowPanel .np-lyrics .lyrics-section-tag,
#bigModal .memerap-fs-lyrics .lyrics-section-tag{
  margin:10px 0 6px;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--muted) 55%, #fff);
}
#nowPanel .np-lyrics .lyrics-section-tag:first-child,
#bigModal .memerap-fs-lyrics .lyrics-section-tag:first-child{
  margin-top:0;
}
#nowPanel .np-lyrics .lyrics-plain-line,
#bigModal .memerap-fs-lyrics .lyrics-plain-line{
  margin:0 0 .15em;
}
#nowPanel .np-lyrics .lyrics-blank,
#bigModal .memerap-fs-lyrics .lyrics-blank{
  height:.55em;
}
#nowPanel .np-lyrics::-webkit-scrollbar{width:6px}
#nowPanel .np-lyrics::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--line) 75%, #444);border-radius:99px}
#nowPanel .np-lyrics.np-lyrics--karaoke,
#bigModal .memerap-fs-lyrics.np-lyrics--karaoke{
  white-space:normal;
  max-height:min(42vh, 320px);
  overflow-y:auto;
}

/* Track comments (now dock + modal) */
#nowPanel .np-comments-head{
  display:flex;
  align-items:center;
  gap:8px;
}
#nowPanel .np-comments-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.4em;
  padding:0 6px;
  height:1.35em;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ddd;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:0;
}
#nowPanel .np-comments{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:8px;
  max-height:180px;
  overflow:auto;
}
#nowPanel .np-comments-actions{
  margin-bottom:4px;
}
.tc-open-btn{
  width:100%;
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font:inherit;
  font-size:.82rem;
  font-weight:650;
  cursor:pointer;
}
.tc-open-btn:hover{background:rgba(255,255,255,.08)}
.tc-empty{
  color:var(--muted);
  font-size:.82rem;
  padding:6px 2px;
}
.tc-item{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:8px;
  align-items:start;
}
.tc-avatar,
.tc-avatar--letter{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  background:#222;
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:700;
  color:#eee;
}
.tc-avatar-link{display:block;line-height:0}
.tc-body{min-width:0}
.tc-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 8px;
  margin-bottom:2px;
}
.tc-name{
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
}
.tc-name:hover{text-decoration:underline}
.tc-when{
  color:var(--muted);
  font-size:.72rem;
}
.tc-del{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#b66;
  font:inherit;
  font-size:.72rem;
  cursor:pointer;
  padding:0;
}
.tc-del:hover{color:#f88}
.tc-text{
  margin:0;
  color:#e8e8e8;
  font-size:.82rem;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
#tcModalRoot{
  position:fixed;
  inset:0;
  z-index:2400;
  display:grid;
  place-items:center;
  padding:16px;
}
.tc-modal-bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
}
.tc-modal{
  position:relative;
  width:min(480px,100%);
  max-height:min(82vh,720px);
  overflow:auto;
  background:linear-gradient(180deg,#141414,#0c0c0c);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:16px 16px 18px;
  box-shadow:0 24px 64px rgba(0,0,0,.55);
}
.tc-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.tc-modal-head h3{
  margin:0;
  font-size:1.08rem;
  font-weight:800;
}
.tc-sub{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.82rem;
}
.tc-close{
  border:0;
  background:rgba(255,255,255,.06);
  color:#fff;
  width:34px;
  height:34px;
  border-radius:8px;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}
.tc-modal-count{
  color:var(--muted);
  font-size:.78rem;
  margin-bottom:10px;
}
.tc-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:80px;
  max-height:min(42vh,360px);
  overflow:auto;
  margin-bottom:14px;
  padding-right:4px;
}
.tc-composer{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}
.tc-input{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:72px;
  max-height:160px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0a0a0a;
  color:#fff;
  padding:10px 12px;
  font:inherit;
  font-size:.9rem;
  line-height:1.4;
}
.tc-input:focus{
  outline:none;
  border-color:rgba(30,215,96,.45);
}
.tc-composer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.tc-hint{color:var(--muted);font-size:.78rem}
.tc-post{
  border:0;
  border-radius:999px;
  background:#1ed760;
  color:#04140a;
  font:inherit;
  font-weight:750;
  font-size:.86rem;
  padding:8px 16px;
  cursor:pointer;
}
.tc-post:disabled{opacity:.55;cursor:default}
.tc-signin{
  color:var(--muted);
  font-size:.86rem;
  padding:8px 0 2px;
}
.tc-msg{
  margin-top:8px;
  font-size:.82rem;
  color:var(--muted);
}
.tc-msg.is-ok{color:#6dcf8a}
.tc-msg.is-err{color:#f08080}
body[data-theme="spotify"] .tc-modal{
  background:linear-gradient(180deg,#181818,#121212);
  border-color:#282828;
}

.lyrics-line{
  padding:4px 6px;
  border-radius:8px;
  color:color-mix(in srgb, var(--text) 72%, var(--muted));
  transition:color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.lyrics-line[data-seek]{
  cursor:pointer;
}
.lyrics-line[data-seek]:hover{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--text);
}
.lyrics-line[data-seek]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.playbar-artist-link,
.np-meta .playbar-artist-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset:2px;
}
.playbar-artist-link:hover,
.np-meta .playbar-artist-link:hover{
  color:var(--accent);
}
.lyrics-line--active{
  color:var(--text);
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  font-weight:600;
  transform:scale(1.02);
}
.memerap-fs-progress--wave{
  position:relative;
}
.memerap-waveform-layer{
  position:absolute;
  left:48px;
  right:48px;
  top:50%;
  transform:translateY(-50%);
  height:36px;
  pointer-events:none;
  z-index:0;
  opacity:.95;
}
.memerap-waveform-canvas{
  display:block;
  width:100%;
  height:36px;
}
.memerap-wave-pins{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.memerap-wave-pin{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #0a0a0a;
  background:var(--accent,#1db954);
  color:#04120a;
  font:700 10px/1 "DM Sans",system-ui,sans-serif;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  z-index:3;
}
.memerap-wave-pin:hover,
.memerap-wave-pin:focus-visible{
  transform:translate(-50%,-50%) scale(1.12);
  outline:2px solid #fff;
  outline-offset:1px;
}
.memerap-wave-pin.is-stack{
  background:#f3ebe1;
  color:#1a1410;
  min-width:18px;
}
.tc-at{
  border:0;
  background:color-mix(in srgb,var(--accent,#1db954) 22%,transparent);
  color:var(--accent,#1db954);
  font:700 .72rem/1 "DM Sans",system-ui,sans-serif;
  padding:3px 7px;
  border-radius:999px;
  cursor:pointer;
}
.tc-at:hover{filter:brightness(1.08)}
.tc-pin-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:var(--muted,#aaa);
  cursor:pointer;
  user-select:none;
}
.tc-pin-label input{accent-color:var(--accent,#1db954)}
#bigModal:not(.hidden) .memerap-fs-progress--wave .memerap-fs-seek{
  position:relative;
  z-index:1;
  background:transparent;
}
#bigModal:not(.hidden) .memerap-fs-progress--wave .memerap-fs-seek::-webkit-slider-runnable-track{
  background:transparent;
}
#bigModal:not(.hidden) .memerap-fs-progress--wave .memerap-fs-seek::-moz-range-track{
  background:transparent;
}
#nowPanel .np-queue{
  display:grid;
  gap:8px;
}
#nowPanel .np-q-item{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0a0a0a;
}
#nowPanel .np-q-title{
  font-size:.86rem;
  font-weight:600;
  line-height:1.32;
}
#nowPanel .np-q-sub{
  font-size:.78rem;
  color:color-mix(in srgb,var(--muted) 92%,#ccc);
  margin-top:4px;
}
#nowPanel .np-q-empty{
  color:color-mix(in srgb,var(--muted) 58%,#888);
  font-size:.78rem;
  padding:8px 10px;
  margin:0 0 2px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px dashed color-mix(in srgb, var(--line) 55%, transparent);
}

/* styles.css chunk 8/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Spotify skin: flat right-corner dock above the bottom player bar */
body[data-theme="spotify"] #nowPanel{
  top:72px;
  bottom:calc(var(--memerap-player-height) + 14px + env(safe-area-inset-bottom,0px));
  max-height:none;
  background:#181818;
  border:1px solid #282828;
  border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
body[data-theme="spotify"] #nowPanel .np-head,
body[data-theme="spotify"] #nowPanel .np-section{
  color:#b3b3b3;
}
body[data-theme="spotify"] #nowPanel .np-cover{
  border-radius:4px;
  border-color:#282828;
  background:#282828;
}
body[data-theme="spotify"] #nowPanel .np-title{color:#fff}
body[data-theme="spotify"] #nowPanel .np-meta{color:#b3b3b3}
body[data-theme="spotify"] #nowPanel .np-lyrics{
  background:#121212;
  border-color:#282828;
  color:#fff;
}
body[data-theme="spotify"] #nowPanel .np-q-item{
  background:#282828;
  border-color:#3e3e3e;
}

.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}
/** Playlist picker: below #bigModal so “Add to playlist” never paints on top of full player */
#memerapPlPicker.modal{z-index:12400}
/** Above row menus (10002), search (10000), queue drawer — tap targets must receive events on mobile */
#bigModal.modal{z-index:12550}
#memerapKeyboardHelp.modal{z-index:12600}
/** Auth/admin/settings modals must sit above full player + keyboard help */
#authModalRoot .modal{z-index:12750}
.memerap-kb-help .memerap-kb-card{
  width:min(92vw,440px);
  max-height:min(88dvh,640px);
  overflow:auto;
  text-align:left;
  padding:22px 22px 24px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--line) 70%,var(--accent) 15%);
  background:
    radial-gradient(120% 90% at 50% -15%,rgba(255,255,255,.08),transparent 50%),
    radial-gradient(90% 50% at 50% 110%,var(--accent-dim),transparent 55%),
    linear-gradient(188deg,color-mix(in srgb,var(--panel) 85%,#101010) 0%,#080808 50%,#030303 100%);
  box-shadow:
    0 24px 64px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.05) inset,
    inset 0 1px 0 rgba(255,255,255,.07);
}
.memerap-kb-help .memerap-kb-card .close{
  border-radius:999px;
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--line) 55%,rgba(255,255,255,.12));
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.memerap-kb-help .memerap-kb-card .close:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
}
#memerapKeyboardHelp .modal-bg{
  background:rgba(0,0,0,.86);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.memerap-kb-help .memerap-kb-card h2{margin:0 36px 8px 0;font-size:1.18rem}
.memerap-kb-lead{margin:0 0 14px}
.memerap-kb-table{display:flex;flex-direction:column;gap:0}
.memerap-kb-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  font-size:.9rem;
}
.memerap-kb-row:last-child{border-bottom:none}
.memerap-kb-keys{text-align:right;color:var(--muted);white-space:nowrap;font-size:.82rem}
.memerap-kb-keys .kbd-hint{margin-left:2px}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.modal-card{
  position:relative;z-index:2;width:min(92vw,620px);border:1px solid #2a3f69;border-radius:16px;
  background:linear-gradient(180deg,#0f172b,#14203a);padding:22px 24px 24px;text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.close{position:absolute;top:10px;right:10px;border:1px solid #3a5f9f;background:#132448;color:#fff;border-radius:8px;padding:5px 9px;cursor:pointer}
.big-cover{
  --memerap-aura-r:30;
  --memerap-aura-g:215;
  --memerap-aura-b:96;
  width:min(88vw,460px);aspect-ratio:1/1;margin:10px auto 12px;border:1px solid #3a5f9f;border-radius:16px;overflow:hidden;background:#15284d;display:flex;align-items:center;justify-content:center;color:#9db0d8}
.big-cover img{width:100%;height:100%;object-fit:cover}

/* Big now-playing modal: transport + lyrics (desktop + mobile when #bigModal open) */
#bigModal:not(.hidden) .memerap-fs-only{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:8px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
#bigModal:not(.hidden) .memerap-fs-lyrics-wrap{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  margin-top:4px;
  padding-bottom:4px;
}
#bigModal:not(.hidden) .memerap-fs-lyrics-head{
  flex-shrink:0;
  margin-bottom:6px;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--muted) 45%, #fff);
  opacity:0.9;
}
#bigModal:not(.hidden) .memerap-fs-lyrics{
  flex:1;
  min-height:72px;
  max-height:min(38vh,280px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  margin-top:0;
  padding:16px 18px 18px;
  border-radius:12px;
  background:rgba(255, 255, 255, 0.04);
  border:1px solid color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow:0 0 0 1px rgba(0, 0, 0, 0.3) inset;
  color:#ececec;
  font-size:0.96rem;
  font-weight:400;
  line-height:1.68;
  letter-spacing:0.012em;
  white-space:pre-wrap;
  text-align:left;
  max-width:min(40rem, 100%);
  margin-left:auto;
  margin-right:auto;
  align-self:stretch;
  -webkit-font-smoothing:antialiased;
  scrollbar-width:thin;
}
#bigModal:not(.hidden) .memerap-fs-progress{
  display:grid;
  grid-template-columns:48px 1fr 48px;
  align-items:center;
  gap:10px;
}
#bigModal:not(.hidden) .memerap-fs-time{
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  text-align:center;
}
#bigModal:not(.hidden) .memerap-fs-seek{
  width:100%;
  height:36px;
  margin:0;
  cursor:pointer;
  accent-color:var(--accent);
  touch-action:none;
}
#bigModal:not(.hidden) .memerap-fs-transport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px 12px;
  flex-wrap:wrap;
}
#bigModal:not(.hidden) .memerap-fs-extras{
  display:flex;
  justify-content:center;
  gap:18px;
  padding-bottom:4px;
}
#bigModal:not(.hidden) .memerap-fs-tbtn{
  min-width:48px;
  min-height:48px;
  padding:0 12px;
  touch-action:manipulation;
}
#bigModal:not(.hidden) .memerap-fs-playbtn{
  min-width:68px !important;
  min-height:68px !important;
  font-size:1.4rem !important;
  border-radius:999px !important;
  border:1px solid color-mix(in srgb, var(--accent) 42%, #3d3d42) !important;
  box-shadow:
    0 0 32px rgba(30, 215, 96, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}
#bigModal:not(.hidden) .memerap-fs-card .close{
  top:max(12px, env(safe-area-inset-top, 0px));
  right:max(14px, env(safe-area-inset-right, 0px));
  border-radius:999px;
  width:42px;
  height:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:80;
  position:absolute;
  pointer-events:auto;
  touch-action:manipulation;
  border:1px solid color-mix(in srgb, var(--line) 55%, rgba(255, 255, 255, 0.12));
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  color:#f6f6f6;
  font-size:1rem;
  line-height:1;
  box-shadow:0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 22px rgba(0, 0, 0, 0.35);
}
#bigModal:not(.hidden) .memerap-fs-card .close:hover{
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border-color:color-mix(in srgb, var(--line) 40%, rgba(255, 255, 255, 0.2));
}
#bigModal:not(.hidden) .modal-card.memerap-fs-card h2{
  margin:4px 0 0;
  padding:0 6px;
  font-size:clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight:800;
  text-align:center;
  letter-spacing:-0.02em;
  line-height:1.15;
}
#bigModal:not(.hidden) .modal-card.memerap-fs-card .sub{
  text-align:center;
  margin:2px 0 8px;
  padding:0 10px;
  font-size:.96rem;
  line-height:1.35;
  color:color-mix(in srgb, var(--muted) 90%, var(--text));
}
#bigModal:not(.hidden) .big-cover{
  --memerap-aura-r:30;
  --memerap-aura-g:215;
  --memerap-aura-b:96;
  width:auto;
  max-width:min(72vw, 380px);
  margin:6px auto;
  border-radius:20px;
  align-self:center;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 52px rgba(var(--memerap-aura-r), var(--memerap-aura-g), var(--memerap-aura-b), 0.32);
  background:#0a0a0a;
  color:color-mix(in srgb, var(--muted) 70%, var(--text));
  transition:transform .18s ease-out, box-shadow .28s var(--ease);
}
#bigModal:not(.hidden) .memerap-fs-tbtn:focus-visible,
#bigModal:not(.hidden) .memerap-fs-done-btn:focus-visible,
#bigModal:not(.hidden) .memerap-fs-card .close:focus-visible{
  outline:2px solid var(--memerap-focus);
  outline-offset:2px;
}

/* Full-screen now playing (≤980px): bottom sheet + Done */
.memerap-fs-done-btn{display:none}
@media (max-width:980px){
  .memerap-kb-hint-chip{display:none !important;}
  html.memerap-fs-modal-open,
  body.memerap-fs-modal-open{
    overflow:hidden;
    overscroll-behavior:none;
  }
  #bigModal:not(.hidden){
    display:grid;
    place-items:end center;
    padding:0;
  }
  /** Solid backdrop — backdrop-blur is very expensive on phones and causes jank */
  #bigModal:not(.hidden) .modal-bg{
    background:rgba(0,0,0,.82);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #bigModal:not(.hidden) .modal-card.memerap-fs-card{
    width:100%;
    max-width:none;
    margin:0;
    min-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    max-height:min(96dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    border-radius:22px 22px 0 0;
    border:1px solid color-mix(in srgb, var(--line) 65%, var(--accent) 18%);
    border-bottom:none;
    padding:18px max(18px, env(safe-area-inset-left, 0px)) max(22px, calc(14px + env(safe-area-inset-bottom, 0px))) max(18px, env(safe-area-inset-right, 0px));
    text-align:left;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    isolation:isolate;
    background:
      radial-gradient(120% 85% at 50% -8%, rgba(255, 255, 255, 0.09), transparent 52%),
      radial-gradient(90% 55% at 50% 108%, var(--accent-dim), transparent 58%),
      linear-gradient(
        188deg,
        color-mix(in srgb, var(--panel) 82%, #121212) 0%,
        #070707 46%,
        #030303 100%
      );
    box-shadow:
      0 -20px 64px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  #bigModal:not(.hidden) .memerap-fs-handle{
    display:block;
    align-self:center;
    width:48px;
    height:5px;
    border-radius:99px;
    background:linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.12)
    );
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.45);
    margin:2px auto 4px;
    flex-shrink:0;
    touch-action:none;
    cursor:grab;
  }
  .memerap-fs-done-btn{
    display:inline-flex;
    width:100%;
    min-height:50px;
    min-width:0;
    margin-top:14px;
    padding:18px 20px 14px;
    flex-shrink:0;
    box-sizing:border-box;
    font-weight:800;
    font-size:.96rem;
    letter-spacing:0.01em;
    justify-content:center;
    align-items:center;
    border-radius:12px;
    border:1px solid color-mix(in srgb, var(--accent) 55%, #0a3d1f);
    color:#031308;
    background:linear-gradient(180deg, #4cf288 0%, var(--accent) 42%, color-mix(in srgb, var(--accent) 88%, #0d5028) 100%);
    box-shadow:
      0 -1px 0 rgba(255, 255, 255, 0.07),
      0 10px 28px rgba(30, 215, 96, 0.28),
      0 1px 0 rgba(255, 255, 255, 0.35) inset;
  }
  #bigModal:not(.hidden) .memerap-fs-done-btn:hover{
    filter:brightness(1.06);
    border-color:color-mix(in srgb, var(--accent) 70%, #0a3d1f);
  }
  #bigModal:not(.hidden) .memerap-fs-done-btn:active{
    transform:scale(0.985);
    filter:brightness(0.97);
  }
  #bigModal:not(.hidden) .modal-card.memerap-fs-card h2{
    font-size:clamp(1.32rem, 4.6vw, 1.72rem);
  }
  #bigModal:not(.hidden) .memerap-fs-only{
    margin-top:4px;
  }
  #bigModal:not(.hidden) .big-cover{
    width:100%;
    max-width:min(72vw, 300px);
    margin:2px auto 2px;
    border-radius:16px;
    align-self:center;
    border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    box-shadow:
      0 20px 56px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
      0 0 48px rgba(var(--memerap-aura-r), var(--memerap-aura-g), var(--memerap-aura-b), 0.28);
  }
  .sticky-inner > .cover,
  .sticky-inner > div:nth-child(2){
    cursor:pointer;
  }
  .sticky-inner > div:nth-child(2) audio{
    cursor:default;
  }
}

@media (min-width: 981px){
  #bigModal:not(.hidden) .memerap-fs-handle{
    display:none !important;
  }
  #bigModal:not(.hidden) .modal-bg{
    background:rgba(0,0,0,.86);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #bigModal:not(.hidden) .modal-card.memerap-fs-card{
    width:min(92vw, 520px);
    max-width:min(92vw, 520px);
    margin:0 auto;
    max-height:min(88vh, 900px);
    border-radius:20px;
    border:1px solid color-mix(in srgb, var(--line) 65%, var(--accent) 18%);
    padding:26px 24px 24px;
    text-align:left;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    isolation:isolate;
    background:
      radial-gradient(120% 85% at 50% -8%, rgba(255, 255, 255, 0.09), transparent 52%),
      radial-gradient(90% 55% at 50% 108%, var(--accent-dim), transparent 58%),
      linear-gradient(
        188deg,
        color-mix(in srgb, var(--panel) 82%, #121212) 0%,
        #070707 46%,
        #030303 100%
      );
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  #bigModal:not(.hidden) .modal-card.memerap-fs-card h2{
    font-size:clamp(1.35rem, 2vw, 1.75rem);
  }
  #bigModal:not(.hidden) .memerap-fs-lyrics{
    max-height:min(48vh, 420px);
  }
  .memerap-kb-hint-chip{
    display:inline-flex;
    align-items:center;
    font-size:.78rem;
    padding:6px 11px;
    min-height:34px;
    color:color-mix(in srgb, var(--muted) 88%, var(--text));
    border-color:color-mix(in srgb, var(--line) 80%, var(--accent) 12%);
  }
  .memerap-kb-hint-chip:hover{
    color:var(--text);
    border-color:color-mix(in srgb, var(--line) 65%, var(--accent) 22%);
    background:#141414;
  }
}

/* styles.css chunk 9/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Top bar — Skin + Big View (always visible; works on every theme) */
.memerap-topbar-skin-chip,
.memerap-topbar-bigview-chip{
  display:inline-flex!important;
  align-items:center;
  font-size:.78rem;
  font-weight:700;
  padding:6px 11px;
  min-height:34px;
  flex-shrink:0;
  white-space:nowrap;
}
.memerap-topbar-skin-chip--on{
  color:#1ed760!important;
  border-color:rgba(30,215,96,.42)!important;
}
body[data-theme="spotify"] .memerap-topbar-skin-chip--on{
  color:#1db954!important;
  border-color:rgba(29,185,84,.45)!important;
}

.auth-wrap{display:flex;justify-content:flex-end;margin-bottom:10px}
.auth-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.auth-pill{font-size:.82rem;color:#dce8ff;background:#132448;border:1px solid #3a5f9f;border-radius:999px;padding:6px 10px}
.auth-form{display:grid;gap:10px;margin-top:14px;text-align:left}
#authModalRoot .auth-modal-card{
  width:min(92vw,380px);
  padding:22px 22px 20px;
  text-align:left;
  border:1px solid #2a2a2a;
  border-radius:10px;
  background:#121212;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
#authModalRoot .auth-modal-title{
  margin:0 28px 0 0;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  text-align:left;
}
#authModalRoot .auth-modal-close.close{
  border:1px solid #333;
  background:#1a1a1a;
  border-radius:6px;
  color:#ccc;
}
#authModalRoot .auth-modal-close.close:hover{background:#242424;color:#fff}
#authModalRoot .auth-input.search,
#authModalRoot .auth-form .search{
  margin-top:0;
  border-radius:8px;
  border:1px solid #333;
  background:#0a0a0a;
  box-shadow:none;
  padding:11px 12px;
}
#authModalRoot .auth-input.search:focus,
#authModalRoot .auth-form .search:focus{
  border-color:#555;
  box-shadow:none;
  outline:none;
}
.auth-discord-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:8px;border:1px solid #4752c4;
  background:#5865f2;color:#fff;font-weight:600;font-size:.9rem;text-decoration:none;
}
.auth-discord-btn:hover{background:#4752c4;color:#fff;filter:none}
.auth-or{display:flex;align-items:center;gap:10px;color:#777;font-size:.72rem;margin:2px 0;text-transform:uppercase;letter-spacing:.06em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:#2e2e2e}
.auth-primary-btn{
  appearance:none;display:block;width:100%;
  margin-top:2px;padding:11px 12px;border-radius:8px;border:1px solid #fff;
  background:#fff;color:#000;font-weight:700;font-size:.92rem;cursor:pointer;text-align:center;
}
.auth-primary-btn:hover{background:#e8e8e8}
.auth-text-link{
  appearance:none;background:none;border:0;color:#aaa;cursor:pointer;
  font-size:.82rem;padding:2px 0;text-align:center;justify-self:center;
}
.auth-text-link:hover{color:#fff;text-decoration:underline}
.auth-secondary-btn{
  appearance:none;display:block;width:100%;margin-top:2px;padding:10px 12px;
  border-radius:8px;border:1px solid #333;
  background:transparent;color:#ddd;font-weight:600;font-size:.88rem;
  cursor:pointer;text-align:center;
}
.auth-secondary-btn:hover{background:#1a1a1a;border-color:#444}
.auth-hint{margin:0;font-size:.78rem;color:#888;line-height:1.4;text-align:left}
.auth-hint strong{color:#ddd;font-weight:650}
#authModalRoot .auth-msg{min-height:1.2em;color:#c88;font-size:.82rem}

/* Account settings modal — Spotify-style (overrides legacy .modal-card navy chrome) */
#authModalRoot .modal-bg.auth-settings-modal-bg{background:rgba(0,0,0,.72)}
#authModalRoot .modal-card.auth-settings-modal-card{
  width:min(92vw,480px);
  max-height:min(90vh,760px);
  padding:0;
  text-align:left!important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #282828!important;
  border-radius:8px!important;
  background:#121212!important;
  box-shadow:0 24px 64px rgba(0,0,0,.65);
}
#authModalRoot .auth-settings-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 20px 4px;flex-shrink:0;
}
#authModalRoot .auth-settings-topbar h2{
  margin:0;
  font-size:1.75rem;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.1;
  color:#fff;
  text-align:left;
}
#authModalRoot .auth-settings-close.close{
  position:static;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-width:32px;padding:0;
  border:none!important;
  border-radius:999px!important;
  background:#000!important;
  color:#b3b3b3!important;
  font-size:.96rem;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
}
#authModalRoot .auth-settings-close.close:hover{
  background:#282828!important;
  color:#fff!important;
  transform:scale(1.04);
}
#authModalRoot .auth-settings-scroll{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 20px 24px;
  flex:1 1 auto;
}
#authModalRoot .auth-settings-sub{
  margin:0 0 20px;
  font-size:.86rem;
  color:#b3b3b3;
  line-height:1.35;
}
#authModalRoot .auth-settings-form{
  display:grid;
  gap:24px;
  margin-top:0;
}
#authModalRoot .auth-settings-block{
  display:grid;
  gap:12px;
  padding:0;
  border:none;
  background:transparent;
}
#authModalRoot .auth-settings-block + .auth-settings-block{
  padding-top:24px;
  border-top:1px solid #282828;
}
#authModalRoot .auth-settings-section-title{
  margin:0 0 4px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b3b3b3;
}
#authModalRoot .auth-settings-row-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:12px 14px;border-radius:4px;
  text-decoration:none;color:#fff;
  background:#181818;
  border:1px solid #282828;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
#authModalRoot .auth-settings-row-link:hover{
  background:#282828;
  border-color:#3e3e3e;
}
#authModalRoot .auth-settings-row-main{
  display:grid;gap:2px;min-width:0;text-align:left;
}
#authModalRoot .auth-settings-row-main strong{
  font-size:.9rem;font-weight:700;color:#fff;
}
#authModalRoot .auth-settings-row-main .sub{
  font-size:.78rem;color:#b3b3b3;line-height:1.35;
}
#authModalRoot .auth-settings-row-chevron{
  flex-shrink:0;
  font-size:1.35rem;line-height:1;color:#b3b3b3;
}
#authModalRoot .auth-settings-profile-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:4px 0 8px;
}
#authModalRoot .auth-settings-avatar-preview{
  display:flex;align-items:center;justify-content:center;
  width:104px;height:104px;flex-shrink:0;
  border-radius:999px;overflow:hidden;
  background:#282828;
  border:3px solid #000;
  box-shadow:0 0 0 1px #3e3e3e;
}
#authModalRoot .auth-settings-avatar-preview img,
#authModalRoot .auth-settings-avatar-preview .auth-settings-img,
#authModalRoot .auth-settings-avatar-preview picture,
#authModalRoot .auth-settings-avatar-preview video{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover;
  border-radius:999px;
  display:block;
}
#authModalRoot .auth-settings-avatar-fallback{
  font-size:2rem;font-weight:900;color:#1db954;
}
#authModalRoot .auth-settings-profile-actions{display:grid;gap:6px}
#authModalRoot .auth-settings-text-btn{
  border:none;background:transparent;padding:0;
  color:#fff;font:inherit;font-size:.86rem;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
#authModalRoot .auth-settings-text-btn:hover{color:#1db954}

/* Premade avatar picker */
#avatarPickerRoot{
  position:fixed;inset:0;z-index:12000;
  display:grid;place-items:center;
  padding:16px;
}
#avatarPickerRoot .avatar-picker-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 20%,rgba(29,185,84,.11),transparent 42%),rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
}
#avatarPickerRoot .avatar-picker-panel{
  position:relative;z-index:1;
  width:min(1040px,100%);
  height:min(88vh,820px);
  max-height:820px;
  display:flex;flex-direction:column;gap:16px;
  overflow:hidden;
  background:linear-gradient(180deg,#171717 0%,#101010 100%);
  border:1px solid #343434;
  border-radius:20px;
  box-shadow:0 30px 100px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.025) inset;
  padding:20px 20px 0;
}
#avatarPickerRoot .avatar-picker-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
#avatarPickerRoot .avatar-picker-head h3{
  margin:0 0 5px;font-size:1.35rem;font-weight:850;letter-spacing:-.025em;color:#fff;
}
#avatarPickerRoot .avatar-picker-close{
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid transparent;border-radius:999px;
  background:#242424;color:#b3b3b3;
  font-size:1.55rem;line-height:1;cursor:pointer;padding:0;
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
#avatarPickerRoot .avatar-picker-close:hover{background:#333;color:#fff;transform:scale(1.04)}
#avatarPickerRoot .avatar-picker-controls{
  display:grid;grid-template-columns:minmax(240px,1.6fr) minmax(210px,1fr);gap:12px;
}
@media (max-width:640px){
  #avatarPickerRoot .avatar-picker-controls{grid-template-columns:1fr}
  #avatarPickerRoot{padding:0}
  #avatarPickerRoot .avatar-picker-panel{
    width:100%;height:100%;max-height:none;border-radius:0;border:0;padding:16px 14px 0;
  }
}
#avatarPickerRoot .avatar-picker-grid{
  flex:1;min-height:220px;overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
  grid-auto-rows:max-content;
  align-content:start;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(5,5,5,.66);
  border:1px solid #292929;
  scrollbar-color:#464646 transparent;
}
#avatarPickerRoot .avatar-picker-item{
  position:relative;
  display:grid;gap:4px;justify-items:center;align-content:start;
  min-width:0;
  border:1px solid #292929;background:linear-gradient(180deg,#1e1e1e,#171717);
  border-radius:16px;padding:14px 10px 12px;cursor:pointer;color:#fff;
  box-shadow:0 7px 20px rgba(0,0,0,.12);
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
#avatarPickerRoot .avatar-picker-item:hover,
#avatarPickerRoot .avatar-picker-item:focus-visible{
  border-color:#4a4a4a;outline:none;
  background:linear-gradient(180deg,#282828,#1c1c1c);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  transform:translateY(-2px);
}
#avatarPickerRoot .avatar-picker-item[aria-pressed="true"]{
  border-color:#1ed760;
  background:linear-gradient(180deg,rgba(29,185,84,.16),#171d19);
  box-shadow:0 0 0 1px rgba(30,215,96,.25),0 12px 32px rgba(0,0,0,.35);
}
#avatarPickerRoot .avatar-picker-item:disabled{opacity:.55;cursor:wait}
#avatarPickerRoot .avatar-picker-item img{
  width:100px;height:100px;max-width:100%;aspect-ratio:1;
  border-radius:999px;object-fit:cover;
  background:#282828;display:block;
  border:2px solid #404040;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
#avatarPickerRoot .avatar-picker-item:hover img{transform:scale(1.025)}
#avatarPickerRoot .avatar-picker-item[aria-pressed="true"] img{
  border-color:#1ed760;
  box-shadow:0 0 0 3px rgba(30,215,96,.16),0 8px 22px rgba(0,0,0,.45);
}
#avatarPickerRoot .avatar-picker-item-label{
  width:100%;margin-top:4px;
  font-size:.78rem;font-weight:800;line-height:1.2;
  text-align:center;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f4f4f4;
}
#avatarPickerRoot .avatar-picker-item-anime{
  width:100%;font-size:.68rem;font-weight:550;line-height:1.25;
  text-align:center;color:#8f8f8f;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#avatarPickerRoot .avatar-picker-item-check{
  position:absolute;top:9px;right:9px;
  display:grid;place-items:center;width:24px;height:24px;
  border-radius:999px;background:#1ed760;color:#06170c;
  font-size:.78rem;font-weight:950;
  box-shadow:0 4px 14px rgba(30,215,96,.35);
  opacity:0;transform:scale(.7);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
#avatarPickerRoot .avatar-picker-item[aria-pressed="true"] .avatar-picker-item-check{
  opacity:1;transform:scale(1);
}
#avatarPickerRoot .avatar-picker-empty{
  grid-column:1/-1;padding:24px;text-align:center;
}
#avatarPickerRoot .avatar-picker-foot{
  margin:0 -20px;
  padding:13px 20px 15px;
  min-height:64px;
  display:grid;grid-template-columns:minmax(150px,1fr) auto auto;
  align-items:center;gap:16px;
  background:#101010;border-top:1px solid #282828;
  box-shadow:0 -10px 30px rgba(0,0,0,.16);
}
#avatarPickerRoot .avatar-picker-foot-main{display:flex;align-items:center;gap:12px;min-width:0}
#avatarPickerRoot .avatar-picker-selection{
  display:flex;align-items:center;gap:10px;min-width:210px;
}
#avatarPickerRoot .avatar-picker-selection[hidden]{display:none}
#avatarPickerRoot .avatar-picker-selection img{
  width:48px;height:48px;border-radius:999px;object-fit:cover;
  border:2px solid #1ed760;background:#282828;
}
#avatarPickerRoot .avatar-picker-selection-copy{display:grid;min-width:0;line-height:1.15}
#avatarPickerRoot .avatar-picker-selection-copy strong{
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.78rem;color:#fff;
}
#avatarPickerRoot .avatar-picker-selection-copy .sub{
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;
}
#avatarPickerRoot .avatar-picker-selection-copy a{
  width:max-content;margin-top:3px;font-size:.62rem;color:#1ed760;text-decoration:none;
}
#avatarPickerRoot .avatar-picker-selection-copy a:hover{text-decoration:underline}
#avatarPickerRoot .avatar-picker-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
#avatarPickerRoot .auth-settings-primary-btn{
  min-height:42px;border:0;border-radius:999px;padding:10px 20px;
  background:#1ed760;color:#06170c;font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;
  transition:transform .18s var(--ease),filter .18s var(--ease),opacity .18s var(--ease);
}
#avatarPickerRoot .auth-settings-primary-btn:hover:not(:disabled){transform:scale(1.025);filter:brightness(1.06)}
#avatarPickerRoot .auth-settings-primary-btn:disabled{opacity:.38;cursor:not-allowed}
@media (max-width:760px){
  #avatarPickerRoot .avatar-picker-foot{
    margin:0 -14px;padding:11px 14px 13px;
    grid-template-columns:1fr auto;
  }
  #avatarPickerRoot .avatar-picker-selection{grid-column:1/-1;grid-row:1}
  #avatarPickerRoot .avatar-picker-foot-main{grid-column:1;grid-row:2}
  #avatarPickerRoot .avatar-picker-actions{grid-column:2;grid-row:2}
  #avatarPickerRoot .avatar-picker-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));padding:10px;gap:8px}
  #avatarPickerRoot .avatar-picker-item{padding:11px 8px 10px}
  #avatarPickerRoot .avatar-picker-item img{width:82px;height:82px}
}
@media (max-width:440px){
  #avatarPickerRoot .avatar-picker-foot{grid-template-columns:1fr}
  #avatarPickerRoot .avatar-picker-selection,
  #avatarPickerRoot .avatar-picker-foot-main,
  #avatarPickerRoot .avatar-picker-actions{grid-column:1;grid-row:auto}
  #avatarPickerRoot .avatar-picker-actions{justify-content:stretch}
  #avatarPickerRoot .avatar-picker-actions button{flex:1}
  #avatarPickerRoot .avatar-picker-more{display:none}
}
#avatarPickerRoot .auth-settings-outline-btn{
  border:1px solid #3e3e3e;background:transparent;color:#fff;
  min-height:42px;border-radius:999px;padding:9px 15px;font:inherit;font-size:.82rem;font-weight:750;cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
#avatarPickerRoot .auth-settings-outline-btn:hover{border-color:#727272;background:#202020;color:#fff}
#avatarPickerRoot .auth-settings-input{
  width:100%;box-sizing:border-box;
  min-height:48px;border:1px solid #383838;border-radius:12px;
  background:#202020;color:#fff;
  padding:11px 14px;font:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
#avatarPickerRoot .auth-settings-input:hover{background:#242424}
#avatarPickerRoot .auth-settings-input:focus{outline:none;border-color:#1ed760;box-shadow:0 0 0 3px rgba(30,215,96,.12)}
#avatarPickerRoot .sub{color:#a7a7a7;font-size:.82rem;margin:0}
#authModalRoot .auth-settings-banner-wrap{display:grid;gap:8px;margin-bottom:4px}
#authModalRoot .auth-settings-banner-preview{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:3/1;max-height:120px;
  border-radius:4px;overflow:hidden;
  background:#181818;border:1px solid #282828;
}
#authModalRoot .auth-settings-banner-preview img,
#authModalRoot .auth-settings-banner-preview .auth-settings-img,
#authModalRoot .auth-settings-banner-preview picture{
  width:100%;height:100%;object-fit:cover;display:block;
}
#authModalRoot .auth-settings-banner-empty{font-size:.82rem;color:#727272}
#imgCropRoot{
  position:fixed;inset:0;z-index:13000;
  display:grid;place-items:center;
  padding:16px;
}
#imgCropRoot .img-crop-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.82);
}
#imgCropRoot .img-crop-panel{
  position:relative;z-index:1;
  width:min(520px,100%);
  background:#111;border:1px solid #2a2a2a;border-radius:12px;
  padding:18px 18px 16px;
  color:#fff;
}
#imgCropRoot .img-crop-panel h3{margin:0 0 6px;font-size:1.18rem}
#imgCropRoot .img-crop-panel .sub{margin:0 0 14px;color:#a7a7a7;font-size:.86rem}
#imgCropRoot .img-crop-stage{display:grid;place-items:center;margin-bottom:14px}
#imgCropRoot .img-crop-view{
  position:relative;overflow:hidden;background:#000;touch-action:none;cursor:grab;
  user-select:none;
}
#imgCropRoot .img-crop-view.is-dragging{cursor:grabbing}
#imgCropRoot .img-crop-stage--avatar .img-crop-view{
  width:min(280px,72vw);height:min(280px,72vw);
  border-radius:999px;
  box-shadow:0 0 0 1px #3e3e3e;
}
#imgCropRoot .img-crop-stage--banner .img-crop-view{
  width:min(460px,100%);aspect-ratio:2.5/1;height:auto;
  border-radius:8px;
  box-shadow:0 0 0 1px #3e3e3e;
}
#imgCropRoot .img-crop-view img{
  position:absolute;left:0;top:0;
  max-width:none!important;max-height:none!important;
  pointer-events:none;user-select:none;
}
#imgCropRoot .img-crop-zoom{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  margin-bottom:14px;font-size:.82rem;color:#b3b3b3;
}
#imgCropRoot .img-crop-zoom input{width:100%}
#imgCropRoot .img-crop-actions{display:flex;justify-content:flex-end;gap:8px}
#authModalRoot .auth-settings-field-label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b3b3b3;
}
#authModalRoot .auth-settings-fields{display:grid;gap:14px}
#authModalRoot .auth-settings-field{display:grid;gap:8px}
#authModalRoot .auth-settings-field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#authModalRoot .auth-settings-input{
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  padding:12px 14px;
  border-radius:4px;
  border:1px solid #3e3e3e!important;
  background:#121212!important;
  color:#fff!important;
  font:inherit;
  font-size:.9rem;
  transition:border-color .18s var(--ease),background .18s var(--ease);
  -webkit-text-fill-color:#fff;
}
#authModalRoot .auth-settings-input::placeholder{color:#727272;opacity:1}
#authModalRoot .auth-settings-input:focus{
  outline:none;
  border-color:#fff!important;
  background:#181818!important;
}
#authModalRoot .auth-settings-input:-webkit-autofill,
#authModalRoot .auth-settings-input:-webkit-autofill:hover,
#authModalRoot .auth-settings-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 0 0 1000px #121212 inset!important;
  caret-color:#fff;
  border:1px solid #3e3e3e!important;
}
#authModalRoot .auth-settings-accent-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#authModalRoot .auth-settings-accent-row input[type="color"]{
  width:48px;height:48px;padding:0;border:1px solid #3e3e3e;
  border-radius:4px;background:#121212;cursor:pointer;
}
#authModalRoot .auth-settings-accent-row .sub{font-size:.78rem;color:#b3b3b3}
#authModalRoot .auth-settings-actions{
  display:flex;justify-content:flex-start;padding-top:4px;
}
#authModalRoot .auth-settings-primary-btn,
#authModalRoot .auth-settings-outline-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 32px;border-radius:500px;
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  transition:transform .12s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
#authModalRoot .auth-settings-primary-btn{
  border:none;
  background:#1db954;
  color:#000;
}
#authModalRoot .auth-settings-primary-btn:hover{
  background:#1ed760;
  transform:scale(1.04);
}
#authModalRoot .auth-settings-outline-btn{
  border:1px solid #727272;
  background:transparent;
  color:#fff;
}
#authModalRoot .auth-settings-outline-btn:hover{
  border-color:#fff;
  transform:scale(1.02);
}
#authModalRoot .auth-settings-msg{
  min-height:0;
  padding:0;
  border-radius:4px;
  font-size:.86rem;
  line-height:1.4;
}
#authModalRoot .auth-settings-msg:not(:empty){
  padding:10px 12px;
  background:#181818;
  border:1px solid #282828;
}
#authModalRoot .auth-settings-msg.is-ok:not(:empty){
  color:#1ed760;
  border-color:rgba(29,185,84,.35);
}
#authModalRoot .auth-settings-msg.is-err:not(:empty){
  color:#f87171;
  border-color:rgba(248,113,113,.35);
}
#authModalRoot .auth-settings-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (max-width:640px){
  #authModalRoot .modal-card.auth-settings-modal-card{width:min(100vw - 16px,480px)}
  #authModalRoot .auth-settings-field-row{grid-template-columns:1fr}
  #authModalRoot .auth-settings-primary-btn,
  #authModalRoot .auth-settings-outline-btn{width:100%}
}
@media (max-height:760px){
  #authModalRoot .modal-card.auth-settings-modal-card{max-height:calc(100vh - 20px)}
}
.admin-user-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr);
  gap:10px;
  align-items:start;
  padding:10px 8px;
  border-bottom:1px solid #223658;
}
.admin-user-main{min-width:0}
.admin-user-controls{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.admin-user-controls .search{
  margin:0;
  min-height:34px;
}
.admin-user-controls .icon{
  min-height:34px;
  padding:6px 10px;
  font-size:.82rem;
}

/* styles.css chunk 10/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Admin control room (auth.js) */
.memerap-admin-modal-outer .memerap-admin-card{
  width:min(920px,calc(100vw - 24px));
  max-height:min(88vh,calc(100dvh - 24px));
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--line) 85%,var(--accent) 15%);
  background:linear-gradient(165deg,rgba(12,14,22,.98),rgba(8,9,12,.99));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 28px 80px rgba(0,0,0,.55);
}
.memerap-admin-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);
}
.memerap-admin-card__h{margin:0;font-size:1.18rem;letter-spacing:.02em}
.memerap-admin-card__lede{margin:6px 0 0;font-size:.82rem;line-height:1.45}
.memerap-admin-close{border-radius:8px}
.memerap-admin-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}
@media (max-width:720px){
  .memerap-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.memerap-admin-stat{
  text-align:center;
  padding:10px 8px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--line) 88%,var(--accent) 12%);
  background:rgba(0,0,0,.2);
}
.memerap-admin-stat__n{display:block;font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.memerap-admin-stat__l{display:block;margin-top:2px;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.memerap-admin-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.12);
}
.memerap-admin-toolbar .memerap-admin-filter{
  flex:1 1 200px;
  min-width:160px;
  margin:0;
}
.memerap-admin-toolbar .icon,
.memerap-admin-toolbar a.icon{text-decoration:none}
.memerap-admin-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 12px 16px;
}
.memerap-admin-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-user-card{
  border:1px solid color-mix(in srgb,var(--line) 92%,var(--accent) 14%);
  border-radius:12px;
  padding:12px 14px;
  background:color-mix(in srgb,var(--panel) 94%,#000);
  border-bottom:none!important;
}
.admin-user-card.memerap-admin-row--hidden{display:none!important}
.admin-user-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.admin-user-card__title{font-size:.96rem}
.admin-user-badges{flex-shrink:0}
.memerap-admin-badge{
  font-size:.62rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
}
.memerap-admin-badge--admin{
  color:#ffb4b4;
  border-color:rgba(255,80,80,.4);
  background:rgba(80,20,20,.25);
}
.memerap-admin-badge--mod{
  color:#a8d4ff;
  border-color:rgba(100,160,255,.4);
  background:rgba(20,40,80,.3);
}
.memerap-admin-badge--user{
  color:var(--muted);
  background:rgba(0,0,0,.2);
}
.admin-user-card__controls{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
  margin-bottom:10px;
}
.memerap-admin-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.memerap-admin-field--grow{grid-column:1/-1}
@media (min-width:640px){
  .memerap-admin-field--grow{grid-column:span 2}
}
.memerap-admin-field__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.memerap-admin-select,.memerap-admin-input-num{width:100%;margin:0;min-height:36px}
.admin-user-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.memerap-admin-action--danger{
  border-color:color-mix(in srgb,#c04040 50%,var(--line))!important;
}

/* Legacy retro skin retired — site is locked to main (spotify) skin. */

/* styles.css chunk 12/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ============================================================================
   Spotify skin — closest visual match without rebuilding layout.
   Palette + flat chrome modeled on Spotify Web (#121212 / #1DB954).
   ========================================================================== */
body[data-theme="spotify"]{
  --bg:#000000; --bg2:#121212; --panel:#121212; --line:#282828;
  --text:#ffffff; --muted:#b3b3b3; --accent:#1db954;
  --accent-dim:rgba(29,185,84,.25);
  --memerap-glow-accent:none;
  --memerap-rail-width:280px;
  --memerap-player-height:90px;
  background:#000000;
}
html.memerap-spotify-layout,
html.memerap-spotify-layout body{
  height:100%;
  min-height:100%;
}
html.memerap-spotify-layout{
  overflow:hidden;
}
html.memerap-spotify-layout body{
  /* Do not clip position:fixed player on iOS — scroll lock lives on .app-shell / .main-col */
  overflow:visible;
  overscroll-behavior:none;
}
body[data-theme="spotify"]::after{content:none!important;display:none!important}
/* Full-viewport shell: sidebar | scrollable main | (optional queue) */
body[data-theme="spotify"] .app-shell{
  width:100%;max-width:100%;margin:0;gap:0;
  height:calc(100vh - var(--memerap-player-height) - env(safe-area-inset-bottom,0px));
  min-height:0;overflow:hidden;
  align-items:stretch;
}
body[data-theme="spotify"] .rail-col{
  background:#000;height:100%;position:relative;top:0;
  padding-bottom:0;overflow-y:auto;overflow-x:hidden;
}
body.memerap-spotify-queue-open[data-theme="spotify"] .main-col{
  padding-right:min(420px,32vw);
}
body[data-theme="spotify"] .rail{
  border:none;border-radius:0;background:#000;
  box-shadow:none;padding:24px 12px 12px;
}
body[data-theme="spotify"] .rail-logo{
  font-size:0;
  line-height:0;
  background:none;
  -webkit-text-fill-color:initial;
  filter:none;
  margin-bottom:22px;
  padding:0 0 0 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
/* Stamp mark — archive/vault energy, not Spotify green orb */
body[data-theme="spotify"] .rail-logo::before{
  content:"MEMERAP";
  display:block;
  font-family:var(--memerap-font-display);
  font-size:.95rem;
  font-weight:900;
  letter-spacing:.18em;
  line-height:1;
  color:#fff;
  -webkit-text-fill-color:#fff;
  text-transform:uppercase;
}
body[data-theme="spotify"] .rail-logo::after{
  content:"VAULT";
  display:block;
  font-family:var(--memerap-font-ui);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.32em;
  line-height:1;
  color:rgba(255,255,255,.42);
  -webkit-text-fill-color:rgba(255,255,255,.42);
  text-transform:uppercase;
  padding-left:.04em;
}
body[data-theme="spotify"] .rail-nav{gap:4px}
body[data-theme="spotify"] .rail-link,
body[data-theme="spotify"] .rail-nav .rail-link:not(.active){
  border:none;border-radius:4px;background:transparent;
  color:#b3b3b3;font-weight:700;font-size:.9rem;padding:10px 12px;
}
body[data-theme="spotify"] .rail-link:hover,
body[data-theme="spotify"] .rail-nav .rail-link:hover{
  color:#fff;background:#1a1a1a;
}
body[data-theme="spotify"] .rail-nav .rail-link.active,
body[data-theme="spotify"] .rail-link.active{
  color:#fff;background:#282828;box-shadow:none;border:none;
}
/* Sidebar mascot — your downloaded images from assets/mascots (rail-mascot.js) */
body[data-theme="spotify"] .rail{
  display:flex;flex-direction:column;min-height:100%;box-sizing:border-box;
}
body[data-theme="spotify"] .rail-nav,
body[data-theme="spotify"] .memerap-spotify-rail-search{flex-shrink:0}
body[data-theme="spotify"] .rail-mascot.memerap-spotify-rail-mascot,
body[data-theme="spotify"] .rail-mascot{
  display:flex!important;
  flex:1 1 auto;
  min-height:min(252px, 28vh);
  margin-top:12px;
  padding-top:8px;
  padding-bottom:4px;
}
body[data-theme="spotify"] .rail-mascot[hidden]{
  display:none!important;
  flex:none;
  min-height:0;
  margin-top:0;
  padding:0;
}
body[data-theme="spotify"] .rail-mascot-frame{
  --rail-mascot-box: min(273px, 88%);
  width:var(--rail-mascot-box);
  height:var(--rail-mascot-box);
  max-width:252px;
  max-height:min(252px, 28vh);
}
body[data-theme="spotify"] .rail-mascot--sticker .rail-mascot-frame::before{
  background:
    radial-gradient(circle at 50% 42%,rgba(30,215,96,.2) 0%,transparent 58%),
    radial-gradient(circle at 50% 55%,rgba(0,0,0,.5) 0%,rgba(24,24,24,.85) 55%,transparent 78%);
}
body[data-theme="spotify"] .main-col{
  background:linear-gradient(180deg,#2a2a2a 0%,#121212 220px,#121212 100%);
  height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
body[data-theme="spotify"] .wrap{
  padding:8px 24px 40px;max-width:1955px;margin:0 auto;
}
body[data-theme="spotify"] .memerap-spotify-rail-search{
  margin:0 8px 16px;padding:0 4px;
}
body[data-theme="spotify"] .memerap-spotify-rail-search-input{
  width:100%;border:none;border-radius:999px;
  background:#242424;color:#fff;font-size:.9rem;font-weight:600;
  padding:12px 16px;box-sizing:border-box;
}
body[data-theme="spotify"] .memerap-spotify-rail-search-input::placeholder{color:#b3b3b3}
body[data-theme="spotify"] .memerap-spotify-rail-search-input:focus{
  outline:none;background:#2a2a2a;box-shadow:0 0 0 2px #fff;
}
body[data-theme="spotify"] #railSearchBtn{display:none}
body[data-theme="spotify"] .topbar{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:none!important;
  border-radius:0!important;
  margin:0 0 8px!important;
  padding:4px 0!important;
  gap:12px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(180px,min(420px,46vw)) minmax(0,1fr);
  align-items:center;
  box-shadow:none!important;
}
body[data-theme="spotify"] .topbar::before{display:none!important}
body[data-theme="spotify"] .topbar-left{justify-self:start}
body[data-theme="spotify"] .topbar-right{justify-self:end}
body[data-theme="spotify"] .topbar-search{
  max-width:none;width:100%;margin:0;justify-self:center;
}
body[data-theme="spotify"] .topbar-search-shell{
  border:none;background:#242424!important;box-shadow:none;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-theme="spotify"] .topbar-search-shell:focus-within{
  box-shadow:0 0 0 2px #fff;border:none;
}
body[data-theme="spotify"] .topbar-search-input{
  color:#fff;
  background:transparent!important;
  -webkit-appearance:none;
  appearance:none;
}
body[data-theme="spotify"] .topbar-search-input::-webkit-search-decoration,
body[data-theme="spotify"] .topbar-search-input::-webkit-search-cancel-button,
body[data-theme="spotify"] .topbar-search-input::-webkit-search-results-button{
  -webkit-appearance:none;
}
body[data-theme="spotify"] .topbar-search-input::placeholder{color:#b3b3b3}
body[data-theme="spotify"] .topbar-search-kbd{
  border-color:#3e3e3e;color:#b3b3b3;background:#181818;
}
body[data-theme="spotify"] .chip{
  border:none;background:#000;color:#fff;border-radius:999px;
  font-weight:700;font-size:.82rem;
}
body[data-theme="spotify"] .chip:hover{background:#282828}
body[data-theme="spotify"] .hero:not(.artist-hero){
  background:transparent;border:none;box-shadow:none;
  padding:12px 4px 20px;min-height:0;
}
body[data-theme="spotify"] .hero:not(.artist-hero) h1,
body[data-theme="spotify"] .hero:not(.artist-hero) h1.memerap-spotify-greeting{
  font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.05em;
  color:#fff;text-shadow:none;line-height:1.05;
}
body[data-theme="spotify"] .hero:not(.artist-hero) h1::before{content:none}
body[data-theme="spotify"] .hero .search-row,
body[data-theme="spotify"] .hero:not(.artist-hero) > div:first-child .sub{display:none}
body[data-theme="spotify"] .hero:not(.artist-hero) p{display:none}
body[data-theme="spotify"] .hero .search,
body[data-theme="spotify"] .panel .search,
body[data-theme="spotify"] .memerap-retro-topsearch-input{
  background:#242424;border:none;border-radius:999px;
  color:#fff;box-shadow:none;
}
body[data-theme="spotify"] .hero .search::placeholder{color:#b3b3b3}
body[data-theme="spotify"] .panel,
body[data-theme="spotify"] .continue-panel{
  border:none;border-radius:8px;background:transparent;
  box-shadow:none;
}
body[data-theme="spotify"] .panel-head{
  border:none;padding:8px 4px 12px;
}
body[data-theme="spotify"] .panel-head strong{
  font-size:1.35rem;font-weight:800;letter-spacing:-.03em;
  text-transform:none;color:#fff;
}
body[data-theme="spotify"] .panel-head strong::after{content:none}
body[data-theme="spotify"] .memerap-retro-seeall{
  font-size:.78rem;font-weight:700;color:var(--muted);
  border:none;padding:0;background:transparent;
}
body[data-theme="spotify"] .memerap-retro-seeall:hover{color:#fff;background:transparent}
body[data-theme="spotify"] .cards{gap:20px}
/* Skip layout/paint work for off-screen cards (helps Firefox cover thrash). */
body[data-theme="spotify"] .cards > a.card,
body[data-theme="spotify"] .memerap-artist-card-wrap{
  content-visibility:auto;
  contain-intrinsic-size:280px 320px;
}
body[data-theme="spotify"] .card,
body[data-theme="spotify"] .continue-card{
  border:none;border-radius:8px;background:#181818;
  box-shadow:none;transition:background .18s var(--ease), transform .18s var(--ease);
}
body[data-theme="spotify"] .card:hover,
body[data-theme="spotify"] .continue-card:hover{
  background:#282828;transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);border:none;
}
body[data-theme="spotify"] .card .cover-wrap,
body[data-theme="spotify"] .continue-card .cover-wrap{overflow:hidden;border-radius:4px}
body[data-theme="spotify"] .card img,
body[data-theme="spotify"] .continue-card img{transition:transform .28s var(--ease)}
body[data-theme="spotify"] .card:hover img,
body[data-theme="spotify"] .continue-card:hover img{transform:scale(1.05)}
body[data-theme="spotify"] .card .meta .name{font-weight:700;color:#fff}
body[data-theme="spotify"] .card .meta .sub{color:var(--muted)}
body[data-theme="spotify"] .open-btn{
  background:#1db954;border:none;color:#000;font-weight:800;
  box-shadow:none;
}
body[data-theme="spotify"] .open-btn:hover{background:#1ed760;transform:none}
body[data-theme="spotify"] .memerap-retro-framed::before,
body[data-theme="spotify"] .memerap-retro-framed::after{content:none}
body[data-theme="spotify"] .memerap-retro-framed{
  border:none!important;box-shadow:none!important;
}
body[data-theme="spotify"] .continue-row{gap:16px}

/* Spotify — extra polish: flat sidebar, no clutter, mascot stays */
body[data-theme="spotify"] .hero:not(.artist-hero)::before,
body[data-theme="spotify"] .hero:not(.artist-hero)::after{display:none!important}
body[data-theme="spotify"] .memerap-spotify-hero-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:4px 0 8px;
}
body[data-theme="spotify"] .memerap-spotify-shuffle-btn{
  border:none;border-radius:999px;background:#1db954;color:#000;
  font-weight:800;font-size:.86rem;padding:10px 22px;cursor:pointer;flex-shrink:0;
}
body[data-theme="spotify"] .memerap-spotify-shuffle-btn:hover{background:#1ed760}
body[data-theme="spotify"].memerap-signed-in .rail-link.active,
body[data-theme="spotify"] .rail-nav .rail-link.active{
  border:none!important;box-shadow:none!important;
  color:#fff;background:#282828;
}
body[data-theme="spotify"] .rail-nav .rail-link:not(.active){
  border:none!important;background:transparent;
}
body[data-theme="spotify"] .topbar-right > a.chip[href*="liked"],
body[data-theme="spotify"] .topbar-right > a.chip[href*="scene"],
body[data-theme="spotify"] .topbar-right > a.chip[href*="index.html"]{
  display:none!important;
}
/* Top chrome: Email + avatar */
body[data-theme="spotify"] .topbar-right{
  gap:6px;
}
body[data-theme="spotify"] .memerap-chat-fab.chip.memerap-chat-fab--topbar,
body[data-theme="spotify"] .memerap-chat-fab.chip{
  display:none!important;
}
body[data-theme="spotify"] .topbar-right > #emailCopyBtn{
  display:inline-flex!important;
  border-color:transparent;
  background:rgba(255,255,255,.08);
}
body[data-theme="spotify"] .memerap-account-btn.chip{
  border-color:transparent;background:rgba(255,255,255,.08);
  padding:4px 10px 4px 4px;
}
body[data-theme="spotify"] .rail-mascot-glow{display:none}
body[data-theme="spotify"] .continue-card{
  border:none;border-radius:8px;background:#181818;
}
body[data-theme="spotify"] .continue-card:hover{
  border:none;background:#282828;
}
/* topbar flat rules live in the primary spotify .topbar block above */

/* Spotify bottom player — 3-zone layout (now playing | transport+seek | extras) */
body[data-theme="spotify"] .sticky{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:none;border-top:1px solid #282828;border-radius:0;
  background:#181818;height:var(--memerap-player-height);
  box-shadow:none;padding:0 16px;
  padding-bottom:max(0px, env(safe-area-inset-bottom, 0px));
}
body[data-theme="spotify"] .sticky::before{
  content:"";position:absolute;top:0;left:0;height:4px;width:var(--memerap-sp-progress,0%);
  background:#1db954;z-index:2;pointer-events:none;
  transition:width .12s linear;
}
body[data-theme="spotify"] .sticky-inner{
  display:grid!important;
  /* Equal side rails so transport stays visually centered (not pushed by long titles). */
  grid-template-areas:"left center right";
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  width:100%;max-width:1800px;margin:0 auto;
  padding:10px 0;height:100%;
  box-sizing:border-box;
}
body[data-theme="spotify"] .sticky-inner > div:empty:not(.ctrls){
  display:none!important;
}
body[data-theme="spotify"] .memerap-spotify-player-left{
  grid-area:left;
  display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;
  overflow:hidden;
}
body[data-theme="spotify"] .memerap-spotify-player-center{
  grid-area:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;
  width:min(560px,42vw);
  max-width:100%;
  justify-self:center;
}
body[data-theme="spotify"] .memerap-spotify-player-right{
  grid-area:right;
  display:flex;justify-content:flex-end;align-items:center;min-width:0;max-width:100%;
  overflow:visible;flex-shrink:0;
}
body[data-theme="spotify"] .memerap-spotify-now-meta{min-width:0;flex:1;overflow:hidden}
body[data-theme="spotify"] .cover{
  width:56px;height:56px;min-width:56px;border-radius:4px;border:none;
  box-shadow:none;flex-shrink:0;
}
body[data-theme="spotify"] .meta-title{
  font-size:.9rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .18s var(--ease);
}
body[data-theme="spotify"] .memerap-spotify-player-left:hover .meta-title{text-decoration:underline}
body[data-theme="spotify"] .cover{transition:box-shadow .18s var(--ease)}
body[data-theme="spotify"] .memerap-spotify-player-left:hover .cover{
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
body[data-theme="spotify"] .meta-sub{
  font-size:.78rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-theme="spotify"] .memerap-spotify-audio-hidden{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;
}
body[data-theme="spotify"] .memerap-spotify-transport{
  display:flex;align-items:center;justify-content:center;gap:12px;
}
body[data-theme="spotify"] .memerap-spotify-seek-row{
  display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;
  width:100%;max-width:520px;
}
body[data-theme="spotify"] .memerap-spotify-time{
  font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;
}
body[data-theme="spotify"] .memerap-spotify-seek{
  width:100%;height:4px;margin:0;accent-color:#1db954;cursor:pointer;
  transition:height .12s var(--ease);
}
body[data-theme="spotify"] .memerap-spotify-seek:hover{height:6px}
body[data-theme="spotify"] .memerap-spotify-toolbar{
  display:flex;align-items:center;gap:6px;flex-shrink:0;margin-right:8px;
}
body[data-theme="spotify"] .memerap-spotify-extras{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap;
  overflow:visible;max-width:100%;
}
body[data-theme="spotify"] .memerap-volume-wrap .memerap-vol-range{
  width:68px;max-width:68px;
}
body[data-theme="spotify"] .memerap-volume-wrap{
  padding:2px 6px 2px 4px;
}
/* Dedicated Spotify toolbar chips — always visible, not inside hidden .ctrls */
body[data-theme="spotify"] .memerap-spotify-toolbar-btn{
  display:inline-flex!important;align-items:center;justify-content:center;
  gap:4px;flex-shrink:0;width:auto;min-width:auto;height:32px;
  padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  font-size:.72rem;font-weight:800;line-height:1;
  box-shadow:none;
}
body[data-theme="spotify"] .memerap-spotify-toolbar-btn:hover{
  color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);
}
body[data-theme="spotify"] .memerap-spotify-toolbar-btn.mode-on{
  color:#1db954;border-color:rgba(29,185,84,.45);
  background:rgba(29,185,84,.12);
}
body[data-theme="spotify"] .memerap-spotify-tbtn-icon{
  font-size:1rem;line-height:1;
}
body[data-theme="spotify"] .memerap-spotify-tbtn-label{
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
}
body[data-theme="spotify"] .memerap-spotify-ctrls-hidden #themeBtn,
body[data-theme="spotify"] .memerap-spotify-ctrls-hidden #bigViewBtn,
body[data-theme="spotify"] #memerapMoreMenu #themeBtn{
  display:none!important;
}
body[data-theme="spotify"] .memerap-more-menu{
  background:#282828;border-color:#3e3e3e;border-radius:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  min-width:220px;
}
body[data-theme="spotify"] .memerap-more-section{
  color:#727272;padding-left:10px;
}
body[data-theme="spotify"] .memerap-more-section:not(:first-child){
  border-top-color:#3e3e3e;
}
body[data-theme="spotify"] .memerap-more-label{color:#b3b3b3}
body[data-theme="spotify"] .memerap-more-row:hover{background:rgba(255,255,255,.06)}
body[data-theme="spotify"] .memerap-more-section--look,
body[data-theme="spotify"] #memerapMoreMenu [data-memerap-more-for="themeBtn"]{
  display:none!important;
}
body[data-theme="spotify"] .memerap-spotify-extras{
  overflow:visible;
}
body[data-theme="spotify"] .memerap-spotify-ctrls-hidden{
  display:none!important;
}
body[data-theme="spotify"] .icon,
body[data-theme="spotify"] .chip,
body[data-theme="spotify"] select.icon{
  border:none;background:transparent;color:#b3b3b3;
  box-shadow:none;min-height:36px;
}
body[data-theme="spotify"] .icon:hover,
body[data-theme="spotify"] select.icon:hover{color:#fff;background:transparent}
body[data-theme="spotify"] .icon.memerap-play-btn{
  width:40px;min-width:40px;height:40px;min-height:40px;
  background:#1db954;color:#000;border:none;border-radius:50%;
  box-shadow:0 4px 20px rgba(29,185,84,.4);font-size:1.08rem;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
body[data-theme="spotify"] .icon.memerap-play-btn:hover{
  background:#1ed760;transform:scale(1.06);
  box-shadow:0 6px 28px rgba(30,215,96,.5);
}
body[data-theme="spotify"] .icon.memerap-play-btn.is-playing{
  background:#1db954;color:#000;
}
body[data-theme="spotify"] .icon.mode-on{color:#1db954;background:transparent}
body[data-theme="spotify"] .memerap-time-chip{
  background:transparent;border:none;color:var(--muted);font-size:.72rem;
}
body[data-theme="spotify"] .memerap-time-chip::before{content:none}
body[data-theme="spotify"] .memerap-boombox-speaker,
body[data-theme="spotify"] .memerap-boombox-cassette,
body[data-theme="spotify"] .memerap-retro-girl{display:none!important}
body[data-theme="spotify"] .sticky.memerap-boombox-deck{
  display:block;padding:0 16px;
}
body[data-theme="spotify"] .sticky.memerap-boombox-deck .sticky-inner{
  width:100%;max-width:1800px;margin:0 auto;
}

/* Queue = Spotify right panel */
body[data-theme="spotify"] .queue-drawer{
  position:fixed;top:0;right:0;
  height:calc(100vh - var(--memerap-player-height) - env(safe-area-inset-bottom,0px));
  width:min(420px,32vw);
  border-left:1px solid #282828;background:#121212;
  padding:16px;z-index:1250;
  transform:translateX(100%);
  transition:transform .28s var(--ease);
}
body[data-theme="spotify"] .queue-drawer.show{
  right:0;transform:translateX(0);
}
body[data-theme="spotify"] .queue-head strong{
  font-size:1.08rem;font-weight:800;color:#fff;
}

/* Spotify Big View modal */
body[data-theme="spotify"] #bigModal.memerap-retro-deck .modal-card,
body[data-theme="spotify"] #bigModal .modal-card{
  background:#282828;border:none;border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.6);
}
body[data-theme="spotify"] #bigModal #bigTitle{color:#fff;font-weight:800}
body[data-theme="spotify"] #bigModal #bigMeta{color:var(--muted)}
body[data-theme="spotify"] #bigModal .memerap-fs-playbtn{
  background:#1db954!important;color:#000!important;border:none!important;
  border-radius:50%!important;
}
body[data-theme="spotify"] .memerap-retro-topsearch{
  border:none;background:#242424;box-shadow:none;
}
body[data-theme="spotify"] .cards{
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:20px 24px;
}
@media (max-width:900px){
  body[data-theme="spotify"] .rail-mascot-frame{
    --rail-mascot-box: min(213px, 80%);
    width:var(--rail-mascot-box);
    height:var(--rail-mascot-box);
    max-width:213px;
    max-height:min(213px, 22vh);
  }
  body[data-theme="spotify"] .memerap-volume-wrap .memerap-vol-range{width:52px;max-width:52px}
  body[data-theme="spotify"] .memerap-spotify-tbtn-label{display:none}
  body[data-theme="spotify"] .memerap-spotify-toolbar-btn{padding:4px 9px;min-width:36px}
  body[data-theme="spotify"] .sticky-inner{
    grid-template-areas:"center" "left" "right";
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:8px;padding:8px 0;
  }
  body[data-theme="spotify"] .memerap-spotify-player-center{order:-1;grid-area:center}
  body[data-theme="spotify"] .memerap-spotify-player-left{grid-area:left}
  body[data-theme="spotify"] .memerap-spotify-player-right{grid-area:right}
  body[data-theme="spotify"] .memerap-spotify-seek-row{max-width:100%}
  body[data-theme="spotify"] .app-shell{
    height:auto;min-height:calc(100vh - var(--memerap-player-height));
    grid-template-columns:1fr;
  }
  body[data-theme="spotify"] .rail-col{height:auto;max-height:none}
  body[data-theme="spotify"] .main-col{height:auto;overflow:visible}
  html.memerap-spotify-layout,
  html.memerap-spotify-layout body{overflow:auto;height:auto}
}

/* Skin switcher removed — main (spotify) only. */
#themeBtn,
#memerapTopbarSkinBtn,
#memerapSpotifySkinBtn,
#memerapAccountThemeBtn,
.memerap-account-theme-btn,
.memerap-more-section--look,
.memerap-more-row[data-memerap-more-for="themeBtn"]{
  display:none!important;
}

/* Legacy contrast skin retired — site is locked to main (spotify) skin. */

/* styles.css chunk 14/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ----- Global search modal (site palette / glass — not a separate blue skin) ----- */
.search-modal-root .search-modal-bg{
  position:absolute; inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.search-modal-card{
  position: relative;
  z-index: 2;
  width: min(760px, 95vw);
  margin: 6vh auto;
  border: 1px solid color-mix(in srgb, var(--line, #282828) 80%, rgba(255,255,255,.12));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 42%),
    color-mix(in srgb, var(--panel, #121212) 82%, transparent);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  color: var(--text, #fff);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.search-modal-head{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #282828);
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-modal-input{
  margin-top: 0;
  flex: 1;
  min-width: 0;
  color: var(--text, #fff);
  background: color-mix(in srgb, var(--bg, #000) 55%, transparent);
  border: 1px solid var(--line, #282828);
}
.search-modal-input::placeholder{ color: var(--muted, #b3b3b3); opacity: 1; }
.search-modal-input:focus,
.search-modal-input:focus-visible{
  border-color: var(--accent, #1db954);
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #1db954) 40%, transparent);
}
.search-modal-close{ display: none; }
.search-modal-item.q-item{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--text, #fff);
  background: color-mix(in srgb, var(--bg2, #121212) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, #282828) 85%, transparent);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.search-modal-item.q-item:hover{
  background: color-mix(in srgb, var(--text, #fff) 6%, var(--panel, #121212));
  border-color: color-mix(in srgb, var(--line, #282828) 60%, rgba(255,255,255,.14));
}
.search-modal-item.search-modal-cmd,
a.search-modal-item.q-item{
  grid-template-columns: minmax(0, 1fr) auto;
}
.search-modal-item.search-modal-cmd .title{
  color: var(--text, #fff);
  font-weight: 650;
  font-size: .92rem;
}
.search-modal-item.search-modal-cmd .tiny{
  color: var(--muted, #b3b3b3);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
  opacity: 1;
}
.search-modal-thumb{
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: #1a1a1a;
  flex: none;
}
.search-modal-thumb--empty{ display: block; }
.search-modal-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.search-modal-copy .title{
  color: var(--text, #fff);
  font-weight: 650;
  font-size: .9rem;
}
.search-modal-copy .tiny{
  color: var(--muted, #b3b3b3);
  font-size: .78rem;
}
.search-modal-copy .title,
.search-modal-copy .tiny{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-modal-results{
  max-height: 58vh;
  overflow: auto;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-modal-section{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-modal-section-head{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #b3b3b3);
  padding: 4px 2px 2px;
}
.search-modal-section-body{
  display: grid;
  gap: 6px;
}
.search-modal-track-wrap{
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.search-modal-track-wrap .search-modal-item.q-item{
  flex: 1;
  min-width: 0;
}
.search-modal-dl{
  flex-shrink: 0;
  align-self: stretch;
  min-width: 40px;
  color: var(--muted, #b3b3b3);
}
.search-modal-item.search-modal-item-active{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent, #1db954) 16%, var(--panel, #121212));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #1db954) 35%, transparent);
  color: var(--text, #fff);
}
.search-modal-item.search-modal-item-active .title,
.search-modal-item.search-modal-item-active.search-modal-cmd .title{
  color: var(--text, #fff);
}
body.memerap-signed-in .search-modal-item.search-modal-item-active{
  border-color: var(--profile-accent, var(--accent));
  background: color-mix(in srgb, var(--profile-accent, var(--accent)) 16%, var(--panel, #121212));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--profile-accent, var(--accent)) 40%, transparent);
}
.search-modal-footer{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line, #282828);
  font-size: .78rem;
  color: var(--muted, #b3b3b3);
}
.search-modal-footer-k{ margin-left: auto; opacity: .85; }
.kbd-hint{
  display: inline-block;
  font-size: .68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: 4px;
  border: 1px solid var(--line, #282828);
  background: color-mix(in srgb, var(--bg2, #121212) 80%, transparent);
  color: var(--text, #fff);
  line-height: 1.35;
  vertical-align: middle;
}
.search-hit{
  background: rgba(30,215,96,.28);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
body.memerap-signed-in .search-hit{
  background: color-mix(in srgb, var(--profile-accent, #4f83ff) 35%, transparent);
}

/* ----- Skeleton loading ----- */
@keyframes memerap-sk-shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}
.card-skeleton{
  pointer-events: none;
  border-color: #2a2a2a !important;
}
.thumb-skeleton{
  border-radius: 12px;
  background: linear-gradient(110deg,#222 8%,#2e3034 18%,#222 34%);
  background-size: 220% 100%;
  animation: memerap-sk-shimmer 1.25s ease-in-out infinite;
}
.member-thumb.thumb-skeleton{
  aspect-ratio: 16 / 7;
  border-radius: 12px 12px 0 0;
}
.sk-line{
  height: 11px;
  border-radius: 8px;
  background: linear-gradient(110deg,#262626 8%,#383838 18%,#262626 34%);
  background-size: 220% 100%;
  animation: memerap-sk-shimmer 1.25s ease-in-out infinite;
  margin-bottom: 8px;
}
.sk-line:last-child{ margin-bottom: 0; }
.sk-line-lg{ width: 72%; }
.sk-line-md{ width: 56%; }
.sk-line-sm{ width: 40%; }

/* ----- What's new (memerap-changelog.js) ----- */
.memerap-whats-new{
  position: fixed;
  right: clamp(12px, 3vw, 20px);
  bottom: clamp(100px, 18vh, 180px);
  z-index: 2100;
  max-width: min(380px, calc(100vw - 28px));
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line, #3a3a3a) 90%, transparent);
  background: linear-gradient(165deg, #151922 0%, #0e1218 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  color: var(--text, #e5e5e5);
}
.memerap-whats-new-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.memerap-whats-new-title{
  font-size: .96rem;
  letter-spacing: .02em;
}
.memerap-whats-new-ver{
  font-size: .72rem;
  color: var(--muted, #a9a9a9);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.memerap-whats-new-list{
  margin: 0 0 12px;
  padding-left: 1.15rem;
  font-size: .82rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text, #e5e5e5) 92%, var(--muted, #888));
}
.memerap-whats-new-list li + li{
  margin-top: 6px;
}
.memerap-whats-new-actions{
  display: flex;
  justify-content: flex-end;
}
.memerap-whats-new-btn{
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

/* ---- Member direct messages (memerap-chat.js) ---- */
.memerap-chat-root{
  position: fixed;
  z-index: 12450;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(
    var(--memerap-rail-player-clearance) + var(--memerap-chat-above-player-gap) + env(safe-area-inset-bottom, 0px)
  );
  pointer-events: none;
}
.memerap-chat-root .memerap-chat-panel{
  pointer-events: auto;
}
/* Lives in .topbar-right with Liked / Scene / account */
.memerap-chat-fab.chip,
.memerap-chat-fab.chip.memerap-chat-fab--topbar{
  position: relative;
  min-height: 36px;
  padding: 7px 12px;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  color: #f2f2f2;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: auto;
}
.memerap-chat-fab.chip:hover{
  background: #2a2a2a;
  border-color: color-mix(in srgb, var(--accent) 28%, #555);
}
.memerap-chat-fab.chip.is-open,
.memerap-chat-fab.chip.memerap-toggle-on{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: none;
  transform: none;
  opacity: 1;
}
.memerap-chat-fab.has-unread{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.memerap-chat-fab.chip.memerap-chat-fab--floating{
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 12460;
}
@media (max-width: 720px){
  .memerap-chat-fab-label{display:none}
  .memerap-chat-fab.chip{padding:7px 10px}
}
.memerap-chat-fab-ico{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: .92;
}
.memerap-chat-fab-label{
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;
}
.memerap-chat-fab-badge{
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 85%, #111);
  color: #0a0a0a;
  font-size: .62rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.memerap-chat-panel{
  width: min(100vw - 24px, 320px);
  max-height: min(
    440px,
    calc(
      100dvh - var(--memerap-chat-top-reserve) - var(--memerap-rail-player-clearance) -
        var(--memerap-chat-above-player-gap) - env(safe-area-inset-bottom, 0px) - 56px
    )
  );
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg, #0a0a0a);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 18px 48px rgba(0, 0, 0, .45);
  overflow: hidden;
  order: 1;
}
/* Author `display:flex` beats the UA [hidden] rule — force a real hide when toggled off. */
.memerap-chat-panel[hidden],
.memerap-chat-pane[hidden],
.memerap-chat-footer[hidden],
.memerap-chat-back[hidden],
.memerap-chat-fab[hidden],
.memerap-chat-img-preview[hidden],
.memerap-chat-crypto-hint[hidden],
.memerap-chat-fab-badge[hidden]{
  display: none !important;
}
.memerap-chat-head{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  background: #0a0a0a;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.memerap-chat-head-title{
  flex: 1;
  font-size: .86rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memerap-chat-root.memerap-chat-root--drag .memerap-chat-head{
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.memerap-chat-root.memerap-chat-root--drag .memerap-chat-head.memerap-chat-head--grabbing{
  cursor: grabbing;
}
.memerap-chat-root.memerap-chat-root--drag .memerap-chat-head-title{
  cursor: grab;
}
.memerap-chat-back,
.memerap-chat-close,
.memerap-chat-notify{
  border: none;
  background: transparent;
  color: #e8e8e8;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: .96rem;
  line-height: 1;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.memerap-chat-back:hover,
.memerap-chat-close:hover,
.memerap-chat-notify:hover{
  background: #1a2233;
}
.memerap-chat-pane{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
}
.memerap-chat-toolbar{
  margin-bottom: 6px;
}
.memerap-chat-toolbar .chip{
  font-size: .78rem;
  padding: 5px 10px;
}
.memerap-chat-threadlist{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.memerap-chat-thread-item{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 1px 8px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  position: relative;
}
.memerap-chat-thread-item:hover,
.memerap-chat-thread-item.has-unread{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.memerap-chat-thread-peer{
  font-weight: 600;
  font-size: .82rem;
  grid-column: 1;
}
.memerap-chat-thread-time{
  font-size: .62rem;
  color: var(--muted, #9aa0a8);
  align-self: start;
}
.memerap-chat-thread-preview{
  grid-column: 1 / -1;
  font-size: .72rem;
  color: color-mix(in srgb, var(--text, #e5e5e5) 78%, var(--muted, #888));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 28px;
}
.memerap-chat-thread-unread{
  position: absolute;
  right: 8px;
  bottom: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 85%, #111);
  color: #0a0a0a;
  font-size: .62rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}
.memerap-chat-pane-thread{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.memerap-chat-messages{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 100px;
  overflow: auto;
  padding: 2px 0;
}
.memerap-chat-bubble{
  align-self: flex-start;
  max-width: 88%;
  padding: 6px 8px;
  border-radius: 8px;
  background: #141414;
  border: 1px solid var(--line);
}
.memerap-chat-bubble.is-mine{
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 14%, #0a0a0a);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.memerap-chat-bubble-meta{
  font-size: .62rem;
  color: var(--muted, #9aa0a8);
  margin-bottom: 3px;
}
.memerap-chat-bubble-body{
  font-size: .82rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.memerap-chat-bubble-img-link{
  display: block;
  margin: 2px 0 4px;
}
.memerap-chat-bubble-img{
  display: block;
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
  object-fit: cover;
}
.memerap-chat-footer{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 8px;
  border-top: 1px solid var(--line);
  background: #0a0a0a;
  flex-shrink: 0;
}
.memerap-chat-compose{
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.memerap-chat-attach{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  color: #f2f2f2;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .96rem;
}
.memerap-chat-attach:hover{
  background: #2a2a2a;
  border-color: color-mix(in srgb, var(--accent) 28%, #555);
}
.memerap-chat-input{
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  resize: none;
  min-height: 32px;
  max-height: 88px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  color: #f2f2f2;
  font: inherit;
  font-size: .82rem;
  line-height: 1.3;
}
.memerap-chat-send{
  flex-shrink: 0;
  font-size: .78rem;
  padding: 6px 10px;
}
.memerap-chat-img-preview{
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.memerap-chat-img-preview img{
  display: block;
  max-width: 120px;
  max-height: 80px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}
.memerap-chat-img-clear{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: #2a3140;
  color: #fff;
  cursor: pointer;
  font-size: .68rem;
  line-height: 1;
}
.memerap-chat-hint,
.memerap-chat-empty{
  font-size: .78rem;
  color: var(--muted, #a9a9a9);
  line-height: 1.35;
}
.memerap-chat-label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .78rem;
  margin: 0 0 8px;
}
.memerap-chat-pane-new .input{
  width: 100%;
  box-sizing: border-box;
  font-size: .82rem;
  padding: 7px 9px;
}
.memerap-chat-search-results{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.memerap-chat-search-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0a0a0a;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.memerap-chat-search-item:hover{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.memerap-chat-search-av{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #141414;
}
.memerap-chat-search-av.is-fallback{
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  color: #c9d2e0;
}
.memerap-chat-search-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.memerap-chat-search-user{
  font-size: .82rem;
  font-weight: 600;
}
.memerap-chat-search-display{
  font-size: .68rem;
  color: var(--muted, #9aa0a8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-card-with-dm{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.member-card-with-dm > a.member-card{
  align-self: stretch;
  margin: 0;
}
.member-card-with-dm .memerap-open-dm{
  align-self: stretch;
  margin: 0;
}
.memerap-chat-crypto-hint{
  font-size: .72rem;
  line-height: 1.35;
  margin: 0 10px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, #f5a623 18%, transparent);
  color: #f0c878;
}
.memerap-chat-crypto-hint a{
  color: #9fd4ff;
}
.memerap-chat-thread-actions{
  padding: 0 0 4px;
  display: flex;
  justify-content: flex-end;
}
.memerap-chat-delete-thread{
  font-size: .68rem;
  opacity: .85;
  padding: 4px 8px;
}
.memerap-people-thread-card.has-unread{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.memerap-people-thread-peer .memerap-chat-thread-unread{
  position: static;
  margin-left: 6px;
  vertical-align: middle;
}
@media (max-width: 720px){
  .memerap-chat-root{
    right: max(8px, env(safe-area-inset-right, 0px));
  }
  .memerap-chat-panel{
    width: min(100vw - 16px, 320px);
    max-height: min(
      78dvh,
      calc(
        100dvh - 72px - var(--memerap-rail-player-clearance) - var(--memerap-chat-above-player-gap) -
          env(safe-area-inset-bottom, 0px) - 56px
      )
    );
  }
}

/* styles.css chunk 15/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* Dynamic cover-art accent — memerap-cover-theme.js sets --cover-accent per song; it falls back to
   --accent when there is no cover or sampling fails, so the Skin switcher + profile accent are
   untouched. Purely additive: a soft glow line across the top edge of the player bar.
   (No :root default for --cover-accent on purpose — CSS uses var(--cover-accent, var(--accent))
   fallback syntax, and the visualizer JS reads an empty value cleanly when no cover is sampled.) */
.sticky{
  border-top:1px solid color-mix(in srgb, var(--cover-accent, var(--accent)) 30%, #2f2f34);
}
.sticky::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--cover-accent, var(--accent)) 85%, transparent) 18%,
    color-mix(in srgb, var(--cover-accent, var(--accent)) 85%, transparent) 82%,
    transparent);
  box-shadow:0 0 26px 2px color-mix(in srgb, var(--cover-accent, var(--accent)) 42%, transparent);
  /* Pulses with the music: the visualizer maintains --memerap-beat (0..~1) each frame, and the
     reduced-motion block below pins it to 0, so this calc is steady for those users automatically. */
  opacity:calc(.5 + var(--memerap-beat, 0) * .5);
  transition:background .8s var(--ease), box-shadow .8s var(--ease);
}

/* Ambient cover-color wash behind the WHOLE page (Wave 3 carry-over).
   - All visible content lives inside .app-shell (z-index:1) or higher overlays, and body has no
     stacking context. So this fixed ::before at z-index:0 paints ABOVE body's opaque black
     background (z-index:-1 would be hidden behind it) but BELOW .app-shell — it glows softly
     through the page gutters, the gaps between panels, and the area below content.
   - Driven by --cover-accent (memerap-cover-theme.js); falls back to --accent so there is always a
     gentle ambient even with no cover. It does NOT touch the old, disabled #nowBg wallpaper system.
   - Two top/bottom radial blooms keep it as an edge aura rather than a flat tint over the content. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(135% 75% at 50% -12%,
      color-mix(in srgb, var(--cover-accent, var(--accent)) 24%, transparent),
      transparent 58%),
    radial-gradient(135% 70% at 50% 112%,
      color-mix(in srgb, var(--cover-accent, var(--accent)) 18%, transparent),
      transparent 60%);
  opacity:.85;
  transition:background 1s var(--ease), opacity 1s var(--ease);
}

/* Like-button burst — a satisfying heart pop + a ring that radiates in the cover color.
   memerap-ui-fx.js toggles .memerap-like-pop on the like buttons for the existing
   memerap:likeburst event. Purely additive: no effect until the class is present. */
@keyframes memerap-like-pop{
  0%{transform:scale(1)}
  32%{transform:scale(1.4)}
  60%{transform:scale(.9)}
  100%{transform:scale(1)}
}
@keyframes memerap-like-ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cover-accent, var(--accent)) 70%, transparent)}
  100%{box-shadow:0 0 0 18px transparent}
}
.like-btn.memerap-like-pop,
#bigFsLike.memerap-like-pop{
  animation:memerap-like-pop .45s ease, memerap-like-ring .6s ease-out;
}

@media (prefers-reduced-motion: reduce){
  :root{--memerap-beat:0 !important;}
  .sticky::before{transition:none!important;}
  body::before{transition:none!important;}
  .like-btn.memerap-like-pop,#bigFsLike.memerap-like-pop{animation:none!important;}
  .rail{transition:none!important;}
  html{scroll-behavior:auto;}
  #bigModal:not(.hidden) .modal-bg{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  .panel-body .list .row{animation:none!important;}
  #tracks.memerap-tracks-reveal > .cards{animation:none!important;}
  .rail-mascot-glow,.rail-mascot .rail-mascot-frame{animation:none!important}
  .rail-mascot--motion.is-visible .rail-mascot-img{animation:none!important;will-change:auto}
  .rail-mascot--sticker.rail-mascot--motion.is-visible .rail-mascot-img{animation:none!important;transform:scale(1.08)}
  .hero:not(.artist-hero)::before{transition:none!important;transform:none!important;}
  #bigCover{transition:none!important;transform:none!important;}
  .rail-link,.chip,.card,.search-modal-item,.cards > a.card:not(.card-skeleton){ transition: none !important; }
  .topbar{ transition: none !important; }
  .topbar:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 10px 32px rgba(0,0,0,.3)!important;border-color:var(--line)!important; }
  .chip:hover{ transform:none!important;box-shadow:none!important; }
  .cards > a.card:not(.card-skeleton):hover{ transform: none; }
  .cards > a.card:not(.card-skeleton)::after{ animation:none!important; opacity:0!important; }
  .cards > a.card:active{transform:none!important;}
  .row:hover{transform:none!important;}
  #cover img.cover-img,#bigCover img.cover-img{transform:none!important;transition:none!important}
  .viz{transform:none!important;transition:none!important}
  .memerap-eyecatch__rays{animation:none!important}
  .memerap-mascot-bubble{transition:none!important}
  #nowTitle.memerap-title-hit,#bigTitle.memerap-title-hit{animation:none!important}
  .thumb-skeleton,.sk-line{ animation: none !important; background: #2a2a2a; }
  .h-rail-track{scroll-snap-type:none;}
}

/* ---------- Visual polish pass ---------- */
/* Themed text selection — small detail that makes the whole app feel intentional. */
::selection{background:color-mix(in srgb, var(--accent) 38%, transparent);color:#fff;}
::-moz-selection{background:color-mix(in srgb, var(--accent) 38%, transparent);color:#fff;}

/* Custom page scrollbar (subtle, on-brand). Component scrollbars keep their own thinner styles
   via higher specificity, so this only dresses the main document scroller. */
html{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--accent) 24%, #2a2a2a) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{width:12px;height:12px;}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{background:transparent;}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #3a3a3a, #262626);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #3a3a3a), color-mix(in srgb, var(--accent) 32%, #262626));
  background-clip:content-box;
}

/* Premium cover-art zoom on card hover. Card already clips overflow, so the image scales cleanly
   inside its rounded frame. GPU-cheap (transform only). */
.cards > a.card:not(.card-skeleton) .thumb img{
  transition:transform .5s var(--ease);
  will-change:transform;
}
.cards > a.card:not(.card-skeleton):hover .thumb img{
  transform:scale(1.05);
}
@media (prefers-reduced-motion: reduce){
  .cards > a.card:not(.card-skeleton) .thumb img,
  .cards > a.card:not(.card-skeleton):hover .thumb img{
    transition:none!important;
    transform:none!important;
  }
}

/* ---------- Listen Together ---------- */
.memerap-lt-banner{
  position:fixed;
  top:max(12px, env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%);
  z-index:2147483500;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(94vw, 560px);
  padding:9px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #102a18), #070707);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--accent) 16%, transparent);
  font-size:.86rem;
  animation:memerapSleepIn .16s ease;
}
.memerap-lt-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);animation:memerapLtPulse 1.6s ease-out infinite;flex-shrink:0;}
@keyframes memerapLtPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);}70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.memerap-lt-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.memerap-lt-btn{
  flex-shrink:0;
  border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--text,#eee);
  border-radius:999px;
  padding:5px 11px;
  font:inherit;
  font-size:.82rem;
  cursor:pointer;
}
.memerap-lt-btn:hover{background:color-mix(in srgb, var(--accent) 24%, transparent);}
.memerap-lt-end{border-color:#5a2a2a;background:rgba(220,80,80,.14);}
.memerap-lt-end:hover{background:rgba(220,80,80,.24);}
.memerap-lt-join{position:fixed;inset:0;z-index:2147483550;display:grid;place-items:center;background:rgba(0,0,0,.7);}
.memerap-lt-join-card{
  width:min(92vw, 380px);
  padding:24px 22px;
  border-radius:16px;
  text-align:center;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:linear-gradient(188deg, color-mix(in srgb, var(--panel) 88%, #102a18), #060606);
  box-shadow:0 28px 80px rgba(0,0,0,.6);
}
.memerap-lt-join-title{font-size:1.18rem;font-weight:800;font-family:var(--memerap-font-display,inherit);}
.memerap-lt-join-sub{color:var(--muted,#b3b3b3);font-size:.9rem;margin:6px 0 18px;}
.memerap-lt-join-actions{display:flex;gap:10px;justify-content:center;}
.memerap-lt-join-yes,.memerap-lt-join-no{
  min-height:44px;padding:0 18px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;
}
.memerap-lt-join-yes{border:1px solid color-mix(in srgb, var(--accent) 55%, #0a3d1f);color:#031308;background:linear-gradient(180deg,#4cf288,var(--accent));}
.memerap-lt-join-no{border:1px solid var(--line);background:#101010;color:var(--text,#eee);}
@media (prefers-reduced-motion: reduce){
  .memerap-lt-banner{animation:none!important;}
  .memerap-lt-dot{animation:none!important;}
}

/* ---------- Your Stats modal ---------- */
.memerap-stats-modal{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;}
.memerap-stats-bg{position:absolute;inset:0;background:rgba(0,0,0,.72);}
.memerap-stats-card{
  position:relative;
  width:min(94vw, 720px);
  max-height:min(90dvh, 860px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:22px 22px 26px;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--line) 65%, var(--accent) 18%);
  background:linear-gradient(188deg, color-mix(in srgb, var(--panel) 86%, #121212), #060606 70%);
  box-shadow:0 28px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation:memerapSleepIn .16s ease;
}
.memerap-stats-x{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:8px;
  border:1px solid var(--line);background:#101010;color:var(--text,#eee);cursor:pointer;font-size:1rem;
}
.memerap-stats-x:hover{background:#1a1a1a;}
.memerap-stats-h{margin:0 0 14px;font-family:var(--memerap-font-display,inherit);font-size:1.5rem;}
.memerap-stats-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.memerap-stats-stat{
  display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  padding:14px 8px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb, var(--accent) 6%, #0c0c0c);
}
.memerap-stats-stat b{font-size:1.5rem;color:var(--accent);font-family:var(--memerap-font-display,inherit);}
.memerap-stats-stat span{font-size:.78rem;color:var(--muted,#b3b3b3);}
.memerap-stats-section{margin-bottom:18px;}
.memerap-stats-label{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#b3b3b3);margin-bottom:8px;}
.memerap-heat-grid{
  display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;
  gap:2px;width:100%;
}
.memerap-heat-cell{aspect-ratio:1/1;border-radius:2px;background:#161616;}
.memerap-heat-empty{background:transparent;}
.memerap-stats-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.memerap-stats-list{display:flex;flex-direction:column;gap:2px;}
.memerap-stats-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 10px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font:inherit;
}
.memerap-stats-row:hover{background:color-mix(in srgb, var(--accent) 14%, transparent);}
.memerap-stats-rank{width:20px;color:var(--muted,#b3b3b3);font-variant-numeric:tabular-nums;flex-shrink:0;}
.memerap-stats-row-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.memerap-stats-row-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.memerap-stats-row-sub{font-size:.78rem;color:var(--muted,#b3b3b3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.memerap-stats-count{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700;flex-shrink:0;}
.memerap-stats-artists{display:flex;flex-direction:column;gap:8px;}
.memerap-stats-artist{display:grid;grid-template-columns:1fr 90px auto;align-items:center;gap:10px;}
.memerap-stats-artist-name{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.memerap-stats-bar{height:8px;border-radius:99px;background:#1a1a1a;overflow:hidden;}
.memerap-stats-bar-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #0d5028), var(--accent));}
@media (max-width:560px){
  .memerap-stats-cols{grid-template-columns:1fr;}
  .memerap-stats-stat b{font-size:1.25rem;}
}
@media (prefers-reduced-motion: reduce){
  .memerap-stats-card{animation:none!important;}
}

/* ---------- Sleep timer ---------- */
.memerap-sleep-btn{white-space:nowrap;}
.memerap-sleep-btn.memerap-sleep-on,
.icon.memerap-toggle-on{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 16%, transparent);
}
.memerap-sleep-menu{
  position:fixed;
  z-index:2147483000;
  min-width:200px;
  padding:6px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 16%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, #121212), #0a0a0a);
  box-shadow:0 18px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:2px;
  animation:memerapSleepIn .12s ease;
}
@keyframes memerapSleepIn{from{opacity:0;transform:translateY(6px) scale(.98);}to{opacity:1;transform:none;}}
.memerap-sleep-opt{
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:10px 14px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text, #e9e9e9);
  font:inherit;
  font-size:.9rem;
  text-align:left;
  cursor:pointer;
}
.memerap-sleep-opt:hover,.memerap-sleep-opt:focus-visible{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  outline:none;
}
.memerap-sleep-opt:first-child{color:color-mix(in srgb, var(--text, #e9e9e9) 78%, var(--accent));}
.memerap-fx-menu .memerap-fx-active{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  color:var(--accent);
  font-weight:700;
}

/* styles.css chunk 16/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ===== Mobile overhaul (≤980px) — drawer, tabs, compact player, touch-first layout ===== */
.memerap-mobile-bottom-nav,
.memerap-mobile-nav-backdrop,
.memerap-mobile-menu-chip,
.memerap-mobile-page-title,
.memerap-mobile-search-chip,
.memerap-mobile-drawer-head,
.memerap-mobile-player-toggle{display:none}

@media (max-width:980px){
  html.memerap-mobile-shell-on,
  body.memerap-mobile-shell-on{
    --memerap-player-height:64px;
    --memerap-mobile-bottom-nav-height:52px;
    --memerap-mobile-chrome-bottom:calc(
      var(--memerap-player-height-measured, var(--memerap-player-height, 64px)) +
      var(--memerap-mobile-bottom-nav-height, 52px) +
      env(safe-area-inset-bottom, 0px)
    );
    --memerap-rail-player-clearance:var(--memerap-mobile-chrome-bottom);
  }

  /* Spotify desktop lock-scroll must not apply on phones */
  html.memerap-mobile-shell-on.memerap-spotify-layout,
  html.memerap-mobile-shell-on.memerap-spotify-layout body{
    height:auto;
    min-height:calc(var(--memerap-vh, 1vh) * 100);
    overflow:visible;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .app-shell{
    height:auto;
    min-height:calc(var(--memerap-vh, 1vh) * 100 - var(--memerap-mobile-chrome-bottom, 128px));
    overflow:visible;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .main-col{
    height:auto;
    min-height:0;
    overflow:visible;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .wrap{
    padding:8px 12px calc(var(--memerap-mobile-chrome-bottom, 120px) + 20px);
  }

  /* Sidebar → off-canvas drawer */
  /*
   * Menu drawer must escape .app-shell stacking (z-index:1),
   * otherwise backdrop / player / bottom-nav sit on top and eat taps.
   */
  body.memerap-mobile-shell-on .app-shell{
    z-index:auto;
    overflow:visible;
  }
  body.memerap-mobile-shell-on .rail-col{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(360px,92vw);
    height:100dvh;
    max-height:100dvh;
    z-index:13050;
    transform:translateX(-110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    isolation:auto;
    padding:0 max(12px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) 12px;
    box-sizing:border-box;
    background:var(--panel, #121212);
    border-right:1px solid var(--line, #282828);
    box-shadow:none;
  }
  body.memerap-mobile-shell-on.memerap-mobile-nav-open .rail-col{
    transform:translateX(0);
    box-shadow:12px 0 48px rgba(0,0,0,.55);
  }
  body.memerap-mobile-shell-on.memerap-mobile-nav-open .sticky,
  body.memerap-mobile-shell-on.memerap-mobile-nav-open .memerap-mobile-bottom-nav{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  body.memerap-mobile-shell-on .rail-logo,
  body.memerap-mobile-shell-on .rail-footer,
  body.memerap-mobile-shell-on .rail-mascot-toggle,
  body.memerap-mobile-shell-on .rail-mascot{
    display:none!important;
  }
  body.memerap-mobile-shell-on .rail-nav a[href*="index.html"],
  body.memerap-mobile-shell-on .rail-nav a[href*="liked.html"],
  body.memerap-mobile-shell-on .rail-nav a[href*="playlists.html"],
  body.memerap-mobile-shell-on .rail-nav a[href*="members.html"],
  body.memerap-mobile-shell-on .rail-nav a[href*="member.html"]{
    display:none!important;
  }
  body.memerap-mobile-shell-on .memerap-mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:sticky;
    top:0;
    z-index:2;
    padding:max(12px, env(safe-area-inset-top, 0px)) 4px 12px;
    margin:0 -4px 8px;
    background:linear-gradient(180deg, var(--panel, #121212) 70%, transparent);
  }
  body.memerap-mobile-shell-on .memerap-mobile-drawer-title{
    font-family:var(--memerap-font-display, inherit);
    font-weight:800;
    font-size:1.12rem;
    letter-spacing:-.02em;
  }
  body.memerap-mobile-shell-on .memerap-mobile-drawer-close{
    border:none;
    background:#242424;
    color:#fff;
    width:44px;
    height:44px;
    border-radius:999px;
    font-size:1.08rem;
    cursor:pointer;
    touch-action:manipulation;
  }
  body.memerap-mobile-shell-on .rail{
    position:static;
    height:auto;
    border-radius:0;
    padding:0 0 12px;
    box-shadow:none;
    background:transparent;
  }
  body.memerap-mobile-shell-on .rail-nav{
    grid-template-columns:1fr;
    gap:4px;
  }
  body.memerap-mobile-shell-on .rail-link{
    justify-content:flex-start;
    padding:13px 14px;
    font-size:.96rem;
    min-height:48px;
    touch-action:manipulation;
    border-radius:8px;
  }
  body.memerap-mobile-shell-on .rail-mascot{
    max-height:min(182px, 18vh);
    margin-top:6px;
    margin-bottom:0;
  }
  body.memerap-mobile-shell-on .rail-mascot-frame{
    --rail-mascot-box: min(168px, 64%);
    width:var(--rail-mascot-box);
    height:var(--rail-mascot-box);
    max-width:168px;
    max-height:min(168px, 16vh);
  }

  /* Top bar */
  body.memerap-mobile-shell-on .app-shell{
    padding-left:max(8px, env(safe-area-inset-left, 0px));
    padding-right:max(8px, env(safe-area-inset-right, 0px));
  }
  body.memerap-mobile-shell-on .topbar{
    position:sticky;
    top:max(0px, env(safe-area-inset-top, 0px));
    z-index:10040;
    margin:0 0 10px;
    padding:6px 8px;
    border-radius:12px;
    background:color-mix(in srgb, var(--panel, #121212) 94%, #000);
    /* No backdrop-filter on phones — blur is a major scroll/paint tax */
    transition:transform .18s var(--ease), opacity .18s var(--ease);
    contain:layout style;
  }
  body.memerap-mobile-shell-on.memerap-mobile-topbar-hidden .topbar{
    transform:translateY(calc(-100% - 16px));
    opacity:0;
    pointer-events:none;
  }
  body.memerap-mobile-shell-on .topbar-left{
    flex:0 0 auto;
  }
  body.memerap-mobile-shell-on .memerap-mobile-page-title{
    display:block;
    flex:1;
    min-width:0;
    padding:0 8px;
    font-weight:800;
    font-size:.96rem;
    letter-spacing:-.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
  }
  body.memerap-mobile-shell-on .memerap-mobile-menu-chip,
  body.memerap-mobile-shell-on .memerap-mobile-search-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:8px 12px;
    font-size:1.08rem;
    touch-action:manipulation;
    flex-shrink:0;
  }
  body.memerap-mobile-shell-on #backBtn,
  body.memerap-mobile-shell-on #fwdBtn{
    min-width:40px;
    padding:8px 10px;
  }
  body.memerap-mobile-shell-on .topbar-right > a.chip[href*="liked"],
  body.memerap-mobile-shell-on .topbar-right > a.chip[href*="playlists"],
  body.memerap-mobile-shell-on .topbar-right > a.chip[href*="members"]{
    display:none;
  }

  /* Main content */
  body.memerap-mobile-shell-on .wrap{
    padding-bottom:calc(var(--memerap-mobile-chrome-bottom, 120px) + 20px);
    padding-left:0;
    padding-right:0;
  }
  body.memerap-mobile-shell-on .hero{
    padding:14px 14px 16px;
    border-radius:16px;
  }
  /* Dense desktop filter/sort rows → wrap with breathing room */
  body.memerap-mobile-shell-on .memerap-new-vault-head,
  body.memerap-mobile-shell-on .memerap-new-vault-actions,
  body.memerap-mobile-shell-on .panel-head{
    gap:12px;
  }
  body.memerap-mobile-shell-on .panel-head select,
  body.memerap-mobile-shell-on .hero select{
    min-height:44px;
    font-size:16px;
  }
  body.memerap-mobile-shell-on .hero h1,
  body.memerap-mobile-shell-on .memerap-spotify-greeting{
    font-size:clamp(1.35rem, 6vw, 1.85rem);
  }
  body.memerap-mobile-shell-on .search-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  body.memerap-mobile-shell-on .search-shell,
  body.memerap-mobile-shell-on .hero .search,
  body.memerap-mobile-shell-on .panel .search{
    width:100%;
    min-height:48px;
  }
  body.memerap-mobile-shell-on .panel{
    border-radius:12px;
    margin-bottom:14px;
  }
  body.memerap-mobile-shell-on .panel-head{
    padding:11px 14px;
  }
  body.memerap-mobile-shell-on .panel-body{
    padding:10px 12px 12px;
  }
  body.memerap-mobile-shell-on .cards{
    grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));
    gap:14px;
  }
  body.memerap-mobile-shell-on .cards > a.card,
  body.memerap-mobile-shell-on .panel{
    content-visibility:auto;
    contain-intrinsic-size:220px;
  }
  body.memerap-mobile-shell-on .btn,
  body.memerap-mobile-shell-on .icon,
  body.memerap-mobile-shell-on .play,
  body.memerap-mobile-shell-on .chip{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  body.memerap-mobile-shell-on .cards > a.card .name{
    font-size:1rem;
  }
  body.memerap-mobile-shell-on .row,
  body.memerap-mobile-shell-on .panel-body .list .row{
    min-height:52px;
    padding:11px 10px;
    gap:10px;
  }
  body.memerap-mobile-shell-on .play{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
  }
  body.memerap-mobile-shell-on .artist-hero{
    min-height:min(220px, 48vw);
    border-radius:16px;
  }
  body.memerap-mobile-shell-on .artist-hero-content{
    padding:14px 14px 18px;
  }
  body.memerap-mobile-shell-on .artist-name-lg{
    font-size:clamp(1.5rem, 8.5vw, 2.4rem);
  }
  body.memerap-mobile-shell-on .artist-nav-stack{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.memerap-mobile-shell-on .artist-nav-stack::-webkit-scrollbar{display:none}

  /* Drawer backdrop — under drawer (13050), above player chrome (~1230) */
  body.memerap-mobile-shell-on .memerap-mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:13040;
    background:rgba(0,0,0,.62);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s var(--ease);
  }
  body.memerap-mobile-shell-on.memerap-mobile-nav-open .memerap-mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  /* Bottom tab bar */
  body.memerap-mobile-shell-on .memerap-mobile-bottom-nav{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1225;
    height:calc(var(--memerap-mobile-bottom-nav-height, 52px) + env(safe-area-inset-bottom, 0px));
    align-items:stretch;
    justify-content:space-around;
    gap:2px;
    padding:0 max(4px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-right, 0px));
    background:color-mix(in srgb, var(--panel, #121212) 97%, #000);
    border-top:1px solid var(--line, #282828);
    contain:layout style paint;
    box-sizing:border-box;
  }
  body.memerap-mobile-shell-on .memerap-mobile-bottom-link{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    min-height:44px;
    padding:6px 2px 4px;
    border:none;
    background:transparent;
    color:var(--muted, #b3b3b3);
    text-decoration:none;
    font:inherit;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  body.memerap-mobile-shell-on .memerap-mobile-bottom-link.is-active{
    color:var(--accent, #1db954);
  }
  body.memerap-mobile-shell-on .memerap-mobile-bottom-icon{
    font-size:1.12rem;
    line-height:1;
  }
  body.memerap-mobile-shell-on .memerap-mobile-bottom-label{
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.03em;
    line-height:1.1;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Player — slim mini bar; full player opens via #bigModal */
  body.memerap-mobile-shell-on .sticky{
    position:fixed;
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    bottom:calc(var(--memerap-mobile-bottom-nav-height, 52px) + env(safe-area-inset-bottom, 0px));
    z-index:1230;
    height:auto;
    max-height:none;
    overflow:hidden;
    contain:layout style;
  }
  body.memerap-mobile-shell-on.memerap-mobile-player-expanded .sticky{
    max-height:none;
    overflow:hidden;
  }
  body.memerap-mobile-shell-on .memerap-mobile-player-toggle{
    display:flex;
    position:absolute;
    top:50%;
    right:max(6px, env(safe-area-inset-right, 0px));
    transform:translateY(-50%);
    z-index:3;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    border:none;
    border-radius:999px;
    background:#242424;
    color:#ccc;
    font-size:.86rem;
    cursor:pointer;
    touch-action:manipulation;
  }
  body.memerap-mobile-shell-on .memerap-mobile-now-tap{
    cursor:pointer;
  }

  /* Default compact player (all themes) */
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner{
    grid-template-columns:48px minmax(0, 1fr) auto;
    grid-template-rows:1fr;
    align-items:center;
    gap:8px;
    padding:6px 48px 6px 10px;
    min-height:56px;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner > .cover{
    grid-column:1;
    grid-row:1;
    width:48px;
    height:48px;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner > div:nth-child(2){
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner > div:nth-child(2) audio{
    display:none;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner > .ctrls{
    grid-column:3;
    grid-row:1;
    width:auto;
    max-width:none;
    overflow:visible;
    mask-image:none;
    -webkit-mask-image:none;
    padding:0;
    gap:6px;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner > .ctrls > *:not(.memerap-play-btn){
    display:none!important;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner .memerap-play-btn{
    min-width:44px;
    min-height:44px;
  }

  /* Spotify compact player */
  body.memerap-mobile-shell-on[data-theme="spotify"] .sticky{
    background:#181818;
    border-top:1px solid #282828;
    padding:0 12px;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .sticky-inner{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-rows:1fr;
    align-items:center;
    gap:8px;
    padding:6px 48px 6px 0;
    min-height:56px;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-player-left{
    grid-column:1;
    min-width:0;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-player-center{
    display:flex!important;
    order:0;
    grid-column:2;
    flex:0;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-player-right,
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-seek-row{
    display:none!important;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-transport > *:not(.memerap-play-btn){
    display:none;
  }
  body.memerap-mobile-shell-on.memerap-mobile-player-expanded[data-theme="spotify"] .sticky-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:8px;
    padding:10px 36px 10px 0;
  }
  body.memerap-mobile-shell-on.memerap-mobile-player-expanded[data-theme="spotify"] .memerap-spotify-player-center{
    order:-1;
  }

  /* Queue + modals */
  body.memerap-mobile-shell-on .queue-drawer{
    width:100vw;
    max-width:100vw;
    height:calc(100dvh - var(--memerap-mobile-chrome-bottom, 128px) - env(safe-area-inset-bottom, 0px));
    border-left:none;
    border-radius:16px 16px 0 0;
    padding-top:max(14px, env(safe-area-inset-top, 0px));
  }
  body.memerap-mobile-shell-on #bigModal:not(.hidden) .modal-card.memerap-fs-card{
    max-height:min(92dvh, calc(var(--memerap-vh, 1vh) * 92));
  }
  body.memerap-mobile-shell-on #authModalRoot .modal-card{
    width:min(100vw - 20px, 480px);
    max-height:min(88dvh, calc(var(--memerap-vh, 1vh) * 88));
    overflow-y:auto;
  }
  body.memerap-mobile-shell-on .search-modal-card{
    width:min(100vw - 12px, 760px);
    margin-top:max(8px, env(safe-area-inset-top, 0px));
  }

  /* DMs on member page */
  body.memerap-mobile-shell-on .memerap-chat-root{
    left:max(8px, env(safe-area-inset-left, 0px));
    right:max(8px, env(safe-area-inset-right, 0px));
    bottom:calc(var(--memerap-mobile-chrome-bottom, 128px) + 8px);
  }
  body.memerap-mobile-shell-on .memerap-chat-panel{
    width:100%;
    max-height:min(
      72dvh,
      calc(100dvh - var(--memerap-mobile-chrome-bottom, 128px) - var(--memerap-chat-top-reserve, 72px))
    );
  }
  body.memerap-mobile-shell-on .memerap-chat-compose input,
  body.memerap-mobile-shell-on .memerap-chat-compose textarea{
    font-size:16px;
  }

  /* Spotify chrome colors */
  body.memerap-mobile-shell-on[data-theme="spotify"] .rail-col{
    background:#000;
    border-right-color:#282828;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .memerap-mobile-bottom-nav{
    background:#121212;
    border-top-color:#282828;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .memerap-mobile-bottom-link.is-active{
    color:#fff;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .memerap-mobile-menu-chip,
  body.memerap-mobile-shell-on[data-theme="spotify"] .memerap-mobile-search-chip{
    background:#242424;
    color:#fff;
    border:none;
  }
  body.memerap-mobile-shell-on[data-theme="spotify"] .topbar{
    background:color-mix(in srgb, #121212 90%, transparent);
  }

  html:has(body.memerap-mobile-shell-on){
    scroll-padding-bottom:calc(var(--memerap-mobile-chrome-bottom, 128px) + 16px);
    scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 56px);
  }
}

@media (max-width:560px){
  body.memerap-mobile-shell-on .cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  body.memerap-mobile-shell-on .cards > a.card .meta{
    padding:10px 10px 12px;
  }
  body.memerap-mobile-shell-on .row{
    grid-template-columns:20px 40px minmax(0, 1fr) 40px 40px;
  }
  body.memerap-mobile-shell-on .row.row--pl{
    grid-template-columns:20px 40px minmax(0, 1fr) 40px 40px 40px;
  }
  body.memerap-mobile-shell-on .col-duration{display:none}
  body.memerap-mobile-shell-on #backBtn,
  body.memerap-mobile-shell-on #fwdBtn{
    display:none;
  }
  body.memerap-mobile-shell-on .memerap-mobile-page-title{
    text-align:left;
    padding-left:4px;
  }
}

/* Tablet band: looser density than phone, still touch-friendly */
@media (min-width:561px) and (max-width:1200px){
  body.memerap-mobile-shell-on .cards{
    grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
    gap:16px;
  }
  body.memerap-mobile-shell-on .wrap,
  body.memerap-mobile-shell-on[data-theme="spotify"] .wrap{
    padding-left:16px;
    padding-right:16px;
  }
  body.memerap-mobile-shell-on .row,
  body.memerap-mobile-shell-on .panel-body .list .row{
    min-height:56px;
    padding:12px 12px;
  }
  body.memerap-mobile-shell-on .hero{
    padding:16px 18px 18px;
  }
}

@media (max-width:400px){
  body.memerap-mobile-shell-on .memerap-mobile-bottom-label{
    font-size:.56rem;
  }
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner > .cover{
    width:46px;
    height:46px;
  }
}

@media (prefers-reduced-motion: reduce){
  .memerap-sleep-menu{animation:none!important;}
  body.memerap-mobile-shell-on .rail-col,
  body.memerap-mobile-shell-on .memerap-mobile-nav-backdrop,
  body.memerap-mobile-shell-on .topbar{transition:none!important;}
}

/* styles.css chunk 17/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ----- Account menu, library tools, People hub, rail cards ----- */
.memerap-account-wrap{position:relative;display:flex;align-items:center;overflow:visible;z-index:2}
.memerap-account-menu.hidden{display:none!important}
.memerap-account-btn{
  display:inline-flex;align-items:center;gap:8px;max-width:min(46vw,220px);
  padding:7px 12px!important;min-height:40px;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.memerap-account-btn[aria-expanded="true"]{
  background:color-mix(in srgb, var(--accent,#1db954) 12%, #181818);
}
.memerap-account-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;background:var(--accent,#1db954);
  color:#000;font-weight:800;font-size:.82rem;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
  overflow:hidden;padding:0;
}
.memerap-account-avatar-img,
.memerap-account-menu-head-avatar .memerap-account-avatar-img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:999px;
}
.memerap-account-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;
}
.memerap-account-caret{
  font-size:.72rem;opacity:.7;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.memerap-account-btn[aria-expanded="true"] .memerap-account-caret{
  transform:rotate(180deg);opacity:1;
}
.memerap-account-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:12800;
  min-width:min(280px, calc(100vw - 24px));
  border:1px solid #2a2a2a;
  border-radius:10px;
  background:#141414;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  padding:8px;
  display:flex;flex-direction:column;gap:4px;
  transform-origin:top right;
}
.memerap-account-menu-head{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 12px 10px;
  margin-bottom:2px;
}
.memerap-account-menu-head--guest{
  align-items:flex-start;
  padding-bottom:8px;
}
.memerap-account-menu-head--guest .memerap-account-menu-head-copy{
  display:grid;gap:4px;min-width:0;flex:1;
}
.memerap-account-theme-btn{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-width:32px;padding:0;
  border:1px solid #333;border-radius:6px;
  background:#1a1a1a;color:#bbb;cursor:pointer;
}
.memerap-account-theme-btn:hover{
  background:#242424;border-color:#555;color:#fff;
}
.memerap-account-theme-btn:focus-visible{
  outline:2px solid #888;outline-offset:2px;
}
.memerap-account-theme-icon{
  font-size:.95rem;line-height:1;opacity:.9;
}
.memerap-account-menu-head-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;flex-shrink:0;
  background:var(--accent,#1db954);color:#000;font-weight:900;font-size:1rem;
  box-shadow:0 0 0 3px rgba(29,185,84,.18);
}
.memerap-account-menu-head-copy{display:grid;gap:2px;min-width:0}
.memerap-account-menu-head strong{
  display:block;font-size:1rem;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.memerap-account-menu-user{
  font-size:.78rem;color:var(--muted,#b3b3b3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.memerap-account-role{
  display:inline-flex;align-items:center;justify-self:start;
  margin-top:2px;padding:2px 8px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.memerap-account-role--admin{
  color:#ffb4b4;background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.24);
}
.memerap-account-role--mod{
  color:#ffd28a;background:rgba(255,180,80,.12);border:1px solid rgba(255,180,80,.22);
}
.memerap-account-role--member{
  color:#b3b3b3;background:#282828;border:1px solid #3e3e3e;
}
.memerap-account-menu-group{display:grid;gap:2px}
.memerap-account-menu-divider{
  height:1px;margin:4px 8px;
  background:color-mix(in srgb, var(--line,#282828) 88%, #fff 8%);
}
.memerap-account-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  border:none;border-radius:8px;background:transparent;color:inherit;
  text-decoration:none;font:inherit;text-align:left;
  padding:10px 12px;min-height:44px;cursor:pointer;touch-action:manipulation;
  transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
}
.memerap-account-menu-item:hover,
.memerap-account-menu-item:focus-visible{
  background:#282828;outline:none;
}
.memerap-account-menu-item:active{transform:scale(.99)}
.memerap-account-menu-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;flex-shrink:0;
  background:#181818;color:#fff;font-size:.9rem;
  border:1px solid #333;
}
.memerap-account-menu-label{
  font-size:.9rem;font-weight:650;letter-spacing:-.01em;
}
.memerap-account-menu-item--primary{
  justify-content:center;
  margin-top:2px;
  background:#fff;color:#000;font-weight:700;
  border:1px solid #fff;
}
.memerap-account-menu-item--primary:hover{background:#e8e8e8}
.memerap-account-menu-item--primary .memerap-account-menu-label{font-weight:700;color:#000}
.memerap-account-menu-item--ghost{
  justify-content:center;
  border:1px solid #333;
  background:transparent;
}
.memerap-account-menu-item--ghost:hover{background:#1a1a1a;border-color:#444}
.memerap-account-menu--guest .memerap-account-menu-item{
  border-radius:8px;
}
.memerap-account-menu-item--danger .memerap-account-menu-label{color:#ff9a9a}
.memerap-account-menu-item--danger .memerap-account-menu-icon{
  color:#ff9a9a;border-color:#4a2828;background:#1a1010;
}
.memerap-account-menu-item--danger:hover{background:rgba(255,90,90,.08)}
body[data-theme="spotify"] .memerap-account-menu{
  background:linear-gradient(180deg,#282828 0%,#121212 100%);
  border-color:#3e3e3e;
}
body[data-theme="spotify"] .memerap-account-menu-item:hover{background:#333}
body[data-theme="spotify"] .memerap-account-menu-icon{background:#121212;border-color:#404040}
.memerap-library-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.memerap-library-head-left{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.memerap-library-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.memerap-library-filter-label{display:flex;flex-direction:column;gap:4px}
.memerap-library-select{min-height:40px;padding:8px 10px;font-size:.82rem}
.memerap-artist-card-wrap{position:relative}
.memerap-artist-card-wrap.is-pinned .card{
  border-color:color-mix(in srgb, var(--accent,#1db954) 45%, var(--line,#282828));
}
.memerap-pin-artist{
  position:absolute;top:8px;right:8px;z-index:3;
  width:34px;height:34px;border-radius:999px;border:1px solid var(--line,#282828);
  background:rgba(0,0,0,.72);color:#888;font-size:1rem;line-height:1;cursor:pointer;
  touch-action:manipulation;
}
.memerap-pin-artist.is-pinned{color:var(--accent,#1db954);border-color:color-mix(in srgb, var(--accent,#1db954) 55%, var(--line))}
.continue-row.cards > .continue-card .sub,
.continue-panel .continue-card .sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memerap-people-tabs{margin-top:0;margin-bottom:12px;position:static;top:auto}
.memerap-people-hero-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.hero.hero--people .memerap-people-tabs{position:static}
body[data-theme="spotify"] .hero.hero--people .memerap-people-hero-head .sub{display:inline}
body[data-theme="spotify"] .hero.hero--people p{display:block;font-size:.9rem;color:var(--muted);margin:6px 0 0}
.memerap-people-forum-tab{text-decoration:none}
.memerap-people-messages-body{display:flex;flex-direction:column;gap:12px}
.memerap-people-messages-actions{display:flex;flex-wrap:wrap;gap:8px}
.memerap-people-thread-list{display:flex;flex-direction:column;gap:8px}
.memerap-people-thread-cards{display:flex;flex-direction:column;gap:8px}
.memerap-people-thread-card{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--line,#282828);
  background:#0a0d12;color:inherit;text-align:left;font:inherit;cursor:pointer;
}
.memerap-people-thread-card:hover{border-color:color-mix(in srgb, var(--accent,#1db954) 40%, var(--line))}
.memerap-people-thread-peer{font-weight:700;font-size:.9rem;grid-column:1}
.memerap-people-thread-preview{
  grid-column:1;color:var(--muted,#b3b3b3);font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memerap-people-thread-time{grid-column:2;grid-row:1;font-size:.68rem;color:var(--muted,#9aa0a8)}

/* —— Marketing landing (home.html) —— */
body.memerap-land{
  margin:0;
  min-height:100dvh;
  background:#000;
  color:var(--text,#f5f5f5);
  font-family:var(--memerap-font-ui);
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
.memerap-land-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.memerap-land-bg-wash{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 70% 80% at 78% 55%, rgba(30,215,96,.12), transparent 55%),
    linear-gradient(180deg, #070707 0%, #000 100%);
}
.memerap-land-bg-glow{
  position:absolute;
  right:4%;
  top:12%;
  width:min(62vw, 640px);
  height:min(62vw, 640px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,215,96,.26), transparent 68%);
  filter:blur(10px);
  z-index:1;
}
.memerap-land-bg-mascot{
  position:absolute;
  bottom:0;
  width:auto;
  object-fit:contain;
  object-position:bottom center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.memerap-land-bg-mascot--front{
  right:max(-2%, calc(50% - 700px));
  height:min(104dvh, 1020px);
  max-width:min(62vw, 780px);
  z-index:2;
  filter:saturate(1.06) drop-shadow(0 18px 48px rgba(0,0,0,.45));
  opacity:1;
  animation:memerap-land-float 9s ease-in-out infinite;
}
/* Keeps copy readable without covering the characters */
.memerap-land-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(95deg, #000 0%, #000 30%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 58%, transparent 70%);
}
@keyframes memerap-land-float{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-8px,-14px,0); }
}
.memerap-land-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:max(16px, env(safe-area-inset-top, 0px)) clamp(18px,4vw,40px) 8px;
}
.memerap-land-brand-mark{
  font-family:var(--memerap-font-display);
  font-weight:800;
  font-size:1rem;
  letter-spacing:-.02em;
  color:var(--text);
  text-decoration:none;
}
.memerap-land-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.memerap-land-top-vault{
  font-size:.82rem;
  font-weight:700;
  color:var(--muted);
  text-decoration:none;
  padding:8px 4px;
}
.memerap-land-top-vault:hover{ color:var(--accent,#1ed760); }
/* Hide duplicate guest Sign in in topbar — CTAs handle it */
body.memerap-land .memerap-land-auth .memerap-account-wrap--guest{ display:none !important; }
.memerap-land-hero{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  align-items:center;
  padding:clamp(20px,5vh,56px) clamp(18px,4vw,40px) 28px;
}
.memerap-land-copy{
  max-width:32rem;
  animation:memerap-land-rise .65s ease both;
}
@keyframes memerap-land-rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.memerap-land-title{
  margin:0;
  font-family:var(--memerap-font-display);
  font-weight:900;
  font-size:clamp(3.4rem, 11vw, 6.2rem);
  line-height:.9;
  letter-spacing:-.05em;
  color:#fff;
  text-shadow:0 8px 40px rgba(0,0,0,.45);
}
.memerap-land-lede{
  margin:16px 0 0;
  max-width:24rem;
  font-size:clamp(1.02rem, 2.2vw, 1.22rem);
  line-height:1.4;
  color:rgba(245,245,245,.78);
}
.memerap-land-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:26px;
}
.memerap-land-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:999px;
  font:inherit;
  font-size:.96rem;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s var(--ease), filter .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.memerap-land-btn:hover{ transform:translateY(-1px); }
.memerap-land-btn--primary{
  background:var(--accent,#1ed760);
  color:#04140a;
  padding-inline:24px;
  box-shadow:0 10px 28px rgba(30,215,96,.22);
}
.memerap-land-btn--primary:hover{ filter:brightness(1.06); }
.memerap-land-btn--ghost{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  color:#fff;
  backdrop-filter:blur(8px);
}
.memerap-land-btn--ghost:hover{
  border-color:var(--accent,#1ed760);
  color:var(--accent,#1ed760);
}
.memerap-land-btn--discord{
  background:#5865f2;
  border-color:#5865f2;
  color:#fff;
  text-decoration:none;
}
.memerap-land-btn--discord:hover{
  filter:brightness(1.08);
  color:#fff;
}
.memerap-land-join{
  appearance:none;
  display:inline-block;
  margin-top:14px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.86rem;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.memerap-land-join:hover{ color:var(--text); }
.memerap-land-forgot{
  appearance:none;
  display:block;
  margin-top:8px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.memerap-land-forgot:hover{ color:var(--text); }
.memerap-land-note{
  margin:16px 0 0;
  font-size:.86rem;
  color:var(--muted);
}
.memerap-land-note a{
  color:var(--accent,#1ed760);
  font-weight:700;
  text-decoration:none;
}
.memerap-land-note a:hover{ text-decoration:underline; }
.memerap-land-points{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:22rem;
}
.memerap-land-points li{
  font-size:.86rem;
  color:var(--muted);
  line-height:1.35;
  padding-left:12px;
  border-left:2px solid rgba(30,215,96,.45);
}
.memerap-land-points strong{
  color:rgba(245,245,245,.92);
  font-weight:750;
  margin-right:4px;
}
.memerap-land-stats{
  margin:22px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  max-width:28rem;
}
.memerap-land-stats span{
  font-size:.78rem;
  color:var(--muted);
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(0,0,0,.28);
}
.memerap-land-stats a{ color:#1ed760; text-decoration:none; }
.memerap-land-stats a:hover{ text-decoration:underline; }
.memerap-land-foot{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:16px clamp(18px,4vw,40px) max(20px, env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.65));
}
.memerap-land-foot a{
  font-size:.78rem;
  font-weight:650;
  color:var(--muted);
  text-decoration:none;
  padding:6px 0;
}
.memerap-land-foot a:hover{ color:var(--accent,#1ed760); }

@media (max-width:900px){
  .memerap-land-bg-mascot--front{
    right:-8%;
    opacity:.7;
    max-width:82vw;
    height:min(78dvh, 620px);
  }
  .memerap-land-bg::after{
    background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.88) 100%);
  }
  .memerap-land-bg-wash{
    background:
      linear-gradient(180deg, #070707 0%, #000 100%);
  }
  .memerap-land-hero{
    align-items:flex-end;
    padding-bottom:20px;
    min-height:min(70dvh, 560px);
  }
}
@media (max-width:560px){
  .memerap-land-title{ font-size:clamp(3rem, 16vw, 4.2rem); }
  .memerap-land-cta{ width:100%; }
  .memerap-land-btn--primary,
  .memerap-land-btn--ghost{ flex:1 1 calc(50% - 6px); min-width:0; }
  .memerap-land-top-vault{ display:none; }
  .memerap-land-points{ margin-top:22px; max-width:none; }
  .memerap-land-hero{
    align-items:flex-start;
    min-height:auto;
    padding-top:clamp(28px, 8vh, 48px);
  }
  .memerap-land-copy{ max-width:100%; }
  .memerap-land-bg-mascot--front{
    opacity:.28;
    right:-14%;
    height:min(52dvh, 400px);
    max-width:85vw;
  }
  .memerap-land-foot{
    gap:10px 16px;
    padding-top:20px;
  }
  .memerap-land-foot a{
    font-size:.82rem;
    padding:8px 4px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}
@media (prefers-reduced-motion:reduce){
  .memerap-land-bg-mascot--front,
  .memerap-land-copy{ animation:none; }
}

/* styles.css chunk 18/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* —— Mobile / iPad vault declutter (≤980px shell) —— */
@media (max-width:980px){
  body.memerap-mobile-shell-on #boardHangout,
  body.memerap-mobile-shell-on #siteStatusLine,
  body.memerap-mobile-shell-on .search-shortcut,
  body.memerap-mobile-shell-on .hero > .sub,
  body.memerap-mobile-shell-on .memerap-kb-hint-chip,
  body.memerap-mobile-shell-on .topbar-right > a.chip[href*="scene"]{
    display:none!important;
  }
  body.memerap-mobile-shell-on .memerap-spotify-hero-head{
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
  }
  body.memerap-mobile-shell-on .memerap-spotify-shuffle-btn{
    min-height:36px;
  }
  body.memerap-mobile-shell-on #seasonalFxCanvas,
  body.memerap-mobile-shell-on canvas.seasonal-fx,
  body.memerap-mobile-shell-on .seasonal-fx-root{
    display:none!important;
  }
  /* Fewer panels competing — tighter continue rows */
  body.memerap-mobile-shell-on .continue-row.cards{
    gap:10px;
    padding-bottom:4px;
  }
  body.memerap-mobile-shell-on .panel + .panel{
    margin-top:10px;
  }
  body.memerap-mobile-shell-on .continue-panel > .panel-head > .sub,
  body.memerap-mobile-shell-on .memerap-new-vault-actions{
    display:none!important;
  }
  body.memerap-mobile-shell-on .continue-row.cards .card{
    min-width:132px;
  }

  /* —— Phone polish (iPhone / Android) —— */
  /* Top bar was cramped: hamburger + truncated greeting + Email + Sign in */
  body.memerap-mobile-shell-on .memerap-mobile-menu-chip{
    display:none!important; /* bottom nav already has Menu */
  }
  body.memerap-mobile-shell-on .memerap-mobile-page-title{
    display:none!important; /* duplicates the page h1 */
  }
  body.memerap-mobile-shell-on #emailCopyBtn{
    display:none!important; /* Support / drawer still has contact */
  }
  body.memerap-mobile-shell-on .topbar-right{
    gap:6px;
    margin-left:auto;
  }
  body.memerap-mobile-shell-on .memerap-account-btn{
    min-height:44px;
    min-width:44px;
    padding:8px 12px;
    font-size:.82rem;
  }
  body.memerap-mobile-shell-on .memerap-spotify-hero-head{
    flex-direction:row;
    align-items:center;
    gap:10px;
  }
  body.memerap-mobile-shell-on .memerap-spotify-shuffle-btn{
    width:auto;
    justify-content:center;
    min-height:36px;
    font-size:.78rem;
  }
  body.memerap-mobile-shell-on .memerap-pin-artist{
    width:44px;
    height:44px;
    font-size:1.1rem;
    top:6px;
    right:6px;
  }
  /* Horizontal shelves: snap + peek next card */
  body.memerap-mobile-shell-on .continue-row.cards{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding-bottom:8px;
    margin-inline:0;
  }
  body.memerap-mobile-shell-on .continue-row.cards::-webkit-scrollbar{display:none}
  body.memerap-mobile-shell-on .continue-row.cards .continue-card,
  body.memerap-mobile-shell-on .continue-row.cards .card{
    flex:0 0 auto;
    width:min(148px, 42vw);
    min-width:0;
    scroll-snap-align:start;
  }
  /* What's new: don't eat the whole phone screen */
  body.memerap-mobile-shell-on .memerap-whats-new{
    left:max(10px, env(safe-area-inset-left, 0px));
    right:max(10px, env(safe-area-inset-right, 0px));
    bottom:calc(var(--memerap-mobile-chrome-bottom, 128px) + 10px);
    max-width:none;
    max-height:min(42dvh, 320px);
    display:flex;
    flex-direction:column;
    padding:12px 14px;
  }
  body.memerap-mobile-shell-on .memerap-whats-new-list{
    overflow-y:auto;
    overscroll-behavior:contain;
    font-size:.78rem;
    margin-bottom:10px;
  }
  body.memerap-mobile-shell-on .panel-head{
    flex-wrap:wrap;
  }
  body.memerap-mobile-shell-on .panel-head select{
    flex:1 1 auto;
    min-width:min(100%, 140px);
  }
}

@media (max-width:400px){
  body.memerap-mobile-shell-on .continue-row.cards .continue-card,
  body.memerap-mobile-shell-on .continue-row.cards .card{
    width:min(136px, 46vw);
  }
  body.memerap-mobile-shell-on .hero h1,
  body.memerap-mobile-shell-on .memerap-spotify-greeting{
    font-size:1.35rem;
  }
}

/* Profile card settings (auth modal) */
.auth-settings-textarea{min-height:96px;resize:vertical;line-height:1.35}
.auth-settings-card-song-results{
  margin-top:8px;
  max-height:180px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(0,0,0,.35);
}
.auth-settings-card-song-hit{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:.82rem;
  padding:8px 10px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.auth-settings-card-song-hit:hover{background:rgba(30,215,96,.12)}
.auth-card-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.auth-card-editor-head .sub{margin:2px 0 0}
.auth-card-enable{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #3e3e3e;
  border-radius:999px;
  background:#181818;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
}
.auth-card-enable input{accent-color:#1ed760}
.auth-card-share-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  border:1px solid #2e2e2e;
  border-radius:8px;
  background:#101010;
}
.auth-card-share-row a{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#1ed760;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.auth-card-editor-grid{display:grid;gap:10px}
.auth-card-editor-group{
  display:grid;
  gap:12px;
  padding:14px 14px 16px;
  border:1px solid #2e2e2e;
  border-radius:14px;
  background:#151515;
}
.auth-card-editor-group > .auth-card-editor-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding:2px 2px 2px 0;
  user-select:none;
}
.auth-card-editor-group > .auth-card-editor-summary::-webkit-details-marker{display:none}
.auth-card-editor-group > .auth-card-editor-summary::marker{content:""}
.auth-card-editor-group > .auth-card-editor-summary::after{
  content:"";
  width:7px;
  height:7px;
  margin-right:4px;
  border-right:2px solid rgba(255,255,255,.42);
  border-bottom:2px solid rgba(255,255,255,.42);
  transform:rotate(45deg);
  transition:transform .15s ease;
  flex-shrink:0;
}
.auth-card-editor-group[open] > .auth-card-editor-summary::after{
  transform:rotate(225deg);
  margin-top:4px;
}
.auth-card-editor-group:not([open]){
  gap:0;
  padding-bottom:12px;
}
.auth-card-editor-group h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:#fff;
  font-size:.9rem;
}
.auth-card-editor-group h4 > span{
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#1ed760;
  color:#07150b;
  font-size:.68rem;
  font-weight:900;
}
.auth-card-editor-group > .sub{margin:-4px 0 0;line-height:1.4}
.auth-card-jump{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:4px 0 12px;
  position:sticky;
  top:10px;
  z-index:5;
  padding:8px;
  border-radius:12px;
  background:rgba(12,12,14,.88);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.auth-card-jump a{
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:750;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.auth-card-jump a:hover{
  color:#fff;
  border-color:rgba(30,215,96,.45);
  background:rgba(30,215,96,.12);
}
.auth-card-button-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.auth-card-button-row .sub{margin-left:auto}
.auth-card-bg-preview{
  position:relative;
  width:100%;
  min-height:180px;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:0;
  border:1px dashed #505050;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 20%,rgba(30,215,96,.13),transparent 42%),
    linear-gradient(135deg,#101010,#1c1c1c);
  color:#fff;
  font:inherit;
  cursor:pointer;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.auth-card-bg-preview:hover,
.auth-card-bg-preview:focus-visible{
  border-color:#1ed760;
  outline:none;
  box-shadow:0 0 0 3px rgba(30,215,96,.1);
}
.auth-card-bg-preview > span:first-child{display:grid;gap:4px;text-align:center}
.auth-card-bg-preview > span:first-child strong{font-size:.96rem}
.auth-card-bg-preview > span:first-child small{color:#969696;font-size:.72rem}
.auth-card-bg-preview img,
.auth-card-bg-preview video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:transparent;
}
.auth-card-bg-preview.has-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72));
}
.auth-card-bg-preview-action{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:max-content;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(8,8,8,.72);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  backdrop-filter:blur(8px);
}
.auth-card-social-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.auth-card-social-field{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #303030;
  border-radius:12px;
  background:#101010;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.auth-card-social-field:focus-within{
  border-color:#555;
  background:#141414;
}
.auth-card-social-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#262626;
  color:#fff;
  font-size:.86rem;
  font-weight:900;
  box-shadow:0 5px 15px rgba(0,0,0,.22);
}
.auth-card-social-icon.is-discord{background:#5865f2}
.auth-card-social-icon.is-instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.auth-card-social-icon.is-tiktok{background:#111;text-shadow:1px 1px #25f4ee,-1px -1px #fe2c55}
.auth-card-social-icon.is-youtube{background:#f03}
.auth-card-social-icon.is-x{background:#050505;border:1px solid #333}
.auth-card-social-icon.is-twitch{background:#9146ff}
.auth-card-social-icon.is-spotify{background:#1db954;color:#06150b}
.auth-card-social-icon.is-soundcloud{background:#f50}
.auth-card-social-icon.is-github{background:#24292f}
.auth-card-social-icon.is-telegram{background:#229ed9}
.auth-card-social-icon.is-anilist{background:#02a9ff}
.auth-card-social-icon.is-mal{background:#2e51a2}
.auth-card-social-icon.is-steam{background:#171a21}
.auth-card-social-icon.is-bluesky{background:#1185fe}
.auth-card-social-icon.is-reddit{background:#ff4500}
.auth-card-social-icon.is-lastfm{background:#d51007}
.auth-card-social-icon.is-bandcamp{background:#1da0c3}
.auth-card-social-icon.is-website{background:var(--profile-accent,#1db954);color:#06150b}
.auth-card-social-icon.is-png-icon{
  background:#080808 !important;
  border:1px solid color-mix(in srgb, var(--card-icon,#fff) 35%, rgba(255,255,255,.12));
  color:var(--card-icon,#fff);
  padding:0;
  overflow:hidden;
  box-shadow:
    0 5px 15px rgba(0,0,0,.28),
    0 0 12px color-mix(in srgb, var(--card-icon,#fff) 22%, transparent);
}
.auth-card-social-icon.is-png-icon .memerap-card-social-png{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--card-icon,#fff) 55%, transparent));
}
.auth-card-social-icon:not(.is-png-icon) svg{
  width:20px;
  height:20px;
  display:block;
}
.auth-card-social-copy{min-width:0;flex:1;display:grid;gap:4px}
.auth-card-social-copy strong{font-size:.72rem;color:#d8d8d8}
.auth-card-social-copy .auth-settings-input{
  min-height:34px!important;
  padding:7px 9px!important;
  border-radius:8px !important;
  font-size:.72rem !important;
}
.auth-card-discord-input{
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #3e3e3e;
  border-radius:8px;
  background:#121212;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.auth-card-discord-input:focus-within{
  border-color:#5865f2;
  box-shadow:0 0 0 3px rgba(88,101,242,.12);
}
.auth-card-discord-input > span{
  padding-left:9px;
  color:#8f96f9;
  font-size:.78rem;
  font-weight:900;
}
.auth-card-discord-input .auth-settings-input{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding-left:2px!important;
}
.auth-card-discord-connect{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid #303030;
  border-radius:12px;
  background:#101010;
}
.auth-card-discord-connect > div:first-child{display:grid;gap:4px}
.auth-card-discord-connect strong{font-size:.86rem;color:#fff}
.auth-card-discord-connect .sub a{color:#8f96f9}
.auth-card-discord-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 16px!important;
  text-decoration:none;
  font-size:.82rem !important;
}
.auth-card-upload-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px dashed #454545;
  border-radius:8px;
  background:#101010;
}
.auth-card-upload-box > div:first-child{display:grid;gap:2px}
.auth-card-upload-box strong{font-size:.86rem}
.auth-card-song-extras{
  display:grid;
  gap:12px;
  margin-top:4px;
}
.auth-settings-range{
  width:100%;
  accent-color:var(--accent,#1ed760);
}
.auth-card-toggle-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 10px;
}
.auth-card-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.76rem;
  color:#cfcfcf;
  cursor:pointer;
  user-select:none;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.auth-card-toggle input{accent-color:var(--accent,#1ed760)}
.auth-card-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:4px 0 14px;
}
.auth-card-preset{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:5px 10px 5px 8px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
  font:inherit;
  font-weight:650;
  font-size:.72rem;
  letter-spacing:.01em;
  cursor:pointer;
  line-height:1;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
}
.auth-card-preset i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--p,#fff);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 8px color-mix(in srgb,var(--p,#fff) 55%,transparent);
  flex-shrink:0;
}
.auth-card-preset:hover{
  border-color:color-mix(in srgb,var(--p,#fff) 55%,rgba(255,255,255,.2));
  background:rgba(255,255,255,.08);
  color:#fff;
  transform:translateY(-1px);
}
.auth-card-css-box textarea{
  min-height:120px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.72rem;
  line-height:1.4;
  resize:vertical;
}
.auth-card-cover-box{
  align-items:center;
}
.auth-card-cover-preview{
  width:52px;
  height:52px;
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #3a3a3a;
  background:#181818;
  display:grid;
  place-items:center;
  color:#777;
  font-size:.62rem;
  text-align:center;
}
.auth-card-cover-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.auth-card-save-row{
  position:sticky;
  bottom:-1px;
  z-index:2;
  align-items:center;
  justify-content:space-between;
  padding:12px 0 2px;
  background:linear-gradient(180deg,transparent,#121212 22%);
}
@media(max-width:560px){
  .auth-card-social-grid{grid-template-columns:1fr}
  .auth-card-upload-box,
  .auth-card-save-row{align-items:stretch;flex-direction:column}
  .auth-card-save-row .auth-settings-primary-btn{width:100%}
  .auth-card-button-row .sub{width:100%;margin-left:0}
}

/* styles.css chunk 19/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ---- Messages hub (messages.html / memerap-messages.js) ---- */
.msg-hub-wrap{padding-top:0!important}
.msg-hub-main .wrap{max-width:none}
.msg-hub{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(0,240px);
  gap:0;
  min-height:calc(100vh - var(--memerap-rail-player-clearance) - 120px);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#0a0a0a;
}
.msg-hub-sidebar{
  display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--line);background:#101010;
}
.msg-hub-sidebar-head{padding:12px;display:grid;gap:8px;border-bottom:1px solid var(--line)}
.msg-hub-search{width:100%;box-sizing:border-box}
.msg-hub-sidebar-actions{display:flex;gap:6px;flex-wrap:wrap}
.msg-hub-thread-list{flex:1 1 auto;min-height:0;overflow:auto;padding:8px;display:grid;gap:4px;align-content:start}
.msg-hub-thread{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;
  width:100%;padding:8px;border:0;border-radius:8px;background:transparent;color:#eee;text-align:left;cursor:pointer;font:inherit;
}
.msg-hub-thread:hover,.msg-hub-thread.is-active{background:#1a1a1a}
.msg-hub-thread.has-unread .msg-hub-thread-title{color:#fff}
.msg-hub-thread-av{
  width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:#242424;color:#fff;font-weight:800;font-size:.82rem;overflow:hidden;
}
.msg-hub-thread-av.is-group{background:color-mix(in srgb,var(--accent) 28%,#242424)}
.msg-hub-thread-av img{width:100%;height:100%;object-fit:cover}
.msg-hub-thread-copy{min-width:0;display:grid;gap:2px}
.msg-hub-thread-title{font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-hub-thread-sub{font-size:.72rem;color:#9a9a9a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-hub-unread{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent,#1ed760);color:#000;
  font-size:.68rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
}
.msg-hub-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:#121212}
.msg-hub-chat-head{
  padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:8px;flex-shrink:0;
}
.msg-hub-head-sub{font-size:.78rem;color:#9a9a9a;font-weight:500}
.msg-hub-chat-empty,.msg-hub-empty{padding:24px 16px;color:#9a9a9a;font-size:.86rem;text-align:center}
.msg-hub-chat-messages{flex:1 1 auto;min-height:0;overflow:auto;padding:14px;display:grid;gap:10px;align-content:start}
.msg-hub-bubble{
  max-width:min(680px,92%);padding:10px 12px;border-radius:12px;background:#1a1a1a;border:1px solid #2a2a2a;
}
.msg-hub-bubble.is-mine{margin-left:auto;background:color-mix(in srgb,var(--accent) 14%,#1a1a1a);border-color:color-mix(in srgb,var(--accent) 35%,#2a2a2a)}
.msg-hub-bubble-meta{font-size:.72rem;color:#9a9a9a;margin-bottom:4px}
.msg-hub-bubble-body{font-size:.86rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg-hub-bubble-img{max-width:min(320px,100%);border-radius:8px;display:block}
.msg-hub-compose{border-top:1px solid var(--line);padding:10px 12px;display:grid;gap:8px;flex-shrink:0}
.msg-hub-compose-row{display:flex;gap:8px;align-items:center}
.msg-hub-compose-input{flex:1 1 auto;min-width:0}
.msg-hub-img-preview img{max-height:120px;border-radius:8px;display:block}
.msg-hub-members{border-left:1px solid var(--line);background:#101010;display:flex;flex-direction:column;min-height:0}
.msg-hub-members-toolbar{padding:10px;border-bottom:1px solid var(--line)}
.msg-hub-members-list{flex:1 1 auto;overflow:auto;padding:8px;display:grid;gap:6px;align-content:start}
.msg-hub-members-head{padding:6px 4px 8px;font-size:.78rem;color:#9a9a9a}
.msg-hub-member-row{display:flex;gap:8px;align-items:center;padding:6px;border-radius:8px}
.msg-hub-member-av{width:32px;height:32px;border-radius:999px;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:#242424;font-weight:800;font-size:.72rem;overflow:hidden}
.msg-hub-member-copy{display:grid;gap:1px;min-width:0;font-size:.72rem;color:#9a9a9a}
.msg-hub-member-copy strong{font-size:.82rem;color:#fff}
.msg-hub-side-panel{padding:10px 12px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.msg-hub-search-results{display:grid;gap:4px;max-height:220px;overflow:auto}
.msg-hub-search-item{
  display:flex;gap:8px;align-items:center;width:100%;padding:8px;border:0;border-radius:8px;background:#141414;color:#eee;text-align:left;cursor:pointer;font:inherit;
}
.msg-hub-search-av{width:32px;height:32px;border-radius:999px;object-fit:cover;background:#242424;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
@media(max-width:980px){
  .msg-hub{grid-template-columns:minmax(0,1fr)}
  .memerap-discord-shell .msg-hub{grid-template-columns:minmax(0,1fr)}
  .msg-hub-members,.msg-hub-sidebar{border:0}
  .msg-hub-members[hidden],.msg-hub-sidebar{display:grid}
}

/* ---- Discord shell (messages / vault board) ---- */
.memerap-discord-shell{
  background:#313338;color:#dbdee1;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.memerap-discord-shell .app-shell,.memerap-discord-shell .sticky,.memerap-discord-shell #nowBg{display:none!important}
.discord-app{display:flex;min-height:100vh;min-height:100dvh}
.discord-server-rail{
  width:72px;flex-shrink:0;background:#1e1f22;display:flex;flex-direction:column;align-items:center;
  padding:12px 0;gap:10px;border-right:1px solid #141619;
}
.discord-home-pill,.discord-server-pill{
  position:relative;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#313338;color:#dbdee1;text-decoration:none;transition:border-radius .18s var(--ease),background .18s var(--ease);
}
.discord-home-pill:hover,.discord-server-pill:hover{background:#5865f2;color:#fff;border-radius:16px}
.discord-server-pill.is-active{background:#5865f2;color:#fff;border-radius:16px}
.discord-home-pill-mark{font-weight:800;font-size:.72rem;letter-spacing:.02em}
.discord-rail-divider{width:32px;height:2px;background:#35373c;border-radius:999px;margin:2px 0 6px}
[data-discord-tip]::after{
  content:attr(data-discord-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  padding:6px 10px;border-radius:4px;background:#111214;color:#fff;font-size:.78rem;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease);z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.35);
}
[data-discord-tip]:hover::after{opacity:1}
.discord-app-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:#313338}
.memerap-discord-shell .discord-msg-hub{
  flex:1 1 auto;min-height:0;height:100vh;height:100dvh;border:0;border-radius:0;
  grid-template-columns:260px minmax(0,1fr) 240px;background:#313338;
}
.memerap-discord-shell .msg-hub-sidebar{
  background:#2b2d31;border-right:1px solid #1e1f22;display:flex;flex-direction:column;min-height:0;
}
.memerap-discord-shell .msg-hub-chat{background:#313338;display:flex;flex-direction:column;min-height:0}
.memerap-discord-shell .msg-hub-members{background:#2b2d31;border-left:1px solid #1e1f22}
.discord-dm-head{
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;min-height:48px;
  border-bottom:1px solid #1e1f22;box-shadow:0 1px 0 rgba(0,0,0,.1);font-size:.96rem;flex-shrink:0;
}
.discord-dm-title{
  border:0;background:transparent;color:#f2f3f5;font:inherit;font-size:.96rem;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:4px;
}
.discord-dm-title:hover{background:#3f4147}
.discord-dm-head-actions{display:flex;gap:2px}
.discord-icon-btn{
  width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:#b5bac1;
  cursor:pointer;font:inherit;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
.discord-icon-btn:hover{background:#3f4147;color:#dbdee1}
.discord-icon-btn--accent{color:#23a559}
.discord-icon-btn--accent:hover{color:#2dc770;background:#3f4147}
.discord-input,.discord-compose-input{
  background:#1e1f22!important;border:0!important;color:#dbdee1!important;
  border-radius:4px!important;box-shadow:none!important;font-size:.9rem!important;
}
.discord-input::placeholder,.discord-compose-input::placeholder{color:#949ba4}
.discord-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 16px;
  border:0;border-radius:4px;background:#4e5058;color:#fff;font:inherit;font-size:.86rem;font-weight:500;cursor:pointer;text-decoration:none;
}
.discord-btn:hover{background:#6d6f78;color:#fff;text-decoration:none}
.discord-btn--sm{min-height:28px;padding:0 12px;font-size:.78rem}
.discord-btn--primary{background:#5865f2}
.discord-btn--primary:hover{background:#4752c4}
.discord-btn--danger{background:#da373c}
.discord-btn--danger:hover{background:#a12828}
.memerap-discord-shell .msg-hub-sidebar-head{padding:8px 10px 6px;border-bottom:0;flex-shrink:0}
.discord-thread-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 8px 8px}
.discord-thread-section{margin-bottom:8px}
.discord-thread-section-label{
  padding:8px 8px 4px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#949ba4;
}
.discord-thread-empty{padding:16px 10px;color:#949ba4;font-size:.82rem;line-height:1.45}
.memerap-discord-shell .msg-hub-thread{
  position:relative;border-radius:4px;padding:6px 8px;margin-bottom:2px;
  grid-template-columns:32px minmax(0,1fr) auto;gap:10px;
}
.memerap-discord-shell .msg-hub-thread.is-active{background:#404249}
.memerap-discord-shell .msg-hub-thread.is-active::before{
  content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 4px 4px 0;background:#f2f3f5;
}
.memerap-discord-shell .msg-hub-thread:hover:not(.is-active){background:#35373c}
.memerap-discord-shell .msg-hub-thread-av{width:32px;height:32px;font-size:.78rem}
.memerap-discord-shell .msg-hub-thread-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.memerap-discord-shell .msg-hub-thread-title{font-size:.86rem;font-weight:600;color:#dbdee1}
.memerap-discord-shell .msg-hub-thread.has-unread .msg-hub-thread-title{color:#fff;font-weight:700}
.memerap-discord-shell .msg-hub-thread-time{font-size:.68rem;color:#949ba4;flex-shrink:0}
.memerap-discord-shell .msg-hub-thread-sub{font-size:.78rem;color:#949ba4;margin-top:1px}
.memerap-discord-shell .msg-hub-unread{background:#f23f43;color:#fff;font-size:.62rem;min-width:16px;height:16px}
.memerap-discord-shell .discord-chat-head{
  padding:0 16px;min-height:48px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #1e1f22;box-shadow:0 1px 0 rgba(0,0,0,.1);background:#313338;flex-shrink:0;
}
.discord-chat-head-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;font-size:.96rem}
.discord-chat-head-main strong{font-weight:600;color:#f2f3f5}
.discord-chat-head-av,.discord-chat-head-main .msg-hub-thread-av{width:28px;height:28px;font-size:.72rem;flex-shrink:0}
.discord-chat-head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.discord-mobile-back{
  display:none;border:0;background:transparent;color:#dbdee1;font-size:1.18rem;padding:4px 8px;border-radius:4px;cursor:pointer;
}
.discord-mobile-back:hover{background:#3f4147}
.memerap-discord-shell .discord-chat-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  flex:1 1 auto;color:#dbdee1;text-align:center;padding:24px;
}
.memerap-discord-shell .discord-chat-empty h2{margin:0;font-size:1.35rem;font-weight:700;color:#f2f3f5}
.memerap-discord-shell .discord-chat-empty p{margin:0;color:#949ba4;font-size:.9rem;max-width:320px;line-height:1.45}
.memerap-discord-shell .discord-chat-empty kbd{
  display:inline-block;padding:2px 6px;border-radius:4px;background:#404249;font-size:.82rem;color:#dbdee1;
}
.discord-welcome-art{margin-bottom:4px;color:#5865f2}
.discord-msg-scroll{
  flex:1 1 auto;min-height:0;overflow:auto;padding:16px 16px 8px;
  display:flex;flex-direction:column;gap:2px;
}
.discord-msg-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:2px 0;margin-top:8px}
.discord-msg-row.is-compact{margin-top:0}
.discord-msg-av,.discord-msg-av-spacer{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.discord-msg-av.is-fallback,.msg-hub-thread-av.is-fallback{
  display:inline-flex;align-items:center;justify-content:center;background:#5865f2;color:#fff;font-weight:700;
}
.discord-msg-av-spacer{display:block}
.discord-msg-body{min-width:0}
.discord-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.discord-msg-head strong{font-size:.96rem;font-weight:600;color:#f2f3f5}
.discord-msg-head time{font-size:.72rem;color:#949ba4}
.discord-msg-text{font-size:.96rem;line-height:1.375;color:#dbdee1;white-space:pre-wrap;word-break:break-word}
.discord-msg-img{max-width:min(400px,100%);border-radius:8px;margin-top:4px;display:block}
.discord-msg-empty-inline,.discord-msg-empty-hint{text-align:center;color:#949ba4}
.discord-msg-empty-inline p{margin:0 0 6px}
.memerap-discord-shell .discord-compose{border-top:0;padding:0 16px 24px;background:#313338;flex-shrink:0}
.memerap-discord-shell .discord-compose-row{background:#383a40;border-radius:8px;padding:0 8px;gap:4px;align-items:center}
.memerap-discord-shell .discord-compose-input{flex:1 1 auto;background:transparent!important;padding:11px 0!important}
.discord-img-preview{padding:0 16px 8px}
.discord-img-preview img{max-height:120px;border-radius:8px;display:block}
.discord-user-bar{
  display:flex;align-items:center;gap:4px;padding:4px;margin:0 6px 6px;background:#232428;border-radius:4px;flex-shrink:0;
}
.discord-user-bar-main{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:4px 6px;border:0;border-radius:4px;
  background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left;
}
.discord-user-bar-main:hover{background:#3f4147}
.discord-user-bar-av-wrap{position:relative;flex-shrink:0}
.discord-user-bar-av{width:32px;height:32px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;overflow:hidden;background:#5865f2}
.discord-status-dot{
  position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#23a559;border:3px solid #232428;
}
.discord-user-bar-copy{display:grid;gap:1px;min-width:0;font-size:.72rem;color:#949ba4}
.discord-user-bar-copy strong{font-size:.82rem;color:#f2f3f5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-hub-side-panel[hidden],.msg-hub-members[hidden],.discord-modal[hidden],.discord-profile-pane[hidden],
.msg-hub-compose[hidden],#msgHubSendForm[hidden],.discord-user-bar[hidden],#discordUserBar[hidden],
#msgHubChatEmpty[hidden],.discord-modal-body[hidden]{display:none!important}
.discord-members-head{padding:16px 12px 8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#949ba4}
.discord-member-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;padding:6px 8px;border-radius:4px}
.discord-member-row:hover{background:#3f4147}
.discord-member-row:disabled{opacity:.7;cursor:default}
.discord-sidebar-tabs{display:flex;gap:4px;padding:4px 8px 8px;flex-shrink:0}
.discord-sidebar-tab{
  flex:1 1 0;border:0;border-radius:4px;background:transparent;color:#949ba4;
  font:inherit;font-size:.78rem;font-weight:600;padding:6px 4px;cursor:pointer;
}
.discord-sidebar-tab:hover{background:#35373c;color:#dbdee1}
.discord-sidebar-tab.is-active{background:#404249;color:#fff}
.discord-sidebar-hint{margin:0 8px 8px;font-size:.72rem;color:#949ba4;line-height:1.35}
.discord-member-row-wrap{display:flex;align-items:center;gap:2px;border-radius:4px}
.discord-member-row-wrap.is-active{background:#404249}
.discord-member-row-wrap.is-active .discord-member-row{background:transparent}
.discord-member-row-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#5865f2;color:#fff;font-weight:700;font-size:.72rem;overflow:hidden}
.discord-member-row-av img,.discord-member-row-av.is-fallback{width:32px;height:32px}
.discord-member-row-copy{min-width:0;display:grid;gap:1px;font-size:.72rem;color:#949ba4}
.discord-member-row-copy strong{font-size:.86rem;font-weight:600;color:#dbdee1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discord-member-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discord-member-friend{flex-shrink:0;opacity:0;width:28px;height:28px}
.discord-member-row-wrap:hover .discord-member-friend,.discord-member-friend.is-on{opacity:1}
.discord-member-friend.is-on{color:#23a559}
.discord-compose-tools{display:flex;align-items:center;gap:4px;color:#b5bac1;font-size:.72rem;font-weight:700}
.discord-compose-tool{padding:4px 6px;border-radius:4px}
.discord-icon-btn.is-on{color:#fff;background:#3f4147}

.discord-profile-pane{
  width:340px;min-width:340px;max-width:340px;min-height:0;
  background:#232428;border-left:1px solid #1e1f22;
  display:flex;flex-direction:column;overflow:hidden;
}
.discord-profile-scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
.discord-profile-pane .discord-profile-card{
  background:#232428;min-height:100%;border-radius:0;display:flex;flex-direction:column;
}
.discord-profile-pane .discord-profile-banner{height:120px;flex-shrink:0}
.discord-profile-pane .discord-profile-head{padding-bottom:48px}
.discord-profile-pane .discord-profile-av,
.discord-profile-pane .discord-profile-av.is-fallback,
.discord-profile-pane .discord-profile-av.is-initial{
  width:80px;height:80px;border:6px solid #232428;
}
.discord-profile-pane .discord-profile-av-wrap .discord-status-dot{
  right:4px;bottom:4px;width:16px;height:16px;border-width:4px;border-color:#232428;
}
.discord-profile-status-bubble{
  margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#111214;
  color:#dbdee1;font-size:.82rem;line-height:1.35;border:1px solid #1e1f22;
}
.discord-profile-title-line{margin:8px 0 0;font-size:.82rem;color:#b5bac1}
.discord-profile-muted{margin:0;color:#949ba4;font-size:.82rem}
.discord-profile-loading{padding:24px 16px;color:#949ba4;font-size:.82rem}
.discord-profile-section{margin:14px 0 0}
.discord-profile-section h3{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b5bac1}
.discord-profile-anime-row{display:flex;flex-wrap:wrap;gap:6px}
.discord-profile-anime-chip{
  width:48px;height:68px;border-radius:4px;overflow:hidden;background:#1e1f22;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;text-decoration:none;
}
.discord-profile-anime-chip img{width:100%;height:100%;object-fit:cover;display:block}
.discord-profile-full-btn{
  display:flex;align-items:center;justify-content:center;margin-top:16px;
  min-height:38px;border-radius:8px;background:#4e5058;color:#fff;
  font:inherit;font-weight:600;text-decoration:none;
}
.discord-profile-full-btn:hover{background:#6d6f78;color:#fff;text-decoration:none}
.discord-profile-card-link{
  display:block;margin:10px 0 4px;text-align:center;color:#00a8fc;font-size:.78rem;text-decoration:none;
}
.discord-profile-card-link:hover{text-decoration:underline}
.memerap-discord-shell .discord-msg-hub{
  grid-template-columns:260px minmax(0,1fr) 340px;
}

@media(max-width:980px){
  .msg-hub{grid-template-columns:minmax(0,1fr)}
  .memerap-discord-shell .msg-hub{grid-template-columns:minmax(0,1fr)}
  .msg-hub-members,.msg-hub-sidebar{border:0}
}

@media(max-width:1100px){
  .memerap-discord-shell .discord-profile-pane{
    position:fixed;right:0;top:0;bottom:0;z-index:30;
    box-shadow:-12px 0 32px rgba(0,0,0,.4);
  }
}

/* Discord modals */
.discord-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px}
.discord-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.discord-modal-card{
  position:relative;width:min(440px,100%);background:#313338;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.45);
  animation:discordModalIn .18s ease;
}
@keyframes discordModalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.discord-modal-head{
  display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #1e1f22;
}
.discord-modal-head strong{font-size:1rem;color:#f2f3f5}
.discord-modal-body{padding:16px;display:grid;gap:12px}
.discord-field{display:grid;gap:6px;font-size:.78rem;color:#b5bac1;font-weight:600}
.discord-modal-submit{justify-self:start;margin-top:4px}
.memerap-discord-shell .msg-hub-search-item{background:#2b2d31;border-radius:4px}
.memerap-discord-shell .msg-hub-search-item:hover{background:#404249}

/* ---- Vault profile board ---- */
.vault-board-main{padding:32px 24px;overflow:auto;height:100vh;height:100dvh;box-sizing:border-box}
.vault-board-root{max-width:1080px;margin:0 auto}
.vault-board-loading,.vault-board-empty{color:#949ba4;padding:24px;text-align:center}
.vault-board-layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:24px;align-items:start}
.vault-board-profile-card{
  background:#2b2d31;border-radius:8px;overflow:hidden;border:1px solid #1e1f22;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.vault-board-banner{height:120px;background-size:cover;background-position:center}
.vault-board-profile-body{padding:0 16px 20px}
.vault-board-avatar-wrap{position:relative;display:inline-block;margin-top:-48px;margin-bottom:12px}
.vault-board-avatar{
  width:92px;height:92px;border-radius:50%;border:6px solid #2b2d31;background:#5865f2;
  object-fit:cover;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;
}
.vault-board-status-dot{right:4px;bottom:4px;border-color:#2b2d31}
.vault-board-ident h1{margin:0;font-size:1.35rem;color:#f2f3f5;font-weight:700}
.vault-board-handle{margin:4px 0 0;color:#949ba4;font-size:.9rem}
.vault-board-status{
  margin:12px 0 0;font-size:.82rem;color:#dbdee1;line-height:1.4;
  padding:8px 10px;border-radius:4px;background:#1e1f22;border:1px solid #141619;
}
.vault-board-bio{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:#b5bac1}
.vault-board-profile-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.vault-board-meta{display:grid;gap:10px;margin:0;font-size:.82rem;border-top:1px solid #1e1f22;padding-top:12px}
.vault-board-meta dt{color:#949ba4;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
.vault-board-meta dd{margin:2px 0 0;color:#dbdee1}
.vault-board-widgets{display:grid;gap:16px}
.vault-board-widgets-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vault-board-widgets-head h2{margin:0;font-size:1.18rem;color:#f2f3f5;font-weight:700}
.vault-board-widget{background:#2b2d31;border:1px solid #1e1f22;border-radius:8px;padding:16px}
.vault-board-widget-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.vault-board-widget-head strong{font-size:.96rem;color:#f2f3f5}
.vault-board-widget-links{display:flex;gap:10px}
.vault-board-link{font-size:.78rem;color:#00a8fc;text-decoration:none;font-weight:500}
.vault-board-link:hover{text-decoration:underline}
.vault-board-anime-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.vault-board-anime-tab{
  border:0;border-radius:999px;padding:6px 12px;background:#1e1f22;color:#949ba4;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.vault-board-anime-tab:hover{background:#404249;color:#dbdee1}
.vault-board-anime-tab.is-active{background:#5865f2;color:#fff}
.vault-board-tab-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.25);font-size:.62rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.vault-board-anime-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.vault-board-anime-card{
  background:#1e1f22;border-radius:8px;overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.vault-board-anime-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.vault-board-anime-cover{aspect-ratio:2/3;background:#141619;display:flex;align-items:center;justify-content:center}
.vault-board-anime-cover img{width:100%;height:100%;object-fit:cover;display:block}
.vault-board-anime-fallback{font-size:1.4rem;font-weight:800;color:#5865f2}
.vault-board-anime-meta{padding:8px;display:grid;gap:2px;font-size:.68rem;color:#949ba4}
.vault-board-anime-meta strong{font-size:.78rem;color:#f2f3f5;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vault-board-widget-empty{color:#949ba4;font-size:.82rem;padding:12px 0;text-align:center}
.vault-board-games-placeholder{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:4px}
.vault-board-game-slot{
  min-height:96px;border:1px dashed #4e5058;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#949ba4;font-size:.78rem;background:#1e1f22;
}
.vault-board-game-slot span{font-size:1.18rem;color:#5865f2;font-weight:700}
.vault-board-soon{font-size:.72rem;color:#949ba4;background:#1e1f22;padding:4px 10px;border-radius:999px}
.vault-board-skeleton .vault-board-sk-banner{height:120px;background:linear-gradient(90deg,#2b2d31,#404249,#2b2d31);background-size:200% 100%;animation:vaultSk 1.2s ease infinite}
.vault-board-sk-body{padding:16px}
.vault-board-sk-av{width:92px;height:92px;border-radius:50%;background:#404249;margin-top:-40px;margin-bottom:12px}
.vault-board-sk-line{height:14px;border-radius:4px;background:#404249;margin-bottom:8px}
.vault-board-sk-line.w80{width:80%}.vault-board-sk-line.w50{width:50%}.vault-board-sk-line.w30{width:30%}
.vault-board-sk-grid{height:200px;border-radius:8px;background:#404249}
@keyframes vaultSk{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media(max-width:900px){
  .vault-board-layout{grid-template-columns:1fr}
  .memerap-discord-shell .discord-msg-hub{grid-template-columns:minmax(0,1fr)}
  .memerap-discord-shell .msg-hub-members{display:none!important}
  .memerap-discord-shell.discord-chat-open .discord-dm-rail{display:none}
  .discord-mobile-back{display:inline-flex}
  [data-discord-tip]::after{display:none}
}

/* styles.css chunk 20/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ==========================================================================
   MemeRap identity layer — type, grain, cursor/input tint, micro-interactions.
   Purely cosmetic: no layout, no feature, no JS behaviour depends on this block.
   Escape hatches: body.memerap-grain-off, body.memerap-identity-off.
   ========================================================================== */

/* Film grain over the whole app. Static (no animation), pointer-transparent, and cheap:
   one inline SVG turbulence tile repeated by the compositor. Retro skin keeps its own
   scanlines via body[data-theme="retro"]::after — these stack on purpose. */
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size:160px 160px;
}
html.memerap-grain-off::after,
html.memerap-identity-off::after,
html:has(body.memerap-grain-off)::after,
html:has(body.memerap-identity-off)::after{display:none}

/* Display type: tighter optical tracking + balanced wrapping so headings read designed
   rather than default. Numbers line up wherever we show counts, times, or stats. */
.hero h1,
.rail-logo,
.panel-head strong,
.memerap-eyecatch__kicker{
  text-wrap:balance;
}
.hero:not(.artist-hero) h1{
  letter-spacing:-0.022em;
}
.rail-logo{
  letter-spacing:.16em;
}
.panel-head strong{
  font-feature-settings:"ss01" 1;
}
.count,
.tiny,
.sub time,
.dur,
.time,
.memerap-stats-count{
  font-variant-numeric:tabular-nums;
}

/* Form controls inherit the active skin instead of the browser's blue. */
:root{
  accent-color:var(--accent);
}
input,
textarea,
select{
  caret-color:var(--accent);
}

/* One consistent keyboard ring across every interactive surface. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.card:focus-visible,
.continue-card:focus-visible,
.chip:focus-visible,
.rail-link:focus-visible{
  outline:2px solid color-mix(in srgb,var(--memerap-focus,var(--accent)) 85%,#fff);
  outline-offset:2px;
}

/* Micro-interactions: everything clickable acknowledges the press. */
.chip,
button,
[role="button"]{
  transition:transform .12s var(--ease), background-color .18s var(--ease),
    border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.chip:active,
button:active,
[role="button"]:active{
  transform:translateY(1px) scale(.985);
}

/* Active nav gets a physical accent marker, not just a colour swap. */
.rail-link{position:relative}
.rail-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:0;
  border-radius:999px;
  background:var(--accent);
  transform:translateY(-50%);
  transition:height .18s var(--ease), opacity .18s var(--ease);
  opacity:0;
}
.rail-link.active::before{
  height:58%;
  opacity:1;
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent);
}
.rail-link:hover::before{
  height:32%;
  opacity:.5;
}

/* Section headers get a small accent tick — the kind of detail a template never has. */
.panel-head strong{position:relative}
.panel-head strong::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent);
  vertical-align:middle;
  transform:translateY(-1px);
}
body[data-theme="retro"] .panel-head strong::before{display:none}

/* Phones skip the blended grain layer — full-screen blend is the one identity bit
   that costs real paint time on mobile GPUs. */
@media (max-width:980px), (pointer:coarse){
  html::after{display:none}
}

@media (prefers-reduced-motion: reduce){
  html::after{opacity:.03}
  .chip,button,[role="button"]{transition:none!important}
  .chip:active,button:active,[role="button"]:active{transform:none!important}
  .rail-link::before{transition:none!important}
}

/* styles.css chunk 21/21. Concatenated in order by scripts/build-site-bundles.mjs.
 * Chunk order is the cascade order — moving a chunk changes which rules win. */
/* ==========================================================================
   Design pass — rails, card affordances, player chrome, section rhythm.
   Cosmetic only; every rule targets existing markup and adds no behaviour.
   ========================================================================== */

/* Horizontal shelves: drop the scrollbar and fade the right edge so a row that
   continues off-screen reads as intentional instead of clipped. */
.continue-row,
.h-rail-track{
  scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%);
}
.continue-row::-webkit-scrollbar,
.h-rail-track::-webkit-scrollbar{height:0;width:0}

/* Shelf cards get the same cover zoom the grid cards already have, plus a play
   badge that fades in on hover — the click target itself is unchanged. */
.continue-card .thumb{position:relative}
.continue-card .thumb img{
  transition:transform .5s var(--ease);
}
.continue-card:hover .thumb img{transform:scale(1.06)}
.continue-card .thumb::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--accent) no-repeat center /
    11px 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M1 1l10 6-10 6z' fill='%23000'/></svg>");
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(8px) scale(.92);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  pointer-events:none;
}
.continue-card:hover .thumb::after,
.continue-card:focus-visible .thumb::after{
  opacity:1;
  transform:none;
}

/* Card text rhythm: two lines for the title, one clean line for the byline. */
.continue-card .name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
}
.continue-card .sub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Section headers: the accent tick plus a hairline that runs to the edge, so
   shelves stay visually separated even on skins that strip panel borders. */
.panel-head{
  position:relative;
}
.continue-panel > .panel-head::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 38%,transparent),
    color-mix(in srgb,var(--line) 85%,transparent) 32%,
    transparent 92%);
  opacity:.75;
  pointer-events:none;
}

/* Player bar reads as a deliberate piece of chrome. The accent hairline on top
   already comes from .sticky::before (cover-accent glow); this only lifts it off
   the page with a soft shadow. */
.sticky{
  box-shadow:0 -18px 44px -28px rgba(0,0,0,.85);
}

/* Sticky top bar — flat, no frosted glass card */
body[data-theme="spotify"] .topbar{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:4px 0;
  border-radius:0;
  border:none;
  box-shadow:none;
}

/* Hero head: no accent underline gradient */
.memerap-spotify-hero-head{position:relative}
.memerap-spotify-hero-head::after{display:none}

@media (prefers-reduced-motion: reduce){
  .continue-card .thumb img{transition:none!important;transform:none!important}
  .continue-card .thumb::after{transition:none!important}
}

@media (pointer:coarse){
  /* Touch has no hover, so keep the badge out of the way and skip the zoom. */
  .continue-card .thumb::after{display:none}
  .continue-card:hover .thumb img{transform:none}
  .continue-row,
  .h-rail-track{
    mask-image:none;
    -webkit-mask-image:none;
  }
}

/* —— Feel polish (features unchanged): smoother rails, less touch hover stick, snappier chrome —— */
.h-rail-track,
.continue-row,
.memerap-h-rail{
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.continue-card .name,
.card .name,
.cards .name{
  letter-spacing:-0.01em;
}
.sticky{
  transition:background-color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
@media (pointer:coarse){
  .continue-card:hover,
  .card:hover,
  .cards > a.card:hover{
    transform:none;
    box-shadow:none;
  }
  .continue-card:active,
  .card:active{
    transform:scale(.985);
    transition-duration:.08s;
  }
  .thumb .cover-img{
    animation-duration:.2s;
  }
}
@media (max-width:980px){
  .main-col{
    scroll-behavior:auto;
  }
  html{
    scroll-behavior:auto;
  }
}

/* ==========================================================================
   App system — one type scale, one spacing grid, one radius set, one curve.
   Cosmetic only: no layout structure, no markup and no behaviour depends on it.

   Two scopes are used on purpose:
     [data-theme="spotify"]  the default skin, where the streaming-app look lives.
     :not(retro/vault/y2k/contrast)  mechanics (press feedback, empty states,
                                     integer text sizes) for every skin whose
                                     look is not deliberately period-specific.
   ========================================================================== */

:root{
  /* Integer type scale. The rem/em sizes this replaces computed to 14.72px,
     12.48px, 16.32px and 21.6px, so nothing shared a baseline. */
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px;
  --t-18:18px; --t-20:20px; --t-24:24px; --t-32:32px;

  /* 4px spacing grid. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* Radius set: artwork, card, panel, pill. */
  --r-art:4px; --r-card:8px; --r-panel:12px; --r-pill:999px;

  --sh-card:0 8px 24px rgba(0,0,0,.5);
  --sh-menu:0 16px 40px rgba(0,0,0,.6);

  /* One curve. ease-in is never used: it withholds movement at the exact moment
     the pointer is watching, which reads as lag. */
  --ease:cubic-bezier(.23,1,.32,1);
  --d-press:120ms;
  --d-menu:180ms;
  --d-modal:240ms;

  --sf-1:#181818;
  --sf-hover:#1f1f1f;
  --sf-2:#242424;
  --tx-2:#b3b3b3;
  --tx-3:#7c7c7c;
}

/* ---------- Default skin: page and section typography ---------- */

body[data-theme="spotify"] .hero:not(.artist-hero) h1,
body[data-theme="spotify"] .hero:not(.artist-hero) h1.memerap-spotify-greeting{
  font-size:var(--t-32);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}

body[data-theme="spotify"] .panel-head strong{
  font-size:var(--t-24);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
}

/* Secondary line in a section header is metadata, not a heading. */
body[data-theme="spotify"] .panel-head .sub,
body[data-theme="spotify"] .panel-head .tiny,
body[data-theme="spotify"] .panel-head small{
  font-size:var(--t-13);
  font-weight:400;
  letter-spacing:0;
  color:var(--tx-2);
}

/* A section heading carries its own weight; the accent tick and the rule under
   the greeting were decoration competing with it. */
body[data-theme="spotify"] .panel-head strong::before{display:none}
body[data-theme="spotify"] .memerap-spotify-hero-head::after{display:none}

/* ---------- Default skin: cards ---------- */

body[data-theme="spotify"] .cards{
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--s-6);
}

body[data-theme="spotify"] .card,
body[data-theme="spotify"] .cards > a.card{
  background:var(--sf-1);
  border:0;
  border-radius:var(--r-card);
  box-shadow:none;
  transition:background-color var(--d-press) var(--ease), box-shadow var(--d-press) var(--ease);
}

/* Lightening the surface is the whole hover state - no lift, no tinted border. */
body[data-theme="spotify"] .card:hover,
body[data-theme="spotify"] .cards > a.card:not(.card-skeleton):hover{
  background:var(--sf-hover);
  border-color:transparent;
  transform:none;
  box-shadow:var(--sh-card);
}

body[data-theme="spotify"] .cards > a.card:not(.card-skeleton)::after{opacity:0}

body[data-theme="spotify"] .meta{
  padding:var(--s-3);
  gap:var(--s-1);
}

body[data-theme="spotify"] .card .name,
body[data-theme="spotify"] .cards > a.card .name{
  font-size:var(--t-16);
  font-weight:700;
  line-height:1.25;
}

body[data-theme="spotify"] .card .sub,
body[data-theme="spotify"] .cards > a.card .sub{
  font-size:var(--t-13);
  color:var(--tx-2);
  margin-top:0;
  line-height:1.35;
}

body[data-theme="spotify"] .continue-card .name{
  font-size:var(--t-14);
  font-weight:700;
}
body[data-theme="spotify"] .continue-card .sub{
  font-size:var(--t-12);
  margin-top:var(--s-1);
}

body[data-theme="spotify"] .thumb-skeleton{border-radius:var(--r-card) var(--r-card) 0 0}

/* ---------- Default skin: rail, top bar, player ---------- */

body[data-theme="spotify"] .rail-link{
  font-size:var(--t-14);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-art);
}

body[data-theme="spotify"] .chip{
  font-size:var(--t-13);
  font-weight:700;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-pill);
}

body[data-theme="spotify"] .meta-title{
  font-size:var(--t-14);
  font-weight:700;
  line-height:1.3;
}
body[data-theme="spotify"] .meta-sub{
  font-size:var(--t-12);
  color:var(--tx-2);
  line-height:1.3;
}

/* Section rhythm: 32px between shelves on desktop, tighter as the viewport narrows,
   which is the same ladder the big players use. */
body[data-theme="spotify"] .panel{margin-bottom:var(--s-8)}
@media (max-width:1100px){
  body[data-theme="spotify"] .panel{margin-bottom:var(--s-6)}
}
@media (max-width:980px){
  body[data-theme="spotify"] .panel{margin-bottom:var(--s-5)}
  body[data-theme="spotify"] .hero:not(.artist-hero) h1,
  body[data-theme="spotify"] .hero:not(.artist-hero) h1.memerap-spotify-greeting{font-size:var(--t-24)}
  body[data-theme="spotify"] .panel-head strong{font-size:var(--t-20)}
  body[data-theme="spotify"] .card .name,
  body[data-theme="spotify"] .cards > a.card .name{font-size:var(--t-14)}
  body[data-theme="spotify"] .cards{gap:var(--s-4)}
}

/* ---------- Every non-period skin: mechanics ---------- */

/* Press feedback. Anything pressable answers within ~120ms or it feels dead. */
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) button,
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) .chip,
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) [role="button"]{
  transition:transform var(--d-press) var(--ease),
    background-color var(--d-press) var(--ease),
    border-color var(--d-press) var(--ease),
    color var(--d-press) var(--ease),
    box-shadow var(--d-press) var(--ease);
}
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) button:active,
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) .chip:active,
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) [role="button"]:active{
  transform:scale(.97);
}

/* Empty states read as a designed panel that says what is missing, not as a
   stray line of grey text. */
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) .empty{
  padding:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--sf-1) 70%,transparent);
  color:var(--tx-2);
  font-size:var(--t-14);
  line-height:1.5;
}
body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) .empty.load-error{
  padding:var(--s-6);
  gap:var(--s-3);
  border-color:color-mix(in srgb,#e2544c 35%,var(--line));
}

/* ---------- Overlay discipline ---------- */

/* Three things can appear on a first visit: the what's-new panel, the quick-tips
   banner and the mascot hint. All three still show and still dismiss the same way;
   they just no longer cover the player transport or the middle of a shelf. */

.memerap-whats-new{
  bottom:calc(var(--memerap-player-height,90px) + var(--s-4));
  max-height:min(46vh,420px);
  display:flex;
  flex-direction:column;
  padding:var(--s-4);
  border-radius:var(--r-panel);
  box-shadow:var(--sh-menu);
}
.memerap-whats-new-list{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:var(--s-1);
  font-size:var(--t-13);
}
.memerap-whats-new-title{font-size:var(--t-14)}
.memerap-whats-new-ver{font-size:var(--t-11)}

/* Docked just above the player instead of floating across the shelves. */
.memerap-onboarding-banner{
  bottom:calc(var(--memerap-player-height,90px) + var(--s-4));
}
.memerap-onboarding-inner{
  border-radius:var(--r-panel);
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-13);
}

/* The mascot hint sat on top of the transport controls at z-index 12000. It points at
   the sidebar footer toggle, so it belongs over the sidebar rather than centre screen
   where it collided with the tips banner. The rise-in transform is preserved. */
.rail-mascot-hint{
  left:var(--s-4);
  transform:translateY(12px);
  bottom:calc(var(--memerap-player-height,90px) + var(--s-4));
  border-radius:var(--r-card);
  font-size:var(--t-13);
  max-width:min(320px,calc(100vw - 32px));
}
.rail-mascot-hint.is-visible{transform:translateY(0)}

/* ---------- Board hangout / start-here chips ---------- */

/* These are already .chip anchors; on the default skin they had no surface, so a
   row of actions read as a line of plain text. */
body[data-theme="spotify"] .memerap-start-chip{
  background:var(--sf-2);
  border:1px solid transparent;
  color:var(--text);
  padding:var(--s-2) var(--s-4);
  font-size:var(--t-13);
  font-weight:700;
  text-decoration:none;
}
body[data-theme="spotify"] .memerap-start-chip:hover{
  background:#2d2d2d;
}
body[data-theme="spotify"] .memerap-start-here-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:var(--s-3);
}
body[data-theme="spotify"] .memerap-board-hangout .panel-body{
  padding-top:0;
}
body[data-theme="spotify"] .memerap-board-hangout .sub{
  font-size:var(--t-14);
  color:var(--tx-2);
  margin:0;
}

/* Hover motion is for real pointers only: a tap on a touch screen fires hover
   and then leaves the state stuck on. */
@media (hover:hover) and (pointer:fine){
  body[data-theme="spotify"] .cards > a.card:not(.card-skeleton):hover .thumb img{transform:scale(1.04)}
}
@media (hover:none){
  body[data-theme="spotify"] .card:hover{background:var(--sf-1);box-shadow:none}
}

@media (prefers-reduced-motion: reduce){
  body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) button,
  body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) .chip,
  body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) [role="button"]{
    transition:background-color var(--d-press) linear, color var(--d-press) linear;
  }
  body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) button:active,
  body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) .chip:active,
  body:not([data-theme="retro"],[data-theme="vault"],[data-theme="y2k"]) [role="button"]:active{
    transform:none;
  }
  body[data-theme="spotify"] .cards > a.card .thumb img{transition:none;transform:none}
}

/* ---------- Soft navigation + denser professional shelves ---------- */

html.memerap-spa-busy{cursor:progress}
html.memerap-spa-busy #main{opacity:.72;transition:opacity var(--d-press) var(--ease)}
@supports (view-transition-name: none){
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:var(--d-menu)}
}

body[data-theme="spotify"] .panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-3);
  margin-bottom:var(--s-3);
}
body[data-theme="spotify"] .continue-row{
  gap:var(--s-4);
  padding-bottom:var(--s-2);
}
body[data-theme="spotify"] .continue-card{
  border-radius:var(--r-card);
  background:transparent;
}
body[data-theme="spotify"] .continue-card .thumb{
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
body[data-theme="spotify"] .sticky{
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(18,18,18,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body[data-theme="spotify"] .rail{
  background:#000;
}
body[data-theme="spotify"] .rail-link.active{
  background:var(--sf-2);
  color:#fff;
}
body[data-theme="spotify"] .topbar{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body[data-theme="spotify"] .search{
  background:var(--sf-2);
  border:0;
  border-radius:var(--r-pill);
  height:44px;
  padding:0 var(--s-4);
  font-size:var(--t-14);
}
body[data-theme="spotify"] .search:focus{
  outline:2px solid rgba(29,185,84,.45);
  outline-offset:2px;
}
body[data-theme="spotify"] .empty{
  text-align:center;
}

/* Optimistic like — instant pop, sync happens in the background */
@keyframes memerap-like-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.like-btn.like-pop,
#likeBtn.like-pop,
.memerap-fs-tbtn.like-pop {
  animation: memerap-like-pop 320ms var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.like-btn.mode-on,
#likeBtn.mode-on {
  color: #1db954;
}
@media (prefers-reduced-motion: reduce) {
  .like-btn.like-pop,
  #likeBtn.like-pop,
  .memerap-fs-tbtn.like-pop { animation: none; }
}

/* Crew ladder (People page) — div rows, not <ol>, so UA list styles never win */
#memberGrid .vault-ladder,
.vault-ladder{
  display:block;width:100%;box-sizing:border-box;
  padding:14px 16px 16px;margin:0 0 16px;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:rgba(255,255,255,.03);
}
#memberGrid .vault-ladder > .panel-head,
.vault-ladder > .panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;
}
.vault-ladder > .panel-head .sub{font-size:.75rem;opacity:.7;color:var(--muted,#9aa)}
#memberGrid .vault-ladder-list,
.vault-ladder-list{
  display:flex;flex-direction:column;gap:6px;margin:0;padding:0;
  list-style:none!important;
}
#memberGrid .vault-ladder-row,
.vault-ladder-row{
  display:grid!important;
  grid-template-columns:52px 40px minmax(0,1fr) auto;
  gap:8px 12px;align-items:center;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);
  color:var(--text,#e5e5e5)!important;
  text-decoration:none!important;
  border:1px solid transparent;
  box-sizing:border-box;
}
#memberGrid .vault-ladder-row:hover,
.vault-ladder-row:hover{
  border-color:rgba(29,185,84,.35);background:rgba(29,185,84,.08);
  color:var(--text,#e5e5e5)!important;
}
#memberGrid .vault-ladder-row.is-you,
.vault-ladder-row.is-you{
  border-color:rgba(29,185,84,.45);background:rgba(29,185,84,.1);
}
.vault-ladder-pos{
  font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap;
  display:flex;align-items:center;gap:6px;color:inherit;
}
.vault-ladder-av{
  width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  font-size:.85rem;font-weight:700;color:var(--muted,#9aa);
}
.vault-ladder-av img{width:100%;height:100%;object-fit:cover;display:block}
.vault-ladder-meta{min-width:0;display:grid;gap:2px}
.vault-ladder-name{
  font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;
}
.vault-ladder-pts{
  font-size:.75rem;color:var(--muted,#999)!important;white-space:nowrap;
}
.vault-ladder-achs{font-size:.8rem;opacity:.9;letter-spacing:.04em;justify-self:end}
.ladder-up{color:#1ed760;font-weight:700}
.ladder-down{color:#e36;font-weight:700}
.ladder-same{color:#666;font-weight:700}
.ladder-achs{letter-spacing:.05em;opacity:.9}
.member-card.is-you{box-shadow:0 0 0 1px rgba(29,185,84,.45)}
.member-you-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:12px 14px;border-radius:12px;
  background:rgba(29,185,84,.1);border:1px solid rgba(29,185,84,.28);
}
.member-you-banner strong{font-size:.95rem}
.member-you-banner .sub{font-size:.8rem;color:var(--muted,#9aa)}
@media (max-width:700px){
  #memberGrid .vault-ladder-row,
  .vault-ladder-row{
    grid-template-columns:44px 36px minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  .vault-ladder-achs{grid-column:3;justify-self:start}
  .vault-ladder-pts{grid-column:3}
}

/* Cover hover preview */
.memerap-hover-preview{
  position:fixed;z-index:9800;width:min(240px,calc(100vw - 16px));
  padding:10px 12px;border-radius:12px;
  background:rgba(12,14,18,.94);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.45);backdrop-filter:blur(10px);
  pointer-events:auto;display:grid;gap:8px;
}
.memerap-hover-preview[hidden]{display:none!important}
.memerap-hover-preview-wave{
  display:flex;align-items:flex-end;gap:2px;height:36px;opacity:.85;
}
.memerap-hover-preview-wave i{
  flex:1;display:block;min-width:2px;border-radius:1px;
  background:linear-gradient(180deg,var(--accent,#1db954),rgba(29,185,84,.25));
}
.memerap-hover-preview-meta{display:grid;gap:2px;min-width:0}
.memerap-hover-preview-title{
  font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.memerap-hover-preview-sub{
  font-size:.72rem;color:var(--muted,#9aa);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.memerap-hover-preview-play{
  justify-self:start;padding:4px 12px;border-radius:999px;border:0;
  background:var(--accent,#1db954);color:#06140b;font-weight:700;font-size:.75rem;cursor:pointer;
}
@media (hover: none){
  .memerap-hover-preview{display:none!important}
}

/* Vault Wrapped */
.memerap-wrapped-root{position:fixed;inset:0;z-index:9900;display:grid;place-items:center;padding:16px}
.memerap-wrapped-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px)}
.memerap-wrapped-card{
  position:relative;width:min(520px,100%);max-height:min(90vh,720px);overflow:auto;
  padding:28px 24px 20px;border-radius:18px;
  background:linear-gradient(160deg,#101820 0%,#0a1210 55%,#122018 100%);
  border:1px solid rgba(29,185,84,.28);box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.memerap-wrapped-x{
  position:absolute;top:10px;right:12px;border:0;background:transparent;
  color:#fff;font-size:1.4rem;cursor:pointer;opacity:.7;
}
.memerap-wrapped-kicker{
  margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#7dcea0;
}
.memerap-wrapped-card h2{margin:6px 0 4px;font-size:2.4rem;font-weight:800;letter-spacing:-.03em}
.memerap-wrapped-lead{margin:0 0 18px;color:var(--muted,#9aa)}
.memerap-wrapped-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.memerap-wrapped-cols h3{margin:0 0 8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.memerap-wrapped-cols ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.memerap-wrapped-cols li{
  display:grid;grid-template-columns:22px 1fr;gap:6px 8px;align-items:baseline;
  font-size:.86rem;
}
.memerap-wrapped-cols li em{grid-column:2;font-style:normal;font-size:.72rem;color:var(--muted,#9aa)}
.mw-n{font-weight:800;font-variant-numeric:tabular-nums;color:#1ed760}
.memerap-wrapped-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
@media (max-width:560px){
  .memerap-wrapped-cols{grid-template-columns:1fr}
  .memerap-wrapped-card h2{font-size:2rem}
}

/* ---- Unslop: less template chrome ---- */
body[data-theme="spotify"]{
  --memerap-glow-accent:none;
}
body[data-theme="spotify"] .panel.continue-panel,
body[data-theme="spotify"] .panel{
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
body[data-theme="spotify"] .panel-head{
  padding-left:0;
  padding-right:0;
}
body[data-theme="spotify"] .chip{
  border-radius:8px;
}
body[data-theme="spotify"] .search-shell,
body[data-theme="spotify"] .search{
  border-radius:8px;
  box-shadow:none;
}
body[data-theme="spotify"] .rail-mascot-glow,
body[data-theme="spotify"] .now-bg{
  opacity:0!important;
  animation:none!important;
}
/* Secondary rail items feel quieter — Support / Share aren't peers of Home */
body[data-theme="spotify"] .rail-nav .rail-link[href*="upload"],
body[data-theme="spotify"] .rail-nav .rail-link[href*="support"]{
  opacity:.72;
  font-size:.92em;
}



/* styles.css chunk 23 — mobile app system (wins last).
 * Phone chrome: dense feed, thumb-zone nav, instant taps (YT/Spotify/PH).
 * Desktop unchanged. Only under .memerap-mobile-shell-on. */

@media (max-width: 980px) {
  html.memerap-mobile-shell-on {
    --m-tap: 44px;
    --m-nav: 56px;
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-press: 80ms;
    --m-pad: 12px;
    scroll-behavior: auto;
  }

  html.memerap-mobile-shell-on,
  body.memerap-mobile-shell-on {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: #000;
  }

  body.memerap-mobile-shell-on .now-bg,
  body.memerap-mobile-shell-on #nowBg {
    display: none !important;
  }

  body.memerap-mobile-shell-on .main-col {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  body.memerap-mobile-shell-on .wrap {
    padding: 0 var(--m-pad) calc(var(--memerap-mobile-chrome-bottom, 128px) + 16px) !important;
  }

  /* —— Top chrome: flush, search + account only —— */
  body.memerap-mobile-shell-on .topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--m-tap);
    margin: 0 0 4px;
    padding: 4px var(--m-pad);
    border-radius: 0;
    background: #000;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    will-change: transform;
  }

  body.memerap-mobile-shell-on .topbar-right > a.chip,
  body.memerap-mobile-shell-on #backBtn,
  body.memerap-mobile-shell-on #fwdBtn,
  body.memerap-mobile-shell-on .memerap-mobile-menu-chip,
  body.memerap-mobile-shell-on .memerap-mobile-page-title {
    display: none !important;
  }

  body[data-theme="spotify"].memerap-mobile-shell-on .topbar-right > #emailCopyBtn {
    display: none !important;
  }

  body.memerap-mobile-shell-on .memerap-mobile-search-chip,
  body.memerap-mobile-shell-on .memerap-account-btn {
    min-width: var(--m-tap);
    min-height: var(--m-tap);
    border-radius: 999px;
  }

  body.memerap-mobile-shell-on .memerap-mobile-search-chip {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 0;
  }

  body.memerap-mobile-shell-on .memerap-mobile-search-chip svg {
    display: block;
  }

  body.memerap-mobile-shell-on .memerap-account-btn {
    padding: 0 12px !important;
    font-size: 0.8rem;
    font-weight: 700;
  }

  body.memerap-mobile-shell-on .memerap-account-name {
    max-width: 28vw;
  }

  body.memerap-mobile-shell-on .memerap-account-caret {
    display: none;
  }

  /* —— Hero: greeting + compact shuffle on one row —— */
  body.memerap-mobile-shell-on .hero:not(.artist-hero) {
    padding: 8px 0 4px;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.memerap-mobile-shell-on .memerap-spotify-hero-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 8px;
  }

  body.memerap-mobile-shell-on .hero:not(.artist-hero) h1,
  body.memerap-mobile-shell-on .memerap-spotify-greeting {
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  body.memerap-mobile-shell-on .memerap-spotify-shuffle-btn {
    width: auto !important;
    min-height: 36px;
    padding: 8px 14px;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
  }

  body.memerap-mobile-shell-on .hero .search-row,
  body.memerap-mobile-shell-on .hero:not(.artist-hero) > p,
  body.memerap-mobile-shell-on .hero:not(.artist-hero) > div:has(> a.link) {
    display: none !important;
  }

  body.memerap-mobile-shell-on .hero:not(.artist-hero) h1 {
    margin-top: 0 !important;
  }

  /* —— Shelves: horizontal snap + 3rd-card peek —— */
  body.memerap-mobile-shell-on .panel.continue-panel {
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  body.memerap-mobile-shell-on .continue-panel .panel-head {
    padding: 10px 0 8px;
    gap: 8px;
  }

  body.memerap-mobile-shell-on .continue-panel .panel-head strong {
    font-size: 1.05rem;
  }

  body.memerap-mobile-shell-on .continue-panel .panel-head .sub,
  body.memerap-mobile-shell-on .panel-head .sub {
    display: none !important;
  }

  body.memerap-mobile-shell-on .panel:has(#likedList) > .panel-head {
    display: none !important;
  }

  body.memerap-mobile-shell-on .continue-panel .panel-body {
    padding: 0;
  }

  body.memerap-mobile-shell-on .continue-row.cards {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-inline: 0;
  }

  body.memerap-mobile-shell-on .continue-row.cards::-webkit-scrollbar {
    display: none;
  }

  body.memerap-mobile-shell-on .continue-row.cards .continue-card,
  body.memerap-mobile-shell-on .continue-row.cards .card {
    flex: 0 0 auto;
    width: min(132px, 36vw);
    min-width: 0;
    scroll-snap-align: start;
    content-visibility: auto;
    contain-intrinsic-size: 132px 196px;
  }

  body.memerap-mobile-shell-on .memerap-pin-artist {
    width: var(--m-tap);
    height: var(--m-tap);
  }

  /* Artist / library grid only — not the horizontal shelves */
  body.memerap-mobile-shell-on .cards:not(.continue-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  body.memerap-mobile-shell-on .cards:not(.continue-row) > a.card {
    content-visibility: auto;
    contain-intrinsic-size: 160px 210px;
  }

  /* —— Bottom tab bar —— */
  body.memerap-mobile-shell-on .memerap-mobile-bottom-nav {
    height: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: none;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.memerap-mobile-shell-on .memerap-mobile-bottom-link {
    min-height: var(--m-tap);
    gap: 2px;
    color: #8a8a8a;
    transition: color var(--m-press) var(--m-ease), transform var(--m-press) var(--m-ease);
  }

  body.memerap-mobile-shell-on .memerap-mobile-bottom-link:active {
    transform: scale(0.92);
  }

  body.memerap-mobile-shell-on .memerap-mobile-bottom-link.is-active {
    color: #fff;
  }

  body.memerap-mobile-shell-on .memerap-mobile-bottom-icon {
    font-size: 1.18rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.memerap-mobile-shell-on .memerap-mobile-bottom-icon svg {
    display: block;
  }

  body.memerap-mobile-shell-on .memerap-mobile-bottom-label {
    font-size: 0.6rem;
    font-weight: 700;
  }

  /* —— Mini player: cover / title / play, progress hairline —— */
  body.memerap-mobile-shell-on .sticky {
    bottom: calc(var(--m-nav) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
    position: fixed;
  }

  body.memerap-mobile-shell-on .memerap-mobile-player-toggle {
    display: none !important;
  }

  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) .sticky-inner {
    min-height: 56px;
    padding: 6px 10px 6px 10px;
  }

  body.memerap-mobile-shell-on .memerap-play-btn {
    min-width: var(--m-tap) !important;
    min-height: var(--m-tap) !important;
  }

  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .sticky {
    padding: 0 8px;
    overflow: visible;
  }

  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .sticky-inner {
    padding: 8px 4px 8px 0;
    min-height: 56px;
    position: relative;
  }

  /* Hairline seek on top of the mini bar */
  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-seek-row {
    display: grid !important;
    position: absolute;
    top: -2px;
    left: -8px;
    right: -8px;
    height: 12px;
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;
    grid-template-columns: 1fr;
    align-items: center;
    z-index: 4;
  }

  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-time {
    display: none !important;
  }

  body.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-seek {
    height: 3px;
    margin: 0;
  }

  /* —— Drawer —— */
  body.memerap-mobile-shell-on .rail-col {
    width: min(320px, 86vw);
    transform: translate3d(-105%, 0, 0);
    transition: transform 0.24s var(--m-ease);
    will-change: transform;
  }

  body.memerap-mobile-shell-on.memerap-mobile-nav-open .rail-col {
    transform: translate3d(0, 0, 0);
  }

  body.memerap-mobile-shell-on .memerap-mobile-nav-backdrop {
    transition: opacity 0.24s var(--m-ease);
  }

  body.memerap-mobile-shell-on .rail-link {
    min-height: var(--m-tap);
  }

  /* Track rows */
  body.memerap-mobile-shell-on .row,
  body.memerap-mobile-shell-on .panel-body .list .row {
    min-height: 56px;
    padding: 10px 8px;
  }

  body.memerap-mobile-shell-on select,
  body.memerap-mobile-shell-on input[type="search"],
  body.memerap-mobile-shell-on input[type="text"],
  body.memerap-mobile-shell-on .search {
    font-size: 16px;
  }

  /* Search: full-screen song list, not a command palette */
  body.memerap-mobile-shell-on .search-modal-root {
    background: #000;
  }
  body.memerap-mobile-shell-on .search-modal-bg {
    background: #000;
  }
  body.memerap-mobile-shell-on .search-modal-card {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }
  body.memerap-mobile-shell-on .search-modal-head {
    padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
  }
  body.memerap-mobile-shell-on .search-modal-input {
    min-height: 44px;
    border-radius: 999px;
    background: #1a1a1a;
    border: none;
    color: #fff;
    padding: 10px 16px;
  }
  body.memerap-mobile-shell-on .search-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 8px;
    border: none;
    background: none;
    color: #1ed760;
    font-size: 0.92rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  body.memerap-mobile-shell-on .search-modal-results {
    flex: 1;
    max-height: none;
    overflow: auto;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  body.memerap-mobile-shell-on .search-modal-footer {
    display: none !important;
  }
  body.memerap-mobile-shell-on .search-modal-dl {
    display: none !important;
  }
  body.memerap-mobile-shell-on .search-modal-item.q-item {
    min-height: 56px;
    padding: 8px 6px;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  body.memerap-mobile-shell-on .search-modal-section-head {
    color: #b3b3b3;
    letter-spacing: 0.04em;
    padding: 12px 2px 4px;
  }
  body.memerap-mobile-shell-on .search-modal-copy .title {
    color: #fff;
    font-size: 0.95rem;
  }
  body.memerap-mobile-shell-on .search-modal-copy .tiny {
    color: #a7a7a7;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
  }

  body.memerap-mobile-shell-on .memerap-whats-new {
    display: none !important;
  }

  /* Empty mini-player eats a whole thumb row — hide until something is queued */
  body.memerap-mobile-shell-on:not(.memerap-mobile-has-track) .sticky {
    transform: translateY(120%);
    pointer-events: none;
    visibility: hidden;
  }

  html.memerap-mobile-shell-on.memerap-spa-busy .wrap {
    opacity: 0.88;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    body.memerap-mobile-shell-on .rail-col,
    body.memerap-mobile-shell-on .memerap-mobile-nav-backdrop,
    body.memerap-mobile-shell-on .topbar,
    body.memerap-mobile-shell-on .memerap-mobile-bottom-link,
    html.memerap-mobile-shell-on.memerap-spa-busy .wrap {
      transition: none !important;
      opacity: 1;
    }
  }
}

@media (max-width: 400px) {
  body.memerap-mobile-shell-on .continue-row.cards .continue-card,
  body.memerap-mobile-shell-on .continue-row.cards .card {
    width: min(124px, 38vw);
  }

  body.memerap-mobile-shell-on .hero:not(.artist-hero) h1,
  body.memerap-mobile-shell-on .memerap-spotify-greeting {
    font-size: 1.22rem;
  }
}

/* Karaoke wipe — current line fills L→R; upcoming dim. Word stamps if enhanced LRC.
   Keep paints cheap: no blur, no scale transitions (those felt laggy on screen recordings). */
#nowPanel .np-lyrics.np-lyrics--wipe,
#bigModal .memerap-fs-lyrics.np-lyrics--wipe{
  text-align:center;
  /* Bottom fade only — top fade was clipping the first lines. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  padding-top:8px;
}
.np-lyrics--wipe .lyrics-line{
  padding:6px 10px;
  margin:0 auto;
  max-width:32rem;
  color:color-mix(in srgb, var(--text) 42%, transparent);
  background:transparent;
  font-weight:500;
  font-size:.95em;
  line-height:1.55;
  opacity:.48;
  transform:none;
  transition:opacity .12s linear, color .12s linear;
}
.np-lyrics--wipe .lyrics-line--played{
  opacity:.62;
  color:color-mix(in srgb, var(--text) 72%, transparent);
  background:transparent;
  transform:none;
}
.np-lyrics--wipe .lyrics-line--active{
  opacity:1;
  font-weight:750;
  font-size:1.04em;
  color:transparent;
  background:transparent;
  transform:none; /* kill base .lyrics-line--active scale from dock CSS */
  text-shadow:none;
}
.np-lyrics--wipe .lyrics-wipe,
.np-lyrics--wipe .lyric-word{
  display:inline;
  background-image:linear-gradient(
    90deg,
    var(--text) 0,
    var(--text) var(--lyric-fill, 0%),
    color-mix(in srgb, var(--text) 34%, transparent) var(--lyric-fill, 0%)
  );
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.np-lyrics--wipe .lyrics-line--played .lyrics-wipe,
.np-lyrics--wipe .lyrics-line--played .lyric-word{
  background:none;
  color:inherit;
  -webkit-text-fill-color:currentColor;
}
.np-lyrics--wipe .lyrics-line:not(.lyrics-line--active):not(.lyrics-line--played) .lyrics-wipe,
.np-lyrics--wipe .lyrics-line:not(.lyrics-line--active):not(.lyrics-line--played) .lyric-word{
  background:none;
  color:inherit;
  -webkit-text-fill-color:currentColor;
}
.np-lyrics--wipe .lyric-word.is-singing{
  font-weight:800;
}
body[data-theme="spotify"] .np-lyrics--wipe .lyrics-line--active .lyrics-wipe,
body[data-theme="spotify"] .np-lyrics--wipe .lyrics-line--active .lyric-word{
  background-image:linear-gradient(
    90deg,
    #fff 0,
    #fff var(--lyric-fill, 0%),
    rgba(255,255,255,.34) var(--lyric-fill, 0%)
  );
}

/* Breathing room between verse/chorus / long silences */
.np-lyrics--wipe .lyrics-gap,
.memerap-fs-lyrics.np-lyrics--wipe .lyrics-gap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  max-width:12rem;
  color:rgba(255,255,255,.28);
  letter-spacing:.35em;
  user-select:none;
  pointer-events:none;
}
.np-lyrics--wipe .lyrics-gap span{
  font-size:.72rem;
  opacity:.85;
}
.np-lyrics--wipe .lyrics-gap--sm{ padding:10px 0 6px; }
.np-lyrics--wipe .lyrics-gap--md{ padding:18px 0 10px; }
.np-lyrics--wipe .lyrics-gap--lg{ padding:28px 0 14px; }
.np-lyrics--wipe .lyrics-gap--intro{ padding-top:6px; padding-bottom:12px; }

/* Per-track timing nudge — sits above NP lyrics */
#nowPanel .np-lyric-timing{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 6px;
  padding:0 2px;
  font-size:.68rem;
  color:#8a8a8a;
}
#nowPanel .np-lyric-timing[hidden]{ display:none !important; }
#nowPanel .np-lyric-timing-label{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:650;
  margin-right:2px;
}
#nowPanel .np-lyric-timing-btn{
  border:0;
  background:#1a1a1a;
  color:#ddd;
  width:26px;
  height:24px;
  border-radius:7px;
  cursor:pointer;
  font-size:.78rem;
  line-height:1;
  padding:0;
}
#nowPanel .np-lyric-timing-btn:hover{ background:#242424; color:#fff; }
#nowPanel .np-lyric-timing-val{
  min-width:2.6rem;
  text-align:center;
  font:11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#bdbdbd;
}
#nowPanel .np-lyric-timing.is-adjusted .np-lyric-timing-val{ color:#9fefb0; }
#nowPanel .np-lyric-timing-reset{ width:auto; padding:0 7px; color:#888; }

@media (prefers-reduced-motion: reduce){
  .np-lyrics--wipe .lyrics-line{
    opacity:.7;
    transition:none;
  }
  .np-lyrics--wipe .lyrics-line--active{
    color:var(--text);
    background:color-mix(in srgb, var(--accent) 22%, transparent);
    -webkit-text-fill-color:unset;
  }
  .np-lyrics--wipe .lyrics-wipe,
  .np-lyrics--wipe .lyric-word{
    background:none;
    color:inherit;
    -webkit-text-fill-color:currentColor;
  }
}
html.memerap-mobile-shell-on .np-lyrics--wipe .lyrics-line--active,
body.memerap-mobile-shell-on .np-lyrics--wipe .lyrics-line--active{
  font-size:1.02em;
}

/* APlayer-inspired now dock: frosted glass + full-bleed spinning vinyl. */
#nowPanel.np-panel--glass{
  background:
    linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, rgba(0,0,0,.22)),
    color-mix(in srgb, #121214 58%, transparent);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 24px 64px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.1) inset;
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
#nowPanel.np-panel--glass .np-head{
  color:rgba(255,255,255,.55);
}
#nowPanel.np-panel--glass .np-lyrics{
  background:rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.08);
}

/* Disc — sized so lyrics stay the hero on narrow docks */
#nowPanel .np-cover.np-cover--vinyl{
  position:relative;
  width:min(100%, 220px);
  max-width:100%;
  margin:4px auto 14px;
  aspect-ratio:1/1;
  border-radius:50%;
  border:none;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 2.5px),
    #0a0a0a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 0 4px #080808,
    0 16px 36px rgba(0,0,0,.55);
  overflow:hidden;
}
@media (max-width: 980px){
  #nowPanel .np-cover.np-cover--vinyl{
    width:min(58vw, 168px);
    margin:2px auto 12px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 0 0 3px #080808,
      0 10px 24px rgba(0,0,0,.5);
  }
  #nowPanel .np-cover.np-cover--vinyl::after{
    width:9%;
    height:9%;
  }
}
#nowPanel .np-cover.np-cover--vinyl .np-cover-img,
#nowPanel .np-cover.np-cover--vinyl img,
#nowPanel .np-cover.np-cover--vinyl picture{
  width:92%;
  height:92%;
  border-radius:50%;
  object-fit:cover;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
  z-index:1;
}
#nowPanel .np-cover.np-cover--vinyl picture .np-cover-img,
#nowPanel .np-cover.np-cover--vinyl picture img{
  position:static;
  width:100%;
  height:100%;
  transform:none;
  left:auto;
  top:auto;
  box-shadow:none;
}
#nowPanel .np-cover.np-cover--vinyl::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8%;
  height:8%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#777,#0d0d0d 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
  z-index:2;
  pointer-events:none;
}
#nowPanel .np-cover.np-cover--vinyl.is-spinning .np-cover-img,
#nowPanel .np-cover.np-cover--vinyl.is-spinning img,
#nowPanel .np-cover.np-cover--vinyl.is-spinning picture{
  animation:memerapVinylSpin 14s linear infinite;
  transform-origin:center center;
  left:50%;
  top:50%;
  margin:0;
}
@keyframes memerapVinylSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  #nowPanel .np-cover.np-cover--vinyl.is-spinning .np-cover-img,
  #nowPanel .np-cover.np-cover--vinyl.is-spinning img,
  #nowPanel .np-cover.np-cover--vinyl.is-spinning picture{
    animation:none;
  }
  #nowPanel.np-panel--glass{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
html.memerap-mobile-shell-on #nowPanel .np-cover.np-cover--vinyl.is-spinning .np-cover-img,
body.memerap-mobile-shell-on #nowPanel .np-cover.np-cover--vinyl.is-spinning .np-cover-img{
  animation:none;
}

/* Premium sticky player — APlayer/Plyr feel on our Spotify engine (CSS only + playing class).
   Does not replace audio / queue / media.php. */
body[data-theme="spotify"] .sticky{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 40%, rgba(0,0,0,.2)),
    color-mix(in srgb, #141414 72%, transparent);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 -12px 40px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
}
body[data-theme="spotify"] .sticky::before{
  height:3px;
  background:linear-gradient(90deg, #1ed760, #1db954 55%, color-mix(in srgb, var(--cover-accent, #1db954) 80%, #fff));
  box-shadow:0 0 12px rgba(29,185,84,.45);
}
body[data-theme="spotify"] .cover{
  width:58px;height:58px;min-width:58px;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
body[data-theme="spotify"].memerap-audio-playing .cover,
body[data-theme="spotify"] .cover.is-spinning{
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 0 3px #0a0a0a,
    0 6px 20px rgba(0,0,0,.5);
}
body[data-theme="spotify"].memerap-audio-playing .cover .cover-img,
body[data-theme="spotify"].memerap-audio-playing .cover img,
body[data-theme="spotify"] .cover.is-spinning .cover-img,
body[data-theme="spotify"] .cover.is-spinning img{
  animation:memerapBarVinyl 16s linear infinite;
  border-radius:50%;
  transform-origin:center center;
}
@keyframes memerapBarVinyl{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
body[data-theme="spotify"] .meta-title{
  font-size:.95rem;
  letter-spacing:-.01em;
}
body[data-theme="spotify"] .meta-sub{
  opacity:.92;
}
body[data-theme="spotify"] .memerap-spotify-seek{
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  accent-color:#1ed760;
}
body[data-theme="spotify"] .memerap-spotify-seek:hover{
  height:8px;
  filter:brightness(1.08);
}
body[data-theme="spotify"] .memerap-spotify-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(30,215,96,.28), 0 2px 8px rgba(0,0,0,.4);
  cursor:pointer;
}
body[data-theme="spotify"] .memerap-spotify-seek::-moz-range-thumb{
  width:14px;height:14px;border:0;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(30,215,96,.28);
  cursor:pointer;
}
body[data-theme="spotify"] .icon.memerap-play-btn{
  width:44px;min-width:44px;height:44px;min-height:44px;
  font-size:1.12rem;
  box-shadow:
    0 6px 24px rgba(29,185,84,.48),
    0 0 0 1px rgba(255,255,255,.12) inset;
}
body[data-theme="spotify"] .icon.memerap-play-btn:hover{
  transform:scale(1.08);
  box-shadow:
    0 8px 32px rgba(30,215,96,.55),
    0 0 0 1px rgba(255,255,255,.16) inset;
}
body[data-theme="spotify"] .icon.memerap-play-btn:active{
  transform:scale(.97);
}
body[data-theme="spotify"] .memerap-spotify-transport .icon:not(.memerap-play-btn){
  min-width:38px;min-height:38px;
  border-radius:50%;
}
body[data-theme="spotify"] .memerap-spotify-transport .icon:not(.memerap-play-btn):hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
body[data-theme="spotify"] .memerap-volume-wrap{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
}
body[data-theme="spotify"].memerap-audio-playing .sticky{
  border-top-color:rgba(29,185,84,.22);
}

@media (prefers-reduced-motion: reduce){
  body[data-theme="spotify"].memerap-audio-playing .cover .cover-img,
  body[data-theme="spotify"].memerap-audio-playing .cover img,
  body[data-theme="spotify"] .cover.is-spinning .cover-img,
  body[data-theme="spotify"] .cover.is-spinning img{
    animation:none;
  }
  body[data-theme="spotify"] .sticky{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#181818;
  }
}

/* Mobile: keep glass light; no bar vinyl (small + battery) */
html.memerap-mobile-shell-on body[data-theme="spotify"] .sticky,
body.memerap-mobile-shell-on[data-theme="spotify"] .sticky{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html.memerap-mobile-shell-on body[data-theme="spotify"].memerap-audio-playing .cover .cover-img,
body.memerap-mobile-shell-on[data-theme="spotify"].memerap-audio-playing .cover img{
  animation:none;
}
html.memerap-mobile-shell-on body[data-theme="spotify"].memerap-audio-playing .cover,
body.memerap-mobile-shell-on[data-theme="spotify"] .cover.is-spinning{
  border-radius:8px;
}

/* Plyr sticky chrome — seek/time only; native #memerapPlayBtn stays in transport. */
body.memerap-plyr-on .memerap-spotify-seek-row[hidden]{
  display:none!important;
}
body.memerap-plyr-on #memerapPlayBtn{
  display:inline-flex!important;
  visibility:visible!important;
}
body.memerap-plyr-on .memerap-spotify-player-center{
  gap:8px;
}
body.memerap-plyr-on .plyr{
  width:100%;
  max-width:520px;
  --plyr-color-main:#1db954;
  --plyr-audio-controls-background:transparent;
  --plyr-audio-control-color:#b3b3b3;
  --plyr-audio-control-color-hover:#fff;
  --plyr-range-fill-background:#1db954;
  --plyr-audio-progress-buffered-background:rgba(255,255,255,.18);
  --plyr-range-track-height:5px;
  --plyr-range-thumb-height:12px;
  --plyr-range-thumb-background:#fff;
  --plyr-control-spacing:8px;
  --plyr-control-icon-size:16px;
  --plyr-font-family:inherit;
}
body.memerap-plyr-on .plyr--audio .plyr__controls{
  padding:4px 2px 2px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
body.memerap-plyr-on .plyr--audio .plyr__control:hover{
  background:rgba(255,255,255,.1);
}
body.memerap-plyr-on .plyr--audio .plyr__control.plyr__tab-focus{
  box-shadow:0 0 0 2px rgba(29,185,84,.45);
}
body.memerap-plyr-on .plyr__progress__buffer{
  color:rgba(255,255,255,.2);
}
body.memerap-plyr-on .plyr__time{
  font-size:.68rem;
  color:#a7a7a7;
  font-variant-numeric:tabular-nums;
}
body.memerap-plyr-on .plyr__control--overlaid{
  display:none!important;
}
/* Hide leftover Plyr play/mute if an old instance still has them */
body.memerap-plyr-on .plyr__controls [data-plyr="play"],
body.memerap-plyr-on .plyr__controls [data-plyr="mute"],
body.memerap-plyr-on .plyr__controls [data-plyr="volume"]{
  display:none!important;
}
body.memerap-plyr-on .plyr audio{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.memerap-mobile-shell-on body.memerap-plyr-on .plyr{
  max-width:100%;
}
html.memerap-mobile-shell-on body.memerap-plyr-on .plyr--audio .plyr__controls{
  padding:2px 0;
  border:none;
  background:transparent;
}
/* Plyr owns seek only */
body.memerap-plyr-on .memerap-spotify-seek-row{
  display:none!important;
}

/* Stolen player as MAIN site theme — mapped from APlayer + Plyr + CPlayer feel.
 * Source refs vendored under vendor/steal/ (APlayer.min.css, plyr.css).
 * Selectors remapped onto MemeRap sticky / now dock — vault engine untouched. */

/* === Force premium chrome whenever Spotify shell (site default) is on === */
html.memerap-spotify-layout body,
body.memerap-spotify-on,
body[data-theme="spotify"]{
  --steal-accent: var(--cover-accent, #1db954);
  --steal-bar-h: 2px;
  --steal-thumb: 10px;
}

/* APlayer.aplayer-fixed → sticky bottom bar density + card */
html.memerap-spotify-layout .sticky,
body.memerap-spotify-on .sticky{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 38%, rgba(0,0,0,.28)),
    color-mix(in srgb, #101012 78%, transparent);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 -14px 44px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
}

/* APlayer progress: 2px bar, thumb scales on hover */
html.memerap-spotify-layout .memerap-spotify-seek,
body.memerap-spotify-on .memerap-spotify-seek{
  height:var(--steal-bar-h);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  accent-color:var(--steal-accent);
  transition:height .15s ease;
}
html.memerap-spotify-layout .memerap-spotify-seek:hover,
body.memerap-spotify-on .memerap-spotify-seek:hover{
  height:6px;
}
html.memerap-spotify-layout .memerap-spotify-seek::-webkit-slider-thumb,
body.memerap-spotify-on .memerap-spotify-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:var(--steal-thumb);
  height:var(--steal-thumb);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--steal-accent) 40%, transparent);
  transform:scale(.85);
  transition:transform .15s ease;
}
html.memerap-spotify-layout .memerap-spotify-seek:hover::-webkit-slider-thumb,
body.memerap-spotify-on .memerap-spotify-seek:hover::-webkit-slider-thumb{
  transform:scale(1.15);
}
html.memerap-spotify-layout .memerap-spotify-seek::-moz-range-thumb,
body.memerap-spotify-on .memerap-spotify-seek::-moz-range-thumb{
  width:var(--steal-thumb);
  height:var(--steal-thumb);
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--steal-accent) 40%, transparent);
}

/* APlayer .aplayer-pic play overlay on cover */
html.memerap-spotify-layout .memerap-spotify-player-left .cover,
body.memerap-spotify-on .memerap-spotify-player-left .cover{
  position:relative;
  overflow:hidden;
}
html.memerap-spotify-layout .memerap-spotify-player-left .cover::after,
body.memerap-spotify-on .memerap-spotify-player-left .cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.22);
  opacity:0;
  transition:opacity .12s ease;
  pointer-events:none;
  z-index:2;
}
html.memerap-spotify-layout .memerap-spotify-player-left .cover:hover::after,
body.memerap-spotify-on .memerap-spotify-player-left .cover:hover::after{
  opacity:1;
}

/* APlayer loading pulse on seek while buffering */
html.memerap-spotify-layout body.memerap-audio-loading .memerap-spotify-seek,
body.memerap-spotify-on.memerap-audio-loading .memerap-spotify-seek{
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.28) 40%,
    rgba(255,255,255,.12) 80%
  );
  background-size:200% 100%;
  animation:memerapStealLoad 1s linear infinite;
}
@keyframes memerapStealLoad{
  to{background-position:-200% 0}
}

/* CPlayer immersive: blurred cover behind page + now dock */
html.memerap-spotify-layout body.memerap-has-cover-art::after,
body.memerap-spotify-on.memerap-has-cover-art::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--cover-art-url, none);
  background-size:cover;
  background-position:center;
  filter:blur(56px) saturate(1.5) brightness(.42);
  transform:scale(1.12);
  opacity:.38;
  transition:opacity .8s ease, filter .8s ease;
}
html.memerap-spotify-layout .app-shell,
body.memerap-spotify-on .app-shell{
  position:relative;
  z-index:1;
}

#nowPanel.np-panel--glass{
  isolation:isolate;
}
#nowPanel.np-panel--glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:var(--cover-art-url, none);
  background-size:cover;
  background-position:center;
  filter:blur(42px) saturate(1.45) brightness(.55);
  transform:scale(1.18);
  opacity:.42;
  z-index:0;
  pointer-events:none;
}
#nowPanel.np-panel--glass > *{
  position:relative;
  z-index:1;
}

/* Soft edge fade — light so first/last lines stay readable */
#nowPanel.np-panel--glass .np-lyrics,
#nowPanel .np-lyrics{
  mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
#nowPanel .np-lyrics.np-lyrics--plain{
  mask-image:linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
}

/* Plyr-style seek hover tip */
.memerap-spotify-seek-row{
  position:relative;
}
.memerap-seek-tip{
  position:absolute;
  bottom:calc(100% + 6px);
  left:0;
  transform:translateX(-50%);
  padding:3px 7px;
  border-radius:6px;
  background:#121212;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:.65rem;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  opacity:0;
  z-index:5;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  transition:opacity .12s linear;
  white-space:nowrap;
}
.memerap-spotify-seek-row.is-tipping .memerap-seek-tip{
  opacity:1;
}

/* Playing lift + cover glow (APlayer energy) */
html.memerap-spotify-layout body.memerap-audio-playing .sticky,
body.memerap-spotify-on.memerap-audio-playing .sticky,
body.memerap-plyr-on .sticky{
  box-shadow:
    0 -16px 48px rgba(0,0,0,.52),
    0 0 40px color-mix(in srgb, var(--steal-accent, #1db954) 18%, transparent);
}
html.memerap-spotify-layout .memerap-spotify-player-left .cover,
body.memerap-spotify-on .memerap-spotify-player-left .cover{
  box-shadow:
    0 4px 18px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06);
}
html.memerap-spotify-layout body.memerap-audio-playing .memerap-spotify-player-left .cover,
body.memerap-spotify-on.memerap-audio-playing .memerap-spotify-player-left .cover{
  box-shadow:
    0 6px 22px rgba(0,0,0,.5),
    0 0 24px color-mix(in srgb, var(--steal-accent, #1db954) 35%, transparent);
}

/* APlayer list-cur accent on active track rows */
html.memerap-spotify-layout .track.playing,
html.memerap-spotify-layout .row.playing,
html.memerap-spotify-layout [aria-current="true"].track,
body.memerap-spotify-on .track.playing,
body.memerap-spotify-on .row.playing{
  box-shadow:inset 3px 0 0 var(--steal-accent, #1db954);
}

/* Plyr main color follows cover accent */
body.memerap-plyr-on .plyr{
  --plyr-color-main: var(--cover-accent, #1db954);
  --plyr-range-fill-background: var(--cover-accent, #1db954);
}

/* === CPlayer (src/scss/cplayer.scss) — dark mode + big poster + material shadows === */
/* cp-mainbody box_shadow(1) → sticky */
html.memerap-spotify-layout .sticky,
body.memerap-spotify-on .sticky{
  border-radius:0;
}

/* cp-big poster: full-bleed art on now dock */
#nowPanel.np-panel--glass .np-cover{
  border-radius:10px 10px 0 0;
  overflow:hidden;
}
#nowPanel.np-panel--glass .np-cover.np-cover--vinyl{
  border-radius:50%;
}

/* cp-progress bottom edge strip under sticky meta (when not using Plyr) */
body.memerap-spotify-on:not(.memerap-plyr-on) .memerap-spotify-player-center{
  position:relative;
}

/* cp-lyric fade / zoom — karaoke current line emphasis */
html.memerap-spotify-layout .memerap-lrc-line.is-active,
body.memerap-spotify-on .memerap-lrc-line.is-active,
#nowPanel .memerap-lrc-line.is-active{
  opacity:1;
  transform:scale(1.04);
  transition:opacity .35s ease, transform .35s ease;
}
html.memerap-spotify-layout .memerap-lrc-line,
body.memerap-spotify-on .memerap-lrc-line,
#nowPanel .memerap-lrc-line{
  opacity:.42;
  transition:opacity .35s ease, transform .35s ease;
}

/* CPlayer dark mode palette (#222 body) on sticky meta */
html.memerap-spotify-layout .meta-title,
body.memerap-spotify-on .meta-title{
  color:#fff;
  font-weight:600;
  letter-spacing:-.01em;
}
html.memerap-spotify-layout .meta-sub,
body.memerap-spotify-on .meta-sub{
  color:rgba(255,255,255,.62);
}

/* APlayer notice / CPlayer volume popover feel on volume slider */
html.memerap-spotify-layout .vol,
body.memerap-spotify-on .vol,
html.memerap-spotify-layout input[type="range"].volume,
body.memerap-spotify-on input[type="range"].volume{
  accent-color:var(--steal-accent, #1db954);
}

/* Material elevation on now panel (CPlayer box_shadow level 3) */
#nowPanel.np-panel--glass{
  box-shadow:
    rgba(0,0,0,.19) 0 10px 30px,
    rgba(0,0,0,.23) 0 6px 10px,
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/**
 * Direct steal from APlayer.min.css (DIYgod/APlayer MIT) — selectors remapped to MemeRap.
 * Original classes kept in comments. Source: site-new/vendor/steal/APlayer.min.css
 */
/* .aplayer { … } → sticky player shell */
html.memerap-spotify-layout .sticky .memerap-spotify-player,
body.memerap-spotify-on .memerap-spotify-player{
  position:relative;
}

/* .aplayer-pic */
html.memerap-spotify-layout .memerap-spotify-player-left .cover,
body.memerap-spotify-on .memerap-spotify-player-left .cover{
  float:none;
  height:56px;
  width:56px;
  min-width:56px;
  background-size:cover;
  background-position:50%;
  transition:all .3s ease;
  cursor:pointer;
  border-radius:6px;
}

/* .aplayer-pic .aplayer-button (play overlay) */
html.memerap-spotify-layout .memerap-spotify-player-left .cover .memerap-cover-play,
body.memerap-spotify-on .memerap-spotify-player-left .cover .memerap-cover-play{
  position:absolute;
  border-radius:50%;
  opacity:0;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
  background:rgba(0,0,0,.35);
  transition:all .1s ease;
  z-index:3;
  width:28px;height:28px;
  left:50%;top:50%;
  margin:-14px 0 0 -14px;
  border:2px solid #fff;
  pointer-events:none;
}
html.memerap-spotify-layout .memerap-spotify-player-left .cover:hover .memerap-cover-play,
body.memerap-spotify-on .memerap-spotify-player-left .cover:hover .memerap-cover-play{
  opacity:.9;
}

/* .aplayer-info .aplayer-music */
html.memerap-spotify-layout .memerap-spotify-player-left .meta,
body.memerap-spotify-on .memerap-spotify-player-left .meta{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* .aplayer-author */
html.memerap-spotify-layout .meta-sub,
body.memerap-spotify-on .meta-sub{
  font-size:12px;
}

/* .aplayer-bar (2px) + .aplayer-loaded + .aplayer-played + .aplayer-thumb */
html.memerap-spotify-layout .memerap-spotify-seek-row,
body.memerap-spotify-on .memerap-spotify-seek-row{
  cursor:pointer;
  padding:4px 0;
}

/* .aplayer-time */
html.memerap-spotify-layout .memerap-spotify-time,
body.memerap-spotify-on .memerap-spotify-time,
html.memerap-spotify-layout .memerap-spotify-cur,
html.memerap-spotify-layout .memerap-spotify-end,
body.memerap-spotify-on .memerap-spotify-cur,
body.memerap-spotify-on .memerap-spotify-end{
  color:#999;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

/* .aplayer-list ol li.aplayer-list-light .aplayer-list-cur */
html.memerap-spotify-layout .track.playing::before,
html.memerap-spotify-layout .row.is-playing::before,
body.memerap-spotify-on .track.playing::before{
  content:"";
  position:absolute;
  left:0;top:20%;
  width:3px;height:60%;
  background:var(--cover-accent, #1db954);
  border-radius:0 2px 2px 0;
}
html.memerap-spotify-layout .track.playing,
body.memerap-spotify-on .track.playing{
  position:relative;
}

/* .aplayer-lrc p / .aplayer-lrc-current */
html.memerap-spotify-layout .memerap-lrc-line,
body.memerap-spotify-on .memerap-lrc-line{
  font-size:12px;
  line-height:1.35;
  opacity:.4;
  transition:all .5s ease-out;
}
html.memerap-spotify-layout .memerap-lrc-line.is-active,
html.memerap-spotify-layout .memerap-lrc-line.aplayer-lrc-current,
body.memerap-spotify-on .memerap-lrc-line.is-active{
  opacity:1;
}

/* .aplayer-fixed body */
html.memerap-spotify-layout .sticky,
body.memerap-spotify-on .sticky{
  z-index:99;
}

/* Lift transport off the screen edge — seek/time were flush to bottom */
:root{
  --memerap-player-height:96px;
}
html.memerap-spotify-layout,
body.memerap-spotify-on,
body[data-theme="spotify"]{
  --memerap-player-height:108px;
}
html.memerap-spotify-layout .sticky,
body.memerap-spotify-on .sticky,
body[data-theme="spotify"] .sticky{
  height:var(--memerap-player-height);
  padding:0 16px max(14px, env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
html.memerap-spotify-layout .sticky-inner,
body.memerap-spotify-on .sticky-inner,
body[data-theme="spotify"] .sticky-inner{
  padding:12px 0 4px;
  align-items:center;
}
body.memerap-plyr-on .plyr--audio .plyr__controls{
  padding-bottom:6px;
}
body.memerap-plyr-on .plyr__time{
  margin-bottom:2px;
}

/* Mobile: keep denser but still clear the home indicator */
html.memerap-mobile-shell-on body[data-theme="spotify"],
html.memerap-mobile-shell-on.memerap-spotify-layout{
  --memerap-player-height:78px;
}
html.memerap-mobile-shell-on body[data-theme="spotify"] .sticky,
html.memerap-mobile-shell-on.memerap-spotify-layout .sticky{
  padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
}

/* Mobile gets the steal look too — tuned for mini-player + tab bar (not desktop Plyr). */
@media (max-width: 980px) {
  html.memerap-mobile-shell-on body[data-theme="spotify"] .sticky,
  html.memerap-mobile-shell-on.memerap-spotify-layout .sticky{
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 40%, rgba(0,0,0,.35)),
      color-mix(in srgb, #141414 82%, transparent);
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(16px) saturate(1.3);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    box-shadow:0 -10px 28px rgba(0,0,0,.45);
  }

  /* Bigger APlayer-style thumb for fat fingers */
  html.memerap-mobile-shell-on body[data-theme="spotify"] .memerap-spotify-seek{
    height:4px;
    accent-color:var(--cover-accent, #1db954);
  }
  html.memerap-mobile-shell-on body[data-theme="spotify"] .memerap-spotify-seek::-webkit-slider-thumb{
    width:14px;height:14px;
    background:#fff;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--cover-accent, #1db954) 45%, transparent);
  }

  /* Playing: cover accent glow on mini bar */
  html.memerap-mobile-shell-on body.memerap-audio-playing[data-theme="spotify"] .sticky{
    box-shadow:
      0 -10px 28px rgba(0,0,0,.5),
      0 0 28px color-mix(in srgb, var(--cover-accent, #1db954) 22%, transparent);
  }

  /* Soft cover wash — lighter than desktop (battery) */
  html.memerap-mobile-shell-on body.memerap-has-cover-art::after{
    opacity:.22;
    filter:blur(40px) saturate(1.3) brightness(.45);
  }

  /* Hide desktop Plyr if it ever mounts on phone */
  html.memerap-mobile-shell-on body.memerap-plyr-on .plyr{
    display:none!important;
  }
  html.memerap-mobile-shell-on body.memerap-plyr-on .memerap-spotify-seek-row,
  html.memerap-mobile-shell-on body.memerap-plyr-on #memerapPlayBtn{
    display:revert!important;
  }
  html.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded) body.memerap-plyr-on .memerap-spotify-seek-row,
  html.memerap-mobile-shell-on:not(.memerap-mobile-player-expanded)[data-theme="spotify"] .memerap-spotify-seek-row{
    display:grid!important;
  }

  /* Expanded mobile player: more bottom air */
  html.memerap-mobile-shell-on.memerap-mobile-player-expanded[data-theme="spotify"] .sticky,
  html.memerap-mobile-shell-on body.memerap-mobile-player-expanded[data-theme="spotify"] .sticky{
    padding-bottom:max(12px, env(safe-area-inset-bottom, 0px));
  }
}

/* Steal pass 2 — Kokoro / Video.js / Media Chrome / APlayer floating mapped to MemeRap.
 * Sources under vendor/steal/ (kokoro-extracted.css, video-js.css, APlayer). No engine swap. */

/* === Kokoro: floating now-dock card + cover underlay blur === */
#nowPanel.np-panel--glass{
  border-radius:16px;
  overflow:hidden;
}
#nowPanel.np-panel--glass .np-head{
  position:relative;
}
/* Kokoro .move-handle — grab cue on now dock head */
#nowPanel.np-panel--glass .np-head::before{
  content:"";
  display:block;
  width:44px;
  height:5px;
  margin:2px auto 10px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}
#nowPanel.np-panel--glass .np-cover{
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}

/* Kokoro desktop-lyrics window → karaoke / now lyrics */
#nowPanel .np-lyrics,
#nowPanel .memerap-karaoke,
.memerap-lrc-pane{
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
#nowPanel .memerap-lrc-line.is-active,
.memerap-karaoke .is-active{
  font-weight:700;
  letter-spacing:.01em;
}

/* === Video.js / Media Chrome: buffered + played dual scrub === */
.memerap-spotify-seek-row{
  position:relative;
}
.memerap-seek-buffer{
  position:absolute;
  left:0;right:0;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.memerap-seek-buffer > i{
  display:block;
  height:100%;
  width:var(--memerap-buf, 0%);
  background:rgba(255,255,255,.28);
  border-radius:inherit;
  transition:width .2s linear;
}
.memerap-spotify-seek-row .memerap-spotify-seek,
.memerap-spotify-seek-row .memerap-spotify-time{
  position:relative;
  z-index:1;
}
/* Media Chrome / Plyr: thicker scrub hit area on hover */
body.memerap-plyr-on .plyr__progress input[type=range],
html.memerap-spotify-layout .memerap-spotify-seek{
  cursor:pointer;
}

/* Video.js big-play energy on sticky play */
html.memerap-spotify-layout .icon.memerap-play-btn,
body.memerap-spotify-on .icon.memerap-play-btn,
body.memerap-plyr-on .plyr__control[data-plyr=play]{
  border-radius:50%;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
html.memerap-spotify-layout .icon.memerap-play-btn:hover,
body.memerap-spotify-on .icon.memerap-play-btn:hover,
body.memerap-plyr-on .plyr__control[data-plyr=play]:hover{
  transform:scale(1.06);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cover-accent, #1db954) 28%, transparent);
}

/* === APlayer fixed floating mini energy on empty → playing === */
html.memerap-spotify-layout body.memerap-audio-playing .sticky .meta-title,
body.memerap-spotify-on.memerap-audio-playing .meta-title{
  animation:memerapTitleIn .35s ease;
}
@keyframes memerapTitleIn{
  from{opacity:.4; transform:translateY(3px)}
  to{opacity:1; transform:none}
}

/* Kokoro/mobile-first: bigger transport hits on touch */
@media (pointer: coarse){
  html.memerap-spotify-layout .memerap-spotify-transport .icon,
  body.memerap-spotify-on .memerap-spotify-transport .icon{
    min-width:44px;
    min-height:44px;
  }
}

/* Video.js load shimmer while buffering (pairs with body.memerap-audio-loading) */
body.memerap-audio-loading .memerap-seek-buffer > i{
  background:linear-gradient(90deg,
    rgba(255,255,255,.2),
    rgba(255,255,255,.45),
    rgba(255,255,255,.2));
  background-size:200% 100%;
  animation:memerapStealLoad 1s linear infinite;
  width:100%;
}

/* APlayer float mini + vertical volume + slim bar wave + EQ panel */
/* === Floating mini (APlayer fixed) — bottom-right disc, expands on hover === */
.memerap-float-mini{
  position:fixed;
  right:18px;
  left:auto;
  bottom:calc(var(--memerap-player-height, 108px) + 18px);
  z-index:80;
  display:flex;
  align-items:stretch;
  gap:0;
  width:66px;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  background:rgba(18,18,18,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  color:#fff;
  transition:width .22s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.memerap-float-mini[hidden]{display:none!important}
.memerap-float-mini:hover,
.memerap-float-mini:focus-within{
  width:min(300px, calc(100vw - 36px));
}
.memerap-float-mini-pic{
  position:relative;
  width:66px;height:66px;min-width:66px;
  border:0;padding:0;border-radius:0;
  background:#1a1a1a;cursor:pointer;
  flex-shrink:0;
}
.memerap-float-mini-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.memerap-float-mini-ph{
  display:block;width:100%;height:100%;
  background:
    radial-gradient(circle at 35% 30%, #3a3a3a, #111 70%);
}
.memerap-float-mini-ph[hidden]{display:none}
.memerap-float-mini-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.9);
  color:#fff;font-size:10px;line-height:24px;text-align:center;
  opacity:0;transition:opacity .12s ease;
  pointer-events:none;
}
.memerap-float-mini-pic:hover .memerap-float-mini-play,
.memerap-float-mini.is-playing .memerap-float-mini-play{
  opacity:.95;
}
.memerap-float-mini.is-playing .memerap-float-mini-img{
  animation:memerapFloatSpin 14s linear infinite;
  border-radius:50%;
}
@keyframes memerapFloatSpin{
  to{transform:rotate(360deg)}
}
.memerap-float-mini.is-playing .memerap-float-mini-pic{
  border-radius:50%;
  overflow:hidden;
}
.memerap-float-mini:hover.is-playing .memerap-float-mini-pic,
.memerap-float-mini:focus-within.is-playing .memerap-float-mini-pic{
  border-radius:0;
}
.memerap-float-mini:hover.is-playing .memerap-float-mini-img,
.memerap-float-mini:focus-within.is-playing .memerap-float-mini-img{
  animation:none;
  border-radius:0;
  transform:none;
}
.memerap-float-mini-panel{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
  padding:8px 10px 8px 0;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.memerap-float-mini:hover .memerap-float-mini-panel,
.memerap-float-mini:focus-within .memerap-float-mini-panel{
  opacity:1;
  pointer-events:auto;
}
.memerap-float-mini-meta{min-width:0;flex:1}
.memerap-float-mini-title{
  font-size:.78rem;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memerap-float-mini-sub{
  font-size:.65rem;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memerap-float-mini-bar{
  margin-top:6px;height:3px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;
}
.memerap-float-mini-bar > i{
  display:block;height:100%;width:0;
  background:var(--cover-accent, #1db954);
}
.memerap-float-mini-ctrls{display:flex;gap:2px;flex-shrink:0}
.memerap-float-mini-btn{
  width:28px;height:28px;border:0;border-radius:8px;
  background:transparent;color:#ccc;cursor:pointer;font-size:.8rem;
}
.memerap-float-mini-btn:hover{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:980px){
  .memerap-float-mini{display:none!important}
}
@media (prefers-reduced-motion: reduce){
  .memerap-float-mini.is-playing .memerap-float-mini-img{animation:none}
}

/* Desktop player chrome modes (Settings → Desktop player) */
html.memerap-player-chrome-bar .memerap-float-mini,
body.memerap-player-chrome-bar .memerap-float-mini{
  display:none!important;
}
html.memerap-player-chrome-mini .sticky,
body.memerap-player-chrome-mini .sticky{
  /* Keep audio graph in DOM; hide the bar chrome */
  transform:translateY(110%);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
html.memerap-player-chrome-mini .memerap-float-mini,
body.memerap-player-chrome-mini .memerap-float-mini{
  bottom:18px;
  width:min(320px, calc(100vw - 36px));
}
html.memerap-player-chrome-mini .memerap-float-mini .memerap-float-mini-panel,
body.memerap-player-chrome-mini .memerap-float-mini .memerap-float-mini-panel{
  opacity:1;
  pointer-events:auto;
}
html.memerap-player-chrome-mini .wrap,
body.memerap-player-chrome-mini .wrap{
  padding-bottom:24px!important;
}
html.memerap-player-chrome-mini .memerap-eq-panel,
body.memerap-player-chrome-mini .memerap-eq-panel{
  bottom:calc(90px + 16px);
}
/* Expanded mini when chosen as sole chrome */
.memerap-float-mini.is-expanded{
  width:min(320px, calc(100vw - 36px));
}
.memerap-float-mini.is-expanded .memerap-float-mini-panel{
  opacity:1;
  pointer-events:auto;
}
.memerap-float-mini.is-expanded.is-playing .memerap-float-mini-img{
  animation:none;
  border-radius:0;
}
.memerap-float-mini.is-expanded.is-playing .memerap-float-mini-pic{
  border-radius:0;
}

/* Hide vinyl Now Playing side panel when opted out */
html.memerap-now-dock-off #nowPanel,
body.memerap-now-dock-off #nowPanel{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.memerap-now-dock-off.memerap-now-dock-open,
body.memerap-now-dock-off.memerap-now-dock-open{
  /* no layout shift from dock */
}


/* === APlayer vertical volume popover (desktop hover) === */
@media (hover:hover) and (pointer:fine){
  .memerap-volume-wrap{
    position:relative;
  }
  .memerap-volume-wrap .memerap-vol-range{
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    width:5px;
    height:0;
    margin:0;
    padding:0;
    writing-mode:vertical-lr;
    direction:rtl;
    opacity:0;
    pointer-events:none;
    transition:height .15s ease, opacity .15s ease;
    accent-color:var(--cover-accent, #1db954);
    z-index:6;
    background:rgba(255,255,255,.2);
    border-radius:999px;
  }
  .memerap-volume-wrap:hover .memerap-vol-range,
  .memerap-volume-wrap:focus-within .memerap-vol-range{
    height:72px;
    opacity:1;
    pointer-events:auto;
  }
  /* Keep a tiny horizontal hint when popover closed — hide native track footprint */
  body[data-theme="spotify"] .memerap-volume-wrap .memerap-vol-range{
    /* vertical popover replaces sticky horizontal on desktop spotify */
  }
}

/* === Slim waveform on sticky seek === */
.memerap-spotify-seek-row.memerap-seek-row--wave{
  min-height:28px;
  align-items:center;
}
.memerap-spotify-seek-row .memerap-waveform-layer{
  position:absolute;
  left:48px;right:48px;
  top:2px;bottom:2px;
  pointer-events:none;
  z-index:0;
  opacity:.9;
}
.memerap-spotify-seek-row .memerap-waveform-canvas{
  width:100%;height:100%;
  display:block;
}
.memerap-spotify-seek-row.memerap-seek-row--wave .memerap-spotify-seek{
  position:relative;z-index:2;
  background:transparent;
}
.memerap-spotify-seek-row.memerap-seek-row--wave .memerap-seek-buffer{
  z-index:1;opacity:.5;
}
body.memerap-plyr-on .memerap-spotify-seek-row.memerap-seek-row--wave{
  /* Plyr owns seek on desktop — keep wave hidden under plyr */
  display:none!important;
}

/* === EQ panel === */
.memerap-eq-btn{
  font-size:.65rem!important;
  font-weight:700;
  letter-spacing:.04em;
  min-width:32px;
}
.memerap-eq-panel{
  position:fixed;
  right:16px;
  bottom:calc(var(--memerap-player-height, 108px) + 16px);
  z-index:90;
  width:220px;
  padding:12px 14px;
  border-radius:12px;
  background:#161616;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  color:#eee;
}
.memerap-eq-panel[hidden]{display:none!important}
.memerap-eq-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;font-size:.85rem;
}
.memerap-eq-close{
  border:0;background:transparent;color:#aaa;cursor:pointer;font-size:1rem;
}
.memerap-eq-row{
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:8px;
  margin:8px 0;
  font-size:.72rem;
  color:#bbb;
}
.memerap-eq-row input[type=range]{
  width:100%;
  accent-color:var(--cover-accent, #1db954);
}
.memerap-eq-reset{
  width:100%;
  margin-top:8px;
  border:0;border-radius:8px;
  padding:8px;
  background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;font-size:.75rem;
}
.memerap-eq-reset:hover{background:rgba(255,255,255,.14)}

/* Video popout polish (native <video controls>) — Plyr wrap disabled (broke layout).
 * Big-play / spinner live in 35-more-steal.css + memerap-video-steal.js */

.video-wrap.video-wrap--popout .video-box{
  background:#000;
  position:relative;
}
.video-wrap.video-wrap--popout video{
  border:0;
}
/* Hide any leftover Plyr shells from older deploys */
#memerapVideoHost .plyr,
.video-wrap--popout .plyr{
  width:100%!important;
  max-width:100%!important;
  position:relative!important;
  inset:auto!important;
}
body.memerap-video-plyr-on .video-wrap--popout .plyr__controls{
  display:none!important;
}

/* Steal pass 3 — Video.js MV overlay, Media Chrome buffered polish, cPlayer queue sheet,
 * Plyr/APlayer center transport + dual scrub (the circled bar). */

/* === Center bar: Plyr glass + APlayer scrub (main steal) === */
html.memerap-spotify-layout .memerap-spotify-player-center,
body[data-theme="spotify"] .memerap-spotify-player-center{
  gap:10px!important;
  width:min(560px,42vw)!important;
  max-width:100%!important;
  margin:0!important;
}
html.memerap-spotify-layout .memerap-spotify-transport,
body[data-theme="spotify"] .memerap-spotify-transport{
  gap:14px!important;
}
html.memerap-spotify-layout .memerap-spotify-transport .icon:not(.memerap-play-btn),
body[data-theme="spotify"] .memerap-spotify-transport .icon:not(.memerap-play-btn){
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  font-size:1.05rem!important;
  color:rgba(255,255,255,.78)!important;
  border-radius:50%!important;
  transition:color .12s ease, background .12s ease, transform .12s ease;
}
html.memerap-spotify-layout .memerap-spotify-transport .icon:not(.memerap-play-btn):hover,
body[data-theme="spotify"] .memerap-spotify-transport .icon:not(.memerap-play-btn):hover{
  color:#fff!important;
  background:rgba(255,255,255,.1)!important;
  transform:scale(1.06);
}
html.memerap-spotify-layout .icon.memerap-play-btn,
body[data-theme="spotify"] .icon.memerap-play-btn{
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  font-size:1.15rem!important;
  background:var(--cover-accent, #1db954)!important;
  color:#0a0a0a!important;
  box-shadow:
    0 6px 22px color-mix(in srgb, var(--cover-accent, #1db954) 45%, transparent),
    0 0 0 1px rgba(255,255,255,.12) inset!important;
}
html.memerap-spotify-layout .icon.memerap-play-btn:hover,
body[data-theme="spotify"] .icon.memerap-play-btn:hover{
  transform:scale(1.08)!important;
  filter:brightness(1.06);
}

/* Seek row as Plyr progress strip */
html.memerap-spotify-layout .memerap-spotify-seek-row,
body[data-theme="spotify"] .memerap-spotify-seek-row{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  max-width:560px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  position:relative;
  box-sizing:border-box;
}
html.memerap-spotify-layout .memerap-spotify-time,
body[data-theme="spotify"] .memerap-spotify-time{
  font-size:.72rem!important;
  font-weight:650!important;
  letter-spacing:.02em;
  color:rgba(255,255,255,.72)!important;
  font-variant-numeric:tabular-nums!important;
  text-align:center!important;
  min-width:0;
  position:relative;
  z-index:3;
}
/* Track shell — green fill stays here, never under timestamps */
html.memerap-spotify-layout .memerap-seek-track,
body[data-theme="spotify"] .memerap-seek-track{
  position:relative!important;
  min-width:0;
  width:100%;
  height:18px;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
  border-radius:999px;
}
html.memerap-spotify-layout .memerap-seek-track .memerap-seek-buffer,
body[data-theme="spotify"] .memerap-seek-track .memerap-seek-buffer{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  height:6px!important;
  transform:translateY(-50%)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.14)!important;
  z-index:0!important;
  overflow:hidden;
  pointer-events:none;
}
/* Kill legacy row-level buffer (pre-wrap) so it can't bleed under times */
html.memerap-spotify-layout .memerap-spotify-seek-row > .memerap-seek-buffer,
body[data-theme="spotify"] .memerap-spotify-seek-row > .memerap-seek-buffer{
  display:none!important;
}
html.memerap-spotify-layout .memerap-seek-track .memerap-seek-buffer > i,
body[data-theme="spotify"] .memerap-seek-track .memerap-seek-buffer > i{
  position:relative;
  display:block;
  width:100%!important;
  height:100%;
  max-width:none!important;
  background:transparent!important;
}
html.memerap-spotify-layout .memerap-seek-track .memerap-seek-buffer > i::before,
body[data-theme="spotify"] .memerap-seek-track .memerap-seek-buffer > i::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:var(--memerap-buf, 0%);
  background:rgba(255,255,255,.28);
  border-radius:inherit;
}
html.memerap-spotify-layout .memerap-seek-track .memerap-seek-buffer > i::after,
body[data-theme="spotify"] .memerap-seek-track .memerap-seek-buffer > i::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:var(--memerap-seek-played, 0%);
  max-width:100%;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--cover-accent, #1db954) 80%, #fff),
    var(--cover-accent, #1db954));
  border-radius:inherit;
}
html.memerap-spotify-layout .memerap-spotify-seek,
body[data-theme="spotify"] .memerap-spotify-seek{
  position:relative;
  z-index:2;
  width:100%!important;
  height:18px!important;
  margin:0!important;
  background:transparent!important;
  accent-color:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
html.memerap-spotify-layout .memerap-spotify-seek::-webkit-slider-runnable-track,
body[data-theme="spotify"] .memerap-spotify-seek::-webkit-slider-runnable-track{
  height:6px;
  background:transparent;
  border-radius:999px;
}
html.memerap-spotify-layout .memerap-spotify-seek::-moz-range-track,
body[data-theme="spotify"] .memerap-spotify-seek::-moz-range-track{
  height:6px;
  background:transparent;
  border:0;
  border-radius:999px;
}
html.memerap-spotify-layout .memerap-spotify-seek::-webkit-slider-thumb,
body[data-theme="spotify"] .memerap-spotify-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-4px;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cover-accent, #1db954) 55%, transparent),
    0 4px 12px rgba(0,0,0,.45);
  transform:scale(.92);
  transition:transform .12s ease;
}
html.memerap-spotify-layout .memerap-spotify-seek:hover::-webkit-slider-thumb,
body[data-theme="spotify"] .memerap-spotify-seek:hover::-webkit-slider-thumb,
html.memerap-spotify-layout .memerap-spotify-seek:active::-webkit-slider-thumb,
body[data-theme="spotify"] .memerap-spotify-seek:active::-webkit-slider-thumb{
  transform:scale(1.15);
}
html.memerap-spotify-layout .memerap-spotify-seek::-moz-range-thumb,
body[data-theme="spotify"] .memerap-spotify-seek::-moz-range-thumb{
  width:14px;
  height:14px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cover-accent, #1db954) 55%, transparent),
    0 4px 12px rgba(0,0,0,.45);
}
/* Hide skinny top hairline when we have a real scrub */
html.memerap-spotify-layout .sticky::before,
body[data-theme="spotify"] .sticky::before{
  opacity:.35;
}

/* === Video.js: big-play + loading spinner on MV popout === */
.video-wrap--popout .video-box{
  position:relative;
}
.memerap-vjs-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:transparent;
  transition:background .2s ease;
}
.memerap-vjs-overlay.is-paused:not(.is-loading){
  background:rgba(0,0,0,.28);
  pointer-events:auto;
  cursor:pointer;
}
.memerap-vjs-overlay.is-loading{
  background:rgba(0,0,0,.35);
  pointer-events:none;
}
.memerap-vjs-bigplay{
  width:64px;
  height:64px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.92);
  background:rgba(20,24,32,.72);
  color:#fff;
  font-size:22px;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 0 0 3px;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.memerap-vjs-overlay.is-paused:not(.is-loading) .memerap-vjs-bigplay{
  display:inline-flex;
}
.memerap-vjs-bigplay:hover{
  transform:scale(1.06);
  background:rgba(30,215,96,.88);
  border-color:#fff;
  box-shadow:0 12px 32px rgba(30,215,96,.35);
}
.memerap-vjs-spinner{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff;
  display:none;
  animation:memerapVjsSpin .7s linear infinite;
}
.memerap-vjs-overlay.is-loading .memerap-vjs-spinner{
  display:block;
}
.memerap-vjs-overlay.is-loading .memerap-vjs-bigplay{
  display:none!important;
}
@keyframes memerapVjsSpin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
  .memerap-vjs-spinner{animation:none;border-top-color:rgba(255,255,255,.7)}
  .memerap-vjs-bigplay{transition:none}
}

/* === Media Chrome: clearer dual scrub (buffer under played) === */
.memerap-spotify-seek-row .memerap-seek-buffer{
  height:5px;
  background:rgba(255,255,255,.1);
}
.memerap-spotify-seek-row .memerap-seek-buffer > i{
  background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.38));
}
body.memerap-media-loading .memerap-seek-track::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(30,215,96,.7), transparent);
  background-size:40% 100%;
  background-repeat:no-repeat;
  animation:memerapSeekPulse 1.1s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
  opacity:.85;
}
@keyframes memerapSeekPulse{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}
@media (prefers-reduced-motion:reduce){
  body.memerap-media-loading .memerap-seek-track::after{animation:none;opacity:.4}
}

/* === cPlayer: queue drawer as glass sheet + mobile bottom sheet === */
.queue-drawer{
  background:
    linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 35%, rgba(0,0,0,.25)),
    rgba(14,14,16,.96)!important;
  border-left:1px solid rgba(255,255,255,.12)!important;
  box-shadow:
    -18px 0 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  padding-top:8px!important;
}
.queue-drawer .queue-head{
  position:relative;
  padding-top:14px;
}
.queue-drawer .queue-head::before{
  content:"";
  position:absolute;
  top:2px;
  left:50%;
  transform:translateX(-50%);
  width:42px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}
.queue-drawer .q-item{
  min-height:58px;
  border-radius:12px!important;
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.04)!important;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.queue-drawer .q-item:hover{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.queue-drawer .q-item.active{
  border-color:color-mix(in srgb, var(--accent, #1ed760) 65%, #444)!important;
  background:color-mix(in srgb, var(--accent, #1ed760) 16%, #121212)!important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent, #1ed760) 35%, transparent);
}
.queue-drawer .q-item:active{
  transform:scale(.985);
}

@media (max-width:700px){
  .queue-drawer{
    top:auto!important;
    right:0!important;
    left:0!important;
    bottom:0!important;
    width:100%!important;
    height:min(72vh, 640px)!important;
    max-height:72vh;
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
    border-radius:18px 18px 0 0;
    transform:translateY(110%);
    transition:transform .28s cubic-bezier(.22,1,.36,1)!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))!important;
  }
  .queue-drawer.show{
    transform:translateY(0)!important;
    right:0!important;
  }
  .queue-drawer .queue-list{
    max-height:calc(72vh - 88px)!important;
  }
}

/* LRC editor + loudness + karaoke word polish + full-bleed now playing */

.memerap-lrc-editor{
  position:fixed;inset:0;z-index:13050;display:flex;align-items:center;justify-content:center;
}
.memerap-lrc-editor.hidden{display:none!important}
.memerap-lrc-editor-bg{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.memerap-lrc-editor-card{
  position:relative;z-index:1;width:min(920px,94vw);height:min(78vh,720px);
  display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 14px;border-radius:16px;
  border:1px solid #2a2a2a;background:#121212;color:#eee;
  box-shadow:0 24px 64px rgba(0,0,0,.55);
}
.memerap-lrc-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.memerap-lrc-editor-head strong{font-size:1.05rem}
.memerap-lrc-editor-sub{margin:4px 0 0;font-size:.78rem;color:#9a9a9a}
.memerap-lrc-editor-x{
  border:0;background:#1a1a1a;color:#fff;width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1.2rem;
}
.memerap-lrc-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.memerap-lrc-editor-hint{font-size:.72rem;color:#888}
.memerap-lrc-editor-clock{
  font:12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#bdbdbd;padding:4px 8px;border-radius:8px;background:#1a1a1a;
}
.memerap-lrc-editor-dirty{font-size:.72rem;color:#f0c14b}
.memerap-lrc-editor-spacer{flex:1}
.memerap-lrc-editor-list{
  flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  border:1px solid #2f2f2f;border-radius:12px;background:#0a0a0a;
}
.memerap-lrc-empty{padding:24px;color:#888;text-align:center}
.memerap-lrc-row{
  display:grid;grid-template-columns:76px 1fr auto auto;gap:8px;align-items:center;
  padding:8px 10px;border-bottom:1px solid #1c1c1c;cursor:pointer;
}
.memerap-lrc-row:hover{background:rgba(255,255,255,.03)}
.memerap-lrc-row.is-cursor{background:rgba(29,185,84,.12);outline:1px solid rgba(29,185,84,.28)}
.memerap-lrc-row.is-untimed .memerap-lrc-time{opacity:.55}
.memerap-lrc-time{
  border:0;background:#1a1a1a;color:#9fefb0;border-radius:8px;padding:5px 6px;
  font:11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer;
}
.memerap-lrc-text{
  font-size:.92rem;line-height:1.35;color:#ddd;min-width:0;
  width:100%;box-sizing:border-box;border:0;background:transparent;
  padding:4px 6px;border-radius:6px;outline:none;caret-color:#1db954;
}
.memerap-lrc-text:hover{background:rgba(255,255,255,.04)}
.memerap-lrc-text:focus{background:rgba(29,185,84,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(29,185,84,.35)}
.memerap-lrc-row.is-live .memerap-lrc-text{color:#fff;font-weight:650}
.memerap-lrc-mini{
  border:0;background:transparent;color:#777;width:28px;height:28px;border-radius:8px;cursor:pointer;
}
.memerap-lrc-mini:hover{background:#1a1a1a;color:#eee}
.memerap-lrc-editor-body{
  flex:1;min-height:0;width:100%;resize:none;box-sizing:border-box;
  border:1px solid #2f2f2f;border-radius:12px;padding:12px 14px;
  background:#0a0a0a;color:#e8e8e8;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.memerap-lrc-editor-body.hidden,.memerap-lrc-editor-list.hidden{display:none!important}
.memerap-lrc-editor-body:focus{outline:none;border-color:#3d3d3d}
.memerap-lrc-editor-foot{display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap}

/* Word karaoke — clearer singing word */
.np-lyrics--wipe .lyrics-line--words .lyric-word{
  margin:0 .04em;
  padding:0 .02em;
  border-radius:2px;
  transition:filter .08s linear;
}
.np-lyrics--wipe .lyrics-line--words .lyric-word.is-singing{
  font-weight:850;
  filter:brightness(1.12);
}
.np-lyrics--wipe .lyrics-line--words .lyric-word.is-sung{
  opacity:.95;
}
body[data-theme="spotify"] .np-lyrics--wipe .lyrics-line--words .lyric-word.is-singing{
  filter:brightness(1.18);
}

/* Full-bleed Now Playing — cover as atmosphere, lyrics front */
@keyframes memerapNpCoverDrift{
  0%{transform:scale(1.02) rotate(0deg)}
  50%{transform:scale(1.08) rotate(1.2deg)}
  100%{transform:scale(1.02) rotate(0deg)}
}
#bigModal:not(.hidden) .modal-card.memerap-fs-card{
  width:min(96vw,980px);
  max-height:min(94vh,920px);
  background:
    linear-gradient(180deg, rgba(8,8,8,.52) 0%, rgba(8,8,8,.78) 38%, rgba(8,8,8,.94) 100%),
    var(--cover-art-url, none) center/cover no-repeat,
    #0b0b0b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  overflow:hidden;
}
#bigModal:not(.hidden) .big-cover{
  width:min(42vw,280px);
  border:0;
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  background:#111;
}
#bigModal:not(.hidden) .big-cover img{
  animation:memerapNpCoverDrift 28s ease-in-out infinite;
  will-change:transform;
}
#bigModal:not(.hidden) .memerap-fs-lyrics{
  max-height:min(48vh,420px);
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
}
#bigModal:not(.hidden) .memerap-fs-lyrics.np-lyrics--wipe .lyrics-line--active{
  font-size:clamp(1.05rem, 2.2vw, 1.38rem);
  letter-spacing:-.01em;
}
@media (max-width:720px){
  #bigModal:not(.hidden) .modal-card.memerap-fs-card{
    width:100vw;max-height:100vh;border-radius:0;border:0;
  }
  #bigModal:not(.hidden) .big-cover{width:min(58vw,220px)}
  #bigModal:not(.hidden) .memerap-fs-lyrics{max-height:min(42vh,360px)}
  .memerap-lrc-editor-card{height:min(92vh,100%);width:100vw;border-radius:0}
}
@media (prefers-reduced-motion: reduce){
  #bigModal:not(.hidden) .big-cover img{animation:none}
}