:root{--density-accent:#0071f3;--density-on-accent:#fff;--density-avatar-ink:#292f38;--density-avatar-red:#fb7e7e;--density-avatar-indigo:#a5b4fc;--density-avatar-violet:#b69cff;--density-avatar-sand:#dfb99e;--density-avatar-green:#b5e46a;--density-avatar-sky:#7dd3fc;--density-avatar-yellow:#fde047;--density-avatar-pink:#f9a8d4}.density-demo{--density-width:597px;--density-height:652px;--density-type:14px;--density-label:12px;--density-heading:20px;--density-control:28px;--density-avatar:24px;--density-check:18px;--density-list:208px;--density-dropdown:300px;--density-dropdown-width:280px;--density-gap:4px;--density-chip-gap:4px;--density-chip-padding:4px;--density-remove-size:24px}.density-demo[data-density=compact]{--density-width:548px;--density-height:578px;--density-type:12px;--density-label:11px;--density-heading:16px;--density-control:24px;--density-avatar:20px;--density-check:16px;--density-list:180px;--density-dropdown:260px;--density-dropdown-width:258px;--density-gap:4px;--density-chip-gap:4px;--density-chip-padding:4px;--density-remove-size:24px}.density-demo[data-density=comfortable]{--density-width:672px;--density-height:761px;--density-type:16px;--density-label:14px;--density-heading:24px;--density-control:32px;--density-avatar:28px;--density-check:20px;--density-list:236px;--density-dropdown:360px;--density-dropdown-width:314px;--density-gap:6px;--density-chip-gap:6px;--density-chip-padding:6px;--density-remove-size:28px}.density-demo[data-density=spacious]{--density-width:731px;--density-height:866px;--density-type:18px;--density-label:14px;--density-heading:24px;--density-control:40px;--density-avatar:32px;--density-check:24px;--density-list:288px;--density-dropdown:400px;--density-dropdown-width:350px;--density-gap:8px;--density-chip-gap:8px;--density-chip-padding:8px;--density-remove-size:32px}.density-demo__sr{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.density-demo__switch{gap:var(--space-4);width:fit-content;max-width:100%;margin:0 0 var(--space-32);padding:var(--space-4);border:1px solid var(--border-hairline);background:var(--bg-placeholder);border-radius:999px;flex-wrap:wrap;display:flex}.density-demo__switch label{cursor:pointer;flex:none;position:relative}.density-demo__switch label>span{min-height:44px;padding:0 var(--space-12);font:400 var(--fs-button)/1.4 var(--font-sans);color:var(--text-secondary);border-radius:999px;place-items:center;display:grid}.density-demo__switch input:checked+span{background:var(--bg-inverse);color:var(--text-inverse)}.density-demo__switch input:focus-visible+span{outline:2px solid var(--text-primary);outline-offset:2px}.density-demo__panel{box-sizing:border-box;width:min(100%,var(--density-width));min-height:var(--density-height);padding:var(--space-24);border:1px dotted var(--border-strong);background:var(--bg-page);color:var(--text-primary);font:400 var(--density-type)/1.4 var(--font-sans);transition:width .3s var(--ease-out),min-height .3s var(--ease-out),font-size .3s var(--ease-out),background-color .24s var(--ease-out);border-radius:16px;position:relative}.density-demo__header{align-items:center;gap:var(--space-12);margin-bottom:var(--space-20,20px);display:flex}.density-demo__title{font-size:var(--density-heading);flex:1;font-weight:500}.density-demo__icon{object-fit:contain;pointer-events:none;flex:none;display:block}.density-demo__copy,.density-demo__invite{appearance:none;height:var(--density-control);padding:0 var(--space-8);box-sizing:border-box;border:1px solid var(--border-hairline);color:inherit;font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border-radius:5px;flex:none;justify-content:center;align-items:center;gap:4px;margin:0;line-height:1;display:inline-flex}.density-demo__copy>span,.density-demo__invite>span{line-height:1;display:block}.density-demo__copy:hover{background:var(--bg-placeholder)}.density-demo__invite:hover{opacity:.85}.density-demo__field-label{color:var(--text-secondary);font-size:var(--density-label);margin-bottom:var(--space-8);display:block}.density-demo__invite-row{gap:var(--space-8);align-items:start;display:flex}.density-demo__selection{border:2px solid var(--density-accent);border-radius:5px;flex:1;align-items:start;min-width:0;display:flex;position:relative}.density-demo__tags{box-sizing:border-box;align-content:start;gap:var(--density-gap);min-width:0;height:var(--density-list);padding:var(--density-gap);scrollbar-width:none;transition:height .3s var(--ease-out);flex-wrap:wrap;flex:1;display:flex;overflow:hidden auto}.density-demo__tag{align-items:center;gap:var(--density-chip-gap);height:var(--density-control);box-sizing:border-box;max-width:100%;padding:1px var(--density-chip-padding) 1px calc((var(--density-control) - var(--density-avatar)) / 2 - 1px);border:1px solid var(--border-hairline);white-space:nowrap;border-radius:999px;display:inline-flex}.density-demo__name{text-overflow:ellipsis;overflow:hidden}.density-demo__avatar{width:var(--density-avatar);height:var(--density-avatar);font-size:var(--density-label);letter-spacing:0;color:var(--density-avatar-ink);border-radius:50%;flex:none;place-items:center;font-weight:500;line-height:1;display:inline-grid;overflow:hidden}.density-demo__avatar img{object-fit:cover;pointer-events:none;width:100%;height:100%}.density-demo__avatar--red{background:var(--density-avatar-red)}.density-demo__avatar--indigo{background:var(--density-avatar-indigo)}.density-demo__avatar--violet{background:var(--density-avatar-violet)}.density-demo__avatar--sand{background:var(--density-avatar-sand)}.density-demo__avatar--green{background:var(--density-avatar-green)}.density-demo__avatar--sky{background:var(--density-avatar-sky)}.density-demo__avatar--yellow{background:var(--density-avatar-yellow)}.density-demo__avatar--pink{background:var(--density-avatar-pink)}.density-demo__permission{padding:var(--space-4) 2px 0 0;color:var(--text-secondary);font-size:var(--density-label);background:0 0;flex:none;align-items:center;gap:2px;display:flex}.density-demo__clear{appearance:none;width:24px;height:var(--density-control);color:inherit;cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;margin:0;padding:0;display:grid}.density-demo__clear:hover{background:var(--bg-placeholder)}.density-demo__select-wrap{align-items:center;display:inline-flex;position:relative}.density-demo__select-wrap>img{position:absolute;right:2px}.density-demo__permission-select{appearance:none;width:auto;height:var(--density-control);color:var(--text-primary);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:5px;margin:0;padding:0 24px 0 4px;line-height:normal;display:block}.density-demo__permission-select:hover{background:var(--bg-placeholder)}.density-demo__permission-select option{background:var(--bg-page);color:var(--text-primary)}.density-demo__permission-select:focus-visible,.density-demo__clear:focus-visible,.density-demo__copy:focus-visible,.density-demo__invite:focus-visible{outline:2px solid var(--density-accent);outline-offset:2px}.density-demo__invite{background:var(--density-accent);color:var(--density-on-accent);border-color:#0000}.density-demo__initial-long,.density-demo:is([data-density=comfortable],[data-density=spacious]) .density-demo__initial-short{display:none}.density-demo:is([data-density=comfortable],[data-density=spacious]) .density-demo__initial-long{display:block}.density-demo__remove{object-fit:contain}.density-demo[data-density=compact] .density-demo__remove{transform:scale(.8)}.density-demo__dropdown{z-index:1;top:calc(100% + var(--space-8));width:min(100%,var(--density-dropdown-width));height:var(--density-dropdown);box-sizing:border-box;padding:var(--space-8);background:var(--bg-page);color:var(--text-primary);border:1px solid var(--border-hairline);box-shadow:0 8px 20px color-mix(in srgb,var(--text-primary) 12%,transparent);scrollbar-width:none;transition:width .3s var(--ease-out),height .3s var(--ease-out);border-radius:8px;position:absolute;right:0;overflow:auto}.density-demo__option{align-items:center;gap:var(--space-8);min-height:var(--density-control);padding-block:var(--density-gap);box-sizing:border-box;white-space:nowrap;display:flex}.density-demo__check{width:var(--density-check);height:var(--density-check);border:1px solid var(--border-hairline);box-sizing:border-box;border-radius:4px;flex:none;display:inline-block}.density-demo__check.is-checked{border-color:var(--density-accent);background:var(--density-accent);color:var(--density-on-accent);background-image:url(/images/saas-platform/density/5888e.svg);background-size:100% 100%;place-items:center;display:grid}.density-demo__support{margin-top:var(--space-4);font-size:var(--density-label);color:var(--text-secondary)}.density-demo__notify{align-items:center;gap:var(--space-8);margin-top:var(--space-20,20px);font-size:var(--density-label);display:flex}.density-demo__access{width:68%;margin-top:var(--space-20,20px);display:grid}.density-demo__workspace{align-items:center;gap:var(--space-8);min-height:calc(var(--density-control) + 4px);padding-inline:var(--space-8);background:var(--bg-placeholder);font-size:var(--density-type);border-radius:5px;display:flex}.density-demo__workspace img:last-child{margin-left:auto}.density-demo>figcaption{margin-top:var(--space-8)}:root[data-theme=dark] .density-demo__icon{filter:brightness(0)invert()}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .density-demo__icon{filter:brightness(0)invert()}}@media (width<=767px){.density-demo__panel{padding:var(--space-16)}.density-demo__switch{box-sizing:border-box;gap:0;width:100%}.density-demo__switch label>span{padding-inline:var(--space-4);font-size:12px}.density-demo__header{flex-wrap:wrap}.density-demo__title{font-size:min(var(--density-heading),20px)}.density-demo__copy{margin-left:auto}.density-demo__invite-row{gap:var(--space-4)}.density-demo__selection{flex-wrap:wrap}.density-demo__permission{order:-1;margin-left:auto}.density-demo__tags{flex-basis:100%}.density-demo__dropdown{height:calc(var(--density-dropdown) - 32px);width:100%}.density-demo__option{gap:var(--space-4);font-size:min(var(--density-type),14px)}}@media (prefers-reduced-motion:reduce){.density-demo__panel,.density-demo__tags,.density-demo__dropdown{transition:none}}.density-demo,.density-demo__example,.density-demo__switch,.density-demo__switch label,.density-demo__panel{min-width:0;min-inline-size:0}.density-demo__panel{max-width:100%}.density-demo__tag{justify-self:start}.density-demo__share{width:min(var(--density-control),32px);height:min(var(--density-control),32px)}.density-demo__switch{isolation:isolate;border:0;gap:0;padding:0;position:relative;overflow:hidden}.density-demo__switch label{z-index:1}.density-demo__switch label>span{box-sizing:border-box;min-height:48px;padding:var(--space-8) var(--space-16);transition:color .24s}.density-demo__active{z-index:0;background:var(--bg-inverse);pointer-events:none;visibility:hidden;border-radius:999px;position:absolute;top:0;left:0}.density-demo__switch[data-ready] .density-demo__active{visibility:visible;transition:transform .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1)}.density-demo__switch[data-ready] input:checked+span{background:0 0}.density-demo__switch label:hover>span{color:var(--text-primary)}.density-demo__switch input:checked+span{color:var(--text-inverse)}.density-demo__panel{transition:width .42s cubic-bezier(.22,1,.36,1),min-height .42s cubic-bezier(.22,1,.36,1),font-size .42s cubic-bezier(.22,1,.36,1),background-color .24s}.density-demo__tags,.density-demo__dropdown,.density-demo__tag,.density-demo__avatar,.density-demo__title,.density-demo__share,.density-demo__copy,.density-demo__invite,.density-demo__check,.density-demo__option{transition:width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),min-height .42s cubic-bezier(.22,1,.36,1),font-size .42s cubic-bezier(.22,1,.36,1),gap .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1),background-color .16s}.density-demo__option{appearance:none;width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px}.density-demo__option:hover,.density-demo__option:focus-visible,.density-demo__tag:hover{background:var(--bg-placeholder)}.density-demo__option:focus-visible{outline:1px solid var(--density-accent);outline-offset:-1px}.density-demo__remove-button{appearance:none;width:var(--density-remove-size);height:calc(var(--density-control) - 4px);cursor:pointer;background:0 0;border:0;border-radius:999px;flex:none;place-items:center;margin:0;padding:0;display:grid}.density-demo__remove-button:hover{background:var(--bg-placeholder)}.density-demo__remove-button:focus-visible{outline:1px solid var(--density-accent)}@media (width<=767px){.density-demo__switch{width:fit-content}.density-demo__switch label>span{padding-inline:var(--space-8)}}@media (prefers-reduced-motion:reduce){.density-demo__switch[data-ready] .density-demo__active,.density-demo__switch label>span,.density-demo__panel,.density-demo__tags,.density-demo__dropdown,.density-demo__tag,.density-demo__avatar,.density-demo__title,.density-demo__share,.density-demo__copy,.density-demo__invite,.density-demo__check,.density-demo__option{transition:none}}.density-demo__option>span:last-child{text-overflow:ellipsis;min-width:0;overflow:hidden}.density-demo__dropdown{overflow-x:hidden}.density-demo__tag>.density-demo__avatar{margin-inline-end:calc(var(--space-4) / 2)}.density-demo__tags::-webkit-scrollbar,.density-demo__dropdown::-webkit-scrollbar{width:0;height:0;display:none}