/* /download: приложения по устройствам. Цвета и шрифт как у лендинга */
:root{
  --lime:#A8FB05;
  --lime-deep:#7ED100;
  --ink:#0B0B0E;
  --ink-2:#1E1F24;
  --gray:#5E6166;
  --line:#E7E8E6;
  --page:#FBFBFB;
  --card:#fff;
  --plate:#F3F5F4;
  --warn:#B25B00;
  --ok:#3D7A00;
  --font:"Exo 2","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--page);color:var(--ink);font:500 16px/1.4 var(--font)}
a{color:inherit}
p,h1,h2,h3{margin:0}
:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px;border-radius:8px}

.top{max-width:860px;margin:0 auto;padding:18px 16px 0;display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:20px;text-decoration:none}
.logo-pill{background:var(--ink);color:var(--lime);border-radius:10px;padding:3px 10px}
.top-link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--lime)}

.dl{max-width:860px;margin:0 auto;padding:22px 16px 32px;display:flex;flex-direction:column;gap:14px}
h1{font-size:30px;line-height:1.1;font-weight:900}
.lead{color:var(--gray);max-width:640px}
.lead-sm{color:var(--gray);font-size:15px}
.hint{color:var(--gray);font-size:14px}
.tg-hint{background:var(--lime);color:var(--ink);border-radius:12px;padding:10px 12px;font-weight:700;font-size:15px}

/* вкладки на радио-кнопках: работают и без скрипта */
.tabs{display:flex;flex-direction:column;gap:14px}
.tab-r{position:absolute;opacity:0;pointer-events:none}
.tab-bar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px;margin:0 -4px;background:var(--plate);border-radius:14px}
.tab-bar::-webkit-scrollbar{display:none}
.tab-bar label{flex:none;padding:9px 14px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;color:var(--gray);white-space:nowrap}
.tab-bar label:hover{color:var(--ink)}
.pane{display:none;flex-direction:column;gap:12px}
#p-android:checked~.tab-bar label[for=p-android],
#p-iphone:checked~.tab-bar label[for=p-iphone],
#p-windows:checked~.tab-bar label[for=p-windows],
#p-macos:checked~.tab-bar label[for=p-macos],
#p-linux:checked~.tab-bar label[for=p-linux],
#p-tv:checked~.tab-bar label[for=p-tv]{background:var(--ink);color:var(--lime)}
#p-android:focus-visible~.tab-bar label[for=p-android],
#p-iphone:focus-visible~.tab-bar label[for=p-iphone],
#p-windows:focus-visible~.tab-bar label[for=p-windows],
#p-macos:focus-visible~.tab-bar label[for=p-macos],
#p-linux:focus-visible~.tab-bar label[for=p-linux],
#p-tv:focus-visible~.tab-bar label[for=p-tv]{outline:3px solid var(--lime-deep);outline-offset:2px}
#p-android:checked~.pane-android,
#p-iphone:checked~.pane-iphone,
#p-windows:checked~.pane-windows,
#p-macos:checked~.pane-macos,
#p-linux:checked~.pane-linux,
#p-tv:checked~.pane-tv{display:flex}

/* карточка приложения */
.app{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.app:first-of-type{border-color:var(--ink);box-shadow:4px 4px 0 var(--lime)}
.app-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-head h3{font-size:20px;font-weight:800}
.tag{background:var(--lime);color:var(--ink);font-weight:700;font-size:12px;line-height:1;padding:4px 8px;border-radius:7px}
.ver{margin-left:auto;color:var(--gray);font-size:13px;font-weight:700}
.app-btns{display:flex;flex-direction:column;gap:6px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:14px 16px;font:700 16px/1.2 var(--font);text-align:center;text-decoration:none;cursor:pointer}
.btn-sm{padding:10px 14px;font-size:14px;border-radius:12px}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.btn-lime:active{transform:translateY(1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-meta{font-weight:600;opacity:.7}
.file-note{font-size:13px;color:var(--gray);margin:0 2px 4px}
.sha{overflow-wrap:anywhere}
.sha code{font-size:11px;letter-spacing:-.02em;white-space:normal;word-break:break-all;opacity:.8}
.about{color:var(--gray);font-size:14px;margin-top:-4px}
.app>.btn{margin-top:2px}
.more{font-size:14px}
.more summary{cursor:pointer;color:var(--gray);font-weight:700;list-style:none;padding:2px 0;width:max-content}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ▾"}
.more[open] summary::after{content:" ▴"}
.more ul{list-style:none;margin:8px 0 6px;padding:0;display:flex;flex-direction:column;gap:8px}
.more li{display:flex;flex-direction:column;gap:3px}
.more .sha{font-size:11px;color:var(--gray);word-break:break-all}
.focus{display:flex;flex-direction:column;gap:12px}
.focus .app{border-color:var(--ink);box-shadow:4px 4px 0 var(--lime)}
.all-h{font-size:20px;font-weight:800;margin-top:12px}
.app-note{font-size:14px;font-weight:600}
.app-note.warn{color:var(--warn)}
.app-note.ok{color:var(--ok)}
.lic{font-size:12px;color:var(--gray)}
.lic a{text-decoration:underline}

/* на широком экране — кнопки в строку, карточки в две колонки */
@media (min-width:720px){
  .pane{display:none;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .pane>.lead-sm,.pane>.hint,.pane>.howto{flex:1 0 100%}
  .app{flex:1 1 calc(50% - 6px);min-width:0}
}

/* как поставить APK: телефон, четыре экрана по кругу, шаги рядом подсвечиваются в такт */
.howto{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:12px}
.howto h2{font-size:20px;font-weight:800}
.howto-body{display:flex;gap:16px;align-items:center}
.phone{position:relative;flex:none;width:118px;height:210px;border:5px solid var(--ink);border-radius:22px;background:#EEF0EE;overflow:hidden}
.scr{position:absolute;inset:0;padding:10px 7px;font-size:9px;line-height:1.2;opacity:0;animation:scr 12s infinite}
.scr2{animation-delay:3s}
.scr3{animation-delay:6s}
.scr4{animation-delay:9s}
.scr .bar{background:#fff;border-radius:6px;padding:5px 6px;font-weight:700}
.page-line{height:7px;background:#D7DAD7;border-radius:4px;margin:10px 2px 0}
.page-line.short{width:60%}
.dlbar{position:absolute;left:5px;right:5px;bottom:8px;background:var(--ink);color:#fff;border-radius:8px;padding:6px;display:flex;justify-content:space-between;align-items:center;gap:4px}
.dlbar b{color:var(--lime)}
.dlg{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);background:#fff;border-radius:10px;padding:8px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dlg p{font-weight:700;margin-bottom:8px}
.dlg-btns{display:flex;justify-content:flex-end;gap:10px;color:var(--gray)}
.dlg-btns b{color:var(--ink)}
.row{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff;border-radius:6px;padding:7px 6px;margin-top:8px}
.sw{flex:none;position:relative;width:24px;height:13px;border-radius:7px;background:#C8CBC8;animation:sw 12s infinite 6s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#fff;animation:knob 12s infinite 6s}
/* палец: кружок, который нажимает на кнопку */
.tap{position:relative}
.tap::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(126,209,0,.55);transform:scale(0);animation:tap 3s infinite}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:7px 8px 7px 38px;border-radius:12px;font-size:15px;animation:hl 12s infinite}
.steps li::before{content:counter(s);position:absolute;left:8px;top:7px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.steps .st2{animation-delay:3s}
.steps .st3{animation-delay:6s}
.steps .st4{animation-delay:9s}
@keyframes scr{0%{opacity:0}2%,23%{opacity:1}25%,100%{opacity:0}}
@keyframes hl{0%{background:transparent}2%,23%{background:rgba(168,251,5,.35)}25%,100%{background:transparent}}
@keyframes tap{0%,40%{transform:scale(0);opacity:1}60%{transform:scale(1.4);opacity:.9}80%,100%{transform:scale(1.8);opacity:0}}
@keyframes sw{0%,10%{background:#C8CBC8}14%,25%{background:var(--lime-deep)}26%,100%{background:#C8CBC8}}
@keyframes knob{0%,10%{transform:translateX(0)}14%,25%{transform:translateX(11px)}26%,100%{transform:translateX(0)}}
@media (max-width:420px){
  .howto-body{flex-direction:column;align-items:stretch}
  .phone{align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .phone{display:none}
  .scr,.steps li,.sw,.sw::after,.tap::after{animation:none}
}

/* переходник на GitHub: как выглядит страница релиза и какой файл нажать */
.guide{max-width:560px}
.gh{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:12px;display:flex;flex-direction:column;gap:6px;font:500 13px/1.3 ui-monospace,Consolas,monospace}
.gh-top{display:flex;align-items:center;gap:8px;font-family:var(--font);font-size:16px}
.gh-latest{border:1px solid #1A7F37;color:#1A7F37;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}
.gh-assets{font-family:var(--font);font-weight:700;margin-top:4px}
.gh-row{position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:7px 4px;word-break:break-all}
.gh-hit{background:rgba(168,251,5,.35);border-radius:8px;font-weight:700;color:var(--ink)}
.gh-hit .tap{flex:none;width:18px;height:18px}
.gh-dim{color:var(--gray)}
.steps-static li{animation:none}

.foot-note{font-size:13px;color:var(--gray);margin-top:6px}
.foot-note a{text-decoration:underline}
.foot{max-width:860px;margin:0 auto;padding:0 16px 28px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--gray)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (prefers-color-scheme:dark){
  :root{--line:#2E3036;--card:#141519;--plate:#1B1C21;--gray:#A9ACB1;--warn:#FFB35C;--ok:#A8FB05}
  body{background:var(--ink);color:#F3F5F4}
  .logo-pill{background:var(--lime);color:var(--ink)}
  .tab-bar label:hover{color:#F3F5F4}
  #p-android:checked~.tab-bar label[for=p-android],
  #p-iphone:checked~.tab-bar label[for=p-iphone],
  #p-windows:checked~.tab-bar label[for=p-windows],
  #p-macos:checked~.tab-bar label[for=p-macos],
  #p-linux:checked~.tab-bar label[for=p-linux],
  #p-tv:checked~.tab-bar label[for=p-tv]{background:var(--lime);color:var(--ink)}
  .app:first-of-type{border-color:#F3F5F4}
  .btn-dark{background:#F3F5F4;color:var(--ink)}
  .btn-ghost{color:#F3F5F4}
  .foot a:hover{color:#F3F5F4}
}
.tg-open{display:block;margin-top:8px;border:0;border-radius:10px;background:var(--ink);color:var(--lime);font:700 14px/1.2 var(--font);padding:9px 12px;cursor:pointer}
/* длинные суммы и имена файлов не раздвигают страницу на телефоне */
.dl,.tabs,.pane,.app,.focus,.howto{min-width:0}
.file-note,.more li,.lic{overflow-wrap:anywhere}