:root{--ink:#243c38;--muted:#687b78;--line:#dfe8e4;--blue:#247366;--bg:#f3f6f4}body{font-size:14px}[hidden]{display:none!important}button,select{min-height:38px}button{transition:background .12s,border-color .12s}button.primary,button[aria-pressed=true]{background:var(--blue)}header{max-width:1320px;flex-wrap:wrap;gap:12px;padding:16px 20px}.brand small{letter-spacing:1px}.live{margin-left:auto}.mode-tabs{display:flex;gap:5px;order:3;flex-basis:100%;padding-top:6px}.mode-tabs button{border:0;background:transparent;padding:10px 23px;color:var(--muted);font-weight:600}.mode-tabs [aria-selected=true]{color:#185e50;background:#e0eee7;border-radius:10px}.mode-intro{max-width:1280px;margin:4px auto 14px;display:flex;justify-content:space-between;align-items:center;gap:15px}.mode-intro h1{font-size:23px;margin:0 0 4px;letter-spacing:-.4px}.mode-intro p{margin:0;color:var(--muted);font-size:14px}#connection-pill{font-size:12px;background:#e8efeb;padding:7px 12px;border-radius:20px;white-space:nowrap}.toolbar{max-width:1280px;background:transparent;border:0;padding:0;margin-bottom:12px}.toolbar .divider{display:none}main{max-width:1280px;grid-template-columns:minmax(300px,560px) minmax(330px,1fr);gap:24px}.panel{border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 15px #24433103}.panel-title{font-size:15px;padding:15px 18px}.workspace{gap:14px}.engine{order:0}.record{order:3;min-height:0}#history{height:210px}.evaluation{margin-top:12px}.record-toggle{display:none}.position-context{max-width:1280px;margin:0 auto 10px;display:flex;gap:8px;flex-wrap:wrap}.position-context span{padding:5px 12px;background:white;border:1px solid var(--line);border-radius:7px;font-weight:600;font-size:13px}#board-wrap{background:#d6ba8e;border:1px solid #b99d76;padding:7px;border-radius:14px;box-shadow:0 7px 22px #47362212}#board{background:#f1dfbd;border-radius:7px}.board-line{stroke:#9c8665;stroke-width:1.15}.piece{filter:drop-shadow(0 1px 1px #39230c40)}.player{font-size:14px}#mode-label{max-width:70%;text-align:right}.engine .metrics{display:block;padding:15px 18px;border-top:0}.metrics strong{font-size:36px;color:#185c4c}.metrics small{font-size:13px}.arrow-toggle{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:400}.arrow-toggle input{accent-color:var(--blue);width:16px;height:16px}.tactic-hint{padding:0 18px;min-height:22px;color:#426358;font-size:14px}.variation{padding:12px 18px}.variation p{font-size:15px;color:var(--ink);line-height:1.9}.variation>span{font-size:12px}.analysis-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 16px}.analysis-actions #apply{margin:0}.analysis-details{border-top:1px solid var(--line);padding:10px 18px;font-size:12px;color:var(--muted)}.analysis-details summary{cursor:pointer}.analysis-details .engine-settings{padding:10px 0;font-size:13px;flex-wrap:wrap}.analysis-details>div{display:inline-block;margin-right:20px}.analysis-details strong{margin-left:8px}.analysis-details small{font-size:12px}#status{font-size:13px;min-height:26px;margin:0 18px}.screen-panel{max-width:1280px;margin:0 auto 18px}.screen-help{font-size:13px;line-height:1.7}.screen-banner,.screen-result{display:none!important}.setup-steps{display:flex;list-style:none;gap:8px;margin:0;padding:16px 18px;counter-reset:step}.setup-steps li{flex:1;color:#81918b;font-size:14px;padding:9px;background:#f4f7f5;border-radius:8px;counter-increment:step}.setup-steps li:before{content:counter(step);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#e4eae6}.setup-steps .current{color:#185e50;background:#e7f3ec;font-weight:600}.setup-steps .current:before{background:#247366;color:white}.setup-steps .done{color:#247366}.screen-workspace{grid-template-columns:minmax(200px,1fr) minmax(280px,1fr);gap:24px;padding:0 18px 18px}#screen-preview{max-height:59vh;max-width:100%;touch-action:none}#screen-board,#edit-board{border-radius:7px;overflow:hidden;background:#f1dfbd}#screen-board button,#edit-board button{min-height:0;font-size:clamp(16px,2.7vw,30px);border-color:#b69c7833}#screen-validation{min-height:25px;font-size:13px}.screen-controls{padding:10px 18px}.screen-option{font-size:14px}#screen-side-note{font-size:13px}#screen-start{width:100%;max-width:390px;min-height:44px}.screen-panel .screen-controls>label{font-size:14px}#screen-status{margin-bottom:10px;font-size:13px}#review-panel{max-width:none;margin:0;order:0}#review-panel .review-controls{padding:12px 16px}.review-note{font-size:12px}.review-row{padding:13px;font-size:14px}.review-row span{font-size:12px}.review-panel p{font-size:13px}.review-priorities{padding:0 16px 16px}.review-priorities h3{font-size:16px}.priority-card{border:1px solid var(--line);border-left:3px solid #c07555;border-radius:8px;padding:12px;margin:9px 0}.priority-card p{margin:6px 0;padding:0}.priority-card button{margin:5px 7px 0 0}.priority-empty{color:var(--muted)}#review-results{max-height:330px}#review-all{margin:0 16px 14px}.lesson-dialog{max-width:880px;width:calc(100% - 24px);max-height:95dvh;overflow:auto;padding:20px}.lesson-layout{display:grid;grid-template-columns:minmax(220px,400px) minmax(180px,1fr);gap:20px;margin:14px 0}.lesson-board{width:100%;background:#f1dfbd;border:1px solid #b99d76;border-radius:9px;touch-action:manipulation}.lesson-board text{font:700 30px "KaiTi","SimSun",serif}.lesson-board [role=button]{cursor:pointer}.lesson-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.lesson-info p{font-size:14px;color:var(--ink);white-space:pre-wrap}.lesson-line{max-height:260px;overflow:auto}.lesson-line button{display:block;width:100%;text-align:left;border:0;margin:3px 0}.lesson-line .current{background:#e0eee7}#lesson-feedback{color:#185e50;line-height:1.7}.lesson-dialog .dialog-actions{position:sticky;bottom:-20px;background:white;padding:10px 0}.lesson-board [role=button]:focus{outline:none}.lesson-board [role=button]:focus circle{stroke:#247366;stroke-width:4}footer{max-width:1280px;margin:20px auto;font-size:12px}
body[data-mode=sync] .toolbar,body[data-mode=sync] #review-panel,body[data-mode=sync] .record-foot,body[data-mode=sync] #analyze,body[data-mode=sync] #apply,body:not([data-mode=sync]) #screen-panel,body:not([data-mode=sync]) #screen-analyze{display:none}body[data-mode=sync]:not([data-sync=active]) main,body[data-mode=sync]:not([data-sync=active]) .position-context{display:none}body:not([data-mode=sync]) #connection-pill{background:transparent}body[data-mode=study] .engine{order:2}body[data-mode=study] .record{order:1}body[data-mode=study] .record-toggle{order:1}body[data-sync=active] #screen-panel>.screen-help,body[data-sync=active] #screen-panel>.setup-steps,body[data-sync=active] #screen-panel>.panel-title,body[data-sync=active] #screen-panel>details,body[data-sync=active] #screen-panel #screen-connect,body[data-sync=active] #screen-panel #screen-undo,body[data-sync=active] #screen-panel .screen-workspace{display:none}body[data-sync=active].show-capture #screen-panel .screen-workspace{display:grid;grid-template-columns:1fr}body[data-sync=active].show-capture #screen-panel .screen-workspace>div:nth-child(2){display:none}body[data-sync=active] #screen-panel{margin-bottom:10px}body[data-sync=active] #screen-status{font-size:12px;line-height:1.5;margin-top:0}body[data-capture=off] #screen-select,body[data-capture=off] #screen-undo,body[data-capture=off] #screen-read,body[data-capture=off] #screen-pause,body[data-capture=off] #screen-stop,body[data-capture=off] .screen-workspace{display:none}
@media(max-width:1320px){.mode-intro,.toolbar,main,.position-context,.screen-panel,footer{margin-left:18px;margin-right:18px}.mode-intro{margin-top:4px}main{gap:18px}}
@media(min-width:740px) and (max-width:1099px){header{padding:10px 16px}.brand{font-size:17px}.brand small{font-size:10px}.mode-tabs{padding:0}.mode-tabs button{padding:8px 18px}.mode-intro h1{font-size:19px}.mode-intro p{font-size:12px}.mode-intro{margin-bottom:10px}main{grid-template-columns:minmax(300px,1.12fr) minmax(290px,1fr);gap:14px}.panel-title{font-size:14px;padding:12px}.metrics strong{font-size:30px}.arrow-toggle{font-size:12px}.engine .metrics{padding:10px 14px}.variation{padding:10px 14px}.variation p{font-size:14px}.analysis-actions{padding:0 14px 12px}.record{display:none}.record-toggle{display:block;order:2;text-align:left}.show-record .record{display:flex}#history{height:170px}.setup-steps{padding:12px}.setup-steps li{font-size:12px;padding:6px}.screen-workspace{gap:16px;padding:0 14px 14px}.screen-controls{gap:6px;padding:9px 12px}.screen-controls button{padding:7px 10px;font-size:12px}.screen-controls select{max-width:100%;font-size:13px}.screen-help{font-size:12px}.screen-panel{margin-bottom:14px}}
@media(max-width:739px){header{padding:10px 12px;gap:6px}.live{font-size:10px}.brand{font-size:17px}.brand small{font-size:10px}.mode-tabs{justify-content:space-between}.mode-tabs button{flex:1;padding:9px 8px}.mode-intro,.toolbar,.position-context,.screen-panel,footer{margin-left:12px;margin-right:12px}.mode-intro{align-items:flex-start;flex-wrap:wrap;gap:8px}.mode-intro h1{font-size:19px}.mode-intro p{font-size:12px}#connection-pill{font-size:11px;padding:4px 9px}.position-context{gap:5px}.position-context span{font-size:12px;padding:4px 8px}main{display:flex;flex-direction:column;margin:0 12px;padding:0;max-width:none;gap:14px}.board-column,.workspace{width:100%;min-width:0}.board-column{order:1;max-width:490px;align-self:center}.workspace{display:contents}.engine{order:0;width:100%}.engine .panel-title{padding:10px 14px}.engine .metrics{padding:5px 14px;border-bottom:0}.metrics strong{font-size:28px}.engine #status{font-size:12px;min-height:0}.tactic-hint{margin:5px 0;font-size:12px;padding:0 14px}.variation{padding:5px 14px}.variation p{font-size:13px;margin:3px 0;min-height:0}.analysis-actions{padding:6px 14px 10px}.analysis-actions button{font-size:12px;min-height:34px;padding:6px 9px}.analysis-details{padding:7px 14px}.record-toggle{display:block;order:2;width:100%;text-align:left}.record{display:none;width:100%;order:3}.show-record .record{display:flex}.evaluation{margin-top:6px}.setup-steps{gap:4px;padding:10px}.setup-steps li{font-size:11px;padding:5px}.setup-steps li:before{width:20px;height:20px;margin-right:4px}.screen-workspace{grid-template-columns:1fr;padding:0 12px 12px}.screen-workspace>div:first-child{display:flex;align-items:center;flex-direction:column}#screen-preview{max-height:52vh}.screen-controls{padding:8px 12px;gap:6px}.screen-controls button{font-size:12px;padding:6px 8px}.screen-help{font-size:12px;padding:0 12px}#screen-board,#screen-start{max-width:390px;width:100%;margin-left:auto;margin-right:auto}#screen-board button{font-size:26px}.screen-workspace h3{font-size:14px}body[data-mode=study] #review-panel{order:0;width:100%}body[data-mode=study] .engine{order:2}body[data-mode=study] .board-column{order:1}.lesson-layout{grid-template-columns:1fr}.lesson-board{max-height:52dvh}.lesson-dialog{padding:14px}.lesson-line{max-height:120px}.lesson-info p{margin:7px 0}.lesson-dialog .dialog-actions{bottom:-14px}.toolbar{gap:6px}.toolbar button{font-size:12px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
body[data-capture=pending] .screen-workspace{display:none}.live-side-label{display:flex;align-items:center;gap:6px;font-size:13px}.live-side-label select{border:1px solid var(--line);border-radius:7px;padding:4px 8px;background:white;min-height:32px}
body[data-mode=sync] #show-line,body[data-mode=sync] #screen-analyze,body[data-mode=sync] .analysis-details,body[data-mode=sync] .screen-option{display:none!important}body[data-mode=sync][data-next=hidden] .engine .metrics,body[data-mode=sync][data-next=hidden] .engine .variation,body[data-mode=sync][data-next=hidden] #tactic-hint,body[data-mode=sync][data-sync-waiting=true] .engine .metrics,body[data-mode=sync][data-sync-waiting=true] .engine .variation,body[data-mode=sync][data-sync-waiting=true] #tactic-hint{display:none}body[data-mode=sync][data-sync=paused] main{display:grid}body[data-mode=sync][data-sync=paused] .position-context{display:flex}body[data-sync=paused] #screen-panel>.screen-help,body[data-sync=paused] #screen-panel>.setup-steps,body[data-sync=paused] #screen-panel>.panel-title,body[data-sync=paused] #screen-panel>.screen-workspace,body[data-sync=paused] #screen-panel>details,body[data-sync=paused] #screen-connect,body[data-sync=paused] #screen-start,body[data-sync=paused] #screen-undo,body[data-sync=paused] #screen-pause{display:none}.screen-correction{margin:8px 0;font-size:13px}.screen-correction summary{cursor:pointer;color:var(--muted)}@media(max-width:739px){body[data-mode=sync][data-sync=paused] main{display:flex}}
body[data-mode=sync] .analysis-actions{display:none}
.client-version{margin-left:12px;font-variant-numeric:tabular-nums}.update-notice{max-width:1280px;margin:0 auto 14px;padding:12px 18px;background:#fff3d4;border:1px solid #dfc98f;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}.update-notice button{white-space:nowrap}@media(max-width:739px){.update-notice{margin:0 12px 12px;font-size:12px}.client-version{display:block;margin:5px 0}}
.previous-record{font-size:11px;padding:4px 7px;min-height:28px}.position-context .live-side-label{margin-left:auto;flex-wrap:wrap}

#lesson-explanation{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}#lesson-explanation h3{font-size:15px}#lesson-explanation p{font-size:13px;line-height:1.8;overflow-wrap:anywhere}.priority-card button{white-space:normal}#lesson-comparison [aria-pressed=true]{color:white}

.study-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0;padding:12px;background:#e8f1eb;border-radius:10px}.study-tools>span{flex:1;min-width:180px;font-size:13px;color:#315b50}.study-tools button{font-size:13px}body[data-mode=study] .engine{order:0}body[data-mode=study] #review-panel{order:1}body[data-mode=study] .record,body[data-mode=study] .record-toggle{order:2}body[data-mode=study] #review-variation{white-space:pre-wrap;line-height:1.8}@media(max-width:739px){body[data-mode=study] .engine{order:0}body[data-mode=study] .board-column{order:1}body[data-mode=study] #review-panel{order:2}body[data-mode=study] .record,body[data-mode=study] .record-toggle{order:3}}

.lesson-manual{padding:10px 0;border-bottom:1px solid var(--line)}.lesson-manual>span{width:100%;font-size:13px;color:#315b50}.lesson-manual button{font-size:12px;padding:6px 9px}

.lesson-panel{order:1}.lesson-panel .panel-title{gap:10px;flex-wrap:wrap}.lesson-panel .panel-title button{font-size:12px;min-height:32px;padding:5px 9px}.lesson-inline-body{padding:0 18px 16px}.lesson-inline-body p{font-size:13px;line-height:1.8}.lesson-inline-body .lesson-controls{margin:12px 0}.lesson-inline-body .lesson-controls button{font-size:12px;white-space:normal}.lesson-inline-body .lesson-line{max-height:210px}.lesson-inline-body summary{cursor:pointer;font-size:13px;color:var(--muted)}.lesson-practice .engine .metrics,.lesson-practice .engine .variation,.lesson-practice #tactic-hint,.lesson-practice #show-line,.lesson-practice #apply{display:none}body[data-mode=study] .lesson-panel{order:1}body[data-mode=study] #review-panel{order:2}body[data-mode=study] .record,body[data-mode=study] .record-toggle{order:3}@media(max-width:739px){body[data-mode=study] .board-column{order:1}body[data-mode=study] .lesson-panel{order:2;width:100%}body[data-mode=study] #review-panel{order:3}body[data-mode=study] .record,body[data-mode=study] .record-toggle{order:4}.lesson-inline-body{padding:0 12px 12px}}