:root{
  --bg:#faf6f0; --ink:#2a2521; --muted:#8a8078; --line:#e8e0d5;
  --card:#ffffff; --accent:#b23a2e; --accent-soft:#f2d5d0; --gold:#c99a3c; --gold-soft:#f3e3c3;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,sans-serif}
.topnav{position:sticky;top:0;z-index:20;background:rgba(250,246,240,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topnav .inner{max-width:780px;margin:0 auto;display:flex;gap:.35rem;overflow-x:auto;padding:.55rem 1rem;scrollbar-width:none}
.topnav .inner::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;font-size:.8rem;font-weight:600;padding:.35rem .75rem;border-radius:99px;color:#4a423b;text-decoration:none}
.topnav a:hover{background:#efe7da}
.topnav a.active{background:var(--accent);color:#fff}
main{max-width:780px;margin:0 auto;padding:1.5rem 1.1rem 2.5rem}
header .stage-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:.3rem .7rem;border-radius:99px;margin-bottom:.8rem}
h1{font-size:1.7rem;line-height:1.2;margin:.2rem 0 .5rem}
.lede{color:#5a5148;margin:.2rem 0 1.2rem}
section{margin:2rem 0}
h2{font-size:1.25rem;margin:0 0 .4rem;padding-bottom:.35rem;border-bottom:2px solid var(--line)}
h3{font-size:1.02rem;margin:1.2rem 0 .4rem;color:#4a423b}
.note{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.phrase{display:flex;gap:.7rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:.65rem .85rem;margin:.55rem 0}
.phrase:hover{border-left-color:var(--gold)}
.play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:.95rem;cursor:pointer;line-height:1}
.play:active{transform:scale(.92)}
.pbody{flex:1;min-width:0}
.vi{font-size:1.2rem;font-weight:650;line-height:1.35}
.ph{font-style:italic;color:var(--muted);font-size:.88rem;margin-top:.05rem}
.en{color:#4a423b;font-size:.95rem;margin-top:.1rem}
.tag{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.09em;padding:.18rem .5rem;border-radius:99px;vertical-align:middle;margin-left:.45rem}
.tag.seed{background:var(--gold-soft);color:#7a5a14}
.tag.lookup{background:#ece7df;color:#6d645a}
.tag.atomic{background:var(--accent-soft);color:#8c2f24}
.tag.family{background:#dce8dc;color:#3d5c3d}
.tag.kids{background:#e2e4f2;color:#41486e}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:.8rem 0;font-size:.93rem}
th{background:#f1eae0;text-align:left;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:#6d645a;padding:.5rem .7rem}
td{padding:.5rem .7rem;border-top:1px solid var(--line);vertical-align:top}
.vic{font-weight:650}
.callout{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;margin:.9rem 0;font-size:.95rem}
.callout h3{margin-top:0}
.callout.gold{border-left:4px solid var(--gold)}
.callout.red{border-left:4px solid var(--accent)}
.callout.blue{border-left:4px solid #5b7fa6}
ol.plan li, ul li{margin:.35rem 0}
footer{max-width:780px;margin:0 auto;padding:1rem 1.1rem 2.5rem;color:var(--muted);font-size:.8rem;text-align:center}
@media print{.topnav,.play{display:none}.phrase{break-inside:avoid}}