/* Сайт jettunnel.cc в стиле веб-аппа: группы ячеек как в Telegram, синий акцент, утка */
:root{
  color-scheme:dark;
  --bg:#1C1C1D;--cell:#2C2C2E;--cell-press:#3A3A3C;--text:#FFFFFF;--hint:#8E8E93;
  --sep:rgba(255,255,255,.08);--accent:#3E8BFF;--accent-press:#2F78E8;
  --accent-tint:rgba(62,139,255,.17);--accent-text:#7AB0FF;--ok:#34C759;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Courier New",monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:76px}
body{font:17px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent-text);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
::selection{background:var(--accent);color:#fff}
.fi{width:1em;height:1em;display:block;flex:none}

/* навбар */
.bar{position:sticky;top:0;z-index:20;background:rgba(28,28,29,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep)}
.bar-in{max-width:1080px;margin:0 auto;height:56px;padding:0 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:17px}
.brand-logo{width:34px;height:34px;border-radius:10px;display:block;flex:none}
.back .brand-logo{width:28px;height:28px;border-radius:8px;margin:0 8px 0 2px}
.back{display:flex;align-items:center;gap:2px;color:var(--accent-text);font-size:17px;margin-left:-6px}
.back .fi{font-size:26px;transform:scaleX(-1)}
.bar .pill{margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:17px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
.pill:hover{background:var(--accent-press)}
.pill .fi{font-size:15px}

.page{max-width:1080px;margin:0 auto;padding:8px 16px calc(32px + var(--safe-b))}
.col{max-width:560px;margin:0 auto}

/* общие элементы веб-аппа */
.sh{font-size:13px;font-weight:400;color:var(--hint);text-transform:uppercase;letter-spacing:.02em;margin:26px 16px 8px}
.caption{font-size:14px;color:var(--hint);margin:8px 16px 0;line-height:1.4}
.group{background:var(--cell);border-radius:14px;overflow:hidden}
.cell{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:11px 16px;position:relative;color:var(--text)}
a.cell:hover{background:rgba(255,255,255,.035)}
a.cell:active{background:var(--cell-press)}
.cell+.cell::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--sep)}
.cell-ic{font-size:24px;color:var(--accent);flex:none;width:26px;display:grid;place-items:center}
.cell-ic img{width:28px;height:28px;border-radius:50%;display:block}
.cell-copy{flex:1;min-width:0}
.cell-copy strong{display:block;font-size:17px;font-weight:500}
.cell-copy span{display:block;font-size:14px;color:var(--hint);margin-top:1px}
.cell-copy span a{color:var(--accent-text)}
.chev{font-size:18px;color:rgba(255,255,255,.28)}
.n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center}
.save{flex:none;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-tint);border-radius:7px;padding:2px 7px}
.fill{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:54px;border-radius:14px;background:var(--accent);color:#fff;font-weight:600;font-size:17px}
.fill:hover{background:var(--accent-press)}
.fill .fi{font-size:19px}
.tint{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;border-radius:14px;background:var(--accent-tint);color:var(--accent-text);font-weight:600}
.tint:hover{background:rgba(62,139,255,.26)}
.tint .fi{font-size:18px}

/* главная: слева «PRO»-экран из шторки, справа список */
.home{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.hero{text-align:center;padding-top:6px}
.duck{width:220px;height:220px;margin:0 auto}
.hero h1{display:flex;align-items:center;justify-content:center;gap:10px;font-size:30px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.pro{font-size:18px;font-weight:700;color:#fff;background:var(--accent);border-radius:9px;padding:3px 9px;letter-spacing:0}
.hero .lead{color:var(--hint);font-size:17px;margin:8px 20px 0}
.timeline{list-style:none;margin:28px 6px 0;text-align:left}
.timeline li{position:relative;padding:0 0 22px 46px}
.timeline li::before{content:"";position:absolute;left:4px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:9px;top:25px;bottom:2px;width:4px;border-radius:2px;background:var(--accent)}
.timeline strong{display:block;font-size:18px;font-weight:600}
.timeline p{color:var(--hint);font-size:16px;margin-top:3px;line-height:1.35}
.hero .fill{margin-top:6px}
.hero .caption{text-align:center}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dl a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:92px;border-radius:14px;padding:0 8px;
  background:var(--accent-tint);color:var(--accent-text);font-weight:600;font-size:15px;text-align:center;line-height:1.2}
.dl a:hover{background:rgba(62,139,255,.26)}
.dl .fi{font-size:28px}
.link{font:15px/1.5 var(--mono);padding:14px 16px;word-break:break-all;color:var(--text)}
.foot{margin:36px 16px 0;font-size:13px;color:rgba(142,142,147,.75);text-align:center;line-height:1.6}
.foot a{color:inherit}
.foot a:hover{color:var(--text)}

@media (min-width:960px){
  .page{padding-top:28px}
  .home{grid-template-columns:420px minmax(0,560px);justify-content:center;gap:72px;align-items:start}
  .hero{position:sticky;top:84px;padding-top:0}
  .duck{width:240px;height:240px}
  .hero h1{font-size:34px}
  .home-list>.sh:first-child{margin-top:4px}
}
@media (min-width:960px) and (max-height:819px){.hero{position:static}}

/* документы */
.docs{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.side{display:none}
.docs-nav{display:flex;gap:2px;padding:2px;border-radius:10px;background:rgba(118,118,128,.24);margin-top:8px}
.docs-nav a,.seg a{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 6px;border-radius:8px;
  color:var(--text);font-size:13px;font-weight:500;text-align:center;line-height:1.15}
.docs-nav a[aria-current=page],.seg a[aria-current=page]{background:#636366;font-weight:600}
.docs-nav a:not([aria-current]):hover,.seg a:not([aria-current]):hover{background:rgba(255,255,255,.06)}
.title{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:24px 16px 0;hyphens:auto;-webkit-hyphens:auto}
.date{font-size:14px;color:var(--hint);margin:6px 16px 0}
.intro{font-size:16px;color:var(--hint);line-height:1.5;margin:14px 16px 0}
.toc{margin-top:22px;background:var(--cell);border-radius:14px;overflow:hidden}
.toc summary{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;font-weight:500}
.toc summary::-webkit-details-marker{display:none}
.toc summary .fi{font-size:24px;color:var(--accent)}
.toc summary .chev{margin-left:auto;transition:transform .2s}
.toc[open] summary .chev{transform:rotate(90deg)}
.contents{counter-reset:c}
.contents a{counter-increment:c;display:flex;align-items:center;gap:14px;min-height:46px;padding:10px 16px;position:relative;color:var(--text);font-size:16px;line-height:1.3}
.contents a::before{content:counter(c);flex:none;width:26px;text-align:center;color:var(--accent-text);font-size:15px;font-variant-numeric:tabular-nums}
.contents a::after{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--sep)}
.toc .contents a:first-child::after{left:0}
.contents a:hover{background:rgba(255,255,255,.035)}
.doc article{scroll-margin-top:76px}
.doc article h2{font-size:13px;font-weight:400;color:var(--hint);text-transform:uppercase;letter-spacing:.02em;line-height:1.35;margin:26px 16px 8px}
.doc article h2 span{color:var(--accent-text);margin-right:2px}
.doc article p{background:var(--cell);border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88);overflow-wrap:anywhere}
.doc .ask{margin-top:26px}

@media (min-width:960px){
  .docs{grid-template-columns:300px minmax(0,640px);justify-content:center;gap:48px;align-items:start}
  .side{display:block;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;padding-bottom:16px;scrollbar-width:thin}
  .side .contents a{font-size:15px;min-height:42px}
  .side .contents a:first-child::after{display:none}
  .docs-nav,.toc{display:none}
  .side-docs a{display:flex;align-items:center;gap:14px;min-height:48px;padding:10px 16px;position:relative;color:var(--text);font-size:16px}
  .side-docs a+a::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--sep)}
  .side-docs a[aria-current=page]{color:var(--accent-text);font-weight:500}
  .side-docs a:hover{background:rgba(255,255,255,.035)}
  .title{font-size:36px;margin-top:6px}
}

/* инструкции */
.seg{display:flex;gap:2px;padding:2px;border-radius:10px;background:rgba(118,118,128,.24);margin-top:8px}
.seg .fi{font-size:14px}
.steps .cell{align-items:flex-start;padding-top:14px;padding-bottom:14px}
.steps .n{margin-top:1px}
.steps .cell-copy span{font-size:15px;line-height:1.45;margin-top:3px}
.steps b{color:var(--text);font-weight:500}
.note{display:flex;gap:12px;align-items:flex-start;margin-top:10px;border-radius:14px;padding:13px 16px;background:var(--accent-tint);color:rgba(255,255,255,.9);font-size:15px;line-height:1.45}
.note .fi{font-size:20px;color:var(--accent-text);margin-top:1px}
.help-cta{margin-top:26px}

@media (max-width:340px){.bar .pill span:last-child{display:none}}
@media (max-width:420px){
  .dl a{font-size:14px}
  .title{font-size:27px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media print{
  body,html{background:#fff;color:#000}
  .bar,.side,.docs-nav,.toc,.ask,.foot{display:none}
  .doc article p{background:none;padding:0;color:#000}
  .doc article h2,.intro,.date{color:#333}
}