*{box-sizing:border-box}body{margin:0;background:#f3efe5;color:#302d28;font:15px/1.55 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #c9c1af;background:#faf7ee;border-radius:7px;padding:8px 13px}button:hover{background:#e6dfcf}button:focus-visible,a:focus-visible{outline:3px solid #1a6b75;outline-offset:3px}header{max-width:1180px;margin:auto;padding:22px 24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #d7cdbb}header span{margin-right:auto;color:#777064;font-size:13px}.brand{color:inherit;text-decoration:none;font-size:16px;letter-spacing:2px;font-weight:750}main{max-width:1120px;margin:auto;padding:25px 24px}.intro{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-bottom:24px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2.5px;color:#8b694b}h1{font:54px/1.06 Georgia,serif;letter-spacing:-2px;margin:12px 0 18px}h2{font:29px Georgia,serif;margin:8px 0}h3{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#766b5b}.intro p:not(.eyebrow){color:#766b5b}.feature-art{width:360px;aspect-ratio:2.5;background:url('tiles.webp') center/cover;border-radius:12px;transform:rotate(-4deg);box-shadow:0 18px 24px #57443122}nav{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 25px}nav button{width:43px;padding:8px 0;position:relative}nav .active{background:#323e38;color:white;border-color:#323e38}nav .done:after{content:'●';color:#b27620;position:absolute;right:2px;top:-5px;font-size:11px}.workspace{display:grid;grid-template-columns:330px 1fr;gap:0;background:#fbf9f3;border:1px solid #d7cdbb;border-radius:14px;overflow:hidden;box-shadow:0 10px 35px #50412c09}aside{background:#ebe6d9;padding:23px;border-right:1px solid #d7cdbb}#difficulty{font-size:12px;color:#776e60}.example{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}.grid{display:grid;gap:2px;background:#a49a85;padding:4px;border-radius:5px;box-shadow:0 5px 12px #392f231a}.tile{border:0;border-radius:2px;padding:0;background-image:url('tiles.webp');background-size:500% 200%;aspect-ratio:1;min-width:0;position:relative}.tile:hover{filter:brightness(1.15)}.tile.focused{outline:3px solid #fff;outline-offset:-4px;z-index:1}.example .grid{width:104px}.example .tile{pointer-events:none}article{padding:24px 28px}.worktop{display:flex;align-items:center;justify-content:space-between}#progress{font-size:11px;color:#83705a}.boards{display:flex;justify-content:center;align-items:center;gap:22px}.boards>div{width:min(42%,220px)}.arrow{font:25px Georgia,serif;color:#9b886e}#input .tile{pointer-events:none}.instruction{font-size:12px;color:#80745f;margin:22px 0 10px}#palette{display:flex;gap:7px}#palette button{width:35px;height:35px;border-radius:5px;box-shadow:0 2px 4px #0002}#palette .chosen{outline:3px solid #8d6541;outline-offset:2px}#palette button:after{content:attr(data-color);position:absolute;font-size:9px;color:white;background:#0009;bottom:0;right:1px;border-radius:3px;padding:0 2px}.tools{display:flex;gap:7px;margin:20px 0}.tools button{font-size:12px;padding:6px 10px}.commit{display:flex;gap:8px}.primary{background:#354e42;color:white;border-color:#354e42}.primary:hover{background:#496650}#next{display:none}#message{font-size:13px;min-height:42px}details{margin:24px 0;color:#786b5c;font-size:13px}summary{cursor:pointer}details p{max-width:850px}a{color:#526a5b}footer{max-width:1120px;margin:auto;padding:0 24px 28px;color:#8a7b66;font-size:11px;display:flex;justify-content:space-between}@media(max-width:760px){header{gap:12px;padding:16px}header span{display:none}header button{margin-left:auto}main{padding:18px 14px}h1{font-size:42px}.intro{gap:15px}.feature-art{width:35%}.intro p:not(.eyebrow){font-size:12px}.workspace{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid #d7cdbb;padding:16px}#examples{display:flex;gap:10px;overflow:auto}.example{margin:8px 0;gap:5px;min-width:165px}.example .grid{width:74px}article{padding:18px}.boards{gap:12px}.boards>div{width:44%}#palette{gap:6px;flex-wrap:wrap}#palette button{width:30px;height:30px}.intro .eyebrow{font-size:8px;letter-spacing:1px}nav{gap:6px}nav button{width:32px}.tools{flex-wrap:wrap}.brand{font-size:12px}.feature-art{transform:rotate(-4deg)} }@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}