.canvas-button-board--preview{grid-template-columns:repeat(auto-fit,minmax(200px,max-content));gap:28px;display:grid}.canvas-button-preview-cell,.canvas-button-cell{justify-content:center;display:flex}.canvas-button{cursor:pointer;letter-spacing:-.01em;background:var(--accent-strong);color:var(--accent-strong-text);border:1px solid var(--accent-strong);box-shadow:0 12px 26px var(--chrome-shadow-soft);border-radius:14px;justify-content:center;align-items:center;font-weight:600;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,filter .16s;display:inline-flex}.canvas-button[data-variant=soft]{background:color-mix(in srgb, var(--accent-strong) 12%, white);color:var(--accent-strong);box-shadow:0 8px 22px var(--chrome-shadow-soft);border-color:#0000}.canvas-button[data-variant=outline]{color:var(--text);border-color:var(--border);box-shadow:0 8px 18px var(--chrome-shadow-soft);background:#fff}.canvas-button[data-variant=ghost]{color:var(--text);box-shadow:none;background:0 0;border-color:#0000}.canvas-button[data-size=xs]{padding:8px 12px;font-size:12px}.canvas-button[data-size=sm]{padding:10px 14px;font-size:13px}.canvas-button[data-size=md]{padding:12px 16px;font-size:14px}.canvas-button[data-size=lg]{padding:14px 18px;font-size:14px}.canvas-button[data-size=xl]{padding:16px 20px;font-size:14px}.canvas-button[data-state=focus]{box-shadow:0 0 0 4px var(--back-button-border)}.canvas-button[data-state=disabled]{background:var(--surface-muted);color:var(--muted);border-color:var(--border);box-shadow:none;cursor:not-allowed}.canvas-button--preview-mode:not([data-variant=outline]):not([data-variant=ghost]):hover{filter:brightness(1.04)}.canvas-button--preview-mode[data-variant=outline]:hover,.canvas-button--preview-mode[data-variant=ghost]:hover{background:color-mix(in srgb, var(--accent-strong) 10%, transparent)}.canvas-button--preview-mode:focus-visible{box-shadow:0 0 0 4px var(--back-button-border);outline:none}.canvas-button--preview-mode:not([data-state=disabled]):active,.canvas-button--preview-mode[data-clicked=true]{filter:brightness(.98);transform:translateY(1px)}
.canvas-selectable--button-group-root{width:max-content;max-width:none;overflow:visible}.component-preview--button-group-board{--button-group-surface:#ededf0;--button-group-text:#22252d;--button-group-divider:#0f172a1f;--button-group-primary:#1d83e8;--button-group-primary-text:#fff;--button-group-primary-divider:#ffffff47;--button-group-primary-section-hover:#ffffff14;--button-group-primary-section-pressed:#0f172a24;--button-group-badge-bg:#0b8fff1f;--button-group-badge-text:#0b8fff;--button-group-accent:#1d83e8;--button-group-menu-bg:#fff;--button-group-menu-border:#0f172a14;--button-group-menu-shadow:0 16px 44px #0f172a24;--button-group-menu-hover:#0f172a0a;--button-group-menu-active:#f2f2f3;--button-group-menu-title:#20232c;--button-group-menu-copy:#7b8090;width:max-content;min-width:min(100%,1040px);max-width:none;box-shadow:none;background:0 0;border:0;border-radius:0;flex-direction:column;align-items:flex-start;gap:24px;padding:20px 28px 32px;display:flex;overflow:visible}.canvas-surface[data-theme-mode=dark] .component-preview--button-group-board{--button-group-surface:#27272c;--button-group-text:#fffffff0;--button-group-divider:#ffffff1f;--button-group-primary:#1d83e8;--button-group-primary-text:#fff;--button-group-primary-divider:#ffffff2e;--button-group-primary-section-hover:#ffffff1a;--button-group-primary-section-pressed:#0000002e;--button-group-badge-bg:#1d83e82e;--button-group-badge-text:#1d83e8;--button-group-accent:#1d83e8;--button-group-menu-bg:#242428;--button-group-menu-border:#ffffff14;--button-group-menu-shadow:0 18px 40px #00000057;--button-group-menu-hover:#ffffff0d;--button-group-menu-active:#ffffff14;--button-group-menu-title:#fffffff5;--button-group-menu-copy:#ffffffad}.component-preview-button-group-row{flex-wrap:wrap;align-items:center;gap:18px;width:100%;display:flex;overflow:visible}.component-preview-button-group-split-wrap{flex-direction:column;align-items:flex-start;gap:14px;padding:4px 12px 8px 0;display:flex;position:relative;overflow:visible}.component-preview-button-group-row.is-wrap{row-gap:18px}.component-preview-button-group-pill{background:var(--button-group-surface);min-height:48px;color:var(--button-group-text);letter-spacing:-.01em;box-shadow:none;box-sizing:border-box;border-radius:999px;align-items:center;gap:12px;padding:0 18px;font-size:14px;font-weight:500;display:inline-flex;overflow:visible}.component-preview-button-group-pill.is-primary{background:var(--button-group-primary);color:var(--button-group-primary-text);box-shadow:none}.component-preview-button-group-pill.is-split{align-items:stretch;gap:0;min-height:52px;padding:0}.component-preview-button-group-split-main,.component-preview-button-group-split-trigger{color:inherit;min-height:52px;font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap;z-index:0;background:0 0;border:0;outline:none;justify-content:center;align-items:center;line-height:1;transition:background-color .14s,color .14s;display:inline-flex;position:relative}.component-preview-button-group-button-reset{width:100%;height:100%;color:inherit;font:inherit;letter-spacing:inherit;cursor:inherit;white-space:inherit;background:0 0;border:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.component-preview-button-group-split-main{border-radius:999px 0 0 999px;flex:auto;padding:0 30px}.component-preview-button-group-split-trigger{border-radius:0 999px 999px 0;flex:0 0 64px;width:64px;min-width:64px;height:52px}.component-preview-button-group-pill.is-primary.is-split>.component-preview-button-group-split-main:hover,.component-preview-button-group-pill.is-primary.is-split>.component-preview-button-group-split-main:focus-visible,.component-preview-button-group-pill.is-primary.is-split>.component-preview-button-group-split-trigger:hover,.component-preview-button-group-pill.is-primary.is-split>.component-preview-button-group-split-trigger:focus-visible{background:var(--button-group-primary-section-hover)}.component-preview-button-group-pill.is-primary.is-split>.component-preview-button-group-split-main:active,.component-preview-button-group-pill.is-primary.is-split>.component-preview-button-group-split-trigger:active{background:var(--button-group-primary-section-pressed)}.component-preview-button-group-pill.is-icon-only{gap:0;padding:0 12px}.component-preview-button-group-divider{background:var(--button-group-divider);align-self:stretch;width:1px;margin:10px 0}.component-preview-button-group-pill.is-primary .component-preview-button-group-divider{background:var(--button-group-primary-divider)}.component-preview-button-group-icon{color:currentColor;flex:none;justify-content:center;align-items:center;display:inline-flex}.component-preview-button-group-icon-target{justify-content:center;align-items:center;min-width:18px;min-height:18px;display:inline-flex}.component-preview-button-group-icon--trigger{width:100%;height:100%}.component-preview-button-group-icon--align{width:40px;height:48px}.component-preview-button-group-badge{background:var(--button-group-badge-bg);min-width:28px;height:28px;color:var(--button-group-badge-text);box-shadow:none;border-radius:999px;justify-content:center;align-items:center;padding:0 9px;font-size:14px;font-weight:600;display:inline-flex}.component-preview-button-group-copy,.component-preview-button-group-count{justify-content:center;align-items:center;display:inline-flex}.component-preview-button-group-count{color:inherit}.component-preview-button-group-icon.is-accent,.component-preview-button-group-copy.is-accent,.component-preview-button-group-count.is-accent{color:var(--button-group-accent)}.component-preview-button-group-menu{background:var(--button-group-menu-bg);width:max(100%,600px);min-width:0;max-width:min(720px,100vw - 96px);box-shadow:var(--button-group-menu-shadow);border:1px solid var(--button-group-menu-border);border-radius:28px;flex-direction:column;gap:2px;padding:10px;display:flex}.component-preview-button-group-menu-item{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:20px;flex-direction:column;align-items:flex-start;gap:8px;width:100%;padding:14px 16px;transition:background-color .12s,color .12s;display:flex}.component-preview-button-group-menu-item:hover,.component-preview-button-group-menu-item:focus-visible{background:var(--button-group-menu-hover);outline:none}.component-preview-button-group-menu-item.is-active{background:var(--button-group-menu-active)}.component-preview-button-group-menu-title{letter-spacing:-.02em;color:var(--button-group-menu-title);font-size:14px;font-weight:600;line-height:1.2}.component-preview-button-group-menu-copy{letter-spacing:-.015em;max-width:500px;color:var(--button-group-menu-copy);font-size:14px;line-height:1.35}
.component-preview--accordion-variant{width:100%;box-shadow:none;background:0 0;border:0;overflow:visible}.component-preview--accordion-preview-stack{flex-direction:column;gap:14px;width:min(100%,720px);display:flex}.component-preview--accordion-preview-shell{box-sizing:border-box;background:0 0;border:0;border-radius:0;width:min(100%,720px);padding:0}.component-preview--accordion-preview-list{box-sizing:border-box;width:min(100%,720px);margin:0 auto}.component-preview--accordion-preview-list[data-surface-variant=contained]{background:var(--surface-elevated);border:1px solid var(--border);box-shadow:0 20px 48px var(--chrome-shadow-soft);border-radius:32px;overflow:hidden}.component-preview--accordion-preview-list[data-surface-variant=standalone]{box-shadow:none;background:0 0;border:0;border-radius:0;overflow:visible}.component-preview-accordion-preview-row{border-bottom:1px solid var(--border);width:100%}.component-preview-accordion-preview-row.is-last{border-bottom:0}.component-preview-accordion-header{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;display:flex}.component-preview-accordion-header.is-interactive{cursor:pointer}.component-preview-accordion-header.is-interactive:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);border-radius:14px;outline:none}.component-preview-accordion-header.is-disabled{cursor:default;pointer-events:none}.component-preview-accordion-trigger-content{flex:1;align-items:center;min-width:0;display:inline-flex}.component-preview-accordion-leading-icon,.component-preview-accordion-trailing-icon{flex:none;justify-content:center;align-items:center;display:inline-flex}.component-preview-accordion-title{letter-spacing:-.01em;min-width:0;font-weight:600;line-height:1.2}.component-preview-accordion-content{border-top:1px solid var(--border);box-sizing:border-box}.component-preview-accordion-placeholder{box-sizing:border-box;text-align:center;letter-spacing:.01em;text-transform:none;white-space:normal;overflow-wrap:anywhere;word-break:break-word;border-radius:8px;width:100%;max-width:100%;padding:18px 16px;font-size:12px;font-weight:500;line-height:1.6;display:block;overflow:visible}.component-preview--accordion-grouped-item{background:var(--surface-elevated);width:100%;box-shadow:none;border:0;border-radius:0}.component-preview--accordion-grouped-item[data-accordion-state=hover],.component-preview--accordion-grouped-item[data-accordion-state=focus]{background:var(--surface-muted)}.component-preview--accordion-grouped-item[data-accordion-state=focus]{box-shadow:inset 0 0 0 1px var(--accent-border), 0 0 0 3px var(--focus-ring)}.component-preview--accordion-grouped-item .component-preview-accordion-header--grouped{min-height:74px}.component-preview--accordion-grouped-item .component-preview-accordion-trigger-content--grouped,.component-preview--accordion-grouped-item .component-preview-accordion-header--grouped{align-items:center}.component-preview--accordion-grouped-item .component-preview-accordion-leading-icon--grouped,.component-preview--accordion-grouped-item .component-preview-accordion-trailing-icon--grouped{color:var(--muted)}.component-preview--accordion-grouped-item .component-preview-accordion-title--grouped{color:var(--text);line-height:1.35}.component-preview--accordion-grouped-item[data-accordion-state=disabled] .component-preview-accordion-title--grouped,.component-preview--accordion-grouped-item[data-accordion-state=disabled] .component-preview-accordion-leading-icon--grouped,.component-preview--accordion-grouped-item[data-accordion-state=disabled] .component-preview-accordion-trailing-icon--grouped,.component-preview--accordion-grouped-item[data-accordion-state=disabled] .component-preview-accordion-placeholder--grouped{color:var(--muted)}.component-preview--accordion-grouped-item[data-accordion-state=disabled]{opacity:.68}.component-preview--accordion-grouped-item[data-accordion-state=expanded] .component-preview-accordion-trailing-icon--grouped{transform:rotate(180deg)}.component-preview--accordion-grouped-item .component-preview-accordion-trailing-icon--grouped{transition:transform .16s}.component-preview--accordion-grouped-item .component-preview-accordion-content--grouped{box-sizing:border-box;border-top:0;width:100%;min-width:100%}.component-preview--accordion-grouped-item .component-preview-accordion-placeholder--grouped{white-space:normal;text-align:left;height:auto;min-height:auto;max-height:none;color:var(--muted);letter-spacing:0;text-transform:none;background:0 0;border-radius:0;font-size:14px;font-weight:400;line-height:1.6;display:block;overflow:visible}.canvas-accordion-state-stack,.canvas-accordion-board,.canvas-accordion-state-section{flex-direction:column;display:flex}.canvas-accordion-state-stack{gap:24px;width:100%}.canvas-accordion-board{box-sizing:border-box;border:0;border-radius:0;gap:0;width:100%;max-width:none;padding:0}.canvas-accordion-state-row{grid-template-columns:112px minmax(0,1fr);align-items:start;gap:20px;width:100%;display:grid}.canvas-accordion-state-heading{color:var(--text);padding-top:14px;font-size:14px;font-weight:600;line-height:1.4}.canvas-accordion-spec-row,.canvas-accordion-spec-row.is-last{border-bottom:1px solid #e4e4e7;width:100%}.canvas-accordion-board--preview{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:48px}.canvas-accordion-panel{border:1px solid var(--border);box-sizing:border-box;background:0 0;border-radius:28px;padding:28px 30px 30px}.canvas-accordion-state-section{gap:12px}.canvas-accordion-state-title{color:var(--text);font-size:12px;font-weight:600}.canvas-accordion-variant-labels,.canvas-accordion-variant-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px;display:grid}.canvas-accordion-variant-labels{margin-bottom:16px}.canvas-accordion-preview-cell{justify-content:center;display:flex}@media (max-width:900px){.canvas-accordion-state-row{grid-template-columns:minmax(0,1fr);gap:10px}.canvas-accordion-state-heading{padding-top:0}}
.component-preview--alert-card,.alert{box-sizing:border-box;color:#18181b;background:#fff;border-radius:20px;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;min-width:0;height:auto;min-height:88px;padding:20px 24px;display:grid;position:static;overflow:hidden}.component-preview--alert-card>.canvas-selectable:first-child{grid-column:1;place-self:start center;width:auto;min-width:0;margin-top:2px}.component-preview-alert-icon,.alert-icon{color:#1683f8;justify-content:center;align-items:center;width:24px;height:24px;margin-top:0;line-height:1;display:inline-flex;position:static}.component-preview-alert-icon svg{width:100%;height:100%;display:block}.component-preview-alert-copy-wrap,.alert-content{flex-direction:column;grid-column:2;gap:4px;min-width:0;display:flex;position:static}.component-preview-alert-title,.alert-title{letter-spacing:0;overflow-wrap:anywhere;color:#18181b;min-width:0;font-size:14px;font-weight:500;line-height:1.2;position:static}.component-preview-alert-message,.component-preview-alert-details,.alert-description{letter-spacing:0;overflow-wrap:anywhere;color:#71717a;min-width:0;font-size:14px;font-weight:400;line-height:1.3;position:static}.component-preview-alert-details{flex-direction:column;gap:4px;margin-top:2px;display:flex}.component-preview-alert-detail-line{min-width:0}.component-preview-alert-actions,.alert-actions{grid-column:3;justify-content:flex-end;align-items:center;gap:12px;width:auto;min-width:max-content;margin:0;display:inline-flex;position:static}.component-preview-alert-actions>.canvas-selectable,.alert-actions>.canvas-selectable{flex:none;width:auto;min-width:0;max-width:max-content;display:inline-flex}.component-preview-alert-action,.component-preview-alert-dismiss,.alert-action,.alert-dismiss{appearance:none;white-space:nowrap;cursor:pointer;width:auto;height:40px;min-height:40px;max-height:40px;font:inherit;box-sizing:border-box;border:0;justify-content:center;align-items:center;margin:0;font-size:14px;font-weight:500;line-height:1;display:inline-flex;position:static}.component-preview-alert-action,.alert-action{color:#fff;background:#1683f8;border-radius:999px;padding:0 18px}.component-preview-alert-dismiss,.alert-dismiss{color:#71717a;background:0 0;border-radius:999px;padding:0 10px}.component-preview--alert-card[data-alert-tone=success] .component-preview-alert-icon,.component-preview--alert-card[data-alert-tone=success] .component-preview-alert-title{color:#17c964}.component-preview--alert-card[data-alert-tone=success] .component-preview-alert-action{color:#18181b;background:#17c964}.component-preview--alert-card[data-alert-tone=warning] .component-preview-alert-icon,.component-preview--alert-card[data-alert-tone=warning] .component-preview-alert-title{color:#f5a524}.component-preview--alert-card[data-alert-tone=warning] .component-preview-alert-action{color:#18181b;background:#f5a524}.component-preview--alert-card[data-alert-tone=error] .component-preview-alert-icon,.component-preview--alert-card[data-alert-tone=error] .component-preview-alert-title{color:#ff3b3f}.component-preview--alert-card[data-alert-tone=error] .component-preview-alert-action{color:#fff;background:#ff3b3f}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card{color:#fafafa;background:#18181b}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview-alert-title{color:#fafafa}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview-alert-message,.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview-alert-details,.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview-alert-dismiss{color:#a1a1aa}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=success] .component-preview-alert-title,.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=success] .component-preview-alert-icon{color:#22c55e}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=success] .component-preview-alert-action{color:#111;background:#22c55e}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=warning] .component-preview-alert-title,.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=warning] .component-preview-alert-icon{color:#fbbf24}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=warning] .component-preview-alert-action{color:#111;background:#fbbf24}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=error] .component-preview-alert-title,.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=error] .component-preview-alert-icon{color:#ef4444}.canvas-alert-theme-panel[data-theme-mode=dark] .component-preview--alert-card[data-alert-tone=error] .component-preview-alert-action{color:#fff;background:#ef4444}@media (max-width:900px){.component-preview--alert-card,.alert{grid-template-columns:32px minmax(0,1fr);row-gap:12px}.component-preview-alert-actions,.alert-actions{grid-column:2;justify-content:flex-start;width:auto;min-width:0;margin:0}}.canvas-alert-board{width:100%;max-width:920px}.canvas-alert-theme-panel{box-sizing:border-box}.canvas-alert-stack{flex-direction:column;gap:28px;width:100%;max-width:100%;margin:0;display:flex}@media (max-width:900px){.canvas-alert-stack{gap:24px}}
.canvas-stage-frame[data-node-type=AlertDialog]{contain:none;align-items:flex-start}.canvas-stage-frame[data-node-type=AlertDialog] .canvas-stage-showcase,.canvas-stage-frame[data-node-type=AlertDialog] .canvas-stage-zoom{justify-content:flex-start;align-items:flex-start;max-width:none;overflow:visible}.alert-dialog-demo{box-sizing:border-box;-webkit-font-smoothing:antialiased;width:100%;max-width:none;min-height:100%;padding:72px;overflow:auto}.alert-dialog-grid{box-sizing:border-box;grid-template-columns:560px 560px;align-items:start;gap:56px;width:max-content;max-width:none;display:grid}.alert-dialog-preview-item{box-sizing:border-box;width:560px;min-width:560px;display:block;overflow:visible}.alert-dialog-preview-item.compact{width:420px;min-width:420px}.alert-dialog-card{--alert-dialog-tone:#1683f8;box-sizing:border-box;color:#18181b;isolation:isolate;-webkit-font-smoothing:antialiased;background:#fff;border:1px solid #18181b14;border-radius:28px;flex-direction:column;width:560px;min-width:0;min-height:250px;padding:32px;display:flex;position:relative;overflow:visible;box-shadow:0 24px 70px #00000038}.alert-dialog-card.mobile{width:420px;min-height:340px}.alert-dialog-card[data-alert-dialog-variant=destructive]{--alert-dialog-tone:#ff3b30}.alert-dialog-card[data-alert-dialog-variant=warning]{--alert-dialog-tone:#f59e0b}.alert-dialog-icon{width:48px;height:48px;color:var(--alert-dialog-tone);box-sizing:border-box;background:#f0f0f2;border-radius:999px;flex:none;justify-content:center;align-items:center;margin-bottom:24px;line-height:1;display:flex}.alert-dialog-icon svg{flex:none;display:block}.alert-dialog-close{appearance:none;color:#71717a;box-sizing:border-box;background:#f0f0f2;border:0;border-radius:999px;justify-content:center;align-items:center;width:32px;height:32px;margin:0;padding:0;line-height:1;display:inline-flex;position:absolute;top:24px;right:24px}.alert-dialog-close svg{flex:none;display:block}.alert-dialog-content{min-width:0;max-width:460px;margin-top:0}.alert-dialog-title{color:#18181b;min-width:0;margin:0 56px 12px 0;font-size:22px;font-weight:650;line-height:1.25}.alert-dialog-description{color:#6f727a;min-width:0;max-width:460px;margin:0;font-size:14px;font-weight:400;line-height:1.45}.alert-dialog-footer{justify-content:flex-end;align-items:center;gap:12px;min-width:0;margin-top:auto;padding-top:28px;display:flex}.alert-dialog-card.mobile .alert-dialog-footer{flex-direction:column;align-items:stretch;gap:8px}.alert-dialog-button{appearance:none;white-space:nowrap;box-sizing:border-box;min-width:128px;height:48px;font:inherit;color:#18181b;border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;padding:0 24px;font-size:14px;font-weight:600;line-height:1;display:inline-flex;overflow:visible}.alert-dialog-card.mobile .alert-dialog-button{width:100%}.alert-dialog-button-primary{background:var(--alert-dialog-tone);color:#fff}.alert-dialog-button-secondary{color:#18181b;background:#e4e4e7;box-shadow:inset 0 0 0 3px #1683f8,inset 0 1px #ffffffa6}.canvas-surface[data-theme-mode=dark] .alert-dialog-card{color:#f4f4f5;background:#18181b;border-color:#ffffff1a}.canvas-surface[data-theme-mode=dark] .alert-dialog-title{color:#f4f4f5}.canvas-surface[data-theme-mode=dark] .alert-dialog-description{color:#a1a1aa}.canvas-surface[data-theme-mode=dark] .alert-dialog-icon,.canvas-surface[data-theme-mode=dark] .alert-dialog-close,.canvas-surface[data-theme-mode=dark] .alert-dialog-button-secondary{background:#27272a}
.canvas-autocomplete-grid,.component-preview--autocomplete-stage{--autocomplete-control-width:376px;--autocomplete-trigger-height:48px;--autocomplete-trigger-radius:20px;--autocomplete-dropdown-radius:28px;--autocomplete-chip-height:28px;--autocomplete-option-height:44px;--autocomplete-text-size:14px;--autocomplete-text-line-height:20px}.canvas-autocomplete-grid{grid-template-columns:repeat(2, var(--autocomplete-control-width));width:min(100%, calc(var(--autocomplete-control-width) * 2 + 56px));max-width:calc(var(--autocomplete-control-width) * 2 + 56px);justify-content:center;align-items:start;gap:64px 56px;min-width:0;padding-bottom:120px;display:grid;overflow:visible}.canvas-autocomplete-state-panel{width:var(--autocomplete-control-width);min-width:var(--autocomplete-control-width);max-width:var(--autocomplete-control-width);flex-direction:column;justify-self:center;gap:8px;display:flex;overflow:visible}.canvas-autocomplete-state-panel--top-left,.canvas-autocomplete-state-panel--top-center,.canvas-autocomplete-state-panel--top-right,.canvas-autocomplete-state-panel--bottom-left,.canvas-autocomplete-state-panel--bottom-right{grid-column:auto}.canvas-autocomplete-state-label{min-width:0;font-size:var(--autocomplete-text-size);line-height:var(--autocomplete-text-line-height);color:var(--text);margin:0;font-weight:600;display:block}.canvas-autocomplete-state-stack{flex-direction:column;gap:10px;width:100%;min-width:0;display:flex;overflow:visible}.component-preview-autocomplete-trigger,.component-preview-autocomplete-dropdown,.component-preview-autocomplete-search,.component-preview-autocomplete-option,.component-preview-autocomplete-chip,.component-preview-autocomplete-trigger-button,.component-preview-autocomplete-option-button,.component-preview-autocomplete-chip-remove,.component-preview-autocomplete-search-input{box-sizing:border-box;letter-spacing:0;font-family:inherit}.component-preview-autocomplete-trigger,.component-preview-autocomplete-dropdown{width:var(--autocomplete-control-width);min-width:var(--autocomplete-control-width);max-width:var(--autocomplete-control-width);flex:none}.component-preview-autocomplete-trigger{min-height:var(--autocomplete-trigger-height);border-radius:var(--autocomplete-trigger-radius);border:1px solid var(--chrome-border);background:var(--surface);color:var(--muted);font-size:var(--autocomplete-text-size);line-height:var(--autocomplete-text-line-height);box-shadow:0 1px 2px var(--chrome-shadow-soft);justify-content:space-between;align-items:center;gap:12px;padding:0 16px;display:flex;overflow:visible}.component-preview-autocomplete-trigger[data-open=true]{border-color:var(--chrome-border)}.component-preview-autocomplete-trigger.is-multi{align-items:center;padding-top:10px;padding-bottom:10px}.component-preview-autocomplete-trigger.is-multi[data-open=true]{min-height:72px}.component-preview-autocomplete-trigger-text,.component-preview-autocomplete-summary{min-width:0;font-size:var(--autocomplete-text-size);line-height:var(--autocomplete-text-line-height);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;flex:1 1 0;display:block;overflow:hidden}.component-preview-autocomplete-trigger.is-multi .component-preview-autocomplete-summary{color:var(--text)}.component-preview-autocomplete-selected-values,.selected-values{flex:auto;align-items:center;gap:6px;min-width:0;display:flex}.component-preview-autocomplete-trigger .selected-values{flex-wrap:nowrap;overflow:hidden}.component-preview-autocomplete-dropdown-selected-values{flex-wrap:wrap;align-items:center;gap:8px 6px;width:100%;padding:0 2px 2px}.component-preview-autocomplete-chip-wrap{flex-wrap:wrap;flex:1 1 0;align-items:center;gap:8px 6px;min-width:0;max-width:100%;display:flex}.component-preview-autocomplete-chip-wrap>.canvas-selectable{flex:0 auto;min-width:0;max-width:100%;display:inline-flex}.component-preview-autocomplete-chip{appearance:none;height:var(--autocomplete-chip-height);background:var(--surface-muted);min-width:max-content;max-width:100%;color:var(--text);font-size:var(--autocomplete-text-size);line-height:var(--autocomplete-text-line-height);white-space:nowrap;box-sizing:border-box;cursor:pointer;border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-weight:500;display:inline-flex;overflow:hidden}.component-preview-autocomplete-trigger .component-preview-autocomplete-chip{max-width:112px}.component-preview-autocomplete-chip--summary,.component-preview-autocomplete-chip.summary{min-width:42px;color:var(--muted)}.component-preview-autocomplete-chip>span:first-child{min-width:0;color:var(--text);text-overflow:ellipsis;overflow:hidden}.component-preview-autocomplete-chip-icon,.component-preview-autocomplete-trigger-icon,.component-preview-autocomplete-option-check{color:var(--muted);flex:none;justify-content:center;align-items:center;width:18px;height:18px;line-height:1;display:inline-flex}.component-preview-autocomplete-search-icon{width:18px;height:18px;color:var(--muted);pointer-events:none;z-index:1;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute;top:15px;left:14px}.component-preview-autocomplete-chip-icon svg,.component-preview-autocomplete-trigger-icon svg,.component-preview-autocomplete-search-icon svg,.component-preview-autocomplete-option-check svg{width:100%;height:100%;display:block}.component-preview-autocomplete-trigger-actions{flex:none;justify-content:flex-end;align-items:center;gap:8px;min-width:18px;display:inline-flex}.component-preview-autocomplete-clear-all{appearance:none;cursor:pointer;color:var(--muted);font:inherit;font-size:var(--autocomplete-text-size);font-weight:500;line-height:var(--autocomplete-text-line-height);white-space:nowrap;background:0 0;border:0;margin:0;padding:0 8px}.component-preview-autocomplete-dropdown{background:var(--surface);width:100%;color:var(--text);box-shadow:0 24px 64px var(--chrome-shadow), 0 8px 24px var(--chrome-shadow-soft);border:0;border-radius:24px;flex-direction:column;gap:8px;padding:12px;display:flex;overflow:visible}.component-preview-autocomplete-search{border:1px solid var(--accent-strong);background:var(--surface);width:100%;min-width:0;height:48px;min-height:48px;color:var(--muted);font-size:var(--autocomplete-text-size);box-sizing:border-box;border-radius:14px;align-items:center;padding:0;line-height:1;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #2563eb2e}.component-preview-autocomplete-search:focus-within{border-color:var(--accent-strong);box-shadow:0 0 0 2px #2563eb2e}.component-preview-autocomplete-search-text{box-sizing:border-box;width:100%;min-width:0;height:48px;font-size:var(--autocomplete-text-size);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:center;padding:0 14px 0 42px;line-height:1;display:flex;overflow:hidden}.component-preview-autocomplete-search-text.has-value{color:var(--text)}.component-preview-autocomplete-empty{min-height:var(--autocomplete-option-height);font-size:var(--autocomplete-text-size);color:var(--muted);align-items:center;padding:0 14px;line-height:1.2;display:flex}.component-preview-autocomplete-options{flex-direction:column;gap:0;width:100%;min-width:0;display:flex}.component-preview-autocomplete-option{width:100%;min-width:0;min-height:var(--autocomplete-option-height);height:auto;font-size:var(--autocomplete-text-size);color:var(--text);cursor:default;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:0 14px;line-height:1.2;display:flex;overflow:hidden}.component-preview-autocomplete-option-button{cursor:pointer}.component-preview-autocomplete-option:hover,.component-preview-autocomplete-option[data-active=true]{background:var(--surface-muted)}.component-preview-autocomplete-option:active{background:var(--accent-soft)}.component-preview-autocomplete-option[data-selected=true]{color:var(--text);font-weight:500}.component-preview-autocomplete-option>span:first-child{white-space:nowrap;text-overflow:ellipsis;flex:1 1 0;min-width:0;overflow:hidden}.component-preview-autocomplete-option[data-selected=true] .component-preview-autocomplete-option-check{color:var(--text)}.component-preview-autocomplete-option-check svg{stroke-width:2.25px}.component-preview--autocomplete-stage{justify-content:center;width:100%;min-width:0;display:flex;overflow:visible}.component-preview--autocomplete-preview-grid{--autocomplete-control-width:376px;width:min(100%, calc(var(--autocomplete-control-width) * 2 + 40px));max-width:calc(var(--autocomplete-control-width) * 2 + 40px);grid-template-columns:repeat(2, var(--autocomplete-control-width));justify-content:center;align-items:start;gap:40px;min-width:0;display:grid;overflow:visible}.component-preview--autocomplete-preview-stack{width:var(--autocomplete-control-width);min-width:var(--autocomplete-control-width);max-width:var(--autocomplete-control-width);overflow:visible}.component-preview-autocomplete-trigger-button,.component-preview-autocomplete-option-button,.component-preview-autocomplete-chip-remove{appearance:none;font:inherit;line-height:var(--autocomplete-text-line-height);text-align:left;cursor:pointer;color:inherit;box-shadow:none;background:0 0;border:0;margin:0}.component-preview-autocomplete-trigger-button{border:1px solid var(--chrome-border);background:var(--surface)}.component-preview-autocomplete-option-button{background:0 0;border:0}.component-preview-autocomplete-chip-remove{width:16px;height:16px;color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.component-preview-autocomplete-search-input{appearance:none;width:100%;min-width:0;height:48px;min-height:48px;color:var(--text);font:inherit;font-size:var(--autocomplete-text-size);box-shadow:none;box-sizing:border-box;background:0 0;border:0;border-radius:14px;outline:none;flex:auto;margin:0;padding:0 14px 0 42px;line-height:1;display:block}.component-preview-autocomplete-search-input::placeholder{color:var(--muted);opacity:1}.component-preview-autocomplete-trigger-button:focus-visible,.component-preview-autocomplete-option-button:focus-visible,.component-preview-autocomplete-chip-remove:focus-visible{box-shadow:0 0 0 2px var(--focus-ring);outline:none}@media (max-width:1200px){.canvas-autocomplete-grid{width:min(100%, calc(var(--autocomplete-control-width) * 2 + 48px));max-width:calc(var(--autocomplete-control-width) * 2 + 48px);grid-template-columns:repeat(2, var(--autocomplete-control-width))}.canvas-autocomplete-state-panel{grid-column:auto}}@media (max-width:760px){.canvas-autocomplete-grid,.component-preview--autocomplete-preview-grid{--autocomplete-control-width:min(100%, 376px);grid-template-columns:minmax(0, var(--autocomplete-control-width));width:100%;max-width:376px}.canvas-autocomplete-grid{gap:24px}.canvas-autocomplete-state-panel,.component-preview--autocomplete-preview-stack,.component-preview-autocomplete-trigger,.component-preview-autocomplete-dropdown{width:var(--autocomplete-control-width);min-width:0;max-width:100%}}.component-preview--choice-stack.component-preview--autocomplete-preview-stack{width:var(--autocomplete-control-width);min-width:var(--autocomplete-control-width);max-width:var(--autocomplete-control-width)}
.component-preview--avatar-variant{border:1px solid var(--border);box-shadow:0 10px 22px var(--chrome-shadow-soft);background:#fff;border-radius:999px;justify-content:center;align-items:center;display:flex;overflow:hidden}.component-preview-avatar-initials{letter-spacing:-.02em;line-height:1}.component-preview-avatar-image{object-fit:cover;width:100%;height:100%;display:block}.canvas-avatar-variant-stack{flex-direction:column;gap:44px;display:flex}.canvas-avatar-board{flex-direction:column;gap:70px;width:100%;max-width:none;display:flex}.canvas-avatar-state-heading{color:var(--text);margin:0 0 24px;font-size:14px;font-weight:600}.canvas-avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;display:grid}.canvas-avatar-row{flex-direction:column;display:flex}.canvas-avatar-cell{flex-direction:column;align-items:center;gap:18px;display:flex}.canvas-avatar-panel{background:0 0;border:0;border-radius:0;padding:0}.canvas-avatar-caption{width:100%;color:var(--muted);text-align:center;font-size:12px}
.component-preview--badge{background:var(--accent);color:var(--accent-text);border:1px solid color-mix(in srgb, var(--accent) 22%, white);box-shadow:0 8px 18px var(--chrome-shadow-soft);border-radius:999px;justify-content:center;align-items:center;padding:8px 12px;font-weight:600;display:inline-flex}.canvas-badge-board{width:100%;max-width:1280px}.canvas-badge-layout{flex-direction:column;gap:14px;width:100%;display:flex}.canvas-badge-groups{flex-direction:column;gap:64px;min-width:0;display:flex}.canvas-badge-size-section{width:100%}.canvas-badge-size-content{flex-direction:column;gap:18px;min-width:0;display:flex}.canvas-badge-row{flex-direction:column;gap:12px;width:100%;display:flex}.canvas-badge-style-heading{color:var(--muted);text-transform:capitalize;font-size:14px;font-weight:500;line-height:1.2}.canvas-badge-cell-grid,.canvas-badge-header{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-items:center;gap:28px;display:grid}.canvas-badge-cell{justify-content:flex-start;align-items:center;min-width:0;display:flex}.component-preview--badge-pill{white-space:nowrap;justify-content:center;align-items:center;width:fit-content;max-width:100%;display:inline-flex}.component-preview-badge-part{justify-content:center;align-items:center;display:inline-flex}.component-preview-badge-icon{flex:none;justify-content:center;align-items:center;display:inline-flex}.component-preview-badge-label{line-height:1}.canvas-badge-tone-label{color:var(--muted);text-align:center;text-transform:lowercase;font-size:14px;line-height:1}@media (max-width:1200px){.canvas-badge-header,.canvas-badge-cell-grid{gap:20px}}@media (max-width:960px){.canvas-badge-layout{row-gap:14px}.canvas-badge-row{gap:10px}.canvas-badge-header,.canvas-badge-cell-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}}
.canvas-carousel-board{--carousel-stage-surface:#f1f0ea;--carousel-thumb-surface:#f1f0ea;--carousel-thumb-border:#0f172a14;--carousel-thumb-active:#1d83e8;--carousel-trigger-surface:#ffffffe6;--carousel-trigger-icon:#1d83e8;--carousel-indicator:#94a3b86b;--carousel-indicator-active:#1d83e8;flex-direction:column;align-items:center;gap:120px;width:min(100%,1320px);padding:10px 0 40px;display:flex}.canvas-surface[data-theme-mode=dark] .canvas-carousel-board{--carousel-stage-surface:#1f2024;--carousel-thumb-surface:#23242a;--carousel-thumb-border:#ffffff14;--carousel-thumb-active:#1d83e8;--carousel-trigger-surface:#27272cf5;--carousel-trigger-icon:#4ea2ff;--carousel-indicator:#ffffff3d;--carousel-indicator-active:#4ea2ff}.canvas-carousel-panel{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.canvas-carousel-panel--gallery{gap:24px}.canvas-carousel-panel--rail{gap:0}.canvas-carousel-stage-shell,.canvas-carousel-stage-row,.canvas-carousel-rail{justify-content:center;align-items:center;gap:36px;display:flex;position:relative}.canvas-carousel-stage-shell--compact{position:relative}.canvas-carousel-stage-row{box-sizing:border-box;grid-template-columns:40px 548px 40px;column-gap:48px;width:100%;max-width:100%;min-height:548px;padding-inline:0;display:grid}.canvas-carousel-rail{box-sizing:border-box;grid-template-columns:40px max-content 40px;column-gap:36px;width:100%;max-width:100%;min-height:112px;padding-inline:0;display:grid}.component-preview-carousel-stage{box-sizing:border-box;background:var(--carousel-stage-surface);border-radius:32px;flex:none;display:block;position:relative;overflow:hidden}.component-preview-carousel-stage--compact{width:404px;height:404px}.component-preview-carousel-stage--gallery{width:min(100%,548px);height:548px}.component-preview-carousel-image,.component-preview-carousel-thumb-image{object-fit:cover;width:100%;height:100%;display:block}.component-preview-carousel-trigger{box-sizing:border-box;background:var(--carousel-trigger-surface);width:40px;height:40px;color:var(--carousel-trigger-icon);border-radius:999px;flex:none;justify-content:center;align-items:center;display:inline-flex}.component-preview-carousel-trigger--overlay{z-index:2;position:absolute;top:50%;transform:translateY(-50%)}.component-preview-carousel-trigger--overlay.is-left{left:24px}.component-preview-carousel-trigger--overlay.is-right{right:24px}.component-preview-carousel-trigger--side{z-index:2;position:static;top:auto;transform:none}.component-preview-carousel-trigger--side.is-left{left:auto}.component-preview-carousel-trigger--side.is-right{right:auto}.component-preview-carousel-trigger-icon{justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}.component-preview-carousel-indicators{align-items:center;gap:10px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.component-preview-carousel-indicator{flex:none;justify-content:center;align-items:center;width:10px;height:10px;display:inline-flex}.component-preview-carousel-indicator-dot{background:var(--carousel-indicator);border-radius:999px;width:8px;height:8px}.component-preview-carousel-indicator.is-active .component-preview-carousel-indicator-dot{background:var(--carousel-indicator-active)}.component-preview-carousel-thumbs{justify-content:center;align-items:center;gap:18px;display:flex}.component-preview-carousel-thumbs--compact{gap:16px;min-height:108px}.component-preview-carousel-thumb{box-sizing:border-box;background:var(--carousel-thumb-surface);border:2px solid #0000;border-radius:24px;flex:none;display:block;position:relative;overflow:hidden}.component-preview-carousel-thumbs--gallery,.component-preview-carousel-thumbs--rail{min-height:112px}.component-preview-carousel-thumbs--compact .component-preview-carousel-thumb{width:108px;height:108px}.component-preview-carousel-thumbs--gallery .component-preview-carousel-thumb,.component-preview-carousel-thumbs--rail .component-preview-carousel-thumb{width:112px;height:112px}.component-preview-carousel-thumb.is-active{border-color:var(--carousel-thumb-active)}@media (max-width:1100px){.canvas-carousel-board{gap:88px}.canvas-carousel-stage-row{grid-template-columns:40px 460px 40px;column-gap:32px;min-height:460px}.canvas-carousel-rail{column-gap:28px}.component-preview-carousel-stage--gallery{width:460px;height:460px}.component-preview-carousel-thumbs--gallery .component-preview-carousel-thumb,.component-preview-carousel-thumbs--rail .component-preview-carousel-thumb{width:96px;height:96px}}@media (max-width:780px){.canvas-carousel-board{gap:64px}.component-preview-carousel-stage--compact,.component-preview-carousel-stage--gallery{width:min(100%,360px);height:min(100vw - 96px,360px)}.canvas-carousel-stage-row{grid-template-columns:36px minmax(0,360px) 36px;column-gap:16px;min-height:min(100vw - 96px,360px)}.canvas-carousel-rail{column-gap:16px}.component-preview-carousel-thumbs{flex-wrap:wrap;gap:12px}.component-preview-carousel-thumbs--compact .component-preview-carousel-thumb,.component-preview-carousel-thumbs--gallery .component-preview-carousel-thumb,.component-preview-carousel-thumbs--rail .component-preview-carousel-thumb{width:84px;height:84px}}
.component-preview--date-picker{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:16px;width:min(100%,520px);min-width:min(100%,430px);display:flex;overflow:visible}.component-preview-date-picker-trigger,.component-preview-date-picker-nav-button,.component-preview-date-picker-day,.component-preview-calendar-month-control--button,.component-preview-calendar-nav-button,.component-preview-calendar-day,.component-preview-calendar-segment--preview,.component-preview-calendar-filter-chip--preview,.component-preview-calendar-year-pill--button{appearance:none;box-sizing:border-box;color:inherit;font:inherit;letter-spacing:0;text-transform:none;-webkit-tap-highlight-color:transparent;background:0 0;border:none;margin:0;line-height:1}.component-preview-date-picker-trigger:disabled,.component-preview-date-picker-nav-button:disabled,.component-preview-date-picker-day:disabled,.component-preview-calendar-month-control--button:disabled,.component-preview-calendar-nav-button:disabled,.component-preview-calendar-day:disabled,.component-preview-calendar-segment--preview:disabled,.component-preview-calendar-filter-chip--preview:disabled,.component-preview-calendar-year-pill--button:disabled{color:inherit;opacity:1}.component-preview-date-picker-trigger::-moz-focus-inner{border:0;padding:0}.component-preview-date-picker-nav-button::-moz-focus-inner{border:0;padding:0}.component-preview-date-picker-day::-moz-focus-inner{border:0;padding:0}.component-preview-calendar-month-control--button::-moz-focus-inner{border:0;padding:0}.component-preview-calendar-nav-button::-moz-focus-inner{border:0;padding:0}.component-preview-calendar-day::-moz-focus-inner{border:0;padding:0}.component-preview-calendar-segment--preview::-moz-focus-inner{border:0;padding:0}.component-preview-calendar-filter-chip--preview::-moz-focus-inner{border:0;padding:0}.component-preview-calendar-year-pill--button::-moz-focus-inner{border:0;padding:0}.component-preview-date-picker-field-label{color:var(--text);margin:0;font-size:14px;font-weight:600;line-height:1.3}.component-preview-date-picker-trigger{cursor:default;text-align:left;box-sizing:border-box;white-space:nowrap;flex:none;justify-content:space-between;align-items:center;gap:16px;width:100%;min-width:0;max-width:100%;min-height:72px;padding:0 24px;display:flex;overflow:visible}.component-preview-date-picker-trigger>.component-preview-date-picker-trigger-value{min-width:0}.component-preview-date-picker-trigger.component-preview-date-field-control{overflow:visible}.component-preview-date-picker-trigger-copy{flex-direction:column;flex:auto;gap:4px;min-width:0;display:flex;overflow:hidden}.component-preview-date-picker-trigger-label{color:var(--muted);letter-spacing:.03em;text-transform:uppercase;font-size:12px;font-weight:600}.component-preview-date-picker-trigger-value{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--text);flex:1 1 0;padding-right:8px;font-size:14px;font-weight:500;line-height:24px;display:block;overflow:hidden}.component-preview-date-picker-trigger-value[data-placeholder=true]{color:var(--muted);font-weight:400}.component-preview-date-picker-trigger-icon{width:24px;min-width:24px;height:24px;color:var(--muted);flex:0 0 24px;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:visible}.component-preview-date-picker-trigger-icon svg{flex:0 0 20px;width:20px;height:20px;display:block}.component-preview-date-picker-surface{width:100%;inline-size:100%;box-sizing:border-box;flex-direction:column;align-self:stretch;gap:18px;min-width:0;max-width:100%;margin-top:0;padding:0;display:flex;overflow:visible}.component-preview--date-picker .component-preview-calendar-surface{--calendar-day-size:48px;--calendar-grid-column-gap:8px;--calendar-grid-row-gap:10px;--calendar-grid-width:384px;--calendar-nav-button-size:40px;width:100%;box-sizing:border-box;inline-size:100%;border-radius:32px;gap:18px;min-width:0;max-width:100%;padding:22px 22px 24px;overflow:visible}.component-preview--date-picker .component-preview-calendar-panel-header{gap:12px}.component-preview--date-picker .component-preview-calendar-month-control{font-size:14px;font-weight:600}.component-preview--date-picker .component-preview-calendar-month-control-icon{color:var(--accent-strong)}.component-preview--date-picker .component-preview-calendar-nav{gap:8px}.component-preview--date-picker .component-preview-calendar-nav-button{border-radius:14px;width:40px;height:40px}.component-preview--date-picker .component-preview-calendar-weekdays{gap:var(--calendar-grid-column-gap)}.component-preview--date-picker .component-preview-calendar-grid{gap:var(--calendar-grid-row-gap) var(--calendar-grid-column-gap)}.component-preview--date-picker .component-preview-calendar-day{width:var(--calendar-day-size);height:var(--calendar-day-size);min-width:var(--calendar-day-size);min-height:var(--calendar-day-size);flex-basis:var(--calendar-day-size)}.component-preview--date-picker .component-preview-calendar-day-number{font-size:14px;font-weight:500}.component-preview--date-picker .component-preview-calendar-day[data-today=true]:not([data-selected=true]){color:var(--accent-strong)}.component-preview--date-picker .component-preview-calendar-day[data-selected=true]{background:var(--surface-muted);color:var(--text)}.component-preview--date-picker .component-preview-calendar-day[data-outside=true]{color:var(--muted);opacity:.6}.component-preview-date-picker-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.component-preview-date-picker-month{line-height:1.2}.component-preview-date-picker-month-button{color:inherit;font:inherit;cursor:default;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:inline-flex}.component-preview-date-picker-month-button svg{flex:none}.component-preview-date-picker-nav{align-items:center;gap:8px;display:flex}.component-preview-date-picker-nav-button{cursor:default;justify-content:center;align-items:center;display:flex}.component-preview-date-picker-weekdays,.component-preview-date-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.component-preview-date-picker-weekdays{gap:6px}.component-preview-date-picker-weekday{color:var(--muted);letter-spacing:.04em;text-align:center;text-transform:uppercase;padding-bottom:4px;font-size:11px;font-weight:700}.component-preview-date-picker-grid{gap:6px}.component-preview-date-picker-day{aspect-ratio:1;cursor:default;justify-content:center;align-items:center;width:100%;display:flex}.component-preview-date-picker-surface[data-view=year-picker]{gap:18px}.component-preview-date-picker-header[data-view=year-picker]{justify-content:flex-start}.component-preview-date-picker-year-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px;display:grid}.component-preview-date-picker-year-button{width:100%;min-height:64px;font:inherit;cursor:default;background:0 0;border:0;justify-content:center;align-items:center;padding:0 10px;display:inline-flex}
.component-preview--date-range{width:min(100%,420px);inline-size:min(100%,420px);box-sizing:border-box;flex-direction:column;gap:6px;min-width:0;max-width:420px;display:flex;overflow:visible}.component-preview--date-range .canvas-selectable{box-sizing:border-box;min-width:0}.component-preview--date-range>.canvas-selectable{width:100%;max-width:100%}.component-preview-date-range-trigger,.component-preview-date-range-nav-button,.component-preview-date-range-day,.component-preview-date-range-month-trigger,.component-preview-date-range-picker-pill{appearance:none;color:inherit;font:inherit;box-sizing:border-box;background:0 0;border:0;margin:0;line-height:1}.component-preview-date-range-trigger::-moz-focus-inner{border:0;padding:0}.component-preview-date-range-nav-button::-moz-focus-inner{border:0;padding:0}.component-preview-date-range-day::-moz-focus-inner{border:0;padding:0}.component-preview-date-range-month-trigger::-moz-focus-inner{border:0;padding:0}.component-preview-date-range-picker-pill::-moz-focus-inner{border:0;padding:0}.component-preview-date-range-label{color:var(--text);font-size:14px;font-weight:600;line-height:1.3}.component-preview-date-range-trigger{width:100%;inline-size:100%;border:1px solid var(--border);background:var(--field-bg);min-width:0;max-width:100%;height:56px;min-height:56px;max-height:56px;color:var(--text);text-align:left;cursor:default;box-sizing:border-box;box-shadow:0 1px 2px var(--chrome-shadow-soft);border-radius:16px;grid-template-columns:minmax(0,1fr) 22px;grid-auto-rows:56px;place-items:center stretch;gap:14px;padding:0 16px 0 18px;display:grid;overflow:hidden}.component-preview-date-range-trigger:focus-visible,.component-preview-date-range-trigger[aria-expanded=true]{border-color:var(--accent-strong);box-shadow:0 0 0 2px var(--accent-strong)}.component-preview-date-range-trigger-value{text-indent:0;min-width:0;max-width:100%;color:var(--text);white-space:nowrap;text-overflow:ellipsis;grid-column:1;align-self:center;margin:0;padding:0;font-size:14px;font-weight:500;line-height:1;display:block;position:static;overflow:hidden;transform:none}.component-preview-date-range-trigger[data-placeholder=true] .component-preview-date-range-trigger-value{color:var(--muted);font-weight:400}.component-preview-date-range-trigger-icon{width:22px;min-width:22px;height:22px;min-height:22px;color:var(--muted);flex:0 0 22px;grid-column:2;justify-content:center;place-self:center end;align-items:center;line-height:1;display:inline-flex}.component-preview-date-range-trigger-icon svg{flex:0 0 18px;width:18px;height:18px;display:block}.component-preview-date-range-surface{width:420px;inline-size:420px;border:1px solid var(--border);background:var(--surface-elevated);min-width:0;max-width:420px;height:auto;min-height:0;max-height:none;color:var(--text);box-shadow:0 28px 60px var(--chrome-shadow), 0 0 0 1px #0f172a0a;box-sizing:border-box;contain:none;border-radius:28px;flex-direction:column;flex:none;gap:18px;margin-top:6px;padding:20px 20px 18px;display:flex;overflow:visible}.component-preview-date-range-header{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:20px;width:100%;min-width:0;display:flex}.component-preview-date-range-month-trigger{min-width:0;color:var(--text);white-space:nowrap;cursor:default;align-items:center;gap:8px;font-size:14px;font-weight:600;display:inline-flex}.component-preview-date-range-month-trigger svg{color:var(--accent-strong);flex:none}.component-preview-date-range-nav{flex:none;justify-content:flex-end;align-items:center;gap:14px;display:inline-flex}.component-preview-date-range-nav-button{width:32px;min-width:32px;height:32px;min-height:32px;color:var(--accent-strong);cursor:default;border-radius:999px;justify-content:center;align-items:center;display:inline-flex}.component-preview-date-range-weekdays,.component-preview-date-range-grid{box-sizing:border-box;grid-template-columns:repeat(7,1fr);place-items:center stretch;gap:8px 4px;width:100%;min-width:0;display:grid}.component-preview-date-range-grid{grid-auto-rows:44px}.component-preview-date-range-grid>.canvas-selectable{width:100%;min-width:0;height:44px;min-height:44px;max-height:44px;display:block}.component-preview-date-range-weekday{min-width:0;color:var(--muted);text-align:center;font-size:14px;font-weight:600;line-height:1}.component-preview-date-range-day{width:100%;max-width:100%;height:44px;min-height:44px;max-height:44px;color:var(--text);cursor:default;border-radius:9px;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:visible}.component-preview-date-range-day[data-outside=true]{color:var(--muted);opacity:.58}.component-preview-date-range-day[data-in-range=true]{color:var(--text);background:#d9eefc}.component-preview-date-range-day[data-selected=true]{color:#fff;z-index:1;background:0 0}.component-preview-date-range-day[data-selected=true]:before{content:"";background:var(--accent-strong);z-index:-1;border-radius:999px;position:absolute;inset:4px}.component-preview-date-range-day[data-range-start=true][data-range-end=false]{border-top-right-radius:9px;border-bottom-right-radius:9px}.component-preview-date-range-day[data-range-end=true][data-range-start=false]{border-top-left-radius:9px;border-bottom-left-radius:9px}.component-preview-date-range-day-number{z-index:1;line-height:1;position:relative}.component-preview-date-range-day-dot{opacity:.7;background:currentColor;border-radius:999px;width:4px;height:4px;margin-left:-2px;position:absolute;bottom:5px;left:50%}.component-preview-date-range-time-section{flex-direction:column;flex:none;gap:14px;padding-top:6px;display:flex}.component-preview-date-range-time-row{width:100%;min-width:0;min-height:44px;color:var(--text);flex:none;justify-content:space-between;align-items:center;gap:18px;font-size:14px;font-weight:500;display:flex}.component-preview-date-range-time-input{appearance:none;background:var(--surface-muted);width:164px;min-width:164px;max-width:164px;height:44px;min-height:44px;max-height:44px;color:var(--text);font:inherit;box-sizing:border-box;border:0;border-radius:999px;outline:0;flex:0 0 164px;margin:0;padding:0 16px;line-height:1}.component-preview-date-range-time-input:focus-visible{box-shadow:0 0 0 2px var(--accent-strong)}.component-preview-date-range-summary{min-width:0;color:var(--muted);font-size:12px;font-weight:500;line-height:1.35}.component-preview-date-range-summary strong{color:var(--text)}.component-preview-date-range-month-grid,.component-preview-date-range-year-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.component-preview-date-range-picker-pill{height:42px;min-height:42px;color:var(--text);border-radius:999px;justify-content:center;align-items:center;font-size:14px;font-weight:500;display:inline-flex}.component-preview-date-range-picker-pill[data-selected=true]{background:var(--accent-strong);color:#fff}.component-preview--date-range[data-theme-mode=dark]{--field-bg:#1b1c20;--surface-elevated:#1b1c20;--surface-muted:#2a2b30;--text:#f4f6fb;--muted:#9ca3af;--border:#ffffff1a;--accent-strong:#1683f8;--chrome-shadow:#00000070}.component-preview--date-range[data-theme-mode=dark] .component-preview-date-range-surface{box-shadow:0 28px 64px #0000007a,0 0 0 1px #ffffff0a}.component-preview--date-range[data-theme-mode=dark] .component-preview-date-range-day[data-in-range=true]{color:#f4f6fb;background:#143553}.component-preview--date-range[data-theme-mode=dark] .component-preview-date-range-day[data-outside=true]{color:#6b7280;opacity:.72}
.canvas-modal-reference{box-sizing:border-box;flex-direction:column;gap:36px;width:max-content;min-width:100%;padding:18px 0 32px;display:flex}.canvas-modal-reference-board{box-sizing:border-box;background:#000;border-radius:34px;flex-direction:column;gap:28px;width:max-content;padding:28px;display:flex}.canvas-modal-reference-board[data-theme=light]{background:0 0}.canvas-modal-reference-row{align-items:flex-start;gap:28px;display:flex}.canvas-modal-reference-cell{display:flex}.component-preview-modal-card{color:#15161a;box-sizing:border-box;background:#fff;border:1px solid #11182714;border-radius:32px;flex-direction:column;gap:18px;padding:24px 26px 22px;display:flex;position:relative;box-shadow:0 26px 42px #00000080}.component-preview-modal-card--dark{color:#f5f5f7;background:#1f1f23;border-color:#ffffff14}.component-preview-modal-card--account{text-align:center;align-items:center;width:402px;min-height:404px;padding-top:42px}.component-preview-modal-card--verify{text-align:center;align-items:center;width:408px;min-height:300px;padding-top:42px}.component-preview-modal-card--create,.component-preview-modal-card--success{justify-content:flex-start;width:622px;min-height:280px;padding-top:32px}.component-preview-modal-card--danger{justify-content:flex-start;width:652px;min-height:300px;padding-top:32px}.component-preview-modal-card--invite{justify-content:flex-start;width:404px;min-height:520px;padding-top:28px}.component-preview-modal-close{color:#7d8088;cursor:default;background:#f1f1f4;border:0;border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:absolute;top:20px;right:20px}.component-preview-modal-card--dark .component-preview-modal-close{color:#8e919b;background:#2a2a2f}.component-preview-modal-icon-badge{color:#1f2024;background:#f1f1f4;border-radius:999px;justify-content:center;align-items:center;width:56px;height:56px;display:inline-flex}.component-preview-modal-card--account .component-preview-modal-icon-badge,.component-preview-modal-card--verify .component-preview-modal-icon-badge{margin:0 auto}.component-preview-modal-card--dark .component-preview-modal-icon-badge{color:#f4f4f6;background:#2a2a2f}.component-preview-modal-icon-badge--success{color:#19a85b;background:#dcfae6}.component-preview-modal-icon-badge--danger{color:#ff4d4f;background:#ffe4e6}.component-preview-modal-card--dark .component-preview-modal-icon-badge--success{color:#45d483;background:#16653470}.component-preview-modal-card--dark .component-preview-modal-icon-badge--danger{color:#ff6b6f;background:#7f1d1d61}.component-preview-modal-copy-group{flex-direction:column;gap:10px;display:flex}.component-preview-modal-copy-group--center{text-align:center;align-items:center}.component-preview-modal-title{color:inherit;margin:0;font-size:18px;font-weight:600;line-height:1.24}.component-preview-modal-title--center{font-size:20px}.component-preview-modal-copy{color:#7b8089;max-width:28ch;margin:0;font-size:14px;line-height:1.48}.component-preview-modal-copy--center{max-width:24ch}.component-preview-modal-card--dark .component-preview-modal-copy{color:#a7aab2}.component-preview-modal-button.canvas-button,.component-preview-modal-social-button.canvas-button{letter-spacing:0;min-height:44px;box-shadow:none;border:0;border-radius:999px;padding:0 22px;font-size:14px;font-weight:600}.component-preview-modal-button--wide.canvas-button{width:100%}.component-preview-modal-button--primary.canvas-button{color:#fff;background:#1f8cff;border-color:#1f8cff}.component-preview-modal-button--secondary.canvas-button{color:#22242a;background:#f0f0f2;border-color:#f0f0f2}.component-preview-modal-card--dark .component-preview-modal-button--secondary.canvas-button{color:#f5f5f7;background:#2c2c31;border-color:#2c2c31}.component-preview-modal-divider{color:#7d8088;align-items:center;gap:12px;width:100%;font-size:14px;font-weight:500;display:flex}.component-preview-modal-divider:before,.component-preview-modal-divider:after{content:"";background:#7d808838;flex:auto;height:1px}.component-preview-modal-card--dark .component-preview-modal-divider{color:#8f929b}.component-preview-modal-card--dark .component-preview-modal-divider:before,.component-preview-modal-card--dark .component-preview-modal-divider:after{background:#ffffff14}.component-preview-modal-social-stack{flex-direction:column;gap:12px;width:100%;display:flex}.component-preview-modal-social-button.canvas-button{color:#22242a;background:#f0f0f2;border-color:#f0f0f2;justify-content:center;gap:12px;width:100%}.component-preview-modal-card--dark .component-preview-modal-social-button.canvas-button{color:#f5f5f7;background:#2c2c31;border-color:#2c2c31}.component-preview-modal-social-icon{justify-content:center;align-items:center;width:18px;height:18px;font-size:18px;font-weight:700;line-height:1;display:inline-flex}.component-preview-modal-social-icon--google,.component-preview-modal-social-icon--apple{color:currentColor}.component-preview-modal-code-row{justify-content:center;align-items:center;gap:10px;margin-top:4px;display:flex}.component-preview-modal-code-cell{background:#f1f1f4;border-radius:14px;width:52px;height:52px}.component-preview-modal-card--dark .component-preview-modal-code-cell{background:#2c2c31}.component-preview-modal-code-divider{color:#a1a5ae;font-size:22px;line-height:1}.component-preview-modal-resend{color:#7b8089;margin:0;font-size:14px}.component-preview-modal-card--dark .component-preview-modal-resend{color:#a7aab2}.component-preview-modal-resend-link{color:inherit;text-underline-offset:3px;font-weight:600;text-decoration:underline}.component-preview-modal-actions{justify-content:flex-end;gap:12px;margin-top:auto;display:flex}.component-preview-modal-actions--center{justify-content:center}.component-preview-modal-invite-list{flex-direction:column;gap:18px;display:flex}.component-preview-modal-invite-row{align-items:center;gap:14px;display:flex}.component-preview-modal-invite-avatar{border-radius:999px;flex:none;width:48px;height:48px}.component-preview-modal-invite-avatar--warm{background:radial-gradient(circle at 32% 30%,#fff3d9 0,#ffd868 28%,#ff8b3d 66%,#ff6231 100%)}.component-preview-modal-invite-avatar--mint{background:radial-gradient(circle at 32% 30%,#eafff2 0,#9effc7 28%,#57c9d9 66%,#5c77ff 100%)}.component-preview-modal-invite-avatar--rose{background:radial-gradient(circle at 32% 30%,#ffecec 0,#ffb8c2 28%,#ff6f61 66%,#ff3b30 100%)}.component-preview-modal-invite-meta{flex-direction:column;flex:auto;gap:2px;min-width:0;display:flex}.component-preview-modal-invite-name{color:inherit;font-size:14px;font-weight:600;line-height:1.2}.component-preview-modal-invite-email{color:#7b8089;font-size:14px;line-height:1.3}.component-preview-modal-card--dark .component-preview-modal-invite-email{color:#a7aab2}.component-preview-modal-invite-add{color:inherit;background:0 0;border:0;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.component-preview-modal-checkbox-row{color:inherit;align-items:center;gap:12px;margin-top:8px;font-size:14px;font-weight:500;display:inline-flex}.component-preview-modal-checkbox{color:#fff;background:#1f8cff;border-radius:5px;justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}@media (max-width:1200px){.canvas-modal-reference-board{width:100%}.canvas-modal-reference-row{flex-wrap:wrap}}@media (max-width:760px){.canvas-modal-reference{gap:24px;width:100%;min-width:100%}.canvas-modal-reference-board{width:100%;padding:20px 14px}.canvas-modal-reference-row{flex-direction:column;gap:18px}.canvas-modal-reference-cell{width:100%}.component-preview-modal-card,.component-preview-modal-card--account,.component-preview-modal-card--verify,.component-preview-modal-card--create,.component-preview-modal-card--success,.component-preview-modal-card--danger,.component-preview-modal-card--invite{width:100%;min-height:0}}
.component-preview--toast-showcase{flex-direction:column;gap:24px;width:100%;display:flex}.component-preview-toast-toolbar{flex-direction:column;gap:14px;display:flex}.component-preview-toast-chip-row,.component-preview-toast-variant-row{flex-wrap:wrap;gap:10px;display:flex}.component-preview-toast-chip,.component-preview-toast-variant-chip{border:1px solid var(--border);background:var(--field-bg);color:var(--muted);font:inherit;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}.component-preview-toast-chip.is-active,.component-preview-toast-variant-chip.is-active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}.component-preview-toast-stage{justify-content:flex-start;align-items:flex-start;min-height:0;padding:8px 0 0;display:flex}.component-preview-toast-stage-copy{color:var(--muted);max-width:320px;font-size:13px;line-height:1.4}.component-preview-toast-viewport{pointer-events:none;z-index:1000;box-sizing:border-box;justify-content:flex-end;align-items:flex-end;width:min(100vw - 32px,420px);display:flex;position:fixed;bottom:24px;right:24px}.component-preview-toast-viewport-stack{flex-direction:column;justify-content:flex-end;align-items:stretch;gap:10px;width:100%;display:flex}@media (max-width:640px){.component-preview-toast-viewport{width:calc(100vw - 32px);bottom:16px;right:16px}}@keyframes toast-preview-enter{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.component-preview-toast-viewport-layer{pointer-events:none;justify-content:flex-end;width:100%;animation:.18s cubic-bezier(.22,1,.36,1) toast-preview-enter;display:flex}.component-preview-toast-viewport-layer>.canvas-selectable,.component-preview-toast-viewport-layer .component-preview--toast-card{pointer-events:auto;width:100%}.component-preview--toast-card{border:1px solid var(--border);box-sizing:border-box;border-radius:20px;align-items:flex-start;gap:14px;width:100%;min-width:0;max-width:420px;margin:0 auto;padding:16px 18px;display:flex}.component-preview-toast-icon-wrap{border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.component-preview-toast-content{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.component-preview-toast-title{font-size:14px;font-weight:600;line-height:1.35}.component-preview-toast-message{overflow-wrap:anywhere;font-size:14px;line-height:1.45}.component-preview-toast-actions{flex-shrink:0;align-items:center;gap:8px;margin-left:auto;display:flex}.component-preview-toast-action,.component-preview-toast-close{font:inherit;background:0 0;border:0}.component-preview-toast-action{white-space:nowrap;padding:0;font-size:14px;font-weight:600}.component-preview-toast-close{border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex}.canvas-toast-board{grid-template-columns:repeat(auto-fit,minmax(730px,730px));justify-content:start;gap:24px;width:max-content;min-width:100%;max-width:none;margin:0;display:grid}.canvas-toast-state-panel{border:1px solid var(--border);box-sizing:border-box;background:0 0;border-radius:28px;width:730px;min-width:730px;padding:28px 30px 30px}.canvas-toast-state-heading{color:var(--text);margin:0 0 20px;font-size:14px;font-weight:600}.canvas-toast-grid{grid-template-columns:minmax(0,1fr);gap:18px;display:grid}.canvas-toast-cell{flex-direction:column;align-items:stretch;gap:12px;display:flex}.canvas-toast-panel{box-sizing:border-box;background:0 0;border-radius:24px;width:100%;min-width:0;padding:24px 24px 20px;overflow:visible}.canvas-toast-panel>.canvas-selectable,.canvas-toast-panel .component-preview--toast-card{width:100%;min-width:0;max-width:100%}