:root{color-scheme:dark;--bg: #121418;--bg-2: #171a1f;--surface: #1c2027;--surface-2: #242a33;--surface-3: #2e3540;--border: #2b313b;--border-2: #3a4250;--text: #eceef1;--muted: #9aa2ae;--faint: #6c7480;--accent: #f2b544;--accent-2: #ffc95e;--accent-ink: #1e1604;--sq-light: #ecdcbf;--sq-dark: #b38b66;--last-move: rgba(247, 205, 74, .5);--check: rgba(229, 64, 54, .95);--dot: rgba(30, 22, 12, .28);--select: rgba(242, 181, 68, .55);--best: #35c09d;--good: #8cc152;--inacc: #f2c14e;--mistake: #f08a3c;--blunder: #e5534b;--bad: var(--blunder);--chart-1: #3987e5;--chart-1-hover: #5b9cec;--radius: 12px;--side-w: 380px;--board: min( calc(100vh - 205px) , calc(100vw - var(--side-w) - 120px), 760px);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45;font-feature-settings:"cv11","ss01"}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text)}body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}[hidden]{display:none!important}.muted{color:var(--muted)}.small{font-size:.82rem}h2{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.01em}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:color-mix(in srgb,var(--bg-2) 92%,transparent);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}.brand-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-2),#d98f1f);color:var(--accent-ink);font-size:19px}.tabs{display:flex;gap:2px}.tabs button{border:0;background:transparent;padding:7px 14px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:550}.tabs button:hover{color:var(--text);background:var(--surface)}.tabs button.on{color:var(--text);background:var(--surface-2)}.tab-count{margin-left:6px;font-size:.75rem;padding:1px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700}.app-body{max-width:1280px;margin:0 auto;padding:16px 20px 20px}.btn,.buttons button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:9px;cursor:pointer;font-weight:600;font-size:.92rem;background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);transition:background .12s,border-color .12s,transform .06s}.btn:hover:not(:disabled),.buttons button:hover:not(:disabled){background:var(--surface-3)}.btn:active:not(:disabled),.buttons button:active:not(:disabled){transform:translateY(1px)}.btn:disabled,.buttons button:disabled{opacity:.4;cursor:default}.btn-primary,.buttons button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 3px #b07a17}.btn-primary:hover:not(:disabled),.buttons button.primary:hover:not(:disabled){background:var(--accent-2)}.btn-lg{padding:13px 18px;font-size:1.02rem;border-radius:11px}.btn-sm{padding:6px 11px;font-size:.84rem}.btn-block{width:100%}.buttons{display:flex;gap:8px;flex-wrap:wrap}.buttons button{flex:1;min-width:88px}.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--muted)}.icon-btn:hover{background:var(--surface-2);color:var(--text)}button.link{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-weight:600}.link{color:var(--accent)}.play{display:grid;grid-template-columns:auto var(--side-w);gap:22px;justify-content:center;align-items:start}.board-area{display:flex;flex-direction:column;gap:8px}.board-row{display:flex;gap:8px;align-items:stretch}.board-wrap{position:relative;width:var(--board)}.board-wrap>div:first-child{border-radius:4px;overflow:hidden;box-shadow:0 10px 40px #00000080}.player{display:flex;align-items:center;gap:10px;min-height:44px;padding-left:34px}.board-area.no-evalbar .player{padding-left:0}.avatar{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-size:24px;flex:none;border:1px solid var(--border-2)}.avatar-w{background:#f1ede4;color:#2a2a2a}.avatar-b{background:#2a2f37;color:#f1ede4}.player.active .avatar{box-shadow:0 0 0 2px var(--accent)}.player-info{display:flex;flex-direction:column;gap:1px;min-width:0}.player-name{font-weight:650;display:flex;align-items:center;gap:8px}.player-sub{color:var(--muted);font-weight:500}.captured{display:flex;align-items:center;gap:0;min-height:18px;font-size:16px;line-height:1;color:var(--muted)}.captured .cap+.cap-p,.captured .cap-p+.cap-n,.captured .cap-n+.cap-b{margin-left:2px}.captured .cap{margin-right:-3px}.captured-w .cap{color:#e9e4d8;text-shadow:0 0 1px #000,0 0 1px #000}.captured-b .cap{color:#11141a;text-shadow:0 0 1px rgba(255,255,255,.6)}.mat-diff{margin-left:8px;font-size:.8rem;color:var(--muted);font-weight:600}.dots{display:inline-flex;gap:3px;margin-left:4px}.dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:dot 1s infinite ease-in-out}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}.evalbar{position:relative;width:26px;flex:none;border-radius:4px;overflow:hidden;background:#3a3f48;display:flex;flex-direction:column;justify-content:flex-end}.evalbar.flipped{flex-direction:column-reverse}.evalbar-white{background:#f3f1ec;transition:height .45s cubic-bezier(.3,.7,.2,1)}.evalbar-label{position:absolute;left:0;right:0;text-align:center;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;padding:0 1px}.evalbar-label.on-white{bottom:5px;color:#2b2f36}.evalbar-label.on-black{top:5px;color:#eceef1}.evalbar.flipped .evalbar-label.on-white{bottom:auto;top:5px}.evalbar.flipped .evalbar-label.on-black{top:auto;bottom:5px}.board-wrap.flash-bad:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:4px;pointer-events:none;z-index:5;background:#e5534b47;box-shadow:0 0 0 3px var(--blunder),0 0 34px #e5534b80;animation:flash-bad .9s ease-out}@keyframes flash-bad{0%{background:#e5534b8c}to{background:#e5534b1f}}.sq-badge{position:absolute;z-index:6;pointer-events:none;transform:translate(-58%,-42%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}.viewing-tag{position:absolute;z-index:6;left:50%;bottom:10px;transform:translate(-50%);background:#121418e0;border:1px solid var(--border-2);border-radius:999px;padding:6px 8px 6px 14px;display:flex;align-items:center;gap:10px;font-size:.84rem;white-space:nowrap}.side{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);height:calc(var(--board) + 104px);min-height:520px;overflow:hidden}.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-2)}.side-title{font-weight:700;display:flex;align-items:center;gap:8px}.side-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;min-height:0}.side-foot{padding:10px 12px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;background:var(--bg-2)}.mode-switch{display:flex;background:var(--surface-2);border-radius:8px;padding:2px}.mode-switch button{border:0;background:transparent;color:var(--muted);padding:4px 9px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:600}.mode-switch button.on{background:var(--surface-3);color:var(--text)}.status{font-weight:600;color:var(--muted);font-size:.9rem;min-height:1.3em}.status-over{color:var(--accent)}.navctl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.navctl button{height:38px;border-radius:8px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);cursor:pointer;display:grid;place-items:center}.navctl button:hover:not(:disabled){background:var(--surface-3)}.navctl button:disabled{opacity:.35;cursor:default}.movelist{flex:1;min-height:120px;overflow-y:auto;border-radius:8px;background:var(--bg-2);border:1px solid var(--border);font-variant-numeric:tabular-nums}.movelist-empty{padding:14px;margin:0}.mrow{display:grid;grid-template-columns:44px 1fr 1fr;align-items:center;padding:1px 6px}.mrow:nth-child(2n){background:#ffffff06}.mnum{color:var(--faint);font-size:.85rem;padding-left:6px}.mv{display:flex;align-items:center;gap:6px;border:0;background:transparent;text-align:left;padding:5px 8px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.92rem;min-height:30px}.mv:hover{background:var(--surface-2)}.mv.current{background:var(--surface-3);box-shadow:inset 0 -2px 0 var(--accent)}.mv.empty{cursor:default}.side-body>.movelist{flex:1 1 140px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow-x:auto}.card-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;font-weight:600}.side .card{background:var(--surface-2);border-color:var(--border-2);padding:12px 13px}.guard-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem}.guard-text{margin:8px 0 4px;font-size:.96rem}.guard-best{margin:6px 0 0}.guard-bad{border-color:var(--blunder)!important;background:color-mix(in srgb,var(--blunder) 12%,var(--surface-2))!important}.puzzle-solved{border-color:var(--best)!important;background:color-mix(in srgb,var(--best) 12%,var(--surface-2))!important}.coach-inacc{border-color:var(--inacc)!important}.coach-mistake{border-color:var(--mistake)!important}.coach-bad{border-color:var(--blunder)!important;background:color-mix(in srgb,var(--blunder) 10%,var(--surface-2))!important}.coach-line{margin:6px 0 0;font-size:.9rem}.coach-buttons{margin-top:12px}.badge{font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-3)}.badge.bad,.badge.blunder{background:var(--blunder);color:#fff}.badge.best{background:var(--best);color:#06231e}.badge.good{background:var(--good);color:#102006}.badge.inacc{background:var(--inacc);color:#2a2104}.badge.mistake{background:var(--mistake);color:#2a1404}.cls-icon{display:inline-grid;place-items:center;border-radius:50%;font-weight:800;line-height:1;flex:none;letter-spacing:-.06em;color:#fff;box-shadow:inset 0 -2px #0000002e}.cls-best{background:var(--best)}.cls-good{background:var(--good)}.cls-inacc{background:var(--inacc);color:#3a2c00}.cls-mistake{background:var(--mistake)}.cls-blunder{background:var(--blunder)}.cls-text-best{color:var(--best)}.cls-text-good{color:var(--good)}.cls-text-inacc{color:var(--inacc)}.cls-text-mistake{color:var(--mistake)}.cls-text-blunder{color:var(--blunder)}.gameover{text-align:center;padding:18px 14px;border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));border:1px solid var(--border-2)}.gameover-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}.gameover-reason{color:var(--muted);margin:2px 0 14px}.gameover .row{display:flex;gap:8px;margin-top:10px}.gameover .row .btn{flex:1}.review{display:flex;flex-direction:column;gap:12px}.review-result{font-size:.92rem}.review-loading{padding:18px 6px;display:flex;flex-direction:column;gap:10px}.review-title{font-weight:700}.progress{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}.progress>div{height:100%;background:var(--accent);transition:width .2s}.acc-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.acc{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:10px;border:1px solid var(--border-2)}.acc-you{background:#f1ede4;color:#1c1f24}.acc-bot{background:var(--surface-3)}.acc-name{font-size:.78rem;font-weight:600;opacity:.75}.acc-val{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.acc-caption{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.evalgraph{width:100%;height:72px;display:block;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid var(--border-2)}.eg-black{fill:#3a3f48}.eg-white{fill:#f3f1ec}.eg-mid{stroke:#96969680;stroke-width:1;vector-effect:non-scaling-stroke}.eg-cursor{stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}.eg-dot{stroke:#fff;stroke-width:1.2}.eg-blunder{fill:var(--blunder)}.eg-mistake{fill:var(--mistake)}.eg-inacc{fill:var(--inacc)}.comment{border-radius:10px;padding:12px;background:var(--surface-2);border:1px solid var(--border-2);border-left-width:4px}.comment p{margin:8px 0 0;font-size:.93rem}.comment .btn{margin-top:10px}.comment-head{display:flex;align-items:center;gap:9px;font-size:1rem}.comment-who{margin-left:auto;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}.comment-extra{color:var(--text)}.comment-best{border-left-color:var(--best)}.comment-good{border-left-color:var(--good)}.comment-inacc{border-left-color:var(--inacc)}.comment-mistake{border-left-color:var(--mistake)}.comment-blunder{border-left-color:var(--blunder)}.cls-table{width:100%;border-collapse:collapse;font-size:.9rem}.cls-table th{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:0 0 4px}.cls-table td{padding:5px 0;border-top:1px solid var(--border)}.cls-table .n{text-align:center;font-weight:800;width:56px;font-variant-numeric:tabular-nums}.cls-table .lbl{display:flex;align-items:center;gap:8px;font-weight:600;justify-content:center}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#06080a9e;display:grid;place-items:center;padding:16px;animation:fade .15s}.modal{width:min(440px,100%);max-height:calc(100vh - 32px);overflow-y:auto;outline:none;background:var(--surface);border:1px solid var(--border-2);border-radius:16px;padding:18px 18px 16px;box-shadow:0 30px 80px #0009;display:flex;flex-direction:column;gap:16px;animation:pop .16s}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.98)}}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-actions{margin-top:2px}.field{display:flex;flex-direction:column;gap:8px}.field>span{font-weight:600;font-size:.9rem}.field-row{display:flex;justify-content:space-between;align-items:baseline}input[type=range]{width:100%;accent-color:var(--accent)}.seg{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px}.seg button{flex:1;border:0;background:transparent;padding:8px 6px;border-radius:7px;cursor:pointer;color:var(--muted);font-weight:600;font-size:.88rem}.seg button:hover{color:var(--text)}.seg button.on{background:var(--surface-3);color:var(--text);box-shadow:0 1px #ffffff0d inset}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:.92rem}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle-ui{width:38px;height:22px;border-radius:999px;background:var(--surface-3);position:relative;flex:none;transition:background .15s}.toggle-ui:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}.toggle input:checked+.toggle-ui{background:var(--accent)}.toggle input:checked+.toggle-ui:after{transform:translate(16px)}.toggle input:focus-visible+.toggle-ui{outline:2px solid var(--accent);outline-offset:2px}.page{display:flex;flex-direction:column;gap:16px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}.page-head p{margin:4px 0 0}.drill-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.drill-card{display:flex;flex-direction:column;gap:10px;align-items:center}.drill-meta{display:flex;flex-direction:column;gap:2px;align-self:stretch}.drill-card .buttons{align-self:stretch}.mini{flex:none;pointer-events:none}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.tile-label{font-size:.8rem;color:var(--muted)}.tile-value{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.tile-sub{font-size:.8rem}.chart svg{width:100%;height:auto;max-height:230px;display:block}.chart .grid{stroke:var(--border);stroke-width:1}.chart .axis{fill:var(--muted);font-size:11px}.chart .bar{fill:var(--chart-1)}.chart .bar-hit:hover .bar{fill:var(--chart-1-hover)}.chart .avg-line{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4}.legend{display:flex;gap:16px;font-size:.82rem;color:var(--muted);margin-bottom:6px;flex-wrap:wrap}.legend i{display:inline-block;vertical-align:middle;margin-right:6px}.sw-bar{width:10px;height:10px;border-radius:2px;background:var(--chart-1)}.sw-line{width:18px;height:0;border-top:2px dashed var(--muted)}.table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}.table th{text-align:left;color:var(--muted);font-weight:500;padding:4px 6px;border-bottom:1px solid var(--border)}.table td{padding:6px;border-bottom:1px solid var(--surface-2)}.res-win{color:var(--good)}.res-loss{color:var(--blunder)}@media (max-width: 900px){:root{--board: min( calc(100vw - 58px) , 640px)}.play{grid-template-columns:1fr;justify-items:center}.side{width:100%;max-width:calc(var(--board) + 34px);height:auto;min-height:0}.side-body{overflow:visible}.movelist{max-height:220px}.topbar{padding:8px 12px}.app-body{padding:12px 16px 32px}}@media (max-width: 900px){.board-area.no-evalbar{--board: min( calc(100vw - 32px) , 640px)}}@media (max-width: 480px){.evalbar{width:18px}.player{padding-left:26px}.brand-text{display:none}.tabs button{padding:7px 10px}:root{--board: calc(100vw - 58px) }}