.tech-page {
  --tech-muted: #5c5e62;
  --tech-line: #e5e6e9;
  --tech-green: #166846;
  --tech-paper: #f7f8fa;
}

.tech-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tech-mono,
.tech-page code {
  font-family: var(--mono);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.tech-nav { border-bottom: 1px solid var(--tech-line); }
.tech-nav__links { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.tech-nav__links > a:not(.btn) { color: var(--tech-muted); }
.tech-nav__links > a[aria-current="page"] { color: var(--ink); font-weight: 650; }

.tech-hero {
  padding: clamp(66px, 8vw, 117px) 0 clamp(58px, 7vw, 97px);
  background: radial-gradient(ellipse at 83% 24%, #f4f7f6, #fff 57%);
}

.tech-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.tech-hero h1 {
  font-size: clamp(42px, 4.4vw, 69px);
  line-height: 1.08;
  font-weight: 690;
  letter-spacing: -0.065em;
}

.tech-hero__copy > p {
  max-width: 430px;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
}

.tech-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 28px;
}

.tech-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 630;
}

.tech-link:hover { text-decoration: underline; }

.tech-compare {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #31353b;
  border-radius: 19px;
  background: #17191d;
  color: #f6f7f9;
  box-shadow: 0 32px 65px -36px rgba(14, 25, 21, .5), 0 2px 5px #11121724;
}

.tech-compare__bar {
  display: flex;
  align-items: center;
  min-height: 53px;
  padding: 10px 20px;
  border-bottom: 1px solid #34373d;
  color: #d8dbe0;
  font-size: 12px;
}

.tech-compare__body { padding: clamp(16px, 2.1vw, 27px); }
.tech-compare__title { font-size: 17px; font-weight: 640; }

.tech-switch {
  display: inline-flex;
  gap: 4px;
  margin: 14px 0;
  padding: 4px;
  border: 1px solid #383c44;
  border-radius: 9px;
  background: #202329;
}

.tech-switch label {
  min-width: 78px;
  padding: 7px 12px;
  border-radius: 6px;
  color: #d5d8dd;
  text-align: center;
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}

#html-before:checked ~ .tech-switch label[for="html-before"],
#html-after:checked ~ .tech-switch label[for="html-after"] {
  background: #3e434b;
  color: #fff;
}

#html-before:focus-visible ~ .tech-switch label[for="html-before"],
#html-after:focus-visible ~ .tech-switch label[for="html-after"] {
  outline: 2px solid #a6f0ce;
  outline-offset: 2px;
}

#html-after:checked ~ .tech-compare__panel--before,
#html-before:checked ~ .tech-compare__panel--after { display: none; }

.tech-compare pre,
.tech-snippet {
  padding: 15px 16px;
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tech-compare pre {
  min-height: 156px;
  margin: 0;
  border: 1px solid #32363d;
  background: #101215;
  color: #eff1f4;
  font-size: 13px;
  line-height: 1.8;
}

.tech-code-tag { color: #a6f0ce; }
.tech-compare__panel p { min-height: 3.2em; margin-top: 12px; color: #ced1d6; font-size: 14px; line-height: 1.6; }

.tech-flow { background: var(--tech-paper); border-block: 1px solid var(--tech-line); }

.tech-flow__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tech-flow__grid li { position: relative; padding: 25px clamp(14px, 2.5vw, 35px) 27px; }
.tech-flow__grid li:first-child { padding-left: 0; }
.tech-flow__grid li + li { border-left: 1px solid var(--tech-line); }
.tech-flow__grid h2 { font-size: 17px; font-weight: 690; }
.tech-flow__grid p { margin-top: 5px; color: var(--tech-muted); font-size: 15px; }

.tech-section { padding: clamp(65px, 8vw, 114px) 0; }

.tech-split {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  gap: 30px clamp(32px, 5vw, 76px);
}

.tech-section__intro h2,
.tech-cta h2 {
  font-size: clamp(33px, 3.4vw, 48px);
  line-height: 1.13;
  font-weight: 680;
  letter-spacing: -0.058em;
}

.tech-section__intro p,
.tech-cta p { margin-top: 16px; color: var(--tech-muted); font-size: 17px; line-height: 1.65; }

.tech-checks { border-top: 1px solid var(--tech-line); }
.tech-checks details { border-bottom: 1px solid var(--tech-line); }
.tech-checks summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 680;
  cursor: pointer;
  list-style: none;
}
.tech-checks summary::-webkit-details-marker { display: none; }
.tech-checks summary:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.tech-checks summary::after {
  content: "";
  width: 8px;
  height: 8px;
  justify-self: center;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
}
.tech-checks details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.tech-checks summary code { color: var(--tech-muted); font-size: 12px; font-weight: 450; }
.tech-checks__body { padding: 0 16px 22px 0; color: var(--ink-2); font-size: 15.5px; }
.tech-checks__body ul { margin: 9px 0 0; padding-left: 20px; list-style: disc; }
.tech-checks__body li + li { margin-top: 5px; }
.tech-snippet { margin: 12px 0 0; background: var(--tech-paper); font-size: 12px; }
.tech-snippet__caption { margin-top: 9px; color: var(--tech-muted); font-size: 14px; }

.tech-engines { background: var(--tech-paper); border-block: 1px solid var(--tech-line); }
.tech-engines .tech-section__intro { max-width: 665px; }
.tech-engine-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 33px;
  border: 1px solid var(--tech-line);
  border-radius: 15px;
  background: #fff;
}
.tech-engine { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 29px); }
.tech-engine + .tech-engine { border-left: 1px solid var(--tech-line); }
.tech-engine h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 680; }
.tech-engine h3 img { flex: none; }
.tech-engine p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.tech-engine code,
.tech-checks__body p code,
.tech-checks__body li code { font-size: .9em; }
.tech-sources { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 13px; }
.tech-engine .tech-sources { margin-top: auto; }
.tech-sources a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #d0d2d6;
  border-radius: 6px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
}

.tech-sources a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 1px solid;
  border-right: 1px solid;
  background: linear-gradient(to bottom right, transparent 44%, currentColor 45% 55%, transparent 56%);
  color: var(--tech-muted);
}

.tech-sources a:hover {
  border-color: #a4a7ae;
  background: #f0f1f3;
  color: var(--ink);
}

.tech-engine-extra { margin-top: 22px; }
.tech-engine-extra summary { color: var(--ink); font-size: 15px; font-weight: 680; cursor: pointer; }
.tech-engine-extra dl { display: grid; gap: 9px; margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }
.tech-engine-extra dt { font-weight: 660; }
.tech-engine-extra dd { margin: 0; }

.tech-ticket { min-width: 0; border: 1px solid var(--tech-line); border-radius: 15px; padding: clamp(19px, 2.5vw, 29px); }
.tech-ticket__head h3 { font-size: 20px; font-weight: 690; }
.tech-ticket__url { margin-top: 4px; color: var(--tech-green); font-size: 13px; }
.tech-ticket dl { margin: 17px 0 0; }
.tech-ticket dl > div { display: grid; grid-template-columns: 6em 1fr; gap: 10px; border-top: 1px solid var(--tech-line); padding: 12px 0; }
.tech-ticket dl > div:last-child { padding-bottom: 0; }
.tech-ticket dt { font-size: 14px; font-weight: 680; }
.tech-ticket dd { margin: 0; color: var(--ink-2); font-size: 15px; }

.tech-observation { grid-column: 2; border-top: 1px solid var(--tech-line); padding-top: 24px; }
.tech-observation h3 { font-size: 20px; font-weight: 680; }
.tech-observation ul { display: grid; gap: 9px; margin-top: 11px; }
.tech-observation li { display: grid; grid-template-columns: 7.5em 1fr; gap: 9px; font-size: 15px; }
.tech-observation li span { color: var(--ink-2); }

.tech-cta { background: var(--tech-paper); border-block: 1px solid var(--tech-line); }
.tech-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tech-cta p { margin-top: 10px; }

@media (max-width: 880px) {
  .tech-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tech-hero__copy { max-width: 590px; }
  .tech-hero__copy h1 br:nth-of-type(2) { display: none; }
  .tech-compare { max-width: 600px; }
  .tech-split { grid-template-columns: minmax(0, 1fr); }
  .tech-section__intro h2 br { display: none; }
  .tech-observation { grid-column: auto; }
}

@media (max-width: 620px) {
  .tech-nav__links { gap: 12px; }
  .tech-nav__links > a:first-child { display: none; }
  .tech-flow__grid, .tech-engine-list { grid-template-columns: minmax(0, 1fr); }
  .tech-flow__grid li { padding: 17px 0; }
  .tech-flow__grid li + li, .tech-engine + .tech-engine { border-left: 0; border-top: 1px solid var(--tech-line); }
  .tech-checks summary { grid-template-columns: minmax(0, 1fr) 16px; gap: 1px 12px; }
  .tech-checks summary code { grid-row: 2; }
  .tech-checks summary::after { grid-column: 2; grid-row: 1 / 3; }
  .tech-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .tech-nav__links > a[aria-current] { display: none; }
  .tech-compare__bar { padding-inline: 12px; }
  .tech-compare pre { padding-inline: 10px; font-size: 12px; }
  .tech-ticket dl > div, .tech-observation li { grid-template-columns: 1fr; gap: 3px; }
}