/* A quiet margin for listening, shared by lessons, practice, and reference. */
.read-aloud-block{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:14px;align-items:start;margin:21px 0;min-width:0}
.read-aloud-copy{min-width:0}
.read-aloud-copy>:first-child{margin-top:0}
.read-aloud-copy>:last-child{margin-bottom:0}
.read-aloud-lead{max-width:710px;margin:0 0 27px}
.read-aloud-control{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;padding:10px;border:1px solid #b8cbb5;border-radius:50%;background:linear-gradient(150deg,#f5f8ef,#e5eedf);color:#315c42;box-shadow:0 2px 4px #234a2e08,inset 0 1px 0 #ffffffc0;vertical-align:middle;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.read-aloud-control:hover:not(:disabled){background:#deead5;border-color:#7f9f79;box-shadow:0 3px 9px #234a2e16}
.read-aloud-control>span{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}
.read-aloud-control svg{width:21px;height:21px;flex:none}
.read-aloud-control .read-aloud-stop{display:none}
.read-aloud-control[aria-pressed=true]{background:var(--forest-deep);border-color:var(--forest-deep);color:#fffefa;box-shadow:0 0 0 4px #dfead7}
.read-aloud-control[aria-pressed=true] .read-aloud-speaker{display:none}
.read-aloud-control[aria-pressed=true] .read-aloud-stop{display:inline-flex}
.read-aloud-control:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.read-aloud-control.read-aloud-page{width:auto;min-height:44px;height:auto;gap:8px;padding:9px 13px;border-radius:24px;font-size:12px;font-weight:650;letter-spacing:0;line-height:1.4;white-space:nowrap}
.read-aloud-control:disabled{opacity:.45;box-shadow:none}
.read-aloud-copy>.is-reading{outline:2px solid #b8cbb5;outline-offset:5px;border-radius:5px}
.writing-tools>.read-aloud-control{margin-left:auto}
@media(max-width:760px){.read-aloud-block{gap:10px;margin:18px 0}.read-aloud-lead{margin:0 0 21px}}
@media(max-width:420px){.read-aloud-block{gap:8px}.read-aloud-control.read-aloud-page{padding:9px 11px}}
@media(prefers-reduced-motion:reduce){.read-aloud-control{transition:none}}
@media print{.read-aloud-control{display:none!important}.read-aloud-block{display:block;margin:0}.read-aloud-copy>.is-reading{outline:none}}