:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #171717;
  background: #fff;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { overflow: hidden; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app { --header-top: 10px; --drawer-width: clamp(500px, 34vw, 730px); --ink: #171717; --drawer-bg: #fff; --drawer-ink: #171717; --rule: #171717; --hover: #f1f1f1; --active: #e8e8e8; --progress-fill: #171717; --progress-rest: #d1d1d1; position: relative; width: 100%; height: 100dvh; overflow: hidden; color: var(--ink); }
.app[data-palette="color"] { --ink: var(--color-ink, #20264e); --scene-bg: var(--color-paper, #f8f9ff); --drawer-bg: var(--color-primary, #3944d9); --drawer-ink: #fff; --rule: rgba(255,255,255,.75); --hover: rgba(255,255,255,.12); --active: rgba(255,255,255,.2); --progress-fill: var(--color-primary, #3944d9); --progress-rest: var(--color-soft, #d8dcf0); }
.main-surface { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--scene-bg, #fff); isolation: isolate; }
.wave-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.app[data-palette="mono"] .wave-canvas { filter: grayscale(1) contrast(2.4); }
.app[data-palette="mono"][data-effect="ink-ribbons"] .wave-canvas { filter: none; }
.app[data-palette="mono"][data-effect="silk"] .wave-canvas { filter: none; }
.app[data-palette="mono"][data-effect="halftone-wave"] .wave-canvas { filter: none; }
.app[data-effect="glowing-wave"] .wave-canvas { filter: none; }
.app[data-effect="nu-disco"] .wave-canvas { filter: none; }
.app[data-palette="mono"][data-effect="line-waves"] .wave-canvas { filter: none; }
.app[data-palette="mono"][data-effect="galaxy"] .main-surface,
.app[data-palette="mono"][data-effect="halftone-wave"] .main-surface { --scene-bg: #030305; }
.app[data-effect="glowing-wave"] .main-surface,
.app[data-effect="light-tunnel"] .main-surface,
.app[data-effect="ferrofluid"] .main-surface { --scene-bg: #000; }
.app[data-palette="mono"][data-effect="galaxy"],
.app[data-palette="mono"][data-effect="halftone-wave"],
.app[data-palette="mono"][data-effect="glowing-wave"],
.app[data-effect="ferrofluid"],
.app[data-effect="light-tunnel"] { --progress-fill: #fff; --progress-rest: #333; }
.app[data-palette="mono"][data-effect="galaxy"] .palette-choice,
.app[data-palette="mono"][data-effect="halftone-wave"] .palette-choice,
.app[data-palette="mono"][data-effect="glowing-wave"] .palette-choice,
.app[data-effect="ferrofluid"] .palette-choice,
.app[data-effect="light-tunnel"] .palette-choice { border-color: #fff; }
.app[data-palette="mono"][data-effect="galaxy"] .palette-choice[aria-pressed="true"],
.app[data-palette="mono"][data-effect="halftone-wave"] .palette-choice[aria-pressed="true"],
.app[data-palette="mono"][data-effect="glowing-wave"] .palette-choice[aria-pressed="true"],
.app[data-effect="ferrofluid"] .palette-choice[aria-pressed="true"],
.app[data-effect="light-tunnel"] .palette-choice[aria-pressed="true"] { outline-color: #fff; }
.light-pillar-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.beams-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.galaxy-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.nu-disco-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; filter: grayscale(1) invert(1); }
.particle-sand-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.light-tunnel-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.silk-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.ferrofluid-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.app.has-webgl-pillar[data-effect="light-pillar"] .wave-canvas { display: none; }
.app.has-webgl-pillar[data-effect="light-pillar"] .light-pillar-canvas { display: block; }
.app.has-webgl-beams[data-effect="beams"] .wave-canvas { display: none; }
.app.has-webgl-beams[data-effect="beams"] .beams-canvas { display: block; }
.app.has-webgl-galaxy[data-effect="galaxy"] .wave-canvas { display: none; }
.app.has-webgl-galaxy[data-effect="galaxy"] .galaxy-canvas { display: block; }
.app.has-webgl-nu-disco[data-effect="nu-disco"] .wave-canvas { display: none; }
.app.has-webgl-nu-disco[data-effect="nu-disco"] .nu-disco-canvas { display: block; }
.app.has-webgl-particle-sand[data-effect="glowing-wave"] .wave-canvas { display: none; }
.app.has-webgl-particle-sand[data-effect="glowing-wave"] .particle-sand-canvas { display: block; }
.app.has-webgl-light-tunnel[data-effect="light-tunnel"] .wave-canvas { display: none; }
.app.has-webgl-light-tunnel[data-effect="light-tunnel"] .light-tunnel-canvas { display: block; }
.app.has-webgl-silk[data-effect="silk"] .wave-canvas { display: none; }
.app.has-webgl-silk[data-effect="silk"] .silk-canvas { display: block; }
.app.has-webgl-ferrofluid[data-effect="ferrofluid"] .wave-canvas { display: none; }
.app.has-webgl-ferrofluid[data-effect="ferrofluid"] .ferrofluid-canvas { display: block; }
.app[data-effect="galaxy"] .wave-canvas { filter: none; }

.site-header { position: relative; z-index: 2; width: 100%; min-height: 78px; font-weight: 700; line-height: 1.15; }
.brand { position: absolute; top: var(--header-top); left: var(--header-top); margin: 0; font-size: clamp(23px, 1.55vw, 31px); font-weight: 700; letter-spacing: -.065em; line-height: 1; white-space: nowrap; }
.header-link { width: fit-content; border: 0; padding: 0; background: transparent; color: inherit; font-size: clamp(12px, .75vw, 16px); font-weight: 700; cursor: pointer; }
.header-link:hover, .header-link:focus-visible, .close-tracklist:hover, .close-tracklist:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.history-button { position: absolute; top: calc(var(--header-top) + 6px); left: 50%; transform: translateX(-50%); }
.tracklist-toggle { position: absolute; top: calc(var(--header-top) + 6px); left: 83.5%; }
.close-tracklist { position: absolute; z-index: 12; top: calc(var(--header-top) + 6px); left: 83.5%; visibility: hidden; color: var(--ink); transition: color .12s ease; }
.app.is-tracklist-open .close-tracklist { visibility: visible; color: var(--drawer-ink); transition-delay: .38s; }
.app.is-tracklist-open .tracklist-toggle { visibility: hidden; }
.signal-mark { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 3px; width: 32px; height: 20px; border: 0; padding: 0 0 3px; background: transparent; color: currentColor; cursor: pointer; }
.signal-toggle { position: absolute; z-index: 12; top: calc(var(--header-top) + 2px); left: calc(75.2% + 9px); color: var(--ink); transition: color .16s ease; }
.app.is-tracklist-open .signal-toggle { color: var(--drawer-ink); }
.signal-mark::after { position: absolute; bottom: 3px; width: 25px; height: 1px; background: currentColor; content: ''; transition: opacity .18s ease; }
.signal-mark i { display: block; width: 1px; height: var(--height); background: currentColor; opacity: 0; transform-origin: bottom; transition: opacity .18s ease, transform .1s ease-out; }
.app.is-playing .signal-mark::after { opacity: 0; }
.app.is-playing .signal-mark i { opacity: 1; }
.signal-mark:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.signal-mark i:nth-child(1) { --height: 2px; }.signal-mark i:nth-child(2) { --height: 12px; }.signal-mark i:nth-child(3) { --height: 2px; }.signal-mark i:nth-child(4) { --height: 3px; }.signal-mark i:nth-child(5) { --height: 6px; }.signal-mark i:nth-child(6) { --height: 9px; }.signal-mark i:nth-child(7) { --height: 2px; }
.palette-switch { position: absolute; z-index: 15; top: calc(var(--header-top) + 4px); right: 17px; display: flex; align-items: center; gap: 8px; }
.palette-choice { width: 16px; height: 16px; border: 1px solid #171717; padding: 0; cursor: pointer; }
.palette-choice[aria-pressed="true"] { outline: 1px solid #171717; outline-offset: 2px; }
.palette-choice:focus-visible { outline: 2px solid #171717; outline-offset: 3px; }
.palette-mono { background: linear-gradient(135deg, #fff 49%, #171717 50%); }
.palette-color { background: conic-gradient(#334db1, #91a779, #ae8da9, #a7bbc2, #334db1); }
.palette-color[hidden] { display: none; }

.player { position: absolute; z-index: 2; top: 50%; left: 0; display: grid; grid-template-columns: 23% 18% 24% 1fr 72px; align-items: center; width: 100%; min-height: 42px; padding: 0 clamp(28px, 4.25vw, 86px); transform: translateY(-50%); font-size: clamp(13px, .95vw, 20px); font-weight: 700; letter-spacing: -.045em; }
.player > * { min-width: 0; }
.track-title, .track-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-title { padding-right: 28px; }
.track-artist { padding-right: 25px; }
.player-time { white-space: nowrap; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 30px; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.icon-button:hover { opacity: .62; }
.icon-button:focus-visible, .header-link:focus-visible, .track-item:focus-visible, .close-tracklist:focus-visible, .biography-contact a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.icon-button svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.main-play { justify-self: start; }
.main-play svg { width: 18px; height: 18px; }
.main-play .icon-pause { display: none; }
.is-playing .main-play .icon-play { display: none; }
.is-playing .main-play .icon-pause { display: block; }
.transport { display: flex; justify-content: flex-end; gap: 7px; }
.skip-button svg { width: 18px; height: 18px; }

.progress-wrap { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 14px; }
.progress { display: block; width: 100%; height: 14px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 0; background-image: linear-gradient(to right, var(--progress-fill) 0 var(--progress, 0%), var(--progress-rest) var(--progress, 0%) 100%); background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer; touch-action: none; }
.progress::-webkit-slider-thumb { width: 0; height: 14px; appearance: none; -webkit-appearance: none; border: 0; background: transparent; }
.progress::-moz-range-thumb { width: 0; height: 14px; border: 0; background: transparent; }
.progress:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.player-message { position: absolute; z-index: 5; bottom: 36px; left: 4.25vw; font-size: 14px; font-weight: 700; }
.player-message:empty { display: none; }

.biography-page { position: absolute; z-index: 1; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #171717; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: opacity .38s ease, transform .5s ease, visibility 0s .5s; }
.app.is-biography-open .biography-page { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.app.is-biography-open .player, .app.is-biography-open .progress-wrap, .app.is-biography-open .player-message { visibility: hidden; }
.app.is-biography-open .site-header, .app.is-biography-open .signal-toggle { color: #171717; }
.app.is-biography-open { --drawer-bg: #fff; --drawer-ink: #171717; --rule: #171717; --hover: #f1f1f1; --active: #e8e8e8; }
.biography-layout { --biography-left: clamp(18px, 1.3vw, 28px); min-height: 100%; padding: clamp(94px, 10vh, 132px) clamp(22px, 3vw, 56px) 8vh var(--biography-left); }
.biography-intro { display: grid; grid-template-columns: minmax(0, 53%) minmax(0, 47%); grid-template-areas: 'heading portrait' 'copy portrait' 'contact portrait'; align-content: start; padding-bottom: clamp(150px, 17vh, 250px); }
.biography-heading { grid-area: heading; align-self: end; justify-self: start; width: 100%; margin-top: clamp(70px, 12vh, 170px); padding-right: 5vw; text-align: left; }
.biography-kicker { margin: 0 0 20px; font-size: clamp(11px, .7vw, 14px); font-weight: 700; letter-spacing: -.025em; }
.biography-heading h2 { margin: 0 0 0 calc(var(--header-top) - var(--biography-left)); font-size: clamp(68px, 8.5vw, 154px); font-weight: 400; letter-spacing: -.075em; line-height: .88; text-transform: uppercase; }
.biography-lead { margin: clamp(28px, 5vh, 58px) 0 0; font-size: clamp(19px, 1.75vw, 30px); font-weight: 700; letter-spacing: -.045em; line-height: 1.1; }
.biography-portrait { grid-area: portrait; position: sticky; top: clamp(94px, 10vh, 132px); align-self: start; height: calc(100dvh - clamp(94px, 10vh, 132px) - 5vh); min-height: 500px; margin: 0; overflow: hidden; background: #202020; }
.biography-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.biography-copy { grid-area: copy; max-width: 65ch; margin-top: clamp(52px, 8vh, 108px); padding-right: clamp(28px, 5vw, 100px); }
.biography-copy p { margin: 0 0 1.5em; font-size: clamp(15px, .94vw, 18px); font-weight: 600; letter-spacing: -.025em; line-height: 1.38; }
.biography-contact { grid-area: contact; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: clamp(48px, 10vh, 130px); padding-bottom: 5vh; font-size: clamp(14px, .88vw, 17px); font-weight: 700; letter-spacing: -.025em; }
.biography-contact h3 { margin: 0 0 15px; font-size: inherit; }
.biography-contact a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.biography-contact a:hover { text-decoration: none; }
.biography-work { min-width: 0; }
.biography-work-heading { display: flex; justify-content: center; border-top: 1px solid currentColor; padding: 13px 0 22px; }
.biography-work-heading h3 { margin: 0; font-size: clamp(34px, 4.1vw, 78px); font-weight: 400; letter-spacing: -.065em; line-height: 1; text-transform: uppercase; }
.biography-work-list { display: flex; flex-direction: column; gap: clamp(110px, 17vh, 260px); padding-top: clamp(50px, 7vh, 110px); }
.biography-work-item { display: grid; grid-template-columns: minmax(0, 56%) minmax(0, 44%); align-items: stretch; min-width: 0; margin: 0; }
.biography-work-item:nth-child(even) { grid-template-columns: minmax(0, 44%) minmax(0, 56%); }
.biography-work-item:nth-child(even) .work-media { grid-column: 2; grid-row: 1; }
.biography-work-item:nth-child(even) .work-caption { grid-column: 1; grid-row: 1; }
.work-media { min-width: 0; align-self: start; }
.work-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; object-fit: contain; }
.work-caption { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 clamp(22px, 4.6vw, 100px); }
.work-caption h4 { margin: 0; font-size: clamp(42px, 5vw, 108px); font-weight: 400; letter-spacing: -.07em; line-height: .9; text-transform: uppercase; }

.app[data-palette="mono"]:not(.is-biography-open) .site-header,
.app[data-palette="mono"]:not(.is-biography-open) .player,
.app[data-palette="mono"]:not(.is-biography-open) .player-message,
.app[data-palette="mono"]:not(.is-biography-open) .signal-toggle {
  color: #fff;
  mix-blend-mode: difference;
}

.app[data-palette="color"]:not(.is-biography-open) .player-message { color: var(--color-inverse-ink); mix-blend-mode: difference; }
.app[data-palette="color"]:not(.is-biography-open) .brand,
.app[data-palette="color"]:not(.is-biography-open) .track-title,
.app[data-palette="color"]:not(.is-biography-open) .main-play,
.app[data-palette="color"]:not(.is-biography-open) .skip-button,
.app[data-palette="color"]:not(.is-biography-open) .tracklist-toggle { color: var(--color-inverse-primary); mix-blend-mode: difference; }
.app[data-palette="color"]:not(.is-biography-open) .history-button,
.app[data-palette="color"]:not(.is-biography-open) .track-artist,
.app[data-palette="color"]:not(.is-biography-open) .player-time { color: var(--color-inverse-secondary); mix-blend-mode: difference; }
.app[data-palette="color"]:not(.is-biography-open):not(.is-tracklist-open) .signal-toggle { color: var(--color-inverse-secondary); mix-blend-mode: difference; }

.tracklist { position: absolute; z-index: 10; top: 0; right: 0; display: flex; flex-direction: column; width: var(--drawer-width); height: 100%; overflow: hidden; border-left: 1px solid var(--rule); background: var(--drawer-bg); color: var(--drawer-ink); transform: translate3d(100%, 0, 0); transition: transform .52s ease-in-out; will-change: transform; }
.app.is-tracklist-open .tracklist { transform: translate3d(0, 0, 0); }
.tracklist-header, .tracklist-columns { opacity: 0; transition: opacity .25s ease; }
.app.is-tracklist-open .tracklist-header, .app.is-tracklist-open .tracklist-columns { opacity: 1; transition-delay: .2s; }
.tracklist-header { display: flex; justify-content: flex-end; align-items: start; min-height: 45px; padding: 5px 14px 0; }
.tracklist-columns { display: grid; grid-template-columns: 22% 1fr; padding: 0 14px 7px; font-size: clamp(11px, .75vw, 15px); font-weight: 700; }
.tracklist-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8888 transparent; }
.tracklist-items { margin: 0; padding: 0; list-style: none; }
.track-item { display: grid; grid-template-columns: 22% 1fr 23px; grid-template-rows: auto auto; row-gap: 3px; width: 100%; min-height: 58px; border: 0; border-bottom: 1px solid var(--rule); padding: 7px 14px 6px; background: transparent; color: var(--drawer-ink); text-align: left; cursor: pointer; }
.track-item > span { opacity: 0; transform: translateX(16px); transition: opacity .36s ease, transform .42s cubic-bezier(.24,.72,.28,1); }
.app.is-tracklist-open .track-item > span { opacity: 1; transform: translateX(0); }
.app.is-tracklist-open .list-title { transition-delay: var(--reveal-delay); }
.app.is-tracklist-open .list-duration { transition-delay: calc(var(--reveal-delay) + 35ms); }
.app.is-tracklist-open .list-artist { transition-delay: calc(var(--reveal-delay) + 70ms); }
.app.is-tracklist-open .list-icon { transition-delay: calc(var(--reveal-delay) + 100ms); }
.track-item:hover, .track-item:focus-visible { background: var(--hover); }
.track-item.is-active { background: var(--active); }
.list-title { grid-column: 1 / 3; overflow: hidden; padding-right: 6px; font-size: clamp(12px, .85vw, 17px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; overflow-wrap: anywhere; }
.list-duration { grid-row: 2; font-size: clamp(10px, .68vw, 13px); font-weight: 700; }
.list-artist { grid-column: 2; grid-row: 2; overflow: hidden; font-size: clamp(11px, .83vw, 16px); font-weight: 700; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.list-icon { grid-column: 3; grid-row: 1 / 3; align-self: start; justify-self: center; margin-top: 2px; }
.list-icon svg { width: 16px; height: 16px; fill: currentColor; }

.intro-screen { position: absolute; z-index: 30; inset: 0; overflow: hidden; background: #101010; color: #fff; isolation: isolate; transition: background 1.1s ease, opacity 1.45s ease; }
.intro-screen[hidden] { display: none; }
.intro-screen[data-stage="visual"], .intro-screen[data-stage="welcome"] { background: #fff; color: #151515; }
.intro-screen.is-leaving { opacity: 0; pointer-events: none; }
.intro-word-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.intro-screen[data-stage="visual"] .intro-word-canvas { opacity: 1; }
.intro-story { position: absolute; top: 50%; left: 50%; width: min(840px, calc(100% - 42px)); text-align: center; transform: translate(-50%, -50%); transition: opacity .65s ease, transform .72s cubic-bezier(.2,.7,.2,1); }
.intro-line { margin: 0 0 16px; font-size: clamp(15px, 1.2vw, 22px); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; opacity: 0; animation: intro-line-in .8s cubic-bezier(.2,.7,.2,1) var(--line-delay) forwards; }
.intro-line:last-child { margin-bottom: 0; }
@keyframes intro-line-in { from { opacity: 0; transform: translateY(19px); } to { opacity: 1; transform: translateY(0); } }
.intro-screen[data-stage="ready"] .intro-story, .intro-screen[data-stage="visual"] .intro-story, .intro-screen[data-stage="welcome"] .intro-story { opacity: 0; transform: translate(-50%, calc(-50% - 48px)); pointer-events: none; }
.intro-listen { position: absolute; top: 50%; left: 50%; min-width: 210px; border: 1px solid currentColor; padding: 13px 22px; background: transparent; color: inherit; font-size: clamp(13px, .9vw, 17px); font-weight: 700; letter-spacing: -.035em; text-align: center; cursor: pointer; opacity: 0; transform: translate(-50%, calc(-50% + 17px)); pointer-events: none; transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.intro-listen::after { position: absolute; top: 50%; right: 12%; left: 12%; height: 1px; background: currentColor; content: ''; transform: scaleX(0); transition: transform .3s ease; pointer-events: none; }
.intro-listen:hover::after, .intro-listen:focus-visible::after { transform: scaleX(1); }
.intro-listen:focus-visible, .intro-enter:focus-visible, .intro-play-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.intro-screen[data-stage="ready"] .intro-listen { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; transition-delay: .35s; }
.intro-screen[data-stage="visual"] .intro-listen, .intro-screen[data-stage="welcome"] .intro-listen { visibility: hidden; }
.intro-play-toggle, .intro-enter { position: absolute; z-index: 2; top: 50%; border: 0; padding: 5px 0; background: transparent; color: inherit; font-size: clamp(14px, .9vw, 18px); font-weight: 700; letter-spacing: -.035em; text-transform: lowercase; cursor: pointer; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity 1s ease; }
.intro-play-toggle { left: clamp(13px, 2vw, 45px); }
.intro-enter { right: clamp(13px, 2vw, 45px); }
.intro-play-toggle::after, .intro-enter::after { position: absolute; top: 50%; right: -2px; left: -2px; height: 1px; background: currentColor; content: ''; transform: scaleX(0); transform-origin: center; transition: transform .24s ease; pointer-events: none; }
.intro-play-toggle:hover::after, .intro-play-toggle:focus-visible::after,
.intro-enter:hover::after, .intro-enter:focus-visible::after { transform: scaleX(1); }
.intro-screen[data-stage="visual"].can-enter .intro-play-toggle,
.intro-screen[data-stage="visual"].can-enter .intro-enter { opacity: 1; pointer-events: auto; }
.intro-welcome { position: absolute; top: 50%; left: 50%; width: min(800px, calc(100% - 36px)); text-align: center; opacity: 0; transform: translate(-50%, calc(-50% + 30px)); pointer-events: none; transition: opacity 1.25s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.intro-welcome h2 { margin: 0; font-size: clamp(46px, 7.5vw, 120px); font-weight: 400; letter-spacing: -.08em; line-height: .95; text-transform: uppercase; }
.intro-welcome p { margin: 24px 0 0; font-size: clamp(14px, 1.1vw, 20px); font-weight: 500; letter-spacing: -.025em; }
.intro-screen.show-welcome .intro-welcome { opacity: 1; transform: translate(-50%, -50%); }
.intro-screen.hide-welcome .intro-welcome { opacity: 0; transform: translate(-50%, calc(-50% - 54px)); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 1350px) {
  .app { --drawer-width: clamp(390px, 40vw, 540px); }
}

@media (max-width: 900px) {
  .player { grid-template-columns: 12% 34% 25% 1fr 75px; padding: 0 5%; }
  .transport { gap: 3px; }
  .biography-intro { grid-template-columns: minmax(0, 52%) minmax(0, 48%); }
  .biography-layout { padding-right: 20px; }
  .biography-heading h2 { font-size: clamp(58px, 8vw, 100px); }
  .biography-copy { padding-right: 25px; }
}

@media (max-width: 700px) {
  .intro-line { margin-bottom: 18px; font-size: 15px; }
  .intro-play-toggle, .intro-enter { font-size: 13px; }
  .app { --header-top: 5px; --drawer-width: 100%; }
  .site-header { min-height: 65px; }
  .brand { font-size: clamp(20px, 4.9vw, 26px); }
  .site-header .history-button { display: block; left: 50%; font-size: 13px; }
  .signal-toggle { right: 101px; left: auto; }
  .tracklist-toggle, .close-tracklist { right: 17px; left: auto; font-size: 15px; }
  .palette-switch { top: 45px; right: 17px; }
  .biography-layout { --biography-left: 18px; padding: 110px 18px 64px; }
  .biography-intro { grid-template-columns: 1fr; grid-template-areas: 'heading' 'portrait' 'copy' 'contact'; padding-bottom: 105px; }
  .biography-heading { margin-top: 14px; padding-right: 0; }
  .biography-heading h2 { font-size: clamp(58px, 14vw, 96px); }
  .biography-lead { margin-top: 23px; }
  .biography-portrait { position: relative; top: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; margin-top: 38px; }
  .biography-copy { margin-top: 48px; padding-right: 0; }
  .biography-contact { margin-top: 55px; }
  .biography-work-heading { padding-bottom: 16px; }
  .biography-work-heading h3 { font-size: clamp(34px, 9vw, 60px); }
  .biography-work-list { gap: 85px; padding-top: 36px; }
  .biography-work-item, .biography-work-item:nth-child(even) { display: flex; flex-direction: column; }
  .biography-work-item:nth-child(even) .work-media, .biography-work-item:nth-child(even) .work-caption { grid-column: auto; grid-row: auto; }
  .work-caption { justify-content: flex-start; padding: 22px 0 0; }
  .work-caption h4 { font-size: clamp(48px, 12vw, 84px); }
  .player { top: 49%; grid-template-columns: 38px 1fr 64px; grid-template-rows: auto auto; column-gap: 8px; row-gap: 12px; padding: 0 18px; font-size: 14px; }
  .main-play { grid-column: 1; grid-row: 1 / 3; }
  .track-title { grid-column: 2 / 4; grid-row: 1; padding-right: 0; }
  .track-artist { grid-column: 2; grid-row: 2; padding-right: 0; }
  .player-time { grid-column: 3; grid-row: 2; font-size: 13px; text-align: right; }
  .transport { position: absolute; top: 74px; right: 16px; gap: 7px; }
  .tracklist-header { min-height: 52px; }
  .tracklist-columns { padding-bottom: 7px; }
  .track-item { min-height: 58px; }
  .progress { background-size: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-line { animation-duration: .01ms; animation-delay: 0ms; }
  .intro-screen, .intro-word-canvas, .intro-story, .intro-listen, .intro-enter, .intro-play-toggle, .intro-welcome { transition-duration: .01ms; transition-delay: 0ms; }
  .tracklist, .tracklist-header, .tracklist-columns { transition-duration: .01ms; transition-delay: 0ms; }
  .track-item > span { transition-duration: .01ms; transition-delay: 0ms !important; }
  .biography-page { transition-duration: .01ms; transition-delay: 0ms; }
}