:root{--bg:#f4f1ea;--panel:#fff;--text:#1f2328;--muted:#6b6f76;--border:#e2ddd2;--accent:#2f6f5e;--accent-soft:#e2efe9;--light-sq:#eeeed2;--dark-sq:#769656;--hl-light:#f6f682;--hl-dark:#baca44;--check:radial-gradient(circle, #ff3b30 0%, #ff3b3099 35%, #ff3b3000 70%);--shadow:0 1px 2px #0000000f, 0 4px 16px #0000000f;--ok:#1f7a4d;--ok-soft:#e3f3ea;--warn:#9a6200;--warn-soft:#fbf0d9;--bad:#b3261e;--bad-soft:#fbe5e3;--arrow-book:#2f6fd6}@media (prefers-color-scheme:dark){:root{--bg:#17191c;--panel:#212428;--text:#e8e6e3;--muted:#9aa0a6;--border:#33373d;--accent:#6cc3a6;--accent-soft:#23372f;--shadow:0 1px 2px #0000004d, 0 4px 16px #0000004d;--ok:#6fd6a0;--ok-soft:#1d3428;--warn:#f0c060;--warn-soft:#3a3020;--bad:#ff8a80;--bad-soft:#3d2322;--arrow-book:#5b9bff}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif}button,select{font:inherit;color:inherit}.topbar{border-bottom:1px solid var(--border);background:var(--panel);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;display:flex}.topbar h1{letter-spacing:-.01em;margin:0;font-size:20px}.topbar h1 span{color:var(--accent);font-weight:600}.side-toggle{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px;display:inline-flex}.side-btn,.mode-btn{cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:8px;padding:6px 16px;font-weight:500;display:inline-flex}.side-btn[aria-selected=true],.mode-btn[aria-selected=true]{background:var(--panel);box-shadow:var(--shadow)}.dot{border:1.5px solid #555;border-radius:50%;width:12px;height:12px}.dot.white{background:#fff}.dot.black{background:#222}.layout{grid-template-columns:260px minmax(0,1fr) 300px;align-items:start;gap:20px;max-width:1320px;margin:0 auto;padding:20px 24px;display:grid}.panel{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:16px}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);justify-content:space-between;align-items:center;margin:0 0 8px;font-size:12px;display:flex}.panel h2:not(:first-child){margin-top:18px}.list{gap:4px;margin:0;padding:0;list-style:none;display:grid}.list button{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:baseline;gap:8px;width:100%;padding:8px 10px;display:flex}.list button:hover{background:var(--bg)}.list button[aria-current=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--text);font-weight:600}.list .meta{color:var(--muted);white-space:nowrap;font-size:12px;font-weight:400}.list-group+.list-group{border-top:1px dashed var(--border)}.list-group summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-size:12px;font-weight:600;list-style:none;display:flex}.list-group summary::-webkit-details-marker{display:none}.list-group summary:before{content:"";border-bottom:2px solid;border-right:2px solid;flex:none;width:6px;height:6px;margin:0 2px 0 1px;transition:transform .15s;transform:rotate(-45deg)}.list-group details[open]>summary:before{transform:rotate(45deg)}.list-group summary:hover{background:var(--bg);color:var(--text)}.list-group summary .count{background:var(--bg);text-align:center;border-radius:10px;min-width:20px;margin-left:auto;padding:0 6px;font-size:11px}.list-group details>.list{padding:0 0 6px}@media (prefers-reduced-motion:reduce){.list-group summary:before{transition:none}}.board-area{flex-direction:column;align-items:center;gap:12px;min-width:0;display:flex}.board-head{justify-content:space-between;align-items:flex-end;gap:12px;width:min(100%,600px);display:flex}.opening-title{letter-spacing:-.01em;font-size:22px;font-weight:700}.variation-title{color:var(--muted)}.status{color:var(--muted);text-align:right;white-space:nowrap;font-size:13px}.board{aspect-ratio:1;width:min(100%,600px);box-shadow:var(--shadow), 0 0 0 1px #00000026;-webkit-user-select:none;user-select:none;border-radius:6px;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:relative;overflow:hidden;container-type:inline-size}.sq{position:relative}.sq.light{background:var(--light-sq)}.sq.dark{background:var(--dark-sq)}.sq.light.hl{background:var(--hl-light)}.sq.dark.hl{background:var(--hl-dark)}.sq.check:before{content:"";background:var(--check);position:absolute;inset:0}.coord{pointer-events:none;font-size:2.1cqi;font-weight:700;line-height:1;position:absolute}.coord.rank{top:4%;left:5%}.coord.file{bottom:4%;right:6%}.sq.light .coord{color:var(--dark-sq)}.sq.dark .coord{color:var(--light-sq)}.piece{z-index:1;justify-content:center;align-items:center;font-family:Segoe UI Symbol,Apple Symbols,DejaVu Sans,"Noto Sans Symbols 2",sans-serif;font-size:9.6cqi;line-height:1;display:flex;position:absolute;inset:0}.piece.w{color:#fff}.piece.w:after{content:attr(data-outline);color:#1a1a1a;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.piece.b{color:#1a1a1a}.piece{filter:drop-shadow(0 .25cqi .35cqi #0000004d)}.piece.moving{z-index:5;transition:transform .28s}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.controls button{border:1px solid var(--border);background:var(--panel);cursor:pointer;min-width:44px;height:40px;box-shadow:var(--shadow);border-radius:8px;padding:0 12px}.controls button:hover:not(:disabled){border-color:var(--accent)}.controls button:disabled{opacity:.4;cursor:default}.controls button.primary{background:var(--accent);border-color:var(--accent);color:#fff;min-width:96px;font-weight:600}@media (prefers-color-scheme:dark){.controls button.primary{color:#10231d}}.speed{color:var(--muted);align-items:center;gap:6px;margin-left:6px;font-size:13px;display:inline-flex}.speed select{border:1px solid var(--border);background:var(--panel);border-radius:8px;padding:6px 8px}.progress{background:var(--border);border-radius:2px;width:min(100%,600px);height:4px;overflow:hidden}#progress-bar{background:var(--accent);width:0;height:100%;transition:width .25s}.summary,.idea{margin:0}.idea{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;padding:10px 12px}.legend{text-transform:none;letter-spacing:0;align-items:center;gap:6px;font-weight:400;display:inline-flex}.you-swatch{background:var(--accent);border-radius:3px;width:10px;height:10px}.movelist{font-variant-numeric:tabular-nums;grid-template-columns:32px 1fr 1fr;row-gap:2px;max-height:340px;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow-y:auto}.movelist li{display:contents}.movelist .num{color:var(--muted);padding:3px 0}.movelist button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:3px 8px;font-weight:500}.movelist button:hover{background:var(--bg)}.movelist button.you{color:var(--accent);font-weight:700}.movelist button.current{background:var(--accent);color:#fff}@media (prefers-color-scheme:dark){.movelist button.current{color:#10231d}}@media (width<=1100px){.layout{grid-template-columns:240px minmax(0,1fr)}.info{grid-column:1/-1}}@media (width<=760px){.topbar{padding:12px 16px}.layout{grid-template-columns:1fr;padding:16px}.board-area{order:-1}.opening-title{font-size:18px}}[hidden]{display:none!important}.muted{color:var(--muted)}.small{font-size:13px}kbd{border:1px solid var(--border);background:var(--bg);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.board.interactive{touch-action:none}.board.interactive .piece.mine{cursor:grab}.piece.dragging{z-index:10;pointer-events:none;cursor:grabbing;transition:none}.sq.selected:after,.sq.mark:after{content:"";pointer-events:none;position:absolute;inset:0}.sq.selected:after{background:#14551e73}.sq.mark:after{background:#f5b40040;box-shadow:inset 0 0 0 .8cqi #f5b400}.sq.target:after,.sq.target-capture:after{content:"";pointer-events:none;z-index:2;position:absolute}.sq.target:after{background:#141e1447;border-radius:50%;inset:37%}.sq.target-capture:after{border:.9cqi solid #141e1447;border-radius:50%;inset:4%}.board.interactive .sq.target,.board.interactive .sq.target-capture{cursor:pointer}.board-wrap{width:min(100%,600px);position:relative}.board-wrap .board{width:100%}.board-overlay{text-align:center;background:color-mix(in srgb, var(--bg) 72%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;font-weight:600;display:flex;position:absolute;inset:0}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}.scope-select{border:1px solid var(--border);background:var(--panel);border-radius:8px;width:100%;padding:8px 10px}.link-btn{color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0;background:0 0;border:0;padding:0;font-size:12px}.stats{grid-template-columns:1fr 1fr;gap:8px;display:grid}.stat{background:var(--bg);border-radius:8px;flex-direction:column;padding:8px 10px;display:flex}.stat strong{font-variant-numeric:tabular-nums;font-size:18px}.stat span{color:var(--muted);font-size:12px}.prompt p{margin:0 0 8px}.prompt .line,.feedback .line,.answers .line{font-variant-numeric:tabular-nums}.prompt .line{color:var(--muted)}.prompt .dev{color:var(--accent)}.prompt .task{font-weight:600}.feedback{border-left:3px solid var(--border);background:var(--bg);border-radius:8px;margin-top:12px;padding:10px 12px}.feedback p{margin:0 0 6px}.feedback p:last-child{margin-bottom:0}.feedback.ok{border-color:var(--ok);background:var(--ok-soft)}.feedback.ok .verdict strong{color:var(--ok)}.feedback.warn{border-color:var(--warn);background:var(--warn-soft)}.feedback.warn .verdict strong{color:var(--warn)}.feedback.bad{border-color:var(--bad);background:var(--bad-soft)}.feedback.bad .verdict strong{color:var(--bad)}.feedback .about{color:var(--muted);font-size:13px}.eval{background:var(--panel);border:1px solid var(--border);text-align:center;font-variant-numeric:tabular-nums;border-radius:4px;min-width:44px;padding:0 6px;font-size:12px;font-weight:600;display:inline-block}#quiz-answers{margin-top:18px}.answers{gap:8px;margin:0 0 8px;padding:0;list-style:none;display:grid}.feedback .comparison{font-size:13px}.feedback .line-label{margin-top:10px;font-size:13px;font-weight:600}.pv{border:1px solid #0000;border-radius:8px;flex-wrap:wrap;align-items:baseline;gap:4px 6px;padding:6px;display:flex}.pv.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 60%, transparent)}.pv-controls{flex:none;align-items:center;gap:2px;display:inline-flex}.step-btn{border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:6px;min-width:26px;padding:2px 4px;font-size:11px;line-height:1.5}.step-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.step-btn:disabled{opacity:.35;cursor:default}.play-btn{border:1px solid var(--accent);background:var(--panel);color:var(--accent);cursor:pointer;border-radius:6px;flex:none;padding:2px 10px;font-size:12px;font-weight:600}.play-btn:hover,.pv.playing .play-btn{background:var(--accent);color:#fff}@media (prefers-color-scheme:dark){.play-btn:hover,.pv.playing .play-btn{color:#10231d}}.pv-moves{font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:2px;display:inline-flex}.pv-move{cursor:pointer;background:0 0;border:0;border-radius:4px;padding:1px 4px;font-size:14px}.pv-move:hover{background:var(--bg)}.pv-move.yours{color:var(--accent);font-weight:700}.pv-move.current{background:var(--accent);color:#fff}@media (prefers-color-scheme:dark){.pv-move.current{color:#10231d}}.rating-help{margin-top:18px;font-size:14px}.rating-help summary{cursor:pointer;color:var(--accent);font-weight:600}.rating-help .eval{min-width:0}.rating-list{gap:4px;margin:0 0 8px;padding:0;font-size:13px;list-style:none;display:grid}.rating-list li{border-left:3px solid var(--border);border-radius:6px;padding:4px 8px}.rating-list li.correct strong{color:var(--ok)}.rating-list li.wrong strong{color:var(--bad)}.rating-list li.current{background:var(--bg);border-left-color:var(--accent)}.arrows{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0}.arrow polyline{fill:none;stroke-width:20px;stroke-linecap:round;stroke-linejoin:miter}.arrow.book{opacity:.5}.arrow.book polyline{stroke:var(--arrow-book)}.arrow.book polygon{fill:var(--arrow-book)}.arrow-legend{align-items:center;gap:8px;margin:0 0 8px;display:flex}.arrow-swatch{border-top:5px solid var(--arrow-book);opacity:.6;flex:none;width:22px;height:0;position:relative}.arrow-swatch:after{content:"";border:6px solid #0000;border-left:8px solid var(--arrow-book);position:absolute;top:-8px;right:-6px}.elo-slider{width:100%;accent-color:var(--accent);margin:4px 0 2px}.elo-readout{color:var(--muted);margin-bottom:14px;font-size:13px}.elo-readout strong{color:var(--text);font-variant-numeric:tabular-nums;font-size:15px}.wide-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:8px;width:100%;padding:9px 12px;font-weight:600}.wide-btn:hover{filter:brightness(1.08)}@media (prefers-color-scheme:dark){.wide-btn{color:#10231d}}.feedback .wide-btn{margin-top:8px}.stats.stats-3{grid-template-columns:repeat(3,1fr)}.toggle{color:var(--muted);cursor:pointer;align-items:center;gap:6px;margin-left:6px;font-size:13px;display:inline-flex}.toggle input{accent-color:var(--accent)}.board.waiting{cursor:progress}#play-result{margin:0 0 16px}.book-status p{margin:0 0 6px}.book-status .in-book{color:var(--ok);font-weight:600}.book-status .left-book{color:var(--warn)}.book-alternatives{margin:0 0 8px;padding-left:18px;font-size:13px}.book-alternatives li{margin-bottom:2px}.play-moves .pm{border-radius:6px;padding:3px 8px;font-weight:500}.play-moves .pm.book{color:var(--arrow-book)}.play-moves .pm.left-book{background:var(--warn-soft);color:var(--warn);font-weight:700}.play-moves .pm.current{outline:2px solid var(--accent);outline-offset:-2px}.book-swatch{background:var(--arrow-book);border-radius:3px;width:10px;height:10px}.arrow.played,.arrow.best{opacity:.6}.arrow.played polyline{stroke:#e8862a}.arrow.played polygon{fill:#e8862a}.arrow.best polyline{stroke:var(--ok)}.arrow.best polygon{fill:var(--ok)}.play-moves button.pm{text-align:left;font:inherit;cursor:pointer;background:0 0;border:0;font-weight:500}.play-moves button.pm:hover{background:var(--bg)}.play-moves .pm.grade-best,.play-moves .pm.grade-good{color:var(--ok)}.play-moves .pm.grade-inaccuracy{color:var(--warn);font-weight:700}.play-moves .pm.grade-mistake,.play-moves .pm.grade-blunder{color:var(--bad);font-weight:700}.play-moves .pm.pending:after{content:" ·";color:var(--muted);animation:1s ease-in-out infinite alternate pulse}.play-moves .pm.reviewing{background:var(--accent);color:#fff}@media (prefers-color-scheme:dark){.play-moves .pm.reviewing{color:#10231d}}@keyframes pulse{0%{opacity:.2}to{opacity:1}}@media (prefers-reduced-motion:reduce){.play-moves .pm.pending:after{animation:none}}.accuracy{margin-bottom:10px}.accuracy-head{align-items:baseline;gap:8px;margin-bottom:6px;display:flex}.accuracy-value{font-variant-numeric:tabular-nums;font-size:24px}.grade-chips{flex-wrap:wrap;gap:4px;display:flex}.chip{background:var(--bg);border-radius:10px;padding:1px 8px;font-size:12px;font-weight:600}.chip.book{color:var(--arrow-book)}.chip.grade-best{color:var(--ok)}.chip.grade-inaccuracy{color:var(--warn)}.chip.grade-mistake,.chip.grade-blunder{color:var(--bad)}.chip.pending{color:var(--muted);font-weight:400}.feedback.comment{margin:0 0 16px}.feedback.book{border-color:var(--arrow-book)}.comment-actions{gap:6px;margin-top:8px;display:flex}.comment-actions .step-btn,.pgn-actions .step-btn{padding:3px 10px;font-size:12px}.pgn-actions{gap:6px;margin-top:8px;display:flex}.pgn-dialog{border:1px solid var(--border);background:var(--panel);width:min(560px,100vw - 32px);color:var(--text);box-shadow:var(--shadow);border-radius:12px;padding:16px}.pgn-dialog::backdrop{background:#00000059}.pgn-dialog h2{margin:0 0 6px;font-size:16px}.pgn-dialog textarea{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);resize:vertical;border-radius:8px;margin:8px 0 12px;padding:8px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}