:root{--bg:#faf9f7;--card:#ffffff;--ink:#1a1a1e;--dim:#6e6e78;--accent:#e8401f;--line:#e6e3de}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word}
body{background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;padding:48px 24px 96px}
.wrap{max-width:825px;margin:0 auto}
a.back{color:var(--dim);text-decoration:none;font-size:14px}
a.back:hover{color:var(--accent)}
header.role{margin:18px 0 8px}
header.role h1{font-size:38px;line-height:1.15;letter-spacing:-.02em}
header.role .ru-title{color:var(--dim);font-size:20px;margin-top:6px}
.loc{display:inline-block;margin-top:18px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.loc b{color:var(--accent)}
.langbar{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.row{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.cell h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:12px}
.cell p{margin-top:10px}
.cell p:first-of-type{margin-top:0}
.cell .pitch{font-size:16.5px}
.cell ul{margin:4px 0 0 18px}
.cell li{margin-top:7px}
footer{color:var(--dim);font-size:14px;margin-top:48px;text-align:center}
@media(max-width:800px){.row,.langbar{grid-template-columns:1fr;gap:14px}}

/* hub */
.hub h1{font-size:44px;line-height:1.1;letter-spacing:-.02em}
.hub p.sub{color:var(--dim);margin-top:12px;font-size:18px}
.hub ul.jobs{list-style:none;margin-top:32px}
.hub ul.jobs li{margin-top:14px}
.hub ul.jobs a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 26px;color:var(--ink);text-decoration:none;font-size:20px}
.hub ul.jobs a:hover{border-color:var(--accent)}
.hub ul.jobs span{display:block;color:var(--dim);font-size:14px;margin-top:4px}
.cell{box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* one card per vacancy */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;margin-top:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.cols{display:grid;grid-template-columns:1fr}
.col{min-width:0;padding:0}
.col:first-child{padding-left:0}
.col + .col{border-left:1px solid var(--line)}
.col:last-child{padding-right:0}
.col h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:28px 0 10px}
.col h2:first-child{margin-top:0}
.col p{margin-top:10px}
.col .pitch{font-size:16.5px}
.col ul{margin:6px 0 0 18px}
.col ol{margin:6px 0 0 22px;padding-left:4px}
.col ol li{padding-left:4px}
.col li{margin-top:7px}
.col a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(232,64,31,.35)}
.col a:hover{border-bottom-color:var(--accent)}
.refs-tbd{color:var(--dim)}
.archived h1,.archived .ru-title{color:var(--dim)}
.archived .loc{color:var(--dim);text-decoration:line-through}
.archived-link{color:var(--dim) !important}
.archived-card,.archived-card p,.archived-card li,.archived-card h2{color:var(--dim);text-decoration:line-through}
.archived-card a{color:var(--dim);border-bottom-color:var(--line);text-decoration:line-through}
@media(max-width:800px){
  .cols{grid-template-columns:1fr}
  .col{padding:0}
  .col + .col{border-left:none;border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
  body{padding:20px 14px 56px;font-size:16px}
  a.back{display:inline-block;padding:8px 0;font-size:15px}
  .card{padding:18px 16px;border-radius:12px;margin-top:14px}
  .col h2{font-size:13px;margin:22px 0 8px}
  .col .pitch{font-size:16px}
  .col li{margin-top:9px}
  .col a{overflow-wrap:anywhere}
  table.creators{width:100% !important;min-width:0 !important;font-size:14px}
  footer{margin-top:36px}
  header.role h1{font-size:26px}
  header.role .ru-title{font-size:17px}
  .loc{font-size:13px;line-height:1.5}
  .langbar{display:none}
}

/* test-task title above its card */
header.role.tt-head{margin:48px 0 16px}
header.role.tt-head h1{font-size:30px}
@media(max-width:800px){
  header.role.tt-head{margin:34px 0 10px}
  header.role.tt-head h1{font-size:22px}
}

/* closed role banner */
.closed-note{background:#ff2d1a;border-color:#ff2d1a;color:#fff}
.closed-note .pitch{margin:0}
.closed-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.6);text-decoration:none}

/* step-by-step guide */
html{scroll-behavior:smooth}
header.role.tt-head[id]{scroll-margin-top:16px}
.guide-toc{margin:12px 0 0 22px}
.guide-toc li{margin-top:6px}
.guide .col p{margin-top:12px}
.guide code{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f1efea;padding:1px 6px;border-radius:4px}
.guide pre{margin-top:12px;background:#16161a;color:#f2f2f2;padding:14px 16px;border-radius:10px;overflow-x:auto}
.guide pre code{background:none;padding:0;color:inherit;font-size:13px;line-height:1.6;white-space:pre}
.guide .shot{margin:18px 0 6px}
.guide .shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.guide .shot figcaption{margin-top:7px;font-size:13px;color:var(--dim)}
.guide .say{margin-top:16px;padding:12px 14px;border-left:3px solid var(--ink);background:#f6f4f0;border-radius:0 8px 8px 0}
.guide .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:16px}
.guide .flow div{border:1px solid var(--ink);border-radius:10px;padding:12px}
.guide .flow.four{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
.guide .flow b{display:block}
.guide .flow span{display:block;font-size:13px;color:var(--dim);margin-top:3px}
.guide .flow i{align-self:center;font-style:normal;font-size:20px}
.guide .browser{margin-top:16px;border:1px solid var(--ink);border-radius:10px;overflow:hidden}
.guide .browser .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--ink);background:#f6f4f0}
.guide .browser .bar span{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink)}
.guide .browser .bar em{font:13px ui-monospace,Menlo,monospace;font-style:normal;margin-left:8px;padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
.guide .browser .page{padding:34px 18px;text-align:center;font-size:16px}
.guide .browser .page small{display:block;margin-top:6px;font-size:13px;color:var(--dim)}
@media(max-width:800px){
  .guide .flow,.guide .flow.four{grid-template-columns:1fr}
  .guide .flow i{transform:rotate(90deg);justify-self:center}
  .guide pre{font-size:12px}
}

/* contents for guide pages: left rail on wide screens, chips on phones */
.doc-toc{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 4px;font-size:14px}
.doc-toc a{color:var(--dim);text-decoration:none}
.doc-toc a:hover{color:var(--ink)}
@media(min-width:1340px){
  .doc-toc{position:fixed;top:96px;left:calc(50% - 412px - 232px);width:200px;flex-direction:column;flex-wrap:nowrap;gap:11px;margin:0}
}
@media(max-width:800px){
  .doc-toc{position:sticky;top:0;z-index:5;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:6px -14px 12px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .doc-toc::-webkit-scrollbar{display:none}
  .doc-toc a{flex:none;white-space:nowrap;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
  header.role.tt-head[id]{scroll-margin-top:66px}
}

/* overview diagram on guide pages */
.overview .pipeline{display:grid;grid-template-columns:1fr auto 1.25fr auto 1.5fr auto 1.15fr auto 1fr;gap:8px;align-items:stretch;margin-top:18px}
.overview .pipeline > div{border:1px solid var(--ink);border-radius:10px;padding:11px 10px;display:flex;flex-direction:column;min-width:0}
.overview .pipeline b{font-size:14px;line-height:1.25}
.overview .pipeline span{font-size:12.5px;line-height:1.4;color:var(--dim);margin-top:5px}
.overview .pipeline > i{align-self:center;font-style:normal;font-size:18px}
.overview .pipeline .end{background:var(--ink);color:#fff}
.overview .pipeline .end span{color:#d6d6d6}
.overview .around-label{font-size:13px;color:var(--dim);margin-top:16px}
.overview .around{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.overview .around div{border:1px dashed var(--ink);border-radius:10px;padding:10px;display:flex;flex-direction:column}
.overview .around b{font-size:14px}
.overview .around span{font-size:12.5px;line-height:1.4;color:var(--dim);margin-top:4px}
.overview .glossary{display:grid;grid-template-columns:1fr 1fr;gap:9px 28px;margin-top:4px}
.overview .glossary a{color:var(--ink);text-decoration:none;border-bottom:none;font-size:14.5px;line-height:1.4}
.overview .glossary a:hover b{text-decoration:underline}
.overview .below{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:800px){
  .overview .pipeline{grid-template-columns:1fr}
  .overview .pipeline > i{transform:rotate(90deg);justify-self:center}
  .overview .around,.overview .glossary{grid-template-columns:1fr}
}