/* bulopt.com — emoji copy & paste */
:root{
  --bg:#ffffff; --bg-soft:#f6f7f9; --bg-raise:#ffffff;
  --fg:#14161a; --fg-soft:#5b6472; --fg-faint:#8b95a3;
  --line:#e4e7ec; --accent:#f5b301; --accent-fg:#14161a;
  --ok:#16a34a; --radius:12px;
  --shadow:0 1px 2px rgba(16,20,28,.06),0 4px 16px rgba(16,20,28,.06);
  --cell:56px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1115; --bg-soft:#161a21; --bg-raise:#1a1f27;
    --fg:#e8ebf0; --fg-soft:#a3adbb; --fg-faint:#6f7b8a;
    --line:#252b35; --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  }
}
:root[data-theme=dark]{
  --bg:#0f1115; --bg-soft:#161a21; --bg-raise:#1a1f27;
  --fg:#e8ebf0; --fg-soft:#a3adbb; --fg-faint:#6f7b8a;
  --line:#252b35; --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
}
:root[data-theme=light]{
  --bg:#ffffff; --bg-soft:#f6f7f9; --bg-raise:#ffffff;
  --fg:#14161a; --fg-soft:#5b6472; --fg-faint:#8b95a3;
  --line:#e4e7ec; --shadow:0 1px 2px rgba(16,20,28,.06),0 4px 16px rgba(16,20,28,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:12px;padding:10px 0}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-.02em;flex:none}
.logo span{font-size:22px}
.search{flex:1;position:relative;min-width:0}
.search input{
  width:100%;padding:11px 38px 11px 38px;font-size:16px;color:var(--fg);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;outline:none;
}
.search input:focus{border-color:var(--accent);background:var(--bg-raise)}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-faint);pointer-events:none}
.search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--fg-faint);cursor:pointer;font-size:20px;line-height:1;padding:4px 6px;display:none}
.search.has .clr{display:block}
.iconbtn{flex:none;width:38px;height:38px;border:1px solid var(--line);background:var(--bg-soft);border-radius:10px;cursor:pointer;font-size:17px;line-height:1;color:var(--fg)}
.iconbtn:hover{border-color:var(--accent)}

/* ---------- category strip ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:59px;z-index:40}
.strip-in{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none;max-width:1120px;margin:0 auto}
.strip-in::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--fg-soft);
  text-decoration:none;font-size:14px;white-space:nowrap;font-weight:500;
}
.chip:hover{border-color:var(--accent);color:var(--fg)}
.chip[aria-current=page]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:30px 0 8px;text-align:center}
.hero h1{margin:0 0 8px;font-size:clamp(25px,4.4vw,38px);line-height:1.18;letter-spacing:-.025em;font-weight:800}
.hero p{margin:0 auto;max-width:60ch;color:var(--fg-soft);font-size:16px}

/* ---------- sections & grid ---------- */
.sec{margin:28px 0;scroll-margin-top:112px}
.sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.sec-h h2,.sec-h h3{margin:0;font-size:19px;letter-spacing:-.015em;font-weight:700}
.sec-h h3{font-size:16px}
.sec-h .n{color:var(--fg-faint);font-size:13px;font-weight:500}
.sec-h a.more{margin-left:auto;font-size:13px;color:var(--fg-soft);text-decoration:none;font-weight:600}
.sec-h a.more:hover{color:var(--fg);text-decoration:underline}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr));gap:4px}
.e{
  position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:29px;line-height:1;background:none;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;padding:0;color:inherit;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Android Emoji",sans-serif;
  transition:background .12s,transform .12s;
}
.e:hover{background:var(--bg-soft);border-color:var(--line);transform:translateY(-1px)}
.e:active{transform:scale(.92)}
.e.copied{background:var(--ok);border-color:var(--ok)}
.e[data-t]::after{content:"";position:absolute;right:5px;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--fg-faint);opacity:.5}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;
  font-size:15px;font-weight:600;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:90vw;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- skin tone popover ---------- */
#tones{
  position:absolute;z-index:150;display:none;gap:3px;padding:6px;
  background:var(--bg-raise);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);
}
#tones.on{display:flex}
#tones button{
  width:38px;height:38px;font-size:24px;line-height:1;border:0;background:none;cursor:pointer;border-radius:50%;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
#tones button:hover{background:var(--bg-soft)}

/* ---------- basket ---------- */
#basket{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);z-index:180;width:min(640px,calc(100% - 24px));
  background:var(--bg-raise);border:1px solid var(--line);border-bottom:0;
  border-radius:14px 14px 0 0;box-shadow:var(--shadow);padding:12px 14px;
  display:flex;align-items:center;gap:10px;transition:transform .2s;
}
#basket.on{transform:translate(-50%,0)}
#basket .out{
  flex:1;min-width:0;font-size:24px;line-height:1.3;overflow-x:auto;white-space:nowrap;padding:6px 0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;scrollbar-width:none;
}
#basket .out::-webkit-scrollbar{display:none}
#basket button{
  flex:none;border:1px solid var(--line);background:var(--bg-soft);color:var(--fg);
  border-radius:9px;padding:8px 13px;font-size:14px;font-weight:600;cursor:pointer;
}
#basket button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

/* ---------- empty / results ---------- */
.empty{padding:44px 0;text-align:center;color:var(--fg-soft)}
.empty b{display:block;font-size:34px;margin-bottom:8px}

/* ---------- prose & links ---------- */
.prose{max-width:70ch;color:var(--fg-soft);margin:34px 0}
.prose h2{color:var(--fg);font-size:21px;margin:26px 0 8px;letter-spacing:-.015em}
.prose h3{color:var(--fg);font-size:17px;margin:20px 0 6px}
.prose p{margin:0 0 12px}
.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.prose ul{margin:0 0 12px;padding-left:20px}
.prose li{margin:0 0 5px}

.crumb{font-size:13px;color:var(--fg-faint);padding:14px 0 0}
.crumb a{color:var(--fg-soft);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:14px 0}
.linkgrid a{
  display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;font-size:14px;font-weight:500;
}
.linkgrid a:hover{border-color:var(--accent)}
.linkgrid a .ex{font-size:19px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.linkgrid a .n{color:var(--fg-faint);font-size:12px;margin-left:auto;font-weight:500}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);margin-top:48px;padding:26px 0 40px;color:var(--fg-faint);font-size:13px}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.ftr a{color:var(--fg-soft);text-decoration:none}
.ftr a:hover{text-decoration:underline}

@media (max-width:640px){
  :root{--cell:48px}
  .e{font-size:25px}
  .logo span{font-size:20px}
  .logo{font-size:0}
  .hdr-in{gap:8px}
  .strip{top:57px}
}