.ep-root{--ep-bg: #fff;--ep-border: #e5e7eb;--ep-text: #1f2937;--ep-text-secondary: #6b7280;--ep-hover-bg: #f3f4f6;--ep-active-bg: #e5e7eb;--ep-input-bg: #f9fafb;--ep-input-border: #d1d5db;--ep-radius: 8px;--ep-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--ep-radius);border:1px solid var(--ep-border);background:var(--ep-bg);color:var(--ep-text);font-family:var(--ep-font-family);box-sizing:border-box}.ep-root *,.ep-root *:before,.ep-root *:after{box-sizing:border-box}.ep-root[data-theme=dark]{--ep-bg: #1f2937;--ep-border: #374151;--ep-text: #f9fafb;--ep-text-secondary: #9ca3af;--ep-hover-bg: #374151;--ep-active-bg: #4b5563;--ep-input-bg: #111827;--ep-input-border: #4b5563}@media(prefers-color-scheme:dark){.ep-root:not([data-theme]){--ep-bg: #1f2937;--ep-border: #374151;--ep-text: #f9fafb;--ep-text-secondary: #9ca3af;--ep-hover-bg: #374151;--ep-active-bg: #4b5563;--ep-input-bg: #111827;--ep-input-border: #4b5563}}.ep-search{position:relative;padding:8px;flex-shrink:0}.ep-search-input{width:100%;height:28px;padding:0 28px 0 10px;border:1px solid var(--ep-input-border);border-radius:6px;background:var(--ep-input-bg);color:var(--ep-text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}.ep-search-input::placeholder{color:var(--ep-text-secondary)}.ep-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f626}.ep-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ep-text-secondary);cursor:pointer;font-size:12px;padding:2px 4px;line-height:1}.ep-search-clear:hover{color:var(--ep-text)}.ep-category-nav{display:flex;align-items:center;gap:0;padding:0 4px;height:40px;flex-shrink:0;border-bottom:1px solid var(--ep-border);overflow-x:auto;scrollbar-width:none}.ep-category-nav::-webkit-scrollbar{display:none}.ep-category-tab{flex:1 1 0%;display:flex;align-items:center;justify-content:center;height:32px;min-width:32px;background:none;border:none;border-radius:6px;cursor:pointer;font-size:18px;padding:0;transition:background .12s;opacity:.6}.ep-category-tab:hover{background:var(--ep-hover-bg);opacity:1}.ep-category-tab--active{opacity:1;background:var(--ep-active-bg)}.ep-grid-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ep-border) transparent}.ep-grid-scroll::-webkit-scrollbar{width:6px}.ep-grid-scroll::-webkit-scrollbar-thumb{background:var(--ep-border);border-radius:3px}.ep-grid-scroll::-webkit-scrollbar-track{background:transparent}.ep-grid-row{display:flex}.ep-grid-empty{display:flex;align-items:center;justify-content:center}.ep-grid-empty-text{color:var(--ep-text-secondary);font-size:13px}.ep-emoji-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:6px;cursor:pointer;transition:background .1s,transform .1s;line-height:1;padding:0;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.ep-emoji-btn:hover{background:var(--ep-hover-bg);transform:scale(1.15)}.ep-emoji-btn:active{transform:scale(.95)}.ep-emoji-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.ep-skin-tones{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 8px;flex-shrink:0;border-top:1px solid var(--ep-border);height:36px}.ep-skin-tone-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:none;border:2px solid transparent;border-radius:50%;cursor:pointer;font-size:16px;padding:0;transition:border-color .12s}.ep-skin-tone-btn:hover{border-color:var(--ep-border)}.ep-skin-tone-btn--active{border-color:#3b82f6}.ep-preview{display:flex;align-items:center;gap:8px;padding:6px 12px;height:44px;flex-shrink:0;border-top:1px solid var(--ep-border)}.ep-preview--empty{justify-content:center}.ep-preview-emoji{font-size:28px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.ep-preview-name{font-size:12px;color:var(--ep-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ep-preview-hint{font-size:12px;color:var(--ep-text-secondary)}*,*:before,*:after{box-sizing:border-box;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f7;color:#1d1d1f;min-height:100vh}.demo--dark body,.demo--dark{background:#1a1a1a;color:#f5f5f7}.demo{min-height:100vh;display:flex;flex-direction:column}.demo-header{text-align:center;padding:40px 20px 20px}.demo-header h1{font-size:1.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}.demo-logo{font-size:2rem}.demo-subtitle{margin-top:8px;color:#6e6e73;font-size:1rem}.demo--dark .demo-subtitle{color:#a1a1a6}.demo-badges{display:flex;gap:8px;justify-content:center;margin-top:12px}.demo-main{display:flex;gap:32px;justify-content:center;padding:32px 20px;flex-wrap:wrap;flex:1}.demo-picker-section{flex-shrink:0}.demo-controls{width:280px;flex-shrink:0}.demo-controls h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#6e6e73;margin-bottom:12px;margin-top:24px}.demo-controls h2:first-child{margin-top:0}.demo--dark .demo-controls h2{color:#a1a1a6}.control-group{margin-bottom:16px}.control-group>label{display:block;font-size:.9rem;font-weight:500;margin-bottom:6px}.control-group input[type=range]{width:100%;accent-color:#007aff}.control-group input[type=checkbox]{margin-right:6px;accent-color:#007aff}.control-buttons{display:flex;gap:4px}.control-buttons button{flex:1;padding:6px 12px;border:1px solid #d1d1d6;background:#fff;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .15s;color:#1d1d1f}.demo--dark .control-buttons button{background:#2c2c2e;border-color:#3a3a3c;color:#f5f5f7}.control-buttons button.active{background:#007aff;border-color:#007aff;color:#fff}.control-buttons button:hover:not(.active){background:#e5e5ea}.demo--dark .control-buttons button:hover:not(.active){background:#3a3a3c}.demo-output{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid #d1d1d6;border-radius:10px}.demo--dark .demo-output{background:#2c2c2e;border-color:#3a3a3c}.demo-output-emoji{font-size:2.5rem;line-height:1}.demo-output-details{display:flex;flex-direction:column;gap:2px}.demo-output-details strong{font-size:.9rem}.demo-output-details code{font-size:.75rem;color:#6e6e73}.demo--dark .demo-output-details code{color:#a1a1a6}.demo-hint{font-size:.85rem;color:#8e8e93}.demo-log{display:flex;flex-wrap:wrap;gap:4px;padding:12px;background:#fff;border:1px solid #d1d1d6;border-radius:10px;min-height:56px;align-items:center}.demo--dark .demo-log{background:#2c2c2e;border-color:#3a3a3c}.demo-log-item{font-size:1.5rem;cursor:default;transition:transform .1s}.demo-log-item:hover{transform:scale(1.3)}.demo-footer{text-align:center;padding:24px;font-size:.85rem;color:#8e8e93;display:flex;gap:8px;justify-content:center}.demo-footer a{color:#007aff;text-decoration:none}.demo-footer a:hover{text-decoration:underline}