:root {
  color-scheme: dark;
  --bg:#100e16; --side:#15121d; --raised:#201a2b; --ink:#f7f2fa;
  --muted:#aaa0b6; --line:#30283b; --accent:#ceafff; --bright:#e8d7ff;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace;
  --player-height:94px;
}
* {box-sizing:border-box}
body {margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--body);padding-bottom:var(--player-height)}
[hidden] {display:none!important}
button,input {font:inherit}
button {cursor:pointer;color:inherit}
button:disabled {cursor:default;opacity:.4}
button:focus-visible,a:focus-visible,input:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
a {color:inherit;text-decoration:none}
.app {display:grid;grid-template-columns:218px minmax(0,1fr);min-height:calc(100dvh - var(--player-height))}
.sidebar {display:flex;flex-direction:column;align-items:stretch;gap:42px;background:var(--side);border-right:1px solid var(--line);padding:30px 19px 24px}
.brand {display:flex;align-items:center;gap:8px;width:max-content;padding-inline:6px;font:800 29px/1 var(--display);letter-spacing:-.072em}
.brand .period {color:var(--accent);margin-left:-6px}
.brand-mark {display:flex;gap:3px;align-items:center;justify-content:center;width:29px;height:29px;border:1px solid #785e97;border-radius:8px;margin-right:4px}
.brand-mark i {width:2px;border-radius:2px;background:var(--accent);height:10px}
.brand-mark i:nth-child(2) {height:16px}
.brand-mark i:nth-child(3) {height:13px}
.brand-mark i:nth-child(4) {height:7px}
.nav {display:grid;gap:5px}
.nav button {display:flex;gap:10px;align-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted);text-align:left;padding:10px 11px;font-weight:700}
.nav button:hover,.nav button[aria-current] {background:#2a2138;color:var(--ink)}
.nav button>span:first-child {width:17px;color:var(--accent)}
.file-count {margin-left:auto;font:11px var(--mono)}
.import-panel {margin-top:auto;border:1px solid var(--line);border-radius:13px;padding:15px 12px;color:var(--ink)}
.import-symbol {display:grid;place-items:center;width:30px;height:30px;margin-bottom:10px;border-radius:8px;background:#34254a;color:var(--accent);font-size:19px}
.import-panel strong {font-size:13px}
.import-panel p {margin:5px 0 13px;color:var(--muted);font-size:12px}
.import-panel button {width:100%;padding:7px 6px;border:1px solid #4b385f;border-radius:7px;background:transparent;font:600 11px var(--body)}
.import-panel button:hover {background:#34254a}
main {min-width:0;width:min(100%,1400px);margin-inline:auto;padding:19px clamp(16px,3.2vw,49px) 26px}
.topbar,.section-top,.queue-header {display:flex;align-items:center;justify-content:space-between;gap:14px}
.topbar {margin-bottom:16px}
.search {display:flex;align-items:center;gap:8px;width:min(310px,68%);height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:#17131f}
.search>span {font-size:22px;line-height:1}
.search:focus-within {border-color:var(--accent)}
.search input {min-width:0;width:100%;outline:none;background:none;border:0;color:var(--ink);font-size:13px}
.search input:focus-visible {outline:none}
.search input::placeholder {color:var(--muted)}
kbd {font:11px var(--mono);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.quiet-button {display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#17131f;color:var(--ink);font-size:12px;font-weight:700}
.quiet-button:hover,.quiet-button[aria-expanded=true] {border-color:#7c5da1;background:#2a2138}
.quiet-button span {color:var(--accent)}
.hero {min-height:330px;display:flex;align-items:flex-end;position:relative;border:1px solid #443154;border-radius:15px;overflow:hidden;background:linear-gradient(90deg,#161021 1%,#161021da 27%,#18102033 70%),url('./media/night-transit.webp') 50% 54%/cover,#211530}
.hero-content {padding:29px 34px 27px;position:relative}
.eyebrow {display:flex;align-items:center;gap:8px;margin:0;color:var(--accent);font:500 10px/1.35 var(--mono);letter-spacing:.12em}
.eyebrow span {height:1px;width:14px;background:#be9cef}
h1,h2 {font-family:var(--display);margin:0;font-weight:800}
h1 {font-size:clamp(52px,8.1vw,105px);letter-spacing:-.069em;line-height:.78;margin-top:14px}
h1 span {color:var(--accent)}
.hero p {color:#e2d8e8;margin:14px 0 17px;font-size:14px}
.primary {display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#21152e;border:0;border-radius:7px;padding:9px 15px;font-weight:800}
.primary:hover,.player-play:hover {background:var(--bright)}
.play-glyph {display:block;width:12px;height:13px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.is-playing .play-glyph {clip-path:polygon(0 0,36% 0,36% 100%,0 100%,0 0,64% 0,100% 0,100% 100%,64% 100%,64% 0)}
.library {margin-top:22px}
.section-top {margin-bottom:10px}
h2 {font-size:clamp(24px,3.5vw,34px);letter-spacing:-.055em;line-height:1.08;margin-top:4px}
.track-head,.track {display:grid;grid-template-columns:27px minmax(0,1fr) minmax(94px,.45fr) 49px 30px;align-items:center;gap:12px;padding:0 9px}
.track-head {min-height:27px;color:var(--muted);font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.tracks,.queue-tracks {list-style:none;padding:0;margin:0}
.track {min-height:52px;border-bottom:1px solid #272031}
.track:hover,.track[data-active=true] {background:#1b1624}
.track-index,.track-time {color:var(--muted);font:11px var(--mono)}
.track[data-active=true] .track-index {color:var(--accent)}
.track[data-playing=true] .track-index {font-size:0}
.track[data-playing=true] .track-index::before {content:"";display:inline-block;width:13px;height:12px;background:currentColor;clip-path:polygon(0 50%,20% 50%,20% 100%,0 100%,0 50%,40% 0,60% 0,60% 100%,40% 100%,40% 0,80% 28%,100% 28%,100% 100%,80% 100%,80% 28%)}
.track-info {display:flex;min-width:0;align-items:center;gap:11px;padding:5px 0;text-align:left;background:none;border:0}
.track-info:hover strong {color:var(--accent)}
.track-info>span:last-child {display:grid;min-width:0}
.track-info strong,.track-info small,.now-copy strong,.now-copy span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-info strong {font-size:13px}
.track-info small,.track-genre,.now-copy span {font-size:11px;color:var(--muted)}
.cover {flex:none;width:32px;height:32px;border:1px solid #ffffff21;border-radius:5px;background:#4e3b68 center/cover}
.cover[data-art="transit"] {background-image:url('./media/night-transit.webp');background-position:74% 55%}
.cover[data-art="glass"] {background:repeating-linear-gradient(138deg,#271c44 0 6px,#9fc7e3 7px,#495d88 8px 12px)}
.cover[data-art="orbit"] {background:radial-gradient(circle at 51% 57%,#221112 28%,#efa188 31%,#8c3e52 37%,#352238 40%,#140e22 64%)}
.cover[data-art="light"] {background:linear-gradient(158deg,#2d3d75 20%,#c477aa 48%,#f8bfa3 52%,#674a8e 54%,#301831 100%)}
.cover[data-art="local"] {background:repeating-linear-gradient(135deg,#514170 0 3px,#252039 4px 7px)}
.icon-button {display:grid;place-items:center;min-width:30px;min-height:32px;padding:0;background:none;border:0;border-radius:7px;color:var(--muted);font-size:17px}
.icon-button:hover {background:#332745;color:var(--ink)}
.icon-button[aria-pressed=true],.icon-button[data-mode]:not([data-mode="off"]) {color:var(--accent)}
.empty {margin:18px 0;color:var(--muted)}
.player {position:fixed;z-index:4;bottom:0;left:0;right:0;min-height:var(--player-height);display:grid;grid-template-columns:minmax(115px,1fr) minmax(245px,1.65fr) minmax(95px,1fr);gap:18px;align-items:center;background:#17131ff5;border-top:1px solid #443655;padding:8px clamp(14px,3vw,44px) max(8px,env(safe-area-inset-bottom));backdrop-filter:blur(18px)}
.now {display:flex;align-items:center;gap:9px;min-width:0}
.now-cover {width:46px;height:46px}
.now-copy {display:grid;min-width:0}
.now-copy strong {font-size:13px}
.transport {min-width:0;width:min(100%,490px);justify-self:center}
.transport-buttons {display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:3px}
.player-play {display:grid;place-items:center;background:var(--accent);color:#271938;width:40px;height:40px;border-radius:50%;border:0}
.player-play:not(.is-playing) .play-glyph {translate:1px 0}
.skip-glyph {display:block;width:13px;height:11px;position:relative}
.skip-glyph::before {content:"";position:absolute;inset:0 3px 0 0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.skip-glyph::after {content:"";position:absolute;inset:0 0 0 auto;width:2px;background:currentColor}
.previous-glyph {transform:scaleX(-1)}
.seek-line {display:grid;grid-template-columns:35px minmax(0,1fr) 35px;gap:6px;align-items:center;color:var(--muted);font:10px var(--mono)}
.seek-line span:last-child {text-align:right}
input[type=range] {width:100%;height:15px;margin:0;accent-color:#c9a7ff;cursor:pointer}
.volume {display:flex;align-items:center;gap:7px;width:min(100%,111px);justify-self:end}
.volume .icon-button {font:500 12px var(--mono)}
.queue-panel {position:fixed;right:18px;top:67px;bottom:calc(var(--player-height) + 12px);z-index:6;width:min(340px,calc(100% - 36px));overflow:auto;background:#21192d;border:1px solid #5a4272;border-radius:13px;padding:17px;box-shadow:0 22px 70px #0009}
.queue-header {margin-bottom:13px}
.queue-tracks li+li {border-top:1px solid var(--line)}
.queue-tracks button {display:block;width:100%;text-align:left;border:0;background:none;border-radius:6px;padding:9px;color:var(--ink)}
.queue-tracks button:hover {background:#322542}
.queue-tracks small {display:block;color:var(--muted)}
.drop-overlay {position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:10;background:#1a1228e8}
.drop-overlay div {padding:55px 24px;border:2px dashed var(--accent);border-radius:16px;font:800 clamp(27px,6vw,70px) var(--display)}
.toast {position:fixed;right:16px;bottom:calc(var(--player-height) + 12px);z-index:9;max-width:min(360px,calc(100% - 32px));margin:0;background:#332547;border:1px solid #795c99;border-radius:8px;padding:9px 13px;color:var(--ink)}
@media(max-width:800px) {
  .app {grid-template-columns:150px minmax(0,1fr)}
  .sidebar {padding-inline:10px}
  .brand {font-size:24px}
  .hero-content {padding-inline:20px}
}
@media(max-width:610px) {
  :root {--player-height:106px}
  .app {display:block}
  .sidebar {flex-direction:row;align-items:center;justify-content:space-between;gap:7px;border-right:0;border-bottom:1px solid var(--line);padding:11px 13px}
  .brand {padding-inline:0}
  .nav {display:flex;gap:1px}
  .nav button {gap:4px;padding:7px 5px;font-size:11px;white-space:nowrap}
  .nav button>span:first-child {width:auto}
  .file-count,.import-panel,.search kbd,.volume {display:none}
  main {padding-top:12px}
  .topbar {margin-bottom:11px}
  .hero {min-height:286px;background-position:57% center}
  .hero-content {padding:23px 15px}
  .hero p {font-size:13px}
  .track-head,.track {grid-template-columns:19px minmax(0,1fr) 33px 25px;gap:7px;padding-inline:4px}
  .track-head span:nth-child(3),.track-genre {display:none}
  .track-info {gap:7px}
  .icon-button {min-width:25px}
  .player {grid-template-columns:minmax(0,1fr) minmax(150px,1.6fr);gap:8px;padding-inline:10px}
  .now-cover {width:32px;height:32px}
  .now {gap:5px}
  .now-copy strong {font-size:11px}
  .transport-buttons {gap:3px}
  .player-play {width:36px;height:36px}
  .seek-line {grid-template-columns:28px minmax(0,1fr) 28px;gap:3px}
  .queue-panel {top:99px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important}}

.topbar-actions {display:flex;gap:7px}
.live-dot {width:7px;height:7px;border-radius:50%;background:#ab87cf}
.is-sharing .live-dot {background:#b5f1cc;box-shadow:0 0 8px #b5f199}
.together-panel .eyebrow {text-transform:uppercase}
.together-panel #together-status,.together-form p {color:var(--muted);font-size:13px}
.listener-list {list-style:none;padding:0;margin:0 0 15px}
.listener-list li {display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.listener-avatar {display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#423052;color:var(--bright);font-weight:700}
.listener-name {overflow-wrap:anywhere;font-weight:700}
.listener-country {margin-left:auto;color:var(--muted);font:11px var(--mono);overflow-wrap:anywhere;text-align:right}
.together-form {display:grid;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.together-form p {margin:0}
.together-form label {display:grid;grid-template-columns:max-content 1fr;gap:4px 7px;font-size:12px;font-weight:700}
.together-form label span {color:var(--muted);font-weight:400}
.together-form input {grid-column:1/-1;width:100%;padding:7px 9px;border:1px solid #594467;background:var(--bg);color:var(--ink);border-radius:6px}
.together-form button {justify-self:start}
@media(max-width:610px) {
  .search {width:auto;flex:1}
  .topbar {gap:7px}
  .topbar-actions .quiet-button {padding-inline:7px}
}