.arc-outer { position: relative; overflow-x: hidden; }
.arc-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 8px;
scroll-padding-left: 16px;
}
@media (min-width: 640px) { .arc-scroll { scroll-padding-left: 24px; } }
.arc-scroll::-webkit-scrollbar { display: none; }
.arc-card {
flex-shrink: 0;
width: 75vw;
scroll-snap-align: start;
}
@media (min-width: 640px)  { .arc-card { width: 44vw; } }
@media (min-width: 1024px) { .arc-card { width: calc((min(100vw, 1024px) - 72px) / 3.1); } }
.arc-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
padding-bottom: 8px;
z-index: 10;
}
.arc-arrow {
pointer-events: auto;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.75);
color: #F0831A;
box-shadow: 0 1px 8px rgba(0,0,0,0.18);
opacity: 0.8;
flex-shrink: 0;
transition: box-shadow 0.15s;
}
.arc-arrow:hover { opacity: 1; box-shadow: 0 2px 12px rgba(0,0,0,0.28); }
.arc-arrow.arc-edge { visibility: hidden; pointer-events: none; }
.dark .arc-arrow { background: rgba(30,30,30,0.8); }/* empty *//* empty */