@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #09090b;--color-surface: #18181b;--color-surface-elevated: #27272a;--color-surface-hover: #3f3f46;--color-accent: #5eead4;--color-accent-dim: rgba(94, 234, 212, .1);--color-accent-hover: #99f6e4;--color-text: #fafafa;--color-text-secondary: #a1a1aa;--color-text-muted: #71717a;--color-border: #27272a;--color-border-hover: #52525b;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}.landing{max-width:800px;margin:0 auto;padding:2rem 1.5rem}.hero{padding:2rem 0 3rem;border-bottom:1px solid var(--color-border);margin-bottom:2.5rem}.hero-content{display:flex;align-items:center;gap:1.25rem}.hero-icon{width:80px;height:80px;flex-shrink:0}.hero h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.5rem}.hero .tagline{font-size:1.125rem;color:var(--color-text-secondary);max-width:500px}.hero .tagline strong{color:var(--color-accent);font-weight:600}section{margin-bottom:3rem}section h2{font-size:.875rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.25rem}.install-steps{display:flex;flex-direction:column;gap:1.5rem}.install-step{display:flex;align-items:flex-start;gap:1rem}.step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--color-surface-elevated);border-radius:50%;font-size:.875rem;font-weight:600;color:var(--color-accent);flex-shrink:0}.step-label{font-weight:500;margin-bottom:.375rem}.api-link{color:var(--color-accent);text-decoration:none;font-size:.9375rem;transition:color var(--transition-fast)}.api-link:hover{color:var(--color-accent-hover);text-decoration:underline}.install-code{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;overflow-x:auto;margin:0}.install-code code{font-family:var(--font-mono);font-size:.8125rem;color:var(--color-text-secondary);white-space:pre}.help-output{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.25rem;overflow-x:auto;margin:0}.help-output code{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-secondary);white-space:pre;line-height:1.7}.demos-section{display:flex;flex-direction:column;gap:2rem}.demo{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.demo-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border)}.demo-header h3{font-size:1.125rem;font-weight:600;margin-bottom:.375rem}.demo-header p{font-size:.875rem;color:var(--color-text-secondary)}.demo-content{padding:1.5rem}.demo-command{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;margin:0 0 1.25rem;overflow-x:auto}.demo-command code{font-family:var(--font-mono);font-size:.8125rem;color:var(--color-accent);white-space:pre}.demo-output{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem;display:flex;align-items:center;justify-content:center;min-height:200px}.demo-output-image{padding:1rem}.demo-output-image img{max-width:100%;height:auto;border-radius:var(--radius-sm)}.demo-output-sprite{flex-direction:column;gap:1.5rem;padding:1.5rem}.sprite-animator{display:flex;flex-direction:column;align-items:center;gap:.5rem}.sprite-frame{width:80px;height:80px;background-repeat:no-repeat;border-radius:var(--radius-sm);border:1px solid var(--color-border);image-rendering:pixelated}.sprite-label{font-family:var(--font-mono);font-size:.625rem;color:var(--color-text-muted)}.sprite-sheet-container{position:relative;display:inline-block}.sprite-sheet-img{max-width:100%;height:auto;border-radius:var(--radius-sm);display:block}.debug-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none}.debug-cell{border:1px solid rgba(255,0,0,.5);display:flex;align-items:center;justify-content:center}.debug-cell span{background:#000000b3;color:#fff;font-size:.5rem;padding:.125rem .25rem;border-radius:2px;font-family:var(--font-mono)}.demo-placeholder{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--color-text-muted)}.placeholder-icon{font-size:3rem;opacity:.5}.placeholder-text{font-family:var(--font-mono);font-size:.75rem}.demo-output-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:1rem;min-height:auto}.demo-grid-cell{aspect-ratio:1;background:var(--color-surface-elevated);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.cell-label{font-family:var(--font-mono);font-size:.625rem;color:var(--color-text-muted)}.cell-icon{font-size:1.25rem;opacity:.6}.demo-output-favicon .demo-grid-cell{background:var(--color-surface)}.demo-result{margin-top:1rem;font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}.compare-container{margin-bottom:.5rem}.compare-labels{display:flex;justify-content:space-between;margin-bottom:.75rem}.compare-label{font-size:.75rem;font-weight:500;color:var(--color-text-secondary)}.compare-placeholder{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.compare-side{display:flex;flex-direction:column;align-items:center;gap:.75rem}.placeholder-box{width:140px;height:140px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border)}.placeholder-box .placeholder-icon{font-size:3.5rem;opacity:.8}.green-bg{background:#22c55e}.checker-bg{background-image:linear-gradient(45deg,var(--color-surface) 25%,transparent 25%),linear-gradient(-45deg,var(--color-surface) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-surface) 75%),linear-gradient(-45deg,transparent 75%,var(--color-surface) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--color-surface-elevated)}.compare-arrow{font-size:1.5rem;color:var(--color-accent);font-weight:600}.compare-caption{font-size:.6875rem;color:var(--color-text-muted);font-family:var(--font-mono)}.compare-image{width:140px;height:140px;object-fit:contain;border-radius:var(--radius-md);border:1px solid var(--color-border)}.compare-image-wrapper{width:140px;height:140px;border-radius:var(--radius-md);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center}.compare-image-wrapper .compare-image{border:none;width:100%;height:100%}.compare-slider{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem}.compare-images{position:relative;width:100%;aspect-ratio:1;max-width:400px;margin:0 auto 1rem;border-radius:var(--radius-sm);overflow:hidden;background-image:linear-gradient(45deg,var(--color-surface) 25%,transparent 25%),linear-gradient(-45deg,var(--color-surface) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-surface) 75%),linear-gradient(-45deg,transparent 75%,var(--color-surface) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--color-surface-elevated)}.compare-before,.compare-after{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.compare-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--color-accent);transform:translate(-50%);pointer-events:none}.compare-handle:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:var(--color-accent);border-radius:50%;box-shadow:0 2px 8px #0000004d}.compare-handle:after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.5rem;color:var(--color-bg);white-space:nowrap;letter-spacing:.125rem}.compare-range{width:100%;-webkit-appearance:none;background:var(--color-border);height:4px;border-radius:2px;cursor:pointer}.compare-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--color-accent);border-radius:50%;cursor:pointer}footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-border);text-align:center;color:var(--color-text-muted);font-size:.875rem}footer strong{color:var(--color-text-secondary)}footer a{color:var(--color-accent);text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:640px){.landing{padding:1.5rem 1rem}.hero-content{flex-direction:column;text-align:center}.hero h1{font-size:2rem}.hero .tagline{font-size:1rem}.install-step{flex-direction:column;gap:.75rem}.step-number{width:24px;height:24px;font-size:.75rem}.demo-header{padding:1rem 1.25rem}.demo-content{padding:1.25rem}.demo-output-grid{gap:3px}.help-output code{font-size:.6875rem}.compare-placeholder{flex-direction:column;gap:1rem;padding:1.5rem}.compare-arrow{transform:rotate(90deg)}.placeholder-box{width:120px;height:120px}.compare-labels{flex-direction:column;gap:.25rem;text-align:center}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}