.search-container{display:flex;align-items:center;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:.5rem 1rem;width:100%;max-width:600px;margin:0 auto 2rem;transition:border-color .2s;box-sizing:border-box}.search-container:focus-within{border-color:var(--primary-color)}.search-icon{color:var(--text-color);opacity:.5;margin-right:.5rem}.search-input{background:transparent;border:none;color:var(--text-color);font-size:1rem;width:100%;outline:none}.search-input::placeholder{color:var(--text-color);opacity:.4}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1.5rem;padding:1rem;width:100%;max-width:1200px;margin:0 auto}.icon-card{background-color:var(--bg-card);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;border:1px solid var(--border-color)}.icon-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px -10px #0003;border-color:var(--primary-color);background-color:var(--bg-hover)}.icon-preview{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-color);border-radius:8px;border:1px solid var(--border-color)}.icon-preview img{max-width:32px;max-height:32px;image-rendering:pixelated;transition:transform .2s}.icon-card:hover .icon-preview img{transform:scale(1.2)}.icon-name{font-size:.85rem;color:var(--text-color);text-align:center;word-break:break-word;font-weight:500;opacity:.9}.no-results{grid-column:1 / -1;text-align:center;padding:3rem;color:var(--text-color);opacity:.6;font-size:1.2rem}.pagination-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2rem;padding:1rem}.page-btn{display:flex;align-items:center;gap:.5rem;background-color:var(--bg-card);color:var(--text-color);border:1px solid var(--border-color);padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.9rem;font-weight:500}.page-btn:hover:not(:disabled){background-color:var(--bg-hover);border-color:var(--primary-color);transform:translateY(-1px)}.page-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.page-info{color:var(--text-color);font-size:.9rem;font-weight:500;opacity:.8}.usage-container{background-color:var(--bg-card);border-radius:8px;padding:2rem;margin:2rem auto;max-width:800px;border:1px solid var(--border-color);box-sizing:border-box}.usage-container h2{display:flex;align-items:center;gap:.5rem;margin-top:0;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.usage-step{margin-bottom:1.5rem}.usage-step h3{color:var(--primary-color);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}.inline-icon{width:24px;height:24px;image-rendering:pixelated}.code-block{background-color:var(--bg-hover);padding:1rem;border-radius:4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background-color .2s;border:1px solid var(--border-color);overflow-x:auto;box-sizing:border-box}.code-block:hover{background-color:var(--bg-card);border-color:var(--primary-color)}.code-block code{color:var(--primary-color);font-family:Fira Code,monospace;white-space:nowrap;font-size:.85rem}.packs-demo{max-width:900px;margin:3rem auto;padding:0 1.5rem}.packs-demo h2{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;margin-bottom:.5rem}.packs-demo>p{color:var(--text-muted, #888);margin-bottom:1.5rem}.packs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.pack-card{background:var(--card-bg, rgba(255, 255, 255, .05));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:12px;padding:1rem;transition:border-color .2s}.pack-card:hover{border-color:var(--accent, #f0a000)}.pack-card h3{font-size:1.1rem;margin:0 0 .25rem;display:flex;align-items:center;gap:.5rem}.pack-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.copy-pack-btn{background:none;border:1px solid var(--border, rgba(255, 255, 255, .15));color:var(--text-muted, #888);border-radius:6px;padding:.3rem .6rem;font-size:.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.3rem;white-space:nowrap;flex-shrink:0;transition:all .15s}.copy-pack-btn:hover{background:var(--accent, #f0a000);color:#000;border-color:var(--accent, #f0a000)}.pack-card .pack-description{color:var(--text-muted, #888);font-size:.85rem;margin:0 0 .75rem}.pack-states{display:flex;flex-wrap:wrap;gap:.5rem}.state-button{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:8px;background:var(--card-bg, rgba(255, 255, 255, .03));color:var(--text, #e0e0e0);font-size:.85rem;transition:all .2s;position:relative}.state-button:hover{background:var(--accent, #f0a000);color:#000;border-color:var(--accent, #f0a000);transform:scale(1.05)}.state-button .state-icon{width:28px;height:28px;image-rendering:pixelated}.state-button .state-label{font-weight:500}.progression-track{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;padding:.5rem 0;overflow:hidden}.stage-step{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border, rgba(255, 255, 255, .1));background:var(--card-bg, rgba(255, 255, 255, .03));transition:all .2s;flex-shrink:0}.stage-step:hover{background:var(--accent, #f0a000);border-color:var(--accent, #f0a000);transform:scale(1.15)}.stage-step img{width:24px;height:24px;image-rendering:pixelated}.stage-arrow{color:var(--text-muted, #888);font-size:.75rem;flex-shrink:0}.hover-hint{display:inline-block;font-size:.8rem;color:var(--text-muted, #888);background:var(--card-bg, rgba(255, 255, 255, .05));border-radius:6px;padding:.3rem .6rem;margin-top:.5rem}.contribute-hint{text-align:center;color:var(--text-muted, #888);font-size:.85rem;margin-top:1.5rem}.contribute-hint a{color:var(--accent, #f0a000);text-decoration:none;font-weight:600}.contribute-hint a:hover{text-decoration:underline}.pack-builder{max-width:900px;margin:3rem auto;padding:0 1.5rem}.pack-builder>h2{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;margin-bottom:.5rem}.pack-builder>p{color:var(--text-muted, #888);margin-bottom:1.5rem}.builder-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:700px){.builder-layout{grid-template-columns:1fr}}.slots-panel{display:flex;flex-direction:column;gap:.5rem}.slots-panel h3{font-size:1rem;margin:0 0 .5rem;color:var(--text, #e0e0e0)}.cursor-slot{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--card-bg, rgba(255, 255, 255, .05));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:8px;transition:border-color .2s}.cursor-slot:hover{border-color:var(--accent, #f0a000)}.slot-label{font-size:.85rem;font-weight:600;min-width:90px;color:var(--text, #e0e0e0)}.slot-icon-preview{width:28px;height:28px;image-rendering:pixelated;border-radius:4px;background:#ffffff14;flex-shrink:0}.slot-icon-name{font-size:.8rem;color:var(--text-muted, #888);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot-icon-name.empty{font-style:italic}.slot-actions{display:flex;gap:.25rem}.slot-btn{background:none;border:1px solid var(--border, rgba(255, 255, 255, .1));color:var(--text-muted, #888);border-radius:6px;padding:.25rem .5rem;font-size:.75rem;cursor:pointer;transition:all .15s}.slot-btn:hover{background:var(--accent, #f0a000);color:#000;border-color:var(--accent, #f0a000)}.slot-btn.remove{color:#e55}.slot-btn.remove:hover{background:#e55;border-color:#e55;color:#fff}.preview-panel{display:flex;flex-direction:column;gap:1rem}.preview-panel h3{font-size:1rem;margin:0;color:var(--text, #e0e0e0)}.preview-zone{min-height:180px;border:2px dashed var(--border, rgba(255, 255, 255, .15));border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-muted, #888);font-size:.9rem;text-align:center;padding:1.5rem;transition:border-color .2s}.preview-zone:hover{border-color:var(--accent, #f0a000)}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-height:320px;overflow-y:auto}.preview-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem .5rem;border:2px solid var(--border, rgba(255, 255, 255, .1));border-radius:12px;background:var(--card-bg, rgba(255, 255, 255, .03));transition:border-color .2s,transform .15s}.preview-tile:hover{border-color:var(--accent, #f0a000);transform:scale(1.05)}.preview-tile-icon{width:36px;height:36px;image-rendering:pixelated}.preview-tile-state{font-size:.7rem;font-weight:600;color:var(--text-muted, #888);text-transform:uppercase;letter-spacing:.05em}.export-block{position:relative}.export-code{background:var(--card-bg, rgba(0, 0, 0, .4));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:8px;padding:1rem;font-family:Fira Code,Cascadia Code,monospace;font-size:.8rem;color:var(--text, #e0e0e0);white-space:pre-wrap;word-break:break-all;overflow-x:auto;max-height:220px;overflow-y:auto;line-height:1.5}.export-btn{position:absolute;top:.5rem;right:.5rem;background:var(--accent, #f0a000);color:#000;border:none;border-radius:6px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:opacity .15s}.export-btn:hover{opacity:.85}.empty-export{color:var(--text-muted, #888);font-style:italic;font-size:.85rem;text-align:center;padding:1rem}.picker-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center}.picker-modal{background:var(--bg, #1a1a2e);border:1px solid var(--border, rgba(255, 255, 255, .15));border-radius:16px;width:90vw;max-width:600px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.picker-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border, rgba(255, 255, 255, .1))}.picker-header h3{margin:0;flex:1;font-size:1rem}.picker-search{flex:1;background:var(--card-bg, rgba(255, 255, 255, .05));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:8px;padding:.5rem .75rem;color:var(--text, #e0e0e0);font-size:.9rem;outline:none}.picker-search:focus{border-color:var(--accent, #f0a000)}.picker-close{background:none;border:none;color:var(--text-muted, #888);cursor:pointer;font-size:1.2rem;padding:.25rem}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.5rem;padding:1rem 1.25rem;overflow-y:auto}.picker-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .25rem;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .15s}.picker-item:hover{background:var(--accent, #f0a000);border-color:var(--accent, #f0a000)}.picker-item:hover .picker-item-name{color:#000}.picker-item img{width:32px;height:32px;image-rendering:pixelated}.picker-item-name{font-size:.6rem;color:var(--text-muted, #888);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.picker-empty{grid-column:1 / -1;text-align:center;color:var(--text-muted, #888);font-size:.9rem;padding:2rem}.builder-actions{display:flex;gap:.5rem;margin-top:.5rem}.clear-all-btn{background:none;border:1px solid var(--border, rgba(255, 255, 255, .15));color:var(--text-muted, #888);border-radius:8px;padding:.5rem 1rem;font-size:.85rem;cursor:pointer;transition:all .15s}.clear-all-btn:hover{border-color:#e55;color:#e55}.flip-demo{max-width:900px;margin:3rem auto;padding:0 1.5rem}.flip-demo>h2{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;margin-bottom:.5rem}.flip-demo>p{color:var(--text-muted, #888);margin-bottom:1.5rem}.flip-showcase{display:flex;flex-direction:column;gap:1.5rem}.flip-card{background:var(--card-bg, rgba(255, 255, 255, .05));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:12px;padding:1.5rem;transition:border-color .2s}.flip-card:hover{border-color:var(--accent, #f0a000)}.flip-card-label{font-size:.85rem;color:var(--text-muted, #888);margin-bottom:.75rem;font-weight:500}.flip-comparison{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}.flip-side{display:flex;flex-direction:column;align-items:center;gap:.5rem}.flip-icon-wrapper{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:2px solid var(--border, rgba(255, 255, 255, .1));border-radius:12px;transition:all .3s}.flip-icon-wrapper:hover{border-color:var(--accent, #f0a000);transform:scale(1.1)}.flip-icon-wrapper img{width:32px;height:32px;image-rendering:pixelated}.flip-label{font-size:.8rem;font-weight:600;color:var(--text, #e0e0e0)}.flip-arrow{font-size:1.5rem;color:var(--accent, #f0a000);animation:flipPulse 2s ease-in-out infinite}@keyframes flipPulse{0%,to{opacity:.5;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.2)}}.flip-interactive{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1rem}.flip-hover-zone{width:100%;min-height:100px;border:2px dashed var(--border, rgba(255, 255, 255, .15));border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-muted, #888);font-size:.9rem;text-align:center;padding:1rem;transition:all .3s}.flip-hover-zone:hover{border-color:var(--accent, #f0a000)}.flip-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:center}.flip-btn{background:var(--accent, #f0a000);color:#000;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:opacity .15s}.flip-btn:hover{opacity:.85}.flip-btn.secondary{background:var(--card-bg, rgba(255, 255, 255, .05));color:var(--text, #e0e0e0);border:1px solid var(--border, rgba(255, 255, 255, .15))}.flip-btn.secondary:hover{border-color:var(--accent, #f0a000);color:var(--accent, #f0a000)}.flip-icon-name{font-family:Fira Code,Cascadia Code,monospace;font-size:.8rem;color:var(--text-muted, #888);background:var(--card-bg, rgba(0, 0, 0, .3));padding:.25rem .5rem;border-radius:4px}.flip-code{background:var(--card-bg, rgba(0, 0, 0, .4));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:8px;padding:1rem;font-family:Fira Code,Cascadia Code,monospace;font-size:.8rem;color:var(--text, #e0e0e0);white-space:pre-wrap;word-break:break-all;overflow-x:auto;max-height:220px;overflow-y:auto;line-height:1.5;margin-top:.5rem}.flip-loading{color:var(--text-muted, #888);font-style:italic;font-size:.85rem}.animate-demo{max-width:900px;margin:3rem auto;padding:0 1.5rem}.animate-demo>h2{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;margin-bottom:.5rem}.animate-demo>p{color:var(--text-muted, #888);margin-bottom:1.5rem;line-height:1.6}.animate-card{background:var(--card-bg, rgba(255, 255, 255, .05));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:12px;padding:1.5rem;transition:border-color .2s}.animate-card:hover{border-color:var(--accent, #f0a000)}.frame-strip{display:flex;align-items:center;justify-content:center;gap:.25rem;margin-bottom:1.25rem;flex-wrap:wrap}.frame-cell{display:flex;flex-direction:column;align-items:center;gap:.3rem}.frame-sprite{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:2px solid var(--border, rgba(255, 255, 255, .1));border-radius:10px;transition:border-color .2s,transform .2s}.frame-sprite:hover{border-color:var(--accent, #f0a000);transform:scale(1.12)}.frame-sprite img{width:28px;height:28px;image-rendering:pixelated}.frame-index{font-size:.65rem;color:var(--text-muted, #888);font-weight:600}.frame-arrow{font-size:1.1rem;color:var(--accent, #f0a000);opacity:.6;padding:0 .15rem}.animate-hover-zone{width:100%;min-height:120px;border:2px dashed var(--border, rgba(255, 255, 255, .15));border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-muted, #888);font-size:.9rem;text-align:center;padding:1rem;box-sizing:border-box;transition:all .3s;margin-bottom:1rem}.animate-hover-zone:hover{border-color:var(--accent, #f0a000);background:#f0a00008}.animate-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}.speed-control{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text, #e0e0e0)}.speed-control label{font-weight:600;white-space:nowrap}.speed-control input[type=range]{width:120px;accent-color:var(--accent, #f0a000)}.speed-value{font-family:Fira Code,Cascadia Code,monospace;font-size:.8rem;min-width:50px;text-align:right}.animate-code{background:var(--card-bg, rgba(0, 0, 0, .4));border:1px solid var(--border, rgba(255, 255, 255, .1));border-radius:8px;padding:1rem;font-family:Fira Code,Cascadia Code,monospace;font-size:.8rem;color:var(--text, #e0e0e0);white-space:pre;overflow-x:auto;line-height:1.5;margin-top:.5rem}.animate-btn{background:var(--accent, #f0a000);color:#000;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:opacity .15s}.animate-btn:hover{opacity:.85}.animate-btn.secondary{background:var(--card-bg, rgba(255, 255, 255, .05));color:var(--text, #e0e0e0);border:1px solid var(--border, rgba(255, 255, 255, .15))}.animate-btn.secondary:hover{border-color:var(--accent, #f0a000);color:var(--accent, #f0a000)}.section-nav{position:sticky;top:0;z-index:100;background:var(--bg, #1a1a2e);border-bottom:1px solid var(--border, rgba(255, 255, 255, .1));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:0;margin:0 -2rem;width:calc(100% + 4rem)}.section-nav-inner{display:flex;align-items:center;justify-content:center;gap:0;max-width:900px;margin:0 auto;overflow-x:auto;scrollbar-width:none}.section-nav-inner::-webkit-scrollbar{display:none}.nav-tab{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.25rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted, #888);font-size:.85rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s}.nav-tab:hover{color:var(--text, #e0e0e0);background:#ffffff08}.nav-tab.active{color:var(--accent, #f0a000);border-bottom-color:var(--accent, #f0a000)}.nav-tab svg{flex-shrink:0}@media(max-width:600px){.nav-tab{padding:.75rem;font-size:.8rem;gap:.35rem}.nav-tab .nav-label{display:none}}.loading-screen{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .4s ease-out}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-coins{display:flex;align-items:center;gap:.25rem}.loading-coin{width:48px;height:48px;image-rendering:pixelated;opacity:.3;transition:opacity .15s,transform .15s}.loading-coin.active{opacity:1;transform:scale(1.2)}.loading-text{color:#f0a000;font-size:1.1rem;font-weight:600;letter-spacing:.1em;font-family:Inter,system-ui,sans-serif}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;overflow-x:hidden}.app-header{margin-bottom:3rem;position:relative}.app-header h1{font-size:3.2em;line-height:1.1;margin-bottom:.5rem;background:linear-gradient(to right,#fc0,#f90);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.badges{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.app-footer{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border-color);color:var(--text-color);font-size:.9rem}.app-section{scroll-margin-top:56px}.toast-container{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:.5rem;z-index:1000;pointer-events:none}.toast{background:var(--bg-card);color:var(--text-color);border:1px solid var(--border-color);padding:.75rem 1rem;border-radius:8px;display:flex;align-items:center;gap:.75rem;min-width:300px;box-shadow:0 4px 12px #0000001a;pointer-events:auto;animation:slideIn .3s ease-out}.toast-icon{display:flex;align-items:center}.toast-success .toast-icon{color:#10b981}.toast-error .toast-icon{color:#ef4444}.toast-info .toast-icon{color:#3b82f6}.toast-message{flex:1;font-size:.9rem;font-weight:500}.toast-close{background:transparent;border:none;padding:4px;cursor:pointer;color:var(--text-color);opacity:.6;border-radius:4px;display:flex}.toast-close:hover{opacity:1;background-color:var(--bg-hover)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--primary-color: #646cff;--bg-color: #242424;--text-color: rgba(255, 255, 255, .87);--bg-card: #2f2f2f;--bg-hover: #3a3a3a;--border-color: #444;color-scheme:dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-card);cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}