/* Rdownload, направление «Windows 98». Грамматика интерфейса 1998 года: серые объёмные
   поверхности, окна с синей полосой заголовка, утопленные поля, списки и дерево.
   Адаптация под сайт: крупнее кегль, зоны нажатия от 44px на телефоне, одно окно в ширину экрана. */

:root{
  --desk:#008080;
  --face:#c0c0c0;
  --hi:#ffffff;
  --lite:#dfdfdf;
  --shade:#808080;
  --dark:#0a0a0a;
  --ink:#000000;
  --title:#000080;
  --title2:#1084d0;
  --sel:#000080;
  --tip:#ffffe1;
  --link:#0000c0;
  --visited:#800080;
  --stop:#a00000;
  --font:Tahoma,"MS Sans Serif","Microsoft Sans Serif","Segoe UI",Verdana,Arial,sans-serif;
  --fs:14px;
  --raised:inset -1px -1px var(--dark),inset 1px 1px var(--hi),inset -2px -2px var(--shade),inset 2px 2px var(--lite);
  --pressed:inset -1px -1px var(--hi),inset 1px 1px var(--dark),inset -2px -2px var(--lite),inset 2px 2px var(--shade);
  --sunken:inset -1px -1px var(--hi),inset 1px 1px var(--shade),inset -2px -2px var(--lite),inset 2px 2px var(--dark);
  --window:inset -1px -1px var(--dark),inset 1px 1px var(--lite),inset -2px -2px var(--shade),inset 2px 2px var(--hi);
  --status:inset -1px -1px var(--hi),inset 1px 1px var(--shade);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--face) var(--lite)}
body{margin:0;background:#7fb0e0;color:var(--ink);font:var(--fs)/1.5 var(--font)}
/* Небо с облаками вместо однотонного стола. Одна картинка на весь экран, закреплена
   и не повторяется; нарисована своим скриптом, переходы плавные. */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:#7fb0e0 url(/nebo.webp?v=a24479d6) center/cover no-repeat}
::selection{background:var(--sel);color:#fff}
a{color:var(--link);text-underline-offset:2px}
a:visited{color:var(--visited)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,label:focus-within{outline:1px dotted var(--ink);outline-offset:-4px}
h1,h2,h3,p,ul,ol,figure,table{margin:0;padding:0}
img,svg{display:block}
code{font:inherit}

/* полосы прокрутки в духе системы */
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px}
::-webkit-scrollbar-thumb{background:var(--face);box-shadow:var(--raised)}
::-webkit-scrollbar-button{background:var(--face);box-shadow:var(--raised);height:16px;width:16px}

.desk{max-width:820px;margin:0 auto;padding:22px 14px 40px;display:grid;gap:18px}
.desk>*{min-width:0}

/* ---------- окно ---------- */
.win{background:var(--face);box-shadow:var(--window);padding:3px}
.bar{display:flex;align-items:center;gap:6px;min-height:26px;padding:3px 3px 3px 5px;
  background:linear-gradient(90deg,var(--title),var(--title2));color:#fff}
.bar svg{flex:none}
.bar h2,.bar .name{font:700 var(--fs)/1.25 var(--font);color:#fff;flex:1;min-width:0;letter-spacing:0}
.bar .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn{flex:none;width:20px;height:18px;display:grid;place-items:center;background:var(--face);color:var(--ink);
  box-shadow:var(--raised);font:700 12px/1 var(--font);text-decoration:none}
.tbtn:visited{color:var(--ink)}
.tbtn:active{box-shadow:var(--pressed)}

.menu{display:flex;flex-wrap:wrap;gap:0;padding:2px 2px 3px;border-bottom:1px solid var(--shade);box-shadow:0 1px 0 var(--hi)}
.menu a{color:var(--ink);text-decoration:none;padding:3px 9px}
.menu a:visited{color:var(--ink)}
.menu a:hover,.menu a[aria-current]{background:var(--sel);color:#fff}

.body{padding:12px 12px 14px}
.body>*+*{margin-top:12px}
.body p{max-width:84ch}

/* шапка мастера: белая полоса с H1 */
.head{background:var(--hi);margin:2px 0 0;padding:14px 16px 15px;border-bottom:1px solid var(--shade);
  box-shadow:0 1px 0 var(--hi);display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
.head h1{font:700 22px/1.2 var(--font);margin-bottom:6px}
.head p{max-width:76ch}

/* ---------- элементы управления ---------- */
.btn{appearance:none;border:0;border-radius:0;background:var(--face);color:var(--ink);font:var(--fs)/1 var(--font);
  min-height:30px;min-width:92px;padding:0 14px;box-shadow:var(--raised);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:visited{color:var(--ink)}
.btn:active{box-shadow:var(--pressed);padding:1px 13px 0 15px}
.btn.def{box-shadow:var(--raised),0 0 0 1px var(--ink);font-weight:700}
.btn.def:active{box-shadow:var(--pressed),0 0 0 1px var(--ink)}
.btn[disabled]{color:var(--shade);text-shadow:1px 1px var(--hi);cursor:default}

.field{appearance:none;border:0;border-radius:0;background:var(--hi);color:var(--ink);font:16px/1.2 var(--font);
  height:32px;padding:0 8px;box-shadow:var(--sunken);width:100%;min-width:0}
.field::placeholder{color:#5f5f5f}
.field:focus{outline:0}

.row{display:flex;gap:8px;align-items:center}
.lbl{display:block;margin-bottom:4px}

fieldset{border:0;margin:0;padding:10px 12px 11px;position:relative;
  box-shadow:inset 0 0 0 1px var(--shade),inset 1px 1px 0 1px var(--hi),1px 1px 0 var(--hi)}
legend{padding:0 4px;margin-left:-2px;background:var(--face)}

.radio{display:inline-flex;align-items:center;gap:7px;margin-right:18px;cursor:pointer;min-height:24px}
.radio input{appearance:none;margin:0;width:14px;height:14px;border-radius:50%;background:var(--hi);flex:none;
  box-shadow:inset 1px 1px var(--shade),inset -1px -1px var(--hi),inset 2px 2px var(--dark),inset -2px -2px var(--lite)}
.radio input:checked{background:radial-gradient(circle,var(--ink) 0 2.2px,var(--hi) 2.6px)}

.note{color:#222;font-size:13px}

/* результат: список качеств, ход загрузки */
.list{background:var(--hi);box-shadow:var(--sunken);padding:3px;margin:0;list-style:none}
.list li{display:flex;justify-content:space-between;gap:12px;padding:3px 7px;cursor:default}
.list li[aria-selected=true]{background:var(--sel);color:#fff;outline:1px dotted #ffff80;outline-offset:-1px}
.list li span:last-child{font-variant-numeric:tabular-nums}

.meter{height:22px;background:var(--hi);box-shadow:var(--sunken);padding:3px}
.meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--sel) 0 11px,transparent 11px 13px)}
.meter.run i{width:100%;clip-path:inset(0 38% 0 0)}
@media (prefers-reduced-motion:reduce){.meter.run i{transition:none}}

.demo{display:none}
.demo.on{display:block}
.demo>*+*{margin-top:8px}
.demo-tag{display:inline-block;background:var(--tip);border:1px solid var(--ink);padding:1px 6px;font-size:12px}

/* строка состояния */
.status{display:flex;gap:2px;padding-top:3px}
.status span{box-shadow:var(--status);padding:2px 7px;min-height:22px;white-space:nowrap}
.status span:first-child{flex:1;white-space:normal}

/* ---------- таблица-список ---------- */
.lv{background:var(--hi);box-shadow:var(--sunken);padding:2px;overflow-x:auto}
.lv table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.lv th{background:var(--face);box-shadow:var(--raised);font-weight:400;text-align:left;padding:4px 8px;white-space:nowrap}
.lv td{padding:4px 8px;vertical-align:top;border-bottom:1px dotted #b8b8b8}
.lv tr:last-child td{border-bottom:0}
.lv td:first-child{white-space:nowrap}
.lv .no{color:var(--stop)}
.lv code{background:#efefef;padding:0 3px}

/* ---------- шаги мастера ---------- */
.steps{list-style:none;display:grid;gap:10px;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;display:grid;place-items:center;
  background:var(--face);box-shadow:var(--raised);font-weight:700}
.steps h3{font:700 var(--fs)/1.35 var(--font);margin-bottom:2px}
.shot{margin:10px 0 0;background:var(--face);border:2px solid var(--ink);color:#222;font-size:12px}
.shot img{display:block;width:100%;height:auto;border-bottom:2px solid var(--ink)}
.shot figcaption{padding:5px 8px 6px}

/* ---------- возможности ---------- */
.feat{background:var(--hi);box-shadow:var(--sunken);padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.feat h3{font:700 var(--fs)/1.35 var(--font);margin-bottom:2px}
.feat.one{grid-template-columns:1fr}
.plain{background:var(--hi);box-shadow:var(--sunken);padding:10px 14px 10px 32px;margin:0}
.plain li{padding:2px 0;list-style:square}

/* ---------- значки-ссылки, как в папке ---------- */
.icons{background:var(--hi);box-shadow:var(--sunken);padding:14px 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.icons a{display:grid;justify-items:center;align-content:start;gap:6px;padding:8px 6px;color:var(--ink);text-decoration:none;text-align:center}
.icons a:visited{color:var(--ink)}
.icons a b{font-weight:400;padding:1px 4px}
.icons a:hover b,.icons a:focus-visible b{background:var(--sel);color:#fff;outline:1px dotted #ffff80}
.icons a small{font-size:12px;color:#333;max-width:22ch;line-height:1.35}

/* ---------- дерево вопросов ---------- */
.tree{background:var(--hi);box-shadow:var(--sunken);padding:8px 10px}
.tree details{padding:2px 0}
.tree summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:15px 1fr;gap:8px;align-items:start;padding:3px 0}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:"";width:11px;height:11px;margin-top:5px;border:1px solid var(--shade);
  background:linear-gradient(var(--ink),var(--ink)) center/5px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 5px no-repeat,var(--hi)}
.tree details[open]>summary::before{background:linear-gradient(var(--ink),var(--ink)) center/5px 1px no-repeat,var(--hi)}
.tree summary h3{font:400 var(--fs)/1.5 var(--font)}
.tree details[open]>summary h3{font-weight:700}
.tree details p{margin:0 0 6px 23px;padding-left:10px;border-left:1px dotted var(--shade);max-width:66ch}

.about{color:var(--ink);font-size:13px;text-align:center;background:var(--face);box-shadow:var(--window);padding:7px 12px;justify-self:center}
.about a{color:var(--link)}

/* ---------- телефон ---------- */
@media (max-width:640px){
  :root{--fs:15px}
  .desk{padding:0 0 28px;gap:12px}
  .win{padding:3px 3px 4px}
  .head{grid-template-columns:1fr;padding:12px 12px 13px}
  .head svg{display:none}
  .head h1{font-size:21px}
  .body{padding:11px 9px 12px}
  .btn{min-height:44px}
  .field{height:44px}
  .row{flex-wrap:wrap}
  .btn{white-space:nowrap}
  .btn.def{flex:1 1 100%}
  .row.url .field{flex:1 1 100%}
  .row.url .btn{flex:1}
  .radio{min-height:44px;margin-right:14px}
  .radio input{width:18px;height:18px}
  .radio input:checked{background:radial-gradient(circle,var(--ink) 0 3px,var(--hi) 3.4px)}
  .menu a{padding:10px 9px}
  .tbtn{width:30px;height:26px}
  .feat{grid-template-columns:1fr;padding:12px}
  .icons{grid-template-columns:1fr;padding:6px}
  .icons a{grid-template-columns:40px 1fr;justify-items:start;text-align:left;column-gap:12px;row-gap:2px;align-items:start}
  .icons a svg{grid-row:span 2}
  .icons a b{padding:1px 0}
  .icons a small{max-width:none}
  .list li{padding:9px 8px}
  .tree summary{padding:9px 0}
  .tree summary::before{margin-top:6px}
  .status{flex-wrap:wrap}
  .status span{flex:1 1 auto}
  .status span:first-child{flex:1 1 100%}
  .lv th{white-space:normal}
  .lv th,.lv td{padding:5px 6px}
  .lv td:first-child{white-space:normal}
  .about{padding:0 12px}
}

/* ---------- результат и стадии загрузки ---------- */
[hidden]{display:none!important}
.res{margin-top:12px;padding:10px;box-shadow:inset 0 0 0 1px var(--shade),inset 1px 1px 0 1px var(--hi),1px 1px 0 var(--hi)}
.res>*+*{margin-top:8px}
.res-t{overflow-wrap:anywhere}
.res-t span{color:#222}
.list.off{background:var(--face)}
.list.off li{color:#404040}
.list.off li[aria-selected=true]{background:var(--shade);color:#fff;outline:0}
.list li[tabindex]{cursor:pointer}
.list li:focus-visible{outline:1px dotted var(--ink);outline-offset:-2px}
.meter i{transition:none}
.meter.indet{overflow:hidden}
.meter.indet i{width:28%;clip-path:none;animation:w98run 1.6s steps(18,end) infinite}
@keyframes w98run{from{transform:translateX(-100%)}to{transform:translateX(360%)}}
@media (prefers-reduced-motion:reduce){.meter.indet i{animation:none;width:100%;opacity:.45}}
.msg{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:8px 10px;background:var(--hi);box-shadow:var(--sunken)}
.msg.error{color:var(--stop)}
.msg-ic svg{display:block}
#dlStats{padding-top:6px}
#dlStats span{flex:1}
.btn[disabled]{box-shadow:var(--raised)}
/* служебные страницы */
.doc h2{font:700 15px/1.35 var(--font);margin-top:16px}
.doc h3{font:700 var(--fs)/1.4 var(--font);margin-top:10px}
.doc p,.doc li{max-width:84ch}
.doc ul{padding-left:20px}
.doc>*+*{margin-top:8px}

/* список роликов плейлиста и канала */
.lv.pl{max-height:420px;overflow-y:auto}
.lv.pl td{vertical-align:middle}
.lv.pl .pl-n{color:#404040;width:1%;white-space:nowrap}
.lv.pl .pl-t{white-space:normal;overflow-wrap:anywhere}
.lv.pl .pl-d{width:1%;white-space:nowrap;font-variant-numeric:tabular-nums}
.lv.pl .pl-a{width:1%;white-space:nowrap;text-align:right}
.lv.pl .btn{min-height:26px;min-width:0;padding:0 10px}
.lv.pl tr.cur td{background:var(--sel);color:#fff}
.lv.pl tr.done .pl-t{color:#006000}
.lv.pl tr.done .pl-t::before{content:"\2713\00a0"}
.about+.about{margin-top:-12px}
@media (max-width:640px){
  .lv.pl .pl-d{display:none}
  .lv.pl .btn{min-height:40px}
}