/* ==========================================================================
   Header: an always-floating glass capsule
   --------------------------------------------------------------------------
   .site-header is a 68px strip in flow that lets clicks through; the capsule
   (.header-inner) carries the glass. overrides.css names the capsule
   site-header for view transitions, which makes it a backdrop root for its
   children, so anything that opens from it and must blur the page (search
   results, the appearance popover) is a sibling after </header>.
   Never set opacity, filter, mask or clip-path on .site-header: it is the
   capsule's ancestor.

   .site-header itself paints nothing: every page's real content sits inside
   a width-constrained column well short of the viewport edge, so the strip
   either side of the 1240px capsule, and the gap above it, only ever shows
   the ambient field, the same as the rest of the page. A flat --bg fill
   here was tried and reverted (2026-09-28): it blocked that field with a
   visible rectangular seam at any viewport wider than the capsule, which
   read as a stray dark box near the header rather than as chrome.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: calc(var(--header-top) + var(--header-h));
  padding: var(--header-top) var(--header-inset) 0;
  pointer-events: none;
}
.site-header .header-inner {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 1240px;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 8px 0 10px;
  border-radius: 28px;
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--blur-chrome);
  backdrop-filter: var(--blur-chrome);
  box-shadow: var(--glass-rim);
  transition: box-shadow var(--dur-chrome) var(--ease-decel);
}
/* The specular ring. A pseudo-element is nobody's ancestor, so its mask
   makes no backdrop root. */
.site-header .header-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--glass-rim-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.site-header.is-stuck .header-inner,
html.header-carry .site-header .header-inner { box-shadow: var(--glass-rim), var(--shadow-float); }
/* A carried shadow is the state the page opens in, not a change. */
html.header-carry .site-header .header-inner { transition: none; }

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  padding: 6px;
  margin-right: 6px;
  border-radius: 18px;
  font: 700 .9375rem/1 var(--font);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.wordmark .mark { width: 28px; height: 28px; border-radius: 0; box-shadow: none; }
.wordmark span { display: inline; color: inherit; text-shadow: none; white-space: nowrap; }
/* 760 to 1199 the inline nav needs the room; below 400 the phone bar does. */
@media (min-width: 760px) and (max-width: 1199.98px) { .wordmark span { display: none; } }
@media (max-width: 399.98px) { .wordmark span { display: none; } }

/* Reading progress along the capsule's bottom edge, between the corner
   curves. Scroll driven where supported; site.js writes --progress
   elsewhere. Not gated on motion: it only moves as far as the reader
   scrolls (overrides.css keeps its timeline under reduced motion). */
.read-progress {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  pointer-events: none;
  background: var(--grad-select);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
}
@supports (animation-timeline: scroll()) {
  .read-progress {
    transform: scaleX(0);
    animation: read-progress-grow linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes read-progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* The zero-size SVG holding the shared brand gradient stays out of flow. */
.svg-defs { position: absolute; }

/* ==========================================================================
   Nav links and the current-page capsule
   ========================================================================== */

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  font: 600 .875rem/1 var(--font);
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-chip) linear;
}
/* Colour only: no hover capsule. */
.site-nav a:hover { color: var(--text); }
.site-nav a:not(.nav-account)[aria-current='page'] {
  background: var(--mat-accent);
  color: var(--on-accent);
  text-shadow: var(--on-accent-shadow);
  font-weight: 700;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .22);
  view-transition-name: nav-current;
}
.site-nav .nav-account { display: none; }

/* The capsule springs between the five sections; its label images keep
   their own size (object-fit: none) so the text never stretches. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(nav-current) {
    animation-duration: var(--dur-spring);
    animation-timing-function: var(--ease-spring);
    border-radius: 18px;
    overflow: clip;
  }
  ::view-transition-old(nav-current),
  ::view-transition-new(nav-current) {
    animation-duration: var(--dur-fade);
    height: 100%;
    object-fit: none;
  }
}

/* ==========================================================================
   Header actions
   ========================================================================== */

.header-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  margin-left: 8px;
}

/* Bare glyphs on the chrome, 40px round hit area. */
.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-chip) linear, color var(--dur-chip) linear;
}
.icon-button svg { width: 20px; height: 20px; }
.icon-button:hover { background: var(--mat-etched); color: var(--text); }
.icon-button[aria-current='page'],
.icon-button[aria-expanded='true'] { background: var(--mat-etched); box-shadow: var(--rim-etched); color: var(--text); }

/* After .icon-button, which sets display. The search jump stands in for the
   field wherever the field is hidden. */
.search-jump,
.header-creator { display: none; }
@media (max-width: 999.98px) { .search-jump { display: inline-grid; } }
@media (min-width: 1000px) { .header-creator { display: inline-grid; } }
/* Without script the button could not open anything. */
html:not(.has-js) .appearance-button { display: none; }

.header-account { max-width: 180px; min-width: 0; }
.header-account .name-styled { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 760px) and (max-width: 999.98px) {
  .header-account { max-width: 150px; }
  .header-actions .btn-signup { display: none; }
  /* The one account button left, so it takes the etched look. */
  .header-actions .btn-signin,
  .header-actions .btn-signin:hover { background: var(--mat-etched); box-shadow: var(--rim-etched); color: var(--text); }
}

/* ==========================================================================
   Header search field (1000px and up) and its dropdown
   ========================================================================== */

.search {
  position: relative;
  display: none;
  flex: none;
  width: 180px;
  margin-left: auto;
}
@media (min-width: 1000px) { .search { display: block; } }
@media (min-width: 1280px) { .search { width: 220px; } }
@media (max-width: 999.98px) { .header-actions { margin-left: auto; } }

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  color: var(--ink-2);
  pointer-events: none;
}
.search-input {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 34px;
  border: 0;
  border-radius: 18px;
  font: 500 .875rem/1 var(--font);
  color: var(--text);
  background: var(--mat-etched);
  box-shadow: var(--rim-etched);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--dur-chip) linear;
}
.search-input::placeholder { color: var(--ink-2); opacity: 1; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-input:hover { box-shadow: inset 0 0 0 1px var(--etch-line-hover); }
.search-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus-ring), 0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent);
}
.search-kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-inline);
  font: 600 var(--step--2)/1 var(--mono);
  color: var(--ink-2);
  background: var(--mat-etched);
  box-shadow: var(--rim-etched);
  pointer-events: none;
}
.search-input:focus ~ .search-kbd,
.search-input:not(:placeholder-shown) ~ .search-kbd { display: none; }
@media (hover: none) { .search-kbd { display: none; } }

/* Busy: a light travels along the field's bottom edge while a lookup is
   pending (site.js sets aria-busy on the input). */
.search::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--violet) 30%, var(--teal) 70%, transparent) no-repeat;
  background-size: 60% 100%;
  background-position: -150% 0;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .search:has(.search-input[aria-busy='true'])::after {
    opacity: 1;
    animation: search-shimmer 1.2s linear infinite;
  }
}
@keyframes search-shimmer {
  from { background-position: -150% 0; }
  to { background-position: 250% 0; }
}

/* The dropdown. site.js writes --search-left and --search-width from the
   field's rect (at least 400px, 12px clear of both viewport edges). */
.search-results {
  position: fixed;
  z-index: var(--z-dropdown);
  top: calc(var(--header-top) + var(--header-h) + 8px);
  left: var(--search-left, auto);
  right: auto;
  width: var(--search-width, 420px);
  max-height: min(70vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: var(--r-group);
  background: var(--mat-pane);
  box-shadow: var(--glass-rim), var(--shadow-pop);
  -webkit-backdrop-filter: var(--blur-pane);
  backdrop-filter: var(--blur-pane);
  transform-origin: top center;
  scrollbar-width: thin;
}
.search-results:empty { display: none; }
@media (max-width: 999.98px) { .search-results { display: none; } }

.search-result {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-chip) linear;
}
.search-result:hover,
.search-result.is-active { background: rgb(var(--ink) / .07); }
.search-result.is-active { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .14); }
.search-result:focus-visible { outline-offset: -2px; }
.search-result-title {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  font: 600 var(--step-0s)/1.35 var(--font);
}
.search-result-kind {
  font: 700 var(--step--3)/1.4 var(--font);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-2);
}
.search-result-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 var(--step--1)/1.45 var(--font);
  color: var(--ink-2);
}
.search-result mark,
.result-item mark {
  background: none;
  color: var(--eyebrow-ink);
  font-weight: 700;
}
.search-result-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px 8px;
  font: 600 var(--step--1)/1.3 var(--font);
  color: var(--link);
}
.search-result-all .search-result-title { font: inherit; color: inherit; }
/* The rule sits in the gap above the row so it never bends round the
   row's own hover corners. */
.search-result-all::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: -3px;
  height: 1px;
  background: var(--hairline);
}
.search-empty + .search-result-all { margin-top: 0; }
.search-empty + .search-result-all::before { display: none; }
.search-result-all svg { flex: none; width: 14px; height: 14px; transition: transform var(--dur-chip) var(--ease-decel); }
.search-result-all:hover svg,
.search-result-all.is-active svg { transform: translateX(3px); }
.search-empty { padding: 16px 12px; font: 400 var(--step--1)/1.45 var(--font); color: var(--ink-2); }
.search-empty em { font-style: normal; font-weight: 600; color: var(--text-soft); }

@media (prefers-reduced-motion: no-preference) {
  .search-results:not(:empty) { animation: pop-in var(--dur-fade) var(--ease-out-cubic); }
  .search-results > * { animation: pop-content var(--dur-fade) linear; }
  /* A slow lookup dims the stale rows; a quick one never shows the dip. */
  .search-results > * { transition: background var(--dur-chip) linear, opacity var(--dur-fade) linear; }
  .search-results[aria-busy='true'] > * { opacity: .45; transition-delay: 0s, 400ms; }
}

/* ==========================================================================
   Popover shell and the appearance panel
   --------------------------------------------------------------------------
   The shell only scales on open: opacity on a blurred element resets its
   backdrop root mid-animation, so the children fade instead. Close is
   instant.
   ========================================================================== */

.popover {
  position: fixed;
  z-index: var(--z-popover);
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--mat-pane);
  box-shadow: var(--glass-rim), var(--shadow-pop);
  -webkit-backdrop-filter: var(--blur-pane);
  backdrop-filter: var(--blur-pane);
  color: var(--text);
  transform-origin: top right;
}
.popover[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .popover.is-opening { animation: pop-in var(--dur-fade) var(--ease-out-cubic); }
  .popover.is-opening > * { animation: pop-content var(--dur-fade) linear; }
}
@keyframes pop-in { from { transform: scale(.96) translateY(-4px); } }
@keyframes pop-content { from { opacity: 0; } }

.appearance-panel {
  top: calc(var(--header-top) + var(--header-h) + 8px);
  right: var(--pop-right, calc(var(--header-inset) + 8px));
  width: 312px;
  max-height: calc(100dvh - var(--header-top) - var(--header-h) - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 18px;
}
.appearance-title { margin: 0 0 14px; font: 700 .9375rem/1.2 var(--font); color: var(--text); }
.appearance-panel .card-label {
  display: block;
  margin: 16px 0 10px;
  font: 700 .6875rem/1.4 var(--font);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.appearance-panel .appearance-title + .card-label { margin-top: 0; }

/* Theme: three-way segmented with a quiet thumb that travels (JS writes
   --seg-i on the track). Buttons are placed explicitly: auto placement would
   put the thumb in column one and push a button to a new column. */
.appearance-panel .theme-segmented {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 3px;
  border-radius: var(--r-control);
  background: var(--mat-etched);
  box-shadow: var(--rim-etched);
  overflow: visible;
}
.appearance-panel .theme-segmented::before {
  content: '';
  grid-area: 1 / 1;
  z-index: -1;
  border-radius: var(--r-chip);
  background: var(--mat-quiet);
  box-shadow: var(--rim-quiet);
  transform: translateX(calc(var(--seg-i, 0) * 100%));
}
@media (prefers-reduced-motion: no-preference) {
  .appearance-panel .theme-segmented::before { transition: transform var(--dur-segment) var(--ease-out-cubic); }
}
.appearance-panel .theme-segmented .period-tab {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  font: 600 var(--step-chip)/1.2 var(--font);
  letter-spacing: .1px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-chip) linear;
}
.appearance-panel .theme-segmented .period-tab:nth-child(1) { grid-column: 1; }
.appearance-panel .theme-segmented .period-tab:nth-child(2) { grid-column: 2; }
.appearance-panel .theme-segmented .period-tab:nth-child(3) { grid-column: 3; }
.appearance-panel .theme-segmented .period-tab:hover { color: var(--text); }
.appearance-panel .theme-segmented .period-tab[aria-checked='true'] {
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: var(--text);
  font-weight: 700;
}
.appearance-panel .theme-segmented .period-tab:focus-visible { outline-offset: -2px; }

/* The swatches are the panel's colour, so nothing inside it is accent
   filled: quiet thumb above, quiet effect chip below. */
.appearance-panel .swatches {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  justify-content: space-between;
  gap: 14px 16px;
}
.appearance-panel .tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.appearance-panel .effect-option {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-chip);
  font: 600 var(--step--1)/1.2 var(--font);
  color: var(--ink-2);
  background: var(--mat-etched);
  box-shadow: var(--rim-etched);
  text-shadow: none;
  cursor: pointer;
  transition: background var(--dur-chip) linear, color var(--dur-chip) linear, box-shadow var(--dur-chip) linear;
}
.appearance-panel .effect-option:hover { background: var(--mat-etched-hover); color: var(--text); }
.appearance-panel .effect-option[aria-pressed='true'] {
  background: var(--mat-quiet);
  box-shadow: var(--rim-quiet);
  color: var(--text);
  text-shadow: none;
  font-weight: 700;
}

@media (max-width: 759.98px) {
  .appearance-panel { left: 12px; right: 12px; width: auto; max-width: 420px; margin-inline: auto; }
}

/* ==========================================================================
   Phone top bar (below 760px)
   ========================================================================== */

@media (max-width: 759.98px) {
  .site-header .header-inner { padding: 0 6px 0 8px; }
  .header-actions { order: 2; margin-left: auto; }
  .site-nav { order: 3; margin-left: 2px; }
  .site-nav > a:not(.nav-account),
  .header-actions .btn-signin,
  .header-actions .btn-signup,
  .header-actions .header-creator { display: none; }
  .site-nav .nav-account {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    font: 700 var(--step--1)/1 var(--font);
    color: var(--text);
    background: var(--mat-etched);
    box-shadow: var(--rim-etched);
  }
  .header-account { max-width: 128px; }
}
/* Signed in, the account name takes the room the wordmark's name needs. */
@media (max-width: 479.98px) {
  .site-header:has(.header-account) .wordmark span { display: none; }
}

/* ==========================================================================
   Phone tab bar with the lifted bubble (below 760px)
   --------------------------------------------------------------------------
   The body and the bubble are siblings, so each blurs the page (and the
   bubble the bar's top edge). No text sits on the bubble's 62% wash: the
   current label sits in the bar under it.
   ========================================================================== */

.tab-bar { display: none; }
@media (max-width: 759.98px) {
  .tab-bar {
    display: flex;
    position: fixed;
    z-index: var(--z-tabbar);
    left: 50%;
    translate: -50% 0;
    bottom: calc(var(--tabbar-bottom) + env(safe-area-inset-bottom));
    width: min(var(--tabbar-w), calc(100vw - 20px));
    height: var(--tabbar-h);
  }
  .tab-bar-body {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: var(--mat-dock);
    -webkit-backdrop-filter: var(--blur-dock);
    backdrop-filter: var(--blur-dock);
    box-shadow: var(--glass-rim), var(--shadow-float);
  }
  .tab-bar-bubble {
    position: absolute;
    top: -36px;
    left: calc(var(--slot) * 20% + 10% - 28px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mat-bubble);
    -webkit-backdrop-filter: var(--blur-bubble);
    backdrop-filter: var(--blur-bubble);
    box-shadow: var(--glass-rim), var(--shadow-bubble);
    pointer-events: none;
    view-transition-name: tab-bubble;
  }
  .tab-bar-item {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 100%;
    color: rgb(255 255 255 / .92);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-bar-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    translate: -50% -50%;
    border-radius: 50%;
    background: rgb(0 0 0 / .24);
  }
  .tab-icon { position: relative; width: 22px; height: 22px; }
  .tab-bar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tab-bar-item[aria-current='page']::before { display: none; }
  .tab-bar-item[aria-current='page'] .tab-icon {
    width: 30px;
    height: 30px;
    translate: 0 -36px;
    color: var(--on-accent);
    stroke-width: 2;
    fill: currentColor;
    fill-opacity: .28;
    /* The label halo, twice: next to the 62% wash's light end a bare white
       glyph measured 2.40:1 (mint, dark), one halo 2.77, two 3.06. */
    filter: drop-shadow(var(--on-accent-shadow)) drop-shadow(var(--on-accent-shadow));
    view-transition-name: tab-icon;
  }
  .tab-bar-item[aria-current='page'] .tab-bar-label {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    left: 50%;
    bottom: 7px;
    translate: -50% 0;
    font: 700 .71875rem/1.2 var(--font);
    color: #fff;
    text-shadow: 0 0 7px rgb(0 0 0 / .45);
  }
  .tab-bar-item:focus-visible { outline-offset: -4px; border-radius: 22px; }
  /* Held still across a navigation like the header capsule: each slot
     cross-fades in place while the bubble and the lifted glyph travel. */
  .tab-bar-body { view-transition-name: tab-dock; }
  .tab-bar-item:nth-of-type(1) { view-transition-name: tab-slot-1; }
  .tab-bar-item:nth-of-type(2) { view-transition-name: tab-slot-2; }
  .tab-bar-item:nth-of-type(3) { view-transition-name: tab-slot-3; }
  .tab-bar-item:nth-of-type(4) { view-transition-name: tab-slot-4; }
  .tab-bar-item:nth-of-type(5) { view-transition-name: tab-slot-5; }
  body { padding-bottom: var(--tabbar-clear); }
  html { scroll-padding-bottom: var(--tabbar-clear); }
}
:root[data-theme='light'] .tab-bar-item { color: color-mix(in srgb, var(--text) 85%, transparent); }
:root[data-theme='light'] .tab-bar-item::before { background: rgb(0 0 0 / .05); }
:root[data-theme='light'] .tab-bar-item[aria-current='page'] .tab-bar-label { color: var(--text); text-shadow: none; }

::view-transition-old(tab-dock) { animation: none; opacity: 0; }
::view-transition-new(tab-dock) { animation: none; }
/* A named element's snapshot cannot sample the page (and a blurred one
   carries a rectangle of its own backdrop), so while a transition runs the
   blur moves from the element to its group, which sits over the page
   snapshots and blurs them. */
html.vt-capture :is(.site-header .header-inner, .tab-bar-body, .tab-bar-bubble) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Separate rule: a browser without the pseudo-class drops the whole list. */
html:active-view-transition :is(.site-header .header-inner, .tab-bar-body, .tab-bar-bubble) { -webkit-backdrop-filter: none; backdrop-filter: none; }
::view-transition-group(site-header) {
  border-radius: 28px;
  -webkit-backdrop-filter: var(--blur-chrome);
  backdrop-filter: var(--blur-chrome);
}
::view-transition-group(tab-dock) {
  border-radius: 28px;
  -webkit-backdrop-filter: var(--blur-dock);
  backdrop-filter: var(--blur-dock);
}
::view-transition-group(tab-bubble) {
  border-radius: 50%;
  -webkit-backdrop-filter: var(--blur-bubble);
  backdrop-filter: var(--blur-bubble);
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(tab-bubble),
  ::view-transition-group(tab-icon) {
    animation-duration: var(--dur-spring);
    animation-timing-function: var(--ease-spring);
  }
  ::view-transition-old(tab-icon),
  ::view-transition-new(tab-icon) { animation-duration: var(--dur-fade); }
}

/* The wuji sequence fades the header the same way (wuji.css). */
html.wuji-playing .tab-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease);
}