.dao { --dao-gap: 24px; }
.dao-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:var(--dao-gap); }
.dao-chapters { max-height:70vh; overflow:auto; position:sticky; top:80px; align-self:start; }
.dao-chapters a { display:flex; gap:10px; padding:7px 8px; color:var(--muted); text-decoration:none; border-left:2px solid transparent; }
.dao-chapters a span:first-child { min-width:2ch; }
.dao-chapters a:hover,.dao-chapters a[aria-current] { color:var(--accent); background:var(--bg); border-color:var(--accent); }
.dao a:focus-visible,.dao select:focus-visible,.dao button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.dao-toggles { border:0; border-bottom:1px solid var(--border); padding:0 0 14px; margin:0 0 18px; }
.dao-toggles label { display:inline-block; margin-right:16px; cursor:pointer; }
.dao-toggles small { color:var(--dim); }
.dao input { accent-color:var(--accent); }
.dao-options { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:18px 0 24px; }
.dao-options label { display:grid; gap:5px; min-width:0; max-width:100%; color:var(--muted); }
.dao select,.dao button { max-width:100%; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font:inherit; padding:7px 10px; }
.dao button { cursor:pointer; }
.dao button:hover { border-color:var(--accent); }
.dao-verse { padding:14px 0; border-bottom:1px solid var(--border); }
.dao-characters { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 12px; }
.dao-character { display:inline-flex; flex-direction:column; align-items:center; min-width:1.7em; }
.dao-hanzi { font:26px/1.5 serif; color:var(--accent); }
.dao-pinyin { font-size:11px; min-height:1.55em; color:var(--muted); }
.dao-english { line-height:1.8; overflow-wrap:anywhere; white-space:pre-wrap; }
.dao-verse p { margin:0; }
.dao-translation { display:grid; gap:var(--dao-gap); }
.dao-translation .dao-english p:first-child { margin-top:0; }
.dao-navigation { display:flex; justify-content:space-between; gap:12px; margin:24px 0; }
.dao.no-chinese .dao-hanzi,.dao.no-pinyin .dao-pinyin,.dao.no-english .dao-english { visibility:hidden; }
@media(min-width:1000px) { .dao-translation { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:600px) { .dao-layout { grid-template-columns:1fr; } .dao-chapters { position:static; max-height:150px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--border); } .dao-chapters a { overflow-wrap:anywhere; } .dao-toggles label { margin-right:8px; } }