.animated-heading {
  text-wrap: balance;
}

.animated-heading .heading-clause {
  display: block;
}

.animated-heading .title-glass,
.animated-heading .rule-motion,
.animated-heading .capture-word {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
}

.animated-heading .rule-motion-label {
  min-width: 0;
}

.animated-heading .title-glass-collection {
  display: inline-flex;
  padding: 0 .05em;
  margin: 0 -.05em .88em;
  white-space: nowrap;
  perspective: none;
  transform-style: flat;
}
.animated-heading .collection-label { color: #216ee4; }
.section .animated-heading .title-glass-collection::before {
  inset: auto .05em -.035em;
  height: .075em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,rgba(92,156,255,.08),rgba(92,156,255,.32),rgba(92,156,255,.08));
  box-shadow: none;
  opacity: 1;
  transform: none;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.section .animated-heading .title-glass-collection::after { content: none; animation: none; }
.animated-heading .collection-sort {
  inset: calc(100% + .12em) 0 auto;
  height: .58em;
  transform-style: flat;
}
.animated-heading .collection-item {
  top: 0;
  left: 50%;
  right: auto;
  width: .5em;
  height: .56em;
  min-width: 16px;
  min-height: 18px;
  border: 1px solid rgba(78,134,215,.24);
  border-radius: .1em;
  background: linear-gradient(145deg,#fff,#e8f2ff);
  box-shadow: 0 3px 8px rgba(45,93,163,.1),inset 0 1px 0 #fff;
  color: #357be0;
  opacity: .95;
  transform: translateX(calc(-50% + var(--to-x))) translateY(.05em) rotate(var(--to-angle));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: auto;
}
.animated-heading .collection-item svg { width: 60%; height: 60%; }
.animated-heading .collection-item-document { --from-x: -2em; --to-x: -1.65em; --from-angle: -12deg; --to-angle: -3deg; --item-delay: 0s; }
.animated-heading .collection-item-place { --from-x: -.7em; --to-x: 0em; --from-angle: 9deg; --to-angle: 2deg; --item-delay: .12s; color: #209b94; background: linear-gradient(145deg,#fff,#e7f6f2); }
.animated-heading .collection-item-shopping { --from-x: .7em; --to-x: 1.65em; --from-angle: -8deg; --to-angle: -2deg; --item-delay: .24s; color: #8660ce; background: linear-gradient(145deg,#fff,#f0eaff); }
.animated-heading .collection-item-idea { --from-x: 2em; --to-x: .14em; --from-angle: 12deg; --to-angle: 6deg; --item-delay: .36s; color: #b18a32; background: linear-gradient(145deg,#fff,#fff5df); }
.animated-heading .collection-tray {
  inset: calc(100% + .19em) 0 auto;
  height: .5em;
  perspective: none;
  transform-style: flat;
}
.animated-heading .collection-tray i {
  inset: 0 auto 0 7%;
  width: 26%;
  margin: 0;
  border: 1px solid rgba(92,156,255,.23);
  border-radius: .08em .12em .12em;
  background: linear-gradient(145deg,rgba(236,246,255,.9),rgba(195,222,255,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 3px 8px rgba(45,93,163,.07);
  opacity: .85;
  transform: none;
  transform-origin: center;
}
.animated-heading .collection-tray i::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -.07em;
  width: 42%;
  height: .09em;
  border: 1px solid rgba(92,156,255,.23);
  border-bottom: 0;
  border-radius: .045em .045em 0 0;
  background: #e5f0ff;
}
.animated-heading .collection-tray i:nth-child(2) { left: 37%; margin: 0; }
.animated-heading .collection-tray i:nth-child(3) { left: 67%; margin: 0; }
.animated-heading .collection-scan {
  top: calc(100% + .07em);
  bottom: auto;
  left: 8%;
  width: 84%;
  height: .02em;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,rgba(61,135,240,.6),transparent);
  box-shadow: none;
  opacity: 0;
  transform: none;
}
.animated-heading .collection-confirmation {
  inset: calc(100% + .36em) .2em auto auto;
  z-index: 6;
  width: .22em;
  height: .22em;
  border: 0;
  border-radius: 50%;
  background: #3b86ee;
  box-shadow: 0 0 0 .045em #fff;
  opacity: 0;
  transform: none;
}
.animated-heading .collection-confirmation::after {
  content: "";
  position: absolute;
  top: 23%;
  left: 24%;
  width: 50%;
  height: 30%;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.section.is-in-view .animated-heading .collection-item { animation: collection-organize 3.8s cubic-bezier(.22,.7,.2,1) var(--item-delay) infinite both; }
.section.is-in-view .animated-heading .collection-tray i { animation: collection-folder-settle 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .collection-tray i:nth-child(2) { animation-delay: .12s; }
.section.is-in-view .animated-heading .collection-tray i:nth-child(3) { animation-delay: .24s; }
.section.is-in-view .animated-heading .collection-scan { animation: collection-classify 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .collection-confirmation { animation: collection-organized 3.8s ease-in-out .36s infinite both; }
@keyframes collection-organize {
  0%, 100% { opacity: 0; transform: translateX(calc(-50% + var(--from-x))) translateY(-.025em) rotate(var(--from-angle)) scale(.88); }
  12%, 23% { opacity: 1; transform: translateX(calc(-50% + var(--from-x))) translateY(0) rotate(var(--from-angle)) scale(1); }
  48% { opacity: 1; transform: translateX(calc(-50% + var(--to-x))) translateY(.025em) rotate(var(--to-angle)) scale(.94); }
  58%, 82% { opacity: 1; transform: translateX(calc(-50% + var(--to-x))) translateY(.09em) rotate(var(--to-angle)) scale(.9); }
  94% { opacity: 0; transform: translateX(calc(-50% + var(--to-x))) translateY(.13em) rotate(var(--to-angle)) scale(.88); }
}
@keyframes collection-folder-settle {
  0%, 100% { opacity: .3; transform: translateY(.045em) scale(.94); }
  28% { opacity: .6; transform: translateY(0) scale(1); }
  58% { opacity: 1; transform: translateY(.02em) scale(1.035); }
  72%, 85% { opacity: .9; transform: translateY(0) scale(1); }
}
@keyframes collection-classify {
  0%, 15%, 52%, 100% { opacity: 0; transform: translateY(0); }
  24% { opacity: .8; transform: translateY(0); }
  44% { opacity: .8; transform: translateY(.58em); }
}
@keyframes collection-organized {
  0%, 48%, 94%, 100% { opacity: 0; transform: scale(.65); }
  62% { opacity: 1; transform: scale(1.12); }
  70%, 82% { opacity: 1; transform: scale(1); }
}
@media (max-width: 640px) {
  .animated-heading .title-glass-collection { margin-bottom: .94em; }
  .animated-heading .collection-confirmation { width: .26em; height: .26em; }
}
@media (prefers-reduced-motion: reduce) {
  .section .animated-heading .collection-item,
  .section .animated-heading .collection-tray i { animation: none; opacity: .9; }
  .section .animated-heading .collection-item { transform: translateX(calc(-50% + var(--to-x))) translateY(.05em) rotate(var(--to-angle)); }
  .section .animated-heading .collection-tray i { transform: none; }
  .section .animated-heading .collection-scan,
  .section .animated-heading .collection-confirmation { display: none; animation: none; }
}

.animated-heading .capture-word {
  --snapshot-scale: .18;
  padding: 0 .08em .035em;
  margin: 0 -.06em;
  border-radius: .16em;
  vertical-align: baseline;
}
:lang(en) .animated-heading .capture-word { --snapshot-scale: .12; }
.section .animated-heading .capture-word::before {
  inset: -.035em -.015em;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,rgba(231,243,255,.8),rgba(209,229,255,.2) 60%,transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: .08;
  transform: none;
  animation: none;
}
.section .animated-heading .capture-word::after { content: none; animation: none; }
.animated-heading .capture-selection {
  inset: -.055em -.03em -.03em;
  border: 0;
  border-radius: .16em;
  box-shadow: none;
  opacity: 0;
  transform: none;
}
.animated-heading .capture-selection::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(57,133,239,.16);
  border-radius: inherit;
  opacity: 0;
}
.animated-heading .capture-corner {
  width: .24em;
  height: .24em;
  color: #3985ef;
  filter: none;
}
.animated-heading .capture-corner-tl { --corner-x: -.075em; --corner-y: -.075em; top: 0; left: 0; border-radius: .09em 0 0; }
.animated-heading .capture-corner-tr { --corner-x: .075em; --corner-y: -.075em; top: 0; right: 0; border-radius: 0 .09em 0 0; }
.animated-heading .capture-corner-br { --corner-x: .075em; --corner-y: .075em; bottom: 0; right: 0; border-radius: 0 0 .09em; }
.animated-heading .capture-corner-bl { --corner-x: -.075em; --corner-y: .075em; bottom: 0; left: 0; border-radius: 0 0 0 .09em; }
.animated-heading .capture-flash {
  inset: -.035em -.015em;
  overflow: hidden;
  border-radius: .16em;
  background: radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.95),rgba(214,235,255,.48) 70%,transparent);
  box-shadow: none;
  mix-blend-mode: normal;
  opacity: 0;
  transform: none;
}
.animated-heading .capture-flash::before,
.animated-heading .capture-flash::after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: linear-gradient(90deg,rgba(173,210,255,.12),rgba(255,255,255,.85));
  transform: translateX(-100%);
}
.animated-heading .capture-flash::after { inset: 0 0 0 50%; transform: translateX(100%); }
.animated-heading .capture-snapshot {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0 .08em .035em;
  border: 1px solid rgba(57,133,239,.35);
  border-radius: .16em;
  background: linear-gradient(145deg,#fff,#e8f2ff);
  box-shadow: 0 5px 16px rgba(45,93,163,.14);
  color: #216ee4;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  opacity: 0;
  pointer-events: none;
  transform-origin: right top;
}
.animated-heading .capture-confirmation {
  inset: -.74em .02em auto auto;
  width: .94em;
  height: .62em;
  border: 1px solid rgba(78,134,215,.25);
  border-radius: .09em;
  background: linear-gradient(145deg,#fff,#e8f2ff);
  box-shadow: 0 4px 10px rgba(45,93,163,.12),inset 0 1px 0 #fff;
  opacity: 0;
  transform: none;
  transform-origin: right bottom;
  z-index: 6;
}
.animated-heading .capture-confirmation::before {
  content: "";
  position: absolute;
  inset: 16% 15% 20%;
  border-radius: .035em;
  background: radial-gradient(circle at 76% 25%,#e8be64 0 9%,transparent 11%),linear-gradient(145deg,transparent 45%,#9ec6f3 46% 70%,#c7ddf7 71%) left top / 44% 100% no-repeat,linear-gradient(#8fb8ee,#8fb8ee) right 15% / 44% 2px no-repeat,linear-gradient(#bfd7f6,#bfd7f6) right 45% / 35% 2px no-repeat,linear-gradient(#bfd7f6,#bfd7f6) right 75% / 44% 2px no-repeat;
}
.animated-heading .capture-confirmation::after {
  content: "";
  position: absolute;
  right: -.06em;
  bottom: -.045em;
  width: .18em;
  height: .18em;
  border-radius: 50%;
  background: linear-gradient(45deg,transparent 42%,#fff 43% 56%,transparent 57%) 28% 56% / 32% 34% no-repeat,linear-gradient(-45deg,transparent 42%,#fff 43% 56%,transparent 57%) 68% 44% / 54% 54% no-repeat,#3985ef;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
}
.section.is-in-view .animated-heading .capture-word::before { animation: screenshot-surface 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .capture-selection { animation: screenshot-focus 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .capture-selection::before { animation: screenshot-outline 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .capture-corner { animation: screenshot-corners 3.8s cubic-bezier(.22,.7,.2,1) infinite both; }
.section.is-in-view .animated-heading .capture-flash { animation: screenshot-shutter 3.8s ease-out infinite both; }
.section.is-in-view .animated-heading .capture-flash::before { animation: screenshot-curtain-left 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .capture-flash::after { animation: screenshot-curtain-right 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .capture-snapshot { animation: screenshot-detach 3.8s cubic-bezier(.22,.7,.2,1) infinite both; }
.section.is-in-view .animated-heading .capture-confirmation { animation: screenshot-saved 3.8s cubic-bezier(.22,.7,.2,1) infinite both; }
.section.is-in-view .animated-heading .capture-confirmation::after { animation: screenshot-check 3.8s ease-in-out infinite both; }
@keyframes screenshot-focus {
  0%, 100% { opacity: 0; transform: scale(1.025); }
  10% { opacity: .65; transform: scale(1.015); }
  23%, 31% { opacity: 1; transform: scale(1); }
  36% { opacity: 1; transform: scale(.992); }
  45% { opacity: .5; transform: scale(1); }
  55%, 90% { opacity: 0; transform: scale(1); }
}
@keyframes screenshot-corners {
  0%, 100% { transform: translate(var(--corner-x),var(--corner-y)); }
  23% { transform: translate(0,0); }
  34% { transform: translate(calc(var(--corner-x) * -.3),calc(var(--corner-y) * -.3)); }
  44%, 85% { transform: translate(0,0); }
}
@keyframes screenshot-outline {
  0%, 19%, 55%, 100% { opacity: 0; }
  27%, 37% { opacity: 1; }
}
@keyframes screenshot-surface {
  0%, 100% { opacity: .06; }
  24%, 32% { opacity: .45; }
  48%, 90% { opacity: .06; }
}
@keyframes screenshot-shutter {
  0%, 29%, 45%, 100% { opacity: 0; }
  33% { opacity: .25; }
  36% { opacity: .75; }
  40% { opacity: .12; }
}
@keyframes screenshot-curtain-left {
  0%, 29%, 45%, 100% { transform: translateX(-100%); }
  35%, 37% { transform: translateX(0); }
}
@keyframes screenshot-curtain-right {
  0%, 29%, 45%, 100% { transform: translateX(100%); }
  35%, 37% { transform: translateX(0); }
}
@keyframes screenshot-detach {
  0%, 35%, 100% { opacity: 0; transform: translateY(0) scale(1); }
  38% { opacity: .85; transform: translateY(0) scale(1); }
  48% { opacity: .85; transform: translateY(-.12em) scale(.78) rotate(-2deg); }
  65% { opacity: .9; transform: translateY(-.74em) scale(var(--snapshot-scale)) rotate(-5deg); }
  73%, 95% { opacity: 0; transform: translateY(-.74em) scale(var(--snapshot-scale)) rotate(0); }
}
@keyframes screenshot-saved {
  0%, 60%, 100% { opacity: 0; transform: translateY(.06em) scale(.82) rotate(-5deg); }
  70% { opacity: 1; transform: translateY(-.015em) scale(1.04) rotate(2deg); }
  77%, 88% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  97% { opacity: 0; transform: translateY(-.03em) scale(.96) rotate(0); }
}
@keyframes screenshot-check {
  0%, 71%, 97%, 100% { opacity: 0; transform: scale(.5); }
  79% { opacity: 1; transform: scale(1.15); }
  84%, 90% { opacity: 1; transform: scale(1); }
}
@media (max-width: 640px) {
  .animated-heading .capture-word { padding: 0 .065em .035em; margin: 0 -.045em; }
  .animated-heading .capture-corner { width: .22em; height: .22em; }
  .animated-heading .capture-confirmation { width: .86em; height: .54em; top: -.66em; }
}
@media (prefers-reduced-motion: reduce) {
  .section .animated-heading .capture-word::before { animation: none; opacity: .12; transform: none; }
  .section .animated-heading .capture-selection,
  .section .animated-heading .capture-flash,
  .section .animated-heading .capture-snapshot,
  .section .animated-heading .capture-confirmation { display: none; animation: none; }
  .section .animated-heading .capture-corner { animation: none; transform: none; }
}

.animated-heading .title-glass-search {
  display: inline-block;
  padding: 0 .035em .02em;
  margin: 0 -.02em;
  white-space: nowrap;
}
.section .animated-heading .title-glass-search::before {
  inset: .1em .02em .08em;
  height: auto;
  border: 0;
  border-radius: .12em;
  background: radial-gradient(ellipse at 50% 55%,rgba(146,196,255,.32),transparent 70%);
  box-shadow: none;
  opacity: 0;
  transform: none;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.section .animated-heading .title-glass-search::after {
  inset: auto .04em .04em;
  height: .035em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,#78b0f4,#3985ef 70%,#77bdb8);
  box-shadow: none;
  opacity: .25;
  transform: scaleX(.25);
  transform-origin: left center;
  animation: none;
}
.animated-heading .semantic-label { color: var(--ink); }
.animated-heading .idea-search {
  position: absolute;
  inset: auto .04em .015em;
  height: .27em;
  overflow: hidden;
  border-radius: .06em;
  pointer-events: none;
  z-index: 7;
}
.animated-heading .idea-lens {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0);
}
.animated-heading .idea-lens svg {
  width: .25em;
  height: .25em;
  fill: none;
  stroke: #3985ef;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.animated-heading .idea-clues {
  position: absolute;
  inset: auto 12% .04em;
  display: flex;
  justify-content: space-between;
}
.animated-heading .idea-clues i {
  width: .035em;
  height: .035em;
  min-width: 2px;
  min-height: 2px;
  border-radius: 50%;
  background: #83b4f3;
  opacity: .15;
  --clue-delay: 0s;
}
.animated-heading .idea-clues i:nth-child(2) { --clue-delay: .18s; background: #80bfb9; }
.animated-heading .idea-clues i:nth-child(3) { --clue-delay: .36s; background: #a897d6; }
.animated-heading .idea-clues i:nth-child(4) { --clue-delay: .54s; background: #d4b46e; }
.animated-heading .idea-found {
  position: absolute;
  right: .015em;
  bottom: .045em;
  width: .14em;
  height: .085em;
  border-left: 1.5px solid #3985ef;
  border-bottom: 1.5px solid #3985ef;
  opacity: 0;
  transform: rotate(-45deg) scale(.5);
}
.section.is-in-view .animated-heading .semantic-label { animation: idea-reveal 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .title-glass-search::before { animation: idea-light 3.8s ease-in-out infinite both; }
.section.is-in-view .animated-heading .title-glass-search::after { animation: idea-match 3.8s cubic-bezier(.22,.7,.2,1) infinite both; }
.section.is-in-view .animated-heading .idea-lens { animation: idea-seek 3.8s cubic-bezier(.22,.7,.2,1) infinite both; }
.section.is-in-view .animated-heading .idea-clues i { animation: idea-clue 3.8s ease-in-out var(--clue-delay) infinite both; }
.section.is-in-view .animated-heading .idea-found { animation: idea-found 3.8s ease-in-out infinite both; }
@keyframes idea-seek {
  0%, 6% { opacity: 0; transform: translateX(0); }
  14% { opacity: .9; transform: translateX(0); }
  45% { opacity: .9; transform: translateX(76%); }
  54%, 100% { opacity: 0; transform: translateX(76%); }
}
@keyframes idea-clue {
  0%, 100% { opacity: .15; transform: scale(.8); }
  26% { opacity: 1; transform: scale(1.6); }
  44% { opacity: .5; transform: scale(1); }
  58%, 84% { opacity: 0; transform: scale(.7); }
}
@keyframes idea-light {
  0%, 100% { opacity: 0; transform: translateX(-8%) scaleX(.7); }
  20% { opacity: .5; transform: translateX(-5%) scaleX(.85); }
  46% { opacity: 1; transform: translateX(5%) scaleX(1); }
  62%, 78% { opacity: .45; transform: translateX(0) scaleX(1); }
  92% { opacity: 0; transform: translateX(0) scaleX(1); }
}
@keyframes idea-reveal {
  0%, 15%, 100% { color: var(--ink); }
  50%, 82% { color: #216ee4; }
}
@keyframes idea-match {
  0%, 12%, 100% { opacity: .15; transform: scaleX(.08); }
  46% { opacity: .4; transform: scaleX(.82); }
  60%, 82% { opacity: .85; transform: scaleX(1); }
  94% { opacity: .15; transform: scaleX(1); }
}
@keyframes idea-found {
  0%, 52%, 96%, 100% { opacity: 0; transform: rotate(-45deg) scale(.5); }
  64% { opacity: 1; transform: rotate(-45deg) scale(1.15); }
  72%, 84% { opacity: 1; transform: rotate(-45deg) scale(1); }
}
@media (max-width: 640px) {
  .animated-heading .idea-search { height: .3em; }
  .animated-heading .idea-lens svg { width: .28em; height: .28em; }
}
@media (prefers-reduced-motion: reduce) {
  .section .animated-heading .semantic-label { animation: none; color: #216ee4; }
  .section .animated-heading .title-glass-search::before { animation: none; opacity: .2; transform: none; }
  .section .animated-heading .title-glass-search::after { animation: none; opacity: .5; transform: none; }
  .section .animated-heading .idea-search { display: none; }
  .section .animated-heading .idea-search * { animation: none; }
}

.annotation-demo { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.annotation-demo > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.annotation-demo-ring,
.annotation-demo-arrow,
.annotation-demo-yellow,
.annotation-demo-correction,
.annotation-demo-underline { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.annotation-demo-note,
.annotation-demo-handles,
.annotation-demo-eraser { opacity: 0; }
.annotation-demo-note { transform-box: view-box; transform-origin: 432px 1092px; }
.annotation-demo-eraser { transform-box: view-box; transform-origin: 0 0; }
.annotation-demo-blur {
  position: absolute; z-index: 1; left: 59%; top: 44%; width: 22%; height: 6%;
  border: 1px dashed rgba(255,255,255,.95); border-radius: 3px;
  background: rgba(232,214,237,.18); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0;
}
.annotation-demo-blur i { position: absolute; width: 7px; height: 7px; border: 1px solid #b9c4d4; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); }
.annotation-demo-blur i:nth-child(1) { left: 0; top: 0; }
.annotation-demo-blur i:nth-child(2) { left: 100%; top: 0; }
.annotation-demo-blur i:nth-child(3) { left: 100%; top: 100%; }
.annotation-demo-blur i:nth-child(4) { left: 0; top: 100%; }
.annotation-demo-en .annotation-demo-blur { background: rgba(229,237,247,.15); }
.section.is-in-view .annotation-demo-ring { animation: annotation-ring 12s ease-in-out infinite both; }
.section.is-in-view .annotation-demo-yellow { animation: annotation-yellow 12s ease-in-out infinite both; }
.section.is-in-view .annotation-demo-arrow { animation: annotation-arrow 12s ease-in-out infinite both; }
.section.is-in-view .annotation-demo-blur { animation: annotation-blur 12s ease-in-out infinite both; }
.section.is-in-view .annotation-demo-en .annotation-demo-blur { animation-name: annotation-blur-en; }
.section.is-in-view .annotation-demo-note { animation: annotation-note 12s cubic-bezier(.22,.7,.2,1) infinite both; }
.section.is-in-view .annotation-demo-writing { animation: annotation-writing 12s linear infinite both; }
.section.is-in-view .annotation-demo-handles { animation: annotation-handles 12s ease-in-out infinite both; }
.section.is-in-view .annotation-demo-correction { animation: annotation-correction 12s linear infinite both; }
.section.is-in-view .annotation-demo-eraser { animation: annotation-eraser 12s linear infinite both; }
.section.is-in-view .annotation-demo-underline { animation: annotation-underline 12s ease-in-out infinite both; }
@keyframes annotation-ring {
  0%, 100% { stroke-dashoffset: 1; opacity: 0; }
  1% { stroke-dashoffset: 1; opacity: 1; }
  11%, 97% { stroke-dashoffset: 0; opacity: 1; }
  99% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes annotation-yellow {
  0%, 7%, 100% { stroke-dashoffset: 1; opacity: 0; }
  8% { stroke-dashoffset: 1; opacity: 1; }
  21%, 97% { stroke-dashoffset: 0; opacity: 1; }
  99% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes annotation-arrow {
  0%, 17%, 100% { stroke-dashoffset: 1; opacity: 0; }
  18% { stroke-dashoffset: 1; opacity: 1; }
  26%, 97% { stroke-dashoffset: 0; opacity: 1; }
  99% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes annotation-blur {
  0%, 23%, 100% { opacity: 0; left: 59%; top: 44%; width: 22%; height: 6%; }
  26%, 29% { opacity: 1; left: 59%; top: 44%; width: 22%; height: 6%; }
  39%, 43% { opacity: 1; left: 18%; top: 29%; width: 64%; height: 22%; }
  54%, 97% { opacity: 1; left: 59%; top: 44%; width: 22%; height: 6%; }
  99% { opacity: 0; left: 59%; top: 44%; width: 22%; height: 6%; }
}
@keyframes annotation-blur-en {
  0%, 23%, 100% { opacity: 0; left: 39%; top: 32.1%; width: 26%; height: 2.5%; }
  26%, 29% { opacity: 1; left: 39%; top: 32.1%; width: 26%; height: 2.5%; }
  39%, 43% { opacity: 1; left: 34%; top: 22%; width: 32%; height: 28%; }
  54%, 97% { opacity: 1; left: 39%; top: 32.1%; width: 26%; height: 2.5%; }
  99% { opacity: 0; left: 39%; top: 32.1%; width: 26%; height: 2.5%; }
}
@keyframes annotation-writing {
  0%, 45%, 100% { clip-path: inset(0 100% 0 0); }
  57%, 99% { clip-path: inset(0); }
}
@keyframes annotation-note {
  0%, 44%, 100% { opacity: 0; transform: scale(.68) rotate(0); }
  45%, 57% { opacity: 1; transform: scale(.68) rotate(0); }
  65% { opacity: 1; transform: scale(1.08) rotate(-5deg); }
  73%, 97% { opacity: 1; transform: scale(.98) rotate(3deg); }
  99% { opacity: 0; transform: scale(.98) rotate(3deg); }
}
@keyframes annotation-handles {
  0%, 44%, 100% { opacity: 0; }
  45%, 74% { opacity: 1; }
  80%, 97% { opacity: .45; }
  99% { opacity: 0; }
}
@keyframes annotation-correction {
  0%, 65%, 100% { opacity: 0; stroke-dashoffset: 1; clip-path: inset(0); }
  66% { opacity: 1; stroke-dashoffset: 1; clip-path: inset(0); }
  73%, 76% { opacity: 1; stroke-dashoffset: 0; clip-path: inset(0); }
  84%, 99% { opacity: 1; stroke-dashoffset: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes annotation-eraser {
  0%, 75%, 100% { opacity: 0; transform: translate(310px,570px) rotate(-12deg); }
  76% { opacity: 1; transform: translate(310px,570px) rotate(-12deg); }
  84% { opacity: 1; transform: translate(650px,570px) rotate(10deg); }
  86%, 99% { opacity: 0; transform: translate(665px,553px) rotate(10deg); }
}
@keyframes annotation-underline {
  0%, 85%, 100% { opacity: 0; stroke-dashoffset: 1; }
  86% { opacity: 1; stroke-dashoffset: 1; }
  92%, 97% { opacity: 1; stroke-dashoffset: 0; }
  99% { opacity: 0; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section .annotation-demo * { animation: none !important; }
  .annotation-demo { display: none; }
}

.review-demo { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.review-demo.is-ready { visibility: visible; }
.review-demo > svg { width: 100%; height: 100%; overflow: hidden; }
.review-demo text { font: 500 28px -apple-system,BlinkMacSystemFont,"Inter",sans-serif; }
.review-demo-card { transform-origin: 473px 1007px; }
.review-demo-keep, .review-demo-delete, .review-demo-keep-border, .review-demo-delete-border, .review-demo-targets { opacity: 0; }
.review-demo-favorite { transform-origin: 363px 282px; }
.review-demo-flag { transform-origin: 588px 282px; }
.review-demo-target { transform-origin: 262px 1705px; }
.section.is-in-view .review-demo.is-ready .review-demo-card { animation: review-card-swipe 12s cubic-bezier(.3,.02,.2,1) infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-keep,
.section.is-in-view .review-demo.is-ready .review-demo-keep-border { animation: review-keep-feedback 12s ease-in-out infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-delete,
.section.is-in-view .review-demo.is-ready .review-demo-delete-border { animation: review-delete-feedback 12s ease-in-out infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-favorite { animation: review-status-pulse 12s ease-in-out infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-flag { animation: review-status-pulse 12s ease-in-out .15s infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-targets { animation: review-targets-reveal 12s ease-in-out infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-target { animation: review-target-pulse 12s ease-in-out infinite both; }
.section.is-in-view .review-demo.is-ready .review-demo-collections { animation: review-collections-hide 12s ease-in-out infinite both; }
@keyframes review-card-swipe {
  0%,4%,20%,24%,40%,44%,70%,74%,100% { transform: translate(0,0) rotate(0); opacity: 1; }
  10%,14% { transform: translate(-95px,0) rotate(-5deg); }
  30%,34% { transform: translate(95px,0) rotate(5deg); }
  54%,64% { transform: translate(0,-72px); opacity: .97; }
  84%,94% { transform: translate(0,82px); opacity: .97; }
}
@keyframes review-keep-feedback { 0%,4%,20%,100% { opacity: 0; } 10%,14% { opacity: 1; } }
@keyframes review-delete-feedback { 0%,24%,40%,100% { opacity: 0; } 30%,34% { opacity: 1; } }
@keyframes review-status-pulse {
  0%,48%,69%,100% { transform: scale(1); }
  54%,58%,62%,66% { transform: scale(1.12); }
  56%,60%,64% { transform: scale(1.02); }
}
@keyframes review-targets-reveal { 0%,74%,100% { opacity: 0; transform: translateY(26px); } 81%,94% { opacity: 1; transform: translateY(0); } }
@keyframes review-target-pulse { 0%,81%,97%,100% { transform: scale(1); } 84%,88%,92% { transform: scale(1.06); } 86%,90%,94% { transform: scale(1); } }
@keyframes review-collections-hide { 0%,74%,100% { opacity: 1; } 80%,95% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .section .review-demo * { animation: none !important; }
}

.sidebar-demo { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; background: #f6fbff; visibility: hidden; }
.sidebar-demo.is-ready { visibility: visible; }
.sidebar-demo-panel { position: absolute; inset: 0; clip-path: inset(0 20% 0 0); transform: translateX(-80%); }
.sidebar-demo-home { position: absolute; inset: 0; overflow: hidden; transform: translateX(0); border-radius: 0; box-shadow: -4px 0 12px rgba(23,44,75,.12); }
.sidebar-demo-panel > img,
.sidebar-demo-home > img,
.sidebar-demo .optimized-image,
.sidebar-demo .optimized-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.sidebar-demo-shade { position: absolute; inset: 0; background: rgba(31,53,77,.12); opacity: 0; }
.section.is-in-view .sidebar-demo.is-ready .sidebar-demo-panel { animation: sidebar-panel-slide 7s cubic-bezier(.32,.04,.2,1) infinite both; }
.section.is-in-view .sidebar-demo.is-ready .sidebar-demo-home { animation: sidebar-home-slide 7s cubic-bezier(.32,.04,.2,1) infinite both; }
.section.is-in-view .sidebar-demo.is-ready .sidebar-demo-shade { animation: sidebar-home-shade 7s ease-in-out infinite both; }
@keyframes sidebar-panel-slide {
  0%, 5%, 97%, 100% { transform: translateX(-80%); }
  16%, 86% { transform: translateX(0); }
}
@keyframes sidebar-home-slide {
  0%, 5%, 97%, 100% { transform: translateX(0); border-radius: 0; }
  16%, 86% { transform: translateX(80%); border-radius: 9% / 4%; }
}
@keyframes sidebar-home-shade {
  0%, 5%, 97%, 100% { opacity: 0; }
  16%, 86% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-demo { display: none; }
  .section .sidebar-demo * { animation: none !important; }
}