/* Next Token revisions, 25 October 2026: 04 / The soundtrack (Creative).
   Colours come from the page: paper, surface, green ink, muted, accent. */
.bw-tracks{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.bw-track{background:var(--surface);display:grid;grid-template-rows:auto 1fr;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s ease}
.bw-track.is-playing{outline-color:var(--accent)}
.bw-track-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-deep)}
.bw-track-art img{width:100%;height:100%;object-fit:cover;display:block}
.bw-track-play{position:absolute;left:16px;bottom:16px;width:56px;height:56px;border-radius:50%;border:0;padding:0;background:var(--accent);color:#fbfaf6;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.28);transition:background-color .2s ease}
.bw-track-play[hidden]{display:none}
.bw-track-play svg{width:20px;height:20px;fill:currentColor}
.bw-track-play .i-pause,.bw-track.is-playing .bw-track-play .i-play{display:none}
.bw-track.is-playing .bw-track-play .i-pause{display:inline}
@media (hover:hover) and (pointer:fine){.bw-track-play:hover{background:color-mix(in oklch,var(--accent) 82%,var(--fg))}}
.bw-track-play:focus-visible,.bw-wave:focus-visible{outline:2px solid var(--fg)!important;outline-offset:3px}
.bw-track-body{padding:20px 22px 22px;display:grid;gap:8px;align-content:start}
.bw-track-body h3{margin:0;font-size:22px}
.bw-track-meta{margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.bw-track-brief{margin:0;font-size:16px;line-height:1.5}
/* Unplayed bars keep 3:1 against the card; played bars take the accent. */
.bw-wave{display:flex;align-items:center;gap:2px;height:56px;margin-top:10px;cursor:pointer;touch-action:none}
.bw-wave[hidden]{display:none}
.bw-wave i{flex:1;height:calc(var(--h) * 100%);min-height:3px;background:color-mix(in srgb,#4c4f55 62%,transparent);border-radius:1px}
.bw-wave i.on{background:var(--accent)}
.bw-track-time{margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.bw-track-audio{width:100%;margin-top:8px}
@media (max-width:1100px){.bw-tracks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bw-tracks{grid-template-columns:1fr}}