GraphGallery.zh.qmd

---
title: Graph Gallery
---

👋 **Bizard** 是一个为生物医学研究量身定制的高级可视化代码综合存储库。目前包含约 750 张图表，涵盖超过 65 种图表类型。以下是所有图表的图库。

表格中的每一行对应一个图表。您可以点击图表进行放大预览。点击图表的蓝色标题，可以跳转到对应的图文教程页面。表格的搜索框提供了图表搜索功能。

```{r}
#| echo: false
#| message: false
#| warning: false

library(reactable)
library(jsonlite)
library(dplyr)
library(crosstalk)
library(htmltools)

data <- read.csv("files/gallery_data_zh.csv")
```

## 🎯 智能图表推荐

描述您的可视化目标，系统将推荐最适合的图表：

<div id="recommender-widget" class="recommender-container">
  <textarea id="recommender-input" rows="3" placeholder="例如：我想比较不同实验组之间的基因表达差异..." style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit;"></textarea>
  <br>
  <button id="recommender-btn" onclick="recommendChartsZh()" style="margin-top: 8px; padding: 8px 16px; background: #007899; color: white; border: none; border-radius: 4px; cursor: pointer;">推荐图表</button>
  <div id="recommender-results" style="margin-top: 16px;"></div>
</div>

## 基础

### 分布图

```{r}
#| echo: false
data_Distribution <- data[data$Level2=="Distribution",]

tbl <- reactable(
  data_Distribution,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 相关性图

```{r}
#| echo: false
data_Correlation <- data[data$Level2=="Correlation",]

tbl <- reactable(
  data_Correlation,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 排序图

```{r}
#| echo: false
data_Ranking <- data[data$Level2=="Ranking",]

tbl <- reactable(
  data_Ranking,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 整体与部分图

```{r}
#| echo: false
data_Ranking <- data[data$Level2=="Composition",]

tbl <- reactable(
  data_Ranking,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 时间演化图

```{r}
#| echo: false
data_Ranking <- data[data$Level2=="Evolution",]

tbl <- reactable(
  data_Ranking,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 流动图

```{r}
#| echo: false
data_Ranking <- data[data$Level2=="Proportion",]

tbl <- reactable(
  data_Ranking,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 动画图

```{r}
#| echo: false
data_Ranking <- data[data$Level2=="Animation",]

tbl <- reactable(
  data_Ranking,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

## 组学

```{r}
#| echo: false
data_OMICS <- data[data$Level1=="OMICS",]

tbl <- reactable(
  data_OMICS,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```


## 临床

```{r}
#| echo: false
data_OMICS <- data[data$Level1=="CLINICS",]

tbl <- reactable(
  data_OMICS,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

## 𝐏𝐘𝐓𝐇𝐎𝐍

```{r}
#| echo: false
data_PYTHON <- data[data$Level1=="PYTHON",]

tbl <- reactable(
  data_PYTHON,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

## 𝐉𝐔𝐋𝐈𝐀

```{r}
#| echo: false
data_JULIA <- data[data$Level1=="JULIA",]

tbl <- reactable(
  data_JULIA,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

## 𝐇𝐈𝐏𝐋𝐎𝐓

### 基础

```{r}
#| echo: false
data_HIPLOT_BASICS <- data[data$Level1=="HIPLOT" & data$Level2=="BASICS",]

tbl <- reactable(
  data_HIPLOT_BASICS,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 组学

```{r}
#| echo: false
data_HIPLOT_OMICS <- data[data$Level1=="HIPLOT" & data$Level2=="OMICS",]

tbl <- reactable(
  data_HIPLOT_OMICS,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 临床

```{r}
#| echo: false
data_HIPLOT_CLINICS <- data[data$Level1=="HIPLOT" & data$Level2=="CLINICS",]

tbl <- reactable(
  data_HIPLOT_CLINICS,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```

### 地图

```{r}
#| echo: false
data_HIPLOT_MAP <- data[data$Level1=="HIPLOT" & data$Level2=="MAP",]

tbl <- reactable(
  data_HIPLOT_MAP,
  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
  columns = list(
    Id = colDef(
      name = "Id", align = "center", minWidth = 70, maxWidth = 90
    ),
    Name = colDef(
      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
    ),
    Image_url = colDef(show = FALSE),
    Tutorial_url = colDef(show = FALSE),
    Description =colDef(show = FALSE),
    Type = colDef(name = "Type"),
    Level1 =colDef(show = FALSE),
    Level2 =colDef(show = FALSE)
  ), 
  searchable = TRUE,
  defaultPageSize = 7
)

div(
  class = "movies",
  tbl,
  div(id = "modal",  class="modal", onclick="hideModal()",
      img(
        id="modal-image", class="modal-image"
      ))
)
```






```{js, echo=FALSE}

function renderGraph(cellInfo) {
  const url = cellInfo.row['Tutorial_url']
  const imageSrc = cellInfo.row['Image_url']
  const altText = cellInfo.value
  const description = cellInfo.row['Description']
  const poster = `<img src="${imageSrc}" class="movie-poster" alt="${altText}" onclick="showModal(this)">`

  const title = `<a href="${url}" target="_blank">${cellInfo.value}</a>`

  const details = `<div class="movie-info-details">${description}</div>`
  const text = `<div class="movie-info-text">${title}${details}</div>`
  return `<div class="movie-info">${poster}${text}</div>`
}

function showModal(image) {
  var modal = document.getElementById("modal");
  var modalImage = document.getElementById("modal-image");
  modal.style.display = "block";
  modalImage.src = image.src;
}

function hideModal() {
  var modal = document.getElementById("modal");
  modal.style.display = "none";
}

// Smart Recommender Functions (Chinese + English bilingual support)
let keywordsDataZh = null;
let keywordsDataEn = null;

// XSS prevention: sanitize user-generated content
function sanitizeZh(str) {
  if (!str) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

async function loadKeywordsZh() {
  if (!keywordsDataZh) {
    try {
      // Load both Chinese and English dictionaries for bilingual support
      const responseZh = await fetch('../files/recommender_keywords_zh.json');
      const responseEn = await fetch('../files/recommender_keywords.json');
      if (!responseZh.ok || !responseEn.ok) throw new Error('加载关键词失败');
      const dataZh = await responseZh.json();
      const dataEn = await responseEn.json();

      // Merge both dictionaries
      keywordsDataZh = {
        synonyms: { ...dataZh.synonyms, ...dataEn.synonyms },
        intentKeywords: { ...dataZh.intentKeywords, ...dataEn.intentKeywords }
      };
    } catch (e) {
      console.error('Error loading keywords:', e);
      return null;
    }
  }
  return keywordsDataZh;
}

function tokenizeZh(text) {
  // Bilingual tokenization: handle both Chinese characters and English words
  const englishTokens = text.toLowerCase().split(/[\s,.!?;:'"()\[\]]+/).filter(t => t.length > 0 && !/[\u4e00-\u9fa5]/.test(t));
  // For Chinese, we use character-by-character scanning plus common phrases
  const chineseTokens = text.match(/[\u4e00-\u9fa5]+/g) || [];
  return [...englishTokens, ...chineseTokens];
}

function extractKeywordsZh(text, synonyms) {
  // Instead of tokenizing, we scan the text for all known keywords
  const found = new Set();
  const textLower = text.toLowerCase();

  // Check all synonym keys and their values
  Object.keys(synonyms).forEach(key => {
    // Check if key appears in text
    if (text.includes(key) || textLower.includes(key.toLowerCase())) {
      found.add(key);
      synonyms[key].forEach(syn => found.add(syn));
    }
    // Check if any synonym value appears in text
    synonyms[key].forEach(syn => {
      if (text.includes(syn) || textLower.includes(syn.toLowerCase())) {
        found.add(syn);
        found.add(key);
        synonyms[key].forEach(s => found.add(s));
      }
    });
  });

  // Also add English tokens for mixed input
  const tokens = tokenizeZh(text);
  tokens.forEach(t => found.add(t));

  return Array.from(found);
}

function expandSynonymsZh(tokens, synonyms) {
  // This function now receives pre-extracted keywords, just expand them
  const expanded = new Set(tokens);
  tokens.forEach(token => {
    if (synonyms[token]) {
      synonyms[token].forEach(syn => expanded.add(syn));
    }
    Object.keys(synonyms).forEach(key => {
      if (synonyms[key].includes(token) || key === token) {
        expanded.add(key);
        synonyms[key].forEach(syn => expanded.add(syn));
      }
    });
  });
  return Array.from(expanded);
}

function matchIntentsZh(tokens, intentKeywords) {
  const matched = [];
  Object.keys(intentKeywords).forEach(intent => {
    const keywords = intentKeywords[intent];
    if (keywords.some(kw => tokens.includes(kw))) {
      matched.push(intent);
    }
  });
  return matched;
}

function calculateScoreZh(tokens, intents, text, chart) {
  let score = 0;

  // Base keyword match - check if any token appears in chart data
  tokens.forEach(token => {
    if (text.includes(token)) score += 1;
  });

  // Intent match bonus
  intents.forEach(intent => {
    score += 2;
  });

  // Type exact match bonus
  if (tokens.some(t => chart.Type.includes(t))) score += 3;

  return score;
}

async function recommendChartsZh() {
  const input = document.getElementById('recommender-input').value.trim();
  if (!input) {
    document.getElementById('recommender-results').innerHTML = '<p style="color: #666;">请输入您的可视化目标描述。</p>';
    return;
  }

  // Show loading indicator
  const btn = document.getElementById('recommender-btn');
  const originalText = btn.textContent;
  btn.disabled = true;
  btn.textContent = '搜索中...';

  try {
    // Load keywords
    const keywords = await loadKeywordsZh();
    if (!keywords) {
      document.getElementById('recommender-results').innerHTML = '<p style="color: #cc0000;">加载关键词失败，请稍后重试。</p>';
      return;
    }

    // Get chart data from Chinese CSV
    const csvResponse = await fetch('../files/gallery_data_zh.csv');
    if (!csvResponse.ok) throw new Error('加载图表数据失败');
    const csvText = await csvResponse.text();
    const chartData = parseCSV(csvText);

    // Extract keywords from input using new scanning method
    const extractedKeywords = extractKeywordsZh(input, keywords.synonyms);
    const expandedTokens = expandSynonymsZh(extractedKeywords, keywords.synonyms);
    const matchedIntents = matchIntentsZh(expandedTokens, keywords.intentKeywords);

    // Score each chart
    const results = chartData.map(chart => {
      const searchableText = `${chart.Name} ${chart.Description} ${chart.Type} ${chart.Level1} ${chart.Level2}`;
      const score = calculateScoreZh(expandedTokens, matchedIntents, searchableText, chart);
      return { chart, score, matchedKeywords: expandedTokens.filter(t => searchableText.includes(t)) };
    }).filter(r => r.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, 5);

    // Display results
    const resultsDiv = document.getElementById('recommender-results');
    if (results.length === 0) {
      resultsDiv.innerHTML = '<p style="color: #666;">未找到匹配的图表。请尝试其他关键词。</p>';
      return;
    }

    resultsDiv.innerHTML = `<p style="font-weight: 600;">匹配结果 (${results.length})：</p>` +
      results.map(r => `
        <div class="recommender-card" style="display: flex; align-items: center; margin: 8px 0; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa;">
          <img src="${sanitizeZh(r.chart.Image_url)}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; margin-right: 12px;" onclick="showModal(this)">
          <div style="flex: 1;">
            <a href="${sanitizeZh(r.chart.Tutorial_url)}" target="_blank" style="color: #007899; font-weight: 600; text-decoration: none;">${sanitizeZh(r.chart.Name)}</a>
            <p style="margin: 4px 0 0 0; color: #666; font-size: 0.9em;">${sanitizeZh(r.chart.Description)}</p>
            <p style="margin: 4px 0 0 0; color: #888; font-size: 0.8em;">匹配关键词: ${r.matchedKeywords.slice(0, 5).map(k => sanitizeZh(k)).join(', ')}</p>
          </div>
        </div>
      `).join('');
  } catch (e) {
    console.error('Error in recommendChartsZh:', e);
    document.getElementById('recommender-results').innerHTML = '<p style="color: #cc0000;">搜索时发生错误，请稍后重试。</p>';
  } finally {
    // Restore button state
    btn.disabled = false;
    btn.textContent = originalText;
  }
}

function parseCSV(text) {
  const lines = text.trim().split('\n');
  const headers = lines[0].split(',');
  return lines.slice(1).map(line => {
    const values = line.split(',');
    const obj = {};
    headers.forEach((h, i) => obj[h] = values[i] || '');
    return obj;
  });
}
```

```{css, echo=FALSE}

/* Font from https://fontsarena.com/hanken-grotesk-by-hanken-design-co/ */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/HKGrotesk-Regular.woff2") format("woff2"),
       url("fonts/HKGrotesk-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  src: url("fonts/HKGrotesk-SemiBold.woff2") format("woff2"),
       url("fonts/HKGrotesk-SemiBold.woff") format("woff");
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/HKGrotesk-Bold.woff2") format("woff2"),
       url("fonts/HKGrotesk-Bold.woff") format("woff");
}

.movies {
  font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
}

.movies h2 {
  font-weight: 600;
}

.movies a {
  color: #007899;
  text-decoration: none;
}

.movies a:hover,
.movies a:focus {
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
}

.movies-tbl {
  margin-top: 1rem;
  font-size: 1rem;
}

.header {
  color: hsl(0, 0%, 45%);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.header:hover[aria-sort],
.header[aria-sort='ascending'],
.header[aria-sort='descending'] {
  color: hsl(0, 0%, 5%);
}

.movie-info {
  display: flex;
  align-items: center;
}

.movie-info-text {
  margin-left: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-info-details {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: hsl(0, 0%, 40%);
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-poster {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 1px hsl(0, 0%, 95%);
  cursor: zoom-in;
}

.movie-runtime {
  display: inline-block;
}

.movie-rating {
  margin-right: 0.25rem;
  padding: 0 0.25rem;
  border: 1px solid hsl(0, 0%, 75%);
  border-radius: 2px;
}

.user-score {
  font-weight: 600;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-left: -32px;
}

.filter-input {
  margin-top: 0.5rem;
  margin-left: 32px;
  flex: 1;
  min-width: 250px;
}

.filter-input label {
  color: hsl(0, 0%, 45%);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.filter-input select,
.filter-input input[type="search"] {
  padding: 0 0.375rem;
  height: 2rem;
}

.filter-input input[type="search"] {
  /* Revert Bootstrap 5's Reboot styles, which change native search input styling */
  -webkit-appearance: searchfield;
  outline-offset: revert;
  border-color: revert;
}


.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
}

.modal-image {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  margin-top: 5%;
}

/* Smart Recommender Styles */
.recommender-container {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
}

.recommender-card:hover {
  background: #f0f0f0;
  border-color: #007899;
}
```