/* Appearance v2. System typography, quieter artwork accents and day/night. */
:root {
  --slider-track: #e6e4e9;
  --wave-line: #ec8291;
  --wave-speed: 8s;
  --header-offset: 110px;
  --outline-ink: #de485b;
  scroll-padding-top: var(--header-offset);
  color-scheme: light;
}

/* A background layer, not a scrolling element: no hit targets or page overflow. */
.brand-drift { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.brand-drift>span {
  position: absolute; left: 50%; top: 36%;
  width: max-content; white-space: nowrap;
  font-size: clamp(155px,25vw,480px); font-weight: 800; line-height: 1.1; letter-spacing: -.055em;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px var(--outline-ink);
  opacity: .075;
  animation: brand-float 38s ease-in-out infinite alternate;
  transform: translate3d(-55%,-30px,0) rotate(-7deg);
}
main { position: relative; z-index: 1; }
@keyframes brand-float {
  from { transform: translate3d(-59%,-36px,0) rotate(-7deg); }
  to { transform: translate3d(-41%,38px,0) rotate(-4deg); }
}
body[data-motion=off] .brand-drift>span { animation-play-state: paused; }

.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .2s,box-shadow .2s; }
.header-inner { transition: height .22s ease; }
.brand { transition: width .22s ease; }
:root.header-compact { --header-offset: 88px; }
.header-compact .site-header { background: #ffffffd9; box-shadow: 0 6px 25px #2c152009; }
.header-compact .header-inner { height: 74px; }
.header-compact .brand { width: 194px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  min-width: 88px;
  padding: 10px 13px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #faf9fb;
  color: #55515f;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.theme-toggle:hover { background: #fff0f1; color: var(--red); border-color: #ffd1d6; }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-sun, .theme-label-night { display: none; }

/* The star turns about the centre of its square viewBox, without a trailing logo. */
.orbit-star {
  width: 62px;
  height: 62px;
  color: #f66673;
  opacity: .7;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: clean-star-turn 30s linear infinite;
}
.record {
  opacity: .35;
  animation: none;
  box-shadow: inset 0 0 0 1px #ffffff80;
  background: #ffddd9;
}
.record-cream { background: #fff0cf; }
.record::before { opacity: .16; filter: blur(22px) saturate(.65); }
.record::after { background: none; border-color: #ffffff80; }
.radio-waves { position: absolute; inset: -9%; pointer-events: none; }
.radio-wave {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid var(--wave-line);
  border-radius: 50%;
  opacity: 0;
  transform-origin: center;
  animation: radio-ripple var(--wave-speed) cubic-bezier(.15,.45,.45,1) infinite;
}
.radio-wave:nth-child(2) { animation-delay: -2.67s; }
.radio-wave:nth-child(3) { animation-delay: -5.34s; }
@keyframes clean-star-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes radio-ripple {
  0% { transform: scale(.7); opacity: 0; }
  24% { opacity: .33; }
  100% { transform: scale(1.5); opacity: 0; }
}
body[data-motion=off] .radio-wave { animation-play-state: paused; }
body[data-motion=off] .orbit-star { animation-play-state: paused; }

/* Surface and text colours are changed together, including dialogs and the dock. */
:root[data-theme=dark] {
  --ink: #f4f2f8;
  --muted: #b0aabb;
  --border: #39323f;
  --paper: #15141b;
  --red: #ff6573;
  --red-hover: #d80d27;
  --slider-track: #45404e;
  --wave-line: #dc718a;
  --outline-ink: #ff9aad;
  color-scheme: dark;
}
[data-theme=dark] .theme-sun, [data-theme=dark] .theme-label-night { display: block; }
[data-theme=dark] .theme-moon, [data-theme=dark] .theme-label-day { display: none; }
[data-theme=dark] .theme-toggle { background: #26212d; color: #e8dfea; border-color: #453747; }
[data-theme=dark] .theme-toggle:hover { background: #382533; color: #ffc8ce; border-color: #7c4157; }
[data-theme=dark] .site-header { background: #15141bf5; border-bottom-color: #2c2634; }
[data-theme=dark].header-compact .site-header { background: #15141bd9; box-shadow: 0 6px 25px #0002; }
[data-theme=dark] .brand-drift>span { opacity: .055; }
[data-theme=dark] .brand img, [data-theme=dark] .about-logo { filter: url('#night-logo'); }
[data-theme=dark] .navigation.open { background: #211d29; border-color: var(--border); box-shadow: 0 15px 35px #0005; }
[data-theme=dark] .icon-button:hover { background: #372430; }
[data-theme=dark] .skip-link { background: #28212f; }
[data-theme=dark] .ambient { opacity: .2; }
[data-theme=dark] .ambient-wash {
  background: linear-gradient(90deg,#15141b 7%,#15141bc2 38%,#15141b55 68%,#15141b85),linear-gradient(0deg,#15141b 0%,#15141b00 30%,#15141b66 65%,#15141b 100%);
}
[data-theme=dark] .hero-watermark { opacity: .065; }
[data-theme=dark] .cover-frame { background: #302735; border-color: #443543; box-shadow: 0 22px 50px -18px #0008,0 2px 14px #0002; }
[data-theme=dark] .record { opacity: .19; background: #b75468; }
[data-theme=dark] .record-cream { background: #ab8968; }
[data-theme=dark] .orbit-star { color: #fb8e9a; opacity: .64; }
[data-theme=dark] .floating-now { background: #24202bf5; border: 1px solid #44343f; box-shadow: 0 12px 30px #0004; }
[data-theme=dark] .button-primary, [data-theme=dark] .round-play { background: #e71930; color: #fff; }
[data-theme=dark] .button-primary:hover:not(:disabled), [data-theme=dark] .round-play:hover { background: #ce1228; }
[data-theme=dark] .button-primary:disabled { background: #542c38; color: #c399a7; box-shadow: none; }
[data-theme=dark] .button-secondary { background: #302836; }
[data-theme=dark] .ticker { background: linear-gradient(90deg,#241b26,#2c1c29 55%,#29221f); border-color: #3e2938; }
[data-theme=dark] .ticker-group { color: #ff919d; }
[data-theme=dark] .ticker-pause { background: #29221f; box-shadow: 0 0 15px 14px #29221f; }
[data-theme=dark] .track-art { background: #2c2431; }
[data-theme=dark] .track-card p { color: #b7afc0; }
[data-theme=dark] .track-skeleton>div, [data-theme=dark] .track-skeleton>span { background: #2c2733; }
[data-theme=dark] .request-card { background: linear-gradient(120deg,#2d222d,#26212c); border-color: #3e2d3a; }
[data-theme=dark] .request-card>p:not(.request-notice) { color: #c4b5c3; }
[data-theme=dark] .request-notice { color: #c3a6b5; }
[data-theme=dark] .request-badge { color: #dca5b6; }
[data-theme=dark] .request-star { opacity: .22; }
[data-theme=dark] .search-field { background: #1c1822; border-color: #52404d; }
[data-theme=dark] .search-field:focus-within { border-color: var(--red); }
[data-theme=dark] .search-field:has(input:disabled) { background: #201b26; }
[data-theme=dark] .search-field .icon { color: #b5a3b3; }
[data-theme=dark] input::placeholder, [data-theme=dark] textarea::placeholder { color: #a79baa; }
[data-theme=dark] .site-footer { color: #aaa0b2; border-color: #322b39; }
[data-theme=dark] .player { background: #19171ff7; border-color: #3a2d3a; box-shadow: 0 -5px 30px #0002; }
[data-theme=dark] .player-favorite { color: #b9acbe; }
[data-theme=dark] .player-error { background: #35232d; color: #ffc1cc; border-color: #683748; box-shadow: 0 5px 25px #0004; }
[data-theme=dark] .dialog { background: #211d29; border-color: #47384c; box-shadow: 0 25px 80px #0007; }
[data-theme=dark] .dialog::backdrop { background: #07060bb3; }
[data-theme=dark] .history-row { border-color: #3a303e; }
[data-theme=dark] .about-dialog>p { color: #c5bdcf; }
[data-theme=dark] .order-form input, [data-theme=dark] .order-form textarea { background: #18151e; border-color: #514357; color: var(--ink); }
[data-theme=dark] .order-form input[readonly] { background: #2e2635; color: #bcb0c7; }
[data-theme=dark] .selected-song { background: #3a2432; }
[data-theme=dark] .request-result.success { background: #17392a; color: #b3e6c4; }
[data-theme=dark] .request-result.error { color: #ff8999; }
[data-theme=dark] .toast { background: #2c202d; color: #ffbdcc; border-color: #623c50; box-shadow: 0 10px 35px #0004; }
[data-theme=dark] .noscript { background: #3c2531; }

@media (max-width: 959px) {
  .orbit-star { width: 48px; height: 48px; }
  .header-compact .brand { width: 176px; }
}
@media (max-width: 840px) {
  .header-inner { gap: 14px; }
  .theme-toggle { margin-left: auto; }
  .menu-button { display: inline-flex; margin-right: -8px; }
  .navigation {
    position: absolute; left: 16px; right: 16px; top: calc(100% - 7px);
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 10px 20px; border: 1px solid var(--border);
    border-radius: 15px; background: #fff; box-shadow: 0 15px 30px #43213515;
  }
  .navigation.open { display: flex; }
  .nav-link { font-size: 15px; text-align: left; padding: 15px 0; }
  .nav-link::after { display: none; }
  .nav-link.active { color: var(--red); }
}
@media (max-width: 639px) {
  :root { --header-offset: 96px; }
  :root.header-compact { --header-offset: 82px; }
  .header-inner { gap: 7px; }
  .header-compact .header-inner { height: 66px; }
  .header-compact .brand { width: 160px; }
  .theme-toggle { min-width: 38px; width: 38px; height: 38px; min-height: 38px; padding: 8px; margin-left: 7px; }
  .theme-toggle .theme-label-day, .theme-toggle .theme-label-night { display: none; }
  .theme-toggle .icon { width: 18px; height: 18px; }
  .orbit-star { width: 41px; height: 41px; }
  .record { opacity: .3; }
  .radio-waves { inset: -7%; }
  .brand-drift>span { top: 43%; -webkit-text-stroke-width: 1px; }
  [data-theme=dark] .ambient-wash { background: linear-gradient(180deg,#15141b 0%,#15141bb8 20%,#15141b55 55%,#15141b 100%); }
}
@media (max-width: 359px) { .header-compact .brand { width: 148px; } }
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion=on]) .radio-wave { animation: none; opacity: .09; transform: scale(1.15); }
  body:not([data-motion=on]) .orbit-star { animation: none; }
  body:not([data-motion=on]) .brand-drift>span { animation: none; }
}