@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-800-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Chakra Petch';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/chakra-700i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}

/* chakchak.net - та же вёрстка, что у yz.kz, отличается только палитрой.
   Нейтральные тона тоже перекрашены: у yz.kz они были с зелёным подтоном
   (G выше R и B), здесь подтон тёплый, иначе жёлтый акцент выглядит грязным. */
:root{
  --ground:#FFFFFF; --ink:#0D0C0B; --muted:#6B665B; --hairline:#EAE7DC; --wash:#F8F7F2;
  --accent:#FFC107; --accent-deep:#FFC107; --danger:#C8341F;
  --r:14px; --s--1:.8125rem; --s0:.9375rem; --s1:1.125rem;
}
*{box-sizing:border-box;}
/* Авторский display перебивает браузерное display:none от атрибута hidden,
   поэтому скрытие задаём явно - иначе #boot с display:grid накрывает страницу. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif; font-size:var(--s0); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.25; text-wrap:balance;}
h1{font-size:1.35rem;} h2{font-size:1.1rem;}
a{color:var(--accent-deep); font-weight:600; text-decoration:none;}
/* Рамка фокуса - по --ink, а не по акценту: жёлтая обводка на белом почти
   не видна, а по ней ходят с клавиатуры. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* overflow:hidden - шарик стартует далеко за левым краем, без этого
   появлялась бы горизонтальная прокрутка. */
.boot{position:fixed; inset:0; z-index:9999; overflow:hidden; background:var(--ground);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
      transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .55s ease;}
.boot.boot-exit{transform:translateY(-100%); opacity:.6;}

.boot-mark{opacity:0; animation:boot-mark-in .45s ease-out 1.25s 1 forwards;}
@keyframes boot-mark-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* Кадры сведены к общему холсту: шар везде одного диаметра и ровно в центре
   картинки, поэтому при смене кадра он не прыгает и не меняет размер.
   Конечности умещаются в тот же холст, так что блок не переполняется и
   надпись под ним ничем не перекрывается. */
.boot-chak{position:relative; width:200px; height:200px;}
.boot-chak .bf{position:absolute; inset:0; width:100%; height:100%;
               transform-origin:50% 50%; will-change:transform, opacity;}

/* Качение: rotate стоит последним, поэтому применяется в локальной системе
   кадра - шар вращается вокруг своей оси. Поворот кратен 360°, чтобы в конце
   лицо смотрело ровно вперёд. */
@keyframes boot-roll{
  0%      {opacity:1; transform:translateX(-62vw) rotate(0deg);}
  38%     {opacity:1; transform:translateX(0)     rotate(720deg);}
  43%     {opacity:1; transform:translateX(0)     rotate(720deg);}
  43.001%,100%{opacity:0; transform:translateX(0) rotate(720deg);}
}
/* Радостный «выдыхает»: подрастает и возвращается в исходный размер,
   и только после возврата уступает место крутому. */
@keyframes boot-happy{
  0%,42.999%{opacity:0; transform:scale(1);}
  43%     {opacity:1; transform:scale(1);}
  55%     {opacity:1; transform:scale(1.16);}
  68%     {opacity:1; transform:scale(1);}
  68.001%,100%{opacity:0; transform:scale(1);}
}
@keyframes boot-cool{
  0%,67.999%{opacity:0; transform:scale(.86);}
  68%     {opacity:1; transform:scale(.86);}
  78%     {opacity:1; transform:scale(1.06);}
  86%,100%{opacity:1; transform:scale(1);}
}
.bf-1{animation:boot-roll  2.2s cubic-bezier(.17,.72,.28,1) 1 both;}
.bf-2{animation:boot-happy 2.2s cubic-bezier(.34,1.4,.5,1)  1 both;}
.bf-3{animation:boot-cool  2.2s cubic-bezier(.34,1.4,.5,1)  1 both;}

/* Уважаем системную настройку «меньше движения»: показываем только финальный
   кадр, без качения и подскоков. */
@media (prefers-reduced-motion: reduce){
  .bf-1,.bf-2{display:none;}
  .bf-3{animation:none; opacity:1; transform:none;}
  .boot-mark{animation:none; opacity:1;}
}

.brand-row{display:flex; align-items:center; gap:9px;}
.chak-mark{width:30px; height:30px; object-fit:contain; flex:none;}
.brand-row:has(.mark.big) .chak-mark{width:44px; height:44px;}

/* Список устройств: имя слева, «Отвязать» справа, кнопка не растягивается. */
.dev-row{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--hairline);}
.dev-row:last-child{border-bottom:none;}
.dev-info{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
.dev-info b{font-size:var(--s0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dev-info .dim{opacity:.7;}
.dev-del{flex:none; border:1.5px solid var(--hairline); background:var(--ground);
  border-radius:9px; padding:7px 11px; font:inherit; font-size:11px; font-weight:600;
  color:var(--muted); cursor:pointer;}
.dev-del:disabled{opacity:.5;}

/* Врезка «о сервисе» в начале FAQ. */
.about{background:var(--wash); border-radius:var(--r); padding:16px; margin-bottom:24px;}
.about p{margin:0 0 8px;}
.about-sign{font-weight:700; color:var(--accent-deep); margin-bottom:0 !important;}

.reg-hint{color:var(--accent-deep); font-weight:600;}

.tutorial-tip{display:flex; align-items:center; gap:14px; background:var(--wash);
  border-radius:var(--r); padding:14px; margin:20px 0;}
.tutorial-tip img{width:76px; height:auto; flex:none;}
.tutorial-tip p{margin:0;}
.tutorial-done{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; border:1.5px solid var(--hairline); border-radius:var(--r); padding:22px 16px; margin:28px 0 20px;}
.tutorial-done img{width:128px; height:auto;}
.tutorial-done p{margin:0;}
.app{max-width:520px; margin:0 auto; padding:24px 20px 48px;}

/* «chakchak.net» вдвое длиннее «yz.kz», поэтому марка мельче: иначе на узком
   экране она наезжает на статус-тег в шапке. */
.mark{font-family:'Chakra Petch','Montserrat',sans-serif; font-style:italic; font-weight:700;
      font-size:1.3rem; letter-spacing:-.035em; white-space:nowrap;}
.mark.big{font-size:1.85rem;}
.mark b{color:var(--accent-deep);}

.screen{display:flex; flex-direction:column; gap:16px; min-height:100dvh; padding:24px 0;}
.screen.center{justify-content:center;}

.sub{color:var(--muted); font-size:var(--s--1); margin:0;}
.tiny{font-size:11px; color:var(--muted); line-height:1.45; margin:0;}
.legal-foot{margin-top:18px !important; text-align:center;}
.legal-foot a{color:var(--muted); font-weight:500;}
.err{color:var(--danger); font-size:var(--s--1); font-weight:600; margin:0;}
label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em;
      color:var(--muted); margin-bottom:6px; font-weight:500;}

.field{width:100%; border:1.5px solid var(--hairline); border-radius:10px; padding:12px 13px;
       font:inherit; font-size:var(--s0); color:var(--ink); background:var(--ground);}
.field:focus{border-color:var(--ink); outline:none;}
.code-input{font-weight:800; letter-spacing:.07em; text-transform:uppercase;}

.btn{display:block; width:100%; text-align:center; background:var(--accent); color:var(--ink);
     border:none; border-radius:10px; padding:14px; font-family:inherit; font-weight:800;
     font-size:var(--s0); letter-spacing:-.01em; cursor:pointer;}
.btn:disabled{opacity:.5; cursor:default;}

/* Кнопка-ссылка: пока токен не получен - клик не должен уводить на «#» */
a.btn{text-decoration:none; color:var(--ink);}
a.btn[aria-disabled="true"]{opacity:.55; pointer-events:none;}
.btn.ghost{background:transparent; border:1.5px solid var(--hairline);}
.btn.row{display:flex; align-items:center; justify-content:center; gap:9px;}
.btn svg{width:19px; height:19px; flex:none;}

.or{display:flex; align-items:center; gap:11px; color:var(--muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.14em;}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--hairline);}

/* ── кабинет ── */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px;
     padding-bottom:16px; border-bottom:2px solid var(--ink); margin-bottom:20px;}
.card{border:1.5px solid var(--hairline); border-radius:var(--r); padding:16px; display:flex;
      flex-direction:column; gap:13px; margin-bottom:16px;}
.card.strong{border-color:var(--ink); border-width:2px;}
.bal-v{font-weight:800; font-size:2.4rem; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums;}
.k{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
.kv{display:flex; justify-content:space-between; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--hairline); font-size:var(--s--1);}
.kv:last-child{border-bottom:none;}
.kv b{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.kv.total{border-top:2px solid var(--ink); border-bottom:none; padding-top:11px;}
.kv.total b{font-size:var(--s1); font-weight:800; letter-spacing:-.02em;}

.chips{display:flex; gap:7px;}
.chips button{flex:1; border:1.5px solid var(--hairline); border-radius:9px; padding:10px 4px;
  font:inherit; font-weight:700; font-size:var(--s--1); background:var(--ground);
  font-variant-numeric:tabular-nums; cursor:pointer;}
.chips button[aria-pressed="true"]{border-color:var(--ink); border-width:2px;}

.amt-own{margin-top:7px;}
/* Курс лежит между фишками способа и кнопкой оплаты. Раньше он был внутри
   блока способов и прилипал к фишкам; теперь это отдельный ребёнок .card,
   так что зазор даёт gap, а margin добавляет ему ещё немного воздуха. */
.rate-note{margin:3px 0;}

.stepper{display:flex; align-items:center; justify-content:space-between;
  border:1.5px solid var(--hairline); border-radius:10px; padding:7px 9px;}
.stepper button{width:36px; height:36px; border-radius:8px; background:var(--wash); border:none;
  font:inherit; font-weight:800; font-size:1.15rem; cursor:pointer;}
.stepper button:disabled{opacity:.4; cursor:default;}
.stepper .val{font-weight:800; font-size:1.2rem; font-variant-numeric:tabular-nums;}

.meter{height:6px; border-radius:99px; background:var(--hairline); overflow:hidden;}
.meter i{display:block; height:100%; background:var(--accent);}
.rowb{display:flex; justify-content:space-between; font-size:11px; color:var(--muted);
      font-variant-numeric:tabular-nums;}

.urlbox{background:var(--wash); border:1px solid var(--hairline); border-radius:10px;
  padding:12px; font-size:11px; word-break:break-all; color:var(--muted); line-height:1.45;}
/* Активна - всегда зелёный, а не жёлтый акцент бренда: статус "работает"
   не должен читаться как часть фирменного стиля. */
.tag{background:#00C853; color:#06210F; font-size:10px; font-weight:800;
     padding:3px 8px; border-radius:99px; letter-spacing:.02em;}
.tag.off{background:var(--hairline); color:var(--muted);}

.srv{display:flex; align-items:center; gap:9px; padding:9px 0;
     border-bottom:1px solid var(--hairline); font-size:var(--s--1);}
.srv:last-child{border-bottom:none;}
.dot{width:7px; height:7px; border-radius:99px; background:var(--accent); flex:none;}

.codebox{border:2px solid var(--ink); border-radius:var(--r); padding:14px; display:flex;
  align-items:center; justify-content:space-between; gap:10px;}
.codebox .c{font-weight:800; letter-spacing:.08em; font-size:1.15rem;}
.cnt{display:flex; align-items:baseline; gap:9px;}
.cnt b{font-weight:800; font-size:2.1rem; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.who{display:flex; align-items:center; gap:9px; padding:8px 0;
     border-bottom:1px solid var(--hairline); font-size:var(--s--1);}
.who:last-child{border-bottom:none;}
.who .av{width:24px; height:24px; border-radius:99px; background:var(--wash);
  border:1px solid var(--hairline); display:grid; place-items:center; font-size:10px; font-weight:700;}
.who .dt{margin-left:auto; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums;}

.step{display:flex; gap:11px; align-items:flex-start;}
.step .n{font-weight:800; font-size:11px; width:22px; height:22px; border-radius:99px;
  background:var(--ink); color:var(--ground); display:grid; place-items:center; flex:none; margin-top:2px;}
.step p{margin:0; font-size:var(--s--1); line-height:1.45;}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); padding:11px 18px; border-radius:99px;
  font-size:var(--s--1); font-weight:600; z-index:9;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ── информационная страница ── */
.doc{max-width:640px; padding-bottom:64px;}
.doc h1{font-size:1.7rem; margin:24px 0 10px;}
.doc h2{font-size:1.25rem; margin:38px 0 10px; padding-top:20px; border-top:2px solid var(--ink);}
.doc h3{font-size:var(--s1); font-weight:800; letter-spacing:-.015em; margin:22px 0 6px;}
.doc p{margin:0 0 12px; max-width:62ch;}
.lead{font-size:var(--s1); line-height:1.5;}
.dim{color:var(--muted); font-size:var(--s--1);}
.tagline{color:var(--accent-deep); font-weight:700; font-size:var(--s--1);
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px !important;}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 8px;}
.toc a{border:1.5px solid var(--hairline); border-radius:99px; padding:7px 13px;
  font-size:var(--s--1); font-weight:600; color:var(--ink);}
.steps{margin:0 0 14px; padding-left:20px;}
.steps li{margin-bottom:8px; padding-left:3px;}
.plain{list-style:none; margin:0; padding:0;}
.plain li{padding:12px 0; border-bottom:1px solid var(--hairline); font-size:var(--s0);}
.plain li:last-child{border-bottom:none;}
.note{background:var(--wash); border-left:3px solid var(--accent); border-radius:0 10px 10px 0;
  padding:12px 14px; font-size:var(--s--1); line-height:1.5;}
.srv-card{border:1.5px solid var(--hairline); border-radius:var(--r); padding:16px; margin-bottom:14px;}
.srv-card h3{margin:0 0 4px; font-size:var(--s1);}
.srv-card p:last-child{margin-bottom:0;}
.faq{margin:0;}
.faq dt{font-weight:800; letter-spacing:-.01em; margin-top:18px;}
.faq dd{margin:5px 0 0; color:var(--muted); font-size:var(--s--1); line-height:1.5;}
.doc .foot{margin-top:40px; padding-top:18px; border-top:1px solid var(--hairline); text-align:center;}
.doc .top a.mark{color:var(--ink);}

/* ── нижняя навигация ── */
.shell{padding-bottom:92px;}
.nav{position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 14px
     calc(10px + env(safe-area-inset-bottom)); background:var(--ground);
     border-top:1px solid var(--hairline); max-width:520px; margin:0 auto; z-index:5;}
.nav-i{flex:1; border:1.5px solid var(--hairline); background:var(--ground); color:var(--ink);
  border-radius:12px; padding:12px 6px; font:inherit; font-weight:700; font-size:var(--s--1);
  cursor:pointer; letter-spacing:-.01em;}
.nav-i.mid{flex:1.35; background:var(--accent); border-color:var(--accent); font-weight:800;}
.nav-i[aria-current="page"]{border-color:var(--ink); border-width:2px;}
.nav-i.mid[aria-current="page"]{border-color:var(--ink);}
.shell .doc{max-width:none; padding-bottom:0;}
.shell .doc h1{margin-top:8px;}
.shell .card .btn + .btn{margin-top:-4px;}

/* ── раскрывающиеся пункты FAQ ── */
.doc details{border:1.5px solid var(--hairline); border-radius:12px; margin-bottom:8px;
  background:var(--ground); overflow:hidden;}
.doc details[open]{border-color:var(--ink);}
.doc summary{list-style:none; cursor:pointer; padding:14px 44px 14px 15px; position:relative;
  font-weight:800; letter-spacing:-.01em; font-size:var(--s0); line-height:1.35;}
.doc summary::-webkit-details-marker{display:none;}
.doc summary::after{content:""; position:absolute; right:17px; top:50%; width:9px; height:9px;
  margin-top:-6px; border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg); transition:transform .15s;}
.doc details[open] summary::after{transform:rotate(225deg); margin-top:-2px;}
.doc summary:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
.doc summary .hint{display:block; font-weight:500; font-size:var(--s--1); color:var(--muted);
  letter-spacing:0; margin-top:3px;}
.doc .dd{padding:0 15px 15px; border-top:1px solid var(--hairline); padding-top:13px;}
.doc .dd p:last-child, .doc .dd ol:last-child{margin-bottom:0;}
.doc details + h2{margin-top:34px;}

/* ── модальный лист: подтверждение списания и выбор пакета трафика ── */
/* Снизу, а не по центру: на телефоне туда дотягивается большой палец,
   и лист не перекрывает то, ради чего его открыли. */
.sheet-bg{position:fixed; inset:0; z-index:60; background:rgba(13,12,11,.5);
  display:flex; align-items:flex-end; justify-content:center;
  animation:sheet-in .16s ease-out;}
.sheet{width:100%; max-width:520px; background:var(--ground);
  border-radius:var(--r) var(--r) 0 0; padding:20px 18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  animation:sheet-up .18s cubic-bezier(.2,.8,.3,1);}
@keyframes sheet-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-up{from{transform:translateY(14px)}to{transform:translateY(0)}}
.sheet h3{margin:0; font-size:var(--s1); font-weight:800; letter-spacing:-.02em;}
.sheet p{margin:0;}
.sheet-opts{display:flex; flex-direction:column; gap:8px;}
.sheet .opt{display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; background:var(--wash); color:var(--ink);
  border:1.5px solid var(--hairline); border-radius:10px; padding:13px 14px;
  font:inherit; font-size:var(--s0); font-weight:700; cursor:pointer;}
.sheet .opt:hover{border-color:var(--ink);}
.sheet .opt .tiny{display:block; font-weight:500; margin-top:2px;}
.sheet .opt b{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ── плашка выбора: трафик в тарифе ── */
.pick{display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; background:var(--wash); color:var(--ink);
  border:1.5px solid var(--hairline); border-radius:10px; padding:11px 14px;
  font:inherit; cursor:pointer;}
.pick:hover{border-color:var(--ink);}
.pick:disabled{opacity:.6; cursor:default;}
.pick:disabled:hover{border-color:var(--hairline);}
.pick .pv{font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums;}
.pick .pa{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}

/* ── карточка-раскрывашка: «Мои устройства» ── */
details.card.fold{display:block; padding:0; overflow:hidden;}
details.card.fold summary{list-style:none; cursor:pointer; padding:16px 44px 16px 16px;
  position:relative;}
details.card.fold summary::-webkit-details-marker{display:none;}
details.card.fold summary h2{margin:0;}
details.card.fold summary .hint{display:block; font-size:var(--s--1); color:var(--muted);
  font-weight:500; margin-top:3px;}
details.card.fold summary::after{content:""; position:absolute; right:19px; top:50%;
  width:9px; height:9px; margin-top:-7px; border-right:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink); transform:rotate(45deg); transition:transform .15s;}
details.card.fold[open] summary::after{transform:rotate(225deg); margin-top:-2px;}
details.card.fold summary:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
details.card.fold .dd{padding:0 16px 16px; border-top:1px solid var(--hairline);
  padding-top:13px;}

/* ── расход трафика в карточке тарифа ── */
.usage{margin-top:9px; display:flex; flex-direction:column; gap:5px;}
.usage .bar{height:7px; border-radius:4px; background:var(--hairline); overflow:hidden;}
.usage .bar i{display:block; height:100%; background:var(--ink); border-radius:4px;
  transition:width .3s;}
.usage .bar i.warn{background:#B07A00;}
.usage .bar i.crit{background:var(--danger);}
.usage .used{color:var(--ink); font-weight:700; font-size:var(--s0);
  font-variant-numeric:tabular-nums;}