.desk-layout-board{position:relative;width:min(100%,660px);aspect-ratio:6/4;margin:1rem auto 4rem;border:2px solid currentColor;background-color:#faf5e8;background-image:linear-gradient(to right,#b8b0a5 1px,transparent 1px),linear-gradient(to bottom,#b8b0a5 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 4);touch-action:pinch-zoom;overflow:hidden}
.desk-piece{position:absolute;min-width:0;min-height:0;padding:0;border:3px solid #645344;border-radius:5px;background:#e4cfad;color:#272019;opacity:.88;cursor:grab;font-size:1.2rem;touch-action:pinch-zoom;box-sizing:border-box}
.desk-piece[data-piece=piece-b]{background:#b9c7af}.desk-piece[data-piece=piece-c]{background:#d5ddd9}.desk-piece[data-piece=piece-d]{background:#d7c9bd}
.desk-piece[aria-pressed=true]{border-style:dashed;z-index:2}.desk-piece:focus-visible{outline:3px solid #155f92;outline-offset:-6px}.desk-piece.dragging{z-index:3;opacity:.72;cursor:grabbing}
.desk-piece-picker,.desk-controls{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.desk-controls label{display:flex;align-items:center;gap:.4rem}.desk-controls input{width:4.5rem}.desk-hint{min-height:1.5em}
@media(max-width:480px){.desk-controls>button{flex:1 1 40%}.desk-piece{border-width:2px}}