.turntable-receiver[hidden],
    .turntable-playback[hidden] { display: none; }

    .turntable-receiver {
      left: 74.53%;
      top: 40.63%;
      width: 20.33%;
      height: 9.57%;
      min-height: 0;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0.28rem 0.55rem;
      border: 0;
      color: rgba(169, 190, 121, 0.9);
      background: transparent;
      box-shadow: none;
      text-align: left;
      text-shadow: 0 0 0.28rem rgba(116, 176, 91, 0.38);
      transform: none;
    }

    .turntable-playback {
      display: grid;
      width: 100%;
      height: 100%;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.42rem;
      align-items: center;
    }

    .turntable-receiver .turntable-playback__title {
      min-width: 0;
      overflow: hidden;
      color: rgba(207, 218, 158, 0.82);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(0.52rem, 0.72vw, 0.7rem);
      font-weight: 700;
      letter-spacing: 0.045em;
      line-height: 1.05;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .turntable-playback__toggle {
      display: grid;
      width: 2rem;
      height: 2rem;
      min-width: 2rem;
      min-height: 2rem;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(137, 165, 103, 0.38);
      border-radius: 50%;
      color: rgba(209, 222, 164, 0.92);
      background: rgba(3, 7, 5, 0.22);
      font-weight: 900;
      line-height: 1;
      text-align: center;
      cursor: pointer;
    }

    .turntable-playback__toggle:is(:hover, :focus-visible) {
      border-color: rgba(213, 226, 166, 0.85);
      color: #e6edb9;
      background: rgba(57, 72, 42, 0.28);
      outline: 2px solid rgba(232, 218, 151, 0.88);
      outline-offset: -2px;
    }

    .turntable-playback__toggle:disabled { cursor: default; }

    .turntable-mobile-launch,
    .turntable-mobile-collapse,
    .turntable-mobile-reopen,
    .turntable-mobile-details,
    .turntable-mobile-heading,
    .turntable-mobile-progress { display: none; }

    .turntable-mobile-launch[hidden] { display: none; }

    .turntable-song-book-trigger {
      position: absolute;
      z-index: 7;
      left: 70.5%;
      top: 67.5%;
      width: 29%;
      height: 31.5%;
      padding: 0;
      border: 0;
      border-radius: 0.3rem;
      color: transparent;
      background: transparent;
      cursor: pointer;
      transform: rotate(1.5deg);
    }

    .turntable-indicator-overlay {
      position: absolute;
      z-index: 6;
      left: 24.04%;
      top: 64.76%;
      width: 0.62%;
      aspect-ratio: 1;
      border-radius: 999px;
      background: #ff201a;
      box-shadow: 0 0 0.28rem rgba(255, 24, 16, 0.9), 0 0 0.72rem rgba(211, 0, 0, 0.55);
      opacity: 0;
      pointer-events: none;
    }

    .scene--turntable.is-playing .turntable-indicator-overlay {
      animation: turntable-indicator-breathe 3.2s ease-in-out infinite;
    }

    @keyframes turntable-indicator-breathe {
      0%, 100% { opacity: 0.08; transform: scale(0.9); }
      50% { opacity: 0.36; transform: scale(1.12); }
    }

    .turntable-song-book-label {
      position: absolute;
      left: 11%;
      top: 20%;
      display: block;
      width: 78%;
      height: auto;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .turntable-song-book-trigger::after {
      position: absolute;
      inset: 7%;
      border: 1px solid transparent;
      border-radius: 0.2rem;
      content: "";
      transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    .turntable-song-book-trigger:is(:hover, :focus-visible) { outline: 0; }

    .turntable-song-book-trigger:is(:hover, :focus-visible)::after {
      border-color: rgba(244, 218, 153, 0.58);
      background: rgba(128, 80, 30, 0.08);
      box-shadow: 0 0 1rem rgba(241, 183, 94, 0.2), inset 0 0 1rem rgba(255, 233, 181, 0.08);
    }

    .turntable-song-book {
      width: min(72rem, calc(100vw - 3rem));
      max-width: none;
      max-height: min(51rem, calc(100dvh - 4rem));
      margin: auto;
      padding: 0;
      border: 0;
      color: #21170f;
      background: transparent;
      overflow: visible;
    }

    .turntable-song-book[open] { display: grid; }

    .turntable-song-book::backdrop {
      background: rgba(2, 2, 2, 0.72);
      backdrop-filter: blur(2px) saturate(0.72);
      -webkit-backdrop-filter: blur(2px) saturate(0.72);
    }

    .turntable-song-book__paper {
      position: relative;
      display: grid;
      min-height: min(43rem, calc(100dvh - 5rem));
      max-height: min(51rem, calc(100dvh - 4rem));
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
      border: 0;
      border-radius: 0.25rem;
      background: transparent;
      box-shadow: 0 1.6rem 4.5rem rgba(0, 0, 0, 0.68);
      transform: rotate(-0.35deg);
    }

    .turntable-song-book__paper::before {
      position: absolute;
      z-index: 0;
      inset: 0;
      content: "";
      pointer-events: none;
    }

    .turntable-song-book__paper.is-typed-page::before {
      background-image: var(--song-page-paper, none);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transform: scale(1.045);
      transform-origin: center;
    }

    .turntable-song-book__paper.is-image-page {
      border: 1px solid rgba(77, 43, 19, 0.82);
      border-radius: 0.35rem 0.7rem 0.45rem 0.25rem;
      background:
        radial-gradient(circle at 11% 13%, rgba(88, 46, 17, 0.13) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 76%, rgba(79, 42, 17, 0.1) 0 1px, transparent 2px),
        linear-gradient(96deg, rgba(85, 47, 20, 0.16), transparent 7%, transparent 48%, rgba(80, 42, 18, 0.14) 50%, transparent 52%, transparent 94%, rgba(75, 38, 15, 0.16)),
        #c9ad78;
      background-size: 31px 29px, 37px 41px, auto, auto;
      box-shadow: 0 1.6rem 4.5rem rgba(0, 0, 0, 0.68), inset 0 0 3rem rgba(67, 34, 13, 0.22);
    }

    .turntable-song-book__paper.is-image-page::before {
      background: repeating-linear-gradient(0deg, transparent 0 1.85rem, rgba(73, 50, 29, 0.09) 1.9rem 1.95rem);
    }

    .turntable-song-book__header,
    .turntable-song-book__page,
    .turntable-song-book__footer {
      position: relative;
      z-index: 1;
    }

    .turntable-song-book__header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 1rem;
      align-items: start;
      padding: clamp(1rem, 2.5vw, 2rem) clamp(1.1rem, 3vw, 2.75rem) 0.75rem;
      border-bottom: 1px solid rgba(69, 42, 22, 0.24);
    }

    .turntable-song-book__back {
      -webkit-appearance: none;
      appearance: none;
      display: inline-flex;
      min-width: 4.7rem;
      min-height: 2.75rem;
      align-items: center;
      justify-self: start;
      justify-content: flex-start;
      padding: 0.3rem;
      border: 0;
      border-radius: 0;
      color: rgba(44, 28, 16, 0.78);
      background: transparent;
      box-shadow: none;
      font: 900 0.58rem/1 var(--body-font);
      letter-spacing: 0.12em;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
    }

    .turntable-song-book__back:hover { color: #5e270f; }

    .turntable-song-book__kicker,
    .turntable-song-book__kind,
    .turntable-song-book__counter {
      margin: 0;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(0.62rem, 1.1vw, 0.78rem);
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .turntable-song-book__kicker { color: rgba(56, 34, 20, 0.7); }

    .turntable-song-book__track {
      display: block;
      margin-top: 0.18rem;
      color: #24170e;
      font-size: clamp(1.05rem, 2.3vw, 1.7rem);
      line-height: 1.08;
    }

    .turntable-song-book__close,
    .turntable-song-book__control,
    .turntable-song-book__audio {
      min-width: 2.75rem;
      min-height: 2.75rem;
      border: 1px solid rgba(60, 34, 16, 0.48);
      border-radius: 999px;
      color: #2c1c10;
      background: rgba(246, 224, 176, 0.2);
      font: inherit;
      font-weight: 850;
      cursor: pointer;
    }

    .turntable-song-book__close {
      display: grid;
      width: 2.75rem;
      padding: 0;
      place-items: center;
      font-size: 1.05rem;
    }

    .turntable-song-book :is(button, [tabindex]):focus-visible {
      outline: 3px solid #5e270f;
      outline-offset: 3px;
    }

    .turntable-song-book .turntable-song-book__back:focus-visible {
      outline: 0;
      color: #5e270f;
      text-decoration-line: underline;
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.24em;
    }

    .turntable-song-book__page {
      display: grid;
      min-height: 0;
      align-content: center;
      overflow: auto;
      padding: clamp(1.25rem, 3vw, 3rem) clamp(1.25rem, 5vw, 5rem);
      overscroll-behavior: contain;
    }

    .turntable-song-book__page.is-empty {
      align-content: center;
      justify-items: center;
      text-align: center;
    }

    .turntable-song-book__page.is-empty .turntable-song-book__title {
      max-width: none;
      margin: 0;
    }

    .turntable-song-book__kind { color: rgba(82, 42, 19, 0.72); }

    .turntable-song-book__title {
      max-width: 28ch;
      margin: 0.2rem 0 clamp(1rem, 2vw, 1.8rem);
      color: #27180f;
      font-size: clamp(1.55rem, 3.3vw, 2.4rem);
      font-weight: 800;
      line-height: 1.06;
      text-wrap: balance;
    }

    .turntable-song-book__text {
      max-width: 68ch;
      margin: 0;
      color: #2b1c12;
      font-size: clamp(1rem, 1.8vw, 1.35rem);
      line-height: 1.58;
      white-space: pre-wrap;
    }

    .turntable-song-book__image {
      display: grid;
      min-height: 0;
      margin: 0;
      place-items: center;
      gap: 0.65rem;
    }

    .turntable-song-book__image[hidden] { display: none; }

    .turntable-song-book__zoom {
      display: grid;
      width: 100%;
      min-height: 0;
      max-height: min(31rem, 60dvh);
      padding: 0;
      border: 0;
      color: inherit;
      background: transparent;
      overflow: auto;
      place-items: center;
      cursor: zoom-in;
    }

    .turntable-song-book__zoom.is-zoomed { cursor: zoom-out; place-items: start center; }

    .turntable-song-book__image img {
      display: block;
      max-width: 100%;
      max-height: min(29rem, 56dvh);
      object-fit: contain;
      box-shadow: 0 0.55rem 1.2rem rgba(55, 27, 11, 0.22);
    }

    .turntable-song-book__zoom.is-zoomed img {
      max-width: none;
      max-height: none;
      width: min(78rem, 165%);
    }

    .turntable-song-book__caption {
      max-width: 64ch;
      color: rgba(48, 29, 17, 0.74);
      font-size: 0.72rem;
      line-height: 1.35;
      text-align: center;
    }

    .turntable-song-book__credit::before { content: " · "; }

    .turntable-song-book__footer {
      display: grid;
      grid-template-columns: auto auto minmax(5rem, 1fr) auto;
      gap: 0.65rem;
      align-items: center;
      padding: 0.8rem clamp(1rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 1.75rem);
      border-top: 1px solid rgba(69, 42, 22, 0.24);
    }

    .turntable-song-book__footer[hidden] { display: none; }

    .turntable-song-book__control,
    .turntable-song-book__audio { padding: 0.55rem 1rem; }

    .turntable-song-book__control:disabled { opacity: 0.34; cursor: default; }

    .turntable-song-book__counter { color: rgba(62, 38, 22, 0.76); text-align: center; }

    @media (min-width: 768px) and (max-width: 1199px) {
      .turntable-receiver {
        left: 74.31%;
        top: 41.90%;
        width: 24.03%;
        height: 9.48%;
      }

      .turntable-song-book-trigger {
        left: 72%;
        top: 67.5%;
        width: 27.5%;
        height: 31.5%;
      }

      .turntable-indicator-overlay { left: 25.65%; top: 63.06%; }

      .turntable-song-book-label {
        left: 10%;
        top: 18%;
        width: 80%;
      }
    }

    @media (max-width: 767px) {
      .turntable-receiver {
        z-index: 12;
        left: 5%;
        top: max(5.75rem, calc(env(safe-area-inset-top) + 4.25rem));
        width: 90%;
        height: auto;
        min-height: 20rem;
        max-height: calc(100% - 8rem - env(safe-area-inset-bottom));
        padding: 1rem;
        border: 1px solid rgba(202, 181, 132, 0.34);
        border-radius: 0.35rem;
        color: #e7dfc7;
        background: rgba(8, 7, 5, 0.74);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.34);
        text-shadow: none;
        backdrop-filter: blur(5px) saturate(0.72);
        -webkit-backdrop-filter: blur(5px) saturate(0.72);
        transition: left 220ms ease, top 220ms ease, width 220ms ease,
          min-height 220ms ease, padding 220ms ease, border-radius 220ms ease,
          background-color 220ms ease;
      }

      .turntable-receiver:not([data-mobile-state]) { display: none; }

      .turntable-playback {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
          "collapse heading heading"
          "tracks tracks tracks"
          "toggle title reopen"
          "progress progress progress";
        gap: 0.8rem 0.75rem;
        align-items: center;
      }

      .turntable-receiver .turntable-playback__title {
        grid-area: title;
        display: block;
        color: rgba(239, 229, 199, 0.92);
        font-size: 0.78rem;
        letter-spacing: 0.03em;
        text-transform: none;
      }

      .turntable-playback__toggle {
        grid-area: toggle;
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 0.9rem;
      }

      .turntable-mobile-launch {
        position: absolute;
        z-index: 8;
        left: 15%;
        top: 47%;
        display: block;
        width: 70%;
        height: 31%;
        padding: 0;
        border: 0;
        color: transparent;
        background: transparent;
        cursor: pointer;
      }

      .turntable-mobile-launch::after {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        border-top: 0.58rem solid transparent;
        border-bottom: 0.58rem solid transparent;
        border-left: 0.9rem solid rgba(255, 232, 176, 0.52);
        content: "";
        filter: drop-shadow(0 0 0.34rem rgba(255, 196, 105, 0.25));
        opacity: 0.34;
        transform: translate(-36%, -50%);
        transition: opacity 180ms ease, filter 180ms ease;
      }

      .turntable-mobile-launch:is(:focus-visible, :hover) {
        outline: 0;
      }

      .turntable-mobile-launch:is(:focus-visible, :hover)::after {
        filter: drop-shadow(0 0 0.46rem rgba(255, 211, 132, 0.48));
        opacity: 0.72;
      }

      .turntable-song-book-trigger {
        z-index: 9;
        left: 51%;
        top: 65.5%;
        width: 49%;
        height: 28%;
        transform: rotate(0.7deg);
      }

      .turntable-indicator-overlay {
        left: 24%;
        top: 58.5%;
        width: 1.1%;
      }

      .turntable-song-book-label {
        left: 8%;
        top: 12%;
        width: 80%;
      }

      .turntable-song-book__header {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .turntable-song-book__back {
        grid-column: 1;
        grid-row: 1;
      }

      .turntable-song-book__identity {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      .turntable-song-book__close {
        grid-column: 2;
        grid-row: 1;
      }

      .turntable-song-book {
        width: calc(100vw - 1.25rem);
        max-height: calc(100dvh - max(1.25rem, env(safe-area-inset-top)) - max(1.25rem, env(safe-area-inset-bottom)));
      }

      .turntable-song-book__paper {
        min-height: min(42rem, calc(100dvh - 2.5rem));
        max-height: calc(100dvh - max(1.25rem, env(safe-area-inset-top)) - max(1.25rem, env(safe-area-inset-bottom)));
        transform: none;
      }

      .turntable-song-book__page { align-content: start; }

      .turntable-song-book__footer {
        grid-template-columns: auto minmax(4.5rem, 1fr) auto;
      }

      .turntable-song-book__audio {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .turntable-song-book__control:first-of-type { grid-column: 1; }

      .turntable-mobile-collapse,
      .turntable-mobile-reopen {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.45rem 0.7rem;
        border: 1px solid rgba(213, 197, 153, 0.35);
        border-radius: 999px;
        color: rgba(239, 229, 199, 0.94);
        background: rgba(9, 8, 6, 0.28);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        cursor: pointer;
      }

      .turntable-mobile-collapse {
        grid-area: collapse;
        display: inline-grid;
        place-items: center;
      }

      .turntable-mobile-heading {
        grid-area: heading;
        display: block;
        margin: 0;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-align: right;
        text-transform: uppercase;
      }

      .turntable-mobile-details {
        grid-area: tracks;
        display: grid;
        min-height: 8.5rem;
        align-content: center;
        gap: 0.45rem;
      }

      .turntable-mobile-track-list {
        display: grid;
        gap: 0.35rem;
        max-height: 10.5rem;
        overflow: auto;
        padding: 0.15rem;
      }

      .turntable-mobile-track {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.55rem 0.7rem;
        border: 1px solid rgba(213, 197, 153, 0.2);
        border-radius: 0.2rem;
        color: rgba(236, 225, 196, 0.8);
        background: rgba(2, 2, 2, 0.16);
        font: inherit;
        font-size: 0.78rem;
        text-align: left;
        cursor: pointer;
      }

      .turntable-mobile-track[aria-current="true"] {
        border-color: rgba(225, 207, 155, 0.7);
        color: #f1e9d2;
        background: rgba(104, 83, 46, 0.22);
      }

      .turntable-mobile-progress {
        grid-area: progress;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.7rem;
        align-items: center;
      }

      .turntable-mobile-progress input {
        width: 100%;
        min-height: 2.75rem;
        accent-color: #b6462f;
      }

      .turntable-mobile-time {
        min-width: 5.5rem;
        color: rgba(230, 220, 190, 0.74);
        font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
        font-size: 0.68rem;
        text-align: right;
      }

      .turntable-receiver[data-mobile-state="mini"] {
        left: 4.75rem;
        top: 31.5%;
        width: calc(100% - 9.5rem);
        min-height: 3.65rem;
        max-height: none;
        padding: 0.42rem 0.5rem;
        border-radius: 999px;
        background: rgba(8, 7, 5, 0.66);
        cursor: pointer;
      }

      .turntable-receiver[data-mobile-state="mini"] .turntable-playback {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "toggle title reopen";
        gap: 0.4rem;
      }

      .turntable-receiver[data-mobile-state="mini"] .turntable-mobile-collapse,
      .turntable-receiver[data-mobile-state="mini"] .turntable-mobile-heading,
      .turntable-receiver[data-mobile-state="mini"] .turntable-mobile-details,
      .turntable-receiver[data-mobile-state="mini"] .turntable-mobile-progress { display: none; }

      .turntable-receiver[data-mobile-state="mini"] .turntable-mobile-reopen {
        grid-area: reopen;
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        padding: 0;
      }

      .turntable-receiver[data-mobile-state="mini"] .turntable-playback__toggle {
        width: 2.75rem;
        height: 2.75rem;
      }

      .turntable-receiver[data-mobile-state="mini"] .turntable-playback__title {
        font-size: 0.7rem;
      }
    }

    @media (forced-colors: active) {
      .turntable-song-book-trigger:is(:hover, :focus-visible) {
        outline: 3px solid Highlight;
        outline-offset: -3px;
      }

      .turntable-song-book-trigger::after,
      .turntable-song-book-trigger:is(:hover, :focus-visible)::after {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .turntable-receiver { transition: none; }
      .turntable-mobile-launch::after { transition: none; }
      .scene--turntable.is-playing .turntable-indicator-overlay {
        animation: none;
        opacity: 0.18;
      }
      .turntable-song-book-trigger::after { transition: none; }
    }