:root{color-scheme:light dark;--ink:#293f35;--muted:#747769;--paper:#f5f1e7;--green:#275c47;--gold:#c08046;--light:#eee1c5;--dark:#769284}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,sans-serif}main{max-width:1130px;padding:44px 36px 20px;margin:auto}header{display:flex;align-items:center;gap:23px;margin-bottom:32px}#avatar{width:104px;height:104px;flex:none}#avatar svg{width:100%;height:100%;overflow:visible}h1{font:normal clamp(36px,5vw,57px)/1.05 Georgia,serif;margin:6px 0 10px;letter-spacing:-2px}h2{font:normal 25px/1.2 Georgia,serif;margin:9px 0 23px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:750;color:var(--green);margin:0}.intro{color:var(--muted);margin:0}.layout{display:grid;grid-template-columns:minmax(280px,640px) minmax(230px,300px);gap:54px}.board-top,.board-bottom{display:flex;align-items:center;justify-content:space-between;height:43px}.board-top{font-size:13px;font-weight:650}#thinking{font-size:11px;color:var(--muted);font-weight:400}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:7px solid #304e3f;border-radius:3px;box-shadow:0 14px 26px #35452c16}.square{position:relative;width:100%;padding:0;aspect-ratio:1;background:var(--light);border:0;border-radius:0;cursor:pointer;display:grid;place-items:center}.square.dark{background:var(--dark)}.square:focus-visible{outline:3px solid #d15e39;outline-offset:-3px;z-index:1}.piece{width:78%;height:78%;filter:drop-shadow(0 2px 1px #142b2633);pointer-events:none}.square.selected{background:#d6b065}.square.last{box-shadow:inset 0 0 0 4px #e9b366aa}.square.target:after{content:'';position:absolute;width:23%;height:23%;border-radius:50%;background:#173e3850;pointer-events:none}.square.target:has(.piece):after{width:90%;height:90%;border:5px solid #173e3850;background:transparent}.coordinate{position:absolute;font-size:9px;font-weight:650;color:#355644;pointer-events:none}.dark .coordinate{color:#e8eddf}.rank{top:3px;left:4px}.file{bottom:2px;right:4px}button,select,input{font:inherit}button{cursor:pointer}.quiet{border:0;background:none;color:var(--green);font-size:12px;padding:7px 0;text-decoration:underline;text-underline-offset:4px}button:disabled{cursor:wait;opacity:.6}.primary{width:100%;padding:13px 17px;background:var(--green);color:white;border:0;border-radius:4px;text-align:left;font-weight:600;margin-top:8px}.primary:hover{background:#1a4534}label{display:block;font-size:12px;font-weight:650;margin:15px 0}select{display:block;width:100%;background:#fffaf1;border:1px solid #d8d9cc;border-radius:4px;color:var(--ink);padding:10px;margin-top:6px;font-size:13px}.level-label{display:grid;grid-template-columns:1fr auto;gap:7px}input[type=range]{width:100%;grid-column:1/-1;accent-color:var(--green)}.hint,details{font-size:11px;color:var(--muted)}.hint{margin-top:-7px}.toggle{display:flex;align-items:center;gap:8px;font-weight:400}.toggle input{accent-color:var(--green);width:16px;height:16px;margin:0}.toggle .hint{margin:0}.record{padding-top:27px;margin-top:26px;border-top:1px solid #dadccf}.moves{max-height:135px;overflow:auto;font-size:12px;margin-top:13px;color:var(--ink);font-variant-numeric:tabular-nums}.move-row{display:grid;grid-template-columns:28px 1fr 1fr;padding:3px 0}.move-row span:first-child{color:var(--muted)}details{border-top:1px solid #dadccf;margin-top:22px;padding-top:18px}summary{cursor:pointer;color:var(--green)}#status{min-height:23px;font-size:13px;margin:9px 0}footer{font-size:10px;color:#848779;margin-top:40px}dialog{border:1px solid #d8d9cc;border-radius:7px;background:var(--paper);color:var(--ink);padding:26px;max-width:95vw}dialog::backdrop{background:#172d2688}#promotion-choices{display:flex;gap:10px;margin-bottom:15px}#promotion-choices button{background:var(--light);border:1px solid #cdd0c0;border-radius:4px;font-size:36px;padding:10px 16px}body.busy .board{opacity:.86}@media(max-width:740px){main{padding:22px 18px}.layout{grid-template-columns:1fr;gap:28px}header{gap:14px;margin-bottom:17px}#avatar{width:75px;height:75px}h1{letter-spacing:-1px}aside{display:grid;grid-template-columns:1fr;gap:0}footer{margin-top:27px}}@media(prefers-reduced-motion:no-preference){.square{transition:background .1s}.board{transition:opacity .15s}}

.limits{margin:14px 0;border:0;padding:0}.limits input{width:100%;display:block;padding:8px;margin-top:5px;background:#fffaf1;color:var(--ink);border:1px solid #d8d9cc;border-radius:4px;font-size:12px}.limits label{font-weight:400}#cancel{margin-top:0}.tail{transform-box:fill-box;transform-origin:center;animation:tail-swish 5s ease-in-out infinite}.tail-right{animation-delay:-2.5s}.chen-eyes{transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}#avatar[data-mood=thinking] .tail{animation-duration:.55s}#avatar[data-mood=thinking] svg{animation:ponder 1.4s ease-in-out infinite}#avatar[data-mood=pounce] svg,#avatar[data-mood=win] svg{animation:pounce .5s ease-in-out 3}#avatar[data-mood=check] svg{animation:wiggle .4s ease-in-out 2}#avatar[data-mood=loss] svg{transform:rotate(-6deg)}#avatar[data-mood=loss] .chen-eyes{transform:scaleY(.7)}@keyframes tail-swish{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}@keyframes blink{0%,44%,47%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.1)}}@keyframes ponder{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes pounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}@media(prefers-reduced-motion:reduce){#avatar *,#avatar svg{animation:none!important}}

#promotion-choices .piece{width:48px;height:48px;display:block}
@media(prefers-color-scheme:dark){
  :root{--ink:#e5ece3;--muted:#abb6ab;--paper:#17241e;--green:#a5d4b5;--gold:#e9b366;--light:#9aafa1;--dark:#536c5c}
  .board{border-color:#7e9686}
  .primary{background:#a5d4b5;color:#17241e}.primary:hover{background:#c0e3cb}
  select,.limits input{background:#25382e;border-color:#526458}
  .record,details{border-color:#526458}footer{color:var(--muted)}
  dialog{border-color:#526458}#promotion-choices button{border-color:#526458}
  .square.selected{background:#c5a260}
  .square.target:after{background:#112d2799}
  .square.target:has(.piece):after{background:transparent;border-color:#112d2799}
}
/* Keep browser auto-darkening from collapsing the two chess sides. */
.board,#promotion-choices{color-scheme:only light}