.preview-container{width:100%;height:100%;position:relative;overflow:hidden}.gallery{padding:2rem 0}.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem}.filters button{padding:.5rem 1rem;border:1px solid #ddd;background:#fff;border-radius:30px;cursor:pointer;transition:all .3s ease}.filters button:hover{background-color:#f0f0f0}.filters button.active{background-color:#61dafb;color:#000;border-color:#61dafb}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.card{border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0000001a;transition:transform .3s ease,box-shadow .3s ease;background:#fff;cursor:pointer}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #00000026}.thumbnail{height:200px;position:relative;overflow:hidden}.info{padding:1.5rem}.card h3{margin:0 0 .5rem;color:#333}.info p{margin:0 0 1rem;color:#666;font-size:.9rem;line-height:1.4}.theme{display:inline-block;padding:.3rem .7rem;background:#f0f0f0;border-radius:20px;font-size:.8rem;color:#666}.particles-canvas{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0f172a}.hero-container{position:relative;height:90vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.background-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.content{position:relative;z-index:2;text-align:center;color:#fff;max-width:800px;padding:2rem;background-color:#00000080;border-radius:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.hero-container h1{font-size:3.5rem;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}.hero-container p{font-size:1.5rem;margin-bottom:2rem;line-height:1.5}.hero-container button{padding:.8rem 2rem;font-size:1.2rem;background-color:#61dafb;color:#000;border:none;border-radius:5px;cursor:pointer;transition:all .3s ease}.hero-container button:hover{background-color:#00c4ff;transform:scale(1.05)}:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent: #38bdf8;--accent-hover: #0ea5e9;--success: #10b981;--danger: #ef4444;--radius: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--shadow: 0 10px 30px -5px rgba(0, 0, 0, .3);--font-mono: "JetBrains Mono", "Fira Code", monospace}.background-detail{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100vh;position:relative}.header{position:relative;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);z-index:50}.header h1{font-size:1.5rem;font-weight:700;background:linear-gradient(90deg,var(--accent),#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}.back-button{display:inline-flex;align-items:center;color:var(--text-secondary);text-decoration:none;font-weight:500;transition:var(--transition);padding:.5rem 1rem;border-radius:var(--radius);background:#ffffff0d}.back-button:hover{color:var(--text-primary);background:#ffffff1a;transform:translateY(-2px)}.split-view{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:calc(100vh - 80px);position:relative;overflow:hidden}@media (min-width: 1024px){.split-view{grid-template-columns:1fr 1fr;grid-template-rows:1fr}}.preview-section{position:relative;overflow:hidden;background-color:var(--bg-secondary);display:flex;align-items:center;justify-content:center}.preview-container{position:absolute;top:0;left:0;width:100%;height:100%;transition:var(--transition)}.preview-info{position:absolute;bottom:1.5rem;left:1.5rem;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem;border-radius:var(--radius);max-width:400px;transform:translateY(0);transition:var(--transition);border:1px solid rgba(255,255,255,.1)}.preview-info h2{font-size:1.25rem;margin-bottom:.5rem;color:var(--accent)}.preview-info p{color:var(--text-secondary);font-size:.875rem;line-height:1.6}.preview-section:hover .preview-info{transform:translateY(-10px)}.code-section{background-color:var(--bg-secondary);position:relative;overflow:hidden;display:flex;flex-direction:column}.code-tabs{display:flex;padding:.5rem;background-color:var(--bg-tertiary);border-bottom:1px solid rgba(255,255,255,.1)}.code-tab{background:none;border:none;padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius);transition:var(--transition);margin-right:.5rem}.code-tab:hover{color:var(--text-primary);background:#ffffff0d}.code-tab.active{color:var(--text-primary);background:#38bdf826}.code-content{flex:1;overflow:auto;padding:1rem;position:relative}.code-block{position:relative;background-color:var(--bg-primary);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:var(--bg-tertiary);border-bottom:1px solid rgba(255,255,255,.1)}.code-header h3{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.code-actions{display:flex;gap:.5rem}.code-action-button{background:none;border:none;color:var(--text-secondary);font-size:.75rem;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.25rem}.code-action-button:hover{color:var(--text-primary);background:#ffffff1a}.code-action-button.copy{background-color:#38bdf826}.code-action-button.copy:hover{background-color:#38bdf840}.code-action-button.copied{background-color:#10b98126;color:var(--success)}.code{flex:1;margin:0;padding:1rem;overflow-x:auto;font-family:var(--font-mono);font-size:.875rem;line-height:1.7;color:var(--text-primary);background-color:var(--bg-primary)}.toggle-view{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;background-color:var(--accent);color:#fff;border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);transition:var(--transition)}.toggle-view:hover{background-color:var(--accent-hover);transform:translate(-50%,-50%) scale(1.1)}@media (min-width: 1024px){.toggle-view{left:calc(50% - 20px)}}.expand-button{position:absolute;top:1rem;right:1rem;background-color:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:var(--transition)}.expand-button:hover{color:var(--text-primary);background-color:#0f172ae6;transform:scale(1.1)}.split-view.preview-expanded .preview-section{grid-column:1 / -1;grid-row:1 / -1}.split-view.preview-expanded .code-section{display:none}.split-view.code-expanded .code-section{grid-column:1 / -1;grid-row:1 / -1}.split-view.code-expanded .preview-section{display:none}.code-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-primary);z-index:100;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:var(--transition)}.code-overlay.open{opacity:1;visibility:visible}.overlay-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:var(--bg-tertiary);border-bottom:1px solid rgba(255,255,255,.1)}.overlay-header h2{font-size:1.25rem;color:var(--accent)}.close-overlay{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;transition:var(--transition)}.close-overlay:hover{color:var(--danger);transform:rotate(90deg)}.overlay-content{flex:1;overflow:auto;padding:1rem}.overlay-code{height:100%;margin:0;padding:1.5rem;overflow-x:auto;font-family:var(--font-mono);font-size:1rem;line-height:1.7;color:var(--text-primary);background-color:var(--bg-secondary);border-radius:var(--radius)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeIn .3s ease forwards}@media (max-width: 768px){.header{flex-direction:column;align-items:flex-start;gap:1rem}.code-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:.5rem}.preview-info{left:1rem;right:1rem;bottom:1rem;max-width:none}}*{box-sizing:border-box;padding:0;margin:0}html,body{max-width:100vw;overflow-x:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333;background-color:#f9f9f9}a{color:inherit;text-decoration:none}button{font-family:inherit}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}code{font-family:Courier New,Courier,monospace}