.blog-demos .swipe-container{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;position:relative;width:100%;height:100%;box-sizing:border-box;background-color:var(--color-white)}.blog-demos .swipe-container::-webkit-scrollbar{display:none}.blog-demos .swipe-container{-ms-overflow-style:none;scrollbar-width:none}.blog-demos .depth-page{width:100%;height:100%;flex-shrink:0;scroll-snap-align:start;display:flex;justify-content:center;background-color:transparent;position:relative;overflow-y:auto;overflow-x:hidden}.blog-demos .depth-page-sidebar{position:fixed;left:0;top:5.5rem;bottom:2.5rem;z-index:40;border-radius:0 24px 24px 0;width:calc((100% - 35rem) / 2);background-color:var(--color-off-white);display:flex;align-items:center;justify-content:flex-start;padding:.5rem;cursor:pointer;transition:transform .2s ease-out,opacity .2s ease-out,background-color .2s ease-out;transform:translateX(0);opacity:1;overflow:hidden}@media (max-width:768px){.blog-demos .depth-page-sidebar{display:none}}.blog-demos .demo-container .depth-page-sidebar{position:absolute;top:4.5rem;bottom:1.5rem}.blog-demos .demo-container .depth-page-sidebar-content h2{font-size:2rem;font-weight:500;line-height:1.05;color:#6f6f6f3c;margin:0;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.blog-demos .depth-page-sidebar[data-hidden=true]{transform:translateX(-100%);opacity:0;pointer-events:none}.blog-demos .depth-page-sidebar:hover{background-color:var(--color-hover-off-white)}.blog-demos .depth-page-sidebar-content{text-align:left;max-width:100%;overflow:hidden}.blog-demos .depth-page-sidebar-content h2{font-size:4rem;font-weight:500;line-height:1.05;color:#6f6f6f3c;margin:0;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.blog-demos .depth-page-inner{width:100%;max-width:40rem;padding:1rem 1rem 0;position:relative;z-index:1;min-height:100%;box-sizing:border-box}@media (max-width:768px){.blog-demos .depth-page-inner{padding:1rem .5rem 0;max-width:100%}}.blog-demos .depth-page-inner:after{content:"";display:block;height:4rem}.blog-demos .breadcrumb-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto;width:calc(100% / var(--breadcrumb-total, 1) - .25rem);min-width:0;padding:.5rem 1rem;transition:width .2s ease-out,background-color .2s ease-out,filter .15s ease-out;background-color:hsl(75,40%,max(calc(85% - (var(--breadcrumb-index, 0) * 5%)),50%))}@media (max-width:768px){.blog-demos .breadcrumb-button{font-size:.8rem;padding:.5rem .75rem}}.blog-demos .breadcrumb-flex-container{display:flex;gap:.5rem;padding:.5rem .5rem 0;height:2.9rem;align-items:center;justify-content:center;width:100%;box-sizing:border-box}.blog-demos .breadcrumb-bar-container{box-sizing:border-box;position:absolute;top:0;left:0;right:0;z-index:10}.blog-demos .breadcrumb-button:hover{filter:brightness(.96)}.blog-demos .swipe-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:9;background-color:var(--color-white);border:1px solid var(--border-toolbar);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s ease-out,background-color .15s ease-out;opacity:.6}.blog-demos .swipe-arrow:hover{opacity:1;background-color:var(--color-off-white)}.blog-demos .swipe-arrow:disabled{opacity:.2;cursor:not-allowed;pointer-events:none}.blog-demos .swipe-arrow.left{left:1.5rem}.blog-demos .swipe-arrow.right{right:1.5rem}.blog-demos .breadcrumb-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}.blog-demos .breadcrumb-item{color:var(--text-300);font-size:.875rem;cursor:pointer;transition:color .15s ease-out}.blog-demos .breadcrumb-item:hover{color:var(--text-100)}.blog-demos .breadcrumb-item.active{color:var(--text-100);font-weight:500}.blog-demos .breadcrumb-separator{color:var(--text-400);font-size:.875rem;user-select:none}.blog-demos .refresh-button{padding:.5rem 1rem;background-color:var(--color-white);border:1px solid var(--border-toolbar);border-radius:8px;color:var(--text-200);font-size:.875rem;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}.blog-demos .refresh-button:hover{background-color:var(--color-off-white);color:var(--text-100)}.blog-demos .depth-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.blog-demos .swipe-section-wrapper{position:relative;display:grid;grid-template-columns:80px 1fr 80px;align-items:stretch;margin-bottom:1rem;border-radius:12px;transition:background-color .2s ease-out}@media (max-width:768px){.blog-demos .swipe-section-wrapper{grid-template-columns:0 1fr 64px;margin-right:0}}.blog-demos .swipe-section-wrapper:hover .swipe-section{background-color:var(--color-light-green)}.blog-demos .swipe-section-wrapper:hover .message-content,.blog-demos .swipe-section-wrapper:hover .swipe-section-title{color:var(--color-olive-dark)}.blog-demos .swipe-section-wrapper:hover .section-expand-arrow-external{background-color:#CFDEAB}.blog-demos .swipe-section-wrapper:hover .section-expand-arrow-external svg{color:var(--color-olive-dark);transform:translateX(24px)}.blog-demos .swipe-section-wrapper:has(.section-expand-arrow-external:disabled):hover .swipe-section,.blog-demos .swipe-section-wrapper:hover .section-expand-arrow-external:disabled~.swipe-section{background-color:var(--color-white)}.blog-demos .swipe-section-wrapper:has(.section-expand-arrow-external:disabled):hover .swipe-section-title{color:var(--color-black)}.blog-demos .swipe-section-wrapper:has(.section-expand-arrow-external:disabled):hover .message-content{color:var(--color-black)}.blog-demos .swipe-section-wrapper:has(.section-expand-arrow-external:disabled):hover .section-expand-arrow-external{background-color:var(--color-white)}.blog-demos .swipe-section-wrapper:has(.section-expand-arrow-external:disabled):hover .section-expand-arrow-external svg{color:#e0e0e0;transform:none}.blog-demos .swipe-section{grid-column:2;border-radius:12px 0 0 12px;padding:.75rem 1rem;transition:background-color .2s ease-out}.blog-demos .swipe-section,.blog-demos .swipe-section.streaming{background-color:var(--color-white)}.blog-demos .swipe-section-title-container{margin-bottom:.5rem}.blog-demos .swipe-section-title{font-size:1.25rem;font-weight:500;margin:0}.blog-demos .swipe-section .message-content,.blog-demos .swipe-section-title{color:var(--color-black);transition:color .2s ease-out}.blog-demos .section-expand-arrow-external{grid-column:3;flex-shrink:0;background-color:var(--color-white);border:none;cursor:pointer;border-radius:0 12px 12px 0;transition:all .2s ease-out;display:flex;align-items:center;justify-content:flex-start;width:64px;touch-action:manipulation}.blog-demos .section-expand-arrow-external svg{width:32px;height:32px;stroke-width:2;color:#e0e0e0;transition:color .2s ease-out,transform .2s ease-out}.blog-demos .section-expand-arrow-external:disabled{cursor:not-allowed;opacity:.5}