.dhh { max-width: 1060px; }
.dhh h1 { font-size: clamp(32px, 6vw, 64px); letter-spacing: -.05em; }
.dhh header { margin-bottom: 24px; }
.dhh header p { margin: 0; color: #c8bdd8; }
.home { padding-top: clamp(48px, 12vh, 120px); }
.home h1 { margin-bottom: 32px; }
.match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 2vw, 24px); }
.mode { display: grid; align-items: end; min-height: clamp(120px, 24vw, 260px); padding: clamp(12px, 3vw, 32px); border: 1px solid #544366; border-radius: 8px; background: #21192c; color: inherit; font-size: clamp(21px, 5vw, 48px); font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
.mode:hover { border-color: var(--accent); background: #2c203c; }
.track { overflow: hidden; border: 1px solid #493957; border-radius: 8px; background: #19171e; }
.track:only-child { grid-column: 1 / -1; width: min(100%, 540px); justify-self: center; border-color: var(--accent); }
.track img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.track-info { padding: clamp(9px, 2vw, 20px); }
.track h2 { font-size: clamp(16px, 2.5vw, 28px); line-height: 1.1; overflow-wrap: anywhere; }
.track p { color: #c8bdd8; margin: 7px 0 14px; overflow-wrap: anywhere; }
.track-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.track-actions button { padding: 7px 9px; color: #f4f1e9; }
.track-actions .pick { background: var(--accent); border-color: var(--accent); color: #16101f; font-weight: 700; }
.track-actions .pick:hover { background: #ceb2ff; color: #16101f; }
.dhh .tools a, #watch { color: #c8bdd8; font-size: 12px; padding: 6px 9px; }
#preview { width: min(720px, calc(100% - 20px)); padding: clamp(10px, 3vw, 24px); }
#player iframe { display: block; width: 100%; height: auto; min-height: 200px; aspect-ratio: 16 / 9; margin: 14px 0; border: 0; }