:root {
  font-family: Inter, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color: #19302a;
  background: #f4f5ee;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  max-width: 920px;
  margin: auto;
  padding: 60px 24px;
}
.brand {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.16em;
  color: #47705b;
}
h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 24px 0;
}
header p {
  max-width: 690px;
  line-height: 1.8;
  color: #54645b;
}
form,
section {
  background: #fff;
  border: 1px solid #dce3d7;
  border-radius: 16px;
  padding: 28px;
  margin: 30px 0;
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
}
input[type='file'] {
  display: block;
  width: 100%;
  padding: 14px;
  background: #f7f8f3;
  border: 1px dashed #a4b7a2;
  border-radius: 8px;
  color: #374b3d;
}
.hint {
  font-size: 13px;
  color: #667469;
}
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}
select {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid #b4c3ad;
  border-radius: 6px;
  background: white;
}
button {
  padding: 13px 24px;
  background: #245e42;
  border: 0;
  border-radius: 7px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
}
#cancel {
  background: #e8eee3;
  color: #284632;
  margin-left: 12px;
}
#status {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
}
#downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}
a {
  color: #245e42;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
details {
  border-top: 1px solid #e3e8dd;
  padding-top: 18px;
}
summary {
  cursor: pointer;
}
li {
  line-height: 1.8;
  margin: 12px 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
footer {
  font-size: 13px;
  line-height: 1.8;
  color: #6d786f;
}
@media (max-width: 650px) {
  main {
    padding: 30px 18px;
  }
  .options {
    grid-template-columns: 1fr;
  }
  form,
  section {
    padding: 20px;
  }
}

/* Rule explanations and feedback drafts must remain readable on narrow screens. */
#rules-summary,
#sources p,
pre {
  overflow-wrap: anywhere;
}
pre {
  white-space: pre-wrap;
  max-width: 100%;
}
#rule-list details {
  margin: 12px 0;
}

/* A single centered task, with only banner and footer advertising areas. */
html.home-page {
  background: #fff;
}
.home {
  background: #fff;
  color: #303633;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: Arial, 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
.home main {
  width: 100%;
  max-width: 1040px;
  flex: 1;
  margin: 0 auto;
  padding: 30px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-home {
  width: 100%;
  max-width: 620px;
  margin: auto 0;
  text-align: center;
  padding: 16px 0 24px;
}
.home header {
  margin: 0 0 28px;
}
.home h1.brand {
  font-size: 58px;
  line-height: 1.15;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: #315d49;
  margin: 0 0 12px;
}
.home .service-title {
  font-size: 14px;
  font-weight: 400;
  color: #6d7871;
  line-height: 1.6;
  margin: 0;
}
.home .service-form {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  margin: 0;
}
.home .document-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  margin: 0;
  border: 1px solid #dfe4df;
  border-radius: 30px;
  background: #fff;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.home .document-bar:hover,
.home .document-bar:focus-within {
  border-color: #d2dad3;
  box-shadow: 0 2px 12px #253d3212;
}
.document-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: #8b958e;
}
.home #file-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5f6e61;
}
.document-action {
  color: #526c5d;
  white-space: nowrap;
  font-size: 12px;
}
.document-action > span {
  font-size: 18px;
  margin-left: 8px;
}
.home input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.service-preferences {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  margin: 13px 0 18px;
}
.preference {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.home .preference label {
  font-size: 11px;
  color: #5f6e61;
  font-weight: 400;
  margin: 0;
  flex-shrink: 0;
}
.home select {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 5px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #6b776f;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.home select:hover {
  background: #f7f9f6;
}
.home .service-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.home button {
  background: #f5f7f4;
  color: #3d5144;
  border: 1px solid #f0f3ee;
  border-radius: 4px;
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 400;
}
.home button:hover {
  border-color: #cdd9cf;
  background: #f0f4ee;
}
.home #cancel {
  margin-left: 0;
  background: white;
  color: #69776b;
}
.home #status {
  margin: 14px 0 0;
  color: #5f6e61;
  font-size: 11px;
  line-height: 1.7;
  min-height: 19px;
}
.home #status:empty {
  display: none;
}
.home .hint {
  font-size: 11px;
  line-height: 1.7;
  margin: 7px 0 0;
  color: #5f6e61;
}
.home #results {
  text-align: left;
  border: 0;
  border-top: 1px solid #e7ece5;
  border-radius: 0;
  background: none;
  padding: 22px 0 0;
  margin: 24px 0 0;
}
.home h2 {
  font-size: 17px;
  font-weight: 500;
}
.home #downloads {
  justify-content: center;
}
.home .seo-summary {
  max-width: 760px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: center;
}
.home .seo-summary p {
  font-size: 11px;
  color: #5f6e61;
  line-height: 1.9;
  margin: 0;
}
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e7eae4;
  background: #fafbf9;
  color: #61705f;
  font-size: 10px;
}
.site-banner,
.footer-ad {
  width: min(970px, calc(100% - 48px));
  height: 90px;
  flex-shrink: 0;
  margin: 16px auto 0;
}
.home-footer {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.footer-ad {
  margin: 0 auto;
}
.home-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  padding: 18px 20px;
}
.home-footer a {
  color: #5f6e61;
  font-size: 11px;
  text-decoration: none;
}
.home-footer a:hover {
  text-decoration: underline;
  color: #315d49;
}
.home :focus-visible {
  outline: 2px solid #90aa96;
  outline-offset: 3px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}
@media (max-width: 650px) {
  .site-banner,
  .footer-ad {
    width: calc(100% - 32px);
    height: 50px;
  }
  .site-banner {
    margin-top: 12px;
  }
  .home main {
    padding: 24px 16px 18px;
  }
  .search-home {
    padding: 14px 0 20px;
  }
  .home h1.brand {
    font-size: 46px;
  }
  .home header {
    margin-bottom: 24px;
  }
  .home .document-bar {
    height: 52px;
    padding: 0 16px;
    gap: 10px;
    font-size: 13px;
  }
  .document-action {
    font-size: 11px;
  }
  .document-action > span {
    margin-left: 4px;
  }
  .service-preferences {
    gap: 4px 10px;
  }
  .home select {
    font-size: 11px;
  }
  .home .seo-summary p {
    font-size: 10px;
    line-height: 1.8;
  }
  .home-footer nav {
    gap: 22px;
    padding: 16px;
  }
  .home #status:empty {
    display: none;
  }
  .home .hint {
    font-size: 10px;
  }
}

/* One focus surface and one styled downward-opening menu; no native popup. */
.home #rule-pack[hidden] {
  display: none;
}
.home .rule-picker {
  position: relative;
  height: 36px;
  padding: 0 10px 0 13px;
  border: 1px solid #e0e7e0;
  border-radius: 19px;
  background: #f8faf7;
  gap: 9px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  isolation: isolate;
}
.home .rule-picker > label {
  display: flex;
  align-items: center;
  height: 34px;
  line-height: 20px;
  font: inherit;
  font-size: 12px;
  color: #5f6e61;
  margin: 0;
}
.home button.rule-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  height: 34px;
  line-height: 20px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #455c49;
  font: inherit;
  font-size: 12px;
  box-shadow: none;
  text-align: left;
}
.rule-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-trigger > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #6f896f;
  transition: transform 0.15s;
}
.home button.rule-trigger:hover {
  background: transparent;
  border: 0;
}
.home button.rule-trigger:focus,
.home button.rule-trigger:focus-visible,
.home input[type='file']:focus,
.home input[type='file']:focus-visible {
  outline: none;
  box-shadow: none;
}
.home .rule-picker:focus-within,
.home .rule-picker[data-open='true'] {
  border-color: #a9bea8;
  box-shadow: 0 0 0 3px #e3ece066;
}
.rule-picker[data-open='true'] .rule-trigger > svg {
  transform: rotate(180deg);
}
.rule-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: -1px;
  width: calc(100% + 2px);
  padding: 5px;
  background: #fff;
  border: 1px solid #dce6d9;
  border-radius: 12px;
  box-shadow: 0 8px 24px #2b4a301a;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  text-align: left;
}
.rule-menu[hidden] {
  display: none;
}
.home button.rule-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 8px;
  padding: 10px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.7;
  color: #536b4c;
  background: #fff;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.home button.rule-option:hover,
.home button.rule-option.is-active {
  background: #edf4e8;
  border: 0;
  color: #3f6639;
}
.rule-option > span:first-child {
  min-width: 0;
}
.rule-option-check {
  width: 14px;
  flex-shrink: 0;
  color: #5d8651;
  font-size: 13px;
}
.rule-picker[data-disabled='true'] {
  opacity: 0.65;
}
.rule-picker .rule-trigger:disabled {
  opacity: 1;
  cursor: default;
}
/* Result hierarchy only appears after processing; the idle homepage remains a single task. */
.home #results {
  margin: 30px 0 0;
  padding: 24px;
  border: 1px solid #e0e9df;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px #294a3210;
}
.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.result-check {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf3e9;
  color: #3b7550;
  flex-shrink: 0;
}
.result-check svg {
  width: 24px;
  height: 24px;
}
.result-heading {
  flex: 1;
  min-width: 0;
}
.home .result-heading h2 {
  font-size: 17px;
  font-weight: 600;
  color: #314d39;
  margin: 0 0 5px;
}
.result-heading > p {
  font-size: 11px;
  color: #5f6e61;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.result-time {
  font-size: 11px;
  color: #5f6e61;
  background: #f4f7f1;
  border-radius: 12px;
  padding: 5px 9px;
  white-space: nowrap;
}
.result-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 23px 0 12px;
}
.result-stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  padding: 13px 11px 12px;
  background: #f6f8f4;
  border-radius: 10px;
  min-width: 0;
}
.result-stat dt {
  font-size: 10px;
  line-height: 1.7;
  color: #5f6e61;
  margin-top: 5px;
  white-space: nowrap;
}
.result-stat dd {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  color: #52674e;
  margin: 0;
  line-height: 1.2;
}
.result-stat.stat-success {
  background: #edf5e9;
}
.stat-success dd {
  color: #43814c;
}
.result-stat.stat-review {
  background: #fbf6e8;
}
.stat-review dd {
  color: #a08135;
}
.home .result-note {
  font-size: 11px;
  line-height: 1.8;
  color: #5f6e61;
  margin: 0 0 18px;
}
.home #downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0 0 23px;
}
.download-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  border: 1px solid #e3e9df;
  border-radius: 9px;
  padding: 13px 12px;
  background: #fbfcfa;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.download-card:hover {
  background: #f1f6ed;
  border-color: #b5c9af;
}
.download-primary {
  grid-column: 1/-1;
  background: #3d6547;
  border-color: #3d6547;
  color: #fff;
  padding: 16px;
}
.download-primary:hover {
  background: #31583b;
  border-color: #31583b;
}
.download-icon {
  width: 22px;
  display: flex;
  align-items: center;
  color: #7d9473;
  flex-shrink: 0;
}
.download-icon svg {
  width: 22px;
  height: 22px;
}
.download-primary .download-icon {
  color: #d7e8cf;
}
.download-text {
  display: block;
  flex: 1;
  min-width: 0;
}
.download-text strong {
  display: block;
  font-size: 11px;
  font-weight: 550;
  color: #59724f;
  line-height: 1.6;
}
.download-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: #5f6e61;
  margin-top: 3px;
  line-height: 1.5;
}
.download-primary .download-text strong {
  font-size: 14px;
  color: #fff;
}
.download-primary .download-text small {
  font-size: 10px;
  color: #d7e8cf;
}
.download-arrow {
  font-size: 20px;
  color: #849c79;
}
.download-primary .download-arrow {
  color: #d7e8cf;
}
.home .difference-details {
  border-top: 1px solid #e8ede4;
  padding-top: 18px;
}
.difference-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 12px;
  color: #4b6544;
  font-weight: 500;
}
.difference-details > summary::-webkit-details-marker {
  display: none;
}
.difference-details > summary > svg {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: #89a07e;
  transition: transform 0.15s;
}
.difference-details[open] > summary > svg {
  transform: rotate(180deg);
}
.preview-count {
  font-size: 10px;
  font-weight: 400;
  color: #5f6e61;
  background: #f2f6ef;
  border-radius: 9px;
  padding: 3px 7px;
}
.home #preview-note {
  font-size: 10px;
  line-height: 1.7;
  color: #5f6e61;
  margin: 14px 0 10px;
}
.home #preview {
  max-height: 560px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  padding: 0 8px 0 0;
  margin: 0;
}
.home .difference-item {
  padding: 15px 0;
  margin: 0;
  border-bottom: 1px solid #edf0e8;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.difference-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.difference-title strong {
  font-size: 12px;
  font-weight: 550;
  color: #4e6746;
}
.difference-state {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.state-repaired {
  color: #466d37;
  background: #eff6e9;
}
.state-review {
  color: #806020;
  background: #faf4e4;
}
.home .difference-location {
  font-size: 10px;
  line-height: 1.7;
  color: #5f6e61;
  margin: 7px 0;
}
.home .difference-description {
  font-size: 11px;
  line-height: 1.9;
  color: #5f6e61;
  margin: 0 0 7px;
}
.difference-rule {
  font-size: 10px;
  color: #5f6e61;
  text-decoration: none;
}
.difference-rule:hover {
  text-decoration: underline;
}
@media (max-width: 650px) {
  .home #results {
    padding: 18px 14px;
    border-radius: 12px;
  }
  .result-header {
    gap: 9px;
  }
  .result-check {
    width: 32px;
    height: 32px;
  }
  .result-check svg {
    width: 19px;
    height: 19px;
  }
  .home .result-heading h2 {
    font-size: 15px;
  }
  .result-time {
    font-size: 10px;
    padding: 4px 7px;
  }
  .result-stats {
    gap: 6px;
    margin-top: 19px;
  }
  .result-stat {
    padding: 10px 7px;
  }
  .result-stat dd {
    font-size: 22px;
    letter-spacing: -0.6px;
  }
  .result-stat dt {
    font-size: 9px;
  }
  .home #downloads {
    gap: 7px;
  }
  .download-card {
    padding: 11px 9px;
    gap: 7px;
  }
  .download-text strong {
    font-size: 10px;
  }
  .download-primary {
    padding: 14px;
  }
  .download-primary .download-text strong {
    font-size: 13px;
  }
  .download-icon {
    width: 18px;
  }
  .download-icon svg {
    width: 18px;
  }
  .download-arrow {
    font-size: 17px;
  }
}
@media (max-width: 360px) {
  .result-stats {
    grid-template-columns: 1fr 1fr;
  }
  .home #downloads {
    grid-template-columns: 1fr;
  }
  .result-time {
    display: none;
  }
}

/* Upload and results remain in one document; completion scrolls to the result section. */
.home [hidden] {
  display: none !important;
}
.home button.view-results {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #355f43;
  color: #fff;
  border: 1px solid #355f43;
  border-radius: 24px;
  padding: 12px 26px;
  margin-top: 7px;
  box-shadow: 0 4px 12px #244a3214;
}
.home button.view-results:hover {
  background: #2d5239;
  border-color: #2d5239;
}
.view-results > span {
  font-size: 18px;
}
.home.has-results .search-home {
  margin: 0 auto 42px;
}
.home #results.results-page {
  width: 100%;
  max-width: 880px;
  outline: none;
  margin: 0 auto 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  font-size: 11px;
  color: #5f6e61;
}
.home #back-upload {
  padding: 7px 0;
  background: transparent;
  border: 0;
  color: #5f6e61;
  font-size: 12px;
  border-radius: 0;
}
.home #back-upload:hover {
  color: #365d3c;
  background: none;
}
.home .results-page .result-header {
  margin-bottom: 24px;
}
.home .results-page .result-heading h2 {
  font-size: 23px;
}
.home .results-page .result-stats {
  gap: 14px;
  margin: 0 0 13px;
}
.home .results-page .result-stat {
  border: 1px solid #e5ebe0;
  border-radius: 12px;
  padding: 19px 18px;
  background: #fff;
  box-shadow: 0 3px 12px #35502a05;
}
.home .results-page .stat-success {
  background: #f2f8ed;
  border-color: #e3eddc;
}
.home .results-page .stat-review {
  background: #fcf8ed;
  border-color: #f0e8d4;
}
.home .results-page .result-stat dd {
  font-size: 33px;
}
.home .results-page .result-stat dt {
  font-size: 11px;
}
.home .results-page #downloads {
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  margin: 22px 0 42px;
}
.home .results-page .download-primary {
  grid-column: auto;
}
.home .results-page .download-card {
  padding: 15px 13px;
}
.home .results-page .download-primary .download-text strong {
  font-size: 13px;
}
.difference-list {
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
.difference-list-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5ebe0;
}
.home .difference-list-heading h2 {
  font-size: 17px;
  font-weight: 550;
  margin: 0;
  color: #48613e;
}
.home .results-page #preview-note {
  margin: 12px 0 4px;
  font-size: 11px;
}
.home .results-page #preview {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  padding: 0;
  margin: 0;
}
.home .results-page .difference-item {
  padding: 23px 0;
  border-bottom: 1px solid #e9eee4;
}
.home .results-page .difference-title strong {
  font-size: 14px;
}
.home .results-page .difference-location {
  font-size: 11px;
  margin: 9px 0;
}
.home .results-page .difference-description {
  font-size: 13px;
  line-height: 1.9;
}
.home .results-page .difference-rule {
  font-size: 11px;
}
.home .results-page .difference-state {
  font-size: 10px;
}
@media (max-width: 650px) {
  .results-toolbar {
    margin-bottom: 23px;
  }
  .home .results-page .result-heading h2 {
    font-size: 19px;
  }
  .home .results-page .result-stats {
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
  .home .results-page .result-stat {
    padding: 15px;
  }
  .home .results-page .result-stat dd {
    font-size: 28px;
  }
  .home .results-page #downloads {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
    gap: 8px;
  }
  .home .results-page .download-primary {
    grid-column: 1/-1;
  }
  .home .results-page .difference-item {
    padding: 20px 0;
  }
  .home .results-page .difference-description {
    font-size: 12px;
  }
  .home .results-page .difference-title strong {
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .home .results-page #downloads {
    grid-template-columns: 1fr;
  }
}

.home #results.results-page {
  scroll-margin-top: 20px;
  min-height: calc(100svh - 20px);
}
.home #upload-page {
  scroll-margin-top: 24px;
}
.result-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    #cbd9c4 22%,
    #cbd9c4 78%,
    transparent
  );
  margin: 0 0 24px;
  position: relative;
}
.result-divider::after {
  content: '';
  position: absolute;
  inset: 1px 0 auto;
  height: 22px;
  background: radial-gradient(ellipse at top, #e8efe380, transparent 70%);
  pointer-events: none;
}
.difference-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 15px 0 10px;
}
.home .difference-filters button {
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
  padding: 6px 12px;
  border: 1px solid #e5ebe0;
  border-radius: 16px;
  background: #fff;
  color: #5f6e61;
}
.home .difference-filters button:hover {
  background: #f5f8f0;
  border-color: #c9d8bf;
}
.home .difference-filters button[aria-pressed='true'] {
  background: #edf4e6;
  border-color: #c4d7b8;
  color: #4b713b;
}
.home .filter-empty {
  font-size: 12px;
  color: #5f6e61;
  line-height: 1.8;
  padding: 22px 0;
}

.home button.back-to-top {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #496d4b;
  border-radius: 50%;
  background: #3e6545;
  color: #fff;
  box-shadow: 0 4px 16px #27472f26;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    bottom 0.15s;
}
.back-to-top svg {
  width: 23px;
  height: 23px;
}
.home button.back-to-top:hover {
  background: #315638;
  border-color: #315638;
  box-shadow: 0 6px 20px #27472f33;
}
.home button.back-to-top:focus-visible {
  outline: 3px solid #afc5a7;
  outline-offset: 4px;
}
.home button.back-to-top.above-footer {
  bottom: calc(164px + env(safe-area-inset-bottom));
}
@media (max-width: 650px) {
  .home button.back-to-top {
    width: 44px;
    height: 44px;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .home button.back-to-top.above-footer {
    bottom: calc(116px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .home button.back-to-top {
    transition: none;
  }
}

.info-page main {
  max-width: 800px;
  padding: 40px 24px 48px;
}
.info-page header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
}
.info-page .info-brand {
  font-size: 21px;
  font-weight: 750;
  text-decoration: none;
}
.info-page h1 {
  margin: 52px 0 22px;
  font-size: clamp(30px, 5vw, 40px);
}
.info-page h2 {
  margin: 34px 0 10px;
  font-size: 19px;
  font-weight: 650;
}
.info-page p,
.info-page li {
  line-height: 1.9;
  color: #536358;
}
.info-page .lead {
  font-size: 18px;
  color: #2f483a;
}
.info-page ol {
  padding-left: 24px;
}
.info-page li {
  padding-left: 5px;
  margin: 9px 0;
}
.info-page a {
  color: #3e6545;
  text-underline-offset: 4px;
}
.info-page footer {
  margin-top: 48px;
  border-top: 1px solid #dce3d7;
  padding-top: 22px;
}
.info-page nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 14px;
}
.info-page nav a {
  text-decoration: none;
}
.info-page a:hover {
  text-decoration: underline;
}