.safari-page{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#f8f9fa,#e9ecef);font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column}.safari-header{position:relative;height:30vh;min-height:240px;max-height:350px;background:linear-gradient(135deg,#2d5016,#5d7c2a,#8fbc8f);display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;flex-shrink:0}.safari-header:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="20" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="70" r="2.5" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;pointer-events:none}.header-content{text-align:center;z-index:2;padding:0 24px;max-width:600px}.safari-header h1{font-size:clamp(2rem,7vw,3rem);font-weight:800;margin:0 0 16px;text-shadow:2px 2px 4px rgba(0,0,0,.3);letter-spacing:-.02em;line-height:1.1}.safari-header p{font-size:clamp(1rem,4vw,1.25rem);margin:0;opacity:.95;line-height:1.4;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.category-nav{background:#fff;padding:16px 0;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10;box-shadow:0 2px 8px #0000001a;flex-shrink:0}.category-scroll{display:flex;gap:12px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.category-scroll::-webkit-scrollbar{display:none}.category-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border:2px solid #e5e7eb;border-radius:24px;background:#fff;color:#374151;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-height:48px;touch-action:manipulation;flex-shrink:0}.category-btn:hover{border-color:#5d7c2a;color:#5d7c2a;transform:translateY(-1px)}.category-btn.active{background:#5d7c2a;border-color:#5d7c2a;color:#fff;box-shadow:0 4px 12px #5d7c2a4d}.category-icon{font-size:18px}.animals-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 0}.animals-grid{display:grid;gap:16px;grid-template-columns:1fr;width:100%;padding:0 12px}.animal-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #00000014;transition:all .3s ease;cursor:pointer;border:1px solid #f3f4f6;width:100%}.animal-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #0000001f}.animal-card:active{transform:translateY(-2px)}.card-image{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.animal-card:hover .card-image img{transform:scale(1.05)}.conservation-badge{position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:20px;color:#fff;font-size:12px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0003}.card-content{padding:20px}.animal-name{font-size:1.5rem;font-weight:700;color:#111827;margin:0 0 8px;line-height:1.2}.scientific-name{font-style:italic;color:#6b7280;font-size:.95rem;margin:0 0 16px}.animal-stats{display:grid;gap:8px;margin-bottom:16px}.stat{font-size:.9rem;color:#374151;display:block}.stat strong{color:#111827}.animal-description{color:#4b5563;line-height:1.6;margin:0 0 16px;font-size:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.locations{color:#374151;font-size:.9rem}.locations strong{display:block;margin-bottom:8px;color:#111827}.location-tags{display:flex;flex-wrap:wrap;gap:6px}.location-tag{background:#f3f4f6;color:#374151;padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:500}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;overflow-y:auto}.animal-modal{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:calc(100vh - 32px);overflow:hidden;position:relative;display:flex;flex-direction:column}.close-btn{position:absolute;top:16px;right:16px;z-index:10;background:#000000b3;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);touch-action:manipulation}.close-btn:hover{background:#000000e6;transform:scale(1.1)}.modal-image{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center;flex-shrink:0}.modal-image img{width:100%;height:100%;object-fit:cover}.modal-content{padding:24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}.modal-content h2{font-size:1.75rem;font-weight:700;color:#111827;margin:0 0 8px;line-height:1.2}.modal-scientific-name{font-style:italic;color:#6b7280;font-size:1rem;margin:0 0 24px}.modal-stats{display:grid;gap:16px;margin-bottom:24px;padding:20px;background:#f9fafb;border-radius:12px}.stat-group{display:flex;justify-content:space-between;align-items:center}.stat-label{font-weight:600;color:#374151}.stat-value{color:#111827;font-weight:500;text-align:right;flex:1;margin-left:16px}.modal-description{color:#4b5563;line-height:1.7;margin:0 0 24px;font-size:1rem}.facts-section,.locations-section{margin-bottom:24px}.facts-section h3,.locations-section h3{font-size:1.25rem;font-weight:600;color:#111827;margin:0 0 16px}.facts-list{list-style:none;padding:0;margin:0}.facts-list li{color:#4b5563;line-height:1.6;margin-bottom:12px;padding-left:24px;position:relative}.facts-list li:before{content:"🔸";position:absolute;left:0;top:0}.modal-locations{display:flex;flex-wrap:wrap;gap:8px}.modal-location-tag{background:#5d7c2a;color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500}@media (min-width: 640px){.animals-grid{grid-template-columns:repeat(2,1fr);gap:20px;padding:0 20px;max-width:1200px;margin:0 auto}.animals-content{padding:24px 0}.animal-stats{grid-template-columns:1fr 1fr}}@media (min-width: 768px){.category-scroll{justify-content:center}.safari-header{height:40vh;max-height:450px}.animals-grid{padding:0 24px}.animals-content{padding:32px 0}}@media (min-width: 1024px){.animals-grid{grid-template-columns:repeat(3,1fr);gap:28px;padding:0 32px}.animals-content{padding:40px 0}.modal-stats{grid-template-columns:1fr 1fr}.modal-overlay{padding:32px}.animal-modal{max-height:calc(100vh - 64px)}}@media (min-width: 1280px){.animals-grid{grid-template-columns:repeat(4,1fr);gap:32px}}.card-image:before{content:"🐘";font-size:48px;opacity:.3;position:absolute;z-index:1}.modal-image:before{content:"🦁";font-size:64px;opacity:.3;position:absolute;z-index:1}@media (prefers-reduced-motion: reduce){.animal-card,.category-btn,.card-image img,.close-btn{transition:none}.animal-card:hover,.animal-card:hover .card-image img{transform:none}}@media (prefers-contrast: high){.animal-card{border:2px solid #000}.category-btn{border-width:3px}.conservation-badge{border:2px solid white}}@media (hover: none) and (pointer: coarse){.animal-card:hover{transform:none;box-shadow:0 4px 20px #00000014}.animal-card:hover .card-image img{transform:none}.category-btn:hover{transform:none;border-color:#e5e7eb;color:#374151}.category-btn.active:hover{border-color:#5d7c2a;color:#fff}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}*{box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;padding:0;min-width:320px;width:100%;overflow-x:hidden;background-color:#fff;color:#213547}#root{width:100%;min-height:100vh;min-height:100dvh}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.2}p{margin:0}button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}ul,ol{margin:0;padding:0}input,textarea,select{font-family:inherit;font-size:16px}*:focus-visible{outline:2px solid #5d7c2a;outline-offset:2px}html{scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme: dark){:root{color-scheme:dark;color:#ffffffde;background-color:#1a1a1a}body{background-color:#1a1a1a;color:#ffffffde}#root{background-color:#1a1a1a}}@media (prefers-contrast: high){:root{color:#000;background-color:#fff}}@media (hover: none) and (pointer: coarse){button{min-height:44px;min-width:44px}*{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}p,span,div,article,section{-webkit-user-select:text;user-select:text}}.safe-area-top{padding-top:env(safe-area-inset-top,0)}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom,0)}.safe-area-left{padding-left:env(safe-area-inset-left,0)}.safe-area-right{padding-right:env(safe-area-inset-right,0)}