.utilities-demo{--ut-blue:#075de8;--ut-purple:#6f42d8;--ut-green:#14845f;--ut-red:#c9364f;--ut-amber:#d58a08;--ut-ink:var(--text,#10233c);--ut-muted:var(--text-muted,#66758a);--ut-line:var(--border,#d7e0ec);--ut-surface:var(--surface,#fff);--ut-soft:var(--surface-subtle,#f4f7fb);display:grid;width:100%;gap:8px;color:var(--ut-ink);font-size:10px}.utilities-demo *{box-sizing:border-box}.utilities-demo button{font:inherit;cursor:pointer}.utilities-demo button:focus-visible,.utilities-demo [tabindex]:focus-visible{outline:3px solid #0b63e5;outline-offset:2px}.utilities-demo button[disabled]{cursor:not-allowed}.ut-token{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--ut-line);padding-top:5px;color:var(--ut-muted)}.ut-token b{color:var(--ut-blue);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.ut-token small,.ut-status,.ut-warning{color:var(--ut-muted);font-size:8px}.ut-warning{display:block;color:#9a6110}.utilities-demo>button,.ut-state-demo button,.ut-theme-demo button,.ut-print-demo button,.ut-motion-demo button,.ut-contrast-demo button,.ut-logical-demo>button{justify-self:start;border:1px solid var(--ut-line);border-radius:5px;background:var(--ut-surface);color:inherit;padding:5px 7px;font-weight:700}
.ut-box-model{display:grid;place-items:center;min-height:84px;border:1px dashed var(--ut-blue);background:rgba(7,93,232,.08);padding:14px}.ut-box-model>span{position:absolute;color:var(--ut-blue);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.ut-box-model>div{display:grid;min-width:82px;min-height:42px;place-items:center;border:2px solid var(--ut-blue);background:var(--ut-surface)}.ut-padding-model{border:2px solid var(--ut-blue);background:var(--ut-surface);padding:0}.ut-padding-model>div{min-width:calc(100% - 28px);min-height:56px;border:14px solid rgba(7,93,232,.12)}.ut-padding-model>span{z-index:1}.ut-gap-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ut-gap-demo i,.ut-grid-demo i,.ut-flex-demo i{display:grid;min-height:48px;place-items:center;border-radius:6px;background:rgba(7,93,232,.1);color:var(--ut-blue);font-style:normal;font-weight:800}.ut-width-demo{display:grid;gap:5px}.ut-width-demo i{display:block;width:var(--w);border-radius:3px;background:linear-gradient(90deg,var(--ut-blue),#5e9cff);padding:4px 7px;color:#fff;font-style:normal}.ut-height-demo{display:flex;height:83px;align-items:end;gap:9px;border-bottom:1px solid var(--ut-line)}.ut-height-demo i{display:grid;width:26%;height:var(--h);place-items:center;border-radius:4px 4px 0 0;background:rgba(7,93,232,.12);color:var(--ut-blue);font-style:normal;font-weight:700}.ut-measure-demo{display:grid;grid-template-columns:20px 1fr;gap:7px;align-items:center;border-inline:2px solid var(--ut-blue);padding:9px}.ut-measure-demo>span{color:var(--ut-blue);font-size:16px}.ut-measure-demo p{margin:0;line-height:1.45}.ut-inset-demo{position:relative;min-height:87px;border:1px solid var(--ut-line);border-radius:7px;background:repeating-linear-gradient(135deg,var(--ut-soft),var(--ut-soft) 8px,var(--ut-surface) 8px,var(--ut-surface) 16px);padding:8px}.ut-inset-demo>span{color:var(--ut-muted)}.ut-inset-demo>i{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:grid;width:34px;height:34px;place-items:center;border-radius:5px;background:var(--ut-blue);color:#fff;font-style:normal;font-weight:800}.ut-ratio-demo{display:flex;align-items:center;justify-content:center;gap:9px}.ut-ratio-demo i{display:grid;place-items:center;border:1px solid var(--ut-blue);border-radius:5px;background:rgba(7,93,232,.09);color:var(--ut-blue);font-style:normal}.ut-ratio-demo i:nth-child(1){width:46px;aspect-ratio:1}.ut-ratio-demo i:nth-child(2){width:82px;aspect-ratio:16/9}.ut-ratio-demo i:nth-child(3){width:39px;aspect-ratio:3/4}.ut-sizing-demo{display:grid;grid-template-columns:1fr 1fr;gap:9px}.ut-sizing-demo>span{display:grid;gap:4px;border:6px solid rgba(7,93,232,.18);background:rgba(7,93,232,.08);padding:8px;text-align:center}.ut-sizing-demo i{background:var(--ut-surface);font-style:normal}.ut-sizing-demo b{color:var(--ut-blue);font-size:8px}
.ut-display-demo{display:flex;gap:5px}.ut-display-demo.is-grid{display:grid;grid-template-columns:repeat(3,1fr)}.ut-display-demo span{display:grid;min-height:35px;flex:1;place-items:center;border-radius:4px;background:var(--ut-soft);font-weight:800}.ut-flex-demo{display:flex;gap:6px}.ut-flex-demo i:first-child{flex:2}.ut-flex-demo i:nth-child(2){flex:1}.ut-flex-demo i:last-child{flex:0 0 45px}.ut-grid-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.ut-grid-demo i:first-child{grid-column:span 2}.ut-grid-demo i{min-height:30px}.ut-align-demo{display:flex;min-height:80px;align-items:center;justify-content:space-between;border:1px dashed var(--ut-line);padding:6px}.ut-align-demo i{display:grid;width:43px;height:28px;place-items:center;border-radius:4px;background:rgba(7,93,232,.1);color:var(--ut-blue);font-style:normal}.ut-align-demo i:first-child{align-self:flex-start}.ut-align-demo i:last-child{align-self:flex-end}.ut-order-demo{display:flex;gap:6px}.ut-order-demo i{display:grid;flex:1;gap:2px;border:1px solid var(--ut-line);border-radius:5px;padding:7px;text-align:center;font-style:normal}.ut-order-demo .moved{border-color:var(--ut-amber);background:#fff7e8}.ut-order-demo small{font-size:7px;color:var(--ut-muted)}.ut-order-demo b{font-size:14px}.ut-overflow-demo{display:flex;overflow-x:auto;gap:6px;border:1px solid var(--ut-line);border-radius:6px;padding:8px;scrollbar-color:var(--ut-blue) var(--ut-soft)}.ut-overflow-demo span{flex:0 0 88px;border-radius:4px;background:var(--ut-soft);padding:10px 7px;white-space:nowrap}.ut-position-demo{position:relative;min-height:84px;border:1px dashed var(--ut-line);border-radius:6px;padding:8px;color:var(--ut-muted)}.ut-position-demo i{position:absolute;inset-block-start:9px;inset-inline-end:9px;display:grid;width:58px;height:38px;place-items:center;border-radius:5px;background:var(--ut-blue);color:#fff;font-style:normal;font-weight:800}.ut-float-demo{display:flow-root;border:1px solid var(--ut-line);border-radius:6px;padding:8px}.ut-float-demo i{float:inline-start;display:grid;width:42px;height:42px;place-items:center;margin-inline-end:8px;border-radius:5px;background:rgba(7,93,232,.12);color:var(--ut-blue);font-style:normal;font-weight:800}.ut-float-demo p{margin:0;line-height:1.45}
.ut-text-color-demo{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ut-text-color-demo>*{border-radius:4px;background:var(--ut-soft);padding:7px;font-style:normal}.ut-text-color-demo span{color:var(--ut-muted)}.ut-text-color-demo em{color:var(--ut-green)}.ut-text-color-demo strong{color:var(--ut-red)}.ut-background-demo,.ut-border-demo,.ut-radius-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.ut-background-demo i,.ut-border-demo i,.ut-radius-demo i{display:grid;min-height:46px;place-items:center;font-style:normal}.ut-background-demo i:nth-child(1){border:1px solid var(--ut-line);background:var(--ut-surface)}.ut-background-demo i:nth-child(2){background:var(--ut-soft)}.ut-background-demo i:nth-child(3){background:#e8f1ff;color:#0754c9}.ut-background-demo i:nth-child(4){background:#e4f6ef;color:#126e51}.ut-border-demo i{background:var(--ut-soft)}.ut-border-demo i:nth-child(1){border:2px solid var(--ut-blue)}.ut-border-demo i:nth-child(2){border-block:2px solid var(--ut-blue)}.ut-border-demo i:nth-child(3){border-inline:2px solid var(--ut-blue)}.ut-radius-demo i{border:1px solid var(--ut-line);background:rgba(7,93,232,.1)}.ut-radius-demo i:nth-child(2){border-radius:4px}.ut-radius-demo i:nth-child(3){border-radius:13px}.ut-radius-demo i:nth-child(4){border-radius:999px}.ut-shadow-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:5px}.ut-shadow-demo i{display:grid;min-height:51px;place-items:center;border-radius:6px;background:var(--ut-surface);font-style:normal}.ut-shadow-demo i:nth-child(1){box-shadow:0 1px 3px rgba(18,40,70,.16)}.ut-shadow-demo i:nth-child(2){box-shadow:0 5px 12px rgba(18,40,70,.18)}.ut-shadow-demo i:nth-child(3){box-shadow:0 10px 22px rgba(18,40,70,.22)}.ut-opacity-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ut-opacity-demo i{display:grid;min-height:47px;place-items:center;border-radius:5px;background:var(--ut-blue);color:#fff;font-style:normal;font-weight:800}.ut-opacity-demo i:nth-child(2){opacity:.7}.ut-opacity-demo i:nth-child(3){opacity:.4}.ut-outline-demo{display:flex;align-items:center;gap:12px;padding:7px}.ut-outline-demo button{border:0;border-radius:4px;background:var(--ut-blue);color:#fff;padding:7px;outline:2px solid var(--ut-blue);outline-offset:3px}.ut-outline-demo span{color:var(--ut-muted)}.ut-cursor-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.ut-cursor-demo button{border:1px solid var(--ut-line);border-radius:5px;background:var(--ut-surface);padding:9px 4px}.ut-cursor-demo .pointer{cursor:pointer}.ut-cursor-demo .grab{cursor:grab}
.ut-breakpoint-demo{display:flex;align-items:center;gap:5px}.ut-breakpoint-demo span{display:grid;flex:1;border:1px solid var(--ut-line);border-radius:5px;background:var(--ut-soft);padding:7px}.ut-breakpoint-demo b{color:var(--ut-blue);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.ut-breakpoint-demo i{color:var(--ut-muted);font-style:normal}.ut-state-demo{display:grid;gap:7px}.ut-state-demo button{border-color:var(--ut-blue);color:var(--ut-blue)}.ut-state-demo button:hover,.ut-state-demo button.is-active{background:var(--ut-blue);color:#fff}.ut-theme-demo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;border:1px solid var(--ut-line);border-radius:7px;background:#fff;color:#18243a;padding:9px}.ut-theme-demo.is-dark{border-color:#4b5870;background:#18243a;color:#f5f7fb}.ut-theme-demo .ut-status{grid-column:1/-1}.ut-print-demo{display:grid;gap:7px;border:1px dashed var(--ut-line);border-radius:6px;padding:8px}.ut-print-demo .print-copy{display:none}.ut-print-demo.is-print-preview .screen-copy{display:none}.ut-print-demo.is-print-preview .print-copy{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.ut-hidden-demo{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:9px}.ut-hidden-demo>button{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:50%;background:var(--ut-blue);color:#fff;font-size:16px}.ut-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important}.ut-hidden-demo>div{line-height:1.55}.ut-focus-demo{display:grid;gap:8px;justify-items:start;padding:8px}.ut-focus-demo button{border:0;border-radius:5px;background:var(--ut-blue);color:#fff;padding:8px}.ut-focus-demo span{color:var(--ut-muted)}.ut-motion-demo{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:7px}.ut-motion-demo i{display:block;width:34px;height:34px;border:7px dotted var(--ut-blue);border-radius:50%;animation:ut-spin 2.5s linear infinite}.ut-motion-demo.is-reduced i{animation:none;border-style:solid}.ut-motion-demo .ut-status{grid-column:1/-1}@keyframes ut-spin{to{transform:rotate(1turn)}}.ut-contrast-demo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;border:2px solid var(--ut-line);border-radius:6px;padding:8px}.ut-contrast-demo span{display:grid}.ut-contrast-demo small{color:var(--ut-muted)}.ut-contrast-demo.is-contrast{border-color:#fff;background:#000;color:#fff}.ut-contrast-demo.is-contrast small{color:#fff}.ut-contrast-demo.is-contrast button{border-color:#fff;background:#000;color:#fff}.ut-contrast-demo .ut-status{grid-column:1/-1}.ut-logical-demo{display:grid;gap:7px}.ut-logical-demo>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-inline-start:4px solid var(--ut-blue);background:var(--ut-soft);padding-block:9px;padding-inline:7px}.ut-logical-demo i{color:var(--ut-blue);font-style:normal;font-weight:800}.ut-logical-demo span{text-align:center}
.concept-card-preview .utilities-demo{min-width:0;font-size:9px}.concept-card-preview .utilities-demo .ut-token small,.concept-card-preview .utilities-demo .ut-status,.concept-card-preview .utilities-demo .ut-warning{font-size:7px}.concept-card-preview .ut-box-model{min-height:70px}.concept-card-preview .ut-background-demo,.concept-card-preview .ut-border-demo,.concept-card-preview .ut-radius-demo{grid-template-columns:repeat(2,1fr)}.concept-card-preview .ut-breakpoint-demo i{display:none}.concept-card-preview .ut-breakpoint-demo{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:480px){.utilities-demo{font-size:11px}.ut-background-demo,.ut-border-demo,.ut-radius-demo{grid-template-columns:repeat(2,1fr)}.ut-breakpoint-demo i{display:none}.ut-breakpoint-demo{display:grid;grid-template-columns:repeat(3,1fr)}.ut-cursor-demo{grid-template-columns:1fr}.ut-theme-demo,.ut-contrast-demo{grid-template-columns:1fr}.ut-theme-demo .ut-status,.ut-contrast-demo .ut-status{grid-column:1}.ut-ratio-demo{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.utilities-demo *,.utilities-demo *::before,.utilities-demo *::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media print{.ut-print-demo .screen-copy{display:none!important}.ut-print-demo .print-copy{display:block!important}.ut-print-demo button,.ut-print-demo .ut-status{display:none!important}}
@media(forced-colors:active){.utilities-demo button,.ut-shadow-demo i,.ut-background-demo i,.ut-position-demo i{border:1px solid ButtonText}.utilities-demo button:focus-visible{outline-color:Highlight}}