/* Live activity controls sit between decorative crops from the supplied reference. */
.listening-view.same-different{position:relative;padding:28px 3% 24px}
.same-different>h1{font-size:clamp(36px,5vw,74px);width:67%;position:relative;margin-bottom:22px}
.same-different>h1:after{content:'';position:absolute;bottom:-8px;left:61%;right:0;height:6px;background:#d77b9d;transform:rotate(-1deg);border-radius:50%}
.same-different>.instruction,.same-different>.translation{max-width:64%}
.same-different>.instruction{font-family:'DM Mono',monospace;font-size:16px}
.same-different>.listening-meta>span{display:none}
.compare-mascot{position:absolute;right:4%;top:45px;width:23%;aspect-ratio:310/190;overflow:hidden;pointer-events:none}
.same-different>.listening-meta{position:relative;z-index:1}
.compare-mascot img{position:absolute;width:495.48%;max-width:none;height:auto;left:-275.806%;top:-81.579%}
.same-different .listening-deck{display:grid;grid-template-columns:31% minmax(0,1fr) 21%;gap:22px;text-align:left;background:#eee4cd;border:1px solid #647181;padding:24px 14px;margin-top:25px}
.same-different .listening-deck form{width:100%;min-width:0;max-width:none}
.compare-cassette{align-self:start;position:relative;width:100%;aspect-ratio:460/460;overflow:hidden}
.compare-cassette img{position:absolute;width:333.913%;max-width:none;height:auto;left:-14.13%;top:-95.652%}
.compare-tip{align-self:start;position:relative;width:100%;aspect-ratio:310/455;overflow:hidden}
.compare-tip img{position:absolute;width:495.484%;max-width:none;height:auto;left:-383.871%;top:-97.802%}
.compare-exercise-heading h2{display:inline-block;background:#dd91ae;color:#103e70;padding:7px 18px;transform:rotate(-4deg);font:600 20px 'Oswald',sans-serif;margin:5px 0 12px}
.compare-exercise-heading .instruction{font:15px/1.5 'DM Mono',monospace}
.same-different .signal-pair{gap:12px;margin:24px 0}
.same-different .signal-pair>div{min-width:0;max-width:none;border:1px solid #a59b88;border-radius:6px;background:#ded5c288;padding:12px 8px;text-align:center}
.same-different .signal-pair h2{font:500 15px 'DM Mono',monospace;margin:0}
.same-different .signal-pair button{border-radius:30px;background:#103e70;color:#fff0d2;min-width:65px}
.same-different .listening-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.same-different .listening-choices label{justify-content:center;padding:20px 8px;border:1px solid #103e70;border-radius:5px;font:600 23px 'Oswald',sans-serif;position:relative}
.same-different .listening-choices label:has(:checked){background:#e8c343;box-shadow:0 3px #103e70}
.same-different .listening-choices label:hover{background:#ecd88d}
.same-different .listening-choices label:focus-within{outline:3px solid #103e70;outline-offset:3px}
.same-different .action{display:block;margin:15px auto 0;background:#df97b0;color:#103e70;border-bottom:3px solid #103e70}
@media(max-width:1000px){.same-different .listening-deck{grid-template-columns:30% minmax(0,1fr)}.compare-tip{display:none}}
@media(max-width:650px){.same-different>h1{width:100%;font-size:38px}.compare-mascot{display:none}.same-different>.instruction,.same-different>.translation{max-width:100%}.same-different .listening-deck{grid-template-columns:1fr;padding:18px}.compare-cassette{max-width:230px;justify-self:center}.same-different .listening-choices label{font-size:20px}.same-different .signal-pair{gap:10px}}