/* Self-hosted Google Fonts (OFL), cyrillic + latin subsets. Geist, Onest and JetBrains Mono are
   variable fonts: one file per subset covers every weight (ADR-0200, performance addendum). */
@font-face{font-family:'Caveat';font-weight:700;font-display:swap;src:url(/site-assets/fonts/caveat-cyrillic-700.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Caveat';font-weight:700;font-display:swap;src:url(/site-assets/fonts/caveat-latin-700.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:'Dela Gothic One';font-weight:400;font-display:swap;src:url(/site-assets/fonts/dela-gothic-one-cyrillic-400.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Dela Gothic One';font-weight:400;font-display:swap;src:url(/site-assets/fonts/dela-gothic-one-latin-400.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:'Geist';font-weight:400 700;font-display:swap;src:url(/site-assets/fonts/geist-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Geist';font-weight:400 700;font-display:swap;src:url(/site-assets/fonts/geist-latin.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+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-weight:400 500;font-display:swap;src:url(/site-assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-weight:400 500;font-display:swap;src:url(/site-assets/fonts/jetbrains-mono-latin.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+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-weight:400 700;font-display:swap;src:url(/site-assets/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2122, U+2116}
@font-face{font-family:'Onest';font-weight:400 700;font-display:swap;src:url(/site-assets/fonts/onest-latin.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:'Permanent Marker';font-weight:400;font-display:swap;src:url(/site-assets/fonts/permanent-marker-latin-400.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}
html{scroll-behavior:smooth}
body{margin:0;background:#0d0c0b url(/site-assets/img/texture-grain.webp) 0 0/700px repeat;color:#f2efe8;font:400 17px/1.55 Onest,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
*{box-sizing:border-box}
a{color:#f2efe8}a:hover{color:#ff4a4f}
::selection{background:#e8262c;color:#fff}
summary::-webkit-details-marker{display:none}
@keyframes dmspin{to{transform:rotate(360deg)}}@keyframes dmpulse{0%,100%{opacity:1}50%{opacity:.3}}@keyframes dmslide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* in-page links (#switch, #pricing…): the sticky 72px header would cover a section's top edge, so the window stops
   72px + --dm-gap above it. A section that opens with its own top padding names it --pt and pulls back by that much,
   so every heading lands the same --dm-gap below the header however its section is padded */
/* the pinned track lands flush under the header (its panel is the window's height below it); unpinned it opens
   with #howPin's own padding-block */
#scenarios{scroll-margin-top:calc(-1 * var(--dm-gap))}
@media (max-width:900px){#scenarios{scroll-margin-top:-72px}}
@media (max-width:720px){#scenarios{scroll-margin-top:-48px}}
/* hover moves these elements; an invisible margin keeps the cursor inside them, otherwise a cursor at the edge
   un-hovers the moved element, it snaps back, hovers again and the cursor flickers */
:is(.dmf01,.dmh01,.dmh02,.dmh06,.dmh07,.dmh08,.dmh09,.dmh10,.dmh11,.dmh12,.dmh13,.dmh14,.dmh15,.dmh23,.dmh25,.dmp-card,.dmp-hot,.dmp-red){position:relative}
:is(.dmf01,.dmh01,.dmh02,.dmh06,.dmh07,.dmh08,.dmh09,.dmh10,.dmh11,.dmh12,.dmh13,.dmh14,.dmh15,.dmh23,.dmh25,.dmp-card,.dmp-hot,.dmp-red)::after{content:"";position:absolute;inset:-8px;z-index:-1}
.dm-login:hover{color:#e8262c !important;text-decoration:underline !important;text-underline-offset:4px}
.dmh00:hover{color:#f2efe8 !important}
.dmh01:hover{transform:translate(-2px,-2px) !important;box-shadow:5px 5px 0 #e8262c !important;color:#0d0c0b !important}
.dmh02:hover{transform:translate(-2px,-2px) !important;box-shadow:7px 7px 0 #f2efe8 !important;color:#fff !important}
.dmh03:active{transform:translate(3px,3px) !important;box-shadow:1px 1px 0 #f2efe8 !important}
.dmh04:hover{border-color:#f2efe8 !important;transform:rotate(-1deg) !important}
.dmh05:hover{background:#2a2826 !important}
.dmh06:hover{transform:rotate(2deg) scale(1.04) !important}
.dmh07:hover{transform:rotate(-2deg) scale(1.04) !important}
.dmh08:hover{transform:rotate(3deg) scale(1.04) !important}
.dmh09:hover{transform:rotate(-1deg) scale(1.04) !important}
.dmh10:hover{transform:rotate(0deg) translateY(-4px) !important}
.dmh11:hover{transform:rotate(-1deg) translateY(-4px) !important}
.dmh12:hover{transform:rotate(.5deg) translateY(-4px) !important}
.dmh13:hover{transform:rotate(-.8deg) translateY(-4px) !important}
.dmh14:hover{transform:rotate(1deg) translateY(-4px) !important}
.dmh15:hover{transform:rotate(-.4deg) translateY(-4px) !important}
.dmh16:hover{background:#151413 !important}
.dmh17:hover{transform:translateY(-4px) rotate(-.5deg) !important;border-color:#77726a !important}
.dmh18:hover{border-color:#f2efe8 !important;color:#f2efe8 !important}
.dmh19:hover{transform:rotate(0deg) translate(-3px,-3px) !important;box-shadow:11px 11px 0 #e8262c !important}
.dmh20:hover{background:#e8262c !important;color:#fff !important}
.dmh21:hover{transform:translateY(-4px) rotate(.5deg) !important;border-color:#77726a !important}
.dmh22:hover{color:#ff4a4f !important}
.dmh23:hover{transform:translate(-2px,-2px) !important;box-shadow:7px 7px 0 #141210 !important;color:#fff !important}
.dmh24:active{transform:translate(3px,3px) !important;box-shadow:1px 1px 0 #141210 !important}
.dmh25:hover{transform:rotate(-1deg) !important;color:#141210 !important}
[hidden]{display:none!important}
img{height:auto}
a[href],button,summary,label[for]{cursor:pointer}
/* pricing cards (ADR-0067 catalog) */
.dmp-card:hover{transform:translateY(-4px) rotate(-.5deg) !important;border-color:#77726a !important}
.dmp-hot:hover{transform:rotate(0deg) translate(-3px,-3px) !important;box-shadow:11px 11px 0 #e8262c !important}
.dmp-red:hover{transform:translate(-2px,-2px) !important;box-shadow:6px 6px 0 #f2efe8 !important;color:#fff !important}
.dmp-line:hover{border-color:#f2efe8 !important;color:#f2efe8 !important}
.dmp-free:hover{border-color:#e8262c !important}
.dmp-dark:hover{background:#e8262c !important;color:#fff !important}
/* DM-211: the cards of a row share its rows (subgrid), so picture, name, price, blurb, list and button stand at
   one height across the row whatever the texts; the price scales with its card so «107 990 ₽» never leaves it,
   and the term line sits under the price instead of wrapping beside it */
@supports (grid-template-rows:subgrid){
  .dmp-grid>div{display:grid!important;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
  .dmp-grid>div>p{min-height:0!important}
  .dmp-grid>div>ul{align-content:start}
}
/* the price block, not the card, is the size container: containment on the card would switch its subgrid off */
.dmp-price{container-type:inline-size}
.dmp-price>span{font-size:clamp(24px,14cqi,34px)}
.dmp-price small{display:block;margin-top:6px;line-height:1.4!important}
.dmp-price [data-terms-note]{white-space:nowrap}
/* the highlighted card has no border of its own; a clear one keeps its rows on the same pixels as its neighbours */
.dmp-grid>.dmp-hot{border:1.5px solid transparent}
/* four plans go 4 / 2 / 1 across: auto-fit made 3 + 1 on a tablet, with the last plan alone on its own row */
@media (min-width:560px){.dmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:1140px){.dmp-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
/* prepaid terms switcher (DM-159; on sale since DM-178) */
.dmp-terms{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}
.dmp-terms[hidden]{display:none}
/* on a phone the four terms wrapped 2 + 2 at ragged widths: an even 2 × 2 grid instead (DM-211) */
@media (max-width:559px){.dmp-terms:not([hidden]){display:grid;grid-template-columns:1fr 1fr}}
.dmp-terms button{height:40px;padding:0 16px;border:1.5px solid #3a3733;border-radius:6px;background:#0d0c0b;color:#aaa59c;font:500 14px Onest,sans-serif;transition:border-color .15s,color .15s}
.dmp-terms button:hover{border-color:#77726a;color:#f2efe8}
.dmp-terms button[aria-checked="true"]{border-color:#e8262c;color:#f2efe8;background:rgba(232,38,44,.09)}
/* "Вы управляете, агент делает": preview tiles straighten up on hover */
.dmf00:hover{background:#141312 !important}
.dmx-cell{outline:1px solid #2b2926}
.dmx-folded .dmx-more{display:none!important}
/* the first-screen headline: its longest word must fit a 320 px phone */
@media (max-width:380px){h1{font-size:30px!important}}
.dmf01:hover{transform:rotate(0deg) scale(1.03) !important}
/* decorative stickers hang over card edges; never let them widen the page */
html,body{overflow-x:clip}
/* phone (ADR-0200 addendum «мобильная версия»): the demo window shows the chat only, "how it works" fits one
   screen, the comparison table turns into cards */
@media (max-width:720px){
  .dmd-mh{display:none!important}
  /* the split button must fit the final card on a phone: the picker keeps only its chevron, the menu says the rest */
  .dmdl{max-width:100%}
  .dmdl-main{padding:0 16px 0 18px!important;font-size:16px!important}
  .dmdl-pick{padding:0 14px!important}
  .dmdl-pick [data-dl-pick]{display:none}
  .dmdl-menu{min-width:240px}
  .dmd-label{position:static!important;margin:0 0 14px;transform:rotate(-3deg)!important}
  .dmd-path{flex:1;overflow:hidden}
  .dmd-chat{min-height:0!important;height:470px}
  .dmd-feed,.dmw-feed{-webkit-mask-image:linear-gradient(transparent,#000 48px);mask-image:linear-gradient(transparent,#000 48px)}
  .dmd-feed{justify-content:flex-end;overflow:hidden;padding:18px 16px 8px!important}
  #scenarios #howPin{padding-block:48px!important}
  #howBox{gap:20px!important}
  #howBox>div:first-child{gap:4px 18px!important}
  #howImg{width:72px!important;height:72px!important;margin-bottom:12px!important}
  #howT1,#howT2{font-size:26px}
  #howL{margin-top:12px!important;font-size:16px!important;min-height:4.65em}
  .dmw-box{min-height:0!important;height:236px}
  .dmw-feed{justify-content:flex-end;overflow:hidden;padding:16px 14px 8px!important}
  .dmc-wrap{overflow:visible!important;border:0!important}
  .dmc-table{min-width:0!important}
  .dmc-table thead{display:none}
  .dmc-table,.dmc-table tbody,.dmc-table tr,.dmc-table td{display:block}
  .dmc-table{font-size:14px!important}
  .dmc-table tr{border:1px solid #2b2926;border-radius:10px;overflow:hidden;margin-bottom:10px}
  .dmc-table td{border-bottom:0!important;padding:5px 14px!important;width:auto!important;line-height:1.35}
  .dmc-table td:first-child{padding:12px 14px 6px!important;font-weight:600;font-size:15px;color:#f2efe8!important}
  .dmc-table td[data-label]{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:baseline}
  .dmc-table td[data-label]::before{content:attr(data-label);font:500 10px/1.3 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#77726a}
  .dmc-table td[data-label="DevMachine"]{padding:7px 14px 10px!important;margin-top:4px}
  .dmc-table td[data-label="DevMachine"]::before{color:#ff4a4f}
  .dmr-sticker{top:-84px!important;width:80px!important}
  img[src$="final-cta.webp"]{flex:0 1 220px!important;width:220px!important}
  /* stickers and the badge hang over card edges; on a phone the card edge is the screen edge, so pull them in */
  #pricing span[style*="right:-12px"]{right:-2px!important}
  /* the tape on the final card's corner sat over the first letters */
  .dmf-h{margin-top:22px!important}
}
.dmw-list{display:none;list-style:none;margin:0;padding:0}
.dmw-list li{display:grid;grid-template-columns:28px 52px 1fr;gap:4px 12px;align-items:start;padding:14px 12px 14px 0;border-left:2px solid #232120;padding-left:14px;cursor:pointer;transition:border-color .3s,background .3s}
.dmw-list li[aria-current="step"]{border-left-color:#e8262c;background:linear-gradient(90deg,rgba(232,38,44,.08),transparent 70%)}
.dmw-list .n{font:500 14px/1.6 'JetBrains Mono',monospace;color:#55524d;transition:color .3s}
.dmw-list li[aria-current="step"] .n{color:#ff4a4f}
.dmw-list img{width:52px;height:52px;object-fit:contain}
.dmw-list .t{margin:0;font:400 19px/1.15 'Dela Gothic One',Onest,sans-serif}
.dmw-list .t span{color:#ff4a4f}
.dmw-list p{grid-column:3;margin:6px 0 0;font-size:15px;line-height:1.45;color:#aaa59c}
/* phone and tablet (no pinned stage): all the steps as a list you can read by scrolling; the window below plays
   the highlighted one, tap a step to show it */
@media (max-width:900px){#howBox>div:first-child,.dmw-text{display:none!important}
  .dmw-list{display:grid!important;gap:6px;flex:1 1 100%;order:2;padding-bottom:28vh}
  /* the window sticks under the site header and plays the step that scrolls past its lower edge */
  .dmw-wincol{order:1;flex:1 1 100%!important;position:sticky;top:72px;z-index:3;padding:8px 0 14px;background:#0a0908;box-shadow:0 18px 24px -12px #0a0908}
  #howBox{gap:8px!important}}
/* download split button: the left half downloads the build for the visitor's OS, the right half picks another */
.dmdl{z-index:30}
/* the first screen's text column is a stacking context of its own, so .dmdl's z-index counts only inside it: the
   column itself sits above the «Смотри, как он работает» label (z-index 4) that the open menu hangs over */
.dm-hero-text{z-index:5}
/* two halves, two different hovers: the download darkens, the picker turns black like an open menu */
.dmdl-main:hover{background:#b8161c!important}
.dmdl-main:active{background:#9e1218!important}
.dmdl-pick:hover,.dmdl-pick[aria-expanded="true"]{background:#0d0c0b!important;color:#f2efe8!important}
.dmdl-menu{position:absolute;left:-2px;top:calc(100% + 12px);z-index:20;min-width:100%;padding:6px;background:#151413;border:2px solid #f2efe8;border-radius:6px;box-shadow:5px 5px 0 #e8262c;display:grid}
.dmdl-menu[hidden]{display:none}
.dmdl-menu button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:11px 12px;border-radius:4px;font:600 15px/1 Onest,sans-serif;color:#f2efe8}
.dmdl-menu button span{font:400 12px/1 'JetBrains Mono',monospace;color:#8a857c}
.dmdl-menu button:hover,.dmdl-menu button:focus-visible{background:#2a2826}
.dmdl-menu button[aria-selected="true"]{background:#e8262c}
.dmdl-menu button[aria-selected="true"] span{color:#fff}
/* phone: 44px tap targets with a gap between them; the desktop menu keeps its compact rows */
@media (max-width:720px){.dmdl-menu{gap:4px}.dmdl-menu button{min-height:44px;box-sizing:border-box;align-items:center;padding:0 12px}}
/* phone: footer links get a 44px tap height from an invisible box around each one (the visible text and the
   «Для компаний» underline stay as they are); the row gap grows so neighbouring rows' boxes do not overlap */
@media (max-width:720px){.dm-foot-nav{gap:22px 26px!important}.dm-foot-nav a{position:relative}.dm-foot-nav a::after{content:"";position:absolute;inset:-11px -6px}}
/* phone → computer hand-off: the desktop app cannot be installed on a phone, so the hint under the download button
   offers to send the link to a computer. It is shown by CSS from the first paint (no layout shift when the script
   runs late); the script also shows it (.on) for phones the media query misses, e.g. a tablet in landscape */
.dm-dl-hint{display:none;flex-direction:column;align-items:flex-start;gap:10px}
.dm-dl-hint.on{display:flex}
.dm-dl-send{display:none}
@media (max-width:720px) and (pointer:coarse){.dm-dl-hint{display:flex}
  .dm-dl-send{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:2px solid #4a4743;border-radius:6px;color:#f2efe8;font:600 15px/1 Onest,sans-serif;transition:border-color .15s}
  .dm-dl-send:active,.dm-dl-send:focus-visible{border-color:#f2efe8}}
/* phone: the header keeps the logo and the main button only */
/* phone: the header keeps the logo, «Блог» and the main button; the hidden nav is taken out of the flow (its gaps
   alone would push the button past the edge) and the logo and button are a size smaller */
@media (max-width:720px){.dm-nav{display:none!important}header>div{gap:14px!important}.dm-hdr-r{gap:2px!important;margin-left:auto}header img{height:28px!important}.dmh01{padding:0 12px!important;font-size:14px!important;margin-left:4px}
  /* «Блог» and «Войти» stay on a phone (a returning user must be able to sign in), each a 44px tap target */
  .dm-blog-m,.dm-login{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;font-size:14px!important}}
/* narrow phones (360–390px): the main button a size smaller so logo, «Блог», «Войти» and the button fit one row */
@media (max-width:389px){.dmh01{padding:0 10px!important;font-size:13px!important}}
/* the narrowest phones (320px): «Блог» steps out of the header (it stays in the footer), «Войти» never does */
@media (max-width:359px){.dm-blog-m{display:none!important}}
/* The nav row is one line clipped by overflow: on narrower screens the least needed items step out, so «Блог»
   (its last item) is always seen. Breakpoints are measured from this page's item widths (DM-174). */
@media (max-width:1135px){.dm-hide-1{display:none!important}}
@media (max-width:1045px){.dm-hide-2{display:none!important}}
@media (max-width:949px){.dm-hide-3{display:none!important}}
@media (max-width:839px){.dm-hide-4{display:none!important}}
/* «Блог» lives in the nav row (DM-174); on a phone that row is hidden, so the right group shows its own copy */
@media (min-width:721px){.dm-blog-m{display:none}}
.dm-blog:hover{color:#e8262c !important;text-decoration:underline !important;text-underline-offset:4px}
/* phone/tablet: the "how it works" stage is taller than the screen, so it is not pinned; app.js steps it on a timer */
@media (max-width:900px){#howTrack{height:auto!important}#howPin{position:static!important;height:auto!important;padding-block:72px;overflow:visible!important}
  #howBox>div:first-child{flex:1 1 100%!important;flex-direction:row!important;gap:4px 22px!important;border-left:0!important;border-bottom:2px solid #232120}
  #howBox>div:first-child button{padding:0 0 10px!important}
  #howRail{display:none}
  #howL+p{display:none}}
/* Contacts (DM-678): the footer row, the FAQ answer «Как с вами связаться?», the footer columns and the 404.
   Their links carry inline colours, so the hovers need !important to win over them. */
#contacts a,[data-contacts] a,footer nav a{transition:color .18s ease}
#contacts a svg,[data-contacts] a svg{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#contacts a:hover,#contacts a:hover span,[data-contacts] a:hover,[data-contacts] a:hover span,footer nav a:hover{color:#ff4a4f!important}
#contacts a:hover svg,[data-contacts] a:hover svg{transform:translateY(-2px) scale(1.12)}
#contacts a[href^="https://t.me"]:hover svg,[data-contacts] a[href^="https://t.me"]:hover svg{transform:translate(2px,-2px) rotate(-8deg) scale(1.12)}
#contacts a:focus-visible,[data-contacts] a:focus-visible,footer nav a:focus-visible,[data-copy-email]:focus-visible{outline:2px solid #ff4a4f;outline-offset:4px;border-radius:4px}
[data-copy-email]{transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .12s ease}
/* both labels share one grid cell, so the button is as wide as the longer one and nothing beside it moves */
[data-copy-email]{display:inline-grid;justify-items:center;align-items:center}
[data-copy-email]>span{grid-area:1/1;display:inline-flex;align-items:center}
.dm-copy-ok,.is-copied .dm-copy-l{visibility:hidden}
.is-copied .dm-copy-ok{visibility:visible}
[data-copy-email]:hover{border-color:#f2efe8!important;background-color:#1a1917!important}
[data-copy-email]:active{transform:scale(.95)}
[data-copy-email]:focus-visible{border-radius:999px}
/* «Скопировано»: the button turns green, a check draws itself and a ring goes out once */
[data-copy-email].is-copied{border-color:#4cc27a!important;color:#4cc27a!important;background-color:rgba(76,194,122,.12)!important;animation:dm-copied .5s ease-out}
.dm-check{display:inline-block;width:1.2em;height:1.2em;margin:-.3em .4em -.3em -.15em;vertical-align:middle}
.dm-check path{stroke-dasharray:22;stroke-dashoffset:22;animation:dm-check .32s .06s ease-out forwards}
@keyframes dm-check{to{stroke-dashoffset:0}}
@keyframes dm-copied{0%{box-shadow:0 0 0 0 rgba(76,194,122,.5)}100%{box-shadow:0 0 0 12px rgba(76,194,122,0)}}
@media (prefers-reduced-motion:reduce){#contacts a svg,[data-contacts] a svg,[data-copy-email]{transition:none}
  #contacts a:hover svg,[data-contacts] a:hover svg{transform:none}
  [data-copy-email].is-copied{animation:none}.dm-check path{animation:none;stroke-dashoffset:0}}