:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { background: #f1f4ff; color: #13152b; }
.hero-title { overflow-wrap: anywhere; }
.paper-grid { background-image: linear-gradient(rgba(33,85,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(33,85,255,.1) 1px, transparent 1px); background-size: 32px 32px; }
.window-shadow { box-shadow: 12px 12px 0 #d9ff43; }
.reveal { opacity: 0; transform: translateY(16px); animation: rise .7s ease forwards; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.product-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: 8px 8px 0 #d9ff43; border-color: #13152b; }
.filter-active { background: #2155ff !important; color: white !important; border-color: #2155ff !important; }
[data-filter] { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
[data-filter]:hover, [data-filter]:focus-visible { background: #e8edff !important; color: #13152b !important; border-color: #2155ff !important; outline: none; }
[data-filter].filter-active:hover, [data-filter].filter-active:focus-visible { background: #1744d6 !important; color: white !important; border-color: #1744d6 !important; }
[data-filter]:not(.filter-active) { border-color: rgba(19,21,43,.2) !important; }
[class~="bg-[#fff1ed]"] { background-color: #e8edff !important; }
[class~="bg-[#f4c64e]"] { background-color: #d9ff43 !important; }
#studio { background-color: #202b52; }
#contact > div { background-color: #dce4ff; color: #13152b !important; }
#contact > div .text-white\/70 { color: rgba(19,21,43,.58) !important; }
#contact > div .border-white { border-color: #2155ff; }
.nav-active { color: white !important; background: #2155ff !important; border-color: #2155ff !important; box-shadow: none; padding: .5rem .75rem; }
.nav-link:hover { color: #13152b !important; background: #dce4ff !important; }
.nav-active:hover { color: white !important; background: #1744d6 !important; }
.header-cta:hover { color: white !important; background: #13152b !important; }
.page-products main > section:first-child > div > p::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .75rem; border-radius: 9999px; background: #d9ff43; vertical-align: .05em; }
.page-products main > section:last-child { border-top: 2px solid #d9ff43; }
@media (min-width: 768px) { .nav-active { padding: .5rem .75rem !important; } }