.workshop-workarea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:28px;padding:0 32px;align-items:start}
.workshop-editor{min-width:0}
.workshop-fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.workshop-fieldset legend{font:600 16px/1.4 var(--font);margin:0 0 9px;padding:0;color:#416447}
.workshop-motifs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.workshop-motif{min-width:0;min-height:85px;border:1px solid #c8b58d;border-radius:4px;background:#ead7af;padding:7px 3px;box-shadow:0 3px 0 #b79e724d;transition:background .15s,transform .15s}
.workshop-motif svg{width:43px;height:43px;max-width:100%;display:block;margin:auto}
.workshop-motif span{font:15px/1.4 Georgia,serif;display:block;margin-top:4px}
.workshop-motif:hover{background:#f1deb3;transform:translateY(-2px)}
.workshop-motif[aria-pressed=true]{background:#fbefcf;border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange),0 3px 0 #b9573233}
.workshop-colors{display:flex;gap:6px;flex-wrap:wrap}
.workshop-color{border:1px solid transparent;background:none;padding:7px 8px;display:flex;align-items:center;gap:7px;min-height:44px;border-radius:4px;font:15px/1.4 var(--font)}
.workshop-color[aria-pressed=true]{border-color:#7d936f;background:#e9ecd9}
.workshop-swatch{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 3px #fff8df77;display:block;flex-shrink:0}
.workshop-swatch-red{background:#b04e38}.workshop-swatch-green{background:#416447}.workshop-swatch-ochre{background:#af7d2e}
.workshop-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px;background:#f0e8cd;border:1px solid #d7c9a6;position:relative}
.workshop-cells:before,.workshop-cells:after{content:'';position:absolute;left:4px;right:4px;border-top:1px dashed #c6b78e;pointer-events:none}.workshop-cells:before{top:4px}.workshop-cells:after{bottom:4px}
.workshop-cell{min-height:68px;background:#fbf6e6;border:1px dashed #a9ad8f;padding:5px;position:relative;border-radius:3px;display:flex;align-items:center;justify-content:center}
.workshop-cell-art{display:block;width:52px;height:52px}.workshop-cell-art svg{width:100%;height:100%}
.workshop-empty-mark{font:28px/52px Georgia,serif;color:#899672}
.workshop-cell-number{font-size:12px;position:absolute;left:5px;top:4px;color:#667454}
.workshop-cell-filled{border-style:solid;border-color:#d6c4a0;background:#fff9e9}
.workshop-cell:hover{background:#eee5c7;border-color:#b48e55}.workshop-cell-erase:hover{background:#f1d9c8;border-color:#b95732}
.workshop-tools{display:flex;gap:0 16px;flex-wrap:wrap;margin-top:-9px}
.workshop-tool{border:0;background:none;font:15px/1.4 var(--font);min-height:44px;padding:8px 0;text-decoration:underline;text-decoration-color:#a8b291;text-underline-offset:4px;color:#506645}
.workshop-tool:disabled{opacity:.45;text-decoration:none}.workshop-tool[aria-pressed=true]{color:var(--orange);font-weight:600;text-decoration-color:var(--orange)}
.workshop-art{position:relative;min-width:0;background:#dbddbc;padding:17px 13px 16px;overflow:hidden;border:1px solid #bdc2a0;align-self:center}
.workshop-art-caption{font:italic 18px/1.5 Georgia,serif;color:#506645;text-align:center;margin:0 0 9px}
.workshop-live-cloth{width:100%;transform:rotate(-2deg);filter:drop-shadow(4px 8px 3px #68744f20)}
.workshop-cloth-svg{width:100%;height:auto;display:block}
.workshop-table-art{display:block;width:100%;max-height:64px;margin-top:-6px}
.workshop-art-note{font:italic 15px/1.5 Georgia,serif;color:#506645;text-align:center;margin:4px 6px 0}
.workshop-result{padding:0 32px}.workshop-progress{font:16px/1.55 var(--font);margin:17px 0 0;color:#416447}
.workshop-feedback{font:16px/1.55 var(--font);color:#955432;margin:7px 0 0}.workshop-feedback:empty{display:none}
.workshop-actions{padding:17px 32px 0}.workshop-actions .primary{min-height:48px;font-size:16px;white-space:normal;text-align:left}
.workshop-help{font:15px/1.6 var(--font);margin:20px 32px 0;color:#596f4d}.workshop-help summary{cursor:pointer;min-height:44px;padding:10px 0}.workshop-help p{margin:5px 0 10px}
.workshop-layout>.source-note{margin:9px 32px 24px}
.workshop-book-art{width:100%;background:#dfe2c5;padding:7px 7px 12px;overflow:hidden}.workshop-book-art .workshop-cloth-svg{max-height:240px;transform:rotate(-2deg)}.workshop-book-art p{font:italic 14px/1.5 Georgia,serif!important;text-align:center;margin:2px 3px 0!important;color:#506645!important}
@media(max-width:760px){.workshop-workarea{grid-template-columns:minmax(0,1fr);gap:18px;padding:0 20px}.workshop-motif{min-height:78px}.workshop-motif svg{width:38px;height:38px}.workshop-motif span{font-size:14px}.workshop-color{padding:7px 6px;font-size:14px}.workshop-colors{gap:2px;justify-content:space-between}.workshop-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:0 8px;padding:11px 12px;align-items:center}.workshop-art-caption{font-size:17px;grid-column:1;margin:0}.workshop-live-cloth{grid-column:2;grid-row:1 / 3}.workshop-cloth-svg{max-height:170px}.workshop-table-art{display:none}.workshop-art-note{grid-column:1;margin:5px 0 0;font-size:14px}.workshop-result{padding:0 20px}.workshop-actions{padding:16px 20px 0}.workshop-actions .primary{width:100%;justify-content:space-between}.workshop-help{margin:14px 20px 0}.workshop-layout>.source-note{margin:9px 20px 20px}.workshop-book-art .workshop-cloth-svg{max-height:220px}}
@media(max-width:370px){.workshop-motifs{gap:5px}.workshop-motif span{font-size:13px}.workshop-color{font-size:13px;gap:4px}.workshop-tool{font-size:14px}.workshop-tools{column-gap:12px}}
@media(prefers-reduced-motion:reduce){.workshop-motif{transition:none}}