@font-face { font-family:"Material Symbols Outlined Local"; font-style:normal; font-weight:400; font-display:block; src:url("./assets/material-symbols/material-symbols-outlined.woff2") format("woff2"); }
@font-face { font-family:"Noto Emoji Local"; font-style:normal; font-weight:400; font-display:block; src:url("./assets/noto-emoji-monochrome/NotoEmoji-Regular.ttf") format("truetype"); }
:root { color-scheme:dark; --bg:#131314; --panel:#1b1b1b; --raised:#282a2c; --line:#444746; --text:#e3e3e3; --muted:#c4c7c5; --blue:#a8c7fa; --emoji-size:40px; font-family:"Google Sans Flex",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); font-size:14px; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
[hidden] { display:none !important; }
.ui-symbol,.rail-symbol { font-family:"Material Symbols Outlined Local"; font-weight:400; font-size:24px; line-height:1; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; }
.rail { position:fixed; width:96px; inset:0 auto 0 0; background:var(--panel); display:flex; align-items:center; flex-direction:column; gap:24px; z-index:5; padding:24px 8px; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; margin-bottom:12px; }
.brand-mark img { display:block; width:36px; height:36px; }
.rail-button { width:80px; padding:0 4px; border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--muted); }
.rail-symbol { display:grid; place-items:center; width:56px; height:32px; border-radius:20px; }
.rail-button.active { color:var(--blue); }
.rail-button.active .rail-symbol { background:#004a77; color:#c2e7ff; }
.rail-button:hover .rail-symbol { background:var(--raised); }
.rail-github { margin-top:auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--muted); }
.rail-github:hover { background:var(--raised); }
.rail-github img { width:24px; height:24px; filter:brightness(0) invert(.78); }
.rail-bottom { width:28px; height:28px; border:2px solid var(--muted); border-radius:50%; display:grid; place-items:center; color:var(--muted); font-size:17px; }
.shell { margin-left:96px; }
.topbar { position:sticky; top:0; z-index:4; min-height:88px; padding:16px 32px; display:grid; grid-template-columns:208px minmax(0,1fr); align-items:center; gap:12px 32px; background:var(--bg); }
.brand { font-size:26px; font-weight:500; white-space:nowrap; letter-spacing:-.7px; }
.brand span { display:inline; font-size:22px; font-weight:400; letter-spacing:-.5px; margin-left:8px; color:var(--muted); }
.search-box { background:#1e1f20; border:1px solid transparent; border-radius:32px; display:flex; align-items:center; padding:0 20px; gap:14px; color:var(--muted); }
.search-box:focus-within { border-color:var(--blue); background:var(--raised); }
.search-box input { width:auto; height:54px; min-width:0; border:0; outline:none; background:transparent; color:var(--text); font-size:16px; }
.search-box #search { flex:1 1 56%; }
.search-box #within-filter { flex:0 1 32%; font-size:14px; }
.search-divider { align-self:stretch; width:1px; margin:11px 0; background:var(--line); }
.search-box input:focus-visible { outline:none; }
.search-box input::placeholder { color:var(--muted); }
.inline-toggle { flex:none; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; cursor:pointer; }
.inline-toggle.busy { cursor:progress; }
kbd { padding:2px 7px; border:1px solid var(--line); border-radius:4px; font-size:12px; color:var(--muted); }
.button { background:var(--blue); color:#062e6f; border:1px solid transparent; border-radius:999px; padding:14px 22px; font-weight:500; font-size:14px; }
.button:hover { filter:brightness(1.08); }
.button.subtle { background:transparent; border-color:#8e918f; color:var(--blue); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"results"; align-items:start; }
.workspace.with-detail { grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"results detail"; }
.workspace.with-detail .filters { flex-wrap:wrap; }
.workspace.with-detail .view-options { order:3; flex-basis:100%; justify-content:flex-start; }
.filters { position:relative; z-index:2; display:flex; align-items:center; gap:16px; margin:0 0 24px; padding:16px 0 20px; border-bottom:1px solid var(--line); background:var(--bg); }
.filters.pinned { position:sticky; top:var(--topbar-height,88px); z-index:3; padding:12px 16px; margin-right:-16px; margin-left:-16px; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 28px #0005; }
.filters.pinned #close-filters { visibility:hidden; pointer-events:none; }
.text-button { border:0; background:none; color:var(--blue); padding:8px 0; font-size:12px; }
.text-button:hover { text-decoration:underline; }
.view-options { min-width:0; flex:1; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.filter-label { display:none; }
select { width:168px; min-height:40px; background:var(--raised); color:var(--text); border:1px solid transparent; padding:9px 12px; border-radius:8px; font-size:13px; }
.multi-filter { position:relative; width:180px; font-size:13px; }
.multi-filter summary { width:100%; padding:11px 32px 11px 14px; border:1px solid transparent; border-radius:8px; background:var(--raised); cursor:pointer; list-style:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.multi-filter summary::-webkit-details-marker { display:none; }
.multi-filter summary::after { content:'⌄'; position:absolute; top:8px; right:14px; color:var(--muted); }
.multi-filter[open] summary { border-color:var(--blue); }
.multi-filter-menu { position:absolute; top:100%; left:0; width:260px; z-index:7; margin-top:8px; max-height:310px; overflow-y:auto; scrollbar-width:thin; padding:8px; border:1px solid var(--line); border-radius:12px; background:#1e1f20; box-shadow:0 12px 32px #0007; }
.multi-filter-actions { position:sticky; top:-8px; display:flex; justify-content:flex-end; gap:12px; padding:8px 4px 12px; background:#1e1f20; border-bottom:1px solid var(--line); }
.multi-filter-actions button { padding:0; border:0; background:transparent; color:var(--blue); font-size:12px; }
.multi-filter-option { display:flex; align-items:center; gap:10px; padding:10px 6px; border-radius:6px; color:var(--text); line-height:1.4; font-size:13px; }
.multi-filter-option:hover { background:var(--raised); }
.multi-filter-option input { margin:0; flex:none; }
.tone-toggle { display:flex; align-items:center; gap:8px; margin:0; padding:0; border:0; font-size:12px; color:var(--muted); line-height:1.5; white-space:nowrap; }
input[type=checkbox] { accent-color:var(--blue); width:16px; height:16px; flex:none; }
.expansion-panel { grid-column:2; min-width:0; display:flex; align-items:center; gap:12px; padding:8px 16px; border-radius:16px; background:var(--panel); overflow:hidden; }
.expansion-panel>strong { flex:none; color:var(--muted); font-size:12px; font-weight:500; }
.ai-progress { min-width:210px; display:flex; align-items:center; gap:10px; color:var(--text); font-size:12px; white-space:nowrap; }
.ai-progress progress { width:120px; height:6px; border:0; border-radius:999px; overflow:hidden; background:var(--raised); accent-color:var(--blue); }
.ai-progress progress::-webkit-progress-bar { background:var(--raised); border-radius:999px; }
.ai-progress progress::-webkit-progress-value { background:var(--blue); border-radius:999px; }
.ai-progress progress::-moz-progress-bar { background:var(--blue); border-radius:999px; }
.expansion-terms { min-width:0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; }
.expansion-term { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-size:12px; white-space:nowrap; }
main { grid-area:results; min-width:0; padding:32px 32px 48px; }
.result-count { font-size:14px; color:var(--muted); }
.emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; }
.emoji-card { min-width:0; height:140px; border:2px solid transparent; border-radius:8px; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 8px; gap:16px; position:relative; content-visibility:auto; contain-intrinsic-size:auto 140px; }
.emoji-card:hover { background:var(--raised); }
.emoji-card[aria-pressed=true] { background:var(--raised); border-color:var(--muted); }
.emoji { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-weight:400; font-style:normal; display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none; font-size:var(--emoji-size); line-height:1; }
.emoji.noto-emoji-monochrome { font-family:"Noto Emoji Local"; font-variant-emoji:text; color:var(--text); }
.emoji.material-symbol { font-family:"Material Symbols Outlined Local"; font-weight:400; font-style:normal; font-size:40px; letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; color:var(--text); }
.emoji img { width:100%; height:100%; object-fit:contain; }
.emoji.monochrome img { filter:brightness(0) invert(.89); }
.card-caption { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; min-width:0; }
.card-name { min-width:0; max-width:100%; color:var(--text); font-size:14px; text-align:center; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-mark,.match-mark { padding:3px 6px; border-radius:4px; background:#004a77; color:#c2e7ff; font-size:8px; line-height:1; letter-spacing:.3px; }
.related-mark { position:absolute; top:8px; left:8px; }
.match-mark.exact { background:#0f5223; color:#c4eed0; }
.match-mark.keyword { background:#534600; color:#ffe16b; }
.emoji-grid.image-only { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; }
.emoji-grid.image-only .emoji-card { height:112px; padding:16px; gap:0; }
.emoji-grid.image-only .emoji { width:48px; height:48px; font-size:44px; }
.emoji-grid.image-only .emoji.material-symbol { font-size:40px; }
.empty-state { text-align:center; padding:80px 16px; color:var(--muted); }
.empty-state>span { font-size:48px; }
.empty-state h2 { font-size:22px; color:var(--text); font-weight:400; }
.empty-state p { font-size:14px; line-height:1.5; }
.detail { grid-area:detail; position:sticky; top:var(--topbar-height,88px); max-height:calc(100dvh - var(--topbar-height,88px)); overflow-y:auto; padding:24px; border-left:1px solid var(--line); background:var(--bg); scrollbar-width:thin; }
.detail-top { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:24px; }
.detail-top span { color:var(--muted); font-size:12px; letter-spacing:1px; }
.close-button { border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:28px; width:36px; height:36px; padding:0; line-height:1; }
.close-button:hover { background:var(--raised); }
.preview { display:flex; align-items:center; justify-content:center; height:196px; border:1px solid var(--line); border-radius:16px; background:transparent; margin-bottom:24px; }
.preview .emoji { width:96px; height:96px; font-size:88px; }
.preview .emoji.material-symbol { font-size:88px; }
.detail h2 { font-size:24px; font-weight:400; line-height:1.3; letter-spacing:-.5px; margin:0 0 24px; overflow-wrap:anywhere; }
.english-name { color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.5; }
.detail-actions { display:flex; gap:12px; margin-bottom:24px; }
.detail-actions .button { flex:1; padding:13px 12px; }
.metadata { font-size:13px; margin:0; }
.metadata>div { display:flex; justify-content:space-between; align-items:start; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.metadata dt { color:var(--muted); flex:none; }
.metadata dd { margin:0; text-align:right; color:var(--text); overflow-wrap:anywhere; line-height:1.5; }
.metadata code { font-size:11px; }
.metadata a { color:var(--blue); }
.section-label { font-size:16px; font-weight:500; margin:28px 0 16px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:8px; background:transparent; padding:7px 10px; }
.tag:hover { background:var(--raised); color:var(--text); }
.hint { color:var(--muted); font-size:12px; line-height:1.7; margin:20px 0 0; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:16px 24px; background:var(--text); color:#303030; border-radius:4px; z-index:20; font-size:14px; max-width:90vw; box-shadow:0 4px 12px #0004; }
@media(min-width:1600px) { main { padding:40px 48px 48px; } }
@media(max-width:1200px) { .workspace.with-detail { grid-template-columns:minmax(0,1fr) 288px; } .topbar { grid-template-columns:184px minmax(0,1fr); gap:12px 24px; padding:16px 24px; } .brand span { font-size:18px; } main { padding:28px 24px; } .detail { padding:24px 20px; } .filters { flex-wrap:wrap; } .view-options { order:3; flex-basis:100%; justify-content:flex-start; } }
@media(max-width:1000px) { .workspace.with-detail { grid-template-columns:minmax(0,1fr); grid-template-areas:"results"; } .detail { position:fixed; top:var(--topbar-height,88px); right:0; bottom:0; width:320px; z-index:6; box-shadow:-12px 0 40px #0005; } }
@media(max-width:760px) {
  .rail { width:72px; padding:20px 4px; } .rail-button { width:64px; font-size:11px; } .shell { margin-left:72px; }
  .topbar { grid-template-columns:minmax(0,1fr); gap:16px; padding:20px 16px 16px; } .brand { font-size:24px; } .brand span { font-size:20px; }
  .search-box { padding:0 14px; gap:8px; } .search-box input { font-size:14px; height:50px; } .search-box #search { flex-basis:48%; } .search-box #within-filter { flex-basis:28%; font-size:12px; } .search-divider { margin:10px 0; } .inline-toggle { font-size:11px; } kbd { display:none; }
  .expansion-panel { grid-column:1; } .expansion-panel>strong { display:none; } .ai-progress { min-width:0; flex:1; } .ai-progress progress { flex:1; }
  .workspace,.workspace.with-detail { grid-template-columns:minmax(0,1fr); grid-template-areas:"results"; }
  .filters { gap:10px; padding:12px 0 16px; } .filters.pinned { margin-right:0; margin-left:0; padding:12px; }
  .view-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .multi-filter { width:auto; min-width:0; font-size:12px; } .multi-filter summary { padding:13px 26px 13px 10px; } .multi-filter summary::after { right:10px; }
  select { width:100%; min-width:0; font-size:12px; padding:10px; min-height:44px; } .multi-filter-menu { width:220px; } #license-filter .multi-filter-menu { left:auto; right:0; }
  .tone-toggle { grid-column:1 / -1; margin-top:4px; font-size:12px; }
  main { padding:28px 16px; } .emoji-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; }
  .emoji-grid.image-only { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:4px; } .emoji-grid.image-only .emoji-card { height:96px; }
  .detail { top:0; width:min(360px,calc(100vw - 72px)); max-height:100dvh; } .result-count { font-size:12px; }
}
@media(max-width:400px) { .search-box { flex-wrap:wrap; padding:8px 14px; } .search-box>svg { display:none; } .search-box #search { flex:1 1 55%; height:38px; } .search-box #within-filter { flex:1 1 35%; height:38px; } .search-divider { height:28px; align-self:center; margin:0; } .inline-toggle { width:100%; justify-content:flex-end; font-size:11px; } }
@media(prefers-reduced-motion:no-preference) { .emoji-card,.button,.tag,.search-box { transition:background .15s,border-color .15s; } }

.filter-actions { display:flex; align-items:center; gap:8px; flex:none; }
.filter-actions .close-button { width:28px; height:32px; }
.workspace.filters-closed { grid-template-columns:minmax(0,1fr); grid-template-areas:"results"; }
.workspace.filters-closed.with-detail { grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"results detail"; }
@media(max-width:1200px) and (min-width:1001px) { .workspace.filters-closed.with-detail { grid-template-columns:minmax(0,1fr) 288px; } }
@media(max-width:1000px) { .workspace.filters-closed.with-detail { grid-template-columns:minmax(0,1fr); grid-template-areas:"results"; } }