*{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root[data-theme=light]{--primary: #0891b2;--secondary: #06b6d4;--accent: #f59e0b;--background: #f8fafc;--surface: #ffffff;--text: #0f172a;--text-secondary: #475569;--border: #e2e8f0;--primary-alpha: rgba(8, 145, 178, .1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}:root[data-theme=dark]{--primary: #22d3ee;--secondary: #06b6d4;--accent: #fbbf24;--background: #0f172a;--surface: #1e293b;--text: #f1f5f9;--text-secondary: #cbd5e1;--border: #334155;--primary-alpha: rgba(34, 211, 238, .1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3)}body{margin:0;min-width:320px;min-height:100vh;background:var(--background);color:var(--text);transition:background-color .3s ease,color .3s ease}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{line-height:1.2}a{font-weight:500;color:var(--primary);text-decoration:inherit;transition:color .2s ease}a:hover{color:var(--secondary)}button{border:none;cursor:pointer;font-family:inherit;transition:all .2s ease}button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:3px solid var(--background)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.color-bar{display:flex;height:120px}.color-bar-block{flex:1;transition:flex .3s ease;position:relative;display:flex;align-items:center;justify-content:center}.color-bar-block[title="Click to copy"]{cursor:pointer}.color-bar-block:hover{flex:1}.color-bar-block:hover:not(:only-child){flex:1.5}.color-bar-hex{font-size:.75rem;font-family:monospace;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);opacity:0;transition:opacity .2s ease;pointer-events:none}.color-bar-block:hover .color-bar-hex{opacity:1}.theme-card{background:var(--surface);border-radius:1rem;overflow:hidden;cursor:pointer;transition:all .3s ease;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.theme-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.theme-card-colors{height:120px;overflow:hidden}.theme-card-content{padding:1.25rem}.theme-card-title{font-size:1.25rem;font-weight:600;margin:0 0 .5rem;color:var(--text)}.theme-card-description{font-size:.875rem;color:var(--text-secondary);margin:0 0 1rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.theme-card-tags{display:flex;gap:.5rem;flex-wrap:wrap}.theme-tag{font-size:.75rem;padding:.25rem .625rem;background:var(--primary-alpha);color:var(--primary);border-radius:.375rem;font-weight:500}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:2rem;z-index:1000;animation:fadeIn .2s ease;overflow-y:auto}.modal-content{background:var(--surface);border-radius:1.5rem;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease;box-shadow:0 20px 25px -5px #0000004d}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:1.5rem;right:1.5rem;background:var(--background);border:none;width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;font-size:1.25rem;color:var(--text);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.modal-close:hover{background:var(--primary);color:#fff;transform:rotate(90deg)}.modal-header{padding:2.5rem 2.5rem 1.5rem;border-bottom:1px solid var(--border)}.modal-title{font-size:2rem;font-weight:700;margin:0 0 .75rem;color:var(--text)}.modal-description{font-size:1rem;color:var(--text-secondary);margin:0 0 1rem;line-height:1.6}.modal-tags-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.modal-tags{display:flex;gap:.5rem;flex-wrap:wrap}.copy-prompt-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.625rem 1.25rem;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #10b9814d;white-space:nowrap}.copy-prompt-button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.copy-prompt-button:active{transform:translateY(0);box-shadow:0 2px 6px #10b9814d}.modal-header-colors{height:80px;margin:0;border-radius:.75rem;overflow:hidden}.modal-header-colors .color-bar{height:100%;border-radius:.75rem}.modal-tag{font-size:.875rem;padding:.375rem .875rem;background:var(--primary-alpha);color:var(--primary);border-radius:.5rem;font-weight:500}.modal-body{padding:2rem 2.5rem}.modal-section{margin-bottom:2.5rem}.modal-section:last-child{margin-bottom:0}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.section-title{font-size:1.25rem;font-weight:600;margin:0;color:var(--text)}.collapsible-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 0;transition:opacity .2s ease;margin-bottom:1rem}.collapsible-header:hover{opacity:.7}.collapse-icon{font-size:.875rem;color:var(--text-secondary);transition:transform .25s cubic-bezier(.4,0,.2,1);display:inline-block}.collapse-icon.collapsed{transform:rotate(90deg)}.collapsible-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);opacity:1;transform:scale(1) translateY(0)}.collapsible-content>*{overflow:hidden}.collapsible-content.collapsed{grid-template-rows:0fr;opacity:0;transform:scale(.95) translateY(-8px)}.preview-mode-toggle{display:flex;gap:.5rem;background:var(--background);padding:.25rem;border-radius:.5rem}.mode-toggle-btn{padding:.5rem 1rem;background:transparent;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.mode-toggle-btn.active{background:var(--primary);color:#fff}.mode-toggle-btn:hover:not(.active){background:var(--surface);color:var(--text)}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.color-swatch{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--background);border-radius:.75rem;transition:transform .2s ease}.color-swatch:hover{transform:translateY(-2px)}.color-swatch-box{width:3rem;height:3rem;border-radius:.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--border)}.color-swatch-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.color-swatch-label{font-size:.875rem;font-weight:500;color:var(--text)}.color-swatch-value{font-size:.75rem;color:var(--text-secondary);font-family:monospace}.interactive-states-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.state-demo{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--background);border-radius:.75rem;align-items:center}.state-label{font-size:.875rem;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.05em}.state-preview-button{padding:.75rem 1.5rem;border:none;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);width:100%;max-width:200px}.state-preview-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.state-preview-button.state-active{transform:translateY(1px);box-shadow:inset 0 2px 4px #0003}.state-color-value{font-size:.75rem;color:var(--text-secondary);font-family:monospace;text-align:center}.typography-showcase{background:var(--background);padding:1.5rem;border-radius:.75rem}.typography-item{display:flex;gap:.5rem;margin-bottom:.75rem}.typography-label{font-weight:600;color:var(--text)}.typography-value{color:var(--text-secondary);font-family:monospace;font-size:.875rem}.typography-preview{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.typography-preview h1{font-size:2rem;margin:0 0 .75rem;color:var(--text)}.typography-preview p{font-size:1rem;margin:0;color:var(--text-secondary);line-height:1.6}.design-elements{display:flex;flex-direction:column;gap:2rem;background:var(--background);padding:1.5rem;border-radius:.75rem}.element-showcase{display:flex;flex-direction:column;gap:1rem}.element-label{font-weight:600;color:var(--text)}.element-demo{width:150px;height:80px}.element-value{font-size:.875rem;color:var(--text-secondary);font-family:monospace}.shadow-demos{display:flex;gap:1.5rem;flex-wrap:wrap}.shadow-demo{width:100px;height:80px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:500;color:var(--text-secondary)}.font-size-scale{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.subsection-title{font-size:1rem;font-weight:600;margin:0 0 1rem;color:var(--text)}.font-size-item{margin-bottom:.75rem;color:var(--text);display:flex;align-items:baseline;gap:.5rem}.live-preview{background:var(--background);padding:1.5rem;border-radius:.75rem}.preview-components{min-height:200px}.modal-footer{padding:1.5rem 2.5rem 2.5rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:1rem}.export-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.copy-button{background:#2563eb;color:#fff;border:none;padding:.75rem 1.25rem;border-radius:.75rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);flex:1;min-width:140px}.copy-button:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:var(--shadow-md)}.copy-button:active{transform:translateY(0)}.share-button{background:#7c3aed;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.75rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);width:100%}.share-button:hover{background:#6d28d9;transform:translateY(-2px);box-shadow:var(--shadow-md)}.toast-notification{position:fixed;bottom:2rem;right:2rem;background:var(--surface);color:var(--text);padding:1rem 1.5rem;border-radius:.75rem;box-shadow:var(--shadow-lg);z-index:10000;animation:slideInUp .3s ease;border:1px solid var(--border);max-width:400px}@keyframes slideInUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.section-title:not(.section-header .section-title){margin-bottom:1.25rem}@media (max-width: 768px){.modal-content{margin:1rem;max-height:calc(100vh - 2rem)}.modal-header,.modal-body,.modal-footer{padding-left:1.5rem;padding-right:1.5rem}.color-grid,.interactive-states-grid{grid-template-columns:1fr}.export-buttons{flex-direction:column}.copy-button{min-width:auto}.toast-notification{bottom:1rem;right:1rem;left:1rem;max-width:none}.section-header{flex-direction:column;align-items:flex-start;gap:1rem}.preview-mode-toggle{width:100%}.mode-toggle-btn{flex:1}}.search-container{width:100%;max-width:1400px;margin:0 auto;padding:0 2rem 2rem;animation:slideDown .4s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.search-bar{display:flex;flex-direction:column;gap:.75rem}.search-input-wrapper{position:relative;display:flex;align-items:center;background:var(--surface);border:2px solid var(--border);border-radius:1rem;padding:0 1.25rem;transition:all .3s ease;box-shadow:var(--shadow-sm)}.search-input-wrapper:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-alpha),var(--shadow-md);transform:translateY(-2px)}.search-icon{color:var(--text-secondary);flex-shrink:0;transition:color .3s ease}.search-input-wrapper:focus-within .search-icon{color:var(--primary)}.search-input{flex:1;border:none;outline:none;padding:1rem 1rem 1rem .75rem;font-size:1rem;background:transparent;color:var(--text);font-family:inherit}.search-input::placeholder{color:var(--text-secondary);opacity:.7}.search-clear{background:var(--background);border:1px solid var(--border);width:2rem;height:2rem;border-radius:50%;cursor:pointer;font-size:.875rem;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;margin-left:.5rem}.search-clear:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:rotate(90deg)}.search-results-count{text-align:center;font-size:.875rem;color:var(--text-secondary);padding:.5rem;animation:fadeIn .3s ease}.search-results-count span{background:var(--background);padding:.5rem 1rem;border-radius:.5rem;display:inline-block;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.no-results{text-align:center;padding:3rem 2rem;color:var(--text-secondary)}.no-results h3{font-size:1.5rem;margin:0 0 .5rem;color:var(--text)}.no-results p{font-size:1rem;margin:0}@media (max-width: 768px){.search-container{padding:0 1.5rem 1.5rem}.search-input-wrapper{padding:0 1rem}.search-input{padding:.875rem .875rem .875rem .5rem;font-size:.9375rem}.search-results-count{font-size:.8125rem}}.loading-animation-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:2rem;gap:2rem}.animation-wrapper{width:300px;height:300px;display:flex;align-items:center;justify-content:center;position:relative}.loading-text{font-size:1.125rem;color:var(--muted-foreground);animation:pulse 2s ease-in-out infinite}.endless-tetris{position:relative;width:100%;height:100%;overflow:hidden}.endless-tetris-block{position:absolute;border-radius:4px;box-shadow:0 4px 8px #0000004d;opacity:0}@keyframes endlessBlockFall{0%{top:-100px;opacity:0;transform:scale(1)}3%{opacity:1}15%{top:var(--final-top);transform:scale(1)}18%{top:calc(var(--final-top) - 8px);transform:scale(1)}21%{top:var(--final-top);transform:scale(1)}24%{top:calc(var(--final-top) - 3px);transform:scale(1)}27%,65%{top:var(--final-top);opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1) rotateY(0)}85%{opacity:0;transform:scale(.8) rotateY(90deg)}to{top:var(--final-top);opacity:0;transform:scale(.5) rotateY(180deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--background)}.header{background:var(--surface);border-bottom:1px solid var(--border);padding:1.5rem 2rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;align-items:center;gap:.75rem}.header-text{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.header-logo{width:auto;height:4.5rem;display:block;flex-shrink:0}.app-title{font-size:2rem;font-weight:700;margin:0;color:var(--text);background:linear-gradient(90deg,#22d3ee,#a78bfa,#ff006e,#fbbf24,#22d3ee,#a78bfa);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:0% 50%}to{background-position:200% 50%}}.app-subtitle{font-size:.875rem;color:var(--text-secondary);margin:0}.theme-toggle{background:var(--background);border:1px solid var(--border);width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:var(--shadow-sm)}.theme-toggle:hover{transform:rotate(180deg);border-color:var(--primary)}.main{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:3rem 0}.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;animation:fadeInUp .6s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.footer{background:var(--surface);border-top:1px solid var(--border);padding:2rem;text-align:center}.footer p{margin:0;color:var(--text-secondary);font-size:.875rem}.no-results{text-align:center;padding:4rem 2rem;animation:fadeIn .4s ease}.no-results h3{font-size:1.75rem;font-weight:600;margin:0 0 .75rem;color:var(--text)}.no-results p{font-size:1rem;margin:0;color:var(--text-secondary)}@media (max-width: 768px){.header{padding:1rem 1.5rem}.header-logo{height:3.5rem}.app-title{font-size:1.5rem}.app-subtitle{font-size:.75rem}.main{padding:2rem 0}.no-results{padding:3rem 1.5rem}.no-results h3{font-size:1.5rem}.themes-grid{grid-template-columns:1fr;gap:1.5rem}.theme-toggle{width:2.5rem;height:2.5rem;font-size:1.25rem}}