/* --- production-css --- */
:root {
  color-scheme: dark;
  --ink: #f4f1e9;
  --muted: rgba(244, 241, 233, 0.5);
  --faint: rgba(244, 241, 233, 0.28);
  --line: rgba(244, 241, 233, 0.1);
  --line-strong: rgba(244, 241, 233, 0.18);
  --surface: #0b0b0a;
  --surface-raised: #11110f;
  --surface-soft: #171714;
  --accent: #b8ff76;
  --catalog-red: #d76058;
  --danger: #ff736b;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020302;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

button,
label,
input[type="range"] {
  touch-action: manipulation;
}

.app {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: #020302;
}

.app[data-recording="true"] { touch-action: manipulation; }

.ambient-stage,
#stage,
#stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ambient-stage {
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(.86);
  transform-origin: 50% 40%;
  transition: opacity 280ms ease, transform 460ms var(--ease);
  pointer-events: none;
}

.app[data-mode="player"] .ambient-stage,
.app[data-mode="metadata"] .ambient-stage {
  opacity: 1;
  transform: scale(1);
  transition-delay: 115ms;
}

.app[data-mode="metadata"] .ambient-stage {
  transform: translateY(-4.5vh) scale(.91);
  opacity: .72;
  transition-delay: 0ms;
}

.app[data-recording="true"] .ambient-stage {
  transform: scale(1.22);
  transform-origin: 50% 0;
  opacity: 1;
  transition-delay: 0ms;
}

#stage {
  z-index: 0;
  background: #020302;
}

#stage canvas {
  display: block;
  object-fit: cover;
}

.vignette,
.grain,
.mobile-luma-shield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vignette {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 27%, rgba(0, 0, 0, .07) 49%, rgba(0, 0, 0, .86) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .36), transparent 29%, transparent 65%, rgba(0, 0, 0, .72));
}

.grain {
  z-index: 2;
  inset: -20%;
  opacity: .022;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .1) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, .08) 0 1px, transparent 1px);
  background-size: 8px 8px, 13px 13px, 19px 19px;
  animation: grain-shift 900ms steps(2, end) infinite;
}

@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(.8%, .6%); }
}

.mobile-luma-shield {
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle at 50% 38%, rgba(0, 0, 0, .04), rgba(0, 0, 0, .28));
}

.global-header {
  position: absolute;
  z-index: 14;
  top: var(--safe-top);
  left: 50%;
  width: min(1220px, calc(100% - 36px));
  min-height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  transform: translateX(-50%);
  transition: opacity 220ms ease, transform 320ms var(--ease), visibility 0s linear 0s;
}

.app[data-recording="true"] .global-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -14px);
  transition-delay: 0s, 0s, 220ms;
}

.brand-hold {
  justify-self: start;
  appearance: none;
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .24em;
  text-align: left;
}

.brand-hold::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(184, 255, 118, .5);
  vertical-align: 2px;
}

.brand-hold.is-holding { opacity: .55; }

.primary-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 6, 5, .68);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}

.primary-tab {
  min-width: 86px;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 9px;
  font-weight: 740;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: background 170ms ease, color 170ms ease;
}

.primary-tab[aria-selected="true"] {
  background: rgba(244, 241, 233, .1);
  color: var(--ink);
}

.primary-tab.is-holding { color: var(--ink); background: rgba(244, 241, 233, .055); }

.header-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-count {
  color: var(--faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.engine-close { display: none; }

.library-view {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, .055), transparent 38%),
    var(--surface);
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 410ms var(--ease), opacity 270ms ease, visibility 0s linear 0s;
  will-change: transform, opacity;
}

.app[data-mode="player"] .library-view,
.app[data-mode="metadata"] .library-view {
  transform: translate3d(0, 22vh, 0) scale(.985);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0ms, 0ms, 340ms;
}

.library-shell {
  width: min(1220px, 100%);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: calc(var(--safe-top) + 78px) clamp(18px, 4vw, 46px) calc(178px + var(--safe-bottom));
}

.category-gate {
  min-height: 0;
  grid-row: 1 / -1;
  display: grid;
  align-content: center;
  gap: clamp(34px, 7vh, 76px);
  padding-bottom: 4vh;
}

.gate-copy { max-width: 760px; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.library-title {
  max-width: 800px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(44px, 5.4vw, 68px);
  font-weight: 620;
  letter-spacing: -.068em;
  line-height: .94;
}

.library-subtitle {
  max-width: 500px;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.category-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.category-choice {
  position: relative;
  min-height: 172px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, transform 220ms var(--ease), background 180ms ease;
}

.category-choice:hover,
.category-choice:focus-visible {
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018));
  transform: translateY(-2px);
  outline: 0;
}

.category-choice strong {
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 570;
  letter-spacing: -.055em;
}

.category-choice span {
  color: var(--faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.collection-header {
  min-height: 126px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 23px;
}

.collection-header .library-title { font-size: clamp(40px, 4.8vw, 60px); }

.category-back {
  margin: 0 0 15px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 690;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.category-back::before { content: "←"; margin-right: 7px; }

.app[data-section="explore"][data-category=""] .collection-header,
.app[data-section="explore"][data-category=""] .library-toolbar,
.app[data-section="explore"][data-category=""] .library-scroll { display: none; }

.app[data-section="explore"]:not([data-category=""]) .category-gate,
.app[data-section="saved"] .category-gate { display: none; }

.app[data-section="saved"] .category-back { display: none; }

.library-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 138px 132px auto auto;
  gap: 9px;
  padding: 0 0 14px;
}

.search-field,
.select-field,
.toolbar-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  color: var(--faint);
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}

.search-field input::placeholder { color: var(--faint); }

.select-field,
.toolbar-button {
  padding: 0 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .06em;
}

.toolbar-button { color: var(--ink); }
.toolbar-button.quiet { color: var(--muted); }

.library-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.drop-zone {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 15px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .014);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.app[data-section="saved"] .drop-zone { display: none; }
.drop-zone strong,
.drop-zone span span { display: block; }
.drop-zone strong { margin-bottom: 4px; color: var(--ink); font-size: 11px; font-weight: 640; }
.drop-zone span span { color: var(--faint); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.drop-zone-mark { color: var(--faint); font-size: 22px; font-weight: 300; }
.drop-zone.is-dragging { border-color: var(--accent); background: rgba(184, 255, 118, .06); transform: scale(.998); }

.track-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 0 30px;
}

/* Catalog cards: tempo / title / transport, with metadata on the lower edge. */
.track-card {
  position: relative;
  min-width: 0;
  min-height: 182px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 40px;
  grid-template-rows: 23px minmax(85px, 1fr) 28px;
  grid-template-areas: "identity identity identity" "tempo copy play" "key genre time";
  column-gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(244, 241, 233, .09);
  border-radius: 10px;
  background: #10110f;
  color: var(--muted);
  cursor: pointer;
  outline: 0;
  transition: border-color 160ms ease, background 160ms ease;
}
.track-card:hover { border-color: rgba(244, 241, 233, .24); background: #141511; }
.track-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.track-card[aria-current="true"] { border-color: rgba(244, 241, 233, .4); background: #181915; }
.card-identity {
  grid-area: identity;
  min-width: 0;
  padding-right: 90px;
  align-self: start;
  color: var(--muted);
  font: 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card-play {
  grid-area: play;
  align-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  transition: color 160ms ease, background 160ms ease;
}
.track-card:hover .card-play,
.track-card[aria-current="true"] .card-play { background: var(--ink); color: var(--surface); }
.card-play:disabled { opacity: .32; cursor: not-allowed; }
.card-save, .card-edit {
  position: absolute;
  z-index: 1;
  top: 4px;
  min-height: 44px;
  padding: 0 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  letter-spacing: .06em;
}
.card-save { right: 37px; }
.card-edit { right: 7px; font-size: 12px; letter-spacing: 0; }
.card-save[aria-pressed="true"] { color: var(--ink); }
.card-copy { grid-area: copy; min-width: 0; align-self: center; padding: 9px 0 14px; }
.card-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.12;
  font-weight: 540;
  letter-spacing: -.035em;
}
.card-copy span {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.card-meta { display: contents; }
.card-meta > span {
  min-width: 0;
  color: var(--catalog-red);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-meta b {
  color: #cf7872;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.card-meta .card-tempo { grid-area: tempo; align-self: center; padding: 0 0 12px; }
.card-tempo strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.065em;
}
.card-tempo b { display: block; margin-top: 6px; }
.card-key { grid-area: key; }
.card-genre { grid-area: genre; }
.card-time { grid-area: time; text-align: right; }
.card-key, .card-genre, .card-time {
  align-self: end;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.card-key b, .card-genre b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 72px 18px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 18px; font-weight: 620; }

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(3, 4, 3, .28);
  color: var(--ink);
  cursor: pointer;
  font-size: 22px;
  backdrop-filter: blur(16px);
}

.volume-control {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(3, 4, 3, .28);
  color: var(--muted);
  backdrop-filter: blur(16px);
}

.volume-icon {
  font-size: 12px;
}

.volume-range {
  width: 92px;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.volume-range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
}

.volume-range::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5.5px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  background: var(--ink);
}

.volume-range::-moz-range-track {
  height: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
}

.volume-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.volume-value {
  min-width: 22px;
  color: var(--faint);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.global-header .volume-control {
  display: none;
}

.app[data-mode="player"] .global-header .volume-control,
.app[data-mode="metadata"] .global-header .volume-control {
  display: flex;
}

.app[data-mode="player"] .header-count,
.app[data-mode="metadata"] .header-count {
  display: none;
}

.orb-hit-zone {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 38%;
  width: min(52vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 220ms ease, transform 430ms var(--ease), visibility 0s linear 320ms;
}

.app[data-mode="player"] .orb-hit-zone,
.app[data-mode="metadata"] .orb-hit-zone {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 130ms, 100ms, 0s;
}

.app[data-recording="true"] .orb-hit-zone {
  top: 50%;
  width: min(58vw, 520px);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
  visibility: visible;
  pointer-events: auto;
}

.app[data-mode="metadata"] .orb-hit-zone {
  transform: translate(-50%, -57%) scale(.89);
  opacity: .72;
  transition-delay: 0s;
}

.player-console {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: calc(100dvh - 109px - var(--safe-bottom));
  width: min(390px, calc(100% - 28px));
  padding: 5px 16px 10px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: rgba(20, 20, 18, .88);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .38);
  backdrop-filter: blur(22px) saturate(120%);
  transform: translateX(-50%);
  transition:
    top 430ms var(--ease),
    width 360ms var(--ease),
    padding 360ms var(--ease),
    border-radius 360ms var(--ease),
    background 280ms ease,
    box-shadow 280ms ease,
    transform 240ms var(--ease);
  will-change: top, width, transform;
  touch-action: pan-x;
}

.app[data-mode="player"] .player-console {
  top: clamp(430px, 61dvh, calc(100dvh - 235px));
  width: min(860px, calc(100% - 28px));
  padding: 9px 24px 24px;
  border-color: transparent;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(2, 3, 2, 0) 0%, rgba(2, 3, 2, .5) 19%, rgba(2, 3, 2, .9) 100%);
  box-shadow: none;
  backdrop-filter: none;
}

.app[data-mode="metadata"] .player-console {
  top: clamp(300px, 43dvh, calc(100dvh - 445px));
  width: min(800px, calc(100% - 28px));
  padding: 11px 18px 18px;
  border-color: rgba(244, 241, 233, .14);
  border-radius: 22px;
  background: rgba(8, 10, 9, .88);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .48);
}

.app[data-recording="true"] .player-console {
  top: calc(var(--safe-top) + 8px);
  width: min(900px, calc(100% - 28px));
  padding: 10px 28px 18px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.recording-catalog,
.recording-credit,
.recording-tempo { display: none; }

.app[data-recording="true"] .player-console::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -26px -20px -26px;
  background: radial-gradient(ellipse at 24% 38%, rgba(3, 3, 3, .92) 0%, rgba(3, 3, 3, .72) 35%, rgba(3, 3, 3, .34) 57%, rgba(3, 3, 3, 0) 78%);
  filter: blur(10px);
  pointer-events: none;
}

.app[data-recording="true"] .recording-catalog,
.app[data-recording="true"] .recording-credit {
  display: flex;
  align-items: center;
  color: rgba(244, 241, 233, .52);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .19em;
  line-height: 1;
  text-transform: uppercase;
}

.app[data-recording="true"] .recording-catalog { gap: 8px; }
.app[data-recording="true"] .recording-catalog strong { color: rgba(244, 241, 233, .9); font-weight: 760; }
.app[data-recording="true"] .recording-credit { color: rgba(244, 241, 233, .38); }
.app[data-recording="true"] .recording-credit span { margin-left: .48em; color: rgba(244, 241, 233, .68); }
.app[data-recording="true"] .recording-credit span::before,
.app[data-recording="true"] .recording-credit span::after { content: '"'; }

.app[data-mode="player"] .handle-label { opacity: 0; }

.app[data-mode="player"][data-recording="true"] .surface-handle,
.app[data-mode="player"][data-recording="true"] .meta-rule,
.app[data-mode="player"][data-recording="true"] .meta-top { display: none; }

.app[data-mode="player"][data-recording="true"] .player-core {
  --record-tempo-column: 76px;
  --record-column-gap: 16px;
  display: grid;
  grid-template-columns: var(--record-tempo-column) minmax(0, 1fr);
  column-gap: var(--record-column-gap);
  align-items: start;
}

/* Recording view: one outer edge, one shared inner content edge. */
.app[data-mode="player"][data-recording="true"] .recording-catalog {
  grid-column: 1 / -1;
  margin: 2px 0 10px;
}
.app[data-mode="player"][data-recording="true"] .title-transport {
  grid-column: 1 / -1;
  min-height: 60px;
  grid-template-columns: var(--record-tempo-column) minmax(0, 1fr) auto;
  column-gap: var(--record-column-gap);
  row-gap: 0;
}
.app[data-recording="true"] .recording-tempo {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  color: var(--catalog-red);
  align-self: stretch;
}
.app[data-recording="true"] .recording-tempo strong,
.app[data-recording="true"] .recording-tempo > span {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.app[data-recording="true"] .recording-tempo strong {
  font-size: 42px;
  font-weight: 240;
  letter-spacing: -.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.app[data-recording="true"] .recording-tempo > span {
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .14em;
}
.app[data-mode="player"][data-recording="true"] .quick-meta {
  grid-column: 2;
  color: var(--catalog-red);
  margin: 1px 0 8px;
}
.app[data-mode="player"][data-recording="true"] .quick-meta #glBpm { display: none; }
.app[data-mode="player"][data-recording="true"] .quick-meta #glType { display: none; }
.app[data-mode="player"][data-recording="true"] .quick-meta span + span::before {
  content: none;
  width: auto;
  height: auto;
  margin: 0 8px;
  background: none;
  color: rgba(244, 241, 233, .28);
  vertical-align: 0;
}
.app[data-mode="player"][data-recording="true"] .recording-credit { grid-column: 2; margin: 0 0 10px; }
.app[data-mode="player"][data-recording="true"] .wave-rail { grid-column: 1 / -1; height: 47px; }
.app[data-mode="player"][data-recording="true"] .player-title { font-size: clamp(25px, 3.2vw, 35px); }
.app[data-mode="player"][data-recording="true"] .player-title::before,
.app[data-mode="player"][data-recording="true"] .player-title::after {
  content: '"';
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  transform: none;
}
.app[data-mode="player"][data-recording="true"] .round-button { width: 30px; height: 30px; }
.app[data-mode="player"][data-recording="true"] .round-button.main { width: 38px; height: 38px; }
.app[data-mode="player"][data-recording="true"] .player-controls { transition: opacity 240ms ease, transform 280ms var(--ease); }
.app[data-recording="true"][data-record-controls="hidden"] .player-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.app[data-mode="player"][data-recording="true"] .player-title,
.app[data-mode="player"][data-recording="true"] .quick-meta,
.app[data-mode="player"][data-recording="true"] .wave-rail {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .9));
}

.app[data-gesture="true"] .player-console,
.app[data-gesture="true"] .library-view,
.app[data-gesture="true"] .ambient-stage {
  transition-duration: 0ms;
}

.surface-handle {
  width: 100%;
  height: 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0;
  background: transparent;
  color: var(--faint);
  cursor: ns-resize;
  touch-action: none;
}

.handle-line {
  justify-self: center;
  grid-column: 2;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
  transition: width 220ms var(--ease), background 220ms ease;
}

.handle-label {
  position: absolute;
  left: 17px;
  color: rgba(244, 241, 233, .24);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.handle-chevron {
  justify-self: end;
  color: rgba(244, 241, 233, .38);
  font-size: 12px;
  line-height: 1;
  transform: translateY(1px);
  transition: transform 260ms var(--ease);
}

.app[data-mode="metadata"] .handle-chevron {
  transform: rotate(180deg) translateY(-1px);
}

.app[data-mode="player"] .handle-line,
.app[data-mode="metadata"] .handle-line {
  width: 38px;
  background: rgba(255, 255, 255, .28);
}

.player-core {
  position: relative;
}

.wave-rail {
  --wave-progress: 0%;
  position: relative;
  height: 25px;
  overflow: hidden;
  cursor: ew-resize;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  transition: height 360ms var(--ease), opacity 240ms ease;
  touch-action: none;
}

/* The exact same seek rail stays mounted when its waveform folds into a line. */
.app[data-mode="browse"] .wave-rail {
  -webkit-mask-image: none;
  mask-image: none;
}

.app[data-mode="browse"] .wave-rail::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(244, 241, 233, .88) var(--wave-progress), rgba(244, 241, 233, .18) var(--wave-progress));
  pointer-events: none;
}

.app[data-mode="browse"] .wave-track,
.app[data-mode="browse"] .wave-center { opacity: 0; }

.wave-track,
.wave-center { transition: opacity 240ms ease; }

.app[data-mode="player"] .wave-rail,
.app[data-mode="metadata"] .wave-rail {
  height: 55px;
}

.wave-viewport,
.wave-track,
.wave-past,
.wave-future,
.wave-bars {
  position: absolute;
  inset: 0;
}

.wave-past,
.wave-future {
  overflow: hidden;
}

.wave-past {
  clip-path: inset(0 calc(100% - var(--wave-progress)) 0 0);
}

.wave-future {
  clip-path: inset(0 0 0 var(--wave-progress));
}

.wave-bars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.glWaveBar {
  flex: 1 1 0;
  min-width: 1px;
  min-height: 3px;
  border-radius: 2px;
  background: rgba(244, 241, 233, .14);
}

.wave-past .glWaveBar {
  background: rgba(244, 241, 233, .76);
}

.wave-center {
  position: absolute;
  z-index: 2;
  left: var(--wave-progress);
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: rgba(255, 255, 255, .78);
  transform: translateX(-.5px);
}

.wave-time,
.wave-duration,
.precision-readout {
  position: absolute;
  z-index: 3;
  bottom: 0;
  color: rgba(244, 241, 233, .42);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .07em;
  pointer-events: none;
}

.wave-time,
.wave-duration {
  min-width: 31px;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(10, 11, 10, .84);
}

.wave-time { left: 0; }
.wave-duration { right: 0; text-align: right; }

.precision-readout {
  bottom: auto;
  top: 0;
  opacity: 0;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--ink);
  color: #070807;
  transform: translate(-50%, -2px);
  transition: opacity 120ms ease;
}

.wave-rail.scrubbing .precision-readout {
  opacity: 1;
}

.meta-rule {
  height: 1px;
  margin: 3px 0 8px;
  background: var(--line);
}

.app[data-mode="browse"] .meta-rule,
.app[data-mode="browse"] .meta-top,
.app[data-mode="browse"] .quick-meta {
  height: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.meta-rule, .meta-top, .quick-meta {
  transition: opacity 180ms ease, max-height 300ms var(--ease);
}

.meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.beat-number,
.availability,
.glAvailability {
  color: var(--faint);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.availability,
.glAvailability {
  display: none;
}

.title-transport {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  transition: min-height 360ms var(--ease), gap 360ms var(--ease);
}

.app[data-mode="player"] .title-transport,
.app[data-mode="metadata"] .title-transport {
  min-height: 55px;
  gap: 18px;
}

.player-title {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 610;
  letter-spacing: -.045em;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: lowercase;
  white-space: nowrap;
  transition: font-size 360ms var(--ease), letter-spacing 360ms var(--ease), opacity 180ms ease;
}

.player-title::after {
  content: "⌃";
  display: inline-block;
  margin-left: 8px;
  color: rgba(244, 241, 233, .34);
  font-size: .38em;
  letter-spacing: 0;
  vertical-align: .55em;
  transition: transform 260ms var(--ease);
}

.app[data-mode="player"] .player-title,
.app[data-mode="metadata"] .player-title {
  font-size: clamp(25px, 3.1vw, 34px);
  letter-spacing: -.052em;
}

.app[data-mode="metadata"] .player-title::after {
  transform: rotate(180deg);
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.round-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  transition: width 320ms var(--ease), height 320ms var(--ease), background 180ms ease, transform 160ms ease;
}

.round-button:active {
  transform: scale(.94);
}

.round-button.main {
  width: 38px;
  height: 38px;
  background: var(--ink);
  color: #070807;
  font-size: 14px;
  font-weight: 800;
}

.app[data-mode="player"] .round-button,
.app[data-mode="metadata"] .round-button {
  width: 38px;
  height: 38px;
}

.app[data-mode="player"] .round-button.main,
.app[data-mode="metadata"] .round-button.main {
  width: 50px;
  height: 50px;
}

.quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  color: var(--muted);
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.quick-meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: 0 9px;
  background: var(--line-strong);
  vertical-align: -1px;
}

.expanded-meta {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition:
    max-height 400ms var(--ease),
    opacity 190ms ease,
    transform 360ms var(--ease),
    visibility 0s linear 400ms;
}

.app[data-mode="metadata"] .expanded-meta {
  max-height: 265px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.expanded-inner {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.sheet-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
  color: var(--faint);
  font-size: 7px;
  font-weight: 690;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 20px;
}

.detail-row {
  min-width: 0;
}

.detail-row label {
  display: block;
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 7px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.detail-row b {
  display: block;
  overflow: hidden;
  color: rgba(244, 241, 233, .72);
  font-size: 10px;
  font-weight: 630;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.inquire-button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.engine-tracklist,
.engine-progress,
.engine-compat,
.center-hint,
.dna-mini,
.top-controls,
.drop-halo,
.immersive-hint,
.engine-logo,
.engine-audio {
  display: none;
}

.warn {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 48%;
  display: none;
  width: min(340px, calc(100% - 40px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(10, 10, 9, .88);
  color: var(--muted);
  text-align: center;
  transform: translate(-50%, -50%);
}

.warn.show {
  display: block;
}

.warn b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
}

.warn p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.manager {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .76);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.manager[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.manager-card {
  width: min(940px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #10100f;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .62);
}

.manager-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.manager-head h2,
.manager-pane h3 {
  margin: 0;
  color: var(--ink);
}

.manager-head h2 {
  font-size: 20px;
  font-weight: 630;
  letter-spacing: -.025em;
}

.manager-head p {
  margin: 5px 0 0;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.manager-body {
  max-height: calc(min(760px, 100vh - 40px) - 78px);
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.4fr);
  overflow: auto;
}

.manager-pane {
  padding: 20px;
}

.manager-pane + .manager-pane {
  border-left: 1px solid var(--line);
}

.manager-pane h3 {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.folder-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px auto;
  gap: 8px;
}

.folder-create input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, .025);
  color: var(--ink);
}

.folder-create input {
  padding: 0 11px;
}

.folder-create input[type="color"] {
  padding: 6px;
}

.folder-manager-list {
  margin-top: 10px;
}

.folder-manager-row {
  min-height: 40px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 30px;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.folder-manager-row strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-manager-row button {
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 18px;
}

.folder-color {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field.wide {
  grid-column: 1 / -1;
}

.field span {
  display: block;
  margin: 0 0 6px 2px;
  color: var(--faint);
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  padding: 0 11px;
  font-size: 12px;
}

.field textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}

.manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.text-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.text-button.primary {
  border-color: var(--ink);
  background: var(--ink);
  color: #090908;
}

.text-button.danger {
  border-color: rgba(255, 115, 107, .34);
  color: var(--danger);
}

.toast {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: max(24px, var(--safe-bottom));
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(18, 18, 16, .94);
  color: var(--ink);
  box-shadow: 0 16px 54px rgba(0, 0, 0, .38);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 160ms ease, transform 180ms var(--ease);
  font-size: 10px;
  text-align: center;
}

.toast[data-show="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sr-only,
.hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 980px) and (min-width: 721px) {
  .track-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-toolbar { grid-template-columns: minmax(190px, 1fr) 130px 124px auto; }
  .genre-filter { display: none; }
}

@media (max-width: 720px) {
  .mobile-luma-shield {
    opacity: .18;
  }

  .global-header {
    width: calc(100% - 24px);
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 32px 40px;
    gap: 4px 12px;
  }

  .brand-hold {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .primary-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(232px, 76%);
    height: 32px;
    padding: 2px;
    gap: 2px;
    box-shadow: none;
  }

  .header-tools {
    grid-column: 2;
    grid-row: 1;
  }

  .primary-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 26px;
    padding: 0 6px;
    font-size: 9px;
    letter-spacing: .08em;
  }

  /* Compact visible pill, while retaining a 44px-tall touch target. */
  .primary-tab::before { content: ""; position: absolute; inset: -9px 0; }

  .header-count { font-size: 8px; }

  .library-shell {
    padding-top: calc(var(--safe-top) + 81px);
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: calc(111px + var(--safe-bottom));
  }

  .category-gate {
    align-content: start;
    gap: 22px;
    padding: 3vh 0 14px;
  }

  .library-title {
    font-size: clamp(38px, 11.5vw, 52px);
  }

  .library-subtitle {
    max-width: 94%;
    margin-top: 12px;
    font-size: 11px;
  }

  .category-choices {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .category-choice {
    min-height: 88px;
    flex-direction: row;
    align-items: flex-end;
    padding: 15px 16px;
    border-radius: 14px;
  }

  .category-choice strong { font-size: 25px; }

  .collection-header {
    min-height: 87px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding-bottom: 9px;
  }

  .collection-header .eyebrow { display: none; }
  .collection-header .library-title { font-size: clamp(30px, 8vw, 37px); }

  .category-back { margin-bottom: 5px; font-size: 9px; }

  .library-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 6px;
    padding-bottom: 7px;
  }

  .search-field, .select-field, .toolbar-button { min-height: 35px; border-radius: 9px; }
  .search-field { grid-column: 1 / 3; grid-row: 1; padding: 0 9px; }
  #addFilesButton { grid-column: 3; grid-row: 1; }
  #genreFilter { grid-column: 1; grid-row: 2; }
  #sortSelect { grid-column: 2; grid-row: 2; }
  #shuffleButton { grid-column: 3; grid-row: 2; }
  .select-field, .toolbar-button { min-width: 0; padding: 0 7px; font-size: 9px; }
  .drop-zone { min-height: 38px; padding: 7px 10px; border-radius: 9px; }
  .drop-zone strong { margin-bottom: 0; font-size: 10px; }
  .drop-zone span span { display: none; }
  .drop-zone-mark { font-size: 17px; }

  .track-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 7px 0 20px; }
  .track-card {
    min-height: 148px;
    grid-template-columns: minmax(0, 1fr) 29px;
    grid-template-rows: 18px minmax(51px, 1fr) 31px 16px 14px;
    grid-template-areas: "identity identity" "copy copy" "tempo play" "key time" "genre genre";
    column-gap: 3px;
    padding: 8px;
    border-radius: 8px;
  }
  .card-identity { padding-right: 48px; font-size: 7px; letter-spacing: .04em; }
  .card-save, .card-edit { top: 0; min-height: 28px; padding: 0 2px; font-size: 8px; }
  .card-save { right: 21px; }
  .card-edit { right: 3px; font-size: 12px; }
  .card-copy { align-self: center; padding: 1px 0 3px; }
  .card-copy strong { font-size: 13px; line-height: 1.12; -webkit-line-clamp: 2; }
  .card-copy span { margin-top: 5px; font-size: 8px; line-height: 1.2; }
  .card-play { justify-self: end; width: 28px; height: 28px; font-size: 10px; }
  .card-meta > span { font-size: 9px; }
  .card-meta .card-tempo { padding: 0; }
  .card-tempo strong { font-size: 24px; }
  .card-tempo b { margin-top: 1px; font-size: 7px; }
  .card-key, .card-genre, .card-time { padding-top: 0; border-top: 0; }

  .volume-control {
    height: 36px;
    padding: 0 10px;
  }

  .volume-range {
    width: 66px;
  }

  .volume-value {
    display: none;
  }

  .orb-hit-zone {
    top: calc(31% + 14vh);
    width: min(74vw, 380px);
  }

  .app[data-mode="player"] .ambient-stage { transform: scale(1.12); transform-origin: 50% 0; }
  .app[data-mode="metadata"] .ambient-stage { transform: scale(1.03); transform-origin: 50% 0; }
  .app[data-mode="metadata"] .orb-hit-zone { top: calc(34% + 7vh); }

  /* Position only: retain the reference scale, color and audio response.
     The inner translation is scaled by 1.28: .125 * 1.28 = .16 viewport.
     Orb center moves from .4352 to .5952 without resizing the artwork. */
  .app[data-recording="true"] .ambient-stage { transform: scale(1.28); transform-origin: 50% 0; }
  .app[data-recording="true"] #stage {
    transform: translateY(12.5dvh);
  }
  .app[data-recording="true"] .orb-hit-zone { left: 50%; top: 59.52%; width: min(88vw, 440px); }

  .player-console {
    top: auto;
    bottom: calc(var(--safe-bottom) + 8px);
    width: min(310px, calc(100% - 16px));
    padding: 5px 12px 9px;
    border-radius: 18px;
  }

  .app[data-mode="player"] .player-console {
    top: auto;
    width: 100%;
    padding: 8px 20px calc(20px + var(--safe-bottom));
    border-radius: 0;
  }

  .app[data-mode="metadata"] .player-console {
    top: auto;
    width: calc(100% - 16px);
    padding: 10px 13px 14px;
    border-radius: 19px;
  }

  .app[data-recording="true"] .player-console {
    top: max(calc(var(--safe-top) + 16px), 15dvh);
    bottom: auto;
    width: calc(100% - 24px);
    padding: 7px 20px 18px;
    border-radius: 0;
    transform: translateX(-50%);
  }

  .app[data-recording="true"] .player-console::before {
    inset: -14px -18px -18px -18px;
    background: radial-gradient(ellipse at 30% 35%, rgba(3, 3, 3, .94) 0%, rgba(3, 3, 3, .76) 40%, rgba(3, 3, 3, .3) 66%, rgba(3, 3, 3, 0) 86%);
    filter: blur(9px);
  }

  .app[data-mode="player"][data-recording="true"] .player-core {
    --record-tempo-column: 58px;
    --record-column-gap: 10px;
  }
  .app[data-mode="player"][data-recording="true"] .title-transport { min-height: 55px; }
  .app[data-recording="true"] .recording-tempo strong { font-size: 34px; font-weight: 240; }
  .app[data-recording="true"] .recording-tempo > span { font-size: 8px; }
  .app[data-mode="player"][data-recording="true"] .player-title { font-size: clamp(24px, 7.2vw, 31px); }
  .app[data-mode="player"][data-recording="true"] .recording-catalog { margin-bottom: 8px; }
  .app[data-mode="player"][data-recording="true"] .quick-meta { margin-left: 0; margin-bottom: 7px; font-size: 8px; }
  .app[data-mode="player"][data-recording="true"] .recording-credit { margin-left: 0; margin-bottom: 8px; font-size: 7px; }
  .app[data-mode="player"][data-recording="true"] .wave-rail { height: 43px; }
  .app[data-mode="player"][data-recording="true"] .round-button { width: 30px; height: 30px; }
  .app[data-mode="player"][data-recording="true"] .round-button.main { width: 38px; height: 38px; }

  .surface-handle {
    height: 13px;
  }

  .handle-label {
    left: 13px;
  }

  .wave-rail {
    height: 25px;
  }

  .app[data-mode="player"] .wave-rail,
  .app[data-mode="metadata"] .wave-rail {
    height: 49px;
  }

  .title-transport {
    min-height: 40px;
    gap: 8px;
  }

  .app[data-mode="player"] .title-transport,
  .app[data-mode="metadata"] .title-transport {
    min-height: 50px;
    gap: 10px;
  }

  .player-title {
    font-size: clamp(14px, 4vw, 17px);
  }

  .app[data-mode="player"] .player-title,
  .app[data-mode="metadata"] .player-title {
    font-size: clamp(22px, 7vw, 28px);
  }

  .round-button {
    width: 31px;
    height: 31px;
    font-size: 16px;
  }

  .round-button.main {
    width: 41px;
    height: 41px;
  }

  .app[data-mode="player"] .round-button,
  .app[data-mode="metadata"] .round-button {
    width: 34px;
    height: 34px;
  }

  .app[data-mode="player"] .round-button.main,
  .app[data-mode="metadata"] .round-button.main {
    width: 46px;
    height: 46px;
  }

  .quick-meta {
    font-size: 7px;
  }

  .app[data-mode="metadata"] .expanded-meta {
    max-height: 255px;
  }

  .expanded-inner {
    margin-top: 12px;
    padding-top: 11px;
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px;
  }

  .inquire-button {
    min-height: 40px;
    margin-top: 13px;
  }

  .manager {
    padding: 8px;
  }

  .manager-card {
    max-height: calc(100vh - 16px);
    border-radius: 20px;
  }

  .manager-body {
    max-height: calc(100vh - 94px);
    grid-template-columns: 1fr;
  }

  .manager-pane + .manager-pane {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 720px) and (max-width: 720px) {
  .app[data-mode="metadata"] .ambient-stage,
  .app[data-mode="metadata"] .orb-hit-zone {
    opacity: .42;
  }

  .expanded-meta {
    overflow: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
  }
}


/* === v194 light library / gradient-category pass ===
   Browse/editor surfaces are near-white. Immersive player/metadata/recording
   retain the original dark visual world. Category accents are sampled from
   the supplied orb gradient: violet, magenta, coral. */
.app[data-mode="browse"] {
  --ink: #111216;
  --muted: rgba(17, 18, 22, .56);
  --faint: rgba(17, 18, 22, .35);
  --line: rgba(17, 18, 22, .09);
  --line-strong: rgba(17, 18, 22, .17);
  --surface: #fbfbfc;
  --surface-raised: #ffffff;
  --surface-soft: #f2f3f5;
  --accent: #7752c7;
  background: #fbfbfc;
}

.app[data-mode="browse"] .library-view {
  background:
    radial-gradient(circle at 50% -18%, rgba(115, 80, 199, .035), transparent 34%),
    #fbfbfc;
}

.app[data-mode="browse"] .global-header {
  color: var(--ink);
}

.app[data-mode="browse"] .brand-hold { color: #111216; }
.app[data-mode="browse"] .brand-hold::after {
  background: #7752c7;
  box-shadow: none;
}

.app[data-mode="browse"] .primary-tabs {
  border-color: rgba(17, 18, 22, .09);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 28px rgba(20, 20, 26, .055);
}
.app[data-mode="browse"] .primary-tab { color: rgba(17, 18, 22, .38); }
.app[data-mode="browse"] .primary-tab[aria-selected="true"] {
  background: #f0f1f3;
  color: #111216;
}
.app[data-mode="browse"] .header-count { color: rgba(17, 18, 22, .34); }

.app[data-mode="browse"] .category-choice {
  --category-accent: #7752c7;
  border-color: rgba(17, 18, 22, .085);
  background: #ffffff;
  color: #111216;
  box-shadow: 0 1px 0 rgba(17, 18, 22, .025);
}
.app[data-mode="browse"] .category-choice::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: var(--category-accent);
  opacity: .92;
}
.app[data-mode="browse"] .category-choice::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  right: -40px;
  top: -42px;
  border-radius: 50%;
  background: var(--category-accent);
  opacity: .055;
  filter: blur(1px);
  pointer-events: none;
}
.app[data-mode="browse"] .category-choice[data-choose-category="beat"] { --category-accent: #7350c7; }
.app[data-mode="browse"] .category-choice[data-choose-category="loop"] { --category-accent: #a84eb2; }
.app[data-mode="browse"] .category-choice[data-choose-category="demo"] { --category-accent: #c65962; }
.app[data-mode="browse"] .category-choice strong { color: #111216; }
.app[data-mode="browse"] .category-choice span { color: var(--category-accent); }
.app[data-mode="browse"] .category-choice:hover,
.app[data-mode="browse"] .category-choice:focus-visible {
  border-color: color-mix(in srgb, var(--category-accent) 34%, rgba(17,18,22,.11));
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 20, 26, .07);
}

.app[data-mode="browse"] .search-field,
.app[data-mode="browse"] .select-field,
.app[data-mode="browse"] .toolbar-button {
  border-color: rgba(17, 18, 22, .085);
  background: #ffffff;
}
.app[data-mode="browse"] .search-field input { color: #111216; }
.app[data-mode="browse"] .search-field input::placeholder { color: rgba(17, 18, 22, .3); }
.app[data-mode="browse"] .select-field,
.app[data-mode="browse"] .toolbar-button.quiet { color: rgba(17, 18, 22, .52); }
.app[data-mode="browse"] .toolbar-button { color: #111216; }
.app[data-mode="browse"] .library-scroll { scrollbar-color: rgba(17, 18, 22, .16) transparent; }

.app[data-mode="browse"] .drop-zone {
  border-color: rgba(17, 18, 22, .16);
  background: #f6f7f8;
  color: rgba(17, 18, 22, .54);
}
.app[data-mode="browse"] .drop-zone strong { color: #111216; }
.app[data-mode="browse"] .drop-zone span span,
.app[data-mode="browse"] .drop-zone-mark { color: rgba(17, 18, 22, .32); }
.app[data-mode="browse"] .drop-zone.is-dragging {
  border-color: #7752c7;
  background: rgba(119, 82, 199, .045);
}

.app[data-mode="browse"] .track-card {
  --track-accent: #7350c7;
  border-color: rgba(17, 18, 22, .085);
  background: #ffffff;
  color: rgba(17, 18, 22, .54);
  box-shadow: 0 1px 0 rgba(17, 18, 22, .018);
}
.app[data-mode="browse"] .track-card[data-track-type="beat"] { --track-accent: #7350c7; }
.app[data-mode="browse"] .track-card[data-track-type="loop"] { --track-accent: #a84eb2; }
.app[data-mode="browse"] .track-card[data-track-type="demo"] { --track-accent: #c65962; }
.app[data-mode="browse"] .track-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--track-accent);
  opacity: .85;
}
.app[data-mode="browse"] .track-card:hover {
  border-color: rgba(17, 18, 22, .16);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(20, 20, 26, .055);
}
.app[data-mode="browse"] .track-card[aria-current="true"] {
  border-color: color-mix(in srgb, var(--track-accent) 32%, rgba(17,18,22,.10));
  background: color-mix(in srgb, var(--track-accent) 2.5%, #ffffff);
}
.app[data-mode="browse"] .track-card:focus-visible {
  outline-color: var(--track-accent);
}
.app[data-mode="browse"] .card-identity,
.app[data-mode="browse"] .card-copy span,
.app[data-mode="browse"] .card-save,
.app[data-mode="browse"] .card-edit { color: rgba(17, 18, 22, .48); }
.app[data-mode="browse"] .card-copy strong { color: #111216; }
.app[data-mode="browse"] .card-save[aria-pressed="true"] { color: var(--track-accent); }
.app[data-mode="browse"] .card-play {
  border-color: rgba(17, 18, 22, .15);
  color: #111216;
}
.app[data-mode="browse"] .track-card:hover .card-play,
.app[data-mode="browse"] .track-card[aria-current="true"] .card-play {
  border-color: var(--track-accent);
  background: var(--track-accent);
  color: #ffffff;
}
.app[data-mode="browse"] .card-meta > span,
.app[data-mode="browse"] .card-meta b { color: var(--track-accent); }
.app[data-mode="browse"] .card-key,
.app[data-mode="browse"] .card-genre,
.app[data-mode="browse"] .card-time { border-top-color: rgba(17, 18, 22, .08); }

/* Keep the always-armed browse player in the light UI system. */
.app[data-mode="browse"] .player-console {
  border-color: rgba(17, 18, 22, .10);
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 18px 55px rgba(20, 20, 26, .10);
  color: #111216;
}
.app[data-mode="browse"] .round-button { background: #f0f1f3; color: rgba(17, 18, 22, .58); }
.app[data-mode="browse"] .round-button.main { background: #111216; color: #ffffff; }
.app[data-mode="browse"] .wave-rail::before {
  background: linear-gradient(to right, rgba(17, 18, 22, .88) var(--wave-progress), rgba(17, 18, 22, .13) var(--wave-progress));
}
.app[data-mode="browse"] .wave-time,
.app[data-mode="browse"] .wave-duration {
  background: rgba(255,255,255,.88);
  color: rgba(17,18,22,.44);
}

/* Light editor/modal surfaces while browsing. */
.app[data-mode="browse"] .manager { background: rgba(17, 18, 22, .22); }
.app[data-mode="browse"] .manager-card {
  border-color: rgba(17, 18, 22, .11);
  background: #ffffff;
  box-shadow: 0 30px 100px rgba(20, 20, 26, .16);
}
.app[data-mode="browse"] .manager-head,
.app[data-mode="browse"] .manager-pane + .manager-pane { border-color: rgba(17,18,22,.08); }
.app[data-mode="browse"] .folder-create input,
.app[data-mode="browse"] .field input,
.app[data-mode="browse"] .field select,
.app[data-mode="browse"] .field textarea {
  border-color: rgba(17,18,22,.10);
  background: #f7f7f8;
  color: #111216;
}
.app[data-mode="browse"] .text-button {
  border-color: rgba(17,18,22,.11);
  color: rgba(17,18,22,.58);
}
.app[data-mode="browse"] .text-button.primary {
  border-color: #111216;
  background: #111216;
  color: #ffffff;
}
.app[data-mode="browse"] .toast {
  border-color: rgba(17,18,22,.10);
  background: rgba(255,255,255,.96);
  color: #111216;
}

/* --- psychedelic-category-pass --- */
/* === v194 psychedelic category atmosphere pass ===
   White gallery shell + hyper-saturated single-family category worlds. */

.app[data-mode="browse"] .category-choice {
  --category-accent: #ef3d3d;
  --category-deep: #a90018;
  --category-hot: #ff6251;
  --category-pale: #ffd0c5;
  isolation: isolate;
  min-height: 184px;
  border-color: rgba(17,18,22,.075);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(249,249,251,.9));
  box-shadow:
    0 1px 0 rgba(17,18,22,.025),
    0 16px 44px rgba(17,18,22,.025);
  overflow: hidden;
}

.app[data-mode="browse"] .category-choice[data-choose-category="beat"] {
  --category-accent: #f12f3f;
  --category-deep: #9b001d;
  --category-hot: #ff5c46;
  --category-pale: #ffd1ca;
}
.app[data-mode="browse"] .category-choice[data-choose-category="loop"] {
  --category-accent: #ffc43d;
  --category-deep: #e16a00;
  --category-hot: #ff9e2d;
  --category-pale: #fff0a8;
}
.app[data-mode="browse"] .category-choice[data-choose-category="demo"] {
  --category-accent: #8055ff;
  --category-deep: #3d149e;
  --category-hot: #aa6dff;
  --category-pale: #e1d3ff;
}

/* Liquid-light field. */
.app[data-mode="browse"] .category-choice::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -38%;
  width: auto;
  height: auto;
  border-radius: 38% 62% 48% 52% / 58% 42% 62% 38%;
  opacity: .97;
  filter: saturate(145%) contrast(112%);
  background:
    radial-gradient(circle at 23% 28%,
      var(--category-hot) 0 6%,
      color-mix(in srgb, var(--category-hot) 62%, transparent) 9%,
      transparent 23%),
    radial-gradient(circle at 72% 24%,
      var(--category-pale) 0 4%,
      color-mix(in srgb, var(--category-accent) 68%, transparent) 10%,
      transparent 27%),
    radial-gradient(ellipse at 74% 74%,
      var(--category-deep) 0 7%,
      var(--category-accent) 19%,
      color-mix(in srgb, var(--category-hot) 66%, transparent) 34%,
      transparent 54%),
    radial-gradient(ellipse at 33% 84%,
      var(--category-hot) 0 8%,
      color-mix(in srgb, var(--category-accent) 68%, transparent) 25%,
      transparent 47%),
    conic-gradient(from 128deg at 48% 51%,
      transparent 0deg,
      color-mix(in srgb, var(--category-pale) 68%, transparent) 44deg,
      var(--category-accent) 102deg,
      var(--category-deep) 151deg,
      transparent 210deg,
      var(--category-hot) 276deg,
      transparent 360deg);
  transform: rotate(-8deg) scale(1.03);
  pointer-events: none;
  animation: grimlifeCategoryDrift 12s ease-in-out infinite alternate;
}

/* Frosted white veil keeps typography editorial while the color burns through. */
.app[data-mode="browse"] .category-choice::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  border-radius: inherit;
  opacity: 1;
  background:
    linear-gradient(105deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.72) 37%,
      rgba(255,255,255,.19) 68%,
      rgba(255,255,255,.06) 100%);
  mix-blend-mode: normal;
  pointer-events: none;
}

.app[data-mode="browse"] .category-choice strong {
  position: relative;
  z-index: 2;
  color: #0d0d0f;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
.app[data-mode="browse"] .category-choice > span {
  position: relative;
  z-index: 2;
  color: color-mix(in srgb, var(--category-deep) 82%, #111216);
  font-weight: 780;
}
.app[data-mode="browse"] .category-choice:hover,
.app[data-mode="browse"] .category-choice:focus-visible {
  border-color: color-mix(in srgb, var(--category-accent) 52%, rgba(17,18,22,.12));
  box-shadow:
    0 16px 42px color-mix(in srgb, var(--category-accent) 17%, transparent),
    0 1px 0 rgba(17,18,22,.025);
  transform: translateY(-3px);
}
.app[data-mode="browse"] .category-choice:hover::after,
.app[data-mode="browse"] .category-choice:focus-visible::after {
  filter: saturate(178%) contrast(120%);
  transform: rotate(-3deg) scale(1.1);
}

/* Keep track identity mapped correctly. */
.app[data-mode="browse"] .track-card[data-track-type="beat"] { --track-accent: #ef3442; }
.app[data-mode="browse"] .track-card[data-track-type="loop"] { --track-accent: #f0a51f; }
.app[data-mode="browse"] .track-card[data-track-type="demo"] { --track-accent: #8055ff; }

/* Active collection gets a huge barely-there atmospheric bloom,
   so entering a category feels like stepping into its world. */
.app[data-mode="browse"][data-category="beat"] .library-view {
  background:
    radial-gradient(ellipse 52% 40% at 89% 8%, rgba(255,71,61,.22), transparent 67%),
    radial-gradient(ellipse 35% 28% at 70% 19%, rgba(188,0,31,.11), transparent 72%),
    radial-gradient(circle at 12% 94%, rgba(255,121,92,.11), transparent 34%),
    #fbfbfc;
}
.app[data-mode="browse"][data-category="loop"] .library-view {
  background:
    radial-gradient(ellipse 50% 40% at 90% 8%, rgba(255,195,48,.27), transparent 66%),
    radial-gradient(ellipse 34% 28% at 69% 19%, rgba(255,143,31,.15), transparent 71%),
    radial-gradient(circle at 12% 94%, rgba(255,219,101,.14), transparent 34%),
    #fbfbfc;
}
.app[data-mode="browse"][data-category="demo"] .library-view {
  background:
    radial-gradient(ellipse 52% 40% at 89% 8%, rgba(126,82,255,.23), transparent 67%),
    radial-gradient(ellipse 35% 28% at 70% 19%, rgba(80,27,190,.12), transparent 72%),
    radial-gradient(circle at 12% 94%, rgba(177,121,255,.12), transparent 34%),
    #fbfbfc;
}

/* Track cards stay mostly white, but their edge refracts the category color. */
.app[data-mode="browse"] .track-card::before {
  width: 3px;
  top: 12px;
  bottom: 12px;
  opacity: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--track-accent) 58%, white),
      var(--track-accent) 34%,
      color-mix(in srgb, var(--track-accent) 75%, #111) 68%,
      color-mix(in srgb, var(--track-accent) 54%, white)
    );
  box-shadow: 0 0 15px color-mix(in srgb, var(--track-accent) 26%, transparent);
}

.app[data-mode="browse"] .track-card[aria-current="true"] {
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--track-accent) 12%, transparent), transparent 34%),
    #ffffff;
}

@keyframes grimlifeCategoryDrift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) rotate(-8deg) scale(1.03);
    border-radius: 38% 62% 48% 52% / 58% 42% 62% 38%;
  }
  55% {
    transform: translate3d(2.5%, 1.5%, 0) rotate(2deg) scale(1.08);
    border-radius: 57% 43% 63% 37% / 39% 61% 44% 56%;
  }
  100% {
    transform: translate3d(-.5%, 2%, 0) rotate(7deg) scale(1.05);
    border-radius: 44% 56% 35% 65% / 62% 38% 58% 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app[data-mode="browse"] .category-choice::after {
    animation: none;
  }
}

/* --- category-reactive-shine-pass --- */
/* keep the version you liked, but remove category/page background glow */
.app[data-mode="browse"] .library-view,
.app[data-mode="browse"][data-category="beat"] .library-view,
.app[data-mode="browse"][data-category="loop"] .library-view,
.app[data-mode="browse"][data-category="demo"] .library-view {
  background:
    radial-gradient(circle at 50% -22%, rgba(255,255,255,.72), transparent 36%),
    #fbfbfc !important;
}

/* reactive tab shine */
.app[data-mode="browse"] .category-choice {
  --shine-x: 50%;
  --shine-y: 50%;
  --shine-size: 34%;
  --shine-opacity: 0;
  --press-strength: 0;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.app[data-mode="browse"] .category-choice::before {
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      rgba(255,255,255, calc(.64 + (.18 * var(--shine-opacity)))) 0%,
      rgba(255,255,255, calc(.44 + (.14 * var(--shine-opacity)))) 8%,
      rgba(255,255,255, calc(.17 + (.18 * var(--shine-opacity)))) 17%,
      rgba(255,255,255, calc(.07 * var(--shine-opacity))) 28%,
      rgba(255,255,255,0) calc(var(--shine-size) + (8% * var(--shine-opacity)))),
    linear-gradient(105deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.72) 37%,
      rgba(255,255,255,.19) 68%,
      rgba(255,255,255,.06) 100%);
  mix-blend-mode: screen;
  opacity: 1;
  transition: background-position 90ms linear, opacity 160ms ease, transform 220ms var(--ease), filter 200ms ease;
}

.app[data-mode="browse"] .category-choice::after {
  transition:
    transform 280ms var(--ease),
    filter 220ms ease,
    opacity 180ms ease;
}

.app[data-mode="browse"] .category-choice:hover,
.app[data-mode="browse"] .category-choice:focus-visible,
.app[data-mode="browse"] .category-choice.is-hovering {
  transform: translateY(-2px);
}

.app[data-mode="browse"] .category-choice:hover::before,
.app[data-mode="browse"] .category-choice:focus-visible::before,
.app[data-mode="browse"] .category-choice.is-hovering::before {
  --shine-opacity: 1;
}

.app[data-mode="browse"] .category-choice:hover::after,
.app[data-mode="browse"] .category-choice:focus-visible::after,
.app[data-mode="browse"] .category-choice.is-hovering::after {
  filter: saturate(188%) contrast(120%);
  transform: rotate(-2deg) scale(1.08);
}

.app[data-mode="browse"] .category-choice.is-pressed {
  transform: translateY(0) scale(.992);
}

.app[data-mode="browse"] .category-choice.is-pressed::before {
  --shine-opacity: 1.35;
  --shine-size: 42%;
  filter: saturate(108%) brightness(1.05);
}

.app[data-mode="browse"] .category-choice.is-pressed::after {
  filter: saturate(210%) contrast(124%) brightness(1.03);
  transform: rotate(0deg) scale(1.12);
}

/* --- explore-center-minimal-copy-pass --- */
/* Minimal, centered explore gate copy */
#categoryGate {
  justify-items: center;
  align-content: center;
  gap: 18px;
  padding: 0;
  text-align: center;
}
#categoryGate .gate-copy {
  max-width: 420px;
  display: grid;
  gap: 7px;
  justify-items: center;
}
#categoryGate .eyebrow {
  display: none !important;
}
#categoryGate .gate-title-minimal {
  max-width: none;
  color: rgba(18, 20, 24, .92);
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 560;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-align: center;
}
#categoryGate .gate-subtitle-minimal {
  max-width: none;
  margin: 0;
  color: rgba(18, 20, 24, .52);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: none;
  text-align: center;
}
#categoryGate .category-choices {
  width: min(980px, 100%);
}
@media (max-width: 720px) {
  #categoryGate {
    gap: 28px;
    padding: 24px 0 18px;
  }
  #categoryGate .gate-copy {
    max-width: 300px;
    gap: 8px;
  }
  #categoryGate .category-choices {
    gap: 12px;
  }
  #categoryGate .category-choice {
    min-height: 96px;
    padding: 17px 16px;
  }
  #categoryGate .gate-title-minimal {
    font-size: clamp(17px, 5.2vw, 22px);
  }
  #categoryGate .gate-subtitle-minimal {
    font-size: 9px;
  }
}

/* --- grimlife-wordmark-pass --- */
/* GRIMLIFE identity pass — imperfect source art inside a clean interface. */
.sr-brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.brand-hold.grimlife-brand {
  position: relative;
  min-width: 174px;
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: 17px minmax(0, auto);
  align-items: center;
  column-gap: 9px;
  padding: 3px 0;
  overflow: visible;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  white-space: normal;
  text-overflow: clip;
  opacity: 1;
}

/* retire the generic status dot */
.brand-hold.grimlife-brand::after { display: none !important; }

.grimlife-brand-copy {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 2px;
  align-items: center;
}

.grimlife-wordmark {
  position: relative;
  display: inline-flex;
  width: max-content;
  align-items: baseline;
  color: #0c0d10;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.085em;
  transform: scaleX(.93);
  transform-origin: left center;
  text-transform: uppercase;
  filter: contrast(1.06);
}

/* photocopy ghost — deliberately imperfect, almost invisible at rest */
.grimlife-wordmark::before,
.grimlife-wordmark::after {
  content: attr(data-word);
  position: absolute;
  inset: 0 auto auto 0;
  width: max-content;
  pointer-events: none;
  opacity: .08;
  color: #0c0d10;
  font: inherit;
  letter-spacing: inherit;
  transform-origin: left center;
}
.grimlife-wordmark::before {
  transform: translate(-.7px, .45px) scaleX(1.012);
  filter: blur(.25px);
}
.grimlife-wordmark::after {
  opacity: .035;
  transform: translate(.9px, -.25px) scaleX(.994);
}

/* hand-adjusted letter rhythm: enough wrongness to become a mark */
.grimlife-wordmark > span { display: inline-block; position: relative; }
.grimlife-wordmark > span:nth-child(1) { transform: scaleX(.92) translateY(.2px); margin-right: .02em; }
.grimlife-wordmark > span:nth-child(2) { transform: scaleX(.84) translateY(-.35px); margin-right: .04em; }
.grimlife-wordmark > span:nth-child(3) { transform: scaleX(.70) translateY(.1px); margin-right: .025em; }
.grimlife-wordmark > span:nth-child(4) { transform: scaleX(1.06) translateY(.45px); margin-right: -.01em; }
.grimlife-wordmark > span:nth-child(5) { transform: scaleX(.79) translateY(-.25px); margin-right: .035em; }
.grimlife-wordmark > span:nth-child(6) { transform: scaleX(.69) translateY(.25px); margin-right: .03em; }
.grimlife-wordmark > span:nth-child(7) { transform: scaleX(.82) translateY(-.45px); margin-right: .02em; }
.grimlife-wordmark > span:nth-child(8) { transform: scaleX(.93) translateY(.2px); }

.grimlife-brand-meta {
  width: max-content;
  color: rgba(17,18,22,.42);
  font: 600 5.8px/1.05 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .145em;
  text-transform: uppercase;
}

/* proprietary GL marker: imperfect 4-point registration burst */
.grimlife-sigil {
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
  opacity: .82;
  transform: rotate(-7deg);
}
.grimlife-sigil::before,
.grimlife-sigil::after,
.grimlife-sigil i::before,
.grimlife-sigil i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform-origin: center;
}
.grimlife-sigil::before {
  width: 13px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(2deg);
}
.grimlife-sigil::after {
  width: 1px;
  height: 13px;
  transform: translate(-50%, -50%) rotate(-3deg);
}
.grimlife-sigil i::before {
  width: 9px;
  height: 1px;
  opacity: .56;
  transform: translate(-50%, -50%) rotate(46deg);
}
.grimlife-sigil i::after {
  width: 1px;
  height: 9px;
  opacity: .56;
  transform: translate(-50%, -50%) rotate(46deg);
}

/* source-print motion rather than a generic hover state */
.brand-hold.grimlife-brand:hover .grimlife-wordmark::before,
.brand-hold.grimlife-brand:focus-visible .grimlife-wordmark::before {
  opacity: .24;
  transform: translate(-1.4px, .8px) scaleX(1.018);
}
.brand-hold.grimlife-brand:hover .grimlife-wordmark::after,
.brand-hold.grimlife-brand:focus-visible .grimlife-wordmark::after {
  opacity: .09;
  transform: translate(1.25px, -.55px) scaleX(.99);
}
.brand-hold.grimlife-brand:hover .grimlife-sigil,
.brand-hold.grimlife-brand:focus-visible .grimlife-sigil {
  transform: rotate(7deg) scale(1.06);
}

.brand-hold.grimlife-brand.is-holding {
  opacity: 1;
}
.brand-hold.grimlife-brand.is-holding .grimlife-wordmark {
  animation: grimlife-copy-burn 540ms steps(2,end) infinite;
}
.brand-hold.grimlife-brand.is-holding .grimlife-wordmark::before {
  opacity: .42;
  transform: translate(-2.2px, 1px) scaleX(1.024);
}
.brand-hold.grimlife-brand.is-holding .grimlife-wordmark::after {
  opacity: .16;
  transform: translate(1.9px, -.9px) scaleX(.987);
}
.brand-hold.grimlife-brand.is-holding .grimlife-sigil {
  animation: grimlife-sigil-twitch 280ms steps(2,end) infinite;
}

@keyframes grimlife-copy-burn {
  0%,100% { filter: contrast(1.06) brightness(1); transform: scaleX(.93) translate(0,0); }
  35% { filter: contrast(1.34) brightness(1.04); transform: scaleX(.935) translate(.35px,-.2px); }
  68% { filter: contrast(1.14) brightness(.98); transform: scaleX(.927) translate(-.25px,.25px); }
}
@keyframes grimlife-sigil-twitch {
  0%,100% { transform: rotate(-7deg) translate(0,0); }
  50% { transform: rotate(9deg) translate(.7px,-.35px); }
}

/* dark player/header state */
.app:not([data-mode="browse"]) .grimlife-wordmark,
.app:not([data-mode="browse"]) .grimlife-wordmark::before,
.app:not([data-mode="browse"]) .grimlife-wordmark::after { color: var(--ink); }
.app:not([data-mode="browse"]) .grimlife-brand-meta { color: rgba(244,241,233,.38); }
.app:not([data-mode="browse"]) .grimlife-sigil { color: var(--ink); }

/* Browse uses black identity, not the old purple status treatment. */
.app[data-mode="browse"] .grimlife-sigil { color: #111216; }

@media (max-width: 720px) {
  .brand-hold.grimlife-brand {
    min-width: 142px;
    min-height: 30px;
    grid-template-columns: 13px minmax(0, auto);
    column-gap: 7px;
    padding: 0;
    overflow: visible;
  }
  .grimlife-sigil { width: 11px; height: 11px; }
  .grimlife-sigil::before { width: 11px; }
  .grimlife-sigil::after { height: 11px; }
  .grimlife-sigil i::before { width: 7px; }
  .grimlife-sigil i::after { height: 7px; }
  .grimlife-wordmark { font-size: 11.5px; }
  .grimlife-brand-meta {
    max-width: 118px;
    overflow: hidden;
    font-size: 4.8px;
    letter-spacing: .105em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-hold.grimlife-brand.is-holding .grimlife-wordmark,
  .brand-hold.grimlife-brand.is-holding .grimlife-sigil { animation: none; }
}

/* --- grimlife-wordmark-bold-pass --- */
.brand-hold.grimlife-brand {
  min-width: 210px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
}

.grimlife-brand-copy {
  gap: 4px;
}

.grimlife-wordmark {
  font-size: 24px;
  line-height: .88;
  letter-spacing: -.092em;
  transform: scaleX(.94);
}

.grimlife-brand-meta {
  margin-left: 1px;
  color: rgba(17,18,22,.42);
  font-size: 7px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .23em;
}

/* Remove all leftover sigil behavior/layout. */
.grimlife-sigil { display: none !important; }

/* Keep the reactive photocopy shadow, with slightly more visible displacement at this larger scale. */
.brand-hold.grimlife-brand:hover .grimlife-wordmark::before,
.brand-hold.grimlife-brand:focus-visible .grimlife-wordmark::before {
  opacity: .25;
  transform: translate(-1.8px, 1px) scaleX(1.018);
}
.brand-hold.grimlife-brand:hover .grimlife-wordmark::after,
.brand-hold.grimlife-brand:focus-visible .grimlife-wordmark::after {
  opacity: .095;
  transform: translate(1.55px, -.7px) scaleX(.99);
}

.app:not([data-mode="browse"]) .grimlife-brand-meta {
  color: rgba(244,241,233,.42);
}

@media (max-width: 720px) {
  .brand-hold.grimlife-brand {
    min-width: 154px;
    min-height: 40px;
    display: inline-flex;
    padding: 0;
  }
  .grimlife-wordmark {
    font-size: 17px;
  }
  .grimlife-brand-meta {
    max-width: none;
    font-size: 5.6px;
    letter-spacing: .2em;
  }
}

/* --- current-track-locator-pass --- */
.app[data-mode="browse"] .player-title::after {
  content: "⌖";
  margin-left: 9px;
  font-size: .52em;
  vertical-align: .36em;
  color: rgba(17,18,22,.38);
  transform: none;
}
.app[data-mode="browse"] .player-title:hover::after,
.app[data-mode="browse"] .player-title:focus-visible::after {
  color: rgba(17,18,22,.72);
}
.app[data-mode="browse"] .track-card.is-located {
  border-color: var(--track-accent, rgba(17,18,22,.46)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-accent, #111) 18%, transparent),
    0 14px 36px color-mix(in srgb, var(--track-accent, #111) 11%, transparent) !important;
}

/* --- full-player-perfect-grid-pass --- */
/* Full/recording player: two exact typographic rows.
   Row 1: BPM number | title
   Row 2: BPM | key   | producer */
.app[data-mode="player"][data-recording="true"] .player-core {
  --record-tempo-column: 160px;
  --record-column-gap: 24px;
  display: block;
}

.app[data-mode="player"][data-recording="true"] .recording-catalog {
  margin: 2px 0 10px;
}

.app[data-mode="player"][data-recording="true"] .title-transport {
  display: grid;
  grid-template-columns: var(--record-tempo-column) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--record-column-gap);
  row-gap: 9px;
  min-height: 0;
  align-items: baseline;
}

/* display:contents lets BPM number + BPM/key occupy the same parent grid
   as title + producer, guaranteeing shared baselines. */
.app[data-mode="player"][data-recording="true"] .recording-tempo {
  display: contents;
}

.app[data-mode="player"][data-recording="true"] .recording-tempo > strong {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  justify-self: start;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--catalog-red);
  font-weight: 220;
  line-height: .9;
  letter-spacing: -.055em;
  text-align: left;
}

.app[data-mode="player"][data-recording="true"] .recording-tempo-meta {
  grid-column: 1;
  grid-row: 2;
  align-self: baseline;
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--catalog-red);
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app[data-mode="player"][data-recording="true"] .recording-tempo-meta i {
  margin: 0 1px;
  color: rgba(215,96,88,.5);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.app[data-mode="player"][data-recording="true"] .recording-tempo-meta span:last-child {
  letter-spacing: .1em;
}

.app[data-mode="player"][data-recording="true"] .player-title {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  margin: 0;
  padding: 0;
  line-height: .9;
}

.app[data-mode="player"][data-recording="true"] .recording-credit {
  grid-column: 2;
  grid-row: 2;
  align-self: baseline;
  justify-self: start;
  display: flex;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.app[data-mode="player"][data-recording="true"] .player-controls {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
}

/* Old quick metadata has no role in recording/full view anymore. */
.app[data-mode="player"][data-recording="true"] .quick-meta {
  display: none !important;
}

.app[data-mode="player"][data-recording="true"] .wave-rail {
  margin-top: 12px;
}

/* Keep left edges mathematically identical. */
.app[data-mode="player"][data-recording="true"] #glRecordingBpm,
.app[data-mode="player"][data-recording="true"] .recording-tempo-meta {
  transform: none;
  text-indent: 0;
}

@media (max-width: 720px) {
  .app[data-mode="player"][data-recording="true"] .player-core {
    --record-tempo-column: 88px;
    --record-column-gap: 14px;
  }
  .app[data-mode="player"][data-recording="true"] .title-transport {
    row-gap: 7px;
  }
  .app[data-mode="player"][data-recording="true"] .recording-tempo > strong {
    font-size: 34px;
    font-weight: 220;
  }
  .app[data-mode="player"][data-recording="true"] .recording-tempo-meta {
    gap: 6px;
    font-size: 8px;
  }
  .app[data-mode="player"][data-recording="true"] .recording-credit {
    font-size: 7px;
  }
  .app[data-mode="player"][data-recording="true"] .player-controls {
    margin-left: 4px;
  }
}

/* --- full-player-tight-grid-pass --- */
/* Tighten the full-player typographic lockup.
   Title/producer sit closer to tempo; producer begins after the title's opening quote. */
.app[data-mode="player"][data-recording="true"] .player-core {
  --record-tempo-column: 142px;
  --record-column-gap: 10px;
  --record-title-text-inset: clamp(13px, .95vw, 17px);
}

.app[data-mode="player"][data-recording="true"] .recording-credit {
  margin-left: var(--record-title-text-inset);
}

@media (max-width: 720px) {
  .app[data-mode="player"][data-recording="true"] .player-core {
    --record-tempo-column: 76px;
    --record-column-gap: 9px;
    --record-title-text-inset: 12px;
  }
}

/* --- full-player-console-tight-pass --- */
/* Console-tight lockup: tempo and title nearly touch, separated by one hairline. */
.app[data-mode="player"][data-recording="true"] .player-core {
  --record-tempo-column: max-content;
  --record-column-gap: 0px;
  --record-console-divider-gap: 9px;
  --record-title-text-inset: clamp(13px, .8vw, 16px);
}

.app[data-mode="player"][data-recording="true"] .title-transport {
  position: relative;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  column-gap: 0;
}

/* One continuous console divider spanning both information rows. */
.app[data-mode="player"][data-recording="true"] .title-transport::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: start;
  align-self: stretch;
  width: 1px;
  min-height: 100%;
  margin: 0;
  background: rgba(244, 241, 233, .22);
  pointer-events: none;
}

.app[data-mode="player"][data-recording="true"] .player-title {
  padding-left: var(--record-console-divider-gap);
}

/* Producer begins after the opening quote above it, while staying tight to divider. */
.app[data-mode="player"][data-recording="true"] .recording-credit {
  margin-left: calc(var(--record-console-divider-gap) + var(--record-title-text-inset));
}

/* Keep the lower left readout visually compact, like one console label. */
.app[data-mode="player"][data-recording="true"] .recording-tempo-meta {
  gap: 5px;
  padding-right: var(--record-console-divider-gap);
}

.app[data-mode="player"][data-recording="true"] .recording-tempo > strong {
  padding-right: var(--record-console-divider-gap);
}

@media (max-width: 720px) {
  .app[data-mode="player"][data-recording="true"] .player-core {
    --record-console-divider-gap: 7px;
    --record-title-text-inset: 11px;
  }
  .app[data-mode="player"][data-recording="true"] .recording-tempo-meta {
    gap: 4px;
  }
}

/* --- console-red-line-only-pass --- */
.app[data-mode="player"][data-recording="true"] .title-transport::before {
  background: rgba(223, 92, 86, .78) !important;
  box-shadow: 0 0 8px rgba(223, 92, 86, .12);
}

/* --- dense-explore-nine-up-pass --- */
/* ===== Dense explore/saved pass ===== */
/* Keep nav easier to hit, but not tall. */
/* More viewport for actual browsing. */
.app[data-mode="browse"] .library-shell {
  width: min(1280px, 100%);
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: calc(var(--safe-top) + 58px) clamp(16px, 2vw, 28px) calc(154px + var(--safe-bottom));
}

/* Explore landing stays concise and centered. */
.app[data-mode="browse"] .category-gate {
  gap: 14px;
  padding-bottom: 0;
}
.app[data-mode="browse"] .gate-copy {
  max-width: 360px;
}
.app[data-mode="browse"] .library-title {
  font-size: clamp(18px, 1.8vw, 24px);
}
.app[data-mode="browse"] .library-subtitle {
  margin-top: 8px;
  font-size: 10px;
}
.app[data-mode="browse"] .category-choices {
  gap: 10px;
}
.app[data-mode="browse"] .category-choice {
  min-height: 154px;
  padding: 18px;
}
.app[data-mode="browse"] .category-choice strong {
  font-size: clamp(22px, 2.4vw, 31px);
}

/* Compress category page chrome heavily. */
.app[data-section="explore"] .collection-header,
.app[data-section="saved"] .collection-header {
  min-height: 72px;
  gap: 14px;
  padding-bottom: 10px;
}
.app[data-section="explore"] .collection-header .library-title,
.app[data-section="saved"] .collection-header .library-title {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: .96;
}
.app[data-section="explore"] .collection-header .eyebrow,
.app[data-section="saved"] .collection-header .eyebrow {
  margin-bottom: 5px;
  font-size: 8px;
}
.app[data-section="explore"] .category-back,
.app[data-section="saved"] .category-back {
  margin: 0 0 6px;
  font-size: 8px;
  letter-spacing: .12em;
}

.app[data-section="explore"] .library-toolbar,
.app[data-section="saved"] .library-toolbar {
  grid-template-columns: minmax(180px, 1fr) 118px 116px auto auto;
  gap: 7px;
  padding: 0 0 8px;
}
.app[data-section="explore"] .search-field,
.app[data-section="explore"] .select-field,
.app[data-section="explore"] .toolbar-button,
.app[data-section="saved"] .search-field,
.app[data-section="saved"] .select-field,
.app[data-section="saved"] .toolbar-button {
  min-height: 34px;
  border-radius: 10px;
}
.app[data-section="explore"] .search-field,
.app[data-section="saved"] .search-field {
  gap: 7px;
  padding: 0 10px;
}
.app[data-section="explore"] .search-field input,
.app[data-section="saved"] .search-field input {
  font-size: 11px;
}
.app[data-section="explore"] .select-field,
.app[data-section="explore"] .toolbar-button,
.app[data-section="saved"] .select-field,
.app[data-section="saved"] .toolbar-button {
  padding: 0 10px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Make the scroll region feel larger visually. */
.app[data-section="explore"] .library-scroll,
.app[data-section="saved"] .library-scroll {
  margin-top: 0;
}

@media (min-width: 721px) {
/* 3 x 3-ish desktop density. */
.app[data-section="explore"] .track-list,
.app[data-section="saved"] .track-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 6px 0 18px;
}
.app[data-section="explore"] .track-card,
.app[data-section="saved"] .track-card {
  min-height: 146px;
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  grid-template-rows: 18px minmax(60px, 1fr) 22px;
  column-gap: 9px;
  padding: 12px;
  border-radius: 10px;
}
.app[data-section="explore"] .card-identity,
.app[data-section="saved"] .card-identity {
  padding-right: 74px;
  font-size: 8px;
  letter-spacing: .1em;
}
.app[data-section="explore"] .card-save,
.app[data-section="explore"] .card-edit,
.app[data-section="saved"] .card-save,
.app[data-section="saved"] .card-edit {
  top: 1px;
  min-height: 30px;
  padding: 0 4px;
  font-size: 8px;
}
.app[data-section="explore"] .card-save,
.app[data-section="saved"] .card-save { right: 31px; }
.app[data-section="explore"] .card-edit,
.app[data-section="saved"] .card-edit { right: 4px; font-size: 11px; }
.app[data-section="explore"] .card-play,
.app[data-section="saved"] .card-play {
  width: 34px;
  height: 34px;
  font-size: 10px;
}
.app[data-section="explore"] .card-copy,
.app[data-section="saved"] .card-copy {
  padding: 3px 0 7px;
}
.app[data-section="explore"] .card-copy strong,
.app[data-section="saved"] .card-copy strong {
  -webkit-line-clamp: 2;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.app[data-section="explore"] .card-copy span,
.app[data-section="saved"] .card-copy span {
  margin-top: 6px;
  font-size: 9px;
}
.app[data-section="explore"] .card-meta > span,
.app[data-section="saved"] .card-meta > span {
  font-size: 10px;
}
.app[data-section="explore"] .card-meta b,
.app[data-section="saved"] .card-meta b {
  font-size: 7px;
}
.app[data-section="explore"] .card-meta .card-tempo,
.app[data-section="saved"] .card-meta .card-tempo {
  padding: 0 0 6px;
}
.app[data-section="explore"] .card-tempo strong,
.app[data-section="saved"] .card-tempo strong {
  font-size: 32px;
  letter-spacing: -.06em;
}
.app[data-section="explore"] .card-tempo b,
.app[data-section="saved"] .card-tempo b {
  margin-top: 3px;
}
.app[data-section="explore"] .card-key,
.app[data-section="explore"] .card-genre,
.app[data-section="explore"] .card-time,
.app[data-section="saved"] .card-key,
.app[data-section="saved"] .card-genre,
.app[data-section="saved"] .card-time {
  padding-top: 7px;
}
}

/* Better tablet density. */
@media (max-width: 1140px) and (min-width: 721px) {
  .app[data-mode="browse"] .library-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
  .app[data-section="explore"] .track-list,
  .app[data-section="saved"] .track-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: keep nav easier, compress everything else. */
@media (max-width: 720px) {
  .app[data-mode="browse"] .library-shell {
    padding-top: calc(var(--safe-top) + 63px);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: calc(146px + var(--safe-bottom));
  }
  .app[data-section="explore"] .collection-header,
  .app[data-section="saved"] .collection-header {
    min-height: 58px;
    padding-bottom: 8px;
  }
  .app[data-section="explore"] .collection-header .library-title,
  .app[data-section="saved"] .collection-header .library-title {
    font-size: clamp(21px, 6vw, 28px);
  }
  .app[data-section="explore"] .library-toolbar,
  .app[data-section="saved"] .library-toolbar {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding-bottom: 7px;
  }
  .app[data-section="explore"] .search-field,
  .app[data-section="saved"] .search-field {
    grid-column: 1 / -1;
    min-height: 33px;
    padding: 0 9px;
  }
  .app[data-section="explore"] .select-field,
  .app[data-section="explore"] .toolbar-button,
  .app[data-section="saved"] .select-field,
  .app[data-section="saved"] .toolbar-button {
    min-height: 32px;
    padding: 0 7px;
    font-size: 8px;
  }
}

/* --- remove-explore-eyebrow-pass --- */
.app[data-section="explore"] .collection-header .eyebrow {
  display: none !important;
}

/* --- addictive-track-card-pass --- */
/* ===== Track cards: tactile, collectible, playable ===== */
.app[data-mode="browse"] .track-card {
  background: #fff !important;
  border-color: rgba(17,18,22,.085);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 0 rgba(17,18,22,.025),
    0 4px 12px rgba(17,18,22,.025);
  transform: translateZ(0);
  transition:
    transform 180ms var(--ease),
    border-color 160ms ease,
    box-shadow 180ms ease;
}

/* No selected-track tint/gradient. Armed stays white. */
.app[data-mode="browse"] .track-card[aria-current="true"] {
  background: #fff !important;
  border-color: rgba(17,18,22,.26) !important;
  box-shadow:
    0 0 0 1px rgba(17,18,22,.055),
    0 9px 24px rgba(17,18,22,.075) !important;
}

/* Category spine feels more like a collectible marker. */
.app[data-mode="browse"] .track-card::before {
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--track-accent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-accent) 12%, transparent),
    0 0 12px color-mix(in srgb, var(--track-accent) 14%, transparent);
  opacity: .92;
  transition: width 160ms ease, opacity 160ms ease, box-shadow 180ms ease;
}

/* A tiny physical top-light, not a colored fill. */
.app[data-mode="browse"] .track-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,.96);
  opacity: .85;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .app[data-mode="browse"] .track-card:hover {
    background: #fff !important;
    border-color: rgba(17,18,22,.18);
    transform: translateY(-2px) scale(1.0025);
    box-shadow:
      0 1px 0 rgba(255,255,255,.98) inset,
      0 12px 28px rgba(17,18,22,.085),
      0 2px 8px rgba(17,18,22,.035);
  }
  .app[data-mode="browse"] .track-card:hover::before {
    width: 4px;
    opacity: 1;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--track-accent) 18%, transparent),
      0 0 18px color-mix(in srgb, var(--track-accent) 24%, transparent);
  }
}

/* Titles feel like songs, not database labels. */
.app[data-mode="browse"] .card-copy strong {
  color: #0e0f12;
  font-weight: 640;
  letter-spacing: -.042em;
  transition: letter-spacing 160ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .app[data-mode="browse"] .track-card:hover .card-copy strong {
    letter-spacing: -.048em;
    transform: translateX(1px);
  }
}

/* Tempo reads like a hardware readout. */
.app[data-mode="browse"] .card-tempo strong {
  color: #111216;
  font-weight: 280;
  font-variant-numeric: tabular-nums;
}
.app[data-mode="browse"] .card-tempo b {
  color: var(--track-accent);
  font-weight: 720;
}

/* Play button becomes the tactile focal point. */
.app[data-mode="browse"] .card-play {
  position: relative;
  z-index: 2;
  border-color: color-mix(in srgb, var(--track-accent) 34%, rgba(17,18,22,.14));
  background: #fff;
  color: #111216;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 6px rgba(17,18,22,.04);
  transition:
    transform 150ms var(--ease),
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 170ms ease;
}
.app[data-mode="browse"] .track-card:hover .card-play,
.app[data-mode="browse"] .track-card[aria-current="true"] .card-play {
  border-color: var(--track-accent);
  background: var(--track-accent);
  color: #fff;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--track-accent) 10%, transparent),
    0 5px 14px color-mix(in srgb, var(--track-accent) 22%, transparent);
}
.app[data-mode="browse"] .card-play:active {
  transform: scale(.88);
}

/* Armed: structural emphasis only. */
.app[data-mode="browse"] .track-card[aria-current="true"]::before {
  width: 5px;
  opacity: 1;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-accent) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--track-accent) 24%, transparent);
}

/* When the armed track is actually playing, gently breathe the control. */
.app[data-mode="browse"][data-playback="playing"] .track-card[aria-current="true"] .card-play {
  animation: grimlifeTrackHeartbeat 1.35s ease-in-out infinite;
}

@keyframes grimlifeTrackHeartbeat {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--track-accent) 10%, transparent),
      0 5px 14px color-mix(in srgb, var(--track-accent) 20%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--track-accent) 13%, transparent),
      0 7px 18px color-mix(in srgb, var(--track-accent) 28%, transparent);
  }
}

/* Secondary metadata is intentionally quieter so title/BPM/play dominate. */
.app[data-mode="browse"] .card-identity,
.app[data-mode="browse"] .card-copy span,
.app[data-mode="browse"] .card-key,
.app[data-mode="browse"] .card-genre,
.app[data-mode="browse"] .card-time {
  opacity: .74;
}

@media (prefers-reduced-motion: reduce) {
  .app[data-mode="browse"] .track-card,
  .app[data-mode="browse"] .card-play,
  .app[data-mode="browse"] .track-card[aria-current="true"] .card-play {
    animation: none !important;
    transition: none !important;
  }
}

/* --- armed-card-wave-pass --- */
/* Producer is part of the song identity, not washed-out metadata. */
.app[data-mode="browse"] .card-copy > span {
  color: #1a1b1e !important;
  opacity: .82 !important;
  font-weight: 540;
}

/* Only the armed song gets a living signal. */
.app[data-mode="browse"] .card-wave {
  --card-wave-progress: 0%;
  position: relative;
  width: min(132px, 96%);
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  pointer-events: none;
}
.app[data-mode="browse"] .card-wave-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.app[data-mode="browse"] .card-wave-layer i {
  width: 2px;
  height: var(--h, 45%);
  min-height: 2px;
  border-radius: 999px;
  background: rgba(17,18,22,.18);
}
.app[data-mode="browse"] .card-wave-layer.is-played {
  clip-path: inset(0 calc(100% - var(--card-wave-progress)) 0 0);
}
.app[data-mode="browse"] .card-wave-layer.is-played i {
  background: var(--track-accent);
  opacity: .92;
}
.app[data-mode="browse"] .track-card[aria-current="true"] .card-wave {
  animation: grimlifeWaveWake .34s var(--ease) both;
}
@keyframes grimlifeWaveWake {
  from { opacity: 0; transform: translateY(2px) scaleX(.97); }
  to { opacity: 1; transform: translateY(0) scaleX(1); }
}
@media (max-width: 720px) {
  .app[data-mode="browse"] .card-wave {
    width: min(96px, 94%);
    height: 8px;
    margin-top: 4px;
    gap: 1px;
  }
  .app[data-mode="browse"] .card-wave-layer { gap: 1.5px; }
  .app[data-mode="browse"] .card-wave-layer i { width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .app[data-mode="browse"] .track-card[aria-current="true"] .card-wave { animation: none !important; }
}

/* --- quoted-name-producer-hierarchy-pass --- */
/* Keep Produced by faint; only the producer name carries the emphasis. */
.app[data-mode="browse"] .card-copy > span {
  color: rgba(17, 18, 22, .44) !important;
  opacity: 1 !important;
  font-weight: 520 !important;
}
.app[data-mode="browse"] .card-copy .card-producer-label {
  color: rgba(17, 18, 22, .44) !important;
  font-style: normal;
  font-weight: 520;
}
.app[data-mode="browse"] .card-copy .card-producer-name {
  color: #111216 !important;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* Titles are now quoted in the real text content, so don't add fake quotes in recording mode. */
.app[data-mode="player"][data-recording="true"] .player-title::before {
  content: none !important;
  display: none !important;
}
.app[data-mode="player"][data-recording="true"] .player-title::after {
  content: "⌃" !important;
  display: inline-block !important;
  margin-left: 8px;
  color: rgba(244, 241, 233, .34);
  font-size: .38em;
  letter-spacing: 0;
  vertical-align: .55em;
  font-family: inherit;
  font-weight: inherit;
}

/* --- grimlife-thin-bracket-lockup-pass --- */
/* Thin two-line GRIMLIFE VAULT lockup with opposing half brackets */
.brand-hold.grimlife-brand {
  min-width: 244px;
  min-height: 56px;
  padding: 0;
}

.grimlife-brand-copy.grimlife-brand-copy--bracketed {
  position: relative;
  width: 196px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  padding: 4px 9px 4px 9px;
  overflow: visible;
}

.grimlife-brand-copy.grimlife-brand-copy--bracketed::before,
.grimlife-brand-copy.grimlife-brand-copy--bracketed::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: .62;
  pointer-events: none;
}
/* bottom-left half bracket */
.grimlife-brand-copy.grimlife-brand-copy--bracketed::before {
  left: -2px;
  bottom: -1px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
/* top-right half bracket */
.grimlife-brand-copy.grimlife-brand-copy--bracketed::after {
  right: -2px;
  top: -1px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
}

.grimlife-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  color: #0d0f12;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 300 !important;
  line-height: .86;
  letter-spacing: -.02em;
  transform: none !important;
  filter: contrast(1.04);
}
.grimlife-wordmark::before,
.grimlife-wordmark::after {
  width: 100%;
  font-weight: 300 !important;
  letter-spacing: -.02em;
}
.grimlife-wordmark::before {
  opacity: .12;
  transform: translate(-1px, .55px) scaleX(1.01);
}
.grimlife-wordmark::after {
  opacity: .045;
  transform: translate(1.15px, -.4px) scaleX(.996);
}
.grimlife-wordmark > span {
  transform: none !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
}

.grimlife-brand-meta {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  margin-left: 0 !important;
  color: rgba(17,18,22,.5);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px !important;
  font-weight: 300 !important;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  transform: scaleX(1.03);
  transform-origin: left center;
}
.grimlife-brand-meta > span {
  display: inline-block;
}
/* subtle reactive misregistration on VAULT too */
.grimlife-brand-meta::before,
.grimlife-brand-meta::after {
  content: attr(data-word);
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0;
  pointer-events: none;
}
.brand-hold.grimlife-brand:hover .grimlife-wordmark::before,
.brand-hold.grimlife-brand:focus-visible .grimlife-wordmark::before {
  opacity: .22;
  transform: translate(-1.65px, .85px) scaleX(1.013);
}
.brand-hold.grimlife-brand:hover .grimlife-wordmark::after,
.brand-hold.grimlife-brand:focus-visible .grimlife-wordmark::after {
  opacity: .085;
  transform: translate(1.45px, -.65px) scaleX(.993);
}
.brand-hold.grimlife-brand:hover .grimlife-brand-meta::before,
.brand-hold.grimlife-brand:focus-visible .grimlife-brand-meta::before {
  opacity: .16;
  transform: translate(-1px, .45px) scaleX(1.012);
}
.brand-hold.grimlife-brand:hover .grimlife-brand-meta::after,
.brand-hold.grimlife-brand:focus-visible .grimlife-brand-meta::after {
  opacity: .06;
  transform: translate(.85px, -.3px) scaleX(.995);
}
.brand-hold.grimlife-brand.is-holding .grimlife-wordmark {
  animation: grimlife-copy-burn 540ms steps(2,end) infinite;
}
.brand-hold.grimlife-brand.is-holding .grimlife-brand-meta {
  animation: grimlife-copy-burn 620ms steps(2,end) infinite reverse;
}
.brand-hold.grimlife-brand.is-holding .grimlife-brand-meta::before {
  opacity: .28;
  transform: translate(-1.25px, .5px) scaleX(1.018);
}
.brand-hold.grimlife-brand.is-holding .grimlife-brand-meta::after {
  opacity: .11;
  transform: translate(1px, -.45px) scaleX(.992);
}

.app:not([data-mode="browse"]) .grimlife-wordmark,
.app:not([data-mode="browse"]) .grimlife-wordmark::before,
.app:not([data-mode="browse"]) .grimlife-wordmark::after {
  color: var(--ink);
}
.app:not([data-mode="browse"]) .grimlife-brand-meta,
.app:not([data-mode="browse"]) .grimlife-brand-copy.grimlife-brand-copy--bracketed::before,
.app:not([data-mode="browse"]) .grimlife-brand-copy.grimlife-brand-copy--bracketed::after {
  color: rgba(244,241,233,.56);
  border-color: rgba(244,241,233,.56);
}
.app[data-mode="browse"] .grimlife-brand-copy.grimlife-brand-copy--bracketed::before,
.app[data-mode="browse"] .grimlife-brand-copy.grimlife-brand-copy--bracketed::after {
  border-color: rgba(17,18,22,.54);
}

@media (max-width: 720px) {
  .brand-hold.grimlife-brand {
    min-width: 170px;
    min-height: 44px;
  }
  .grimlife-brand-copy.grimlife-brand-copy--bracketed {
    width: 138px;
    gap: 2px;
    padding: 2px 7px 3px 7px;
  }
  .grimlife-wordmark {
    font-size: 15px;
  }
  .grimlife-brand-meta {
    font-size: 6.6px !important;
    letter-spacing: .22em;
  }
  .grimlife-brand-copy.grimlife-brand-copy--bracketed::before,
  .grimlife-brand-copy.grimlife-brand-copy--bracketed::after {
    width: 9px;
    height: 9px;
  }
}

/* --- plain-logo-producer-inline-pass --- */
/* Revert branding to simple text. */
.brand-hold.grimlife-brand.grimlife-brand--plain {
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  padding: 8px 0 !important;
  color: inherit;
  overflow: visible;
}
.brand-hold.grimlife-brand.grimlife-brand--plain::before,
.brand-hold.grimlife-brand.grimlife-brand--plain::after {
  content: none !important;
  display: none !important;
}
.grimlife-plain-logo {
  display: inline-block;
  color: #111216;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app:not([data-mode="browse"]) .grimlife-plain-logo {
  color: var(--ink);
}
@media (max-width: 720px) {
  .grimlife-plain-logo {
    font-size: 10px;
    letter-spacing: .15em;
  }
}

/* Produced by + producer name always stay on one line. */
.app[data-mode="browse"] .card-copy > span {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app[data-mode="browse"] .card-copy .card-producer-label,
.app[data-mode="browse"] .card-copy .card-producer-name {
  display: inline !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
}
.app[data-mode="browse"] .card-copy .card-producer-label {
  color: rgba(17,18,22,.42) !important;
  font-weight: 500 !important;
}
.app[data-mode="browse"] .card-copy .card-producer-name {
  color: #111216 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* --- public-genre-rail-pass --- */
/* ===== Public catalog navigation ===== */
.app[data-mode="browse"] .library-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

/* Genre is navigation now, not a form filter. */
.genre-rail {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  margin: -2px 0 8px;
  padding: 0 2px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.genre-rail::-webkit-scrollbar { display: none; }
.genre-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: rgba(17,18,22,.36);
  cursor: pointer;
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 150ms ease, opacity 150ms ease;
}
.genre-tab:first-child { padding-left: 0; padding-right: 13px; }
.genre-tab::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  opacity: .9;
  transition: transform 170ms var(--ease);
}
.genre-tab:first-child::after { left: 0; }
.genre-tab:hover,
.genre-tab:focus-visible { color: rgba(17,18,22,.72); outline: 0; }
.genre-tab[aria-selected="true"] {
  color: #111216;
}
.genre-tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Tiny category-coded active line; enough identity without looking like filter pills. */
.app[data-category="beat"] .genre-tab[aria-selected="true"]::after { background: #ef3442; }
.app[data-category="loop"] .genre-tab[aria-selected="true"]::after { background: #f0a51f; }
.app[data-category="demo"] .genre-tab[aria-selected="true"]::after { background: #8055ff; }

/* The genre rail only exists after entering Beats / Loops / Demos. */
.app[data-section="explore"][data-category=""] .genre-rail,
.app[data-section="saved"] .genre-rail { display: none; }

/* Public-facing toolbar = search only. Keep legacy controls in DOM for internal code. */
.public-library-toolbar {
  display: block !important;
  padding: 0 0 7px !important;
}
.public-library-toolbar .search-field {
  width: min(320px, 100%);
  min-height: 31px !important;
  border-color: rgba(17,18,22,.07) !important;
  background: rgba(255,255,255,.5) !important;
}
.public-library-toolbar #genreFilter,
.public-library-toolbar #sortSelect,
.public-library-toolbar #shuffleButton,
.public-library-toolbar #addFilesButton {
  display: none !important;
}

/* Public catalog should not advertise upload/import UI. */
.app[data-mode="browse"] .drop-zone { display: none !important; }
.app[data-mode="browse"] .track-list { padding-top: 3px !important; }

@media (max-width: 720px) {
  .genre-rail {
    margin-top: -1px;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }
  .genre-tab {
    min-height: 30px;
    padding: 0 10px;
    font-size: 7.5px;
  }
  .genre-tab:first-child { padding-left: 0; }
  .public-library-toolbar .search-field {
    width: 100%;
    min-height: 31px !important;
  }
}

/* --- public-home-search-sort-fix --- */
/* Explore landing should be completely clean. */
.app[data-section="explore"][data-category=""] .public-library-toolbar {
  display: none !important;
}

/* Once inside a category, search + one compact sort affordance only. */
.app[data-section="explore"]:not([data-category=""]) .public-library-toolbar,
.app[data-section="saved"] .public-library-toolbar {
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 0 0 7px !important;
}

.public-library-toolbar .search-field {
  flex: 0 1 320px;
  width: min(320px, calc(100% - 42px));
}

.public-sort-control {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,18,22,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.5);
  color: rgba(17,18,22,.52);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.public-sort-control:hover,
.public-sort-control:focus-within {
  border-color: rgba(17,18,22,.18);
  color: #111216;
  background: #fff;
}
.public-sort-icon {
  position: relative;
  z-index: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-.5px);
  pointer-events: none;
}
.public-sort-control #sortSelect {
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit;
  opacity: 0;
  cursor: pointer;
}

/* Other admin-ish controls remain out of the public surface. */
.public-library-toolbar #genreFilter,
.public-library-toolbar #shuffleButton,
.public-library-toolbar #addFilesButton {
  display: none !important;
}

@media (max-width: 720px) {
  .app[data-section="explore"]:not([data-category=""]) .public-library-toolbar,
  .app[data-section="saved"] .public-library-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px;
  }
  .public-library-toolbar .search-field {
    flex: 1 1 auto;
    width: auto;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .public-sort-control {
    flex-basis: 33px;
    width: 33px;
    height: 31px;
  }
}

/* --- public-track-inspector-pass --- */
/* ===== Public hold-to-inspect metadata card ===== */
.track-inspector {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(15, 16, 18, .16);
  backdrop-filter: blur(10px) saturate(.72);
  -webkit-backdrop-filter: blur(10px) saturate(.72);
  transition: opacity 170ms ease, visibility 0s linear 170ms;
}
.track-inspector[data-open="true"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.track-inspector-card {
  --inspector-accent: #111216;
  position: relative;
  width: min(470px, calc(100vw - 34px));
  max-height: min(620px, calc(100dvh - 58px));
  padding: 22px 23px 20px;
  overflow: hidden;
  border: 1px solid rgba(17,18,22,.12);
  border-radius: 16px;
  background: #fbfbfc;
  color: #111216;
  box-shadow: 0 30px 80px rgba(17,18,22,.18), 0 1px 0 rgba(255,255,255,.9) inset;
  transform: translate3d(0, 12px, 0) scale(.975);
  opacity: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform, opacity;
}
.track-inspector[data-open="true"] .track-inspector-card {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition: transform 230ms cubic-bezier(.22,.8,.2,1), opacity 180ms ease;
}
.track-inspector-card[data-dragging="true"] {
  cursor: grabbing;
  transition: none !important;
}
.track-inspector-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--inspector-accent);
}
.track-inspector-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  color: rgba(17,18,22,.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.track-inspector-draghint {
  white-space: nowrap;
  color: rgba(17,18,22,.3);
}
.track-inspector-title {
  margin: 0;
  color: #111216;
  font-size: clamp(27px, 4.5vw, 38px);
  font-weight: 520;
  line-height: .98;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.track-inspector-producer {
  margin: 10px 0 22px;
  color: rgba(17,18,22,.43);
  font-size: 10px;
  line-height: 1.2;
}
.track-inspector-producer strong {
  color: #111216;
  font-weight: 720;
}
.track-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid rgba(17,18,22,.1);
  border-left: 1px solid rgba(17,18,22,.1);
}
.track-inspector-field {
  min-width: 0;
  padding: 12px 13px 11px;
  border-right: 1px solid rgba(17,18,22,.1);
  border-bottom: 1px solid rgba(17,18,22,.1);
}
.track-inspector-field span {
  display: block;
  margin-bottom: 6px;
  color: rgba(17,18,22,.37);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.track-inspector-field strong {
  display: block;
  overflow: hidden;
  color: #111216;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-inspector-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 15px;
  color: rgba(17,18,22,.32);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Press feedback so the hold interaction feels intentional. */
.app[data-mode="browse"] .track-card.is-inspector-holding {
  transform: translateY(-1px) scale(.992) !important;
  border-color: rgba(17,18,22,.22) !important;
  box-shadow: 0 8px 20px rgba(17,18,22,.065) !important;
}

@media (max-width: 720px) {
  .track-inspector { padding: 16px; }
  .track-inspector-card {
    width: min(430px, calc(100vw - 24px));
    padding: 19px 18px 17px;
    border-radius: 14px;
  }
  .track-inspector-topline { margin-bottom: 16px; }
  .track-inspector-title { font-size: clamp(25px, 8.4vw, 34px); }
  .track-inspector-producer { margin-bottom: 18px; }
  .track-inspector-field { padding: 11px 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .track-inspector,
  .track-inspector-card { transition: none !important; }
}

/* --- reactive-armed-wave-v199 --- */
/* v199: make the armed track signal feel live without touching audio routing. */
.app[data-mode="browse"] .card-wave {
  width: min(158px, 98%);
  height: 14px;
  margin-top: 7px;
  overflow: visible;
}
.app[data-mode="browse"] .card-wave-layer {
  overflow: hidden;
  border-radius: 2px;
}
.app[data-mode="browse"] .card-wave-layer i {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform 90ms linear, opacity 90ms linear;
}
.app[data-mode="browse"] .card-wave-layer.is-future i {
  opacity: .72;
}
.app[data-mode="browse"] .card-wave-layer.is-played i {
  opacity: .96;
  box-shadow: 0 0 5px color-mix(in srgb, var(--track-accent) 22%, transparent);
}
/* tiny console playhead */
.app[data-mode="browse"] .card-wave::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--card-wave-progress);
  top: -2px;
  width: 1px;
  height: 18px;
  background: var(--track-accent);
  opacity: 0;
  transform: translateX(-.5px);
  box-shadow: 0 0 7px color-mix(in srgb, var(--track-accent) 38%, transparent);
  transition: opacity 140ms ease;
}
.app[data-mode="browse"][data-playback="playing"] .track-card[aria-current="true"] .card-wave::after {
  opacity: .74;
}
.app[data-mode="browse"][data-playback="paused"] .track-card[aria-current="true"] .card-wave-layer i,
.app[data-mode="browse"] .track-card[aria-current="true"] .card-wave.is-settled .card-wave-layer i {
  transform: scaleY(1) !important;
  opacity: inherit;
}
@media (max-width:720px){
  .app[data-mode="browse"] .card-wave {
    width: min(116px, 96%);
    height: 11px;
    margin-top: 5px;
  }
  .app[data-mode="browse"] .card-wave::after {
    top: -2px;
    height: 15px;
  }
}
@media (prefers-reduced-motion: reduce){
  .app[data-mode="browse"] .card-wave-layer i {
    transform: none !important;
    transition: none !important;
  }
  .app[data-mode="browse"] .card-wave::after { box-shadow:none; }
}

/* --- card-wave-duration-lock-pass --- */
/* Keep the last sliver visible until the media element truly ends. */
.app[data-mode="browse"] .track-card[aria-current="true"] .card-wave-layer.is-future {
  opacity: .94;
}

/* --- card-wave-full-width-lock-v201 --- */
/* v201: bars and playback playhead share the exact same physical width. */
.app[data-mode="browse"] .card-wave-layer {
  width: 100%;
  justify-content: space-between;
  gap: 0 !important;
}
.app[data-mode="browse"] .card-wave-layer i {
  flex: 0 0 2px;
  width: 2px;
}
@media (max-width:720px){
  .app[data-mode="browse"] .card-wave-layer {
    gap: 0 !important;
  }
  .app[data-mode="browse"] .card-wave-layer i {
    flex-basis: 1.5px;
    width: 1.5px;
  }
}

/* --- subtle-track-spine-pass --- */
/* Inactive track spine stays quiet; armed track gets the category accent. */
.app[data-mode="browse"] .track-card::before {
  background: #d8dadd !important;
  box-shadow: none !important;
  opacity: .72 !important;
}

.app[data-mode="browse"] .track-card:hover::before {
  background: #c9ccd0 !important;
  box-shadow: none !important;
  opacity: .9 !important;
}

.app[data-mode="browse"] .track-card[aria-current="true"]::before {
  background: var(--track-accent) !important;
  opacity: 1 !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-accent) 16%, transparent),
    0 0 14px color-mix(in srgb, var(--track-accent) 20%, transparent) !important;
}

/* --- bookmark-save-icon-pass --- */
.app[data-mode="browse"] .card-save {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: rgba(17,18,22,.42);
}

.app[data-mode="browse"] .card-save-icon {
  width: 12px;
  height: 15px;
  overflow: visible;
}

.app[data-mode="browse"] .card-save-icon path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linejoin: round;
  transition: fill 150ms ease, stroke 150ms ease, transform 150ms ease;
  transform-origin: center;
}

.app[data-mode="browse"] .card-save:hover {
  color: rgba(17,18,22,.78);
}

.app[data-mode="browse"] .card-save:hover .card-save-icon path {
  transform: translateY(-.5px);
}

.app[data-mode="browse"] .card-save[aria-pressed="true"] {
  color: #111216 !important;
}

.app[data-mode="browse"] .card-save[aria-pressed="true"] .card-save-icon path {
  fill: currentColor;
  stroke: currentColor;
}

@media (max-width: 720px) {
  .app[data-mode="browse"] .card-save {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }
  .app[data-mode="browse"] .card-save-icon {
    width: 11px;
    height: 14px;
  }
}

/* --- darker-player-shadow-pass --- */
/* Stronger full-player contrast against bright orb backgrounds */
.app[data-mode="player"][data-recording="true"] .player-core {
  filter: drop-shadow(0 18px 48px rgba(0,0,0,.62));
}

.app[data-mode="player"][data-recording="true"] .recording-catalog,
.app[data-mode="player"][data-recording="true"] .recording-tempo > strong,
.app[data-mode="player"][data-recording="true"] .recording-tempo-meta,
.app[data-mode="player"][data-recording="true"] .player-title,
.app[data-mode="player"][data-recording="true"] .recording-credit,
.app[data-mode="player"][data-recording="true"] .player-controls,
.app[data-mode="player"][data-recording="true"] .wave-rail {
  filter:
    drop-shadow(0 4px 16px rgba(0,0,0,.96))
    drop-shadow(0 14px 34px rgba(0,0,0,.52));
}

.app[data-mode="player"][data-recording="true"] .player-title,
.app[data-mode="player"][data-recording="true"] .recording-tempo > strong,
.app[data-mode="player"][data-recording="true"] .recording-tempo-meta,
.app[data-mode="player"][data-recording="true"] .recording-credit {
  text-shadow:
    0 2px 10px rgba(0,0,0,.82),
    0 8px 24px rgba(0,0,0,.44);
}

.app[data-mode="player"][data-recording="true"] .player-core::after {
  content: "";
  position: absolute;
  left: -18px;
  top: -10px;
  width: min(72vw, 980px);
  height: min(32vh, 260px);
  background:
    radial-gradient(
      ellipse at 22% 26%,
      rgba(0,0,0,.42),
      rgba(0,0,0,.18) 34%,
      rgba(0,0,0,0) 72%
    );
  pointer-events: none;
  z-index: -1;
}

/* --- public-release-v1 --- */
/* Public release: playback, saving and metadata only. */
.manager,
.card-edit,
.inquire-button,
#addFilesButton,
#dropZone,
#importFiles,
#catalogImport {
  display: none !important;
}

#brandHold {
  cursor: default !important;
  user-select: none;
}

.app[data-mode="browse"] .card-save {
  right: 4px !important;
}

@media (max-width: 720px) {
  .app[data-mode="browse"] .card-save {
    right: 3px !important;
  }
}

/* --- public-player-pulltab-pass --- */
/* Browse player pull-tab: same existing swipe handle, now visibly discoverable. */
.app[data-mode="browse"] .player-console {
  overflow: visible;
}

.app[data-mode="browse"] .surface-handle {
  --pull-arrow-drag: 0px;
  position: absolute;
  z-index: 4;
  top: -22px;
  left: 50%;
  width: 62px;
  height: 23px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(17,18,22,.10);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: rgba(255,255,255,.96);
  color: rgba(17,18,22,.58);
  box-shadow: 0 -8px 22px rgba(20,20,26,.055);
  transform: translateX(-50%);
  transition:
    width 180ms cubic-bezier(.22,.8,.2,1),
    background 160ms ease,
    color 160ms ease,
    box-shadow 180ms ease;
}

.app[data-mode="browse"] .surface-handle .handle-line,
.app[data-mode="browse"] .surface-handle .handle-label {
  display: none;
}

.app[data-mode="browse"] .surface-handle .handle-chevron {
  grid-column: 1;
  justify-self: center;
  color: currentColor;
  font-size: 0;
  line-height: 1;
  transform: translateY(var(--pull-arrow-drag));
  animation: grimlife-pull-cue 2.35s cubic-bezier(.22,.8,.2,1) infinite;
  transition: color 160ms ease;
}

.app[data-mode="browse"] .surface-handle .handle-chevron::before {
  content: "↑";
  display: block;
  font-size: 13px;
  font-weight: 560;
  line-height: 1;
}

.app[data-mode="browse"] .surface-handle:hover {
  width: 66px;
  color: rgba(17,18,22,.78);
  box-shadow: 0 -10px 26px rgba(20,20,26,.08);
}

.app[data-mode="browse"] .surface-handle:active {
  width: 58px;
  color: #111216;
}

.app[data-mode="browse"][data-gesture="true"] .surface-handle {
  width: 66px;
  color: #111216;
  background: #fff;
}

.app[data-mode="browse"][data-gesture="true"] .surface-handle .handle-chevron {
  animation: none;
}

@keyframes grimlife-pull-cue {
  0%, 68%, 100% { transform: translateY(var(--pull-arrow-drag)); }
  76% { transform: translateY(calc(var(--pull-arrow-drag) - 3px)); }
  84% { transform: translateY(var(--pull-arrow-drag)); }
  91% { transform: translateY(calc(var(--pull-arrow-drag) - 1.5px)); }
}

/* Micro tactile visual response for browsers/devices without vibration support. */
.app[data-mode="browse"] .card-save,
.app[data-mode="browse"] .card-play,
.primary-tab,
.genre-tab,
.category-choice,
.round-button {
  -webkit-tap-highlight-color: transparent;
}

.app[data-mode="browse"] .card-save:active,
.app[data-mode="browse"] .card-play:active,
.primary-tab:active,
.genre-tab:active,
.round-button:active {
  scale: .94;
}

.category-choice:active {
  scale: .985;
}

@media (prefers-reduced-motion: reduce) {
  .app[data-mode="browse"] .surface-handle .handle-chevron {
    animation: none;
  }
}


/* ===== GRIMLIFE CLEAN AUDIO-REACTIVE WAVEFORM v2 =====
   No texture, no gradients, no glow blobs. Just white lines reacting to audio. */
.wave-rail {
  --wave-energy: 0;
  --wave-bass: 0;
  --wave-air: 0;
  --wave-hit: 0;
}

.app[data-mode="player"] .glWaveBar,
.app[data-mode="metadata"] .glWaveBar,
.app[data-recording="true"] .glWaveBar {
  transform: scaleY(var(--wave-local, 1));
  transform-origin: 50% 50%;
  border-radius: 1px;
  background: rgba(255,255,255,.18);
  opacity: var(--wave-alpha, 1);
  box-shadow: none;
  filter: none;
  transition: transform 48ms linear, background-color 48ms linear, opacity 48ms linear;
  will-change: transform, background-color, opacity;
}

.app[data-mode="player"] .wave-past .glWaveBar,
.app[data-mode="metadata"] .wave-past .glWaveBar,
.app[data-recording="true"] .wave-past .glWaveBar {
  background: rgba(255,255,255,.72);
}

.app[data-mode="player"] .wave-future .glWaveBar,
.app[data-mode="metadata"] .wave-future .glWaveBar,
.app[data-recording="true"] .wave-future .glWaveBar {
  background: rgba(255,255,255,.16);
}

/* No whole-wave bounce. Only the current neighborhood behaves like an equalizer. */
.app[data-mode="player"] .wave-track,
.app[data-mode="metadata"] .wave-track,
.app[data-recording="true"] .wave-track,
.app[data-mode="player"] .wave-past,
.app[data-mode="metadata"] .wave-past,
.app[data-recording="true"] .wave-past {
  transform: none;
  filter: none;
}

/* Remove the previous luminous cloud around the playhead. */
.app[data-mode="player"] .wave-rail::after,
.app[data-mode="metadata"] .wave-rail::after,
.app[data-recording="true"] .wave-rail::after {
  display: none;
  content: none;
}

/* Thin, clean white playhead. */
.app[data-mode="player"] .wave-center,
.app[data-mode="metadata"] .wave-center,
.app[data-recording="true"] .wave-center {
  width: 1px;
  opacity: calc(.62 + var(--wave-hit) * .26);
  background: rgba(255,255,255,.92);
  box-shadow: none;
  transition: opacity 48ms linear;
}

.app[data-recording="true"] .wave-rail {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .app .glWaveBar,
  .app .wave-center {
    transition: none !important;
  }
}

/* --- grimlife-share-beat-v1 --- */
/* Native share: small utility controls, intentionally quieter than Save/Play. */
.app[data-mode="browse"] .card-share {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 5px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(17,18,22,.42);
  cursor: pointer;
}
.app[data-mode="browse"] .card-save { right: 38px !important; }
.app[data-mode="browse"] .card-share svg {
  width: 15px;
  height: 15px;
  overflow: visible;
}
.app[data-mode="browse"] .card-share path,
.app[data-mode="browse"] .card-share polyline,
.app[data-mode="browse"] .card-share line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app[data-mode="browse"] .card-share:hover { color: rgba(17,18,22,.82); }
.app[data-mode="browse"] .card-share:active { transform: translateY(1px); }

.meta-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-share {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244,241,233,.12);
  border-radius: 50%;
  background: transparent;
  color: rgba(244,241,233,.52);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.player-share:hover {
  color: rgba(244,241,233,.92);
  border-color: rgba(244,241,233,.28);
  background: rgba(244,241,233,.035);
}
.player-share svg { width: 14px; height: 14px; overflow: visible; }
.player-share path,
.player-share polyline,
.player-share line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-share:disabled { opacity: .26; cursor: default; }
.app[data-recording="true"] .player-share { display: none; }

.expanded-share-button {
  width: 100%;
  min-height: 44px;
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(244,241,233,.12);
  border-radius: 10px;
  background: rgba(244,241,233,.025);
  color: rgba(244,241,233,.78);
  font: inherit;
  cursor: pointer;
}
.expanded-share-button:hover {
  border-color: rgba(244,241,233,.24);
  background: rgba(244,241,233,.045);
  color: rgba(244,241,233,.96);
}
.expanded-share-button span:last-child { color: rgba(244,241,233,.38); }
.expanded-share-button:disabled { opacity: .30; cursor: default; }

@media (max-width:720px) {
  .app[data-mode="browse"] .card-share {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    right: 4px;
  }
  .app[data-mode="browse"] .card-save { right: 34px !important; }
  .app[data-mode="browse"] .card-share svg { width: 14px; height: 14px; }
}

/* --- grimlife-clean-card-wave-v2 --- */
.app[data-mode="browse"] .card-wave-layer i {
  background: rgba(255,255,255,.20) !important;
  box-shadow: none !important;
  border-radius: 1px !important;
}
.app[data-mode="browse"] .card-wave-layer.is-played i {
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}
.app[data-mode="browse"] .card-wave::after {
  background: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}

/* --- public-interaction-repair-v4 --- */
/* Contain viewport gestures; the catalog and open editor retain deliberate scrolling. */
html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
.app { touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
.app[data-recording="true"] { touch-action: none; }
.library-scroll, .manager-body, .expanded-meta { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.genre-rail { touch-action: pan-x; }
input, textarea, select { -webkit-user-select: text; user-select: text; touch-action: auto; }
/* Only the one actively audible track receives a colored play control. */
.app[data-mode="browse"] .track-card .card-play,
.app[data-mode="browse"] .track-card:hover .card-play,
.app[data-mode="browse"] .track-card[aria-current="true"] .card-play {
  border-color: rgba(17,18,22,.15); background: #fff; color: #111216;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(17,18,22,.04);
  animation: none;
}
.app[data-mode="browse"][data-playback="playing"] .track-card[aria-current="true"] .card-play {
  border-color: var(--track-accent); background: var(--track-accent); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--track-accent) 10%, transparent), 0 5px 14px color-mix(in srgb, var(--track-accent) 22%, transparent);
  animation: grimlifeTrackHeartbeat 1.35s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .app[data-mode="browse"][data-playback="playing"] .track-card[aria-current="true"] .card-play { animation: none; }
}

/* --- recording-opening-style --- */
#recordingCountdown { position: fixed; z-index: 200; inset: 0; background: #020302; display: grid; place-content: center; justify-items: center; gap: 28px; }
#recordingCountdown[hidden] { display: none; }
#recordingCount { font-size: clamp(70px,18vw,130px); font-weight: 220; color: #f4f1e9; font-variant-numeric: tabular-nums; }
#recordingCancel { background: transparent; border: 1px solid #333; padding: 10px 24px; border-radius: 24px; color: #aaa; }
.app[data-opening] .toast, .app[data-opening] #toast { visibility: hidden !important; }
.app[data-opening="opening"] #glPlayerMeta { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.app[data-opening="opening"] #playerCore::after { opacity: var(--opening-copy,0); }
.app[data-opening="opening"] #glWaveRail { clip-path: inset(0 calc((1 - var(--opening-wave,0))*50%) 0 calc((1 - var(--opening-wave,0))*50%)); transform: translateY(calc((1 - var(--opening-wave,0))*6px)); }
.app[data-opening="opening"] .title-transport,
.app[data-opening="opening"] .recording-catalog,
.app[data-opening="opening"] .quick-meta { clip-path: inset(0 0 calc((1 - var(--opening-copy,0))*100%) 0); transform: translateY(calc((1 - var(--opening-copy,0))*10px)); }
.app[data-opening="opening"] .surface-handle,
.app[data-opening="opening"] .meta-rule,
.app[data-opening="opening"] .meta-top,
.app[data-opening="opening"] .player-controls { visibility: hidden !important; }

.primary-tab[data-nav="player"] { touch-action: none; -webkit-touch-callout: none; }

.recording-tools { display: none; }
.app[data-recording="true"] .recording-tools { position: absolute; top: 100%; right: 0; margin-top: 8px; display: flex; align-items: center; gap: 12px; max-width: 100%; }
#recordingStartButton { min-height: 36px; flex-shrink: 0; padding: 0 14px; border: 1px solid #ffffff38; border-radius: 20px; color: #f4f1e9; background: #111d; font-size: 11px; cursor: pointer; }
#recordingStartButton:disabled { opacity: .4; }
#recordingSetupStatus { font-size: 11px; line-height: 1.4; color: #f4f1e9; }
.app[data-opening] .recording-tools { visibility: hidden; pointer-events: none; }
.app[data-recording="true"] #glPlayerTitle::before,
.app[data-recording="true"] #glPlayerTitle::after { content: none !important; display: none !important; }
.app[data-recording="true"] #glPlayerTitle { cursor: default; }

.app[data-recording="true"] .player-controls { position: relative; }

/* --- recording-unfold-merge-style --- */
/* Recording merge: normal player is untouched; in Recording Mode the old fullscreen
   player console is replaced by the waveform -> data -> scanner object. */
.app[data-recording="true"][data-record-stage="capture"] #glPlayerMeta{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#recordingPrivateSetup{
  --setup-edge:rgba(118,77,255,.18);
  position:absolute;
  z-index:120;
  left:50%;
  top:auto;
  bottom:max(12px,var(--safe-bottom));
  width:min(620px,calc(100% - 24px));
  max-height:min(46vh,430px);
  overflow:auto;
  transform:translateX(-50%);
  display:none;
  padding:18px;
  border:1px solid var(--setup-edge);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(9,9,12,.54),rgba(3,3,5,.42));
  -webkit-backdrop-filter:blur(24px) saturate(138%);
  backdrop-filter:blur(24px) saturate(138%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 90px rgba(0,0,0,.34);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
.app[data-recording="true"][data-record-stage="setup"] #recordingPrivateSetup{display:block}
#recordingPrivateSetup .rs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
#recordingPrivateSetup .rs-eyebrow{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px}
#recordingPrivateSetup .rs-title{font-size:20px;line-height:1;font-weight:650;letter-spacing:-.03em}
#recordingPrivateSetup .rs-code{height:27px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--setup-edge);border-radius:999px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:7px;font-weight:700;color:rgba(255,255,255,.7)}
#recordingPrivateSetup .rs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#recordingPrivateSetup .rs-row{display:grid;grid-template-columns:84px minmax(0,1fr) 28px;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--setup-edge);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));box-shadow:inset 0 1px 0 rgba(255,255,255,.045);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#recordingPrivateSetup .rs-row label{font-size:9px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,.72)}
#recordingPrivateSetup .rs-row output{font-size:10px;font-weight:800;text-align:right;color:#fff;font-variant-numeric:tabular-nums}
#recordingPrivateSetup input[type="range"]{width:100%;accent-color:#fff}
#recordingPrivateSetup .rs-palette-label{margin:16px 0 7px;font-size:7px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.38)}
#recordingPrivateSetup .rs-palettes{display:flex;gap:7px;flex-wrap:wrap}
#recordingPrivateSetup .rs-palette{min-height:34px;padding:0 12px;border:1px solid var(--setup-edge);border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:rgba(255,255,255,.54);font:700 8px Arial;text-transform:uppercase}
#recordingPrivateSetup .rs-palette[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.095);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.12)}
#recordingPrivateSetup .rs-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--setup-edge)}
#recordingSetupStatus{font-size:10px;line-height:1.35;color:rgba(255,255,255,.55)}
#recordingStartButton{min-height:40px;flex-shrink:0;padding:0 16px;border:1px solid var(--setup-edge);border-radius:999px;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:700 9px Arial;text-transform:uppercase;cursor:pointer}
#recordingStartButton:disabled{opacity:.38}

#grimRecordingLayer{
  position:absolute;
  z-index:75;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:max(8px,var(--safe-top)) 8px max(8px,var(--safe-bottom));
  pointer-events:none;
}
.app[data-recording="true"][data-record-stage="capture"] #grimRecordingLayer{display:flex}
#grim-simple-unfold{
  --edge:rgba(118,77,255,.14);
  --edge-strong:rgba(118,77,255,.24);
  width:min(736px,100%);
  max-height:100%;
  margin:0 auto;
  padding:8px;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  opacity:0;
  transform:translateY(8px) scale(.992);
  transition:opacity .28s ease,transform .4s cubic-bezier(.2,.8,.2,1);
}
#grim-simple-unfold.is-visible{opacity:1;transform:none}
#grim-simple-unfold *{box-sizing:border-box}
#grim-simple-unfold .screen{position:relative;isolation:isolate;overflow:visible;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
#grim-simple-unfold .screen::before{content:'';position:absolute;z-index:-1;inset:-28px -20px -34px;pointer-events:none;border:0;border-radius:42px;background:rgba(2,2,5,.27);box-shadow:0 34px 120px rgba(0,0,0,.30),0 0 84px rgba(0,0,0,.16);-webkit-backdrop-filter:blur(23px) saturate(120%);backdrop-filter:blur(23px) saturate(120%);-webkit-mask-image:radial-gradient(ellipse 78% 76% at 50% 47%,#000 0%,#000 55%,rgba(0,0,0,.92) 71%,rgba(0,0,0,.46) 87%,transparent 100%);mask-image:radial-gradient(ellipse 78% 76% at 50% 47%,#000 0%,#000 55%,rgba(0,0,0,.92) 71%,rgba(0,0,0,.46) 87%,transparent 100%);opacity:0;transform:translate3d(0,0,0) scale(.18,.055);transform-origin:50% 46%;transition:opacity .38s ease,transform .86s cubic-bezier(.18,.88,.2,1);will-change:transform,opacity;backface-visibility:hidden}
#grim-simple-unfold.screen-in .screen::before{opacity:1;transform:translate3d(0,0,0) scale(1)}
#grim-simple-unfold .stage{padding:18px 18px 0}
#grim-simple-unfold .upper{overflow:hidden;max-height:0;opacity:0;transition:max-height .56s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
#grim-simple-unfold.interface-in .upper{max-height:230px;opacity:1}
#grim-simple-unfold .top,#grim-simple-unfold h1,#grim-simple-unfold .prod{opacity:0;transform:translate3d(0,13px,0) scale(.955);transform-origin:50% 100%;transition:opacity .22s ease,transform .52s cubic-bezier(.16,1.18,.28,1);will-change:transform,opacity;backface-visibility:hidden}
#grim-simple-unfold.interface-in .top{opacity:1;transform:none;transition-delay:.02s}
#grim-simple-unfold.interface-in h1{opacity:1;transform:none;transition-delay:.045s}
#grim-simple-unfold.interface-in .prod{opacity:1;transform:none;transition-delay:.085s}
#grim-simple-unfold .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}
#grim-simple-unfold .pill{height:30px;padding:0 12px;display:inline-flex;align-items:center;border:0;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:0 8px 28px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:8px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:rgba(255,255,255,.68)}
#grim-simple-unfold h1{margin:0 0 15px;font-size:clamp(38px,7vw,58px);line-height:.92;font-weight:590;letter-spacing:-.03em;text-transform:uppercase;color:#fff}
#grim-simple-unfold .prod{padding-bottom:16px}
#grim-simple-unfold .prod-label{font-size:8px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:7px}
#grim-simple-unfold .prod-names{display:flex;flex-wrap:wrap;gap:7px}
#grim-simple-unfold .prod-names span{min-height:34px;display:inline-flex;align-items:center;padding:0 13px;border:0;border-radius:999px;background:rgba(255,255,255,.065);box-shadow:0 8px 28px rgba(0,0,0,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:10.5px;font-weight:780;letter-spacing:-.008em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.97)}
#grim-simple-unfold .wave-shell{--gss-progress:0%;height:58px;position:relative;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;transform:scaleY(.84);transition:opacity .22s ease,transform .78s cubic-bezier(.18,.9,.2,1)}
#grim-simple-unfold.wave-in .wave-shell{opacity:1;transform:scaleY(1)}
#grim-simple-unfold .gss-wave-viewport,#grim-simple-unfold .gss-wave-track,#grim-simple-unfold .gss-wave-past,#grim-simple-unfold .gss-wave-future,#grim-simple-unfold .gss-wave-bars{position:absolute;inset:0}
#grim-simple-unfold .gss-wave-viewport{inset:6px 11px;clip-path:inset(0 50% 0 50%);opacity:.16;transform:translate3d(0,0,0) scaleY(.72);transform-origin:50% 50%;transition:clip-path .92s cubic-bezier(.18,.86,.2,1),opacity .26s ease,transform .88s cubic-bezier(.18,.86,.2,1);will-change:clip-path,transform,opacity;backface-visibility:hidden}
#grim-simple-unfold.wave-in .gss-wave-viewport{clip-path:inset(-34px -44px -34px -44px);opacity:1;transform:translate3d(0,0,0) scaleY(1)}
#grim-simple-unfold .gss-wave-past,#grim-simple-unfold .gss-wave-future{overflow:visible}
#grim-simple-unfold .gss-wave-past{clip-path:inset(-34px calc(100% - var(--gss-progress)) -34px -44px)}
#grim-simple-unfold .gss-wave-future{clip-path:inset(-34px -44px -34px var(--gss-progress))}
#grim-simple-unfold .gss-wave-bars{display:flex;align-items:center;gap:1px}
#grim-simple-unfold .gss-wave-bar{flex:1 1 0;min-width:1px;min-height:3px;border-radius:1px;background:rgba(255,255,255,.16);transform:scaleY(var(--wave-local,1));transform-origin:50% 50%;opacity:var(--wave-alpha,1);transition:none;will-change:transform,opacity}
#grim-simple-unfold .gss-wave-past .gss-wave-bar{
  background:rgba(255,255,255,.985);
  box-shadow:
    0 0 5px rgba(255,255,255,.96),
    0 0 14px rgba(255,255,255,.62),
    0 0 32px rgba(255,255,255,.29),
    0 0 58px rgba(255,255,255,.12);
  filter:brightness(1.08);
}
#grim-simple-unfold .gss-wave-future .gss-wave-bar{background:rgba(255,255,255,.13);box-shadow:none;filter:none;opacity:.72}
#grim-simple-unfold .gss-wave-center{position:absolute;z-index:3;left:var(--gss-progress);top:3px;bottom:3px;width:1px;background:rgba(255,255,255,.98);box-shadow:0 0 7px rgba(255,255,255,.78),0 0 18px rgba(255,255,255,.28);transform:translateX(-.5px);opacity:0;transition:opacity .34s ease .68s}#grim-simple-unfold.wave-in .gss-wave-center{opacity:.92}
#grim-simple-unfold .gss-wave-time,#grim-simple-unfold .gss-wave-duration{position:absolute;z-index:4;bottom:0;color:rgba(255,255,255,.38);font-size:8px;font-variant-numeric:tabular-nums;letter-spacing:.07em;pointer-events:none;opacity:0;transition:opacity .34s ease .72s}#grim-simple-unfold.wave-in .gss-wave-time,#grim-simple-unfold.wave-in .gss-wave-duration{opacity:1}
#grim-simple-unfold .gss-wave-time{left:0}#grim-simple-unfold .gss-wave-duration{right:0;text-align:right}
#grim-simple-unfold .meta-clip{overflow:hidden}
#grim-simple-unfold .meta-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding-top:0;max-height:0;opacity:0;transition:max-height .58s cubic-bezier(.2,.8,.2,1),padding-top .58s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
#grim-simple-unfold.meta-in .meta-row{max-height:90px;padding-top:10px;opacity:1}
#grim-simple-unfold .meta{opacity:0;transform:translate3d(0,10px,0) scale(.92);transform-origin:50% 50%;transition:opacity .2s ease,transform .46s cubic-bezier(.14,1.18,.3,1);will-change:transform,opacity;backface-visibility:hidden}
#grim-simple-unfold.meta-in .meta{opacity:1;transform:none}
#grim-simple-unfold.meta-in .meta:nth-child(1){transition-delay:.02s}
#grim-simple-unfold.meta-in .meta:nth-child(2){transition-delay:.045s}
#grim-simple-unfold.meta-in .meta:nth-child(3){transition-delay:.07s}
#grim-simple-unfold.meta-in .meta:nth-child(4){transition-delay:.095s}
#grim-simple-unfold.meta-in .meta:nth-child(5){transition-delay:.12s}
#grim-simple-unfold .meta{min-height:46px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:6px 13px 7px;border:1px solid var(--edge-strong);border-radius:999px;background:rgba(255,255,255,.072);box-shadow:0 10px 30px rgba(0,0,0,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);white-space:nowrap;overflow:hidden}
#grim-simple-unfold .mk{font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1}
#grim-simple-unfold .mv{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;font-weight:800;line-height:1.05;text-transform:uppercase;color:rgba(255,255,255,.99)}
#grim-simple-unfold .scan-wrap{overflow:hidden;max-height:0;opacity:0;transition:max-height .55s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
#grim-simple-unfold.scan-open .scan-wrap{max-height:430px;opacity:1}
#grim-simple-unfold .scanner{margin:18px 18px 18px;padding:12px 4px 8px;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#grim-simple-unfold .scan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#grim-simple-unfold .scan-label{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:720;text-transform:uppercase;color:rgba(255,255,255,.92)}
#grim-simple-unfold .spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.34);border-bottom-color:rgba(255,255,255,.10);animation:none;opacity:.72}#grim-simple-unfold.scanning .spinner{border-color:#fff;border-bottom-color:rgba(255,255,255,.18);animation:gss-spin .52s linear infinite;opacity:1}
#grim-simple-unfold .spinner.done{animation:none;border-color:#61ff95;background:#61ff95;box-shadow:0 0 8px rgba(97,255,149,1),0 0 22px rgba(97,255,149,.55)}
@keyframes gss-spin{to{transform:rotate(360deg)}}
#grim-simple-unfold .status.complete{display:inline-block;color:#61ff95;text-shadow:0 0 8px rgba(97,255,149,.9),0 0 22px rgba(97,255,149,.35);animation:gss-pop .34s cubic-bezier(.16,.88,.26,1)}
@keyframes gss-pop{0%{transform:scale(1)}38%{transform:scale(1.18)}72%{transform:scale(1.06)}100%{transform:scale(1)}}
#grim-simple-unfold .pct{font-size:13px;font-weight:720}.pct.done{color:#61ff95}
#grim-simple-unfold .progress{height:7px;overflow:visible;margin:0 1px 24px;border-radius:999px;border:0;background:rgba(255,255,255,.035);box-shadow:0 6px 24px rgba(0,0,0,.24),0 0 20px rgba(255,255,255,.018)}
#grim-simple-unfold .fill{width:0;height:100%;background:#fff;border-radius:999px;box-shadow:0 0 10px rgba(255,255,255,.9),0 0 26px rgba(255,255,255,.38),0 0 52px rgba(255,255,255,.14);filter:blur(.12px);transition:none}
#grim-simple-unfold .rows{display:grid;gap:16px}
#grim-simple-unfold .row{display:grid;grid-template-columns:106px minmax(0,1fr) 48px;align-items:center;gap:12px}
#grim-simple-unfold .name{font-size:12.5px;font-weight:790;letter-spacing:.005em;text-transform:uppercase;color:rgba(255,255,255,.40);transition:color .22s ease,text-shadow .22s ease}#grim-simple-unfold .row.live .name{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.18)}
#grim-simple-unfold .rail{height:32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:center}
#grim-simple-unfold .seg{position:relative;height:18px;border-radius:4px;background:rgba(255,255,255,.026);border:0;box-shadow:0 7px 22px rgba(0,0,0,.16),0 0 18px rgba(255,255,255,.018);filter:blur(.28px);opacity:.72}
#grim-simple-unfold .seg.on{
  opacity:1;
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--c) 65%,rgba(255,255,255,.38)),
    color-mix(in srgb,var(--c) 88%,rgba(0,0,0,.08))
  );
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 0 9px var(--g1),
    0 0 22px var(--g2),
    0 0 44px var(--g3),
    0 0 78px var(--g4),
    inset 0 1px 0 rgba(255,255,255,.30);
  filter:saturate(1.34);
}
#grim-simple-unfold .seg.on:before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:12px;
  background:var(--c);
  filter:blur(10px);
  opacity:.35;
  z-index:-1;
}
#grim-simple-unfold .seg.on:after{
  content:'';
  position:absolute;
  left:16%;
  right:16%;
  top:2px;
  height:44%;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.64),
    rgba(255,255,255,.11),
    transparent
  );
  filter:blur(1px);
  opacity:.85;
}
#grim-simple-unfold .tier{justify-self:end;font-size:9.5px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,.24)}
#grim-simple-unfold .tier.on{color:var(--tier);text-shadow:0 0 7px var(--tier),0 0 17px color-mix(in srgb,var(--tier) 76%,transparent),0 0 38px color-mix(in srgb,var(--tier) 34%,transparent)}
@media(max-width:560px){
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold{
    width:100%;
    padding:0;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen{
    transform:scale(.78);
    transform-origin:50% 50%;
    will-change:transform;
  }
  #recordingPrivateSetup{padding:14px;border-radius:20px;max-height:47vh;bottom:max(8px,var(--safe-bottom))}
  #recordingPrivateSetup .rs-grid{grid-template-columns:1fr}
  #recordingPrivateSetup .rs-row{grid-template-columns:78px minmax(0,1fr) 24px;padding:8px 9px}
  #grim-simple-unfold .screen{border-radius:23px}
  #grim-simple-unfold .stage{padding:15px 12px 0}
  #grim-simple-unfold h1{font-size:clamp(34px,10.8vw,46px);margin-bottom:13px}
  #grim-simple-unfold .pill{height:29px;padding:0 11px;font-size:8px}
  #grim-simple-unfold .prod-label{font-size:8px}
  #grim-simple-unfold .prod-names{gap:6px}#grim-simple-unfold .prod-names span{min-height:32px;padding:0 11px;font-size:10px}
  #grim-simple-unfold .wave-shell{height:54px;border-radius:0}
  #grim-simple-unfold .meta-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #grim-simple-unfold .meta{min-height:44px;padding:6px 12px 7px}
  #grim-simple-unfold .mk{font-size:7.5px}
  #grim-simple-unfold .mv{font-size:11px}
  #grim-simple-unfold .scanner{margin:16px 12px;padding:12px 4px 8px;border-radius:0}
  #grim-simple-unfold .scan-label{font-size:10.5px}
  #grim-simple-unfold .pct{font-size:12.5px}
  #grim-simple-unfold .row{grid-template-columns:86px minmax(0,1fr) 43px;gap:8px}
  #grim-simple-unfold .name{font-size:10.5px}
  #grim-simple-unfold .tier{font-size:9px}
  #grim-simple-unfold .rail{gap:3px}
  #grim-simple-unfold .seg{height:17px}
}
@media(max-height:720px){
  #grim-simple-unfold{transform-origin:center center;scale:.9}
  #grim-simple-unfold.is-visible{transform:none;scale:.9}
}

/* --- metadata-premium-v1 --- */
/* Metadata is an inspection surface: smoked glass over a living orb. */
.meta-producer-hero{display:none}

.app[data-mode="metadata"] .ambient-stage{
  opacity:.58;
  transform:translateY(-3.2dvh) scale(.95);
  transform-origin:50% 42%;
  filter:blur(1.8px) saturate(.92) brightness(.9);
}
.app[data-mode="metadata"] .orb-hit-zone{
  transform:translateY(-1.2dvh) scale(.96);
}

.app[data-mode="metadata"] .player-console{
  top:clamp(255px,36dvh,calc(100dvh - 505px));
  width:min(860px,calc(100% - 24px));
  padding:10px 18px 18px;
  border:0;
  border-radius:27px;
  background:rgba(7,8,10,.46);
  box-shadow:0 34px 120px rgba(0,0,0,.52);
  -webkit-backdrop-filter:blur(34px) saturate(138%);
  backdrop-filter:blur(34px) saturate(138%);
  overflow:hidden;
}
.app[data-mode="metadata"] .player-console::after{display:none;content:none}
.app[data-mode="metadata"] .surface-handle{height:18px}
.app[data-mode="metadata"] .handle-line{width:42px;height:3px;background:rgba(255,255,255,.31);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.app[data-mode="metadata"] .handle-label{display:none}
.app[data-mode="metadata"] .meta-rule{display:none}

.app[data-mode="metadata"] .wave-rail{
  height:72px;
  margin:4px 0 14px;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
  -webkit-mask-image:none;
  mask-image:none;
}
.app[data-mode="metadata"] .wave-viewport{inset:9px 12px 8px}
.app[data-mode="metadata"] .wave-time,
.app[data-mode="metadata"] .wave-duration{
  bottom:-1px;
  padding:2px 5px;
  border:0;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.38);
}
.app[data-mode="metadata"] .wave-past .glWaveBar{background:rgba(255,255,255,.78)}
.app[data-mode="metadata"] .wave-future .glWaveBar{background:rgba(255,255,255,.17)}
.app[data-mode="metadata"] .wave-center{top:5px;bottom:5px;background:rgba(255,255,255,.72)}

.app[data-mode="metadata"] .meta-top{
  min-height:30px;
  margin-bottom:2px;
}
.app[data-mode="metadata"] .beat-number{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.46);
  letter-spacing:.13em;
}
.app[data-mode="metadata"] .player-share{
  width:32px;
  height:32px;
  border:0;
  background:rgba(255,255,255,.065);
  color:rgba(255,255,255,.62);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.app[data-mode="metadata"] .title-transport{
  min-height:70px;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
}
.app[data-mode="metadata"] .player-title{
  overflow:visible;
  color:#fff;
  font-size:clamp(34px,5vw,56px);
  font-weight:560;
  letter-spacing:-.055em;
  line-height:.94;
  text-transform:none;
  text-overflow:clip;
  white-space:nowrap;
}
.app[data-mode="metadata"] .player-title::after{
  margin-left:10px;
  color:rgba(255,255,255,.26);
  font-size:.26em;
  vertical-align:.8em;
}
.app[data-mode="metadata"] .player-controls{gap:6px;opacity:.76}
.app[data-mode="metadata"] .round-button{
  width:34px;
  height:34px;
  border:0;
  background:rgba(255,255,255,.065);
  color:rgba(255,255,255,.62);
}
.app[data-mode="metadata"] .round-button.main{
  width:46px;
  height:46px;
  border:0;
  background:rgba(255,255,255,.92);
  color:#090a0c;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.app[data-mode="metadata"] .meta-producer-hero{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  margin:0 0 11px;
  color:rgba(255,255,255,.32);
  font-size:7px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.app[data-mode="metadata"] .meta-producer-hero b{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  max-width:min(78%,520px);
  overflow:hidden;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  color:rgba(255,255,255,.88);
  font-size:9px;
  font-weight:720;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.app[data-mode="metadata"] .quick-meta{display:none}

.app[data-mode="metadata"] .expanded-meta{
  max-height:280px;
  opacity:1;
  transform:none;
}
.app[data-mode="metadata"] .expanded-inner{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.app[data-mode="metadata"] .sheet-heading{display:none}
.app[data-mode="metadata"] .detail-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.app[data-mode="metadata"] .detail-grid + .detail-grid{margin-top:8px}
.app[data-mode="metadata"] .detail-row{
  min-width:0;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.app[data-mode="metadata"] .detail-grid-primary .detail-row{flex:1 1 138px}
.app[data-mode="metadata"] .detail-grid-secondary .detail-row{
  min-height:34px;
  background:rgba(255,255,255,.045);
}
.app[data-mode="metadata"] .detail-row label{
  margin:0;
  flex:0 0 auto;
  color:rgba(255,255,255,.27);
  font-size:6px;
  font-weight:700;
  letter-spacing:.11em;
}
.app[data-mode="metadata"] .detail-row b{
  min-width:0;
  color:rgba(255,255,255,.88);
  font-size:9px;
  font-weight:700;
  letter-spacing:.025em;
  text-overflow:ellipsis;
}
.app[data-mode="metadata"] .detail-status b::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:6px;
  border-radius:50%;
  background:#61ff95;
  box-shadow:0 0 8px rgba(97,255,149,.7);
  vertical-align:1px;
}
.app[data-mode="metadata"] .expanded-share-button{display:none}
.app[data-mode="metadata"] .inquire-button{
  min-height:42px;
  margin-top:12px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}

@media(max-width:720px){
  .app[data-mode="metadata"] .ambient-stage{opacity:.54;transform:translateY(-3.5dvh) scale(.98)}
  .app[data-mode="metadata"] .player-console{
    top:auto;
    bottom:calc(var(--safe-bottom) + 8px);
    width:calc(100% - 12px);
    padding:9px 11px 12px;
    border-radius:23px;
    background:rgba(7,8,10,.48);
    -webkit-backdrop-filter:blur(30px) saturate(138%);
    backdrop-filter:blur(30px) saturate(138%);
  }
  .app[data-mode="metadata"] .wave-rail{height:62px;margin-bottom:11px;border-radius:16px}
  .app[data-mode="metadata"] .wave-viewport{inset:8px 9px 7px}
  .app[data-mode="metadata"] .title-transport{min-height:60px;gap:9px}
  .app[data-mode="metadata"] .player-title{font-size:clamp(30px,9.3vw,42px)}
  .app[data-mode="metadata"] .player-controls{gap:4px}
  .app[data-mode="metadata"] .round-button{width:31px;height:31px}
  .app[data-mode="metadata"] .round-button.main{width:41px;height:41px}
  .app[data-mode="metadata"] .meta-producer-hero{margin-bottom:9px}
  .app[data-mode="metadata"] .meta-producer-hero b{max-width:72%;font-size:8px}
  .app[data-mode="metadata"] .expanded-meta{max-height:235px}
  .app[data-mode="metadata"] .detail-grid{gap:6px}
  .app[data-mode="metadata"] .detail-grid + .detail-grid{margin-top:6px}
  .app[data-mode="metadata"] .detail-row{min-height:34px;padding:0 10px;gap:6px}
  .app[data-mode="metadata"] .detail-grid-primary .detail-row{flex:1 1 calc(50% - 3px)}
  .app[data-mode="metadata"] .detail-grid-secondary .detail-row{flex:1 1 calc(50% - 3px)}
  .app[data-mode="metadata"] .detail-row label{font-size:5.5px}
  .app[data-mode="metadata"] .detail-row b{font-size:8px}
}

/* --- recording-mobile-final-t-layout --- */
/* Final mobile recording composition: wide identity head + compact centered metadata + narrower scan readout. */
@media (max-width:560px){
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen{
    transform:scale(.78);
    transform-origin:50% 50%;
    will-change:transform;
  }

  /* One continuous feathered smoked field: keep the top-half shape and simply extend it down. */
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen::before{
    top:-22px;
    bottom:-28px;
    left:-2.25%;
    right:-2.25%;
    height:auto;
    inset-inline:-2.25%;
    border-radius:48px;
    background:linear-gradient(
      180deg,
      rgba(2,2,6,.20) 0%,
      rgba(2,2,6,.27) 17%,
      rgba(2,2,6,.31) 43%,
      rgba(2,2,6,.29) 73%,
      rgba(2,2,6,.20) 100%
    );
    box-shadow:0 30px 98px rgba(0,0,0,.27),0 0 74px rgba(0,0,0,.13);
    -webkit-backdrop-filter:blur(16px) saturate(108%) brightness(.78);
    backdrop-filter:blur(16px) saturate(108%) brightness(.78);
    -webkit-mask-image:radial-gradient(ellipse 102% 100% at 50% 50%,#000 0%,#000 47%,rgba(0,0,0,.90) 70%,rgba(0,0,0,.46) 88%,transparent 100%);
    mask-image:radial-gradient(ellipse 102% 100% at 50% 50%,#000 0%,#000 47%,rgba(0,0,0,.90) 70%,rgba(0,0,0,.46) 88%,transparent 100%);
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen::after{
    content:none;
    display:none;
  }

  /* Keep the top broad. */
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .stage{
    width:100%;
    padding:15px 10px 0;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .wave-shell{
    width:94%;
    height:52px;
    margin-inline:auto;
  }

  /* Match the laptop metadata language: five small equal pills in one clean row. */
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .meta-clip{
    overflow:visible;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .meta-row{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:96%;
    max-width:none;
    margin:0 auto;
    gap:5px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold.interface-in .meta-row{
    max-height:58px;
    padding-top:9px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .meta{
    width:auto;
    min-width:0;
    min-height:37px;
    padding:5px 5px 6px;
    gap:2px;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:999px;
    background:rgba(255,255,255,.065);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .mk{
    font-size:6.2px;
    line-height:1;
    text-align:center;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .mv{
    font-size:9.6px;
    line-height:1;
    text-align:center;
  }

  /* Give the stat rails laptop-like horizontal room without changing the overall mobile scale. */
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .scan-wrap{
    width:96%;
    margin:0 auto;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .scanner{
    width:100%;
    margin:14px auto 16px;
    padding:10px 0 7px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .scan-top{
    width:93%;
    margin:0 auto 10px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .progress{
    width:93%;
    margin:0 auto 13px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .rows{
    gap:14px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .row{
    grid-template-columns:70px minmax(0,1fr) 34px;
    gap:6px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .rail{
    gap:3px;
  }
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .seg{
    height:16px;
  }
}

/* --- metadata-scanner-shared-surface-v1 --- */
/* Metadata = the finished scanner object, revealed quickly from the regular player. */
.app[data-mode="metadata"]:not([data-recording="true"]) #grimRecordingLayer{
  display:flex;
  z-index:8;
  align-items:center;
  justify-content:center;
  padding:max(10px,var(--safe-top)) 8px max(96px,calc(var(--safe-bottom) + 86px));
}
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold{
  width:min(736px,100%);
}
/* Metadata should feel immediate, not like the 9–10 second Recording ad. */
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold{
  transition:opacity .16s ease,transform .26s cubic-bezier(.2,.8,.2,1);
}
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .screen::before{
  transition:opacity .18s ease,transform .34s cubic-bezier(.18,.88,.2,1);
}
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .top,
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold h1,
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .prod,
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .meta{
  transition-duration:.26s;
  transition-delay:0s;
}
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .gss-wave-viewport{
  transition:clip-path .34s cubic-bezier(.18,.86,.2,1),opacity .16s ease,transform .32s cubic-bezier(.18,.86,.2,1);
}

/* Kill the old expanded metadata sheet; the scanner is now the metadata sheet. */
.app[data-mode="metadata"]:not([data-recording="true"]) .expanded-meta,
.app[data-mode="metadata"]:not([data-recording="true"]) .meta-producer-hero,
.app[data-mode="metadata"]:not([data-recording="true"]) .meta-top,
.app[data-mode="metadata"]:not([data-recording="true"]) .meta-rule,
.app[data-mode="metadata"]:not([data-recording="true"]) .quick-meta,
.app[data-mode="metadata"]:not([data-recording="true"]) .wave-rail,
.app[data-mode="metadata"]:not([data-recording="true"]) .player-title,
.app[data-mode="metadata"]:not([data-recording="true"]) .recording-catalog,
.app[data-mode="metadata"]:not([data-recording="true"]) .recording-tempo,
.app[data-mode="metadata"]:not([data-recording="true"]) .recording-credit{
  display:none!important;
}

/* Keep real playback controls on top of the scanner surface. */
.app[data-mode="metadata"]:not([data-recording="true"]) .player-console{
  z-index:12;
  top:auto!important;
  bottom:calc(var(--safe-bottom) + 12px);
  width:auto;
  min-width:174px;
  padding:9px 13px 10px;
  border:0;
  border-radius:999px;
  background:rgba(7,7,9,.62);
  box-shadow:0 16px 46px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
.app[data-mode="metadata"]:not([data-recording="true"]) .player-core{display:block;padding:0}
.app[data-mode="metadata"]:not([data-recording="true"]) .title-transport{
  display:flex;
  min-height:0;
  align-items:center;
  justify-content:center;
  gap:0;
}
.app[data-mode="metadata"]:not([data-recording="true"]) .player-controls{
  display:flex;
  gap:7px;
  opacity:1;
  transform:none;
}
.app[data-mode="metadata"]:not([data-recording="true"]) .round-button{
  width:32px;
  height:32px;
  background:rgba(255,255,255,.075);
  color:#fff;
}
.app[data-mode="metadata"]:not([data-recording="true"]) .round-button.main{
  width:42px;
  height:42px;
  background:#fff;
  color:#08090a;
}
.app[data-mode="metadata"]:not([data-recording="true"]) .surface-handle{
  position:absolute;
  left:50%;
  top:-18px;
  width:74px;
  height:18px;
  transform:translateX(-50%);
}
.app[data-mode="metadata"]:not([data-recording="true"]) .handle-line{
  display:block;
  width:34px;
  height:3px;
  margin:auto;
  background:rgba(255,255,255,.32);
  border-radius:999px;
}
.app[data-mode="metadata"]:not([data-recording="true"]) .handle-label,
.app[data-mode="metadata"]:not([data-recording="true"]) .handle-chevron{display:none}

@media(max-width:560px){
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .screen{
    transform:scale(.78);
    transform-origin:50% 50%;
    will-change:transform;
  }
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .screen::before{
    top:-22px;bottom:-28px;left:-2.25%;right:-2.25%;height:auto;inset-inline:-2.25%;border-radius:48px;
    background:linear-gradient(180deg,rgba(3,3,7,.11) 0%,rgba(3,3,7,.155) 17%,rgba(3,3,7,.18) 43%,rgba(3,3,7,.17) 73%,rgba(3,3,7,.11) 100%);
    box-shadow:0 30px 94px rgba(0,0,0,.20),0 0 68px rgba(0,0,0,.09);
    -webkit-backdrop-filter:blur(15px) saturate(116%);backdrop-filter:blur(15px) saturate(116%);
    -webkit-mask-image:radial-gradient(ellipse 102% 100% at 50% 50%,#000 0%,#000 47%,rgba(0,0,0,.90) 70%,rgba(0,0,0,.46) 88%,transparent 100%);
    mask-image:radial-gradient(ellipse 102% 100% at 50% 50%,#000 0%,#000 47%,rgba(0,0,0,.90) 70%,rgba(0,0,0,.46) 88%,transparent 100%);
  }
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .stage{width:100%;padding:15px 10px 0}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .wave-shell{width:94%;height:52px;margin-inline:auto}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .meta-clip{overflow:visible}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .meta-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:96%;max-width:none;margin:0 auto;gap:5px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold.meta-in .meta-row{max-height:58px;padding-top:9px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .meta{width:auto;min-width:0;min-height:37px;padding:5px 5px 6px;gap:2px;align-items:center;justify-content:center;text-align:center;border-radius:999px;background:rgba(255,255,255,.065);box-shadow:0 8px 22px rgba(0,0,0,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .mk{font-size:6.2px;line-height:1;text-align:center}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .mv{font-size:9.6px;line-height:1;text-align:center}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scan-wrap{width:96%;margin:0 auto}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scanner{width:100%;margin:14px auto 16px;padding:10px 0 7px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scan-top{width:93%;margin:0 auto 10px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .progress{width:93%;margin:0 auto 13px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .rows{gap:14px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .row{grid-template-columns:70px minmax(0,1fr) 34px;gap:6px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .rail{gap:3px}
  .app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .seg{height:16px}
}

/* --- grimlife-mobile-centering-swipe-final --- */
@media (max-width:720px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .app{
    left:0;
    right:0;
    width:100%;
    max-width:100vw;
  }

  /* Do not depend on translateX(-50%) on iOS once the live app initializes.
     Physical left/right centering stays stable through mode changes. */
  .global-header{
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    transform:none;
  }
  .app[data-recording="true"] .global-header{
    transform:translateY(-14px);
  }

  .player-console{
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    transform:none;
  }

  .library-shell,
  #categoryGate,
  #categoryGate .category-choices{
    margin-left:auto;
    margin-right:auto;
  }

  /* Regular full Player already has the centered grab line.
     The extra far-right up chevron is redundant. */
  .app[data-mode="player"]:not([data-recording="true"]) .handle-chevron{
    display:none !important;
  }

  /* The scanner surface itself can now be pulled back down to Player. */
  .app[data-mode="metadata"]:not([data-recording="true"]) #grimRecordingLayer{
    pointer-events:auto;
    touch-action:none;
  }
}

/* --- style-38 --- */
${t.cssStyle}

/* --- style-39 --- */
${t.cssStyle};