/* ===========================================================================
   base.eltonlabs.org
   Вёрстка как у книги: оглавление, поля, волосяные линии.
   Никаких карточек, ярлыков над заголовками и цветных значков.
   =========================================================================== */

@import url('/fonts/fonts.css');

:root{
  --bg:#fafafa;   --paper:#fff;   --wash:#f2f2f0;
  --line:#e5e5e3; --line-2:#d6d6d2;
  --ink:#1a1a1a;  --ink-2:#5f6470; --ink-3:#8e8e94; --ink-4:#b4b4b0;
  --mark:#10b981;
  --rail:272px;   --measure:680px;
  --font:Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.7;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;
}
::selection{background:#e8e8e4}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.021em}
.dim{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums;color:var(--ink-4)}

#scan{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:99;
  opacity:0;transition:width .3s var(--ease),opacity .25s}
#scan.on{opacity:.55}

/* ============================  ВХОД  ===================================== */
.gate{min-height:100dvh;display:grid;place-items:center;padding:30px}
.gate-card{width:100%;max-width:352px}
.gate-mark{font-size:15px;font-weight:600;margin-bottom:42px}
.gate h1{font-size:24px;line-height:1.3;margin-bottom:9px}
.gate p.lead{color:var(--ink-2);font-size:15px;margin:0 0 26px}
.field{margin-bottom:9px}
.field input{
  width:100%;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;
  padding:12px 13px;color:var(--ink);outline:0;transition:border-color .15s;
}
.field input::placeholder{color:var(--ink-4)}
.field input:focus{border-color:var(--ink-3)}
.btn{width:100%;padding:12px 16px;border-radius:6px;background:var(--ink);color:#fafafa;
  font-weight:500;font-size:15px;transition:background .15s,opacity .15s}
.btn:hover{background:#000}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--wash);color:var(--ink)}
.note{font-size:13.5px;color:var(--ink-3);margin-top:15px;line-height:1.55}
.err{font-size:14px;color:#b34a34;margin-top:11px;min-height:20px}
.ok{font-size:14px;color:var(--ink-2);margin-top:11px}

.code-row{display:flex;gap:7px;margin-bottom:11px}
.code-row input{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:18px;
  padding:13px 0;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;color:var(--ink);outline:0;
  transition:border-color .15s}
.code-row input:focus{border-color:var(--ink)}
.code-row.shake{animation:shake .38s var(--ease)}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}

/* ============================  КАРКАС  =================================== */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100dvh}

.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.rail-head{padding:28px 26px 14px}
.rail-head b{font-weight:600;font-size:15px}
.rail-head span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}

.nav{flex:1;overflow-y:auto;padding:8px 0 14px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.nav::-webkit-scrollbar{width:7px}
.nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:7px;border:2px solid transparent;background-clip:content-box}
.nav-group{font-size:12.5px;color:var(--ink-4);padding:18px 26px 5px}

.item{display:flex;align-items:baseline;gap:9px;padding:6px 26px;color:var(--ink-2);
  font-size:15px;transition:color .13s;border-left:2px solid transparent}
.item:hover{color:var(--ink)}
.item.on{color:var(--ink);font-weight:500;border-left-color:var(--ink)}
.item .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.item.locked{color:var(--ink-4)}
.item.locked:hover{color:var(--ink-4);cursor:default}
.item .tail{font-size:12.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;flex:none}
.item.done .tail{color:var(--mark)}

.rail-foot{border-top:1px solid var(--line);padding:14px 26px 18px}
.who .n{font-size:14px}
.who .e{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.lang button{font-size:12.5px;color:var(--ink-4);padding:0 5px 0 0;transition:color .13s}
.lang button:hover{color:var(--ink-2)}
.lang button.on{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.exit{font-size:12.5px;color:var(--ink-3)}
.exit:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.main{min-width:0;padding:72px 56px 120px}
.wrap{max-width:var(--measure);margin:0 auto;min-width:0}
.page{animation:rise .3s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* заголовок страницы: над ним обычная строка-путь, не ярлык */
.trail{font-size:14px;color:var(--ink-3);margin-bottom:12px}
.trail a:hover{text-decoration:underline;text-underline-offset:3px}
.head{margin-bottom:38px}
.head h1{font-size:32px;line-height:1.22}
.head .sub{color:var(--ink-2);font-size:16.5px;margin-top:13px;max-width:60ch}

.lede{font-size:18px;line-height:1.65;color:var(--ink);margin:0 0 22px;max-width:58ch}
.say{color:var(--ink-2);margin:0 0 16px;max-width:62ch}

/* ---- оглавление: номер, название, точки, хвост ------------------------- */
.toc{border-top:1px solid var(--line);margin-top:34px}
.row{display:grid;grid-template-columns:26px 1fr auto;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.row .n{font-size:13.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.row .t{display:inline;font-size:17px;font-weight:500}
.row:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.row .d{display:block;color:var(--ink-2);font-size:15px;margin-top:2px;max-width:56ch;line-height:1.55}
.row .tail{font-size:13.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.row.off{color:var(--ink-3)}
.row.off .t{font-weight:400;color:var(--ink-3)}
.row.off:hover .t{text-decoration:none}
.row.off .d{color:var(--ink-3)}
.row .t .tick{color:var(--mark);font-weight:400;margin-left:7px;font-size:14px}

/* ---- плеер -------------------------------------------------------------- */
.player{position:relative;border-radius:4px;overflow:hidden;background:#000;border:1px solid var(--line-2)}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.wm{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.wm span{position:absolute;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.17);
  white-space:nowrap;animation:drift 47s linear infinite}
@keyframes drift{0%{left:6%;top:12%}25%{left:62%;top:74%}50%{left:12%;top:80%}75%{left:68%;top:20%}100%{left:6%;top:12%}}
.player-skeleton{position:absolute;inset:0;display:grid;place-items:center;background:#0f0f0f;z-index:3;transition:opacity .3s}
.player-skeleton.gone{opacity:0;pointer-events:none}
.spin{width:22px;height:22px;border:1.5px solid #333;border-top-color:#aaa;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.pnav{display:flex;justify-content:space-between;gap:20px;margin-top:34px;border-top:1px solid var(--line);padding-top:18px;font-size:15px}
.pnav a{color:var(--ink-2);max-width:47%}
.pnav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pnav a.next{text-align:right;margin-left:auto}

/* ---- текст гайдов ------------------------------------------------------- */
.doc{font-size:17px;line-height:1.75}
.doc h2{font-size:21px;margin:44px 0 12px}
.doc h3{font-size:17.5px;margin:28px 0 7px}
.doc p{margin:0 0 15px}
.doc ul,.doc ol{margin:0 0 17px;padding-left:21px}
.doc li{margin-bottom:5px}
.doc code{font-family:var(--mono);font-size:.85em;background:var(--wash);padding:.1em .35em;border-radius:3px}
.doc pre{background:var(--wash);border-radius:5px;padding:14px 16px;overflow-x:auto;margin:0 0 18px}
.doc pre code{background:none;padding:0;font-size:13px;line-height:1.6}
.doc img{max-width:100%;border-radius:4px;border:1px solid var(--line);display:block;margin:20px 0}
.doc a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2)}
.doc a:hover{text-decoration-color:var(--ink)}
.doc blockquote{margin:0 0 18px;padding-left:16px;border-left:2px solid var(--line-2);color:var(--ink-2)}
.doc hr{border:0;height:1px;background:var(--line);margin:30px 0}

/* врезка — как заметка на полях, без цветной рамки */
.callout{background:var(--wash);border-radius:5px;padding:16px 18px;margin:0 0 18px}
.callout .ct{font-weight:600;font-size:16px;margin-bottom:4px}
.callout p:last-child,.callout ol:last-child,.callout ul:last-child{margin-bottom:0}


/* ---- закрытый раздел ---------------------------------------------------- */
.sealed{border-top:1px solid var(--line);padding-top:26px;color:var(--ink-2)}
.sealed p{margin:0 0 12px;max-width:56ch}

/* ---- мобильная ---------------------------------------------------------- */
.burger{display:none;position:fixed;z-index:40;left:14px;top:14px;font-size:15px;color:var(--ink-2)}
.scrim{display:none;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.22);opacity:0;transition:opacity .25s}
.scrim.on{opacity:1}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .burger{display:block}
  .rail{position:fixed;z-index:30;width:262px;background:var(--bg);transform:translateX(-100%);
    transition:transform .28s var(--ease)}
  .rail.open{transform:none}
  .scrim.shown{display:block}
  .main{padding:64px 22px 80px}
  .head h1{font-size:26px}
  .row{grid-template-columns:22px 1fr;gap:12px}
  .row .tail{grid-column:2;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- блоки внутри раздела ------------------------------------------------ */
.block{margin-top:52px}
.block:first-of-type{margin-top:38px}
.block h2{font-size:20px;font-weight:500}
.block .say{margin-top:6px;margin-bottom:0}
.block .toc{margin-top:16px}

/* название строки и галочка «просмотрено» */
.row .tt{font-size:17px;font-weight:500}
.row:hover .tt{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.row.off .tt{font-weight:400;color:var(--ink-3)}
.row.off:hover .tt{text-decoration:none}
.row .tick{color:var(--mark);margin-left:7px;font-size:13px}

/* ---- кнопка «дальше» ---------------------------------------------------- */
.nextbox{display:block;margin-top:40px;padding:20px 22px;background:var(--wash);border-radius:8px;
  transition:background .15s}
.nextbox:hover{background:#ececea}
.nextbox .lbl{display:block;font-size:13px;color:var(--ink-3);margin-bottom:3px}
.nextbox .ttl{display:block;font-size:18px;font-weight:500}

.donebox{margin-top:40px;padding:24px 22px;background:var(--wash);border-radius:8px}
.donebox p{margin:0 0 8px}
.donebox .say{margin-bottom:16px;max-width:52ch}
.donebox .btn-big{width:auto;display:inline-block}

/* ---- скачивание --------------------------------------------------------- */
.getbox{margin-top:6px}
.btn-big{display:inline-block;width:auto;padding:15px 26px;font-size:16px;border-radius:7px}
.getbox .note{max-width:56ch}

/* ---- ссылка на основной сайт -------------------------------------------- */
.rail-foot .site{display:block;font-size:13px;color:var(--ink-3);margin-bottom:12px}
.rail-foot .site:hover{color:var(--ink)}
.item .lk{font-size:12px;color:var(--ink-4)}


.doc ol.tight{margin:0 0 22px;padding-left:22px}
.doc ol.tight li{margin-bottom:7px;color:var(--ink-2)}

/* ---- вопросы: тише и уже, ничего никуда не уезжает ---------------------- */
.qa{border-top:1px solid var(--line);margin-top:4px}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:13px 0;
  display:grid;grid-template-columns:1fr 18px;gap:14px;align-items:baseline;
  font-size:15.5px;color:var(--ink);transition:color .13s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#000}
.qa summary:hover .q{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.qa summary .sign{font-size:15px;color:var(--ink-4);text-align:right;line-height:1.4}
.qa details[open] summary{font-weight:500}
.qa details[open] summary .sign{color:var(--ink-2)}
.qa .peek{display:block;font-size:14px;color:var(--ink-3);margin-top:2px;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa details[open] .peek{display:none}
.qa .ans{padding:0 0 16px;color:var(--ink-2);font-size:15.5px;line-height:1.7;max-width:60ch}
.qa .ans p{margin:0 0 10px}
.qa .ans p:last-child{margin:0}
.qa .ans pre{margin:10px 0;font-size:12.5px}

/* ---- заголовки блоков: тихая подпись, а не второй заголовок ------------- */
.block{margin-top:56px}
.block:first-of-type{margin-top:34px}
.block > h2{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:0}
.block .toc{border-top:0;margin-top:0}

/* свёрнутый блок «старая версия» */
.fold{margin-top:56px;border-top:1px solid var(--line)}
.fold > summary{list-style:none;cursor:pointer;padding:16px 0;font-size:14px;color:var(--ink-3);
  display:flex;align-items:center;gap:9px}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary:hover{color:var(--ink)}
.fold > summary .sign{font-size:15px;color:var(--ink-4)}
.fold[open] > summary{color:var(--ink)}
.fold .toc{border-top:0;margin-top:0;padding-bottom:10px}

/* ---- разведём размеры: заголовок страницы заметно крупнее --------------- */
.head h1{font-size:40px;letter-spacing:-.032em;line-height:1.12}
.head .sub{font-size:16px;margin-top:10px;color:var(--ink-3)}
.doc h2{font-size:15px;font-weight:500;color:var(--ink-3);margin:44px 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.doc h3{font-size:16.5px;font-weight:500;color:var(--ink);margin:26px 0 7px}