@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.72s;perspective:1600px}
::view-transition-old(root){transform-origin:0 55%;animation:paper-leave .72s cubic-bezier(.55,0,.18,1) both;z-index:2;backface-visibility:hidden;box-shadow:30px 0 90px #322c3f26}
::view-transition-new(root){animation:paper-arrive .72s cubic-bezier(.2,.8,.2,1) both;z-index:1}
@keyframes paper-leave{0%{transform:perspective(1600px) rotateY(0);opacity:1}85%{opacity:1}100%{transform:perspective(1600px) rotateY(-97deg) translateX(-7%);opacity:0}}
@keyframes paper-arrive{0%{transform:translateX(5%) scale(.975);filter:brightness(.84)}100%{transform:none;filter:brightness(1)}}
html[data-page-direction="back"]::view-transition-old(root){transform-origin:100% 50%;animation-name:paper-leave-back}
@keyframes paper-leave-back{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:perspective(1600px) rotateY(97deg) translateX(7%);opacity:0}}
.article-page,.draft-page{--paper:#f7f5f1;--ink:#29262e;--muted:#847d87;--orange:#535cc6;background:var(--paper);color:var(--ink)}
.article-page .prose,.draft-page .prose{color:#4b444f}.article-page .article-deck{color:#817586}
.article-page .site-header,.draft-page .site-header{border-color:#29262e20}.article-page .article-hero h1,.draft-page .article-hero h1{text-wrap:balance}
.article-page .sample-note,.draft-page .sample-note{color:#8a7e8f}.article-page .wordmark-dot,.draft-page .wordmark-dot{color:var(--ink)}
.draft-page #draft-content a{color:#535cc6}.draft-page #draft-content a:hover{color:#29262e}
.article-page .site-footer,.draft-page .site-footer{background:var(--paper);border-color:#29262e20}
.article-page .article-cover{background:#ece8e1}.article-page .article-cover g{stroke:#8d8498}.article-page .article-cover circle{fill:#535cc6}.article-page .article-cover circle+circle{fill:#38313f}.article-page .article-cover text{fill:#807385}
.article-page .communication-demo{background:#eeebe6;border-color:#b9afc0}.article-page .demo-tabs,.article-page .demo-bottom,.article-page .communication-demo figcaption{border-color:#cec5d0}
.article-page .communication-demo figcaption{background:#f7f5f1;color:#8b7f90}.article-page .demo-action{border-color:#a69aaf}.article-page .message-side{border-color:#b6a9bd}
.article-page .demo-tabs>button:hover:not([aria-pressed="true"]),.article-page .demo-action:hover:not(:disabled){background:#e3dce8}.article-page .margin-thought{background:#ede7ed}
@media(prefers-reduced-motion:reduce){::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}}