32 Tailwind CSS Accordions — Vertical & Horizontal
04 / 32

All 32 in 32 Tailwind CSS Accordions — Vertical & Horizontal

  1. 01Tailwind CSS FAQ Accordion with Details and Summary
  2. 02Tailwind CSS Mobile Navigation Accordion Menu
  3. 03Tailwind CSS Product Filter Sidebar Accordion
  4. 04Tailwind CSS Nested Accordion Tree View
  5. 05Smooth Animated Tailwind Accordion with Height Transition
  6. 06Tailwind CSS Exclusive Accordion — Only One Open at a Time
  7. 07Minimal Tailwind Accordion with Animated Underline
  8. 08Tailwind CSS Numbered Steps Accordion for Onboarding
  9. 09Tailwind Accordion with Plus Minus Icon Animation
  10. 10Tailwind CSS Accordion Card with Rotating Chevron
  11. 11Brutalist Tailwind CSS Accordion
  12. 12Glassmorphism Tailwind CSS Accordion
  13. 13Tailwind CSS Timeline Accordion for Changelogs
  14. 14Tailwind CSS Card Accordion with Elevation on Open
  15. 15Skewed Tailwind CSS Accordion with Slanted Headers
  16. 16Tailwind CSS Stepped Cascade Accordion
  17. 17Tailwind Accordion with Circular Progress Ring
  18. 18Tailwind CSS Accordion with Marquee Scrolling Title
  19. 19Tailwind CSS Code Editor Accordion for Documentation
  20. 20Tailwind CSS 3D Paper Fold Accordion
  21. 21Tailwind CSS Playlist Accordion with Equalizer Animation
  22. 22Tailwind CSS Stacked Cards Accordion
  23. 23Tailwind Accordion with Animated Gradient Border
  24. 24Dark Tailwind CSS Accordion with Aurora Glow
  25. 25Tailwind CSS Horizontal Accordion Tabs
  26. 26Tailwind CSS Expanding Image Gallery Accordion
  27. 27Tailwind CSS Horizontal Accordion Feature Section
  28. 28Editorial Horizontal Accordion with Numbered Spines in Tailwind
  29. 29Tailwind CSS Horizontal Accordion with clip-path Reveal
  30. 30Tailwind CSS Album Shelf Horizontal Accordion
  31. 31Tailwind CSS Cinematic Horizontal Accordion Slider
  32. 32Tailwind CSS Aurora Gradient Horizontal Accordion
Pure TailwindMIT licensed

Tailwind CSS Nested Accordion Tree View

Four levels of nested <details> rendered as a dark IDE explorer beside an open Markdown file: chevrons that turn, folder icons that swap open/closed, indent guide lines drawn with border-s, colour-coded file-type glyphs and git status letters. The trick for nesting is the arbitrary variant [[open]>summary>&]:rotate-90 — it reads only the nearest details, where a named group-open: would leak into every closed sub-folder.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tac-04 w-full min-h-svh grid place-items-center bg-tac04-bg bg-[radial-gradient(70%_50%_at_20%_0%,var(--color-tac04-glow),transparent_70%)] px-4 py-12 font-tac04-sans text-tac04-ink [interpolate-size:allow-keywords] sm:px-6" aria-label="Tailwind nested accordion tree view demo">
  <div class="grid w-full max-w-5xl justify-items-center gap-8">
    <div class="w-full overflow-hidden rounded-2xl bg-tac04-win shadow-[0_40px_100px_-40px_oklch(0_0_0/0.9),0_0_0_1px_oklch(1_0_0/0.08),inset_0_1px_0_oklch(1_0_0/0.06)]">
      <div class="flex items-center gap-3 border-b border-tac04-line px-4 py-3">
        <span aria-hidden="true" class="flex gap-2"><span class="size-3 rounded-full bg-[#ff5f57]"></span><span class="size-3 rounded-full bg-[#febc2e]"></span><span class="size-3 rounded-full bg-[#28c840]"></span></span>
        <p class="min-w-0 flex-1 truncate text-center font-tac04-mono text-[12px] text-tac04-mut">design-system — accordion.md</p>
        <span aria-hidden="true" class="w-[52px]"></span>
      </div>
      <div class="grid md:grid-cols-[minmax(0,19rem)_minmax(0,1fr)]">
        <nav class="border-tac04-line bg-tac04-side px-2 pt-3 pb-4 md:border-e" aria-label="Project files">
          <div class="flex items-center justify-between px-2 pb-2">
            <p class="text-[11px] font-semibold tracking-[0.14em] text-tac04-mut uppercase">Explorer</p>
            <p class="rounded-md bg-white/[0.05] px-1.5 py-0.5 font-tac04-mono text-[10.5px] text-tac04-mut ring-1 ring-white/8">main</p>
          </div>
          <p class="flex min-h-9 items-center gap-2 px-2 text-[12px] font-bold tracking-[0.06em] text-tac04-ink uppercase"><svg aria-hidden="true" class="text-tac04-acc" viewBox="0 0 16 16" width="14" height="14"><path d="M8 1.5 14 5v6l-6 3.5L2 11V5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="8" cy="8" r="2" fill="currentColor"/></svg>design-system</p>
          <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
            <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">.github</span></summary>
            <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
              <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
                <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">workflows</span></summary>
                <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-yml">!</span><span class="truncate">release.yml</span></a>
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-yml">!</span><span class="truncate">visual-tests.yml</span></a>
                </div>
              </details>
            </div>
          </details>
          <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
            <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">docs</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
            <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
              <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
                <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">foundations</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
                <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                  <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
                    <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">color</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
                    <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">palette.md</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-json">{}</span><span class="truncate text-tac04-mod/95">semantic-tokens.json</span><span class="ms-auto font-tac04-mono text-[11px] font-semibold text-tac04-mod" title="Modified">M</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-json">▦</span><span class="truncate">contrast-audit.csv</span></a>
                    </div>
                  </details>
                  <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
                    <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">typography</span></summary>
                    <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">type-scale.md</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-fig">◆</span><span class="truncate">specimens.fig</span></a>
                    </div>
                  </details>
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">spacing.md</span></a>
                </div>
              </details>
              <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
                <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">components</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
                <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                  <a href="#" aria-current="page" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate text-tac04-mod/95">accordion.md</span><span class="ms-auto font-tac04-mono text-[11px] font-semibold text-tac04-mod" title="Modified">M</span></a>
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">navigation.md</span></a>
                  <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
                    <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">forms</span></summary>
                    <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">inputs.md</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">validation.md</span></a>
                    </div>
                  </details>
                </div>
              </details>
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate text-tac04-new/95">CHANGELOG.md</span><span class="ms-auto font-tac04-mono text-[11px] font-semibold text-tac04-new" title="Untracked">U</span></a>
            </div>
          </details>
          <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
            <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">src</span></summary>
            <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-ts">⚛</span><span class="truncate">Accordion.tsx</span></a>
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-css">#</span><span class="truncate">tokens.css</span></a>
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-ts">TS</span><span class="truncate">index.ts</span></a>
            </div>
          </details>
          <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-json">{}</span><span class="truncate">package.json</span></a>
          <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">README.md</span></a>
        </nav>
        <div class="hidden min-w-0 flex-col md:flex" aria-hidden="true">
          <div class="flex border-b border-tac04-line bg-tac04-side text-[12.5px]">
            <span class="relative flex items-center gap-2 border-e border-tac04-line bg-tac04-win px-4 py-2.5 text-tac04-ink before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-tac04-acc"><span class="font-tac04-mono text-[10px] font-bold text-tac04-md">M↓</span>accordion.md<span class="size-1.5 rounded-full bg-tac04-mod"></span></span>
            <span class="flex items-center gap-2 border-e border-tac04-line px-4 py-2.5 text-tac04-mut"><span class="font-tac04-mono text-[10px] font-bold text-tac04-json">&#123;&#125;</span>semantic-tokens.json</span>
          </div>
          <p class="px-5 py-2 font-tac04-mono text-[11.5px] text-tac04-mut">docs <span class="text-tac04-gutter">›</span> components <span class="text-tac04-gutter">›</span> <span class="text-tac04-soft">accordion.md</span></p>
          <div class="flex-1 px-3 pt-1 pb-6 font-tac04-mono text-[13px] leading-[1.9] text-tac04-soft">
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">1</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold"># Accordion</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">2</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">3</span><span class="min-w-0 whitespace-pre-wrap">Disclosure built on native <span class="text-tac04-code">&#96;&lt;details&gt;&#96;</span>. No script.</span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">4</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">5</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold">## Anatomy</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">6</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">-</span> <span class="text-tac04-ink font-semibold">**Trigger**</span> — <span class="text-tac04-code">&#96;&lt;summary&gt;&#96;</span>, min 44px</span></div>
            <div class="flex gap-5 bg-white/[0.035]"><span class="w-6 flex-none text-end text-tac04-soft select-none">7</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">-</span> <span class="text-tac04-ink font-semibold">**Panel**</span> — animates via <span class="text-tac04-code">&#96;::details-content&#96;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">8</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">-</span> <span class="text-tac04-ink font-semibold">**Icon**</span> — rotates 90° on <span class="text-tac04-code">&#96;[open]&#96;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">9</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">10</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold">## Nesting</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">11</span><span class="min-w-0 whitespace-pre-wrap">Cap trees at <span class="text-tac04-ink font-semibold">three levels</span>; add a</span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">12</span><span class="min-w-0 whitespace-pre-wrap">breadcrumb beyond that.</span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">13</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">14</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&#96;&#96;&#96;</span><span class="text-tac04-code">html</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">15</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&lt;</span><span class="text-tac04-head font-semibold">details</span> <span class="text-tac04-code">open</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">16</span><span class="min-w-0 whitespace-pre-wrap">  <span class="text-tac04-punct">&lt;</span><span class="text-tac04-head font-semibold">summary</span><span class="text-tac04-punct">&gt;</span>docs<span class="text-tac04-punct">&lt;/</span><span class="text-tac04-head font-semibold">summary</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">17</span><span class="min-w-0 whitespace-pre-wrap">  <span class="text-tac04-punct">&lt;</span><span class="text-tac04-head font-semibold">details</span><span class="text-tac04-punct">&gt;</span>…<span class="text-tac04-punct">&lt;/</span><span class="text-tac04-head font-semibold">details</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">18</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&lt;/</span><span class="text-tac04-head font-semibold">details</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">19</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&#96;&#96;&#96;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">20</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">21</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold">## Status</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">22</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&gt;</span> <span class="text-tac04-mut italic">Stable since v3.2 · owned by @design-infra</span></span></div>
          </div>
          <div class="flex items-center gap-4 border-t border-tac04-line bg-tac04-side px-4 py-1.5 font-tac04-mono text-[11px] text-tac04-mut">
            <span class="text-tac04-acc">⎇ main ↑2</span><span>✓ 0 problems</span><span class="ms-auto">Ln 7, Col 42</span><span>Markdown</span>
          </div>
        </div>
      </div>
    </div>
    <p aria-hidden="true" class="rounded-full px-3.5 py-2 text-center font-tac04-mono text-[11.5px] text-tac04-mut ring-1 ring-white/10">[[open]&gt;summary&gt;&amp;]:rotate-90 · border-s guide lines · has-[[aria-current=page]]:</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tac04-bg: #07080c;
  --color-tac04-bg: oklch(0.13 0.01 270);
  --color-tac04-glow: #1b2340;
  --color-tac04-glow: oklch(0.26 0.06 270 / 0.7);
  --color-tac04-win: #12141b;
  --color-tac04-win: oklch(0.195 0.014 270);
  --color-tac04-side: #0e1016;
  --color-tac04-side: oklch(0.165 0.012 270);
  --color-tac04-line: #232733;
  --color-tac04-line: oklch(0.27 0.018 270);
  --color-tac04-ink: #eef0f6;
  --color-tac04-ink: oklch(0.95 0.008 270);
  --color-tac04-soft: #b9bfcf;
  --color-tac04-soft: oklch(0.8 0.02 270);
  --color-tac04-mut: #8d93a6;
  --color-tac04-mut: oklch(0.67 0.025 270);
  --color-tac04-gutter: #6c7286;
  --color-tac04-gutter: oklch(0.56 0.025 270);
  --color-tac04-acc: #6ea8ff;
  --color-tac04-acc: oklch(0.73 0.14 255);
  --color-tac04-folder: #d9ad6a;
  --color-tac04-folder: oklch(0.78 0.1 75);
  --color-tac04-md: #6ab0f3;
  --color-tac04-md: oklch(0.74 0.12 245);
  --color-tac04-json: #e6c86e;
  --color-tac04-json: oklch(0.84 0.12 90);
  --color-tac04-css: #c792ea;
  --color-tac04-css: oklch(0.74 0.14 310);
  --color-tac04-ts: #5ec8e5;
  --color-tac04-ts: oklch(0.78 0.11 220);
  --color-tac04-yml: #f07178;
  --color-tac04-yml: oklch(0.7 0.16 20);
  --color-tac04-fig: #f38ba8;
  --color-tac04-fig: oklch(0.74 0.14 360);
  --color-tac04-mod: #e5c07b;
  --color-tac04-mod: oklch(0.83 0.1 85);
  --color-tac04-new: #7fd88f;
  --color-tac04-new: oklch(0.81 0.14 148);
  --color-tac04-head: #82aaff;
  --color-tac04-head: oklch(0.74 0.13 265);
  --color-tac04-code: #c3e88d;
  --color-tac04-code: oklch(0.88 0.13 125);
  --color-tac04-punct: #89ddff;
  --color-tac04-punct: oklch(0.85 0.1 215);
  --font-tac04-sans: 'Geist', system-ui, sans-serif;
  --font-tac04-mono: 'Geist Mono', ui-monospace, monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tac-04 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tac04-bg: #07080c;
  --color-tac04-bg: oklch(0.13 0.01 270);
  --color-tac04-glow: #1b2340;
  --color-tac04-glow: oklch(0.26 0.06 270 / 0.7);
  --color-tac04-win: #12141b;
  --color-tac04-win: oklch(0.195 0.014 270);
  --color-tac04-side: #0e1016;
  --color-tac04-side: oklch(0.165 0.012 270);
  --color-tac04-line: #232733;
  --color-tac04-line: oklch(0.27 0.018 270);
  --color-tac04-ink: #eef0f6;
  --color-tac04-ink: oklch(0.95 0.008 270);
  --color-tac04-soft: #b9bfcf;
  --color-tac04-soft: oklch(0.8 0.02 270);
  --color-tac04-mut: #8d93a6;
  --color-tac04-mut: oklch(0.67 0.025 270);
  --color-tac04-gutter: #6c7286;
  --color-tac04-gutter: oklch(0.56 0.025 270);
  --color-tac04-acc: #6ea8ff;
  --color-tac04-acc: oklch(0.73 0.14 255);
  --color-tac04-folder: #d9ad6a;
  --color-tac04-folder: oklch(0.78 0.1 75);
  --color-tac04-md: #6ab0f3;
  --color-tac04-md: oklch(0.74 0.12 245);
  --color-tac04-json: #e6c86e;
  --color-tac04-json: oklch(0.84 0.12 90);
  --color-tac04-css: #c792ea;
  --color-tac04-css: oklch(0.74 0.14 310);
  --color-tac04-ts: #5ec8e5;
  --color-tac04-ts: oklch(0.78 0.11 220);
  --color-tac04-yml: #f07178;
  --color-tac04-yml: oklch(0.7 0.16 20);
  --color-tac04-fig: #f38ba8;
  --color-tac04-fig: oklch(0.74 0.14 360);
  --color-tac04-mod: #e5c07b;
  --color-tac04-mod: oklch(0.83 0.1 85);
  --color-tac04-new: #7fd88f;
  --color-tac04-new: oklch(0.81 0.14 148);
  --color-tac04-head: #82aaff;
  --color-tac04-head: oklch(0.74 0.13 265);
  --color-tac04-code: #c3e88d;
  --color-tac04-code: oklch(0.88 0.13 125);
  --color-tac04-punct: #89ddff;
  --color-tac04-punct: oklch(0.85 0.1 215);
  --font-tac04-sans: 'Geist', system-ui, sans-serif;
  --font-tac04-mono: 'Geist Mono', ui-monospace, monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tac-04 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@400..600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • .branch[open] > .folder::before{transform:rotate(45deg)} became [[open]>summary>&]:rotate-90 on a real SVG chevron; the child-combinator chain is spelled inside the arbitrary variant so it never leaks to deeper levels.
  • --indent / --line became ms-[0.95rem] border-s border-tac04-line; per-file --dot colours became @theme tokens per file type. Nothing beyond @theme stayed CSS.
  • UI upgrade from the CSS original: a dark IDE window with traffic lights, an editor pane showing the open file with syntax colours, tabs, breadcrumbs and a status bar; folders now swap closed/open icons and animate their height both ways.
  • UI upgrade: the active file is marked with aria-current="page" and its path's guide lines light up via has-[[aria-current=page]]:; git M/U status letters and folder dots were added, and rows grew from 38–40px to 44px with an inset focus ring.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind CSS Nested Accordion Tree View
Source: https://codefronts.com/navigation/tailwind-css-accordions/tailwind-css-nested-accordion-tree-view/

Four levels of nested <details> rendered as a dark IDE explorer beside an open Markdown file: chevrons that turn, folder icons that swap open/closed, indent guide lines drawn with border-s, colour-coded file-type glyphs and git status letters. The trick for nesting is the arbitrary variant [[open]>summary>&]:rotate-90 &mdash; it reads only the nearest details, where a named group-open: would leak into every closed sub-folder.
## HTML
```html
<section class="tac-04 w-full min-h-svh grid place-items-center bg-tac04-bg bg-[radial-gradient(70%_50%_at_20%_0%,var(--color-tac04-glow),transparent_70%)] px-4 py-12 font-tac04-sans text-tac04-ink [interpolate-size:allow-keywords] sm:px-6" aria-label="Tailwind nested accordion tree view demo">
  <div class="grid w-full max-w-5xl justify-items-center gap-8">
    <div class="w-full overflow-hidden rounded-2xl bg-tac04-win shadow-[0_40px_100px_-40px_oklch(0_0_0/0.9),0_0_0_1px_oklch(1_0_0/0.08),inset_0_1px_0_oklch(1_0_0/0.06)]">
      <div class="flex items-center gap-3 border-b border-tac04-line px-4 py-3">
        <span aria-hidden="true" class="flex gap-2"><span class="size-3 rounded-full bg-[#ff5f57]"></span><span class="size-3 rounded-full bg-[#febc2e]"></span><span class="size-3 rounded-full bg-[#28c840]"></span></span>
        <p class="min-w-0 flex-1 truncate text-center font-tac04-mono text-[12px] text-tac04-mut">design-system — accordion.md</p>
        <span aria-hidden="true" class="w-[52px]"></span>
      </div>
      <div class="grid md:grid-cols-[minmax(0,19rem)_minmax(0,1fr)]">
        <nav class="border-tac04-line bg-tac04-side px-2 pt-3 pb-4 md:border-e" aria-label="Project files">
          <div class="flex items-center justify-between px-2 pb-2">
            <p class="text-[11px] font-semibold tracking-[0.14em] text-tac04-mut uppercase">Explorer</p>
            <p class="rounded-md bg-white/[0.05] px-1.5 py-0.5 font-tac04-mono text-[10.5px] text-tac04-mut ring-1 ring-white/8">main</p>
          </div>
          <p class="flex min-h-9 items-center gap-2 px-2 text-[12px] font-bold tracking-[0.06em] text-tac04-ink uppercase"><svg aria-hidden="true" class="text-tac04-acc" viewBox="0 0 16 16" width="14" height="14"><path d="M8 1.5 14 5v6l-6 3.5L2 11V5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="8" cy="8" r="2" fill="currentColor"/></svg>design-system</p>
          <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
            <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">.github</span></summary>
            <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
              <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
                <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">workflows</span></summary>
                <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-yml">!</span><span class="truncate">release.yml</span></a>
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-yml">!</span><span class="truncate">visual-tests.yml</span></a>
                </div>
              </details>
            </div>
          </details>
          <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
            <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">docs</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
            <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
              <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
                <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">foundations</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
                <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                  <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
                    <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">color</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
                    <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">palette.md</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-json">{}</span><span class="truncate text-tac04-mod/95">semantic-tokens.json</span><span class="ms-auto font-tac04-mono text-[11px] font-semibold text-tac04-mod" title="Modified">M</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-json">▦</span><span class="truncate">contrast-audit.csv</span></a>
                    </div>
                  </details>
                  <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
                    <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">typography</span></summary>
                    <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">type-scale.md</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-fig">◆</span><span class="truncate">specimens.fig</span></a>
                    </div>
                  </details>
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">spacing.md</span></a>
                </div>
              </details>
              <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none" open>
                <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">components</span><span class="ms-auto size-1.5 flex-none rounded-full bg-tac04-mod" title="Contains modified files"></span></summary>
                <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                  <a href="#" aria-current="page" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate text-tac04-mod/95">accordion.md</span><span class="ms-auto font-tac04-mono text-[11px] font-semibold text-tac04-mod" title="Modified">M</span></a>
                  <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">navigation.md</span></a>
                  <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
                    <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">forms</span></summary>
                    <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">inputs.md</span></a>
                      <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">validation.md</span></a>
                    </div>
                  </details>
                </div>
              </details>
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate text-tac04-new/95">CHANGELOG.md</span><span class="ms-auto font-tac04-mono text-[11px] font-semibold text-tac04-new" title="Untracked">U</span></a>
            </div>
          </details>
          <details class="details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-300 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:transition-discrete open:details-content:h-auto motion-reduce:details-content:transition-none">
            <summary class="flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-lg px-2 text-[13.5px] text-tac04-soft outline-none transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset [[open]>&]:text-tac04-ink [&::-webkit-details-marker]:hidden motion-reduce:transition-none"><svg aria-hidden="true" class="flex-none text-tac04-mut transition-transform duration-200 [[open]>summary>&]:rotate-90 [[open]>summary>&]:text-tac04-soft motion-reduce:transition-none" viewBox="0 0 16 16" width="14" height="14"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><svg aria-hidden="true" class="flex-none text-tac04-folder [[open]>summary>&]:hidden" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H13A1.5 1.5 0 0 1 14.5 5.8v6.7A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z" fill="currentColor" opacity="0.9"/></svg><svg aria-hidden="true" class="hidden flex-none text-tac04-folder [[open]>summary>&]:block" viewBox="0 0 16 16" width="16" height="16"><path d="M1.5 4A1.5 1.5 0 0 1 3 2.5h3.2l1.6 1.8H12A1.5 1.5 0 0 1 13.5 5.8V7H4.6a1.5 1.5 0 0 0-1.4 1L1.5 13z" fill="currentColor" opacity="0.55"/><path d="M3.2 8.1A1.5 1.5 0 0 1 4.6 7h9.8a.8.8 0 0 1 .75 1.05l-1.6 4.9a1.5 1.5 0 0 1-1.4 1.05H1.9z" fill="currentColor"/></svg><span class="truncate">src</span></summary>
            <div class="ms-[0.95rem] border-s border-tac04-line ps-1 transition-colors duration-300 has-[[aria-current=page]]:border-tac04-acc/45 motion-reduce:transition-none">
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-ts">⚛</span><span class="truncate">Accordion.tsx</span></a>
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-css">#</span><span class="truncate">tokens.css</span></a>
              <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-ts">TS</span><span class="truncate">index.ts</span></a>
            </div>
          </details>
          <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-json">{}</span><span class="truncate">package.json</span></a>
          <a href="#" class="relative flex min-h-11 items-center gap-2 rounded-lg ps-[1.875rem] pe-2.5 text-[13.5px] text-tac04-soft transition-colors hover:bg-white/[0.05] hover:text-tac04-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tac04-acc focus-visible:ring-inset aria-[current=page]:bg-tac04-acc/14 aria-[current=page]:text-tac04-ink aria-[current=page]:ring-1 aria-[current=page]:ring-tac04-acc/30 aria-[current=page]:ring-inset motion-reduce:transition-none"><span aria-hidden="true" class="w-4 flex-none text-center font-tac04-mono text-[10.5px] leading-none font-bold text-tac04-md">M↓</span><span class="truncate">README.md</span></a>
        </nav>
        <div class="hidden min-w-0 flex-col md:flex" aria-hidden="true">
          <div class="flex border-b border-tac04-line bg-tac04-side text-[12.5px]">
            <span class="relative flex items-center gap-2 border-e border-tac04-line bg-tac04-win px-4 py-2.5 text-tac04-ink before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-tac04-acc"><span class="font-tac04-mono text-[10px] font-bold text-tac04-md">M↓</span>accordion.md<span class="size-1.5 rounded-full bg-tac04-mod"></span></span>
            <span class="flex items-center gap-2 border-e border-tac04-line px-4 py-2.5 text-tac04-mut"><span class="font-tac04-mono text-[10px] font-bold text-tac04-json">&#123;&#125;</span>semantic-tokens.json</span>
          </div>
          <p class="px-5 py-2 font-tac04-mono text-[11.5px] text-tac04-mut">docs <span class="text-tac04-gutter">›</span> components <span class="text-tac04-gutter">›</span> <span class="text-tac04-soft">accordion.md</span></p>
          <div class="flex-1 px-3 pt-1 pb-6 font-tac04-mono text-[13px] leading-[1.9] text-tac04-soft">
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">1</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold"># Accordion</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">2</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">3</span><span class="min-w-0 whitespace-pre-wrap">Disclosure built on native <span class="text-tac04-code">&#96;&lt;details&gt;&#96;</span>. No script.</span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">4</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">5</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold">## Anatomy</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">6</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">-</span> <span class="text-tac04-ink font-semibold">**Trigger**</span> — <span class="text-tac04-code">&#96;&lt;summary&gt;&#96;</span>, min 44px</span></div>
            <div class="flex gap-5 bg-white/[0.035]"><span class="w-6 flex-none text-end text-tac04-soft select-none">7</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">-</span> <span class="text-tac04-ink font-semibold">**Panel**</span> — animates via <span class="text-tac04-code">&#96;::details-content&#96;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">8</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">-</span> <span class="text-tac04-ink font-semibold">**Icon**</span> — rotates 90° on <span class="text-tac04-code">&#96;[open]&#96;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">9</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">10</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold">## Nesting</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">11</span><span class="min-w-0 whitespace-pre-wrap">Cap trees at <span class="text-tac04-ink font-semibold">three levels</span>; add a</span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">12</span><span class="min-w-0 whitespace-pre-wrap">breadcrumb beyond that.</span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">13</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">14</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&#96;&#96;&#96;</span><span class="text-tac04-code">html</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">15</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&lt;</span><span class="text-tac04-head font-semibold">details</span> <span class="text-tac04-code">open</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">16</span><span class="min-w-0 whitespace-pre-wrap">  <span class="text-tac04-punct">&lt;</span><span class="text-tac04-head font-semibold">summary</span><span class="text-tac04-punct">&gt;</span>docs<span class="text-tac04-punct">&lt;/</span><span class="text-tac04-head font-semibold">summary</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">17</span><span class="min-w-0 whitespace-pre-wrap">  <span class="text-tac04-punct">&lt;</span><span class="text-tac04-head font-semibold">details</span><span class="text-tac04-punct">&gt;</span>…<span class="text-tac04-punct">&lt;/</span><span class="text-tac04-head font-semibold">details</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">18</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&lt;/</span><span class="text-tac04-head font-semibold">details</span><span class="text-tac04-punct">&gt;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">19</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&#96;&#96;&#96;</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">20</span><span class="min-w-0 whitespace-pre-wrap"></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">21</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-head font-semibold">## Status</span></span></div>
            <div class="flex gap-5"><span class="w-6 flex-none text-end text-tac04-gutter select-none">22</span><span class="min-w-0 whitespace-pre-wrap"><span class="text-tac04-punct">&gt;</span> <span class="text-tac04-mut italic">Stable since v3.2 · owned by @design-infra</span></span></div>
          </div>
          <div class="flex items-center gap-4 border-t border-tac04-line bg-tac04-side px-4 py-1.5 font-tac04-mono text-[11px] text-tac04-mut">
            <span class="text-tac04-acc">⎇ main ↑2</span><span>✓ 0 problems</span><span class="ms-auto">Ln 7, Col 42</span><span>Markdown</span>
          </div>
        </div>
      </div>
    </div>
    <p aria-hidden="true" class="rounded-full px-3.5 py-2 text-center font-tac04-mono text-[11.5px] text-tac04-mut ring-1 ring-white/10">[[open]&gt;summary&gt;&amp;]:rotate-90 · border-s guide lines · has-[[aria-current=page]]:</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tac04-bg: #07080c;
  --color-tac04-bg: oklch(0.13 0.01 270);
  --color-tac04-glow: #1b2340;
  --color-tac04-glow: oklch(0.26 0.06 270 / 0.7);
  --color-tac04-win: #12141b;
  --color-tac04-win: oklch(0.195 0.014 270);
  --color-tac04-side: #0e1016;
  --color-tac04-side: oklch(0.165 0.012 270);
  --color-tac04-line: #232733;
  --color-tac04-line: oklch(0.27 0.018 270);
  --color-tac04-ink: #eef0f6;
  --color-tac04-ink: oklch(0.95 0.008 270);
  --color-tac04-soft: #b9bfcf;
  --color-tac04-soft: oklch(0.8 0.02 270);
  --color-tac04-mut: #8d93a6;
  --color-tac04-mut: oklch(0.67 0.025 270);
  --color-tac04-gutter: #6c7286;
  --color-tac04-gutter: oklch(0.56 0.025 270);
  --color-tac04-acc: #6ea8ff;
  --color-tac04-acc: oklch(0.73 0.14 255);
  --color-tac04-folder: #d9ad6a;
  --color-tac04-folder: oklch(0.78 0.1 75);
  --color-tac04-md: #6ab0f3;
  --color-tac04-md: oklch(0.74 0.12 245);
  --color-tac04-json: #e6c86e;
  --color-tac04-json: oklch(0.84 0.12 90);
  --color-tac04-css: #c792ea;
  --color-tac04-css: oklch(0.74 0.14 310);
  --color-tac04-ts: #5ec8e5;
  --color-tac04-ts: oklch(0.78 0.11 220);
  --color-tac04-yml: #f07178;
  --color-tac04-yml: oklch(0.7 0.16 20);
  --color-tac04-fig: #f38ba8;
  --color-tac04-fig: oklch(0.74 0.14 360);
  --color-tac04-mod: #e5c07b;
  --color-tac04-mod: oklch(0.83 0.1 85);
  --color-tac04-new: #7fd88f;
  --color-tac04-new: oklch(0.81 0.14 148);
  --color-tac04-head: #82aaff;
  --color-tac04-head: oklch(0.74 0.13 265);
  --color-tac04-code: #c3e88d;
  --color-tac04-code: oklch(0.88 0.13 125);
  --color-tac04-punct: #89ddff;
  --color-tac04-punct: oklch(0.85 0.1 215);
  --font-tac04-sans: 'Geist', system-ui, sans-serif;
  --font-tac04-mono: 'Geist Mono', ui-monospace, monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tac-04 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Why not group-open:? A Tailwind group variant compiles to :is(:where(.group)[open] *) — any open ancestor matches. In a tree, a closed sub-folder sits inside an open one, so its chevron would turn too. The fix is an arbitrary variant that names the exact relationship:

<details class="open:details-content:h-auto …">
  <summary class="[[open]>&]:text-tac04-ink">
    <svg class="[[open]>summary>&]:rotate-90">…  <!-- chevron -->
    <svg class="[[open]>summary>&]:hidden">…    <!-- closed folder -->

Depth is free. The same class lists repeat at every level; the child wrapper's ms-[0.95rem] border-s both indents and draws the guide line under the parent chevron. has-[[aria-current=page]]: on each wrapper tints the guides that lead to the active file, and the details-content: utilities give every folder its own two-way height animation.

Make it yours

  • Indent width: change ms-[0.95rem] on the child wrapper and ps-[1.875rem] on file rows together, so files stay aligned under folder names.
  • Compact density for desktop-only tools: drop min-h-11 to min-h-8 — but keep 44px anywhere touch is possible.
  • New file type: add a --color-tac04-* token and a glyph span; the row markup does not change.
  • Pre-expand a path: put open on each details down the chain, as done here for docs/foundations/color.

Gotchas — read before shipping

  • Named groups (group/f) don't fix nesting: every level shares the name, so group-open/f: still matches the outer open folder.
  • Folders toggle and files navigate — never make a summary a link as well, or keyboard users lose one of the two actions.
  • Hierarchy must be in the DOM (details inside details), not just the indent; screen readers announce the nesting from the structure.
  • For trees with hundreds of nodes, add [content-visibility:auto] to deep wrappers so first paint stays fast.

Browser support

ChromeSafariFirefoxEdge
129+not yetnot yet129+

Floor set by oklch(), interpolate-size as this demo is written. The core technique itself goes back further — Chrome 111+.

Nested <details> is universal; :has() for the lit guide lines is Firefox 121+. The height animation needs ::details-content (Chrome 131+); elsewhere folders toggle instantly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →