feat: wrap advanced settings in collapsible <details> panel

src/app/globals.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ── Light mode tokens ── */
 :root {
   --bg: #F7F4F0;
   --surface: #ffffff;
@@ -20,7 +19,6 @@
   --error-hover: #fecaca;
 }
 
-/* ── Dark mode tokens ── */
 .dark {
   --bg: #0f172a;
   --surface: #1e293b;
@@ -55,6 +53,7 @@
   --film-400: #66FF66;
 }
 
+
 /* Ensure export overlay text is readable in high-contrast by forcing dark text */
 [data-theme="high-contrast"] .export-text,
 [data-theme="high-contrast"] .export-text * {
@@ -79,13 +78,31 @@
 }
 
 /* ── Base styles ── */
+
 body {
   background-color: var(--bg);
   color: var(--text);
-  transition: background-color 0.3s ease, color 0.3s ease;
+  font-family: var(--font-body), "DM Sans", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.025;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+  background-size: 300px 300px;
+}
+
+#__next, main, [data-nextjs-scroll-focus-boundary] {
+  position: relative;
+  z-index: 1;
 }
 
-/* Smooth transitions for all themed elements */
 *,
 *::before,
 *::after {
@@ -94,8 +111,33 @@ body {
   transition-duration: 200ms;
 }
 
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@layer utilities {
+  .font-display {
+    font-family: var(--font-display), sans-serif;
+  }
+  .font-heading {
+    font-family: var(--font-heading), sans-serif;
+  }
+  .animate-fade-in {
+    animation: fade-in 0.4s ease-out both;
+  }
+}
+
+
+details > summary {
+  cursor: pointer;
+}
+details > summary::-webkit-details-marker {
+  display: none;
+}
 :focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: 4px;
-}
+}
+