:root{--board-bg: #d8b676;--board-line: #2b1d10;--stone-black: #1a1a1a;--stone-white: #f5f3ee;--bg: #0f1419;--panel: #1a2028;--text: #e6e6e6;--muted: #8a9098;--accent: #4ea0ff;--good: #5fcf80;--bad: #ff6b6b}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column}header{padding:16px 24px;border-bottom:1px solid #2a323d;display:flex;align-items:center;gap:24px}header h1{font-size:18px;margin:0;font-weight:600}nav{display:flex;gap:16px;margin-left:auto}nav a{color:var(--muted);text-decoration:none;padding:4px 12px;border-radius:4px;font-size:14px}nav a:hover{color:var(--text)}nav a.active{color:var(--accent);background:#4ea0ff1a}main{flex:1;padding:24px;max-width:1200px;width:100%;margin:0 auto}footer{padding:12px 24px;border-top:1px solid #2a323d;font-size:12px;color:var(--muted);text-align:center}footer a{color:var(--muted);text-decoration:underline;font-family:ui-monospace,SFMono-Regular,monospace}footer a:hover{color:var(--text)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}@media (max-width: 800px){.layout{grid-template-columns:1fr}}.board-wrap{background:var(--panel);padding:16px;border-radius:8px;display:flex;justify-content:center}.panel{background:var(--panel);padding:16px;border-radius:8px}.panel h2{margin-top:0;font-size:16px}.panel p{font-size:14px;color:var(--muted)}.board{width:100%;max-width:600px;aspect-ratio:1 / 1;height:auto;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.board-bg{fill:var(--board-bg)}.board-line{stroke:var(--board-line);stroke-width:1}.board-star{fill:var(--board-line)}.board-coord{fill:#555;font-size:12px;font-family:system-ui}.board-label{fill:#2b1d10;font-size:14px;font-weight:600;font-family:system-ui}.stone-black{fill:var(--stone-black);stroke:#000;stroke-width:.5}.stone-white{fill:var(--stone-white);stroke:#555;stroke-width:.5}.last-move{stroke-width:2;fill:none}.last-move.on-black{stroke:var(--stone-white)}.last-move.on-white{stroke:var(--stone-black)}button{background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px}button.secondary{background:#2a323d}button:hover{opacity:.9}.feedback{padding:12px;border-radius:4px;font-size:14px;margin:12px 0}.feedback.good{background:#5fcf8026;color:var(--good)}.feedback.bad{background:#ff6b6b26;color:var(--bad)}.feedback.info{background:#4ea0ff26;color:var(--accent)}.puzzle-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.puzzle-list li{background:var(--panel);padding:12px;border-radius:4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.puzzle-list li:hover{outline:1px solid var(--accent)}.puzzle-list .meta{font-size:12px;color:var(--muted)}.puzzle-list .solved{color:var(--good);font-weight:600}.tier-section{margin-bottom:24px}.tier-section h3{font-size:14px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.button-row{display:flex;gap:8px;margin-top:12px}.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.home-card{background:var(--panel);padding:24px;border-radius:8px;text-decoration:none;color:var(--text)}.home-card:hover{outline:1px solid var(--accent)}.home-card h3{margin:0 0 8px}.home-card p{color:var(--muted);margin:0;font-size:14px}