/* ---- fonts ---- */
@font-face{font-family:"PT Serif";src:url(assets/fonts/pt-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PT Serif";src:url(assets/fonts/pt-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PT Serif";src:url(assets/fonts/pt-serif-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PT Sans";src:url(assets/fonts/pt-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PT Sans";src:url(assets/fonts/pt-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(assets/fonts/eb-garamond-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --green:#54a653; --green-d:#3c7d3b;
  --paper:#f2f8ef; --ink:#1b1f1a; --muted:#546b4f;
  --link:#0b5d1e; --rule:#b3d0ac; --border:#9cbf95;
  --ibhead:#cfe6c8; --box:#e9f3e4; --code:#dcecce;
  --serif:"PT Serif",Georgia,serif; --sans:"PT Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--green); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
}

/* ---- top chrome ---- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  background:var(--paper); border-bottom:2px solid var(--green-d);
  padding:8px 20px;
}
.brand{display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink)}
.brand-globe{width:34px; height:34px; align-self:center; border:1px solid var(--border); border-radius:50%; background:var(--green)}
.brand-name{font-family:"EB Garamond",var(--serif); font-weight:700; font-size:1.6rem; line-height:1}
.brand-sub{font-family:var(--serif); font-style:italic; font-size:.72rem; color:var(--muted)}
.search{margin-left:auto; display:flex; border:1px solid var(--border); background:#fff; border-radius:2px; overflow:hidden}
.search input{border:0; padding:6px 10px; font:inherit; font-size:.9rem; width:min(42vw,240px); outline:none; background:#fff; color:var(--ink)}
.search-btn{display:flex; align-items:center; padding:0 12px; background:var(--box); border-left:1px solid var(--border); font-size:.85rem; color:var(--muted); cursor:default}

.tabs{display:flex; gap:2px; padding:0 20px; background:var(--paper); border-bottom:1px solid var(--border); font-size:.82rem}
.tab{padding:6px 12px; color:var(--link); border:1px solid transparent; border-bottom:0; cursor:default; position:relative; top:1px}
.tab.active{background:var(--paper); border-color:var(--border); color:var(--ink); border-bottom:1px solid var(--paper); font-weight:700}
.tab-r{margin-left:auto}
.tab-r+.tab-r{margin-left:0}

/* ---- article surface ---- */
.page{padding:24px 16px 60px}
.article{
  max-width:960px; margin:0 auto; background:var(--paper);
  border:1px solid var(--border); border-radius:2px;
  padding:22px 34px 30px; box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.title{font-family:var(--serif); font-weight:400; font-size:2.3rem; line-height:1.15; margin:.1em 0 .1em}
.fromwiki{font-family:var(--serif); font-style:italic; font-size:.82rem; color:var(--muted); margin:0 0 .4em}
.rule{border:0; border-top:1px solid var(--rule); margin:.6em 0 1em}
p{margin:.75em 0}
.lead{font-size:1.05rem}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
b{font-weight:700}
.ipa{font-family:var(--serif); color:var(--muted)}

sup.cn{font-size:.62em; color:var(--link); cursor:help; margin-left:1px; white-space:nowrap}
sup.cn:hover{text-decoration:underline}

/* ---- infobox ---- */
.infobox{
  float:right; width:300px; margin:6px 0 16px 26px; background:var(--box);
  border:1px solid var(--border); font-size:.86rem; line-height:1.45;
}
.ib-head{font-family:var(--serif); font-weight:700; text-align:center; padding:7px 8px; background:var(--ibhead); border-bottom:1px solid var(--border); font-size:1.05rem}
.ib-img{display:block; width:100%; background:var(--green); border-bottom:1px solid var(--border)}
.ib-cap{padding:6px 10px; font-size:.76rem; color:var(--muted); text-align:center; border-bottom:1px solid var(--border)}
.ib-tbl{width:100%; border-collapse:collapse}
.ib-tbl th,.ib-tbl td{text-align:left; vertical-align:top; padding:5px 9px; border-bottom:1px solid #cfe0c8}
.ib-tbl th{width:42%; font-weight:700; color:#33452f}
.ib-section td{background:var(--ibhead); text-align:center; font-weight:700; font-variant:small-caps; letter-spacing:.03em; color:#33452f}
.ib-ca td{background:#fbfdf9}
.ca-label{font-weight:700; font-size:.74rem; color:#33452f; margin-bottom:3px}
.ca{display:block; font-family:ui-monospace,"Courier New",monospace; font-size:.72rem; word-break:break-all; background:var(--code); border:1px dashed var(--green-d); padding:5px 6px; border-radius:2px}
.live{display:inline-flex; align-items:center; gap:6px; font-weight:700}
.dot{width:8px; height:8px; border-radius:50%; background:var(--green-d); box-shadow:0 0 0 0 rgba(60,125,59,.6); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(60,125,59,.55)}70%{box-shadow:0 0 0 7px rgba(60,125,59,0)}100%{box-shadow:0 0 0 0 rgba(60,125,59,0)}}

/* ---- image buttons (generated, no vector) ---- */
.imgbtn{display:inline-block; background:none; border:0; padding:0; margin:8px 0 0; cursor:pointer; line-height:0; transition:transform .08s ease}
.imgbtn img{width:172px; height:auto; display:block; filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}
.imgbtn:hover{transform:rotate(-1.2deg) scale(1.03)}
.imgbtn:active{transform:translateY(2px) scale(.99)}
.imgbtn-lg img{width:250px}
.copied{display:inline-block; margin-top:6px; font-size:.78rem; font-style:italic; color:var(--green-d); font-weight:700}
.copied[hidden]{display:none}

/* ---- contents ---- */
.toc{display:inline-block; background:var(--box); border:1px solid var(--border); padding:8px 20px 10px 10px; margin:6px 0 14px; font-size:.9rem}
.toc-head{font-weight:700; text-align:center; margin-bottom:2px}
.toc-hide{font-weight:400; color:var(--link); font-size:.82rem}
.toc ol{margin:.3em 0 0; padding-left:1.7em}
.toc li{margin:2px 0}

/* ---- sections ---- */
h2{font-family:var(--serif); font-weight:400; font-size:1.55rem; border-bottom:1px solid var(--rule); padding-bottom:4px; margin:1.3em 0 .5em; clear:none}
section{scroll-margin-top:110px}
.marks,.seealso{margin:.4em 0; padding-left:1.5em}
.marks li,.seealso li{margin:5px 0}

.wtable{width:100%; border-collapse:collapse; margin:.6em 0; font-size:.92rem; background:#fbfdf9}
.wtable th,.wtable td{border:1px solid var(--border); padding:6px 9px; text-align:left}
.wtable thead th{background:var(--ibhead); font-family:var(--serif); font-weight:700}

/* ---- footer ---- */
.foot{font-size:.82rem; color:var(--muted); margin-top:18px}
.cats{border-top:1px solid var(--rule); padding-top:8px}
.edited{font-style:italic}

/* ---- citation tooltip ---- */
.cn-tip{position:fixed; z-index:60; max-width:230px; background:#1b1f1a; color:#eef6ea; font-size:.8rem; padding:7px 10px; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.3); pointer-events:none; font-family:var(--serif); font-style:italic}
.cn-tip::after{content:""; position:absolute; left:16px; bottom:-6px; border:6px solid transparent; border-top-color:#1b1f1a; border-bottom:0}

/* ---- error banner room ---- */

/* ---- responsive ---- */
@media (max-width:720px){
  .article{padding:16px 16px 24px; border-radius:0}
  .page{padding:12px 0 48px}
  .infobox{float:none; width:100%; margin:8px 0 16px}
  .title{font-size:1.9rem}
  h2{font-size:1.35rem}
  .brand-sub{display:none}
  .search input{width:38vw}
  .toc{display:block}
  .imgbtn img{width:60%; min-width:150px}
  .imgbtn-lg img{width:78%}
}

@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
  .imgbtn,.imgbtn:hover,.imgbtn:active{transition:none; transform:none}
}