._ScrollArea_1c2nj_1{box-sizing:border-box;background-color:#fff;width:24rem;max-width:calc(100vw - 8rem);height:8.5rem}@media (prefers-color-scheme:dark){._ScrollArea_1c2nj_1{background-color:#0a0a0a;background-color:lab(2.75381% 0 0)}}._Viewport_1c2nj_13{box-sizing:border-box;border:1px solid #0a0a0a;border:1px solid lab(2.75381% 0 0);height:100%}@media (prefers-color-scheme:dark){._Viewport_1c2nj_13{border:1px solid #fff}}._Viewport_1c2nj_13:focus-visible{outline-offset:-1px;outline:2px solid #0a0a0a;outline:2px solid lab(2.75381% 0 0)}@media (prefers-color-scheme:dark){._Viewport_1c2nj_13:focus-visible{outline-color:#fff}}._Content_1c2nj_32{padding-block:.5rem;flex-direction:column;gap:1rem;padding-left:.75rem;padding-right:1.25rem;display:flex}._Paragraph_1c2nj_41{color:#0a0a0a;color:lab(2.75381% 0 0);margin:0;font-size:.875rem;line-height:1.375rem}@media (prefers-color-scheme:dark){._Paragraph_1c2nj_41{color:#fff}}._Scrollbar_1c2nj_52{opacity:0;pointer-events:none;background-color:#0000001f;justify-content:center;width:1rem;margin:1px;transition:opacity .15s;display:flex}@media (prefers-color-scheme:dark){._Scrollbar_1c2nj_52{background-color:#ffffff1f}}._Scrollbar_1c2nj_52[data-scrolling]{transition-duration:0s}._Scrollbar_1c2nj_52[data-hovering],._Scrollbar_1c2nj_52[data-scrolling]{opacity:1;pointer-events:auto}._Thumb_1c2nj_77{background-color:#0a0a0a;background-color:lab(2.75381% 0 0);width:100%}@media (prefers-color-scheme:dark){._Thumb_1c2nj_77{background-color:#fff}}.StencilComparison[data-scroll-area-comparison]{flex-wrap:wrap;display:flex}[data-scroll-area-comparison]>section{flex:1 0 auto;max-width:100%}@layer fs-theme{.demo-scroll-area-hero-paragraph{font-size:var(--fs-font-size-sm);color:var(--fs-color-foreground);margin:0;line-height:1.375rem}.demo-scroll-area-both-grid{gap:var(--fs-space-3);grid-template-rows:repeat(10,6.25rem);grid-template-columns:repeat(10,6.25rem);margin:0;padding:0;list-style:none;display:grid}.demo-scroll-area-both-item{background-color:var(--fs-color-subtle);font-size:var(--fs-font-size-sm);font-weight:var(--fs-font-weight-bold);color:var(--fs-color-secondary);justify-content:center;align-items:center;display:flex}.demo-scroll-area-scroll-fade-paragraph{font-size:var(--fs-font-size-sm);color:var(--fs-color-foreground);margin:0;line-height:1.375rem}}._ScrollArea_tvzcx_1{box-sizing:border-box;width:20rem;max-width:calc(100vw - 8rem);height:20rem}._Viewport_tvzcx_8{box-sizing:border-box;border:1px solid #0a0a0a;border:1px solid lab(2.75381% 0 0);height:100%}@media (prefers-color-scheme:dark){._Viewport_tvzcx_8{border:1px solid #fff}}._Viewport_tvzcx_8:focus-visible{outline-offset:-1px;outline:2px solid #0a0a0a;outline:2px solid lab(2.75381% 0 0)}@media (prefers-color-scheme:dark){._Viewport_tvzcx_8:focus-visible{outline-color:#fff}}._Content_tvzcx_27{padding:.75rem 1.5rem 1.5rem .75rem}._Grid_tvzcx_31{grid-template-rows:repeat(10,6.25rem);grid-template-columns:repeat(10,6.25rem);gap:.75rem;margin:0;padding:0;list-style:none;display:grid}._Item_tvzcx_41{color:#525252;color:lab(34.924% 0 0);background-color:#e5e5e5;background-color:lab(90.952% 0 -.0000119209);justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:flex}@media (prefers-color-scheme:dark){._Item_tvzcx_41{color:#a1a1a1;color:lab(66.128% -.0000298023 .0000119209);background-color:#262626;background-color:lab(15.204% 0 -.00000596046)}}._Scrollbar_tvzcx_56{opacity:0;pointer-events:none;background-color:#0000001f;margin:1px;transition:opacity .15s;display:flex;position:relative}@media (prefers-color-scheme:dark){._Scrollbar_tvzcx_56{background-color:#ffffff1f}}._Scrollbar_tvzcx_56[data-scrolling]{transition-duration:0s}._Scrollbar_tvzcx_56[data-hovering],._Scrollbar_tvzcx_56[data-scrolling]{opacity:1;pointer-events:auto}._Scrollbar_tvzcx_56[data-orientation=vertical]{width:1rem}._Scrollbar_tvzcx_56[data-orientation=horizontal]{height:1rem}._Thumb_tvzcx_88{background-color:#0a0a0a;background-color:lab(2.75381% 0 0);width:100%}@media (prefers-color-scheme:dark){._Thumb_tvzcx_88{background-color:#fff}}._ScrollArea_1oaev_1{box-sizing:border-box;background-color:#f5f5f5;background-color:lab(96.52% -.0000298023 .0000119209);width:24rem;max-width:calc(100vw - 8rem);height:12rem}@media (prefers-color-scheme:dark){._ScrollArea_1oaev_1{background-color:#262626;background-color:lab(15.204% 0 -.00000596046)}}._ScrollArea_1oaev_1:has(._Viewport_1oaev_12:focus-visible){outline:2px solid #0a0a0a;outline:2px solid lab(2.75381% 0 0)}@media (prefers-color-scheme:dark){._ScrollArea_1oaev_1:has(._Viewport_1oaev_12:focus-visible){outline-color:#fff}}._Viewport_1oaev_12{--fade-size:40px;height:100%;-webkit-mask-image:linear-gradient(to bottom, transparent 0, black min(var(--fade-size), var(--scroll-area-overflow-y-start)), black calc(100% - min(var(--fade-size), var(--scroll-area-overflow-y-end,var(--fade-size)))), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, black min(var(--fade-size), var(--scroll-area-overflow-y-start)), black calc(100% - min(var(--fade-size), var(--scroll-area-overflow-y-end,var(--fade-size)))), transparent 100%);background:#f5f5f5;background:lab(96.52% -.0000298023 .0000119209);outline:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (prefers-color-scheme:dark){._Viewport_1oaev_12{background:#262626;background:lab(15.204% 0 -.00000596046)}}._Content_1oaev_40{padding-block:.5rem;flex-direction:column;gap:1rem;padding-left:.75rem;padding-right:1.25rem;display:flex}._Paragraph_1oaev_49{color:#0a0a0a;color:lab(2.75381% 0 0);margin:0;font-size:.875rem;line-height:1.375rem}@media (prefers-color-scheme:dark){._Paragraph_1oaev_49{color:#fff}}._Scrollbar_1oaev_60{opacity:0;pointer-events:none;background-color:#00000014;justify-content:center;width:1rem;margin:1px;transition:opacity .15s;display:flex}@media (prefers-color-scheme:dark){._Scrollbar_1oaev_60{background-color:#ffffff1f}}._Scrollbar_1oaev_60[data-scrolling]{transition-duration:0s}._Scrollbar_1oaev_60[data-hovering],._Scrollbar_1oaev_60[data-scrolling]{opacity:1;pointer-events:auto}._Thumb_1oaev_85{background-color:#0a0a0a;background-color:lab(2.75381% 0 0);width:100%}@media (prefers-color-scheme:dark){._Thumb_1oaev_85{background-color:#fff}}