@media (min-width: 901px) {
  header { position: sticky; top: 0; z-index: 20; background: #fffaf4ef; backdrop-filter: blur(16px); }
}

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #75a8ff; outline-offset: 3px; }
.moods a, .feature, .row, .read { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.moods a:hover { border-color: #75a8ff; box-shadow: 0 8px 20px #0756d71a; }
.feature { position: relative; overflow: hidden; isolation: isolate; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 18px 30px #13253633; }
.feature::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 25%, #fff2 45%, transparent 62%); transform: translateX(-130%); transition: transform .65s ease; }
.feature:hover::after { transform: translateX(130%); }
.row:hover { transform: translateX(4px); border-color: #b9d2ff; box-shadow: 0 8px 18px #2a1a120d; }
.row i { border-radius: 7px 0 0 7px; }
.read:hover { box-shadow: 0 8px 18px #0756d722; }
.hero form:focus-within { box-shadow: 0 8px 24px #0756d74a; }
.hero button:hover { background: #e94731; }
.moods { background: #fffcf8; box-shadow: 0 12px 32px #5a331008; }
.hero h1 { letter-spacing: -.025em; }
.layout aside { box-shadow: 0 14px 30px #5836100c; transition: box-shadow .2s ease; }
.layout aside:hover { box-shadow: 0 18px 36px #58361018; }
.bottom { color: #6d5c50; }
.song-page .song-card { box-shadow: 0 14px 35px #2a1a1210; }