@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --cream:#f7f3ea; --paper:#fffdf8; --ink:#133e42; --muted:#6d7e79; --coral:#f16d52; --coral-dark:#d9573d; --honey:#f2c76f; --sage:#dbe7d7; --mint:#cfe4d5; --lav:#dedbef; --line:rgba(19,62,66,.14); --shadow:0 20px 60px rgba(42,63,55,.12); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'Manrope','PingFang SC','Microsoft YaHei',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; border:0; cursor:pointer; }
.page-shell { overflow:hidden; }
.section-wrap { width:min(1200px, calc(100% - 80px)); margin:0 auto; }
.site-header { height:82px; width:min(1200px, calc(100% - 80px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; min-width:210px; }
.brand-mark { width:42px; height:42px; border-radius:50% 46% 50% 44%; background:var(--coral); color:var(--paper); display:grid; place-items:center; transform:rotate(-8deg); box-shadow:0 8px 18px rgba(241,109,82,.24); }
.brand-mark svg { width:25px; height:25px; fill:currentColor; }
.brand strong { display:block; font-size:17px; letter-spacing:.04em; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.1em; }
.top-nav { display:flex; gap:30px; font-size:13px; color:#5f726d; }
.top-nav a { position:relative; padding:8px 0; }
.top-nav a.active,.top-nav a:hover { color:var(--ink); }
.top-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral); border-radius:4px; }
.header-actions { display:flex; align-items:center; gap:12px; min-width:260px; justify-content:flex-end; }
.device-note { font-family:'DM Mono',monospace; text-transform:uppercase; color:#91a09a; font-size:10px; letter-spacing:.08em; }
.icon-button { width:32px; height:32px; border-radius:50%; background:transparent; color:var(--ink); border:1px solid var(--line); font-size:17px; line-height:1; }
.header-cta { display:flex; gap:10px; align-items:center; background:var(--ink); color:#fff; padding:12px 16px; border-radius:999px; font-size:12px; font-weight:700; transition:transform .2s, background .2s; }
.header-cta:hover { background:var(--coral); transform:translateY(-2px); }
.header-cta span,.button span { font-size:16px; line-height:10px; }
.hero { min-height:590px; display:grid; grid-template-columns: .96fr 1.04fr; align-items:center; gap:40px; padding:58px 0 70px; }
.eyebrow,.section-kicker { color:var(--coral-dark); font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.09em; font-size:11px; }
.eyebrow { display:flex; align-items:center; gap:8px; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--coral); display:inline-block; box-shadow:0 0 0 5px rgba(241,109,82,.13); }
h1,h2,h3,p { margin:0; }
h1 { margin-top:18px; font-size:clamp(48px,6vw,82px); letter-spacing:-.075em; line-height:.98; font-weight:800; }
h1 em,h2 em { color:var(--coral); font-style:normal; }
.hero-lede { max-width:470px; margin-top:24px; color:#5d726e; font-size:15px; line-height:1.85; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:45px; padding:0 20px; border-radius:999px; font-size:13px; font-weight:800; transition:transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--coral); color:#fff; box-shadow:0 12px 22px rgba(241,109,82,.22); }
.button-primary:hover { background:var(--coral-dark); box-shadow:0 15px 28px rgba(241,109,82,.28); }
.button-outline { background:transparent; border:1px solid var(--line); color:var(--ink); }
.button-outline:hover { border-color:var(--coral); color:var(--coral-dark); }
.button-ghost { background:var(--sage); color:var(--ink); }
.button-dark { background:var(--ink); color:#fff; }
.text-link { display:inline-flex; gap:9px; align-items:center; color:var(--ink); font-size:12px; font-weight:800; border-bottom:1px solid rgba(19,62,66,.32); padding-bottom:4px; }
.text-link span { color:var(--coral); font-size:18px; line-height:10px; transition:transform .2s; }
.text-link:hover span { transform:translateX(3px); }
.hero-trust { display:flex; align-items:center; gap:13px; margin-top:54px; color:#71827d; font-size:10px; }
.hero-trust strong { color:var(--ink); font-size:13px; margin-right:6px; }
.hero-trust span { display:block; }
.avatar-stack { display:flex; }
.avatar-stack span { display:grid; place-items:center; width:27px; height:27px; margin-left:-5px; border:2px solid var(--cream); border-radius:50%; background:var(--paper); font-size:14px; }
.avatar-stack span:first-child { margin-left:0; }
.hero-art { min-height:475px; border-radius:42% 49% 37% 45% / 37% 41% 45% 49%; position:relative; background:#e8eddf; overflow:hidden; transform:rotate(2deg); box-shadow:var(--shadow); }
.art-sun { width:250px; height:250px; border-radius:50%; background:var(--honey); position:absolute; top:-75px; right:-40px; opacity:.82; }
.art-blob { position:absolute; border-radius:50%; filter:blur(.2px); }
.blob-one { width:280px; height:190px; background:#f7b19a; left:-85px; bottom:-50px; transform:rotate(-17deg); }
.blob-two { width:260px; height:150px; background:#b6d4bb; right:-60px; bottom:25px; transform:rotate(18deg); }
.spark { position:absolute; color:#fff; font-size:22px; z-index:1; }
.spark-a { top:72px; left:22%; }.spark-b { top:138px; right:16%; font-size:15px; }.spark-c { bottom:105px; right:36%; font-size:40px; }
.trail { width:41px; height:41px; position:absolute; color:#658975; opacity:.6; z-index:2; }
.trail svg { width:100%; height:100%; fill:currentColor; }
.trail-a { left:35%; top:27%; transform:rotate(-21deg); }.trail-b { left:43%; top:43%; transform:rotate(11deg) scale(.86); }.trail-c { left:50%; top:58%; transform:rotate(-8deg) scale(.67); }
.animal { position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; gap:2px; filter:drop-shadow(0 10px 10px rgba(44,65,55,.13)); }
.animal span { font-size:84px; line-height:1; }.animal b { font-size:11px; color:#46635c; background:rgba(255,253,248,.8); padding:4px 8px; border-radius:20px; }
.animal-fox { left:10%; bottom:14%; transform:rotate(-8deg); }.animal-cat { right:13%; top:24%; transform:rotate(8deg); }.animal-raccoon { right:22%; bottom:5%; transform:rotate(-5deg); }
.art-caption { position:absolute; left:34px; bottom:28px; z-index:3; display:flex; align-items:center; gap:9px; color:#fff; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.05em; }.caption-line { width:28px; height:1px; background:#fff; opacity:.8; }
.stats-bar { display:grid; grid-template-columns:repeat(3,1fr) 1.45fr; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
.stats-bar > div { min-height:42px; padding-left:30px; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }.stats-bar > div:first-child { padding-left:0; border-left:0; }.stats-bar strong { font-size:26px; letter-spacing:-.06em; }.stats-bar span { color:#788984; font-size:10px; margin-top:3px; }.stats-note { flex-direction:row !important; align-items:center; gap:8px; justify-content:flex-end; }.live-dot { width:7px; height:7px; border-radius:50%; background:#7abb71; box-shadow:0 0 0 5px rgba(122,187,113,.14); }
.identify { padding:125px 0 125px; }.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:42px; }.section-heading h2 { margin-top:16px; font-size:clamp(31px,4vw,48px); line-height:1.05; letter-spacing:-.065em; }.section-heading p { color:#6b7d77; font-size:13px; line-height:1.85; max-width:400px; padding-bottom:3px; }
.identify-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }.upload-card,.result-card { background:var(--paper); border:1px solid rgba(19,62,66,.1); border-radius:24px; min-height:418px; box-shadow:0 12px 35px rgba(50,69,57,.045); }.upload-card { padding:25px; display:flex; flex-direction:column; }.upload-head,.result-top { display:flex; align-items:center; justify-content:space-between; }.step-pill { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:6px; background:var(--sage); color:#668075; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.05em; }.step-pill.coral { background:#fce3db; color:var(--coral-dark); }.upload-hint,.result-time { color:#9aa7a1; font-family:'DM Mono',monospace; font-size:9px; }
.dropzone { flex:1; margin:20px 0 16px; min-height:290px; border:1.5px dashed #c3d0c6; border-radius:17px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:border-color .2s, background .2s; cursor:pointer; }.dropzone.drag-over { border-color:var(--coral); background:#fff3ee; }.dropzone-icon { width:53px; height:53px; display:grid; place-items:center; background:#fff3ee; border-radius:50%; color:var(--coral); margin-bottom:14px; }.dropzone-icon svg { width:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.dropzone strong { font-size:15px; letter-spacing:-.02em; }.dropzone > span { margin-top:7px; color:#9aa7a1; font-size:11px; }.dropzone .button { margin-top:18px; min-height:36px; padding:0 15px; font-size:11px; }.upload-bottom { display:flex; justify-content:space-between; align-items:center; color:#9aa7a1; font-size:10px; }.mini-check { display:inline-grid; place-items:center; width:16px; height:16px; margin-right:4px; border-radius:50%; color:#789d82; background:#edf5eb; }.sample-link { background:none; color:var(--coral-dark); font-size:10px; font-weight:700; }.sample-link span { font-size:14px; }
.result-card { position:relative; padding:25px; display:flex; flex-direction:column; }.result-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#92a19b; text-align:center; }.result-empty strong { color:#5f726d; font-size:14px; margin-top:13px; }.result-empty > span { font-size:11px; margin-top:7px; }.empty-paw { display:grid; place-items:center; width:78px; height:78px; border-radius:50%; background:#f0f4ec; color:#bbcabd; }.empty-paw svg { width:38px; height:38px; fill:currentColor; }
.result-content { display:flex; flex-direction:column; flex:1; }.result-preview { height:151px; margin-top:18px; border-radius:15px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(130deg,#f4d2bf,#d8e8d9); position:relative; }.preview-placeholder { width:76px; height:76px; border-radius:50%; background:rgba(255,253,248,.6); display:grid; place-items:center; color:var(--coral); }.preview-placeholder svg { width:40px; fill:currentColor; }.result-preview img { width:100%; height:100%; object-fit:cover; }.result-label { margin-top:17px; display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:baseline; }.result-label > span:first-child { color:#82918b; font-size:10px; grid-column:1/-1; }.result-label h3 { font-size:29px; letter-spacing:-.06em; margin-top:2px; }.result-latin { color:#9aa7a1; font-family:'DM Mono',monospace; font-size:10px; }.confidence { margin-top:17px; }.confidence > div:first-child { display:flex; justify-content:space-between; color:#788984; font-size:10px; }.confidence strong { color:var(--ink); font-size:12px; }.progress,.analysis-progress { height:5px; border-radius:8px; background:#ecf0e9; margin-top:8px; overflow:hidden; }.progress i,.analysis-progress i { display:block; height:100%; border-radius:inherit; background:var(--coral); transition:width 1s ease; }.traits { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }.traits span { padding:6px 8px; border-radius:7px; background:#f1f5ee; color:#688074; font-size:9px; }.result-note { color:#6c7e78; line-height:1.65; font-size:11px; margin-top:14px; }.result-actions { margin-top:auto; padding-top:21px; display:flex; gap:8px; }.full { flex:1; width:100%; }.analysis-state { position:absolute; inset:0; border-radius:23px; background:rgba(255,253,248,.96); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }.analysis-state strong { margin-top:18px; font-size:14px; }.analysis-state > span { margin-top:8px; color:#889892; font-size:10px; }.analysis-progress { width:180px; margin-top:20px; }.analysis-progress i { width:0; }.loader-orbit { width:54px; height:54px; border:1px solid #f3c9bd; border-radius:50%; position:relative; animation:spin 2.2s linear infinite; }.loader-orbit::before { content:""; position:absolute; inset:8px; border:1px dashed #f3c9bd; border-radius:50%; }.loader-orbit span { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--coral); }.loader-orbit span:nth-child(1){left:8px;top:22px}.loader-orbit span:nth-child(2){right:7px;top:13px;background:var(--honey)}.loader-orbit span:nth-child(3){right:17px;bottom:4px;background:#8db59a}@keyframes spin{to{transform:rotate(360deg)}}.privacy-note { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:16px; color:#9aa7a1; font-size:10px; }.lock { color:#82a18a; font-size:14px; }
.guide { padding:0 0 125px; }.guide-heading { margin-bottom:32px; }.guide-heading .text-link { justify-self:end; align-self:center; }.animal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.animal-card { min-height:282px; border-radius:22px; padding:20px; position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s; }.animal-card:hover { transform:translateY(-5px) rotate(-.5deg); box-shadow:0 18px 30px rgba(49,73,60,.1); }.featured-card { background:#f8d4c6; }.mint-card { background:#d4e8d8; }.yellow-card { background:#f4df9e; }.lavender-card { background:#dedbf0; }.card-top { display:flex; justify-content:space-between; align-items:center; color:rgba(19,62,66,.55); font-family:'DM Mono',monospace; font-size:10px; }.card-arrow { font-size:19px; transition:transform .2s; }.animal-card:hover .card-arrow { transform:translate(3px,-3px); }.animal-emoji { font-size:85px; line-height:1; text-align:center; margin:15px 0 12px; filter:drop-shadow(0 8px 7px rgba(65,74,56,.14)); }.animal-card h3 { text-align:center; font-size:21px; letter-spacing:-.04em; }.animal-card p { text-align:center; color:#657873; font-size:10px; margin-top:6px; }.paw-row { height:28px; display:flex; justify-content:center; align-items:center; gap:4px; margin-top:14px; color:rgba(19,62,66,.5); }.paw-row i { width:5px; height:5px; border-radius:50%; background:currentColor; font-size:0; }.paw-row b { font-size:17px; margin-left:2px; }.card-tag { display:block; width:max-content; margin:14px auto 0; padding:5px 9px; border-radius:20px; background:rgba(255,253,248,.5); color:#60736c; font-size:9px; }
.field-note { position:relative; min-height:390px; border-radius:28px; overflow:hidden; background:#f1bb9e; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; padding:54px 65px; margin-bottom:100px; }.note-illustration { height:280px; position:relative; }.note-circle { position:absolute; width:260px; height:260px; border-radius:50%; background:#fae2b6; top:6px; left:16px; }.note-paw { position:absolute; font-size:70px; filter:grayscale(1) sepia(.25); opacity:.65; transform:rotate(-16deg); }.paw-1 { left:50px; top:55px; }.paw-2 { left:148px; top:132px; font-size:55px; transform:rotate(11deg); }.paw-3 { left:88px; top:196px; font-size:45px; transform:rotate(-4deg); }.note-copy { position:relative; z-index:1; }.note-copy h2 { margin-top:14px; font-size:clamp(31px,4vw,49px); letter-spacing:-.07em; line-height:1.02; }.note-copy p { max-width:360px; margin:18px 0 24px; color:#805b52; font-size:13px; line-height:1.85; }.note-stamp { position:absolute; right:42px; top:34px; color:rgba(117,77,68,.35); border:1px solid rgba(117,77,68,.34); width:74px; height:74px; display:grid; place-items:center; border-radius:50%; text-align:center; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.06em; transform:rotate(12deg); }
.site-footer { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:29px 0 38px; color:#7e9089; }.footer-brand { display:flex; align-items:center; gap:9px; }.brand-mark.small { width:31px; height:31px; }.brand-mark.small svg { width:19px; height:19px; }.footer-brand strong { display:block; color:var(--ink); font-size:13px; }.footer-brand small { display:block; font-size:9px; margin-top:2px; }.footer-meta { display:flex; gap:26px; font-size:10px; }.footer-paw { color:var(--coral); font-size:24px; transform:rotate(-10deg); }
body.dark { --cream:#142f31; --paper:#1e4141; --ink:#f5f4ea; --muted:#abc0b7; --line:rgba(240,245,232,.15); --sage:#294e4b; --coral:#ff8a6e; --coral-dark:#ffab8f; --honey:#b58b45; --mint:#35564b; --lav:#494668; }.dark .top-nav,.dark .hero-lede,.dark .section-heading p,.dark .hero-trust,.dark .stats-bar span,.dark .upload-hint,.dark .result-time,.dark .result-empty,.dark .result-note,.dark .animal-card p,.dark .privacy-note,.dark .footer-meta { color:#b7c8bf; }.dark .hero-art { background:#37564d; }.dark .dropzone { border-color:#55716a; }.dark .result-empty strong { color:#eef1e8; }.dark .result-empty > span { color:#b7c8bf; }.dark .upload-card,.dark .result-card { box-shadow:none; border-color:rgba(240,245,232,.11); }.dark .button-outline { border-color:rgba(240,245,232,.25); color:var(--ink); }.dark .stats-bar { border-color:rgba(240,245,232,.15); }.dark .field-note { background:#b87660; }.dark .note-copy p { color:#f4d5ca; }.dark .site-footer { border-color:rgba(240,245,232,.15); }.dark .empty-paw { background:#294e4b; color:#769189; }
@media (max-width: 980px) { .section-wrap,.site-header { width:min(100% - 48px, 760px); }.hero { grid-template-columns:1fr; padding-top:40px; }.hero-copy { max-width:650px; }.hero-art { min-height:410px; max-width:680px; width:100%; }.stats-bar { grid-template-columns:repeat(3,1fr); gap:16px; }.stats-note { grid-column:1/-1; justify-content:flex-start !important; padding-left:0 !important; border-left:0 !important; padding-top:10px; }.section-heading { gap:30px; }.identify-grid { grid-template-columns:1fr; }.result-card { min-height:420px; }.animal-grid { grid-template-columns:repeat(2,1fr); }.field-note { grid-template-columns:1fr 1fr; padding:45px; } }
@media (max-width: 620px) { .section-wrap,.site-header { width:calc(100% - 34px); }.site-header { height:72px; }.top-nav { display:none; }.header-actions { min-width:auto; }.device-note,.icon-button { display:none; }.header-cta { padding:10px 13px; font-size:11px; }.brand { min-width:0; }.brand-mark { width:35px; height:35px; }.brand-mark svg { width:22px; height:22px; }.brand strong { font-size:15px; }.brand small { font-size:7px; }.hero { min-height:auto; padding:44px 0 52px; gap:36px; }.eyebrow { font-size:9px; }.hero h1 { font-size:53px; }.hero-lede { font-size:13px; line-height:1.8; margin-top:20px; }.hero-actions { gap:18px; margin-top:25px; }.button { min-height:42px; padding:0 16px; font-size:11px; }.hero-trust { margin-top:34px; }.hero-art { min-height:335px; border-radius:38% 45% 35% 42% / 36% 40% 45% 48%; }.animal span { font-size:62px; }.animal-fox { left:5%; bottom:10%; }.animal-cat { right:8%; top:23%; }.animal-raccoon { right:18%; bottom:1%; }.trail { width:31px; height:31px; }.art-caption { left:21px; bottom:18px; font-size:8px; }.stats-bar { grid-template-columns:repeat(3,1fr); padding:17px 0; gap:10px; }.stats-bar > div { padding-left:12px; }.stats-bar strong { font-size:20px; }.stats-bar span { font-size:8px; line-height:1.3; }.stats-note { font-size:9px !important; }.identify { padding:82px 0 88px; }.section-heading { display:block; margin-bottom:28px; }.section-heading h2 { font-size:34px; }.section-heading p { margin-top:17px; font-size:12px; }.upload-card,.result-card { min-height:390px; padding:18px; border-radius:20px; }.dropzone { min-height:242px; margin:15px 0 12px; }.upload-bottom { font-size:9px; }.sample-link { font-size:9px; }.result-preview { height:128px; }.result-label h3 { font-size:26px; }.guide { padding-bottom:86px; }.guide-heading { display:flex; align-items:end; justify-content:space-between; }.guide-heading h2 { font-size:34px; }.guide-heading .text-link { font-size:10px; }.animal-grid { grid-template-columns:1fr 1fr; gap:10px; }.animal-card { min-height:245px; padding:15px 12px; border-radius:17px; }.animal-emoji { font-size:62px; margin:14px 0 8px; }.animal-card h3 { font-size:17px; }.animal-card p { font-size:8px; }.card-tag { font-size:8px; padding:4px 7px; margin-top:11px; }.paw-row { margin-top:10px; }.field-note { min-height:560px; display:flex; flex-direction:column-reverse; align-items:flex-start; padding:33px 24px 26px; margin-bottom:65px; }.note-copy h2 { font-size:36px; }.note-copy p { font-size:12px; margin:15px 0 20px; }.note-illustration { width:100%; height:220px; margin-top:25px; }.note-circle { width:210px; height:210px; left:5px; }.paw-1 { left:28px; top:33px; }.paw-2 { left:111px; top:103px; }.paw-3 { left:62px; top:159px; }.note-stamp { right:20px; top:20px; width:63px; height:63px; font-size:8px; }.site-footer { flex-wrap:wrap; gap:18px; padding:23px 0 30px; }.footer-meta { order:3; width:100%; justify-content:space-between; font-size:8px; }.footer-paw { margin-left:auto; } }

/* Ranking + real-photo atlas */
.ranking { padding:128px 0 112px; }
.ranking-heading { margin-bottom:40px; }
.ranking-shell { display:grid; grid-template-columns:minmax(280px,.83fr) minmax(520px,1.17fr); gap:20px; }
.ranking-winner { min-height:442px; border-radius:24px; overflow:hidden; position:relative; background:#294c4c; color:#fff; box-shadow:var(--shadow); }
.ranking-winner > img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.winner-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,43,45,.06) 22%,rgba(15,43,45,.86) 100%); }
.winner-crown { position:absolute; left:22px; top:22px; padding:7px 9px; border:1px solid rgba(255,255,255,.35); border-radius:7px; font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.winner-copy { position:absolute; left:25px; bottom:25px; max-width:220px; }.winner-copy > span { color:#f6c9a4; font:10px 'DM Mono',monospace; letter-spacing:.09em; }.winner-copy h3 { margin-top:9px; font-size:33px; letter-spacing:-.07em; }.winner-copy p { margin-top:8px; color:rgba(255,255,255,.78); font-size:11px; line-height:1.65; }
.winner-count { position:absolute; right:23px; bottom:25px; text-align:right; }.winner-count strong { display:block; font-size:22px; letter-spacing:-.05em; }.winner-count span { display:block; margin-top:3px; color:rgba(255,255,255,.66); font-size:9px; }
.ranking-list { padding:8px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rank-row { min-height:68px; display:grid; grid-template-columns:34px 50px minmax(145px,1fr) minmax(110px,.8fr) 58px; gap:15px; align-items:center; border-bottom:1px solid var(--line); }.rank-row:last-child { border-bottom:0; }
.rank-number { color:#9ca9a2; font:11px 'DM Mono',monospace; }.coral-rank { color:var(--coral-dark); }.rank-row img { width:50px; height:50px; border-radius:12px; object-fit:cover; }.rank-name strong { display:block; font-size:13px; }.rank-name span { display:block; color:#96a39d; font:9px 'DM Mono',monospace; margin-top:4px; white-space:nowrap; }.rank-meter { height:4px; border-radius:8px; background:#e9eee8; overflow:hidden; }.rank-meter i { display:block; height:100%; border-radius:inherit; background:var(--coral); }.rank-score { text-align:right; font-size:12px; letter-spacing:-.03em; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; }.gallery-filters { display:flex; gap:8px; flex-wrap:wrap; }.gallery-filter { border:1px solid var(--line); background:transparent; color:#71837d; border-radius:999px; padding:9px 12px; font-size:10px; transition:background .2s,color .2s,border .2s; }.gallery-filter span { margin-left:4px; opacity:.55; }.gallery-filter.active,.gallery-filter:hover { border-color:var(--coral); background:#fff0ea; color:var(--coral-dark); }.gallery-photo-note { color:#8e9c95; font:10px 'DM Mono',monospace; }.gallery-photo-note i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#7bab83; margin-right:6px; }
.photo-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.photo-card { display:block; border:1px solid var(--line); border-radius:22px; background:var(--paper); padding:0; overflow:hidden; text-align:left; color:var(--ink); box-shadow:0 10px 30px rgba(50,69,57,.045); transition:transform .25s,box-shadow .25s; }.photo-card:hover { transform:translateY(-6px); box-shadow:0 20px 38px rgba(50,69,57,.13); }.photo-card.is-hidden { display:none; }
.photo-pair { display:block; height:238px; position:relative; overflow:hidden; background:#e9eee7; }.body-photo { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s; }.photo-card:hover .body-photo { transform:scale(1.045); }.paw-photo-wrap { position:absolute; width:105px; height:91px; right:13px; bottom:13px; border:4px solid var(--paper); border-radius:14px; overflow:hidden; box-shadow:0 9px 22px rgba(30,56,47,.25); background:#d9ded8; }.paw-photo { width:100%; height:100%; display:block; object-fit:cover; }.paw-photo-wrap small { position:absolute; left:7px; bottom:6px; padding:3px 5px; border-radius:4px; background:rgba(19,62,66,.78); color:#fff; font-size:8px; }.real-badge { position:absolute; left:14px; top:14px; padding:6px 8px; border-radius:6px; background:rgba(255,253,248,.86); color:var(--ink); font:8px 'DM Mono',monospace; letter-spacing:.08em; }.photo-card-copy { display:flex; align-items:flex-start; justify-content:space-between; padding:17px 17px 0; }.photo-card-copy small { display:block; color:var(--coral-dark); font:8px 'DM Mono',monospace; letter-spacing:.06em; }.photo-card-copy strong { display:inline-block; margin-top:7px; font-size:21px; letter-spacing:-.06em; }.photo-card-copy em { display:block; margin-top:3px; color:#98a49e; font:9px 'DM Mono',monospace; font-style:normal; }.photo-arrow { color:var(--coral); font-size:22px; transition:transform .2s; }.photo-card:hover .photo-arrow { transform:translate(3px,-3px); }.photo-traits { display:flex; flex-wrap:wrap; gap:5px; padding:13px 17px 17px; }.photo-traits i { padding:5px 7px; border-radius:6px; background:#f1f5ee; color:#6f8378; font-style:normal; font-size:9px; }
.photo-credits { margin-top:23px; border-top:1px solid var(--line); color:#87968f; }.photo-credits summary { list-style:none; display:flex; justify-content:space-between; padding:17px 0 9px; cursor:pointer; color:var(--ink); font-size:11px; font-weight:800; }.photo-credits summary::-webkit-details-marker { display:none; }.photo-credits summary span { color:var(--coral); font-size:18px; font-weight:400; }.photo-credits p { max-width:670px; font-size:10px; line-height:1.7; }.photo-credits ul { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 25px; padding:12px 0 3px 17px; margin:0; font-size:10px; }.photo-credits li::marker { color:var(--coral); }.photo-credits a { color:var(--coral-dark); margin-left:9px; text-decoration:underline; text-underline-offset:3px; }
.animal-modal { position:fixed; inset:0; display:grid; place-items:center; padding:20px; z-index:20; }.animal-modal[hidden] { display:none; }.modal-backdrop { position:absolute; inset:0; background:rgba(11,38,40,.67); backdrop-filter:blur(7px); }.modal-dialog { position:relative; width:min(980px,100%); max-height:min(760px,calc(100vh - 40px)); overflow:auto; display:grid; grid-template-columns:1.18fr .82fr; gap:26px; border-radius:25px; padding:22px; background:var(--paper); box-shadow:0 30px 80px rgba(11,38,40,.35); }.modal-close { position:absolute; z-index:2; right:15px; top:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,253,248,.86); color:var(--ink); font-size:25px; line-height:1; }.modal-photo-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:12px; min-height:420px; }.modal-photo-grid figure { margin:0; min-width:0; border-radius:15px; overflow:hidden; background:#edf1ea; position:relative; }.modal-photo-grid img { display:block; width:100%; height:100%; object-fit:cover; }.modal-photo-grid figcaption { position:absolute; left:12px; bottom:12px; padding:6px 8px; border-radius:6px; background:rgba(19,62,66,.78); color:#fff; font-size:9px; }.modal-animal-copy { align-self:center; padding:18px 15px 12px 2px; }.modal-animal-copy h2 { margin-top:15px; font-size:43px; letter-spacing:-.07em; }.modal-animal-copy > em { display:block; margin-top:4px; color:#92a098; font:10px 'DM Mono',monospace; font-style:normal; }.modal-traits { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; }.modal-traits span { padding:7px 8px; border-radius:7px; background:#f1f5ee; color:#6f8378; font-size:9px; }.modal-animal-copy p { margin-top:19px; color:#6c7e78; font-size:12px; line-height:1.85; }.modal-source-links { display:flex; gap:15px; margin-top:24px; }.modal-source-links a { color:var(--coral-dark); border-bottom:1px solid rgba(217,87,61,.35); padding-bottom:3px; font-size:10px; }
.dark .ranking-list,.dark .photo-credits,.dark .rank-row { border-color:rgba(240,245,232,.15); }.dark .rank-meter { background:#294e4b; }.dark .gallery-filter { color:#b5c8bc; }.dark .gallery-filter.active,.dark .gallery-filter:hover { background:#4f3a38; }.dark .photo-card { box-shadow:none; border-color:rgba(240,245,232,.12); }.dark .photo-traits span,.dark .photo-traits i,.dark .modal-traits span { background:#294e4b; color:#b7c8bf; }.dark .modal-dialog { box-shadow:none; }.dark .modal-source-links a { color:var(--coral); }.dark .winner-crown { color:#fff; }
@media (max-width:980px) { .ranking-shell { grid-template-columns:1fr; }.ranking-winner { min-height:360px; }.photo-gallery { grid-template-columns:repeat(2,1fr); }.modal-dialog { grid-template-columns:1fr; }.modal-photo-grid { min-height:360px; max-height:440px; }.modal-animal-copy { padding:0 10px 10px; } }
@media (max-width:620px) { .ranking { padding:82px 0 88px; }.ranking-heading { margin-bottom:28px; }.ranking-winner { min-height:320px; border-radius:20px; }.winner-copy { left:18px; bottom:18px; }.winner-copy h3 { font-size:28px; }.winner-count { right:18px; bottom:18px; }.ranking-list { padding:2px 0; }.rank-row { grid-template-columns:24px 42px minmax(90px,1fr) 48px; gap:9px; min-height:62px; }.rank-row img { width:42px; height:42px; border-radius:10px; }.rank-name strong { font-size:11px; }.rank-name span { font-size:8px; max-width:100px; overflow:hidden; text-overflow:ellipsis; }.rank-meter { display:none; }.rank-score { font-size:10px; }.gallery-toolbar { align-items:flex-start; flex-direction:column; gap:12px; }.gallery-photo-note { font-size:9px; }.photo-gallery { grid-template-columns:1fr 1fr; gap:10px; }.photo-card { border-radius:16px; }.photo-pair { height:180px; }.paw-photo-wrap { width:69px; height:63px; right:8px; bottom:8px; border-width:3px; border-radius:9px; }.paw-photo-wrap small { left:4px; bottom:4px; font-size:7px; }.real-badge { left:8px; top:8px; padding:5px 6px; font-size:7px; }.photo-card-copy { padding:12px 11px 0; }.photo-card-copy small { font-size:7px; }.photo-card-copy strong { margin-top:5px; font-size:17px; }.photo-card-copy em { font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:105px; }.photo-arrow { font-size:17px; }.photo-traits { gap:4px; padding:9px 11px 12px; }.photo-traits i { padding:4px 5px; font-size:7px; }.photo-credits ul { grid-template-columns:1fr; padding-left:16px; }.modal-dialog { padding:12px; border-radius:20px; gap:13px; }.modal-photo-grid { grid-template-columns:1.15fr .85fr; min-height:240px; max-height:290px; gap:7px; }.modal-photo-grid figcaption { left:7px; bottom:7px; padding:5px 6px; font-size:8px; }.modal-animal-copy { padding:0 6px 8px; }.modal-animal-copy h2 { font-size:34px; margin-top:11px; }.modal-traits { margin-top:15px; }.modal-animal-copy p { margin-top:14px; font-size:11px; }.modal-source-links { gap:10px; margin-top:17px; }.modal-source-links a { font-size:9px; } }