@charset "UTF-8";
:root{--paper:#f2ead6;--sheet:#fbf7ed;--ink:#3d3328;--muted:#786a56;--red:#852d31;--red-dark:#622024;--jade:#2e5148;--gold:#b2945e;--line:#d8c8aa;--display:"Songti SC","STSong","Noto Serif SC","SimSun",serif;--body:"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--body);-webkit-font-smoothing:antialiased;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#9a815605 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#fff4d615 3px 4px)}
button,input{font:inherit}button,input,a{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #157c9a;outline-offset:4px}button svg{pointer-events:none}a{color:var(--red)}h1,h2,p{margin:0}h2{font-family:var(--display);font-weight:700}fieldset{border:0;padding:0;margin:0;min-width:0}.icon{height:19px;width:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}[data-icon]{display:inline-flex;vertical-align:middle}
/* The official school crest sits beside the workshop title on a silk landscape. */
.masthead{border-top:5px solid var(--red);border-bottom:1px solid var(--gold);background:#efe4ca url('./assets/shanshui-silk-v1.webp') center 64%/cover no-repeat;position:relative}
.masthead:after{content:"";position:absolute;bottom:4px;left:0;right:0;border-top:1px solid #b2945e55;pointer-events:none}
.masthead-inner{max-width:1180px;min-height:137px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.identity{display:flex;align-items:center;gap:18px}.school-crest{display:block;flex:none}.school-crest img{display:block;width:64px;height:auto}.school-name{color:var(--red-dark);font:600 14px/1.5 var(--display);letter-spacing:1.5px;margin-bottom:7px;white-space:nowrap}.brand-line{display:flex;align-items:center;gap:17px}h1{color:var(--red-dark);font:800 47px/1.2 var(--display);letter-spacing:6px}.brand-plaque{writing-mode:vertical-rl;font:600 12px/1.2 var(--display);letter-spacing:3px;border-left:1px solid #9b674a;padding-left:8px;color:var(--red)}.brand-description{font-size:12px;letter-spacing:2px;margin-top:10px;color:#66543c}.header-actions{display:flex;flex-shrink:0;gap:10px;align-self:flex-end;margin-bottom:4px}.header-button{display:flex;white-space:nowrap;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;background:#fbf7ede8;border:1px solid #ac8a4c;color:var(--red-dark);border-radius:3px;box-shadow:0 2px 0 #b2945e44;font-size:12px}.header-button:hover{background:#fff9e8}
main{max-width:1080px;margin:0 auto;padding:29px 32px 0}.workspace{display:grid;grid-template-columns:266px minmax(0,1fr);gap:42px;align-items:start}
/* The swatches sit in an open, bound sample book. */
.materials{position:relative;border:1px solid #b59b70;border-radius:4px 10px 10px 4px;background:var(--sheet);box-shadow:4px 4px 0 #e2d5b9,5px 5px 0 #bca680,0 8px 24px #6f50280b;overflow:hidden}.materials:before{content:"";position:absolute;top:0;bottom:0;left:6px;border-left:1px solid #c8b58f;pointer-events:none}.panel-heading{background:var(--red);color:#fff5de;padding:18px 20px 17px 24px;display:flex;align-items:center;gap:13px;border-bottom:4px double #bb995c}.chapter-mark{font:23px var(--display);display:grid;place-items:center;border:1px solid #d1b47c;width:35px;height:40px;flex:none}.panel-heading h2{font-size:21px;letter-spacing:2px}.panel-heading p{font-size:10px;margin-top:6px;color:#f3dcb9;letter-spacing:.2px}.materials-body{padding:20px 18px 18px 23px}legend{display:flex;align-items:center;gap:8px;width:100%;font-size:13px;font-weight:600;margin-bottom:14px;padding:0}.step-number{display:inline-grid;place-items:center;width:23px;height:24px;background:#eee1c8;color:var(--red);font:14px var(--display);border:1px solid #cbb58e}#color-name,.pattern-total{margin-left:auto;color:var(--muted);font-size:10px;font-weight:400}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.color-button{display:flex;flex-direction:column;gap:6px;align-items:center;background:transparent;border:1px solid transparent;border-radius:3px;padding:4px 3px 5px;min-height:67px;font-size:10px;position:relative}.color-swatch{display:block;width:100%;height:41px;border-radius:50% 50% 4px 4px;overflow:hidden;box-shadow:inset 0 0 0 1px #7c604c20,0 1px 2px #4d372a26}.color-swatch svg{width:100%;height:auto;display:block}.color-button[aria-pressed="true"]{border-color:var(--red);background:#f0e4cd}.color-button[aria-pressed="true"] .color-label{color:var(--red);font-weight:650}.color-button[aria-pressed="true"]:after{content:"✓";position:absolute;right:2px;top:2px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;background:var(--red);color:white;border:1px solid var(--sheet)}.pattern-field{margin-top:21px;padding-top:7px;border-top:1px solid var(--line)}.pattern-groups,.inspiration-styles{display:flex;gap:0;border:1px solid #bba37a;border-radius:2px;overflow:hidden;margin-bottom:13px;background:#eee3cd}.pattern-groups button,.inspiration-styles button{flex:1;min-height:37px;padding:6px 3px;background:transparent;font-size:12px;color:#6b5945}.pattern-groups button+button,.inspiration-styles button+button{border-left:1px solid #bba37a}.pattern-groups button[aria-pressed="true"],.inspiration-styles button[aria-pressed="true"]{background:var(--red);color:#fff4da}.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pattern-button{background:#f5eedf;border:1px solid #d5c4a6;border-radius:2px;padding:7px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:75px;font-size:11px}.pattern-button svg{width:43px;height:43px;display:block;box-shadow:1px 1px 1px #5b4d3620}.pattern-button[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red);background:#eee0c5;color:var(--red-dark);font-weight:650}.selected-material{margin-top:19px;padding:16px 0;display:flex;align-items:center;gap:12px;border-top:1px dashed #c9b48e}.selected-material #swatch-preview{width:43px;height:43px;transform:rotate(-4deg);box-shadow:3px 3px 0 #ddcfb3;flex:none}.selected-material svg{width:100%;height:100%}.small-caption{font-size:10px;color:var(--muted);line-height:1.7}.selected-material p{font-size:11px;font-weight:600;margin-top:4px}.selected-seal{margin-left:auto;font:17px var(--display);border:1px solid #b4755d;color:#a1634d;padding:2px}.eraser{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;border:1px solid #c6b18c;background:transparent;border-radius:2px;padding:9px 10px;font-size:12px}.eraser .small-caption{margin-left:auto}.eraser[aria-pressed="true"]{background:var(--red);color:white}.eraser[aria-pressed="true"] .small-caption{color:#f4e1c6}
/* The live canvas is mounted like a hanging textile scroll. */
.canvas-area{min-width:0}.canvas-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:1px 0 25px;padding:0 5px}.canvas-top h2{font-size:25px;letter-spacing:1px}.canvas-top h2 span{font:12px var(--body);letter-spacing:0;margin-left:9px;color:var(--muted)}.canvas-top p{font-size:11px;margin-top:8px;line-height:1.6;color:var(--muted)}.filled-count{display:flex;align-items:baseline;gap:3px;white-space:nowrap;color:var(--muted);font-size:11px}.filled-count strong{font:34px var(--display);color:var(--red)}.scroll-mount{position:relative;margin:0 7px 17px}.quilt-frame{position:relative;padding:24px 24px 8px;background:#284e47 url('./assets/jade-brocade-v1.webp') center/310px;border:1px solid #203e38;box-shadow:0 8px 19px #51452a20}.quilt-stitch{padding:9px;background:#dfcba2;border:3px double #b3965e;box-shadow:0 1px 3px #10291e60}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none}.tile{display:grid;place-items:center;position:relative;min-width:0;aspect-ratio:1;padding:0;background:#f5efde;border-radius:1px;overflow:hidden;touch-action:none;box-shadow:0 1px 2px #46321c30}.tile svg{width:100%;height:100%;display:block;pointer-events:none}.tile.empty:before{content:"";position:absolute;inset:7px;border:1px dashed #cdbd9b}.tile.empty:after{content:"+";font-size:22px;font-weight:300;color:#ad9d7e}.tile:hover:before{border-color:var(--red)}.tile:focus-visible{z-index:3;outline-offset:-3px}.tile.conflict:after{content:"!";position:absolute;right:5px;top:5px;background:#a34126;color:white;border:2px solid #fff7e4;font:bold 12px var(--body);border-radius:50%;width:21px;height:21px;display:grid;place-items:center;box-shadow:0 1px 4px #0002}.tile.conflict{box-shadow:inset 0 0 0 3px #a34126}.mount-signature{display:flex;justify-content:center;align-items:center;gap:13px;height:30px;color:#e5d3a5;font:11px var(--display);letter-spacing:3px}.mount-signature i{width:4px;height:4px;transform:rotate(45deg);background:#c6ab70}.scroll-rod{position:absolute;z-index:2;height:12px;left:-7px;right:-7px;background:linear-gradient(0deg,#422b23,#8c6144 42%,#b78e64 58%,#65442e);border:1px solid #65472c;border-radius:4px;box-shadow:0 2px 3px #3d2d2a28;pointer-events:none}.rod-top{top:-7px}.rod-bottom{bottom:-7px}.scroll-rod:before,.scroll-rod:after{content:"";position:absolute;top:-3px;width:9px;height:16px;background:#3f2d26;border:1px solid #a78855;border-radius:2px}.scroll-rod:before{left:-5px}.scroll-rod:after{right:-5px}.board-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 12px}.history-tools{display:flex;align-items:center;gap:3px}.icon-button{width:42px;height:42px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;background:transparent;flex:none}.icon-button:hover:not(:disabled),.text-button:hover{background:#e5d8bc}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;background:transparent;padding:8px 11px;border-radius:3px;font-size:12px;white-space:nowrap}.text-button .icon{width:17px;height:17px}.tool-divider{height:18px;width:1px;background:#c7b48f;margin:0 6px}.switch-label{display:flex;align-items:center;gap:7px;position:relative;min-height:42px;cursor:pointer;white-space:nowrap;font-size:11px;color:var(--muted)}.switch-label input{position:absolute;opacity:0;width:30px;height:30px;margin:0}.switch-track{width:29px;height:17px;border-radius:3px;background:#bbae92;padding:3px;transition:background .15s}.switch-track:before{content:"";display:block;background:#fff8e5;width:11px;height:11px;border-radius:1px;transition:transform .15s}.switch-label input:checked+.switch-track{background:var(--jade)}.switch-label input:checked+.switch-track:before{transform:translateX(12px)}.switch-label input:focus-visible+.switch-track{outline:3px solid #157c9a;outline-offset:3px}.feedback{display:flex;align-items:center;gap:9px;min-height:44px;padding:11px 13px;background:#e5e6d6;border-left:3px solid #6d896f;color:#425f49;font-size:11px;line-height:1.7}.feedback.warning{background:#f1dfc7;border-left-color:#ac6b2a;color:#914818}.feedback.success{background:#dce6d7;color:#315a40}.feedback .icon{height:17px;width:17px}.work-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:12px;padding-top:19px;margin-top:18px;border-top:1px solid #c9b58d}.group-field{min-width:0}.group-label{display:block;font-family:var(--display);font-size:15px;margin-bottom:8px}.group-label span{font:10px var(--body);color:var(--muted);margin-left:6px}.group-input{height:46px;width:100%;min-width:0;color:var(--ink);background:#fbf7ed;border:1px solid #baa37a;border-radius:2px;padding:10px 13px;font-size:12px}.group-input::placeholder{color:#8f806b}.primary-button,.export-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 17px;border-radius:3px;font-size:13px;white-space:nowrap}.primary-button{background:var(--red);border:1px solid var(--red-dark);box-shadow:0 3px 0 var(--red-dark);color:#fff7e2}.primary-button:hover{background:var(--red-dark)}.export-button{background:#f8f0df;border:1px solid #a88c58;box-shadow:0 2px 0 #d0ba92;color:#5a4731}.export-button:hover{background:#ede0c5}.primary-button .icon,.export-button .icon{width:17px;height:17px}.save-status{font-size:10px;line-height:1.6;color:var(--muted);text-align:right;margin-top:14px}footer{display:flex;justify-content:center;align-items:center;gap:17px;padding:24px 0 25px;color:var(--muted);font:12px var(--display);letter-spacing:1px}.footer-seal{display:grid;place-items:center;color:var(--red);border:1px solid var(--red);width:23px;height:25px;font-size:16px;transform:rotate(-4deg)}
/* Dialogs use the same paper, red heading and brass rules as the workshop. */
dialog{width:calc(100% - 32px);max-width:530px;max-height:90dvh;overflow:auto;margin:auto;padding:25px;border:1px solid #b0935d;border-top:5px solid var(--red);border-radius:4px;background:var(--sheet);color:var(--ink);box-shadow:0 22px 80px #2b201c55}dialog::backdrop{background:#2f2b2270;backdrop-filter:blur(3px)}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:15px}.modal-heading h2{font-size:24px;color:var(--red-dark)}.modal-heading .icon-button{margin-right:-9px}#modal-content p{font-size:14px;color:#695d49;line-height:1.9;margin:10px 0 18px}.modal-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.modal-actions>.primary-button,.modal-actions>.export-button{flex:1 1 150px;min-width:0;text-decoration:none}.mini-quilt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-width:285px;margin:20px auto;padding:14px;background:#284e47 url('./assets/jade-brocade-v1.webp') center/280px;border:2px solid #b89e63}.mini-quilt svg{width:100%;height:auto;display:block}.help-list{color:#695d49;padding-left:20px;line-height:2.1}.help-rule{display:flex;gap:10px;padding:14px;background:#e7e7d6;line-height:1.8;font-size:13px;border-left:3px solid var(--jade)}.export-image{display:block;width:100%;max-height:52dvh;object-fit:contain}.modal-note{font-size:11px!important}.celebration{text-align:center;font-size:48px;color:var(--red);margin:12px}.toast{position:fixed;z-index:10;bottom:24px;left:50%;max-width:calc(100% - 32px);transform:translate(-50%,16px);background:var(--red-dark);color:#fff5de;border:1px solid var(--gold);padding:12px 20px;border-radius:3px;font-size:13px;text-align:center;line-height:1.7;opacity:0;pointer-events:none;transition:.2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1100px){.scroll-mount{max-width:580px;margin-left:auto;margin-right:auto}}
@media(max-width:1000px){main{padding:25px 26px 0}.workspace{grid-template-columns:238px minmax(0,1fr);gap:30px}.masthead-inner{padding:20px 26px}.materials-body{padding:17px 14px 15px 19px}.panel-heading{padding:16px 15px 15px 20px;gap:10px}.panel-heading h2{font-size:19px}.panel-heading p{font-size:9px}.color-button{min-height:61px;gap:5px}.color-swatch{height:36px}.pattern-button{min-height:71px;padding:6px 3px}.pattern-button svg{width:38px;height:38px}.canvas-top h2{font-size:23px}.canvas-top h2 span{font-size:10px;margin-left:5px}.quilt-frame{padding:20px 20px 7px}.quilt-stitch{padding:7px}.work-actions{gap:9px}.work-actions>.primary-button,.work-actions>.export-button{font-size:12px;padding:11px 12px}}
@media(max-width:820px){.masthead-inner{min-height:124px}.header-actions{flex-direction:column;gap:7px;align-self:center;margin:0}.header-button{min-height:37px;font-size:11px;padding:8px 13px}.header-button .icon{width:16px;height:16px}h1{font-size:42px}.identity{gap:13px}.workspace{grid-template-columns:215px minmax(0,1fr);gap:26px}.panel-heading h2{font-size:18px;letter-spacing:1px}.chapter-mark{width:29px;height:35px;font-size:20px}.materials-body{padding:17px 12px 14px 17px}.color-grid{gap:5px}.color-button{font-size:9px;padding:3px 2px 5px;min-height:60px}.color-swatch{height:34px}.pattern-grid{gap:7px}.pattern-button{font-size:10px;min-height:66px;padding:5px 3px}.pattern-button svg{width:32px;height:32px}.pattern-field{margin-top:17px;padding-top:6px}.selected-material{gap:9px;padding:14px 0}.selected-material #swatch-preview{width:35px;height:35px}.selected-material p{font-size:10px}.selected-seal{display:none}.canvas-top{padding:0;margin-bottom:22px}.canvas-top h2{font-size:21px}.canvas-top p{font-size:10px;max-width:230px}.filled-count{display:block;text-align:center;line-height:1.5}.filled-count strong{display:block;font-size:28px}.filled-count span{font-size:10px}.quilt-frame{padding:16px 16px 5px}.quilt-stitch{padding:6px;border-width:2px}.board{gap:4px}.mount-signature{font-size:10px;letter-spacing:2px}.board-tools{gap:3px}.icon-button{width:36px}.tool-divider{margin:0 3px}.text-button{font-size:11px;padding:8px}.switch-label{font-size:10px;gap:5px}.work-actions{grid-template-columns:1fr 1fr}.group-field{grid-column:1/-1;display:flex;align-items:center;gap:12px}.group-label{margin:0;white-space:nowrap}.work-actions>.primary-button,.work-actions>.export-button{width:100%}}
@media(max-width:600px){.masthead{border-top-width:4px;background-position:65% 55%}.masthead-inner{min-height:117px;padding:17px 18px;gap:12px}.school-crest img{width:40px}.school-name{font-size:11px;letter-spacing:.5px;margin-bottom:6px}.identity{gap:9px}.brand-line{gap:9px}h1{font-size:34px;letter-spacing:3px}.brand-plaque{font-size:10px;letter-spacing:2px;padding-left:6px}.brand-description{font-size:10px;letter-spacing:1px;margin-top:8px}.header-actions{gap:6px}.header-button{padding:7px 9px;min-height:34px;font-size:10px;gap:5px}.header-button .icon{width:14px;height:14px}main{padding:21px 17px 0}.workspace{display:flex;flex-direction:column;gap:27px}.materials{width:100%;border-radius:3px 7px 7px 3px;box-shadow:3px 3px 0 #d9c8a8}.panel-heading{padding:11px 15px 11px 19px;gap:9px;border-bottom-width:3px}.chapter-mark{width:26px;height:29px;font-size:18px}.panel-heading h2{font-size:18px;letter-spacing:2px}.panel-heading p{font-size:9px;margin-top:3px}.materials-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 13px 13px 18px}.pattern-field{border:0;margin:0;padding:0}legend{font-size:11px;gap:6px;margin-bottom:11px}.step-number{width:20px;height:21px;font-size:12px}#color-name{display:none}.pattern-total{font-size:9px}.color-grid{gap:7px 6px}.color-button{padding:3px 2px 4px;min-height:63px;gap:5px;font-size:9px}.color-swatch{height:39px}.pattern-groups{margin-bottom:8px}.pattern-groups button{min-height:34px;font-size:10px;padding:5px 2px}.pattern-grid{gap:7px 5px}.pattern-button{min-height:52px;padding:4px 2px;font-size:9px;gap:4px}.pattern-button svg{width:28px;height:28px}.selected-material{display:none}.eraser{grid-column:1/-1;justify-content:center;min-height:40px;font-size:11px}.eraser .small-caption{margin-left:6px}.canvas-area{width:100%}.canvas-top h2{font-size:23px}.canvas-top p{font-size:10px}.filled-count{display:flex;align-items:baseline;gap:1px}.filled-count strong{display:inline;font-size:29px}.canvas-top{gap:8px;margin-bottom:22px}.scroll-mount{margin-left:6px;margin-right:6px;margin-bottom:15px}.quilt-frame{padding:14px 14px 4px}.quilt-stitch{padding:5px}.tile.empty:before{inset:5px}.tile.empty:after{font-size:20px}.mount-signature{height:25px;font-size:9px}.scroll-rod{height:10px}.rod-top{top:-5px}.rod-bottom{bottom:-5px}.scroll-rod:before,.scroll-rod:after{height:14px;top:-3px}.board-tools{margin:8px 0 10px}.icon-button{width:38px;min-height:40px}.switch-label{font-size:11px}.feedback{font-size:10px;padding:10px 11px}.work-actions{margin-top:16px;padding-top:16px;gap:11px}.group-label{font-size:14px}.group-label span{font-size:9px}.group-input{height:44px;font-size:11px;padding:10px}.save-status{font-size:9px;margin-top:12px}footer{gap:11px;font-size:10px;letter-spacing:0;padding:23px 0 25px}.footer-seal{width:19px;height:22px;font-size:14px}dialog{padding:20px}.modal-heading h2{font-size:21px}.modal-actions>.primary-button,.modal-actions>.export-button{font-size:12px}}
@media(max-width:350px){.school-crest img{width:36px}.school-name{font-size:10px;letter-spacing:.3px}h1{font-size:30px}.masthead-inner{gap:9px}.color-grid{gap:6px 3px}.materials-body{gap:9px}.color-button{font-size:8px}.color-swatch{height:35px}.pattern-button svg{width:25px;height:25px}.selected-seal{display:none}.canvas-top h2{font-size:21px}.canvas-top h2 span{font-size:9px}.switch-label{font-size:10px}.text-button{padding:7px 5px;font-size:10px}.icon-button{width:34px}.tool-divider{margin:0 2px}.group-field{gap:7px}.group-label{font-size:12px}.group-label span{margin-left:3px}.group-input{font-size:10px}footer{font-size:9px;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}