*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a24;--border-color: #2a2a3a;--text-primary: #e4e4e7;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-muted2: #51515a;--accent: #8b5cf6;--accent-hover: #a78bfa;--accent-bright: #c4b5fd;--terminal-bg: #0d0d12;--terminal-btn-close: #ff5f57;--terminal-btn-minimize: #febc2e;--terminal-btn-maximize: #28c840;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Roboto,sans-serif;line-height:1.6;font-weight:400;color-scheme:dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}a{font-weight:500;color:var(--accent);text-decoration:inherit}a:hover{color:var(--accent-hover)}h1{font-size:3.2em;line-height:1.1}.container{max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:2rem}.header{text-align:center;padding:2rem 0}.title{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--terminal-btn-close),var(--terminal-btn-minimize),#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.75rem;letter-spacing:-1px}.subtitle{color:var(--text-secondary);font-size:1.1rem}.top-row{display:grid;grid-template-columns:1fr;gap:1rem;margin:0 auto 2rem;width:100%;max-width:800px}.top-row.has-image{grid-template-columns:1fr 200px}.left-section{min-width:0}.right-section{width:200px;height:200px;flex-shrink:0}.image-thumbnail{width:200px;height:200px;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);object-fit:contain;background:var(--bg-secondary)}.drop-zone{border:2px dashed var(--border-color);border-radius:1rem;padding:1.5rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--bg-secondary);height:200px;width:100%;display:flex;flex-direction:column;justify-content:center}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:#8b5cf60d}.drop-zone.drag-over{transform:scale(1.02)}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:.75rem}.drop-icon{width:2.5rem;height:2.5rem;color:var(--text-muted);transition:color .3s ease}.drop-zone:hover .drop-icon{color:var(--accent)}.drop-text{color:var(--text-secondary);font-size:.95rem;font-weight:500}.drop-link{color:var(--accent);font-weight:600}.drop-link:hover{color:var(--accent-hover)}.drop-hint{color:var(--text-muted);font-size:.8rem}.slider-label{display:flex;margin:0 32px 0 0;flex-direction:row;gap:.5rem;width:100%;max-width:280px;align-items:center}.slider-text{color:var(--text-muted2);font-size:.8rem;text-align:left;word-spacing:nowrap;padding:0 16px 0 0}.slider-text span{color:var(--text-muted2);word-spacing:nowrap;font-size:.875rem}.color-mode-switcher{display:flex;flex:1;gap:.25rem;border-radius:.5rem;background:var(--bg-tertiary);padding:.25rem;box-shadow:inset 0 1px 2px #0000004d;border:1px solid rgba(255,255,255,.02);transition:border-color .2s ease}.slider-label:hover .color-mode-switcher{border-color:#ffffff14}.color-mode-btn{flex:1;padding:.4rem .6rem;background:transparent;color:var(--text-secondary);border:none;border-radius:.3rem;cursor:pointer;font-size:.75rem;font-weight:600;transition:all .25s ease;white-space:nowrap}.color-mode-btn:hover{color:var(--text-primary)}.color-mode-btn.active{background:var(--accent);color:#fff;border:none;box-shadow:0 0 16px #8b5cf666;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:scale(.95);opacity:.7}to{transform:scale(1);opacity:1}}.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--bg-tertiary);outline:none;cursor:pointer;border:none;transition:background .2s ease}.slider:hover{background:#8b5cf61a}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;transition:all .2s ease;border:1px solid rgba(255,255,255,.2)}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 16px #8b5cf699;border-color:#fff6}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:all .2s ease}.slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 0 16px #8b5cf699;border-color:#fff6}.terminal-wrapper{display:flex;justify-content:center;overflow:visible;padding:2rem 8px;max-width:100vw}.terminal{background:var(--terminal-bg);border-radius:1rem;overflow:hidden;box-shadow:0 40px 60px -15px #00000080,0 20px 25px -5px #0000004d;border:1px solid rgba(255,255,255,.08);width:100%;min-width:900px;max-width:calc(100vw - 16px);transition:all .3s ease;min-height:450px}.terminal-toolbar{display:flex;align-items:center;padding:1rem;background:linear-gradient(135deg,#0f0f14cc,#191923cc);border-bottom:1px solid rgba(255,255,255,.08)}.terminal-buttons{display:flex;gap:.75rem;align-items:center}.terminal-btn{width:12px;height:12px;border-radius:50%;transition:opacity .2s ease}.terminal-btn:hover{opacity:.8}.terminal-btn.close{background:var(--terminal-btn-close)}.terminal-btn.minimize{background:var(--terminal-btn-minimize)}.terminal-btn.maximize{background:var(--terminal-btn-maximize)}.terminal-title{flex:1;text-align:center;font-size:.85rem;color:var(--text-muted);font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;letter-spacing:.5px;margin:0 0 0 16px}.terminal-title-spacer{flex:1}.terminal-width-row{display:none;align-items:center;gap:1rem;padding:.75rem 1rem;background:linear-gradient(135deg,#14141c99,#0f0f1699);border-bottom:1px solid rgba(255,255,255,.05)}.terminal-width-row.visible{display:flex}.width-slider-label{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.width-label-text{color:var(--text-muted2);font-size:.8rem}.width-input{width:3.5rem;padding:.35rem .5rem;background:var(--bg-tertiary);border:1px solid rgba(255,255,255,.02);border-radius:.4rem;color:var(--text-primary);font-size:.85rem;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;text-align:center;transition:all .2s ease}.width-input:hover{background:var(--bg-tertiary);border-color:#ffffff14}.width-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #8b5cf633}.width-slider{flex:1;min-width:100px}.terminal-scroll{width:100%;max-width:100%;overflow-x:scroll}.terminal-body{padding:1.5rem;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:13px;line-height:1.2;overflow-x:auto;overflow-y:auto;white-space:pre;min-height:350px;width:100%;max-width:100%;color:var(--text-secondary);word-wrap:normal;word-break:normal}.ansi-line{display:block;height:1em;line-height:1;white-space:pre;overflow:visible;text-overflow:clip}.terminal-placeholder{color:var(--text-muted)}.prompt{color:var(--accent);margin-right:.5rem}.ansi-line span{display:inline-block;width:.6em;text-align:center}.command-section{background:#12121a99;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:16px;display:none;margin:8px;transition:border .3s ease}.command-section:hover{border:1px solid rgba(255,255,255,.16)}.command-section.visible{display:block;animation:fadeIn .4s ease}.command-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 3rem;background:linear-gradient(135deg,#1a1a24cc,#0f0f14cc);border-bottom:1px solid rgba(255,255,255,.08)}.command-title{font-size:.9rem;font-weight:600;color:var(--text-secondary);letter-spacing:.5px}.copy-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;background:var(--accent);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .25s ease;box-shadow:0 4px 12px #8b5cf64d}.copy-btn:hover{border:1px solid rgba(255,255,255,.2);box-shadow:0 6px 20px #8b5cf666}.copy-btn.copied{background:#10b981;box-shadow:0 4px 12px #10b9814d}.copy-icon{width:16px;height:16px}.command-preview{padding:1.5rem;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:.65rem;color:var(--text-secondary);overflow:auto;max-height:15em;line-height:1.6;white-space:pre-wrap;word-break:break-word;margin:0}.footer{text-align:center;padding:2rem 0 6rem;color:var(--text-muted2);font-size:.875rem}.footer p{margin:.5rem 0}.social-links{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}.social-btn{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);transition:all .3s ease;cursor:pointer;text-decoration:none}.social-btn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);background:var(--bg-secondary)}.social-btn svg{width:20px;height:20px}.social-btn img{width:20px;height:20px;display:block;filter:invert(1) brightness(1.2)}@media(max-width:768px){.container{padding:1rem}.title{font-size:1.75rem}.drop-zone{padding:2rem 1rem}.terminal{min-width:100%}.terminal-title,.color-mode-label{display:none}.terminal-body{width:100%;max-width:100%;font-size:10px}.top-row.has-image{grid-template-columns:1fr}.right-section{width:100%;justify-content:center}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}