:root {
  --base00: #080810;
  --base01: #0c0c1a;
  --base02: #1e1e38;
  --base03: #444444;
  --base04: #8888aa;
  --base05: #c0c0d0;
  --base06: #c0c0d8;
  --base07: #e0e0f0;
  --base08: #EC4899;
  --base09: #F97316;
  --base0A: #F59E0B;
  --base0B: #10B981;
  --base0C: #94A3B8;
  --base0D: #3B82F6;
  --base0E: #7C5CBF;
  --base0F: #EF4444;
}
body {
  margin: 0; padding: 0; overflow: hidden;
  background: var(--base00);
  color: var(--base05);
  font-family: 'DM Mono', 'Courier New', monospace;
}
*::-webkit-scrollbar { width: 3px; }
*::-webkit-scrollbar-thumb { background: var(--base02); border-radius: 2px; }
input:focus { outline: none; }
input::placeholder { color: var(--base03); }
a:hover { opacity: 0.8; }

#header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 22px 28px;
  background: linear-gradient(to bottom, var(--base00) 55%, transparent);
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
#header > div { pointer-events: auto; }
#search-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 7px 12px 7px 32px;
  color: var(--base05);
  font-size: 13px;
  font-family: inherit;
  width: 210px;
  box-sizing: border-box;
}

#detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100vw;
  transform: translateX(100%);
  background: var(--base01);
  border-left: 1px solid rgba(255,255,255,0.06);
  z-index: 30; overflow-y: auto; display: flex; flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
#detail-panel.open { transform: translateX(0); }

.detail-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.detail-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--base04);
  margin-bottom: 8px;
}

#stats {
  position: absolute; bottom: 28px; right: 28px; z-index: 20;
  color: var(--base04); font-size: 12px; letter-spacing: 0.1em; text-align: right;
}

#theme-label {
  color: var(--base04);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#email-link {
  color: var(--base04);
}

.tag-pill {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 4px 0;
  cursor: pointer; color: var(--base04);
  font-size: 13px; font-family: inherit;
  transition: opacity 0.15s, color 0.15s;
}
.tag-pill.active { color: currentColor; }
.tag-pill.dimmed { opacity: 0.35; }

#tags-legend {
  position: absolute; bottom: 28px; left: 28px; z-index: 20;
}

svg { display: block; width: 100vw; height: 100vh; }

@media (max-width: 600px) {
  #header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 20px;
    gap: 15px;
  }
  #header > div:last-child {
    display: none;
  }
  #tags-legend {
    display: none;
  }
  #stats {
    display: none;
  }
}