*{box-sizing:border-box}body{margin:0;background:#101817;color:#edf2e9;font:14px/1.7 system-ui,sans-serif}header{padding:23px 5%;border-bottom:1px solid #34413b;display:flex;justify-content:space-between;align-items:center}header a{color:#e5f3d5;text-decoration:none;font-size:25px;letter-spacing:5px;font-weight:800}header span{display:block;font-size:9px;letter-spacing:2px;color:#8b9d92}button,select{font:inherit;color:inherit;background:#25362e;border:1px solid #53654e;border-radius:7px;padding:8px 13px;cursor:pointer}button:hover{background:#3c503d}button:focus-visible,select:focus-visible{outline:3px solid #c2f28c}main{max-width:1400px;margin:auto;padding:35px 5%}.eyebrow{color:#bcdf91;font-size:10px;letter-spacing:2px}h1{font-size:clamp(25px,3.3vw,43px);letter-spacing:.06em;margin:8px 0}.intro p{color:#a1b0a5;margin:4px 0 30px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px}.space{background:radial-gradient(ellipse at 50% 40%,#293d32,#17231f 70%);border:1px solid #3c4b3d;border-radius:16px;overflow:hidden;align-self:start}.spacehead{padding:20px 24px;display:flex;justify-content:space-between;font-size:12px;color:#bbccb7}.spacehead span:last-child{color:#a8ca87;font-size:10px;letter-spacing:2px}canvas{width:100%;height:520px;display:block;touch-action:none;cursor:grab}.viewtools{display:flex;justify-content:space-between;padding:0 24px;gap:10px}.caption{font-size:11px;color:#9aae9b;text-align:center;margin:16px}.match,.guide{padding:22px;background:#1d2a23;border:1px solid #3b4b3c;border-radius:12px;margin-bottom:16px}.scores{display:flex;justify-content:space-between;margin-top:15px}.scores>div{display:flex;align-items:center;gap:7px}.scores strong{font-size:30px;margin-left:6px}i{display:inline-block;width:17px;height:17px;border-radius:50%;border:1px solid #8c9b86}.black{background:#111515}.white{background:#eef2dd}#status{color:#d0eba7;min-height:48px}.match label{font-size:12px}.guide{background:transparent;padding:16px 20px}.guide p{font-size:12px;color:#a3b49f;margin:8px 0}.legend{font-size:11px;display:flex;gap:24px}#layers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.layer-title{font-size:11px;color:#aec296;margin-bottom:6px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.cell{padding:0;height:31px;border-radius:5px;background:#223328;border-color:#3c5140;position:relative}.cell:disabled{cursor:default}.cell.legal{border-color:#accf79;color:#d9f7af;background:#435b32}.stone{width:21px;height:21px;border-radius:50%;display:block;margin:auto;border:1px solid #84927b}.stone.black{background:radial-gradient(circle at 30% 25%,#5b6460,#0c1210 75%)}.stone.white{background:radial-gradient(circle at 30% 25%,#fff,#b4c4a6)}details{margin-top:30px;border-top:1px solid #344a3a;padding:20px 0;color:#aebca9;font-size:13px}summary{cursor:pointer;color:#d9e7cb}footer{font-size:9px;letter-spacing:2px;color:#7c907c;margin:15px 0}@media(max-width:850px){.layout{grid-template-columns:1fr}canvas{height:420px}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}#layers{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}.cell{height:36px}}@media(max-width:520px){main{padding:25px 5%}header span{font-size:7px}canvas{height:350px}aside{display:block}#layers{grid-template-columns:1fr 1fr}button,select{padding:7px}header a{font-size:21px}.scores strong{font-size:26px}}

.cell.legal.selected{background:#e8ad56;color:#241c10;border-color:#ffe1a5;box-shadow:0 0 0 2px #ffc67680}.cell.legal.selected:hover{background:#f5c27a}