:root{--ink:#1d2a24;--muted:#5b6b63;--bg:#f6f8f5;--card:#fff;--line:#d9e2dc;--accent:#2f7d4f;--accent-dark:#235f3c;--light-sq:#eeeed2;--dark-sq:#769656;--hl:#f6f669;--best:#7fc4ff}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent-dark)}
.disclosure{background:#e7f1ea;border-bottom:1px solid var(--line);font-size:13px;padding:6px 16px;text-align:center}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;max-width:1040px;margin:0 auto;padding:14px 16px}
.brand{font-weight:700;font-size:18px;text-decoration:none;color:var(--ink)}
.top nav a{margin-left:16px;text-decoration:none;font-size:15px}
main{max-width:1040px;margin:0 auto;padding:0 16px 40px}
section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:18px 0}
h1{font-size:30px;line-height:1.25;margin:4px 0 12px}
h2{font-size:22px;margin:4px 0 10px}
h3{font-size:18px;margin:18px 0 6px}
.answer{background:#f1f7f3;border-left:4px solid var(--accent);padding:10px 14px;border-radius:6px}
.answer p{margin:6px 0}
.small{font-size:13px;color:var(--muted)}
.tool-grid{display:grid;grid-template-columns:minmax(260px,480px) 1fr;gap:22px}
@media (max-width:820px){.tool-grid{grid-template-columns:1fr}}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;aspect-ratio:1;border:2px solid #4a5a50;border-radius:4px;overflow:hidden;user-select:none}
.sq{display:flex;align-items:center;justify-content:center;font-size:clamp(22px,5.4vw,44px);cursor:pointer;position:relative;line-height:1}
.sq.l{background:var(--light-sq)}.sq.d{background:var(--dark-sq)}
.sq.sel{box-shadow:inset 0 0 0 4px #f0c94b}
.sq.last{background:var(--hl)!important}
.sq.best{box-shadow:inset 0 0 0 4px var(--best)}
.sq .c{position:absolute;left:3px;bottom:1px;font-size:10px;color:#00000080}
.pw{color:#fff;text-shadow:0 0 2px #000,0 0 1px #000}.pb{color:#111}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.panel label{font-weight:600;font-size:14px}
input[type=text]{flex:1;min-width:0;padding:8px;border:1px solid var(--line);border-radius:6px;font:13px ui-monospace,Menlo,monospace}
select{padding:7px;border:1px solid var(--line);border-radius:6px}
button{padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:14px}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;padding:10px 18px}
button.primary:hover{background:var(--accent-dark)}
.lines{padding-left:20px;font-size:15px}
.lines li{margin:6px 0}
.lines .ev{display:inline-block;min-width:58px;font-weight:700}
.lines .pv{color:var(--muted);font-size:13px}
.note{font-size:13px;color:#7a4b16;background:#fff6e5;border:1px solid #f1dcb5;border-radius:6px;padding:8px 10px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#eef4f0}
footer{max-width:1040px;margin:0 auto;padding:10px 16px 40px;font-size:13px;color:var(--muted)}

.sq{min-width:0;min-height:0;overflow:hidden}
.sq .pc{width:88%;height:88%;pointer-events:none;user-select:none}

.photo{margin:18px 0 22px}.photo img{width:100%;height:auto;display:block;border-radius:10px}.photo figcaption{font-size:12px;opacity:.7;margin-top:6px}