:root{font-family:Georgia,serif;color:#244638;background:#f3efe1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:34px 32px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid #c2cbb6}.eyebrow{font:10px system-ui;letter-spacing:.22em;color:#78816b}h1{font-size:54px;font-weight:500;letter-spacing:-1.8px;margin:10px 0 0}h1 span{font:18px Georgia;letter-spacing:.04em;margin-left:20px;color:#97784f}.badge{border:1px solid #9baa8e;border-radius:50%;width:78px;height:78px;display:grid;place-content:center;text-align:center;font:24px/1.25 Georgia;color:#8c7146;transform:rotate(9deg)}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0}.intro p{font-size:18px;line-height:1.55}.intro strong{font-size:15px;font-weight:normal;color:#718169}label{font:11px system-ui;color:#718169}select,button{font:14px system-ui;color:inherit;border:1px solid #b7c2aa;background:#fffdf4;border-radius:9px;padding:11px;cursor:pointer}select{display:block;margin-top:5px;min-width:220px}button:hover{background:#e8ecdc}button:focus-visible,select:focus-visible{outline:3px solid #b78343;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}.play{background:#284b3d;border-radius:18px;padding:0 25px 10px;color:#f4edce;box-shadow:0 16px 35px #24463822}.ribbon{display:flex;justify-content:space-between;padding:18px 0;font:12px system-ui;letter-spacing:.04em}#board{display:grid;gap:0;aspect-ratio:1;width:100%;border:4px solid #183d30;border-radius:6px;overflow:hidden;background:#b9c9ae}.cell{position:relative;border-radius:0;min-width:0;padding:0;aspect-ratio:1;font:bold 30px Georgia;color:#895333;border-style:solid;border-color:#59735e;outline-offset:-4px!important;background:#ebe8d7;touch-action:manipulation}.cell::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffff30,transparent);pointer-events:none}.cell[data-number="1"],#palette [data-value="1"]{background:#f3e9cf url('tile-1.webp') center/cover}.cell[data-number="2"],#palette [data-value="2"]{background:#f0d6c8 url('tile-2.webp') center/cover}.cell[data-number="3"],#palette [data-value="3"]{background:#dce6cd url('tile-3.webp') center/cover}.cell[data-number="4"],#palette [data-value="4"]{background:#dce5ec url('tile-4.webp') center/cover}.cell.given{color:#183e32;font-weight:bold}.cell.given::before{content:'';position:absolute;top:7px;left:7px;width:5px;height:5px;background:#6f8053;border-radius:50%;box-shadow:0 0 0 2px #fffb}.cell.selected{z-index:1;outline:3px solid #a96c30}.cell.conflict{box-shadow:inset 0 0 0 4px #b64937}.cell.hinted{outline:4px dashed #ab772f}.cell.group{filter:brightness(1.04)}.legend{display:flex;gap:18px;flex-wrap:wrap;font:10px system-ui;color:#c4d1b7;padding-top:14px}.pin,.ink{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c9d399;margin-right:4px}.ink{background:#d99c71}#message{font:13px/1.55 system-ui;min-height:44px;margin:12px 0 0;color:#eee5ba}aside{font:13px/1.6 system-ui}.selection h2{font:23px Georgia;margin:9px 0;color:#244638}.selection p{font-size:12px;color:#76816a;min-height:39px;margin:8px 0 12px}#palette{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}#palette button{font:bold 28px Georgia;padding:13px 0;color:#244638;border-color:#8e9b7e}.tools{display:flex;gap:7px;margin-top:9px}.tools button{flex:1;padding:11px 5px;font-size:12px}.primary{width:100%;background:#284f3d;color:#fff6da;padding:14px;margin-top:12px}.primary:hover{background:#3e6c4f}#record{font-size:11px;color:#8b794f;margin:12px 0}.guide{margin-top:19px;padding-top:16px;border-top:1px solid #bac5ae;color:#63745c;font-size:12px}.guide h2{font:21px Georgia;color:#244638;margin:0}.guide .keys{font-size:11px;font-style:italic}.example{display:grid;grid-template-columns:repeat(3,45px);width:max-content;margin-top:10px;border:2px solid #5c785d}.example span{background:#e7d7c0;border:1px solid #7d916f;text-align:center;padding:5px;font:bold 20px Georgia}.example span:nth-child(3){background:#f4ebd1}.example span:nth-child(n+4){background:#cbdcbd}footer{font:11px/1.7 system-ui;color:#79846e;margin-top:26px}a{color:#416847}summary{cursor:pointer}[hidden]{display:none!important}@media(max-width:820px){main{padding:22px}.workspace{grid-template-columns:1fr;gap:22px}.play{max-width:600px;width:100%;margin:auto}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.selection{grid-row:1/4}.tools{margin:0}.guide,#record,.primary{grid-column:1/-1}.guide{margin-top:8px}h1{font-size:46px}h1 span{display:block;margin:4px 0 0}}@media(max-width:500px){main{padding:18px 12px}.eyebrow{font-size:9px}h1{font-size:42px}.badge{width:64px;height:64px;font-size:22px}.intro{display:block}.intro p{margin:12px 0}label{display:flex;align-items:center;gap:12px}select{flex:1;min-width:0;margin:0}.intro label{margin-bottom:10px}.play{padding:0 12px 8px;border-radius:13px}.ribbon{font-size:10px;padding:13px 0}.cell{font-size:25px}.cell.given::before{left:5px;top:5px;width:4px;height:4px}.legend{gap:10px;font-size:9px}#message{font-size:12px}aside{display:block}#palette{margin-top:14px}.tools{margin-top:8px}.guide{margin-top:20px}}
