.listen-box{margin:0 0 1.4rem;padding:.8rem 1rem;background:#fdf6ea;border:1px solid #e2c9a6;border-radius:14px;text-align:center;font-family:Georgia,"Times New Roman",serif}
.listen-box[hidden]{display:none}
.listen-title{margin:0 0 .5rem;font-size:1.05rem;color:#2f5233}
.listen-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center}
.listen-box button,.listen-box select{min-height:48px;min-width:48px;margin:0;padding:.5rem 1.2rem;font:inherit;font-size:1rem;border-radius:999px;cursor:pointer}
.listen-box button{background:#2f5233;color:#fff;border:2px solid #2f5233}
.listen-box button:hover{background:#1f3a23}
.listen-box button.listen-stop{background:#fffdf8;color:#2f5233}
.listen-box button.listen-stop:hover{background:#f2e3c8}
.listen-box button:disabled{opacity:.5;cursor:default}
.listen-box select{background:#fffdf8;color:#2e2a24;border:2px solid #2f5233;padding-right:.8rem}
.listen-voicewrap{margin:.6rem 0 0}.listen-voicewrap[hidden]{display:none}.listen-voicelabel{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;font-size:1rem;color:#2f5233}.listen-voicelabel select{max-width:100%}.listen-speed{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-size:1rem;color:#2f5233}
.listen-box button:focus-visible,.listen-box select:focus-visible{outline:3px solid #c8642a;outline-offset:2px}
.listen-note{margin:.5rem 0 0;font-size:.9rem;color:#5a4a3c}
.listen-status{margin:.3rem 0 0;min-height:1.3em;font-size:.95rem;color:#2f5233}
@media (max-width:600px){.listen-box button,.listen-box select{flex:1 1 40%}.listen-speed{flex:1 1 100%;justify-content:center}}
.listen-slot,.listen-box{min-height:232px}
.listen-slot{margin:0 0 1.4rem}
@media (max-width:600px){.listen-slot,.listen-box{min-height:290px}}
@media (max-width:360px){.listen-slot,.listen-box{min-height:316px}}