.code-compare { --cc-ink: #f1f0e7; --cc-muted: #95958c; --cc-line: #33352e; --cc-panel: #151612; --cc-accent: #ff5a27; color: var(--cc-ink); font-family: "Inter", Arial, "Microsoft YaHei", sans-serif; text-align: left; }
.code-compare *, .code-compare *::before, .code-compare *::after { box-sizing: border-box; }
.code-compare .code-compare__heading { margin-bottom: 32px; }
.code-compare .code-compare__eyebrow { color: var(--cc-accent); font: 10px "Consolas", "Courier New", monospace; letter-spacing: .09em; }
.code-compare .code-compare__heading h2 { color: var(--cc-ink); margin: 17px 0 13px; font-size: clamp(28px, 3.8vw, 52px); font-weight: 500; line-height: 1.22; letter-spacing: -.045em; }
.code-compare .code-compare__heading p { color: var(--cc-muted); font-size: 13px; line-height: 1.85; margin: 0; max-width: 650px; }
.code-compare .code-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.code-compare .code-compare__window { min-width: 0; height: 460px; display: flex; flex-direction: column; border: 1px solid #404238; background: var(--cc-panel); box-shadow: 0 22px 50px #00000012; border-radius: 7px; overflow: hidden; color-scheme: dark; }
.code-compare .code-compare__window--encrypted { border-color: #6e482e; }
.code-compare .code-compare__windowbar { min-height: 49px; padding: 10px 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; background: #20211b; border-bottom: 1px solid var(--cc-line); }
.code-compare .code-compare__dots { display: flex; gap: 5px; }
.code-compare .code-compare__dots i { width: 7px; height: 7px; display: block; background: #6b6b5f; border-radius: 50%; }
.code-compare .code-compare__dots i:first-child { background: #ff6949; }
.code-compare .code-compare__dots i:nth-child(2) { background: #c6a958; }
.code-compare .code-compare__dots i:nth-child(3) { background: #81a777; }
.code-compare .code-compare__filename { color: #d4d4c8; margin: 0; font: 11px "Consolas", "Courier New", monospace; letter-spacing: .07em; white-space: nowrap; }
.code-compare .code-compare__copy { justify-self: end; background: #292b22; color: #d2d4c3; border: 1px solid #4b4e3e; border-radius: 3px; min-width: 63px; padding: 6px 9px; font-family: inherit; font-size: 10px; cursor: pointer; transition: color .2s, border-color .2s; }
.code-compare .code-compare__copy:hover { color: var(--cc-accent); border-color: var(--cc-accent); }
.code-compare button:focus-visible, .code-compare a:focus-visible, .code-compare [tabindex]:focus-visible, .code-compare textarea:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: -2px; }
.code-compare .code-compare__filemeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 17px; color: var(--cc-muted); border-bottom: 1px solid #292b24; font-size: 9px; }
.code-compare .code-compare__kind { color: #b6bc9f; }
.code-compare .code-compare__window--encrypted .code-compare__kind { color: #d79a76; }
.code-compare .code-compare__stats { color: #7e8273; font: 9px "Consolas", "Courier New", monospace; }
.code-compare .code-compare__viewport { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 17px 15px 20px 0; scrollbar-width: thin; scrollbar-color: #4e5340 #151612; overscroll-behavior: contain; touch-action: pan-y; }
.code-compare .code-compare__code { font: 11px/1.9 "Consolas", "Courier New", monospace; color: #d2d4c5; margin: 0; padding: 0; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-compare .code-compare__line { display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: start; }
.code-compare .code-compare__linenumber { color: #5c6250; font-size: 9px; padding-right: 13px; text-align: right; user-select: none; line-height: 2.32; }
.code-compare .code-compare__line > code { display: block; font: inherit; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-compare .code-compare__string { color: #a8c988; }
.code-compare .code-compare__keyword { color: #f18b60; }
.code-compare .code-compare__comment { color: #6c795c; }
.code-compare .code-compare__number { color: #c0bc85; }
.code-compare .code-compare__windowfoot { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 15px; border-top: 1px solid var(--cc-line); background: #191b15; }
.code-compare .code-compare__previewnote { font-size: 9px; line-height: 1.6; color: #89917a; }
.code-compare .code-compare__download { color: #c7c9ba; white-space: nowrap; font-size: 9px; text-decoration: none; }
.code-compare .code-compare__download:hover { color: var(--cc-accent); }
.code-compare .code-compare__dialog { background: #151612; color: var(--cc-ink); border: 1px solid #626750; border-radius: 5px; width: min(850px, calc(100vw - 30px)); padding: 23px; max-height: 90vh; overflow: auto; }
.code-compare .code-compare__dialog::backdrop { background: #050603ce; backdrop-filter: blur(5px); }
.code-compare .code-compare__dialoghead { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.code-compare .code-compare__dialoghead h3 { margin: 0; font-size: 19px; font-weight: 500; }
.code-compare .code-compare__close { font-family: inherit; background: transparent; color: #deded2; border: 1px solid #585b4a; padding: 7px 11px; cursor: pointer; }
.code-compare .code-compare__dialog p { font-size: 12px; line-height: 1.8; color: #a7ad99; margin: 15px 0; }
.code-compare .code-compare__manual { display: block; resize: vertical; width: 100%; height: min(54vh, 420px); min-height: 180px; background: #0d0f0a; color: #d3dcc2; border: 1px solid #343a2b; border-radius: 0; padding: 15px; font: 11px/1.8 "Consolas", "Courier New", monospace; white-space: pre; tab-size: 4; }
.code-compare .code-compare__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .code-compare .code-compare__grid { grid-template-columns: 1fr; gap: 18px; }
  .code-compare .code-compare__window { height: 460px; }
  .code-compare .code-compare__heading { margin-bottom: 25px; }
  .code-compare .code-compare__heading p { font-size: 12px; }
  .code-compare .code-compare__windowfoot { align-items: flex-start; }
  .code-compare .code-compare__code { font-size: 10px; }
  .code-compare .code-compare__line { grid-template-columns: 36px minmax(0, 1fr); }
  .code-compare .code-compare__linenumber { padding-right: 10px; line-height: 2.1; }
}
@media (prefers-reduced-motion: reduce) { .code-compare .code-compare__copy { transition: none; } }

.comparison-section { position: relative; background: #141314; border-top: 1px solid #eee2; }
.code-compare .code-compare__viewport { contain: layout paint; }
.code-compare { font-family: var(--sans); --cc-panel: #171618; --cc-line: #373238; }
.code-compare .code-compare__windowbar { background: #201d21; }
.code-compare .code-compare__windowfoot { background: #19171b; }
.code-compare .code-compare__window--plain { background: radial-gradient(ellipse at bottom right,#15443555,transparent 80%),#141819; }
.code-compare .code-compare__window--encrypted { background: radial-gradient(ellipse at top right,#5d2f2055,transparent 85%),#181518; }