:root{font-size:16px;--ink:#23324a;--night:#23344b;--paper:#e9dfc6;--cream:#fff8e4;--wood:#b59861;--line:#b7aa8d;--red:#a85747}*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--ink);font-family:ui-monospace,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;line-height:1.65}button,select,textarea{font:inherit}button,select,a,summary{min-height:44px}button{padding:.5rem .75rem;cursor:pointer;color:var(--ink);border:1px solid var(--ink);background:var(--cream);box-shadow:2px 2px 0 #988963}button.primary{background:var(--ink);color:var(--cream)}button:disabled{opacity:.5;cursor:default;box-shadow:none}button:not(.cell):hover:not(:disabled){background:#ded3b4;color:var(--ink)}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #bc604d;outline-offset:3px}a{color:inherit;display:inline-flex;align-items:center;padding:.2rem}h1,h2,h3,p,strong,button{overflow-wrap:anywhere}.frame{max-width:1240px;margin:1.1rem auto;padding:1.1rem;background:var(--paper);border:4px double var(--wood);box-shadow:8px 8px 0 #0f1e30}header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:3px double var(--ink);padding-bottom:.7rem}.brand small{font-size:.75rem;letter-spacing:.14em}.brand h1{font-size:1.65rem;margin:0}nav{display:flex;gap:.35rem;flex-wrap:wrap;margin:1rem 0}nav button[aria-current=page]{background:var(--ink);color:var(--cream)}.paper{padding:1rem;background:#f5edd6;border:1px solid var(--line)}h2{font-size:1.2rem;margin:.2rem 0 .8rem}h3{font-size:1rem;margin:.2rem 0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:1rem}.side{display:grid;gap:1rem;align-content:start}.caption{font-size:.875rem}.tiny{font-size:.75rem}.headline{display:flex;align-items:start;justify-content:space-between;gap:1rem}.seal{color:var(--red);border:2px solid var(--red);padding:.2rem .65rem;font-weight:bold}.board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px;max-width:450px;padding:12px;border:6px ridge #b4935c;background:#1b2b43;margin:1rem auto;aspect-ratio:1}.cell{box-shadow:none;min-width:0;min-height:44px;padding:.2rem;background:#37465d;border:1px solid #657183;color:var(--cream);font-size:.875rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.cell span{font-size:.75rem}.cell.blue{background:#518aac;color:#fff}.cell.red{background:#b36557;color:#fff}.cell.amber{background:#c7a657;color:#1e2a3f}.cell.ghost{outline:3px dashed #efd185;outline-offset:-4px}.cell.invalid{outline-color:#dd7968}.piecegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.piece{border:1px solid var(--line);padding:.6rem;background:var(--cream)}.piece.active{outline:2px solid var(--red);outline-offset:-3px}.shape{display:grid;grid-template-columns:repeat(var(--w),20px);grid-template-rows:repeat(var(--h),20px);gap:2px;min-height:44px;align-content:center;justify-content:center;margin:.5rem auto}.shape span{border:1px solid var(--ink);background:var(--color)}.controls{display:grid;gap:.6rem}.coords{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}label{display:block;font-size:.875rem}select{width:100%;padding:.4rem;color:var(--ink);background:var(--cream)}.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0}.notice{padding:.7rem;border-left:3px solid var(--red);background:var(--cream);margin:.7rem 0}.notice p{margin:.3rem 0}.checks{padding-left:1.1rem;font-size:.875rem}.checks li{margin:.4rem 0}.success{color:#376b5b}.failure{color:#9c443a}.log{font-size:.875rem;padding-left:1.1rem}textarea{width:100%;min-height:220px;padding:.7rem;background:var(--cream);color:var(--ink);border:1px solid var(--line);font:inherit;resize:vertical}.textboard{display:none}.preview-name{display:flex;gap:.7rem;align-items:center}.intro{max-width:700px;margin:auto;padding:1.2rem}.intro h2{font-size:1.65rem}footer{border-top:3px double var(--ink);padding-top:.8rem;margin-top:1.2rem;display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;font-size:.75rem}footer .actions{margin:0;align-items:center}@media(max-width:800px){.layout{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.piecegrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:520px){.frame{margin:.5rem;padding:.65rem;border-width:2px}.paper{padding:.7rem}header,.headline{flex-direction:column}.brand h1{font-size:1.3rem}.side{grid-template-columns:1fr}.piecegrid{grid-template-columns:1fr}.piece{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.piece .shape{margin:0}.board{padding:7px;border-width:4px}.actions>*{flex-grow:1}nav button{flex:1 0 auto}.coords{grid-template-columns:1fr}}body.big .layout,body.big .side{grid-template-columns:1fr}body.big .board{display:none}body.big .textboard{display:block}body.big .piecegrid{grid-template-columns:1fr}body.big .headline{flex-wrap:wrap}body.big .seal{white-space:normal}
.brand .caption{margin:.15rem 0 0}.client{display:flex;align-items:center;gap:.7rem;min-width:0}.client>div{min-width:0}.portrait,.material{display:block;position:relative;overflow:hidden;background:#1b3048;flex-shrink:0}.portrait{width:64px;height:64px;border:2px solid var(--wood);box-shadow:2px 2px 0 #c3b38d}.portrait img{position:absolute;width:300%;height:200%;max-width:none;left:calc(var(--x)*-100%);top:calc(var(--y)*-100%);image-rendering:pixelated}.material{width:52px;height:52px}.material img{position:absolute;width:300%;height:200%;max-width:none;left:calc(var(--x)*-100%);top:0;image-rendering:pixelated}.piece-image{display:flex;align-items:center;gap:.5rem}.intro{max-width:none;display:grid;grid-template-columns:1fr 42%;gap:1.2rem;align-items:center}.workshop-art{width:100%;border:4px ridge var(--wood);image-rendering:pixelated}.ordergrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.order{padding:.8rem;background:var(--cream);border:1px solid var(--line)}.order p{font-size:.875rem}.order button{width:100%}.mini{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:2px;aspect-ratio:var(--cols)/var(--rows);padding:6px;border:4px ridge var(--wood);background:var(--night);max-width:250px;margin:.5rem auto}.mini .cell{min-height:0;font-size:.7rem;line-height:1.2}.cell.hole{background:#8b7450;border-color:#b7a783;color:#fff7da;opacity:1}.cell:disabled{opacity:1}.record-pair{display:grid;gap:.6rem}.shape-catalog{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}.finished{border-color:#477e65}.piece .shape{margin:.3rem 0}.piece-image .shape{flex-shrink:0}.board{aspect-ratio:var(--cols)/var(--rows)}.board .cell:hover:not(:disabled){filter:brightness(1.12)}.big .ordergrid{grid-template-columns:1fr}.big .mini{max-width:320px}.big .mini .cell{font-size:.55rem}.big .intro{grid-template-columns:1fr}.big .shape-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.big .coords{grid-template-columns:1fr}
@media(max-width:900px){.ordergrid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{grid-template-columns:1fr}.workshop-art{max-height:260px;object-fit:cover}.shape-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.ordergrid{grid-template-columns:1fr}.portrait{width:52px;height:52px}.board{gap:2px;padding:4px;border-width:3px}.cell{min-height:44px;font-size:.7rem}.cell span{font-size:.65rem}.shape-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.mini .cell{font-size:.65rem}.piece-image{flex-wrap:wrap}.intro{padding:.7rem}.record-pair{grid-template-columns:1fr}}

.picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;margin:.5rem 0}.picker button{padding:.35rem .2rem;box-shadow:none;font-size:.875rem;display:flex;flex-direction:column;align-items:center}.picker button[aria-pressed=true]{outline:2px solid var(--red);outline-offset:-3px}.picker .shape{grid-template-columns:repeat(var(--w),12px);grid-template-rows:repeat(var(--h),12px);gap:1px;min-height:38px;margin:.2rem 0}.board{max-width:360px}.big .picker{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:520px){.picker{grid-template-columns:repeat(3,minmax(0,1fr))}}