.backgrounds-container{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);padding:var(--space-3xl) var(--page-gutter);position:relative}.backgrounds-wrapper{max-width:var(--content-normal);margin:0 auto;position:relative;z-index:10}.backgrounds-header-section{position:relative;margin:var(--space-2xl) 0}.backgrounds-header{text-align:left;padding-bottom:var(--space-xl);border-bottom:var(--border-width) solid var(--gradient-primary-subtle)}.page-intro{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:var(--space-lg) 0 0 0}.patterns-section{margin:var(--space-2xl) 0}.patterns-list{display:flex;flex-direction:column;gap:var(--space-sm)}.pattern-item{border:var(--border-width) solid var(--gradient-primary-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration-base) var(--ease-out)}.pattern-item:hover{border-color:var(--accent-primary)}.pattern-item.expanded{border-color:var(--accent-primary);box-shadow:var(--shadow-lg) var(--accent-secondary)}.pattern-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);background:var(--bg-primary);border:none;cursor:pointer;text-align:left;transition:background var(--duration-fast) var(--ease-out)}.pattern-header:hover{background:var(--bg-secondary)}.pattern-info{flex:1;min-width:0}.pattern-name{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--space-xs) 0}.pattern-description{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:var(--leading-relaxed)}.pattern-meta{display:flex;align-items:center;gap:var(--space-md);flex-shrink:0}.engine-badge{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em}.expand-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--bg-secondary);color:var(--text-secondary);transition:all var(--duration-base) var(--ease-out)}.pattern-item.expanded .expand-icon{transform:rotate(180deg);background:var(--accent-primary);color:var(--bg-primary)}.pattern-preview{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-base) var(--ease-out);background:var(--bg-secondary)}.pattern-item.expanded .pattern-preview{grid-template-rows:1fr}.pattern-preview>*{overflow:hidden}.preview-container{position:relative;height:300px;min-height:0}.pattern-item:not(.expanded) .preview-container{height:0}.pattern-item.expanded .preview-container{height:300px}.preview-container .webgl-background-container,.preview-container .p5-background-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.preview-container .p5-background-container canvas{display:block}.preview-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary)}.loading-text{font-size:var(--text-sm);opacity:.7}.preview-error{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-size:var(--text-sm)}.preview-actions{display:flex;justify-content:flex-end;padding:var(--space-md) var(--space-lg);background:var(--bg-primary);border-top:var(--border-width) solid var(--gradient-primary-subtle);min-height:0}.pattern-item:not(.expanded) .preview-actions{padding:0;border:none}.theme-toggle-button{position:fixed;bottom:var(--space-xl);right:var(--space-xl);width:48px;height:48px;border-radius:var(--radius-full);z-index:var(--z-sticky)}@media (max-width: 768px){.backgrounds-container{padding:var(--space-xl) var(--page-gutter)}.pattern-header{padding:var(--space-md) var(--space-lg);flex-wrap:wrap}.pattern-meta{width:100%;justify-content:space-between;margin-top:var(--space-sm)}.preview-container,.pattern-item.expanded .preview-container{height:250px}.theme-toggle-button{bottom:var(--space-lg);right:var(--space-lg);width:44px;height:44px}}@media (max-width: 480px){.backgrounds-container{padding:var(--space-lg) var(--space-md)}.pattern-header{padding:var(--space-md)}.preview-container,.pattern-item.expanded .preview-container{height:200px}}