:root { color: #111; background: #f8f6f4; font-family: 'Neue Montreal', Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 0 112px; background: #f8f6f4; }
button, a { font: inherit; }
.repertoire-header { align-items: center; display: flex; justify-content: space-between; padding: 24px clamp(20px, 4vw, 64px); }
.repertoire-brand { color: #a30008; font-size: 14px; font-weight: 800; letter-spacing: -.07em; line-height: .77; text-decoration: none; }
.repertoire-back { border-bottom: 1px solid currentColor; color: #111; font-family: 'Roboto Mono', monospace; font-size: 12px; padding-bottom: 3px; text-decoration: none; text-transform: uppercase; }
.repertoire-intro, .repertoire-content { margin: 0 auto; max-width: 1280px; padding-left: clamp(20px, 7vw, 120px); padding-right: clamp(20px, 7vw, 120px); }
.repertoire-intro { padding-bottom: clamp(72px, 12vw, 160px); padding-top: clamp(72px, 11vw, 150px); }
.repertoire-kicker { color: #a30008; font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; margin: 0 0 20px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(43px, 7.7vw, 108px); font-weight: 400; letter-spacing: -.07em; line-height: .88; margin-bottom: 54px; max-width: 1050px; }
h1 em { color: #a30008; font-style: normal; }
.repertoire-instructions { border-left: 2px solid #a30008; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.25; max-width: 710px; padding-left: 22px; }
.repertoire-instructions p { margin-bottom: 14px; }.repertoire-instructions p:last-child { margin-bottom: 0; }
.repertoire-content { border-top: 1px solid #d8d1cd; padding-bottom: 50px; padding-top: 48px; }
.repertoire-list-heading { align-items: flex-end; display: grid; grid-template-columns: 1fr auto; margin-bottom: 30px; }.repertoire-list-heading .repertoire-kicker { grid-column: 1 / -1; }
h2 { font-size: clamp(34px, 5vw, 65px); font-weight: 400; letter-spacing: -.07em; line-height: .9; margin-bottom: 0; }
.repertoire-legend { display: flex; font-family: 'Roboto Mono', monospace; font-size: 11px; gap: 18px; text-transform: uppercase; }.repertoire-legend span { align-items: center; display: flex; gap: 7px; }
.repertoire-list { border-top: 1px solid #d8d1cd; list-style: none; margin: 0; padding: 0; }
.repertoire-song { align-items: center; border-bottom: 1px solid #d8d1cd; display: flex; gap: 18px; justify-content: space-between; min-height: 77px; padding: 14px 0; transition: background .18s ease; }.repertoire-song[data-selection='wanted'] { background: #eaf5eb; }.repertoire-song[data-selection='avoid'] { background: #fae8e8; }
.repertoire-song__label { align-items: baseline; display: flex; font-size: clamp(16px, 1.8vw, 22px); gap: 14px; letter-spacing: -.035em; margin: 0; }.repertoire-song__label b { font-weight: 700; }.repertoire-song__number { color: #a30008; font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 0; min-width: 25px; }
.repertoire-song__controls { display: flex; flex: 0 0 auto; gap: 9px; }.repertoire-mark { appearance: none; background: #f4dfdf; border: 1px solid rgba(163, 0, 8, .2); border-radius: 50%; display: inline-block; height: 27px; padding: 0; width: 27px; }.repertoire-mark--wanted { background: #ddf0df; border-color: rgba(15, 117, 44, .25); }.repertoire-mark--avoid { background: #f7dede; border-color: rgba(163, 0, 8, .25); }.repertoire-song__controls .repertoire-mark { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }.repertoire-song__controls .repertoire-mark[aria-pressed='true'] { box-shadow: inset 0 0 0 7px #fff; transform: scale(1.14); }.repertoire-mark:focus-visible, .repertoire-action:focus-visible, .repertoire-back:focus-visible, .repertoire-brand:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.repertoire-actions { background: rgba(248, 246, 244, .94); border-top: 1px solid #d8d1cd; bottom: 0; display: flex; gap: 8px; justify-content: center; left: 0; padding: 17px 20px; position: fixed; right: 0; z-index: 5; }.repertoire-action { background: #a30008; border: 1px solid #a30008; color: white; cursor: pointer; font-family: 'Roboto Mono', monospace; font-size: 12px; min-width: min(280px, 46vw); padding: 16px 24px; text-transform: uppercase; }.repertoire-action--secondary { background: transparent; color: #111; }.repertoire-action:hover { background: #111; border-color: #111; color: #fff; }.repertoire-status { bottom: 84px; font-family: 'Roboto Mono', monospace; font-size: 12px; left: 50%; margin: 0; position: fixed; transform: translateX(-50%); z-index: 6; }
@media (max-width: 620px) { body { padding-bottom: 133px; }.repertoire-header { padding-top: 20px; }.repertoire-intro { padding-top: 64px; }.repertoire-list-heading { align-items: flex-start; display: block; }.repertoire-legend { margin-top: 25px; }.repertoire-song { align-items: flex-start; }.repertoire-song__label { line-height: 1.1; }.repertoire-song__controls { gap: 7px; }.repertoire-actions { padding: 12px; }.repertoire-action { min-width: 0; padding: 15px 10px; width: 50%; }.repertoire-status { bottom: 100px; text-align: center; width: 90%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }