[data-global-nav] {
  --global-nav-paper: oklch(97.8% 0.012 88);
  --global-nav-surface: oklch(99.2% 0.006 88);
  --global-nav-ink: oklch(25% 0.048 252);
  --global-nav-muted: oklch(52% 0.022 248);
  --global-nav-line: oklch(86% 0.018 84);
  --global-nav-red: oklch(43% 0.145 24);
  --global-nav-serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --global-nav-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  position: sticky;
  top: 0;
  z-index: 1000;
  color: var(--global-nav-ink);
  font-family: var(--global-nav-sans);
  line-height: 1.4;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

[data-global-nav].is-collapsed {
  pointer-events: none;
  transform: translateY(-100%);
}

.global-site-header {
  position: relative;
  background: color-mix(in oklch, var(--global-nav-paper) 94%, transparent);
  backdrop-filter: blur(16px);
}

.global-site-header *,
.global-site-header *::before,
.global-site-header *::after { box-sizing: border-box; }

.global-site-header__inner {
  width: min(100%, 1240px);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.global-site-header__brand {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--global-nav-ink);
  text-decoration: none;
}

.global-site-header__emblem {
  width: 42px;
  height: 42px;
  flex: none;
  object-fit: contain;
}

.global-site-header__brand-copy strong {
  display: block;
  font-family: var(--global-nav-serif);
  font-size: 17px;
  line-height: 1.1;
}

.global-site-header__brand-copy span {
  display: block;
  margin-top: 3px;
  color: var(--global-nav-muted);
  font-size: 10px;
  letter-spacing: .12em;
}

.global-site-header__nav {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 30px;
}

.global-site-header__link,
.global-site-auth__login {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--global-nav-muted);
  font-size: 14px;
  text-decoration: none;
}

.global-site-header__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(50% - 13px);
  left: 0;
  height: 2px;
  background: var(--global-nav-red);
  transform: scaleX(0);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}

.global-site-header__link:hover,
.global-site-header__link[aria-current="page"] { color: var(--global-nav-ink); }
.global-site-header__link:hover::after,
.global-site-header__link[aria-current="page"]::after { transform: scaleX(1); }

.global-site-auth { min-width: 0; display: flex; align-items: center; }
.global-site-auth [hidden] { display: none; }
.global-site-auth__login { color: var(--global-nav-red); font-weight: 650; }
.global-site-auth__member { min-width: 0; display: flex; align-items: center; gap: 10px; }
.global-site-auth__email {
  max-width: 210px;
  overflow: hidden;
  color: var(--global-nav-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-site-auth__sign-out {
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid var(--global-nav-ink);
  color: var(--global-nav-ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
  cursor: pointer;
  white-space: nowrap;
}
.global-site-auth__member:hover .global-site-auth__sign-out,
.global-site-auth__member:focus-within .global-site-auth__sign-out {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.global-site-auth__member .global-site-auth__sign-out:disabled { cursor: wait; opacity: .55; }

.global-site-header__toggle {
  width: 42px;
  height: 42px;
  display: none;
  padding: 10px;
  border: 1px solid var(--global-nav-line);
  color: var(--global-nav-ink);
  background: transparent;
}
.global-site-header__toggle > span:not(.global-site-header__toggle-label) {
  display: block;
  height: 1px;
  margin: 4px 0;
  background: currentColor;
}
.global-site-header__toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.handbook-with-global-nav > .layout {
  --course-reader-canvas-width: 1240px;
  --course-reader-sidebar-width: 300px;
  --course-reader-column-gap: clamp(40px, 3vw, 56px);
  --course-reader-gutter: clamp(20px, 4vw, 48px);
  box-sizing: border-box;
  width: min(100%, var(--course-reader-canvas-width));
  min-height: calc(100vh - 72px);
  margin-inline: auto;
  padding-inline: var(--course-reader-gutter);
}
body.handbook-with-global-nav > .layout > .main {
  box-sizing: border-box;
  width: 100%;
  max-width: 840px;
  min-width: 0;
  justify-self: start;
  padding-inline: clamp(32px, 4vw, 56px);
}
body.handbook-with-global-nav .sidebar {
  top: 72px;
  height: calc(100vh - 72px);
}

@media (max-width: 900px) {
  body.handbook-with-global-nav > .layout {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }
  body.handbook-with-global-nav > .layout > .main {
    max-width: none;
    justify-self: stretch;
    padding-inline: 24px;
  }
  body.handbook-with-global-nav .sidebar { top: auto; height: auto; }
}

@media (min-width: 901px) {
  body.handbook-with-global-nav > .layout {
    grid-template-columns: var(--course-reader-sidebar-width) minmax(0, 1fr);
    column-gap: var(--course-reader-column-gap);
  }
  html.global-nav-collapsed body.handbook-with-global-nav .sidebar {
    top: 0;
    height: 100vh;
  }
}

@media (max-width: 680px) {
  .global-site-header__inner { min-height: 64px; gap: 14px; }
  .global-site-header__emblem { width: 38px; height: 38px; }
  .global-site-header__brand-copy span { display: none; }
  .global-site-header__toggle { display: block; margin-left: auto; }
  .global-site-header__nav {
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;
    display: grid;
    align-self: auto;
    gap: 0;
    padding: 10px clamp(20px, 4vw, 48px) 18px;
    border-bottom: 1px solid var(--global-nav-line);
    background: var(--global-nav-paper);
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .2s ease, opacity .2s ease;
  }
  .global-site-header__nav.is-open { opacity: 1; pointer-events: auto; transform: scaleY(1); }
  .global-site-header__link,
  .global-site-auth__login { justify-items: start; padding: 13px 0; }
  .global-site-header__link::after { display: none; }
  .global-site-auth { min-height: 48px; border-top: 1px solid var(--global-nav-line); }
  .global-site-auth__member { width: 100%; justify-content: space-between; }
  .global-site-auth__email { max-width: min(58vw, 280px); }
  .global-site-auth__sign-out { opacity: 1; pointer-events: auto; transform: none; }
  body.handbook-with-global-nav > .layout { min-height: calc(100vh - 64px); }
}

@media (hover: none), (pointer: coarse) {
  .global-site-auth__sign-out { opacity: 1; pointer-events: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-global-nav],
  .global-site-header__link::after,
  .global-site-auth__sign-out,
  .global-site-header__nav { transition-duration: .01ms; }
}