:root{
  --bg:#f7f7f4;--panel:#ffffff;--ink:#1f2a37;--muted:#4b5563;--line:#dcdfe3;--line2:#e9ebe6;
  --accent:#2563eb;--accent-d:#1d4ed8;--accent-soft:#e7eefd;--warn:#b91c1c;--warn-soft:#fdecec;--ok:#166534;--ok-soft:#e8f4ec;
  --lt:#e9edf2;--dk:#8b9db4;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:10px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);font-feature-settings:"tnum" 0}
img{max-width:100%;height:auto}
a{color:var(--accent-d);text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px;z-index:50}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:760px}

/* header */
.site-head{background:var(--panel);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;flex-wrap:wrap;padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.01em;font-size:1.05rem}
.brand img{width:30px;height:30px;border-radius:7px}
.brand span b{color:var(--accent)}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px var(--s1);margin:0;padding:0}
.nav a{display:block;padding:6px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.nav a:hover{background:var(--accent-soft);color:var(--accent-d)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}
.disclose{background:#eef1f5;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.disclose p{margin:0;padding:7px 0}
.disclose a{color:var(--ink)}

/* type */
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.8rem);margin:var(--s6) 0 var(--s3);font-weight:800}
h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);margin:var(--s7) 0 var(--s3);font-weight:750}
h3{font-size:1.12rem;margin:var(--s5) 0 var(--s2);font-weight:700}
p{margin:0 0 var(--s4)}
.lede{font-size:1.12rem;color:#334155;max-width:68ch}
.kicker{font:600 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-d);margin:var(--s6) 0 0}
.meta{font:.84rem/1.4 var(--mono);color:var(--muted);margin-bottom:var(--s5)}
code,.mono{font-family:var(--mono);font-size:.9em}
code{background:#eceee8;padding:1px 5px;border-radius:4px;word-break:break-all}
ul,ol{padding-left:1.3em;margin:0 0 var(--s4)}
li{margin-bottom:6px}
.crumbs{font-size:.85rem;color:var(--muted);margin-top:var(--s4)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:#9aa3ad}
article.prose{max-width:760px}
article.prose h2{padding-top:var(--s2);border-top:1px solid var(--line)}

/* panels */
.answer{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:var(--s5);margin:var(--s6) 0}
.answer h2{margin-top:0;border:0;padding:0}
.answer p:last-child{margin-bottom:0}
.quick{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:.98rem;color:#334155;margin:0 0 var(--s5)}
.quick strong{color:var(--ink)}
.note{background:#fff8e6;border:1px solid #f1dfae;border-radius:var(--r);padding:var(--s4) var(--s5);font-size:.95rem}
.note p:last-child{margin:0}
.fairplay{background:var(--ok-soft);border:1px solid #c7e3cf;border-radius:var(--r);padding:var(--s4) var(--s5);font-size:.95rem;margin:var(--s6) 0}
.fairplay p{margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4);margin:var(--s4) 0 var(--s5)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);text-decoration:none;color:var(--ink);display:block}
.card:hover{border-color:var(--accent);box-shadow:0 2px 0 var(--accent)}
.card b{display:block;margin-bottom:4px}
.card span{color:var(--muted);font-size:.93rem;line-height:1.5}

/* tables */
.tbl{overflow-x:auto;margin:var(--s4) 0 var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.93rem}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line2)}
th{background:#f1f3f0;font-weight:650;font-size:.85rem;text-transform:none}
tr:last-child td{border-bottom:0}
td.mono,th.mono{font-family:var(--mono)}
tr.top td{background:#f4f7fe}

/* figures */
figure{margin:var(--s5) 0}
figure picture img{border-radius:var(--r);display:block;width:100%;height:auto}
figcaption{font-size:.82rem;color:var(--muted);margin-top:6px;line-height:1.45}
figcaption a{color:var(--muted)}

/* FAQ / details */
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:0 0 var(--s2);padding:0 var(--s4)}
summary{cursor:pointer;font-weight:650;padding:var(--s3) 0;list-style-position:outside}
details[open] summary{border-bottom:1px solid var(--line2);margin-bottom:var(--s3)}
details>*:last-child{margin-bottom:var(--s4)}
.faq h3{font-size:1.02rem;margin:var(--s4) 0 var(--s1)}

/* diagrams */
.diagram{margin:var(--s5) 0;max-width:340px}
.dboard{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;width:100%;border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.dboard .sq{min-width:0;min-height:0;position:relative}
.dboard .sq img{position:absolute;inset:4%;width:92%;height:92%}
.dboard .lt{background:var(--lt)}.dboard .dk{background:var(--dk)}
.dboard .hl.lt{background:#c9d8fb}.dboard .hl.dk{background:#7d9ae6}
.diagram figcaption{font-size:.86rem;color:var(--ink)}
.diagram figcaption .mono{display:block;color:var(--muted);font-size:.74rem;margin-top:4px;word-break:break-all}
.diagram figcaption a{color:var(--accent-d)}
.drow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5);align-items:start}
.drow .diagram{max-width:none}

/* footer */
.site-foot{margin-top:var(--s8);background:var(--ink);color:#d7dde5;font-size:.92rem}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5);padding-block:var(--s6) var(--s4)}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid h2{color:#fff;font-size:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0 0 var(--s2);border:0}
.foot-base{border-top:1px solid #344457;padding-block:var(--s3) var(--s5);font-size:.82rem;color:#b9c3cf}
.foot-base p{margin:0 0 6px}

/* ---------------- move finder tool ---------------- */
.finder{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:var(--s5);align-items:start;margin:var(--s4) 0 var(--s5)}
.f-board-col{min-width:0}
.f-boardwrap{position:relative;width:100%;aspect-ratio:1;border-radius:6px;box-shadow:0 0 0 1px #c4ccd6,0 8px 24px -12px rgba(31,42,55,.35);overflow:hidden;background:var(--dk)}
#fBoard{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#fBoard .sq{min-width:0;min-height:0;position:relative;cursor:pointer}
#fBoard .sq.has{touch-action:none}
#fBoard .lt{background:var(--lt)}#fBoard .dk{background:var(--dk)}
#fBoard .last.lt{background:#d6e0f7}#fBoard .last.dk{background:#7f98c9}
#fBoard .sel{box-shadow:inset 0 0 0 4px var(--accent)}
#fBoard .dot::after{content:"";position:absolute;left:37%;top:37%;width:26%;height:26%;border-radius:50%;background:rgba(37,99,235,.55)}
#fBoard .cap::after{content:"";position:absolute;inset:3px;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(37,99,235,.6)}
#fBoard .sq:focus-visible{outline:3px solid #f59e0b;outline-offset:-3px;border-radius:0}
#fBoard .pc{position:absolute;inset:3%;width:94%;height:94%;pointer-events:none}
#fBoard .cf,#fBoard .cr{position:absolute;font:600 10px/1 var(--mono);pointer-events:none;opacity:.85}
#fBoard .cf{right:3px;bottom:2px}#fBoard .cr{left:3px;top:3px}
#fBoard .lt .cf,#fBoard .lt .cr{color:#5b6f8a}#fBoard .dk .cf,#fBoard .dk .cr{color:#f3f5f8}
#fArrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fArrows line{stroke-width:.17;stroke-linecap:round;opacity:.85}
#fArrows .a1{stroke:#2563eb}#fArrows .a2{stroke:#2563eb;opacity:.38;stroke-width:.13}
#fArrows .at{stroke:#dc2626;stroke-dasharray:.28 .16}
.f-ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:100;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.f-promo{position:absolute;inset:0;background:rgba(31,42,55,.72);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;align-content:center;z-index:5}
.f-promo p{width:100%;text-align:center;color:#fff;font-weight:650;margin:0}
.f-promo button{background:#fff;border:0;border-radius:10px;padding:6px;cursor:pointer;display:grid;place-items:center}
.f-promo button.x{width:100%;max-width:200px;background:transparent;color:#fff;border:1px solid #fff;padding:8px}
.f-under{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}

.f-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.f-sec{border-top:1px solid var(--line2);padding-top:var(--s3)}
.f-sec:first-child{border:0;padding-top:0}
.f-label{font:650 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 var(--s2);display:block}
.f-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.f-palette button{aspect-ratio:1;min-width:0;border:1px solid var(--line);background:#f3f4f1;border-radius:7px;padding:3px;cursor:pointer;display:grid;place-items:center}
.f-palette button img{width:100%;height:100%}
.f-palette button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.f-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
.f-tools button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.f-castle-fs{border:0;margin:0;padding:0;min-width:0}
.f-castle-fs legend{padding:0}
.f-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;padding:6px 12px;font-size:.88rem;font-weight:600}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:-3px}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:.86rem}
.chk input{width:16px;height:16px;accent-color:var(--accent)}
.chk input:disabled+span{color:#9aa3ad}
.f-castle{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.86rem;align-items:center}
.f-castle .who{font-weight:600}
.f-fen{display:flex;gap:6px}
.f-fen input{flex:1;min-width:0;font:13px/1.3 var(--mono);padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#fbfbf9;color:var(--ink)}
.btn{font:600 .9rem/1 var(--sans);border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-size:1rem;padding:13px 18px}
.btn.pri:hover:not(:disabled){background:var(--accent-d)}
.btn.sm{padding:8px 11px;font-size:.84rem}
.f-find{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.f-find select{font:600 .9rem var(--sans);padding:10px 8px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.f-find .btn.pri{flex:1 1 180px}
#fProg{width:100%;height:6px;margin-top:var(--s2);appearance:none;-webkit-appearance:none;border:0;border-radius:3px;background:var(--line2);overflow:hidden}
#fProg::-webkit-progress-bar{background:var(--line2)}#fProg::-webkit-progress-value{background:var(--accent)}#fProg::-moz-progress-bar{background:var(--accent)}
.f-msg{font-size:.9rem;padding:9px 12px;border-radius:8px;margin:0;background:#f1f3f0;min-height:2.6em}
.f-msg.err{background:var(--warn-soft);color:var(--warn);font-weight:600}
.f-msg.ok{background:var(--ok-soft);color:var(--ok)}
.f-msg.info{background:var(--accent-soft);color:#1e3a8a}
.f-engine{font:12px/1.4 var(--mono);color:var(--muted);margin:0}
.f-engine.ready::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-right:6px}
.f-lines{list-style:none;margin:var(--s2) 0 0;padding:0;counter-reset:l}
.f-lines li{display:grid;grid-template-columns:4.6em 1fr;gap:2px 10px;padding:8px 0;border-top:1px solid var(--line2);margin:0;font-size:.92rem}
.f-lines li:first-child{border-top:0}
.f-lines .ev{font:700 .9rem/1.5 var(--mono);background:var(--ink);color:#fff;border-radius:5px;text-align:center;align-self:start}
.f-lines li:first-child .ev{background:var(--accent)}
.f-lines .mv{min-width:0;overflow-wrap:anywhere}
.f-lines .mv strong{font-size:1.02rem}
.f-lines .pv{color:var(--muted);font-family:var(--mono);font-size:.82rem}
.f-lines .why{grid-column:2;font-size:.78rem;color:var(--muted)}
.f-threat{border:1px solid #f3c4c4;background:#fff6f6;border-radius:8px;padding:10px 12px}
.f-threat h3{margin:0 0 6px;font-size:.92rem;color:var(--warn)}
.f-threat .tag{font-weight:500;color:var(--muted);font-size:.8rem}
.f-threat p{margin:0 0 4px;font-size:.88rem}
.f-threat .ev{font:700 .85rem var(--mono);background:var(--warn);color:#fff;border-radius:4px;padding:1px 6px}
.f-threat .pv{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.f-threat .tn{color:var(--muted);font-size:.82rem}
.finder.editing .f-boardwrap{box-shadow:0 0 0 3px var(--accent),0 8px 24px -12px rgba(31,42,55,.35)}
#selftest{grid-column:1/-1;font:12px var(--mono);white-space:pre-wrap}

@media (max-width:900px){
  .finder{grid-template-columns:1fr}
  .f-board-col{max-width:560px;margin:0 auto;width:100%}
  .f-sec-msg{order:-2}
  .f-sec-find{order:-1;border-top:0;padding-top:0;border-bottom:1px solid var(--line2);padding-bottom:var(--s3)}
  .f-sec-msg+.f-sec{border-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .wrap{padding:0 var(--s4)}
  .head-row{min-height:56px}
  .nav a{padding:5px 8px;font-size:.86rem}
  .foot-grid{grid-template-columns:1fr}
  .answer{padding:var(--s4)}
  h1{margin-top:var(--s5)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}