.demo-root{--demo-ink:#243045;--demo-muted:#697386;--demo-line:#dfe5ee;--demo-soft:#f2f5fa;--demo-brand:var(--brand,#2558d9);position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:136px;width:100%;min-width:0;padding:6px;color:var(--demo-ink);font-family:inherit;font-size:var(--font-size,14px);line-height:1.5;box-sizing:border-box;text-align:left}
.demo-root *{box-sizing:border-box}.demo-root [hidden]{display:none!important}.demo-root button,.demo-root input,.demo-root select,.demo-root textarea{font:inherit}.demo-root button{cursor:pointer}.demo-root b{font-weight:650}.demo-root small{display:block;font-size:10px;line-height:1.5;color:var(--demo-muted)}.demo-root p{font-size:11px;margin:6px 0}.demo-root strong{font-size:20px;line-height:1.2}.demo-root :focus-visible{outline:3px solid var(--demo-brand);outline-offset:3px}.demo-root input[type=checkbox],.demo-root input[type=radio]{accent-color:var(--demo-brand);width:16px;height:16px;flex-shrink:0;vertical-align:middle}.demo-root input:disabled{color:#747d8c;background:#f0f2f5}.demo-root button:disabled{opacity:.45;cursor:not-allowed}
.demo-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;align-self:flex-start;padding:8px 13px;min-height:34px;border:1px solid transparent;border-radius:var(--radius,8px);background:var(--demo-brand);color:#fff;font-weight:600;font-size:11px!important;line-height:1.3;white-space:nowrap;transition:background .16s ease,transform .12s ease,box-shadow .16s ease}
.demo-btn:hover:not(:disabled){filter:brightness(.94);box-shadow:0 2px 6px #1b355c16}.demo-btn:active:not(:disabled){transform:translateY(1px) scale(.97)}.demo-outline{background:#fff;border-color:var(--demo-brand);color:var(--demo-brand)}.demo-ghost{background:color-mix(in srgb,var(--demo-brand) 8%,white);color:var(--demo-brand)}.demo-text{background:none;color:var(--demo-brand);border:0;padding:5px 3px;min-height:30px;text-decoration:underline;text-underline-offset:3px}.demo-icon{width:36px;height:36px;padding:4px;font-size:19px!important}.demo-pill{border-radius:999px}.demo-square{border-radius:0;width:44px;height:38px;font-size:20px!important}.demo-full{width:100%}.demo-active{color:#fff;background:var(--demo-brand)}.demo-danger{background:#c7383c}.demo-hover-example:hover{background:color-mix(in srgb,var(--demo-brand) 13%,white);box-shadow:0 0 0 3px color-mix(in srgb,var(--demo-brand) 12%,transparent)}.demo-press-example:active,.demo-pressed{transform:scale(.93);background:color-mix(in srgb,var(--demo-brand) 75%,black)}.demo-tiny{min-width:25px;min-height:26px;padding:3px;font-size:13px!important}.demo-status{color:var(--demo-brand);font-size:10px;line-height:1.5;display:block;min-height:0}.demo-status:empty{display:none}.demo-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.demo-grid{display:grid;gap:9px;width:100%;align-items:start}.demo-cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-tile{border:1px solid var(--demo-line);background:#fff;padding:10px;border-radius:var(--radius,8px);display:flex;flex-direction:column;gap:4px;min-width:0;font-size:11px}.demo-tile strong{font-size:16px}.demo-line{height:7px;background:#dfe4ee;border-radius:3px;display:block;max-width:100%;margin:7px 0}.demo-layout-one{max-width:180px;width:100%;margin:auto}.demo-picture{position:relative;min-height:74px;background:linear-gradient(150deg,#cfe6ed 0%,#e8f3ec 70%);border-radius:calc(var(--radius,8px)*.7);overflow:hidden;isolation:isolate}.demo-picture:before,.demo-picture:after{content:"";position:absolute;width:70%;height:85%;bottom:-35%;background:#92bcb3;transform:rotate(-24deg);border-radius:15%}.demo-picture:before{left:-10%}.demo-picture:after{background:#588f87;right:-16%;height:95%;transform:rotate(34deg)}.demo-picture span{position:absolute;top:13px;right:22%;height:17px;width:17px;border-radius:50%;background:#fff3c4}.demo-split{grid-template-columns:.8fr 1.2fr;align-items:center}.demo-split .demo-picture{min-height:105px}.demo-hero{padding:12px 18px;min-height:124px;background:#e8edf8;border-radius:var(--radius,8px);display:flex;align-items:flex-start;flex-direction:column;gap:8px}.demo-hero small{font-size:8px;letter-spacing:1.3px}.demo-hero strong{font-size:20px}.demo-hero .demo-btn{padding:6px 15px;min-height:28px}.demo-list{display:flex;flex-direction:column;gap:6px}.demo-list>div{display:flex;align-items:center;gap:8px;font-size:11px;border-bottom:1px solid var(--demo-line);padding-bottom:6px}.demo-list>div>span:last-child{margin-left:auto}.demo-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:#e7edfa;color:var(--demo-brand);font-size:11px}.demo-masonry{columns:3;column-gap:8px}.demo-masonry>div{break-inside:avoid;margin-bottom:8px;background:color-mix(in srgb,var(--demo-brand) 6%,white);justify-content:center;align-items:center}.demo-bento{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:50px 50px;gap:8px}.demo-bento>div:first-child{grid-row:span 2;background:color-mix(in srgb,var(--demo-brand) 9%,white);justify-content:center}.demo-bento>div{justify-content:center}.demo-scroll{display:flex;gap:10px;overflow-x:auto;max-width:100%;padding-bottom:9px;scroll-snap-type:x mandatory}.demo-scroll>div{min-width:120px;min-height:88px;scroll-snap-align:start;justify-content:center}.demo-sidebar{grid-template-columns:78px minmax(0,1fr);min-height:110px}.demo-stack{display:flex;flex-direction:column;gap:3px;padding:4px;background:var(--demo-soft);border-radius:var(--radius,8px)}.demo-stack .demo-btn{font-size:10px!important;width:100%;padding:6px 4px;min-height:28px}.demo-main{padding:10px 4px;font-size:12px}.demo-bars{height:65px;display:flex;align-items:flex-end;gap:8px;padding:0 12px 0;border-bottom:1px solid var(--demo-line)}.demo-bars i{flex:1;background:var(--demo-brand);opacity:.8;border-radius:4px 4px 0 0}.demo-timeline{margin:0 0 0 12px;padding:0 0 0 19px;border-left:2px solid #dce4f1;list-style:none}.demo-timeline li{position:relative;font-size:11px;padding:8px 0}.demo-timeline li:before{position:absolute;left:-24px;top:13px;width:8px;height:8px;content:"";border:2px solid #fff;background:var(--demo-brand);border-radius:50%;box-shadow:0 0 0 1px var(--demo-brand)}.demo-step-row{display:flex;align-items:center;justify-content:center;gap:8px}.demo-step{width:27px;height:27px;border-radius:50%;background:#e8edf5;color:#6e7c92;text-align:center;line-height:27px;font-size:12px}.demo-step.done{background:var(--demo-brand);color:white}.demo-step-row i{height:2px;width:33px;background:#d6deeb}.demo-accordion{border:1px solid var(--demo-line);padding:9px 10px;border-radius:var(--radius,8px);font-size:11px;background:#fff}.demo-accordion summary{cursor:pointer;font-weight:600}.demo-accordion[open]{background:#f5f7fc}.demo-tabs{display:flex;gap:4px;border-bottom:1px solid var(--demo-line);padding-bottom:5px}.demo-tabs .demo-btn{flex:1;padding:6px 5px}.demo-tab-content{padding:12px 7px;font-size:11px;background:#f5f7fc;border-radius:var(--radius,8px)}
.demo-overlay{position:absolute;inset:0;background:#16213970;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius,8px);padding:12px;min-height:140px}.demo-overlay section{background:#fff;padding:13px;border-radius:var(--radius,8px);box-shadow:0 10px 25px #18284330;font-size:12px;width:100%;max-width:280px}.demo-overlay p{font-size:10px}.demo-overlay .demo-btn{padding:6px 10px;min-height:30px}.demo-sheet{align-items:flex-end;padding:16px 0 0}.demo-sheet section{border-radius:14px 14px 0 0;max-width:none}.demo-sheet section:before{content:"";display:block;margin:-6px auto 8px;height:3px;width:30px;background:#d6dce6;border-radius:3px}.demo-menu{border:1px solid var(--demo-line);background:white;box-shadow:0 5px 18px #20314c13;padding:5px;display:flex;flex-direction:column;gap:2px;max-width:210px;width:100%;border-radius:var(--radius,8px);z-index:4}.demo-menu .demo-btn{width:100%;text-align:left;justify-content:flex-start;min-height:27px;font-size:10px!important;background:transparent;color:var(--demo-ink)}.demo-menu .demo-btn:hover{background:#edf2fb}.demo-mega{max-width:none;display:grid;grid-template-columns:1fr 1fr}.demo-topnav{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--demo-line);gap:8px}.demo-topnav>b{font-size:17px}.demo-topnav .demo-row{flex-wrap:nowrap;gap:3px}.demo-topnav .demo-btn{font-size:9px!important;padding:5px 7px;min-height:26px}.demo-nav-content{min-height:44px;font-size:11px;padding:10px 3px;color:var(--demo-muted)}.demo-bottomnav{border-top:1px solid var(--demo-line);padding-top:7px}.demo-bottomnav .demo-row{justify-content:space-between}.demo-bottomnav .demo-btn{padding:8px 5px}.demo-drawer{position:relative;background:#f3f6fc;border-right:1px solid var(--demo-line);width:130px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:6px 0 15px #24335510}.demo-drawer .demo-btn{width:100%;justify-content:flex-start;font-size:10px!important;min-height:27px}.demo-breadcrumb{display:flex;align-items:center;gap:7px;font-size:11px}.demo-toc{display:flex;gap:10px}.demo-toc .demo-btn{font-size:10px!important}.demo-local-scroll{position:relative;overflow-y:auto;height:86px;border-left:2px solid var(--demo-brand);padding-left:10px;scroll-behavior:smooth}.demo-local-scroll section{min-height:82px;padding:5px 0;font-size:12px}.demo-more-list{max-height:122px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.demo-filter-list{display:flex;flex-wrap:wrap;gap:7px;font-size:11px}.demo-filter-list>span{padding:4px 9px;background:var(--demo-soft);border-radius:5px}.demo-command{background:#fff;border:1px solid var(--demo-line);border-radius:var(--radius,8px);padding:8px}.demo-command .demo-filter-list{display:flex;flex-direction:column;margin-top:6px;gap:2px}.demo-command .demo-btn{width:100%;min-height:26px;justify-content:flex-start}
.demo-product{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;align-items:center}.demo-product>div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:12px}.demo-product-art{height:115px;background:#efe9df}.demo-product-art:before{width:57%;height:60%;left:22%;top:30%;transform:none;background:#aa9984;border-radius:0}.demo-product-art:after{width:29%;height:34%;left:35%;top:11%;transform:none;background:none;border:5px solid #aa9984;border-radius:50%}.demo-product-art span{display:none}.demo-editorial{display:flex;flex-direction:column;gap:6px;font-size:12px}.demo-editorial .demo-picture{min-height:68px}.demo-person{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.demo-person>div{display:flex;flex-direction:column;gap:5px;font-size:12px}.demo-person>.demo-btn{margin-left:auto;align-self:center;font-size:9px!important;padding:6px 10px}.demo-avatar-large{width:42px;height:42px;font-size:17px;background:#f0d9c6;color:#765849}.demo-review{padding:10px 13px;background:#fffaf0;border:1px solid #f0e6cf;border-radius:var(--radius,8px)}.demo-review>span{color:#b67c18;letter-spacing:3px}.demo-review p{line-height:1.8}.demo-event{display:flex;gap:13px;align-items:center}.demo-event>div:first-child{display:flex;flex-direction:column;align-items:center;border:1px solid var(--demo-line);border-top:4px solid var(--demo-brand);border-radius:var(--radius,8px);width:55px;padding:9px;flex-shrink:0}.demo-event strong{font-size:28px}.demo-event>div:last-child{display:flex;flex-direction:column;gap:7px;font-size:11px}.demo-price{border:1px solid var(--demo-line);border-top:3px solid var(--demo-brand);padding:12px;display:flex;gap:9px;flex-direction:column;border-radius:var(--radius,8px);font-size:11px}.demo-price strong{display:flex;align-items:baseline;gap:5px}.demo-price .demo-btn{width:100%}.demo-kpi{position:relative;display:flex;flex-direction:column;gap:7px;padding:8px 4px}.demo-kpi strong{font-size:28px}.demo-kpi>span{color:#178566;font-size:10px}.demo-spark{position:absolute;right:4px;bottom:3px;letter-spacing:2px;color:var(--demo-brand);font-size:23px;opacity:.65}.demo-task{border:1px solid var(--demo-line);padding:14px;border-radius:var(--radius,8px);font-size:12px}.demo-task label{display:flex;align-items:center;gap:8px;margin-bottom:12px}.demo-task label:has(input:checked){text-decoration:line-through;color:#7c8797}.demo-tag{display:inline-block;background:#eef1ff;padding:3px 7px;border-radius:4px;color:var(--demo-brand)!important}.demo-project{display:flex;flex-direction:column;gap:9px;border:1px solid var(--demo-line);padding:13px;border-radius:var(--radius,8px);font-size:12px}.demo-project .demo-row small{margin-left:auto}.demo-file{display:flex;gap:10px;align-items:center;font-size:11px}.demo-file>div{min-width:0}.demo-file b{overflow-wrap:anywhere}.demo-file .demo-btn{margin-left:auto;align-self:center;flex-shrink:0}.demo-file-icon{background:#fcdfdc;color:#b44c45;font-size:11px;font-weight:700;padding:18px 8px;border-radius:5px}.demo-video{position:relative}.demo-video .demo-picture{height:108px}.demo-video>.demo-btn{position:absolute;top:31px;left:calc(50% - 18px);background:#ffffffdd;color:var(--demo-ink);border-radius:50%}.demo-video small{margin-top:6px}.demo-music{display:flex;gap:10px;align-items:center}.demo-album{height:61px;width:61px;display:grid;place-items:center;background:linear-gradient(145deg,#598797,#eec0aa);color:#fff;font-size:27px;border-radius:5px;flex-shrink:0}.demo-music>div:nth-child(2){min-width:0;flex:1;font-size:11px}.demo-music .demo-btn{align-self:center;font-size:14px!important}.demo-map{height:82px;position:relative;background:#e8f1e6;overflow:hidden;border-radius:var(--radius,8px);display:grid;place-items:center}.demo-map:before{content:"";background:#b4d9ec;position:absolute;left:10%;width:18px;height:150%;transform:rotate(-28deg)}.demo-map-roads{position:absolute;inset:-30%;background:repeating-linear-gradient(12deg,transparent 0 30px,#fff 31px 39px,transparent 40px 70px),repeating-linear-gradient(98deg,transparent 0 55px,#fff 56px 64px,transparent 65px 90px)}.demo-map>span{position:relative;z-index:1;background:var(--demo-brand);color:white;padding:2px 7px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 5px #314a6530}.demo-stay{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}.demo-stay>div:last-child{display:flex;flex-direction:column;gap:7px;font-size:11px}.demo-stay .demo-picture{height:97px;background:#eedccd}.demo-stay strong{font-size:16px}.demo-notice{display:flex;gap:9px;align-items:center;flex-wrap:wrap;border:1px solid var(--demo-line);padding:12px;border-radius:var(--radius,8px);font-size:11px}.demo-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--demo-brand);flex-shrink:0}.demo-notice .demo-btn{margin-left:auto;font-size:10px!important;min-height:24px}.demo-choice{display:flex;gap:7px;padding:20px 10px;align-items:center;border:1px solid var(--demo-line);border-radius:var(--radius,8px);font-size:11px;cursor:pointer}.demo-choice:has(:checked){border-color:var(--demo-brand);background:color-mix(in srgb,var(--demo-brand) 5%,white)}.demo-result{display:flex;flex-direction:column;gap:5px;font-size:12px}.demo-result mark{background:#fff0b4;color:inherit}.demo-image-card{position:relative}.demo-image-card .demo-picture{height:120px}.demo-image-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#17393877);border-radius:var(--radius,8px)}.demo-image-card>b{position:absolute;bottom:12px;left:12px;color:#fff;z-index:1;font-size:16px}.demo-empty{border:1px dashed #ccd6e6;border-radius:var(--radius,8px);padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;background:#fafbfd}.demo-empty>span{font-size:22px;color:#8e9aae}.demo-empty .demo-btn{align-self:center}.demo-floating-stage{position:relative;height:110px;border:1px solid var(--demo-line);background:#f5f7fb;border-radius:var(--radius,8px);padding:12px;font-size:11px;color:var(--demo-muted)}.demo-floating{position:absolute;bottom:10px;right:12px;border-radius:50%;width:43px;height:43px;padding:0;font-size:24px!important;box-shadow:0 4px 10px #1a428933}.demo-split-button{display:flex;align-items:stretch}.demo-split-button>.demo-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.demo-split-button>.demo-btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:#ffffff55;padding-inline:9px}
.demo-field{display:flex;flex-direction:column;gap:5px;font-size:11px;min-width:0;width:100%}.demo-field>span{font-weight:600}.demo-field input,.demo-field select,.demo-field textarea{display:block;width:100%;min-width:0;min-height:35px;border:1px solid #b9c3d2;border-radius:calc(var(--radius,8px)*.7);padding:7px 9px;background:#fff;font-size:11px;color:var(--demo-ink)}.demo-field input::placeholder,.demo-field textarea::placeholder{color:#8991a0;opacity:1}.demo-field textarea{min-height:58px;resize:vertical}.demo-field :is(input,select,textarea):focus{outline:2px solid color-mix(in srgb,var(--demo-brand) 25%,transparent);outline-offset:1px;border-color:var(--demo-brand)}.demo-field input[aria-invalid=true]{border-color:#c64049;background:#fff8f8}.demo-field input[aria-invalid=false]{border-color:#20866b}.demo-error{color:#b43743!important;font-size:10px}.demo-valid{color:#187b62!important}.demo-fieldset{border:1px solid var(--demo-line);padding:10px 12px;margin:0;display:flex;flex-wrap:wrap;gap:12px;font-size:11px;border-radius:var(--radius,8px);min-width:0}.demo-fieldset legend{font-size:10px;color:var(--demo-muted);padding:0 4px}.demo-fieldset label{display:flex;gap:5px;align-items:center}.demo-switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:11px;position:relative}.demo-switch>input{position:absolute;left:0;width:36px!important;height:23px!important;opacity:0;margin:0}.demo-switch>span{width:36px;height:22px;display:block;background:#b9c1cd;border-radius:30px;position:relative;flex-shrink:0;pointer-events:none;transition:background .2s}.demo-switch>span:after{content:"";width:16px;height:16px;background:#fff;position:absolute;top:3px;left:3px;border-radius:50%;box-shadow:0 1px 3px #12223422;transition:transform .2s}.demo-switch>input:checked+span{background:var(--demo-brand)}.demo-switch>input:checked+span:after{transform:translateX(14px)}.demo-switch>input:focus-visible+span{outline:3px solid var(--demo-brand);outline-offset:3px}.demo-help{font-size:10px;color:var(--demo-muted)}.demo-help summary{cursor:pointer;color:var(--demo-brand)}.demo-help p{padding:8px;background:var(--demo-soft);border-radius:5px;font-size:10px}.demo-upload{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px dashed #aebcd1;border-radius:var(--radius,8px);font-size:11px}.demo-upload>span{font-weight:600;color:var(--demo-brand)}.demo-upload input{font-size:10px;max-width:100%}.demo-filename{font-size:10px;overflow-wrap:anywhere}.demo-error-summary{padding:10px;background:#fff0f1;border-left:3px solid #cb4b56;border-radius:4px;font-size:11px;color:#aa303c;display:flex;flex-direction:column;gap:3px}.demo-error-summary small{color:#aa303c}.demo-check-example{display:flex;align-items:center;gap:9px;font-size:12px}.demo-check-example input{height:23px!important;width:23px!important}
.demo-progress{height:7px;border-radius:20px;background:#e6ebf4;overflow:hidden;min-width:55px}.demo-progress>span{height:100%;display:block;border-radius:20px;background:var(--demo-brand);transition:width .4s ease}.demo-spinner{display:inline-block;flex-shrink:0;width:17px;height:17px;border:2px solid color-mix(in srgb,var(--demo-brand) 23%,transparent);border-top-color:var(--demo-brand);border-radius:50%;animation:demo-spin 1s linear infinite}.demo-btn .demo-spinner{border-color:#ffffff66;border-top-color:#fff;width:13px;height:13px}.demo-center{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;font-size:11px;min-height:100px}.demo-center .demo-btn{align-self:center}.demo-center>.demo-spinner{width:24px;height:24px}.demo-center>span:not(.demo-spinner){font-size:28px}.demo-skeleton{display:flex;gap:12px;align-items:center;padding:10px}.demo-skeleton>span{width:35px;height:35px;background:#e2e7ee;border-radius:50%;flex-shrink:0}.demo-skeleton>div{width:100%}.demo-skeleton .demo-line,.demo-skeleton>span{animation:demo-pulse 1.5s ease-in-out infinite}.demo-checkmark{color:#18886a;background:#e3f5ed;border-radius:50%;width:39px;height:39px;display:grid;place-items:center}.demo-success{padding:10px 13px;border-radius:var(--radius,8px);background:#e4f5ed;color:#176b53;font-size:11px;align-self:flex-start;font-weight:600}.demo-offline,.demo-pending{display:flex;align-items:center;gap:13px;background:#f0f3f8;padding:14px;border-radius:var(--radius,8px);font-size:11px}.demo-offline>span,.demo-pending>span{font-size:27px;color:#77859a}.demo-maintenance{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;padding:13px;background:#f1f4f9;border-radius:var(--radius,8px)}.demo-maintenance>span{font-size:26px;color:#7a89a0}.demo-warning{display:flex;flex-direction:column;gap:5px;background:#fff4d9;border-left:3px solid #d39b20;padding:11px;font-size:11px;border-radius:4px;color:#725008}.demo-warning small{color:#806328}.demo-complete{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;min-height:100px;padding:8px;font-size:11px}.demo-complete>span{width:38px;height:38px;border-radius:50%;background:#e2f4eb;color:#178966;font-size:24px;display:grid;place-items:center}.demo-toast{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:#213e37;color:#fff;padding:9px 14px;border-radius:var(--radius,8px);font-size:11px;white-space:nowrap;box-shadow:0 3px 12px #142d3426;z-index:20;animation:demo-toast-in .18s ease-out}.demo-reorder{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0;padding:0}.demo-reorder>li{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid var(--demo-line);background:white;border-radius:6px;font-size:10px}.demo-reorder b{flex:1}.demo-reorder li[draggable=true]{cursor:grab}.demo-reorder>li>span{color:#9aa5b7}.demo-dragging{opacity:.4;background:#eaf0fc!important}.demo-refresh-value,.demo-undo-content{padding:10px;background:var(--demo-soft);font-size:11px;border-radius:var(--radius,8px)}
.demo-spacing{width:100%;display:flex;flex-direction:column;gap:7px}.demo-space-stage{position:relative;min-height:99px;max-height:175px;overflow:auto;background:repeating-linear-gradient(0deg,transparent 0 15px,#d8e2ef44 15px 16px),repeating-linear-gradient(90deg,#f2f5f9 0 15px,#d8e2ef66 15px 16px);border:1px dashed #aebed2;padding:5px;display:flex;align-items:center;justify-content:center}.demo-space-target{background:#e7eefc;border:2px solid var(--demo-brand);min-height:28px;min-width:24px;font-size:10px;color:var(--demo-brand);line-height:1.5;white-space:nowrap;box-sizing:border-box;background-clip:padding-box}.demo-spacing-1 .demo-space-target,.demo-spacing-2 .demo-space-target,.demo-spacing-3 .demo-space-target,.demo-spacing-4 .demo-space-target{background:#ffdfbc;background-clip:padding-box;outline:1px solid #dda76c;outline-offset:-2px;box-shadow:inset 0 0 0 2px #ffffff88}.demo-spacing-6 .demo-space-stage,.demo-spacing-7 .demo-space-stage,.demo-spacing-8 .demo-space-stage{justify-content:flex-start;align-items:flex-start}.demo-spacing-6 .demo-space-target,.demo-spacing-7 .demo-space-target,.demo-spacing-8 .demo-space-target{padding:9px;width:94px;outline:8px solid #f8dc9677}.demo-spacing-9 .demo-space-stage{justify-content:flex-start;padding:8px}.demo-spacing-9 .demo-space-target{padding:15px 7px;min-width:35px}.demo-spacing-10 .demo-space-stage{display:grid;grid-template-columns:repeat(2,40px);justify-content:center;align-content:center;column-gap:16px;min-height:115px;padding:6px}.demo-spacing-10 .demo-space-target{min-height:30px;padding:3px}.demo-spacing-11 .demo-space-target,.demo-spacing-12 .demo-space-target,.demo-spacing-13 .demo-space-target{position:absolute;min-height:0;min-width:0;display:grid;place-items:center}.demo-spacing-12 .demo-space-target{height:40px;top:28px}.demo-spacing-13 .demo-space-target{width:110px;left:calc(50% - 55px)}.demo-spacing-14 .demo-space-target,.demo-spacing-15 .demo-space-target{padding:15px 5px}.demo-spacing-15 .demo-space-target{width:100%;min-width:80px}.demo-spacing-16 .demo-space-target,.demo-spacing-17 .demo-space-target{width:110px;display:grid;place-items:center}.demo-spacing-17 .demo-space-target{max-height:90px}.demo-spacing-18 .demo-space-target{padding:7px 10px;white-space:normal;width:100%;font-size:12px}.demo-spacing-18 .demo-space-stage{justify-content:flex-start}.demo-spacing-19 .demo-space-target{width:140px;min-height:28px;flex-shrink:0}.demo-spacing-20 .demo-space-stage{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;padding:8px;align-content:center}.demo-spacing-20 .demo-space-target{flex-grow:1;flex-shrink:1;padding:7px;text-align:center}.demo-slider{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;font-size:10px}.demo-slider>span{font-weight:600;color:var(--demo-muted)}.demo-slider input{grid-column:1/-1;grid-row:2;width:100%;height:20px;margin:0;accent-color:var(--demo-brand);padding:0;border:none}.demo-slider output{font-size:10px;color:var(--demo-brand);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.demo-kind-spacing{min-height:180px}.demo-spacing>small{font-size:9px}.demo-spacing .demo-switch{font-size:10px}
@keyframes demo-spin{to{transform:rotate(360deg)}}@keyframes demo-pulse{50%{opacity:.45}}@keyframes demo-toast-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.demo-root *,.demo-root *:before,.demo-root *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:420px){.demo-cols3{gap:5px}.demo-tile{padding:7px}.demo-topnav .demo-btn{padding:5px}.demo-person .demo-btn{margin-left:0}}

/* Shared semantic roles. Miniatures keep their instructional geometry. */
.demo-host{--text-color:var(--preview-text-color,#243045);--surface:var(--preview-surface,#fff);--border-color:var(--preview-border-color,#dfe5ee);--success-color:var(--preview-success-color,#087f73);--danger-color:var(--preview-danger-color,#c42b42);--font-family:var(--preview-font-family,sans-serif);--line-height:var(--preview-line-height,1.6);--duration:var(--preview-duration,160ms)}
.demo-root{--demo-ink:var(--text-color,#243045);--demo-line:var(--border-color,#dfe5ee);--demo-soft:color-mix(in srgb,var(--surface,#fff) 95%,var(--demo-ink));font-family:var(--font-family,sans-serif);line-height:var(--line-height,1.6)}
.demo-root .demo-row{gap:calc(var(--space,12px)*.6)}
.demo-root .demo-grid{gap:calc(var(--space,12px)*.75)}
.demo-root .demo-tile{padding:calc(var(--space,12px)*.84)}
.demo-root :is(.demo-tile,.demo-accordion,.demo-overlay section,.demo-menu,.demo-command,.demo-outline){background:var(--surface,#fff)}
.demo-field :is(input,select,textarea){background:var(--surface,#fff);border-color:var(--demo-line)}
.demo-field input[aria-invalid=true]{border-color:var(--danger-color,#c42b42);background:color-mix(in srgb,var(--danger-color,#c42b42) 4%,var(--surface,#fff))}
.demo-field input[aria-invalid=false]{border-color:var(--success-color,#087f73)}
.demo-root .demo-error,.demo-error-summary small{color:var(--danger-color,#c42b42)!important}
.demo-root .demo-valid{color:var(--success-color,#087f73)!important}
.demo-danger{background:var(--danger-color,#c42b42)}
.demo-error-summary{background:color-mix(in srgb,var(--danger-color,#c42b42) 7%,var(--surface,#fff));border-color:var(--danger-color,#c42b42);color:var(--danger-color,#c42b42)}
.demo-checkmark,.demo-success,.demo-complete>span{color:var(--success-color,#087f73);background:color-mix(in srgb,var(--success-color,#087f73) 10%,var(--surface,#fff))}
.demo-btn{transition-duration:var(--duration,160ms)}