/* =====================================================================================
   Launchpad "Glass, distilled": the same glass, with less of it and more motion.
   Loaded last on every page (after glass.css on the terminal, after tokens.css on the other pages).
   - one frosted panel holds the EGX 30 card and Market pulse; the session brief is glass instead of orange
   - controls answer the pointer: a light streak crosses the main buttons, arrows tip up, buttons spring back,
     and segmented controls get one pill that glides to the choice (motion.js adds it)
   - the header carries a light/dark switch (theme.js); the theme change itself, the moving gradient, is the
     transition list at the end of tokens.css
   ===================================================================================== */

/* ---------- the header switch: a knob carrying the sun springs across a sky that darkens to night ---------- */
.tsw { --tw: 62px; --th: 34px; --kn: 28px;
  flex: none; display: grid; place-items: center; width: calc(var(--tw) + 6px); height: 44px; margin-block: -3px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tsw-track { position: relative; isolation: isolate; display: block; width: var(--tw); height: var(--th); border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, #8FB8FF 0%, #DCEAFF 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 2px 6px rgba(16, 24, 40, .16);
  transition: transform .25s cubic-bezier(.34, 1.6, .64, 1), box-shadow .6s ease; }
.tsw-track::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: linear-gradient(135deg, #141B33 0%, #33407A 100%); transition: opacity .7s ease; }
.tsw-knob { position: absolute; top: calc((var(--th) - var(--kn)) / 2); left: calc((var(--th) - var(--kn)) / 2); width: var(--kn); height: var(--kn);
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); display: grid; place-items: center;
  transition: transform .65s cubic-bezier(.34, 1.5, .64, 1), box-shadow .3s ease; }
.tsw-knob svg { position: absolute; width: 16px; height: 16px; transition: transform .65s cubic-bezier(.34, 1.5, .64, 1), opacity .35s ease; }
.tsw-moon { width: 15px; height: 15px; opacity: 0; transform: rotate(-90deg) scale(.5); }
.tsw-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease .15s, transform .7s cubic-bezier(.34, 1.5, .64, 1) .1s; }
.tsw-star:nth-child(1) { inset-inline-start: 12px; top: 8px; }
.tsw-star:nth-child(2) { inset-inline-start: 21px; top: 19px; width: 2px; height: 2px; }
.tsw-star:nth-child(3) { inset-inline-start: 9px; top: 22px; width: 2px; height: 2px; }
.tsw[aria-checked="true"] .tsw-track { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 2px 6px rgba(0, 0, 0, .45); }
.tsw[aria-checked="true"] .tsw-track::before { opacity: 1; }
.tsw[aria-checked="true"] .tsw-knob { transform: translateX(calc(var(--tw) - var(--th))); }
.tsw[aria-checked="true"] .tsw-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
.tsw[aria-checked="true"] .tsw-moon { opacity: 1; transform: none; }
.tsw[aria-checked="true"] .tsw-star { opacity: .85; transform: none; }
[dir="rtl"] .tsw .tsw-knob { left: auto; right: calc((var(--th) - var(--kn)) / 2); }
[dir="rtl"] .tsw[aria-checked="true"] .tsw-knob { transform: translateX(calc(var(--th) - var(--tw))); }
.tsw:hover .tsw-knob { box-shadow: 0 3px 12px rgba(0, 0, 0, .3); }
.tsw:active .tsw-track { transform: scale(.94); }
.tsw:focus-visible { outline: none; }
.tsw:focus-visible .tsw-track { outline: 2px solid var(--blue, #2F6BEA); outline-offset: 2px; }
.pg-nav button.tsw, .pg-nav button.tsw:hover { padding: 0; background: none; margin-inline: 2px; }
/* phones: the logo, switch, language and account buttons share one row (the Arabic logo is the widest) */
@media (max-width: 560px) {
  .bar-in { gap: 8px; }
  .tsw { --tw: 46px; --th: 28px; --kn: 22px; width: calc(var(--tw) + 2px); }
  .tsw-knob svg { width: 14px; height: 14px; } .tsw-moon { width: 13px; height: 13px; }
  .bar-in .tsw { margin-inline-start: auto; }
  .bar-in .tsw + .lang, [dir="rtl"] .bar-in .tsw + .lang { margin-left: 0; margin-right: 0; }
  .bar-in .lang { padding: 0 12px; }
  .tsw-star:nth-child(1) { inset-inline-start: 8px; top: 6px; } .tsw-star:nth-child(2) { inset-inline-start: 15px; top: 15px; } .tsw-star:nth-child(3) { inset-inline-start: 7px; top: 17px; }
}
@media (max-width: 380px) {
  .bar-in { gap: 6px; }
  .tsw { --tw: 40px; --th: 26px; --kn: 20px; }
  .tsw-knob svg { width: 13px; height: 13px; } .tsw-moon { width: 12px; height: 12px; }
  .bar-in .lang { padding: 0 10px; }
  .tsw-star:nth-child(1) { inset-inline-start: 7px; top: 5px; } .tsw-star:nth-child(2) { inset-inline-start: 13px; top: 14px; } .tsw-star:nth-child(3) { inset-inline-start: 6px; top: 16px; }
}

/* ---------- segmented controls: one pill per bar, larger than its button, sitting over the bar (motion.js) ----------
   Tapped, it hops: up toward the viewer (it grows, its shadow deepens), across, and down onto the chosen option with
   a small squash. --glide-pop: how far it reaches past its button; --glide-lift: how much it grows in flight. */
.has-glide { position: relative; isolation: isolate; --glide-pop: 2px; --glide-lift: 1.08; }
.mainnav-seg.has-glide { --glide-pop: 6px; --glide-pop-x: 3px; --glide-lift: 1.14; --glide-room: 10px; }
.mtabs.has-glide { --glide-pop: 8px; --glide-pop-x: 4px; --glide-lift: 1.1; --glide-room: 9px; }
.has-glide > :is(a, button) { position: relative; z-index: 1; }
.has-glide > :is(a[aria-current="page"], button[aria-pressed="true"], [role="tab"][aria-selected="true"], button[aria-checked="true"]) { background: transparent !important; box-shadow: none !important; }
.glide { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; border-radius: 999px; opacity: 0; will-change: transform;
  background: var(--seg-on); box-shadow: var(--glide-shadow); transition: opacity .2s ease; }
:root { --glide-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 6px 16px -6px rgba(16, 24, 40, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
  --glide-shadow-up: 0 2px 4px rgba(16, 24, 40, .08), 0 18px 32px -10px rgba(16, 24, 40, .42), inset 0 1px 0 rgba(255, 255, 255, .9); }
:root[data-theme="dark"] { --glide-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
  --glide-shadow-up: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 36px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glide-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
  --glide-shadow-up: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 36px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2); } }
.glide.glide-go { transition: transform .58s cubic-bezier(.34, 1.32, .64, 1), width .58s cubic-bezier(.34, 1.32, .64, 1), height .45s ease, opacity .2s ease; }
/* A bar that scrolls sideways (motion.js, track): see-through, with room above and below its options (the same size in
   the page: the room comes back as negative margins); its look moves to span.glide-track just behind it, the size of
   the bar without the room, so the options scroll inside the track and the pill can stand over its edges. */
.glide-track { position: absolute; z-index: 0; pointer-events: none; box-sizing: border-box; }
.mtabs.glide-room { padding-block: 14px; margin-block: -9px; background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; position: relative; z-index: 1; }
.glide-track.for-mtabs { border-radius: 999px; background: var(--glass-2); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-2, 18px)) saturate(var(--sat, 190%)); backdrop-filter: blur(var(--blur-2, 18px)) saturate(var(--sat, 190%)); }
@media (max-width: 760px) { .glide-track.for-mtabs { border-radius: 22px; } }
.mainnav-seg.glide-room { padding-block: 13px; margin-block: -10px; background: none; box-shadow: none; position: relative; z-index: 1; }
.glide-track.for-mainnav { border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 1px rgba(16, 24, 40, .04);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
[dir="rtl"] .glide-track.for-mainnav { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
/* wide screens: the section tabs don't scroll, but the row around them does; it gets room above for the hop */
@media (min-width: 721px) { .mainnav-in { padding-top: 14px; margin-top: -12px; } }

/* ---------- phones: the search bar and the section tabs tuck away while scrolling down (motion.js, tuck) ----------
   The header keeps its size in the page; its glass moves to ::before so it can shrink to the brand row and the tape
   (its bottom edge moves up: a shifted backdrop-filter layer loses its blur in Chrome). */
@media (max-width: 560px) {
  header.bar { background: none; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  header.bar::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; pointer-events: none;
    background: var(--glass-bar); border-bottom: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--hi), 0 10px 30px -24px rgba(16, 24, 40, .35);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(180%); backdrop-filter: blur(var(--blur-bar)) saturate(180%); }
  header.bar .search, header.bar .mainnav, header.bar .tape { transition: transform .42s cubic-bezier(.3, .7, .2, 1), opacity .28s ease; }
  header.bar::before { transition: bottom .42s cubic-bezier(.3, .7, .2, 1); }
  header.bar.tucked { pointer-events: none; }
  header.bar.tucked::before { bottom: calc(var(--tuck, 0px) - 1px); }
  header.bar.tucked .tape { transform: translateY(calc(-1 * var(--tuck, 0px))); }
  header.bar.tucked .search, header.bar.tucked .mainnav { opacity: 0; transform: translateY(-14px) scale(.97); pointer-events: none; }
  header.bar.tucked .bar-in > :not(.search), header.bar.tucked .tape { pointer-events: auto; }
}

/* ---------- buttons ---------- */
/* the call to action on the landing page: it lifts, a gleam runs across it, and the arrow tips up like a launch */
.lp-cta { position: relative; overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), box-shadow .3s ease, background-color .2s; }
.lp-cta::after { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(150, 185, 255, .45), transparent); transform: translateX(-160%) skewX(-18deg); transition: none; animation: none; }
.lp-cta:hover::after { transform: translateX(340%) skewX(-18deg); transition: transform .85s cubic-bezier(.3, .6, .2, 1); }
.lp-cta.ghosted::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); }
.lp-cta:active { transform: scale(.96); transition-duration: .12s; }
.lp-cta-arrow { transition: transform .5s cubic-bezier(.34, 1.6, .64, 1); }
.lp-cta:hover .lp-cta-arrow { transform: rotate(-45deg); }
.lp[dir="rtl"] .lp-cta:hover .lp-cta-arrow, [dir="rtl"] .lp-cta:hover .lp-cta-arrow { transform: rotate(45deg); }

/* orange primary actions (sign in, save, join the waitlist): the same gleam and a springy press */
.auth-primary, .wel-go, .f-btn:not(.ghost):not(.danger), .card .pro-btn:not(.ghost), .pro-banner .pro-btn:not(.ghost) {
  position: relative; overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), box-shadow .3s ease, filter .2s; }
.auth-primary::after, .wel-go::after, .f-btn:not(.ghost):not(.danger)::after, .card .pro-btn:not(.ghost)::after, .pro-banner .pro-btn:not(.ghost)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-160%) skewX(-18deg); }
.auth-primary:hover::after, .wel-go:hover::after, .f-btn:not(.ghost):not(.danger):hover::after, .card .pro-btn:not(.ghost):hover::after, .pro-banner .pro-btn:not(.ghost):hover::after {
  transform: translateX(360%) skewX(-18deg); transition: transform .85s cubic-bezier(.3, .6, .2, 1); }
.auth-primary:active, .wel-go:active, .f-btn:not(.ghost):not(.danger):active, .card .pro-btn:not(.ghost):active, .pro-banner .pro-btn:not(.ghost):active { transform: scale(.95); transition-duration: .12s; }

/* glass buttons rise a little under the pointer and spring back when pressed */
.lang, .asof-btn, .data-status, .hc-more {
  transition: transform .4s cubic-bezier(.34, 1.6, .64, 1), background-color .2s, border-color .2s, color .2s, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .lang:hover, .asof-btn:not(:disabled):hover, .data-status:hover { transform: translateY(-1px); }
}
.lang:active, .asof-btn:not(:disabled):active, .data-status:active, .hc-more:active { transform: scale(.94); transition-duration: .12s; }
.asof-btn svg, .data-status svg { transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.asof-btn:not(:disabled):hover svg { transform: rotate(-120deg); }
.data-status[data-state="checking"] svg { animation: spin .9s linear infinite; }
.acct-btn { transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), filter .2s; }
.acct-btn:hover { transform: scale(1.08) rotate(-6deg); }
.acct-btn:active { transform: scale(.94); transition-duration: .12s; }

/* card arrows: the door arrow tips up into a launch; the index arrow nudges toward its corner */
.md-go { transition: transform .5s cubic-bezier(.34, 1.6, .64, 1), background-color .25s, color .25s; }
.md-door:hover .md-go { transform: rotate(-45deg); background: var(--blue); color: #fff; }
[dir="rtl"] .md-door:hover .md-go { transform: rotate(45deg); }
.idx .lbl .arr { transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), background-color .2s, color .2s; }
a.idx:hover .lbl .arr { transform: translate(2px, -2px) scale(1.12); }
[dir="rtl"] a.idx:hover .lbl .arr { transform: translate(-2px, -2px) scale(1.12); }

/* ---------- the EGX 30 card and Market pulse share one frosted panel ----------
   The card keeps its views, timer and colours per view; the view colour now tints the timer, the bars and a soft glow
   behind the glass instead of filling the whole card, and the text is the page's own ink. */
#home > section.hero { position: relative; isolation: isolate; gap: 6px; padding: 8px; border-radius: 30px;
  background: var(--glass-1); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-1)) saturate(var(--sat)); }
#home > section.hero > .hero-l.hc, #home > section.hero > .hero-r { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 22px; }
#home .hero-l.hc { color: var(--ink); --accent-ink: var(--ink); --accent-muted: var(--muted); }
#home .hero-l.hc::before, #home .hero-l.hc::after { display: none; }
#home .hc-glow { display: none; }
#home .hero-l .big { text-shadow: none; }
#home .hero-l .hero-chg .pill, #home .hero-l .hero-chg .pill.flat { background: var(--track); color: var(--ink-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#home .hero-l .hero-chg .pill.down { background: color-mix(in srgb, var(--down) 13%, transparent); color: var(--down); }
#home .hero-l .hero-chg .pill.up { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
#home .hero-l .hero-chg .pill.down::before { background: var(--down); } #home .hero-l .hero-chg .pill.up::before { background: var(--up); }
#home .hero-l .hero-stats { border-top-color: var(--line); }
#home .hero-l .hero-stats div + div { border-inline-start-color: var(--line); }
#home .hero-l .spark { color: var(--blue); }
#home .hero-l .spark line { stroke: var(--line-strong); }
#home .hero-l .spark-dot { background: #fff; box-shadow: 0 0 0 3px var(--blue), 0 0 16px 3px color-mix(in srgb, var(--blue) 45%, transparent); }
#home .hero-l .spark-dot::after { border-color: color-mix(in srgb, var(--blue) 55%, transparent); }
#home .hc-prog i { background: var(--track); }
#home .hc-prog b { background: var(--c2); }
#home .hc-ctl button { color: var(--ink-2); }
#home .hc-ctl button:hover, #home .hc-ctl button:focus-visible { background: var(--hover); color: var(--ink); }
#home .hc-tag { background: color-mix(in srgb, var(--c2) 15%, transparent); color: var(--ink); }
#home .hc-bar, #home .hc-div { background: var(--track); }
#home .hc-fill, #home .hc-mrow .hc-fill, #home .hc-rrow .hc-fill { background: var(--c2); }
#home .hc-rrow.inf .hc-fill { background: repeating-linear-gradient(135deg, #FFB547 0 6px, #F59E0B 6px 12px); }
#home .hc-brow.bu .hc-fill, #home .hc-div .hc-fill.pos { background: var(--up); }
#home .hc-brow.bd .hc-fill, #home .hc-div .hc-fill.neg { background: var(--down); }
#home .hc-brow.bf .hc-fill { background: var(--flat); }
#home .hc-div::before { background: var(--line-strong); }
#home .hc-gap { background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 7px); }
#home .hc-ring { border-top-color: var(--line); }
#home .hc-ring .bg { stroke: var(--track); }
#home .hc-ring .fg { stroke: var(--c2); }
#home .hc-ring p b { color: var(--ink); }
#home :is(.hc-srow, .hc-mrow, .hc-nrow, .hc-hl) { color: var(--ink); }
#home .hc-srow b.up { color: var(--up); } #home .hc-srow b.down { color: var(--down); }
#home .hc-nlist { border-top-color: var(--line); }
#home .hc-more { background: color-mix(in srgb, var(--c2) 14%, transparent); color: var(--ink); }
#home .hc-more:hover { background: color-mix(in srgb, var(--c2) 24%, transparent); }
#home :is(.hc-srow, .hc-mrow, .hc-nrow, .hc-hl, .hc-more, .hc-ctl button):focus-visible { outline-color: var(--blue); }
@media (min-width: 901px) {
  #home .hc-tabs { margin: 0 12px 12px; padding: 3px; gap: 2px; border-radius: 999px; background: var(--track); }
  #home .hc-tabs [role="tab"] { color: var(--muted); background: transparent; }
  #home .hc-tabs [role="tab"]:hover { color: var(--ink); background: var(--hover); }
  #home .hc-tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--seg-on); box-shadow: var(--seg-on-shadow); }
  #home .hc-tabs [role="tab"]:focus-visible { outline-color: var(--blue); }
}
@media (max-width: 760px) { #home > section.hero { padding: 6px; border-radius: 24px; } }

/* ---------- the session brief: glass, like the cards around it, instead of a block of orange ----------
   (:not(#lp) only lifts these rules above the brief's own theme-specific ones in glass.css) */
:root:not(#lp) .card.brief { color: var(--ink); text-shadow: none; border: 1px solid var(--edge);
  background-color: var(--glass-1); background-image: radial-gradient(120% 85% at 0% 0%, var(--tint) 0%, transparent 62%), linear-gradient(var(--wash), var(--wash));
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-1)) saturate(var(--sat)); }
:root:not(#lp) .card.brief :is(h2, .br-v) { color: var(--ink); }
:root:not(#lp) .card.brief :is(.eyebrow, .br-l, .br-cell small, .br-v .br-sub) { color: var(--muted); }
:root:not(#lp) .card.brief :is(.br-v .up, .br-v.up) { color: var(--up); }
:root:not(#lp) .card.brief :is(.br-v .down, .br-v.down) { color: var(--down); }
:root:not(#lp) .card.brief .br-chip { color: var(--ink); background: var(--track); box-shadow: inset 0 0 0 1px var(--line); }
:root:not(#lp) .card.brief .br-chip.down i { background: var(--down); } :root:not(#lp) .card.brief .br-chip.up i { background: var(--up); }
:root:not(#lp) .card.brief :is(.br-grid, .br-cell) { border-color: var(--line); }
:root:not(#lp) .card.brief .br-cell:is(:nth-child(4n+2), :nth-child(4n+3), :nth-child(4n+4)) { border-inline-start-color: var(--line); }
:root:not(#lp) .card.brief a.br-cell:hover .br-v { color: var(--ink); text-decoration-color: var(--line-strong); }

/* ---------- less motion, on request: everything above changes at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .tsw-track, .tsw-track::before, .tsw-knob, .tsw-knob svg, .tsw-star, .glide.glide-go, .lp-cta, .lp-cta::after, .lp-cta-arrow,
  .auth-primary, .wel-go, .f-btn, .pro-btn, .lang, .asof-btn, .data-status, .hc-more, .acct-btn, .md-go, .idx .lbl .arr { transition: none !important; }
  .lp-cta:hover::after, .auth-primary:hover::after, .wel-go:hover::after, .f-btn:hover::after, .pro-btn:hover::after { transition: none !important; transform: translateX(-160%) skewX(-18deg); }
  .md-door:hover .md-go, a.idx:hover .lbl .arr, .lp-cta:hover .lp-cta-arrow, .acct-btn:hover { transform: none; }
  header.bar::before, header.bar .search, header.bar .mainnav, header.bar .tape { transition: none !important; }
}

/* ----- light ⇄ dark: one wave from the switch (theme.js, wave) -----
   The page as it was stays still; the page in the new theme is uncovered from the switch outwards through a soft,
   feathered circle (a radial-gradient mask that grows from nothing at the switch to past the far corner), so the
   change sweeps across rather than blinking. The mask's size and place are animated directly, and at rest it has no
   size, so the new page stays covered even before the animation's first frame (Safari showed it for one frame when
   the mask hung on an animated custom property). While it runs, colours don't also fade element by element: the wave
   carries the final ones, charts included. The switch itself keeps its own motion. */
html.theme-vt body, html.theme-vt :where(body *:not(.tsw, .tsw *)) { transition: none !important; }
html.theme-vt::view-transition-old(root) { animation: none; }
html.theme-vt::view-transition-new(root) {
  animation: vt-wave .95s cubic-bezier(.33, .1, .25, 1) both;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .6) 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .6) 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 0 0; mask-size: 0 0;
  -webkit-mask-position: var(--vt-x, 90%) var(--vt-y, 0px); mask-position: var(--vt-x, 90%) var(--vt-y, 0px);
}
@keyframes vt-wave {
  from { -webkit-mask-size: 0 0; mask-size: 0 0; -webkit-mask-position: var(--vt-x) var(--vt-y); mask-position: var(--vt-x) var(--vt-y); }
  to { -webkit-mask-size: var(--vt-d) var(--vt-d); mask-size: var(--vt-d) var(--vt-d);
    -webkit-mask-position: var(--vt-x0) var(--vt-y0); mask-position: var(--vt-x0) var(--vt-y0); }
}