diff --git a/index.html b/index.html
index 5d11f35..41481bd 100644
--- a/index.html
+++ b/index.html
@@ -47,23 +47,28 @@
         <button id="resetBuild" type="button" class="secondary">Reset current build</button>
       </section>
 
-      <section class="card import-export" aria-labelledby="import-export-heading">
-        <div>
-          <h2 id="import-export-heading">Import / Export</h2>
+      <details class="card import-export">
+        <summary>
+          <span>
+            <strong id="import-export-heading">Import / Export</strong>
+            <small>Back up, share, or restore a build as JSON.</small>
+          </span>
+        </summary>
+        <div class="import-export-body" aria-labelledby="import-export-heading">
           <p>Back up or share the current build as JSON. Paste JSON directly or upload a saved file to import.</p>
+          <div class="io-actions">
+            <button id="copyExport" type="button">Generate / Copy JSON</button>
+            <button id="downloadExport" type="button" class="secondary">Download JSON</button>
+            <label class="file-button secondary">
+              Upload JSON
+              <input id="importFile" type="file" accept="application/json,.json" />
+            </label>
+            <button id="importJson" type="button">Import pasted JSON</button>
+          </div>
+          <textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
+          <p id="importExportStatus" class="status" role="status"></p>
         </div>
-        <div class="io-actions">
-          <button id="copyExport" type="button">Generate / Copy JSON</button>
-          <button id="downloadExport" type="button" class="secondary">Download JSON</button>
-          <label class="file-button secondary">
-            Upload JSON
-            <input id="importFile" type="file" accept="application/json,.json" />
-          </label>
-          <button id="importJson" type="button">Import pasted JSON</button>
-        </div>
-        <textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
-        <p id="importExportStatus" class="status" role="status"></p>
-      </section>
+      </details>
 
       <section class="summary-grid" aria-label="Build summary">
         <article class="metric"><span>Total damage base</span><strong id="totalDamage">0</strong></article>
diff --git a/styles.css b/styles.css
index 6f0eb94..a04f4b7 100644
--- a/styles.css
+++ b/styles.css
@@ -115,9 +115,31 @@ h3 { margin-bottom: 0; }
 
 .import-export {
   display: grid;
-  gap: 0.9rem;
   margin-bottom: 1rem;
 }
+.import-export summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.import-export summary::-webkit-details-marker { display: none; }
+.import-export summary::after {
+  content: "▾";
+  color: var(--accent);
+  font-size: 1.1rem;
+  transition: transform 0.18s ease;
+}
+.import-export:not([open]) summary::after { transform: rotate(-90deg); }
+.import-export summary strong { display: block; font-size: 1.15rem; }
+.import-export summary small { display: block; color: var(--muted); margin-top: 0.2rem; }
+.import-export-body {
+  display: grid;
+  gap: 0.9rem;
+  margin-top: 0.9rem;
+}
 .import-export p { color: var(--muted); margin-bottom: 0; }
 .io-actions {
   display: flex;