@property --patternmode-scrollframe-mask-top{syntax:"<length>";inherits:false;initial-value:0}@property --patternmode-scrollframe-mask-bottom{syntax:"<length>";inherits:false;initial-value:0}@property --patternmode-scrollframe-mask-left{syntax:"<length>";inherits:false;initial-value:0}@property --patternmode-scrollframe-mask-right{syntax:"<length>";inherits:false;initial-value:0}@layer components{.patternmode-scrollframe{--patternmode-scrollframe-fade-color:var(--card,#fff);--patternmode-scrollframe-fade-size:2rem;min-width:0;min-height:0;position:relative}.patternmode-scrollframe__viewport{height:100%;max-height:inherit;max-width:inherit;overscroll-behavior-x:auto;overscroll-behavior-y:auto;scrollbar-gutter:stable;width:100%;min-width:0;min-height:0}.patternmode-scrollframe[data-axis-vertical=true]>.patternmode-scrollframe__viewport{overscroll-behavior-y:contain;overflow-y:auto}.patternmode-scrollframe[data-axis-vertical=false]>.patternmode-scrollframe__viewport{overflow-y:hidden}.patternmode-scrollframe[data-axis-horizontal=true]>.patternmode-scrollframe__viewport{overscroll-behavior-x:contain;overflow-x:auto}.patternmode-scrollframe[data-axis-horizontal=false]>.patternmode-scrollframe__viewport{overflow-x:hidden}.patternmode-scrollframe[data-scrollbar-visibility=hidden] .patternmode-scrollframe__viewport{scrollbar-width:none}.patternmode-scrollframe[data-scrollbar-visibility=hidden] .patternmode-scrollframe__viewport::-webkit-scrollbar{display:none}.patternmode-scrollframe__content{min-width:0;min-height:0}.patternmode-scrollframe[data-axis-vertical=true] .patternmode-scrollframe__content{min-height:min-content}.patternmode-scrollframe[data-axis-horizontal=true] .patternmode-scrollframe__content{min-width:min-content}.patternmode-scrollframe[data-drag-scroll=true][data-drag-scroll-cursor=true] .patternmode-scrollframe__content{cursor:grab}.patternmode-scrollframe[data-drag-scroll=true][data-axis-horizontal=true][data-axis-vertical=false] .patternmode-scrollframe__content{touch-action:pan-y}.patternmode-scrollframe[data-drag-scroll=true][data-axis-horizontal=false][data-axis-vertical=true] .patternmode-scrollframe__content{touch-action:pan-x}.patternmode-scrollframe[data-drag-scroll=true][data-axis-horizontal=true][data-axis-vertical=true] .patternmode-scrollframe__content{touch-action:none}.patternmode-scrollframe[data-dragging=true] .patternmode-scrollframe__content{cursor:grabbing;-webkit-user-select:none;user-select:none}.patternmode-scrollframe[data-axis-horizontal=true] .patternmode-scrollframe__content{width:max-content}.patternmode-scrollframe__viewport[data-fade-mode=mask]{--_mask-vertical:linear-gradient(to bottom, transparent 0, #00000005 calc(var(--patternmode-scrollframe-mask-top) * .09), #00000014 calc(var(--patternmode-scrollframe-mask-top) * .18), #0000002e calc(var(--patternmode-scrollframe-mask-top) * .29), #00000052 calc(var(--patternmode-scrollframe-mask-top) * .42), #00000085 calc(var(--patternmode-scrollframe-mask-top) * .58), #000000b8 calc(var(--patternmode-scrollframe-mask-top) * .74), black var(--patternmode-scrollframe-mask-top), black calc(100% - var(--patternmode-scrollframe-mask-bottom)), #000000b8 calc(100% - var(--patternmode-scrollframe-mask-bottom) * .74), #00000085 calc(100% - var(--patternmode-scrollframe-mask-bottom) * .58), #00000052 calc(100% - var(--patternmode-scrollframe-mask-bottom) * .42), #0000002e calc(100% - var(--patternmode-scrollframe-mask-bottom) * .29), #00000014 calc(100% - var(--patternmode-scrollframe-mask-bottom) * .18), #00000005 calc(100% - var(--patternmode-scrollframe-mask-bottom) * .09), transparent 100%);--_mask-horizontal:linear-gradient(to right, transparent 0, #00000005 calc(var(--patternmode-scrollframe-mask-left) * .09), #00000014 calc(var(--patternmode-scrollframe-mask-left) * .18), #0000002e calc(var(--patternmode-scrollframe-mask-left) * .29), #00000052 calc(var(--patternmode-scrollframe-mask-left) * .42), #00000085 calc(var(--patternmode-scrollframe-mask-left) * .58), #000000b8 calc(var(--patternmode-scrollframe-mask-left) * .74), black var(--patternmode-scrollframe-mask-left), black calc(100% - var(--patternmode-scrollframe-mask-right)), #000000b8 calc(100% - var(--patternmode-scrollframe-mask-right) * .74), #00000085 calc(100% - var(--patternmode-scrollframe-mask-right) * .58), #00000052 calc(100% - var(--patternmode-scrollframe-mask-right) * .42), #0000002e calc(100% - var(--patternmode-scrollframe-mask-right) * .29), #00000014 calc(100% - var(--patternmode-scrollframe-mask-right) * .18), #00000005 calc(100% - var(--patternmode-scrollframe-mask-right) * .09), transparent 100%);-webkit-mask-composite:source-in;-webkit-mask-composite:source-in;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-image:var(--_mask-vertical), var(--_mask-horizontal);-webkit-mask-image:var(--_mask-vertical), var(--_mask-horizontal);-webkit-mask-image:var(--_mask-vertical), var(--_mask-horizontal);mask-image:var(--_mask-vertical), var(--_mask-horizontal);transition:--patternmode-scrollframe-mask-top .14s,--patternmode-scrollframe-mask-bottom .14s,--patternmode-scrollframe-mask-left .14s,--patternmode-scrollframe-mask-right .14s}.patternmode-scrollframe__fade{--_fade-stops:transparent 0%, #00000005 9%, #00000014 18%, #0000002e 29%, #00000052 42%, #00000085 58%, #000000b8 74%, black 100%;background:var(--patternmode-scrollframe-fade-color);-webkit-mask-image:linear-gradient(var(--_fade-dir), var(--_fade-stops));-webkit-mask-image:linear-gradient(var(--_fade-dir), var(--_fade-stops));-webkit-mask-image:linear-gradient(var(--_fade-dir), var(--_fade-stops));mask-image:linear-gradient(var(--_fade-dir), var(--_fade-stops));opacity:1;pointer-events:none;z-index:1;transition:opacity .14s;position:absolute}.patternmode-scrollframe__fade[data-hidden=true]{opacity:0}.patternmode-scrollframe__fade[data-axis=vertical]{height:var(--patternmode-scrollframe-fade-size);left:0;right:0}.patternmode-scrollframe__fade[data-axis=vertical][data-edge=start]{--_fade-dir:to top;top:0}.patternmode-scrollframe__fade[data-axis=vertical][data-edge=end]{--_fade-dir:to bottom;bottom:0}.patternmode-scrollframe__fade[data-axis=horizontal]{width:var(--patternmode-scrollframe-fade-size);top:0;bottom:0}.patternmode-scrollframe__fade[data-axis=horizontal][data-edge=start]{--_fade-dir:to left;left:0}.patternmode-scrollframe__fade[data-axis=horizontal][data-edge=end]{--_fade-dir:to right;right:0}.patternmode-scrollframe__scrollbar{touch-action:none;-webkit-user-select:none;user-select:none;padding:2px;transition:opacity .15s;display:flex}.patternmode-scrollframe__scrollbar[data-orientation=vertical]{width:10px}.patternmode-scrollframe__scrollbar[data-orientation=horizontal]{flex-direction:column;height:10px}.patternmode-scrollframe[data-scrollbar-visibility=auto] .patternmode-scrollframe__scrollbar,.patternmode-scrollframe[data-scrollbar-visibility=hover] .patternmode-scrollframe__scrollbar{opacity:0}.patternmode-scrollframe[data-scrollbar-visibility=auto] .patternmode-scrollframe__scrollbar[data-scrolling],.patternmode-scrollframe[data-scrollbar-visibility=hover] .patternmode-scrollframe__scrollbar[data-hovering],.patternmode-scrollframe[data-scrollbar-visibility=hover] .patternmode-scrollframe__scrollbar[data-scrolling]{opacity:1}.patternmode-scrollframe__scrollbar[data-hidden=true]{opacity:0;pointer-events:none}.patternmode-scrollframe__thumb{background:color-mix(in srgb, currentColor 18%, transparent);border-radius:999px;flex:1;transition:background .15s;position:relative}@media (hover:hover) and (pointer:fine){.patternmode-scrollframe__thumb:hover{background:color-mix(in srgb, currentColor 30%, transparent)}}.patternmode-scrollframe__thumb:active{background:color-mix(in srgb, currentColor 38%, transparent)}.patternmode-scrollframe__control{background:color-mix(in srgb, var(--card,#fff) 80%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb, var(--border,#e3e1dc) 60%, transparent);color:inherit;cursor:pointer;font:inherit;z-index:2;border-radius:999px;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex;position:absolute}.patternmode-scrollframe__control[data-axis=horizontal]{top:50%;transform:translateY(-50%)}.patternmode-scrollframe__control[data-axis=horizontal][data-direction=start]{left:.375rem}.patternmode-scrollframe__control[data-axis=horizontal][data-direction=end]{right:.375rem}.patternmode-scrollframe__control[data-axis=vertical]{left:50%;transform:translate(-50%)}.patternmode-scrollframe__control[data-axis=vertical][data-direction=start]{top:.375rem}.patternmode-scrollframe__control[data-axis=vertical][data-direction=end]{bottom:.375rem}.patternmode-scrollframe__control>svg{pointer-events:none}@media (hover:hover) and (pointer:fine){.patternmode-scrollframe__control:not(:disabled):not([aria-disabled=true]):hover{background:color-mix(in srgb, var(--card,#fff) 95%, transparent);border-color:var(--border,#e3e1dc)}}.patternmode-scrollframe__control:focus-visible{outline:2px solid var(--border,#e3e1dc);outline-offset:2px}.patternmode-scrollframe__control:disabled,.patternmode-scrollframe__control[aria-disabled=true]{cursor:not-allowed;opacity:.42}@media (prefers-reduced-motion:reduce){.patternmode-scrollframe__fade,.patternmode-scrollframe__viewport[data-fade-mode=mask],.patternmode-scrollframe__thumb,.patternmode-scrollframe__control{transition:none}}}