/* One material on the outer navigation plane. The lens uses highlights, never another blur. */
:root {
  --navigation-ink: #20334d;
  --navigation-blue: #005bbd;
  --navigation-edge: #c5d4e7;
  --navigation-surface: #f7faff;
  --navigation-hover: #e2eeff;
  --navigation-lens: #dcecff;
  --navigation-highlight: #fff;
  --navigation-shadow: #31598624;
}
.navigation-dark, html[data-workshop-skin=blue] {
  --navigation-ink: #e4edf9;
  --navigation-blue: #b1d4ff;
  --navigation-edge: #6b83a0;
  --navigation-surface: #293545;
  --navigation-hover: #344d6a;
  --navigation-lens: #304d70;
  --navigation-highlight: #c4dfff66;
  --navigation-shadow: #00000033;
}
.navigation-options {
  --navigation-glass-paint: linear-gradient(165deg, var(--navigation-highlight) -15%, transparent 52%,
    var(--navigation-highlight) 145%), var(--navigation-lens);
  --navigation-glass-depth: inset 0 2px 2px var(--navigation-highlight), inset 0 -2px 3px var(--navigation-shadow),
    0 3px 7px var(--navigation-shadow);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--navigation-edge);
  border-radius: 22px;
  background: var(--navigation-surface);
  color: var(--navigation-ink);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.navigation-options > :is(a, button) {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  box-shadow: none;
  color: var(--navigation-ink);
  font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.navigation-options > :is([aria-current=page], [aria-pressed=true], .active) {
  color: var(--navigation-blue);
  background: var(--navigation-lens);
}
.navigation-options.navigation-ready > :is([aria-current=page], [aria-pressed=true], .active) {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.navigation-lens {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 17px;
  border: 1px solid var(--navigation-edge);
  background: linear-gradient(160deg, var(--navigation-highlight), transparent 65%), var(--navigation-lens);
  box-shadow: inset 0 1px 1px var(--navigation-highlight), inset 0 -1px 2px var(--navigation-shadow),
    0 2px 5px var(--navigation-shadow);
}
.navigation-ready > .navigation-lens {
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), width 220ms ease, height 220ms ease;
}
.navigation-lens[hidden] { display: none; }
.navigation-control {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid var(--navigation-edge);
  border-radius: 16px;
  background: var(--navigation-surface);
  color: var(--navigation-ink);
  font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;
  cursor: pointer;
}
.navigation-control.navigation-save {
  background: linear-gradient(160deg, var(--navigation-highlight), transparent), var(--navigation-lens);
  color: var(--navigation-blue);
  border-color: var(--navigation-edge);
  box-shadow: inset 0 1px 0 var(--navigation-highlight), 0 2px 5px var(--navigation-shadow);
  white-space: nowrap;
}
@media (hover: hover) {
  .navigation-options > :is(a, button):hover:not(:disabled):not([aria-current=page]):not([aria-pressed=true]):not(.active),
  .navigation-control:hover:not(:disabled) {
    background: var(--navigation-hover);
    color: var(--navigation-blue);
  }
}
.navigation-options > :is(a, button):active:not(:disabled), .navigation-control:active:not(:disabled) {
  background: var(--navigation-hover);
  color: var(--navigation-blue);
}
.navigation-options > :is(a, button):focus-visible, .navigation-control:focus-visible {
  outline: 3px solid var(--navigation-blue);
  outline-offset: -3px;
}
.navigation-control:disabled { opacity: .65; cursor: wait; }
.navigation-control[aria-busy=true] { border-style: dashed; }
@supports (backdrop-filter: blur(1px)) {
  .navigation-material {
    background: #f7faffd9;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .navigation-options.navigation-ready > .navigation-lens,
  .navigation-options > :is(a, button), .navigation-control { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  .navigation-material { background: var(--navigation-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navigation-lens, .navigation-control.navigation-save { background: var(--navigation-lens); box-shadow: none; }
}
html[data-navigation-appearance=solid] .navigation-material {
  background: var(--navigation-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (forced-colors: active) {
  .navigation-options, .navigation-control { background: Canvas; color: CanvasText; border-color: ButtonText; }
  .navigation-lens { background: Canvas; border: 2px solid Highlight; box-shadow: none; }
  .navigation-options > :is([aria-current=page], [aria-pressed=true], .active), .navigation-control.navigation-save {
    color: LinkText;
  }
}
@media (prefers-contrast: more) {
  .navigation-options, .navigation-control { border-color: currentColor; }
  .navigation-lens { border-color: var(--navigation-blue); border-width: 2px; }
}
@media (forced-colors: active) {
  :root, .navigation-dark, html[data-workshop-skin=blue] {
    --navigation-ink: CanvasText;
    --navigation-blue: LinkText;
    --navigation-edge: ButtonText;
    --navigation-surface: Canvas;
    --navigation-hover: Canvas;
    --navigation-lens: Canvas;
    --navigation-highlight: transparent;
    --navigation-shadow: transparent;
  }
}

/* The content is magnified by 6.5%; this does not sample or refract backdrop pixels. */
.navigation-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: inherit;
  align-items: center;
  justify-content: center;
  gap: inherit;
  max-width: 100%;
  pointer-events: none;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}
.navigation-options > :is([aria-current=page], [aria-pressed=true], .active) > .navigation-label {
  transform: scale(1.065);
}
.navigation-lens {
  overflow: hidden;
  background: var(--navigation-glass-paint);
  box-shadow: var(--navigation-glass-depth);
}
.navigation-lens::before, [data-programme-navigation] > a[aria-current=page]::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid transparent;
  border-top-color: var(--navigation-highlight);
  border-bottom-color: var(--navigation-shadow);
}
.navigation-lens::after {
  content: '';
  position: absolute;
  inset: 0 7% 53%;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(var(--navigation-highlight), transparent);
  opacity: .38;
}
.navigation-options > :is(a, button)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at var(--navigation-contact-x, 50%) var(--navigation-contact-y, 50%),
    var(--navigation-highlight), color-mix(in srgb, var(--navigation-blue) 18%, transparent) 55%, transparent 85%);
  transition: opacity 180ms ease;
}
.navigation-options > [data-navigation-contact]::after { opacity: .75; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .navigation-label, .navigation-options > :is(a, button)::after { transition: none; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .navigation-label { transform: none !important; }
  .navigation-lens::before, .navigation-lens::after, .navigation-options > :is(a, button)::after { display: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active), (update: slow) {
  .navigation-options > .navigation-lens { background: var(--navigation-lens); box-shadow: none; }
  .navigation-lens::before, .navigation-lens::after { display: none; }
}
html[data-navigation-appearance=solid] .navigation-options > .navigation-lens {
  background: var(--navigation-lens);
  box-shadow: none;
}