.sound-course{max-width:1050px;margin:auto}.course-tabs,.course-footer,.course-audio{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.course-tabs{margin-bottom:1.2rem;border-bottom:1px solid var(--edge)}.course-tabs a{padding:.65rem .2rem;text-decoration:none}.course-tabs a[aria-current]{border-bottom:3px solid var(--teal);font-weight:bold}.course-hero{background:#e8f2eb;border-radius:14px;display:grid;grid-template-columns:1fr minmax(110px,24%);gap:1rem;align-items:center;padding:clamp(1rem,4vw,3rem)}.course-hero img{width:100%;height:auto}.course-hero h1{font-size:clamp(2rem,4vw,3.7rem)}.course-index,.course-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:.85rem;margin:1.25rem 0}.course-index a,.course-panels section,.course-feature{display:block;border:1px solid var(--edge);border-radius:12px;background:#fff;padding:1rem;text-decoration:none}.course-index a:hover,.course-feature:hover{border-color:var(--teal)}.course-sample{display:block;color:#12605a;font:italic 1.65rem Georgia,serif;margin:.2rem 0 .8rem}.course-panels svg{display:block;width:100%;height:116px;background:#f5f1e6;border-radius:8px;color:#284443}.course-panels h2,.course-try h2{font-size:1.18rem;margin:.8rem 0 .3rem}.course-panels p,.course-try p{margin:.4rem 0}.course-audio>div{display:flex;align-items:center;gap:.45rem}.course-audio{margin:1.3rem 0}.course-try{background:#e8f2eb;border-left:4px solid var(--teal);padding:.65rem 1.25rem 1rem;border-radius:8px}.sound-course summary{cursor:pointer;font-weight:bold;color:#145a55;padding:.5rem 0}.course-detail{margin:1rem 0}.course-footer{justify-content:space-between}.course-feature{background:#e8f2eb;color:#105752;margin:1rem 0;font-weight:bold}.course-feature span{display:block;font-weight:normal;margin-top:.25rem}@media(max-width:540px){.course-hero{grid-template-columns:1fr 68px;gap:.3rem}.course-hero img{align-self:start}.course-panels section{display:grid;grid-template-columns:90px 1fr;gap:0 .8rem}.course-panels svg{grid-row:span 2;height:86px}.course-panels h2{margin:0}.course-tabs{gap:.65rem}}
.course-index svg{width:100%;height:78px;background:#f5f1e6;border-radius:6px;display:block;margin-bottom:.6rem}.course-panels details{margin:0}.course-hero .btn{margin-top:1rem}