:root {
  --ted-bg: var(--lt-bg, #FAF8F4);
  --ted-card: rgba(255,255,255,.78);
  --ted-text: var(--lt-text, #161616);
  --ted-muted: var(--lt-muted, #6B7280);
  --ted-accent: var(--lt-accent, #9E7B42);
  --ted-border: rgba(22,22,22,.10);
  --ted-shadow: 0 18px 60px rgba(22,22,22,.08);
}

.ted-directory { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ted-text); width:100%; margin:0 auto; }
.ted-directory *, .ted-directory *::before, .ted-directory *::after { box-sizing:border-box; }
.ted-hero { position:relative; overflow:hidden; text-align:center; padding:clamp(30px,5vw,64px) clamp(18px,4vw,54px) clamp(26px,4vw,46px); border:1px solid var(--ted-border); border-radius:28px 28px 0 0; background:linear-gradient(150deg,rgba(255,255,255,.84),rgba(158,123,66,.09)); box-shadow:var(--ted-shadow); }
.ted-hero::after { content:""; position:absolute; width:240px; height:240px; right:-120px; top:-158px; border-radius:50%; background:rgba(158,123,66,.09); pointer-events:none; }
.ted-eyebrow { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--ted-accent); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.ted-eyebrow::before { content:""; width:28px; height:1px; background:currentColor; opacity:.75; }
.ted-hero h2 { position:relative; z-index:1; max-width:800px; margin:0 auto; font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(40px,6vw,72px); line-height:.95; font-weight:700; letter-spacing:-.045em; color:var(--ted-text); }
.ted-intro { position:relative; z-index:1; max-width:650px; margin:18px auto 0; font-size:clamp(15px,1.7vw,18px); line-height:1.7; color:var(--ted-muted); }
.ted-meta { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:26px auto 0; }
.ted-meta span { border:1px solid rgba(158,123,66,.22); background:rgba(255,255,255,.65); padding:8px 11px; border-radius:999px; color:#6e522a; font-size:12px; font-weight:700; }
.ted-workspace { border:1px solid var(--ted-border); border-top:0; padding:clamp(18px,3vw,38px); background:rgba(255,255,255,.62); border-radius:0 0 28px 28px; box-shadow:var(--ted-shadow); }
.ted-search-row { display:flex; align-items:center; gap:12px; }
.ted-search-wrap { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
.ted-search-wrap svg { position:absolute; left:18px; width:20px; height:20px; color:var(--ted-muted); pointer-events:none; }
.ted-search { width:100%; min-width:0; height:58px; padding:0 48px; border:1px solid var(--ted-border); border-radius:17px; background:rgba(250,248,244,.82); color:var(--ted-text); font:inherit; font-size:16px; outline:0; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.ted-search:focus { border-color:var(--ted-accent); box-shadow:0 0 0 4px rgba(158,123,66,.14); background:#fff; }
.ted-search::placeholder { color:#8b8f98; }
.ted-clear { position:absolute; right:12px; border:0; background:transparent; width:34px; height:34px; padding:0; border-radius:10px; color:var(--ted-muted); font-size:28px; line-height:1; cursor:pointer; }
.ted-clear:hover { background:rgba(22,22,22,.06); color:var(--ted-text); }
.ted-variant-toggle { min-height:58px; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--ted-border); background:rgba(250,248,244,.82); padding:8px 14px; border-radius:17px; color:var(--ted-text); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ted-variant-toggle input { appearance:none; width:35px; height:20px; margin:0; flex:0 0 auto; border-radius:999px; background:#d5d2cc; position:relative; transition:.18s ease; }
.ted-variant-toggle input::after { content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; left:3px; top:3px; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:.18s ease; }
.ted-variant-toggle input:checked { background:var(--ted-accent); }
.ted-variant-toggle input:checked::after { transform:translateX(15px); }
.ted-variant-copy { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.ted-variant-copy strong { font-size:12px; }
.ted-variant-copy small { color:var(--ted-muted); font-size:10px; font-weight:600; }
.ted-quick-searches { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 2px 0; color:var(--ted-muted); font-size:12px; font-weight:700; }
.ted-quick-searches > span { margin-right:2px; }
.ted-quick-searches button { appearance:none; border:1px solid rgba(22,22,22,.09); border-radius:999px; background:rgba(255,255,255,.65); padding:6px 9px; color:#555a63; font:inherit; font-size:12px; line-height:1.1; cursor:pointer; transition:border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
.ted-quick-searches button:hover { transform:translateY(-1px); border-color:rgba(158,123,66,.45); background:#fff; color:var(--ted-text); }
.ted-category-label { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:27px 2px 8px; color:var(--ted-muted); font-size:12px; font-weight:700; }
.ted-category-label span:first-child { color:var(--ted-text); font-weight:800; }
.ted-tabs-wrap { margin:0 -4px; overflow-x:auto; padding:4px; scrollbar-width:thin; }
.ted-tabs { display:flex; align-items:center; gap:8px; width:max-content; min-width:100%; }
.ted-tab { appearance:none; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ted-border); border-radius:999px; background:transparent; color:var(--ted-muted); padding:9px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.ted-tab:hover { transform:translateY(-1px); border-color:rgba(158,123,66,.48); color:var(--ted-text); }
.ted-tab[aria-selected="true"] { background:var(--ted-text); color:#fff; border-color:var(--ted-text); box-shadow:0 8px 20px rgba(22,22,22,.13); }
.ted-tab-icon { display:inline-flex; align-items:center; justify-content:center; min-width:16px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:15px; line-height:1; }
.ted-tab small { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:rgba(22,22,22,.08); color:inherit; font-size:10px; }
.ted-tab[aria-selected="true"] small { background:rgba(255,255,255,.16); }
.ted-results-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 14px; }
.ted-status, .ted-device-note { margin:0; font-size:13px; }
.ted-status { color:var(--ted-text); font-weight:800; }
.ted-device-note { color:var(--ted-muted); text-align:right; }
.ted-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(102px,1fr)); gap:10px; }
.ted-emoji-card { position:relative; appearance:none; min-height:104px; border:1px solid rgba(22,22,22,.08); background:var(--ted-card); border-radius:17px; padding:12px 8px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--ted-text); font:inherit; overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.ted-emoji-card:hover, .ted-emoji-card:focus-visible { transform:translateY(-4px); border-color:rgba(158,123,66,.54); background:#fff; box-shadow:0 14px 25px rgba(22,22,22,.1); outline:0; }
.ted-emoji-card:active { transform:translateY(-1px) scale(.98); }
.ted-emoji { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:32px; line-height:1; min-height:36px; display:flex; align-items:center; justify-content:center; }
.ted-name { width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#535862; font-size:10px; line-height:1.28; text-align:center; }
.ted-card-copy { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(22,22,22,.88); color:#fff; font-size:12px; font-weight:800; opacity:0; transform:scale(.96); transition:opacity .16s ease, transform .16s ease; pointer-events:none; }
.ted-emoji-card.is-copied .ted-card-copy { opacity:1; transform:scale(1); }
.ted-load-wrap { display:flex; justify-content:center; margin-top:24px; }
.ted-load-more { border:0; border-radius:999px; padding:13px 20px; background:var(--ted-accent); color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(158,123,66,.22); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.ted-load-more:hover { transform:translateY(-2px); background:#87652f; box-shadow:0 14px 30px rgba(158,123,66,.3); }
.ted-empty { min-height:180px; border:1px dashed rgba(22,22,22,.18); border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; color:var(--ted-muted); }
.ted-empty strong { color:var(--ted-text); font-size:16px; }
.ted-empty span { font-size:13px; }
.ted-copy-buffer { position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.ted-copy-drawer { position:fixed; z-index:99998; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); width:min(620px,calc(100vw - 24px)); display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:11px; border:1px solid rgba(255,255,255,.14); border-radius:19px; background:var(--ted-text); color:#fff; box-shadow:0 18px 45px rgba(0,0,0,.28); transform:translateX(-50%); }
.ted-copy-drawer[hidden] { display:none; }
.ted-copy-drawer-emoji { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.12); font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:24px; }
.ted-copy-drawer-text { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ted-copy-drawer-title { font-size:13px; }
.ted-copy-drawer-hint { color:rgba(255,255,255,.72); font-size:11px; line-height:1.3; }
.ted-copy-drawer-input { width:42px; min-width:42px; height:40px; padding:0; border:0; border-radius:10px; background:#fff; color:#111; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:22px; text-align:center; outline:0; }
.ted-copy-drawer-action, .ted-copy-drawer-close { border:0; cursor:pointer; font:800 12px/1 Inter,system-ui,sans-serif; }
.ted-copy-drawer-action { height:40px; padding:0 13px; border-radius:10px; background:var(--ted-accent); color:#fff; }
.ted-copy-drawer-close { width:32px; height:32px; padding:0; border-radius:9px; background:rgba(255,255,255,.10); color:#fff; font-size:20px; }
.ted-toast { position:fixed; z-index:99999; left:50%; bottom:26px; transform:translate(-50%, 16px); opacity:0; pointer-events:none; min-width:180px; max-width:calc(100vw - 40px); background:var(--ted-text); color:#fff; padding:12px 15px; border-radius:999px; box-shadow:0 12px 35px rgba(0,0,0,.25); font:600 13px/1.2 Inter,system-ui,sans-serif; text-align:center; transition:.2s ease; }
.ted-toast.is-visible { opacity:1; transform:translate(-50%, 0); }
.ted-copy-drawer:not([hidden]) + .ted-copy-buffer + .ted-toast.is-visible { bottom:104px; }
.ted-skeleton { pointer-events:none; background:linear-gradient(90deg,rgba(22,22,22,.04),rgba(22,22,22,.08),rgba(22,22,22,.04)); background-size:200% 100%; animation:ted-shimmer 1.1s infinite; }
@keyframes ted-shimmer { to { background-position:-200% 0; } }
@media (max-width: 680px) {
  .ted-hero { border-radius:22px 22px 0 0; }
  .ted-workspace { border-radius:0 0 22px 22px; padding:16px; }
  .ted-search-row { flex-direction:column; align-items:stretch; }
  .ted-variant-toggle { justify-content:space-between; min-height:56px; }
  .ted-search { height:54px; }
  .ted-quick-searches { gap:6px; }
  .ted-category-label { align-items:flex-start; flex-direction:column; gap:4px; margin-top:24px; }
  .ted-results-head { align-items:flex-start; flex-direction:column; gap:5px; margin-top:18px; }
  .ted-device-note { text-align:left; }
  .ted-grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
  .ted-emoji-card { min-height:94px; padding:8px 5px; border-radius:14px; }
  .ted-emoji { font-size:28px; }
  .ted-name { font-size:9px; }
  .ted-tab { padding:9px 11px; }
  .ted-copy-drawer { grid-template-columns:auto minmax(0,1fr) auto auto; gap:8px; padding:10px; }
  .ted-copy-drawer-hint { display:none; }
  .ted-copy-drawer-input { width:40px; min-width:40px; }
  .ted-copy-drawer-action { padding:0 10px; }
  .ted-copy-drawer:not([hidden]) + .ted-copy-buffer + .ted-toast.is-visible { bottom:86px; }
}
@media (max-width: 380px) { .ted-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } .ted-quick-searches > span { width:100%; } }
@media (prefers-reduced-motion: reduce) { .ted-directory *, .ted-directory *::before, .ted-directory *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
