.listening-levels, .listening-formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }.listening-levels label, .listening-formats label { cursor: pointer; }.listening-levels input, .listening-formats input { position: absolute; opacity: 0; }.listening-levels span, .listening-formats span { min-height: 105px; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }.listening-levels strong, .listening-formats strong { font-size: 15px; }.listening-levels small, .listening-formats small { margin-top: 7px; color: var(--muted); font-size: 11px; }.listening-levels input:checked + span, .listening-formats input:checked + span { color: #8b6100; background: #fff4d6; border-color: #d9a52c; box-shadow: inset 0 0 0 1px #d9a52c; }.speed-section { max-width: 600px; }.speed-value { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }.speed-value output { color: #8b6100; font-size: 24px; font-weight: 800; }.speed-value span { color: var(--muted); font-size: 12px; }.speed-section input[type="range"] { width: 100%; accent-color: #d9a52c; }.speed-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.play-count { margin-top: 30px; padding: 15px; background: #fff7df; border: 1px solid #edd7a0; border-radius: 11px; color: #775602; font-size: 14px; }.play-count p { margin: 0; }
@media (max-width: 650px) { .listening-levels, .listening-formats { grid-template-columns: repeat(2, 1fr); }.listening-levels span, .listening-formats span { min-height: 88px; } }