@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
  U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
  U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
  --bg: #050505;
  --text: #d7d7d7;
  --text-soft: #9a9a9a;
  --text-dim: #686868;
  --white: #f1f1f1;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.15);
  --surface: rgba(12,12,12,.86);
  --pulse: 0;
  --mono: 'JetBrains Mono','Cascadia Mono','SF Mono',ui-monospace,'Consolas',monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: var(--bg);
  font-family: var(--mono); color: var(--text);
  cursor: url('../cursors/Arrow.cur'), auto;
}
html { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a, button, [role='slider'] { cursor: url('../cursors/Hand.cur'), pointer; }
button { font: inherit; }
html.konami { filter: invert(1) grayscale(1); }

.bg-video {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(1) saturate(0) contrast(1.04) brightness(.34);
  transform: scale(1.035); pointer-events: none;
}
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(0,0,0,.50);
  transform: scale(calc(1 + var(--pulse) * .0035));
  transition: transform .14s ease-out;
}
#trail, #viz {
  position: fixed; left: 0; z-index: 1; pointer-events: none;
  transition: opacity .8s ease;
}
#trail { top: 0; opacity: .20; }
#viz { bottom: 0; opacity: 0; }
body.entered #trail, body.entered #viz { opacity: 1; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(115% 105% at 50% 50%, transparent 48%, rgba(0,0,0,.20) 78%, rgba(0,0,0,.34) 100%);
}
.grain {
  position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 6;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(5) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)}20%{transform:translate(-3%,-4%)}40%{transform:translate(-6%,2%)}
  60%{transform:translate(3%,-3%)}80%{transform:translate(-2%,5%)}100%{transform:translate(0,0)}
}

.stage {
  position: relative; z-index: 2; height: 100dvh; display: flex;
  align-items: center; justify-content: center; opacity: 0;
  transition: opacity 1s ease .1s;
}
body.entered .stage { opacity: 1; }
.links {
  width: min(90vw, 360px); display: flex; flex-direction: column; align-items: center;
  gap: 17px; padding: 28px 26px 24px; border-radius: 30px;
  border: 1px solid rgba(255,255,255,.048);
  background: rgba(8,8,8,.18);
  box-shadow: 0 28px 75px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.profile-card { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:4px; }
.avatar-orbit {
  position: relative; width: 154px; height: 154px; display: grid; place-items:center;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,.52));
  animation: orbitFloat 7s ease-in-out infinite; will-change: transform;
}
@keyframes orbitFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
.avatar-orbit::before {
  content:''; position:absolute; inset:20px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.035), transparent 68%);
  box-shadow: 0 0 42px rgba(255,255,255,.035);
}
.orbit-ring { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.085); }
.orbit-ring-a { inset:6px; animation: spin 17s linear infinite; }
.orbit-ring-b { inset:21px; border-color:rgba(255,255,255,.055); animation: spinRev 12s linear infinite; }
.orbit-ring-c { inset:35px; border-color:rgba(255,255,255,.07); animation: spin 22s linear infinite; }
.orbit-planet {
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#8c8c8c 64%,#3d3d3d);
  box-shadow:0 0 12px rgba(255,255,255,.18);
}
.orbit-planet-a { animation: dotA 9s linear infinite; }
.orbit-planet-b { width:5px;height:5px; animation: dotB 7.4s linear infinite; }
.orbit-planet-c { width:4px;height:4px; animation: dotC 12.5s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes spinRev { to{transform:rotate(-360deg)} }
@keyframes dotA { from{transform:rotate(0) translateX(73px)}to{transform:rotate(360deg) translateX(73px)} }
@keyframes dotB { from{transform:rotate(0) translateX(57px)}to{transform:rotate(-360deg) translateX(57px)} }
@keyframes dotC { from{transform:rotate(0) translateX(40px)}to{transform:rotate(360deg) translateX(40px)} }
.avatar-shell {
  position:relative; z-index:2; width:100px; height:100px; padding:3px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); overflow:hidden; background:#080808;
  box-shadow:0 16px 34px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.04);
}
.avatar-shell::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 34%,rgba(0,0,0,.18));
}
.avatar { width:100%; height:100%; object-fit:cover; border-radius:50%; filter:grayscale(1) contrast(1.06) brightness(.94); }
.identity {
  display:flex; align-items:center; color:#ececec; font-size:18px; line-height:1;
  letter-spacing:.24em; text-transform:lowercase; text-shadow:0 0 14px rgba(255,255,255,.08);
}
.identity::before { content:'/'; margin-right:10px; color:#dedede; }
.row { width:100%; display:flex; justify-content:center; opacity:0; transform:translateY(12px); transition:opacity .65s ease var(--d),transform .65s cubic-bezier(.2,.8,.2,1) var(--d); }
body.entered .row { opacity:1; transform:none; }
.links a {
  position:relative; display:inline-block; color:#bdbdbd; text-decoration:none;
  font-size:27px; letter-spacing:.055em; line-height:1; padding:7px 0; white-space:nowrap;
  transition:color .25s ease,padding-left .32s cubic-bezier(.2,.8,.2,1),transform .18s ease;
}
.links a::before {
  content:''; position:absolute; left:0; top:50%; width:0; height:1px; background:#ddd;
  box-shadow:0 0 7px rgba(255,255,255,.28); transition:width .32s cubic-bezier(.2,.8,.2,1);
}
.links a:hover,.links a:focus-visible { color:#fff; padding-left:40px; outline:none; }
.links a:hover::before,.links a:focus-visible::before { width:27px; }
@keyframes glitch { 0%,100%{transform:none;text-shadow:none}40%{transform:translateX(1px);text-shadow:-1px 0 #aaa}70%{transform:translateX(-1px);text-shadow:1px 0 #666} }
.links a:hover .t { animation:glitch .25s steps(1) 1; }
.t { display:inline-block; }

/* compact dynamic island */
.island-player {
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:5;
  width:min(94vw, 520px); transform:translate(-50%,18px) scale(.975); opacity:0;
  transition:opacity .38s ease,transform .6s cubic-bezier(.18,.9,.24,1.12);
}
body.entered .island-player { opacity:1; transform:translate(-50%,0) scale(1); }
.island-shell {
  display:grid; grid-template-columns:66px minmax(0,1fr); gap:12px; align-items:center;
  min-height:132px; padding:12px 14px; border-radius:28px;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(10,10,10,.94));
  box-shadow:0 18px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.island-player:hover .island-shell {
  transform:translateY(-2px); border-color:rgba(255,255,255,.12);
  box-shadow:0 22px 72px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.065);
}
.cover-wrap {
  position:relative; width:66px; height:66px; overflow:hidden; border:0; border-radius:18px;
  background:#111; box-shadow:0 8px 24px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .28s ease;
}
.cover-wrap:hover { transform:scale(1.025); }
.track-cover { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(.92); transition:opacity .22s ease,transform .45s ease; }
body.playing .track-cover { transform:scale(1.035); }
.cover-edge { position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none; }
.island-main { min-width:0; display:flex; flex-direction:column; gap:8px; }
.meta-row { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.track-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.track-title { color:#f0f0f0; font-size:14px; line-height:1.15; letter-spacing:.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist { color:#737373; font-size:9.5px; letter-spacing:.07em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-toggle {
  width:31px; height:31px; flex:0 0 auto; border-radius:11px; border:1px solid transparent;
  background:transparent; color:#858585; display:grid; place-items:center;
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.queue-toggle:hover,.queue-toggle.active { color:#eee; border-color:var(--line); background:rgba(255,255,255,.025); }
.eq-mini { width:18px; height:15px; display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.eq-mini i { width:2px; min-height:3px; background:currentColor; border-radius:99px; opacity:.8; }
.eq-mini i:nth-child(1){height:7px}.eq-mini i:nth-child(2){height:13px}.eq-mini i:nth-child(3){height:10px}.eq-mini i:nth-child(4){height:5px}
body.playing .eq-mini i { animation:eq .72s ease-in-out infinite alternate; }
body.playing .eq-mini i:nth-child(2){animation-delay:.12s}body.playing .eq-mini i:nth-child(3){animation-delay:.25s}body.playing .eq-mini i:nth-child(4){animation-delay:.38s}
@keyframes eq { from{transform:scaleY(.45);opacity:.45}to{transform:scaleY(1);opacity:1} }
.progress-row { display:grid; grid-template-columns:34px minmax(0,1fr) 42px; gap:8px; align-items:center; }
.time { color:#707070; font-size:8.5px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.time-right { text-align:right; }
.seek,.vol { position:relative; display:flex; align-items:center; height:14px; touch-action:none; }
.seek .rail,.vol .rail { position:absolute; left:0; right:0; height:3px; border-radius:99px; background:rgba(255,255,255,.10); }
.seek .fill,.vol .fill { position:absolute; left:0; width:0; height:3px; border-radius:99px; background:linear-gradient(90deg,#d8d8d8,#aaa); box-shadow:0 0 8px rgba(255,255,255,.10); }
.seek .knob { position:absolute; left:0; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#ededed; opacity:0; box-shadow:0 0 8px rgba(255,255,255,.20); transition:opacity .15s; }
.seek:hover .knob,.seek.drag .knob,.seek:focus-visible .knob { opacity:1; }
.seek:focus-visible,.vol:focus-visible { outline:none; }
.control-row { display:grid; grid-template-columns:32px 32px 38px 32px 32px 32px minmax(58px,1fr); gap:6px; align-items:center; }
.icon-btn {
  position:relative; width:32px; height:32px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:#a7a7a7; display:grid; place-items:center;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.icon-btn:hover,.icon-btn:focus-visible { color:#fff; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.025); outline:none; transform:translateY(-1px); }
.icon-btn.active { color:#fff; background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.10); }
.icon-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn svg .fill { fill:currentColor; stroke:none; }
.play-main { width:38px; height:38px; border-radius:13px; color:#f5f5f5; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); }
.play-main svg { width:19px; height:19px; }
body.playing .play-main { box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 0 20px rgba(255,255,255,.025); }
.repeat-one { position:absolute; right:3px; bottom:2px; font-size:7px; line-height:1; color:#f2f2f2; opacity:0; }
.repeat-btn.one .repeat-one { opacity:1; }
.island-vol { min-width:58px; }

.playlist-panel {
  position:absolute; left:0; right:0; bottom:calc(100% + 9px); padding:9px; border-radius:20px;
  border:1px solid rgba(255,255,255,.075); background:rgba(10,10,10,.91);
  box-shadow:0 16px 45px rgba(0,0,0,.42); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; transform:translateY(8px) scale(.985); pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}
.playlist-panel.open { opacity:1; transform:none; pointer-events:auto; }
.playlist-head { display:flex; justify-content:space-between; align-items:center; padding:2px 5px 8px; color:#666; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; }
.playlist-items { display:flex; flex-direction:column; gap:4px; }
.playlist-item {
  width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; align-items:center;
  padding:6px 8px; border-radius:12px; border:1px solid transparent; background:transparent; color:#999; text-align:left;
  transition:background .18s,border-color .18s,color .18s;
}
.playlist-item:hover,.playlist-item.active { color:#eee; background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.05); }
.playlist-thumb { width:34px; height:34px; border-radius:9px; object-fit:cover; filter:grayscale(1) contrast(1.03) brightness(.90); }
.playlist-item-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.playlist-item-title { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playlist-item-artist { color:#666; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playlist-item-status { color:#666; font-size:8px; }
.playlist-item.active .playlist-item-status { color:#aaa; }

.corner { position:fixed; top:14px; right:18px; z-index:4; color:#676767; font-size:8.5px; letter-spacing:.16em; opacity:.23; pointer-events:none; }
.corner b { color:#9b9b9b; font-weight:400; margin-left:5px; }
.gate { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease .35s; }
.gate.gone { opacity:0; pointer-events:none; }
.bands { position:absolute; inset:0; overflow:hidden; }
.bands b { position:absolute; left:-2%; width:104%; background:rgba(0,0,0,.96); transition:transform .55s cubic-bezier(.7,0,.3,1),opacity .5s ease; }
.gate.gone .bands b { transform:translateX(var(--x)); opacity:0; }
.gate-line { position:relative; z-index:1; display:flex; align-items:center; gap:3px; font-size:13px; letter-spacing:.18em; color:#696969; white-space:nowrap; transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease; }
.gate.gone .gate-line { opacity:0; }
.gate-ok { color:#ddd; }
.caret { display:inline-block; width:.55em; height:1.15em; background:#bbb; animation:caret 1.1s steps(1) infinite; }
.gate.typing .caret { animation:none; }
@keyframes caret { 0%,49%{opacity:1}50%,100%{opacity:.06} }
.flash { position:fixed; inset:0; z-index:9; pointer-events:none; opacity:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 2px,transparent 2px 5px),rgba(0,0,0,.38); }
.flash.on { animation:flash .32s steps(2) 1; }
@keyframes flash { 0%{opacity:0;transform:none}30%{opacity:1;transform:translateX(-4px)}60%{opacity:.6;transform:translateX(4px)}100%{opacity:0;transform:none} }

@media (max-width:620px) {
  .links { width:min(90vw,330px); padding:24px 22px 22px; gap:16px; }
  .links a { font-size:23px; }
  .avatar-orbit { width:142px; height:142px; }
  .avatar-shell { width:92px; height:92px; }
  .island-player { width:min(95vw,500px); bottom:calc(10px + env(safe-area-inset-bottom)); }
  .island-shell { grid-template-columns:58px minmax(0,1fr); min-height:118px; padding:10px 11px; gap:10px; border-radius:24px; }
  .cover-wrap { width:58px; height:58px; border-radius:16px; }
  .track-title { font-size:12.5px; }
  .track-artist { font-size:8.5px; }
  .control-row { grid-template-columns:30px 30px 36px 30px 30px 30px minmax(48px,1fr); gap:4px; }
  .icon-btn { width:30px; height:30px; }
  .play-main { width:36px; height:36px; }
}
@media (max-width:430px) {
  .island-shell { grid-template-columns:52px minmax(0,1fr); }
  .cover-wrap { width:52px; height:52px; border-radius:14px; }
  .progress-row { grid-template-columns:30px minmax(0,1fr) 36px; gap:6px; }
  .time { font-size:7.8px; }
  .control-row { grid-template-columns:28px 28px 34px 28px 28px 28px minmax(42px,1fr); gap:3px; }
  .icon-btn { width:28px; height:28px; border-radius:9px; }
  .icon-btn svg { width:16px; height:16px; }
  .play-main { width:34px; height:34px; }
}


/* --- v6 compact reference-style media island --- */
.island-player {
  width: min(92vw, 500px) !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  transform: translate(-50%, 12px) scale(.985) !important;
}
body.entered .island-player { transform: translate(-50%, 0) scale(1) !important; }
.island-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  min-height: 0 !important;
  height: 154px !important;
  padding: 12px 14px 11px !important;
  border-radius: 27px !important;
  background: rgba(29,29,30,.96) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(24px) saturate(.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(.72) !important;
  overflow: visible !important;
  position: relative;
}
.island-shell::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%, rgba(0,0,0,.055));
}
.island-player:hover .island-shell { transform: none !important; border-color: rgba(255,255,255,.095) !important; box-shadow:0 20px 58px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.045) !important; }
.island-top { display:grid; grid-template-columns:58px minmax(0,1fr) 34px; gap:12px; align-items:center; min-height:58px; position:relative; z-index:1; }
.cover-wrap { width:58px !important; height:58px !important; border-radius:17px !important; box-shadow:0 5px 18px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
.track-cover { filter: contrast(1.05) brightness(.82) saturate(.72) !important; transform: scale(1.015); transition: opacity .16s ease, transform .32s cubic-bezier(.2,.8,.2,1), filter .3s ease !important; }
body.playing .track-cover { transform: scale(1.055) !important; }
.island-shell.track-swap .track-cover { opacity:.25 !important; transform:scale(.94) !important; }
.track-meta { gap:4px !important; align-self:center; }
.track-title { font-size:14px !important; font-weight:600; letter-spacing:.01em !important; color:#f0f0f0 !important; }
.track-artist { font-size:9px !important; letter-spacing:.055em !important; color:#7b7b7d !important; }
.queue-toggle { width:34px !important; height:34px !important; border-radius:12px !important; color:#b8b8b8 !important; }
.eq-mini { width:20px !important; height:18px !important; gap:2px !important; }
.eq-mini i { width:2.5px !important; background:currentColor !important; }
.progress-row { grid-template-columns:30px minmax(0,1fr) 38px !important; gap:7px !important; min-height:15px; position:relative; z-index:1; }
.time { font-size:8.3px !important; color:#707073 !important; }
.seek { height:12px !important; }
.seek .rail { height:4px !important; background:rgba(255,255,255,.16) !important; }
.seek .fill { height:4px !important; background:linear-gradient(90deg,#c6c6c6,#dddddd) !important; box-shadow:none !important; }
.seek .knob { width:7px !important; height:7px !important; margin-left:-3.5px !important; background:#e6e6e6 !important; }
.control-row { display:flex !important; align-items:center !important; justify-content:space-around !important; gap:0 !important; width:100%; flex:1; position:relative; z-index:2; padding:0 7px; }
.icon-btn { width:34px !important; height:34px !important; border-radius:10px !important; color:#e7e7e9 !important; background:transparent !important; border:0 !important; }
.icon-btn:hover,.icon-btn:focus-visible { transform:scale(1.07) !important; background:rgba(255,255,255,.035) !important; }
.icon-btn.active { color:#d2d2d2 !important; background:rgba(255,255,255,.055) !important; }
.icon-btn svg { width:21px !important; height:21px !important; stroke-width:2 !important; }
.skip-btn svg { width:26px !important; height:26px !important; }
.play-main { width:38px !important; height:38px !important; border-radius:12px !important; background:rgba(255,255,255,.02) !important; color:#fff !important; }
.play-main svg { width:25px !important; height:25px !important; }
.repeat-one { right:2px !important; bottom:1px !important; font-size:7px !important; }
.volume-btn.active { color:#d2d2d2 !important; }
.playlist-panel {
  left:0 !important; right:0 !important; bottom:calc(100% + 8px) !important;
  max-height:250px; overflow:hidden; padding:9px !important; border-radius:20px !important;
  background:rgba(24,24,25,.97) !important; border-color:rgba(255,255,255,.075) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.43) !important;
}
.playlist-items { max-height:210px; overflow:auto; }
.playlist-thumb { filter:contrast(1.04) brightness(.72) saturate(.62) !important; }
.playlist-item { border-radius:11px !important; }

.volume-popover {
  position:absolute; right:17px; bottom:calc(100% - 7px); width:52px; height:154px; z-index:12;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
  padding:9px 8px 8px; border-radius:26px;
  background:rgba(31,31,32,.98); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; transform:translateY(10px) scale(.94); pointer-events:none;
  transform-origin:50% 100%; transition:opacity .16s ease, transform .22s cubic-bezier(.2,.85,.2,1.08);
}
.volume-popover.open { opacity:1; transform:none; pointer-events:auto; }
.volume-percent { height:14px; font-size:8px; color:#8a8a8d; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.volume-slider-v { position:relative; width:28px; flex:1; min-height:92px; touch-action:none; outline:none; }
.volume-rail-v { position:absolute; left:50%; top:0; bottom:0; width:8px; transform:translateX(-50%); border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.volume-fill-v { position:absolute; left:50%; bottom:0; width:8px; height:35%; transform:translateX(-50%); border-radius:99px; background:linear-gradient(180deg,#e6e6e6,#b5b5b5); }
.volume-knob-v { position:absolute; left:50%; bottom:35%; width:17px; height:17px; transform:translate(-50%,50%); border-radius:50%; background:#f2f2f2; box-shadow:0 2px 7px rgba(0,0,0,.38); }
.volume-mute-mini { width:26px; height:26px; display:grid; place-items:center; color:#bbb; background:transparent; border:0; border-radius:9px; }
.volume-mute-mini:hover { color:#fff; background:rgba(255,255,255,.035); }
.volume-mute-mini svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.volume-mute-mini svg .fill { fill:currentColor; stroke:none; }

@media (max-width:620px) {
  .island-player { width:min(94vw, 480px) !important; bottom:calc(10px + env(safe-area-inset-bottom)) !important; }
  .island-shell { height:146px !important; padding:10px 12px 9px !important; border-radius:24px !important; gap:8px !important; }
  .island-top { grid-template-columns:54px minmax(0,1fr) 32px; gap:10px; min-height:54px; }
  .cover-wrap { width:54px !important; height:54px !important; border-radius:15px !important; }
  .track-title { font-size:12.5px !important; }
  .track-artist { font-size:8.4px !important; }
  .icon-btn { width:32px !important; height:32px !important; }
  .skip-btn svg { width:24px !important; height:24px !important; }
  .volume-popover { right:10px; height:146px; }
}
@media (max-width:420px) {
  .island-player { width:94vw !important; }
  .island-shell { height:140px !important; padding:9px 10px 8px !important; border-radius:22px !important; }
  .island-top { grid-template-columns:50px minmax(0,1fr) 30px; min-height:50px; gap:9px; }
  .cover-wrap { width:50px !important; height:50px !important; border-radius:14px !important; }
  .track-title { font-size:11.5px !important; }
  .track-artist { font-size:7.8px !important; }
  .control-row { padding:0 2px; }
  .icon-btn { width:30px !important; height:30px !important; }
  .play-main { width:34px !important; height:34px !important; }
}


/* === sacred v7: tighter monochrome island + readable sparse vocabulary === */
#trail { opacity:.48 !important; }

.island-player {
  width:min(92vw, 440px) !important;
  bottom:calc(12px + env(safe-area-inset-bottom)) !important;
}
.island-shell {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  height:132px !important;
  min-height:0 !important;
  gap:6px !important;
  padding:9px 11px 8px !important;
  border-radius:24px !important;
  background:rgba(13,13,13,.965) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(22px) !important;
  -webkit-backdrop-filter:blur(22px) !important;
}
.island-shell::before {
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%,rgba(0,0,0,.035)) !important;
}
.island-player:hover .island-shell {
  transform:none !important;
  border-color:rgba(255,255,255,.11) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.island-top {
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) 28px !important;
  gap:10px !important;
  min-height:52px !important;
  align-items:center !important;
}
.cover-wrap {
  width:52px !important;
  height:52px !important;
  border-radius:14px !important;
  box-shadow:0 5px 15px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.065) !important;
}
.track-cover {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
  filter:grayscale(1) contrast(1.04) brightness(.88) !important;
}
body.playing .track-cover { transform:scale(1.025) !important; }
.track-meta { gap:3px !important; }
.track-title {
  font-size:12.4px !important;
  line-height:1.12 !important;
  font-weight:600 !important;
  color:#f0f0f0 !important;
  letter-spacing:.008em !important;
}
.track-artist {
  font-size:8.2px !important;
  color:#777 !important;
  letter-spacing:.05em !important;
}
.queue-toggle {
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  color:#aaa !important;
}
.queue-toggle:hover,.queue-toggle.active { color:#fff !important; background:rgba(255,255,255,.035) !important; }
.eq-mini { width:17px !important; height:14px !important; gap:2px !important; }
.eq-mini i { width:2px !important; }

.progress-row {
  grid-template-columns:27px minmax(0,1fr) 34px !important;
  gap:6px !important;
  min-height:13px !important;
}
.time { font-size:7.5px !important; color:#666 !important; }
.seek { height:10px !important; }
.seek .rail { height:3px !important; background:rgba(255,255,255,.14) !important; }
.seek .fill {
  height:3px !important;
  background:linear-gradient(90deg,#f0f0f0,#a9a9a9) !important;
  box-shadow:none !important;
}
.seek .knob {
  width:6px !important; height:6px !important; margin-left:-3px !important;
  background:#f2f2f2 !important;
}

.control-row {
  display:flex !important;
  flex:0 0 34px !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
  padding:0 9px !important;
}
.icon-btn {
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  color:#d7d7d7 !important;
  background:transparent !important;
}
.icon-btn:hover,.icon-btn:focus-visible {
  color:#fff !important;
  transform:scale(1.06) !important;
  background:rgba(255,255,255,.035) !important;
}
.icon-btn.active {
  color:#fff !important;
  background:rgba(255,255,255,.055) !important;
}
.icon-btn svg { width:18px !important; height:18px !important; stroke-width:1.95 !important; }
.skip-btn svg { width:23px !important; height:23px !important; }
.play-main {
  width:34px !important;
  height:34px !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.04) !important;
}
.play-main svg { width:22px !important; height:22px !important; }
.volume-btn.active { color:#fff !important; }

.playlist-panel {
  left:0 !important; right:0 !important;
  bottom:calc(100% + 7px) !important;
  border-radius:18px !important;
  background:rgba(12,12,12,.97) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.46) !important;
}
.playlist-thumb {
  width:32px !important; height:32px !important;
  filter:grayscale(1) contrast(1.03) brightness(.84) !important;
}

.volume-popover {
  position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  left:0;
  top:0;
  width:42px !important;
  height:126px !important;
  z-index:30 !important;
  gap:6px !important;
  padding:7px 6px 6px !important;
  border-radius:21px !important;
  background:rgba(15,15,15,.985) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.035) !important;
  opacity:0;
  transform:translate(-50%,8px) scale(.96) !important;
  transform-origin:50% 100% !important;
  pointer-events:none;
  transition:opacity .15s ease,transform .2s cubic-bezier(.2,.85,.2,1.05) !important;
}
.volume-popover.open {
  opacity:1 !important;
  transform:translate(-50%,0) scale(1) !important;
  pointer-events:auto;
}
.volume-percent { font-size:7px !important; color:#777 !important; height:11px !important; }
.volume-slider-v { width:24px !important; min-height:76px !important; }
.volume-rail-v {
  width:6px !important;
  background:rgba(255,255,255,.12) !important;
}
.volume-fill-v {
  width:6px !important;
  background:linear-gradient(180deg,#f0f0f0,#a8a8a8) !important;
}
.volume-knob-v {
  width:14px !important; height:14px !important;
  background:#f1f1f1 !important;
}
.volume-mute-mini { width:22px !important; height:22px !important; color:#bdbdbd !important; }
.volume-mute-mini:hover { color:#fff !important; }

@media (max-width:620px) {
  .island-player { width:min(94vw, 420px) !important; }
  .island-shell { height:128px !important; padding:8px 10px 7px !important; border-radius:22px !important; }
  .island-top { grid-template-columns:49px minmax(0,1fr) 27px !important; min-height:49px !important; gap:9px !important; }
  .cover-wrap { width:49px !important; height:49px !important; border-radius:13px !important; }
  .track-title { font-size:11.7px !important; }
  .track-artist { font-size:7.7px !important; }
  .icon-btn { width:29px !important; height:29px !important; }
  .play-main { width:33px !important; height:33px !important; }
}
@media (max-width:420px) {
  .island-player { width:94vw !important; }
  .island-shell { height:124px !important; padding:7px 9px 7px !important; border-radius:21px !important; }
  .island-top { grid-template-columns:46px minmax(0,1fr) 26px !important; min-height:46px !important; gap:8px !important; }
  .cover-wrap { width:46px !important; height:46px !important; border-radius:12px !important; }
  .control-row { padding:0 3px !important; }
  .icon-btn { width:27px !important; height:27px !important; }
  .skip-btn svg { width:21px !important; height:21px !important; }
  .play-main { width:31px !important; height:31px !important; }
}

/* === sacred v8: compact centered island, stable controls, anchored volume popover === */
#trail { opacity:.64 !important; }

.island-player {
  width:min(91vw, 402px) !important;
  bottom:calc(12px + env(safe-area-inset-bottom)) !important;
}
.island-shell {
  height:118px !important;
  min-height:118px !important;
  padding:8px 10px 7px !important;
  gap:5px !important;
  border-radius:22px !important;
  background:rgba(11,11,11,.975) !important;
  border:1px solid rgba(255,255,255,.095) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.island-player:hover .island-shell {
  transform:none !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 15px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.island-top {
  grid-template-columns:46px minmax(0,1fr) 25px !important;
  gap:8px !important;
  min-height:46px !important;
  height:46px !important;
}
.cover-wrap {
  width:46px !important;
  height:46px !important;
  border-radius:12px !important;
  transform:none !important;
  transition:box-shadow .18s ease, border-color .18s ease !important;
}
.cover-wrap:hover,.cover-wrap:focus-visible {
  transform:none !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.track-cover {
  object-position:center !important;
  filter:grayscale(1) contrast(1.06) brightness(.78) !important;
  transform:scale(1.01) !important;
}
body.playing .track-cover { transform:scale(1.025) !important; }

.track-meta {
  min-width:0 !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:3px !important;
  padding:0 3px !important;
  overflow:hidden !important;
}
.track-title,
.track-artist {
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:center !important;
}
.track-title {
  font-size:11.7px !important;
  line-height:1.1 !important;
  letter-spacing:.005em !important;
}
.track-artist {
  font-size:7.6px !important;
  line-height:1.15 !important;
  color:#797979 !important;
  letter-spacing:.045em !important;
}
.queue-toggle {
  width:25px !important;
  height:25px !important;
  border-radius:8px !important;
  transform:none !important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease !important;
}
.queue-toggle:hover,.queue-toggle:focus-visible {
  transform:none !important;
  color:#fff !important;
  background:rgba(255,255,255,.045) !important;
}

.progress-row {
  grid-template-columns:25px minmax(0,1fr) 31px !important;
  gap:5px !important;
  min-height:10px !important;
  height:10px !important;
}
.time { font-size:7px !important; color:#707070 !important; }
.seek { height:9px !important; }
.seek .rail,.seek .fill { height:2.5px !important; }
.seek .knob { width:6px !important; height:6px !important; margin-left:-3px !important; }

.control-row {
  flex:0 0 32px !important;
  min-height:32px !important;
  height:32px !important;
  padding:0 8px !important;
  justify-content:space-between !important;
  align-items:center !important;
  overflow:visible !important;
}
.icon-btn {
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  display:grid !important;
  place-items:center !important;
  transform:translateZ(0) scale(1) !important;
  transform-origin:50% 50% !important;
  will-change:transform !important;
  transition:transform .16s cubic-bezier(.2,.75,.2,1), background .16s ease, color .16s ease, box-shadow .16s ease !important;
  backface-visibility:hidden !important;
}
.icon-btn:hover,.icon-btn:focus-visible {
  transform:translateZ(0) scale(1.055) !important;
  background:rgba(255,255,255,.045) !important;
  color:#fff !important;
}
.icon-btn:active {
  transform:translateZ(0) scale(.96) !important;
}
.icon-btn.active {
  background:#eeeeee !important;
  color:#0b0b0b !important;
  box-shadow:0 2px 12px rgba(255,255,255,.11), inset 0 0 0 1px rgba(255,255,255,.75) !important;
}
.icon-btn.active:hover,.icon-btn.active:focus-visible {
  background:#ffffff !important;
  color:#050505 !important;
}
.icon-btn svg { width:17px !important; height:17px !important; }
.skip-btn svg { width:21px !important; height:21px !important; }
.play-main {
  width:31px !important;
  height:31px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.055) !important;
}
.play-main svg { width:20px !important; height:20px !important; }
.repeat-one {
  right:2px !important;
  bottom:1px !important;
  font-size:7px !important;
  font-weight:700 !important;
  color:currentColor !important;
}
.repeat-btn.active.one .repeat-one { color:#0b0b0b !important; }

.volume-control {
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  overflow:visible !important;
}
.volume-popover {
  position:absolute !important;
  left:auto !important;
  right:-7px !important;
  top:auto !important;
  bottom:calc(100% + 9px) !important;
  width:44px !important;
  height:118px !important;
  z-index:80 !important;
  padding:7px 6px 6px !important;
  gap:5px !important;
  border-radius:20px !important;
  background:rgba(12,12,12,.99) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(7px) scale(.965) !important;
  transform-origin:72% 100% !important;
  transition:opacity .15s ease, transform .18s cubic-bezier(.2,.8,.2,1) !important;
}
.volume-popover::after {
  content:'';
  position:absolute;
  right:12px;
  bottom:-5px;
  width:9px;
  height:9px;
  background:rgba(12,12,12,.99);
  border-right:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  transform:rotate(45deg);
}
.volume-popover.open {
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
}
.volume-control.open .volume-btn {
  background:#eeeeee !important;
  color:#0b0b0b !important;
  box-shadow:0 2px 12px rgba(255,255,255,.11) !important;
}
.volume-percent { font-size:7px !important; color:#8a8a8a !important; height:10px !important; }
.volume-slider-v { width:24px !important; min-height:69px !important; }
.volume-rail-v,.volume-fill-v { width:7px !important; }
.volume-knob-v { width:15px !important; height:15px !important; }
.volume-mute-mini {
  width:22px !important;
  height:22px !important;
  border-radius:8px !important;
  z-index:2 !important;
  position:relative !important;
}

.playlist-panel {
  width:100% !important;
  left:0 !important;
  right:0 !important;
  bottom:calc(100% + 7px) !important;
  border-radius:17px !important;
  padding:8px !important;
}
.playlist-thumb {
  width:30px !important;
  height:30px !important;
  border-radius:8px !important;
  filter:grayscale(1) contrast(1.05) brightness(.74) !important;
}
.playlist-item { min-height:38px !important; }

.avatar {
  object-position:center !important;
  filter:grayscale(1) contrast(1.07) brightness(.88) !important;
}

@media (max-width:460px) {
  .island-player { width:min(94vw, 388px) !important; }
  .island-shell { height:116px !important; min-height:116px !important; padding:7px 9px 7px !important; border-radius:21px !important; }
  .island-top { grid-template-columns:44px minmax(0,1fr) 24px !important; min-height:44px !important; height:44px !important; gap:7px !important; }
  .cover-wrap { width:44px !important; height:44px !important; border-radius:11px !important; }
  .track-title { font-size:11.2px !important; }
  .track-artist { font-size:7.2px !important; }
  .control-row { padding:0 5px !important; }
  .icon-btn,.volume-control { width:27px !important; height:27px !important; }
  .play-main { width:30px !important; height:30px !important; }
}


/* === sacred v9 final release polish === */
.island-player {
  bottom: calc(30px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 460px) {
  .island-player {
    bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }
}


/* === sacred v10 final stability polish === */
/* Island controls stay perfectly centered: no scale/translate jitter on hover or click. */
.icon-btn,
.icon-btn:hover,
.icon-btn:focus-visible,
.icon-btn:active,
.icon-btn.active,
.icon-btn.active:hover,
.icon-btn.active:focus-visible,
.icon-btn.active:active {
  transform: none !important;
  translate: none !important;
  will-change: auto !important;
}
.icon-btn {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}
.icon-btn svg,
.icon-btn:hover svg,
.icon-btn:focus-visible svg,
.icon-btn:active svg {
  transform: none !important;
  transform-origin: 50% 50% !important;
  transition: opacity .16s ease, filter .16s ease !important;
}
.icon-btn:hover svg,
.icon-btn:focus-visible svg {
  filter: brightness(1.12);
}
.icon-btn:active {
  opacity: .76 !important;
}