switched from accordion to newly created tab widget

app/src/components/Tab.astro

@@ -0,0 +1,6 @@
+---
+const { title } = Astro.props;
+---
+<div class="tab-panel" data-tab-title={title} role="tabpanel" hidden>
+  <slot />
+</div>

app/src/components/Tabs.astro

@@ -0,0 +1,132 @@
+---
+const { class: className, ...props } = Astro.props;
+const wrapperClass = ["tabs", className].filter(Boolean).join(" ");
+---
+<div class={wrapperClass} {...props}>
+  <div class="tabs__nav" role="tablist"></div>
+  <div class="tabs__panels">
+    <slot />
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.tabs').forEach((tabsEl) => {
+      const nav = tabsEl.querySelector('.tabs__nav') as HTMLElement;
+      const panels = Array.from(tabsEl.querySelectorAll(':scope > .tabs__panels > .tab-panel')) as HTMLElement[];
+      if (!nav || panels.length === 0) return;
+
+      panels.forEach((panel, i) => {
+        const title = panel.dataset.tabTitle || `Tab ${i + 1}`;
+        const btn = document.createElement('button');
+        btn.className = 'tabs__btn';
+        btn.role = 'tab';
+        btn.textContent = title;
+        btn.setAttribute('aria-selected', 'false');
+        btn.addEventListener('click', () => activate(i));
+        nav.appendChild(btn);
+      });
+
+      const buttons = Array.from(nav.querySelectorAll('.tabs__btn')) as HTMLButtonElement[];
+
+      function activate(index: number) {
+        buttons.forEach((b, i) => {
+          const active = i === index;
+          b.classList.toggle('tabs__btn--active', active);
+          b.setAttribute('aria-selected', String(active));
+        });
+        panels.forEach((p, i) => {
+          p.hidden = i !== index;
+        });
+      }
+
+      // Keyboard navigation
+      nav.addEventListener('keydown', (e) => {
+        const current = buttons.findIndex(b => b === document.activeElement);
+        if (current < 0) return;
+        let next = current;
+        if (e.key === 'ArrowRight') next = (current + 1) % buttons.length;
+        else if (e.key === 'ArrowLeft') next = (current - 1 + buttons.length) % buttons.length;
+        else if (e.key === 'Home') next = 0;
+        else if (e.key === 'End') next = buttons.length - 1;
+        else return;
+        e.preventDefault();
+        buttons[next].focus();
+        activate(next);
+      });
+
+      activate(0);
+    });
+  });
+</script>
+
+<style>
+  .tabs {
+    margin: 0 0 var(--spacing-4);
+    border: 1px solid var(--border-color);
+    border-radius: var(--table-border-radius);
+    background: var(--surface-bg);
+  }
+
+  .tabs__nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    border-bottom: 1px solid var(--border-color);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .tabs__nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tabs__nav :global(.tabs__btn) {
+    flex: 1 1 0;
+    padding: var(--spacing-2) var(--spacing-3);
+    text-align: center;
+    border: none !important;
+    border-bottom: 2px solid transparent !important;
+    border-radius: 0 !important;
+    background: none !important;
+    font: inherit;
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--text-muted) !important;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-bottom: -1px;
+    transition: color 150ms ease, border-color 150ms ease;
+    filter: none !important;
+  }
+
+  .tabs__nav :global(.tabs__btn:hover) {
+    color: var(--text-color) !important;
+    filter: none !important;
+  }
+
+  .tabs__nav :global(.tabs__btn--active) {
+    color: var(--primary-color) !important;
+    border-bottom-color: var(--primary-color) !important;
+  }
+
+  .tabs__nav :global(.tabs__btn:focus-visible) {
+    outline: 2px solid var(--primary-color);
+    outline-offset: -2px;
+    border-radius: 2px;
+  }
+
+  .tabs__panels :global(.tab-panel) {
+    padding: 8px;
+  }
+
+  .tabs__panels :global(.tab-panel > *:first-child) {
+    margin-top: 0 !important;
+  }
+
+  .tabs__panels :global(.tab-panel > *:last-child) {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
+</style>

app/src/content/chapters/2-setup.mdx

@@ -1,5 +1,6 @@
-import Accordion from "../../components/Accordion.astro";
 import Sidenote from "../../components/Sidenote.astro";
+import Tabs from "../../components/Tabs.astro";
+import Tab from "../../components/Tab.astro";
 
 
 ## Rephrasing the Web
@@ -30,30 +31,32 @@ For inference we use vLLM [@vllm] with tensor parallelism, chunked prefill, and
 
 Before diving into experiments, here's a quick overview of the datasets we compare against. We use "source data" and "seed data" interchangeably throughout.
 
-<Accordion title="DCLM" open>
+<Tabs>
+<Tab title="DCLM">
   A standardized benchmark providing a 240T token corpus from Common Crawl with model-based filtering as a key curation strategy. DCLM (DataComp-LM) enables training a 7B parameter model to 64% accuracy on MMLU with 2.6T tokens [@datacomp].
-</Accordion>
-<Accordion title="FineWeb-Edu-HQ / FineWeb-Edu-LQ">
+</Tab>
+<Tab title="FineWeb-Edu-HQ / LQ">
   Subsets of FineWeb-Edu, a 1.3T token educational dataset filtered using Llama-3-70B-Instruct [@llama3] scoring samples on educational quality from 0 to 5. We use HQ (scores 4 or 5) and LQ (scores 0 or 1) to investigate the impact of seed data quality on rephrasing [@fineweb].
-</Accordion>
-<Accordion title="Ultra-FineWeb">
+</Tab>
+<Tab title="Ultra-FineWeb">
   A 1T English token and 120B Chinese token dataset created by applying efficient verification-based filtering to FineWeb. Uses a lightweight fastText classifier and optimized seed data selection to improve data quality [@ultrafineweb].
-</Accordion>
-<Accordion title="Essential-Web">
+</Tab>
+<Tab title="Essential-Web">
   A 24T token web dataset from 101 Common Crawl snapshots with document-level metadata for flexible curation. Each of the 23.6B documents is annotated with subject classification, document type, content complexity, and quality scores using the [EAI-Taxonomy-0.5b](https://huggingface.co/EssentialAI/eai-taxonomy-0.5b) classifier, enabling researchers to filter domain-specific subsets without building custom pipelines [@essentialweb].
-</Accordion>
-<Accordion title="Nemotron-HQ-Synth">
+</Tab>
+<Tab title="Nemotron-HQ-Synth">
   Part of Nemotron-CC, a 6.3T token dataset using classifier ensembling and synthetic data rephrasing. The High-Quality-Synthetic subset contains synthetically rephrased data using Qwen3-30B-A3B [@qwen3] [@nemotroncc].
-</Accordion>
-<Accordion title="Cosmopedia">
+</Tab>
+<Tab title="Cosmopedia">
   A 30 million file synthetic dataset with 25 billion tokens generated by Mixtral-8x7B-Instruct [@mixtral], containing textbooks, blog posts, and stories across diverse topics. Created through careful prompt engineering conditioning on curated educational sources and web data clusters [@cosmopedia].
-</Accordion>
-<Accordion title="SYNTH">
+</Tab>
+<Tab title="SYNTH">
   A fully synthetic dataset built from 50,000 Wikipedia articles expanded into problems and resolution paths including math exercises, creative writing, and information extraction. Uses multiple specialized synthetic pipelines with fine-tuned models and grounding in encyclopedic content [@synthpleias].
-</Accordion>
-<Accordion title="REWIRE">
+</Tab>
+<Tab title="REWIRE">
   A method for recycling the web with guided rewriting that enriches low-quality documents discarded by filtering pipelines. Mixing high-quality raw texts with rewritten texts leads to 1.0, 1.3, and 2.5 percentage point improvements at 1B, 3B, and 7B scales across 22 tasks [@rewire].
-</Accordion>
+</Tab>
+</Tabs>
 
 With the datasets defined, we need a consistent way to tell whether one configuration is better than another.