/* DEXTER's continuous hero and single player. Only loaded by /dexter/. */
@property --track-accent { syntax: "<color>"; inherits: true; initial-value: #9c78b1; }
@property --track-accent-ink { syntax: "<color>"; inherits: true; initial-value: #171421; }
.dexter-page { --track-accent: #9c78b1; --track-accent-ink: #171421; --accent: var(--track-accent); transition: --track-accent .6s ease, --track-accent-ink .6s ease; }
.lab-stage { --hero-height: clamp(540px, 45vw, 650px); --hero-cta: var(--track-accent); --hero-cta-ink: var(--track-accent-ink); background: #161914; box-shadow: none; clip-path: none; }
.lab-stage::before, .lab-stage::after { bottom: auto; height: calc(var(--hero-height) + var(--artist-header-height)); }
.lab-stage::before { background-image: url("../assets/img/dexter/white-paper-texture.webp"), var(--carousel-art, url("../assets/img/dexter/dexter-neon-rave.webp")); }
.lab-stage::after { background: linear-gradient(90deg, #080d1699, #080d1620 65%), linear-gradient(0deg, #080d16a6, transparent 45%); }
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: var(--hero-height) auto; column-gap: 0; padding-bottom: 70px; align-items: start; }
.stage-intro { grid-column: 1; grid-row: 1; align-self: center; padding-block: 40px; min-width: 0; }
.lab-stage .hero-copy > .button-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 51px; background: var(--hero-cta); color: var(--hero-cta-ink); font-family: var(--display); font-weight: 700; line-height: 1; transition: transform .2s; }
.lab-stage .hero-copy > .button-dark:hover { background: var(--hero-cta); }
.lab-player { grid-column: 2; grid-row: 1 / 3; align-self: start; position: relative; width: min(100%, 480px); min-width: 0; margin: 46px auto 0; padding: 12px; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse at 0 0, #ffffff26, transparent 60%), linear-gradient(135deg, #ffffff14, #15162b52); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); box-shadow: inset 0 2px 4px #ffffff29, inset 0 -1px 8px #ffffff0a, 0 24px 70px #00000026; color: #f3f0e9; scroll-margin-top: 24px; }
.player-edition { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 20px; font-size: 9px; letter-spacing: .09em; }
#carousel-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-song-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 24px #03081726; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.hero-song-cover:active { cursor: grabbing; }
.lab-player-body { padding: 22px 12px 6px; }
.lab-now { min-height: 84px; }
.lab-now > span { color: #f3f0e9b8; font-size: 11px; }
.lab-now h2 { font-size: clamp(22px, 2.2vw, 29px); letter-spacing: -.035em; line-height: 1.15; margin: 7px 0 18px; }
.lab-transport { display: flex; justify-content: center; align-items: center; gap: 25px; margin: 5px 0 23px; }
.lab-transport button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; color: inherit; transition: background .2s, transform .2s; }
.lab-transport svg { width: 21px; height: 21px; }
.lab-transport #lab-toggle { width: 58px; height: 58px; background: #f3f0e9; color: #161914; box-shadow: 0 3px 16px #090e2026; }
.lab-transport #lab-toggle svg { width: 27px; height: 27px; }
.lab-transport button:hover { background: #ffffff1c; transform: scale(1.05); }
.lab-transport #lab-toggle:hover { background: #fff; }
.lab-timeline input { display: block; width: 100%; height: 18px; margin: 0; accent-color: #f3f0e9; cursor: pointer; }
.lab-timeline input:disabled { opacity: .4; cursor: default; }
.lab-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; letter-spacing: .06em; color: #f3f0e9bb; font-variant-numeric: tabular-nums; }
.hero-song-links { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 13px 0 14px; }
.hero-song-links a { display: inline-flex; align-items: center; gap: 5px; padding: 15px 0; font-size: 11px; white-space: nowrap; }
.hero-song-links svg { width: 12px; height: 12px; }
.hero-song-links a:hover { color: var(--track-accent); }
#lab-status { font-size: 12px; line-height: 1.5; margin: 10px 0; color: #f3f0e9; }
#lab-status:empty { display: none; }
.lab-queue-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #ffffff20; padding: 20px 0 12px; }
.lab-queue-heading h3 { font: 500 9px/1.4 var(--display); letter-spacing: .08em; }
.lab-queue-heading > span { font-size: 8px; letter-spacing: .025em; color: #f3f0e980; }
.lab-queue { --queue-row: 76px; display: flex; flex-direction: column; height: auto; overflow: visible; }
.queue-hint-mobile { display: none; }
.queue-song { display: flex; align-items: center; gap: 11px; flex: 0 0 var(--queue-row); width: 100%; min-height: 0; padding: 10px 6px 10px 0; text-align: left; color: #f3f0e9; background: transparent; border-radius: 0; border-bottom: 1px solid #ffffff15; scroll-snap-align: start; }
.queue-song:hover { background: #ffffff0d; }
.queue-number { font-size: 9px; font-variant-numeric: tabular-nums; color: #f3f0e966; }
.queue-song img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.queue-info { min-width: 0; flex: 1; display: grid; gap: 5px; }
.queue-info strong { font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-info > span { font-size: 9px; color: #f3f0e98c; }
.queue-icon svg { display: block; width: 14px; height: 14px; }
.lab-player button:focus-visible, .lab-player a:focus-visible, .lab-queue:focus-visible { outline: 2px solid var(--track-accent); outline-offset: -2px; }
.lab-about { grid-column: 1; grid-row: 2; padding-top: 52px; min-width: 0; scroll-margin-top: 24px; }
.lab-about .section-label { padding-bottom: 24px; }
.lab-about h2 { font-size: clamp(46px, 5vw, 72px); font-weight: 700; line-height: .94; letter-spacing: -.055em; margin: 8px 0 34px; }
.lab-about h2 span { color: var(--track-accent); }
.lab-about > p { font-size: 14px; line-height: 1.8; color: #b8bdaf; max-width: 510px; margin: 19px 0; }
.lab-about > .lab-about-lead { font-size: 19px; line-height: 1.5; color: #f3f0e9; }
.lab-about > .lab-about-lead strong { font-weight: 800; }
.lab-about > .artist-signature { font-size: 12px; color: #f3f0e9; margin-top: 26px; }
.artist-signature span { color: #a8afa0; }
.lab-about .text-link { font-size: 12px; margin-top: 4px; }
/* Three creative fields converge in a shared, tilted nucleus. */
.lab-sculpture { width: 100%; max-width: 620px; margin: 26px 0 18px; font-family: var(--display); }
.lab-sculpture-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1.4; }
.lab-sculpture-stage::before { content: ""; position: absolute; z-index: -1; inset: 17% 3%; background: radial-gradient(ellipse, color-mix(in srgb, var(--track-accent) 10%, transparent), transparent 65%); }
#lab-art { display: block; width: 100%; height: 100%; color: var(--track-accent); }
.lab-sculpture-core { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 35%; text-align: center; pointer-events: none; }
.lab-sculpture-core strong { font-size: clamp(16px, 2.05vw, 26px); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
.lab-sculpture-core > span { max-width: 180px; font-size: clamp(8px, .85vw, 11px); line-height: 1.4; color: #f3f0e9; }
.lab-field-label { position: absolute; z-index: 1; transform: translate(-50%, -50%); text-align: center; font-size: clamp(10px, 1.1vw, 14px); line-height: 1.35; letter-spacing: .04em; font-weight: 800; color: #fff; white-space: nowrap; pointer-events: none; }
.lab-field-label[data-field="0"] { left: 22%; top: 29%; }
.lab-field-label[data-field="1"] { left: 78%; top: 29%; }
.lab-field-label[data-field="2"] { left: 50%; top: 85%; }
@media (min-width: 651px) and (max-width: 1000px) {
  .lab-sculpture-core { gap: 6px; }
  .lab-sculpture-core strong { font-size: clamp(13px, 2.2vw, 22px); }
  .lab-field-label { font-size: clamp(9px, 1.25vw, 12px); }
  .lab-sculpture-core > span { max-width: 110px; font-size: 8px; }
}
@media (max-width: 650px) {
  .lab-sculpture { margin-top: 24px; }
  .lab-sculpture-core { gap: 6px; }
  .lab-sculpture-core strong { font-size: clamp(14px, 4vw, 25px); }
  .lab-field-label { font-size: clamp(9px, 2.65vw, 13px); }
  .lab-sculpture-core > span { max-width: 114px; font-size: clamp(7px, 2vw, 10px); }
}
@media (min-width: 651px) and (max-width: 1000px) {
  .stage-grid { column-gap: 0; }
  .lab-player { width: min(100%, 430px); }
  .lab-player-body { padding-inline: 7px; }
  .hero-song-links a { font-size: 10px; }
  .lab-queue-heading > span { font-size: 7px; }
  .queue-song { gap: 7px; }
  .queue-info strong { font-size: 11px; }
}
@media (max-width: 650px) {
  .lab-stage::before { background-position: var(--carousel-art-position, center); }
  .stage-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-bottom: 24px; }
  .stage-intro { grid-column: 1; grid-row: 1; padding: 31px 0 32px; }
  .lab-player { grid-column: 1; grid-row: 2; margin: 0 auto; }
  .lab-about { grid-column: 1; grid-row: 3; padding-top: 58px; }
  .lab-about h2 { font-size: clamp(40px, 10vw, 54px); line-height: .97; }
  .lab-about > .lab-about-lead { font-size: 18px; }
  .lab-queue { height: calc(3 * var(--queue-row)); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #f3f0e950 transparent; scroll-snap-type: y proximity; }
  .queue-hint-desktop { display: none; }
  .queue-hint-mobile { display: inline; }
  .lab-page .mobile-menu { top: calc(100% + 4px); left: var(--gutter); right: var(--gutter); padding: 16px 24px; border: 1px solid #ffffff4d; border-radius: 22px; background: linear-gradient(135deg, #142036d9, #43254bb8 60%, #17243ace); box-shadow: inset 0 1px 0 #ffffff5c, 0 22px 50px #02071175; backdrop-filter: blur(24px) saturate(165%); -webkit-backdrop-filter: blur(24px) saturate(165%); }
  .lab-page .mobile-menu a { color: #fffdfa; border-bottom-color: #ffffff30; }
  .lab-page .mobile-menu a:last-child { color: var(--track-accent); }
  .lab-page .menu-toggle span { background: #f3f0e9; }
}
@media (max-width: 380px) {
  .lab-player-body { padding-inline: 4px; }
  .hero-song-links a { font-size: 9px; gap: 3px; }
  .lab-queue-heading > span { font-size: 7px; }
  .queue-song { gap: 7px; }
  .queue-info strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .lab-transport button, .lab-stage .hero-copy > .button-dark { transition: none; } }