@import url('./diy-studio.css');
.knot-intro{max-width:760px}.knot-workbench{margin-block:36px 70px;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:40px;align-items:start}.knot-workbench .studio-controls{padding:28px;border:1px solid var(--line);background:var(--white);min-width:0}.knot-workbench label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}.knot-workbench .field{margin-bottom:24px}.knot-workbench select{width:100%;padding:11px 12px;border:1px solid var(--line);background:var(--paper);border-radius:2px;color:var(--ink)}.knot-workbench input[type=range]{width:100%;accent-color:var(--red)}.knot-workbench input[type=color]{width:100%;height:42px;border:1px solid var(--line);background:var(--paper);padding:3px}.field-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.field-title output{font-size:12px;color:var(--muted)}.knot-workbench .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}.knot-workbench .actions .button{flex:1;justify-content:center;white-space:nowrap;padding:12px}.knot-preview-panel{border:1px solid var(--line);background:var(--white);min-width:0}.knot-preview-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 25px;border-bottom:1px solid var(--line)}.knot-preview-head h2{font-size:23px}.knot-preview-head p{font-size:12px;color:var(--muted);margin-top:5px}.knot-preview-head span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}#knot-preview{max-width:600px;margin-inline:auto}#knot-preview svg{display:block;width:100%;height:auto}#knot-preview.transparent{background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50% / 20px 20px}.knot-preview-caption{font-size:12px;padding:16px 25px;border-top:1px solid var(--line);color:var(--muted)}#knot-status{min-height:48px;font-size:12px;line-height:1.6;color:var(--muted);margin-top:17px}.knot-reset{font:inherit;border:0;background:none;color:var(--red);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:12px;padding:6px 0}.knot-diagram{width:100%;display:block;border:1px solid var(--line);background:var(--white);margin:18px 0 10px}.knot-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.knot-step-grid figure{margin:0}.knot-step-grid figcaption{font-size:13px;color:var(--muted);line-height:1.65}.knot-template-art{display:block;width:100%;max-width:460px;margin:auto}.knot-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.knot-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 25px;font-size:12px;color:var(--muted)}.knot-design-notice{font-size:12px;line-height:1.8;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}.knot-banner{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;background:var(--ink);color:var(--paper);padding:50px}.knot-banner h2{font-size:42px}.knot-banner p{color:#ddd3c4}.knot-banner .button{margin-top:22px}.knot-banner .art-panel{background:transparent}.knot-banner img{width:100%;max-width:400px}.knot-card-art{aspect-ratio:6/5;object-fit:cover;object-position:center 27%;display:block;width:100%;background:var(--paper)}@media(max-width:850px){.knot-workbench{grid-template-columns:1fr;gap:24px}.knot-workbench .studio-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.knot-workbench .studio-controls>p,.knot-workbench .actions,.knot-workbench #knot-status,.knot-workbench .knot-reset,.knot-workbench .knot-design-notice{grid-column:1/-1}.knot-step-grid,.knot-detail,.knot-banner{grid-template-columns:1fr}.knot-banner{padding:30px;gap:25px}.knot-banner h2{font-size:34px}}@media(max-width:390px){.knot-workbench .studio-controls{padding:20px;gap:0 12px}.knot-preview-head{padding:18px;gap:10px}.knot-preview-head span{display:none}.knot-workbench .field{margin-bottom:18px}}@media print{.knot-workbench .studio-controls,.knot-preview-caption{display:none}.knot-workbench{display:block}.knot-preview-panel{border:0}#knot-preview{max-width:150mm}}

#knot-preview{min-height:0;border:0;padding:0;background:transparent}#knot-preview svg{max-height:none}.download-list{display:flex;flex-wrap:wrap;gap:12px}.download-list>a.button{padding:12px 15px;border:1px solid var(--red);justify-content:center}.download-list>a.button.secondary{border-color:#aaa195}.download-list>a.text-link{padding:8px 0}.knot-banner .eyebrow{color:#e9b39a}.knot-banner .button.secondary{color:var(--paper);border-color:#a59a8a}.knot-banner .button.secondary:hover{background:#4b463e}.knot-workbench .field{min-width:0}

.knot-design-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.knot-design-grid .story-card h3{font-size:22px}.knot-design-grid .story-card img{aspect-ratio:4/5;padding:8px;object-fit:contain}@media(max-width:1000px){.knot-design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:450px){.knot-design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}.knot-design-grid .story-card h3{font-size:18px}.knot-design-grid .story-card p{font-size:12px}.knot-design-grid .story-card .eyebrow{font-size:8px;letter-spacing:1px}}

.knot-seasonal-material img{width:100%;max-width:620px;max-height:450px;object-fit:contain;margin-inline:auto}.knot-seasonal-material figcaption{text-align:center}

/* Complete supplied artwork is contained, never cropped into a thumbnail. */
.library-intro{max-width:850px}.library-filters{display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,260px) auto;gap:18px;align-items:end;margin:35px 0 18px}.library-filters label{display:block;margin-bottom:9px;font-size:13px;font-weight:600}.library-filters input,.library-filters select,.knot-workbench input[type=text]{width:100%;min-width:0;padding:12px;border:1px solid var(--line);background:var(--white);font:inherit;color:var(--ink)}.library-filters .button{height:48px}.library-results{font-size:13px;color:var(--muted);margin-bottom:24px}.material-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}.library-card{min-width:0;border:1px solid var(--line);background:var(--white)}.library-picture{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#f1ece2;padding:22px}.library-picture img{width:100%;height:100%;object-fit:contain;max-height:255px}.library-card-copy{padding:18px}.library-card h2{font-size:21px;line-height:1.25;margin-bottom:12px}.library-card-copy>p:not(.eyebrow){font-size:13px;line-height:1.65;margin-bottom:16px}.library-card .eyebrow{font-size:9px;letter-spacing:.09em}.library-card .text-link{font-size:12px}.library-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;margin:38px 0}.library-pagination span{font-size:13px}.library-pagination button:disabled{opacity:.45;cursor:default}.library-card[hidden],.library-pagination[hidden],.knot-setting-group[hidden],#custom-greeting-field[hidden],#export-svg[hidden],#library-empty[hidden]{display:none}.library-help{margin-top:65px}.knot-featured-library{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.knot-featured-library>a{min-width:0;text-align:center}.knot-featured-library span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#f1ece2;padding:15px;margin-bottom:14px}.knot-featured-library img{display:block;width:100%;height:100%;object-fit:contain}.knot-featured-library strong{font-size:13px;font-weight:500}.knot-setting-group{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:1fr}.knot-setting-group legend{padding:0;margin-bottom:18px;font-size:11px;letter-spacing:.07em;color:var(--muted)}.knot-setting-group .note{font-size:11px;line-height:1.7;margin-bottom:24px}.knot-workbench .studio-controls>fieldset,.knot-full-field{grid-column:1/-1}.knot-library-link{display:inline-block;font-size:11px;margin-top:10px}.knot-preview-library-link{display:inline-block;margin:0 25px 20px;font-size:12px}#knot-preview canvas{display:block;width:100%;height:auto}.knot-workbench .actions button:disabled{opacity:.5;cursor:wait}.knot-workbench .actions{gap:10px}.knot-workbench .actions #export-transparent{flex-basis:100%}.knot-workbench .actions #export-svg{flex-basis:100%}
@media(max-width:1050px){.material-library{grid-template-columns:repeat(3,minmax(0,1fr))}.knot-featured-library{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.knot-setting-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.knot-setting-group legend{grid-column:1/-1}.library-filters{grid-template-columns:1fr 1fr}.library-filters .button{justify-self:start}.material-library{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.library-filters{grid-template-columns:1fr;gap:15px}.material-library{gap:20px 12px}.library-picture{padding:12px}.library-card-copy{padding:13px}.library-card h2{font-size:17px}.library-card-copy>p:not(.eyebrow){font-size:11px}.library-card .eyebrow{font-size:8px;letter-spacing:.04em}.library-card .text-link{font-size:11px}.library-pagination{gap:12px}.library-pagination .button{padding:12px 16px}.knot-featured-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}.knot-featured-library strong{font-size:11px}.knot-setting-group{gap:0 12px}.knot-preview-head h2{font-size:21px}.knot-workbench select{font-size:12px}.knot-workbench .studio-controls>p.eyebrow{grid-column:1/-1}}
@media(max-width:850px){.knot-workbench .knot-preview-panel{order:-1}}

/* Shared composition and greeting controls for every starting design. */
.knot-workbench textarea{display:block;width:100%;min-width:0;min-height:112px;resize:vertical;padding:12px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:16px;line-height:1.6;color:var(--ink);caret-color:var(--red)}
.knot-workbench textarea::placeholder{color:var(--muted);opacity:1}
.knot-workbench .field>.note{margin:8px 0 0;border:0;background:none;padding:0}
.knot-workbench .field-title output{font-variant-numeric:tabular-nums;white-space:nowrap}
.knot-workbench .knot-setting-group{margin-bottom:8px}
.knot-workbench .knot-setting-group legend{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink);margin-bottom:20px}
.knot-greeting-group{border-top:1px solid var(--line);padding-top:20px}
.knot-layout-controls{grid-column:1/-1;margin-bottom:24px;border-block:1px solid var(--line);min-width:0}
.knot-layout-controls summary{cursor:pointer;padding:16px 0;color:var(--ink);font-size:13px;font-weight:600;min-height:48px}
.knot-layout-controls summary span{display:block;margin:4px 0 0 16px;color:var(--muted);font-size:11px;font-weight:400}
.knot-layout-controls[open] summary{margin-bottom:8px}
.knot-checkbox-field label{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:0;cursor:pointer}
.knot-checkbox-field input{width:18px;height:18px;accent-color:var(--red);flex-shrink:0}
.knot-visually-hidden{position:absolute;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#knot-preview{cursor:grab;touch-action:pan-y}
#knot-preview [data-artwork]{touch-action:none}
#knot-preview:active{cursor:grabbing}
#knot-preview:focus-visible,.knot-workbench :is(input,select,textarea,summary,button,a):focus-visible{outline:2px solid var(--red);outline-offset:3px}
.knot-preview-help{font-size:12px;line-height:1.6;padding:16px 25px 0;color:var(--muted)}
.knot-workbench .knot-preview-panel{position:sticky;top:16px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;scrollbar-color:var(--line) var(--white);scrollbar-width:thin}
@media(max-width:850px){.knot-workbench .knot-preview-panel{position:static;max-height:none;overflow:visible}.knot-layout-controls .knot-setting-group{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.knot-layout-controls .knot-setting-group{gap:0 12px}.knot-preview-help{padding-inline:18px}.knot-workbench .knot-setting-group legend{font-size:13px}}
@media print{.knot-preview-help,.knot-preview-library-link{display:none}.knot-workbench .knot-preview-panel{position:static;max-height:none;overflow:visible}}