@layer components{.preset-rail{display:flex;flex-wrap:nowrap;gap:1rem;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:.25rem;padding-block:.5rem;margin-block:-.5rem;padding-inline:.25rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent);scrollbar-width:thin}.preset-rail::-webkit-scrollbar{height:6px}.preset-rail::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:9999px}.preset-rail__card{flex:0 0 clamp(15rem,76vw,21rem);scroll-snap-align:start}.preset-rail__arrow{position:absolute;top:50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;transform:translateY(-50%);border-radius:9999px;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-card);color:var(--color-ink-muted);cursor:pointer;transition:opacity .18s ease,color .18s ease,border-color .18s ease,background-color .18s ease}.preset-rail__arrow--prev{left:-.5rem}.preset-rail__arrow--next{right:-.5rem}@media (hover:hover) and (pointer:fine){.preset-rail__arrow:hover{color:var(--color-info-strong);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}}.preset-rail__arrow--hidden{opacity:0;pointer-events:none}@media (hover:none),(max-width:767px){.preset-rail__arrow{display:none}}}@media (prefers-reduced-motion:reduce){.preset-rail{scroll-behavior:auto;scroll-snap-type:none}}