@font-face{font-family:Fraunces;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
/* The characters on the xiangqi discs and the river: a 23-glyph cut of Noto Serif SC (SIL OFL). */
@font-face{font-family:"XQ Pieces";font-style:normal;font-weight:700;font-display:block;src:url(fonts/xq-pieces.woff2) format("woff2")}

/* Boards and pieces are objects: wood, ivory, lacquer keep their colours in both themes. The page around them follows the theme. */
:root{
  --paper:#f5efe4;--paper-2:#ebe2d2;--ink:#1f1a16;--ink-2:#3d342c;--ink-3:#574c42;--rule:#d8cbb8;--rule-soft:#e4d9c8;
  --accent:#93231a;--link:#8a2018;--jade:#14574a;--focus:#1f5fc9;--bar-bg:rgba(245,239,228,.9);
  --sq-l:#ecdcbc;--sq-d:#b08458;--sq-p:#ead9b4;--bd-line:#4d3b29;--xq-bg:#e6cb97;--river:#6b5234;
  --pc-l:#fdf8ee;--pc-d:#231c17;--disc:#f8eed6;--disc-edge:#5c4832;--xq-red:#b0241a;--xq-black:#1b1612;
  --m-move:#0f5f4e;--m-cap:#73180f;--m-sel:rgba(255,208,74,.62);--m-reach:rgba(15,95,78,.34);--m-no:#73180f;--m-block:#73180f;--m-edge:#1f1a16;
  --serif:"Source Serif 4",Georgia,"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --display:Fraunces,Georgia,"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --cjk:"XQ Pieces","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#171310;--paper-2:#221c17;--ink:#f0e8dc;--ink-2:#d6cbbd;--ink-3:#b3a799;--rule:#3b312a;--rule-soft:#2c2520;
  --accent:#ff9a86;--link:#ffab99;--jade:#86d6bb;--focus:#8ab4ff;--bar-bg:rgba(23,19,16,.88);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#171310;--paper-2:#221c17;--ink:#f0e8dc;--ink-2:#d6cbbd;--ink-3:#b3a799;--rule:#3b312a;--rule-soft:#2c2520;
  --accent:#ff9a86;--link:#ffab99;--jade:#86d6bb;--focus:#8ab4ff;--bar-bg:rgba(23,19,16,.88);color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:60px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1rem/1.62 var(--serif);overflow-x:clip}
a{color:var(--link);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);color:var(--ink);padding:.5rem 1rem;z-index:60}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 .6em}
h3{font-size:1.25rem;margin:0 0 .45em}
p{margin:0 0 1em}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:lang(zh-Hans) body,body:lang(zh-Hans){line-height:1.85;letter-spacing:.01em;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif}
:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hans) h3{letter-spacing:0;line-height:1.35;font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",serif;font-weight:700}
[lang="zh-Hans"] i,[lang="zh-Hans"] em{font-style:normal}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.8rem;height:48px;padding:0 max(16px,env(safe-area-inset-left));background:var(--bar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);font:500 .92rem/1 var(--serif);white-space:nowrap;color:var(--ink-2)}
.topbar a{color:var(--ink-2);text-decoration:none}
.topbar a:hover,.topbar a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent)}
.home{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink)!important;min-height:44px}
.topnav{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{display:inline-flex;align-items:center;min-height:44px}
.langs{display:flex;flex:none;margin-left:.4rem;gap:.15rem}
.lang{font-weight:700;letter-spacing:.04em;min-width:40px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn{background:none;border:0;color:var(--ink);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;flex:none}
.i-sun{display:none}
:root[data-theme="dark"] .i-sun{display:block}:root[data-theme="dark"] .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:block}:root:not([data-theme="light"]) .i-moon{display:none}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{position:absolute;left:0;top:0;height:2px;width:100%;transform-origin:0 0;transform:scaleX(0);background:var(--accent)}
.progress .pdisc{position:absolute;left:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--disc);border:2.5px solid var(--xq-red);transform:translateX(-30px);opacity:0;transition:opacity .3s}
.progress.on .pdisc{opacity:1}
@media (max-width:640px){.home span{display:none}.topnav{gap:.75rem}}

/* ---------- layout ---------- */
section{padding:clamp(2.2rem,6vw,4.2rem) 16px}
.in{max-width:1180px;margin:0 auto}
.prose{max-width:44rem}
.prose.c{margin-left:auto;margin-right:auto}
.hero{padding-top:clamp(1.6rem,5vw,3.4rem);border-bottom:1px solid var(--rule)}
.kick{font:600 .8rem/1.2 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .7rem}
:lang(zh-Hans) .kick{letter-spacing:.08em;font-size:.92rem}
h1{font-size:clamp(2rem,5.2vw,3.5rem);margin:0 0 .5em;max-width:22ch}
:lang(zh-Hans) h1{font-size:clamp(1.8rem,4.8vw,3.1rem);max-width:17em}
.deck{font-size:clamp(1.12rem,2.2vw,1.32rem);line-height:1.5;color:var(--ink-2);max-width:44rem;margin:0 0 1.4rem}
.alt{background:var(--paper-2)}
.note{font-size:.98rem;color:var(--ink-3)}
figure{margin:0}
figcaption{font-size:.95rem;line-height:1.45;color:var(--ink-3);margin-top:.5rem}
.credit{display:block;font-size:.88rem;margin-top:.2rem}

/* ---------- boards and pieces ---------- */
.board{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 28px -14px rgba(0,0,0,.55)}
.sq-l{fill:var(--sq-l)}.sq-d{fill:var(--sq-d)}.sq-p{fill:var(--sq-p)}
.bd-bg{fill:var(--xq-bg)}
.bd-line{fill:none;stroke:var(--bd-line);stroke-width:1.3;stroke-linecap:square}
.bd-river{font:700 21px var(--cjk);fill:var(--river);letter-spacing:.5em}
.pf-l{fill:var(--pc-l)}.pf-d{fill:var(--pc-d)}.ps-l{stroke:var(--pc-l)}.ps-d{stroke:var(--pc-d)}
.xq circle{fill:var(--disc);stroke:var(--disc-edge);stroke-width:1.4}
.xq .xq-in{fill:none;stroke-width:1}
.xq text{font:700 24px var(--cjk)}
.xq-0 text{fill:var(--xq-red)}.xq-0 .xq-in{stroke:var(--xq-red)}
.xq-1 text{fill:var(--xq-black)}.xq-1 .xq-in{stroke:var(--xq-black)}
.dim{opacity:.72}
.t-sel{fill:var(--m-sel);stroke:var(--m-edge);stroke-width:3}
.t-reach{fill:var(--m-reach);stroke:var(--m-edge);stroke-width:1.6;stroke-dasharray:4 3}
.t-move{fill:var(--m-move);stroke:#fff;stroke-width:1.6}
.t-cap{fill:none;stroke:var(--m-cap);stroke-width:3.4}
.t-leap{fill:none;stroke:var(--m-move);stroke-width:2.2;stroke-dasharray:3 5;stroke-linecap:round}
.t-blocker{fill:none;stroke:var(--m-block);stroke-width:2.4;stroke-dasharray:5 4}
.t-no{fill:none;stroke:var(--m-no);stroke-width:3;stroke-linecap:round}
.t-arrow{fill:none;stroke:var(--m-cap);stroke-width:4.5;stroke-linecap:round}
.t-arrowhead{fill:var(--m-cap)}
.hit{fill:transparent;cursor:pointer}
.boards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,2vw,1.5rem);align-items:start}
.bfig figcaption{display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline}
.bfig figcaption b{color:var(--ink);font-weight:600}
.bfig .pname{color:var(--ink-2)}
.bfig .count{flex-basis:100%;color:var(--ink-3)}
.bwrap{border-radius:6px}
.noboard{aspect-ratio:1;display:grid;place-items:center;border:1.5px dashed var(--rule);border-radius:6px;padding:1rem;text-align:center;color:var(--ink-3);font-size:.98rem}
.noboard p{margin:0}
@media (max-width:720px){
  .boards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boards3 .bfig[data-game="xiangqi"]{grid-column:1 / -1;width:min(100%,15.5rem);margin:0 auto}
}

/* line-up */
.lineup{margin:1.6rem 0 0;max-width:48rem}
.lineup-svg{display:block;width:100%;height:auto}
.lu-role{font:600 11px var(--serif);fill:var(--ink-2)}
.lu-tick{stroke:var(--rule);stroke-width:1}
.lu-game{font:600 12px var(--serif);fill:var(--ink-2)}
.lu-gap{fill:none;stroke:var(--rule);stroke-width:1.2;stroke-dasharray:3 3}
.lineup .pf-l{fill:var(--pc-l)}
:root[data-theme="dark"] .lineup-svg .ps-d,:root[data-theme="dark"] .home-pc .ps-d,:root[data-theme="dark"] .nicon .ps-d{stroke:#0e0b09}
@media (max-width:560px){.lu-role{font-size:12.5px}.lu-game{font-size:13px}}

/* instrument */
.tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin:1.4rem -16px 1rem;padding:2px 16px}
.tabs::-webkit-scrollbar{display:none}
.rtab,.tool,.chip,.btn{font:600 1rem/1 var(--serif);min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.rtab[aria-pressed="true"],.tool[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rtab:hover,.tool:hover,.chip:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
.rtab[aria-pressed="true"]:hover,.tool[aria-pressed="true"]:hover,.chip[aria-pressed="true"]:hover{color:var(--paper)}
.tools{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 .4rem}
.role{padding:1.6rem 0;border-top:1px solid var(--rule)}
.js .role{border-top:0;padding:.4rem 0 0}
.js .role:not(.on){display:none}
.js .role>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.status{min-height:1.5em;margin:.7rem 0 0;font-size:1rem;color:var(--jade);font-weight:600}
.status.quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;min-height:0;margin:0}
.role-text{max-width:44rem;margin-top:.9rem}
.hint{font-size:1rem;color:var(--ink-3);margin:.2rem 0 0}

/* names */
.ngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.2rem;margin-top:1.6rem}
.npiece{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:1.1rem 1.1rem .9rem}
.npiece h3{display:flex;align-items:center;gap:.5rem}
.nicon{width:34px;height:34px;flex:none}
.ngroups{margin:0}
.ng{padding:.5rem 0;border-top:1px solid var(--rule-soft)}
.ng dt{font-weight:600;color:var(--ink)}
.ng dt .n{font-weight:400;color:var(--ink-3);font-size:.92rem;margin-left:.2rem}
.ng dd{margin:.15rem 0 0;display:flex;flex-wrap:wrap;gap:.1rem .9rem;font-size:1rem}
.nm i{font-style:normal;color:var(--ink-3);font-size:.9rem}
.nm b{font-weight:600}
.nm .rom{color:var(--ink-3);font-size:.92rem}
.nm.me{background:var(--m-sel);border-radius:4px;padding:0 .3rem;margin:0 -.3rem;color:#1f1a16}
.nm.me i,.nm.me .rom{color:#3d342c}
.nnote{font-size:.97rem;color:var(--ink-3);margin:.7rem 0 0}
.yours{font-weight:600;color:var(--jade);margin:1rem 0 0}

/* rules */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr));gap:1.6rem 2rem;margin-top:1.6rem}
.rule{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:1rem;align-items:start}
.rule p{font-size:1.02rem}
.tag{display:inline-block;font:600 .78rem/1 var(--serif);letter-spacing:.06em;text-transform:uppercase;padding:.28rem .5rem;border-radius:4px;border:1px solid var(--rule);color:var(--ink-2);margin:0 .35rem .5rem 0}
:lang(zh-Hans) .tag{letter-spacing:.02em;font-size:.85rem}
@media (max-width:480px){.rule{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr)}}
table.ends{border-collapse:collapse;width:100%;max-width:52rem;margin-top:2rem;font-size:1.02rem}
.ends caption{text-align:left;font:500 1.25rem var(--display);margin-bottom:.5rem;color:var(--ink)}
.ends th,.ends td{text-align:left;padding:.55rem .7rem .55rem 0;border-top:1px solid var(--rule);vertical-align:top}
.ends th[scope=row]{min-width:8.5rem}
.ends thead th{border-top:0;color:var(--ink-3);font-weight:600;font-size:.95rem}
.tscroll{overflow-x:auto}

/* quiz */
.quiz{list-style:none;padding:0;margin:1.4rem 0 0}
.qq{padding:1.4rem 0;border-top:1px solid var(--rule)}
.qtext{font-size:1.15rem;max-width:44rem}
.qn{color:var(--ink-3);font-size:.95rem;margin-right:.3rem}
.qans{flex-basis:100%}
.verdict{font-weight:700}
.verdict.yes{color:var(--jade)}.verdict.no{color:var(--accent)}
.js .qq:not(.on){display:none}
.js .qq:not(.done) .qans{display:none}
.qpick{display:flex;gap:.4rem;margin-top:.5rem;flex-basis:100%}
.qpick .chip{min-height:44px;padding:0 .9rem;font-size:.95rem}
.qfig.right .bwrap{outline:3px solid var(--jade);outline-offset:2px}
.qfig.wrong .bwrap{outline:3px solid var(--accent);outline-offset:2px}
.qbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.1rem}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}
.qscore{font-weight:600;color:var(--ink-2);margin:0}

/* timeline */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 0}
.tl{list-style:none;padding:0;margin:1.4rem 0 0;max-width:56rem}
.tl-i{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:1rem;padding:1rem 0;border-top:1px solid var(--rule)}
.tl-when{font:500 1.15rem var(--display);margin:0;color:var(--ink)}
.tl-tags{margin:0}
.tl-b h3{font-size:1.14rem}
.tl-b p:last-child{margin:0}
.tag-china{border-color:var(--xq-red);color:var(--accent)}
.tl-i.off{display:none}
@media (max-width:560px){.tl-i{grid-template-columns:1fr;gap:.2rem}}
.views{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;margin:1.6rem 0}
.view{border:1px solid var(--rule);border-radius:10px;padding:1rem}
.view p{font-size:1rem;margin:0}
.view h3{font-size:1.08rem}

/* text with a picture beside it */
.duo{display:grid;grid-template-columns:minmax(0,44rem) minmax(0,19rem);gap:clamp(1.2rem,4vw,3.5rem);align-items:start}
.duo .photo{margin:.4rem 0 1.2rem}
@media (max-width:860px){.duo{grid-template-columns:1fr}.duo .photo{max-width:15rem}}

/* photos */
.photo{margin:1.8rem 0;max-width:44rem}
.photo img{display:block;width:100%;height:auto;border-radius:6px;background:var(--paper-2)}
.photos2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.4rem;max-width:none;align-items:start}
.photos2 .photo{margin:0}

/* links, sources, share, footer */
.more{list-style:none;padding:0;margin:1rem 0 0;max-width:44rem}
.more li{padding:.6rem 0;border-top:1px solid var(--rule)}
.src{font-size:1rem;max-width:52rem}
.src li{margin-bottom:.5rem}
.src ol,.src ul{padding-left:1.2rem}
.share{margin:1.6rem 0 0}
.share-row{display:flex;flex-wrap:nowrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;color:var(--ink-3);margin-right:.25rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink-2);text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--accent);border-color:var(--accent)}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
.share-status{font-size:.95rem;color:var(--jade);min-height:1.2em;margin:.4rem 0 0}
.share-field{width:100%;margin-top:.5rem;padding:.6rem;border:1px solid var(--rule);border-radius:.5rem;background:var(--paper);color:var(--ink);font:inherit;font-size:.9rem}
.foot{border-top:1px solid var(--rule);padding:1.4rem 16px 2.2rem;text-align:center;font-size:.95rem;color:var(--ink-3)}
.nf{max-width:40rem;margin:4rem auto;padding:0 16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}