@font-face{font-family:"DM Sans";src:url('assets/sans.ttf') format('truetype');font-display:swap}
@font-face{font-family:"DM Serif Display";src:url('assets/display.ttf') format('truetype');font-display:swap}
:root{--paper:#eceeef;--ink:#282d31;--muted:#62696e;--line:#cbd0d3;--gold:#dfb862;--ease:cubic-bezier(.2,.65,.2,1);--move-time:300ms;--board-size:min(752px,calc(100dvh - 148px),calc(100vw - 432px))}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 "DM Sans",Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.workspace{margin:0}.topbar{height:64px;max-width:1200px;padding:0 24px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.course-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}.course-toggle svg{width:15px;height:15px;transition:transform .2s}.course-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.mode-switch{position:relative;display:flex;gap:26px;height:100%}.mode-switch button{font-size:14px;position:relative;color:var(--muted);min-height:44px}.mode-switch button[aria-selected=true]{color:var(--ink);font-weight:500}.mode-switch:after{content:"";position:absolute;left:0;bottom:10px;height:1px;width:var(--tab-width,0px);transform:translateX(var(--tab-left,0px));background:var(--ink);pointer-events:none}.mode-switch.is-ready:after{transition:transform .22s cubic-bezier(.2,.65,.2,1),width .22s cubic-bezier(.2,.65,.2,1)}
.stage{padding:24px;display:grid;grid-template-columns:var(--board-size) minmax(240px,1fr);gap:64px;align-items:start;max-width:1200px;margin:auto}.board-column{min-width:0}.board{width:var(--board-size);aspect-ratio:1;position:relative;background:url('assets/board.webp') center/100% 100%;border-radius:4px;box-shadow:0 2px 1px #3925174d,0 10px 15px -7px #33221c66,0 27px 38px -27px #372b20a6;overflow:clip}.board-inner{position:absolute;inset:3.16%;overflow:clip}
.squares,.pieces,.attack-lines,.ghost-layer{position:absolute;inset:0;width:100%;height:100%}.squares{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.square{position:relative;outline-offset:-4px;overflow:visible}.square:focus-visible{outline:3px solid #fff0b7;z-index:4}.square.selected,.square.origin{background:#d7b76071}.square.destination{background:#e9c263b3}.square.error{background:#a953457d}.square.target:after,.square.hit:after,.square.capture:after{content:"";position:absolute;inset:7%;border:2px solid #efd18a;border-radius:50%;box-shadow:0 0 0 1px #3b322380;pointer-events:none}.square.capture:after{inset:5%;border:5px solid #161d1880;box-shadow:none}.square.legal:not(.capture):before{content:"";position:absolute;width:28%;height:28%;left:36%;top:36%;background:#101a1680;border-radius:50%}.square.preview-attack{background:#e5b65345}.square.preview-target:after{content:"";position:absolute;inset:7%;border:2px solid #f8db90;border-radius:50%}
.board.collecting .square.legal:not(.capture):before{background:#101a1633}.board.collecting .square.capture:not(.target):after{border-color:#161d1840;border-width:3px}
.pieces,.ghost-layer{pointer-events:none}.pieces{z-index:2}.attack-lines{z-index:1}.ghost-layer{z-index:3}.piece{position:absolute;width:12.5%;height:12.5%;transition:transform var(--move-time) var(--ease),opacity 160ms ease-out;}.piece.white img{filter:drop-shadow(0 2px 1px #33281d8c) drop-shadow(0 1px .5px #49382770)}.piece img{width:100%;height:100%;object-fit:contain;transform-origin:50% 88%;filter:drop-shadow(0 3px 2px #211a1570);display:block}.piece.enter img{animation:piece-seat .42s cubic-bezier(.16,.67,.29,1.2) both;animation-delay:var(--delay)}.piece.landing img{animation:landing .26s cubic-bezier(.16,.67,.29,1.05)}.ghost-piece{position:absolute;width:12.5%;height:12.5%;opacity:.76;filter:drop-shadow(0 0 4px #e9c36b)}.attack-lines{overflow:hidden;pointer-events:none}.arrow polygon{fill:var(--gold);stroke:#6b522b;stroke-width:.8;stroke-linejoin:round;transform-origin:0px 0px}.arrow.grow polygon{animation:line-grow .24s cubic-bezier(.2,.5,.3,1) both}.arrow.red polygon{fill:#d88d71;stroke:#793e32}
.coordinates{position:absolute;color:#f0dfc2;font-size:13px;line-height:1;font-weight:500;text-shadow:0 1px 1px #241910;pointer-events:none}.coordinates.files{bottom:1.02%;left:3.16%;right:3.16%;display:grid;grid-template-columns:repeat(8,1fr);text-align:center}.coordinates.ranks{left:1.04%;top:3.16%;bottom:3.16%;display:grid;grid-template-rows:repeat(8,1fr);align-items:center}
.board-status{display:flex;align-items:center;padding:15px 2px 0;font-size:13px;color:var(--muted);height:36px;gap:18px}.turn{display:flex;align-items:center;gap:7px}.turn i{width:9px;height:9px;border:1px solid #62696e;border-radius:50%;background:#f4f5f6}.turn.black i{background:#32373b}.flip-button{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border-radius:4px}.flip-button:hover{background:#dde1e3}
.teaching{align-self:center;min-width:0;padding:0 4px 36px 0} .teaching .current-step{font-size:24px;line-height:1.5;letter-spacing:-.3px;text-wrap:pretty;font-weight:400;margin:0 0 28px;max-width:300px}.primary{min-width:148px;min-height:48px;border:1px solid #9da5ab;border-radius:4px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:0 16px;font-size:14px;transition:background .16s,border-color .16s,transform .16s}.primary:hover{background:#dce1e4;border-color:#747e85}.primary svg{transition:transform .2s var(--ease)}.primary:hover:not(:disabled) svg{transform:translateX(3px)}.primary:active:not(:disabled){transform:translateY(1px) scale(.98)}.primary:disabled{color:#70787e;border-color:#bec4c8}.primary svg{width:17px;height:17px}
.sidebar{position:fixed;inset:0 auto 0 0;width:min(280px,calc(100vw - 48px));background:#e3e6e8;color:var(--ink);padding:24px;z-index:35;visibility:hidden;transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.65,.2,1),visibility .24s;border-right:1px solid #c6cbd0}.sidebar.open{visibility:visible;transform:translateX(0)}.menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.brand{font:26px/1.2 "DM Serif Display",Georgia,serif;letter-spacing:-.5px}.menu-close{min-width:32px;min-height:40px;font-size:26px;color:var(--muted)}.lesson-nav{display:grid;gap:8px}.lesson-nav button{display:flex;align-items:center;gap:14px;min-height:52px;text-align:left;font-size:14px;border-radius:3px;padding:9px 10px}.lesson-nav button.active{background:#d2d7da;font-weight:500}.lesson-nav .num{font-size:13px;color:#51595f}.lesson-nav svg{width:14px;height:14px;margin-left:auto}.lesson-nav button:disabled{color:#697177}.menu-backdrop{visibility:hidden;position:fixed;inset:0;opacity:0;background:#1f252a50;z-index:30;transition:opacity .24s,visibility .24s}.menu-backdrop.open{visibility:visible;opacity:1}
.board.entry .square.target:after{animation:target-entry .25s .58s both}.piece.target-press img{animation:target-press .32s ease-out}.square.hit:after{animation:target-hit .32s ease-out;box-shadow:0 0 0 1px #fff0b755}.board.pin-board .attack-lines{z-index:1}.board.pin-board .pieces{z-index:2}.board.pin-board .ghost-layer{z-index:3}
@keyframes piece-seat{from{opacity:0;transform:translateY(-13%)}60%{opacity:1;transform:translateY(2%)}to{transform:translateY(0)}}@keyframes landing{0%,100%{transform:scaleY(1)}38%{transform:scaleY(.95) translateY(1%)}75%{transform:scaleY(1.02)}}@keyframes line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes target-entry{from{opacity:0;transform:scale(1.16)}to{opacity:1;transform:scale(1)}}@keyframes target-press{0%,100%{transform:scale(1)}38%{transform:scale(.95) translateY(2%)}65%{transform:scale(1.025)}}@keyframes target-hit{0%{transform:scale(1.17);opacity:.5}45%{transform:scale(.86);opacity:1}80%{transform:scale(1.04)}100%{transform:scale(1)}}
@media(min-width:1600px){:root{--board-size:min(790px,calc(100dvh - 148px),calc(100vw - 600px))}.stage,.topbar{max-width:1280px}}
@media(max-width:1000px){:root{--board-size:min(calc(100dvh - 148px),calc(100vw - 340px))}.stage{gap:36px}.teaching .current-step{font-size:20px}.topbar,.stage{padding-left:24px;padding-right:24px}}
@media(max-width:760px){:root{--board-size:min(calc(100vw - 24px),500px)}.topbar{height:55px;padding:0 12px;gap:12px}.course-toggle{font-size:13px;gap:4px}.mode-switch{gap:18px}.mode-switch button{font-size:13px}.mode-switch:after{bottom:8px}.stage{display:flex;flex-direction:column;align-items:center;padding:12px;gap:24px}.board-column,.teaching{width:var(--board-size)}.board-status{padding-top:8px;height:35px;font-size:13px;gap:12px}.teaching{padding:0 4px 24px}.teaching .current-step{font-size:20px;line-height:1.55;max-width:350px;margin-bottom:24px}.primary{min-height:46px}.coordinates{font-size:11px}.coordinates.files{bottom:.3%}.coordinates.ranks{left:.65%}.square.target:after,.square.hit:after{border-width:2px}.square.capture:after{border-width:3px}.flip-button{width:28px;height:28px}}
@media(max-width:360px){.course-toggle,.mode-switch button{font-size:12px}.mode-switch{gap:12px}.topbar{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.current-step .san{font-family:"DM Serif Display",Georgia,serif;font-size:1em;letter-spacing:0;white-space:nowrap}


.position-previous{position:absolute;inset:0;z-index:4;pointer-events:none}.position-previous .piece{transition:none}.position-previous .piece img{animation:none}

.piece.awaiting img{opacity:0}

.board.resetting .square.target:after{animation:target-entry .25s .35s both}