@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap');

/* --- Base (ported from anlife app/globals.css) --- */
:root {
  color: #1f2933;
  background: radial-gradient(circle at 90% 5%, rgba(244, 162, 97, 0.15), transparent 35%), radial-gradient(circle at 10% 95%, rgba(79, 124, 138, 0.12), transparent 35%), linear-gradient(180deg, #ffffff 0%, #f8f5ef 100%);
}

html, body { min-height: 100%; }
body { margin: 0; font-family: 'Source Sans 3', sans-serif; color: #1f2933; line-height: 1.6; }
.readable-content { width: 100%; max-width: none; color: #1f2933; }
.readable-content h1, .readable-content h2, .readable-content h3 { margin: 1.25rem 0 0.6rem; font-family: 'Merriweather', serif; line-height: 1.3; color: #143642; }
.readable-content h3 { margin: 2rem 0 0.9rem; padding: 0.45rem 0 0.45rem 0.8rem; border-left: 5px solid #2f6fed; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.95rem); font-weight: 700; letter-spacing: 0.01em; color: #183a8a; background: linear-gradient(90deg, rgba(47, 111, 237, 0.16), rgba(47, 111, 237, 0)); }
.readable-content p, .readable-content li, .readable-content blockquote { font-size: 1.08rem; line-height: 1.9; }
.readable-content p { margin: 0.95rem 0; }
.readable-content .center-callout { margin: 2rem 0 1.1rem; text-align: center; font-family: 'Merriweather', serif; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.95rem); font-weight: 700; line-height: 1.35; color: #183a8a; }
.readable-content .center-callout-ref { text-align: center; font-size: 1rem; line-height: 1.5; color: #143642; }
.readable-content ul, .readable-content ol { margin: 0.85rem 0 1.1rem 1.3rem; }
.readable-content a { color: #1d5a6b; text-decoration: underline; text-underline-offset: 2px; }
.readable-content strong { color: #102a34; }
.readable-content .ver { position: relative; margin: 1.15rem 0 0.35rem; padding: 1rem 1.1rem 2.35rem; border-left: 6px solid #f4a261; border-radius: 0.65rem; background: linear-gradient(90deg, rgba(244, 162, 97, 0.32), rgba(244, 162, 97, 0.08)); box-shadow: 0 10px 24px -18px rgba(20, 54, 66, 0.55); font-family: 'Merriweather', serif; font-size: 1.2rem; line-height: 1.85; letter-spacing: 0.01em; color: #143642; }
.readable-content .ver .ver-ref { display: inline-block; width: fit-content; margin: 0; padding: 0.2rem 0.6rem; background: transparent; color: #143642; font-size: 0.84rem; line-height: 1.2; position: absolute; right: 0.7rem; bottom: 0.55rem; }
@media (min-width: 1280px) { .readable-content p, .readable-content li, .readable-content blockquote { font-size: 1.12rem; line-height: 1.95; } }

.intro-splash { position: fixed; inset: 0; z-index: 50; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 3rem; background: radial-gradient(circle at 50% 26%, rgba(173, 216, 255, 0.32), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.intro-light { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(116, 190, 255, 0.26), transparent 40%), radial-gradient(circle at 50% 86%, rgba(17, 64, 112, 0.1), transparent 38%); animation: intro-light-shift 5s ease-in-out both; pointer-events: none; }
.intro-butterfly-wrap { position: relative; z-index: 1; width: clamp(10rem, 28vw, 16rem); aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; margin: 0; filter: drop-shadow(0 18px 20px rgba(13, 45, 75, 0.2)); animation: intro-butterfly-settle 5s cubic-bezier(0.2, 0.62, 0.2, 1) both; }
.intro-butterfly-image { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; animation: intro-butterfly-breathe 1800ms ease-in-out infinite; }
.intro-welcome { z-index: 1; margin: 0; text-align: center; font-family: 'Merriweather', serif; font-size: clamp(1.15rem, 1.4vw + 0.9rem, 1.95rem); font-weight: 700; letter-spacing: 0.08em; color: #143c68; text-transform: uppercase; animation: intro-welcome-fade 5s ease both; }
.intro-progress { z-index: 1; width: min(20rem, 72vw); height: 0.24rem; border-radius: 999px; background: rgba(20, 60, 104, 0.16); overflow: hidden; }
.intro-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5aaee8 0%, #1d5b92 100%); animation: intro-progress-fill 3s linear forwards; }
@keyframes intro-light-shift { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-butterfly-settle { 0% { opacity: 0; transform: translateY(-46px) scale(0.86); } 18% { opacity: 1; } 58% { transform: translateY(8px) scale(1); } 74% { transform: translateY(-2px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-butterfly-breathe { 0%, 100% { transform: scale(0.99); } 50% { transform: scale(1.01); } }
@keyframes intro-welcome-fade { 0% { opacity: 0; transform: translateY(14px); } 28%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes intro-progress-fill { from { width: 0; } to { width: 100%; } }

/* --- Minimal preflight + hand-ported Tailwind utilities actually used by the
   Go templates and home content (same visual output as anlife's Tailwind
   build, without requiring a Node/Tailwind toolchain at build time). --- */
*, *::before, *::after { box-sizing: border-box; }
h1, h3 { font-size: inherit; font-weight: inherit; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }

.grid { display: grid; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.gap-8 { gap: 2rem; }
.w-full { width: 100%; }
.text-justify { text-align: justify; }
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.uppercase { text-transform: uppercase; }
.font-semibold { font-weight: 600; }
.font-display { font-family: 'Merriweather', serif; }
.leading-tight { line-height: 1.25; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-screen-2xl { max-width: 1536px; }
.rounded-none { border-radius: 0; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.border { border: 1px solid currentColor; }
.border-white { border-color: #fff; }
.border-brand-deep\/10 { border-color: rgba(20, 54, 66, 0.1); }
.border-brand-deep\/20 { border-color: rgba(20, 54, 66, 0.2); }
.border-white\/70 { border-color: rgba(255, 255, 255, 0.7); }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, rgba(20, 54, 66, 0.95), rgba(79, 124, 138, 0.95)); }
.text-brand-accent { color: #f4a261; }
.text-brand-deep { color: #143642; }
.shadow-soft { box-shadow: 0 20px 50px -30px rgba(20, 54, 66, 0.55); }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.space-y-6 > * + * { margin-top: 1.5rem; }
.transition { transition-property: color, background-color, border-color, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }

@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .sm\:rounded-2xl { border-radius: 1rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:mt-6 { margin-top: 1.5rem; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 1024px) {
  .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .lg\:p-8 { padding: 2rem; }
}
@media (min-width: 1280px) {
  .xl\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
  .xl\:p-10 { padding: 2.5rem; }
}