:root {
  color-scheme: dark;
  --ink: #f7f4ea;
  --ink-soft: #d8d7cd;
  --night: #08100d;
  --surface: rgba(10, 24, 19, 0.86);
  --surface-solid: #0d1c17;
  --surface-raised: #14251e;
  --muted: #9eaca1;
  --line: rgba(225, 238, 227, 0.16);
  --line-strong: rgba(225, 238, 227, 0.3);
  --green: #7dd6a3;
  --green-deep: #246c4b;
  --gold: #e0b879;
  --red: #f15a4d;
  --red-deep: #9f2d28;
  --blue: #5ab8e8;
  --yellow: #f1d04e;
  --paper: #f7f3e8;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  --serif: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "DM Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --mono: "DM Mono", "IBM Plex Mono", "Courier New", monospace;
  --drift-custom-colour: #0b1714;
  --drift-custom-image-opacity: 0.24;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #22372d;
  --ink-soft: #3e5147;
  --night: #edf1e7;
  --surface: rgba(249, 248, 239, 0.88);
  --surface-solid: #f3f2e8;
  --surface-raised: #fbfaf3;
  --muted: #5c6b62;
  --line: rgba(35, 58, 45, 0.16);
  --line-strong: rgba(35, 58, 45, 0.3);
  --green: #2d7c56;
  --green-deep: #1f6041;
  --gold: #9a6734;
  --red: #d53d31;
  --red-deep: #a52d27;
  --blue: #287da5;
  --yellow: #946d05;
  --shadow: 0 28px 90px rgba(33, 53, 43, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 13% 2%, color-mix(in srgb, var(--green) 12%, transparent), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(241, 90, 77, 0.11), transparent 28%),
    var(--night);
  color: var(--ink);
  font-family: var(--drift-custom-font, var(--sans));
  line-height: 1.55;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

img,
iframe,
video {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--night);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.custom-theme-layer {
  position: fixed;
  z-index: 0;
  inset: 0;
  background-color: var(--drift-custom-colour);
  background-position: center;
  background-size: cover;
  mix-blend-mode: soft-light;
  opacity: var(--drift-custom-image-opacity);
  pointer-events: none;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.custom-theme-layer:not(.has-image) {
  opacity: 0.2;
  mix-blend-mode: color;
}

.drift-header {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 52px);
  min-height: 72px;
  padding: 10px clamp(18px, 5vw, 74px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--night) 82%, transparent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.wordmark {
  color: var(--ink);
  font: 700 29px/1 var(--sans);
  letter-spacing: -0.075em;
  text-decoration: none;
}

.wordmark span {
  color: var(--red);
}

.drift-header nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  font: 10px/1.4 var(--mono);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.drift-header nav a {
  position: relative;
  padding: 10px 0;
  color: var(--muted);
  text-decoration: none;
}

.drift-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.22s ease;
}

.drift-header nav a:is(:hover, :focus-visible) {
  color: var(--ink);
}

.drift-header nav a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiet-action,
.theme-button,
.profile-button {
  min-height: 35px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  color: var(--ink);
}

.quiet-action {
  padding: 7px 12px;
  font: 9px/1 var(--mono);
}

.theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 68px;
  padding: 7px 10px;
  font: 8px/1 var(--mono);
  letter-spacing: 0.07em;
}

.theme-icon {
  color: var(--gold);
  font-size: 15px;
}

.profile-button {
  position: relative;
  display: grid;
  width: 36px;
  min-width: 36px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--night);
  font: 700 12px/1 var(--sans);
}

.profile-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiet-action:is(:hover, :focus-visible),
.theme-button:is(:hover, :focus-visible) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 13%, var(--surface-solid));
}

main {
  position: relative;
  z-index: 1;
}

.drift-hero,
.source-grid,
.trail-strip,
.playground-shell,
.artist-updates,
.rights-strip {
  width: min(1240px, calc(100% - clamp(32px, 9vw, 130px)));
  margin-inline: auto;
}

.drift-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.3fr);
  align-items: end;
  gap: clamp(34px, 8vw, 120px);
  min-height: min(760px, calc(100svh - 72px));
  padding: clamp(70px, 11vw, 150px) 0 clamp(58px, 8vw, 106px);
}

.hero-copy {
  max-width: 900px;
}

.eyebrow,
.kicker {
  margin: 0 0 13px;
  color: var(--muted);
  font: 9px/1.55 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-copy > .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
}

.live-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(241, 90, 77, 0.12), 0 0 20px rgba(241, 90, 77, 0.72);
  animation: live-pulse 2.3s ease-in-out infinite;
}

.drift-hero h1,
.drift-hero h2 {
  margin: 0 0 30px;
  color: var(--ink);
  font: 400 clamp(62px, 10vw, 150px) / 0.84 var(--serif);
  letter-spacing: -0.072em;
  text-wrap: balance;
}

.drift-hero h1 em,
.drift-hero h2 em {
  color: var(--red);
  font-family: var(--serif);
  font-weight: 400;
  text-shadow: 0 0 38px rgba(241, 90, 77, 0.25);
}

.hero-copy > p:not(.eyebrow, .install-note-entry) {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.65vw, 20px);
  line-height: 1.72;
}

.install-note-entry {
  display: flex;
  margin: 28px 0 0;
  color: var(--muted);
  font: 10px/1.6 var(--mono);
  letter-spacing: 0.06em;
}

.install-note {
  min-height: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px dotted var(--gold);
  background: transparent;
  color: var(--gold);
  font: inherit;
  text-align: left;
}

.install-note-status:empty {
  display: none;
}

.hero-links {
  display: grid;
  gap: 9px;
  align-content: end;
}

.source-action,
.soft-button,
.save-profile,
.compact-form button,
.playground-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 76%, transparent);
  color: var(--ink);
  font: 9px/1.35 var(--mono);
  letter-spacing: 0.045em;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.source-action.primary,
.save-profile,
.compact-form button {
  border-color: var(--gold);
  background: var(--gold);
  color: #15140d;
}

.source-action:is(:hover, :focus-visible),
.soft-button:is(:hover, :focus-visible),
.save-profile:is(:hover, :focus-visible),
.compact-form button:is(:hover, :focus-visible),
.playground-toggle:is(:hover, :focus-visible) {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  padding-bottom: clamp(70px, 9vw, 130px);
}

.source-card {
  min-width: 0;
  padding: clamp(18px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 93%, transparent), color-mix(in srgb, var(--surface-solid) 70%, transparent));
  box-shadow: var(--shadow);
}

.source-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--muted);
  font: 8px/1.4 var(--mono);
  letter-spacing: 0.12em;
}

.source-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.source-card h2,
.trail-strip h2,
.playground-header h2,
.artist-updates h2,
.rights-strip h2,
.drift-dialog h2 {
  margin: 0;
  font: 400 clamp(35px, 5.3vw, 72px) / 0.95 var(--serif);
  letter-spacing: -0.052em;
}

.source-card h2 em {
  color: var(--gold);
  font-weight: 400;
}

.permission-badge {
  flex: none;
  padding: 7px 10px;
  border: 1px solid rgba(125, 214, 163, 0.34);
  border-radius: 999px;
  color: var(--green);
  font: 8px/1.2 var(--mono);
  letter-spacing: 0.06em;
}

.media-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #030907;
}

.media-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  overflow: hidden;
  padding: 22px;
  background:
    radial-gradient(circle at 72% 31%, rgba(241, 90, 77, 0.28), transparent 30%),
    radial-gradient(circle at 22% 82%, rgba(125, 214, 163, 0.22), transparent 33%),
    linear-gradient(145deg, #0c211a, #07100d);
  text-align: center;
}

.media-poster p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #d9e8dd;
  font: 10px/1.5 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.media-poster button {
  position: relative;
  z-index: 2;
  justify-self: center;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(247, 244, 234, 0.94);
  color: #0c1712;
  font: 9px/1.3 var(--mono);
}

.poster-orbit {
  position: absolute;
  width: min(62%, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(241, 90, 77, 0.42);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(241, 90, 77, 0.05),
    0 0 0 60px rgba(125, 214, 163, 0.04);
  animation: orbit-breathe 7s ease-in-out infinite;
}

.source-description {
  max-width: 720px;
  margin: 20px 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.75;
}

.source-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 9px/1.5 var(--mono);
}

.source-footer b {
  color: var(--ink);
  font-weight: 400;
}

.source-footer a {
  margin-left: auto;
  color: var(--gold);
  text-decoration: none;
}

.source-audio {
  display: grid;
  grid-template-columns: minmax(130px, 0.58fr) minmax(240px, 1fr);
  align-content: start;
  gap: 22px;
}

.suno-art {
  align-self: start;
  overflow: hidden;
  border-radius: 16px;
  background: #0b1714;
}

.suno-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.suno-copy {
  min-width: 0;
}

.source-audio h2 {
  margin: 9px 0 0;
  font-size: clamp(38px, 5vw, 68px);
}

.source-audio .source-description {
  margin-block: 18px;
}

.source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-shell-audio {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  margin-top: 5px;
}

.provenance-line {
  margin: 18px 0 0;
  color: var(--muted);
  font: 8px/1.6 var(--mono);
  letter-spacing: 0.03em;
}

.provenance-line span {
  color: var(--green);
}

.provenance-line i {
  padding-inline: 5px;
  font-style: normal;
}

.trail-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(360px, 1.3fr);
  align-items: center;
  gap: 40px;
  padding: 50px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trail-strip h2 {
  max-width: 440px;
  font-size: clamp(31px, 4vw, 52px);
}

.trail-path {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 2vw, 24px);
}

.trail-path > i {
  color: var(--gold);
  font-style: normal;
}

.trail-person {
  display: grid;
  min-width: 120px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
}

.trail-person b {
  color: var(--ink);
  font: 400 18px/1.2 var(--serif);
}

.trail-person small {
  margin-top: 4px;
  color: var(--muted);
  font: 8px/1.5 var(--mono);
}

.playground-shell {
  margin-top: clamp(78px, 10vw, 132px);
  margin-bottom: clamp(80px, 10vw, 140px);
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 95% 2%, rgba(90, 184, 232, 0.1), transparent 28%),
    color-mix(in srgb, var(--surface-solid) 90%, transparent);
  box-shadow: var(--shadow);
}

.playground-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.playground-header h2 {
  margin-bottom: 14px;
}

.playground-header p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.playground-toggle {
  gap: 10px;
  min-width: 112px;
}

.playground-toggle b {
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}

.playground-body {
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.38s ease, opacity 0.24s ease;
}

.playground-body.is-collapsed {
  max-height: 0;
  opacity: 0;
}

.adaptive-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 20px 0 2px;
}

.adaptive-tools button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 8px/1.2 var(--mono);
  letter-spacing: 0.055em;
}

.adaptive-tools button:is(:hover, :focus-visible) {
  border-color: var(--gold);
  color: var(--ink);
}

.playground-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 20px;
}

.playground-card {
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  scroll-margin-top: 100px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.playground-card.tool-focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}

.playground-card h3 {
  margin: 0 0 10px;
  font: 400 clamp(26px, 3vw, 38px) / 1.03 var(--serif);
  letter-spacing: -0.035em;
}

.playground-card > p:not(.eyebrow, .timing-status, .sandbox-note) {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.profile-card,
.lyric-card,
.theme-card {
  grid-column: span 1;
}

.profile-large {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}

.profile-avatar-large {
  position: relative;
  display: grid;
  width: 74px;
  height: 74px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--green-deep);
  color: #fffdf5;
  font: 400 29px/1 var(--serif);
  place-items: center;
}

.profile-avatar-large img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-large h3 {
  margin: 0 0 5px;
  font-size: 29px;
}

.profile-large p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.trail-list,
.collection-list,
.import-list {
  display: grid;
  gap: 9px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.trail-list li,
.collection-list > li,
.import-list > li {
  display: grid;
  gap: 5px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.trail-list li:first-child,
.collection-list > li:first-child,
.import-list > li:first-child {
  border-top: 0;
}

.trail-list :is(a, strong),
.collection-list b,
.import-list b {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.trail-list span,
.collection-list span,
.import-list span {
  display: block;
  color: var(--muted);
  font: 8px/1.55 var(--mono);
}

.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.text-button {
  min-height: 32px;
  padding: 6px 5px;
  border: 0;
  border-bottom: 1px dotted currentColor;
  background: transparent;
  color: var(--muted);
  font: 8px/1.3 var(--mono);
}

.text-button:is(:hover, :focus-visible) {
  color: var(--red);
}

.compact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 16px;
}

.compact-form input,
.compact-form textarea,
.compact-form select,
.playground-card > input[type="file"],
.lyric-card textarea,
.theme-controls input[type="color"] {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--night) 52%, transparent);
  color: var(--ink);
  font-size: 11px;
}

.compact-form textarea,
.lyric-card textarea {
  resize: vertical;
  line-height: 1.6;
}

.compact-form button {
  justify-self: start;
}

.collection-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.collection-entry > ul {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  padding-left: 18px;
}

.collection-entry > ul a {
  color: var(--muted);
  font-size: 10px;
}

.collection-item-form {
  grid-template-columns: minmax(90px, 0.7fr) minmax(130px, 1fr) minmax(180px, 1.4fr) auto;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.import-status {
  margin-top: 15px;
  padding: 13px;
  border: 1px solid rgba(90, 184, 232, 0.22);
  border-radius: 11px;
  background: rgba(90, 184, 232, 0.055);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.import-status b {
  color: var(--blue);
  font-weight: 500;
}

.import-list > li {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--night) 32%, transparent);
}

.import-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.import-actions a {
  color: var(--gold);
  font: 8px var(--mono);
  text-decoration: none;
}

.import-player-button {
  justify-self: start;
}

.import-list iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  border: 0;
  border-radius: 9px;
  background: #000;
}

.lyric-card video {
  width: 100%;
  max-height: 360px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #000;
}

.lyric-stage {
  position: relative;
  display: grid;
  min-height: 230px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 16%, rgba(125, 214, 163, 0.2), transparent 36%),
    radial-gradient(circle at 10% 86%, rgba(241, 90, 77, 0.16), transparent 38%),
    var(--lyric-background, #08100d);
  color: var(--lyric-text, #f7f4ea);
  isolation: isolate;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.lyric-stage[data-tone="day"] {
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 228, 151, 0.55), transparent 35%),
    radial-gradient(circle at 12% 90%, rgba(90, 184, 232, 0.18), transparent 38%),
    var(--lyric-background, #dce8df);
}

.lyric-stage[data-tone="night"] {
  background:
    radial-gradient(circle at 82% 16%, rgba(125, 214, 163, 0.18), transparent 36%),
    radial-gradient(circle at 10% 86%, rgba(241, 90, 77, 0.14), transparent 38%),
    var(--lyric-background, #08100d);
}

.lyric-stage-image {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lyric-stage-image.has-image {
  opacity: var(--lyric-image-opacity, 0.34);
}

.lyric-preview {
  align-self: center;
  max-height: 310px;
  margin: 0;
  padding: 28px 22px;
  overflow-y: auto;
  font-family: var(--lyric-font, var(--serif));
  font-size: clamp(20px, 3vw, 31px);
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
  scrollbar-width: thin;
}

.lyric-preview p {
  margin: 0.35em 0;
  color: color-mix(in srgb, var(--lyric-text, #f7f4ea) 54%, transparent);
  transition: color 0.2s ease, transform 0.2s ease;
}

.lyric-preview p.is-active {
  color: var(--lyric-text, #f7f4ea);
  font-weight: 600;
  transform: scale(1.02);
}

.lyric-preview .lyric-preview-empty {
  color: color-mix(in srgb, var(--lyric-text, #f7f4ea) 62%, transparent);
  font-style: italic;
}

.lyric-theme-panel {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.lyric-theme-panel summary {
  padding: 13px 0 5px;
  color: var(--muted);
  font: 8px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.lyric-theme-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-top: 11px;
}

.lyric-theme-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font: 8px/1.4 var(--mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.lyric-theme-controls input[type="color"] {
  width: 100%;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
}

.lyric-theme-controls input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
}

.lyric-file-control,
.lyric-theme-controls .text-button,
#lyricThemeStatus {
  grid-column: 1 / -1;
}

.lyric-theme-controls input[type="file"] {
  width: 100%;
  color: var(--muted);
  font: 8px var(--mono);
  text-transform: none;
}

.lyric-tone-controls {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
}

.lyric-tone-controls button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 8px var(--mono);
}

.lyric-tone-controls button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: #17140d;
}

#lyricThemeStatus {
  color: var(--muted);
  font: 8px/1.5 var(--mono);
  text-transform: none;
}

.timing-status,
.sandbox-note {
  margin: 13px 0 0;
  color: var(--muted);
  font: 8px/1.65 var(--mono);
}

.theme-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 15px;
}

.theme-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font: 8px/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.theme-controls .check-row {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  text-transform: none;
}

.theme-controls input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
}

.theme-controls input[type="file"] {
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font: 8px var(--mono);
}

#themeStatus {
  margin-left: 5px;
  color: var(--muted);
  font: 8px/1.5 var(--mono);
}

.sandbox-card {
  background:
    radial-gradient(circle at 100% 0, rgba(90, 184, 232, 0.12), transparent 38%),
    color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.artist-updates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.52fr);
  gap: clamp(30px, 7vw, 90px);
  align-items: center;
  padding: clamp(52px, 7vw, 92px) 0;
  border-top: 1px solid var(--line);
}

.artist-updates h2,
.rights-strip h2 {
  margin-bottom: 16px;
  font-size: clamp(39px, 5vw, 72px);
}

.artist-updates p:not(.eyebrow),
.rights-strip p:not(.eyebrow) {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.update-card {
  padding: 24px;
  border: 1px solid rgba(125, 214, 163, 0.26);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(125, 214, 163, 0.15), transparent 42%),
    color-mix(in srgb, var(--surface-solid) 84%, transparent);
}

.update-card > span {
  color: var(--green);
  font: 8px var(--mono);
  letter-spacing: 0.1em;
}

.update-card h3 {
  margin: 16px 0 8px;
  font: 400 31px/1.03 var(--serif);
}

.update-card p {
  margin-bottom: 18px !important;
  font-size: 11px !important;
}

.rights-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 100px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(241, 90, 77, 0.27);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 0, rgba(241, 90, 77, 0.14), transparent 35%),
    color-mix(in srgb, var(--surface-solid) 88%, transparent);
}

.drift-dialog {
  width: min(650px, calc(100vw - 28px));
  max-height: min(88svh, 820px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.56);
}

.drift-dialog::backdrop {
  background: rgba(2, 8, 5, 0.74);
  backdrop-filter: blur(8px);
}

.dialog-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: clamp(24px, 5vw, 44px);
}

.dialog-card h2 {
  margin-bottom: 4px;
  font-size: clamp(38px, 7vw, 62px);
}

.dialog-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font: 9px/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dialog-card input {
  width: 100%;
  min-height: 43px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--night) 48%, transparent);
  color: var(--ink);
}

.dialog-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  place-items: center;
}

.dialog-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.faq-card {
  gap: 4px;
}

.faq-card details {
  border-top: 1px solid var(--line);
}

.faq-card summary {
  padding: 15px 0;
  color: var(--ink);
  font: 400 18px/1.3 var(--serif);
  cursor: pointer;
}

.faq-card details p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.rights-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rights;
}

.rights-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  counter-increment: rights;
}

.rights-list b {
  color: var(--gold);
  font: 10px/1.4 var(--mono);
  font-weight: 500;
}

.rights-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.toast {
  position: fixed;
  z-index: 1000;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  max-width: min(430px, calc(100vw - 36px));
  padding: 11px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--ink);
  color: var(--night);
  font: 10px/1.5 var(--mono);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(241, 90, 77, 0.08), 0 0 16px rgba(241, 90, 77, 0.42);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(241, 90, 77, 0.15), 0 0 28px rgba(241, 90, 77, 0.76);
  }
}

@keyframes orbit-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.04) rotate(2deg);
  }
}

@media (max-width: 1000px) {
  .drift-hero {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

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

  .source-audio {
    grid-template-columns: minmax(170px, 0.55fr) minmax(0, 1fr);
  }

  .trail-strip {
    grid-template-columns: 1fr;
  }

  .trail-path {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 76px;
  }

  .drift-header {
    grid-template-columns: auto 1fr;
    gap: 9px 18px;
    padding: 10px 16px 11px;
  }

  .drift-header nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .header-actions {
    justify-self: end;
  }

  .quiet-action {
    display: none;
  }

  .drift-hero {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: 0;
    padding-block: 68px 74px;
  }

  .hero-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-audio {
    grid-template-columns: 1fr;
  }

  .suno-art {
    width: min(360px, 100%);
  }

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

  .collection-item-form {
    grid-template-columns: 1fr 1fr;
  }

  .collection-item-form input:nth-of-type(2) {
    grid-column: 1 / -1;
  }

  .artist-updates {
    grid-template-columns: 1fr;
  }

  .rights-strip {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .drift-hero,
  .source-grid,
  .trail-strip,
  .playground-shell,
  .artist-updates,
  .rights-strip {
    width: calc(100% - 28px);
  }

  .drift-hero {
    padding-top: 52px;
  }

  .drift-hero h1,
  .drift-hero h2 {
    font-size: clamp(56px, 19vw, 91px);
    line-height: 0.88;
  }

  .hero-copy > p:not(.eyebrow, .install-note-entry) {
    font-size: 14px;
  }

  .hero-links {
    grid-template-columns: 1fr;
  }

  .source-card {
    padding: 16px;
    border-radius: 18px;
  }

  .source-heading {
    display: block;
  }

  .permission-badge {
    display: inline-flex;
    margin-top: 13px;
  }

  .source-card h2 {
    font-size: clamp(38px, 12vw, 59px);
  }

  .source-footer a {
    width: 100%;
    margin-left: 0;
    padding-top: 5px;
  }

  .trail-path {
    display: grid;
    grid-template-columns: 1fr;
  }

  .trail-path > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .trail-person {
    min-width: 0;
  }

  .playground-shell {
    padding: 17px;
    border-radius: 20px;
  }

  .playground-header {
    grid-template-columns: 1fr;
  }

  .playground-toggle {
    justify-self: start;
  }

  .playground-card {
    padding: 17px;
  }

  .collection-item-form {
    grid-template-columns: 1fr;
  }

  .collection-item-form input:nth-of-type(2) {
    grid-column: auto;
  }

  .theme-controls {
    grid-template-columns: 1fr;
  }

  .lyric-theme-controls {
    grid-template-columns: 1fr;
  }

  .theme-controls .check-row {
    grid-column: auto;
  }

  .rights-strip {
    padding: 24px 18px;
  }

  .rights-list li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .drift-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100svh - 18px);
  }
}

@media (max-width: 430px) {
  .theme-button {
    min-width: 35px;
    width: 35px;
  }

  .theme-button .theme-label {
    display: none;
  }

  .source-audio .source-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .source-audio .source-actions > * {
    width: 100%;
  }

  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .button-row > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .live-dot,
  .poster-orbit {
    animation: none;
  }

  .custom-theme-layer,
  .playground-body,
  .playground-card,
  .toast,
  .drift-header nav a::after {
    transition: none;
  }
}

/* Native-feeling surfaces and Lens-semantic controls. */
:root {
  --action-blue: #4aa9ff;
  --action-blue-deep: #1877f2;
  --action-green: #82d7a5;
  --action-red: #f05d50;
  --action-gold: #e4bd7b;
  --action-earth: #b07a4b;
  --native-border: rgba(255, 255, 255, .14);
  --native-surface: rgba(9, 22, 17, .74);
  --native-raised: rgba(18, 37, 29, .82);
}

html[data-theme="light"] {
  --action-blue: #147ee8;
  --action-blue-deep: #0d65c5;
  --action-green: #267b51;
  --action-red: #d84337;
  --action-gold: #96652f;
  --action-earth: #895a35;
  --native-border: rgba(33, 58, 44, .16);
  --native-surface: rgba(249, 248, 239, .8);
  --native-raised: rgba(255, 254, 248, .9);
}

body {
  overscroll-behavior-y: none;
}

.player-shell {
  padding-bottom: max(64px, env(safe-area-inset-bottom));
}

.now-playing,
.public-track-sync,
.playground-shell,
.source-card,
.update-card,
.rights-strip {
  border-color: var(--native-border);
  background-color: var(--native-surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 18px 52px rgba(0, 0, 0, .17);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.now-playing {
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid var(--native-border);
  border-radius: 22px;
}

.mode {
  --mode-colour: var(--muted);
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent),
    var(--native-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}

.mode::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mode-colour);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mode-colour) 66%, transparent);
}

.mode-familiar {
  --mode-colour: var(--action-red);
}

.mode-genre {
  --mode-colour: var(--action-earth);
}

.mode-balance {
  --mode-colour: var(--action-green);
}

.mode-explore {
  --mode-colour: var(--action-blue);
}

.mode.selected {
  border-color: var(--mode-colour);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--mode-colour) 30%, transparent), transparent 54%),
    color-mix(in srgb, var(--mode-colour) 15%, var(--native-raised));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 10px 28px color-mix(in srgb, var(--mode-colour) 16%, transparent);
}

.mode b {
  padding-left: 14px;
}

.transport {
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--native-border);
  border-radius: 18px;
  background: var(--native-surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.transport button {
  min-height: 44px;
  border-radius: 12px;
}

#previousTrack,
#nextTrack {
  color: var(--action-earth);
}

.transport .transport-play {
  border: 1px solid var(--action-green);
  background: var(--action-green);
  box-shadow: 0 0 24px color-mix(in srgb, var(--action-green) 28%, transparent);
  color: #07120c;
}

.transport .repeat-button,
.transport .screen-button {
  border: 1px solid transparent;
  border-radius: 10px;
}

.transport .repeat-button:hover,
.transport .repeat-button:focus-visible,
.transport .screen-button:hover,
.transport .screen-button:focus-visible {
  border-color: var(--action-blue);
  background: color-mix(in srgb, var(--action-blue) 10%, transparent);
  color: var(--action-blue);
}

.transport .repeat-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--action-blue) 52%, transparent);
  background: color-mix(in srgb, var(--action-blue) 12%, transparent);
  color: var(--action-blue);
}

.player-shell .return-button {
  border-color: color-mix(in srgb, var(--action-earth) 42%, var(--line));
  color: var(--action-earth);
}

.player-shell .drift-button {
  border-color: var(--action-blue);
  background: var(--action-blue-deep);
  box-shadow: 0 12px 28px rgba(24, 119, 242, .2);
  color: #fff;
}

.player-shell .drift-button span {
  color: #fff;
}

.directions button {
  padding-inline: 12px;
  border: 1px solid var(--native-border);
  border-radius: 12px;
  background: var(--native-surface);
}

.directions button:is(:hover, :focus-visible) {
  border-color: var(--action-blue);
  background: color-mix(in srgb, var(--action-blue) 10%, var(--native-surface));
}

.lyrics-toggle span {
  color: var(--action-gold);
}

.fullscreen-button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--action-blue) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--action-blue) 7%, transparent);
  color: var(--action-blue);
}

.support button:first-child {
  border-color: color-mix(in srgb, var(--action-green) 45%, transparent);
  background: color-mix(in srgb, var(--action-green) 8%, var(--native-surface));
  color: var(--action-green);
}

.support button:last-child {
  color: var(--action-blue);
}

/* Final cascade guard for Drift's compact desktop application shell. */
.player-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 10px 16px;
  width: 100%;
  max-width: none;
  padding: 8px;
}

.player-shell > :is(.welcome, .modes, .now-playing, .player-media-shell, .transport, .actions, .direction-panel, .reason, .support, .drift-system-reveal) {
  grid-column: 1;
}

.player-shell > .lyrics-section {
  position: sticky;
  top: 88px;
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: start;
  min-height: 340px;
  max-height: calc(100svh - 110px);
  overflow: hidden;
  padding: 13px;
  border: 1px solid var(--native-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--native-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.player-shell .welcome {
  padding: 12px 0 8px;
}

.player-shell .welcome h1 {
  max-width: none;
  margin-bottom: 7px;
  font-size: clamp(30px, 3.2vw, 43px);
  line-height: .95;
}

.player-shell .welcome .intro {
  max-width: none;
  font-size: 11px;
  line-height: 1.5;
}

.player-shell .modes {
  gap: 6px;
  padding-bottom: 5px;
}

.player-shell .mode {
  min-height: 54px;
  padding: 10px;
  border-radius: 12px;
}

.player-shell .mode b {
  font-size: 11px;
}

.player-shell .mode small {
  font-size: 8px;
}

.player-shell .now-playing {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  padding: 11px;
  border-radius: 16px;
}

.player-shell .track-info h2 {
  font-size: clamp(20px, 2.3vw, 29px);
}

.player-shell .transport {
  padding: 7px;
  border-radius: 14px;
}

.player-shell .transport button {
  min-height: 38px;
}

.player-shell .transport .transport-play {
  width: 44px;
  min-height: 44px;
  flex-basis: 44px;
}

.player-shell .actions {
  padding: 7px 0;
}

.player-shell .actions button {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
}

.player-shell .reason {
  margin: 7px 0;
  padding: 9px 11px;
}

.player-shell .support {
  padding-top: 7px;
}

.player-shell .support button {
  min-height: 38px;
  padding: 9px;
}

.player-shell .drift-system-reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  padding: 13px 15px;
  border-radius: 17px;
  text-align: left;
}

.player-shell .drift-system-reveal .eyebrow {
  display: none;
}

.player-shell .drift-system-reveal h2 {
  margin: 0;
  font: 400 19px/1.15 var(--serif);
}

@media (max-width: 1080px) {
  .player-shell {
    grid-template-columns: 1fr;
  }

  .player-shell > .lyrics-section {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 620px) {
  .player-shell {
    padding: 4px;
  }

  .player-shell .welcome h1 {
    font-size: 31px;
  }

  .player-shell .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-shell .now-playing {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .player-shell .drift-system-reveal {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Compact desktop-app shell: a Spotify-like rail, dense player, and growing tool cards. */
main#main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  width: min(1600px, calc(100% - 24px));
  margin: 0 auto;
  padding: 12px 0 max(88px, env(safe-area-inset-bottom));
}

.drift-player-view,
.drift-lab-view {
  grid-column: 2;
  min-width: 0;
}

.drift-rail {
  position: sticky;
  top: 88px;
  grid-column: 1;
  display: flex;
  align-self: start;
  flex-direction: column;
  gap: 7px;
  max-height: calc(100svh - 100px);
  padding: 9px;
  overflow-y: auto;
  border: 1px solid var(--native-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--native-surface) 90%, transparent);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .17);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  scrollbar-width: none;
}

.drift-rail::-webkit-scrollbar {
  display: none;
}

.rail-tool {
  --rail-colour: var(--action-blue);
  display: grid;
  min-height: 48px;
  padding: 6px 4px;
  place-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: color-mix(in srgb, var(--rail-colour) 72%, var(--muted));
  text-decoration: none;
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.rail-tool svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.rail-player svg {
  fill: currentColor;
  stroke: none;
}

.rail-tool span {
  display: none;
  font: 7px/1.2 var(--mono);
  letter-spacing: .03em;
}

.rail-tool:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--rail-colour) 54%, transparent);
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--rail-colour) 28%, transparent), transparent 72%),
    color-mix(in srgb, var(--rail-colour) 9%, var(--native-raised));
  box-shadow: 0 0 24px color-mix(in srgb, var(--rail-colour) 28%, transparent);
  color: var(--rail-colour);
  transform: translateY(-2px);
}

.rail-tool:is(:hover, :focus-visible) span {
  display: block;
}

.rail-player { --rail-colour: var(--action-green); }
.rail-sources { --rail-colour: var(--action-blue); }
.rail-playground { --rail-colour: var(--action-gold); }
.rail-lyrics { --rail-colour: var(--action-red); }
.rail-theme { --rail-colour: var(--action-earth); }
.rail-sandbox { --rail-colour: #b99af2; }
.rail-artist { --rail-colour: var(--action-green); }

.player-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 10px 16px;
  width: 100%;
  max-width: none;
  padding: 8px;
}

.player-shell > :is(.welcome, .modes, .now-playing, .player-media-shell, .transport, .actions, .direction-panel, .reason, .support, .drift-system-reveal) {
  grid-column: 1;
}

.player-shell > .lyrics-section {
  position: sticky;
  top: 88px;
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: start;
  min-height: 340px;
  max-height: calc(100svh - 110px);
  overflow: hidden;
  padding: 13px;
  border: 1px solid var(--native-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--native-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.welcome {
  padding: 12px 0 8px;
}

.welcome .eyebrow {
  margin-bottom: 6px;
}

.welcome h1 {
  max-width: none;
  margin-bottom: 7px;
  font-size: clamp(29px, 3.2vw, 43px);
  line-height: .95;
}

.welcome .intro {
  max-width: none;
  font-size: 11px;
  line-height: 1.5;
}

.player-shell .install-note-entry {
  margin-top: 8px;
}

.modes {
  gap: 6px;
  padding-bottom: 5px;
}

.mode {
  min-height: 54px;
  padding: 10px 10px 9px;
  border-radius: 12px;
}

.mode b {
  font-size: 11px;
}

.mode small {
  font-size: 8px;
}

.now-playing {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  padding: 11px;
  border-radius: 16px;
}

.now-playing::after {
  inset: 5px;
  border-radius: 12px;
}

.track-info h2 {
  font-size: clamp(20px, 2.3vw, 29px);
}

.track-info .path {
  margin-top: 5px;
}

.official-source-link {
  margin-top: 7px;
}

.transport {
  padding: 7px;
  border-radius: 14px;
}

.transport button {
  min-height: 38px;
}

.transport .transport-play {
  width: 44px;
  min-height: 44px;
  flex-basis: 44px;
}

.player-shell .actions {
  padding: 7px 0;
}

.player-shell .actions button {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
}

.reason {
  margin: 7px 0;
  padding: 9px 11px;
}

.lyrics-heading {
  gap: 7px;
}

.lyrics-toggle {
  padding: 5px 0 10px;
}

.lyrics {
  padding-bottom: 0;
}

.lyrics-window {
  height: min(45vh, 360px);
}

.lyrics-lines {
  gap: 8px;
  padding: 90px 0;
}

.lyric-line {
  font-size: 17px;
}

.support {
  padding-top: 7px;
}

.support button {
  min-height: 38px;
  padding: 9px;
}

.drift-system-reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  padding: 13px 15px;
  border-radius: 17px;
  text-align: left;
}

.drift-system-reveal .eyebrow {
  display: none;
}

.drift-system-reveal h2 {
  margin: 0;
  font: 400 19px/1.15 var(--serif);
}

.drift-system-button {
  min-width: 190px;
  min-height: 43px;
  flex: none;
  padding: 10px 14px;
}

.drift-lab-view .lab-return-bar {
  top: 76px;
  margin-top: 2px;
  padding: 9px 13px;
}

.drift-lab-view .drift-hero {
  min-height: 0;
  padding: 28px 0 22px;
  gap: 22px;
}

.drift-lab-view .drift-hero h1,
.drift-lab-view .drift-hero h2 {
  margin-bottom: 12px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: .9;
}

.drift-lab-view .hero-copy > p:not(.eyebrow, .install-note-entry) {
  font-size: 12px;
  line-height: 1.55;
}

.drift-lab-view .source-grid {
  gap: 10px;
  padding-bottom: 34px;
}

.drift-lab-view .source-card {
  padding: 16px;
  border-radius: 17px;
}

.drift-lab-view .source-card h2 {
  font-size: clamp(29px, 3.4vw, 46px);
}

.drift-lab-view .trail-strip {
  gap: 18px;
  padding: 24px 0;
}

.drift-lab-view .playground-shell {
  margin-top: 34px;
  margin-bottom: 48px;
  padding: 18px;
}

.drift-lab-view .playground-header {
  padding-bottom: 14px;
}

.drift-lab-view .playground-header h2,
.drift-lab-view .artist-updates h2,
.drift-lab-view .rights-strip h2 {
  font-size: clamp(31px, 4vw, 48px);
}

.drift-lab-view .artist-updates {
  padding: 34px 0;
}

.drift-lab-view .rights-strip {
  margin-bottom: 42px;
  padding: 22px;
}

.playground-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 9px;
}

.playground-card {
  --card-colour: var(--action-blue);
  position: relative;
  min-height: 106px;
  max-height: 106px;
  padding: 15px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--card-colour) 28%, var(--native-border));
  cursor: pointer;
  transition:
    max-height .34s ease,
    min-height .34s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.playground-card::after {
  content: "Open tool  +";
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: var(--card-colour);
  font: 8px/1.2 var(--mono);
  letter-spacing: .06em;
}

.playground-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--card-colour) 60%, var(--native-border));
  box-shadow: 0 0 26px color-mix(in srgb, var(--card-colour) 20%, transparent);
  transform: translateY(-2px);
}

.playground-card:not(.is-expanded) > :not(.eyebrow):not(h3) {
  display: none !important;
}

.playground-card.is-expanded {
  grid-column: 1 / -1;
  min-height: 0;
  max-height: 1500px;
  padding: clamp(18px, 2.5vw, 27px);
  cursor: default;
  transform: none;
}

.playground-card.is-expanded::after {
  content: "Active tool";
}

.profile-card,
.trail { --card-colour: var(--action-green); }
#trail { --card-colour: var(--action-green); }
#collections { --card-colour: var(--action-gold); }
#import { --card-colour: var(--action-blue); }
#lyricLab { --card-colour: var(--action-red); }
#theme { --card-colour: var(--action-earth); }
#sandbox { --card-colour: #b99af2; }

.adaptive-tools {
  gap: 6px;
  padding-top: 11px;
}

.adaptive-tools button {
  --tool-colour: var(--action-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: color-mix(in srgb, var(--tool-colour) 78%, var(--muted));
}

.adaptive-tools button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.adaptive-tools button[data-tool="trail"] { --tool-colour: var(--action-green); }
.adaptive-tools button[data-tool="collections"] { --tool-colour: var(--action-gold); }
.adaptive-tools button[data-tool="import"] { --tool-colour: var(--action-blue); }
.adaptive-tools button[data-tool="lyricLab"] { --tool-colour: var(--action-red); }
.adaptive-tools button[data-tool="theme"] { --tool-colour: var(--action-earth); }
.adaptive-tools button[data-tool="sandbox"] { --tool-colour: #b99af2; }

.adaptive-tools button:is(:hover, :focus-visible) {
  border-color: var(--tool-colour);
  background: color-mix(in srgb, var(--tool-colour) 11%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--tool-colour) 23%, transparent);
  color: var(--tool-colour);
}

.suno-art {
  aspect-ratio: 1;
  align-self: start;
}

.suno-art img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.profile-button {
  border: 1px solid rgba(255, 255, 255, .65);
  background:
    conic-gradient(from 30deg, #f1d04e, #62b36e, #5bb8e8, #b99af2, #eb4b3c, #f1d04e);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 20px rgba(91, 184, 232, .38);
  color: #07120c;
}

html[data-theme="light"] .quiet-action {
  border-color: rgba(33, 112, 153, .34);
  background: linear-gradient(135deg, rgba(255, 249, 222, .95), rgba(186, 229, 242, .84));
  color: #173e4e;
}

.mode:is(:hover, :focus-visible) {
  border-color: var(--mode-colour);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--mode-colour) 24%, transparent), transparent 54%),
    color-mix(in srgb, var(--mode-colour) 12%, var(--native-raised));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mode-colour) 12%, transparent),
    0 0 30px color-mix(in srgb, var(--mode-colour) 28%, transparent);
}

:is(.rail-tool, .adaptive-tools button, .transport button, .source-action, .soft-button, .app-launch, .directions button, .support button, .drift-system-button, .fullscreen-button, .profile-button) {
  transition:
    transform .2s ease,
    filter .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease;
}

:is(.rail-tool, .adaptive-tools button, .transport button, .source-action, .soft-button, .directions button, .support button, .drift-system-button, .fullscreen-button, .profile-button):not(:disabled):hover {
  filter: saturate(1.28) brightness(1.07);
  transform: translateY(-2px);
}

.drift-header {
  background-position: center 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 1080px) {
  main#main {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  .drift-rail {
    position: sticky;
    top: 82px;
    grid-column: 1;
    flex-direction: row;
    width: 100%;
    max-height: none;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 16px 16px;
  }

  .rail-tool {
    min-width: 46px;
    min-height: 42px;
  }

  .rail-tool span {
    display: none !important;
  }

  .drift-player-view,
  .drift-lab-view {
    grid-column: 1;
  }

  .player-shell {
    grid-template-columns: 1fr;
  }

  .player-shell > .lyrics-section {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    max-height: none;
  }

  .drift-lab-view .lab-return-bar {
    top: 130px;
  }
}

@media (max-width: 620px) {
  main#main {
    width: calc(100% - 12px);
  }

  .drift-rail {
    top: 94px;
  }

  .player-shell {
    padding: 4px;
  }

  .welcome h1 {
    font-size: 31px;
  }

  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .now-playing {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .drift-system-reveal {
    align-items: stretch;
    flex-direction: column;
  }

  .drift-system-button {
    width: 100%;
  }

  .playground-card {
    min-height: 92px;
    max-height: 92px;
  }

  .playground-card.is-expanded {
    max-height: 2600px;
  }

  .public-track-actions {
    grid-column: 1 / -1;
  }
}

.drift-system-button,
.public-track-actions .drift-system-button {
  border-color: var(--action-blue);
  background: var(--action-blue-deep);
  box-shadow: 0 0 0 1px rgba(24, 119, 242, .2), 0 0 34px rgba(24, 119, 242, .3), 0 14px 34px rgba(0, 0, 0, .22);
  color: #fff;
}

.drift-system-button b {
  color: #fff;
}

.text-button {
  color: var(--action-red);
}

.local-pdf-remove,
.dialog-close {
  color: var(--action-red);
}

.lab-return-bar {
  position: sticky;
  z-index: 34;
  top: 72px;
  border: 1px solid var(--native-border);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: color-mix(in srgb, var(--night) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.source-action.primary {
  border-color: var(--action-green);
  background: var(--action-green);
  color: #07120c;
}

.compact-form button {
  border-color: var(--action-green);
  background: var(--action-green);
  color: #07120c;
}

.soft-button {
  border-color: color-mix(in srgb, var(--action-blue) 38%, var(--line));
  color: var(--action-blue);
}

:is(button, a, input, textarea, select, summary) {
  touch-action: manipulation;
}

:is(button, .source-action, .soft-button) {
  min-height: 42px;
}

@media (max-width: 1024px) {
  .player-shell {
    width: min(100%, 900px);
  }

  .public-track-sync,
  .drift-hero,
  .source-grid,
  .trail-strip,
  .playground-shell,
  .artist-updates,
  .rights-strip,
  .lab-return-bar {
    width: calc(100% - clamp(28px, 7vw, 76px));
  }
}

@media (max-width: 760px) {
  .player-shell {
    padding-inline: 14px;
  }

  .now-playing {
    border-radius: 18px;
  }

  .transport {
    border-radius: 16px;
  }

  .lab-return-bar {
    top: 88px;
    width: 100%;
    padding-inline: 16px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .now-playing,
  .public-track-sync,
  .playground-shell,
  .source-card,
  .update-card,
  .rights-strip,
  .transport,
  .lab-return-bar {
    background: var(--surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Drift's own identity: a modern listening instrument with old-world colour and pulse. */
.drift-player-view::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 72px 0 auto;
  height: 46vh;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(235, 75, 60, .15), transparent 32%),
    radial-gradient(ellipse at 82% 8%, rgba(98, 179, 110, .16), transparent 30%),
    linear-gradient(180deg, rgba(241, 208, 78, .06), transparent 75%);
  pointer-events: none;
}

.welcome {
  position: relative;
}

.welcome::after {
  content: "";
  display: block;
  width: min(390px, 72%);
  height: 2px;
  margin-top: 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--earth) 34%, var(--green) 66%, var(--blue) 88%, var(--yellow));
  box-shadow: 0 0 16px rgba(241, 208, 78, .12);
}

.welcome h1 {
  text-wrap: balance;
}

.now-playing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--red) 12%, transparent), transparent 38%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--green) 12%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--native-raised) 91%, transparent), var(--native-surface));
}

.now-playing::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(224, 184, 121, .13);
  border-radius: 17px;
  pointer-events: none;
}

.art {
  border-color: rgba(228, 189, 123, .34);
  box-shadow:
    0 0 0 5px rgba(228, 189, 123, .045),
    0 18px 46px rgba(0, 0, 0, .24),
    0 0 30px color-mix(in srgb, var(--track-glow) 40%, transparent);
}

.mode {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--mode-colour) 10%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent),
    var(--native-surface);
}

.mode.selected b {
  color: var(--ink);
}

.transport {
  background:
    linear-gradient(180deg, rgba(228, 189, 123, .055), transparent 52%),
    var(--native-surface);
}

.track-info h2 {
  text-wrap: balance;
}

.reason {
  padding: 14px 16px;
  border-left: 0;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--native-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--green) 5%, var(--native-surface));
}

.lyrics:not(.is-empty) .lyrics-window {
  padding-inline: clamp(0px, 2vw, 20px);
}

.drift-system-reveal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(96, 171, 247, .18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0, rgba(235, 75, 60, .08), transparent 32%),
    radial-gradient(circle at 88% 100%, rgba(98, 179, 110, .1), transparent 36%),
    color-mix(in srgb, var(--native-surface) 82%, transparent);
}

.drift-system-reveal .eyebrow {
  color: var(--action-blue);
}

.public-track-sync {
  background:
    radial-gradient(circle at 0 0, rgba(235, 75, 60, .11), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(98, 179, 110, .1), transparent 38%),
    linear-gradient(135deg, var(--native-raised), var(--native-surface));
}

.public-track-copy h2 {
  text-wrap: balance;
}

body.immersive .drift-player-view::before {
  display: none;
}

body.immersive .now-playing {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.immersive .now-playing::after {
  display: none;
}

body.immersive .lyrics-toggle span,
body.immersive .fullscreen-button {
  color: var(--lyric-current-colour, var(--yellow));
}

/* Artist lane */
.artist-main {
  position: relative;
  z-index: 1;
}

.artist-hero,
.artist-workspace,
.artist-source-boundary {
  width: min(1180px, calc(100% - clamp(32px, 9vw, 130px)));
  margin-inline: auto;
}

.artist-hero {
  display: grid;
  align-content: end;
  min-height: min(690px, calc(100svh - 72px));
  padding: clamp(70px, 10vw, 132px) 0 clamp(58px, 8vw, 104px);
}

.artist-hero > p:not(.eyebrow) {
  max-width: 770px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.72;
}

.artist-hero h1 {
  margin: 0 0 30px;
  font: 400 clamp(66px, 11vw, 148px) / 0.84 var(--serif);
  letter-spacing: -0.07em;
}

.artist-hero h1 em {
  color: var(--red);
  font-weight: 400;
}

.artist-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.artist-principles span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 8px/1.3 var(--mono);
  letter-spacing: 0.06em;
}

.artist-workspace {
  margin-bottom: clamp(84px, 10vw, 140px);
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 96% 2%, rgba(125, 214, 163, 0.1), transparent 26%),
    color-mix(in srgb, var(--surface-solid) 90%, transparent);
  box-shadow: var(--shadow);
}

.artist-workspace > header {
  max-width: 790px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.artist-workspace > header h2 {
  margin: 0 0 15px;
  font: 400 clamp(43px, 6vw, 76px) / 0.92 var(--serif);
  letter-spacing: -0.05em;
}

.artist-workspace > header p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.artist-form {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.artist-step {
  display: grid;
  gap: 21px;
  padding: clamp(26px, 4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}

.step-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.step-heading > p {
  margin: 0;
  color: var(--gold);
  font: 11px/1 var(--mono);
}

.step-heading h3 {
  margin: 0 0 5px;
  font: 400 clamp(28px, 4vw, 45px) / 1 var(--serif);
  letter-spacing: -0.04em;
}

.step-heading span {
  color: var(--muted);
  font-size: 11px;
}

.artist-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding-left: 68px;
}

.artist-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font: 9px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.artist-form input:not([type="radio"], [type="checkbox"]),
.artist-form textarea,
.artist-form select {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--night) 48%, transparent);
  color: var(--ink);
  font-size: 11px;
  text-transform: none;
}

.artist-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.artist-step > label {
  padding-left: 68px;
}

.rights-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-left: 68px;
}

.rights-choices label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--night) 34%, transparent);
  text-transform: none;
}

.rights-choices label:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface-raised));
}

.rights-choices b,
.rights-choices small {
  display: block;
}

.rights-choices b {
  color: var(--ink);
  font: 400 20px/1.2 var(--serif);
}

.rights-choices small {
  margin-top: 5px;
  color: var(--muted);
  font: 10px/1.6 var(--sans);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--gold);
}

.artist-checks {
  display: grid;
  gap: 9px;
  padding-left: 68px;
}

.artist-checks label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--night) 28%, transparent);
  text-transform: none;
}

.rights-preview {
  display: grid;
  gap: 7px;
  margin: 26px 0 0 68px;
  padding: clamp(19px, 3vw, 30px);
  border: 1px solid rgba(125, 214, 163, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(125, 214, 163, 0.13), transparent 38%),
    color-mix(in srgb, var(--surface-raised) 78%, transparent);
}

.rights-preview h3 {
  margin: 0 0 5px;
  font: 400 33px/1.08 var(--serif);
}

.rights-preview > p:not(.eyebrow) {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.rights-preview > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
}

.rights-preview > div b {
  color: var(--green);
  font: 8px/1.5 var(--mono);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rights-preview > div span {
  color: var(--muted);
}

.artist-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 26px;
}

.artist-source-boundary {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 1.28fr);
  gap: clamp(30px, 7vw, 90px);
  margin-bottom: 110px;
  padding-top: clamp(55px, 7vw, 94px);
  border-top: 1px solid var(--line);
}

.artist-source-boundary h2 {
  margin: 0 0 16px;
  font: 400 clamp(40px, 5.8vw, 77px) / 0.92 var(--serif);
  letter-spacing: -0.055em;
}

.artist-source-boundary > div:first-child > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.boundary-list {
  display: grid;
  gap: 9px;
}

.boundary-list article {
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
}

.boundary-list b,
.boundary-list span {
  display: block;
}

.boundary-list b {
  margin-bottom: 6px;
  color: var(--ink);
  font: 400 20px/1.2 var(--serif);
}

.boundary-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .artist-hero,
  .artist-workspace,
  .artist-source-boundary {
    width: calc(100% - 32px);
  }

  .artist-hero {
    min-height: 0;
    padding-block: 68px 74px;
  }

  .artist-fields,
  .rights-choices,
  .artist-step > label,
  .artist-checks {
    padding-left: 0;
  }

  .artist-fields,
  .rights-choices {
    grid-template-columns: 1fr;
  }

  .rights-preview {
    margin-left: 0;
  }

  .artist-source-boundary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .artist-hero,
  .artist-workspace,
  .artist-source-boundary {
    width: calc(100% - 28px);
  }

  .artist-workspace {
    padding: 17px;
    border-radius: 20px;
  }

  .step-heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rights-preview > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* The restored Drift player. The expanded system remains one blue step below it. */
.drift-header {
  border-bottom-color: rgba(255, 255, 255, .2);
  background-color: #0d2b33;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

html[data-theme="dark"] .drift-header {
  background-image:
    linear-gradient(90deg, rgba(2, 12, 24, .94), rgba(2, 12, 24, .55) 24%, rgba(2, 12, 24, .30) 50%, rgba(2, 12, 24, .70) 76%, rgba(2, 12, 24, .94)),
    linear-gradient(180deg, rgba(0, 8, 20, .17), rgba(0, 8, 20, .38)),
    image-set(url("/portfolio-website/assets/nav-coast/coastal-nav-night.avif") type("image/avif"), url("/portfolio-website/assets/nav-coast/coastal-nav-night.webp") type("image/webp"));
}

html[data-theme="light"] .drift-header {
  background-image:
    linear-gradient(90deg, rgba(3, 31, 27, .92), rgba(3, 31, 27, .56) 24%, rgba(3, 31, 27, .18) 50%, rgba(3, 31, 27, .66) 76%, rgba(3, 31, 27, .92)),
    linear-gradient(180deg, rgba(3, 31, 27, .06), rgba(3, 31, 27, .30)),
    image-set(url("/portfolio-website/assets/nav-coast/coastal-nav-day.avif") type("image/avif"), url("/portfolio-website/assets/nav-coast/coastal-nav-day.webp") type("image/webp"));
}

.drift-header :is(.wordmark, .wordmark span, nav a, .quiet-action, .theme-button, .profile-button) {
  color: #fff;
  text-shadow: inherit;
}

.drift-header nav .nav-view-link {
  position: relative;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.drift-header nav .nav-view-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: #7dc8ff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s ease;
}

.drift-header nav :is(a, .nav-view-link):is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left;
}

.drift-player-view {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 76px);
  background: transparent;
  transition: opacity .24s ease;
}

.drift-player-view.is-view-hidden {
  position: fixed;
  z-index: -10;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.player-shell {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 22px max(20px, 5vw) 64px;
}

.welcome {
  padding: clamp(58px, 10vw, 104px) 0 34px;
}

.welcome h1 {
  max-width: 660px;
  margin: 0 0 20px;
  color: var(--ink);
  font: 400 clamp(50px, 8vw, 86px) / .91 var(--serif);
  letter-spacing: -.06em;
}

.welcome h1 em {
  color: var(--gold);
  font-weight: 400;
}

.welcome .intro {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.player-shell .install-note-entry {
  margin-top: 18px;
}

.modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 34px;
}

.mode {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-solid) 66%, transparent);
  color: var(--ink);
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.mode:is(:hover, :focus-visible),
.mode.selected {
  transform: translateY(-2px);
}

.mode b,
.mode small {
  display: block;
}

.mode b {
  margin-bottom: 5px;
  font: 500 13px/1.2 var(--sans);
}

.mode small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.mode.selected small {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.mode-familiar.selected {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 20%, var(--surface-solid));
}

.mode-genre.selected {
  border-color: var(--earth);
  background: color-mix(in srgb, var(--earth) 24%, var(--surface-solid));
}

.mode-balance.selected {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 18%, var(--surface-solid));
}

.mode-explore.selected {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 18%, var(--surface-solid));
}

.now-playing {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: #245c49;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
}

.art span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.art span:nth-child(1) {
  top: 32%;
  left: -34%;
  width: 130%;
  height: 130%;
  background: var(--yellow);
}

.art span:nth-child(2) {
  top: -35%;
  left: 37%;
  width: 92%;
  height: 92%;
  background: #e96b44;
}

.art span:nth-child(3) {
  top: 35%;
  left: 34%;
  width: 42%;
  height: 42%;
  background: #0b251d;
}

.art-2 {
  background: #77352c;
}

.art-3 {
  background: #765226;
}

.art-4 {
  background: #164b3a;
}

.track-info h2 {
  margin: 0 0 5px;
  font: 400 clamp(29px, 4.4vw, 43px) / 1 var(--serif);
  letter-spacing: -.04em;
}

.track-info > p:not(.eyebrow) {
  margin: 0;
  color: var(--ink-soft);
}

.track-info .album {
  margin-top: 5px !important;
  color: var(--muted) !important;
  font-size: 12px;
}

.track-info .path {
  margin-top: 10px;
  color: var(--muted);
  font: 10px/1.55 var(--mono);
}

.official-source-link {
  display: inline-flex;
  margin-top: 13px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--gold);
  color: var(--gold);
  font: 9px/1.4 var(--mono);
  text-decoration: none;
}

.player-media-shell {
  position: relative;
  margin: 16px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(0, 0, 0, .18);
}

.player-media-shell iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
}

.embedded-lyric-overlay {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--lyric-current-colour, var(--yellow)) 52%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--night) 58%, transparent);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  pointer-events: none;
}

.embedded-lyric-overlay span {
  display: block;
  margin-bottom: 4px;
  color: var(--lyric-current-colour, var(--yellow));
  font: 7px/1.2 var(--mono);
  letter-spacing: .12em;
}

.embedded-lyric-overlay p {
  margin: 0;
  color: var(--lyric-current-colour, var(--yellow));
  font: 500 clamp(15px, 2.1vw, 24px) / 1.25 var(--serif);
}

#sourceAudio {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.transport {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 9px;
  border-bottom: 1px solid var(--line);
}

.transport button {
  min-width: 0;
  min-height: 38px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 13px/1.3 var(--mono);
  overflow-wrap: anywhere;
}

#previousTrack,
#nextTrack {
  flex: 1 1 96px;
}

.transport button span {
  padding: 0 5px;
  color: var(--muted);
  font-size: 10px;
}

.transport .transport-play {
  width: 52px;
  min-height: 52px;
  flex: 0 0 52px;
  padding-left: 3px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--night);
  font-size: 17px;
}

.transport .repeat-button,
.transport .screen-button {
  flex: 1 1 150px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  white-space: normal;
}

.transport .repeat-button[aria-pressed="true"] {
  color: var(--green);
}

.player-shell .actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 9px;
  padding: 16px 0;
}

.player-shell .actions button {
  min-height: 48px;
  padding: 13px;
  border-radius: 10px;
  font: 600 11px/1.3 var(--sans);
}

.player-shell .return-button {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  color: var(--ink);
}

.player-shell .drift-button {
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: #151408;
}

.player-shell .drift-button span {
  padding-left: 14px;
  font-size: 18px;
}

.direction-panel {
  padding: 0 0 24px;
}

.directions {
  display: grid;
  gap: 7px;
}

.directions button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.directions small {
  color: var(--muted);
  font-weight: 400;
}

.reason {
  margin: 22px 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--green);
}

.reason p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.lyrics-section {
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
}

.lyrics-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lyrics-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 650;
  text-align: left;
}

.lyrics-toggle span {
  color: var(--yellow);
  font-size: 20px;
  font-weight: 400;
}

.fullscreen-button {
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 9px/1.4 var(--mono);
}

.lyrics {
  padding: 2px 0 22px;
  color: var(--ink);
}

.lyrics-theme-switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
  color: var(--muted);
  font: 8px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lyrics-theme-switcher button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

.lyrics-theme-switcher button[aria-pressed="true"] {
  border-color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 44%, transparent);
}

.lyrics-window {
  position: relative;
  height: 190px;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}

.lyrics-lines {
  display: grid;
  gap: 10px;
  padding: 60px 0;
  transition: transform .65s ease;
}

.lyric-line {
  color: var(--muted);
  font: 400 20px/1.4 var(--serif);
  transition: color .35s ease, transform .35s ease, opacity .35s ease;
}

.lyric-line.active {
  color: var(--lyric-current-colour, var(--yellow));
  font-weight: 600;
  transform: scale(1.015);
  text-shadow: 0 0 22px color-mix(in srgb, var(--lyric-current-colour, var(--yellow)) 42%, transparent);
}

.lyric-line.past {
  color: color-mix(in srgb, var(--lyric-current-colour, var(--yellow)) 62%, var(--muted));
  opacity: .72;
}

.immersive-exit {
  display: none;
}

.support {
  display: flex;
  gap: 8px;
  padding-top: 16px;
}

.support button {
  min-height: 44px;
  flex: 1;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-solid) 65%, transparent);
  color: var(--ink);
  font: 500 10px/1.3 var(--mono);
}

.support button:first-child {
  color: var(--green);
}

.drift-system-reveal {
  display: grid;
  justify-items: center;
  margin-top: clamp(50px, 9vw, 96px);
  padding: clamp(30px, 7vw, 66px) 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.drift-system-reveal h2 {
  max-width: 590px;
  margin: 0 0 28px;
  font: 400 clamp(32px, 5vw, 54px) / 1 var(--serif);
  letter-spacing: -.045em;
}

.drift-system-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: min(100%, 330px);
  min-height: 58px;
  padding: 15px 19px 15px 22px;
  overflow: hidden;
  border: 1px solid rgba(24, 119, 242, .78);
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(24, 119, 242, .2), rgba(91, 184, 232, .08));
  box-shadow: 0 0 0 1px rgba(24, 119, 242, .18), 0 0 34px rgba(24, 119, 242, .32), 0 14px 34px rgba(0, 0, 0, .22);
  color: var(--ink);
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  animation: drift-blue-breathe 3.8s ease-in-out infinite;
}

.drift-system-button b {
  color: #78bdff;
  font-size: 18px;
  font-weight: 400;
}

.drift-system-button:is(:hover, :focus-visible) {
  border-color: #1877f2;
  background: #1877f2;
  box-shadow: 0 0 0 7px rgba(24, 119, 242, .13), 0 0 46px rgba(24, 119, 242, .52);
  color: #fff;
}

.drift-system-button:is(:hover, :focus-visible) b {
  color: #fff;
}

.drift-lab-view[hidden] {
  display: none;
}

.lab-return-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1240px, calc(100% - clamp(32px, 9vw, 130px)));
  margin: 0 auto;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.lab-return-bar span {
  color: var(--muted);
  font: 8px/1.5 var(--mono);
}

.public-track-sync {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
  width: min(1240px, calc(100% - clamp(32px, 9vw, 130px)));
  margin: 24px auto 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(91, 184, 232, .3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(91, 184, 232, .14), transparent 38%),
    color-mix(in srgb, var(--surface-solid) 84%, transparent);
  box-shadow: 0 0 35px rgba(24, 119, 242, .13);
}

.public-track-art {
  width: 104px;
  height: 104px;
}

.public-track-copy {
  min-width: 0;
}

.public-track-copy h2 {
  margin: 0 0 5px;
  font: 400 clamp(30px, 4vw, 50px) / 1 var(--serif);
  letter-spacing: -.04em;
}

.public-track-copy > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.public-track-source {
  margin: 0 0 7px;
  color: var(--blue);
  font: 8px/1.4 var(--mono);
  letter-spacing: .11em;
}

.public-track-actions {
  display: grid;
  justify-items: stretch;
  gap: 8px;
}

.drift-system-button.compact {
  min-width: 190px;
  min-height: 46px;
  justify-content: center;
  gap: 12px;
  padding: 11px 15px;
}

.lyric-track-context {
  margin: -5px 0 16px !important;
  padding: 10px 12px;
  border-left: 2px solid var(--blue);
  background: rgba(91, 184, 232, .055);
  color: var(--muted) !important;
  font: 9px/1.6 var(--mono);
}

.source-card.is-current-source {
  border-color: rgba(91, 184, 232, .66);
  box-shadow: 0 0 0 1px rgba(91, 184, 232, .18), 0 0 38px rgba(24, 119, 242, .18), var(--shadow);
}

body.immersive {
  overflow: hidden;
}

body.immersive .drift-header,
body.immersive > .site-map,
body.immersive > .nyarindo-thread-footer {
  display: none !important;
}

body.immersive .drift-player-view.is-view-hidden {
  opacity: 1;
  visibility: visible;
}

body.immersive .drift-lab-view,
body.immersive .player-shell > :not(.now-playing, .lyrics-section),
body.immersive .lyrics-heading {
  display: none !important;
}

body.immersive .drift-player-view {
  position: fixed;
  z-index: 50;
  inset: 0;
  min-height: 0;
  overflow: auto;
  background: transparent;
}

body.immersive .player-shell {
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 70px);
}

body.immersive .now-playing {
  display: block;
  width: min(960px, 100%);
  padding: 0;
  border: 0;
  text-align: center;
}

body.immersive .now-playing .art,
body.immersive .now-playing .eyebrow,
body.immersive .now-playing .path,
body.immersive .now-playing .official-source-link {
  display: none;
}

body.immersive .track-info h2 {
  margin-bottom: 8px;
  font-size: clamp(27px, 4vw, 48px);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}

body.immersive .track-info > p:not(.eyebrow) {
  color: rgba(255, 255, 255, .8);
}

body.immersive .track-info .album {
  color: rgba(255, 255, 255, .64) !important;
}

body.immersive .lyrics-section {
  display: block;
  width: min(1040px, 100%);
  margin-top: clamp(24px, 4vw, 46px);
  border: 0;
}

body.immersive .lyrics {
  display: block !important;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.immersive .lyrics-source-label {
  color: rgba(255, 255, 255, .62);
}

body.immersive .lyrics-theme-switcher {
  justify-content: center;
  color: rgba(255, 255, 255, .72);
}

body.immersive .lyrics-window {
  height: 58vh;
}

body.immersive .lyrics-lines {
  gap: clamp(14px, 2vw, 25px);
  padding: 7vh 0 25vh;
  text-align: center;
}

body.immersive .lyric-line {
  color: rgba(255, 255, 255, .42);
  font-size: clamp(25px, 4.2vw, 48px);
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

body.immersive .lyric-line.active {
  color: var(--lyric-current-colour, var(--yellow));
  text-shadow: 0 0 28px color-mix(in srgb, var(--lyric-current-colour, var(--yellow)) 56%, transparent), 0 2px 16px rgba(0, 0, 0, .5);
}

body.immersive .lyrics-section::after {
  content: "Move, tap, or press Escape to return to the player";
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, .52);
  font: 8px/1.5 var(--mono);
  letter-spacing: .06em;
  text-align: center;
}

body.immersive .player-shell .immersive-exit {
  position: fixed;
  z-index: 70;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: rgba(6, 15, 19, .34);
  color: #fff;
  font: 9px/1.3 var(--mono);
  letter-spacing: .04em;
  text-shadow: 0 1px 8px #000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@keyframes drift-blue-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(24, 119, 242, .16), 0 0 24px rgba(24, 119, 242, .25), 0 14px 34px rgba(0, 0, 0, .22);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(24, 119, 242, .12), 0 0 44px rgba(24, 119, 242, .45), 0 16px 38px rgba(0, 0, 0, .24);
  }
}

@media (max-width: 820px) {
  .drift-header {
    min-height: 88px;
  }

  .drift-header nav {
    padding-bottom: 7px;
  }

  .drift-header nav .nav-view-link {
    padding: 3px 0;
  }

  .player-shell {
    padding-top: 8px;
    padding-bottom: 54px;
  }

  .welcome {
    padding-top: 62px;
  }

  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-media-shell iframe {
    aspect-ratio: 16 / 9;
  }

  .lab-return-bar {
    width: calc(100% - 32px);
    align-items: flex-start;
    flex-direction: column;
  }

  .public-track-sync {
    grid-template-columns: 82px minmax(0, 1fr);
    width: calc(100% - 32px);
  }

  .public-track-art {
    width: 82px;
    height: 82px;
  }

  .public-track-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  html[data-theme="dark"] .drift-header {
    background-image:
      linear-gradient(90deg, rgba(2, 12, 24, .94), rgba(2, 12, 24, .48) 44%, rgba(2, 12, 24, .82)),
      linear-gradient(180deg, rgba(0, 8, 20, .12), rgba(0, 8, 20, .44)),
      image-set(url("/portfolio-website/assets/nav-coast/coastal-nav-night-mobile.avif") type("image/avif"), url("/portfolio-website/assets/nav-coast/coastal-nav-night-mobile.webp") type("image/webp"));
  }

  html[data-theme="light"] .drift-header {
    background-image:
      linear-gradient(90deg, rgba(3, 31, 27, .92), rgba(3, 31, 27, .42) 44%, rgba(3, 31, 27, .84)),
      linear-gradient(180deg, rgba(3, 31, 27, .03), rgba(3, 31, 27, .36)),
      image-set(url("/portfolio-website/assets/nav-coast/coastal-nav-day-mobile.avif") type("image/avif"), url("/portfolio-website/assets/nav-coast/coastal-nav-day-mobile.webp") type("image/webp"));
  }

  .drift-header {
    grid-template-columns: auto 1fr;
    min-height: 94px;
  }

  .drift-header nav {
    gap: 17px;
    font-size: 9px;
  }

  .welcome h1 {
    font-size: clamp(48px, 15vw, 70px);
  }

  .modes {
    gap: 6px;
  }

  .mode {
    min-height: 80px;
    padding: 11px;
  }

  .now-playing {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
  }

  .track-info .path {
    display: none;
  }

  .transport .transport-play {
    width: 48px;
    min-height: 48px;
    flex-basis: 48px;
  }

  .transport .repeat-button,
  .transport .screen-button {
    flex-basis: 130px;
  }

  .player-shell .actions {
    grid-template-columns: 1fr;
  }

  .directions button {
    display: block;
  }

  .directions small {
    display: block;
    margin-top: 4px;
  }

  .support {
    flex-direction: column;
  }

  .public-track-sync {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 15px;
  }

  .public-track-art {
    width: 68px;
    height: 68px;
  }

  .public-track-actions {
    grid-template-columns: 1fr;
  }

  body.immersive .player-shell {
    justify-content: flex-start;
    padding: 34px 14px 20px;
  }

  body.immersive .track-info h2 {
    font-size: 26px;
  }

  body.immersive .lyrics-window {
    height: 64vh;
  }

  body.immersive .lyrics-lines {
    padding-top: 4vh;
    text-align: left;
  }

  body.immersive .lyric-line {
    font-size: clamp(22px, 7vw, 35px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode,
  .drift-player-view,
  .lyrics-lines,
  .lyric-line,
  .drift-system-button {
    animation: none;
    transition: none;
  }
}

/* Final interaction semantics: colour carries the Lens motion, never decoration alone. */
.mode-explore.selected {
  border-color: var(--action-blue);
  background: color-mix(in srgb, var(--action-blue) 17%, var(--surface-solid));
}

.transport .transport-play {
  border-color: var(--action-green);
  background: var(--action-green);
  box-shadow: 0 0 24px color-mix(in srgb, var(--action-green) 30%, transparent);
  color: #07120c;
}

.transport .repeat-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--action-blue) 56%, transparent);
  background: color-mix(in srgb, var(--action-blue) 10%, transparent);
  color: var(--action-blue);
}

.transport .screen-button {
  color: var(--action-blue);
}

.player-shell .return-button {
  border-color: color-mix(in srgb, var(--action-earth) 48%, var(--line));
  background: color-mix(in srgb, var(--action-earth) 7%, var(--surface-solid));
  color: var(--action-earth);
}

.player-shell .drift-button {
  border-color: var(--action-blue);
  background: var(--action-blue-deep);
  box-shadow: 0 12px 28px rgba(24, 119, 242, .22);
  color: #fff;
}

.player-shell .drift-button span {
  color: #fff;
}

.fullscreen-button {
  color: var(--action-blue);
}

.support button:first-child {
  border-color: color-mix(in srgb, var(--action-green) 46%, transparent);
  background: color-mix(in srgb, var(--action-green) 8%, var(--surface-solid));
  color: var(--action-green);
}

.support button:last-child {
  color: var(--action-blue);
}