/* Skin · gallery — every rule must stay scoped to body[data-skin="gallery"]. */

.theme-swatch-gallery { background: linear-gradient(135deg, var(--swatch-gallery-paper) 0 68%, var(--swatch-gallery-accent) 68%); }

/* ---------- palette: tonal grays only, the cover brings the colour ---------- */
body[data-skin="gallery"] {
  --g-wall: #eeece6;
  --g-ink: #1f1e1c;
  --g-mute: #86837b;
  --g-hair: rgba(31, 30, 28, .2);
  --g-s: min(56vh, 42vw, 640px);
  --g-track: .18em;
  --g-faint: #a19e96;
  --g-m: clamp(24px, 4vw, 64px);
  --g-grotesk: "Helvetica Neue", "Inter", "Hiragino Sans GB", "PingFang SC", system-ui, sans-serif;
  --color-canvas: var(--g-wall);
  --color-surface: #f6f4ef;
  --color-surface-2: #e9e6df;
  --color-ink: var(--g-ink);
  --color-muted: var(--g-mute);
  --color-rule: var(--g-hair);
  --color-accent: var(--g-ink);
  --color-focus: var(--g-ink);
  --color-dock: #f4f2ed;
  --color-dock-ink: var(--g-ink);
  --color-dock-muted: var(--g-mute);
  --color-modal: #f4f2ed;
  --color-modal-2: #eceae4;
  --color-overlay: rgba(238, 236, 230, .86);
  --color-shadow: rgba(40, 34, 24, .16);
  --web-fg: var(--g-ink);
  --web-muted: var(--g-mute);
  --web-line: var(--g-hair);
  --web-accent: var(--g-ink);
  --accent: var(--g-ink);
  --track: var(--g-hair);
  color: var(--g-ink);
  color-scheme: light;
  font-family: var(--g-grotesk);
  background:
    radial-gradient(ellipse 90% 75% at 50% -8%, #f8f7f3 0%, rgba(248, 247, 243, 0) 70%),
    radial-gradient(ellipse 140% 100% at 50% 40%, #efede7 0%, #e9e6df 100%) !important;
  background-color: var(--g-wall) !important;
  background-attachment: fixed;
}

@media (min-width: 821px) {
  body[data-skin="gallery"] { --g-s: min(68vh, 52vw, 760px); }
}

/* ---------- strip everything that is not the wall and the work ---------- */
body[data-skin="gallery"] #ambientCanvas,
body[data-skin="gallery"] .background-image,
body[data-skin="gallery"] .background-veil,
body[data-skin="gallery"] .stamp-decoration,
body[data-skin="gallery"] .film-perforation,
body[data-skin="gallery"] .glass-grid,
body[data-skin="gallery"] .beat-halo,
body[data-skin="gallery"] .scan-glint,
body[data-skin="gallery"] #spectrumRuler,
body[data-skin="gallery"] .stage::before,
body[data-skin="gallery"] .stage::after,
body[data-skin="gallery"] .vinyl-record,
body[data-skin="gallery"] .sleeve-shadow,
body[data-skin="gallery"] .sleeve-edge,
body[data-skin="gallery"] .art-highlight,
body[data-skin="gallery"] .art-shell::before,
body[data-skin="gallery"] .art-shell::after,
body[data-skin="gallery"] .art-caption,
body[data-skin="gallery"] .eyebrow,
body[data-skin="gallery"] .touch-album-kicker,
body[data-skin="gallery"] .touch-album-heading,
body[data-skin="gallery"] .touch-now-playing,
body[data-skin="gallery"] .touch-hint,
body[data-skin="gallery"] .dock-corner,
body[data-skin="gallery"] .footer-note,
body[data-skin="gallery"] #trackKicker,
body[data-skin="gallery"] #trackSubtitle,
body[data-skin="gallery"] #nextTrackTitle,
body[data-skin="gallery"] .theme-menu-label,
body[data-skin="gallery"] .utility-controls #motionBtn,
body[data-skin="gallery"] .utility-controls #cleanBtn,
body[data-skin="gallery"] .volume-control > span,
body[data-skin="gallery"] .ambient-noise { display: none !important; }

/* ---------- flatten the DOM into one grid so the wall label can interleave ---------- */
body[data-skin="gallery"] .stage-header,
body[data-skin="gallery"] .brand-block,
body[data-skin="gallery"] .stage,
body[data-skin="gallery"] .composition,
body[data-skin="gallery"] .touch-album-panel,
body[data-skin="gallery"] .legacy-track-copy { display: contents !important; }
body[data-skin="gallery"] .app {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  /* The wall label's bottom edge is the artwork's bottom edge: the bottom padding
     is exactly the space the fixed artwork leaves under itself. */
  padding: 0 0 calc(54vh - var(--g-s) / 2) 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(50vw + var(--g-s) / 2 + 40px) max-content minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) repeat(4, max-content);
  align-content: end;
  background: transparent;
}

/* ---------- gallery mark and theme menu ---------- */
body[data-skin="gallery"] .wordmark { position: absolute; z-index: 40; top: 28px; left: var(--g-m); color: var(--g-ink); font: 400 11px/1 var(--g-grotesk); letter-spacing: var(--g-track); text-decoration: none; }
body[data-skin="gallery"] .header-meta { position: absolute; z-index: 60; top: 20px; right: var(--g-m); margin: 0; display: block; }
body[data-skin="gallery"] .theme-menu summary { width: auto; min-height: 24px; padding: 0; display: flex; gap: 8px; background: transparent; border: 0; font: 400 11px/1 var(--g-grotesk); letter-spacing: var(--g-track); text-transform: uppercase; color: var(--g-mute); }
body[data-skin="gallery"] .theme-menu summary strong { font: 400 11px/1 var(--g-grotesk); letter-spacing: var(--g-track); color: var(--g-mute); }
body[data-skin="gallery"] .theme-menu summary:hover strong { color: var(--g-ink); }
body[data-skin="gallery"] .theme-menu-list,
body[data-skin="gallery"] .more-controls-menu { background: #f6f4ef; border: 1px solid var(--g-hair); border-radius: 1px; box-shadow: 2px 6px 18px rgba(40, 34, 24, .12); backdrop-filter: none; }
body[data-skin="gallery"] .theme-menu-list button,
body[data-skin="gallery"] .more-controls-menu button { color: var(--g-ink); border-radius: 0; }
body[data-skin="gallery"] .theme-menu-list button:hover,
body[data-skin="gallery"] .theme-menu-list button.active,
body[data-skin="gallery"] .more-controls-menu button:hover { background: rgba(31, 30, 28, .06); border-color: transparent; }

/* ---------- the work: thin dark frame, white mat, spotlight shadow ---------- */
body[data-skin="gallery"] .art-shell {
  position: fixed; z-index: 3; left: 50%; top: 46vh;
  width: var(--g-s) !important; height: var(--g-s); max-width: none; aspect-ratio: auto; margin: 0;
  padding: 12px; box-sizing: border-box; perspective: none;
  transform: translate(-50%, -50%) !important;
  background: #e7e3db;
  border: 1px solid #34312d;
  box-shadow:
    inset 0 0 0 1px #b9b2a5,
    inset 0 0 0 2px rgba(255, 255, 255, .4),
    inset 0 4px 7px rgba(70, 58, 44, .12),
    1px 1px 1px rgba(25, 20, 14, .40),
    2px 3px 3px rgba(25, 20, 14, .22),
    0 8px 24px rgba(25, 20, 14, .12),
    5px 9px 10px rgba(25, 20, 14, .10),
    14px 38px 50px -8px rgba(25, 20, 14, .16),
    30px 84px 110px -22px rgba(25, 20, 14, .10);
}
body[data-skin="gallery"] .art-frame { position: absolute; inset: 12px; left: 12px; top: 12px; width: auto; height: auto; aspect-ratio: auto; transform: none !important; border-radius: 0; background: #e7e3db; box-shadow: 0 0 0 1px rgba(50, 42, 32, .32), 0 0 0 2px rgba(255, 255, 255, .38); }
body[data-skin="gallery"] .art-frame img { width: 100%; height: 100%; object-fit: contain; transform: none !important; transition: none; filter: none !important; }
/* Switch = zoom + fade. The frame keeps `transform: none !important`, so the zoom
   is the `scale` property on the image (clipped by the frame) and the fade is the
   frame's own opacity. */
body[data-skin="gallery"].is-transitioning .art-frame-a,
body[data-skin="gallery"].is-shared-art-transition .art-frame-a { animation: gallery-out calc(340ms * var(--motion, 1)) cubic-bezier(.2,.7,.2,1) both !important; }
body[data-skin="gallery"].is-transitioning .art-frame-b,
body[data-skin="gallery"].is-shared-art-transition .art-frame-b { animation: gallery-in calc(340ms * var(--motion, 1)) cubic-bezier(.2,.7,.2,1) both !important; }
body[data-skin="gallery"].is-transitioning .art-frame-a img,
body[data-skin="gallery"].is-shared-art-transition .art-frame-a img { animation: galleryZoomOut calc(340ms * var(--motion, 1)) cubic-bezier(.2,.7,.2,1) both !important; }
body[data-skin="gallery"].is-transitioning .art-frame-b img,
body[data-skin="gallery"].is-shared-art-transition .art-frame-b img { animation: galleryZoomIn calc(340ms * var(--motion, 1)) cubic-bezier(.2,.7,.2,1) both !important; }
@keyframes gallery-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gallery-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes galleryZoomOut { from { scale: 1; } to { scale: calc(1 + .045 * var(--motion, 1)); } }
@keyframes galleryZoomIn { from { scale: calc(1 - .035 * var(--motion, 1)); } to { scale: 1; } }
/* Playing = the work settles into focus: a hair more contrast, a hair of scale. */
body[data-skin="gallery"].is-playing .art-frame { animation: galleryFocus calc(7200ms * var(--motion, 1)) ease-in-out infinite; }
body[data-skin="gallery"].is-playing .art-frame img { animation: galleryFocusZoom calc(7200ms * var(--motion, 1)) ease-in-out infinite; }
@keyframes galleryFocus { 0%, 100% { filter: contrast(1) brightness(1); } 50% { filter: contrast(calc(1 + .05 * var(--motion, 1))) brightness(1.012); } }
@keyframes galleryFocusZoom { 0%, 100% { scale: 1; } 50% { scale: calc(1 + .008 * var(--motion, 1)); } }

/* ---------- museum wall label ---------- */
body[data-skin="gallery"] #trackTitle,
body[data-skin="gallery"] #albumTitle,
body[data-skin="gallery"] #artistName,
body[data-skin="gallery"] #trackIndex,
body[data-skin="gallery"] #trackTotal {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  overflow: hidden;
  clip-path: none;
  min-width: 0;
  max-width: 260px;
  color: var(--g-mute) !important;
  font: 400 14px/1.45 var(--g-grotesk);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  opacity: 1;
  animation: none !important;
}
body[data-skin="gallery"] #trackTitle { grid-column: 2 / 4; grid-row: 2; max-width: 260px; margin-bottom: 10px; color: var(--g-ink) !important; font-size: 16px; font-weight: 400; line-height: 1.35; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
body[data-skin="gallery"] #albumTitle { grid-column: 2 / 4; grid-row: 3; }
body[data-skin="gallery"] #artistName { grid-column: 2 / 4; grid-row: 4; }
body[data-skin="gallery"] #trackIndex { grid-column: 2; grid-row: 5; margin-top: 10px; letter-spacing: 0; }
body[data-skin="gallery"] #trackTotal { grid-column: 3; grid-row: 5; margin: 10px 0 0 .28em; letter-spacing: 0; }

/* ---------- checklist: a quiet column in the left margin ---------- */
body[data-skin="gallery"] .touch-album-heading + .touch-track-list,
body[data-skin="gallery"] #trackList { position: fixed; z-index: 4; left: auto; right: calc(50vw + var(--g-s) / 2 + 40px); top: calc(46vh - var(--g-s) / 2 - 8px); bottom: auto; width: min(220px, calc(50vw - var(--g-s) / 2 - 40px - var(--g-m))); max-height: calc(54vh + var(--g-s) / 2 - 130px); padding: 0; display: block; overflow-y: auto; scrollbar-width: none; }
body[data-skin="gallery"] #trackList::-webkit-scrollbar { display: none; }
body[data-skin="gallery"] .touch-track-row {
  width: 100%;
  min-height: 26px;
  padding: 3px 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0;
  align-items: baseline;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--g-mute);
  font: 400 14px/20px var(--g-grotesk);
  text-align: left;
  opacity: 1 !important;
  transform: none !important;
}
body[data-skin="gallery"] .touch-track-row::before,
body[data-skin="gallery"] .touch-track-row::after,
body[data-skin="gallery"] .touch-track-row .state-mark { display: none !important; }
body[data-skin="gallery"] .touch-track-row .number { grid-column: 1; font: 400 14px/20px var(--g-grotesk); font-variant-numeric: tabular-nums; opacity: 1; }
body[data-skin="gallery"] .touch-track-row .title { grid-column: 2; overflow: hidden; font: 400 14px/20px var(--g-grotesk); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
body[data-skin="gallery"] .touch-track-row:hover { color: var(--g-ink); }
body[data-skin="gallery"] .touch-track-row.is-active,
body[data-skin="gallery"] .touch-track-row.is-active .number { color: var(--g-ink); }
body[data-skin="gallery"] .touch-track-row:focus-visible,
body[data-skin="gallery"] .control-dock button:focus-visible { outline: 1px solid var(--g-ink); outline-offset: 2px; }

/* ---------- controls: hairline progress and tiny text buttons ---------- */
body[data-skin="gallery"] .control-dock,
body[data-skin="gallery"] .control-dock.is-visible {
  position: fixed;
  z-index: 52;
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
  padding: 0 var(--g-m) 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 0;
  align-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
body[data-skin="gallery"] .control-dock > * { pointer-events: auto; }
body[data-skin="gallery"] .stage-footer { position: static; grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; display: block; pointer-events: auto; }
body[data-skin="gallery"] .progress-block { width: 100%; }
body[data-skin="gallery"] .progress-track { height: 1px !important; background: var(--g-hair); background-clip: content-box; }
body[data-skin="gallery"] .progress-track i { height: 1px !important; background: var(--g-ink); }
body[data-skin="gallery"] .progress-track i::after { display: none; }
body[data-skin="gallery"] .time-row { margin-top: 8px; display: flex; justify-content: space-between; color: var(--g-mute); font: 400 11px/1 var(--g-grotesk); font-variant-numeric: tabular-nums; letter-spacing: var(--g-track); }
body[data-skin="gallery"] .control-dock,
body[data-skin="gallery"] .control-dock button,
body[data-skin="gallery"] .control-dock .app-repo-link,
body[data-skin="gallery"] .more-controls summary { color: var(--g-ink); }
body[data-skin="gallery"] .primary-controls { grid-column: 1; grid-row: 2; gap: 20px; justify-self: start; align-items: center; display: flex !important; }
body[data-skin="gallery"] .utility-controls { grid-column: 2; grid-row: 2; justify-self: end; gap: 20px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
body[data-skin="gallery"] .control-dock button,
body[data-skin="gallery"] .control-dock .app-repo-link,
body[data-skin="gallery"] .more-controls summary {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #6f6c65;
  font: 400 11px/1 var(--g-grotesk);
  letter-spacing: var(--g-track);
  text-transform: uppercase;
  text-decoration: none;
  transform: none;
}
body[data-skin="gallery"] .control-dock .primary-controls button,
body[data-skin="gallery"] .control-dock .utility-controls button,
body[data-skin="gallery"] .control-dock .utility-controls .app-repo-link,
body[data-skin="gallery"] .control-dock .utility-controls .more-controls summary { width: auto !important; min-width: 0 !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
body[data-skin="gallery"] .control-dock button:hover,
body[data-skin="gallery"] .control-dock .app-repo-link:hover,
body[data-skin="gallery"] .more-controls summary:hover { color: var(--g-ink); background: transparent; transform: none; }
body[data-skin="gallery"] .utility-controls .control-label { display: inline !important; }
body[data-skin="gallery"] .utility-controls .control-label,
body[data-skin="gallery"] .utility-controls #loadFolderBtn,
body[data-skin="gallery"] .utility-controls #mappingBtn,
body[data-skin="gallery"] .utility-controls .app-repo-link,
body[data-skin="gallery"] .utility-controls .more-controls summary { color: var(--g-faint); font-size: 11px !important; }
body[data-skin="gallery"] .utility-controls #loadFolderBtn:hover,
body[data-skin="gallery"] .utility-controls #mappingBtn:hover,
body[data-skin="gallery"] .utility-controls .app-repo-link:hover,
body[data-skin="gallery"] .utility-controls .more-controls summary:hover { color: var(--g-ink); }
body[data-skin="gallery"] .utility-controls button span[aria-hidden="true"] { display: none; }
body[data-skin="gallery"] .utility-controls .app-repo-link > span:first-child { display: none; }
body[data-skin="gallery"] .more-controls { display: block; }
body[data-skin="gallery"] .more-controls summary { width: auto; letter-spacing: var(--g-track); }
body[data-skin="gallery"] .more-controls-menu button { min-height: 30px; text-transform: none; letter-spacing: .02em; justify-content: flex-start; }

/* transport as text */
body[data-skin="gallery"] .primary-controls button { font-size: 0 !important; width: auto !important; height: auto !important; }
body[data-skin="gallery"] .primary-controls button::after { font: 400 11px/1 var(--g-grotesk); letter-spacing: var(--g-track); text-transform: uppercase; }
body[data-skin="gallery"] #prevBtn::after { content: "Prev"; }
body[data-skin="gallery"] #nextBtn::after { content: "Next"; }
body[data-skin="gallery"] #playBtn::after { content: "Play"; }
body[data-skin="gallery"].is-playing #playBtn::after { content: "Pause"; }
body[data-skin="gallery"] #playBtn { color: var(--g-mute); min-width: 0; }
body[data-skin="gallery"] #playBtn.play-button { height: 28px !important; min-height: 0 !important; border-radius: 0 !important; }
body[data-skin="gallery"].is-playing #playBtn { color: var(--g-ink); }
body[data-skin="gallery"] #playBtn::before,
body[data-skin="gallery"] #playBtn .play-icon { display: none !important; }
html[lang="zh-CN"] body[data-skin="gallery"] #prevBtn::after { content: "上一首"; }
html[lang="zh-CN"] body[data-skin="gallery"] #nextBtn::after { content: "下一首"; }
html[lang="zh-CN"] body[data-skin="gallery"] #playBtn::after { content: "播放"; }
html[lang="zh-CN"] body[data-skin="gallery"].is-playing #playBtn::after { content: "暂停"; }

body[data-skin="gallery"] .volume-control { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--g-faint); }
body[data-skin="gallery"] .volume-control input { -webkit-appearance: none; appearance: none; width: 64px; height: 15px; margin: 0; background: transparent; cursor: pointer; }
body[data-skin="gallery"] .volume-control input::-webkit-slider-runnable-track { height: 1px; background: var(--g-hair); border: 0; }
body[data-skin="gallery"] .volume-control input::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 9px; margin-top: -4px; border: 0; border-radius: 0; background: var(--g-ink); box-shadow: none; }
body[data-skin="gallery"] .volume-control input::-moz-range-track { height: 1px; background: var(--g-hair); border: 0; }
body[data-skin="gallery"] .volume-control input::-moz-range-thumb { width: 2px; height: 9px; border: 0; border-radius: 0; background: var(--g-ink); }

/* ---------- overlays in the same palette ---------- */
body[data-skin="gallery"] .welcome-panel,
body[data-skin="gallery"] .mapping-panel { background: rgba(238, 236, 230, .88); backdrop-filter: none; }
body[data-skin="gallery"] .welcome-card,
body[data-skin="gallery"] .mapping-card { color: var(--g-ink); background: #f8f6f2; border: 1px solid var(--g-hair); border-radius: 1px; box-shadow: 4px 12px 40px rgba(40, 34, 24, .12); }
body[data-skin="gallery"] .welcome-card *,
body[data-skin="gallery"] .mapping-card * { color: var(--g-ink); }
body[data-skin="gallery"] .welcome-card p,
body[data-skin="gallery"] .welcome-eyebrow,
body[data-skin="gallery"] .format-tip,
body[data-skin="gallery"] .mapping-header p { color: var(--g-mute) !important; }
body[data-skin="gallery"] .welcome-card b,
body[data-skin="gallery"] .welcome-card code { color: var(--g-ink) !important; }
body[data-skin="gallery"] .more-controls-menu,
body[data-skin="gallery"] .more-controls-menu * { font-family: var(--g-grotesk); }
body[data-skin="gallery"] #toast.toast { color: var(--g-ink) !important; background: #f8f6f2 !important; border: 1px solid var(--g-hair); border-radius: 1px; box-shadow: none; }
body[data-skin="gallery"] .drop-overlay { color: var(--g-ink); background: rgba(238, 236, 230, .92); }

/* ---------- mobile: art, label, checklist in one calm column ---------- */
@media (max-width: 820px) {
  body[data-skin="gallery"] { --g-m: 28px; }
  body[data-skin="gallery"] .app { position: relative; inset: auto; min-height: 100dvh; overflow: visible; padding: 88px var(--g-m) 124px; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; align-content: start; }
  body[data-skin="gallery"] .art-shell { position: relative; left: auto; top: auto; grid-column: 1 / -1; grid-row: 1; width: 100% !important; height: auto; aspect-ratio: 1; margin: 0 0 32px; padding: 8px; transform: none !important; box-shadow: inset 0 0 0 1px #b9b2a5, inset 0 0 0 2px rgba(255, 255, 255, .4), inset 0 2px 4px rgba(70, 58, 44, .12), 1px 1px 1px rgba(25, 20, 14, .38), 0 4px 12px rgba(25, 20, 14, .12), 4px 8px 12px -2px rgba(25, 20, 14, .14), 8px 22px 30px -8px rgba(25, 20, 14, .12); }
  body[data-skin="gallery"] .art-frame { inset: 8px; left: 8px; top: 8px; }
  body[data-skin="gallery"] #trackTitle,
  body[data-skin="gallery"] #albumTitle,
  body[data-skin="gallery"] #artistName { grid-column: 1 / -1; max-width: none; margin-left: 0; }
  body[data-skin="gallery"] #trackIndex { grid-column: 1; margin-left: 0; }
  body[data-skin="gallery"] #trackTotal { grid-column: 2; margin-left: .28em; }
  body[data-skin="gallery"] #trackList { position: static; grid-column: 1 / -1; grid-row: 6; width: 100%; max-height: none; margin-top: 30px; padding: 0; overflow: visible; }
  body[data-skin="gallery"] .touch-track-row { min-height: 36px; padding: 8px 0; grid-template-columns: 30px minmax(0, 1fr); }
  body[data-skin="gallery"] .touch-track-row .title { white-space: normal; }
  body[data-skin="gallery"] .control-dock,
  body[data-skin="gallery"] .control-dock.is-visible { padding: 12px var(--g-m) 10px; background: var(--g-wall); pointer-events: auto; grid-template-rows: auto auto auto; gap: 6px 0; }
  body[data-skin="gallery"] .control-dock button, body[data-skin="gallery"] .control-dock .app-repo-link, body[data-skin="gallery"] .more-controls summary { min-height: 28px; }
  body[data-skin="gallery"] .wordmark { top: 30px; }
  body[data-skin="gallery"] .header-meta { top: 22px; }
  body[data-skin="gallery"] .primary-controls { grid-column: 1 / -1; grid-row: 2; justify-self: center; gap: 36px; display: flex !important; }
  body[data-skin="gallery"] .utility-controls { grid-column: 1 / -1; grid-row: 3; justify-self: end; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; flex-wrap: nowrap; gap: 0 10px; }
  body[data-skin="gallery"] .utility-controls .control-label, body[data-skin="gallery"] .utility-controls #loadFolderBtn, body[data-skin="gallery"] .utility-controls #mappingBtn, body[data-skin="gallery"] .utility-controls .app-repo-link { font-size: clamp(9px, 2.6vw, 10px) !important; letter-spacing: .06em; white-space: nowrap; }
  body[data-skin="gallery"] .progress-block { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
  body[data-skin="gallery"] .time-row { display: contents; }
  body[data-skin="gallery"] #currentTime { grid-column: 1; grid-row: 1; }
  body[data-skin="gallery"] .progress-track { grid-column: 2; grid-row: 1; }
  body[data-skin="gallery"] #durationTime { grid-column: 3; grid-row: 1; }
  body[data-skin="gallery"] .volume-control { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="gallery"].is-transitioning .art-frame-a,
  body[data-skin="gallery"].is-transitioning .art-frame-b { animation-duration: 1ms !important; }
  /* no infinite focus breathing when the OS asks for less motion */
  body[data-skin="gallery"].is-playing .art-frame,
  body[data-skin="gallery"].is-playing .art-frame img { animation: none !important; }
}

/* Immersive keeps the wall label on the artwork's bottom edge instead of the viewport edge. */
html body[data-skin="gallery"][data-clean="true"] .app {
  padding: 0 0 calc(54vh - var(--g-s) / 2) 0 !important;
}

/* The dock override above forced left alignment inside the menu; keep the tabs centred. */
body[data-skin="gallery"] .more-controls-menu .motion-tabs button {
  justify-content: center;
  text-align: center;
}