.emoji-sheet { padding-top: 2.5rem; padding-bottom: 4rem; }
.emoji-sheet .emoji-intro { max-width: 58rem; }
.emoji-sheet h1 { margin: .4rem 0 1rem; font-size: clamp(2.1rem,5vw,4rem); }
.emoji-sheet .emoji-lead { max-width: 48rem; font-size: 1.15rem; }
.emoji-showcase { display:flex; gap:1rem; flex-wrap:wrap; margin:1.5rem 0; }
.emoji-showcase img { width:48px; height:48px; image-rendering:pixelated; }
.emoji-quicklinks { display:flex; gap:.7rem; flex-wrap:wrap; margin:1.5rem 0 2rem; }
.emoji-quicklinks a { padding:.65rem .9rem; border:1px solid #6e5228; border-radius:6px; text-decoration:none; }
.emoji-help { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:1.5rem 0 2.5rem; }
.emoji-help > section { background:#191321; border:1px solid #493650; border-top:2px solid #a8772f; border-radius:9px; padding:1.3rem 1.5rem; min-width:0; }
.emoji-help h2 { margin-top:0; font-size:1.4rem; }
.emoji-help li { margin:.55rem 0; }
.emoji-help code { overflow-wrap:anywhere; }
.emoji-help .emoji-caption { font-size:.9rem; color:#c9bdd2; }
.emoji-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1rem; margin:1.25rem 0 .5rem; }
.emoji-toolbar label { display:grid; gap:.45rem; color:#f2c983; font-weight:600; }
.emoji-toolbar input,.emoji-toolbar select { box-sizing:border-box; width:100%; min-height:48px; background:#14111c; color:#eee8dd; border:1px solid #695474; border-radius:6px; padding:.7rem .9rem; font:inherit; }
.emoji-count { color:#c9bdd2; margin:.7rem 0 1.25rem; }
.emoji-group { margin:2.2rem 0; scroll-margin-top:10rem; }
.emoji-group h3 { font-size:1.25rem; border-bottom:1px solid #493650; padding-bottom:.7rem; }
.emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; }
.emoji-card { background:linear-gradient(140deg,#21182d,#15101c); border:1px solid #493650; border-radius:9px; padding:1rem; min-width:0; }
.emoji-card:hover { border-color:#a8772f; }
.emoji-card img { width:48px; height:48px; image-rendering:pixelated; display:block; margin:0 auto .8rem; }
.emoji-copy { display:block; width:100%; padding:.65rem .35rem; min-height:44px; border:1px solid #a8772f; border-radius:5px; background:#2a2033; color:#f2c983; cursor:pointer; font-size:.95rem; }
.emoji-copy code { background:none; color:inherit; padding:0; font-size:inherit; overflow-wrap:anywhere; white-space:normal; }
.emoji-copy:hover { background:#3b274d; }
.emoji-copy:focus-visible,.emoji-toolbar input:focus-visible,.emoji-toolbar select:focus-visible { outline:3px solid #f2c983; outline-offset:3px; }
.emoji-card p { margin:.65rem 0 0; color:#ded5e5; font-size:.9rem; line-height:1.5; }
.emoji-card details { margin-top:.7rem; }
.emoji-card summary { cursor:pointer; color:#cbb7e2; font-size:.85rem; }
.emoji-aliases { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem; }
.emoji-aliases .emoji-copy { width:auto; max-width:100%; padding:.35rem .5rem; font-size:.8rem; min-height:36px; }
.emoji-sheet [hidden] { display:none !important; }
.emoji-copy-status { position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%); z-index:100; background:#21182d; border:1px solid #f2c983; color:#fff0d7; padding:.75rem 1.1rem; border-radius:7px; box-shadow:0 4px 20px #0008; max-width:calc(100vw - 3rem); }
.emoji-copy-status:empty { display:none; }
.emoji-empty { border:1px solid #695474; padding:1.2rem; border-radius:8px; }
.emoji-font { scroll-margin-top:10rem; }
.emoji-sheet .emoji-footnote { font-size:.85rem; color:#c9bdd2; margin-top:2rem; }
@media(max-width:680px) { .emoji-help { grid-template-columns:1fr; }.emoji-toolbar{grid-template-columns:1fr;}.emoji-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.emoji-card{padding:.8rem .55rem}.emoji-copy{font-size:.8rem}.emoji-help>section{padding:1.2rem}.emoji-copy-status{bottom:1rem}.emoji-showcase{gap:.7rem} }