:root {
  --help-ink: #091310;
  --help-paper: #f5f4ec;
  --help-card: #fbfaf4;
  --help-lime: #baff72;
  --help-violet: #7564ec;
  --help-muted: #66716c;
  --help-line: rgba(9, 19, 16, .14);
  --help-serif: Georgia, "Times New Roman", serif;
}

html { scroll-padding-top: 96px; }
body { background: var(--help-paper); color: var(--help-ink); }

.topbar {
  min-height: 82px;
  padding: 0 !important;
  background: rgba(245, 244, 236, .92);
  border-bottom: 1px solid var(--help-line);
  backdrop-filter: blur(18px);
}
.topbar .container { min-height: 82px; max-width: 1280px; }
.brand { color: var(--help-ink); font-size: 22px; letter-spacing: -1px; }
.brand img { width: 42px; height: 42px; filter: drop-shadow(0 5px 12px rgba(82,31,167,.2)); }
.brand strong { font-weight: 650; }
.brand strong span { color: var(--help-muted); font-size: 13px; font-weight: 450; letter-spacing: 0; }

.help-search { position: relative; }
.help-search-input {
  width: 230px;
  height: 40px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--help-line);
  border-radius: 2px;
  background: rgba(255,255,255,.58);
  color: var(--help-ink);
}
.help-search-input:focus { outline: 2px solid rgba(117,100,236,.28); border-color: var(--help-violet); }
.help-search-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  color: var(--help-ink);
}
.help-language-switcher { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--help-line); border-radius: 999px; }
.help-language-switcher a { display: grid; place-items: center; min-width: 29px; height: 26px; padding: 0 6px; border-radius: 999px; color: #52605a; text-decoration: none; font-size: 9px; font-weight: 750; letter-spacing: .6px; }
.help-language-switcher a:hover { color: var(--help-ink); background: rgba(9,19,16,.06); }
.help-language-switcher a[aria-current="page"] { color: #fff; background: var(--help-ink); }
.topbar .btn { border-radius: 2px; font-size: 12px; font-weight: 600; }
.topbar .btn-outline-secondary { border-color: var(--help-line); color: #35423d; }
.topbar .btn-outline-primary { background: var(--help-ink); border-color: var(--help-ink); color: #fff; }
.topbar .btn-outline-primary i { color: var(--help-lime); }

main.page { max-width: 1280px; gap: 30px; margin-top: 44px !important; margin-bottom: 90px !important; }
aside.toc {
  top: 108px;
  max-height: calc(100dvh - 126px);
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: var(--help-ink);
  color: white;
  box-shadow: 0 24px 50px rgba(9,19,16,.13);
}
aside.toc h2 { color: var(--help-lime); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; }
aside.toc ol { padding-left: 18px; }
aside.toc li { padding: 3px 0; color: #839189; font-size: 12px; line-height: 1.45; }
aside.toc a { color: #d4dcd7; }
aside.toc a:hover { color: var(--help-lime); }
aside.toc ol ol { border-left: 1px solid rgba(255,255,255,.12); margin: 5px 0 6px; padding-left: 15px; }

#helpContent { min-width: 0; }
.section-card {
  padding: 34px 38px;
  border: 1px solid var(--help-line);
  border-radius: 0;
  background: var(--help-card);
  box-shadow: none;
}
.section-card + .section-card { margin-top: 14px; }
header.hero.section-card {
  min-height: 350px;
  padding: 58px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--help-violet);
  color: #fff;
}
header.hero.section-card:after {
  content: "?";
  position: absolute;
  right: 24px;
  top: -110px;
  font-family: var(--help-serif);
  font-style: italic;
  font-size: 430px;
  color: rgba(255,255,255,.07);
  line-height: 1;
}
header.hero img { width: 70px; height: 70px; position: absolute; top: 38px; left: 38px; z-index: 1; filter: drop-shadow(0 12px 24px rgba(32,9,100,.25)); }
header.hero h1 { position: relative; z-index: 1; font-size: clamp(50px,6vw,78px); line-height: .95; letter-spacing: -4px; font-weight: 540; margin: 0 0 14px; }
header.hero p { position: relative; z-index: 1; color: #e2deff; font-size: 15px; }

.section-card h3 { font-size: 31px; letter-spacing: -1.2px; font-weight: 560; margin-bottom: 22px; }
.section-card h3:before { content: "\2192"; color: var(--help-violet); margin-right: 12px; }
.section-card h4 { margin-top: 28px; font-size: 21px; color: #293631; }
.section-card h5 { margin-top: 24px; font-size: 16px; color: #4f43b6; }
.section-card h6 { margin-top: 24px !important; padding-top: 18px; border-top: 1px solid var(--help-line); font-size: 14px; text-transform: uppercase; letter-spacing: .7px; }
.section-card p, .section-card li { color: #53605a; font-size: 14px; line-height: 1.7; }
.section-card li { margin-bottom: 5px; }
.section-card strong { color: #1c2924; }
.section-card a { color: #5546c4; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.section-card code, .section-card kbd { background: #e9e6f5; color: #3d327e; border-radius: 2px; }
.section-card .section-card { margin: 28px -12px 0; background: #f1f0e8; border-color: rgba(9,19,16,.1); }
.help-tutorial-banner{min-height:120px;margin:14px 0;padding:22px 26px;display:grid;grid-template-columns:58px 1fr auto;gap:20px;align-items:center;background:var(--help-ink);color:#fff;text-decoration:none;transition:transform .2s}.help-tutorial-banner:hover{color:#fff;transform:translateY(-2px)}.help-tutorial-banner>span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--help-lime);color:var(--help-ink);font-size:21px}.help-tutorial-banner small,.help-tutorial-banner strong,.help-tutorial-banner p{display:block}.help-tutorial-banner small{color:var(--help-lime);font-size:8px;letter-spacing:1.6px;font-weight:700}.help-tutorial-banner strong{font-size:18px;margin:4px 0}.help-tutorial-banner p{margin:0;color:#8f9d96;font-size:11px}.help-tutorial-banner>b{color:#dbe3de;font-size:11px;border-bottom:1px solid var(--help-lime);padding-bottom:4px}

mark.help-search-hit { background: var(--help-lime); color: var(--help-ink); border-radius: 0; }
mark.help-search-hit.active { outline: 3px solid var(--help-violet); }
#toTop { width: 48px; height: 48px; padding: 0; border: 0; background: var(--help-ink); color: var(--help-lime); }

.help-footer {
  min-height: 120px;
  padding: 28px max(24px, calc((100vw - 1280px) / 2));
  background: #07100d;
  color: #89968f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.help-footer>div { display: flex; align-items: center; gap: 24px; }
.help-footer>div>a { display: flex; align-items: center; gap: 9px; color: white; text-decoration: none; font-size: 20px; }
.help-footer>div>a img { filter: drop-shadow(0 5px 12px rgba(82,31,167,.25)); }
.help-footer>a { color: #d4dcd7; text-decoration: none; }
.help-footer>a:hover { color: var(--help-lime); }

@media (max-width: 991px) {
  .topbar .d-none.d-md-flex { display: none !important; }
  main.page { margin-top: 24px !important; }
  aside.toc { position: relative; top: 0; max-height: none; }
}

@media (max-width: 640px) {
  .topbar .container { padding-inline: 16px; }
  .brand strong span { display: none; }
  .topbar .d-flex.align-items-center.gap-3 { gap: 8px !important; }
  .help-search-input { width: 112px; }
  .help-language-switcher a { min-width: 25px; padding-inline: 4px; }
  main.page { padding-inline: 16px; }
  .section-card { padding: 26px 22px; }
  header.hero.section-card { min-height: 310px; padding: 42px 24px; }
  header.hero img { top: 26px; left: 24px; }
  header.hero h1 { font-size: 48px; letter-spacing: -3px; }
  .section-card .section-card { margin-inline: -8px; }
  .help-tutorial-banner{grid-template-columns:50px 1fr;padding:20px}.help-tutorial-banner>span{width:48px;height:48px}.help-tutorial-banner>b{grid-column:2;justify-self:start}
  .help-footer { align-items: flex-start; flex-direction: column; gap: 22px; }
  .help-footer>div { align-items: flex-start; flex-direction: column; gap: 12px; }
}
