.responsive-preview-wrapper{gap:var(--sparkle-spacing-md,1rem);margin:var(--sparkle-spacing-lg,1.5rem) 0;background:var(--sl-color-gray-1);border:1px solid var(--sl-color-gray-3);border-radius:var(--sparkle-border-radius-lg,.75rem);padding:var(--sparkle-spacing-md,1rem);flex-direction:column;display:flex}.responsive-preview-wrapper .responsive-preview-header{gap:var(--sparkle-spacing-sm,.5rem);padding-bottom:var(--sparkle-spacing-sm,.5rem);border-bottom:1px solid var(--sl-color-gray-3);flex-direction:column;display:flex}.responsive-preview-wrapper .responsive-preview-title{font-size:var(--sparkle-font-size-lg,1.125rem);color:var(--sl-color-text);font-weight:600;font-family:var(--sparkle-font-family-sans,system-ui, sans-serif);margin:0}.responsive-preview-wrapper .responsive-preview-controls{gap:var(--sparkle-spacing-xs,.25rem);flex-wrap:wrap;display:flex}.responsive-preview-wrapper .viewport-button{align-items:center;gap:var(--sparkle-spacing-xs,.25rem);padding:var(--sparkle-spacing-xs,.25rem) var(--sparkle-spacing-sm,.5rem);background:var(--sl-color-white);border:1px solid var(--sl-color-gray-3);border-radius:var(--sparkle-border-radius-md,.5rem);cursor:pointer;font-size:var(--sparkle-font-size-sm,.875rem);font-family:var(--sparkle-font-family-sans,system-ui, sans-serif);color:var(--sl-color-text);transition:all .2s;display:inline-flex}.responsive-preview-wrapper .viewport-button:hover{background:var(--sl-color-gray-2);border-color:var(--sl-color-gray-4)}.responsive-preview-wrapper .viewport-button.active{background:var(--sl-color-blue);border-color:var(--sl-color-blue);color:var(--sl-color-white);font-weight:600}.responsive-preview-wrapper .viewport-button .viewport-icon{font-size:var(--sparkle-font-size-base,1rem)}.responsive-preview-wrapper .viewport-button .viewport-label{white-space:nowrap}.responsive-preview-wrapper .responsive-preview-dimensions{padding:var(--sparkle-spacing-xs,.25rem);background:var(--sl-color-gray-2);border-radius:var(--sparkle-border-radius-sm,.25rem);justify-content:center;display:flex}.responsive-preview-wrapper .dimension-label{font-size:var(--sparkle-font-size-xs,.75rem);font-family:var(--sparkle-font-family-mono,monospace);color:var(--sl-color-text-accent);font-weight:600}.responsive-preview-wrapper .responsive-preview-container{padding:var(--sparkle-spacing-md,1rem);background:var(--sl-color-white);border-radius:var(--sparkle-border-radius-md,.5rem);justify-content:center;align-items:flex-start;display:flex;overflow:auto hidden}.responsive-preview-wrapper .responsive-preview-container.with-frame{background:var(--sl-color-gray-2);padding:var(--sparkle-spacing-lg,1.5rem)}.responsive-preview-wrapper .responsive-preview-content{background:var(--sl-color-white);border:1px solid var(--sl-color-gray-3);border-radius:var(--sparkle-border-radius-md,.5rem);box-shadow:var(--sparkle-shadow-md,0 4px 6px -1px #0000001a);padding:var(--sparkle-spacing-md,1rem);overflow:hidden}.responsive-preview-wrapper .responsive-preview-content.mobile{border-radius:var(--sparkle-border-radius-xl,1rem);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.responsive-preview-wrapper .responsive-preview-content.tablet{border-radius:var(--sparkle-border-radius-lg,.75rem)}.responsive-preview-wrapper .responsive-preview-content.desktop{border-radius:var(--sparkle-border-radius-md,.5rem)}.multi-viewport-preview{gap:var(--sparkle-spacing-lg,1.5rem);margin:var(--sparkle-spacing-lg,1.5rem) 0;padding:var(--sparkle-spacing-md,1rem);background:var(--sl-color-gray-1);border:1px solid var(--sl-color-gray-3);border-radius:var(--sparkle-border-radius-lg,.75rem);grid-template-columns:1fr;display:grid}.multi-viewport-preview .multi-viewport-item{gap:var(--sparkle-spacing-sm,.5rem);flex-direction:column;display:flex}.multi-viewport-preview .multi-viewport-header{align-items:center;gap:var(--sparkle-spacing-sm,.5rem);padding:var(--sparkle-spacing-xs,.25rem) var(--sparkle-spacing-sm,.5rem);background:var(--sl-color-gray-2);border-radius:var(--sparkle-border-radius-sm,.25rem);display:flex}.multi-viewport-preview .multi-viewport-header .viewport-icon{font-size:var(--sparkle-font-size-base,1rem)}.multi-viewport-preview .multi-viewport-header .viewport-name{font-weight:600;font-size:var(--sparkle-font-size-sm,.875rem);color:var(--sl-color-text)}.multi-viewport-preview .multi-viewport-header .viewport-dimensions{font-size:var(--sparkle-font-size-xs,.75rem);font-family:var(--sparkle-font-family-mono,monospace);color:var(--sl-color-text-accent);margin-left:auto}.multi-viewport-preview .multi-viewport-content{background:var(--sl-color-white);border:1px solid var(--sl-color-gray-3);border-radius:var(--sparkle-border-radius-md,.5rem);padding:var(--sparkle-spacing-md,1rem);box-shadow:var(--sparkle-shadow-sm,0 1px 3px 0 #0000001a);overflow:hidden}[data-theme=dark] .responsive-preview-wrapper,[data-theme=dark] .multi-viewport-preview{background:var(--sl-color-gray-6);border-color:var(--sl-color-gray-5)}[data-theme=dark] .responsive-preview-wrapper .viewport-button{background:var(--sl-color-gray-6);border-color:var(--sl-color-gray-5);color:var(--sl-color-white)}[data-theme=dark] .responsive-preview-wrapper .viewport-button:hover{background:var(--sl-color-gray-5)}[data-theme=dark] .responsive-preview-wrapper .responsive-preview-container,[data-theme=dark] .responsive-preview-wrapper .responsive-preview-content,[data-theme=dark] .multi-viewport-preview .multi-viewport-content{background:var(--sl-color-gray-6);border-color:var(--sl-color-gray-5)}[data-theme=dark] .responsive-preview-wrapper .responsive-preview-dimensions,[data-theme=dark] .multi-viewport-preview .multi-viewport-header{background:var(--sl-color-gray-5)}@media (max-width:768px){.responsive-preview-wrapper{padding:var(--sparkle-spacing-sm,.5rem)}.responsive-preview-wrapper .responsive-preview-controls{width:100%}.responsive-preview-wrapper .viewport-button{flex:1;justify-content:center}.responsive-preview-wrapper .viewport-button .viewport-label{font-size:var(--sparkle-font-size-xs,.75rem)}.responsive-preview-wrapper .responsive-preview-container{padding:var(--sparkle-spacing-sm,.5rem)}.responsive-preview-wrapper .responsive-preview-container.with-frame{padding:var(--sparkle-spacing-md,1rem)}}@media (min-width:768px){.responsive-preview-wrapper .responsive-preview-header{flex-direction:row;justify-content:space-between;align-items:center}.multi-viewport-preview{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}}@media (min-width:1024px){.multi-viewport-preview{grid-template-columns:repeat(3,1fr)}}.responsive-preview-wrapper .viewport-button:focus-visible{outline:2px solid var(--sl-color-blue);outline-offset:2px}.responsive-preview-wrapper:not(:has(.responsive-preview-content)){justify-content:center;align-items:center;min-height:400px;display:flex}.responsive-preview-wrapper:not(:has(.responsive-preview-content)):before{content:"Loading preview...";color:var(--sl-color-text);font-size:var(--sparkle-font-size-sm,.875rem);opacity:.5}