.arc{--arc-w:clamp(150px, 17vw, 220px);--arc-ink:#12302b;--arc-tag-bg:#ffffff9e;--arc-art-bg:#ffffff80;position:relative}.arc-viewport{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:24px 0 32px;overflow-x:auto}.arc-viewport::-webkit-scrollbar{display:none}@media (prefers-reduced-motion:no-preference){.arc-viewport{padding:56px 0 64px}}.arc-track{gap:10px;width:max-content;margin:0;padding:0 24px;list-style:none;display:flex}.arc-item{flex:0 0 var(--arc-w);scroll-snap-align:center}.arc-card{aspect-ratio:3/4;color:var(--arc-ink);user-select:none;-webkit-user-drag:none;backface-visibility:hidden;border-radius:6px;flex-direction:column;padding:14px 14px 16px;text-decoration:none;display:flex;position:relative;overflow:hidden}.arc-card:focus-visible{outline-offset:3px}.arc-tag{background:var(--arc-tag-bg);letter-spacing:.02em;border-radius:999px;align-self:flex-start;padding:2px 9px;font-size:.72rem;font-weight:700;line-height:1.6}.arc-art{flex:1;place-items:center;min-height:0;display:grid}.arc-art .animal{background:var(--arc-art-bg);box-sizing:content-box;border-radius:50%;width:62%;max-width:120px;padding:8%}.arc-title{text-wrap:balance;font-size:clamp(.92rem,1.25vw,1.08rem);font-weight:800;line-height:1.28}.arc-photo-card{color:#fff;background:#1d2b28;padding:14px 16px 16px}.arc-photo{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0}.arc-photo-card:after{content:"";pointer-events:none;background:linear-gradient(#0000,#000000b8);position:absolute;inset:45% 0 0}.arc-photo-card>:not(.arc-photo){z-index:1;position:relative}.arc-spacer{flex:1}.arc-kicker{letter-spacing:.04em;opacity:.85;text-transform:uppercase;font-size:.78rem;font-weight:700}.arc-photo-card .arc-title{text-shadow:0 1px 8px #00000059;font-size:clamp(1rem,1.4vw,1.2rem)}.arc-item:hover .arc-photo,.arc-card:focus-visible .arc-photo{transform:scale(1.06)}.arc-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,filter .35s}.arc-item:hover .arc-card,.arc-card:focus-visible{filter:saturate(1.12);transform:translateY(-10px)scale(1.05);box-shadow:0 18px 36px #12302b38}.arc-title .icon{vertical-align:-2px;opacity:0;margin-left:4px;transition:opacity .25s,transform .25s;display:inline-block;transform:translate(-6px)}.arc-item:hover .arc-card .arc-title .icon,.arc-card:focus-visible .arc-title .icon{opacity:1;transform:none}.arc-item:hover .arc-card .animal,.arc-card:focus-visible .animal{animation:.6s cubic-bezier(.3,.7,.4,1) arc-hop}@keyframes arc-hop{0%,to{transform:none}40%{transform:translateY(-9%)rotate(-4deg)}70%{transform:translateY(0)rotate(2deg)}}@media (hover:none){.arc-item:hover .arc-card{box-shadow:none;filter:none;transform:none}}.arc-tone-care.arc-shade-0{background:#ffc2ae}.arc-tone-care.arc-shade-1{background:#ffd6a8}.arc-tone-care.arc-shade-2{background:#f8a993}.arc-tone-behavior.arc-shade-0{background:#9fe0d3}.arc-tone-behavior.arc-shade-1{background:#bfe8c9}.arc-tone-behavior.arc-shade-2{background:#85cfc5}.arc-tone-small-pets.arc-shade-0{background:#b9c9f7}.arc-tone-small-pets.arc-shade-1{background:#d2c2f4}.arc-tone-small-pets.arc-shade-2{background:#a7d3f2}@media (prefers-color-scheme:dark){.arc-item:hover .arc-card,.arc-card:focus-visible{box-shadow:0 18px 36px #00000080}.arc{--arc-ink:#f3fbf9;--arc-tag-bg:#00000047;--arc-art-bg:#ffffff24}.arc-tone-care.arc-shade-0{background:#6a3124}.arc-tone-care.arc-shade-1{background:#6b4320}.arc-tone-care.arc-shade-2{background:#57261c}.arc-tone-behavior.arc-shade-0{background:#15514a}.arc-tone-behavior.arc-shade-1{background:#22503a}.arc-tone-behavior.arc-shade-2{background:#0f4244}.arc-tone-small-pets.arc-shade-0{background:#2a3a6e}.arc-tone-small-pets.arc-shade-1{background:#3d3170}.arc-tone-small-pets.arc-shade-2{background:#1d4566}}.arc.is-arc .arc-viewport{scroll-snap-type:none;cursor:grab;touch-action:pan-y;padding:56px 0 64px;overflow:hidden}.arc.is-arc .arc-viewport:active{cursor:grabbing}.arc.is-arc .arc-track{padding:0}.arc.is-arc .arc-card{background-clip:padding-box;border:2px solid #0000}.arc.is-running .arc-track,.arc.is-running .arc-item{will-change:transform}.arc.is-arc .arc-item:hover,.arc.is-arc .arc-item:focus-within{z-index:10000!important}@media (width<=640px){.arc{--arc-w:158px}.arc-track{padding:0 16px}.arc.is-arc .arc-viewport{padding:32px 0 40px}}@media (width<=640px) and (prefers-reduced-motion:no-preference){.arc-viewport{padding:32px 0 40px}}