[hidden] { display: none !important; }
html { color: #eee; font-family: Georgia, 'Times New Roman', serif; }
html.inverted { filter: invert(1); background: #fff; }
.border { position: absolute; top: 0; height: 100%; width: clamp(18px, 3.3vw, 44px); object-fit: fill; z-index: 1; pointer-events: none; }
.border-left { left: 0; }
.border-right { right: 0; transform: scaleX(-1); }
.border { object-position: center; }
main:has(.listening:not([hidden])) { background-image: linear-gradient(#0009, #000c), url('assets/background.jpg'); }
main:has(.listening:not([hidden])) .eye-link img { opacity: .4; }
.listening { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.listening a, .listening button { pointer-events: auto; }
.back { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: max(36px, 6%); color: inherit; font-size: 16px; text-underline-offset: 4px; z-index: 1; }
.player-group { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(72%, 360px); text-align: center; animation: player-appear .35s ease-out; }
.track-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 88px); max-width: 760px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; text-align: center; }
#track-title { width: 100%; margin: 0; font-size: clamp(28px, 3.2vw, 48px); font-weight: normal; line-height: 1.6; overflow-wrap: anywhere; }
#soundcloud { color: inherit; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; text-underline-offset: 4px; }
.player { position: relative; width: 100%; }
.player > img { display: block; width: 100%; height: auto; }
.hit { position: absolute; top: 18%; height: 64%; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.hit:focus-visible, a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.invert { left: 4%; width: 16%; }
.previous { left: 20%; width: 20%; }
.play { left: 40%; width: 20%; top: 0; height: 100%; }
.next { left: 60%; width: 19%; }
.mute { left: 79%; width: 18%; }
.audio-status { margin: 4px 0 0; min-height: 2.6em; font-size: 12px; line-height: 1.3; color: #bbb; }
@keyframes player-appear { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  body { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  main { min-width: 0; min-height: max(100svh, 440px); }
  .player-group { width: min(calc(100% - 48px), 360px); bottom: max(52px, calc(env(safe-area-inset-bottom) + 44px)); }
  .back { left: max(28px, env(safe-area-inset-left)); }
  .eye-link::after { width: max(100%, 44px); height: max(100%, 44px); }
  .hit { min-height: 44px; top: 50%; transform: translateY(-50%); }
  .play { height: 100%; }
  .track-info { width: calc(100% - 56px); gap: 20px; }
  #track-title { font-size: clamp(18px, 4.8vw, 24px); white-space: nowrap; overflow-wrap: normal; }
  #track-title[data-track="2"] { font-size: clamp(14px, 3.6vw, 18px); }
}
@media (max-height: 480px) { .track-info { top: 43%; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .eye-link img, .player-group { animation: none; } }