.component-preview{border:1px solid var(--cds-border-subtle);background:var(--cds-background);border-radius:4px;overflow:hidden}.component-preview--loading{min-height:160px}.component-preview--error{min-height:100px}.component-preview--live{background:0 0;border:none;border-radius:0;flex-direction:column;width:100%;height:100%;display:flex}.component-preview__skeleton{flex-direction:column;display:flex}.component-preview__skeleton-media{background:var(--cds-skeleton-element);height:160px}.component-preview__skeleton-footer{padding:var(--cds-spacing-03) var(--cds-spacing-04)}.component-preview__error{align-items:center;gap:var(--cds-spacing-03);padding:var(--cds-spacing-05);color:var(--cds-text-secondary);display:flex}.component-preview__media{border-bottom:1px solid var(--cds-border-subtle);background-color:#0000;position:relative}.component-preview__frame,.component-preview__image{display:block}.component-preview__media--live{background:0 0;border-bottom:none;flex:1;display:flex}.component-preview__image--live{object-fit:contain;width:100%;height:100%}.component-preview__live-iframe--live{width:100%;height:100%}.component-preview__media-empty{justify-content:center;align-items:center;gap:var(--cds-spacing-03);height:100%;min-height:80px;color:var(--cds-text-secondary);flex-direction:column;display:flex}.component-preview__live-iframe{border:none;display:block}.component-preview__expand-button{top:var(--cds-spacing-03);right:var(--cds-spacing-03);z-index:3;gap:var(--cds-spacing-02);opacity:0;transition:opacity var(--cds-duration-fast-01) var(--cds-standard-easing);display:flex;position:absolute}.component-preview__expand-button .cds--btn{box-shadow:0 1px 4px #00000040;background:var(--cds-layer-02)!important}.component-preview__expand-button .cds--btn:hover{background:var(--cds-layer-hover)!important}.component-preview:hover .component-preview__expand-button{opacity:1}.component-preview__header-comments{align-items:center;gap:var(--cds-spacing-01);cursor:pointer;color:var(--cds-text-secondary);white-space:nowrap;transition:color var(--cds-duration-fast-01) var(--cds-standard-easing);background:0 0;border:none;padding:0;display:inline-flex}.component-preview__header-comments:hover{color:var(--cds-text-primary)}.component-preview__header-comments--active{color:var(--cds-interactive)}.component-preview__header-comments--active:hover{color:var(--cds-interactive-hover)}@media (max-width:671px){.component-preview__expand-button{opacity:1}}.component-preview-modal__expandable-wrapper{flex-direction:column;display:flex}.component-preview-modal{flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.component-preview-modal__comments-button{box-shadow:0 2px 8px #0000004d;background:var(--cds-layer-02)!important;color:var(--cds-text-primary)!important}.component-preview-modal__comments-button:hover{background:var(--cds-layer-hover)!important}.component-preview-modal__locate-banner{padding:var(--cds-spacing-02) var(--cds-spacing-05);border-bottom:1px solid var(--cds-border-subtle);background:var(--cds-layer-01);padding-right:calc(var(--cds-spacing-09)*4);flex:none;align-items:center;display:flex}.component-preview-modal__hint-anchor{top:var(--cds-spacing-05);z-index:11;pointer-events:none;position:absolute;left:50%;transform:translate(-50%)}.component-preview-modal__hint-anchor>*{pointer-events:auto}.component-preview-modal__body{background-color:var(--cds-background);background-image:radial-gradient(circle, var(--cds-border-subtle-01) 1px, transparent 1px);background-size:16px 16px;flex:1;position:relative;overflow:hidden}.component-preview-modal__preview-frame{position:absolute;inset:0}.component-preview-modal__preview-frame .preview-frame__zoom-pill{bottom:var(--cds-spacing-05);right:var(--cds-spacing-05);z-index:10}.component-preview-modal__screenshot{border-radius:4px;max-width:100%;height:auto;display:block;box-shadow:0 4px 24px #0006}.component-preview-modal__no-screenshot{justify-content:center;align-items:center;gap:var(--cds-spacing-04);color:var(--cds-text-secondary);padding:var(--cds-spacing-07);flex-direction:column;display:flex}.component-preview-modal__live-iframe{border:none;border-radius:4px;width:100%;height:100%;display:block;box-shadow:0 4px 24px #0006}.component-preview-modal__anatomy-wrapper,.component-preview-modal__state-map-wrapper{position:absolute;inset:0;overflow:hidden}.component-preview-modal__wireframe-wrapper{justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.component-preview-modal__wireframe-canvas{width:100%;height:100%}.component-preview-modal__wireframe-empty{justify-content:center;align-items:center;gap:var(--cds-spacing-04);color:var(--cds-text-secondary);padding:var(--cds-spacing-07);flex-direction:column;display:flex}.component-preview-modal__code-wrapper{padding:var(--cds-spacing-05);position:absolute;inset:0;overflow:auto}.component-preview-modal__code-block{white-space:pre;color:var(--cds-text-primary);background:0 0;margin:0;font-size:.75rem;line-height:1.5}.component-preview-modal__code-block code{font-family:var(--cds-code-01-font-family,"IBM Plex Mono", monospace)}.component-preview-modal__storybook-wrapper{padding:var(--cds-spacing-05);position:absolute;inset:0;overflow:auto}.component-preview-modal__image-container{line-height:0;display:inline-block;position:relative}