:root{font-family:Arial,sans-serif;color:#3e4544;background:#f4eee2;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#dfd6bd,transparent 55%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #b7b5a4;background:#f8f3e7;border-radius:6px;padding:10px}button:hover{background:#e8e0cd}button:focus-visible,a:focus-visible{outline:3px solid #b8603e;outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{margin:0 24px;padding:25px 3%;border-bottom:1px solid #cfc6b4;display:flex;align-items:center;justify-content:space-between;gap:15px}header a{font:30px Georgia;color:inherit;text-decoration:none}header span{font-size:10px;letter-spacing:3px}main{max-width:1160px;margin:auto;padding:36px 25px}.hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.swatches{width:210px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;transform:rotate(5deg);padding:8px;background:#fffaee;box-shadow:0 14px 35px #544f3820}.swatches img{width:100%;aspect-ratio:1}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:3px;color:#8c6547}h1{font:52px/1.04 Georgia;margin:12px 0 20px;letter-spacing:-1.5px}h2{font:27px Georgia;margin:7px 0 18px}p,li{font-size:14px;line-height:1.65}.hero p{font-size:15px}.hero .eyebrow{font-size:10px}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:45px}aside{padding-top:10px}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 34px}nav button{padding:12px 4px}nav .current{background:#5c6b6a;color:white}nav .solved:after{content:' ·';font-weight:bold}summary{cursor:pointer;font-weight:bold}aside p{font-size:13px}#legend{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 8px;margin:23px 0}.shape{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(3,15px);gap:1px;justify-content:center}.shape span{background-size:70px;border:1px solid #fff8}.shape-label{text-align:center;font-size:10px;margin:5px 0 0}.play{background:#fffbef;border:1px solid #bcb6a3;border-radius:20px;padding:24px;box-shadow:0 15px 45px #594d3810}.titlebar{display:flex;justify-content:space-between;align-items:center}.titlebar>span{font-size:12px;color:#797766}#board{display:grid;gap:0;max-width:520px;margin:10px auto 0;border:3px solid #5f6256;background:#5f6256}.cell{padding:0;aspect-ratio:1;position:relative;background:#eee7d5;border:1px solid #cdc7b6;border-radius:0;overflow:hidden;min-width:0}.cell.cutout{background:repeating-linear-gradient(45deg,#484b44 0px,#484b44 5px,#52564c 5px,#52564c 6px);color:#ccc4ae}.cell.cutout:after{content:'◆';font-size:13px}.cell.piece{background-size:180px}.cell .tag{position:absolute;left:4px;top:4px;padding:2px 5px;border-radius:3px;background:#fff9e9e8;color:#303c3d;font-size:10px;font-weight:bold}.cell.selected:after{content:'';position:absolute;inset:3px;border:3px solid #f2b958;background:#ffe7a42b;pointer-events:none}.cell.conflict:after{content:'';position:absolute;inset:3px;border:3px solid #db5037;background:#eb4d363b;pointer-events:none}.cell:focus-visible{outline:3px solid #f3c168;outline-offset:-5px;z-index:1}#metrics{font-size:11px;color:#7a7866;line-height:1.7;margin-top:16px}#status{min-height:68px;font-size:13px}.selection{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}.selection button{font-size:12px;padding:11px 3px}#place{background:#5c6b6a;color:white}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.actions button{font-size:11px;padding:10px 3px}.keys{text-align:center;color:#89816f;font-size:10px;margin:20px 0 0;line-height:1.7}#win{text-align:center;margin-top:20px;background:#e6e1cb;border:1px solid #b9b49c;border-radius:12px;padding:20px}#win button{background:#5c6b6a;color:white}#win p{font-size:12px}footer{border-top:1px solid #cfc6b4;padding:25px 0;margin-top:34px;font-size:12px}footer p{max-width:700px}a{color:#5c6b6a}[hidden]{display:none!important}@media(max-width:700px){header{margin:0 16px;padding:20px 0}header a{font-size:25px}header span:nth-child(2){display:none}header span{font-size:9px;letter-spacing:1px}main{padding:20px 16px}.hero{margin-bottom:22px;gap:10px}.swatches{width:110px;padding:5px;gap:3px}h1{font-size:35px;margin:10px 0 14px}.hero p{font-size:12px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.layout{display:flex;flex-direction:column;gap:28px}.play{order:-1;padding:15px;border-radius:17px}h2{font-size:25px}.cell.piece{background-size:130px}.cell .tag{font-size:8px;padding:1px 3px;left:3px;top:3px}#metrics{font-size:10px}#status{font-size:12px;min-height:65px}.selection button{font-size:10px}.actions button{font-size:10px}.keys{font-size:9px}nav{grid-template-columns:repeat(6,1fr);margin-bottom:25px}aside{padding-top:0}}
