:root {
  color-scheme: dark;
  --bg: #090b0e;
  --panel: rgba(25, 29, 36, .86);
  --panel-edge: rgba(255, 255, 255, .08);
  --text: #f7f8fb;
  --muted: #9299a7;
  --accent: #79f2b0;
  --accent-rgb: 121 242 176;
  --accent-deep: #0a9d64;
  --accent-ink: #07130d;
  --danger: #ff5d67;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgb(var(--accent-rgb) / .2), transparent 36rem),
    radial-gradient(circle at 105% 30%, rgba(70, 96, 191, .14), transparent 28rem),
    var(--bg);
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.shell { width: min(100%, 520px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
h1 { margin: 2px 0 0; font-size: 30px; letter-spacing: -.04em; }
.eyebrow { margin: 0; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--panel-edge); border-radius: 50%; background: var(--panel); font-size: 20px; }
.panel { border: 1px solid var(--panel-edge); border-radius: 24px; background: var(--panel); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 40px rgba(0,0,0,.18); backdrop-filter: blur(24px); }
.now-playing { padding: 22px; min-height: 150px; }
.status-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5b616d; box-shadow: 0 0 0 4px rgba(91,97,109,.12); }
.dot.online { background: var(--accent); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .12); }
.pill { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: #c7ccd5; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.now-playing h2 { margin: 22px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; letter-spacing: -.025em; }
.now-playing > p { margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.timeline { margin-top: 20px; }
.seek-slider { width: 100%; height: 22px; margin: 0; appearance: none; -webkit-appearance: none; outline: 0; background: transparent; touch-action: pan-y; }
.seek-slider::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(to right, var(--accent) 0 var(--seek-progress, 0%), rgba(255,255,255,.09) var(--seek-progress, 0%) 100%); }
.seek-slider::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7.5px; appearance: none; -webkit-appearance: none; border: 3px solid #10151a; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.seek-slider::-moz-range-track { height: 5px; border-radius: 5px; background: rgba(255,255,255,.09); }
.seek-slider::-moz-range-progress { height: 5px; border-radius: 5px; background: var(--accent); }
.seek-slider::-moz-range-thumb { width: 15px; height: 15px; border: 3px solid #10151a; border-radius: 50%; background: var(--accent); }
.time { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.transport { display: grid; grid-template-columns: 48px 58px 82px 58px 48px; align-items: center; justify-content: center; gap: 10px; padding: 28px 0; }
.transport.qq-mode { grid-template-columns: 68px 82px 68px; gap: 18px; }
.transport.qq-mode .round.secondary { width: 68px; height: 68px; }
.round { position: relative; display: grid; place-items: center; border: 0; border-radius: 50%; }
.round:active { transform: scale(.94); }
.round.primary { width: 82px; height: 82px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 35px rgb(var(--accent-rgb) / .24); font-size: 30px; }
.round.secondary { display: flex; width: 58px; height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--panel-edge); background: rgba(255,255,255,.055); font-size: 15px; font-weight: 750; text-align: center; }
.round.secondary.outer { width: 48px; height: 48px; color: #c4cad4; font-size: 13px; }
.round.secondary small { position: static; color: var(--muted); font-size: 8px; font-weight: 700; }
.controls-panel, .youtube-panel, .qq-music-panel { margin-bottom: 14px; padding: 17px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 13px; color: var(--muted); font-size: 12px; }
.section-title strong { color: var(--accent); font-size: 11px; }
.speed-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.speed-row button, .button-grid button, .boost { min-height: 50px; border: 1px solid var(--panel-edge); border-radius: 15px; background: rgba(255,255,255,.055); }
.speed-row button:active, .button-grid button:active, .boost.active, .boost:active { background: rgb(var(--accent-rgb) / .16); border-color: rgb(var(--accent-rgb) / .4); transform: scale(.97); }
.boost { width: 100%; margin-top: 9px; color: #dfe4eb; font-size: 13px; font-weight: 700; }
.button-grid { display: grid; gap: 7px; }
.button-grid.three { grid-template-columns: repeat(3, 1fr); }
.button-grid.two { grid-template-columns: repeat(2, 1fr); }
.button-grid.six { grid-template-columns: repeat(3, 1fr); }
.button-grid button { display: flex; min-height: 62px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.button-grid button span { font-size: 16px; font-weight: 750; }
.button-grid button small { color: var(--muted); font-size: 10px; }
.skip.ready { border-color: rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .15); color: var(--accent); }
.qq-music-panel .like { color: var(--accent); }
.qq-music-panel .dislike { color: #ff9b9f; }
.button-grid button:disabled { opacity: .38; }
.hidden { display: none !important; }
.toast { position: fixed; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 5; max-width: calc(100vw - 40px); margin: 0; padding: 10px 15px; border: 1px solid var(--panel-edge); border-radius: 999px; background: rgba(16,19,24,.94); opacity: 0; color: #dfe4eb; font-size: 12px; text-align: center; transform: translate(-50%, 12px); transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
footer { padding: 12px 0 0; color: #606775; font-size: 10px; text-align: center; }
dialog { width: min(calc(100% - 28px), 420px); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid var(--panel-edge); border-radius: 26px; background: #161a20; color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(10px); }
dialog form { max-height: calc(100dvh - 28px); padding: 22px; overflow-y: auto; }
dialog h2 { margin: 4px 0 0; font-size: 24px; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.settings-close { width: 38px; height: 38px; border: 1px solid var(--panel-edge); border-radius: 50%; background: rgba(255,255,255,.05); font-size: 25px; line-height: 1; }
.settings-section { margin-bottom: 12px; padding: 16px; border: 1px solid var(--panel-edge); border-radius: 19px; background: rgba(255,255,255,.035); }
.settings-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 14px; font-weight: 750; }
.settings-section-title small, #accentHex { color: var(--accent); font-size: 11px; font-weight: 750; }
.settings-copy { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.skin-options { display: grid; gap: 9px; }
.skin-option { display: grid; grid-template-columns: 68px 1fr 22px; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 9px; border: 1px solid var(--panel-edge); border-radius: 15px; background: rgba(255,255,255,.04); text-align: left; }
.skin-option.active { border-color: rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .1); }
.skin-preview { position: relative; display: block; width: 68px; height: 52px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: #0b0d11; }
.skin-preview i { position: absolute; display: block; }
.classic-preview { background: radial-gradient(circle at 25% 10%, rgb(var(--accent-rgb) / .26), transparent 55%), #0b0d11; }
.classic-preview i:nth-child(1) { left: 7px; right: 7px; top: 7px; height: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; background: rgba(255,255,255,.08); }
.classic-preview i:nth-child(2) { left: 22px; bottom: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .35); }
.classic-preview i:nth-child(3) { right: 7px; bottom: 9px; width: 10px; height: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; background: rgba(255,255,255,.08); }
.pixel-preview { background: radial-gradient(circle at 78% 22%, #f5b5ff 0 1px, transparent 2px), radial-gradient(circle at 28% 20%, #fff 0 1px, transparent 2px), linear-gradient(160deg, #271071 0%, #0d0b31 75%); }
.pixel-preview i:nth-child(1) { left: 27px; top: 12px; width: 15px; height: 23px; border: 1px solid #c696ff; border-radius: 4px; background: rgba(11,9,42,.82); box-shadow: 0 0 8px rgba(186,126,255,.4); }
.pixel-preview i:nth-child(2) { left: 33px; top: 19px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #f397df; }
.pixel-preview i:nth-child(3) { left: -2px; right: -2px; bottom: -2px; height: 10px; background: #f5a8e6; clip-path: polygon(0 65%, 9% 65%, 9% 40%, 20% 40%, 20% 15%, 35% 15%, 35% 48%, 47% 48%, 47% 68%, 65% 68%, 65% 42%, 78% 42%, 78% 22%, 91% 22%, 91% 52%, 100% 52%, 100% 100%, 0 100%); }
.skin-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.skin-option-copy strong { font-size: 13px; }
.skin-option-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.skin-check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--panel-edge); border-radius: 50%; color: transparent; font-size: 11px; font-weight: 900; }
.skin-option.active .skin-check { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
#pinInput { width: 100%; height: 56px; border: 1px solid var(--panel-edge); border-radius: 14px; outline: 0; background: rgba(255,255,255,.06); color: var(--text); font-size: 27px; font-weight: 750; letter-spacing: .28em; text-align: center; }
#pinInput:focus { border-color: var(--accent); }
.accent-field { position: relative; height: 174px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; outline: 0; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--picker-hue, 151) 100% 50%); touch-action: none; }
.accent-field:focus-visible { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .35); }
.accent-handle { position: absolute; left: 50%; top: 5%; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.55); transform: translate(-50%, -50%); pointer-events: none; }
.hue-control { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; margin-top: 12px; color: var(--muted); font-size: 11px; }
#hueSlider { width: 100%; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; outline: 0; background: linear-gradient(to right, #f33, #ff3, #3f3, #3ff, #33f, #f3f, #f33); }
#hueSlider::-webkit-slider-thumb { width: 24px; height: 24px; appearance: none; -webkit-appearance: none; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.55); }
#hueSlider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.55); }
.accent-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.accent-preview { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
#accentSwatch { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.32); border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgb(var(--accent-rgb) / .25); }
#resetAccentButton { min-height: 34px; padding: 0 11px; border: 1px solid var(--panel-edge); border-radius: 11px; background: rgba(255,255,255,.05); color: #dce1e8; font-size: 11px; }
.pair-submit { width: 100%; height: 54px; margin-top: 12px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 800; }

html[data-skin="pixel"] {
  --bg: #0a0825;
  --panel: rgba(20, 16, 61, .82);
  --panel-edge: rgba(198, 150, 255, .32);
  --text: #fff8ff;
  --muted: #aaa3cd;
  --accent: #d8a7ff;
  --accent-rgb: 216 167 255;
  --accent-deep: #7041b8;
  --accent-ink: #17102f;
  --danger: #ff83ad;
  color-scheme: dark;
}
html[data-skin="pixel"] body {
  position: relative;
  background:
    linear-gradient(180deg, rgba(98, 48, 213, .22), transparent 260px),
    radial-gradient(circle at 82% 12%, rgba(232, 164, 255, .13), transparent 240px),
    linear-gradient(180deg, #100d31 0%, #090821 72%, #121044 100%);
}
html[data-skin="pixel"] body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 8% 5%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 13%, #eab5ff 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 39% 7%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 16%, #dca7ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 6%, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 91% 20%, #f4b0ff 0 1px, transparent 2px),
    radial-gradient(circle at 15% 39%, rgba(188,139,255,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 87% 47%, rgba(255,255,255,.75) 0 1px, transparent 1.8px);
  background-size: 197px 173px, 251px 229px, 293px 211px, 337px 283px, 229px 317px, 311px 263px, 271px 241px, 349px 307px;
  content: "";
  opacity: .7;
  pointer-events: none;
}
html[data-skin="pixel"] body::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  z-index: 0;
  height: 104px;
  background: linear-gradient(180deg, #ffe2fb 0 28%, #f5a8e6 29% 65%, #ba79dc 66% 100%);
  clip-path: polygon(0 63%, 6% 63%, 6% 42%, 12% 42%, 12% 20%, 19% 20%, 19% 34%, 27% 34%, 27% 58%, 35% 58%, 35% 43%, 42% 43%, 42% 25%, 50% 25%, 50% 48%, 57% 48%, 57% 69%, 65% 69%, 65% 52%, 72% 52%, 72% 30%, 80% 30%, 80% 45%, 88% 45%, 88% 25%, 95% 25%, 95% 52%, 100% 52%, 100% 100%, 0 100%);
  content: "";
  filter: drop-shadow(0 -8px 24px rgba(236, 132, 227, .13));
  opacity: .46;
  pointer-events: none;
}
html[data-skin="pixel"] .shell { position: relative; z-index: 1; }
html[data-skin="pixel"] header { position: relative; }
html[data-skin="pixel"] header::after {
  position: absolute;
  top: -5px;
  left: 56%;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f2aeeb 28%, #fff 50%, #d58eff 74%, transparent);
  box-shadow: -7px 5px 0 -1px rgba(238,167,241,.55), -13px 10px 0 -1px rgba(191,123,234,.32);
  content: "";
  opacity: .8;
  transform: rotate(-37deg);
  pointer-events: none;
}
html[data-skin="pixel"] .eyebrow { color: #efb4ee; font-family: "SFMono-Regular", Consolas, monospace; text-shadow: 0 0 14px rgba(235,158,255,.4); }
html[data-skin="pixel"] .panel {
  border-color: rgba(198,150,255,.34);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(35,28,88,.84), rgba(13,12,48,.9));
  box-shadow: inset 0 1px rgba(244,211,255,.08), 0 14px 35px rgba(3,2,20,.3), 0 0 28px rgba(119,73,217,.07);
}
html[data-skin="pixel"] .icon-button,
html[data-skin="pixel"] .settings-close { border-color: rgba(216,167,255,.35); background: rgba(26,20,73,.82); }
html[data-skin="pixel"] .pill { border: 1px solid rgba(216,167,255,.18); background: rgba(180,112,239,.12); color: #dcd2f5; }
html[data-skin="pixel"] .round.primary { border: 1px solid #f1c5fa; background: linear-gradient(145deg, #f1b2e7, #b78fff); box-shadow: 0 10px 34px rgba(213,133,244,.3), inset 0 1px rgba(255,255,255,.48); }
html[data-skin="pixel"] .round.secondary,
html[data-skin="pixel"] .speed-row button,
html[data-skin="pixel"] .button-grid button,
html[data-skin="pixel"] .boost { border-color: rgba(198,150,255,.26); background: rgba(162,117,226,.08); }
html[data-skin="pixel"] .speed-row button:active,
html[data-skin="pixel"] .button-grid button:active,
html[data-skin="pixel"] .boost.active,
html[data-skin="pixel"] .boost:active { border-color: rgba(241,177,235,.58); background: rgba(214,155,246,.18); }
html[data-skin="pixel"] .seek-slider::-webkit-slider-runnable-track { border-radius: 2px; background: linear-gradient(to right, #eab0ef 0 var(--seek-progress, 0%), rgba(183,143,255,.15) var(--seek-progress, 0%) 100%); }
html[data-skin="pixel"] .seek-slider::-webkit-slider-thumb { border-color: #18113d; border-radius: 4px; background: #f3a8e3; box-shadow: 0 0 0 1px #e0b2ff, 0 0 14px rgba(235,155,232,.34); }
html[data-skin="pixel"] .seek-slider::-moz-range-progress { background: #eab0ef; }
html[data-skin="pixel"] .seek-slider::-moz-range-thumb { border-color: #18113d; border-radius: 4px; background: #f3a8e3; }
html[data-skin="pixel"] dialog { border-color: rgba(205,157,255,.38); background: linear-gradient(160deg, #211952, #0e0c30 70%); box-shadow: 0 24px 70px rgba(3,2,20,.65); }
html[data-skin="pixel"] dialog::backdrop { background: rgba(5,3,24,.8); }
html[data-skin="pixel"] .settings-section { border-color: rgba(198,150,255,.24); background: rgba(178,125,236,.055); }
html[data-skin="pixel"] #pinInput { border-color: rgba(198,150,255,.28); background: rgba(10,8,37,.62); }
html[data-skin="pixel"] .skin-option { border-color: rgba(198,150,255,.22); background: rgba(111,72,175,.08); }
html[data-skin="pixel"] .skin-option.active { border-color: rgba(241,177,235,.65); background: rgba(220,158,241,.13); box-shadow: inset 0 0 0 1px rgba(241,177,235,.1), 0 0 20px rgba(139,88,222,.09); }
html[data-skin="pixel"] .pair-submit { border: 1px solid #f2c4f4; background: linear-gradient(135deg, #f0b0e9, #b994ff); box-shadow: 0 9px 26px rgba(209,132,237,.2); }
html[data-skin="pixel"] .toast { border-color: rgba(211,163,255,.35); background: rgba(18,13,53,.95); }
html[data-skin="pixel"] footer { color: #777099; }

/* Pixel sky skin: approved reference artwork translated to the live controls. */
html[data-skin="pixel"] {
  --bg: #060817;
  --panel: rgba(9, 13, 31, .9);
  --panel-edge: rgba(143, 119, 190, .62);
  --text: #f7f5ff;
  --muted: #aaa9cb;
  --accent: #bb91ff;
  --accent-rgb: 187 145 255;
  --accent-deep: #6f45b7;
  --accent-ink: #120d2a;
  --danger: #ff8fcf;
}
html[data-skin="pixel"] body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(53, 39, 132, .18), transparent 290px),
    radial-gradient(circle at 50% 75%, rgba(30, 25, 93, .15), transparent 360px),
    linear-gradient(180deg, #080a20 0%, #050714 54%, #090a22 100%);
}
html[data-skin="pixel"] body::before {
  position: absolute;
  background-image:
    radial-gradient(circle at 7% 2%, #fbf6ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 22% 7%, #efb3ff 0 1.4px, transparent 2px),
    radial-gradient(circle at 38% 3%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 59% 9%, #f8edff 0 1px, transparent 1.7px),
    radial-gradient(circle at 76% 4%, #d99dff 0 1.4px, transparent 2px),
    radial-gradient(circle at 92% 11%, #fff 0 1px, transparent 1.7px);
  background-position: 0 0;
  background-size: 193px 171px, 251px 213px, 289px 197px, 331px 269px, 223px 293px, 307px 251px;
  opacity: .86;
  -webkit-mask-image: none;
  mask-image: none;
}
html[data-skin="pixel"] body::after {
  bottom: 0;
  height: 55px;
  background: url("/skin-pixel-sky-reference.png?v=20260722-1") center bottom / min(100vw, 520px) auto no-repeat;
  clip-path: none;
  filter: none;
  opacity: 1;
}
html[data-skin="pixel"] .shell {
  padding-top: max(37px, env(safe-area-inset-top));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}
html[data-skin="pixel"] .shell::before {
  position: absolute;
  top: 83px;
  right: 0;
  z-index: 0;
  width: 160px;
  height: 44px;
  background: url("/skin-pixel-sky-reference.png?v=20260722-1") right -83px / min(100vw, 520px) auto no-repeat;
  clip-path: polygon(23% 78%, 31% 78%, 31% 64%, 41% 64%, 41% 48%, 51% 48%, 51% 30%, 62% 30%, 62% 15%, 73% 15%, 73% 26%, 81% 26%, 81% 43%, 90% 43%, 90% 30%, 100% 30%, 100% 100%, 23% 100%);
  content: "";
  filter: none;
  mix-blend-mode: screen;
  pointer-events: none;
}
html[data-skin="pixel"] .shell::after {
  position: absolute;
  inset: 130px 0 auto;
  z-index: 0;
  height: 300px;
  background: radial-gradient(circle, rgba(123,57,215,.5) 0 1px, transparent 1.3px) 0 0 / 6px 6px;
  content: "";
  opacity: .72;
  -webkit-mask-image: linear-gradient(to right, #000 0 7%, transparent 12% 88%, #000 93% 100%);
  mask-image: linear-gradient(to right, #000 0 7%, transparent 12% 88%, #000 93% 100%);
  pointer-events: none;
}
html[data-skin="pixel"] .shell > * { position: relative; z-index: 1; }
html[data-skin="pixel"] header { margin-bottom: 30px; }
html[data-skin="pixel"] header::after {
  top: -3px;
  left: 64%;
  width: 59px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bd7fff 13%, #f6b5ef 40%, #fff 54%, #d985ff 75%, transparent);
  box-shadow: -5px 4px 0 -1px rgba(239,167,244,.65), -10px 8px 0 -1px rgba(173,105,229,.45);
  opacity: .95;
  transform: rotate(-38deg);
}
html[data-skin="pixel"] h1 { font-size: 32px; letter-spacing: -.045em; text-shadow: 3px 4px 0 rgba(114,90,176,.28); }
html[data-skin="pixel"] .eyebrow { color: #c88eff; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; letter-spacing: .06em; text-shadow: 0 0 11px rgba(202,133,255,.45); }
html[data-skin="pixel"] .panel {
  border-color: rgba(143,119,190,.68);
  border-radius: 18px;
  background:
    radial-gradient(circle at 60% 7%, rgba(70,48,125,.13), transparent 52%),
    linear-gradient(145deg, rgba(12,17,39,.94), rgba(7,10,27,.96));
  box-shadow: inset 0 1px rgba(238,220,255,.08), inset 0 0 28px rgba(80,58,143,.07), 0 12px 28px rgba(0,0,0,.34), 0 0 24px rgba(75,49,145,.08);
}
html[data-skin="pixel"] .icon-button,
html[data-skin="pixel"] .settings-close { border-color: rgba(151,134,188,.48); background: linear-gradient(145deg, rgba(29,34,60,.94), rgba(12,15,34,.96)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.02), 0 8px 20px rgba(0,0,0,.3); }
html[data-skin="pixel"] .icon-button { width: 44px; height: 44px; box-shadow: 0 0 0 3px rgba(116,98,157,.12), inset 0 0 12px rgba(111,88,171,.11); }
html[data-skin="pixel"] .pill { padding: 6px 12px; border: 1px solid rgba(120,105,163,.25); background: linear-gradient(145deg, rgba(42,43,78,.78), rgba(20,23,50,.88)); color: #eee9ff; font-size: 11px; letter-spacing: .04em; }
html[data-skin="pixel"] .pill::before { margin-right: 5px; color: #d5afff; content: "◉"; font-size: 9px; }
html[data-skin="pixel"] .now-playing { min-height: 220px; padding: 23px; }
html[data-skin="pixel"] .dot.online { background: #24ef8b; box-shadow: 0 0 0 4px rgba(36,239,139,.1), 0 0 11px rgba(36,239,139,.35); }
html[data-skin="pixel"] .now-playing h2 { margin-top: 21px; font-size: 24px; }
html[data-skin="pixel"] .now-playing > p { font-size: 14px; }
html[data-skin="pixel"] .timeline { margin-top: 26px; }
html[data-skin="pixel"] .time { margin-top: 8px; font-size: 12px; }
html[data-skin="pixel"] .seek-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 1px; background: linear-gradient(to right, #bd8eff 0 var(--seek-progress, 0%), transparent var(--seek-progress, 0%) 100%), repeating-conic-gradient(from 45deg, rgba(117,109,153,.42) 0 25%, rgba(54,54,85,.42) 0 50%) 0 0 / 4px 4px; }
html[data-skin="pixel"] .seek-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid #f5b9ec; border-radius: 2px; background: linear-gradient(135deg, #ffd2f3, #ee84d7); box-shadow: 0 0 0 2px rgba(173,91,197,.45), 0 0 12px rgba(236,131,218,.36); }
html[data-skin="pixel"] .seek-slider::-moz-range-track { height: 6px; border-radius: 1px; background: rgba(74,70,105,.45); }
html[data-skin="pixel"] .seek-slider::-moz-range-progress { height: 6px; border-radius: 1px; background: #bd8eff; }
html[data-skin="pixel"] .seek-slider::-moz-range-thumb { border-color: #f5b9ec; border-radius: 2px; background: #ee84d7; }
html[data-skin="pixel"] .round.primary { width: 100px; height: 100px; border: 1px solid #e9c4ff; background: linear-gradient(135deg, #aa9aff 2%, #d78eff 52%, #ff93d2 100%); box-shadow: 0 0 0 3px rgba(111,89,175,.42), 0 11px 28px rgba(0,0,0,.35), 0 0 27px rgba(194,118,244,.28), inset 0 1px rgba(255,255,255,.66); font-size: 31px; }
html[data-skin="pixel"] .round.primary::before { position: absolute; inset: -17px; z-index: -1; background: radial-gradient(circle, rgba(154,93,239,.27) 0 1px, transparent 1.5px); background-size: 4px 4px; content: ""; -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
html[data-skin="pixel"] .round.secondary,
html[data-skin="pixel"] .speed-row button,
html[data-skin="pixel"] .button-grid button,
html[data-skin="pixel"] .boost { border-color: rgba(120,105,163,.45); background: linear-gradient(145deg, rgba(25,29,56,.9), rgba(11,14,35,.92)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
html[data-skin="pixel"] .transport { padding: 25px 0 38px; }
html[data-skin="pixel"] .transport.qq-mode { grid-template-columns: 84px 100px 84px; gap: 24px; padding-bottom: 31px; }
html[data-skin="pixel"] .transport.qq-mode .round.secondary { width: 84px; height: 84px; border: 1px solid rgba(121,109,158,.58); background: radial-gradient(circle at 50% 35%, rgba(38,42,75,.92), rgba(8,11,29,.97)); box-shadow: 0 0 0 3px rgba(84,75,119,.32), inset 0 0 18px rgba(86,70,136,.12), 0 10px 22px rgba(0,0,0,.3); font-size: 27px; }
html[data-skin="pixel"] .transport.qq-mode .round.secondary small { position: absolute; top: calc(100% + 8px); color: #b7b3cd; font-size: 12px; font-weight: 500; white-space: nowrap; }
html[data-skin="pixel"] .controls-panel,
html[data-skin="pixel"] .youtube-panel,
html[data-skin="pixel"] .qq-music-panel { margin-bottom: 12px; padding: 16px 15px; }
html[data-skin="pixel"] .section-title { margin-bottom: 13px; font-size: 12px; }
html[data-skin="pixel"] .section-title::before { margin-right: 7px; color: #c69aff; content: "✣"; font-family: monospace; }
html[data-skin="pixel"] .section-title > span { margin-right: auto; }
html[data-skin="pixel"] .qq-music-panel #qqMusicState { color: #28ef8c; }
html[data-skin="pixel"] .qq-music-panel .button-grid { gap: 4px; }
html[data-skin="pixel"] .qq-music-panel .button-grid button { min-height: 68px; border-color: rgba(118,107,154,.48); }
html[data-skin="pixel"] .qq-music-panel .button-grid button span { font-family: monospace; font-size: 30px; line-height: 1; }
html[data-skin="pixel"] .qq-music-panel .like span { color: #f2a0dd; }
html[data-skin="pixel"] .qq-music-panel .dislike span { color: #bca1ff; }
html[data-skin="pixel"] .qq-music-panel .dislike span { font-size: 0; }
html[data-skin="pixel"] .qq-music-panel .dislike span::after { content: "♡"; font-size: 30px; }
html[data-skin="pixel"] .qq-music-panel .button-grid button small { color: #eeeafd; font-size: 13px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type { border-style: dotted; border-color: rgba(153,126,205,.72); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type .button-grid { gap: 6px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type .button-grid button { min-height: 70px; border-color: rgba(104,98,141,.42); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type .button-grid button span { font-size: 22px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type .button-grid button small { color: #bdb8d6; font-size: 11px; }
html[data-skin="pixel"] button[data-action="volumeUp"] small { font-size: 0 !important; }
html[data-skin="pixel"] button[data-action="volumeUp"] small::after { content: "音量加"; font-size: 11px; }
html[data-skin="pixel"] button[data-action="volumeDown"] small { font-size: 0 !important; }
html[data-skin="pixel"] button[data-action="volumeDown"] small::after { content: "音量减"; font-size: 11px; }
html[data-skin="pixel"] dialog { border-color: rgba(143,119,190,.68); background: linear-gradient(160deg, #11152d, #080a1d 70%); box-shadow: 0 24px 70px rgba(0,0,0,.72); }
html[data-skin="pixel"] .settings-section { border-color: rgba(125,109,167,.42); background: rgba(36,35,65,.42); }
html[data-skin="pixel"] #pinInput { border-color: rgba(125,109,167,.44); background: rgba(6,8,24,.72); }
html[data-skin="pixel"] .skin-option { border-color: rgba(125,109,167,.38); background: rgba(30,31,58,.6); }
html[data-skin="pixel"] .skin-option.active { border-color: rgba(234,171,244,.68); background: rgba(116,77,151,.18); box-shadow: inset 0 0 0 1px rgba(240,188,249,.1), 0 0 18px rgba(135,80,206,.1); }
html[data-skin="pixel"] .pair-submit { border: 1px solid #edc1f7; background: linear-gradient(135deg, #b2a0ff, #f091d5); box-shadow: 0 9px 26px rgba(197,113,231,.2); }
html[data-skin="pixel"] .toast { border-color: rgba(153,127,201,.5); background: rgba(8,10,27,.96); }
html[data-skin="pixel"] footer { visibility: hidden; height: 0; padding: 0; }

/* Frozen pixel-sky source assets: every bitmap below is cropped from ui-concept-pixel-sky-v1.png. */
html[data-skin="pixel"] header { margin-bottom: 18px; }
html[data-skin="pixel"] header > div { padding-left: 8px; }
html[data-skin="pixel"] header .eyebrow {
  width: 112px;
  height: 22px;
  margin: 0 0 2px;
  color: transparent;
  font-size: 0;
  background: url("/assets/pixel-skin/brand-phone-remote.png?v=20260722-1") left center / contain no-repeat;
  text-shadow: none;
}
html[data-skin="pixel"] .shell::before { content: none; }
html[data-skin="pixel"] body::after {
  height: 67px;
  background: url("/assets/pixel-skin/bottom-clouds.png?v=20260722-1") center bottom / 100% auto no-repeat;
}
html[data-skin="pixel"] .now-playing { position: relative; overflow: visible; }
html[data-skin="pixel"] .now-playing::before {
  position: absolute;
  top: -43px;
  right: -18px;
  z-index: 0;
  width: 172px;
  height: 56px;
  background: url("/assets/pixel-skin/top-cloud.png?v=20260722-1") right bottom / contain no-repeat;
  content: "";
  pointer-events: none;
}
html[data-skin="pixel"] .now-playing > * { position: relative; z-index: 1; }
html[data-skin="pixel"] .seek-slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 0;
  border-radius: 0;
  background: url("/assets/pixel-skin/progress-thumb.png?v=20260722-1") center / contain no-repeat;
  box-shadow: none;
}
html[data-skin="pixel"] .seek-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: url("/assets/pixel-skin/progress-thumb.png?v=20260722-1") center / contain no-repeat;
  box-shadow: none;
}
html[data-skin="pixel"] .transport.qq-mode #seekBackButton span,
html[data-skin="pixel"] .transport.qq-mode #seekForwardButton span {
  width: 50px;
  height: 42px;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-skin="pixel"] .transport.qq-mode #seekBackButton span { background-image: url("/assets/pixel-skin/transport-back.png?v=20260722-3"); }
html[data-skin="pixel"] .transport.qq-mode #seekForwardButton span { background-image: url("/assets/pixel-skin/transport-forward.png?v=20260722-3"); }
html[data-skin="pixel"] .qq-music-panel .button-grid button:disabled { opacity: 1; }
html[data-skin="pixel"] .qq-music-panel .button-grid button span {
  width: 42px;
  height: 42px;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-skin="pixel"] .qq-music-panel .like span { background-image: url("/assets/pixel-skin/like-heart.png?v=20260722-1"); }
html[data-skin="pixel"] .qq-music-panel .dislike span { background-image: url("/assets/pixel-skin/dislike-heart.png?v=20260722-1"); }
html[data-skin="pixel"] .qq-music-panel .dislike span::after { content: none !important; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action] span {
  width: 38px;
  height: 38px;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="previous"] span { background-image: url("/assets/pixel-skin/previous.png?v=20260722-3"); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="next"] span { background-image: url("/assets/pixel-skin/next.png?v=20260722-3"); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="volumeUp"] span { background-image: url("/assets/pixel-skin/volume-up.png?v=20260722-3"); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="volumeDown"] span { background-image: url("/assets/pixel-skin/volume-down.png?v=20260722-3"); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="mute"] span { background-image: url("/assets/pixel-skin/mute.png?v=20260722-3"); }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="fullscreen"] span { background-image: url("/assets/pixel-skin/fullscreen.png?v=20260722-3"); }
@media (min-width: 500px) { .button-grid.six { grid-template-columns: repeat(6, 1fr); } }

/* Skin 2, locked to the approved source artwork.  These overrides intentionally
   leave the live DOM order and all command bindings untouched. */
html[data-skin="pixel"] .shell {
  padding-top: max(37px, env(safe-area-inset-top));
}
html[data-skin="pixel"] .shell::before,
html[data-skin="pixel"] .shell::after,
html[data-skin="pixel"] .now-playing::before,
html[data-skin="pixel"] header::after {
  content: none;
}
html[data-skin="pixel"] header {
  width: calc(100% + 36px);
  height: 129px;
  margin: 0 0 -3px -18px;
  padding: 0;
  background: url("/assets/pixel-skin/header-scene.png?v=20260722-2") center top / 100% auto no-repeat;
}
html[data-skin="pixel"] header > div {
  opacity: 0;
  pointer-events: none;
}
html[data-skin="pixel"] header .icon-button {
  width: 48px;
  height: 48px;
  margin: 16px 23px 0 0;
  border: 0;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  box-shadow: none;
}
html[data-skin="pixel"] .now-playing {
  overflow: hidden;
}

/* The visible timeline never uses a disabled browser control.  The range input
   remains above it only for accessible, draggable browser-video seeking. */
.pixel-progress { display: none; }
html[data-skin="pixel"] .timeline {
  position: relative;
  min-height: 32px;
  margin-top: 25px;
}
html[data-skin="pixel"] .pixel-progress {
  display: block;
  position: relative;
  height: 20px;
  overflow: visible;
}
html[data-skin="pixel"] .pixel-progress::before {
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 5px;
  background: url("/assets/pixel-skin/progress-rail-line.png?v=20260722-2") left center / auto 5px repeat-x;
  content: "";
}
html[data-skin="pixel"] #pixelProgressFill {
  position: absolute;
  top: 7px;
  left: 0;
  width: 0;
  height: 5px;
  background: url("/assets/pixel-skin/progress-fill-line.png?v=20260722-2") left center / auto 5px repeat-x;
}
html[data-skin="pixel"] #pixelProgressThumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  background: url("/assets/pixel-skin/progress-thumb.png?v=20260722-2") center / contain no-repeat;
  image-rendering: pixelated;
}
html[data-skin="pixel"] .timeline .seek-slider {
  position: absolute;
  top: -4px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 28px;
  margin: 0;
  opacity: 0;
}
html[data-skin="pixel"] .timeline .time {
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

/* Tight icon-only crops from the frozen source; labels stay in the semantic DOM
   but are deliberately not rendered in Skin 2's six system controls. */
html[data-skin="pixel"] .transport.qq-mode #seekBackButton span,
html[data-skin="pixel"] .transport.qq-mode #seekForwardButton span {
  display: block;
  width: 50px;
  height: 34px;
  line-height: 0;
  background-size: contain;
  image-rendering: pixelated;
}
html[data-skin="pixel"] .shell > .controls-panel:last-of-type .button-grid button[data-action] {
  justify-content: center;
}
html[data-skin="pixel"] .shell > .controls-panel:last-of-type .button-grid button[data-action] small {
  display: none;
}
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action] span {
  display: block;
  width: 38px;
  height: 38px;
  line-height: 0;
  image-rendering: pixelated;
}

/* Skin 2 foreground pass: source pixels only, with no opaque screenshot
   background carried into the live page. */
html[data-skin="pixel"] header {
  background: url("/assets/pixel-skin/header-foreground.png?v=20260722-3") center top / 100% auto no-repeat;
}
html[data-skin="pixel"] header .icon-button {
  position: relative;
  border: 1px solid rgba(151,134,188,.48);
  background: radial-gradient(circle at 50% 35%, rgba(29,34,60,.94), rgba(12,15,34,.96));
  box-shadow: 0 0 0 3px rgba(116,98,157,.12), inset 0 0 12px rgba(111,88,171,.11);
}
html[data-skin="pixel"] header .icon-button::after {
  position: absolute;
  inset: 11px;
  background: url("/assets/pixel-skin/settings-gear.png?v=20260722-3") center / contain no-repeat;
  content: "";
  image-rendering: pixelated;
}
html[data-skin="pixel"] .now-playing {
  overflow: visible;
}
html[data-skin="pixel"] .now-playing::before {
  top: -44px;
  right: -18px;
  z-index: 0;
  width: 157px;
  height: 44px;
  background: url("/assets/pixel-skin/top-cloud-foreground.png?v=20260722-3") right bottom / contain no-repeat;
  content: "";
}
html[data-skin="pixel"] .now-playing > * {
  position: relative;
  z-index: 1;
}

/* Keep the transport glyphs at their original 2x-to-1x dimensions and center
   their tight, transparent bounds inside the existing live buttons. */
html[data-skin="pixel"] .transport.qq-mode #seekBackButton span,
html[data-skin="pixel"] .transport.qq-mode #seekForwardButton span {
  width: 34px;
  height: 23px;
  background-size: contain;
}
html[data-skin="pixel"] .transport.qq-mode .round.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* System controls retain their current grid and actions.  Only their visible
   icon sprite dimensions change to the source artwork's natural half scale. */
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action] span {
  background-size: contain;
}
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="previous"] span { width: 24px; height: 22px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="volumeDown"] span { width: 25px; height: 13px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="mute"] span { width: 26px; height: 24px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="volumeUp"] span { width: 24px; height: 23px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="next"] span { width: 24px; height: 23px; }
html[data-skin="pixel"] .shell > .controls-panel:last-of-type button[data-action="fullscreen"] span { width: 25px; height: 24px; }

/* Header and QQ preference refinement: keep only the usable setting button,
   preserve the full source title, and remove artificial top whitespace. */
html[data-skin="pixel"] .shell {
  padding-top: max(8px, env(safe-area-inset-top));
}
html[data-skin="pixel"] header {
  height: 104px;
  margin-bottom: -3px;
  background-image: url("/assets/pixel-skin/header-foreground.png?v=20260722-4");
}
html[data-skin="pixel"] .qq-music-panel .button-grid button {
  justify-content: center;
  gap: 0;
}
html[data-skin="pixel"] .qq-music-panel .button-grid button small {
  display: none;
}
html[data-skin="pixel"] .qq-music-panel .button-grid button span {
  display: block;
  margin: 0;
}

/* QQ Music's compact like control lives beside the active song title in Skin 2. */
.media-title-row { display: flex; align-items: center; gap: 10px; }
.media-title-row h2 { min-width: 0; flex: 1; }
.qq-inline-like { display: none; }
html[data-skin="pixel"] .shell {
  padding-top: max(0px, calc(env(safe-area-inset-top) - 18px));
}
html[data-skin="pixel"] .now-playing::before {
  top: -38px;
  height: 38px;
  background-image: url("/assets/pixel-skin/top-cloud-foreground.png?v=20260722-4");
}
html[data-skin="pixel"] #qqMusicPanel { display: none !important; }
html[data-skin="pixel"] #qqInlineLikeButton {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}
html[data-skin="pixel"] #qqInlineLikeButton span {
  display: block;
  width: 26px;
  height: 25px;
  background: url("/assets/pixel-skin/like-heart.png?v=20260722-4") center / contain no-repeat;
  image-rendering: pixelated;
}
html[data-skin="pixel"] #qqInlineLikeButton.liked span {
  background-image: url("/assets/pixel-skin/like-heart-solid.png?v=20260722-4");
}
html[data-skin="pixel"] #qqInlineLikeButton:disabled { opacity: 1; }

/* Pixel-sky details retained after the QQ preference panel was removed. */
html[data-skin="pixel"] .now-playing {
  overflow: visible;
}
html[data-skin="pixel"] .pixel-card-edge {
  position: absolute;
  z-index: 0 !important;
  display: block;
  pointer-events: none;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}
html[data-skin="pixel"] .pixel-card-edge-left {
  top: -12px;
  left: 0;
  width: 20px;
  height: 170px;
  background-image: url("/assets/pixel-skin/left-card-pixels.png?v=20260722-5");
}
html[data-skin="pixel"] .pixel-card-edge-right {
  top: -28px;
  right: 0;
  width: 20px;
  height: 195px;
  background-image: url("/assets/pixel-skin/right-card-pixels.png?v=20260722-5");
}
html[data-skin="pixel"] .round.primary::before {
  inset: -21px;
  background: url("/assets/pixel-skin/play-halo.png?v=20260722-5") center / contain no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .9;
}
html[data-skin="pixel"] #playIcon {
  display: block;
  line-height: 1;
  transform: translateX(3px);
}
html[data-skin="pixel"] #playButton.is-playing #playIcon {
  transform: none;
}
html[data-skin="pixel"] .transport {
  position: relative;
  isolation: isolate;
}
html[data-skin="pixel"] .transport::before,
html[data-skin="pixel"] .transport::after {
  position: absolute;
  z-index: 0;
  width: 22px;
  height: 22px;
  background: url("/assets/pixel-skin/sparkle.png?v=20260722-5") center / contain no-repeat;
  content: "";
  image-rendering: pixelated;
  pointer-events: none;
}
html[data-skin="pixel"] .transport::before { left: 15%; bottom: 8px; }
html[data-skin="pixel"] .transport::after { right: 14%; top: 13px; }
html[data-skin="pixel"] .transport button { z-index: 1; }

.qq-playing-indicator { display: none; }
html[data-skin="pixel"] .shell.qq-active #systemControlTarget { display: none; }
html[data-skin="pixel"] .shell.qq-active .qq-playing-indicator {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  color: #29ef8d;
  font-size: 11px;
  font-weight: 800;
}
html[data-skin="pixel"] .qq-playing-indicator > span { margin-right: 4px; }
html[data-skin="pixel"] .qq-playing-indicator i {
  display: block;
  width: 3px;
  height: 5px;
  background: #c59aff;
  box-shadow: 0 0 5px rgba(197,154,255,.6);
  animation: pixel-equalizer .75s steps(2, end) infinite alternate;
}
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(2) { height: 9px; animation-delay: -.23s; }
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(3) { height: 13px; animation-delay: -.48s; }
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(4) { height: 8px; animation-delay: -.15s; }
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(5) { height: 4px; animation-delay: -.37s; }
html[data-skin="pixel"] .qq-playing-indicator:not(.playing) i { animation-play-state: paused; opacity: .5; }
html[data-skin="pixel"] #qqInlineLikeButton {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
html[data-skin="pixel"] #qqInlineLikeButton span {
  width: 34px;
  height: 31px;
  background-image: url("/assets/pixel-skin/like-heart.png?v=20260722-5");
}
html[data-skin="pixel"] #qqInlineLikeButton.liked span {
  background-image: url("/assets/pixel-skin/like-heart-solid.png?v=20260722-5");
}
@keyframes pixel-equalizer {
  from { transform: scaleY(.42); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

/* Replace all accidental screenshot borders with isolated pixel ornaments. */
html[data-skin="pixel"] body::after {
  height: 55px;
  background: url("/assets/pixel-skin/bottom-scene-clean.png?v=20260722-6") center bottom / 100% auto no-repeat;
}
html[data-skin="pixel"] .pixel-card-edge {
  width: 3px;
  height: 3px;
  background: #c79cff;
  background-image: none;
  box-shadow: none;
}
html[data-skin="pixel"] .pixel-card-edge-left {
  top: 14px;
  left: 7px;
  opacity: .78;
  box-shadow: 0 14px #b981ed, 0 31px #8d62c8, 4px 48px #c69cff, 0 69px #7048ac, 5px 94px #b98cf1, 0 121px #6d4799, 4px 148px #ad7fe5;
}
html[data-skin="pixel"] .pixel-card-edge-right {
  top: -3px;
  right: 8px;
  opacity: .9;
  box-shadow: -2px 10px #f0a7eb, 2px 21px #d58fe2, -5px 33px #af70cc, 3px 48px #e8a0e9, -2px 66px #a766c4, 4px 87px #774994, -3px 111px #b378d0, 2px 142px #69417f;
}
html[data-skin="pixel"] .round.primary::before {
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  inset: auto;
  z-index: -1;
  background: #d9b0ff;
  box-shadow: -53px -13px #9666d1, -47px -32px #d38fe5, -33px -47px #9d69d1, -13px -54px #e4a7ec, 14px -52px #a974d4, 35px -43px #d995e6, 50px -24px #9d6cc7, 55px 2px #e2abea, 47px 27px #9867c9, 30px 45px #d494e3, 7px 54px #a973d2, -19px 52px #e1a6ea, -40px 39px #9d6bcd, -54px 18px #d596e4;
  content: "";
  transform: translate(-50%, -50%);
  -webkit-mask-image: none;
  mask-image: none;
}
html[data-skin="pixel"] #playIcon { position: relative; z-index: 1; }
html[data-skin="pixel"] .shell > .pixel-bottom-trail {
  position: absolute;
  z-index: 0;
  display: block;
  width: 3px;
  height: 3px;
  bottom: 34px;
  background: #d8a4f1;
  pointer-events: none;
}
html[data-skin="pixel"] .pixel-bottom-trail-left {
  left: 10px;
  box-shadow: 4px -11px #b67add, 0 -25px #8956b7, 5px -43px #c58ee6, 1px -65px #75469b, 6px -91px #a96bd0, 0 -122px #613984;
}
html[data-skin="pixel"] .pixel-bottom-trail-right {
  right: 10px;
  box-shadow: -4px -11px #b67add, 0 -25px #8956b7, -5px -43px #c58ee6, -1px -65px #75469b, -6px -91px #a96bd0, 0 -122px #613984;
}
html[data-skin="pixel"] .shell.qq-active .qq-playing-indicator {
  margin-right: 0 !important;
  margin-left: auto;
}
html[data-skin="pixel"] .qq-playing-indicator i {
  width: 3px;
  height: 3px;
  background: #c59aff;
  box-shadow: 0 -4px #c59aff, 0 -8px #c59aff;
}
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(2) { height: 3px; box-shadow: 0 -4px #c59aff, 0 -8px #c59aff, 0 -12px #c59aff; }
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(3) { height: 3px; box-shadow: 0 -4px #c59aff, 0 -8px #c59aff, 0 -12px #c59aff, 0 -16px #c59aff; }
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(4) { height: 3px; box-shadow: 0 -4px #c59aff, 0 -8px #c59aff; }
html[data-skin="pixel"] .qq-playing-indicator i:nth-of-type(5) { height: 3px; box-shadow: 0 -4px #c59aff; }

/* Skin 2 background master.  The approved static scene is one bitmap layer;
   the live controls intentionally sit above it without any legacy scenery. */
html[data-skin="pixel"],
html[data-skin="pixel"] body {
  background-color: #07091d;
}
html[data-skin="pixel"] body {
  background-image: url("/assets/pixel-skin/pixel-sky-background-v2.png?v=20260722-2");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: min(100vw, 520px) auto;
}
html[data-skin="pixel"] body::before,
html[data-skin="pixel"] body::after,
html[data-skin="pixel"] .shell::before,
html[data-skin="pixel"] .shell::after,
html[data-skin="pixel"] .now-playing::before,
html[data-skin="pixel"] .round.primary::before,
html[data-skin="pixel"] .transport::before,
html[data-skin="pixel"] .transport::after {
  content: none;
  background: none;
}
html[data-skin="pixel"] .pixel-card-edge,
html[data-skin="pixel"] .shell > .pixel-bottom-trail {
  display: none;
}

/* The master background owns the meteor and cloud; this header restores only
   the live title and setting control above that scenery. */
html[data-skin="pixel"] header {
  width: auto;
  height: auto;
  margin: 0 0 18px;
  padding: 0;
  background: none;
}
html[data-skin="pixel"] header > div {
  padding-left: 8px;
  opacity: 1;
  pointer-events: auto;
}
html[data-skin="pixel"] header .eyebrow {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  color: #c88eff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-shadow: 0 0 11px rgba(202,133,255,.45);
}

/* Keep the live content aligned with the small, status-bar-aware shift in v2. */
html[data-skin="pixel"] .shell {
  padding-top: max(21px, env(safe-area-inset-top));
}

/* Reference-accurate pause mark: two substantial pixel bars, not a font glyph. */
html[data-skin="pixel"] #playButton.is-playing #playIcon {
  display: flex;
  width: 23px;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0;
  transform: none;
}
html[data-skin="pixel"] #playButton.is-playing #playIcon::before,
html[data-skin="pixel"] #playButton.is-playing #playIcon::after {
  width: 7px;
  height: 30px;
  background: #100d27;
  content: "";
}

/* Reference-derived 2x bitmap wordmark: keep its original pixel geometry. */
html[data-skin="pixel"] header .eyebrow {
  width: 102px;
  height: 13px;
  margin: 0 0 2px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-shadow: none;
  background: url("/assets/pixel-skin/brand-phone-remote.png?v=20260722-2") left center / 102px 13px no-repeat;
}

/* The title carries asymmetric top/bottom spacing, so center the visible heart
   against the title's glyph line rather than the flex row's outer box. */
html[data-skin="pixel"] #qqInlineLikeButton {
  align-self: center;
  transform: translateY(10px);
}