.type-depix #content-inner { max-width: 1040px; padding: 22px 22px 65px; }
.type-depix #page { width: 100%; padding: 0; background: transparent; box-shadow: none; }
.type-depix #page > .page-title, .type-depix #page-header .title-seo { display: none; }
#depix-lab {
  --dx-bg: #fffefa; --dx-line: #d4dcd9; --dx-ink: #293d42; --dx-muted: #536970; --dx-wash: #edf3ef;
  color: var(--dx-ink); line-height: 1.55;
}
[data-theme=dark] #depix-lab { --dx-bg: #232f34; --dx-ink: #e2efe9; --dx-muted: #b2c5c5; --dx-line: #45565b; --dx-wash: #2c3a3e; }
#depix-lab [hidden] { display: none; }
#depix-lab :is(h1,h2,h3) { margin: 0; padding: 0; color: inherit; line-height: 1.25; }
#depix-lab :is(h1,h2,h3)::before { content: none; }
#depix-lab p { margin: 0; }
.dx-hero { overflow: hidden; padding: clamp(18px,4vw,39px); border-radius: 17px; background: #293e45; color: #f3eee0; }
.dx-topline, .dx-heading, .dx-headline, .dx-actions, .dx-links { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.dx-topline { padding-bottom: 19px; border-bottom: 1px solid #688080; }
#depix-lab .dx-topline a { color: #eeeac9; text-decoration: none; font-size: 14px; font-weight: 650; }
.dx-topline > span, .dx-kicker { font: 650 10px/1.5 ui-monospace,monospace; letter-spacing: .12em; }
.dx-topline > span, .dx-headline .dx-kicker { color: #bcdbce; }
.dx-headline { margin-top: 24px; }
#depix-lab .dx-headline h1 { font-size: clamp(30px,5.2vw,54px); letter-spacing: .025em; margin: 5px 0 9px; }
#depix-lab .dx-headline p { color: #d4e4df; font-size: 15px; }
.dx-glyph {
  flex: none; display: grid; place-items: center; width: 90px; height: 82px; border: 1px solid #8caba1;
  border-radius: 8px; color: #eadbb4; background-color: #375056;
  background-image: linear-gradient(#82948c45 1px,transparent 1px),linear-gradient(90deg,#82948c45 1px,transparent 1px); background-size: 9px 9px;
}
.dx-glyph b { font: bold 51px/1 Georgia,serif; }
.dx-panel,.dx-guide { margin-top: 16px; padding: clamp(16px,3vw,28px); background: var(--dx-bg); border: 1px solid var(--dx-line); border-radius: 14px; }
.dx-heading { margin-bottom: 15px; }
#depix-lab .dx-heading h2 { font-size: clamp(21px,3vw,28px); margin-top: 4px; }
.dx-heading .dx-kicker,.dx-slot p,.dx-slot small,.dx-actions > span,.dx-guide p { color: var(--dx-muted); }
#depix-lab :is(button,.dx-download) {
  cursor: pointer; font: 650 14px/1.4 system-ui,sans-serif; border: 1px solid var(--dx-line); border-radius: 8px;
  padding: 9px 13px; background: var(--dx-wash); color: var(--dx-ink); text-decoration: none;
}
#depix-lab .dx-primary { border-color: #466969; background: #375b59; color: #fffaf0; }
#depix-lab button:disabled { opacity: .55; cursor: default; }
#depix-lab :is(button,a,input,select,summary):focus-visible { outline: 2px solid #7b9b88; outline-offset: 3px; }
.dx-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.dx-slot { min-width: 0; }
.dx-slot label,.dx-settings label { display: block; font-weight: 650; }
#depix-lab .dx-slot p { min-height: 38px; font-size: 13px; margin: 2px 0 6px; }
.dx-slot input { width: 100%; min-width: 0; font: 13px system-ui,sans-serif; color: var(--dx-ink); }
.dx-slot input::file-selector-button { cursor: pointer; border: 1px solid var(--dx-line); padding: 5px 7px; border-radius: 5px; margin-right: 7px; background: var(--dx-wash); color: var(--dx-ink); }
.dx-stage {
  display: grid; place-items: center; min-height: 115px; margin: 7px 0; padding: 7px; overflow: hidden; border-radius: 8px;
  border: 1px dashed var(--dx-line); background: var(--dx-wash); color: var(--dx-muted); font-size: 13px;
}
.dx-stage canvas { display: block; max-width: 100%; max-height: 180px; object-fit: contain; image-rendering: pixelated; }
.dx-slot small { display: block; overflow-wrap: anywhere; font-size: 11px; }
.dx-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 13px; padding-block: 18px; }
.dx-settings label { font-size: 13px; }
.dx-settings :is(input[type=number],select) { display: block; max-width: 100%; margin-top: 5px; padding: 6px 8px; border: 1px solid var(--dx-line); border-radius: 6px; background: var(--dx-bg); color: var(--dx-ink); font: inherit; }
.dx-settings input[type=number] { width: 90px; }
.dx-check { padding: 7px 1px; }
.dx-check input { accent-color: #46726a; }
.dx-actions,.dx-links { justify-content: flex-start; flex-wrap: wrap; }
.dx-actions > span,.dx-links a { font-size: 13px; }
#dx-message { padding: 11px; background: var(--dx-wash); border-radius: 7px; font-size: 14px; }
#dx-message.dx-error { border-left: 3px solid #b96e72; }
.dx-output { min-height: 135px; }
#dx-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#dx-stats span { padding: 3px 8px; border: 1px solid var(--dx-line); border-radius: 6px; color: var(--dx-muted); font-size: 12px; }
.dx-guide summary { cursor: pointer; font-weight: 650; }
#depix-lab .dx-guide h3 { font-size: 18px; margin: 17px 0 6px; }
#depix-lab .dx-guide p { font-size: 14px; margin: 5px 0; }
.dx-links a { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:650px) {
  .type-depix #content-inner { padding: 10px 11px 52px; }
  .dx-inputs { grid-template-columns: 1fr; }
  #depix-lab .dx-slot p { min-height: 0; }
  .dx-glyph { display: none; }
  .dx-heading { flex-wrap: wrap; }
  .dx-hero .dx-topline span { font-size: 8px; }
}