*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f0f;--surface: #1a1a1a;--border: #2a2a2a;--text: #e8e8e8;--muted: #888;--accent: #f97316;--radius: 12px}body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem}.page{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1.5rem}header{text-align:center}h1{font-size:2rem;font-weight:700;letter-spacing:-.03em}.subtitle{color:var(--muted);margin-top:.25rem;font-size:.9rem}.filters{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.filter-btn{background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:.4rem 1rem;font-size:.85rem;cursor:pointer;text-transform:capitalize;transition:all .15s}.filter-btn:hover{color:var(--text);border-color:#444}.filter-btn.active{background:var(--accent);color:#fff;border-color:transparent}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.skeleton{width:100%;aspect-ratio:4/3;background:linear-gradient(90deg,#1f1f1f 25%,#2a2a2a,#1f1f1f 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{to{background-position:-200% 0}}.img-wrapper{position:relative}.img-wrapper:hover .fullscreen-btn{opacity:1}.animal-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.fullscreen-btn{position:absolute;top:.6rem;right:.6rem;background:#0000008c;color:#fff;border:none;border-radius:6px;width:2rem;height:2rem;font-size:1.1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;display:flex;align-items:center;justify-content:center}.fullscreen-btn:hover{background:#000c}.animal-img:-webkit-full-screen{object-fit:contain;width:100vw;height:100vh}.animal-img:fullscreen{object-fit:contain;width:100vw;height:100vh}.meta{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem 0}.badge{background:var(--accent);color:#fff;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:600;text-transform:capitalize}.source{color:var(--muted);font-size:.75rem}.attribution{padding:.25rem 1rem 0;font-size:.75rem;color:var(--muted)}.attribution a{color:var(--muted);text-decoration:underline}.progress-bar{height:3px;background:var(--border);margin-top:1rem}.progress-fill{height:100%;background:var(--accent);transition:width 1s linear}.countdown{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem;font-size:.8rem;color:var(--muted)}.refresh-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:.1rem .3rem;border-radius:4px;transition:color .15s}.refresh-btn:hover:not(:disabled){color:var(--text)}.refresh-btn:disabled{opacity:.4;cursor:default}.error{padding:1rem;color:#f87171;font-size:.85rem;text-align:center}