:root{--bg:#1a0d2b;--panel:#0e1627;--card:#2b1a47;--text:#e6eef6;--muted:#b8a4d2;--accent:#a100a1;--glass:rgba(161, 0, 161, 0.08);--radius:8px;--gap:12px;--transition:200ms;--max-width:95%;--repeat-gradient:repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px)}[data-theme="default"]{--bg:#1a0d2b;--panel:#0e1627;--card:#2b1a47;--text:#e6eef6;--muted:#b8a4d2;--accent:#a100a1;--glass:rgba(161, 0, 161, 0.08)}[data-theme="dark"]{--bg:#071021;--panel:#0e1627;--card:#0e1627;--text:#e6eef6;--muted:#b0b8c4;--accent:#36b37e;--glass:rgba(255, 255, 255, 0.08)}[data-theme="light"]{--bg:#ffffff;--panel:#f4f4f6;--card:#ffffff;--text:#0a0a0a;--muted:#666;--accent:#2b7a78;--glass:rgba(0, 0, 0, 0.06)}[data-theme="grass"]{--bg:#6AA84F;--panel:#5a8a40;--card:#5a8a40;--text:#ffffff;--muted:#ffffff;--accent:#2b6e2b;--glass:rgba(255, 255, 255, 0.12)}[data-theme="dirt"]{--bg:#7B5A35;--panel:#6a4e2d;--card:#6a4e2d;--text:#fff;--muted:#fff;--accent:#5 grumpyGrok3.5a2e0d;--glass:rgba(255, 255, 255, 0.12)}[data-theme="sky"]{--bg:#3C9EE7;--panel:#2f87c4;--card:#2f87c4;--text:#fff;--muted:#fff;--accent:#1e6ea0;--glass:rgba(255, 255, 255, 0.12)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;align-items:center}.site-header{background:var(--card);padding:12px 0;border-bottom:1px solid var(--glass);position:fixed;top:0;left:0;right:0;z-index:1000}.header-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;color:var(--text)}.logo img{width:32px;height:32px}.nav ul{display:flex;gap:20px;list-style:none}.nav a{color:var(--text);text-decoration:none;padding:6px 0;font-family:var(--font-family);font-weight:600}.nav a:hover,.nav a.disabled:hover{color:var(--accent)}.nav .submenu{display:none;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--glass);border-radius:8px;min-width:180px;padding:8px 0;box-shadow:0 2px 6px rgb(0 0 0 / .3);z-index:1000}.nav .submenu a{display:block;padding:8px 16px}.nav .submenu a.disabled{color:var(--muted);cursor:not-allowed}.nav-toggle{display:none}.center{width:100%;margin:0 auto;margin-top:65px;padding:clamp(20px, 5vw, 40px) clamp(12px, 2vw, 20px)}.about-hero{text-align:center;padding:clamp(5px, 2vw, 10px) clamp(12px, 2vw, 20px);background:var(--repeat-gradient)}.about-hero h1{font-size:clamp(1.5rem, 4vw, 2rem);margin-bottom:clamp(12px, 2vw, 20px);width:100%}.about-hero p{font-size:clamp(0.9rem, 2.5vw, 1.1rem);max-width:600px;margin:0 auto clamp(16px, 3vw, 30px);color:var(--muted)}.site-footer{background:var(--card);padding:clamp(20px, 5vw, 40px) clamp(12px, 2vw, 20px);width:100%}.footer-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px, 2vw, 20px);max-width:1400px;margin:0 auto}.footer-col h4{margin-bottom:clamp(8px, 1.5vw, 12px);color:var(--text)}.footer-col p,.footer-col ul{color:var(--muted);font-size:clamp(0.85rem, 2vw, 0.95rem)}.footer-col ul{list-style:none;padding:0;margin:0}.footer-col ul li{margin-bottom:clamp(6px, 1vw, 8px)}.footer-col a{color:var(--muted);text-decoration:none}.footer-col a:hover,.footer-col a:focus{color:var(--accent)}.footer-note{margin-top:clamp(12px, 2vw, 20px);text-align:center;font-size:clamp(12px, 1.8vw, 14px);color:var(--muted)}.cta-buttons{display:flex;gap:clamp(12px, 2vw, 16px);justify-content:center;flex-wrap:wrap}.cta-button{padding:clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px);font-size:clamp(1rem, 2vw, 1.1rem);font-weight:600;color:var(--text);background:var(--accent);border:none;border-radius:6px;cursor:pointer;transition:background 0.3s ease,transform 0.2s ease}.cta-button:hover,.cta-button:focus{transform:translateY(-5px);box-shadow:0 5px 15px var(--glass)}.cta-button.secondary{background:var(--card);border:1px solid var(--glass);color:var(--text)}.header-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}.logo img{width:36px;height:36px;border-radius:6px;object-fit:cover}.font-pressstart{font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:1px}.app{width:100%;max-width:var(--max-width);display:grid;grid-template-columns:260px 1fr 320px;gap:var(--gap);align-items:start;margin-bottom:14px;z-index:700}aside.left,aside.right,main.card{background:linear-gradient(180deg,rgb(255 255 255 / .02),rgb(255 255 255 / .01));border-radius:var(--radius);padding:12px;border:1px solid rgb(255 255 255 / .03);min-height:360px;box-shadow:0 6px 18px rgb(0 0 0 / .5)}main.card{display:flex;flex-direction:column;gap:10px;padding:14px;overflow:hidden}.toggle-btn{width:100%;display:block;text-align:left;padding:8px 10px;margin-bottom:8px;background:#fff0;color:var(--text);border:1px dashed rgb(255 255 255 / .03);cursor:pointer;border-radius:6px}.close-drawer{display:none}.aside-content{display:none;padding:8px 4px}.aside-content.active{display:block}.controls-section h3{margin:6px 0;color:var(--muted);font-size:13px}.controls-section label{font-size:13px;display:block;margin:6px 0;color:var(--text)}select,input[type="text"],input[type="search"]{width:100%;padding:8px;border-radius:6px;border:1px solid rgb(255 255 255 / .03);background:rgb(255 255 255 / .02);color:var(--text);font-size:13px}.category-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.category-btn{padding:6px 8px;font-size:12px;border-radius:6px;cursor:pointer;border:1px solid rgb(255 255 255 / .03);background:#fff0;color:var(--text)}.category-btn.active{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgb(0 0 0 / .45);transform:translateY(-2px)}.tool-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.tool-bar h2{font-family:'Press Start 2P',monospace;font-size:14px;margin:0}.muted{color:var(--muted);font-size:13px}.emoji-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:60vh;overflow:auto;padding:6px;border-radius:6px;background:linear-gradient(180deg,rgb(255 255 255 / .005),transparent);border:1px solid rgb(255 255 255 / .02);transition:var(--transition)}.emoji-card{display:flex;align-items:center;gap:10px;padding:10px;background:linear-gradient(180deg,rgb(255 255 255 / .01),rgb(255 255 255 / .005));border-radius:8px;cursor:pointer;border:1px solid rgb(255 255 255 / .02);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);user-select:none}.emoji-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgb(0 0 0 / .6);border-color:var(--accent)}.emoji-symbol{font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--glass);border-radius:6px;font-family:"Segoe UI Symbol","Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}.emoji-meta{display:flex;flex-direction:column;gap:4px;min-width:0}.emoji-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.emoji-slug{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}#detailsPane{font-size:13px;line-height:1.35}.detail-symbol{font-size:48px;margin-bottom:8px}.detail-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:6px 8px;border-radius:999px;background:rgb(255 255 255 / .02);font-size:12px;border:1px solid rgb(255 255 255 / .03)}.statusbar{padding:8px 16px;border-radius:4px;transition:background-color 0.3s,opacity 0.3s}.statusbar.copied{background-color:var(--glass);opacity:1;font-weight:600;color:var(--text)}#status{font-size:13px;color:var(--muted)}@media (max-width:1100px){.app{grid-template-columns:1fr}.emoji-grid{grid-template-columns:repeat(2,1fr)}aside.right{order:3}aside.left{order:1}main.card{order:2}.set-toggle,.fav-toggle{position:fixed;top:100px;z-index:1100;background:var(--accent);color:#fff;border:none;width:48px;height:48px;border-radius:6px;font-size:20px;cursor:pointer;transition:transform 0.2s,background-color 0.2s}.set-toggle:hover,.fav-toggle:hover,.set-toggle:focus,.fav-toggle:focus{transform:scale(1.1);background-color:#c715c7}.set-toggle{left:10px}.fav-toggle{right:10px}.close-drawer{position:absolute;top:10px;right:10px;background:#fff0;border:none;color:var(--text);font-size:24px;cursor:pointer}.nav-toggle{display:block;background:none;border:none;color:var(--text);cursor:pointer;padding:clamp(6px, 1vw, 8px);z-index:1100}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--glass);border-radius:8px;padding:clamp(8px, 1.5vw, 12px);min-height:100px;box-sizing:border-box;z-index:1000}.nav.active{display:block!important}.nav ul{flex-direction:column;gap:clamp(8px, 1.5vw, 12px)}.has-submenu>a::after{content:" ▼";font-size:.8rem}.has-submenu.open .submenu{display:block;position:relative;border:none;background:#fff0;padding-left:clamp(12px, 2vw, 16px)}.left,.right{position:fixed;top:150px;bottom:0;width:80%;max-width:320px;background:var(--panel);transition:transform 0.3s ease,opacity 0.3s ease;z-index:1200;overflow-y:auto;padding-top:50px;opacity:0;visibility:hidden}.left{left:0;transform:translateX(-100%)}.right{right:0;transform:translateX(100%)}.left.active,.right.active{transform:translateX(0);opacity:1;visibility:visible}.close-drawer{display:block}aside.left,aside.right{background:var(--panel);border:none;box-shadow:0 0 20px rgb(0 0 0 / .6)}.footer-columns{grid-template-columns:1fr}}@media (max-width:640px){.emoji-grid{grid-template-columns:1fr}}.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid rgb(255 255 255 / .03);background:#fff0;color:var(--text);cursor:pointer}.btn.accent{background:var(--accent);color:#fff}.btn.small{padding:6px 8px;font-size:12px;transition:transform 0.2s,background-color 0.2s}.btn.small.copied{transform:scale(1.1);background-color:var(--accent)}.btn.small.copied::after{content:'✓';margin-left:8px;font-size:12px}.preview{margin-top:8px;background:linear-gradient(180deg,rgb(0 0 0 / .25),rgb(0 0 0 / .18));padding:10px;border-radius:8px;border:1px solid rgb(255 255 255 / .02)}.fav-list{display:flex;flex-direction:column;gap:8px}.fav-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:rgb(255 255 255 / .01)}.overlay{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:900}.overlay.visible{opacity:1;pointer-events:auto}@media (max-width:768px){.set-toggle,.fav-toggle{position:fixed;top:100px;z-index:1100;background:var(--accent);color:#fff;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:20px;cursor:pointer;transition:transform 0.2s,background-color 0.2s}.set-toggle:hover,.fav-toggle:hover,.set-toggle:focus,.fav-toggle:focus{transform:scale(1.1);background-color:#c715c7}.set-toggle{left:10px}.set-toggle{right:10px}.close-drawer{position:absolute;top:10px;right:10px;background:#fff0;border:none;color:var(--text);font-size:24px;cursor:pointer}.left,.right{position:fixed;top:150px;bottom:0;width:80%;max-width:320px;background:var(--panel);transition:transform 0.3s ease,opacity 0.3s ease;z-index:1200;overflow-y:auto;padding-top:50px;opacity:0;visibility:hidden}.left{left:0;transform:translateX(-100%)}.right{right:0;transform:translateX(100%)}.left.active,.right.active{transform:translateX(0);opacity:1;visibility:visible}}@media (min-width:1100px){.set-toggle,.fav-toggle{display:none}}.tab-container{display:flex;gap:8px;margin-bottom:10px;border-bottom:1px solid var(--muted)}.tab-btn{background:none;border:none;padding:8px 16px;font-size:14px;color:var(--muted);cursor:pointer;transition:color 0.2s,background-color 0.2s}.tab-btn.active{color:var(--text);background-color:var(--glass);border-bottom:2px solid var(--accent)}.tab-btn:hover{color:var(--text)}.tab-content{display:none;min-height:100px;overflow:visible}.tab-content.active{display:block!important}#copyHistory{min-height:100px;background:rgb(255 255 255 / .02)}#clearHistoryBtn{display:none}#clearHistoryBtn.active{display:block}@media (max-width:640px){.tab-btn{padding:6px 12px;font-size:12px}}#counter{display:none}.emoji-browser-section{width:100%;max-width:var(--max-width);margin-top:14px;margin-bottom:14px;padding:clamp(16px, 2vw, 20px);border-radius:var(--radius);position:relative}.emoji-browser-section::before{content:'';position:absolute;inset:0;border:2px solid #fff0;pointer-events:none}.emoji-browser-intro{margin-bottom:24px}.emoji-browser-intro h1{font-family:'Press Start 2P',monospace;font-size:clamp(18px, 3vw, 20px);color:var(--text);margin-bottom:12px;transition:text-shadow 0.3s ease;text-align:center}.emoji-browser-intro p{font-size:clamp(14px, 2vw, 16px);color:var(--muted);line-height:1.5;text-align:justify}.emoji-browser-guide{margin-bottom:24px;padding:12px;background:var(--glass);border-radius:6px;border:1px solid rgb(255 255 255 / .03);transition:transform 0.3s ease}.emoji-browser-guide:hover{transform:translateY(-4px)}.emoji-browser-guide h2{font-family:'Press Start 2P',monospace;font-size:clamp(16px, 2.5vw, 18px);color:var(--accent);margin-bottom:10px;transition:text-shadow 0.3s ease}.emoji-browser-guide p{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:12px}.emoji-browser-guide ol{font-size:14px;color:var(--text);line-height:1.6;padding-left:20px;margin-bottom:12px}.emoji-browser-guide ol li{margin-bottom:8px;position:relative;padding-left:12px}.emoji-browser-guide ol li::before{position:absolute;left:0;color:var(--accent);font-size:12px}.emoji-browser-guide p:last-child{color:var(--muted);font-style:italic;padding:8px;background:rgb(0 0 0 / .1);border-radius:4px}.emoji-browser-why{margin-bottom:24px}.emoji-browser-why h2{font-size:clamp(16px, 2.5vw, 18px);color:var(--text);margin-bottom:10px}.emoji-browser-why p{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:12px}.emoji-browser-why ul{font-size:14px;color:var(--text);line-height:1.6;padding-left:20px;margin-bottom:12px}.emoji-browser-why ul li{margin-bottom:8px;position:relative;padding-left:12px}.emoji-browser-why ul li::before{content:'■';position:absolute;left:0;color:var(--accent);font-size:12px}.emoji-browser-features{margin-bottom:24px;padding:12px;border-radius:6px}.emoji-browser-features h2{font-size:clamp(16px, 2.5vw, 18px);color:var(--text);margin-bottom:10px}.emoji-browser-features h2:hover{text-shadow:0 0 10px var(--accent)}.emoji-browser-features p{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:12px}.emoji-browser-features ul{font-size:14px;color:var(--text);line-height:1.6;padding-left:20px;margin-bottom:12px}.emoji-browser-features ul li{margin-bottom:8px;position:relative;padding-left:12px}.emoji-browser-features ul li::before{content:'■';position:absolute;left:0;color:var(--accent);font-size:12px}.emoji-browser-tips{margin-bottom:24px}.emoji-browser-tips h2{font-size:clamp(16px, 2.5vw, 18px);margin-bottom:10px;transition:text-shadow 0.3s ease}.emoji-browser-tips h2:hover{text-shadow:0 0 10px var(--text)}.emoji-browser-tips p{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:12px}.emoji-browser-tips ul{font-size:14px;color:var(--text);line-height:1.6;padding-left:20px;margin-bottom:12px}.emoji-browser-tips ul li{margin-bottom:8px;position:relative;padding-left:12px}.emoji-browser-tips ul li::before{content:'■';position:absolute;left:0;color:var(--accent);font-size:12px}.emoji-browser-faqs{margin-bottom:24px;padding:12px;background:var(--glass);border-radius:6px;border:1px solid rgb(255 255 255 / .03);transition:transform 0.3s ease}.emoji-browser-faqs:hover{transform:translateY(-4px)}.emoji-browser-faqs h2{font-family:'Press Start 2P',monospace;font-size:clamp(16px, 2.5vw, 18px);color:var(--text);margin-bottom:10px;transition:text-shadow 0.3s ease}.emoji-browser-faqs h2:hover{text-shadow:0 0 10px var(--text)}.emoji-browser-faqs p{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:12px}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:16px}.faq-item{background:rgb(255 255 255 / .02);border-radius:6px;border:1px solid var(--glass);padding:10px;transition:transform 0.3s ease,box-shadow 0.3s ease}.faq-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .2)}.faq-toggle{width:100%;background:none;border:none;font-size:18px;color:var(--text);text-align:left;padding:10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color 0.3s ease}.faq-toggle:hover{color:var(--accent)}.emoji-accent{font-size:1.2em;transition:transform 0.3s ease}.faq-toggle:hover .emoji-accent{transform:scale(1.2)}.faq-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease}.faq-content p{font-size:13px;color:var(--text);line-height:1.6;padding:10px}.faq-item.active .faq-content{max-height:200px}@media (max-width:768px){.emoji-browser-section{padding:12px}.emoji-browser-intro h1,.emoji-browser-guide h2,.emoji-browser-why h2,.emoji-browser-features h2,.emoji-browser-tips h2,.emoji-browser-faqs h2{font-size:clamp(14px, 2.5vw, 16px)}.emoji-browser-intro p,.emoji-browser-guide p,.emoji-browser-why p,.emoji-browser-features p,.emoji-browser-tips p,.emoji-browser-faqs p{font-size:13px}.emoji-browser-guide ol,.emoji-browser-why ul,.emoji-browser-features ul,.emoji-browser-tips ul{font-size:13px;padding-left:16px}.faq-grid{grid-template-columns:1fr}.faq-content p{font-size:12px}}@media (max-width:640px){.emoji-browser-section{margin-top:10px;margin-bottom:10px}.emoji-browser-guide,.emoji-browser-features,.emoji-browser-faqs{padding:8px}}