@font-face{font-family:DS System;font-style:normal;font-weight:400;font-display:swap;src:url(/projects/dsi-ui/assets/system-Ch4OL1Uq.ttf)format("truetype")}@font-face{font-family:DS System;font-style:normal;font-weight:400;font-display:swap;src:url(/projects/dsi-ui/assets/system-Ch4OL1Uq.ttf)format("truetype")}:root{color:#383838;font-synthesis:none;text-rendering:geometricprecision;--blue:#0050e8;background:#ededed;font-family:DS System,Tahoma,sans-serif;font-size:14px;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}::selection{color:#fff;background:#0050e8}[hidden]{display:none!important}button{background:0 0;border:0}button:disabled{cursor:default}html{scroll-padding-top:32px}p,h1,h2{margin:0}code,pre{font-family:DS System,monospace}ds-button,ds-icon-tile{vertical-align:middle}.input-demos,.select-demos,.slider-demos,.checkbox-demos{gap:14px;width:100%;max-width:360px;margin:auto;display:grid}.input-demos ds-input,.select-demos ds-select{width:100%}.breadcrumb-demo{gap:18px;width:100%;padding:10px 4px;display:grid}.badge-demos{flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;max-width:370px;margin:auto;display:flex}.pagination-demo,.list-demo{justify-items:center;gap:17px;width:100%;display:grid}.pagination-demo>span{color:#999;font-size:10px}.list-demo{justify-items:stretch;max-width:310px;margin:auto}.breadcrumbs-preview,.badges-preview,.pagination-preview,.lists-preview{min-height:175px}.sliders-preview,.inputs-preview,.selects-preview,.checkboxes-preview{min-height:195px}.library-shell{background:#f9f9f7;border-left:1px solid #b0b0b0;border-right:1px solid #b0b0b0;max-width:1600px;min-height:100vh;margin:auto}.library-header{background:repeating-linear-gradient(#f8f8f8 0 1px,#f0f0f0 1px 2px);border-top:4px solid #fff;justify-content:space-between;align-items:center;height:76px;padding:0 33px;display:flex}.library-logo{letter-spacing:-1.5px;color:#303030;align-items:center;gap:10px;font-family:Tahoma,sans-serif;font-size:28px;font-weight:600;display:flex}.library-logo b{letter-spacing:-1px;margin-left:8px;font-size:20px;font-weight:400}.logo-i{color:#e02c54;font-size:30px}.version{letter-spacing:0;color:#888;margin:12px 0 0 6px;font-family:DS System,monospace;font-size:10px}.logo-pixels{grid-template-rows:repeat(2,7px);grid-template-columns:repeat(2,7px);gap:3px;margin-right:2px;display:grid}.logo-pixels i{background:#a8a8a8;border:1px solid #303030;box-shadow:inset 1px 1px #fff}.logo-pixels i:first-child{background:#3078f8}.header-label{color:#8a8a8a;margin-right:70px;font-size:12px}.header-link{align-items:center;gap:15px;font-size:12px;display:flex}.header-link span{color:#686868}.global-status{--ds-font-size:12px}.library-layout{grid-template-columns:202px minmax(0,1fr);min-height:calc(100vh - 106px);display:grid}.sidebar{background-color:#eeeeec;background-image:repeating-linear-gradient(0deg,#0000 0 3px,#fff5 3px 4px);border-right:1px solid #b8b8b8;padding:27px 14px;position:relative}.search-field{background:#fafafa;border:1px solid #a0a0a0;align-items:center;gap:6px;height:31px;margin:0 1px 28px;padding:0 6px;display:flex;box-shadow:inset 1px 1px silver,1px 1px #fff}.search-field span{color:gray;font-size:20px;line-height:1}.search-field input{outline-offset:2px;background:0 0;border:0;width:100%;min-width:0;font-size:11px}.search-field input::placeholder{color:#909090}.sidebar-label{color:#888;margin:0 10px 9px;font-size:10px}.category-link{text-align:left;border:1px solid #0000;align-items:center;gap:9px;width:100%;min-height:36px;margin-bottom:4px;padding:5px 9px;font-size:12px;display:flex;position:relative}.category-link>span{color:#888;text-align:center;width:14px;font-family:Tahoma,sans-serif;font-size:15px}.category-link b{color:#8a8a8a;margin-left:auto;font-size:10px;font-weight:400}.category-link:hover{background:#e0e5ec}.category-link.active{color:#1456b0;background:linear-gradient(#ecf4ff,#d8e6f8);border-color:#83a7d8;box-shadow:inset 0 0 0 1px #fff}.category-link.active:before{content:"";background:#0050e8;width:3px;position:absolute;top:7px;bottom:7px;left:-4px}.category-link.active>span,.category-link.active b{color:#3a6ab0}.sidebar-rule{border-top:1px solid silver;border-bottom:1px solid #fff;margin:25px 7px 21px}.resource-link{text-align:left;color:#686868;align-items:center;gap:9px;width:100%;padding:7px 10px;font-size:11px;display:flex}.resource-link span{color:gray;font-family:Tahoma,sans-serif;font-size:15px}.resource-link:hover{color:#0050e8}.sidebar-note{color:#909090;text-align:center;flex-direction:column;align-items:center;gap:13px;margin:62px 0 0;font-size:11px;display:flex}.sidebar-sprite{filter:grayscale();opacity:.55;pointer-events:none}.sidebar-foot{color:#8e8e8e;justify-content:center;align-items:center;gap:6px;margin-top:90px;font-size:9px;display:flex;position:sticky;top:calc(100vh - 30px)}.sidebar-foot i{background:#78a078;width:4px;height:4px}.catalog-main{width:100%;min-width:0;max-width:1220px;margin:0 auto;padding:34px 36px 0}.catalog-intro{justify-content:space-between;align-items:center;gap:20px;margin-bottom:29px;display:flex}.breadcrumb{color:#999;align-items:center;gap:10px;margin-bottom:14px;font-size:10px;display:flex}.breadcrumb span:last-child{color:#666}.catalog-intro h1{letter-spacing:-1.4px;color:#303030;margin-bottom:11px;font-size:31px;font-weight:400;line-height:1.35}.title-cursor{vertical-align:-1px;background:#3078f8;width:7px;height:24px;margin-left:13px;display:inline-block}.catalog-intro p{color:#868686;font-size:12px;line-height:1.9}.mobile-break{display:none}.intro-stamp{color:#888;align-items:center;gap:12px;margin-top:21px;font-size:10px;line-height:1.6;display:flex}.stamp-grid{color:#b0b0b0;text-shadow:1px 1px #fff;font-family:Tahoma,sans-serif;font-size:38px}.catalog-toolbar{color:#848484;border-top:1px solid #c8c8c8;justify-content:space-between;align-items:center;padding:14px 0 16px;font-size:10px;display:flex}.catalog-toolbar>span{align-items:center;gap:7px;display:flex}.catalog-toolbar i{background:gray;width:5px;height:5px}.preview-tools{align-items:center;gap:12px;display:flex}.preview-tools button{color:#666;align-items:center;gap:5px;padding:0;font-size:10px;display:flex}.preview-tools button span{font-family:Tahoma,sans-serif;font-size:14px}.toolbar-divider{background:#ccc;width:1px;height:11px}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.component-card{background:#fff;border:1px solid #b4b4b4;min-width:0;box-shadow:1px 1px #fff,2px 2px #ddd}.card-heading{background:linear-gradient(#fafafa,#eeeeec);border-bottom:1px solid silver;justify-content:space-between;align-items:center;gap:8px;height:43px;padding:0 15px;display:flex}.card-heading h2{white-space:nowrap;font-size:13px;font-weight:400}.card-heading code{color:#939393;white-space:nowrap;font-size:9px}.component-preview{background-color:#f3f3f1;background-image:linear-gradient(#b8b8b830 1px,#0000 1px),linear-gradient(90deg,#b8b8b830 1px,#0000 1px),linear-gradient(#fff9 1px,#0000 1px),linear-gradient(90deg,#fff9 1px,#0000 1px);background-size:24px 24px,24px 24px,4px 4px,4px 4px;flex-direction:column;justify-content:center;min-height:173px;padding:28px 26px;display:flex;box-shadow:inset 0 1px #fff,inset 0 -1px #fff}.no-grid .component-preview{background-image:none}.card-footer{background:#fbfbfa;border-top:1px solid #c4c4c4;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:10px 13px;display:flex}.card-footer p{color:#969696;font-size:9px;line-height:1.55}.code-toggle{white-space:nowrap;color:#5f6f7f;align-items:center;gap:6px;padding:2px 0;font-size:10px;display:flex}.code-toggle>span{color:#8194a8;font-family:Tahoma,sans-serif;font-size:12px}.code-toggle:hover{color:#0050e8}.component-code{color:#f0f0ec;background:#252b31;min-height:173px;padding:12px 14px}.code-topline{color:#94a4b4;border-bottom:1px solid #454c54;justify-content:space-between;padding-bottom:8px;font-family:Tahoma,sans-serif;font-size:9px;display:flex}.copy-button{color:#d0e4ff;padding:0;font-family:DS System,monospace;font-size:10px}.component-code pre{tab-size:2;margin:12px 0;font-size:11px;line-height:1.8;overflow:auto}.attribute-note{color:#94a4b4;border-top:1px solid #454c54;padding-top:10px;font-size:9px;line-height:1.8}.button-demos{justify-content:center;align-items:center;gap:14px;display:flex}.state-labels{text-align:center;color:#969696;grid-template-columns:repeat(3,1fr);margin-top:17px;padding:0 4px;font-size:9px;display:grid}.tile-demos{justify-content:space-around;align-items:flex-start;gap:14px;padding:0 3px;display:flex}.menu-demos{gap:11px;display:grid}.menu-preview{padding:20px 24px}.panel-demos{grid-template-columns:1fr 1fr;gap:15px;display:grid}.sample-content{text-align:center;color:#767676;padding:1px 0;font-size:12px;line-height:1.8}.panels-preview{padding:22px}.message-demos{gap:12px;display:grid}.messages-preview{min-height:233px;padding:24px 34px}.status-demos{gap:0;display:grid}.status-grid{color:gray;background-color:#f8f8f8;background-image:linear-gradient(#8883 1px,#0000 1px),linear-gradient(90deg,#8883 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:0;border-left:1px solid #b8b8b8;border-right:1px solid #b8b8b8;justify-content:space-between;align-items:center;min-height:80px;padding:14px 17px;font-size:10px;display:flex}.status-preview{min-height:233px}.clock-demos{justify-content:center;align-items:center;gap:45px;display:flex}.clock-note{color:#666;font-size:12px;line-height:1.9}.clock-note>span:last-child{color:#999;margin-top:13px;font-size:10px;display:block}.little-square{vertical-align:2px;background:#709058;width:5px;height:5px;margin-right:5px;display:inline-block}.clock-preview{min-height:231px}.calendar-preview{min-height:231px;padding:18px 25px}.calendar-demos{justify-content:center;align-items:center;gap:27px;display:flex}.calendar-output{color:#969696;max-width:90px;font-size:10px;line-height:1.9}.toggle-demos{gap:10px;width:100%;max-width:280px;margin:auto;display:grid}.progress-demos{width:100%;max-width:350px;margin:auto}.progress-actions{justify-content:space-between;align-items:center;gap:12px;margin-top:22px;display:flex}.progress-actions>span{color:#949494;font-size:10px}.tabs-demos{width:100%}.tab-output{color:#8a8a8a;background:#fff9;border:1px solid #b0b0b0;border-top:0;justify-content:center;align-items:center;gap:12px;min-height:76px;font-size:12px;display:flex}.tab-output-icon{color:#9cabbc;font-family:Tahoma,sans-serif;font-size:25px}.dialog-demos{flex-direction:column;align-items:center;gap:10px;font-size:12px;display:flex}.dialog-symbol{color:#507090;background:#dae5ef;border:1px solid #7890a8;justify-content:center;align-items:center;width:26px;height:26px;margin-bottom:2px;font-family:Tahoma,sans-serif;font-size:18px;display:flex;box-shadow:inset 0 0 0 2px #fff}.dialog-result{color:#999;margin-top:3px;font-size:9px}.dialogs-preview,.tabs-preview{min-height:208px}.no-results{text-align:center;border:1px dashed #aaa;padding:50px 20px;line-height:2}.no-results>span{color:#aaa;font-family:Tahoma,sans-serif;font-size:50px}.no-results h2{font-size:19px;font-weight:400}.no-results p{color:#888;margin:10px 0 22px;font-size:12px}.icon-section,.usage-section{border-top:1px solid #bbb;margin-top:49px;padding-top:28px}.section-heading{justify-content:space-between;align-items:center;gap:15px;margin-bottom:21px;display:flex}.section-overline{color:#999;margin-bottom:7px;font-size:10px;display:block}.section-heading h2{letter-spacing:-.6px;font-size:20px;font-weight:400}.plain-link{color:#657d94;padding:0;font-size:10px}.plain-link span{margin-left:6px}.icon-collection{background:#ebebe9;border:1px solid #aaa;flex-wrap:wrap;gap:22px 18px;padding:27px 22px 22px;display:flex;box-shadow:inset 0 0 0 2px #fff}.icon-collection ds-icon-tile{justify-content:center;width:66px;display:flex}.icon-section>p{color:#999;margin-top:12px;font-size:10px}.usage-section{margin-top:34px}.usage-section>.section-heading{margin-bottom:12px}.usage-section>p{color:#888;max-width:680px;font-size:12px;line-height:1.9}.usage-badge{color:#75889b;background:#f0f4f7;border:1px solid #c3cbd0;padding:4px 7px;font-size:9px}.usage-example{background:#f0f0ef;border:1px solid #aaa;grid-template-columns:.8fr 1.2fr;margin-top:22px;display:grid}.usage-example>div{min-width:0;padding:16px 20px}.usage-example>div+div{background:#f7f7f5;border-left:1px solid #bbb}.file-label{color:#8d969f;margin-bottom:13px;font-size:10px;display:block}.usage-example pre{color:#5b6470;margin:0;font-size:11px;line-height:1.9;overflow:auto}.usage-section .usage-footer{color:#999;margin-top:12px;font-size:10px}.catalog-footer{color:#999;border-top:1px solid #ccc;justify-content:space-between;align-items:center;gap:12px;margin-top:38px;padding:29px 0 25px;font-size:9px;display:flex}.catalog-footer>span>span{color:#bbb;margin:0 8px}.catalog-footer>a{color:#788894}.gallery-toast{z-index:20;color:#fff;opacity:0;pointer-events:none;text-align:center;background:repeating-linear-gradient(#303030 0 1px,#202020 1px 2px);border:2px solid #3088f0;max-width:calc(100vw - 32px);padding:11px 22px;font-size:12px;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 0 0 2px #1b1b1b}.gallery-toast.visible{opacity:1}@media (width>=1400px){.catalog-main{padding-left:45px;padding-right:45px}.component-grid{gap:25px}.component-preview{min-height:186px}.messages-preview,.status-preview{min-height:240px}.clock-preview,.calendar-preview{min-height:242px}.tabs-preview,.dialogs-preview{min-height:218px}}@media (width<=1120px){.library-layout{grid-template-columns:177px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}.catalog-main{padding:29px 24px 0}.intro-stamp{display:none}.header-label{margin-right:0}.button-demos{flex-wrap:wrap;gap:8px}.state-labels{display:none}.tile-demos{gap:8px}.component-preview{padding:24px 17px}.card-heading{padding:0 12px}.card-heading code{font-size:8px}.card-heading h2{font-size:12px}.card-footer p{font-size:9px}.messages-preview,.status-preview{min-height:245px}.clock-demos{gap:18px}.clock-note{display:none}.calendar-demos{gap:12px}.calendar-output{max-width:57px;font-size:9px}.calendar-preview{min-height:230px}.panel-demos{gap:10px}.sample-content{font-size:10px}.card-footer{min-height:50px}.component-grid{gap:18px}.icon-collection{gap:22px 8px}.progress-actions>span{font-size:8px}.usage-example{grid-template-columns:1fr}.usage-example>div+div{border-top:1px solid #bbb;border-left:0}}@media (width<=900px){.component-grid{grid-template-columns:1fr}.library-layout{grid-template-columns:180px minmax(0,1fr)}.catalog-main{padding:25px 28px 0}.catalog-intro h1{font-size:28px}.catalog-intro p{font-size:11px}.mobile-break{display:block}.header-label{font-size:10px}.library-header{height:68px;padding:0 23px}.preview-tools>span:last-child,.toolbar-divider{display:none}.card-heading h2{font-size:14px}.card-heading code{font-size:10px}.component-preview{min-height:160px;padding:27px}.button-demos{flex-wrap:nowrap;gap:15px}.state-labels{display:grid}.tile-demos{justify-content:center;gap:35px}.card-footer p{font-size:10px}.card-footer{min-height:42px}.messages-preview{padding:25px 40px}.clock-demos{gap:45px}.clock-note{display:block}.calendar-output{max-width:90px;font-size:11px}.calendar-demos{gap:35px}.panel-demos{gap:20px}.sample-content{font-size:12px}.section-heading{flex-direction:column;align-items:flex-start;gap:15px}.section-heading h2{font-size:19px}.usage-example>div{padding:15px}.icon-collection{gap:22px 14px}.sidebar-foot{position:static}.catalog-footer{font-size:9px}.header-link{font-size:10px}}@media (width<=640px){.library-header{height:62px;padding:0 18px}.header-label{display:none}.library-logo{font-size:25px}.library-logo b{font-size:18px}.version{font-size:9px}.header-link{gap:7px;font-size:10px}.library-layout{display:block}.sidebar{background:#eee;border-bottom:1px solid #aaa;border-right:0;padding:12px 14px}.search-field{max-width:none;height:34px;margin:0 0 12px}.search-field input{font-size:12px}.sidebar nav{scrollbar-width:none;gap:6px;margin:0 -2px;padding:3px 3px 5px;display:flex;overflow-x:auto}.category-link{white-space:nowrap;flex-shrink:0;width:auto;min-height:32px;margin:0;padding:4px 10px;font-size:11px}.category-link>span{display:none}.category-link b{font-size:9px}.category-link.active:before,.sidebar-label,.sidebar-rule,.resource-link,.sidebar-note,.sidebar-foot{display:none}.catalog-main{padding:23px 16px 0}.breadcrumb{margin-bottom:10px;font-size:9px}.catalog-intro{margin-bottom:22px}.catalog-intro h1{letter-spacing:-1.3px;margin-bottom:10px;font-size:27px}.title-cursor{width:6px;height:21px;margin-left:8px}.catalog-intro p{font-size:11px;line-height:1.9}.catalog-toolbar{padding:12px 1px;font-size:10px}.component-grid{gap:17px}.component-preview{min-height:155px;padding:25px 19px}.card-heading{height:40px;padding:0 12px}.card-heading h2{font-size:13px}.card-heading code{font-size:9px}.tile-demos{gap:18px}.button-demos{flex-wrap:wrap;gap:8px}.state-labels{display:none}.card-footer{padding:10px 11px}.card-footer p{max-width:calc(100% - 65px);font-size:9px}.code-toggle{font-size:9px}.menu-preview{padding:21px 17px}.panel-demos{gap:12px}.panels-preview{padding:23px 16px}.sample-content{font-size:10px}.messages-preview{padding:22px 27px}.status-preview{min-height:195px}.clock-demos{gap:24px}.clock-note>span:last-child{font-size:9px}.calendar-demos{gap:22px}.calendar-output{max-width:75px;font-size:10px}.calendar-preview,.clock-preview{min-height:220px}.tabs-preview,.dialogs-preview{min-height:198px}.section-heading h2{font-size:18px}.section-heading{gap:14px}.icon-section{margin-top:36px;padding-top:23px}.icon-collection{gap:23px 6px;padding:23px 8px}.icon-collection ds-icon-tile{width:calc(25% - 5px);min-width:58px}.usage-example pre{font-size:10px}.usage-badge{font-size:9px}.usage-section>p{font-size:11px}.catalog-footer{flex-direction:column;align-items:flex-start;gap:13px;padding:22px 0}.gallery-toast{width:max-content;font-size:11px}.progress-actions>span{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}