:root{--navy:#0b2d4d;--red:#c83b32;--ink:#202a33;--muted:#66737d;--line:#d8e0e5;--blue:#dce7ee;--redsoft:#f2e2df;--paper:#fbfaf7}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(#f7f8f7,#fbfaf7)}
.shell{width:min(980px,92vw);margin:auto;padding:28px 0 50px}.topline{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:2px solid var(--navy);padding:0 0 12px}
.brand{font-weight:800;color:var(--navy);letter-spacing:.08em;font-size:.78rem}.volume{display:block;color:var(--muted);font-size:.78rem;margin-top:4px}.lesson-pill{background:var(--red);color:#fff;padding:7px 11px;border-radius:999px;font-weight:700;font-size:.82rem}
.hero{padding:36px 0 28px}.kicker{font-size:.72rem;font-weight:800;letter-spacing:.11em;color:var(--red)}h1{font-size:clamp(2rem,6vw,4rem);line-height:.98;color:var(--navy);margin:8px 0 12px}h2{color:var(--navy);margin:.25rem 0 .6rem}.hero p,.section-head p{color:var(--muted);max-width:700px}
.grid.two{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.card,.phrase{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 5px 18px rgba(11,45,77,.05)}.card.primary{background:var(--blue)}
audio{width:100%;margin-top:10px}.links{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.links a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--navy)}
.section-head{margin:38px 0 14px}.phrase-list{display:grid;gap:11px}.phrase{display:grid;grid-template-columns:190px 1fr 280px;align-items:center;gap:16px;padding:13px 15px}.phrase-meta{display:flex;flex-direction:column;color:var(--muted);font-size:.75rem}.audio-id{font-weight:800;color:var(--navy);font-size:.84rem;letter-spacing:.03em}.phrase-text{font-size:1.03rem}.phrase audio{margin:0}
ol{padding-left:1.25rem;line-height:1.65}footer{display:flex;justify-content:space-between;color:var(--muted);border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-size:.78rem}
@media(max-width:760px){.grid.two{grid-template-columns:1fr}.phrase{grid-template-columns:1fr}.phrase audio{width:100%}.topline{align-items:flex-start}.hero{padding-top:28px}}