.page-transition-demo {
  --pt-blue: #075de8;
  --pt-blue-2: #7bb7ff;
  --pt-ink: #10213f;
  --pt-muted: #64748b;
  --pt-line: #d6e0ef;
  --pt-surface: #fff;
  --pt-soft: #eef5ff;
  --pt-green: #178b65;
  display: grid;
  width: min(100%, 430px);
  gap: 8px;
  color: var(--pt-ink);
  font: 500 11px/1.35 "DM Sans", sans-serif;
}
.pt-toolbar { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 8px; }
.pt-toolbar > span { overflow: hidden; color: var(--pt-muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pt-toolbar button { min-height: 29px; border: 1px solid color-mix(in srgb,var(--pt-blue) 28%,var(--pt-line)); border-radius: 7px; background: var(--pt-surface); color: var(--pt-blue); font: inherit; font-weight: 800; padding: 5px 9px; cursor: pointer; }
.pt-toolbar button:hover { background: var(--pt-soft); }
.pt-toolbar button:focus-visible { outline: 2px solid var(--pt-blue); outline-offset: 2px; }
.pt-stage { display: grid; min-height: 136px; place-items: center; overflow: hidden; border: 1px solid var(--pt-line); border-radius: 9px; background: linear-gradient(145deg,var(--pt-soft),var(--pt-surface)); padding: 12px; }
.page-transition-demo > small { min-height: 15px; color: var(--pt-muted); }

.pt-route-scene { position: relative; width: min(100%, 220px); height: 96px; overflow: hidden; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-surface); box-shadow: 0 10px 24px rgba(29,65,120,.1); perspective: 500px; }
.pt-route-scene article { position: absolute; inset: 0; display: grid; align-content: center; gap: 8px; background: var(--pt-surface); padding: 18px; transition: opacity 440ms ease, transform 440ms cubic-bezier(.2,.8,.2,1), clip-path 440ms ease; }
.pt-route-scene article:first-child { z-index: 1; }
.pt-route-scene article:last-child { background: linear-gradient(135deg,#e9f3ff,var(--pt-surface)); opacity: 0; transform: translateX(24px); }
.pt-route-scene b { font-family: "DM Serif Display",serif; font-size: 17px; }
.pt-route-scene i { display: block; width: 72%; height: 6px; border-radius: 8px; background: var(--pt-line); }
.pt-route-scene i:nth-of-type(2) { width: 48%; }
.pt-route-scene span { position: absolute; right: 12px; bottom: 9px; color: var(--pt-blue); font-weight: 900; }
.page-transition-demo.is-transitioned .pt-route-scene article:first-child { opacity: 0; transform: translateX(-24px); }
.page-transition-demo.is-transitioned .pt-route-scene article:last-child { z-index: 2; opacity: 1; transform: none; }
.page-transition-demo-instant-page-cut .pt-route-scene article { transition: none; }
.page-transition-demo-page-crossfade.is-transitioned .pt-route-scene article { transform: none; }
.page-transition-demo-fade-through .pt-route-scene article { transition-duration: 300ms; }
.page-transition-demo-fade-through.is-transitioned .pt-route-scene article:first-child { transform: scale(.985); }
.page-transition-demo-fade-through.is-transitioned .pt-route-scene article:last-child { transform: scale(1); }
.page-transition-demo-vertical-shared-axis .pt-route-scene article:last-child { transform: translateY(25px); }
.page-transition-demo-vertical-shared-axis.is-transitioned .pt-route-scene article:first-child { transform: translateY(-25px); }
.page-transition-demo-slide-push-page .pt-route-scene article:last-child { transform: translateX(100%); }
.page-transition-demo-slide-push-page.is-transitioned .pt-route-scene article:first-child { transform: translateX(-100%); }
.page-transition-demo-cover-reveal-page .pt-route-scene article:last-child { opacity: 1; transform: translateY(100%); box-shadow: 0 -8px 20px rgba(12,40,80,.18); }
.page-transition-demo-cover-reveal-page.is-transitioned .pt-route-scene article:first-child { opacity: 1; transform: scale(.94); }
.page-transition-demo-scale-through-page .pt-route-scene article:last-child { transform: scale(.88); }
.page-transition-demo-scale-through-page.is-transitioned .pt-route-scene article:first-child { transform: scale(1.08); }
.page-transition-demo-same-document-view-transition .pt-route-scene { outline: 2px dashed color-mix(in srgb,var(--pt-blue) 40%,transparent); outline-offset: -7px; }
.page-transition-demo-cross-document-view-transition .pt-route-scene::before { position: absolute; z-index: 5; top: 6px; left: 8px; content: "https://promptary.dev/"; color: var(--pt-muted); font: 7px "IBM Plex Mono",monospace; }

.pt-shared-scene { position: relative; width: min(100%,220px); height: 100px; }
.pt-shared-scene article,.pt-shared-scene section { position: absolute; inset: 8px 110px 8px 4px; display: grid; align-content: end; gap: 3px; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-surface); padding: 8px; transition: opacity 460ms, transform 520ms cubic-bezier(.2,.8,.2,1); }
.pt-shared-scene article i,.pt-shared-scene section > i { position: absolute; top: 7px; left: 7px; width: 45px; height: 35px; border-radius: 6px; background: linear-gradient(135deg,#78c3ff,var(--pt-blue)); transition: width 520ms, height 520ms, transform 520ms, border-radius 520ms; }
.pt-shared-scene article span,.pt-shared-scene section span { color: var(--pt-muted); font-size: 8px; }
.pt-shared-scene section { inset: 0; grid-template-columns: 70px 1fr; align-content: center; opacity: 0; transform: scale(.94); }
.pt-shared-scene section > i { width: 68px; height: 78px; }
.pt-shared-scene section div { grid-column: 2; display: grid; gap: 5px; }
.page-transition-demo.is-transitioned .pt-shared-scene article { opacity: 0; transform: scale(1.04); }
.page-transition-demo.is-transitioned .pt-shared-scene section { opacity: 1; transform: none; }
.page-transition-demo-persistent-navigation .pt-shared-scene::before { position: absolute; z-index: 4; inset: 0 auto 0 0; width: 28px; border-radius: 7px 0 0 7px; background: var(--pt-blue); content: ""; }
.page-transition-demo-persistent-navigation .pt-shared-scene section { padding-left: 40px; }
.page-transition-demo-morphing-page-header.is-transitioned .pt-shared-scene section b { font: 19px "DM Serif Display",serif; }
.page-transition-demo-thumbnail-to-gallery .pt-shared-scene section > i { width: 108px; }
.page-transition-demo-tab-to-page .pt-shared-scene::after { position: absolute; z-index: 5; right: 12px; bottom: 2px; width: 42px; height: 3px; border-radius: 4px; background: var(--pt-blue); content: ""; transition: transform 420ms; }
.page-transition-demo-tab-to-page.is-transitioned .pt-shared-scene::after { transform: translateX(-62px); }

.pt-scroll-scene { position: relative; width: min(100%,220px); height: 104px; overflow: hidden; border-radius: 8px; background: #dff2ff; }
.pt-sky { position: absolute; inset: 0; background: linear-gradient(#9cddff,#effaff); }
.pt-sky i { position: absolute; left: -10%; right: -10%; bottom: -32px; height: 70px; border-radius: 50%; background: #76c99b; transition: transform 520ms cubic-bezier(.2,.8,.2,1), background 520ms; }
.pt-sky i:nth-child(2) { bottom: -48px; background: #258562; }
.pt-sky b { position: absolute; inset: 0; display: grid; place-items: center; color: #164b63; letter-spacing: .18em; transition: opacity 400ms, transform 520ms; }
.pt-scroll-meter { position: absolute; z-index: 4; inset: 0 0 auto; height: 4px; background: rgba(255,255,255,.65); }
.pt-scroll-meter i { display: block; width: 12%; height: 100%; background: var(--pt-blue); transition: width 520ms; }
.pt-scroll-scene ol { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pt-scroll-scene li { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.8); color: var(--pt-muted); font-size: 8px; }
.pt-scroll-scene[data-pt-step="1"] .pt-sky i:first-child { transform: translateX(14px) translateY(-8px); }
.pt-scroll-scene[data-pt-step="1"] .pt-sky i:nth-child(2) { transform: translateX(-10px) translateY(-3px); }
.pt-scroll-scene[data-pt-step="2"] .pt-sky i:first-child { transform: translateX(25px) translateY(-14px); }
.pt-scroll-scene[data-pt-step="2"] .pt-sky i:nth-child(2) { transform: translateX(-20px) translateY(-7px); }
.pt-scroll-scene[data-pt-step="1"] .pt-scroll-meter i { width: 55%; }
.pt-scroll-scene[data-pt-step="2"] .pt-scroll-meter i { width: 100%; }
.pt-scroll-scene[data-pt-step="1"] li:nth-child(2),.pt-scroll-scene[data-pt-step="2"] li:nth-child(3) { background: var(--pt-blue); color: #fff; }
.page-transition-demo-scroll-reveal-section .pt-sky b { transform: translateY(20px); opacity: .2; }
.page-transition-demo-scroll-reveal-section.is-transitioned .pt-sky b { transform: none; opacity: 1; }
.page-transition-demo-scroll-linked-progress .pt-sky b { letter-spacing: .04em; }
.page-transition-demo-scroll-linked-progress .pt-sky b::after { content: " ARTICLE"; }
.page-transition-demo-sticky-scrollytelling .pt-sky b::after { content: " · CHAPTER"; }
.page-transition-demo-horizontal-scroll-story .pt-sky { width: 200%; background: linear-gradient(90deg,#dff2ff 50%,#fce8d4 50%); transition: transform 520ms; }
.page-transition-demo-horizontal-scroll-story.is-transitioned .pt-sky { transform: translateX(-50%); }
.page-transition-demo-scroll-snap-page .pt-scroll-scene { scroll-snap-type: x mandatory; }
.page-transition-demo-section-color-transition.is-transitioned .pt-sky { background: linear-gradient(#ffd89c,#fff4e6); }
.page-transition-demo-image-sequence-scrubbing .pt-sky b::after { content: " · FRAME"; }
.page-transition-demo-section-crossfade-scroll.is-transitioned .pt-sky b { opacity: .2; }

.pt-surface-scene { position: relative; width: min(100%,220px); height: 104px; overflow: hidden; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-surface); perspective: 480px; }
.pt-surface-scene main { display: grid; gap: 7px; padding: 20px; }
.pt-surface-scene main i { width: 70%; height: 7px; border-radius: 8px; background: var(--pt-line); }
.pt-surface-scene main i:nth-child(2) { width: 48%; }
.pt-surface-scene > div { position: absolute; inset: 22px 22px 0; display: grid; align-content: center; gap: 5px; border-radius: 9px 9px 0 0; background: var(--pt-blue); color: #fff; padding: 14px; transform: translateY(88%); transition: clip-path 520ms, transform 520ms cubic-bezier(.2,.8,.2,1), border-radius 520ms, opacity 400ms; }
.pt-surface-scene > div span { opacity: .78; }
.page-transition-demo.is-transitioned .pt-surface-scene > div { inset: 0; border-radius: 0; transform: none; }
.page-transition-demo-drawer-to-page .pt-surface-scene > div { inset: 0 45% 0 0; transform: translateX(-105%); }
.page-transition-demo-drawer-to-page.is-transitioned .pt-surface-scene > div { inset: 0; transform: none; }
.page-transition-demo-circular-reveal-page .pt-surface-scene > div { inset: 0; clip-path: circle(0 at 78% 72%); transform: none; }
.page-transition-demo-circular-reveal-page.is-transitioned .pt-surface-scene > div { clip-path: circle(145% at 78% 72%); }
.page-transition-demo-curtain-wipe-page .pt-surface-scene > div { inset: 0; transform: translateX(-102%); }
.page-transition-demo-curtain-wipe-page.is-transitioned .pt-surface-scene > div { transform: none; }
.page-transition-demo-split-panel-page .pt-surface-scene > div { inset: 0; clip-path: inset(0 50%); transform: none; }
.page-transition-demo-split-panel-page.is-transitioned .pt-surface-scene > div { clip-path: inset(0); }
.page-transition-demo-page-flip-3d .pt-surface-scene > div { inset: 0; transform: rotateY(-92deg); transform-origin: left; backface-visibility: hidden; }
.page-transition-demo-page-flip-3d.is-transitioned .pt-surface-scene > div { transform: rotateY(0); }
.page-transition-demo-zoom-to-page .pt-surface-scene > div { inset: 25px 70px; opacity: .4; transform: scale(.45); }
.page-transition-demo-zoom-to-page.is-transitioned .pt-surface-scene > div { inset: 0; opacity: 1; transform: none; }

.pt-loading-scene { width: min(100%,220px); min-height: 100px; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-surface); padding: 10px; }
.pt-loadbar { height: 4px; border-radius: 5px; background: var(--pt-line); }
.pt-loadbar i { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--pt-blue); transition: width 520ms; }
.pt-loading-scene article { display: grid; grid-template-columns: 42px 1fr; gap: 9px; padding: 13px 3px 7px; }
.pt-loading-scene article > i { height: 48px; border-radius: 7px; background: var(--pt-line); transition: background 420ms; }
.pt-loading-scene section { display: grid; align-content: center; gap: 6px; }
.pt-loading-scene section b { opacity: .32; transition: opacity 420ms; }
.pt-loading-scene section span { width: 88%; height: 6px; border-radius: 5px; background: var(--pt-line); }
.pt-loading-scene section span:last-child { width: 58%; }
.pt-loading-scene em { color: var(--pt-muted); font-size: 8px; font-style: normal; }
.pt-loading-scene[data-pt-step="1"] .pt-loadbar i { width: 56%; }
.pt-loading-scene[data-pt-step="2"] .pt-loadbar i { width: 100%; background: var(--pt-green); }
.pt-loading-scene[data-pt-step="2"] article > i { background: linear-gradient(135deg,#77c2ff,var(--pt-blue)); }
.pt-loading-scene[data-pt-step="2"] section b { opacity: 1; }
.pt-loading-scene[data-pt-step="2"] em { color: var(--pt-green); }
.pt-loading-scene[data-pt-step="2"] em::after { content: " · complete"; }
.page-transition-demo-error-to-retry-page .pt-loading-scene article > i { background: #ffe2e4; }
.page-transition-demo-error-to-retry-page .pt-loading-scene[data-pt-step="2"] article > i { background: #ccefe2; }
.page-transition-demo-placeholder-crossfade .pt-loading-scene[data-pt-step="2"] article > i { transition: background 520ms, opacity 520ms; }
.page-transition-demo-streaming-content-reveal .pt-loading-scene section span { transition: width 520ms, background 520ms; }

.pt-safety-scene { display: grid; width: min(100%,220px); gap: 8px; }
.pt-history { display: grid; grid-template-columns: 20px 1fr auto 20px; align-items: center; gap: 5px; color: var(--pt-muted); }
.pt-history i { height: 3px; border-radius: 3px; background: var(--pt-line); }
.pt-safety-scene main { display: grid; gap: 5px; border: 1px solid var(--pt-line); border-radius: 8px; background: var(--pt-surface); padding: 15px; transition: transform 480ms, opacity 360ms; }
.pt-safety-scene main small { color: var(--pt-muted); }
.pt-safety-scene main strong { font: 18px "DM Serif Display",serif; }
.pt-safety-scene main i { width: 52%; height: 6px; border-radius: 6px; background: var(--pt-line); }
.page-transition-demo.is-transitioned .pt-safety-scene main { outline: 2px solid var(--pt-blue); outline-offset: -5px; transform: translateY(-3px); }
.page-transition-demo-reduced-motion-page.is-transitioned .pt-safety-scene main,.page-transition-demo-progressive-enhancement-fallback.is-transitioned .pt-safety-scene main { transform: none; transition: none; }
.page-transition-demo-scroll-restoration .pt-safety-scene main::after { content: "Scroll Y: 640px"; color: var(--pt-blue); font: 8px "IBM Plex Mono",monospace; }
.page-transition-demo-history-aware-direction.is-transitioned .pt-history b { color: var(--pt-blue); }
.page-transition-demo-interruptible-navigation.is-transitioned .pt-safety-scene main { opacity: .62; transform: translateX(8px); }
.page-transition-demo-bfcache-safe-transition .pt-safety-scene main::after { content: "pageshow · persisted"; color: var(--pt-green); font-size: 8px; }

.concept-card[data-card-id^="page-transition-"] .concept-card-header h4 { overflow-wrap: anywhere; }
.concept-card-preview .page-transition-demo { font-size: 7px; }
.concept-card-preview .pt-stage { min-height: 104px; padding: 8px; }
.concept-card-preview .pt-toolbar > span { min-width: 0; max-width: 54px; font-size: 6.5px; }
.concept-card-preview .pt-toolbar button { max-width: 66px; min-height: 24px; font-size: 7px; line-height: 1.15; overflow-wrap: anywhere; padding: 3px 5px; }
.concept-card-preview .pt-route-scene,.concept-card-preview .pt-shared-scene,.concept-card-preview .pt-scroll-scene,.concept-card-preview .pt-surface-scene,.concept-card-preview .pt-loading-scene,.concept-card-preview .pt-safety-scene { transform: scale(.78); transform-origin: center; }

[data-theme="dark"] .page-transition-demo { --pt-blue-2:#64a8ff; --pt-ink:#e6eefc; --pt-muted:#9eb0c9; --pt-line:#34455e; --pt-surface:#142238; --pt-soft:#172c49; --pt-green:#54d4aa; }

@media (max-width:480px) {
  .page-transition-demo { font-size: 10px; }
  .pt-toolbar > span { font-size: 8px; }
  .pt-stage { min-height: 126px; }
}

@media (prefers-reduced-motion:reduce) {
  .page-transition-demo *,.page-transition-demo *::before,.page-transition-demo *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .pt-sky i,.pt-route-scene article,.pt-shared-scene article,.pt-shared-scene section,.pt-surface-scene > div,.pt-safety-scene main { transform:none!important; }
}

@media (forced-colors:active) {
  .pt-stage,.pt-route-scene,.pt-shared-scene article,.pt-shared-scene section,.pt-scroll-scene,.pt-surface-scene,.pt-loading-scene,.pt-safety-scene main,.pt-toolbar button { border:1px solid CanvasText; }
  .pt-loadbar i,.pt-scroll-meter i,.pt-history i { forced-color-adjust:none; background:Highlight; }
}