/* КонтурNet download page (tools/mirror/kn-page.html). Colours are the app's own (Android theme), so the page
   looks like what people are about to install; system fonts only, no external requests. */
:root {
  color-scheme: dark;
  --bg: #101317;
  --bg-top: #13171C;
  --surface: #1E2126;
  --line: #2B2E33;
  --text: #ECEFF2;
  --muted: #8E9BAA;
  --acc: #45D68F;
  --acc-deep: #1C9A5D;
  --acc-hi: #D2FFE6;
  --on-acc: #0B1F15;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg) linear-gradient(var(--bg-top), var(--bg) 40rem) no-repeat;
  color: var(--text);
  font: 400 1.0625rem/1.55 "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
}
.wrap { max-width: 36rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

/* Hero: the brand's contour lines behind the shield, the one decorative element on the page. */
.hero {
  padding: 2.5rem 0 1.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 420' fill='none' stroke='%2345D68F'%3E%3Cg stroke-width='1.5'%3E%3Cellipse cx='402' cy='132' rx='38' ry='30' stroke-opacity='.32'/%3E%3Cellipse cx='396' cy='138' rx='74' ry='58' stroke-opacity='.26'/%3E%3Cellipse cx='388' cy='146' rx='112' ry='88' stroke-opacity='.21'/%3E%3Cellipse cx='378' cy='156' rx='152' ry='120' stroke-opacity='.16'/%3E%3Cellipse cx='366' cy='168' rx='196' ry='154' stroke-opacity='.12'/%3E%3Cellipse cx='352' cy='182' rx='244' ry='192' stroke-opacity='.08'/%3E%3Cellipse cx='336' cy='198' rx='296' ry='234' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -9rem top -4rem / 35rem auto;
}
/* Wider screens: keep the rings by the column's right edge, not the window's. */
@media (min-width: 40rem) { .hero { background-position: calc(50% + 10.5rem) -4rem; } }
.brand { margin: 0 0 .5rem; }
.logo { display: block; width: 3.25rem; height: 3.5rem; fill: var(--acc); }
h1 {
  margin: 0;
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
}
.lead { margin: .875rem 0 0; max-width: 28em; font-size: 1.1875rem; line-height: 1.5; }

/* Downloads: two equal buttons, stacked at every width (big targets, labels never wrap). */
.downloads { display: grid; gap: .75rem; margin: 1.5rem 0 1.25rem; }
.dl {
  position: relative;
  display: block;
  min-height: 4.75rem;
  padding: 1rem 3.25rem 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--acc);
  color: var(--on-acc);
  text-decoration: none;
}
.dl strong { display: block; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; }
.dl span { display: block; margin-top: .125rem; font-size: .9375rem; color: #134A30; }
.dl-icon {
  position: absolute; right: 1.125rem; top: 50%;
  width: 1.5rem; height: 1.5rem; margin-top: -.75rem;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.dl:hover { background: #5FE2A2; }
.dl:active { background: var(--acc-deep); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--acc-hi); outline-offset: 3px; border-radius: .25rem; }
.dl:focus-visible { border-radius: 1rem; }

.invite {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
}

h2 { margin: 2.5rem 0 .25rem; font-size: 1.375rem; line-height: 1.3; font-weight: 600; }
.req { margin: 0 0 1rem; color: var(--muted); font-size: .9375rem; }

/* Steps: real sequences, so numbered; the joining line echoes a path between contour marks. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; counter-increment: step; padding: 0 0 1.125rem 2.875rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.0625rem;
  width: 1.875rem; height: 1.875rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--acc-deep); border-radius: 50%;
  color: var(--acc); font-size: .9375rem; font-weight: 600; line-height: 1;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute; left: .875rem; top: 2.125rem; bottom: .375rem;
  width: 1.5px; background: var(--line);
}

a { color: var(--acc); }
.sums { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.sums summary { cursor: pointer; color: var(--text); }
.sums dl { margin: .5rem 0 0; }
.sums dt { margin-top: .75rem; color: var(--text); }
.sums dd { margin: .125rem 0 0; }
code {
  font: .875rem/1.45 ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  overflow-wrap: anywhere;
  color: var(--text);
}
footer { margin-top: 2.5rem; padding-bottom: 2rem; color: var(--muted); font-size: .875rem; }
footer p { margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }