.workspace-actions {
  display:flex;
  align-items:center;
  gap:24px
}
.workspace-actions>#generate-guide {
  font-size:10px;
  padding:8px 13px;
  white-space:nowrap
}
.pattern-open-link {
  border:1px solid #e5c5a9;
  border-radius:7px;
  background:#fff6ea;
  color:#ad6937;
  font-size:10px;
  padding:9px 12px;
  width:100%;
  margin:0 0 12px;
  cursor:pointer
}
.pattern-view__frame img {
  cursor:zoom-in
}
.tool-dialog {
  padding:0;
  border:1px solid #e6d6c3;
  border-radius:18px;
  background:#fffdf9;
  color:#513f30;
  box-shadow:0 6px 0 #d3b99d,0 30px 90px #3f2c2344;
  overflow:hidden;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 36px)
}
.tool-dialog::backdrop {
  background:#3c2c2259;
  backdrop-filter:blur(4px)
}
.tool-dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 23px;
  border-bottom:1px solid #eee1d0;
  background:#fffaf2;
  min-height:78px
}
.tool-dialog-head h2 {
  font-size:19px;
  margin:4px 0 0;
  font-weight:600
}
.tool-close {
  background:none;
  border:0;
  color:#aa8b6d;
  font-size:27px;
  padding:0 5px;
  line-height:1
}
.pattern-dialog {
  width:1240px;
  height:90dvh
}
.pattern-dialog[open] {
  display:flex;
  flex-direction:column
}
.pattern-toolbar {
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  padding:12px 20px;
  border-bottom:1px solid #eee2d2;
  background:white;
  font-size:11px
}
.pattern-toolbar>label {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}
.pattern-toolbar select,.replace-scope-label select {
  border:1px solid #e3d3bf;
  background:#fffdf9;
  border-radius:6px;
  padding:6px 9px;
  color:#755a43;
  font-size:11px;
  max-width:190px
}
.pattern-zoom-label input {
  width:110px;
  height:3px;
  accent-color:#df8750
}
.pattern-zoom-label output {
  font-family:var(--font-display);
  font-size:10px;
  color:#ac7a50
}
.pattern-editor-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  flex:1;
  min-height:0
}
.pattern-drawing {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:#f3eee5
}
.pattern-canvas-wrap {
  flex:1;
  overflow:auto;
  padding:23px;
  min-height:0;
  position:relative
}
.pattern-canvas-wrap canvas {
  display:block;
  max-width:none;
  max-height:none;
  margin:auto;
  background:white;
  box-shadow:0 4px 20px #63422212;
  cursor:crosshair;
  outline-offset:2px
}
.pattern-canvas-wrap>p {
  color:#a1856b;
  text-align:center;
  margin-top:70px;
  font-size:12px
}
.pattern-drawing-foot {
  min-height:37px;
  border-top:1px solid #e3d6c5;
  background:#faf4ea;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 15px;
  font-size:10px;
  color:#9c7b5e;
  gap:10px
}
.pattern-color-editor {
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:white;
  border-left:1px solid #e8dac8;
  gap:10px;
  overflow:auto
}
.color-editor-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.color-editor-heading h3 {
  font-size:13px;
  font-weight:500;
  margin:0 0 2px
}
.color-editor-heading>span {
  color:#baa58f;
  font-size:9px
}
.selected-color-box {
  display:flex;
  align-items:center;
  gap:10px;
  background:#faf5ee;
  border:1px solid #eee1d0;
  border-radius:10px;
  padding:10px
}
.selected-color-swatch {
  width:37px;
  height:37px;
  border:1px solid #d8c6b2;
  border-radius:8px;
  flex-shrink:0;
  background:repeating-linear-gradient(45deg,#f5ecdf,#f5ecdf 5px,#fff 5px,#fff 10px)
}
.selected-color-box small {
  display:block;
  font-size:9px;
  color:#b1977d;
  margin-bottom:2px
}
.selected-color-box strong {
  font-size:14px;
  font-weight:600;
  display:block;
  color:#7b5637
}
.selected-color-box div>span {
  display:block;
  font-size:9px;
  color:#ad8c70;
  margin-top:2px
}
.target-color-box {
  background:#fffaf4
}
.pattern-color-editor input[type=search] {
  width:100%;
  padding:8px 10px;
  border:1px solid #e5d6c2;
  border-radius:7px;
  font-size:11px;
  color:#75563d;
  background:#fffdfa
}
.pattern-swatches {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  overflow:auto;
  min-height:110px;
  max-height:270px;
  flex:1;
  align-content:start;
  padding:4px 3px
}
.pattern-swatches button {
  min-height:33px;
  border:2px solid transparent;
  border-radius:5px;
  font-size:9px;
  font-weight:600;
  padding:7px 1px;
  box-shadow:0 1px 0 #6c4c261a;
  transition:transform .14s
}
.pattern-swatches button:hover {
  transform:translateY(-2px);
  box-shadow:0 3px 0 #6c4c2633
}
.pattern-swatches button.is-active {
  outline:2px solid #e97c3e;
  outline-offset:1px;
  border-color:white
}
.pattern-color-editor>.button {
  font-size:11px;
  min-height:37px;
  padding:9px 10px;
  width:100%;
  border-radius:7px;
  flex-shrink:0
}
.replace-scope-label {
  font-size:9px;
  color:#b0967c;
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:1px
}
.replace-scope-label select {
  width:100%;
  max-width:none
}
.pattern-edit-note {
  font-size:9px;
  color:#af947b;
  line-height:1.8;
  margin:3px 0 0
}
.pattern-dialog-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fffaf2;
  border-top:1px solid #e9d9c4;
  padding:13px 20px;
  min-height:65px
}
.pattern-history-buttons,.pattern-export-buttons {
  display:flex;
  align-items:center;
  gap:9px
}
.pattern-history-buttons>span {
  font-size:10px;
  color:#a98767;
  max-width:330px
}
.pattern-history-buttons>span.is-error {
  color:#b24f2a
}
.pattern-tooltip {
  position:fixed;
  background:#4c3829f5;
  border:1px solid #8f6c4d;
  border-radius:9px;
  padding:9px 12px;
  color:#fff8ee;
  z-index:10;
  box-shadow:0 7px 20px #38241633;
  pointer-events:none;
  font-size:11px;
  line-height:1.8;
  white-space:nowrap
}
.pattern-tooltip strong {
  font-size:14px;
  color:#ffd6af
}
.pattern-tooltip small {
  color:#dfc8b1
}
.pattern-tooltip i {
  display:inline-block;
  width:12px;
  height:12px;
  border:1px solid #ffffff66;
  border-radius:3px;
  vertical-align:middle;
  margin-right:6px
}
.guide-dialog {
  width:1100px;
  height:89dvh
}
.guide-dialog[open] {
  display:flex;
  flex-direction:column
}
.guide-busy {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:32px;
  text-align:center;
  gap:11px;
  background:#fcf7ef
}
.guide-busy .busy-brick {
  margin:0 0 14px
}
.guide-busy h3 {
  font-weight:500;
  font-size:18px;
  margin:9px 0
}
.guide-busy p {
  font-size:12px;
  color:#a18366;
  margin:0
}
.guide-busy small {
  font-size:10px;
  color:#b3997d;
  max-width:430px;
  line-height:1.9
}
.guide-busy progress {
  width:260px;
  height:7px;
  accent-color:#dd8a50;
  margin:13px 0
}
.guide-reader {
  display:grid;
  grid-template-columns:185px minmax(0,1fr);
  flex:1;
  min-height:0
}
.guide-page-list {
  overflow:auto;
  border-right:1px solid #e5d4bf;
  padding:17px 13px;
  background:#fffaf2;
  display:flex;
  flex-direction:column;
  gap:8px
}
.guide-page-list button {
  border:1px solid #eadbc9;
  background:white;
  color:#a5815f;
  padding:11px 12px;
  border-radius:8px;
  font-size:11px;
  text-align:left
}
.guide-page-list button.is-active {
  border-color:#dd9a61;
  background:#ffefde;
  color:#9b5c2a
}
.guide-page-list small {
  display:block;
  font-size:9px;
  color:#b79b7f;
  margin-top:4px
}
.guide-paper-area {
  overflow:auto;
  background:#eee6da;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:22px;
  min-width:0
}
.guide-paper-area>img {
  display:block;
  max-width:100%;
  height:calc(89dvh - 260px);
  object-fit:contain;
  filter:drop-shadow(0 6px 12px #5e3f2422)
}
.guide-paper-area>p {
  font-size:11px;
  color:#aa8663;
  margin:15px 0 0
}
.guide-dialog-foot {
  padding:13px 21px 15px;
  border-top:1px solid #e7d7c3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
  background:#fffaf2
}
.guide-paging,.guide-downloads {
  display:flex;
  align-items:center;
  gap:11px
}
.guide-paging>span {
  font-family:var(--font-display);
  font-size:12px;
  color:#ad845e;
  min-width:42px;
  text-align:center
}
.guide-paging>a {
  font-size:10px;
  color:#ac6c39;
  border-bottom:1px dashed #d8b491
}
.guide-dialog-foot>small {
  width:100%;
  font-size:9px;
  color:#b39b83
}
.guide-downloads .button {
  font-size:10px;
  padding:10px 14px
}
@media(max-width:1100px) {
  .workspace-actions {
    gap:13px
  }
  .workspace-actions ol {
    display:none
  }
  .pattern-toolbar {
    gap:9px
  }
  .pattern-dialog {
    height:94dvh
  }
  .pattern-editor-body {
    grid-template-columns:minmax(0,1fr) 255px
  }
  .pattern-color-editor {
    padding:13px
  }
  .pattern-toolbar select {
    max-width:155px
  }
  .pattern-dialog-foot {
    padding:12px 14px;
    gap:10px
  }
  .pattern-history-buttons>span {
    max-width:180px;
    font-size:9px
  }
  .guide-reader {
    grid-template-columns:155px 1fr
  }
}
@media(max-width:700px) {
  .workspace-actions>#generate-guide {
    font-size:9px;
    padding:8px 10px
  }
  .workspace-heading {
    gap:8px
  }
  .tool-dialog {
    max-width:calc(100vw - 14px);
    max-height:calc(100dvh - 14px);
    border-radius:12px
  }
  .pattern-dialog {
    height:96dvh
  }
  .tool-dialog-head {
    padding:12px 15px;
    min-height:65px
  }
  .tool-dialog-head h2 {
    font-size:16px
  }
  .pattern-toolbar {
    padding:9px 12px;
    gap:8px
  }
  .pattern-toolbar select {
    max-width:110px;
    font-size:10px
  }
  .pattern-zoom-label input {
    width:70px
  }
  .pattern-toolbar .check {
    font-size:10px
  }
  .pattern-editor-body {
    display:flex;
    flex-direction:column;
    overflow:auto
  }
  .pattern-drawing {
    height:48dvh;
    min-height:300px;
    flex-shrink:0
  }
  .pattern-canvas-wrap {
    padding:15px
  }
  .pattern-drawing-foot {
    font-size:9px;
    flex-wrap:wrap
  }
  .pattern-color-editor {
    border-left:0;
    border-top:1px solid #e8dac8;
    padding:15px;
    overflow:visible;
    min-height:490px;
    gap:10px
  }
  .pattern-swatches {
    grid-template-columns:repeat(7,1fr);
    min-height:140px;
    max-height:200px;
    flex:none
  }
  .pattern-swatches button {
    font-size:9px
  }
  .selected-color-box {
    padding:8px
  }
  .pattern-dialog-foot {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px 13px
  }
  .pattern-history-buttons {
    gap:8px
  }
  .pattern-history-buttons>span {
    max-width:none;
    flex:1
  }
  .pattern-export-buttons .button {
    flex:1;
    font-size:10px;
    min-height:35px;
    padding:8px
  }
  .guide-dialog {
    height:95dvh
  }
  .guide-reader {
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr)
  }
  .guide-page-list {
    flex-direction:row;
    max-height:75px;
    border-bottom:1px solid #e3d2bc;
    border-right:0;
    padding:10px;
    overflow:auto;
    gap:7px
  }
  .guide-page-list button {
    padding:8px 12px;
    white-space:nowrap;
    font-size:10px
  }
  .guide-page-list small {
    display:none
  }
  .guide-paper-area {
    padding:13px
  }
  .guide-paper-area>img {
    height:calc(95dvh - 330px);
    max-width:100%
  }
  .guide-dialog-foot {
    padding:11px 13px;
    gap:11px
  }
  .guide-paging {
    width:100%;
    justify-content:space-between;
    gap:6px
  }
  .guide-downloads {
    width:100%
  }
  .guide-downloads .button {
    flex:1;
    min-height:37px;
    font-size:10px
  }
  .guide-busy {
    padding:25px
  }
  .guide-busy h3 {
    font-size:16px
  }
  .pattern-tooltip {
    font-size:10px;
    max-width:calc(100vw - 25px);
    white-space:normal
  }
}
.pattern-color-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
@media (min-width: 701px) and (max-height: 850px) {
  .pattern-color-editor {
    padding: 12px 14px;
    gap: 7px;
  }
  .pattern-color-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .selected-color-box {
    padding: 7px;
    gap: 6px;
    align-items: flex-start;
  }
  .selected-color-swatch {
    width: 23px;
    height: 23px;
    border-radius: 5px;
  }
  .selected-color-box strong {
    font-size: 11px;
  }
  .selected-color-box small, .selected-color-box div > span {
    font-size: 8px;
  }
  .pattern-swatches {
    min-height: 65px;
    max-height: 150px;
  }
  .pattern-color-editor > .button {
    min-height: 33px;
    padding: 7px;
    font-size: 10px;
  }
  .pattern-edit-note {
    display: none;
  }
}