:root{--bg:#f3f4f6;--surface:#fff;--surface-2:#f7f8fa;--surface-3:#e9ebef;--text:#1c2230;--text-muted:#6b7280;--border:#e3e5ea;--primary:#2356e6;--primary-strong:#1a46c4;--on-primary:#fff;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--info:#0e7490;--light-sq:#ebd5aa;--dark-sq:#b5875b;--square-selected:#4080ff8c;--square-last:#ffd54f99;--square-check:#e53935bf;--shadow-sm:0 1px 2px #10182814;--shadow:0 4px 16px #1018281a;--shadow-lg:0 12px 32px #10182829;--radius-sm:6px;--radius:10px;--radius-lg:16px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}[data-theme=dark]{--bg:#10131a;--surface:#1a1f29;--surface-2:#222834;--surface-3:#2c3342;--text:#e6e9ef;--text-muted:#9aa3b2;--border:#2e3542;--primary:#6a9bff;--primary-strong:#4f83ef;--on-primary:#0a1220;--success:#34d399;--warning:#f0b429;--danger:#f97066;--info:#22d3ee;--light-sq:#b59c6c;--dark-sq:#6f5639;--square-selected:#6a9bff99;--square-last:#f0b4298c;--square-check:#f97066cc}[data-theme=black]{--bg:#000;--surface:#0c0c10;--surface-2:#14141a;--surface-3:#1d1d26;--text:#f2f2f5;--text-muted:#8a8a96;--border:#26262e;--primary:#7db0ff;--primary-strong:#5a93f4;--on-primary:#050505;--success:#2fd18f;--warning:#f5b225;--danger:#ff6b66;--info:#33d7f0;--light-sq:#38342a;--dark-sq:#16140f;--square-selected:#7db0ff8c;--square-last:#f5b22580;--square-check:#ff6b66cc}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.55;transition:background .2s,color .2s}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.01em;line-height:1.25}h1{font-size:2rem}h2{font-size:1.4rem}h3{font-size:1.1rem}p{margin:0 0 .9rem}button{font-family:inherit}#root{flex-direction:column;min-height:100vh;display:flex}footer{margin-top:auto}.container{width:100%;max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem}.container.wide{max-width:1450px}.container.narrow{max-width:560px}.page{min-height:68vh}.container>section,.container>.grid,.container>h2,.container>.card,.container>.lesson-list,.container>.lb-grid,.container>.home-cards,.container>.pz-layout,.container>.game-layout,.container>.an-grid,.container>.tabs{animation:.22s both pageIn}@keyframes pageIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.muted{color:var(--text-muted)}.text-center{text-align:center}.code{font-family:var(--font-mono);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.1rem .4rem;font-size:.88em}.flex{align-items:center;gap:.9rem;display:flex}.flex-between{justify-content:space-between;align-items:center;gap:1rem;display:flex}.wrap{flex-wrap:wrap}.topbar{z-index:50;background:color-mix(in srgb, var(--surface) 82%, transparent);-webkit-backdrop-filter:blur(14px)saturate(1.4);border-bottom:1px solid var(--border);align-items:center;gap:1.2rem;padding:.6rem 1.25rem;display:flex;position:sticky;top:0;box-shadow:0 1px #10182805}.brand{letter-spacing:-.02em;align-items:center;gap:.55rem;font-size:1.35rem;font-weight:800;display:flex}.brand:hover{text-decoration:none}.brand .accent{color:var(--primary)}.brand .logo-emoji{font-size:1.3rem}.nav{flex:1;align-items:center;gap:.2rem;display:flex}.nav a{color:var(--text-muted);border-radius:8px;padding:.5rem .8rem;font-size:.95rem;font-weight:600}.nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}.nav a.active{color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, transparent)}.topbar-actions{align-items:center;gap:.6rem;display:flex}.icon-btn{width:38px;height:38px;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:9px;place-items:center;font-size:1.1rem;transition:transform .15s,border-color .15s;display:grid}.icon-btn:hover{border-color:var(--primary);transform:rotate(20deg)}.btn{color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .12s,box-shadow .15s,border-color .15s,background .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--primary);box-shadow:var(--shadow-sm);text-decoration:none}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-strong));color:var(--on-primary);border-color:#0000;box-shadow:0 2px 8px #2356e640}.btn-primary:hover:not(:disabled){box-shadow:0 4px 14px #2356e666}.btn-outline{background:0 0}.btn-danger{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 55%, transparent)}.btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--danger) 10%, transparent)}.btn-sm{padding:.38rem .75rem;font-size:.84rem}.btn-lg{padding:.85rem 1.6rem;font-size:1.05rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.35rem;transition:box-shadow .18s,transform .18s,border-color .18s}.grid{gap:1rem;display:grid}.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.grid-4{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.form{gap:1rem;display:grid}.form label{gap:.4rem;font-size:.9rem;font-weight:600;display:grid}.input{color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;font-family:inherit;font-size:1rem;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);outline:none}select.input{cursor:pointer}.form-error{color:var(--danger);font-size:.86rem}.badge{text-transform:uppercase;letter-spacing:.03em;border-radius:999px;align-items:center;gap:.3rem;padding:.14rem .55rem;font-size:.72rem;font-weight:700;display:inline-flex}.badge-green{background:color-mix(in srgb, var(--success) 16%, transparent);color:var(--success)}.badge-gray{background:var(--surface-3);color:var(--text-muted)}.badge-red{background:color-mix(in srgb, var(--danger) 15%, transparent);color:var(--danger)}.badge-blue{background:color-mix(in srgb, var(--primary) 14%, transparent);color:var(--primary)}.badge-gold{background:color-mix(in srgb, var(--warning) 20%, transparent);color:var(--warning)}.board-wrap{justify-content:center;display:flex}.board{aspect-ratio:1;width:min(92vw,600px,70vh);box-shadow:var(--shadow-lg);border:3px solid var(--dark-sq);-webkit-user-select:none;user-select:none;border-radius:6px;grid-template-rows:repeat(8,minmax(0,1fr));grid-template-columns:repeat(8,minmax(0,1fr));display:grid;overflow:hidden}.square{cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}.board-pieces{pointer-events:none}.hint-dot{pointer-events:none;background:#143c1473;border-radius:50%;width:30%;height:30%;margin:auto;animation:.14s ease-out hintPop;position:absolute;inset:0;box-shadow:inset 0 0 0 999px #78b45a24}@keyframes hintPop{0%{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.square.light{background:var(--light-sq)}.square.dark{background:var(--dark-sq)}.square.selected{background:var(--square-selected)!important}.square.last-move{box-shadow:inset 0 0 0 999px var(--square-last)}.square.check{box-shadow:inset 0 0 0 999px var(--square-check)}.square:hover{outline:2px solid var(--primary);outline-offset:-2px;z-index:2}.coord{color:#0006;pointer-events:none;font-size:clamp(9px,1.5vmin,11px);font-weight:700;position:absolute}.coord.file{bottom:2px;right:3px}.coord.rank{top:2px;left:3px}.piece{-webkit-tap-highlight-color:transparent;place-items:center;width:100%;height:100%;font-size:clamp(22px,7vmin,54px);display:grid}.piece-abs{pointer-events:none;-webkit-user-select:none;user-select:none;will-change:left, top;place-items:center;width:12.5%;height:12.5%;font-size:clamp(22px,7vmin,54px);transition:left .22s cubic-bezier(.2,.8,.3,1),top .22s cubic-bezier(.2,.8,.3,1);display:grid;position:absolute}.piece,.piece-abs{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Segoe UI Symbol,"Noto Sans Symbols 2",DejaVu Sans,Arial Unicode MS,sans-serif;line-height:1}.piece-abs.w{color:#fafafa;text-shadow:0 2px 3px #0000008c,0 0 1px #000000e6}.piece-abs.b{color:#1a1a1a;text-shadow:0 2px 3px #ffffff47}.piece.w{color:#fafafa;text-shadow:0 2px 3px #0000008c,0 0 1px #000000e6}.piece.b{color:#1a1a1a;text-shadow:0 2px 3px #ffffff47}.player-bar{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:.65rem;padding:.55rem .9rem;transition:border-color .15s,background .15s;display:flex}.player-bar.active{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, var(--surface))}.player-bar .dot{background:var(--text-muted);border-radius:50%;width:10px;height:10px}.player-bar.active .dot{background:var(--success)}.player-bar .name{text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:700;overflow:hidden}.player-bar .rating{color:var(--text-muted);font-size:.8rem}.player-bar .clock{font-variant-numeric:tabular-nums;margin-left:auto;font-size:1.2rem;font-weight:800}.player-bar.low .clock{color:var(--danger)}.move-list{background:var(--surface-2);border:1px solid var(--border);max-height:230px;font-family:var(--font-mono);border-radius:10px;padding:.4rem .6rem;font-size:.85rem;overflow-y:auto}.move-list .mv{gap:.6rem;padding:.1rem 0;display:flex}.move-list .num{color:var(--text-muted);width:1.6rem}.msan{cursor:pointer;border-radius:4px;padding:.05rem .35rem}.msan:hover{background:color-mix(in srgb, var(--primary) 16%, transparent)}.chat{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.chat-log{flex:1;padding:.6rem .75rem;font-size:.9rem;overflow-y:auto}.chat-msg{word-break:break-word;margin:.15rem 0}.chat-msg strong{color:var(--primary)}.chat-input-row{border-top:1px solid var(--border);display:flex}.chat-input-row input{color:var(--text);background:0 0;border:0;flex:1;padding:.55rem .75rem;font-family:inherit;font-size:.92rem}.chat-input-row input:focus{outline:none}.chat-input-row button{border:0;border-left:1px solid var(--border);color:var(--primary);cursor:pointer;background:0 0;padding:0 1rem;font-weight:700}.tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.tab{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:.45rem 1rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}.lb-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1rem;display:grid}@media (width<=860px){.lb-grid{grid-template-columns:1fr}}.table-wrap{overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:.95rem}.table th,.table td{text-align:left;border-bottom:1px solid var(--border);padding:.7rem .8rem}.table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.76rem}.table tbody tr:hover{background:var(--surface-2)}.rank-badge{background:var(--surface-3);border-radius:50%;place-items:center;width:30px;height:30px;font-weight:700;display:inline-grid}.rank-1{color:#1a1a1a;background:#f0c418}.rank-2{color:#1a1a1a;background:#c8c8c8}.rank-3{color:#fff;background:#cd7f32}.hero{text-align:center;padding:2.6rem 1rem 2rem}.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800}.hero .subtitle{color:var(--text-muted);max-width:640px;margin:.9rem auto 1.8rem;font-size:1.15rem}.hero-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.home-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:1rem;max-width:1080px;margin:0 auto;display:grid}.home-cards .card{flex-direction:column;justify-content:space-between;display:flex}.home-card-cta{flex-direction:column;align-items:stretch;height:100%;display:flex}.home-card-cta .cta-icon{margin-bottom:.35rem;font-size:1.6rem}@media (width<=900px){.home-cards{grid-template-columns:1fr;max-width:560px}}.feature-tile{text-align:left;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:1.4rem;transition:transform .15s,box-shadow .2s}.feature-tile:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.feature-tile .icon{margin-bottom:.5rem;font-size:1.6rem}.feature-tile h3{margin-bottom:.25rem}.lesson-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem;display:grid}.lesson-card{text-align:left;background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--text);border-radius:12px;flex-direction:column;gap:.35rem;padding:1rem 1.1rem;font-size:.95rem;transition:transform .12s,box-shadow .15s,border-color .15s;display:flex}.lesson-card:hover{box-shadow:var(--shadow);border-color:var(--primary);transform:translateY(-2px)}.lesson-card .lesson-num{color:var(--primary);font-size:.88rem;font-weight:800}.lesson-card h3{margin:0;font-size:1.02rem}.lesson-card .meta{color:var(--text-muted);font-size:.8rem}.stars{color:var(--warning);letter-spacing:.1em}.lesson-progress{align-items:center;gap:.8rem;display:flex}.lesson-progress-track{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;flex:1;max-width:520px;height:10px;overflow:hidden}.lesson-progress-fill{background:linear-gradient(90deg, var(--primary), var(--success));border-radius:999px;height:100%;transition:width .4s}.lesson-practice{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;margin-top:.8rem;padding:1rem}.lesson-practice .board{border-width:2px;width:min(70vw,320px)}.puzzle-status{min-height:1.5em;margin-top:1rem;font-size:1rem;font-weight:700}.puzzle-status.good{color:var(--success)}.puzzle-status.bad{color:var(--danger)}.pz-layout{grid-template-columns:minmax(320px,1fr) minmax(0,520px);align-items:start;gap:1.4rem;display:grid}.pz-problem{gap:.8rem;display:grid}.pz-title-row{align-items:center;gap:.7rem;display:flex}.pz-badge{letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:.15rem .6rem;font-size:.72rem;font-weight:700}.pz-easy{color:var(--success);background:#16a34a26}.pz-med{color:var(--warning);background:#d977062e}.pz-hard{color:var(--danger);background:#dc262626}.pz-exp{color:var(--danger);background:#be123c2e}.pz-gm{color:#a855f7;background:#581c8733}.pz-tag{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:.12rem .5rem;font-size:.74rem;font-weight:600}.pz-example{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.7rem .85rem;font-size:.9rem}.pz-example code{font-family:var(--font-mono);word-break:break-all;margin-top:.3rem;font-size:.8rem;display:block}.pz-example-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;font-weight:700}.pz-hints{background:var(--surface);border:1px solid var(--border);border-radius:10px;gap:.35rem;padding:.75rem .9rem;display:grid}.pz-hint{border-left:3px solid var(--primary);background:color-mix(in srgb, var(--primary) 6%, transparent);border-radius:4px;padding:.25rem .4rem;font-size:.9rem}.pz-feedback{border-radius:8px;padding:.5rem .75rem;font-size:.92rem;font-weight:600}.pz-feedback.ok{background:color-mix(in srgb, var(--success) 14%, transparent);color:var(--success)}.pz-feedback.err{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger)}.pz-status{min-height:1.4em;font-weight:700}@media (width<=900px){.pz-layout{grid-template-columns:1fr}}.replay-layout{grid-template-columns:minmax(0,1fr) 220px;align-items:start;gap:1rem;display:grid}.replay-eval{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem;font-size:.9rem}@media (width<=760px){.replay-layout{grid-template-columns:1fr}}.an-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:1rem;display:grid}.an-grid .board{width:min(88vw,640px,72vh)}@media (width<=900px){.an-grid{grid-template-columns:1fr}.an-grid .board{width:min(92vw,640px)}}.eval-bar-track{border:1px solid var(--border);background:linear-gradient(90deg,#333 50%,#ddd 50%);border-radius:6px;height:26px;position:relative;overflow:hidden}.eval-bar-track .eval-bar-fill{background:linear-gradient(90deg,#2c2c2c,#555);width:50%;transition:width .3s;position:absolute;inset:0 auto 0 0}.eval-bar-label{color:var(--text);mix-blend-mode:difference;place-items:center;font-size:.8rem;font-weight:800;display:grid;position:absolute;inset:0}.seg{border:1px solid var(--border);background:var(--surface);border-radius:9px;display:inline-flex;overflow:hidden}.seg-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:0;padding:.5rem 1rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:background .15s,color .15s}.seg-btn+.seg-btn{border-left:1px solid var(--border)}.seg-btn:hover:not(:disabled){color:var(--text)}.seg-btn.active{background:var(--primary);color:var(--on-primary)}.seg-btn:disabled{opacity:.55;cursor:not-allowed}.game-overlay{z-index:20;background:#0a0c128c;border-radius:8px;place-items:center;animation:.25s both fadeIn;display:grid;position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);text-align:center;border-radius:14px;max-width:85%;padding:1.1rem 1.4rem;animation:.25s cubic-bezier(.2,.8,.3,1.2) both popIn}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.game-over-result{font-size:1.2rem;font-weight:800}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.page-head{flex-wrap:wrap;align-items:baseline;gap:.8rem;margin-bottom:.4rem;display:flex}.empty-state{text-align:center;color:var(--text-muted);border:1px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface);margin:1rem 0;padding:2.5rem 1rem}.empty-state .empty-icon{margin-bottom:.5rem;font-size:2rem;display:block}.muted a{font-weight:600}.btn,.icon-btn,.tab,.seg-btn,.lesson-card,.rank-badge{-webkit-tap-highlight-color:transparent}@media (prefers-reduced-motion:reduce){.game-overlay,.game-over-card,.container>section,.container>.grid,.container>.card,.container>h2,.container>.lesson-list,.container>.lb-grid,.container>.home-cards,.container>.pz-layout,.container>.game-layout,.container>.an-grid,.container>.tabs{animation:none!important}}.toast-layer{z-index:100;gap:.6rem;display:grid;position:fixed;top:1rem;right:1rem}.toast{background:var(--surface);color:var(--text);border:1px solid var(--border);border-left:4px solid var(--primary);box-shadow:var(--shadow);border-radius:10px;min-width:220px;padding:.7rem 1rem;font-size:.92rem;animation:.2s slideIn}.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--danger)}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.modal-backdrop{z-index:90;background:#0000008c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:88vh;padding:1.4rem;overflow-y:auto}.spinner{border:3px solid var(--surface-3);border-top-color:var(--primary);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading{color:var(--text-muted);align-items:center;gap:.6rem;display:flex}.profile-head{grid-template-columns:auto 1fr;align-items:center;gap:1.2rem;display:grid}.avatar-lg{width:88px;height:88px;color:var(--on-primary);background:linear-gradient(135deg, var(--primary), var(--primary-strong));border-radius:50%;place-items:center;font-size:2.5rem;font-weight:800;display:grid}.rating-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;display:grid}.rating-tile{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;padding:.9rem}.rating-tile .v{font-size:1.5rem;font-weight:800}.game-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:1rem;display:grid}.game-side{align-content:start;gap:1rem;display:grid}@media (width<=820px){.game-layout{grid-template-columns:1fr}}@media (width<=720px){.topbar{flex-wrap:wrap;gap:.6rem}.nav{order:3;justify-content:space-between;width:100%;overflow-x:auto}.hero{padding-top:2.5rem}.board{width:92vw;height:auto}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}