/* Shared interaction styles. Page styles preserve the source design and breakpoints. */
:root { --motiondrops-accent: #edffab; --motiondrops-ink: #222; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #628522; outline-offset: 5px; }
[data-name="HoverOverlay"] { pointer-events: none; transition: opacity .2s ease; }
[data-menu-toggle] { border: 0;background: transparent;cursor: pointer;padding: 8px;min-width: 40px;min-height: 40px;display: grid !important;place-items: center; }
.menu-lines, .menu-lines::before, .menu-lines::after { width: 20px;height: 2px;background: #222;display: block;position: relative;transition: transform .2s; }
.menu-lines::before, .menu-lines::after { content: '';position: absolute;left: 0; }
.menu-lines::before { top: -6px; }.menu-lines::after { top: 6px; }
[aria-expanded="true"] .menu-lines { background: transparent; }
[aria-expanded="true"] .menu-lines::before { top: 0;transform: rotate(45deg); }
[aria-expanded="true"] .menu-lines::after { top: 0;transform: rotate(-45deg); }
nav.menu-open { overflow: visible !important; }
.mobile-menu { position: absolute;top: calc(100% + 8px);left: 0;right: 0;padding: 10px;background: white;border-radius: 12px;box-shadow: 0 8px 24px #0002;display: grid;z-index: 20; }
.mobile-menu[hidden] { display: none !important; }
.mobile-menu a { padding: 14px 16px;color: #222;text-decoration: none;font: 500 15px/1.4 Inter, sans-serif;border-radius: 8px; }
.mobile-menu a:hover { background: #f3f2f1; }
.motion-ticker { will-change: transform; }
.doodle-card [style*="mask-image"] { transition: scale .3s; }
.doodle-card:hover [style*="mask-image"], .doodle-card:focus-visible [style*="mask-image"] { scale: 1.07; }
.trail-image { position: absolute;width: 200px;height: 200px;object-fit: contain;pointer-events: none; }
[data-demo="dynamic-typing-words"] .md-m8soem-container > div > span { font-size: clamp(30px, 8vw, 64px) !important;line-height: 1.15 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;animation-iteration-count: 1 !important;transition-duration: .01ms !important; }
}
.category-tab { background: transparent !important; }
.category-tab p { --md-text-color: #222 !important; }
.category-tab.is-active { background: #222425 !important; }
.category-tab.is-active p { --md-text-color: white !important; }
/* Let the complete component list wrap naturally in narrow footer columns. */
footer .footer-components > div { height: auto !important; min-height: 22px; }
footer .footer-components a { height: auto !important; }
footer .footer-components .md-7kbjmp { flex: 0 1 auto !important; min-width: 0; white-space: normal !important; }
footer .footer-components .md-7kbjmp p { white-space: normal !important; }

/* Icons recovered from the original Phosphor and Material components. */
.site-icon { display: block; flex-shrink: 0; user-select: none; }

/* Framer component hover variants, expressed without the Framer runtime.
   Focus-visible mirrors hover; .is-hovered is only set for mouse/pen pointers. */
:is(.md-4TyPY, .md-5uQ7C, .md-qkZjv, .md-G2RYa, .md-CcjLY, .md-7Uxxb) {
  transition: background-color .2s ease, box-shadow .2s ease;
}
.md-4TyPY.md-v-1uekxhs:is(.is-hovered, :focus-visible) {
  background-color: var(--token-82b5832e-a0cf-4abf-84b4-daf77b132a71, #51565a) !important;
}
.md-4TyPY.md-v-1jx3spo:is(.is-hovered, :focus-visible) { --border-color: rgba(0, 0, 0, .32) !important; }
.md-5uQ7C.md-v-nl58kn:is(.is-hovered, :focus-visible) { background-color: #f7f7f7 !important; }
.md-G2RYa:is(.is-hovered, :focus-visible) { background-color: rgba(0, 0, 0, .03) !important; }

/* Roll the two existing label copies through their clipped viewport. */
.md-qkZjv .md-1ux8c8j > div { transition: translate .4s cubic-bezier(.22, 1, .36, 1); }
.md-qkZjv:is(.is-hovered, :focus-visible) .md-1ux8c8j > div { translate: 0 -100%; }
.md-qkZjv.md-v-rzdoso:is(.is-hovered, :focus-visible) > [data-name="HoverOverlay"] { opacity: .1 !important; }
.md-qkZjv.md-v-6bikt:is(.is-hovered, :focus-visible) { background-color: #f2f2f2 !important; }
.md-qkZjv.md-v-6bikt:is(.is-hovered, :focus-visible) p { --md-text-color: #1f2223 !important; }

/* Footer links and their original dark-background, white-icon social state. */
.md-ADwnL .md-7kbjmp { transition: color .2s ease; }
.md-ADwnL:is(.is-hovered, :focus-visible) .md-7kbjmp {
  --extracted-r6o4lv: var(--token-54fbe6ca-60b1-4431-a556-3bdeb985788c, #1f2223) !important;
}
:is(.md-CcjLY, .md-7Uxxb):is(.is-hovered, :focus-visible) { background-color: #2c2d2e !important; }
:is(.md-CcjLY, .md-7Uxxb) .site-icon { transition: color .2s ease; }
:is(.md-CcjLY, .md-7Uxxb):is(.is-hovered, :focus-visible) .site-icon { color: #fff !important; }

/* Component thumbnails and doodle tiles. */
.md-9bqfz.md-v-34j5qn .md-xszqhs { transition: scale .4s cubic-bezier(.22, 1, .36, 1); }
.md-9bqfz.md-v-34j5qn:is(.is-hovered, :focus-visible) .md-xszqhs { scale: 1.05; }
.md-4wgils { transition: box-shadow .2s ease; }
.md-4wgils:is(.is-hovered, :focus-visible) {
  box-shadow: 0 .6px .6px -1.25px #00000024, 0 2.29px 2.29px -2.5px #00000021, 0 10px 10px -3.75px #0000000d !important;
}
.md-63LCp .md-1qfhn6w { overflow: hidden; }
.md-63LCp .md-1qfhn6w > svg { transition: translate .3s ease; }
.md-63LCp:is(.is-hovered, :focus-visible) .md-1qfhn6w > svg { translate: 0 100%; --4rxgx6: #222425 !important; }
.category-tab:not(.is-active):is(.is-hovered, :focus-visible) p { --md-text-color: #222425 !important; }
.hover-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.md-9bqfz:is(.is-hovered, :focus-visible) .hover-preview { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .md-qkZjv .md-1ux8c8j > div, .md-63LCp .md-1qfhn6w > svg { translate: none !important; }
  .md-9bqfz .md-xszqhs, .doodle-card [style*="mask-image"] { scale: 1 !important; }
}