/* Local index stage: shared chrome, chart internals and player retain their owners. */
section#main.watermelon-home {
  --wm-field-width:1160px;
  --wm-field-gutter:32px;
  --wm-index-white:#f5f5f5;
  --wm-index-muted:#aaa;
  --wm-index-black:#050505;
  --wm-index-yellow:#d6b24a;
  --wm-index-red:#ef3340;
}
section#main #wm-beat-field { width:min(var(--wm-field-width),calc(100% - var(--wm-field-gutter))); margin:0 auto; position:relative; color:var(--wm-index-white); }
/* An open search palette must paint above the following radio/chart section. */
section#main #wm-beat-field:has(.wm-search-palette.is-open) { z-index:2; }
section#main #wm-beat-field *, section#main #wm-beat-field *::before, section#main #wm-beat-field *::after { box-sizing:border-box; }
section#main #wm-beat-field .wm-field-inner { width:100%; max-width:none; padding:0; margin:0; }
section#main.watermelon-home > .chart > #chart.wm-home-chart-grid { width:min(var(--wm-field-width),calc(100% - var(--wm-field-gutter))); margin:0 auto; }
#wm-beat-field .wm-field-hero { position:relative; min-height:500px; isolation:isolate; }
/* Use the routed production backdrop from home-index-base.css without extra lighting. */
#wm-beat-field .wm-field-hero::before { content:none; }
#wm-beat-field .wm-field-search { pointer-events:none; position:relative; z-index:auto; width:min(680px,60%); margin:0 auto; padding-top:210px; background:none; overflow:visible; }
#wm-beat-field .wm-search-palette { pointer-events:auto; position:relative; z-index:40; width:100%; margin:0; }
#wm-beat-field #mainSearchFrm { --wm-discover-angle:0deg; position:relative; display:flex; align-items:center; gap:8px; width:min(520px,100%); height:52px; margin:0 auto; padding:0 9px 0 20px; border:1px solid rgba(255,255,255,.32); border-radius:28px; background:rgba(0,0,0,.9); box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025); }
#wm-beat-field #mainSearchFrm::before { content:""; width:16px; height:16px; flex:0 0 16px; border:2px solid var(--wm-index-white); border-radius:50%; position:relative; }
#wm-beat-field #mainSearchFrm::after { content:""; width:7px; height:2px; background:var(--wm-index-white); position:absolute; left:34px; top:calc(50% + 7px); transform:rotate(45deg); }
#wm-beat-field .wm-search-palette__field { position:relative; flex:1; min-width:0; height:100%; margin:0; }
#wm-beat-field #mainSearchKeyword { position:relative; width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--wm-index-white); padding:0 8px; font:inherit; font-size:14px; z-index:1; }
#wm-beat-field .wm-search-palette__hint { position:absolute; inset:0 8px; display:flex; align-items:center; pointer-events:none; color:var(--wm-index-muted); font-size:14px; font-weight:400; white-space:nowrap; overflow:hidden; opacity:1; transition:opacity .18s ease; }
#wm-beat-field .wm-search-palette.is-open .wm-search-palette__hint,
#wm-beat-field .wm-search-palette__field.is-focused .wm-search-palette__hint { opacity:.4; }
#wm-beat-field .wm-search-palette__field.has-value .wm-search-palette__hint, #wm-beat-field .is-editing .wm-search-palette__hint { display:none; }
#wm-beat-field .wm-search-palette__submit { position:relative; z-index:0; display:flex; align-items:center; justify-content:center; flex:none; min-width:88px; height:34px; margin:0; padding:0 12px; background:transparent; color:var(--wm-index-white); border:0; border-left:1px solid #333; border-radius:0; font:inherit; font-size:13px; font-weight:500; box-shadow:none; cursor:pointer; transition:color .18s ease; }
#wm-beat-field .wm-search-palette__submit::before { content:none; }
#wm-beat-field .wm-search-palette__submit:focus-visible { color:#fff; outline:none; }
/* Let the red light travel around the search rim without adding a button face. */
@property --wm-discover-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes wm-discover-red-orbit { to { --wm-discover-angle:360deg; } }
#wm-beat-field #mainSearchFrm:has(.wm-search-palette__submit:focus-visible) {
  border-color:transparent;
  background:linear-gradient(#020202,#020202) padding-box,conic-gradient(from var(--wm-discover-angle),#3b0b10 0deg,var(--wm-index-red) 80deg,#ff9da6 110deg,var(--wm-index-red) 140deg,#67121d 190deg,#33090d 270deg,#3b0b10 360deg) border-box;
  box-shadow:0 0 8px #ef334047,0 0 20px #ef33401f,0 8px 24px #0005;
  outline:none;
  animation:wm-discover-red-orbit 4s linear infinite;
}
@media (hover:hover) and (pointer:fine) {
  #wm-beat-field .wm-search-palette__submit:hover { color:#fff; }
  #wm-beat-field #mainSearchFrm:has(.wm-search-palette__submit:hover) {
    border-color:transparent;
    background:linear-gradient(#020202,#020202) padding-box,conic-gradient(from var(--wm-discover-angle),#3b0b10 0deg,var(--wm-index-red) 80deg,#ff9da6 110deg,var(--wm-index-red) 140deg,#67121d 190deg,#33090d 270deg,#3b0b10 360deg) border-box;
    box-shadow:0 0 8px #ef334047,0 0 20px #ef33401f,0 8px 24px #0005;
    outline:none;
    animation:wm-discover-red-orbit 4s linear infinite;
  }
}
#wm-beat-field :where(.wm-search-palette.is-open) #mainSearchFrm,
#wm-beat-field #mainSearchFrm:focus-within { border-color:var(--wm-index-yellow); outline:none; outline-offset:0; }
#wm-beat-field .wm-search-palette__selection { display:flex; align-items:center; gap:6px; justify-content:flex-start; flex-wrap:wrap; width:min(520px,100%); margin:0 auto; padding:9px 0; color:var(--wm-index-white); }
#wm-beat-field .wm-search-palette__selection-list { display:contents; }
#wm-beat-field .wm-search-palette__selection-chip { display:inline-flex; align-items:center; min-width:0; max-width:100%; gap:5px; font-size:12px; padding:4px 8px; border:1px solid #555; border-radius:20px; background:#0d0d0d; }
#wm-beat-field .wm-search-palette__selection-chip-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wm-beat-field .wm-search-palette__selection-chip-remove { flex:0 0 24px; width:24px; height:24px; border:0; background:transparent; color:var(--wm-index-white); cursor:pointer; font-size:0; }
#wm-beat-field .wm-search-palette__selection-chip-remove::after { content:"×"; font-size:18px; }
#wm-beat-field .wm-search-palette__selection-clear { display:inline-flex; flex:0 0 34px; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid #444; border-radius:50%; color:var(--wm-index-muted); background:#0d0d0d; cursor:pointer; transition:color .18s ease,border-color .18s ease; }
#wm-beat-field .wm-search-palette__selection-clear:hover,
#wm-beat-field .wm-search-palette__selection-clear:focus-visible { color:var(--wm-index-yellow); border-color:var(--wm-index-yellow); }
#wm-beat-field .wm-search-palette__panel { display:none; position:absolute; z-index:40; top:calc(100% + 12px); left:0; width:100%; max-height:min(65vh,520px); overflow:auto; padding:20px; background:linear-gradient(155deg,#111 0%,#080808 52%,#030303 100%); border:1px solid #292929; border-radius:18px; box-shadow:0 24px 64px #0009; }
#wm-beat-field .wm-search-palette.is-open .wm-search-palette__panel { display:block; }
#wm-beat-field .wm-search-palette__status, #wm-beat-field .wm-search-palette__empty { font-size:13px; color:#aaa; line-height:1.7; margin:0 0 12px; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__status { margin-bottom:7px; color:#a4a6aa; line-height:1.5; }
#wm-beat-field #wm-search-palette-panel:has(.wm-search-palette__results:empty) .wm-search-palette__status { margin-bottom:0; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__results { display:grid; gap:22px; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__section-title { margin:0; padding:0; border:0; background:none; color:#d7d9dc; font-family:inherit; font-size:13px; font-weight:600; line-height:1.4; letter-spacing:normal; text-transform:none; }
#wm-beat-field #wm-search-palette-panel [data-palette-section="trending"] > .wm-search-palette__section-head > .wm-search-palette__section-title { display:inline-flex; align-items:center; gap:8px; }
#wm-beat-field #wm-search-palette-panel [data-palette-section="trending"] > .wm-search-palette__section-head > .wm-search-palette__section-title::before { content:""; flex:none; width:5px; height:5px; border-radius:50%; background:#c7b475; pointer-events:none; }
/* Divide the two existing groups inside their gap, without adding flow height. */
#wm-beat-field #wm-search-palette-panel [data-palette-section="artists"] + [data-palette-section="moods"] { position:relative; }
#wm-beat-field #wm-search-palette-panel [data-palette-section="artists"] + [data-palette-section="moods"]::before { content:""; position:absolute; top:-12px; left:0; right:0; height:1px; background:#23262a; pointer-events:none; }
#wm-beat-field .wm-search-palette__section-action { background:none; border:0; color:#aaa; font:inherit; font-size:11px; cursor:pointer; }
#wm-beat-field .wm-search-palette__items { display:flex; flex-wrap:wrap; gap:8px; }
#wm-beat-field .wm-search-palette__item-wrap { display:flex; align-items:center; gap:4px; max-width:100%; }
#wm-beat-field .wm-search-palette__item { max-width:100%; border:1px solid #303030; border-radius:10px; padding:10px 12px; background:#0d0d0d; color:#ddd; font:inherit; font-size:13px; cursor:pointer; }
#wm-beat-field .wm-search-palette__item-main { display:flex; gap:8px; align-items:center; }
#wm-beat-field .wm-search-palette__item-remove { width:24px; height:24px; border:0; background:none; color:#bbb; cursor:pointer; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__item.is-highlighted:not(.is-selected) { border-color:#686b70; background:#1b1c1e; color:#fff; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__item:focus-visible { outline:2px solid #c7b475; outline-offset:2px; }
#wm-beat-field #wm-search-palette-panel .wm-search-palette__item.is-selected { border-color:var(--wm-index-yellow); background:#1a170c; }
@media (hover:hover) and (pointer:fine) {
  #wm-beat-field #wm-search-palette-panel .wm-search-palette__item:hover:not(.is-selected):not(.is-highlighted) { border-color:#4c4f54; background:#17181a; color:#f5f5f5; }
}
/* Reallocate internal space; the panel's outer shell and chip sizes stay intact. */
@media (min-width:721px) {
  #wm-beat-field #wm-search-palette-panel { padding-block:15px; }
}
#wm-beat-field .chips-wrap { pointer-events:auto; position:relative; width:100%; margin:20px 0 0; padding:0; display:flex; flex-direction:row; align-items:center; gap:8px; min-height:44px; }
/* Keep the badge legible while scrolling tags emerge from behind the covers. */
@media (min-width:721px) { #wm-beat-field .chips-wrap { width:calc(100% + 80px); } }
#wm-beat-field .trending-chip { position:relative; z-index:31; flex:none; margin:0; padding:0; }
#wm-beat-field .trending-badge { display:flex; align-items:center; gap:7px; min-height:34px; padding:7px 10px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2); border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); color:var(--wm-index-white); font-size:11px; white-space:nowrap; }
#wm-beat-field .trending-badge .status-dot { flex:none; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#7dff9c 0%,#32df6d 58%,#16a34a 100%); box-shadow:0 0 0 3px rgba(44,199,97,.14),0 0 10px rgba(74,222,128,.3); }
#wm-beat-field .trending-badge .material-icons { flex:none; font-size:13px; color:var(--wm-index-muted); }
#wm-beat-field .trending-badge .label { font-weight:600; letter-spacing:.01em; }
#wm-beat-field .trending-badge time { color:var(--wm-index-muted); font-size:10px; font-variant-numeric:tabular-nums; }
#wm-beat-field .trending-badge .sep { color:#666; font-size:10px; }
#wm-beat-field .badge-label-mobile { display:none; }
#wm-beat-field .chips-marquee { position:relative; z-index:3; flex:1 1 0; min-width:0; width:100%; max-width:100%; overflow:hidden; padding:5px 0; -webkit-mask-image:linear-gradient(to right,transparent,#000 36px); mask-image:linear-gradient(to right,transparent,#000 36px); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
/* Fade the tags themselves so the page background stays visible at the exit. */
#wm-beat-field .chips-marquee::before, #wm-beat-field .chips-marquee::after { content:none; background:none; }
#wm-beat-field .chips-marquee::-webkit-scrollbar { display:none; }
#wm-beat-field .marquee__track { display:inline-flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:8px; width:max-content; }
#wm-beat-field .chip { min-height:32px; padding:6px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; font:inherit; font-size:12px; color:#ddd; background:rgba(0,0,0,.55); backdrop-filter:none; cursor:pointer; white-space:nowrap; transition:color .16s ease,border-color .16s ease,background-color .16s ease; }
#wm-beat-field .chip:hover, #wm-beat-field .chip:focus-visible { color:#fff; border-color:#aaa; background:#141414; }
#wm-beat-field .chip.active { color:var(--wm-index-yellow); border-color:var(--wm-index-yellow); background:#111; }
/* Desktop Spotlight: centered status above the existing flowing tag rail. */
@media (min-width:769px) {
  #wm-beat-field .chips-wrap { width:100%; flex-direction:column; align-items:stretch; gap:8px; }
  #wm-beat-field .trending-chip { align-self:center; max-width:100%; }
  #wm-beat-field .trending-badge { min-height:28px; padding:4px 0; background:none; border:0; box-shadow:none; font-size:12px; }
  #wm-beat-field .chips-marquee { flex:none; min-height:42px; }
}
#wm-beat-field .wm-field-shelf { position:absolute; inset:0; margin:0; padding:0; background:none; pointer-events:none; }
#wm-beat-field .wm-field-shelf .ttl { position:absolute; z-index:8; left:0; bottom:0; width:auto; min-height:36px; margin:0; padding:0; pointer-events:auto; }
#wm-beat-field .wm-field-shelf:has(.wm-home-recommend-nav) .ttl { left:auto; right:0; max-width:100%; }
#wm-beat-field .wm-home-recommend-nav, #wm-beat-field .wm-daily-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0; min-height:36px; }
#wm-beat-field .wm-home-recommend-nav { justify-content:flex-end; }
#wm-beat-field .wm-home-recommend-title-group { display:flex; align-items:center; gap:7px; }
#wm-beat-field .wm-home-recommend-title-link, #wm-beat-field .wm-daily-tab { font:inherit; font-size:13px; font-weight:500; line-height:1.4; color:#999; background:none; border:0; cursor:pointer; }
#wm-beat-field .wm-home-recommend-title-link { font-size:15px; font-weight:600; }
#wm-beat-field .wm-home-recommend-title-link.active, #wm-beat-field .wm-daily-tab[aria-selected="true"] { color:var(--wm-index-white); }
#wm-beat-field .wm-home-recommend-divider { color:#555; }
#wm-beat-field .wm-home-recommend-all { height:30px; min-height:30px; font-size:11px; padding:0 9px; border:1px solid #555; border-radius:20px; color:var(--wm-index-white); background:#080808; cursor:pointer; }
#wm-beat-field .wm-home-recommend-nav .wm-home-recommend-all { position:relative; height:24px; min-height:24px; font-size:10px; padding:0 7px; }
#wm-beat-field .wm-daily-tabs { display:flex; flex-wrap:wrap; gap:10px; }
#wm-beat-field .wm-daily-tab { padding:7px; border-radius:14px; }
#wm-beat-field .wm-field-cards { position:absolute; inset:0; height:100%; margin:0; padding:0; list-style:none; pointer-events:none; }
#wm-beat-field .wm-field-card { position:absolute; width:var(--field-size); left:var(--field-left); top:var(--field-top); float:none; margin:0; padding:0; z-index:var(--field-depth,1); perspective:850px; pointer-events:auto; transition:left .45s ease,top .45s ease,width .45s ease; }
#wm-beat-field .wm-field-card[data-field-placement="0"] { --field-left:78%; --field-top:130px; --field-size:22%; --field-rotation:5deg; --field-y-angle:-12deg; --field-depth:5; }
#wm-beat-field .wm-field-card[data-field-placement="1"] { --field-left:0%; --field-top:172px; --field-size:21%; --field-rotation:-9deg; --field-y-angle:14deg; --field-depth:4; }
#wm-beat-field .wm-field-card[data-field-placement="2"] { --field-left:16%; --field-top:0px; --field-size:14%; --field-rotation:-7deg; --field-y-angle:12deg; --field-depth:2; }
#wm-beat-field .wm-field-card[data-field-placement="3"] { --field-left:36%; --field-top:8px; --field-size:9%; --field-rotation:-10deg; --field-depth:1; }
#wm-beat-field .wm-field-card[data-field-placement="4"] { --field-left:60%; --field-top:0px; --field-size:13%; --field-rotation:7deg; --field-y-angle:-8deg; --field-depth:2; }
#wm-beat-field .wm-field-card[data-field-placement="5"] { --field-left:88%; --field-top:8px; --field-size:10%; --field-rotation:-6deg; --field-depth:1; }
#wm-beat-field .wm-field-card[data-field-placement="6"] { --field-left:1%; --field-top:4px; --field-size:10%; --field-rotation:8deg; --field-y-angle:10deg; --field-depth:1; }
#wm-beat-field .wm-field-card[data-field-placement="7"] { --field-left:48%; --field-top:8px; --field-size:8%; --field-rotation:7deg; --field-y-angle:-8deg; --field-depth:1; }
@media (min-width:721px) { #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]):not([data-field-placement="2"]):not([data-field-placement="3"]):not([data-field-placement="4"]):not([data-field-placement="5"]):not([data-field-placement="6"]):not([data-field-placement="7"]) { display:none; } }
#wm-beat-field .wm-field-cover { position:relative; display:block; width:100%; aspect-ratio:1; padding:0; border:0; border-radius:inherit; overflow:hidden; background:transparent; cursor:pointer; }
#wm-beat-field .wm-field-float { position:relative; display:block; width:100%; height:auto; aspect-ratio:1; border:1px solid #737373; border-radius:8px; transform:rotate(var(--field-rotation,0deg)) rotateY(var(--field-y-angle,0deg)); box-shadow:5px 2px 0 #111,7px 2px 0 #a6a6a680,0 22px 36px #0008; animation:wm-jacket-float var(--field-float-duration,9s) ease-in-out var(--field-float-delay,0s) infinite; }
#wm-beat-field .wm-field-image { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:cover; border-radius:inherit; transform:translate(var(--field-pointer-x,0px),var(--field-pointer-y,0px)) rotateX(var(--field-pointer-rotate-x,0deg)) rotateY(var(--field-pointer-rotate-y,0deg)); transition:transform .25s ease; }
#wm-beat-field .wm-field-float::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(130deg,#ffffff18,transparent 50%); pointer-events:none; }
/* Shade only the lettering, keeping every tilted cover free of a rectangular overlay. */
#wm-beat-field .wm-field-info { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:28px 56px 10px 10px; background:none; }
#wm-beat-field .wm-field-title, #wm-beat-field .wm-field-producer { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:12px; font-weight:500; line-height:1.6; text-shadow:0 1px 2px #000,0 0 4px #000,0 0 8px #0008; }
#wm-beat-field .wm-field-producer { color:#ddd; font-size:11px; font-weight:400; }
#wm-beat-field .wm-field-title:hover, #wm-beat-field .wm-field-producer:hover { color:#fff; text-decoration:underline; }
#wm-beat-field .wm-field-actions { position:absolute; z-index:3; inset:0; display:block; width:100%; aspect-ratio:1; padding:0; pointer-events:none; }
#wm-beat-field .wm-field-play { position:absolute; right:8px; bottom:8px; display:flex; flex:none; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid #999; border-radius:50%; background:#000e; color:#fff; cursor:pointer; }
#wm-beat-field .wm-field-play .material-icons { font-size:22px; color:inherit; }
#wm-beat-field .wm-field-play .pause { display:none; }
#wm-beat-field .wm-field-play.amplitude-playing .pause { display:block; }
#wm-beat-field .wm-field-play.amplitude-playing .play { display:none; }
#wm-beat-field .wm-field-buy { position:absolute; top:8px; right:8px; display:flex; align-items:center; justify-content:center; min-width:0; min-height:26px; height:26px; max-width:calc(100% - 16px); padding:0 8px; border:1px solid #806b32; border-radius:8px; background:#000e; color:var(--wm-index-yellow); font:inherit; font-size:11px; cursor:pointer; white-space:nowrap; }
#wm-beat-field .wm-field-card.is-selected .wm-field-float { border-color:var(--wm-index-yellow); box-shadow:6px 2px 0 #111,8px 2px 0 #999,0 25px 48px #000b; }
#wm-beat-field .wm-field-card:hover, #wm-beat-field .wm-field-card:focus-within { z-index:12; }
#wm-beat-field .wm-field-card:hover .wm-field-float, #wm-beat-field .wm-field-card:focus-within .wm-field-float, #wm-beat-field[data-field-motion="off"] .wm-field-float { animation-play-state:paused; }
#wm-beat-field a:focus-visible, #wm-beat-field button:focus-visible, #wm-beat-field [tabindex="0"]:focus-visible { outline:2px solid var(--wm-index-yellow); outline-offset:4px; }
#wm-beat-field .wm-field-duo { margin:28px 0 0; border-top:1px solid #ffffff1f; border-bottom:1px solid #ffffff1f; padding:24px 0; }
#wm-beat-field .wm-home-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:40px; width:100%; margin:0; padding:0; }
#wm-beat-field #wm-random-anchor { min-height:200px; }
#wm-beat-field #wm-random-anchor.is-loaded { display:none; }
#wm-beat-field #trending-beatmakers-shell { width:100%; min-width:0; margin:0; }
#wm-beat-field #trending-beatmakers-shell .trending-beatmakers { margin:0; overflow:visible; backdrop-filter:none; position:relative; background:none; padding:0; border:0; border-radius:0; box-shadow:none; min-height:204px; }
#wm-beat-field #trending-beatmakers-shell .tbm-strip { display:flex; align-items:center; min-height:176px; width:100%; padding:0; margin-top:12px; }
#wm-beat-field #trending-beatmakers-shell .tbm-strip__viewport { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:6px 4px 12px; scroll-snap-type:x proximity; }
#wm-beat-field #trending-beatmakers-shell .tbm-strip__viewport::-webkit-scrollbar { display:none; }
#wm-beat-field #trending-beatmakers-shell .tbm-strip__track { display:flex; align-items:flex-start; gap:17px; width:max-content; margin:0; padding:0; transform:none; animation:none; }
#wm-beat-field #trending-beatmakers-shell .tbm-artist { display:flex; flex-direction:column; align-items:center; flex:0 0 79px; width:79px; margin:0; padding:0; scroll-snap-align:start; opacity:1; }
#wm-beat-field #trending-beatmakers-shell .tbm-artist .tbm-thumb { display:block; width:76px; height:76px; flex:none; margin:0 0 10px; border-radius:50%; border:1px solid #7779; overflow:hidden; background:#111; box-shadow:none; transform:none; }
#wm-beat-field #trending-beatmakers-shell .tbm-thumb__img { display:block; position:static; width:100%; height:100%; border-radius:50%; object-fit:cover; transform:none; }
#wm-beat-field #trending-beatmakers-shell .tbm-name { display:block; width:100%; color:var(--wm-index-white); font-size:12px; line-height:1.5; font-weight:500; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wm-beat-field #trending-beatmakers-shell .tbm-artist:hover .tbm-thumb, #wm-beat-field #trending-beatmakers-shell .tbm-artist:focus-visible .tbm-thumb { border-color:var(--wm-index-yellow); transform:translateY(-3px); }
#wm-beat-field #trending-beatmakers-shell .tbm-header { display:flex; justify-content:space-between; align-items:center; min-height:32px; padding:0; margin:0; }
#wm-beat-field #trending-beatmakers-shell .tbm-title, #wm-beat-field #trending-beatmakers-shell .tbm-strip__header { margin:0; color:var(--wm-index-white); font-size:17px; font-weight:500; line-height:32px; }
#wm-beat-field #trending-beatmakers-shell .tbm-view-all { min-height:32px; font-size:11px; border:0; padding:0; background:none; color:var(--wm-index-muted); }
#wm-beat-field .wm-field-maker-head { display:flex; align-items:center; justify-content:space-between; min-height:32px; gap:12px; }
#wm-beat-field .wm-field-maker-head h2 { font:inherit; font-size:17px; font-weight:500; margin:0; color:var(--wm-index-white); }
#wm-beat-field .wm-field-maker-head h2::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:#4ac99b; }
#wm-beat-field .wm-field-maker-head a { display:inline-flex; min-height:32px; align-items:center; gap:8px; color:var(--wm-index-muted); font-size:11px; }
#wm-beat-field [hidden] { display:none; }
#wm-beat-field:not(.is-enhanced) .wm-field-search { padding-top:24px; width:min(680px,100%); }
#wm-beat-field:not(.is-enhanced) .wm-field-shelf { position:relative; padding-top:32px; }
#wm-beat-field:not(.is-enhanced) .wm-field-cards { position:relative; display:flex; flex-wrap:nowrap; overflow-x:auto; gap:20px; height:auto; }
#wm-beat-field:not(.is-enhanced) .wm-field-card { position:relative; inset:auto; width:160px; }
@keyframes wm-jacket-float { 0%,100% { transform:translateY(-3px) rotate(var(--field-rotation,0deg)) rotateY(var(--field-y-angle,0deg)); } 50% { transform:translateY(4px) rotate(var(--field-rotation,0deg)) rotateY(var(--field-y-angle,0deg)); } }
@media (max-width:1199px) {
  #wm-beat-field .wm-field-search { width:62%; }
  #wm-beat-field .wm-field-card[data-field-placement="0"] { --field-top:140px; }
  #wm-beat-field .wm-field-card[data-field-placement="1"] { --field-top:158px; }
  #wm-beat-field .wm-field-card[data-field-placement="2"] { --field-size:13%; }
  #wm-beat-field .wm-field-card[data-field-placement="4"] { --field-size:12%; }
  #wm-beat-field .wm-home-duo { gap:24px; }
  #wm-beat-field #trending-beatmakers-shell .tbm-strip__track { gap:12px; }
}
@media (max-width:900px) {
  #wm-beat-field .wm-home-duo { grid-template-columns:minmax(0,1fr); gap:28px; }
  #wm-beat-field .wm-field-card[data-field-placement="3"], #wm-beat-field .wm-field-card[data-field-placement="7"] { --field-size:11%; }
  #wm-beat-field .wm-field-actions { gap:4px; }
  #wm-beat-field .wm-field-buy { padding:4px 7px; font-size:10px; }
}
@media (max-width:720px) {
  section#main.watermelon-home { --wm-field-gutter:32px; }
  #wm-beat-field .wm-field-hero { min-height:0; }
  #wm-beat-field .wm-field-search { width:100%; padding-top:18px; }
  #wm-beat-field #mainSearchFrm { height:48px; padding-left:16px; }
  #wm-beat-field #mainSearchFrm::after { left:30px; }
  #wm-beat-field #mainSearchKeyword, #wm-beat-field .wm-search-palette__hint { font-size:13px; }
  #wm-beat-field .wm-search-palette__submit { min-width:76px; height:44px; font-size:12px; }
  #wm-beat-field .wm-search-palette__panel { padding:15px; }
  #wm-beat-field #wm-search-palette-panel .wm-search-palette__section-head { margin-bottom:3px; }
  #wm-beat-field #wm-search-palette-panel .wm-search-palette__results { gap:18px; }
  #wm-beat-field .wm-search-palette__selection-clear { flex-basis:44px; width:44px; height:44px; }
  #wm-beat-field .wm-search-palette__results, #wm-beat-field .wm-search-palette__section { min-width:0; }
  #wm-beat-field .wm-search-palette__items { flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-padding-inline:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px; }
  #wm-beat-field .wm-search-palette__items::-webkit-scrollbar { display:none; }
  #wm-beat-field .wm-search-palette__item-wrap { flex:0 0 auto; }
  #wm-beat-field .wm-search-palette__item-main { min-width:0; }
  #wm-beat-field .wm-search-palette__item-label { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #wm-beat-field .chips-wrap { margin-top:18px; min-height:44px; gap:6px; }
  #wm-beat-field .trending-badge { padding:6px; gap:4px; font-size:10px; }
  #wm-beat-field .badge-label-desktop { display:none; }
  #wm-beat-field .badge-label-mobile { display:inline; }
  #wm-beat-field .trending-badge time { font-size:10px; }
  #wm-beat-field .chips-marquee { padding-inline:0; }
  #wm-beat-field .marquee__track { width:max-content; flex-wrap:nowrap; justify-content:flex-start; }
  #wm-beat-field .chip { min-height:44px; font-size:12px; padding:8px 13px; }
  #wm-beat-field .wm-field-shelf { position:relative; inset:auto; padding-top:70px; min-width:0; pointer-events:auto; }
  #wm-beat-field .wm-field-shelf .ttl { top:23px; bottom:auto; max-width:100%; }
  #wm-beat-field .wm-home-recommend-title-link { min-height:44px; display:inline-flex; align-items:center; font-size:14px; }
  #wm-beat-field .wm-home-recommend-all { min-height:44px; }
  #wm-beat-field .wm-home-recommend-nav .wm-home-recommend-all::after { content:""; position:absolute; inset:-10px 0; border-radius:inherit; }
  #wm-beat-field .wm-field-cards { position:relative; inset:auto; display:flex; flex-wrap:nowrap; align-items:flex-start; gap:8px; width:100%; height:auto; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; pointer-events:auto; padding:10px 4px 20px; }
  #wm-beat-field .wm-field-cards::-webkit-scrollbar { display:none; }
  #wm-beat-field .wm-field-card { position:relative; left:auto; top:auto; flex:0 0 calc((100% - 16px) / 3); width:calc((100% - 16px) / 3); min-width:0; padding-top:0; scroll-snap-align:start; }
  #wm-beat-field .wm-field-card[data-field-placement] { display:block; --field-rotation:0deg; --field-y-angle:0deg; }
  #wm-beat-field[data-field-view="space"] .wm-field-card { display:block; }
  #wm-beat-field .wm-field-float { border-radius:6px; animation:none; box-shadow:3px 1px 0 #111,5px 1px 0 #888,0 14px 26px #0008; }
  #wm-beat-field .wm-field-info { padding:22px 40px 6px 6px; }
  #wm-beat-field .wm-field-title { margin-top:0; font-size:11px; line-height:1.45; }
  #wm-beat-field .wm-field-producer { font-size:10px; line-height:1.45; }
  #wm-beat-field .wm-field-play { right:4px; bottom:4px; width:32px; height:32px; }
  #wm-beat-field .wm-field-play .material-icons { font-size:22px; }
  #wm-beat-field .wm-field-buy { top:4px; right:4px; display:block; min-height:22px; height:22px; max-width:calc(100% - 8px); padding:0 5px; border-radius:6px; font-size:10px; line-height:20px; text-align:center; overflow:hidden; text-overflow:ellipsis; }
  #wm-beat-field .wm-field-duo { margin-top:30px; padding-top:22px; }
  #wm-beat-field #trending-beatmakers-shell .tbm-thumb { width:80px; height:80px; }
  #wm-beat-field #trending-beatmakers-shell .tbm-view-all, #wm-beat-field .wm-field-maker-head a { min-height:44px; }
}
@media (max-width:350px) {
  #wm-beat-field .wm-field-search { padding-top:70px; }
  #wm-beat-field .wm-search-palette__submit { min-width:62px; padding:0 7px; }
  #wm-beat-field .wm-field-buy { font-size:10px; }
  #wm-beat-field .wm-home-recommend-nav { gap:6px; }
}
@media (max-width:768px) {
  #wm-beat-field .badge-label-desktop,
  #wm-beat-field .trending-badge .material-icons,
  #wm-beat-field .trending-badge .sep,
  #wm-beat-field .trending-badge time { display:none; }
  #wm-beat-field .badge-label-mobile { display:inline; }
  #wm-beat-field .wm-field-shelf:has(.wm-home-recommend-nav) .ttl { left:0; right:0; width:100%; text-align:center; }
  #wm-beat-field .wm-home-recommend-nav { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { #wm-beat-field .wm-field-float { animation:none; } #wm-beat-field .wm-field-card, #wm-beat-field .wm-field-image { transition:none; } }
@media (prefers-reduced-motion:reduce) { #wm-beat-field .wm-search-palette__submit, #wm-beat-field .wm-search-palette__submit::before { transition:none; } }
@media (prefers-reduced-motion:reduce) {
  #wm-beat-field #mainSearchFrm { animation:none !important; --wm-discover-angle:90deg; }
}

@media(min-width:1025px) { section#main #wm-beat-field { padding-top:132px; } }
#wm-beat-field #trending-beatmakers-shell .trending-beatmakers::before, #wm-beat-field #trending-beatmakers-shell .trending-beatmakers::after, #wm-beat-field #trending-beatmakers-shell .tbm-strip__bg { display:none; }
#wm-beat-field #trending-beatmakers-shell .tbm-header { min-height:44px; }
#wm-beat-field #trending-beatmakers-shell .tbm-title .eyebrow__plate { display:flex; gap:5px; font:inherit; background:none; border:0; padding:0; }
#wm-beat-field #trending-beatmakers-shell .tbm-title .eyebrow__kicker, #wm-beat-field #trending-beatmakers-shell .tbm-title .eyebrow__name { font:inherit; color:inherit; text-transform:none; letter-spacing:0; }
#wm-beat-field #trending-beatmakers-shell .tbm-title .eyebrow__plate::before { content:""; display:block; width:7px; height:7px; align-self:center; margin-right:4px; border-radius:50%; background:#4ac99b; }
#wm-beat-field #trending-beatmakers-shell .tbm-view-all { position:static; width:auto; height:auto; min-width:0; border:0; border-radius:0; margin:0; padding:0; box-shadow:none; }
/* Keep rear sleeves light; their original controls appear on hover/focus or promotion. */
@media(min-width:721px) {
  /* Keep playlist navigation above its covers, separate from the radio below. */
  #wm-beat-field.is-enhanced .wm-field-hero:has(.wm-home-recommend-nav) { padding-top:56px; }
  #wm-beat-field .wm-field-shelf:has(.wm-home-recommend-nav) .ttl { top:0; bottom:auto; }
  #wm-beat-field.is-enhanced .wm-field-shelf:has(.wm-home-recommend-nav) .wm-field-cards { top:56px; height:calc(100% - 56px); }
  #wm-beat-field[data-field-view="space"] .wm-field-card { z-index:var(--field-depth); }
  #wm-beat-field[data-field-view="space"] .wm-field-card:hover,
  #wm-beat-field[data-field-view="space"] .wm-field-card:focus-within { z-index:30; }
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]) .wm-field-info { padding:18px 38px 6px 6px; }
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]) .wm-field-actions { visibility:hidden; opacity:0; }
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]) .wm-field-play { right:6px; bottom:6px; width:28px; height:28px; }
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]) .wm-field-buy { top:6px; right:6px; min-height:20px; height:20px; max-width:calc(100% - 12px); padding:0 5px; display:block; overflow:hidden; text-overflow:ellipsis; line-height:18px; font-size:9px; }
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]):hover .wm-field-actions,
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]):focus-within .wm-field-actions { visibility:visible; opacity:1; pointer-events:none; }
  #wm-beat-field[data-field-view="space"] .wm-field-card[data-field-placement="0"] .wm-field-title,
  #wm-beat-field[data-field-view="space"] .wm-field-card[data-field-placement="1"] .wm-field-title { font-size:14px; }
}
@media(min-width:769px) and (max-width:1024px) {
  section#main #wm-beat-field { padding-top:56px; }
}

#wm-beat-field #trending-beatmakers-shell .tbm-header { gap:10px; }
#wm-beat-field #trending-beatmakers-shell .tbm-header__titles { margin-right:auto; }
#wm-beat-field #trending-beatmakers-shell .tbm-strip { margin-top:12px; }
@media(max-width:720px) {
}

#wm-beat-field .wm-field-info, #wm-beat-field .wm-field-actions { pointer-events:none; }
#wm-beat-field .wm-field-info a, #wm-beat-field .wm-field-actions > button, #wm-beat-field .wm-field-actions > a { pointer-events:auto; }
@media(min-width:721px) and (max-width:1024px) {
  #wm-beat-field[data-field-view="space"] .chips-marquee { width:84%; }
  #wm-beat-field[data-field-view="space"] .wm-field-card[data-field-placement="0"] { --field-left:76%; --field-size:21%; --field-top:202px; --field-rotation:5deg; }
  #wm-beat-field[data-field-view="space"] .wm-field-card[data-field-placement="1"] { --field-left:1.5%; --field-size:21%; --field-top:228px; --field-rotation:-5deg; }
}
@media(min-width:721px) and (max-width:1199px) {
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]) .wm-field-title,
  #wm-beat-field[data-field-view="space"] .wm-field-card:not([data-field-placement="0"]):not([data-field-placement="1"]) .wm-field-producer { line-height:1.2; }
}
#wm-beat-field #trending-beatmakers-shell .tbm-header { flex-wrap:wrap; }

/* Moving producer rail palette; the radio has its own scoped equipment skin. */
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) > .trending-beatmakers {
  --wm-accent-rgb:120,157,211;
  border-color:#7289ab66 !important;
  background:#080e18 !important;
  box-shadow:inset 0 1px 0 #d8e5ff1a,inset 0 -2px 0 #0007,0 18px 34px #0005 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-strip__bg-line {
  color:#b3c6e014 !important;
  text-shadow:0 1px 0 #d4e4ff0a !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-thumb {
  border-color:#b3c9e466 !important;
  background:#0e1827 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-name {
  color:#cbd7e8 !important;
  text-shadow:0 1px 0 #0008 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-artist.is-featured .tbm-thumb,
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-artist:hover .tbm-thumb,
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-artist:focus-visible .tbm-thumb {
  border-color:#a9c5f1aa !important;
  box-shadow:inset 0 1px 1px #ffffff55,inset 0 -2px 5px #0009,0 12px 22px #0005,0 0 13px #789dd333 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-artist.is-featured .tbm-name,
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-artist:hover .tbm-name,
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-artist:focus-visible .tbm-name {
  color:#f1f5fc !important;
  text-shadow:0 1px 0 #0009,0 0 5px #789dd329 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-view-all {
  color:#a0b3cd !important;
  text-shadow:0 1px 0 #0008 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-title .eyebrow.eyebrow--plate .eyebrow__plate {
  background:#101929 !important;
  border-color:#7896c144 !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-title .eyebrow.eyebrow--plate .eyebrow__kicker {
  color:#94accd !important;
}
section#main #chart .wm-home-duo.wm-home-duo--cobalt > #trending-beatmakers-shell:where(:not(.wm-field-maker-host)) .tbm-title .eyebrow.eyebrow--plate .eyebrow__name {
  color:#e1e9f6 !important;
}
@media(max-width:1024px) {
  /* Hide the native rail without changing touch scrolling or profile links. */
  section#main #chart .wm-home-duo--cobalt #trending-beatmakers-shell .tbm-strip { scrollbar-width:none; }
  section#main #chart .wm-home-duo--cobalt #trending-beatmakers-shell .tbm-strip::-webkit-scrollbar { display:none; height:0; }
}

/* Index accents stay on controls and ranking; the blue backdrop is unchanged. */
#wm-beat-field .wm-home-recommend-all:hover,
#wm-beat-field .wm-home-recommend-all:focus-visible,
#wm-beat-field .wm-field-buy:hover,
#wm-beat-field .wm-field-buy:focus-visible { color:var(--wm-index-yellow); border-color:var(--wm-index-yellow); background:#111; }
#wm-beat-field .wm-field-play:hover,
#wm-beat-field .wm-field-play:focus-visible { border-color:#fff; background:#111; }
#wm-beat-field .wm-field-play.amplitude-playing { color:var(--wm-index-red); border-color:var(--wm-index-red); background:#080808; }
section#main.watermelon-home #chart {
  --wm-chart-accent-start:239,51,64;
  --wm-chart-accent-end:151,25,36;
  --wm-chart-rank-gold:214,178,74;
}
section#main.watermelon-home #chart .wm-chart-meta-actions { background:#080808; border-color:#333; }
section#main.watermelon-home #chart .wm-chart-meta-actions .wm-chart-all,
section#main.watermelon-home #chart .wm-chart-season-toggle,
section#main.watermelon-home #chart .wm-chart-info-toggle { color:var(--wm-index-white); }
section#main.watermelon-home #chart .wm-chart-meta-actions .wm-chart-all:hover,
section#main.watermelon-home #chart .wm-chart-season-toggle:hover,
section#main.watermelon-home #chart .wm-chart-info-toggle:hover { color:var(--wm-index-yellow); }
section#main.watermelon-home #chart .wm-chart-meta-actions button:focus-visible { color:var(--wm-index-yellow); outline:2px solid var(--wm-index-yellow); outline-offset:2px; }
section#main.watermelon-home #chart .wm-chart-popup { background:#050505; border-color:#333; }