@font-face{font-family:"Onest";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-display:swap;font-weight:100 900;src:url(/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:"Unbounded";font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/unbounded-cyrillic-700.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/unbounded-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}

@property --c-bg{syntax:"<color>";inherits:true;initial-value:#cdefe3}
@property --c-deep{syntax:"<color>";inherits:true;initial-value:#1f6b55}
:root{
  color-scheme: light only;
  --mist:#f3f5fa; --card:#ffffff; --ink:#1e2235; --ink-2:#5a6079; --hair:#dee2ec; --error:#b4233a;
  --c-bg:#cdefe3; --c-deep:#1f6b55;
  --c-soft:color-mix(in srgb,var(--c-bg) 42%,#fff);
  --sans:"Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Unbounded", "Onest", ui-sans-serif, system-ui, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  transition:--c-bg .7s var(--ease),--c-deep .7s var(--ease);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;
  font-feature-settings:"tnum" 1;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-deep);outline-offset:3px;border-radius:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Шапка */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.mark-glyph{width:32px;height:32px;border-radius:10px;background:var(--c-bg);color:var(--c-deep);display:grid;place-items:center}
.mark-glyph svg{stroke:currentColor}
.mark-name{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.top-note{color:var(--ink-2);font-size:14px;margin:0}

/* Заголовок */
.hero{padding:34px 0 20px}
.title{font-family:var(--display);font-weight:700;font-size:clamp(40px,8vw,88px);line-height:1;letter-spacing:-.035em;
  margin:0;overflow:hidden;padding-bottom:.06em}
.title span{display:inline-block;padding-right:.08em}
.title.renew span{animation:rise .55s var(--ease) both}
.lede{margin:18px 0 0;color:var(--ink-2);max-width:56ch}

/* Категории */
.cats-scroll{overflow-x:auto;scrollbar-width:none;margin:28px -24px 0;padding:2px 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 48px),transparent)}
.cats-scroll::-webkit-scrollbar{display:none}
.cats{position:relative;display:inline-flex;gap:2px;padding:5px;background:var(--card);border:1px solid var(--hair);border-radius:999px;white-space:nowrap}
.cat{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;padding:9px 16px 9px 13px;border-radius:999px;
  font-size:15px;font-weight:500;color:var(--ink-2);transition:color .3s var(--ease)}
.cat .dot{width:9px;height:9px;border-radius:50%;background:var(--dot);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dot-deep) 35%,transparent);transition:transform .35s var(--spring)}
.cat:hover{color:var(--ink)}
.cat:hover .dot{transform:scale(1.35)}
.cat[aria-current="page"]{color:var(--ink)}
.cat[aria-current="page"] .dot{background:var(--dot-deep);box-shadow:none}
.cats-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--c-bg);
  transition:transform .5s var(--spring),width .5s var(--spring)}

/* Конвертер */
.conv{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.field{position:relative;border-radius:28px;padding:24px 26px 22px;min-height:212px;display:flex;flex-direction:column;justify-content:space-between}
.field.from{background:var(--card);border:1px solid var(--hair);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field.to{background:var(--c-bg);color:var(--ink)}
.conv .field.from{padding-right:46px}
.conv .field.to{padding-left:46px}
.field-label{font-size:14px;margin:0;color:var(--ink-2)}
.field.to .field-label{color:var(--c-deep)}
.num{width:100%;border:0;background:none;outline:none;padding:0;margin:10px 0 14px;font-weight:600;font-size:clamp(34px,5.4vw,60px);
  line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:0;color:var(--ink)}
.num::placeholder{color:#c3c8d6}
.field.from:focus-within{border-color:var(--c-deep);box-shadow:0 0 0 4px var(--c-soft)}
.result{display:block;overflow-wrap:anywhere}
.result.tick{animation:tick .32s var(--ease)}
.field.invalid .num{color:var(--error)}
.hint{font-size:13px;color:var(--error);margin:-8px 0 8px;min-height:1em}
.unit-row{display:flex;align-items:center;gap:10px}
.select{position:relative;flex:1;min-width:0}
.select select{appearance:none;-webkit-appearance:none;width:100%;cursor:pointer;border-radius:14px;padding:12px 40px 12px 15px;font-size:16px;font-weight:500;
  background:var(--mist);border:1px solid transparent;text-overflow:ellipsis;transition:border-color .2s var(--ease),background .2s var(--ease)}
.select select:hover{border-color:var(--hair)}
.field.to .select select{background:rgba(255,255,255,.55)}
.field.to .select select:hover{background:rgba(255,255,255,.8);border-color:transparent}
.select select option{color:var(--ink);background:#fff}
.select::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.icon-btn{flex:none;width:46px;height:46px;border-radius:14px;border:0;background:rgba(255,255,255,.55);color:var(--c-deep);cursor:pointer;display:grid;place-items:center;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.icon-btn:hover{background:rgba(255,255,255,.85)}
.icon-btn:active{transform:scale(.92)}
.swap{position:absolute;left:50%;top:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 7px var(--mist);
  transition:transform .55s var(--spring),background .3s var(--ease)}
.swap:hover{transform:scale(1.06);background:var(--c-deep)}
.swap.turned{transform:rotate(180deg)}
.swap.turned:hover{transform:rotate(180deg) scale(1.06)}

.under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;padding:0 6px}
.formula{margin:0;font-size:16px;color:var(--ink-2)}
.formula b{font-weight:600;color:var(--ink)}
.prec{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:3px}
.seg button{border:0;background:none;border-radius:9px;padding:4px 11px;cursor:pointer;font-size:14px;color:var(--ink-2);transition:background .25s var(--ease),color .25s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--c-bg);color:var(--ink);font-weight:600}

/* Лента-рулетка */
.tape{position:relative;height:56px;margin:22px 6px 0;overflow:hidden;--x:0px;
  background-image:
    linear-gradient(90deg,var(--c-deep) 2px,transparent 2px),
    linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 1.5px,transparent 1.5px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:120px 28px,60px 17px,12px 10px;
  background-repeat:repeat-x;
  background-position:var(--x) 0,var(--x) 0,var(--x) 0;
  transition:background-position 1.1s cubic-bezier(.22,1,.36,1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.tape::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c-bg)}
.tape-mark{position:absolute;left:50%;top:0;width:3px;height:40px;margin-left:-1.5px;background:var(--ink);border-radius:0 0 3px 3px}
.tape-mark::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--c-bg)}

/* Все единицы */
.all{margin-top:36px;background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:26px 28px 14px}
.all h2,.bases h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0 0 10px}
.list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.list{grid-auto-flow:column;grid-template-rows:repeat(var(--rows,9),auto)}
.list li.col-end .row{border-bottom-color:transparent}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;padding:13px 10px;margin:0 -10px;width:calc(100% + 20px);
  border:0;border-bottom:1px solid var(--hair);border-radius:0;background:none;cursor:pointer;text-align:left;
  transition:background .2s var(--ease)}
.row:not(.current):hover{background:var(--c-soft);border-bottom-color:transparent;border-radius:12px}
.row .u{color:var(--ink-2);font-size:15px;transition:color .3s var(--ease)}
.row .v{font-weight:600;text-align:right;overflow-wrap:anywhere}
.row .v small{font-weight:400;color:var(--ink-2);font-size:14px;margin-left:6px}
.row.current{background:none;border-bottom-color:transparent}
.row.current .u{color:var(--c-deep);font-weight:600}

/* Системы счисления */
.bases{margin-top:22px}
.base-in{display:block}
.base-in .field{min-height:0}
.base-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--hair);background:var(--mist);border-radius:999px;padding:8px 15px;cursor:pointer;font-size:15px;font-weight:500;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.chip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--c-deep) 40%,var(--hair))}
.chip[aria-pressed="true"]{background:var(--c-bg);border-color:transparent;color:var(--ink)}
.chip input{width:3ch;border:0;background:none;outline:none;text-align:center;font-weight:600;padding:0;color:var(--ink)}
.base-out{margin-top:16px;background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:6px 28px}
.base-row{display:grid;grid-template-columns:200px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.base-row:last-child{border-bottom:0}
.base-row .u{color:var(--ink-2);font-size:14px}
.base-row .u b{display:block;color:var(--ink);font-weight:600;font-size:16px}
.base-row .v{font-weight:600;font-size:20px;overflow-wrap:anywhere;letter-spacing:.01em}
.base-row .icon-btn{background:var(--mist)}
.base-row .icon-btn:hover{background:var(--c-bg)}
.base-row.tick .v{animation:tick .32s var(--ease)}

/* Подвал */
.foot{margin-top:56px;padding:24px 0 40px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--ink-2);font-size:14px}
.foot p{margin:0}

/* Уведомление */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:500;
  transition:opacity .25s var(--ease),transform .35s var(--spring)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Анимации */
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes tick{from{transform:translateY(.35em);opacity:.25}to{transform:none;opacity:1}}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slide{from{background-position:calc(var(--x) + 480px) 0,calc(var(--x) + 480px) 0,calc(var(--x) + 480px) 0}}
.intro .top{animation:enter .6s var(--ease) both}
.intro .title span{animation:rise .8s var(--ease) .1s both}
.intro .lede{animation:enter .7s var(--ease) .25s both}
.intro .cats-scroll{animation:enter .7s var(--ease) .32s both}
.intro .field.from{animation:enter .7s var(--ease) .4s both}
.intro .field.to{animation:enter .7s var(--ease) .48s both}
.intro .tape{animation:slide 1.4s var(--ease) .45s both}
.intro .all{animation:enter .7s var(--ease) .55s both}
.view-in{animation:enter .45s var(--ease) both}

/* Перелистывание категорий */
main{perspective:1600px}
.page-out{animation:pageOut .34s cubic-bezier(.55,0,.9,.4) both;transform-origin:calc(50% - var(--dir,1) * 50%) 50%}
.page-in{animation:pageIn .75s cubic-bezier(.16,1,.3,1) both;transform-origin:calc(50% + var(--dir,1) * 50%) 50%}
@keyframes pageOut{to{opacity:0;transform:translateX(calc(var(--dir,1) * -110px)) rotateY(calc(var(--dir,1) * 16deg)) scale(.96);filter:blur(8px)}}
@keyframes pageIn{from{opacity:0;transform:translateX(calc(var(--dir,1) * 160px)) rotateY(calc(var(--dir,1) * -16deg)) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.list.stagger li{animation:rowIn .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 35ms + 200ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
/* Буквы заголовка поднимаются по одной */
.title .w{display:inline-block;white-space:nowrap}
.title .ch{display:inline-block}
.title.letters .ch{animation:letter .7s cubic-bezier(.34,1.45,.64,1) both;animation-delay:calc(var(--k) * 35ms)}
@keyframes letter{from{opacity:0;transform:translateY(95%) rotate(8deg)}to{opacity:1;transform:none}}

/* Цифры-барабаны в результате */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.odo{display:flex;flex-wrap:wrap;align-items:flex-start}
.odo .c{display:inline-block;height:1.1em;line-height:1.1em;white-space:pre}
.odo .d{display:inline-block;height:1.1em;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.odo .strip{display:flex;flex-direction:column;will-change:transform}
.odo .strip.roll{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.odo .strip i{font-style:normal;display:block;height:1.1em;line-height:1.1em;text-align:center}

/* Подсветка выбранной единицы, которая переезжает по таблице */
.list-wrap{position:relative}
.list-hl{position:absolute;left:0;top:0;width:0;height:0;border-radius:12px;background:var(--c-bg);opacity:0;pointer-events:none;
  transition:transform .55s var(--spring),width .55s var(--spring),height .55s var(--spring),opacity .3s var(--ease)}
.list-hl.jump{transition:opacity .3s var(--ease)}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .cats-scroll{margin:24px -16px 0;padding:2px 16px}
  .hero{padding:20px 0 14px}
  .top-note{display:none}
  .conv{grid-template-columns:1fr;gap:12px}
  .field{min-height:176px;padding:20px 20px 18px;border-radius:24px}
  .conv .field.from,.conv .field.to{padding:20px 20px 18px}
  .conv .field.to{padding-top:32px}
  .swap{width:50px;height:50px;margin:-25px 0 0 -25px;transform:rotate(90deg)}
  .swap:hover{transform:rotate(90deg) scale(1.06)}
  .swap.turned{transform:rotate(270deg)}
  .swap.turned:hover{transform:rotate(270deg) scale(1.06)}
  .all{padding:20px 18px 8px;border-radius:24px}
  .list{grid-template-columns:1fr}
  .list{grid-auto-flow:row;grid-template-rows:none}
  .list li.col-end .row{border-bottom-color:var(--hair)}
  .list li:last-child .row{border-bottom-color:transparent}
  .base-out{padding:4px 18px;border-radius:24px}
  .base-row{grid-template-columns:1fr auto;gap:4px 12px}
  .base-row .u{grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  .intro *, .title .ch, .list.stagger li, .result, .base-row .v{animation:none!important}
  .tape, .cats-ind, .list-hl, .swap, .odo .strip{transition:none!important}
  .page-out{animation:fadeOut .3s ease both!important}
  .page-in{animation:fadeIn .45s ease both!important}
}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Справка */
.ref{margin-top:36px;background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:26px 28px 22px}
.ref h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0 0 14px}
.ref h3{font-size:15px;font-weight:600;margin:0 0 8px;color:var(--ink-2)}
.ref-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px 40px}
.ref-text p{margin:0 0 12px;max-width:62ch;line-height:1.6}
.ref-pairs ul,.ref-cats{list-style:none;margin:0;padding:0}
.ref-pair{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:calc(100% + 20px);margin:0 -10px;padding:10px;border:0;border-bottom:1px solid var(--hair);
  background:none;cursor:pointer;text-align:left;transition:background .2s var(--ease)}
.ref-pairs li:last-child .ref-pair{border-bottom-color:transparent}
.ref-pair:hover{background:var(--c-soft);border-bottom-color:transparent;border-radius:12px}
.ref-pair-l{color:var(--ink-2);font-size:14px}
.ref-pair-v{font-size:15px;text-align:right;white-space:nowrap}
.ref-pair-v b,.ref-cat-ex b{font-weight:600}
.ref-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ref-cat{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:18px;background:var(--mist);color:inherit;text-decoration:none;height:100%;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.ref-cat:hover{background:var(--dot);transform:translateY(-2px)}
.ref-cat-name{display:flex;align-items:center;gap:8px;font-weight:600}
.ref-cat .dot{width:9px;height:9px;border-radius:50%;background:var(--dot-deep)}
.ref-cat-ex{font-size:14px;color:var(--ink-2)}
.cat{text-decoration:none}
.notfound{padding:60px 0 20px}
.notfound a{color:var(--c-deep);font-weight:600}
@media (max-width:760px){
  .ref{padding:20px 18px 16px;border-radius:24px}
  .ref-grid{grid-template-columns:1fr}
  .ref-pair-v{white-space:normal}
}