/* Layout: pop "bird-stamp" index. Hero with 3 big category doors, sticky search pill, species cards with offer rows (no wide tables). */
:root{
  --bg:#f4fbff; --surface:#ffffff; --ink:#23304a; --muted:#6b7690; --line:#e3ecf5;
  --sky:#3aa7ff; --sky-soft:#e3f3ff;
  --parrot:#22b573; --parrot-soft:#ddf7ea;   /* tropical green */
  --raptor:#f29a1f; --raptor-soft:#fff0d6;   /* owl amber */
  --other:#ff6f9a;  --other-soft:#ffe4ed;    /* flamingo pink */
  --sun:#ffd23f;
  --ok:#18a565; --ok-soft:#dcf6e9; --warn:#d98a00; --warn-soft:#fff2d0; --off:#8f98ad; --off-soft:#eef1f6; --alert:#e5484d; --alert-soft:#ffe5e5;
  --shadow:0 6px 0 rgba(35,48,74,.06),0 10px 24px rgba(35,48,74,.06);
  --f-display:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-num:"Nunito","M PLUS Rounded 1c",system-ui,sans-serif;
  --r:22px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141a2b; --surface:#1d2538; --ink:#eef2fb; --muted:#a3acc4; --line:#2c3650;
  --sky:#6cc0ff; --sky-soft:#1d3350; --parrot:#4fd497; --parrot-soft:#17382b; --raptor:#ffb547; --raptor-soft:#3b2d16; --other:#ff8fb1; --other-soft:#3d2030; --sun:#ffd23f;
  --ok:#4fd497; --ok-soft:#17382b; --warn:#ffc04d; --warn-soft:#3b2f12; --off:#8a93ab; --off-soft:#262f45; --alert:#ff7b7f; --alert-soft:#3d1f24;
  --shadow:0 6px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141a2b; --surface:#1d2538; --ink:#eef2fb; --muted:#a3acc4; --line:#2c3650;
  --sky:#6cc0ff; --sky-soft:#1d3350; --parrot:#4fd497; --parrot-soft:#17382b; --raptor:#ffb547; --raptor-soft:#3b2d16; --other:#ff8fb1; --other-soft:#3d2030; --sun:#ffd23f;
  --ok:#4fd497; --ok-soft:#17382b; --warn:#ffc04d; --warn-soft:#3b2f12; --off:#8a93ab; --off-soft:#262f45; --alert:#ff7b7f; --alert-soft:#3d1f24;
  --shadow:0 6px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.25); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.75;font-weight:500}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--sky)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:12px}
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-wrap:balance;line-height:1.3;margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
[data-c="parrot"]{--c:var(--parrot);--cs:var(--parrot-soft)}
[data-c="raptor"]{--c:var(--raptor);--cs:var(--raptor-soft)}
[data-c="other"]{--c:var(--other);--cs:var(--other-soft)}
[data-c="all"]{--c:var(--sky);--cs:var(--sky-soft)}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:40px 28px}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.hero::before{width:340px;height:340px;right:-90px;top:-120px;background:var(--sun);opacity:.35}
.hero::after{width:180px;height:180px;right:200px;top:60px;background:var(--other);opacity:.16}
.hero .wrap{position:relative;z-index:1}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-size:13px;color:var(--muted)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
h1{font-size:clamp(34px,6.5vw,58px);margin-top:12px;letter-spacing:.01em}
h1 .a{color:var(--parrot)} h1 .b{color:var(--raptor)} h1 .c{color:var(--other)}
.lead{max-width:56ch;color:var(--muted);margin:10px 0 0;font-size:15.5px}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.door{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.door:hover{transform:translateY(-3px);border-color:var(--c)}
.door[aria-pressed="true"]{border-color:var(--c);background:var(--cs)}
.door svg{grid-row:span 2;width:52px;height:52px}
.door b{font-family:var(--f-display);font-size:19px}
.door span{font-size:13px;color:var(--muted)} .door span em{font-style:normal;font-family:var(--f-num);font-size:18px;color:var(--c);margin-right:2px}
.stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:13px;color:var(--muted)}
.stats b{font-family:var(--f-num);font-size:17px;color:var(--ink)}

/* sticky search */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);padding-block:10px}
.search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow)}
.search label.q{flex:1 1 220px;display:flex;align-items:center;gap:8px;padding-left:12px;min-width:0}
.search svg{flex:none;color:var(--muted)}
.search input{all:unset;flex:1;min-width:0;font-size:15px;padding:6px 0}
.search input::placeholder{color:var(--muted)}
.search select{font:inherit;font-size:13.5px;border:0;background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 12px;cursor:pointer;min-width:0}
.chips{display:flex;gap:8px;margin-top:10px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip{all:unset;flex:none;cursor:pointer;font-size:13.5px;padding:6px 14px;border-radius:999px;background:var(--surface);border:2px solid var(--line);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.chip .n{font-family:var(--f-num);margin-left:6px;opacity:.7}
.view{flex:none;margin-left:auto;display:inline-flex;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:3px}
.view button{all:unset;cursor:pointer;font-size:13px;padding:5px 14px;border-radius:999px;color:var(--muted)}
.view button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.result-note{font-size:13.5px;color:var(--muted);margin:16px 4px 0}

/* species card */
main{padding-block:4px 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:12px;align-items:start}
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.card-top{display:flex;gap:14px;align-items:flex-start;padding:18px 18px 12px;background:linear-gradient(180deg,var(--cs),transparent)}
.avatar{flex:none;width:54px;height:54px;border-radius:50%;background:var(--c);display:grid;place-items:center}
.avatar svg{width:34px;height:34px}
.card-top>div:not(.avatar){min-width:0;flex:1}
.card h3{font-size:20px}
.sci{font-style:italic;color:var(--muted);font-size:12.5px;line-height:1.4}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:11.5px;padding:2px 10px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.cat{background:var(--c);border-color:var(--c);color:#fff}
.tag.i{border-color:var(--alert);color:var(--alert);background:var(--alert-soft)}
.tag.reg{border-color:var(--sky);color:var(--sky);background:var(--sky-soft)}
.tag.spec{background:var(--alert);border-color:var(--alert);color:#fff}
.feature{font-size:13.5px;margin:0;padding:0 18px}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;padding:10px 18px 4px}
.meter{background:var(--bg);border-radius:14px;padding:6px 10px;font-size:11.5px;color:var(--muted);line-height:1.4}
.meter b{display:block;font-family:var(--f-num);font-size:15px;color:var(--ink)}
.dots{display:flex;gap:3px;margin-top:3px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--c)}
.summary{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 18px 6px;font-size:13px;color:var(--muted)}
.summary .low b{font-family:var(--f-num);font-size:22px;color:var(--ink)}
.offers{list-style:none;margin:0;padding:4px 10px 12px}
.offer{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 10px;border-radius:16px}
.offer:hover{background:var(--bg)}
.offer+.offer{border-top:1.5px dashed var(--line)}
.offer .shop{font-weight:700;min-width:0}
.offer .loc{font-size:12px;color:var(--muted)}
.offer .price{font-family:var(--f-num);font-size:17px;text-align:right;white-space:nowrap}
.offer .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--muted)}
.offer .meta .d{flex:1 1 140px;min-width:0;line-height:1.5}
.go{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--sky);background:var(--sky-soft);padding:3px 12px;border-radius:999px;white-space:nowrap}
.go:hover{background:var(--sky);color:#fff}
.offer.sold{opacity:.55}
.more{all:unset;cursor:pointer;display:block;text-align:center;font-size:13px;color:var(--sky);padding:8px;margin:0 10px 12px;border-radius:14px;background:var(--bg)}
.pill{display:inline-block;font-size:11.5px;padding:1px 10px;border-radius:999px;white-space:nowrap;font-weight:700}
.st-available{background:var(--ok-soft);color:var(--ok)}
.st-negotiating{background:var(--warn-soft);color:var(--warn)}
.st-sold{background:var(--off-soft);color:var(--off)}
.st-unknown{background:var(--off-soft);color:var(--muted)}
.warnbox{margin:6px 18px 4px;padding:8px 12px;border-radius:14px;background:var(--alert-soft);color:var(--alert);font-size:12.5px}

/* shop view */
.shop-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.shop-card h3{font-size:18px}
.shop-card ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.shop-card li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1.5px dashed var(--line)}
.shop-card li>span:first-child{min-width:0}
.shop-card .none{font-size:13px;color:var(--muted)}
.cats{display:flex;gap:6px;flex-wrap:wrap}

.empty{padding:40px 18px;text-align:center;color:var(--muted);background:var(--surface);border:2px dashed var(--line);border-radius:var(--r);margin-top:16px}
.nostock{margin-top:22px;font-size:13.5px;color:var(--muted);background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:12px 18px}
.nostock summary{cursor:pointer;color:var(--ink);font-weight:700}
.nostock ul{columns:2 240px;padding-left:18px}

/* guide */
section.guide{padding-block:40px 20px}
.guide-box{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:28px clamp(16px,4vw,36px);box-shadow:var(--shadow)}
.guide h2{font-size:clamp(22px,3.4vw,28px)}
.guide .sub{color:var(--muted);margin:6px 0 18px;max-width:62ch}
.laws{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.law{background:var(--bg);border-radius:18px;padding:16px 18px;min-width:0}
.law h3{font-size:16px;margin-bottom:6px}
.law p{margin:0 0 8px;font-size:13.5px}
.law ul{margin:0 0 8px;padding-left:18px;font-size:13px;color:var(--muted)}
.law a{font-size:12.5px}
.check{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.check li label{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;background:var(--bg);border-radius:16px;padding:10px 14px;cursor:pointer}
.check input{margin-top:5px;accent-color:var(--parrot);flex:none;width:18px;height:18px}
.check li label:has(input:checked){background:var(--parrot-soft)}
.progress{display:flex;align-items:center;gap:10px;margin:-6px 0 14px;font-size:13px;color:var(--muted)}
.progress .track{flex:1;max-width:260px;height:10px;border-radius:99px;background:var(--bg);overflow:hidden}
.progress .fill{height:100%;background:var(--parrot);border-radius:99px;transition:width .3s}
footer{padding-block:10px 40px;font-size:12.5px;color:var(--muted)}
footer p{max-width:80ch}
@media (max-width:720px){.doors{grid-template-columns:1fr}.door{padding:12px 16px}.door svg{width:42px;height:42px}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

html{-webkit-text-size-adjust:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

.topnav{padding-block:14px;border-bottom:2px solid var(--line);background:var(--surface)}
.topnav .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.logo{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink);text-decoration:none}
.logo .a{color:var(--parrot)}.logo .b{color:var(--raptor)}.logo .c{color:var(--other)}
.links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}.links a{color:var(--ink);text-decoration:none}.links a:hover{color:var(--sky)}
.crumb{font-size:12.5px;color:var(--muted);padding-block:14px 0}.crumb a{color:var(--muted)}
.ph{padding-block:18px 8px}.ph h1{font-size:clamp(26px,5vw,40px);margin-top:4px}
.ph .lead{margin-top:8px}
.sp-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:14px;padding:0;list-style:none}
.sp-links a{display:flex;justify-content:space-between;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 14px;text-decoration:none;color:var(--ink);font-weight:700}
.sp-links a:hover{border-color:var(--sky)}
.sp-links small{font-family:var(--f-num);color:var(--muted);font-weight:700;white-space:nowrap}
.seo-index{padding-block:10px 30px}.seo-index h2{font-size:22px;margin-top:22px}
.single{max-width:760px}
.single .card{margin-top:14px}

.goods{margin-top:28px}
.gh{font-size:22px;display:flex;align-items:center;gap:10px}
.pr{font-family:var(--f-num);font-size:11px;letter-spacing:.08em;background:var(--muted);color:var(--surface);border-radius:6px;padding:2px 7px}
.gnote{font-size:12.5px;color:var(--muted);margin:6px 0 10px}
.gslot{margin-top:16px}.gslot h3{font-size:16px}.gslot p{font-size:13px;color:var(--muted);margin:2px 0 8px}
.grow{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gd{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px;text-decoration:none;color:var(--ink);min-width:0}
.gd:hover{border-color:var(--sky)}
.gd img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:10px}
.gn{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gp{font-family:var(--f-num);font-size:16px;font-weight:800}
.gs{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.gtabs a{font-size:13px;padding:6px 14px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}