/* Brclio navigation transitions · © 2026 Brclio · CC BY-NC-SA 4.0. */
html { background: #fefcf6; scrollbar-gutter: stable; }
.app-header { view-transition-name: site-header; }
::view-transition-group(root), ::view-transition-group(site-header) { animation-duration: 180ms; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
::view-transition-old(root) { animation: site-page-out 120ms ease-out both; }
::view-transition-new(root) { animation: site-page-in 180ms cubic-bezier(.2, .7, .3, 1) both; }
::view-transition-old(site-header) { animation: none; }
::view-transition-new(site-header) { animation: none; }
@keyframes site-page-out { to { opacity: 0; } }
@keyframes site-page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
html[data-site-navigating] .app-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #2b7fd8; transform: scaleX(.75); transform-origin: left; pointer-events: none; }
.site-navigation-error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 12px 20px; color: #1a1a2e; background: #faf6eb; font: 14px/1.6 "Noto Sans SC", "PingFang SC", sans-serif; }
.site-navigation-error button { border: 1px solid #2b7fd8; border-radius: 6px; padding: 5px 12px; color: #1e5ba8; background: #fefcf6; font: inherit; cursor: pointer; }
.site-navigation-error button:hover { background: #f4d758; }
.site-navigation-error button:focus-visible { outline: 3px solid #2b7fd8; outline-offset: 3px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}