/* happ-key.bond — theme "Molecular model".

   A chemistry textbook about one line of text. The line is a molecule, its
   parts are atoms, the separators are bonds. Cobalt and purple on laboratory
   white, captions set like a textbook ("Рис. 1", "Таблица 2", "§3");
   the dark scheme is fluorescent atoms on black.

   Type roles: Vollkorn SC — headings and captions (textbook small caps),
   Jost — reading text, Cascadia Mono — only for the line itself and its
   values. Scale 11/12/13/15/17/20/24/30/38/52, spacing 4/8/12/16/24/32/48/64/96,
   radii 0/2/4 (circles only where something is an atom). No shadows. */

@font-face{font-family:'VollkornSC';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/vsc-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'VollkornSC';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/vsc-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'VollkornSC';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/vsc-lat-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'VollkornSC';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/vsc-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JostS';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/jst-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JostS';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/jst-lat-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JostS';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/jst-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'CascMono';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/csm-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'CascMono';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/csm-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'CascMono';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/csm-lat-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'CascMono';font-weight:400 600;font-style:normal;font-display:swap;src:url(/fonts/csm-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- tokens --------------------------------------------------------------
   The standard names (--bg … --warn-s) also theme the checkout frame. */
:root {
  color-scheme: light dark;
  --bg:     #F4F5FA;   /* laboratory white */
  --card:   #FFFFFF;
  --ink:    #15152B;
  --ink2:   #41435C;
  --ink3:   #5F6180;
  --line:   #D8DAE6;
  --line2:  #B6B9CE;
  --acc:    #2A3FCB;   /* cobalt: actions, the "who" atoms */
  --acc-ink:#FFFFFF;
  --acc-s:  #E6E9FA;
  --warn:   #A8480F;
  --warn-s: #FBEDE2;
  --pur:    #8A2BA0;   /* purple: the "where" atoms, paragraph numbers */
  --pur-s:  #F3E5F6;
  --bad:    #B42318;
  --bad-s:  #FCE9E7;
  --ok:     #1F7A4D;
  --ok-s:   #E4F3EA;
  --acc-h:  #2233A8;   /* pressed cobalt */
  --bench:  #15152B;   /* dark bench under the offer and the footer */
  --bench-ink: #ECECFA;
  --bench-ink2: #B8BAD4;

  --f-disp: 'VollkornSC', 'Vollkorn', Georgia, 'Times New Roman', serif;
  --f-body: 'JostS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'CascMono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #0A0A12;
    --card:   #13131F;
    --ink:    #ECECFA;
    --ink2:   #B8BAD4;
    --ink3:   #8D90B0;
    --line:   #262739;
    --line2:  #3A3C56;
    --acc:    #8C9BFF;
    --acc-ink:#0A0A12;
    --acc-s:  #1B1F47;
    --warn:   #FFB072;
    --warn-s: #2B1B0F;
    --pur:    #E48CFF;
    --pur-s:  #2A1433;
    --bad:    #FF8A7A;
    --bad-s:  #2E1411;
    --ok:     #6EDC9F;
    --ok-s:   #0F2A1D;
    --acc-h:  #A9B4FF;
    --bench:  #06060B;
    --bench-ink: #ECECFA;
    --bench-ink2: #9FA2C4;
  }
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.62 var(--f-body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 2px; }
code {
  font: 400 .88em/1.4 var(--f-mono); background: var(--acc-s); color: var(--ink);
  padding: 1px 4px; border-radius: 2px; overflow-wrap: anywhere;
}
strong, b { font-weight: 600; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 16px; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 50; background: var(--card); padding: 8px 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1.2 var(--f-body); letter-spacing: .01em; text-decoration: none;
  padding: 12px 24px; border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.btn--go:hover { background: var(--acc-h); border-color: var(--acc-h); text-decoration: none; }
.btn--line { background: transparent; color: var(--acc); border-color: var(--acc); }
.btn--line:hover { background: var(--acc-s); text-decoration: none; }
.btn--sm { padding: 8px 12px; font-size: 13px; }
.chip {
  font: 400 13px/1 var(--f-body); color: var(--ink2); background: var(--card);
  border: 1px solid var(--ink3); border-radius: 2px; padding: 8px 12px; cursor: pointer;
}
.chip:hover { color: var(--acc); border-color: var(--acc); }
.chip.is-on { background: var(--acc-s); color: var(--acc); border-color: var(--acc); }
.chip:active { transform: translateY(1px); }

/* ---- header -------------------------------------------------------------- */
.hdr { background: var(--card); border-bottom: 1px solid var(--line); }
.hdr__in {
  max-width: 1180px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: grid; grid-template-columns: auto max-content 1fr; grid-template-areas: 'mark word rest' 'mark tag tag';
  column-gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.brand .mark { grid-area: mark; width: 44px; height: 44px; }
.brand__word { grid-area: word; font: 600 24px/1 var(--f-disp); letter-spacing: .06em; display: inline-flex; align-items: center; }
.brand__word b { font-weight: 600; }
.brand__sub { color: var(--acc); }
.brand__bond { display: inline-block; width: 16px; height: 3px; margin: 0 8px; background: var(--ink); font-size: 0; border-radius: 2px; }
.brand__tag { grid-area: tag; font: 400 11px/1.4 var(--f-body); letter-spacing: .14em; color: var(--ink3); margin-top: 4px; }
.mark__bd { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.mark__at circle { fill: var(--acc); }
.mark__tt circle { fill: var(--pur); }

.hdr__nav { display: flex; gap: 4px; margin-left: auto; }
.nav {
  font: 400 15px/1 var(--f-body); color: var(--ink2); text-decoration: none;
  padding: 12px 8px; border-bottom: 2px solid transparent;
}
.nav-n { font: 400 12px/1 var(--f-mono); color: var(--pur); margin-right: 4px; }
.nav:hover { color: var(--acc); text-decoration: none; }
.nav[aria-current="page"] { color: var(--ink); border-bottom-color: var(--acc); }
.hdr__go { flex: none; }
.burger { display: none; }
.mnav { display: none; }

@media (max-width: 1120px) {
  .hdr__nav { display: none; }
  .hdr__go { margin-left: auto; }
  .burger {
    display: inline-flex; font: 600 15px/1 var(--f-body); color: var(--ink); background: var(--card);
    border: 1px solid var(--ink3); border-radius: 2px; padding: 12px; cursor: pointer;
  }
  .mnav.is-open { display: block; border-top: 1px solid var(--line); padding: 8px 24px 16px; }
  .mnav__a { display: block; padding: 12px 0; font: 400 17px/1.2 var(--f-body); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .mnav__a-n { font: 400 13px/1 var(--f-mono); color: var(--pur); margin-right: 8px; }
  .mnav__a[aria-current="page"] { color: var(--acc); }
}
@media (max-width: 640px) {
  .hdr__in { padding: 8px 16px; gap: 12px; }
  .brand__tag { display: none; }
  .brand .mark { width: 36px; height: 36px; }
  .brand__word { font-size: 20px; }
  .brand__bond { width: 12px; margin: 0 4px; }
  .hdr__go { padding: 8px 12px; font-size: 13px; }
  .burger { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 480px) {
  .hdr__go { display: none; }
  .burger { margin-left: auto; }
}

/* ---- breadcrumbs --------------------------------------------------------- */
.crumbs { font: 400 13px/1.4 var(--f-body); color: var(--ink3); padding: 24px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs a { color: var(--ink2); }
.crumbs__sep { color: var(--line2); }

/* ---- home: hero ---------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 48px;
  align-items: start; padding: 48px 0 32px;
}
.hero__kicker, .art__kicker {
  font: 600 15px/1 var(--f-disp); letter-spacing: .12em; color: var(--pur); margin: 0 0 16px;
}
.hero__kicker span { font-family: var(--f-mono); font-weight: 400; margin-right: 8px; }
.hero__h1 { font: 600 clamp(34px, 5vw, 56px)/1.04 var(--f-disp); letter-spacing: .01em; color: var(--ink); margin-bottom: 24px; }
.hero__lead { font-size: 20px; line-height: 1.6; color: var(--ink2); max-width: 40rem; margin: 0; }
.hero__lead code { font-size: .84em; }

.deal { background: var(--card); border: 1px solid var(--line2); border-top: 2px solid var(--pur); border-radius: 2px; padding: 24px; }
.deal__cap { font: 600 15px/1.3 var(--f-disp); letter-spacing: .06em; color: var(--pur); margin-bottom: 12px; }
.deal__price { font: 400 17px/1.5 var(--f-body); color: var(--ink2); margin-bottom: 12px; }
.deal__price b { font: 600 30px/1 var(--f-disp); color: var(--ink); letter-spacing: .02em; }
.deal__price span { color: var(--line2); margin: 0 4px; }
.deal__txt { font-size: 15px; color: var(--ink2); margin-bottom: 12px; }
.deal__ind { font-size: 13px; line-height: 1.5; color: var(--ink3); border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 16px; }
.deal__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- home: the lab (signature) ------------------------------------------- */
.lab {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px 32px;
  grid-template-areas: 'head head' 'fig fig' 'in out';
  padding: 32px 0 48px; border-top: 1px solid var(--line);
}
.lab__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.lab__h { font: 600 30px/1.1 var(--f-disp); letter-spacing: .02em; }
.lab__sub { flex: 1 1 28rem; margin: 0; font-size: 15px; color: var(--ink2); }
.lab__sub code { font-size: .9em; }
.lab__fig { grid-area: fig; margin: 0; }
.lab__in { grid-area: in; }
.lab__out { grid-area: out; min-width: 0; }

.mol { background: var(--card); border: 1px solid var(--line2); border-radius: 4px; padding: 16px 16px 12px; }
.mol__stage { display: flex; justify-content: center; }
.mol__svg { display: none; width: 100%; height: auto; overflow: visible; }
.mol__svg--l { display: block; }
@media (max-width: 959px) { .mol__svg--l { display: none; } .mol__svg--m { display: block; max-width: 720px; } }
@media (max-width: 599px) { .mol__svg--m { display: none; } .mol__svg--s { display: block; max-width: 440px; } }
.mol__cap { font: 400 13px/1.5 var(--f-body); color: var(--ink2); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.mol__no, .fml__no, .tbl__no { font: 600 13px/1 var(--f-disp); letter-spacing: .06em; color: var(--pur); }
.mol__key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 12px/1.4 var(--f-body); color: var(--ink3); }
.mol__k::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; border: 2px solid transparent; }
.mol__k--core::before { background: var(--acc); border-color: var(--acc); }
.mol__k--loc::before { background: var(--pur); border-color: var(--pur); }
.mol__k--sec::before { background: var(--card); border-color: var(--acc); }
.mol__k--net::before { background: var(--card); border-color: var(--pur); }
.mol__k--tag::before { background: var(--line2); border-color: var(--ink3); width: 8px; height: 8px; }
.mol__k--bad::before { background: transparent; border: 2px dashed var(--bad); }

/* the molecule itself */
.bd { stroke: var(--ink3); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bd--main { stroke: var(--ink2); stroke-width: 2.6; }
.bd--vac { stroke: var(--bad); stroke-dasharray: 5 4; }
.bl rect { fill: var(--card); stroke: var(--line2); stroke-width: 1; }
.bl text { font: 400 11px var(--f-mono); fill: var(--ink2); text-anchor: middle; }
.bl--vac rect { stroke: var(--bad); }
.at { cursor: pointer; outline: none; }
.at__h { fill: transparent; stroke: none; }
.at:hover .at__h { fill: var(--acc-s); }
.at.is-sel .at__h { fill: var(--acc-s); stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 3 3; }
.at:focus-visible .at__h { stroke: var(--acc); stroke-width: 2.5; stroke-dasharray: none; }
.at__b { stroke-width: 2.5; }
.at--core .at__b { fill: var(--acc); stroke: var(--acc); }
.at--loc .at__b { fill: var(--pur); stroke: var(--pur); }
.at--sec .at__b { fill: var(--card); stroke: var(--acc); }
.at--net .at__b { fill: var(--card); stroke: var(--pur); }
.at--tag .at__b { fill: var(--line2); stroke: var(--ink3); stroke-width: 1.5; }
.at__s { font: 600 13px var(--f-body); text-anchor: middle; pointer-events: none; }
.at--core .at__s, .at--loc .at__s { fill: var(--acc-ink); }
.at--loc .at__s { fill: #FFFFFF; }
.at--sec .at__s { fill: var(--acc); }
.at--net .at__s { fill: var(--pur); }
.at--tag .at__s { fill: var(--ink); font-size: 12px; }
.at__l { font: 400 12px var(--f-body); fill: var(--ink2); text-anchor: middle; }
.at__v { font: 400 11px var(--f-mono); fill: var(--ink3); text-anchor: middle; }
.at.is-vac .at__b { fill: transparent; stroke: var(--bad); stroke-dasharray: 5 4; }
.at.is-vac.is-warn .at__b { stroke: var(--warn); }
.at.is-vac .at__s { fill: var(--bad); }
.at.is-vac.is-warn .at__s { fill: var(--warn); }
.at__m { stroke: var(--card); stroke-width: 2; }
.is-warn .at__m { fill: var(--warn); }
.is-bad .at__m { fill: var(--bad); }
.at__mt { font: 600 11px var(--f-body); fill: var(--card); text-anchor: middle; pointer-events: none; }
.at.is-bad .at__v { fill: var(--bad); }
.at.is-warn .at__v { fill: var(--warn); }
@media (prefers-color-scheme: dark) {
  /* fluorescent atoms: the only glow on the site, and only on atoms */
  .at--core .at__b { filter: drop-shadow(0 0 5px rgba(140, 155, 255, .55)); }
  .at--loc .at__b { filter: drop-shadow(0 0 5px rgba(228, 140, 255, .55)); }
  .at--sec .at__b { filter: drop-shadow(0 0 3px rgba(140, 155, 255, .45)); }
  .at--net .at__b { filter: drop-shadow(0 0 3px rgba(228, 140, 255, .45)); }
  .at--loc .at__s { fill: #0A0A12; }
  .bd--main { stroke: #6D7096; }
}

/* input side */
.lab__lbl { display: block; font: 600 17px/1.3 var(--f-disp); letter-spacing: .06em; margin-bottom: 8px; }
.lab__ta {
  display: block; width: 100%; min-height: 120px; resize: vertical;
  font: 400 15px/1.5 var(--f-mono); color: var(--ink); background: var(--card);
  border: 2px solid var(--ink3); border-radius: 2px; padding: 12px; overflow-wrap: anywhere;
}
.lab__ta:focus { border-color: var(--acc); outline: 2px solid var(--acc-s); outline-offset: 0; }
.lab__ta::placeholder { color: var(--ink3); }
.lab__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; }
.lab__try { font-size: 13px; color: var(--ink3); }
.lab__priv { font-size: 13px; line-height: 1.55; color: var(--ink3); border-left: 2px solid var(--line2); padding-left: 12px; margin: 0; }

/* output side */
.lab__verdict { font-size: 15px; line-height: 1.5; padding: 12px 16px; border-radius: 2px; background: var(--card); border: 1px solid var(--line2); margin-bottom: 12px; }
.lab__verdict.is-ok { border-color: var(--ok); background: var(--ok-s); }
.lab__verdict.is-warn { border-color: var(--warn); background: var(--warn-s); }
.lab__verdict.is-bad { border-color: var(--bad); background: var(--bad-s); }
.lab__verdict.is-info { border-color: var(--acc); background: var(--acc-s); }
.miss { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.miss__i { font-size: 15px; line-height: 1.5; padding: 8px 12px 8px 32px; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.miss__i::before { content: ''; position: absolute; left: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); }
.miss__i--warn::before { background: var(--warn); }
.miss__i--bad::before { background: var(--bad); }
.miss__i--info::before { background: var(--acc); }

/* element card: a periodic-table cell plus the explanation */
.lab__card { margin-bottom: 12px; }
.elc { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; background: var(--card); border: 1px solid var(--line2); border-radius: 4px; padding: 16px; }
.elc__tile {
  display: grid; grid-template-rows: auto 1fr auto auto; height: 128px; padding: 8px;
  border: 2px solid var(--acc); border-radius: 2px; background: var(--acc-s); color: var(--acc);
}
.elc--loc .elc__tile { border-color: var(--pur); background: var(--pur-s); color: var(--pur); }
.elc--net .elc__tile { border-color: var(--pur); background: var(--card); color: var(--pur); }
.elc--sec .elc__tile { background: var(--card); }
.elc--tag .elc__tile { border-color: var(--ink3); background: var(--bg); color: var(--ink2); }
.elc.is-vac .elc__tile { border-style: dashed; border-color: var(--bad); color: var(--bad); background: var(--bad-s); }
.elc__no { font: 400 12px/1 var(--f-mono); }
.elc__sym { font: 600 38px/1 var(--f-disp); align-self: center; justify-self: center; letter-spacing: .02em; }
.elc__nm { font: 400 11px/1.2 var(--f-mono); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elc__grp { font: 600 11px/1.2 var(--f-disp); letter-spacing: .08em; text-align: center; margin-top: 2px; }
.elc__ttl { font: 600 20px/1.2 var(--f-disp); letter-spacing: .02em; margin-bottom: 8px; }
.elc__val { font-size: 15px; color: var(--ink2); margin-bottom: 8px; }
.elc__val span { color: var(--ink3); }
.elc__about, .elc__usual { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
.elc__usual { color: var(--ink2); margin-bottom: 0; }
.elc__st { font-size: 15px; line-height: 1.5; padding: 8px 12px; border-radius: 2px; background: var(--bg); margin-bottom: 8px; }
.elc__st--ok { background: var(--ok-s); }
.elc__st--ok b { color: var(--ok); }
.elc__st--warn { background: var(--warn-s); }
.elc__st--warn b { color: var(--warn); }
.elc__st--bad { background: var(--bad-s); }
.elc__st--bad b { color: var(--bad); }
.elc__st--info { background: var(--acc-s); }
.elc__st--info b { color: var(--acc); }

.lab__all summary { cursor: pointer; font: 600 15px/1.4 var(--f-disp); letter-spacing: .06em; color: var(--ink2); padding: 8px 0; }
.mlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mlist__b {
  width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, auto) auto; align-items: center; gap: 12px;
  font: 400 15px/1.3 var(--f-body); color: var(--ink); text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 8px 4px; cursor: pointer;
}
.mlist__b:hover, .mlist__b[aria-pressed="true"] { background: var(--acc-s); }
.mlist__sym {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 var(--f-body); background: var(--acc); color: var(--acc-ink); border: 2px solid var(--acc);
}
.mlist__b--loc .mlist__sym { background: var(--pur); border-color: var(--pur); color: var(--card); }
.mlist__b--sec .mlist__sym { background: var(--card); color: var(--acc); }
.mlist__b--net .mlist__sym { background: var(--card); color: var(--pur); border-color: var(--pur); }
.mlist__b--tag .mlist__sym { background: var(--line2); color: var(--ink); border-color: var(--ink3); }
.mlist__b.is-vac .mlist__sym { background: transparent; border-style: dashed; border-color: var(--bad); color: var(--bad); }
.mlist__v { font-size: 12px; background: none; padding: 0; color: var(--ink2); max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlist__st { font-size: 12px; color: var(--ok); white-space: nowrap; }
.mlist__b.is-info .mlist__st { color: var(--acc); }
.mlist__b.is-warn .mlist__st { color: var(--warn); }
.mlist__b.is-bad .mlist__st { color: var(--bad); }

/* ---- article: a paragraph of the textbook -------------------------------- */
.sheet { display: grid; grid-template-columns: 200px minmax(0, 46rem); gap: 64px; padding: 16px 0 64px; }
.sheet--solo { grid-template-columns: minmax(0, 46rem); padding-top: 48px; }
.rail { position: relative; }
.rail > * { position: sticky; }
.rail__par { font: 600 52px/1 var(--f-disp); color: var(--pur); margin: 8px 0 4px; letter-spacing: -.01em; }
.rail__sign { font-size: .6em; vertical-align: .4em; margin-right: 2px; }
.rail__par--doc { font-size: 38px; }
.rail__nm { font: 600 20px/1.2 var(--f-disp); letter-spacing: .06em; color: var(--ink); margin-bottom: 24px; }
.rail__toc { position: sticky; top: 24px; border-top: 2px solid var(--ink); padding-top: 12px; }
.rail__cap { font: 600 13px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink3); margin-bottom: 8px; }
.rail__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.rail__toc li { counter-increment: toc; font-size: 13px; line-height: 1.4; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rail__toc a { color: var(--ink2); text-decoration: none; display: grid; grid-template-columns: 24px 1fr; }
.rail__toc a::before { content: counter(toc); font: 400 12px/1.6 var(--f-mono); color: var(--pur); }
.rail__toc a:hover { color: var(--acc); }

.art { min-width: 0; }
.art h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.08 var(--f-disp); letter-spacing: .01em; margin: 8px 0 12px; }
.art__meta { font: 400 13px/1.4 var(--f-body); color: var(--ink3); display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 24px; }
.art__lead { font-size: 20px; line-height: 1.55; color: var(--ink); margin-bottom: 24px; }
.art h2 { font: 600 30px/1.15 var(--f-disp); letter-spacing: .02em; margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line2); }
.art h3 { font: 600 20px/1.3 var(--f-body); margin: 32px 0 12px; }
.art p { margin: 0 0 16px; }
.ul, .ol { margin: 0 0 24px; padding: 0; list-style: none; }
.ul > li { position: relative; padding-left: 32px; margin-bottom: 8px; }
.ul > li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--acc); background: var(--card); }
.ol { counter-reset: ol; }
.ol > li { counter-increment: ol; position: relative; padding-left: 32px; margin-bottom: 12px; }
.ol > li::before { content: counter(ol); position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font: 600 13px/24px var(--f-mono); text-align: center; }
.pre {
  font: 400 13px/1.6 var(--f-mono); color: var(--ink); background: var(--card);
  border: 1px solid var(--line2); border-radius: 2px; padding: 12px 16px; margin: 0 0 24px;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all;
}

/* steps: numbered atoms on one vertical bond */
.steps { list-style: none; margin: 0 0 32px; padding: 0; position: relative; }
.steps::before { content: ''; position: absolute; left: 16px; top: 16px; bottom: 16px; width: 4px; background: var(--line2); border-radius: 2px; }
.step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.step__n { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; font: 600 15px/1 var(--f-mono); box-shadow: 0 0 0 4px var(--bg); }
.step__ttl { font: 600 17px/1.3 var(--f-body); margin: 8px 0 8px; }
.step__b p { margin-bottom: 8px; }
.step__b ul { margin: 0 0 8px; padding-left: 24px; }

/* tables: textbook rules, no grid */
.tbl { margin: 8px 0 32px; }
.tbl__cap { font-size: 13px; color: var(--ink2); margin-bottom: 8px; }
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.tw th, .tw td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; }
.tw thead th { font: 600 13px/1.3 var(--f-disp); letter-spacing: .06em; color: var(--ink2); border-bottom: 1px solid var(--ink); padding-top: 12px; }
.tw tbody tr + tr > * { border-top: 1px solid var(--line); }
.tw tbody th { font-weight: 600; color: var(--ink); }
.tw td:last-child, .tw th:last-child { padding-right: 0; }

/* notes: the caption sits on the frame like a legend */
.note { position: relative; border: 1px solid var(--line2); border-radius: 2px; padding: 24px 24px 8px; margin: 32px 0; background: var(--card); }
.note__cap { position: absolute; top: -12px; left: 16px; margin: 0; padding: 0 8px; background: var(--bg); font: 600 13px/24px var(--f-disp); letter-spacing: .1em; color: var(--ink2); }
.note--rule { border: 2px solid var(--acc); }
.note--rule .note__cap { color: var(--acc); }
.note--warn { border: 2px solid var(--warn); }
.note--warn .note__cap { color: var(--warn); }
.note__ttl { font-weight: 600; margin-bottom: 8px; }
.note p { font-size: 15px; }
.note ul { margin: 0 0 12px; padding-left: 24px; }

/* formula strip: the example line split into its parts */
.fml { margin: 16px 0 32px; }
.fml__line { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 12px; padding: 16px; background: var(--card); border: 1px solid var(--line2); border-radius: 4px; }
.fml__a { display: inline-flex; flex-direction: column; min-width: 0; max-width: 100%; opacity: .42; }
.fml__a.is-on { opacity: 1; }
.fml__t { font: 400 13px/1.5 var(--f-mono); padding: 1px 3px; border-bottom: 3px solid var(--line2); overflow-wrap: anywhere; word-break: break-all; }
.fml__a--core.is-on .fml__t { border-color: var(--acc); background: var(--acc-s); }
.fml__a--loc.is-on .fml__t { border-color: var(--pur); background: var(--pur-s); }
.fml__a--sec.is-on .fml__t { border-bottom-style: double; border-color: var(--acc); }
.fml__a--net.is-on .fml__t { border-bottom-style: double; border-color: var(--pur); }
.fml__a--tag.is-on .fml__t { border-color: var(--ink3); }
.fml__k { font: 400 11px/1.3 var(--f-body); color: var(--ink3); padding: 3px 3px 0; white-space: nowrap; }
.fml__sep { font: 600 13px/1.5 var(--f-mono); color: var(--ink3); padding: 1px 2px; align-self: flex-start; }
.fml__cap { font-size: 13px; line-height: 1.5; color: var(--ink2); margin-top: 8px; }

/* control experiment */
.exp { border: 2px solid var(--acc); background: var(--acc-s); border-radius: 4px; padding: 24px; margin: 48px 0; }
.exp__cap { font: 600 13px/1 var(--f-disp); letter-spacing: .12em; color: var(--acc); margin-bottom: 12px; }
.exp__ttl { font: 600 24px/1.2 var(--f-disp); letter-spacing: .02em; margin-bottom: 12px; }
.exp__txt { font-size: 17px; }
.exp__steps { margin: 0 0 24px; padding-left: 24px; font-size: 17px; }
.exp__steps li { margin-bottom: 4px; }
.exp__steps li::marker { font-family: var(--f-mono); color: var(--acc); }
.exp__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.exp__fine { font-size: 13px; color: var(--ink2); }

/* offer: the dark bench at the end of a paragraph */
.offer { background: var(--bench); color: var(--bench-ink); border-radius: 4px; padding: 32px; margin: 48px 0 32px; }
.offer__cap { font: 600 13px/1 var(--f-disp); letter-spacing: .12em; color: #C9A4FF; margin-bottom: 12px; }
.offer__ttl { font: 600 30px/1.15 var(--f-disp); letter-spacing: .02em; margin-bottom: 12px; }
.offer__txt { color: var(--bench-ink2); font-size: 17px; }
.offer__pts { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.offer__pts li::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #9AA6FF; margin-right: 8px; vertical-align: 0; }
.offer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.offer .btn--go { background: #FFFFFF; color: #1E2DA0; border-color: #FFFFFF; }
.offer .btn--go:hover { background: #E6E9FA; border-color: #E6E9FA; }
.offer__price { font: 600 20px/1 var(--f-disp); letter-spacing: .04em; }
.offer__ind { font-size: 13px; color: var(--bench-ink2); margin: 24px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
@media (prefers-color-scheme: dark) {
  .offer { border: 1px solid var(--line2); }
}

/* spark: price strip under the lead */
.spark { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 0; margin: 0 0 32px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.spark__txt { flex: 1 1 22rem; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }

/* questions */
.faq { margin: 48px 0 32px; border-top: 2px solid var(--ink); padding-top: 16px; }
.faq__cap { font: 600 15px/1 var(--f-disp); letter-spacing: .12em; color: var(--pur); margin-bottom: 16px; }
.faq__i { padding: 16px 0; border-bottom: 1px solid var(--line); }
.faq__q { font: 600 17px/1.4 var(--f-body); margin-bottom: 8px; position: relative; padding-left: 32px; }
.faq__q::before { content: '?'; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pur); color: var(--pur); font: 600 13px/20px var(--f-mono); text-align: center; }
.faq__i p { margin: 0 0 8px 32px; }

.also { margin: 32px 0 24px; }
.also__cap { font: 600 15px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink3); margin-bottom: 12px; }
.also__list { list-style: none; margin: 0; padding: 0; }
.also__list li { border-top: 1px solid var(--line); }
.also__list a { display: block; padding: 12px 0; text-decoration: none; font-size: 17px; }
.also__list a::after { content: ' →'; }
.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.helpful__btns { display: flex; gap: 8px; }
.helpful button { font: 600 15px/1 var(--f-body); color: var(--ink); background: var(--card); border: 1px solid var(--ink3); border-radius: 2px; padding: 8px 16px; cursor: pointer; }
.helpful button:hover { border-color: var(--acc); color: var(--acc); }
.helpful[data-done] button { opacity: .5; }
.helpful__thanks { font-size: 15px; color: var(--ok); }

/* home body */
.art--home { max-width: 46rem; padding-bottom: 32px; }
.art--home > h2:first-child, .art--home > .fml:first-child { margin-top: 16px; }
.rules { margin: 48px 0 0; }
.rules h2 { margin-bottom: 24px; }
.rules__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rules__i { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; background: var(--card); border: 1px solid var(--line2); border-radius: 4px; padding: 16px; }
.rules__el { grid-row: 1 / 3; width: 64px; height: 64px; border: 2px solid var(--acc); border-radius: 2px; display: grid; place-items: center; font: 600 24px/1 var(--f-disp); color: var(--acc); position: relative; padding-top: 8px; }
.rules__el i { position: absolute; top: 4px; left: 4px; font: 400 11px/1 var(--f-mono); font-style: normal; }
.rules__i:nth-child(even) .rules__el { border-color: var(--pur); color: var(--pur); }
.rules__i b { font: 600 17px/1.3 var(--f-body); margin-bottom: 4px; }
.rules__i span:last-child { font-size: 15px; line-height: 1.5; color: var(--ink2); }

/* the five paragraphs */
.paras { list-style: none; margin: 0 0 32px; padding: 0; border-top: 2px solid var(--ink); }
.paras a { display: grid; grid-template-columns: 64px minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.paras a:hover .paras__t { color: var(--acc); }
.paras__n { font: 600 30px/1 var(--f-disp); color: var(--pur); }
.paras__t { font: 600 20px/1.2 var(--f-disp); letter-spacing: .04em; }
.paras__s { font-size: 15px; color: var(--ink2); }
.paras__i.is-here .paras__t::after { content: ' — вы здесь'; font: 400 13px var(--f-body); color: var(--ink3); letter-spacing: 0; }

.rows { list-style: none; margin: 0 0 24px; padding: 0; }
.row { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.row__idx { font: 400 12px/1.6 var(--f-mono); color: var(--pur); }
.row__t { font-weight: 600; }
.row__s { grid-column: 2; font-size: 15px; color: var(--ink2); }

/* ---- the checkout page --------------------------------------------------- */
.pay { padding-bottom: 64px; }
.pay__head { max-width: 46rem; padding: 16px 0 24px; }
.pay__head h1 { font: 600 clamp(30px, 4.4vw, 48px)/1.06 var(--f-disp); letter-spacing: .01em; margin: 0 0 16px; }
.pay__lead { font-size: 20px; line-height: 1.55; margin-bottom: 12px; }
.pay__ind { font-size: 15px; color: var(--ink3); margin: 0; }
.pay__panel { background: var(--card); border: 1px solid var(--line2); border-top: 2px solid var(--acc); border-radius: 2px; max-width: 46rem; scroll-margin-top: 16px; }
.pay__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.pay__cap { font: 600 17px/1.2 var(--f-disp); letter-spacing: .06em; margin: 0; }
.pay__tag { font: 400 13px/1.3 var(--f-body); color: var(--pur); margin: 0; }
.pay__box { min-height: 420px; padding: 4px; }
.pay__fb { font-size: 15px; color: var(--ink2); padding: 24px; margin: 0; }
.pay__pts { list-style: none; margin: 24px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 72rem; }
.pay__pts li { border-top: 2px solid var(--ink); padding-top: 12px; }
.pay__pts b { display: block; font: 600 17px/1.2 var(--f-disp); letter-spacing: .04em; margin-bottom: 4px; }
.pay__pts span { font-size: 15px; color: var(--ink2); }
.pay__cols { display: grid; grid-template-columns: minmax(0, 46rem) minmax(240px, 1fr); gap: 64px; align-items: start; }
.pay__art { padding-top: 8px; }
.pay__side { position: sticky; top: 24px; margin-top: 48px; }
.pay__card { background: var(--card); border: 1px solid var(--line2); border-radius: 4px; padding: 24px; }
.pay__card-cap { font: 600 15px/1 var(--f-disp); letter-spacing: .12em; color: var(--pur); margin-bottom: 12px; }
.pay__dl { margin: 0 0 16px; }
.pay__dl div { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pay__dl dt { font-weight: 600; }
.pay__dl dd { margin: 0; font: 600 20px/1.2 var(--f-disp); }
.pay__dl small { grid-column: 1 / -1; font-size: 13px; color: var(--ink3); }
.pay__card .btn { width: 100%; }
.pay__back { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; border-top: 2px solid var(--ink); padding-top: 24px; max-width: 46rem; }
.pay__back p { margin: 0; flex: 1 1 20rem; }

/* ---- footer -------------------------------------------------------------- */
.ftr { background: var(--bench); color: var(--bench-ink2); margin-top: 32px; }
.ftr__in { max-width: 1180px; margin: 0 auto; padding: 48px 24px 32px; }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 32px; }
.ftr__cap { font: 600 15px/1 var(--f-disp); letter-spacing: .12em; color: #C9A4FF; margin-bottom: 12px; }
.ftr__list { list-style: none; margin: 0; padding: 0; }
.ftr__list li { padding: 4px 0; }
.ftr a { color: var(--bench-ink); }
.ftr__mail { margin-bottom: 8px; }
.ftr__note { font-size: 13px; }
.ftr__disc { font-size: 13px; line-height: 1.6; max-width: 56rem; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 24px; }
.ftr__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; margin: 0; color: #8D90B0; }

/* ---- phone sticky offer --------------------------------------------------- */
.gobar { display: none; }
@media (max-width: 860px) {
  .gobar.is-on { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 2px solid var(--acc); }
  .gobar__in { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
  .gobar__txt { flex: 1; display: grid; font-size: 13px; line-height: 1.3; color: var(--ink2); }
  .gobar__txt b { font-size: 15px; color: var(--ink); }
  .gobar__x { font: 400 24px/1 var(--f-body); background: none; border: 0; color: var(--ink3); padding: 4px 8px; cursor: pointer; }
  body.has-gobar { padding-bottom: 64px; }
}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1040px) {
  .sheet { grid-template-columns: 160px minmax(0, 1fr); gap: 32px; }
  .pay__cols { grid-template-columns: minmax(0, 1fr); }
  .pay__side { position: static; margin-top: 0; max-width: 46rem; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'in' 'fig' 'out'; }
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 16px; }
  .rail__par { font-size: 38px; margin: 0; }
  .rail__nm { margin: 0; }
  .rail__toc { display: none; }
  .pay__pts { grid-template-columns: 1fr 1fr; }
  .rules__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero__lead, .art__lead, .pay__lead { font-size: 17px; }
  .art h2 { font-size: 24px; margin-top: 32px; }
  .lab__h { font-size: 24px; }
  .mol { padding: 12px 8px 8px; }
  .elc { grid-template-columns: minmax(0, 1fr); }
  .elc__tile { width: 104px; height: 128px; }
  .mlist__b { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .mlist__v { display: none; }
  .exp, .offer { padding: 24px 16px; }
  .offer__ttl { font-size: 24px; }
  .paras a { grid-template-columns: 48px minmax(0, 1fr); }
  .paras__s { grid-column: 2; }
  .paras__n { font-size: 24px; }
  .pay__pts { grid-template-columns: minmax(0, 1fr); }
  .ftr__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tw table { font-size: 15px; }
  .fml__line { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}