/* Shared by stage 1 of every recording; the global navigation is not restyled. */
.archive-first-listen{position:relative;padding:24px 3.5% 20px}
.archive-first-listen>h1{width:76%;font-family:'Oswald',Impact,'Arial Narrow',sans-serif;font-size:clamp(34px,5vw,74px);letter-spacing:-.015em;position:relative;margin:0 0 15px}
.archive-first-listen>h1::after{content:"";position:absolute;bottom:-6px;left:46%;right:0;height:7px;background:#dd8490;transform:rotate(-1deg);border-radius:45%}
.archive-first-listen>.instruction{font-weight:700;margin:10px 0 3px}
.archive-first-listen>.translation{margin-top:0}
.first-audio-stamp{position:absolute;right:3%;top:80px;width:21%;aspect-ratio:285/108;overflow:hidden;pointer-events:none}
.first-audio-stamp img{position:absolute;width:538.95%;max-width:none;height:auto;left:-408.42%;top:-166.67%}
.archive-first-listen .listening-meta{margin:10px 0}.archive-first-listen .listening-meta>span{display:none}
.archive-first-listen .stage-strip{gap:10px;margin:16px 0}
.archive-first-listen .stage-strip span{font-size:13px;padding:10px 8px}
.sound-archive.archive-first-listen .listening-deck{border:1px solid #9c907b;border-left:8px solid #213c4e;border-top:9px solid #213c4e;background:#e8dbc2;padding:16px 18px 30px;margin-top:8px;background-image:radial-gradient(#9f805326 .6px,transparent .8px);background-size:4px 4px}
.first-listen-scene{display:grid;grid-template-columns:43% 30% 27%;align-items:center;margin:-10px -8px 0;position:relative}
.first-listen-poster{position:relative;aspect-ratio:495/310;overflow:hidden}
.first-listen-poster>img{position:absolute;width:310.303%;height:auto;max-width:none;left:-40.4%;top:-125.8%}
.first-listen-player{position:relative;aspect-ratio:365/230;isolation:isolate}
.first-player-art{position:absolute;inset:0;overflow:hidden;z-index:-1}
.first-player-art img{position:absolute;width:420.82%;max-width:none;height:auto;left:-195.07%;top:-197.39%}
.first-rec-label{position:absolute;top:-8%;left:28%;width:49%;padding:8px 4px;background:#e4d09b;color:#103e70;text-align:center;transform:rotate(-3deg);font:clamp(16px,2vw,28px) 'Permanent Marker',cursive;box-shadow:1px 2px #796b4b33}
.first-player-controls{position:absolute;inset:17% 9% 14%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#d3c6ad;box-shadow:inset 0 0 18px #897a6533;padding:8px}
.first-player-controls .listening-audio{margin:0;width:100%;justify-content:center}
.first-player-controls button{font-size:clamp(12px,1.25vw,18px);padding:10px 6px;width:100%;background:#eee2cb;border:1px solid #746e61;color:#103e70}
.first-player-controls p{font-size:clamp(10px,1vw,14px);text-align:center;margin:10px 0 0;color:#103e70}
.first-listen-notes{position:relative;aspect-ratio:405/365;overflow:hidden}
.first-listen-notes img{position:absolute;width:379.26%;max-width:none;height:auto;left:-268.4%;top:-106.85%}
.archive-first-listen #first-listen{margin:0 8% 0 24%;max-width:none}
.archive-first-listen #first-listen>label:first-child{font:700 22px 'Oswald','Arial Narrow',sans-serif;color:#171e24}
.archive-first-listen #first-listen .instruction{margin:6px 0 2px;font-size:15px}
.archive-first-listen #first-listen .translation{margin-bottom:12px}
.first-answer-row{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:22px;align-items:stretch}
.archive-first-listen #first-perception{min-height:72px;height:72px;background:#f3eada;font:16px 'DM Sans',sans-serif;border-color:#71808b;padding:15px}
.archive-first-listen .first-answer-row .action{margin:0;background:#efbe3e;color:#103e70;border-bottom:5px solid #103e70;font:600 22px 'Oswald',sans-serif}
.archive-first-listen .first-answer-row .action:disabled{opacity:.6}
.first-nothing{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;color:#514c43}
.archive-first-listen #first-listen [data-listen-first]{margin-bottom:0;font-size:12px}
.archive-first-listen>.listening-notice{font-size:12px;margin:10px 0 0}
.listening-page:has(.archive-first-listen)>.listening-footer{font:18px 'Permanent Marker',cursive;padding:15px 20px 25px}
@media(max-width:750px){.archive-first-listen>h1{width:75%;font-size:clamp(30px,5vw,42px)}.first-audio-stamp{top:75px;width:22%}.archive-first-listen .stage-strip{gap:4px}.archive-first-listen .stage-strip span{font-size:11px;padding:7px 5px}.first-listen-scene{grid-template-columns:48% 42% 10%;padding:14px 0}.first-listen-notes{display:none}.archive-first-listen #first-listen{margin:14px 3% 0}.first-answer-row{grid-template-columns:minmax(0,1fr) 100px;gap:12px}.first-rec-label{font-size:16px;padding:4px}.first-player-controls p{font-size:10px}}
@media(max-width:430px){.archive-first-listen{padding:18px 12px}.archive-first-listen>h1{width:100%;font-size:34px}.first-audio-stamp{display:none}.first-listen-scene{grid-template-columns:1fr;gap:18px;max-width:300px;margin:auto}.first-listen-poster{width:100%}.first-listen-player{width:85%;justify-self:center}.first-player-controls button{font-size:15px}.first-player-controls p{font-size:12px}.archive-first-listen #first-listen>label:first-child{font-size:20px}.first-answer-row{grid-template-columns:1fr}.archive-first-listen .first-answer-row .action{min-height:48px}.sound-archive.archive-first-listen .listening-deck{padding:12px 10px 20px}}