:where(.image-page, .text-page, .developer-page, .date-page, .qr-page) {
  --suite-paper: #f5f2eb;
  --suite-panel: #fffdfa;
  --suite-line: #d9d2c8;
  --suite-ink: #24211e;
  --suite-muted: #706a62;
  --suite-rust: #c94e2d;
  background: var(--suite-paper) !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.image-main, .text-main, .developer-main, .date-main, .qr-main) {
  padding-top: 18px !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
  align-items: center !important;
  gap: 42px !important;
  margin: 0 !important;
  padding: 25px 0 28px !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) h1 {
  max-width: 780px;
  margin: 10px 0 12px !important;
  color: var(--suite-ink);
  font-family: Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  font-size: clamp(44px, 4.35vw, 58px) !important;
  line-height: .99 !important;
  letter-spacing: -.055em !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) h1 em {
  color: var(--suite-rust) !important;
  font-weight: 500;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) > div > p {
  max-width: 680px;
  color: var(--suite-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.privacy-card, .text-privacy-card, .today-card) {
  min-width: 0 !important;
  width: 100% !important;
  border: 1px solid var(--suite-line) !important;
  border-radius: 0 !important;
  padding: 17px !important;
  background: rgba(255, 253, 250, .7) !important;
  box-shadow: none !important;
  transform: none !important;
}

.developer-page .developer-hero-art,
.qr-page .hero-qr {
  display: none !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.image-workbench, .text-workbench, .developer-workbench, .date-workbench, .qr-workbench) {
  margin: 0 0 68px !important;
  border: 1px solid var(--suite-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--suite-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.workbench-title, .text-workbench-title, .developer-heading, .date-workbench-title, .workbench-heading) {
  min-height: 72px;
  align-items: center !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid var(--suite-line) !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.workbench-title, .text-workbench-title, .developer-heading, .date-workbench-title, .workbench-heading) h2 {
  margin-top: 4px !important;
  font-size: 22px !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.workbench-title, .text-workbench-title, .developer-heading, .date-workbench-title, .workbench-heading)
  > div:first-child > span {
  color: var(--suite-rust) !important;
  white-space: nowrap;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.feature-pills, .text-feature-pills, .date-feature-pills) span {
  border: 1px solid var(--suite-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.image-page .workspace-grid,
.text-page .text-workspace-grid {
  padding: 20px !important;
}

.text-page .stats-grid {
  margin: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
}

.developer-page .developer-tabs {
  margin: 0 !important;
  border-bottom: 1px solid var(--suite-line) !important;
  padding: 12px 20px !important;
}

.developer-page .developer-heading > div:first-child {
  display: grid !important;
  gap: 3px !important;
}

.developer-page .developer-panel {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 22px !important;
  box-shadow: none !important;
}

.date-page .date-workbench > .tool-card,
.date-page .secondary-grid,
.date-page .timezone-card,
.qr-page .qr-layout {
  margin: 0 !important;
}

.date-page .date-workbench > .tool-card,
.date-page .date-workbench .secondary-grid,
.date-page .date-workbench .timezone-card {
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.qr-page .qr-layout {
  gap: 0 !important;
}

.qr-page :is(.generator-card, .reader-card) {
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.qr-page .reader-card {
  border-left: 1px solid var(--suite-line) !important;
}

.qr-page .qr-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, .72fr) !important;
}

.qr-page .generator-body {
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 16px !important;
}

.qr-page .style-settings {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.date-page .card-number,
.qr-page .panel-number,
.qr-page .reader-number {
  background: #f1d3c8 !important;
  color: var(--suite-rust) !important;
}

.text-page .text-tools-card {
  border: 1px solid var(--suite-line) !important;
  background: var(--suite-panel) !important;
  color: var(--suite-ink) !important;
}

.text-page :is(.history-row, .tool-section) {
  border-color: var(--suite-line) !important;
}

.text-page .history-row small,
.text-page .replace-actions label,
.text-page .replace-fields label {
  color: var(--suite-muted) !important;
}

.text-page .history-row button,
.text-page .action-grid button,
.text-page .replace-fields input,
.text-page .download-text-button {
  border-color: var(--suite-line) !important;
  background: #fff !important;
  color: var(--suite-ink) !important;
}

.text-page .tool-section-heading > span {
  background: #f1d3c8 !important;
  color: var(--suite-rust) !important;
}

.text-page .tool-section-heading strong {
  color: var(--suite-ink) !important;
}

.text-page .replace-actions button,
.text-page .copy-text-button {
  border-color: var(--suite-rust) !important;
  background: var(--suite-rust) !important;
  color: #fff !important;
}

.text-page .clear-text-button {
  color: var(--suite-muted) !important;
}

:where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
  :is(.drop-zone, .editor-card, .text-tools-card, .settings-card, .tool-card, .canvas-shell) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1181px) {
  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page) .tool-suite-nav {
    display: none !important;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) {
    grid-template-columns: minmax(0, 800px) !important;
    gap: 0 !important;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.privacy-card, .text-privacy-card, .today-card) {
    display: none !important;
  }
}

@media (max-width: 1180px) {
  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) {
    padding-top: 30px !important;
  }
}

@media (max-width: 820px) {
  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 0 25px !important;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) h1 {
    font-size: clamp(39px, 10.8vw, 53px) !important;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.privacy-card, .text-privacy-card, .today-card) {
    max-width: 100%;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.feature-pills, .text-feature-pills, .date-feature-pills) {
    display: none !important;
  }

  .image-page .workspace-grid,
  .text-page .text-workspace-grid {
    padding: 14px !important;
  }

  .qr-page .reader-card {
    border-top: 1px solid var(--suite-line) !important;
    border-left: 0 !important;
  }

  .qr-page .qr-layout,
  .qr-page .generator-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.image-main, .text-main, .developer-main, .date-main, .qr-main) {
    width: calc(100% - 24px) !important;
    padding-top: 12px !important;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.image-hero, .text-hero, .developer-hero, .date-hero, .qr-hero) h1 {
    font-size: clamp(36px, 11.5vw, 48px) !important;
    line-height: 1.02 !important;
  }

  :where(.image-page, .text-page, .developer-page, .date-page, .qr-page)
    :is(.workbench-title, .text-workbench-title, .developer-heading, .date-workbench-title, .workbench-heading) {
    min-height: 0;
    align-items: flex-start !important;
    padding: 15px !important;
  }

  .developer-page .developer-tabs {
    padding: 10px 14px !important;
  }

  .developer-page .developer-panel {
    padding: 16px !important;
  }
}