/* Layrs palette (rules: Layrs/docs/website/DESIGN.md). Black is the ground of every section; three colours on it:
   lime #c7df5f (the accent, --accent; the same as the app's Theme.lime), lavender #CBB3E8, and white #F4F5EF (--ink).
   - Lime is the one accent: the action and playback, nothing else. Headlines and text are white.
   - No coloured section backgrounds (Vik, 26 Oct 2026).
   - Where the brand shows three layers (the logo's stripes, the mixer's three tracks) they run lime, lavender, white. */
:root { --lavender: #CBB3E8; --lavender-ink: #140F1C; }

::selection { background: var(--lavender); color: var(--lavender-ink); }

/* the wordmark answers in the brand's colours, letter by letter: lime, lavender, lime, lavender, lime */
.hero-word .sonic-letter:nth-child(odd):hover, .hero-word .sonic-letter:nth-child(odd).is-sounding { color: var(--accent); }
.hero-word .sonic-letter:nth-child(even):hover, .hero-word .sonic-letter:nth-child(even).is-sounding { color: var(--lavender); }

/* the mixer: three tracks, three layer colours */
[data-ui] .lane:nth-child(3n+1) { --lane: var(--accent); --wave-on: #66772b; --wave-played: #c7df5f; }
[data-ui] .lane:nth-child(3n+2) { --lane: var(--lavender); --wave-on: #5f5270; --wave-played: #cbb3e8; }
[data-ui] .lane:nth-child(3n) { --lane: var(--ink); --wave-on: #6f706b; --wave-played: #f4f5ef; }
[data-ui] .lane-on[aria-pressed=true]::before { background: var(--lane); }
[data-ui] .lane-level input { accent-color: var(--lane); }
[data-ui] .lane-meter i { background: var(--lane); }