.scroll-area{flex-direction:column;min-height:0;display:flex;position:relative}.scroll-area-viewport{overscroll-behavior:contain;scrollbar-width:none;--fade-top:0px;--fade-bottom:0px;min-height:0;-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);flex:auto;overflow-y:auto}.scroll-area-viewport::-webkit-scrollbar{display:none}.scroll-area[data-fade-top]>.scroll-area-viewport{--fade-top:22px}.scroll-area[data-fade-bottom]>.scroll-area-viewport{--fade-bottom:28px}.scroll-area-track{z-index:2;touch-action:none;width:14px;position:absolute;top:6px;bottom:6px;right:2px}.scroll-area-thumb{corner-shape:round;background:linear-gradient(180deg, color-mix(in oklch, var(--primary) 85%, var(--fg)), color-mix(in oklch, var(--primary) 45%, var(--fg) 25%));opacity:0;cursor:grab;width:4px;transition:opacity .26s var(--ease-brand), width .2s var(--ease-brand), right .2s var(--ease-brand), box-shadow .2s var(--ease-brand);border-radius:999px;position:absolute;top:0;right:4px}.scroll-area[data-awake] .scroll-area-thumb{opacity:.75}.scroll-area-track:hover .scroll-area-thumb,.scroll-area-thumb:active{opacity:1;width:8px;box-shadow:0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent), 0 0 12px color-mix(in srgb, var(--primary) 45%, transparent);right:2px}.scroll-area-thumb:active{cursor:grabbing}@media (hover:none){.scroll-area-track{pointer-events:none}}@media (prefers-reduced-motion:reduce){.scroll-area .scroll-area-thumb{transition:none}}