/* Light and dark themes.
   The page styles are written for dark; html.theme-dark keeps them as they are, and everything below turns the
   light theme on when that class is absent. The class is set before first paint by the inline script in each
   page's <head> (saved choice, else the device setting) and switched by the toggle in site-nav.js.
   The brand gradient scenes (headers, testimonial sections, finale, footers) switch to a pastel palette in the
   page scripts; anything drawn over a photo or video (feature cards, glass panels on images) keeps white text. */

html.theme-dark{color-scheme:dark}
:root:not(.theme-dark){
  color-scheme:light;
  --paper:#efeff4; --card:#fff; --text:#0c0b10;
  --text-2:rgba(12,11,16,.68); --text-3:rgba(12,11,16,.64); --line:rgba(12,11,16,.1); --line-2:rgba(12,11,16,.16);
  --card-shadow:0 1px 2px rgba(20,26,48,.04),0 24px 60px rgba(20,26,48,.08);
  --muted:#8a8893;

  /* ---------- Page ---------- */
  & body{background:var(--paper);color:var(--text)}
  & .about,& .services-bento{background:var(--paper);color:var(--text)}
  /* the header shrinks into a rounded card on scroll; what shows around it is the page */
  & .hero{background:var(--paper)}
  & .statement{color:var(--text)}
  & .statement .muted{color:#9d9aa6}
  & .lede,& .process-intro p{color:var(--text-2)}

  /* ---------- Nav: dark text; light glass once it's a pill ---------- */
  & .nav{color:var(--text)}
  & .nav::before{background:rgba(255,255,255,.86);border-color:rgba(12,11,16,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,26,48,.05),0 12px 32px rgba(20,26,48,.1)}
  & .nav .nav-links a,& .nav .nav-menu-btn{color:rgba(12,11,16,.86)}
  & .nav .nav-links a:hover,& .nav .nav-menu-btn:hover,& .nav .nav-menu-btn[aria-expanded="true"]{color:var(--text)}
  & .nav .wordmark img,& .nav .nav-links .ext img{filter:brightness(0)}
  /* Burger: light glass with dark bars wherever the nav is light */
  & .nav .nav-burger{background:rgba(255,255,255,.7);border-color:rgba(12,11,16,.1);box-shadow:inset 0 1px 0 #fff,0 8px 24px rgba(20,26,48,.1)}
  & .nav .nav-burger span{background:var(--text)}

  /* Services dropdown and phone menu */
  & .services-menu{background:rgba(255,255,255,.78);border-color:rgba(12,11,16,.08);box-shadow:inset 0 1px 0 #fff,0 30px 80px rgba(20,26,48,.18)}
  & .nav .services-menu a.svc-link{color:var(--text)}
  & .nav .services-menu a.svc-link:hover,& .nav .services-menu a.svc-link:focus-visible,& .nav .services-menu a.svc-link.is-current{background:rgba(12,11,16,.05)}
  & .svc-link-icon{stroke:rgba(12,11,16,.8)}
  & .svc-link-text{color:var(--text-3)}
  & .mobile-menu{background:rgba(239,239,244,.82)}
  & .mm-inner,& .mm-services a,& .mm-links a{color:var(--text)}
  & .mm-label,& .mm-services small{color:var(--text-3)}
  & .mm-services a{border-bottom-color:var(--line)}
  & .mm-services svg{stroke:rgba(12,11,16,.8)}
  & body:has(.mobile-menu.open) .nav{color:var(--text)}
  & body:has(.mobile-menu.open) .nav .wordmark img{filter:brightness(0)}
  & body:has(.mobile-menu.open) .nav .nav-burger{background:rgba(255,255,255,.7);border-color:rgba(12,11,16,.1);box-shadow:inset 0 1px 0 #fff,0 8px 24px rgba(20,26,48,.1)}
  & body:has(.mobile-menu.open) .nav .nav-burger span{background:var(--text)}

  /* ---------- Buttons: white pills with dark text; the glow keeps travelling round the edge ---------- */
  & .btn-glow.btn-glow.btn-glow{background:#fff;color:var(--text);
    box-shadow:inset 0 -14px 24px -18px rgba(255,165,130,.55),inset 14px 0 24px -20px rgba(94,128,240,.45),0 1px 2px rgba(20,26,48,.08),0 8px 24px rgba(20,26,48,.12)}
  & .btn-glow.btn-glow.btn-glow:hover,& .svc:hover .btn-glow.btn-glow.btn-glow{background:#fff;color:var(--text);
    box-shadow:inset 0 -14px 24px -14px rgba(255,165,130,.7),inset 14px 0 24px -16px rgba(94,128,240,.55),0 1px 2px rgba(20,26,48,.08),0 12px 30px rgba(20,26,48,.16)}
  & .btn-glow::before{background:linear-gradient(140deg,rgba(12,11,16,.14),rgba(12,11,16,.06) 50%,rgba(12,11,16,.12))}
  /* arrow tiles turn ink so the white arrow still reads */
  & .nav .cta-small .tile,& .mobile-menu .mm-cta .tile{background:var(--text);border-color:transparent;box-shadow:none}
  & .svc-go.btn-glow img{filter:brightness(0)}

  /* ---------- Cards ---------- */
  & .bezel-dark{border-color:rgba(12,11,16,.06);background:var(--card);
    box-shadow:inset 0 0 0 var(--bezel) #f3f2f6,inset 0 0 0 calc(var(--bezel) + 1px) rgba(12,11,16,.05),var(--card-shadow)}
  /* single glass edge cards (process, case studies, design systems): white sheet, light catching the top-left edge */
  & .tl-card.bezel-dark,& .case.bezel-dark,& .svc-text.bezel-dark{background:linear-gradient(160deg,#fff,#faf9fc);box-shadow:var(--card-shadow)}
  & .tl-card.bezel-dark::before,& .case.bezel-dark::before,& .svc-text.bezel-dark::before{
    background:linear-gradient(145deg,rgba(12,11,16,.04) 0%,rgba(12,11,16,.09) 30%,rgba(12,11,16,.07) 52%,rgba(255,146,207,.5) 80%,rgba(111,157,255,.65) 100%)}
  & .svc,& .st-quote-card,& .st-me,& .way,& .tl-card{color:var(--text)}
  & .svc-n,& .tl-n{color:var(--text-3)}
  & .svc-body>p:not(.svc-n),& .way p:not(.svc-n),& .tl-card p:last-child{color:var(--text-2)}
  & .svc .tags span,& .case-tags li{border-color:var(--line-2);color:var(--text-2)}
  & .svc-icon,& .tl-icon{stroke:rgba(12,11,16,.8)}
  & .svc-media{background:#e9e8ee;box-shadow:0 0 0 1px rgba(12,11,16,.06)}
  & .services-bento .svc-ai .svc-media{box-shadow:none} /* sits inside the card frame: no second outline */
  & .svc-text{background:radial-gradient(90% 70% at 100% 0%,rgba(111,157,255,.2),transparent 60%),radial-gradient(80% 70% at 0% 100%,rgba(255,146,207,.18),transparent 60%),#fff}
  & .st-quote-card .lbl,& .st-me .lbl{color:var(--text-3)}
  & .st-quote-card blockquote{color:var(--text)}
  & .st-quote-card cite{color:var(--text-3)}
  & .avatars img{border-color:#fff;background:#e9e8ee}
  /* 150+ card: the dark ribbons photo inverted to a light one (hue turned back so the blue and gold light stay put) */
  & .st-photo{background:var(--paper)}
  & .st-photo>img{filter:invert(1) hue-rotate(180deg) saturate(1.15)}
  & .st-photo .scrim{background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.25))}
  & .st-photo .inner{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8);color:var(--text);box-shadow:0 12px 32px rgba(20,26,48,.08)}
  & .st-photo .inner .num{color:var(--text)}
  & .st-photo .inner p:not(.num){color:var(--text-2)}

  /* Cards drawn over photos, video or the brand gradient keep white text */
  & .svc-feature{color:#fff}
  & .svc-feature .svc-n{color:rgba(255,255,255,.72)}

  & .svc-feature .svc-body>p:not(.svc-n){color:rgba(255,255,255,.75)}
  & .svc-feature .svc-media{background:#101114}

  /* Gradient cards: the brand lights on a pale lilac base, dark text */
  --brand-grad:radial-gradient(110% 90% at 0% 100%,rgba(196,150,244,.5) 0,transparent 55%),radial-gradient(60% 50% at 0% 100%,rgba(255,146,207,.22) 0,transparent 60%),radial-gradient(80% 70% at 100% 0%,rgba(255,217,138,.4) 0,transparent 60%),radial-gradient(90% 80% at 100% 100%,rgba(111,157,255,.55) 0,transparent 60%),linear-gradient(160deg,#eeebfc,#e0dcf7);
  & .svc-cta,& .way-grad,& .st-grad{background:var(--brand-grad);color:var(--text);box-shadow:var(--card-shadow)}
  & .st-grad .lbl,& .svc-cta .svc-n,& .way-grad .svc-n{color:var(--text-3)}
  & .st-grad p:last-child,& .svc-cta .svc-body>p:not(.svc-n),& .way-grad p:not(.svc-n){color:var(--text-2)}

  /* AI card: a light terminal on a soft brand glow, text on a fade to white */
  & .svc-ai{color:var(--text)}
  & .svc-ai .svc-media{background:radial-gradient(70% 55% at 20% 15%,rgba(111,157,255,.22),transparent 70%),radial-gradient(60% 50% at 90% 30%,rgba(255,146,207,.2),transparent 70%),#f7f6fa}
  & .svc-ai .svc-media::after{background:linear-gradient(to top,#fff,rgba(255,255,255,.88) 38%,rgba(255,255,255,0) 62%)}
  & .svc-ai .svc-n{color:var(--text-3)}
  & .svc-ai .svc-body>p:not(.svc-n){color:var(--text-2)}
  & .cc-window{background:rgba(255,255,255,.94);border-color:rgba(12,11,16,.1);color:#3d3a48;box-shadow:0 24px 50px rgba(20,26,48,.12),inset 0 1px 0 #fff}
  & .cc-bar{border-bottom-color:rgba(12,11,16,.07);color:rgba(12,11,16,.64)}
  & .cc-bar i{background:rgba(12,11,16,.14)}
  & .cc-welcome{color:#3d3a48;border-color:rgba(217,119,87,.75)}
  & .cc-welcome b,& .cc-prompt{color:var(--text)}
  & .cc-prompt span{color:rgba(12,11,16,.64)}
  & .cc-step .dot{color:#1f9d55}
  & .cc-step em{color:#4058d6}
  & .cc-diff.add{background:rgba(31,157,85,.1);color:#16794a}
  & .cc-diff.del{background:rgba(214,58,58,.09);color:#b3302f}
  & .cc-done{color:#16794a}
  & .cc-cursor{background:#3d3a48}

  /* ---------- Gradient scenes: headers, finale, testimonials, footers ---------- */
  & canvas.grad{opacity:1}
  /* light headers: one even #efeef4 field (set in the gradient scripts) with soft corner lights */
  & .hero-clip{background:transparent}

  & .finale,& .footer{background:var(--paper)}
  & .finale .footer{background:transparent}
  & .finale::before{background:linear-gradient(rgba(20,26,48,.12),rgba(20,26,48,0))}
  & .hero-ui,& .chain-ui{color:var(--text)}
  & .insight .b{color:var(--text-2)}

  & .chain-band .big{color:rgba(12,11,16,.32)}
  & .footer{color:var(--text)}
  & .footer-nav{border-top-color:var(--line-2)}
  & .fn-title,& .legal{color:var(--text-3)}
  & .fn-col a,& .fn-col address{color:var(--text-2)}
  & .fn-col a:hover{color:var(--text)}
  /* testimonials: frosted white glass over the pastel gradient */
  & .break{color:var(--text)}
  & .break .voice{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff,0 24px 60px rgba(20,26,48,.1)}
  & .voice::before{background:linear-gradient(145deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.5) 30%,rgba(12,11,16,.06) 55%,rgba(255,146,207,.5) 80%,rgba(111,157,255,.65) 100%)}
  & .voice blockquote{color:var(--text)}
  & .voice b{color:var(--text)}
  & .voice small{color:var(--text-3)}

  /* ---------- Brand packages ---------- */
  & .pkg{color:var(--text)}
  & .pkg-desc{color:var(--text-2)}
  & .pkg-plus{color:var(--text)}
  & .pkg-list{border-top-color:var(--line)}
  & .pkg-list li{color:var(--text-2)}
  & .pkg.way-grad .pkg-desc{color:var(--text-2)}
  & .pkg.way-grad .pkg-list{border-top-color:rgba(12,11,16,.12)}
  & .pkg.way-grad .pkg-list li::before{background:linear-gradient(135deg,#ff92cf,#ffd98a 45%,#6f9dff)}

  & .pkg-badge{color:var(--text);background:rgba(255,255,255,.7);border-color:rgba(12,11,16,.1)}
  & .pkg-best,& .pkg.way-grad .pkg-best{color:var(--text-2)}
  & .pkg-best span{color:var(--text)}
  & .pkg-time,& .pkg.way-grad .pkg-time{color:var(--text-3)}
  & .pkg-more{border-color:var(--line);background:#fff;box-shadow:var(--card-shadow)}
  & .pkg-addons li{border-top-color:var(--line);color:var(--text-2)}
  & .pkg-addons li small,& .pkg-terms{color:var(--text-3)}
  & .pkg-addons li>span:last-child,& .pkg-terms .pkg-startup{color:var(--text)}
  & .cur-switch{border-color:var(--line-2)}
  & .cur-switch button{color:var(--text-3)}
  & .cur-switch button:hover{color:var(--text)}
  & .cur-switch button[aria-pressed="true"]{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(20,26,48,.12)}

  /* ---------- Product page: open header, gallery cards, ticker ---------- */
  & .phead-eyebrow,& .phead-for{color:var(--text-3)}
  & .phead-sub{color:var(--text-2)}
  & .phead-link{color:var(--text);text-decoration-color:rgba(12,11,16,.25)}
  & .phead-for::before,& .phead-for::after{background:linear-gradient(90deg,transparent,rgba(12,11,16,.14),transparent)}
  & .phead-logos li{border-left-color:var(--line)}
  & .phead-logos img{filter:invert(1);opacity:.45}
  & .pcard-in{background:linear-gradient(160deg,#fff,#faf9fc);box-shadow:0 1px 2px rgba(24,18,48,.05),0 24px 60px rgba(24,18,48,.08)}
  & .pcard-in::before{background:linear-gradient(145deg,rgba(12,11,16,.04) 0%,rgba(12,11,16,.09) 30%,rgba(12,11,16,.07) 52%,rgba(255,146,207,.5) 80%,rgba(111,157,255,.65) 100%)}
  & .pcard-media{background:#ecebf0}
  & .pcard-tags{color:var(--text-3)}
  & .ticker{border-color:var(--line)}
  & .ticker li{color:var(--text-3)}

  & .intro-mark,& .intro-eyebrow{color:var(--text-3)}
  & .intro-lead{background-image:linear-gradient(100deg,#c4508f,#b57d1c 50%,#4c67d1)}
  & .jb{background:rgba(12,11,16,.035);border-color:rgba(12,11,16,.06)}
  & .jb-in{background:#fff;box-shadow:0 1px 2px rgba(24,18,48,.04)}

  & .jb,& .jb-in{color:var(--text)}
  & .jb-label{color:var(--text-3)}
  & .jb-text{color:var(--text-2)}
  & .jb .tags span{border-color:var(--line-2);color:var(--text-2)}
  & .jb-dots{background-image:radial-gradient(circle,rgba(12,11,16,.18) 1.3px,transparent 1.6px)}
  & .jb-strip .jb-text{border-left-color:var(--line)}
  & .jb-mark{background:#f3f2f7;border-color:var(--line)}
  & .jb-photo .jb-in{background:#efeef4}
  & .jb-awards .jb-in{background:var(--brand-grad);box-shadow:var(--card-shadow)}
  & .jb-awards .jb-label{color:var(--text-3)}
  & .jb-awards .jb-awards-text{color:var(--text-2)}
  & .jb-photo img{filter:invert(1) hue-rotate(180deg) saturate(1.15)}
  & .jb-photo-panel{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8);box-shadow:0 12px 32px rgba(24,18,48,.08)}
  & .jb-photo-panel p:not(.jb-num){color:var(--text-2)}
  & .jb-avatars img{border-color:#fff}
  & .jb-quote blockquote{color:var(--text)}
  & .jb-quote cite{color:var(--text-3)}
  & .jb-glass .jb-in{background:linear-gradient(160deg,#fff,#faf9fc);box-shadow:var(--card-shadow)}
  & .jb-glass .jb-in::before{background:linear-gradient(145deg,rgba(12,11,16,.04) 0%,rgba(12,11,16,.09) 30%,rgba(12,11,16,.07) 52%,rgba(255,146,207,.5) 80%,rgba(111,157,255,.65) 100%)}
  & .jb-grad .jb-in{background:var(--brand-grad)}
  & .jb-grad .jb-label{color:var(--text-3)}
  & .jb-grad .jb-text{color:var(--text-2)}
  & .jb-grad .tags span{border-color:rgba(12,11,16,.18);color:var(--text-2)}
  & .jb-grad .jb-dots{background-image:radial-gradient(circle,rgba(12,11,16,.16) 1.3px,transparent 1.6px)}
  & .jb-illo{background:radial-gradient(70% 60% at 20% 15%,rgba(111,157,255,.16),transparent 70%),radial-gradient(60% 55% at 90% 30%,rgba(255,146,207,.14),transparent 70%),#f6f5f9;box-shadow:inset 0 0 0 1px rgba(12,11,16,.06)}
  & .flow-svg .fl-node{fill:#fff;stroke:rgba(12,11,16,.22)}
  & .flow-svg .fl-on{fill:rgba(111,157,255,.12);stroke:#4c67d1}
  & .flow-svg .fl-line,& .flow-svg .fl-arrow{stroke:rgba(12,11,16,.3)}
  & .flow-svg text{fill:rgba(12,11,16,.7)}
  & .kit-sw{box-shadow:inset 0 0 0 1px rgba(12,11,16,.1)}
  & .kit-sw-line{box-shadow:inset 0 0 0 1px rgba(12,11,16,.3)}
  & .kit-token{color:var(--text-3)}
  & .kit-btn{background:var(--text);color:#fff}
  & .kit-ghost{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px rgba(12,11,16,.25)}
  & .kit-input{color:var(--text-3);background:#fff;box-shadow:inset 0 0 0 1px rgba(12,11,16,.16)}
  & .kit-chip{color:#16794a;background:rgba(31,157,85,.12)}
  & .kit-chip-off{color:var(--text-3);background:rgba(12,11,16,.06)}

  /* ---------- Home: selected case studies ---------- */
  & .wk-bg{background:var(--paper)}
  & .wk-bg::after{background:rgba(239,239,244,.74)}
  & .work-flow::before{background:linear-gradient(var(--paper),rgba(239,239,244,0))}
  & .works,& .case-slot{color:var(--text)}
  & .case-dim{background:var(--paper)}
  & .case-client{color:var(--text-2)}
  & .case-years{color:var(--text-3)}
  & .case-media{background:#e9e8ee;box-shadow:0 0 0 1px rgba(12,11,16,.06)}

  /* ---------- Process timeline ---------- */
  & .process-tl{background:var(--paper);color:var(--text)}
  & .work-flow .process-tl{background:linear-gradient(rgba(239,239,244,0),var(--paper) 18rem)}
  & .tl::before{background:linear-gradient(90deg,transparent,rgba(12,11,16,.16) 6%,rgba(12,11,16,.16) 94%,transparent)}
  & .tl-step::before{background:linear-gradient(rgba(12,11,16,.16),transparent)}
  & .tl-node{background:var(--paper);border-color:rgba(12,11,16,.16);color:var(--text-2);box-shadow:0 0 0 4px var(--paper)}
  @media (max-width:1023px){
    & .tl::before{background:linear-gradient(transparent,rgba(12,11,16,.16) 4%,rgba(12,11,16,.16) 96%,transparent)}
    & .tl-step::before{background:linear-gradient(90deg,rgba(12,11,16,.16),transparent)}
  }

  /* ---------- Get started ---------- */
  & .hire::before{opacity:.8}
  & .status{color:var(--text-2);border-color:var(--line-2)}
  & .hire .lead{color:var(--text-2)}
  & .flow{background:rgba(255,255,255,.6);border-color:rgba(12,11,16,.08);box-shadow:inset 0 1px 0 #fff,var(--card-shadow)}
  & .flow-title{color:var(--text)}
  & .step-count,& .step-hint,& .result-services,& .option-desc,& .plan-name,& .unit,& .days-top label,& .days-ends,& .proof-quote figcaption,& .form-foot small,& .field em,& .field small{color:var(--text-3)}
  & .result-note,& [data-summary],& .plan-desc,& .plan-list li,& .proof-facts li{color:var(--text-2)}
  & .option{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(20,26,48,.04)}
  & .option:hover{background:#fff;border-color:var(--line-2);box-shadow:0 10px 28px rgba(20,26,48,.08)}
  & .option-name,& .amount,& .days-top output,& .text-link,& .booked p,& .interest-title{color:var(--text)}
  & .text-link:hover{color:var(--text-2)}
  & .option-check .check{border-color:rgba(12,11,16,.3)}
  & .option-check[aria-pressed="true"]{background:rgba(12,11,16,.04);border-color:rgba(12,11,16,.35)}
  & .proof,& .days{background:rgba(12,11,16,.025);border-color:var(--line)}
  & .proof-quote blockquote{color:var(--text)}
  & .proof-facts li{border-color:var(--line-2)}
  & .plan{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(20,26,48,.04)}
  & .tag{color:var(--text);border-color:var(--line-2)}
  & .days input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ff92cf,#ffd98a 50%,#6f9dff) 0/var(--fill) 100% no-repeat,rgba(12,11,16,.12)}
  & .days input::-moz-range-track{background:rgba(12,11,16,.12)}
  & .days input::-webkit-slider-thumb{box-shadow:0 2px 10px rgba(20,26,48,.25),0 0 0 1px rgba(12,11,16,.08)}
  & .days input::-moz-range-thumb{box-shadow:0 2px 10px rgba(20,26,48,.25),0 0 0 1px rgba(12,11,16,.08)}
  & .interest,& .booked{border-top-color:var(--line)}
  & .field{color:var(--text-2)}
  & .field input,& .field textarea,& .field select{color:var(--text);background:#fff;border-color:var(--line-2)}
  & .field input:hover,& .field textarea:hover,& .field select:hover{border-color:rgba(12,11,16,.28)}
  & .field input:focus,& .field textarea:focus,& .field select:focus{border-color:rgba(12,11,16,.5);background:#fff}
  & .form-error{color:#c62f2f}
  & .form-error a{color:var(--text)}
}

/* ---------- Theme toggle (markup and behaviour in site-nav.js) ---------- */
.nav .theme-toggle{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:4px;border-radius:50%;color:inherit;transition:background-color .2s}
.nav .theme-toggle:hover{background:rgba(255,255,255,.1)}
:root:not(.theme-dark) .nav .theme-toggle:hover{background:rgba(0,0,0,.07)}
.nav .theme-toggle:focus-visible{outline:2px solid #6ea8fe;outline-offset:2px}
.theme-toggle svg{position:absolute;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
/* light: the moon shows (switch to dark); dark: the sun shows */
.theme-toggle .ic-sun{opacity:0;transform:rotate(90deg) scale(.6)}
.theme-dark .theme-toggle .ic-sun{opacity:1;transform:none}
.theme-dark .theme-toggle .ic-moon{opacity:0;transform:rotate(-90deg) scale(.6)}
@media (prefers-reduced-motion:reduce){.theme-toggle svg{transition:none}}
/* the circle reveal animates the new snapshot itself, so the default cross-fade is switched off */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}