@font-face{font-family:Monaspace;src:url(/_astro/syntax.B16YfTun.woff2) format("woff2")}@font-palette-values --github-dark{font-family:Monaspace;override-colors:0 #f97583,1 #68737e,2 #fda5ff,3 #79b8ff,4 #cea5fb,5 #ffffff,6 #d19a66,7 #9ecbff,8 #9ecbff}@font-palette-values --github-light{font-family:Monaspace;override-colors:0 #cf222e,1 #6e7781,2 #000d99,3 #000d99,4 #6639ba,5 #000000,6 #d19a66,7 #000d99,8 #000d99}:root{--scms-font-syntax: "Monaspace"}.custom-code{font-family:var(--scms-font-syntax);font-palette:--github-dark;font-size:14px;line-height:1.6}[data-theme=light]{.custom-code{font-palette:--github-light}}.code-container{min-width:0;padding:16px;margin-right:1rem;background-color:var(--background-step-2)!important;border:1px solid var(--border)!important;border-radius:.25rem;overflow-x:auto}.line.diff{position:relative;z-index:2;align-items:center;display:inline flow-root;width:100%}.line.diff>span{z-index:2;position:relative}.line.diff:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;padding-left:.25rem;user-select:none}.line.diff.ins:after{content:"+";background-color:var(--success-flat-hover);color:var(--success-base)!important;border-left:2px solid var(--success-base);font-family:monospace}.line.diff.del:after{content:"-";background-color:var(--danger-flat-hover);color:var(--danger-base)!important;border-left:2px solid var(--danger-base);font-family:monospace}:root{--component-registry-bg-base: var(--background-base, hsl(0 0% 6%));--component-registry-bg-step-1: var(--background-step-1, hsl(0 0% 8%));--component-registry-bg-step-2: var(--background-step-2, hsl(0, 0%, 9%));--component-registry-bg-step-3: var(--background-step-3, hsl(0, 0%, 12%));--component-registry-text-normal: var(--text-normal, hsl(0 0% 100%));--component-registry-text-dimmed: var(--text-dimmed, hsl(0 0% 100% / .8));--component-registry-text-muted: var(--text-muted, hsl(0 0% 100% / .75));--component-registry-text-inverted: var(--text-inverted, hsl(0 0% 0%));--component-registry-border: var(--border, hsl(240 5% 17%));--component-registry-shadow: var(--shadow, hsl(0 0% 0% / .6));--component-registry-default-base: var(--default-base, hsl(0, 0%, 12%));--component-registry-default-hover: var(--default-hover, hsl(0, 0%, 17%));--component-registry-default-active: var(--default-active, hsl(0, 0%, 14%));--component-registry-primary-base: var(--primary-base, hsl(259, 60%, 75%));--component-registry-primary-hover: var( --primary-hover, hsl(259, 71%, 82%) );--component-registry-primary-active: var( --primary-active, hsl(259, 75%, 77%) );--component-registry-primary-flat: var( --primary-flat, hsl(259 83% 73% / .1) );--component-registry-success-base: var(--success-base, hsl(142, 69%, 46%));--component-registry-success-hover: var( --success-hover, hsl(142, 67%, 59%) );--component-registry-overlay: hsl(0 0% 0% / .6);--component-registry-white: hsl(0 0% 100%);--component-registry-spacing-xs: .25rem;--component-registry-spacing-sm: .375rem;--component-registry-spacing-md: .5rem;--component-registry-spacing-lg: .75rem;--component-registry-spacing-xl: 1rem;--component-registry-spacing-2xl: 1.25rem;--component-registry-radius-sm: 4px;--component-registry-radius-md: 6px;--component-registry-radius-lg: 8px}[data-theme=light]{--component-registry-bg-base: var(--background-base, hsl(0 0% 97%));--component-registry-bg-step-1: var(--background-step-1, hsl(0 0% 95%));--component-registry-bg-step-2: var(--background-step-2, hsl(0, 0%, 92%));--component-registry-bg-step-3: var(--background-step-3, hsl(0, 0%, 89%));--component-registry-text-normal: var(--text-normal, hsl(0 0% 0%));--component-registry-text-dimmed: var(--text-dimmed, hsl(0 0% 0% / .8));--component-registry-text-muted: var(--text-muted, hsl(0 0% 0% / .75));--component-registry-text-inverted: var( --text-inverted, var(--component-registry-white) );--component-registry-border: var(--border, hsl(263 5% 68%));--component-registry-shadow: var(--shadow, hsl(0 0% 65% / .6));--component-registry-default-base: var(--default-base, hsl(0, 0%, 82%));--component-registry-default-hover: var(--default-hover, hsl(0, 0%, 91%));--component-registry-default-active: var(--default-active, hsl(0, 0%, 86%));--component-registry-primary-base: var(--primary-base, hsl(259, 74%, 25%));--component-registry-primary-hover: var( --primary-hover, hsl(259, 76%, 35%) );--component-registry-primary-active: var( --primary-active, hsl(259, 76%, 32%) );--component-registry-primary-flat: var( --primary-flat, hsl(259 83% 73% / .1) );--component-registry-success-base: var(--success-base, hsl(142, 60%, 44%));--component-registry-success-hover: var( --success-hover, hsl(142, 60%, 55%) );--component-registry-overlay: hsl(0 0% 0% / .4)}component-registry-modal{display:inline-block;.modal-overlay{position:fixed;inset:0;background-color:var(--component-registry-overlay);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;transition:opacity .2s ease;&.hidden{opacity:0;pointer-events:none}}.modal-container{background-color:var(--component-registry-bg-step-1);border:1px solid var(--component-registry-border);border-radius:var(--component-registry-radius-lg);box-shadow:0 10px 50px var(--component-registry-shadow);width:90%;max-width:1200px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(0);transition:transform .3s ease}.modal-overlay.hidden .modal-container{transform:translateY(20px)}.modal-header{padding:var(--component-registry-spacing-lg) var(--component-registry-spacing-xl);border-bottom:1px solid var(--component-registry-border);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.25rem;font-weight:600;color:var(--component-registry-text-normal);margin:0}.close-button{background:transparent;border:none;color:var(--component-registry-text-dimmed);font-size:1.5rem;cursor:pointer;padding:var(--component-registry-spacing-xs);line-height:1;transition:color .2s ease;&:hover{color:var(--component-registry-text-normal)}}.modal-body{padding:var(--component-registry-spacing-xl);flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--component-registry-spacing-xl);overflow:hidden}.modal-content-row{display:flex;flex-direction:column;gap:var(--component-registry-spacing-xl);flex:1;min-height:0;overflow:hidden;@media(min-width:768px){flex-direction:row}}.component-list-wrapper{flex:1;min-width:0;min-height:0;overflow-y:auto;padding-right:var(--component-registry-spacing-xs);@media(min-width:768px){padding-right:var(--component-registry-spacing-lg)}&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--component-registry-bg-step-2);border-radius:var(--component-registry-radius-sm)}&::-webkit-scrollbar-thumb{background:var(--component-registry-border);border-radius:var(--component-registry-radius-sm);&:hover{background:var(--component-registry-text-muted)}}}.props-wrapper{flex:1;min-width:0;min-height:0;padding:var(--component-registry-spacing-lg);background-color:var(--component-registry-bg-step-2);border:1px solid var(--component-registry-border);border-radius:var(--component-registry-radius-md);max-width:100%;display:flex;flex-direction:column;&[style*="display: none"]{display:none!important}}.output-wrapper{flex-shrink:0}.component-list{display:grid;gap:var(--component-registry-spacing-md)}.component-card{padding:var(--component-registry-spacing-lg);background-color:var(--component-registry-bg-step-2);border:1px solid var(--component-registry-border);border-radius:var(--component-registry-radius-md);cursor:pointer;transition:all .2s ease;&:hover{background-color:var(--component-registry-bg-step-3);border-color:var(--component-registry-primary-base)}&.selected{display:block;border-color:var(--component-registry-primary-base);background-color:var(--component-registry-primary-flat)}}.component-name{font-size:1rem;font-weight:600;color:var(--component-registry-text-normal);margin:0 0 var(--component-registry-spacing-xs) 0}.component-safe-name{font-size:.875rem;color:var(--component-registry-text-muted);font-family:Courier New,monospace}.props-title{font-size:1rem;font-weight:600;color:var(--component-registry-text-normal);margin:0 0 var(--component-registry-spacing-lg) 0}.prop-group{margin-bottom:var(--component-registry-spacing-lg);display:flex;flex-direction:column}.prop-label{display:block;font-size:.875rem;font-weight:500;color:var(--component-registry-text-dimmed);margin-bottom:var(--component-registry-spacing-xs)}.prop-info{font-size:.75rem;color:var(--component-registry-text-muted);margin-left:var(--component-registry-spacing-xs)}.prop-input{padding:var(--component-registry-spacing-md);background-color:var(--component-registry-bg-step-3);border:1px solid var(--component-registry-border);border-radius:var(--component-registry-radius-sm);color:var(--component-registry-text-normal);font-size:.875rem;font-family:Courier New,monospace;&:focus{outline:none;border-color:var(--component-registry-primary-base)}}.output-section{padding:var(--component-registry-spacing-lg);background-color:var(--component-registry-bg-step-2);border:1px solid var(--component-registry-border);border-radius:var(--component-registry-radius-md)}.output-title{font-size:1rem;font-weight:600;color:var(--component-registry-text-normal);margin:0 0 var(--component-registry-spacing-lg) 0}.output-code{padding:var(--component-registry-spacing-md);background-color:var(--component-registry-bg-base)!important}.button-group{display:flex;gap:var(--component-registry-spacing-md);margin-top:var(--component-registry-spacing-lg)}.button{padding:var(--component-registry-spacing-md) var(--component-registry-spacing-xl);border:1px solid var(--component-registry-border);border-radius:var(--component-registry-radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.button-primary{background-color:var(--component-registry-primary-base);color:var(--component-registry-text-inverted);&:hover{background-color:var(--component-registry-primary-hover)}}.button-success{background-color:var(--component-registry-success-base);color:var(--component-registry-text-inverted);&:hover{background-color:var(--component-registry-success-hover)}}.button-secondary{background-color:var(--component-registry-default-base);color:var(--component-registry-text-normal);&:hover{background-color:var(--component-registry-default-hover)}}.empty-state{text-align:center;padding:var(--component-registry-spacing-2xl);color:var(--component-registry-text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}}