:root{--c-demo-primary:#884aff;--c-demo-tint-02:#884aff05;--c-demo-tint-04:#884aff0a;--c-demo-tint-06:#884aff0f;--c-demo-tint-08:#884aff14;--c-demo-tint-10:#884aff1a;--c-demo-tint-12:#884aff1f;--c-demo-tint-15:#884aff26;--c-demo-tint-20:#884aff33;--c-demo-tint-30:#884aff4d;--c-demo-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.c-demo-section{padding-top:3rem;padding-bottom:3rem}@media (width>=768px){.c-demo-section{padding-top:4rem;padding-bottom:4rem}}.c-demo-eyebrow{text-transform:uppercase;letter-spacing:.05em;color:var(--c-demo-primary);margin-bottom:.75rem;font-size:.875rem;font-weight:600;display:inline-block}.c-demo-tabs{background:var(--c-demo-tint-04);border-radius:.75rem;gap:.25rem;padding:.25rem;display:flex}.c-demo-tabs__btn{cursor:pointer;color:#9ca3af;background:0 0;border-radius:.5rem;flex:1;padding:.625rem .75rem;font-size:.875rem;font-weight:600;transition:all .2s ease-in-out}@media (width>=640px){.c-demo-tabs__btn{padding-inline:1rem}}.c-demo-tabs__btn:hover{color:#111827}.c-demo-tabs__btn.is-active{background:var(--c-demo-primary);color:#fff;box-shadow:0 1px 2px #0000000d}.c-demo-tabs__btn.is-active:hover{color:#fff}.c-demo-tabs__count{color:#9ca3af;border-radius:9999px;justify-content:center;align-items:center;margin-left:.375rem;padding:.125rem .5rem;font-size:.75rem;font-weight:500;display:inline-flex}.c-demo-tabs__btn.is-active .c-demo-tabs__count{color:#fff;background:#ffffff4d}.c-demo-search{position:relative}.c-demo-search__icon{color:#9ca3af;pointer-events:none;width:1.25rem;height:1.25rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.c-demo-search__input{color:#111827;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;width:100%;padding:.75rem 1rem .75rem 2.75rem;font-size:.875rem;display:block}.c-demo-search__input::placeholder{color:#9ca3af}.c-demo-search__input:focus{box-shadow:0 0 0 2px var(--c-demo-tint-30)}.c-demo-empty{text-align:center;padding-block:4rem}.c-demo-empty__icon{color:#d1d5db;width:3rem;height:3rem;margin-inline:auto}.c-demo-empty__text{color:#6b7280;margin-top:1rem}.c-demo-card{color:inherit;border:1px solid var(--c-demo-tint-08);background:#fff;border-radius:1rem;flex-direction:column;padding:1.25rem;text-decoration:none;transition:all .2s ease-in-out;display:flex;position:relative}.c-demo-card:hover{border-color:var(--c-demo-tint-20);box-shadow:0 8px 24px var(--c-demo-tint-08);transform:translateY(-3px)}.c-demo-card:focus-visible{box-shadow:0 0 0 3px var(--c-demo-tint-30)}.c-demo-card__icon{background:var(--c-demo-tint-06);width:2.5rem;height:2.5rem;color:var(--c-demo-primary);border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;margin-bottom:.75rem;transition:all .15s ease-in-out;display:flex}.c-demo-card:hover .c-demo-card__icon{background:var(--c-demo-tint-12)}.c-demo-card__body{flex:1;min-width:0}.c-demo-card__title{color:#111827;font-size:1rem;font-weight:600;line-height:1.5rem;transition:color .15s ease-in-out}.c-demo-card:hover .c-demo-card__title{color:var(--c-demo-primary)}.c-demo-card__summary{-webkit-line-clamp:2;line-clamp:2;color:#6b7280;-webkit-box-orient:vertical;margin-top:.375rem;font-size:.875rem;line-height:1.625;display:-webkit-box;overflow:hidden}.c-demo-card__badges{flex-wrap:wrap;gap:.375rem;margin-top:.75rem;display:flex}.c-demo-card__arrow{color:#d1d5db;width:1.25rem;height:1.25rem;transition:all .15s ease-in-out;position:absolute;top:1.25rem;right:1.25rem}.c-demo-card:hover .c-demo-card__arrow{color:var(--c-demo-primary);transform:translate(3px)}.c-badge{border-radius:9999px;align-items:center;padding:.125rem .625rem;font-size:.75rem;font-weight:500;line-height:1rem;display:inline-flex}.c-badge--video{background:var(--c-demo-tint-08);color:var(--c-demo-primary)}.c-badge--audio{color:#b45309;background:#f59e0b1f}.c-badge--image{color:#be185d;background:#fdf2f8}.c-badge--pdf{color:#4338ca;background:#eef2ff}.c-badge--a11y{color:#047857;background:#ecfdf5}.c-badge--HLS{color:#0369a1;background:#f0f9ff}.c-badge--VAST{color:#c2410c;background:#fff7ed}.c-demo-header{border-bottom:1px solid var(--c-demo-tint-06);background:#fff}.c-demo-breadcrumb a:hover{color:var(--c-demo-primary)}.c-demo-sidebar__back{color:#9ca3af;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;transition:color .15s ease-in-out;display:flex}.c-demo-sidebar__back:hover{color:#4b5563}.c-demo-sidebar__group{cursor:pointer;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;justify-content:space-between;align-items:center;width:100%;margin-bottom:.25rem;padding-block:.25rem;font-size:.75rem;font-weight:600;list-style:none;transition:color .15s ease-in-out;display:flex}.c-demo-sidebar__group::-webkit-details-marker{display:none}.c-demo-sidebar__group:hover{color:#4b5563}.c-demo-sidebar__link{color:#6b7280;border-radius:.5rem;padding:.375rem .625rem;font-size:.875rem;transition:all .15s ease-in-out;display:block}.c-demo-sidebar__link:hover{color:#111827;background:#f9fafb}.c-demo-sidebar__link.is-active{background:var(--c-demo-tint-06);color:var(--c-demo-primary);font-weight:500}.c-demo-preview{border:1px solid var(--c-demo-tint-08);background:#fff;border-radius:1rem;overflow:hidden}.c-demo-preview__player{background:#f8fafc}.c-demo-preview__aspect{width:100%;padding-top:var(--aspect-padding,56.25%);position:relative}.c-demo-preview__aspect iframe{border:0;border-radius:12px 12px 0 0;width:100%;height:100%;position:absolute;top:0;left:0}.c-demo-preview__audio{border:0;border-radius:12px 12px 0 0;width:100%;display:block}.c-demo-preview__pdf-frame{width:100%;height:640px;position:relative;overflow:hidden}.c-demo-preview__pdf-frame iframe{transform-origin:0 0;border:0;border-radius:12px 12px 0 0;width:100%;height:100%;position:absolute;top:0;left:0}.c-demo-preview__controls{border-top:1px solid var(--c-demo-tint-06);background:var(--c-demo-tint-02);padding:1rem 1.25rem}.c-demo-preview__controls-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.c-demo-preview__controls-title{text-transform:uppercase;letter-spacing:.025em;color:#6b7280;font-size:.75rem;font-weight:500}.c-demo-preview__reset{cursor:pointer;color:var(--c-demo-primary);align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.c-demo-preview__reset:hover{opacity:.7}.c-demo-preview__table-wrapper{border:1px solid var(--c-demo-tint-08);background:#fff;border-radius:.75rem;overflow-x:auto}.c-demo-preview__table{min-width:100%;font-size:.875rem}.c-demo-preview__table thead{background:#f9fafb}.c-demo-preview__table th{text-align:left;letter-spacing:.05em;color:#6b7280;text-transform:uppercase;border-bottom:1px solid var(--c-demo-tint-08);padding:.75rem 1rem;font-size:.75rem;font-weight:500}.c-demo-preview__table tbody tr{border-bottom:1px solid var(--c-demo-tint-06);transition:background-color .15s ease-in-out}.c-demo-preview__table tbody tr:last-child{border-bottom:none}.c-demo-preview__table tbody tr:hover{background:var(--c-demo-tint-02)}.c-demo-preview__table td{vertical-align:middle;padding:.75rem 1rem}.c-demo-preview__table-name{font-family:var(--c-demo-mono);white-space:nowrap;color:var(--c-demo-primary)}.c-demo-preview__table-type{font-family:var(--c-demo-mono);white-space:nowrap;color:#6b7280;font-size:.75rem}.c-demo-preview__table-default{font-family:var(--c-demo-mono);white-space:nowrap;color:#9ca3af;font-size:.75rem}.c-demo-preview__table-description{color:#4b5563}.c-demo-preview__table-control{white-space:nowrap}.c-demo-preview__table-empty{color:#d1d5db}.c-demo-preview__toggle-switch{cursor:pointer;background:#e5e7eb;border:0;border-radius:9999px;flex-shrink:0;width:2.25rem;height:1.25rem;transition:background-color .2s ease-in-out;display:inline-flex;position:relative}.c-demo-preview__toggle-switch:focus-visible{outline:2px solid var(--c-demo-primary);outline-offset:2px}.c-demo-preview__toggle-switch.is-active{background:var(--c-demo-primary)}.c-demo-preview__toggle-knob{pointer-events:none;background:#fff;border-radius:9999px;width:1rem;height:1rem;margin-top:2px;transition:transform .2s ease-in-out;display:inline-block;transform:translate(.125rem);box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.c-demo-preview__toggle-knob.is-active{transform:translate(1rem)}.c-demo-preview__select-options{border:1px solid var(--c-demo-tint-12);border-radius:.5rem;display:inline-flex;overflow:hidden}.c-demo-preview__select-option{cursor:pointer;color:#6b7280;background:#fff;border:0;padding:.25rem .75rem;font-size:.75rem;font-weight:500;transition:all .2s ease-in-out}.c-demo-preview__select-option+.c-demo-preview__select-option{border-left:1px solid var(--c-demo-tint-12)}.c-demo-preview__select-option:hover{background:#f9fafb}.c-demo-preview__select-option.is-active{color:#fff;background:var(--c-demo-primary)}.c-demo-preview__range{align-items:center;gap:.625rem;display:inline-flex}.c-demo-preview__range-input{cursor:pointer;appearance:none;background:var(--c-demo-tint-15);border-radius:9999px;width:7rem;height:.375rem}.c-demo-preview__range-input::-webkit-slider-thumb{appearance:none;background:var(--c-demo-primary);border-radius:9999px;width:1rem;height:1rem;transition:transform .2s ease-in-out}.c-demo-preview__range-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.c-demo-preview__range-input::-moz-range-thumb{background:var(--c-demo-primary);border:0;border-radius:9999px;width:1rem;height:1rem}.c-demo-preview__range-input:focus-visible{outline:2px solid var(--c-demo-primary);outline-offset:2px}.c-demo-preview__range-value{text-align:right;width:2.5rem;font-family:var(--c-demo-mono);color:#6b7280;font-size:.75rem;font-weight:500}.c-demo-notice{color:#78350f;background:#f59e0b14;border:1px solid #f59e0b33;border-radius:.5rem;align-items:flex-start;gap:.625rem;margin-top:.75rem;padding:.75rem 1rem;font-size:.75rem;line-height:1.625;display:flex}.c-demo-notice code{font-family:var(--c-demo-mono)}.c-demo-preview__shortcuts-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;display:grid}.c-demo-preview__shortcut-category{text-transform:uppercase;letter-spacing:.05em;color:var(--c-demo-primary);margin-bottom:.5rem;font-size:.75rem;font-weight:600}.c-demo-preview__shortcut{border-bottom:1px dashed var(--c-demo-tint-06);justify-content:space-between;align-items:center;padding-block:.375rem;display:flex}.c-demo-preview__shortcut:last-child{border-bottom:none}.c-demo-preview__shortcut-description{color:#4b5563;font-size:.875rem}.c-demo-preview__shortcut-keys{flex-shrink:0;align-items:center;gap:.25rem;margin-left:.75rem;display:flex}.c-demo-preview__shortcut-separator{color:#d1d5db;font-size:10px}.c-demo-preview__kbd{min-width:1.5rem;font-family:var(--c-demo-mono);background:var(--c-demo-tint-06);color:var(--c-demo-primary);border:1px solid var(--c-demo-tint-10);border-radius:.25rem;justify-content:center;align-items:center;padding:.125rem .375rem;font-size:.75rem;font-weight:500;display:inline-flex}.c-demo-preview__hint-footnote{color:#9ca3af;margin-top:1rem;font-size:.75rem}.c-demo-preview__hints{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem;display:grid}.c-demo-preview__hint{border:1px solid var(--c-demo-tint-08);background:#fff;border-radius:.75rem;gap:.75rem;padding:.75rem;display:flex}.c-demo-preview__hint-icon{background:var(--c-demo-tint-06);width:2.25rem;height:2.25rem;color:var(--c-demo-primary);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.c-demo-preview__hint-title{color:#111827;font-size:.875rem;font-weight:600}.c-demo-preview__hint-description{color:#6b7280;margin-top:.125rem;font-size:.75rem;line-height:1.625}.c-demo-code{border:1px solid var(--c-demo-tint-08);border-radius:1rem;overflow:hidden}.c-demo-code__block{background:#1e293b}.c-demo-code__header{background:#00000026;justify-content:space-between;align-items:center;padding:.625rem 1.25rem;display:flex}.c-demo-code__lang{text-transform:uppercase;color:#9ca3af;font-size:.75rem}.c-demo-code__copy{cursor:pointer;color:#ffffff80;background:0 0;border:0;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;transition:color .15s ease-in-out;display:inline-flex}.c-demo-code__copy:hover{color:#ffffffe6}.c-demo-code__copy.is-copied{color:#34d399}.c-demo-code__pre{color:#e2e8f0;padding:1.25rem;font-family:Courier New,ui-monospace,monospace;font-size:.875rem;line-height:1.625;overflow-x:auto}.c-demo-code__pre code{background:0 0;padding:0}.c-demo-docs__images-wrapper{margin-top:1.5rem}.c-demo-docs__images-wrapper>*+*{margin-top:1rem}.c-demo-docs__images-grid{margin-inline:auto;flex-wrap:wrap;justify-content:center;gap:2rem;max-width:60%;margin-top:1.5rem;display:flex}.c-demo-docs__images-grid .c-demo-docs__figure{flex:1;min-width:0;max-width:calc(50% - 1rem)}.c-demo-docs__figure{margin:0}.c-demo-docs__img{border:1px solid var(--c-demo-tint-08);border-radius:.75rem;width:100%;height:auto}.c-demo-docs__caption{text-align:center;color:#9ca3af;margin-top:.5rem;font-size:.75rem}