html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
.snapshot-nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: 1rem 3rem; background: hsl(var(--background) / .8); backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
.snapshot-brand { margin-right: auto; }
#snapshot-menu { display: flex; }
.snapshot-nav button { padding: .4rem; }
.snapshot-nav [data-menu] { display: none; }
.snapshot-player audio { display: none; }
.snapshot-player { color: hsl(var(--foreground)); }
.snapshot-track-title { font-size: clamp(.7rem,.95vw,.875rem); line-height: 1.375; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-track-title { display: flex; align-items: center; gap: .375rem; }
.snapshot-track-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-track-title svg { width: .75rem; height: .75rem; flex-shrink: 0; }
.snapshot-seek { display: block; width: 100%; height: 8px; position: relative; border-radius: 999px; background: hsl(var(--foreground) / .5); touch-action: none; }
.snapshot-progress { position: absolute; inset: 0 auto 0 0; width: var(--progress,0%); background: hsl(var(--foreground)); border-radius: inherit; }
.snapshot-thumb { position: absolute; left: var(--progress,0%); top: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border: 2px solid hsl(var(--foreground)); background: hsl(var(--background)); border-radius: 50%; }
.snapshot-controls { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.snapshot-controls > div { display: flex; align-items: center; gap: .75rem; }
.snapshot-controls button, .snapshot-controls a { font-size: 1rem; line-height: 1.25; }
.snapshot-controls [data-play] { font-size: 1.3rem; color: hsl(var(--foreground)); }
.snapshot-controls svg, .snapshot-tracks svg { display: block; width: 1rem; height: 1rem; }
.snapshot-controls [data-play] svg { width: 1.25rem; height: 1.25rem; }
.snapshot-controls [data-play] [data-icon=pause], .snapshot-controls [data-playing=true] [data-icon=play] { display: none; }
.snapshot-controls [data-playing=true] [data-icon=pause] { display: block; }
.snapshot-controls button, .snapshot-controls a, .snapshot-tracks li { transition: color .15s, background-color .15s; }
.snapshot-controls button:hover { color: #eab308; }
.snapshot-player button:focus-visible, .snapshot-player a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
html.light #compositions { color: hsl(var(--foreground)); }
html.light [class~="!text-white"] { color: hsl(var(--foreground)) !important; }
.snapshot-tracks { list-style: none; padding: 0; font-size: .75rem; counter-reset: track; }
.snapshot-tracks li { display: flex; align-items: center; gap: .25rem; padding: .375rem .5rem; margin-top: .125rem; line-height: 1rem; border-radius: .25rem; color: hsl(var(--muted-foreground)); counter-increment: track; }
.snapshot-tracks li:hover, .snapshot-tracks li:focus-within { color: hsl(var(--foreground)); background: hsl(var(--foreground) / .05); }
.snapshot-tracks li::before { color: hsl(var(--muted-foreground)); }
.snapshot-tracks li::before { content: counter(track,decimal-leading-zero); flex: 0 0 1.25rem; }
.snapshot-tracks li > button { text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-tracks li:has([aria-current=true]) { color: hsl(var(--foreground)); background: hsl(var(--foreground) / .1); }
#contact .group\/emails { margin-left: 0 !important; margin-top: 1rem !important; }
#contact h2 { font-size: clamp(2rem, 8vw, 7rem) !important; white-space: normal; }
#contact a[href^="mailto:"] { font-size: clamp(1.1rem, 3.5vw, 3.5rem) !important; overflow-wrap: anywhere; }
@media (max-width: 1279px) {
  .snapshot-nav { flex-wrap: wrap; padding: 1rem 1.5rem; }
  .snapshot-nav [data-menu] { display: block; }
  #snapshot-menu { display: none; flex-basis: 100%; order: 4; }
  #snapshot-menu.open { display: flex; flex-direction: column; gap: 1rem; margin-left: 0; }
}
@media (max-width: 639px) {
  .group\/grid-offset { margin-top: 0 !important; }
  #compositions .mb-20 { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }