:root{color-scheme:dark;--purple:#a855f7}*{box-sizing:border-box}body{margin:0;background:#000;color:#fff;font:16px/1.6 Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #d8b4fe;outline-offset:5px}header,main,footer{max-width:1300px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;padding:25px 5%;border-bottom:1px solid var(--purple)}.brand{font-size:13px;font-weight:800;letter-spacing:2px}.brand span{color:#c084fc}nav{display:flex;flex-wrap:wrap;gap:20px;font-size:12px}nav a{min-height:44px;display:flex;align-items:center}.intro{padding:80px 5% 45px}.eyebrow{color:#c084fc;font-size:11px;letter-spacing:3px;text-transform:uppercase}h1{font-size:clamp(44px,7vw,86px);line-height:1.08;letter-spacing:-3px;margin:22px 0}h1 span{color:#c084fc}p{color:#b5aabd}.intro p{max-width:580px}.genres{padding:0 5% 65px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.genre{background:#000;color:#fff;border:1px solid var(--purple);border-radius:14px;padding:35px;text-align:left;min-height:240px;transition:transform .2s,background .2s}.genre:hover{transform:translateY(-4px);background:#a855f710}.genre[aria-pressed="true"]{background:#a855f71c;outline:2px solid var(--purple)}.genre small{color:#c084fc;letter-spacing:2px}.genre strong{display:block;font-size:36px;line-height:1.15;margin:26px 0 15px}.genre span{color:#b5aabd;font-size:14px;display:block}.genre b{display:block;color:#d8b4fe;font-size:13px;margin-top:25px}.selection{margin:0 5% 60px;border:1px solid var(--purple);border-radius:14px;padding:35px;scroll-margin-top:30px}.selection h2{font-size:32px;margin:10px 0}.selection[hidden]{display:none}.button{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--purple);padding:12px 20px;border-radius:7px;font-size:13px;margin-top:12px}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;border-top:1px solid var(--purple);padding:25px 5%;font-size:12px;color:#b5aabd}@media(max-width:650px){header{padding:16px 5%;gap:12px}.brand{font-size:11px}nav{width:100%;gap:10px;font-size:11px;justify-content:space-between}.intro{padding-top:45px}h1{letter-spacing:-1px}.genres{grid-template-columns:1fr;gap:16px}.genre{min-height:210px;padding:25px}.genre strong{font-size:30px}.selection{padding:25px}}@media(prefers-reduced-motion:reduce){.genre{transition:none}}