:root{--bg: #f4f1ea;--surface: #fffdf8;--surface-2: #ece7dc;--text: #26241f;--muted: #7a756a;--border: #ddd6c8;--accent: #3f7d58;--accent-text: #fff;--good: #2e9e5b;--bad: #d04a3a;--warn: #c98a1b;--wood: #e0b86e;--line: #5b4420;--radius: 14px;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #1a1916;--surface: #24221e;--surface-2: #302d27;--text: #ebe7dd;--muted: #a39d8f;--border: #3a362f;--accent: #5fae7c;--accent-text: #10201a;--wood: #c79f5a;--line: #3a2a10}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font)}h1{font-size:1.6rem;margin:.2em 0 .5em}h2{font-size:1.1rem;margin:0 0 .5em}p{margin:.5em 0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.muted{color:var(--muted)}.small{font-size:.85rem}.mono{font-variant-numeric:tabular-nums}.center{text-align:center}.app{min-height:100vh}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;flex-wrap:wrap}.brand{font-weight:700;color:var(--text);white-space:nowrap}.topbar nav{display:flex;gap:4px;flex:1;overflow-x:auto}.topbar nav a{padding:6px 12px;border-radius:999px;color:var(--muted);white-space:nowrap}.topbar nav a.active{background:var(--surface-2);color:var(--text);font-weight:600}.page{max-width:1040px;margin:0 auto;padding:16px}.center-screen{min-height:100vh;display:grid;place-items:center;padding:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.stack{display:flex;flex-direction:column;gap:14px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}.between{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;padding:10px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;min-height:42px}.btn:hover{text-decoration:none;background:var(--surface-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}.btn-ghost{background:transparent}.btn-small{padding:4px 12px;min-height:32px;font-size:.85rem}input[type=password],input[type=text]{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);width:100%}.login{width:min(360px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}.login h1,.login p{margin:0}.login-logo{font-size:2rem;letter-spacing:6px}.banner{padding:10px 14px;border-radius:10px;margin:10px 0;display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:.95rem}.banner-warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));border:1px solid var(--warn)}.banner-bad{background:color-mix(in srgb,var(--bad) 15%,var(--surface));border:1px solid var(--bad)}.banner-good{background:color-mix(in srgb,var(--good) 15%,var(--surface));border:1px solid var(--good)}.spinner-wrap{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}.list-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}.list-main{flex:1;display:flex;flex-direction:column;color:var(--text);min-width:0}.list-main:hover{text-decoration:none}.list-side{display:flex;gap:6px;align-items:center}.pill{background:var(--surface-2);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:600}.pill-soft{color:var(--accent)}.check{color:var(--accent-text);background:var(--accent);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700}.seg{display:flex;gap:6px}.seg button{flex:1;font:inherit;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer}.seg button.on,.level.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}.levels{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.level{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:var(--text);padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);cursor:pointer}.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch input{position:absolute;opacity:0}.switch-track{width:42px;height:24px;border-radius:999px;background:var(--border);position:relative;transition:background .15s}.switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}.switch input:checked+.switch-track{background:var(--accent)}.switch input:checked+.switch-track .switch-thumb{transform:translate(18px)}.switch input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px}.board{display:block;width:100%;height:auto;max-height:calc(100vh - 130px);aspect-ratio:1;border-radius:10px;box-shadow:0 6px 24px #0000002e;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.board-wood{fill:var(--wood)}.board-lines line{stroke:var(--line);stroke-width:.04}.board-hoshi{fill:var(--line)}.board-coords text{fill:var(--line);opacity:.8}.mark-dead{stroke:var(--bad);stroke-width:.1;stroke-linecap:round;fill:none;pointer-events:none}.mark-black-territory{fill:#111;opacity:.75;pointer-events:none}.mark-white-territory{fill:#fff;stroke:#888;stroke-width:.03;opacity:.9;pointer-events:none}.mark-ok{stroke:var(--good);pointer-events:none}.mark-bad{stroke:var(--bad);pointer-events:none}.board-wrap{width:100%;max-width:640px;margin:0 auto}.game-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:18px;align-items:start}.lesson-body.with-board{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.2fr);gap:18px;align-items:start}.lesson-head{margin-bottom:10px}.lesson-text p{font-size:1.05rem}.progress{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:8px 0 4px}.progress-bar{height:100%;background:var(--accent);transition:width .3s}.coach{border-color:var(--warn)}.coach-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.class-badge{display:inline-flex;align-items:center;gap:6px;font-weight:600}.explanation p{margin:.4em 0}.status{margin:10px 0 4px;min-height:24px}.nav-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.graph{width:100%;height:110px;background:var(--bg);border-radius:8px;cursor:pointer;display:block}.graph-black{fill:color-mix(in srgb,#111 55%,transparent)}.graph-white{fill:color-mix(in srgb,#fff 80%,transparent);stroke:none}.graph-zero{stroke:var(--border);stroke-width:1}.graph-line{stroke:var(--accent);stroke-width:1.5}.graph-cursor{stroke:var(--bad);stroke-width:1.5}.acc{display:flex;gap:24px}.acc>div{display:flex;flex-direction:column}.acc-num{font-size:2rem;font-weight:700;color:var(--accent);line-height:1.1}.acc-opp{color:var(--muted)}.counts{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:4px}.counts li{display:flex;gap:8px;align-items:center}.counts li strong{margin-left:auto}.moves{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px;max-height:280px;overflow:auto}.moves button{width:100%;display:flex;align-items:center;gap:6px;font:inherit;font-size:.85rem;padding:4px 8px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer}.moves button:hover{background:var(--surface-2)}.moves button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}.stone-dot{width:12px;height:12px;border-radius:50%;border:1px solid #777;flex:none}.stone-dot[data-c=black]{background:#111}.stone-dot[data-c=white]{background:#fff}@media (max-width: 760px){.grid-2,.game-layout,.lesson-body.with-board{grid-template-columns:1fr}.page{padding:12px}.board{max-height:none}.topbar{padding:8px 12px}}