/* Curious Lab — шапка и футер, общие для всех страниц, включая гиды со своим оформлением.
   Классы lab-top / lab-foot уникальны, чтобы не пересекаться со стилями гидов.
   Хабы берут цвета из lab.css; у гидов свои --bg/--ink, поэтому там шапке и футеру
   задаются токены сайта по html[data-chrome="light|dark"] — в тон странице гида. */

html[data-chrome] :is(.lab-top,.lab-foot){
  --bg:#F2EDE3;--ink:#15120E;--muted:#5F5A52;--soft:#A09A90;--hair:#DDD6C9;
  --accent:#C4361C;--on-accent:#FFF6EC;--pop:#1F7A5A;--live:#1F7A5A;
  --sans:'Geist','Noto Sans SC',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,'Noto Sans SC',monospace;
  --gut:clamp(16px,3.4vw,48px);--dur-fast:150ms;--ease-out:cubic-bezier(0.16,1,0.3,1);
  -webkit-font-smoothing:antialiased;text-align:left;text-transform:none;letter-spacing:normal;font-style:normal
}
html[data-chrome="dark"] :is(.lab-top,.lab-foot){
  --bg:#110F0C;--ink:#F0E9DC;--muted:#A59E91;--soft:#6B655B;--hair:#2A2620;
  --accent:#FF5B3A;--on-accent:#110F0C;--pop:#5CC49A;--live:#5CC49A
}
/* сброс того, что могут навязать глобальные стили гида (a, p, button …) */
:is(.lab-top,.lab-foot),:is(.lab-top,.lab-foot) *{box-sizing:border-box}
:is(.lab-top,.lab-foot) :is(a,p,span,nav,button,div,b){margin:0;padding:0;border:0;background:none;box-shadow:none;text-shadow:none;
  text-transform:none;max-width:none;float:none;filter:none;font:inherit;letter-spacing:inherit;text-decoration:none}

/* ── Шапка ── */
.lab-top{position:relative;z-index:60;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px var(--gut);font:12px/1 var(--mono);color:var(--muted)}
.lab-top .top-l,.lab-top .top-r{display:flex;align-items:center;gap:16px;min-width:0}
.lab-top .mark{font:600 15px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
/* 龙 — как красная печать */
.lab-top .mark b{display:inline-grid;place-items:center;width:1.4em;height:1.4em;margin-left:.2em;border-radius:3px;background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:.92em;transform:rotate(-4deg);transition:transform .5s var(--ease-out)}
.lab-top .mark:hover b{transform:rotate(0) scale(1.08)}
.lab-top .greeting{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-top .greeting::before{content:"// "}
.lab-top .crumb{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-top .crumb a{color:var(--muted);transition:color var(--dur-fast) ease}
.lab-top .crumb a:hover,.lab-top .crumb a:focus-visible{color:var(--accent)}
.lab-top .top-r > a{color:var(--ink);background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1px;transition:background-size .35s var(--ease-out)}
.lab-top .top-r > a:hover,.lab-top .top-r > a:focus-visible{background-position:0 100%;background-size:100% 1px}
.lab-top .kbd{font:11px/1 var(--mono);color:var(--muted);border:1px solid var(--hair);border-radius:6px;padding:4px 7px;cursor:pointer;
  transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.lab-top .kbd:hover,.lab-top .kbd:focus-visible{color:var(--ink);border-color:var(--ink)}
.lab-top .pulse{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.lab-top .pulse::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);flex-shrink:0;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent);animation:labPulse 1.8s infinite}
@keyframes labPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
/* переключатель языка (i18n.js) — в тон шапке, какой бы ни была страница */
.lab-top .lang-tg{display:inline-flex;align-items:center;gap:1px;font:12px/1 var(--mono);color:var(--soft);position:static;box-shadow:none;background:none;padding:0}
.lab-top .lang-tg button{padding:0 2px;color:var(--soft);opacity:.7;cursor:pointer;text-transform:lowercase}
.lab-top .lang-tg button[aria-pressed="true"]{color:var(--ink);opacity:1}
.lab-top .lang-tg button:hover{color:var(--accent);opacity:1}
.lab-top .lang-tg .sep{opacity:.4}
/* гиды с полноэкранной обложкой: шапка лежит поверх неё, а не сдвигает вниз */
.lab-top.over{position:absolute;top:0;left:0;right:0}
/* переключатель звука (Tom & Jerry) — тихой подписью, как остальная шапка */
.lab-top .snd{display:inline-flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;transition:color var(--dur-fast) ease}
.lab-top .snd svg{width:14px;height:14px;display:block}
.lab-top .snd:hover,.lab-top .snd:focus-visible{color:var(--ink)}
.lab-top .snd[aria-pressed="true"]{color:var(--accent)}

/* ── Футер ── */
/* лист туши: страница заканчивается тёмным листом, закрашенным одним мазком кисти (JS).
   Внутри цвета меняются местами: бумага становится текстом, тушь — фоном. */
.lab-foot{position:relative;z-index:70;display:block;margin-top:clamp(150px,24vh,260px);padding:clamp(56px,10vh,120px) var(--gut) max(18px,env(safe-area-inset-bottom));
  background:var(--ink);color:var(--bg);font-family:var(--sans);line-height:1.4;border:0;
  --sumi:var(--ink);--paper:var(--bg);--fe:clamp(40px,5vw,84px)}
html[data-chrome] .lab-foot{margin-top:clamp(80px,14vh,160px)}
.lab-foot > *{--ink:var(--paper);--bg:var(--sumi);
  --muted:color-mix(in srgb,var(--paper) 68%,var(--sumi));--soft:color-mix(in srgb,var(--paper) 44%,var(--sumi));--hair:color-mix(in srgb,var(--paper) 16%,var(--sumi))}
/* холст кисти ложится под содержимое и чуть выше футера — под кромку мазка */
.lab-foot.painted{background:transparent}
.lab-foot .foot-ink{position:absolute;left:0;bottom:0;width:100%;height:calc(100% + var(--fe));display:block;pointer-events:none}
.lab-foot > :not(.foot-ink){position:relative;z-index:1}
.lab-foot .foot-k{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:16px clamp(16px,3vw,48px);font:12px var(--mono);color:var(--muted);margin-bottom:clamp(30px,6vh,64px)}
.lab-foot .foot-k > :first-child{color:var(--accent)}
.lab-foot .foot-k > :nth-child(2){font:450 clamp(28px,3.4vw,56px)/1.04 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.lab-foot .cta{display:flex;align-items:flex-end;justify-content:space-between;gap:.2em;
  font-family:var(--sans);font-size:clamp(72px,20vw,360px);font-weight:500;letter-spacing:-.065em;line-height:.86;
  color:var(--ink);padding-bottom:.06em;transition:color .4s ease}
.lab-foot .cta-arrow{font-size:.36em;font-weight:300;line-height:1;margin-bottom:.12em;transition:transform .6s var(--ease-out)}
.lab-foot .cta:hover,.lab-foot .cta:focus-visible{color:var(--accent)}
.lab-foot .cta:hover .cta-arrow,.lab-foot .cta:focus-visible .cta-arrow{transform:translate(.12em,-.12em)}
/* перекат букв на ховере */
.lab-foot .roll{display:inline-flex;white-space:nowrap}
.lab-foot .roll .ch{display:inline-block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lab-foot .roll .ch > span{display:inline-block;text-shadow:0 1em 0 currentColor;transition:transform .7s var(--ease-out);transition-delay:calc(var(--i) * 28ms)}
.lab-foot .cta:hover .roll .ch > span,.lab-foot .cta:focus-visible .roll .ch > span{transform:translateY(-1em)}
.lab-foot .colophon{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:16px;font:11.5px var(--mono);color:var(--soft)}
.lab-foot .cta + .colophon{padding-top:18px}
.lab-foot .colophon nav{display:flex;gap:18px;flex-wrap:wrap}
.lab-foot .colophon a{color:var(--muted);transition:color var(--dur-fast) ease}
.lab-foot .colophon a:hover,.lab-foot .colophon a:focus-visible{color:var(--ink)}
.lab-foot .colophon a[aria-current]{color:var(--accent)}

/* Башкирский тканый орнамент: цепочка ромбов, тихой каймой в самом низу.
   Цвета — из палитры, наполовину растворённые в бумаге. */
.lab-foot .orn{display:block;width:100%;height:26px;margin-top:18px;opacity:.4;shape-rendering:crispEdges;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lab-foot .orn rect{fill:url(#belt)}
#belt .ba{fill:color-mix(in srgb,var(--accent) 42%,var(--paper,var(--bg)))} #belt .bb{fill:color-mix(in srgb,var(--pop) 32%,var(--paper,var(--bg)))}

@media (max-width:760px){
  .lab-top .greeting,.lab-top .crumb{display:none}
  .lab-foot .foot-k > :last-child:not(:nth-child(2)){display:none}
}