:root{--foreground-color: #c5c5c5;--background-color: #252525;--accent-color: #ffd30f;--primary-color: #505050;--border-radius: 8px;--shadow: 0 4px 6px rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-small: 8px;--spacing-medium: 16px;--spacing-large: 24px;--header-offset: 72px}body{font-family:sans-serif;margin:0;padding:0;display:flex;background-color:var(--background-color);color:var(--foreground-color);position:fixed;top:0;left:0;right:0;bottom:0}a{color:var(--accent-color);text-decoration:none}body,#root{box-sizing:border-box;display:flex;position:fixed;top:0;left:0;right:0;bottom:0}.app-container{border:1px solid var(--accent-color);display:flex;flex-grow:1;flex-direction:row;box-sizing:border-box;min-height:100%;min-width:100%;max-height:100%;max-width:100%;position:relative}.side-nav{display:flex;flex-direction:column;box-sizing:border-box;min-width:300px;max-width:300px;max-height:100%;min-height:100%;background-color:var(--primary-color);box-shadow:var(--shadow);color:var(--background-color);overflow:hidden}.side-nav .category-nav{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--spacing-large)}.scroll::-webkit-scrollbar{width:8px}.scroll::-webkit-scrollbar-track{background:var(--primary-color);border-radius:var(--border-radius)}.scroll::-webkit-scrollbar-thumb{background-color:var(--accent-color);border-radius:var(--border-radius);border:2px solid var(--primary-color)}.scroll::-webkit-scrollbar-thumb:hover{background-color:var(--foreground-color)}.scroll{overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--accent-color) var(--primary-color)}.side-nav button{display:block;width:100%;padding:var(--spacing-medium);margin-bottom:var(--spacing-small);background-color:var(--background-color);border:1px solid var(--primary-color);border-radius:var(--border-radius);text-align:left;cursor:pointer;font-size:16px;color:var(--foreground-color);transition:background-color .3s,color .3s}.side-nav button:hover{background-color:var(--accent-color);color:var(--foreground-color)}.side-nav button.active{background-color:var(--accent-color);color:var(--background-color);font-weight:700}.main-content{display:flex;flex-direction:column;flex:1 1 auto;padding:0 var(--spacing-large);gap:var(--spacing-medium)}.header{display:flex;justify-content:center;align-items:center;padding:var(--spacing-small);border-bottom:2px solid var(--background-color)}.header h1{font-size:28px;color:var(--accent-color);margin:var(--spacing-small) 0;padding:var(--spacing-small) var(--spacing-medium)}.search-bar{position:sticky;top:0;z-index:10;background-color:var(--background-color);padding:var(--spacing-medium) 0}.search-input-wrapper{position:relative}.search-input-wrapper input[type=text]{padding-right:44px}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--foreground-color);cursor:pointer;font-size:18px;padding:6px;border-radius:6px}.clear-btn:hover{background:rgba(255,255,255,.06)}input[type=text]{padding:var(--spacing-medium);border-radius:var(--border-radius);border:1px solid var(--accent-color);background-color:var(--primary-color);color:var(--foreground-color);font-size:16px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}input[type=text]:focus{border-color:var(--foreground-color)}.emoji-category{display:flex;flex-direction:column;gap:var(--spacing-medium);scroll-margin-top:var(--header-offset)}.emoji-category h2{font-size:24px;padding-top:var(--spacing-large)}.emoji-items{display:flex;flex-wrap:wrap;gap:var(--spacing-medium)}.emoji-item{display:flex;place-items:center;border:1px solid var(--primary-color);border-radius:var(--border-radius);background-color:var(--background-color);transition:background-color .3s,transform .2s;cursor:pointer;height:58px;width:58px;box-shadow:var(--shadow)}.emoji-item:hover{background-color:var(--accent-color);color:var(--background-color);transform:scale(1.05)}.emoji-symbol{min-width:100%;text-align:center;font-size:2em}.emoji-hex{padding:var(--spacing-xs);border-radius:var(--border-radius);border:1px solid var(--primary-color);background-color:var(--background-color);color:var(--foreground-color)}.toastedList{position:fixed;pointer-events:none;top:calc(var(--header-offset) + var(--spacing-small));right:var(--spacing-large);padding:var(--spacing-medium) var(--spacing-large);min-width:200px;min-height:calc(100% - var(--header-offset) - var(--spacing-small));overflow-y:hidden;display:flex;flex-direction:column;gap:var(--spacing-medium);z-index:99999}.toasted{background:var(--accent-color);color:var(--background-color);font-weight:300;border:none;border-radius:var(--border-radius);cursor:pointer;box-shadow:var(--shadow);transition:background-color .3s,box-shadow .3s;box-sizing:border-box;pointer-events:auto;transform:translateY(100px);opacity:0;animation:slideUp .5s ease-out forwards}.toasted .burnt{text-shadow:4px 4px 4px var(--background-color);border-right:1px solid var(--background-color);min-height:100%}.toasted span{display:inline-block;padding:var(--spacing-small)}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}