:root {
  --bg: #050506;
  --bg-2: #000;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --raised: #2a2a2e;
  --text: #fff;
  --text-2: #b7b7be;
  --text-3: #8d8d96;
  --inactive: #6e6e76;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(12, 12, 14, 0.92);
  --accent: #fff;
  --nav: 64px;
  --mini: 0px;
  --shadow: none;
  --dur-instant: 120ms;
  --dur-micro: 160ms;
  --dur-control: 180ms;
  --dur-card: 200ms;
  --dur-menu: 180ms;
  --dur-modal: 220ms;
  --dur-page: 220ms;
  --dur-art: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  color-scheme: dark;
  font-family: Inter, "Segoe UI", sans-serif;
}
.boot-error { margin: 28px 20px; color: #f5f5f7; font-size: 16px; line-height: 1.4; }
html[data-theme="light"] {
  --bg: #f6f6f7;
  --bg-2: #fff;
  --surface: #fff;
  --surface-2: #eeeef1;
  --raised: #e4e4e8;
  --text: #111;
  --text-2: #4c4c55;
  --text-3: #6d6d76;
  --inactive: #8a8a93;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --glass: rgba(255, 255, 255, 0.94);
  --accent: #111;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #080809; color: #f5f5f7; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 80; background: #fff; color: #000; padding: 8px 12px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn:active, .ctrl:active, .play-main:active, .play-fab:active, .g-play:active, .btn:active, #tabbar button:active { opacity: 0.72; }

#app { height: 100dvh; display: flex; background: #080809; }
#rail {
  width: 255px; flex: none; height: 100dvh; display: flex; flex-direction: column;
  background: #101114; border-right: 1px solid #24252a; padding: 27px 12px 16px; overflow: hidden;
}
#rail .brand { display: flex; align-items: center; gap: 12px; height: 39px; margin: 0 4px 18px; color: #fff; }
#rail .mark { width: 39px; height: 39px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(160deg, #d8b8ff, #6a45c8); color: #fff; flex: none; }
#rail .mark svg { width: 16px; height: 16px; }
#rail .rail-label strong { font-size: 20px; font-weight: 700; letter-spacing: 0; }
#rail .rail-nav { display: flex; flex-direction: column; gap: 2px; }
#rail .rail-nav button { position: relative; width: 230px; height: 50px; border-radius: 14px; display: flex; align-items: center; gap: 12px; padding-left: 15px; color: #a3a9b5; font-size: 17px; font-weight: 500; }
#rail .rail-nav svg { width: 18px; height: 18px; flex: none; }
#rail .rail-nav button.is-on { background: #202126; color: #f5f5f7; }
#rail .rail-nav button.is-on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #b98aff; }
#rail .rail-user { margin-top: auto; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; color: inherit; text-align: left; }
#rail .avatar { width: 39px; height: 39px; border-radius: 50%; background: #3a3d44; color: #f5f5f7; display: grid; place-items: center; font-weight: 600; flex: none; }
#rail .rail-user b { display: block; font-size: 14px; font-weight: 600; color: #f5f5f7; }
#rail .rail-user small { display: block; color: #a3a9b5; font-size: 13px; }
#workspace { flex: 1; min-width: 0; height: 100dvh; display: flex; flex-direction: column; background: #080809; position: relative; overflow: hidden; }
#stage {
  flex: 1; min-width: 0; min-height: 0; overflow: auto;
  padding: 4px 40px 120px 39px;
}
#stage > * { width: 100%; margin-inline: 0; }
#stage > .desk-home { width: min(1091px, 100%); }
#tabbar { display: none; }
#tabbar button { position: relative; color: #8e8e93; font-size: 10px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 49px; }
#tabbar button.is-on { color: #fff; }
#tabbar svg { width: 24px; height: 24px; }
.tab-dot { position: absolute; top: 6px; left: calc(50% + 7px); width: 6px; height: 6px; border-radius: 99px; background: #ff3b30; }

#mini {
  position: fixed; z-index: 28; left: 273px; right: 16px; width: auto; transform: none;
  bottom: 10px; height: 100px;
  display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center;
  gap: 8px; padding: 13px 16px 16px; border-radius: 20px;
  background: #17171c; border: 1px solid #292930;
}
#mini[hidden] { display: none !important; }
body.has-track { --mini: 72px; }
#mini .mini-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
#mini .open { display: grid; place-items: center; }
#mini .mini-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
#mini .open-title, #mini .mini-artist { min-width: 0; max-width: 100%; text-align: left; }
#mini img { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; }
#mini b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mini .mini-artist { color: #a3a9b5; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-center, .mini-right { display: flex; align-items: center; gap: 2px; }
#mini .js-play { width: 36px; height: 36px; border-radius: 0; background: transparent; color: #f5f5f7; }
#mini .icon-btn { width: 36px; height: 36px; color: #f5f5f7; }
.mini-seek { position: absolute; left: 14px; right: 14px; bottom: 0; height: 28px; border-radius: 0; background: linear-gradient(rgba(185, 138, 255, 0.45), rgba(185, 138, 255, 0.45)) center / 100% 3px no-repeat; touch-action: none; }
.mini-seek i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin: -1.5px 0 0; width: auto; transform: scaleX(0); transform-origin: left center; border-radius: 99px; background: #b98aff; }
.mini-clock { display: none; position: absolute; left: 0; right: 0; bottom: 18px; justify-content: space-between; color: #d5d8df; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.mini-seek.is-hot .mini-clock { display: flex; }
.seek i { display: block; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left center; border-radius: 99px; background: #fff; }

.screen, .home-wrap { width: min(720px, 100%); margin: 0 auto; }
.shelf { margin-top: 18px; }
.shelf:first-of-type { margin-top: 0; }
.shelf-head, .section-head, .top, .page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 10px;
}
.shelf-head h2, .section-head h2, .block-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.shelf-head p { display: none; }
.desk-home .section-head p { display: block; margin-top: 4px; color: #a3a9b5; font-size: 14px; font-weight: 400; }
.see, .linkish { color: #8e8e93; font-size: 13px; font-weight: 500; min-height: 28px; }
.display { font-size: 28px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.kicker { color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.muted, .dim { color: var(--text-2); }
.dim { font-size: 13px; }

.banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  border-radius: 14px; background: var(--surface); color: var(--text-2); font-size: 13px;
}
.banner p { flex: 1; min-width: 0; }
.banner button { min-height: 32px; color: var(--text); }
.banner-ico { color: var(--text); display: grid; }

.square-row, .mix-rail, .scroller, .mix-row, .chips, .ed-mix-row, .ed-genre-row, .ed-release-row, .ed-recent-row {
  display: flex; gap: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.square-row::-webkit-scrollbar, .mix-rail::-webkit-scrollbar, .scroller::-webkit-scrollbar, .mix-row::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.square { flex: 0 0 74px; width: 74px; text-align: center; color: inherit; }
.square-art, .square-art svg { width: 74px; height: 74px; border-radius: 16px; overflow: hidden; background: #111; }
.g-visual, .g-visual svg { width: 120px; height: 120px; border-radius: 16px; overflow: hidden; background: #111; }
.square-art { position: relative; display: block; }
.square-art em { position: absolute; left: 6px; bottom: 5px; font-style: normal; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.square b, .genre-card b, .album-card b, .made-card b { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.genre-card span, .album-card span, .made-card span { color: var(--text-3); font-size: 12px; }

.wide-mix, .mix {
  position: relative; flex: 0 0 78%; width: 78%; height: 148px; border-radius: 18px; overflow: hidden; color: #fff;
}
.wide-art, .wide-art svg, .mix-art, .mix-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wide-copy, .mix-copy { position: absolute; left: 14px; right: 64px; bottom: 12px; z-index: 2; text-align: left; }
.wide-copy span, .mix-copy p { display: block; font-size: 12px; font-weight: 500; opacity: .92; }
.wide-copy b, .mix h3 { display: block; margin-top: 2px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.mix-hit { position: absolute; inset: 0; z-index: 3; }
.play-fab, .g-play {
  position: absolute; z-index: 4; right: 12px; top: 50%; width: 42px; height: 42px; margin: 0;
  border-radius: 999px; display: grid; place-items: center; background: #fff; color: #111;
  transform: translateY(-50%);
}
.icon-btn.wide-more, .icon-btn.ed-more { display: none; }
.ed-shuffle { display: none; }
.genre-card, .album-card, .made-card, .ed-release { flex: 0 0 120px; width: 120px; text-align: left; color: inherit; scroll-snap-align: start; }
.album-card img, .ed-release img { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; background: #111; }
.made-card { height: 88px; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.card-grid .album-card, .card-grid .genre-card { width: auto; }
.card-grid img, .card-grid .g-visual, .card-grid .g-visual svg { width: 100%; height: auto; aspect-ratio: 1; }

.rows, .track-list, .ed-popular { display: flex; flex-direction: column; }
.track, .ed-pop {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 4px 0; text-align: left; color: inherit;
}
.home-track { grid-template-columns: 48px minmax(0, 1fr); min-height: 52px; }
.track > button, .home-track > button { text-align: left; min-width: 0; }
.track img, .ed-pop img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.track b, .ed-pop-title b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .meta, .ed-pop-artist, .ed-pop-album { display: block; color: var(--text-2); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .side, .ed-pop-time { display: flex; align-items: center; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.track .side > span { display: none; }
.ed-pop-album, .ed-pop-time { display: none; }
.track.is-current b, .ed-pop.is-current .ed-pop-title b { color: #fff; }
.eq { display: none; gap: 2px; height: 12px; align-items: flex-end; margin-right: 6px; }
.eq i { width: 2px; background: currentColor; display: block; height: 6px; transform-origin: bottom; }
.is-playing .eq { display: inline-flex; }
.is-playing .eq i { animation: eq .8s ease-in-out infinite alternate; }
.eq i:nth-child(2) { height: 10px; animation-delay: .15s; }
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.queue-item { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 60px; }

.hero, .hero-likes {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px;
  align-items: end; min-height: 0 !important; margin: 0 0 16px; padding: 0; border-radius: 0;
  background: none !important; color: var(--text); overflow: visible;
}
.hero-likes { grid-template-columns: 1fr; }
.hero img.cover { position: relative; inset: auto; width: 132px; height: 132px; border-radius: 18px; object-fit: cover; opacity: 1; }
.hero .content, .hero-actions { position: relative; }
.hero .display, .hero h1, .hero h2, .hero-likes h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn, .round, .glass-round, .ctrl {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: inherit;
}
.btn { min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; color: #111; font-weight: 600; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.avatar, .avatar-lg { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--raised); font-weight: 600; }
.avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #111; }

#player {
  position: fixed; top: 0; bottom: 0; left: 50%; z-index: 40; color: #fff; background: #1a1028;
  width: min(420px, 100%); transform: translate(-50%, 104%); pointer-events: none; overflow: auto;
  transition: transform var(--dur-art) var(--ease-enter);
}
body.player-open #player { transform: translate(-50%, 0); pointer-events: auto; }
.player-bg { position: absolute; inset: 0; opacity: .55; background: #1a1028 center/cover; }
.player-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45) 70%, rgba(0,0,0,.72)); }
.player-body {
  position: relative; z-index: 1; min-height: 100%; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
}
.player-nav { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.player-nav h2 { text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.player-nav [data-act="close-player"] svg { transform: rotate(-90deg); }
.glass-round { width: 36px; height: 36px; background: rgba(255,255,255,.16); color: #fff; }
.player-stage { display: flex; flex-direction: column; align-items: center; }
.art-wrap { display: grid; place-items: center; width: 100%; margin-top: 12px; }
.art-wrap img { width: min(68%, 280px); aspect-ratio: 1; object-fit: cover; border-radius: 22px; }
.social { margin: 16px auto 0; display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 4px 14px 4px 4px; background: rgba(20,16,28,.45); color: #fff; border: 0; }
.faces { display: flex; }
.face { width: 22px; height: 22px; margin-right: -6px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; font-style: normal; border: 2px solid rgba(0,0,0,.25); }
.social em { font-style: normal; font-size: 11px; line-height: 1.25; text-align: left; }
.player-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.dock-track { display: none; align-items: center; gap: 10px; min-width: 0; }
.dock-track img { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; }
.dock-track b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flat-title h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist-link { display: block; color: rgba(255,255,255,.78); font-size: 15px; margin-top: 2px; text-align: left; }
#player.is-warm .flat-title { display: none; }
#player.is-warm .dock-track { display: flex; }
#player.is-warm .player-panel {
  margin-top: auto; padding: 14px 14px 8px; border-radius: 28px;
  background: rgba(28, 22, 16, .42); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
}
.time-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.seek { position: relative; flex: 1; height: 28px; touch-action: none; }
.seek b { position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.28); }
.seek i { position: absolute; left: 0; top: 7px; }
.seek .knob { position: absolute; top: 2px; width: 12px; height: 12px; border-radius: 99px; background: #fff; transform: translateX(-50%); }
.controls { display: grid; grid-template-columns: repeat(5, minmax(40px, 1fr)); justify-items: center; align-items: center; }
.play-main { width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,.92); color: #111; display: grid; place-items: center; }
.ctrl { color: rgba(255,255,255,.92); }
.ctrl.is-on, .glass-round.is-on { color: #fff; }
.lyric-bar {
  margin-top: auto; display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 36px; padding: 0 4px; color: rgba(255,255,255,.72); font-size: 13px; text-align: left;
}
.lyric-bar em { flex: 1; min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyric-bar svg { width: 16px; height: 16px; }

#overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); display: grid; align-items: end; }
#overlay[hidden] { display: none; }
#overlay.is-pop { display: block; background: transparent; }
.popover, .sheet, .dialog { background: #161618; color: var(--text); border: 1px solid var(--line); }
.popover {
  position: fixed; z-index: 2; min-width: 220px; max-width: min(320px, calc(100vw - 16px));
  max-height: min(560px, calc(100dvh - 16px)); overflow: auto; border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.sheet, .dialog { border-radius: 22px 22px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); max-height: min(80dvh, 640px); overflow: auto; }
.dialog { margin: auto 16px; border-radius: 18px; }
.handle { width: 36px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.2); margin: 4px auto 12px; }
button.item, .popover .item, .sheet button.item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; border-radius: 10px; padding: 0 10px; }
.item-art { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; background: #111; }
.popover .item:hover, .sheet button.item:hover, .popover .item:focus-visible, .sheet button.item:focus-visible { background: var(--raised); }
.menu-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-head img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: #111; }
.menu-head b, .menu-head span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-head b { font-size: 15px; font-weight: 600; }
.menu-head span { color: var(--text-2); font-size: 13px; }
.why { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; color: var(--text-2); }
.field input, .field textarea, .searchbox input, select.sel {
  background: #000; border: 1px solid var(--line); border-radius: 12px; min-height: 44px; padding: 10px 12px; width: 100%;
}
.searchbox { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px 0 14px; border-radius: 14px; background: var(--surface); }
.searchbox input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; }
.chips { padding: 8px 0 12px; }
.chips button { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13px; }
.chips button.is-on { background: #fff; color: #111; }
mark { background: transparent; font-weight: 700; text-decoration: underline; }
.empty, .notice { background: var(--surface); border-radius: 14px; padding: 14px; color: var(--text-2); margin: 12px 0; }
.empty strong, .notice strong { display: block; color: var(--text); margin-bottom: 4px; }
.setting { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
.group { margin-top: 22px; }
.group h3 { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface); border-radius: 16px; padding: 14px; text-align: left; color: inherit; }
.stat b { display: block; font-size: 18px; }
.skel { position: relative; overflow: hidden; background: var(--surface); border-radius: 12px; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70; background: #2a2a2e; border-radius: 999px; padding: 10px 14px; font-size: 14px; max-width: min(92vw, 420px); }
#toast[hidden] { display: none; }
.has-unread { position: relative; }
.has-unread::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 99px; background: #ff4d6a; }
body.player-open #stage, body:has(#overlay:not([hidden])) #stage { overflow: hidden; }
#stage, #rail, .sheet, .dialog, .popover { overscroll-behavior: contain; }
.square-row, .mix-rail, .scroller, .chips { overscroll-behavior-x: contain; }
input[type="range"] { accent-color: #fff; }

.bar { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; min-height: 44px; margin-bottom: 8px; }
.bar h1 { margin: 0; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.bar .play-main { width: 36px; height: 36px; }
.entity { text-align: center; }
.entity > h2 { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.entity-art { width: min(68%, 240px); aspect-ratio: 1; margin: 12px auto 0; border-radius: 22px; object-fit: cover; }
.entity-art.is-round { border-radius: 999px; }
.entity .meta, .meta { color: #8e8e93; font-size: 13px; }
.entity .meta { display: block; margin: 4px auto 0; }
.entity-actions { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 16px 0 8px; }
.text-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; background: #1c1c1e; color: #fff; font-size: 14px; font-weight: 600; }
.entity-banner { position: relative; height: 240px; border-radius: 18px; overflow: hidden; margin: 8px 0 4px; background: #141418; }
.entity-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entity-banner div { position: absolute; left: 14px; right: 72px; bottom: 14px; text-align: left; }
.entity-banner span { font-size: 12px; }
.entity-banner b { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.row-link { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; font-size: 16px; }
.row-link .tab-dot { top: 50%; left: auto; right: 4px; transform: translateY(-50%); }
.row-link small { display: block; color: #8e8e93; font-size: 12px; }
.row-link.is-unread b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 99px; background: #ff3b30; vertical-align: middle; }
.list { margin-top: 8px; }
.seg { display: flex; gap: 2px; margin: 8px 0; padding: 2px; border-radius: 10px; background: #1c1c1e; }
.seg-btn { flex: 1; min-height: 32px; border-radius: 8px; color: #8e8e93; font-size: 13px; font-weight: 500; }
.seg-btn.is-on { background: #2c2c2e; color: #fff; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 99px; background: #3a3a3c; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 99px; background: #fff; }
.switch.is-on { background: #fff; }
.switch.is-on::after { left: 22px; background: #111; }
.square-art img { width: 100%; height: 100%; object-fit: cover; }
.square > span:last-child { display: block; margin-top: 2px; color: #8e8e93; font-size: 10px; }
.lib-tile { display: grid; place-items: center; background: #1c1c1e; }
.lib-tile b { margin: 0; font-size: 18px; }
.mix-wrap { flex-wrap: wrap; }
.mix-wrap .wide-mix { flex: 0 0 100%; width: 100%; }
.entity .avatar-lg { margin: 18px auto 0; width: 88px; height: 88px; font-size: 32px; }

.home-screen { width: min(1120px, 100%); }
.home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 18px 0 22px; }
.home-greet { color: #a3a9b5; font-size: 14px; }
.home-top h1 { margin-top: 4px; font-size: 34px; font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.home-note { margin-top: 6px; color: #818a98; font-size: 14px; }
.home-tools { display: flex; align-items: center; gap: 8px; }
.home-tools > button { width: 40px; height: 40px; border-radius: 12px; background: #17171c; color: #f5f5f7; display: grid; place-items: center; }
.home-avatar { font-weight: 600; }
.home-hero { position: relative; min-height: 280px; border-radius: 24px; overflow: hidden; background: #10142c; }
.home-hero-art, .home-hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero-copy { position: relative; z-index: 1; max-width: 460px; padding: 32px; }
.home-hero-copy p { color: #d5d8e2; font-size: 14px; }
.home-hero-copy h2 { margin: 6px 0 8px; font-size: 36px; font-weight: 700; line-height: 1.05; }
.home-hero-actions { display: flex; gap: 10px; margin-top: 18px; }
.hero-play, .hero-explore { min-height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hero-play { background: #f5f5f7; color: #111; }
.hero-explore { background: transparent; color: #f5f5f7; border: 1px solid #3a3d48; }
.home-shelf { margin-top: 28px; }
.home-screen .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.home-screen .section-head h2 { font-size: 24px; font-weight: 700; }
.home-screen .section-head p { display: block; margin-top: 4px; color: #a3a9b5; font-size: 14px; }
.home-mixes { display: flex; gap: 16px; overflow-x: auto; }
.home-mixes .wide-mix { flex: 0 0 280px; width: 280px; height: 168px; }
.home-screen .desk-rows .ed-pop { grid-template-columns: 56px minmax(140px, 1.4fr) minmax(100px, 1fr) minmax(100px, 1fr) 52px 36px 36px; height: 78px; }
@media (max-width: 899px) {
  .home-top h1, .home-hero-copy h2 { font-size: 28px; }
  .home-hero { min-height: 240px; }
  .home-screen .desk-rows .ed-pop { grid-template-columns: 48px minmax(0, 1fr) 32px 32px; height: auto; }
  .home-screen .ed-pop-artist, .home-screen .ed-pop-album, .home-screen .ed-pop-time { display: none; }
}
.now-rail { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; margin: 0 0 58px; }
.now-rail::-webkit-scrollbar { display: none; }
.now-card { flex: 0 0 458px; height: 82px; border-radius: 19px; background: #17171c; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; }
.now-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: inherit; }
.now-card img { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; flex: none; }
.now-open span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.now-open b { font-size: 16px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.now-open em { color: #a3a9b5; font-size: 14px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.made { margin-top: 8px; }
.desk-home .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.desk-home .section-head h2 { font-size: 24px; font-weight: 700; letter-spacing: 0; }
.desk-home .see, .desk-home .linkish { color: #a3a9b5; font-size: 14px; }
.bento { width: min(1091px, 100%); display: grid; grid-template-columns: minmax(0, 426px) minmax(0, 316px) minmax(0, 315px); grid-template-areas: "daily rotation taste" "daily sounds sounds"; gap: 17px; }
.ed-bento-card { position: relative; overflow: hidden; border-radius: 21px; min-height: 192px; color: #fff; text-align: left; }
.ed-bento-card.span { grid-area: daily; min-height: 401px; }
.ed-bento-card.wide { grid-area: sounds; }
.ed-bento-card.tile:nth-of-type(2) { grid-area: rotation; }
.ed-bento-card.tile:nth-of-type(3) { grid-area: taste; }
.ed-bento-art, .ed-bento-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-bento-copy { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.ed-bento-copy b { font-size: 20px; font-weight: 700; }
.ed-bento-copy span { font-size: 14px; color: #d5d8df; }
.ed-bento-card:hover { filter: brightness(1.08); }
.mixes-block { margin-top: 36px; }
.home-hero { position: relative; height: 360px; border-radius: 22px; overflow: hidden; margin: 8px 0 8px; background: #141418; }
.home-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.78)); }
.home-hero-hit { position: absolute; inset: 0; }
.home-hero-copy { position: absolute; left: 18px; right: 84px; bottom: 18px; z-index: 1; text-align: left; }
.home-hero-title { display: block; color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; text-align: left; }
.home-hero-copy span { display: block; margin-top: 4px; color: #d5d8df; font-size: 14px; }
.home-hero .play-fab { position: absolute; right: 16px; bottom: 16px; top: auto; transform: none; z-index: 1; }
.home-section { margin-top: 28px; }
.artist-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; }
.artist-card { flex: 0 0 104px; width: 104px; color: inherit; text-align: center; }
.artist-card img, .artist-fallback { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: #1c1c22; }
.artist-fallback { display: grid; place-items: center; color: #f5f5f7; font-size: 28px; font-weight: 700; }
.artist-card b { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-rows .ed-pop { grid-template-columns: 56px minmax(160px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) 52px 36px 36px; height: 78px; min-height: 78px; gap: 8px; border-radius: 12px; }
.desk-rows .ed-pop img { width: 56px; height: 56px; border-radius: 12px; }
.desk-rows .ed-pop-title b { font-size: 17px; font-weight: 700; }
.desk-rows .ed-pop-artist, .desk-rows .ed-pop-album { display: block; font-size: 15px; color: #a3a9b5; text-align: left; }
.desk-rows .ed-pop-time { display: block; font-size: 14px; color: #818a98; }
.desk-rows .ed-pop.is-current .ed-pop-title b { color: #b98aff; }
.desk-rows .ed-pop:hover { background: #141418; }
.desk-rows .eq { display: none; }
@media (max-width: 899px) {
  #stage > .desk-home { width: 100%; }
  #rail { display: none; }
  #workspace { width: 100%; }
  #stage { padding: max(12px, env(safe-area-inset-top)) 16px calc(var(--nav) + var(--mini) + 12px); }
  #tabbar {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; width: 100%; transform: none;
    grid-template-columns: repeat(4, 1fr); height: calc(var(--nav) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: #000;
  }
  #mini { left: 8px; right: 8px; bottom: calc(var(--nav) + env(safe-area-inset-bottom) + 6px); height: 64px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
  #mini .mini-right { display: none; }
  #mini .icon-btn, #mini .js-play { width: 44px; height: 44px; }
  #mini .mini-center { gap: 8px; }
  .now-card { flex-basis: min(458px, 88%); }
  .home-hero { height: 240px; }
  .home-hero-title { font-size: 26px; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "daily" "rotation" "taste" "sounds"; }
  .ed-bento-card.span { min-height: 240px; }
  .desk-rows .ed-pop { grid-template-columns: 48px minmax(0, 1fr) 32px 32px; height: auto; }
  .desk-rows .ed-pop-artist, .desk-rows .ed-pop-album, .desk-rows .ed-pop-time { display: none; }
}
.player-bg { filter: none; }
.player-status { position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav) + 78px + env(safe-area-inset-bottom)); z-index: 28; margin: 0; text-align: center; color: #d5d8df; font-size: 13px; pointer-events: none; }
.player-status:empty { display: none; }
#stage > .desk-home { width: min(480px, 100%); margin-inline: auto; }
.neo-top { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.neo-avatar { width: 44px; height: 44px; border-radius: 999px; background: #24262c; color: #fff; font-weight: 700; font-size: 16px; display: grid; place-items: center; }
.neo-tools { display: flex; gap: 8px; }
.neo-tools button { width: 44px; height: 44px; border-radius: 999px; background: #16181c; color: #fff; display: grid; place-items: center; }
.neo-hi { margin: 18px 0 16px; font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.neo-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 8px; }
.neo-chips::-webkit-scrollbar { display: none; }
.neo-chip { flex: none; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #1a1c20; color: #f5f5f7; font-size: 14px; font-weight: 600; }
.neo-chip.is-on { background: #f4f4f6; color: #111; }
.neo-block { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.neo-block h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.03em; }
.neo-feature { position: relative; display: block; min-height: 232px; border-radius: 28px; overflow: hidden; background: #141418; color: #fff; }
.neo-feature-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 232px; padding: 22px; background: linear-gradient(180deg, rgba(0,0,0,.05) 18%, rgba(0,0,0,.78)); }
.neo-feature-title { color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; text-align: left; }
.neo-feature p { margin-top: 6px; color: rgba(255,255,255,.82); font-size: 14px; }
.neo-play { width: 48px; height: 48px; margin-top: 16px; border-radius: 999px; background: #fff; color: #111; display: grid; place-items: center; }
.neo-feature img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.neo-list { display: flex; flex-direction: column; gap: 4px; }
.neo-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; min-height: 72px; border-radius: 16px; }
.neo-row:hover { background: #121214; }
.neo-row-main { min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; color: inherit; padding-left: 4px; }
.neo-row img, .neo-fallback { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #1a1c20; }
.neo-row b, .neo-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neo-row b { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.neo-row small { margin-top: 3px; color: #a3a9b5; font-size: 13px; }
.neo-row-play { width: 34px; height: 34px; border-radius: 999px; background: #f4f4f6; color: #111; display: grid; place-items: center; justify-self: end; }
.neo-row-play svg { width: 14px; height: 14px; }
.neo-play:active, .neo-chip:active, .neo-tools button:active, .neo-row-play:active { opacity: 0.72; }
@media (max-width: 899px) {
  #stage > .desk-home { width: 100%; }
}
@media (max-width: 899px) {
  body { --nav: 86px; }
  #tabbar {
    left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto; height: 64px; padding-bottom: 0; border-radius: 22px;
    background: rgba(16, 16, 18, .9); border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
  }
  #tabbar button { color: #8d8d96; min-height: 64px; }
  #tabbar button.is-on { color: #fff; }
  #tabbar button.is-on::after { content: ""; width: 4px; height: 4px; border-radius: 99px; background: #b98aff; }
  #mini {
    left: 12px; right: 12px; height: 68px; border-radius: 18px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    background: rgba(20, 20, 24, .82); border-color: rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
  }
}
#player { transition: transform var(--dur-art) var(--ease-enter), background 480ms ease; }
.player-bg { filter: blur(46px) saturate(1.25); transform: scale(1.2); opacity: .78; background-size: cover; background-position: center; }
.player-shade { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 46%, rgba(0,0,0,.82)); }
.glass-round { width: 40px; height: 40px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.art-wrap img { width: min(62%, 300px); border-radius: 28px; }
.play-main { width: 68px; height: 68px; background: #fff; color: #111; }
.ctrl.is-on, [data-heart][aria-pressed="true"] { color: #b98aff; }
#player.is-warm .flat-title { display: block; }
#player.is-warm .dock-track { display: none; }
#player.is-warm .player-panel { margin-top: 8px; padding: 0; border: 0; background: none; backdrop-filter: none; }
.mini-seek { background: linear-gradient(#b98aff, #b98aff) center / 100% 3px no-repeat; }
.mini-seek i { background: #b98aff; }
#mini { background: rgba(20, 20, 24, .9); backdrop-filter: blur(18px); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-micro: 0ms; --dur-control: 0ms; --dur-card: 0ms; --dur-menu: 0ms; --dur-modal: 0ms; --dur-page: 0ms; --dur-art: 0ms; }
  .player-bg { transition: none; }
}
html[data-motion="reduce"] { --dur-instant: 0ms; --dur-micro: 0ms; --dur-control: 0ms; --dur-card: 0ms; --dur-menu: 0ms; --dur-modal: 0ms; --dur-page: 0ms; --dur-art: 0ms; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
}
html[data-theme="light"] #rail, html[data-theme="light"] #tabbar { background: #fff; }
html[data-theme="light"] #mini, html[data-theme="light"] .sheet, html[data-theme="light"] .popover { background: #fff; color: #111; }