/* Tutorial navigation uses Eterna's ivory, charcoal and bronze palette. */
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #382f2d;
  padding: 0;
  gap: 8px;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul)::before {
  content: "Customize guide";
  display: grid;
  align-content: center;
  flex: 0 0 64px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .025em;
  color: #756b5a;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) > ul { gap: 8px; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) > ul > li { flex: 1 1 auto; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button {
  border: 1px solid #e5ddd1;
  border-radius: 6px;
  color: #5c5352;
  background: #fffffc;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 9px;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) > button {
  align-self: center;
  height: 36px;
  border-radius: 50%;
  padding: 0;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button > span:first-child {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #7e5a24;
  background: #f4eee5;
  font-size: 10px;
  font-weight: 600;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button[aria-current="true"] {
  background: #f7f2e9;
  border-color: #a88449;
  color: #382f2d;
  font-weight: 600;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button[aria-current="true"] > span:first-child { background: #7e5a24; color: #fff; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button:hover:not(:disabled) { background: #f4eee5; border-color: #a88449; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button:focus-visible { outline: 2px solid #7e5a24; outline-offset: 3px; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button:disabled { color: #c4baaa; border-color: #eee8df; background: transparent; }
@media(min-width:640px) and (max-width:1100px) {
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) li:not(:has([aria-current="true"])) { display: none; }
}
@media(max-width:639px) {
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) { gap: 6px; }
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul)::before { flex-basis: 54px; font-size: 10px; }
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button { padding: 5px 6px; font-size: 12px; }
}