/* A skewed curtain enters and retracts to the left, as on touchin.ru.
   It spans both documents; no View Transitions API support is required. */
html::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% + (100px + 100vh) / 3.07);
  height: 100vh;
  height: 100dvh;
  z-index: 2147483646;
  background-color: #4665ff;
  background-image: linear-gradient(101.83deg, #4665ff 8.66%, #ff9659 91.34%);
  transform: skewX(-18deg) translateX(calc(-100% - (100px + 100vh) / 6.154));
  pointer-events: none;
  visibility: hidden;
}
html[data-page-transition]::after {
  visibility: visible;
  pointer-events: auto;
  will-change: transform;
}
html[data-page-transition="cover"]::after {
  animation: appsola-curtain-cover 520ms ease-in-out forwards;
}
html[data-page-transition="covered"]::after {
  transform: skewX(-18deg) translateX(calc((100px + 100vh) / -6.014));
}
html[data-page-transition="reveal"]::after {
  animation: appsola-curtain-reveal 1s ease-in-out forwards;
}
@keyframes appsola-curtain-cover {
  from { transform: skewX(-18deg) translateX(calc(-100% - (100px + 100vh) / 6.154)); }
  to { transform: skewX(-18deg) translateX(calc((100px + 100vh) / -6.014)); }
}
@keyframes appsola-curtain-reveal {
  0%, 60% { transform: skewX(-18deg) translateX(calc((100px + 100vh) / -6.014)); }
  100% { transform: skewX(-18deg) translateX(calc(-100% - (100px + 100vh) / 6.154)); }
}
/* With viewport-fit=cover, keep content clear of the notch and home indicator. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.header-shell { padding-top: env(safe-area-inset-top, 0px); }
html { scroll-padding-top: calc(116px + env(safe-area-inset-top, 0px)); }
@media (max-width: 800px) {
  html { scroll-padding-top: calc(102px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 800px), (pointer: coarse) {
  /* iOS 26 clips fixed layers above its floating toolbar. Paint this curtain
     as document content instead, anchored to the current scroll position.
     A stable large viewport plus bleed also covers collapsing browser bars. */
  html::after {
    --curtain-height: calc(100vh + 160px);
    /* Keep browser chrome on the resting canvas color throughout navigation.
       Blend the curtain into it instead of briefly tinting the root blue.
       The first 80px are above the viewport. */
    background-image: linear-gradient(180deg,var(--canvas-color,#e7eafb) calc(80px + env(safe-area-inset-top,0px)),transparent calc(160px + env(safe-area-inset-top,0px))),linear-gradient(101.83deg,#4665ff 8.66%,#ff9659 91.34%);
    display: none;
    position: absolute;
    top: calc(var(--curtain-page-y, 0px) - 80px);
    width: calc(100% + var(--curtain-height) / 4);
    height: var(--curtain-height);
    transform: skewX(-12deg) translateX(calc(-100% - var(--curtain-height) / 8));
  }
  @supports (height: 100lvh) {
    html::after { --curtain-height: calc(100lvh + 160px); }
  }
  html[data-page-transition] { overflow-x: clip; overscroll-behavior: none; }
  html[data-page-transition]::after { display: block; }
  html[data-page-transition="cover"]::after {
    animation: appsola-mobile-cover 320ms cubic-bezier(.45, 0, .2, 1) forwards;
  }
  html[data-page-transition="covered"]::after {
    transform: skewX(-12deg) translateX(calc(var(--curtain-height) / -8));
  }
  html[data-page-transition="reveal"]::after {
    animation: appsola-mobile-reveal 420ms cubic-bezier(.3, 0, .2, 1) forwards;
  }
  @keyframes appsola-mobile-cover {
    from { transform: skewX(-12deg) translateX(calc(-100% - var(--curtain-height) / 8)); }
    to { transform: skewX(-12deg) translateX(calc(var(--curtain-height) / -8)); }
  }
  @keyframes appsola-mobile-reveal {
    from { transform: skewX(-12deg) translateX(calc(var(--curtain-height) / -8)); }
    to { transform: skewX(-12deg) translateX(calc(-100% - var(--curtain-height) / 8)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html::after { display: none; animation: none !important; }
}