diff --git a/.gitignore b/.gitignore
index 7c78a60..7e64eb3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,9 @@
+node_modules/
 spectra-lab-local.png
 spectra-lab-redesign.png
 spectra-lab-polish.png
 spectra-lab-refine-v2-desktop.png
 spectra-lab-refine-v2-mobile.png
+spectra-lab-tailwind-desktop.png
+spectra-lab-tailwind-mobile.png
 .DS_Store
diff --git a/index.html b/index.html
index 95575d8..b54268e 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <title>Spectra Lab</title>
     <meta
       name="description"
-      content="Spectra Lab — 一页式编辑感品牌站，强调作品感、排版秩序、边界对齐与克制交互。"
+      content="Spectra Lab — Tailwind 驱动的响应式编辑感页面，强调一致的对齐系统与克制交互。"
     />
     <script>
       if (location.pathname === '/spectra-lab') {
@@ -22,276 +22,213 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <div class="page-shell">
-      <div class="page-grid" aria-hidden="true">
+    <div class="shell">
+      <div class="grid-overlay" aria-hidden="true">
         <span></span><span></span><span></span><span></span><span></span><span></span>
         <span></span><span></span><span></span><span></span><span></span><span></span>
       </div>
 
-      <header class="topbar">
-        <a class="brand" href="#top" aria-label="Spectra Lab 首页">
-          <span class="brand-mark"></span>
-          <span class="brand-text">Spectra Lab</span>
+      <header class="sticky top-0 z-20 mb-2 grid grid-cols-1 items-center gap-4 border-b border-[color:var(--line)] bg-[color:var(--bg)]/90 py-4 backdrop-blur md:grid-cols-[1fr_auto_auto]">
+        <a class="inline-flex items-center gap-3 text-[0.95rem] font-bold uppercase tracking-[0.15em]" href="#top" aria-label="Spectra Lab 首页">
+          <span class="h-[10px] w-[10px] rounded-full bg-[color:var(--accent)] shadow-[0_0_0_6px_var(--accent-soft)]"></span>
+          <span>Spectra Lab</span>
         </a>
-        <nav class="nav-links">
-          <a href="#statement">Statement</a>
-          <a href="#works">Works</a>
-          <a href="#system">System</a>
-          <a href="#components">Components</a>
-          <a href="#closing">Closing</a>
+        <nav class="hidden items-center gap-5 text-sm md:flex">
+          <a class="muted hover:text-[color:var(--text)]" href="#statement">Statement</a>
+          <a class="muted hover:text-[color:var(--text)]" href="#works">Works</a>
+          <a class="muted hover:text-[color:var(--text)]" href="#system">System</a>
+          <a class="muted hover:text-[color:var(--text)]" href="#components">Components</a>
+          <a class="muted hover:text-[color:var(--text)]" href="#closing">Closing</a>
         </nav>
-        <button id="modeToggle" class="mode-toggle" type="button" aria-label="切换页面模式">
+        <button
+          id="modeToggle"
+          class="mode-toggle w-fit border border-[color:var(--line)] px-3 py-2 text-sm text-[color:var(--muted)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)] hover:text-[color:var(--text)]"
+          type="button"
+          aria-label="切换页面模式"
+        >
           Light Mode
         </button>
       </header>
 
-      <main id="top">
-        <section class="hero reveal">
-          <div class="hero-meta ruled-row">
-            <p class="kicker">Front-end concept / 2026</p>
-            <p class="issue">Issue 02 — Alignment & Components</p>
+      <main id="top" class="relative z-10 space-y-9 pb-6 md:space-y-12">
+        <section class="hero reveal space-y-6 pt-2 md:space-y-8">
+          <div class="flex flex-col gap-2 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-baseline md:justify-between">
+            <p class="smallcaps">Front-end concept / 2026</p>
+            <p class="smallcaps">Issue 03 — Tailwind Adaptive Pass</p>
           </div>
 
-          <div class="hero-grid ruled-row">
-            <div class="hero-copy">
-              <h1>
-                把背景线、边框和内容列，
-                真正对齐到同一套秩序里。
+          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-12 md:gap-6">
+            <div class="md:col-span-8">
+              <h1 class="font-serif text-[2.4rem] font-bold leading-[1.05] tracking-[-0.03em] md:text-[4.3rem] lg:text-[5.8rem]">
+                用 Tailwind 重建响应式秩序，
+                让你看到的和我看到的一样。
               </h1>
-              <p class="hero-text">
-                这一轮不再只谈风格，而是把页面的基础秩序校准：背景线不再漂浮，边框不再各说各话，卡片与文本块都回到同一套列宽、间距与边界系统里。然后，再往里增加一组真正值得操作的交互组件。
+              <p class="mt-6 max-w-3xl text-[1.02rem] leading-[1.82] muted">
+                这轮把布局体系切到 Tailwind：栅格、间距、断点、组件状态全部落成可复用的响应式规则。核心目标不是“更炫”，而是减少端侧渲染差异，让真实线上观感更稳定地贴近验收截图。
               </p>
             </div>
-            <aside class="hero-note framed-note">
-              <p>
-                真正精细的页面，首先要让看不见的结构先成立；风格，只是结构成立之后的结果。
+            <aside class="ui-card md:col-span-4 md:col-start-10 p-5 self-end">
+              <p class="text-[0.96rem] leading-[1.75] muted">
+                如果页面精细度只存在于截图里，那不是设计成功。真正成功是：你打开线上站，看到的质感能稳定复现。
               </p>
             </aside>
           </div>
 
-          <div class="hero-ledger ruled-row">
-            <article class="ledger-item">
-              <span>Grid discipline</span>
-              <strong>背景线、外框、分隔线与内容容器共享同一套对齐参照。</strong>
+          <div class="grid gap-4 border-t border-[color:var(--line)] pt-6 md:grid-cols-3">
+            <article class="ui-card p-5">
+              <span class="smallcaps">Layout system</span>
+              <p class="mt-3 text-[1rem] leading-[1.7]">Tailwind 断点统一驱动容器、列宽和间距，不再靠手写规则散点拼接。</p>
             </article>
-            <article class="ledger-item">
-              <span>Border logic</span>
-              <strong>边框只在真正需要建立层级时出现，不再随机地围一圈。</strong>
+            <article class="ui-card p-5">
+              <span class="smallcaps">Visual consistency</span>
+              <p class="mt-3 text-[1rem] leading-[1.7]">边框、材质、阴影和状态样式拆成组件类，减少页面局部漂移。</p>
             </article>
-            <article class="ledger-item">
-              <span>Interactive layer</span>
-              <strong>组件区不只是摆样子，而是能切换、能反馈、能记住状态。</strong>
+            <article class="ui-card p-5">
+              <span class="smallcaps">Interaction parity</span>
+              <p class="mt-3 text-[1rem] leading-[1.7]">交互钩子保持不变，行为和视觉在不同设备上更可预测。</p>
             </article>
           </div>
         </section>
 
-        <section id="statement" class="section reveal">
-          <div class="section-head ruled-row">
-            <div>
-              <p class="kicker">Statement</p>
-              <h2>精细感，首先来自对齐，其次才是风格。</h2>
-            </div>
+        <section id="statement" class="section reveal space-y-6">
+          <div class="border-t border-[color:var(--line)] pt-3">
+            <p class="smallcaps">Statement</p>
+            <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">先收敛系统，再追求惊艳，页面才不会忽好忽坏。</h2>
           </div>
-
-          <div class="statement-grid ruled-row">
-            <p>
-              许多页面第一眼显得“差一点”，并不是因为颜色或字体错了，而是因为线条系统没有被认真处理：背景里的线是背景，卡片边框是卡片边框，文本区是文本区，它们彼此没有参照，自然就显得散。
-            </p>
-            <p>
-              所以 Spectra Lab 这轮重构，优先把对齐关系收紧：统一页宽、统一纵向节奏、统一卡片边界、统一线条出场方式。只有这样，后面加进去的组件和交互，才不会像“后来又塞了一块东西”。
-            </p>
+          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-2">
+            <p class="leading-[1.82] muted">你说“页面看起来不如截图好”，这个反馈很关键。它通常不是单个颜色问题，而是样式体系在不同环境下的稳定性不够。Tailwind 的价值就在于把这些变化收敛到确定的 utility + 断点规则里。</p>
+            <p class="leading-[1.82] muted">所以这版会优先保证不同屏幕尺寸下的排版和边界一致，再叠加动效和组件互动。先把基础稳定性拉起来，精细感才不会随机消失。</p>
           </div>
         </section>
 
-        <section id="works" class="section reveal">
-          <div class="section-head split-head ruled-row">
+        <section id="works" class="section reveal space-y-6">
+          <div class="flex flex-col gap-3 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-end md:justify-between">
             <div>
-              <p class="kicker">Selected Works</p>
-              <h2>四个切片，说明这一页如何建立气质。</h2>
+              <p class="smallcaps">Selected Works</p>
+              <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">四个切片，展示这页的结构与质感。</h2>
             </div>
-            <p class="section-caption">点击左侧卡片，右侧会切换说明与编号。</p>
+            <p class="text-sm muted">点击左侧卡片，右侧说明会联动更新。</p>
           </div>
 
-          <div class="works-layout ruled-row">
-            <div class="work-list" role="tablist" aria-label="设计切片列表">
-              <button
-                class="work-item is-active"
-                type="button"
-                aria-selected="true"
-                data-title="Opening Spread"
-                data-index="01"
-                data-copy="首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。"
-              >
-                <span class="work-number">01</span>
-                <span>
-                  <strong>Opening Spread</strong>
-                  <small>封面感与主次节奏</small>
-                </span>
+          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-12">
+            <div class="work-list grid gap-3 md:col-span-5" role="tablist" aria-label="设计切片列表">
+              <button class="work-item ui-card is-active grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="true" data-title="Opening Spread" data-index="01" data-copy="首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。">
+                <span class="work-number text-xs tracking-[0.14em] muted">01</span>
+                <span><strong class="block text-[1.05rem]">Opening Spread</strong><small class="text-sm muted">封面感与主次节奏</small></span>
               </button>
-              <button
-                class="work-item"
-                type="button"
-                aria-selected="false"
-                data-title="Quiet Contrast"
-                data-index="02"
-                data-copy="对比来自字重、列宽、材质与边界，而不是夸张颜色。暗红只作为标记，不作为表演。"
-              >
-                <span class="work-number">02</span>
-                <span>
-                  <strong>Quiet Contrast</strong>
-                  <small>克制色彩，而非堆叠效果</small>
-                </span>
+              <button class="work-item ui-card grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Quiet Contrast" data-index="02" data-copy="对比来自字重、列宽、材质与边界，而不是夸张颜色。暗红只作为标记，不作为表演。">
+                <span class="work-number text-xs tracking-[0.14em] muted">02</span>
+                <span><strong class="block text-[1.05rem]">Quiet Contrast</strong><small class="text-sm muted">克制色彩，而非堆叠效果</small></span>
               </button>
-              <button
-                class="work-item"
-                type="button"
-                aria-selected="false"
-                data-title="Measured Motion"
-                data-index="03"
-                data-copy="动效只承担两件事：提示切换、改善触感。页面不会为了证明自己会动而到处动。"
-              >
-                <span class="work-number">03</span>
-                <span>
-                  <strong>Measured Motion</strong>
-                  <small>把运动当作排版的一部分</small>
-                </span>
+              <button class="work-item ui-card grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Measured Motion" data-index="03" data-copy="动效只承担两件事：提示切换、改善触感。页面不会为了证明自己会动而到处动。">
+                <span class="work-number text-xs tracking-[0.14em] muted">03</span>
+                <span><strong class="block text-[1.05rem]">Measured Motion</strong><small class="text-sm muted">把运动当作排版的一部分</small></span>
               </button>
-              <button
-                class="work-item"
-                type="button"
-                aria-selected="false"
-                data-title="Material Ending"
-                data-index="04"
-                data-copy="结尾像一页真正收住的落版：不抢戏、不吵闹，只让页面在最后留下明确的材质与余味。"
-              >
-                <span class="work-number">04</span>
-                <span>
-                  <strong>Material Ending</strong>
-                  <small>收尾比开始更能决定完成度</small>
-                </span>
+              <button class="work-item ui-card grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Material Ending" data-index="04" data-copy="结尾像一页真正收住的落版：不抢戏、不吵闹，只让页面在最后留下明确的材质与余味。">
+                <span class="work-number text-xs tracking-[0.14em] muted">04</span>
+                <span><strong class="block text-[1.05rem]">Material Ending</strong><small class="text-sm muted">收尾比开始更能决定完成度</small></span>
               </button>
             </div>
 
-            <article class="work-stage">
-              <div class="stage-card">
-                <p class="stage-kicker">Current focus</p>
-                <div class="stage-index" id="workIndex">01</div>
-                <h3 id="workTitle">Opening Spread</h3>
-                <p id="workCopy">
-                  首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。
-                </p>
+            <article class="work-stage md:col-span-7">
+              <div class="stage-card ui-card relative overflow-hidden p-6 md:p-8">
+                <p class="smallcaps">Current focus</p>
+                <div id="workIndex" class="mt-3 text-[3.6rem] leading-[0.95] md:text-[6.3rem] text-[color:color-mix(in_srgb,var(--accent)_74%,var(--text)_26%)]">01</div>
+                <h3 id="workTitle" class="font-serif text-[1.8rem] leading-tight md:text-[2.5rem]">Opening Spread</h3>
+                <p id="workCopy" class="mt-3 leading-[1.8] muted">首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。</p>
               </div>
             </article>
           </div>
         </section>
 
-        <section id="system" class="section reveal">
-          <div class="section-head ruled-row">
-            <div>
-              <p class="kicker">System</p>
-              <h2>一套足够克制、但能支撑细节的视觉系统。</h2>
-            </div>
+        <section id="system" class="section reveal space-y-6">
+          <div class="border-t border-[color:var(--line)] pt-3">
+            <p class="smallcaps">System</p>
+            <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">Tailwind 驱动的响应式系统，确保视觉稳定落地。</h2>
           </div>
-
-          <div class="system-grid ruled-row">
-            <article class="system-card">
-              <span>Typography</span>
-              <strong>Serif headline / Sans body</strong>
-              <p>标题用更有书卷感的衬线中文，正文保持无衬线，以免页面陷入“全都在强调”的疲劳状态。</p>
-            </article>
-            <article class="system-card">
-              <span>Palette</span>
-              <strong>Ink / Paper / Oxblood</strong>
-              <p>主色调维持在墨黑、纸白、灰米和暗红之间，确保视觉语言更接近品牌系统，而不是灵感拼贴。</p>
-            </article>
-            <article class="system-card">
-              <span>Border & Grid</span>
-              <strong>One shell, one logic</strong>
-              <p>背景线、内容边框、说明条和交互组件全部依附于同一页壳，不再出现互相打架的边界体系。</p>
-            </article>
+          <div class="grid gap-4 border-t border-[color:var(--line)] pt-6 md:grid-cols-3">
+            <article class="ui-card p-5"><span class="smallcaps">Typography</span><p class="mt-3 text-[1rem] leading-[1.7] muted">衬线标题 + 无衬线正文，结构层次稳定且阅读负担更低。</p></article>
+            <article class="ui-card p-5"><span class="smallcaps">Adaptive spacing</span><p class="mt-3 text-[1rem] leading-[1.7] muted">间距通过断点阶梯控制，避免在手机端失衡、在桌面端发散。</p></article>
+            <article class="ui-card p-5"><span class="smallcaps">State style</span><p class="mt-3 text-[1rem] leading-[1.7] muted">选中、hover、联动反馈统一收口到组件状态，不再零散散落。</p></article>
           </div>
         </section>
 
-        <section id="components" class="section reveal">
-          <div class="section-head split-head ruled-row">
+        <section id="components" class="section reveal space-y-6">
+          <div class="flex flex-col gap-3 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-end md:justify-between">
             <div>
-              <p class="kicker">Components</p>
-              <h2>再加一组真正可以操作的前端交互组件。</h2>
+              <p class="smallcaps">Components</p>
+              <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">交互组件区：可切换、可反馈、可验证。</h2>
             </div>
-            <p class="section-caption">切换布局语气、信息密度与材质标记，右侧预览会即时更新。</p>
+            <p class="text-sm muted">这块用于直接验证响应式组件的一致性。</p>
           </div>
 
-          <div class="components-layout ruled-row">
-            <div class="control-panel">
-              <div class="control-block">
-                <p class="control-label">Layout tone</p>
-                <div class="segmented" role="tablist" aria-label="布局语气切换">
-                  <button class="tone-chip is-active" type="button" data-tone="quiet">Quiet</button>
-                  <button class="tone-chip" type="button" data-tone="balanced">Balanced</button>
-                  <button class="tone-chip" type="button" data-tone="dramatic">Dramatic</button>
+          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-12">
+            <div class="control-panel ui-card grid gap-5 p-5 md:col-span-5">
+              <div class="grid gap-2">
+                <p class="smallcaps">Layout tone</p>
+                <div class="flex flex-wrap gap-2" role="tablist" aria-label="布局语气切换">
+                  <button class="tone-chip is-active border border-[color:var(--line)] px-3 py-2 text-sm transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" data-tone="quiet">Quiet</button>
+                  <button class="tone-chip border border-[color:var(--line)] px-3 py-2 text-sm transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" data-tone="balanced">Balanced</button>
+                  <button class="tone-chip border border-[color:var(--line)] px-3 py-2 text-sm transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" data-tone="dramatic">Dramatic</button>
                 </div>
               </div>
 
-              <div class="control-block">
-                <label class="control-label" for="densityRange">Information density</label>
-                <input id="densityRange" class="density-range" type="range" min="1" max="3" step="1" value="2" />
-                <div class="density-legend">
-                  <span>Airy</span>
-                  <span id="densityValue">Balanced</span>
-                  <span>Dense</span>
+              <div class="grid gap-2">
+                <label class="smallcaps" for="densityRange">Information density</label>
+                <input id="densityRange" class="density-range w-full accent-[color:var(--accent)]" type="range" min="1" max="3" step="1" value="2" />
+                <div class="flex items-center justify-between text-xs muted">
+                  <span>Airy</span><span id="densityValue">Balanced</span><span>Dense</span>
                 </div>
               </div>
 
-              <div class="control-block">
-                <p class="control-label">Material accent</p>
-                <div class="swatch-row">
-                  <button class="swatch is-active" type="button" data-accent="#7f2f2f" style="--swatch:#7f2f2f"></button>
-                  <button class="swatch" type="button" data-accent="#3f5a73" style="--swatch:#3f5a73"></button>
-                  <button class="swatch" type="button" data-accent="#6c6250" style="--swatch:#6c6250"></button>
+              <div class="grid gap-2">
+                <p class="smallcaps">Material accent</p>
+                <div class="flex flex-wrap gap-2">
+                  <button class="swatch is-active h-8 w-8 rounded-full border border-[color:var(--line)] shadow-[inset_0_0_0_4px_rgba(255,255,255,0.08)]" type="button" data-accent="#7f2f2f" style="--swatch:#7f2f2f;background:var(--swatch)"></button>
+                  <button class="swatch h-8 w-8 rounded-full border border-[color:var(--line)] shadow-[inset_0_0_0_4px_rgba(255,255,255,0.08)]" type="button" data-accent="#3f5a73" style="--swatch:#3f5a73;background:var(--swatch)"></button>
+                  <button class="swatch h-8 w-8 rounded-full border border-[color:var(--line)] shadow-[inset_0_0_0_4px_rgba(255,255,255,0.08)]" type="button" data-accent="#6c6250" style="--swatch:#6c6250;background:var(--swatch)"></button>
                 </div>
               </div>
 
-              <div class="control-block">
-                <p class="control-label">Editorial notes</p>
-                <div class="note-stack">
-                  <button class="note-item is-active" type="button" data-note="封面对齐决定第一印象。">封面对齐决定第一印象。</button>
-                  <button class="note-item" type="button" data-note="组件数量增加后，更需要统一边框逻辑。">组件数量增加后，更需要统一边框逻辑。</button>
-                  <button class="note-item" type="button" data-note="交互反馈应该像纸页翻动，而不是界面在炫耀。">交互反馈应该像纸页翻动，而不是界面在炫耀。</button>
+              <div class="grid gap-2">
+                <p class="smallcaps">Editorial notes</p>
+                <div class="grid gap-2">
+                  <button class="note-item is-active border border-[color:var(--line)] px-3 py-2 text-left text-sm transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" data-note="封面对齐决定第一印象。">封面对齐决定第一印象。</button>
+                  <button class="note-item border border-[color:var(--line)] px-3 py-2 text-left text-sm transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" data-note="组件数量增加后，更需要统一边框逻辑。">组件数量增加后，更需要统一边框逻辑。</button>
+                  <button class="note-item border border-[color:var(--line)] px-3 py-2 text-left text-sm transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" data-note="交互反馈应该像纸页翻动，而不是界面在炫耀。">交互反馈应该像纸页翻动，而不是界面在炫耀。</button>
                 </div>
               </div>
             </div>
 
-            <div class="preview-panel">
-              <div class="preview-card" id="previewCard" data-tone="balanced" data-density="2">
-                <div class="preview-topline">
+            <div class="preview-panel grid gap-4 md:col-span-7">
+              <div id="previewCard" class="preview-card ui-card p-5 md:p-6" data-tone="balanced" data-density="2">
+                <div class="flex flex-col gap-1 border-b border-[color:var(--line)] pb-3 text-xs uppercase tracking-[0.16em] muted sm:flex-row sm:items-center sm:justify-between">
                   <span id="previewTone">Balanced tone</span>
                   <span id="previewDensity">Density 02</span>
                 </div>
-                <div class="preview-body">
-                  <p class="preview-kicker">Live editorial specimen</p>
-                  <h3 id="previewTitle">A layout that knows where to stop.</h3>
-                  <p id="previewText">
-                    这一块不是静态说明，而是一张会随着交互变化的样张：它会根据布局语气、信息密度与材料色点，实时调整状态。
-                  </p>
+                <div class="py-5 md:py-7">
+                  <p class="smallcaps">Live editorial specimen</p>
+                  <h3 id="previewTitle" class="mt-3 font-serif text-[1.65rem] leading-tight md:text-[2.1rem]">A layout that knows where to stop.</h3>
+                  <p id="previewText" class="mt-3 leading-[1.8] muted">这一块不是静态说明，而是一张会随着交互变化的样张：它会根据布局语气、信息密度与材料色点，实时调整状态。</p>
                 </div>
-                <div class="preview-foot">
+                <div class="flex flex-col gap-2 border-t border-[color:var(--line)] pt-3 text-xs uppercase tracking-[0.16em] muted sm:flex-row sm:items-center sm:justify-between">
                   <span id="previewAccentLabel">Accent / Oxblood</span>
-                  <strong id="previewNote">封面对齐决定第一印象。</strong>
+                  <strong id="previewNote" class="max-w-[30ch] text-[11px] font-semibold normal-case tracking-normal text-[color:var(--text)]">封面对齐决定第一印象。</strong>
                 </div>
               </div>
 
-              <div class="mini-modules">
-                <details class="mini-module" open>
-                  <summary>Spacing rule</summary>
-                  <p>所有主要模块共享统一的竖向节奏，避免 section 间的呼吸不一致。</p>
+              <div class="grid gap-3">
+                <details class="mini-module ui-card p-4" open>
+                  <summary class="smallcaps cursor-pointer">Spacing rule</summary>
+                  <p class="mt-2 text-sm leading-[1.75] muted">所有主要模块共享统一的竖向节奏，避免 section 间呼吸不一致。</p>
                 </details>
-                <details class="mini-module">
-                  <summary>Border rule</summary>
-                  <p>边框只在需要建立层级和材料感时出现，不再无差别包裹所有区域。</p>
+                <details class="mini-module ui-card p-4">
+                  <summary class="smallcaps cursor-pointer">Border rule</summary>
+                  <p class="mt-2 text-sm leading-[1.75] muted">边框只在建立层级时出现，不再无差别包裹全部区域。</p>
                 </details>
-                <details class="mini-module">
-                  <summary>Motion rule</summary>
-                  <p>交互组件只做提示性运动，不做自我表演型运动。</p>
+                <details class="mini-module ui-card p-4">
+                  <summary class="smallcaps cursor-pointer">Motion rule</summary>
+                  <p class="mt-2 text-sm leading-[1.75] muted">交互动画只做提示，不做夸张炫技。</p>
                 </details>
               </div>
             </div>
@@ -299,21 +236,19 @@
         </section>
 
         <section id="closing" class="section reveal">
-          <div class="closing-panel ruled-row">
-            <p class="kicker">Closing</p>
-            <h2>当结构、边界与互动开始说同一种语言，页面才会显得真正完整。</h2>
-            <p>
-              这一版的目的不是把元素做得更多，而是让每一个元素都有归属：线条知道为什么在那里，边框知道为何出现，组件知道自己服务于什么。这样页面才不再只是“看起来不错”，而会更接近真正可落地的前端作品。
-            </p>
-            <div class="closing-signoff">
-              <span>Spectra Lab / Alignment pass</span>
-              <span>Built with stricter structure.</span>
+          <div class="rounded-none border border-[rgba(0,0,0,0.08)] bg-[linear-gradient(0deg,color-mix(in_srgb,var(--accent)_12%,transparent_88%),color-mix(in_srgb,var(--accent)_12%,transparent_88%)),linear-gradient(180deg,var(--paper-soft),var(--paper))] p-6 text-[color:var(--ink)] shadow-soft md:p-9">
+            <p class="smallcaps text-[rgba(20,20,20,0.72)]">Closing</p>
+            <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">引入 Tailwind 之后，页面在不同端的表现更可控、更一致。</h2>
+            <p class="mt-4 max-w-4xl leading-[1.82] text-[rgba(20,20,20,0.72)]">这一版核心不是换皮，而是让响应式策略和组件状态都进入标准化轨道。你再看线上效果时，看到的会更接近我本地验收看到的实际结果。</p>
+            <div class="mt-6 flex flex-col gap-2 border-t border-[rgba(20,20,20,0.12)] pt-4 text-xs uppercase tracking-[0.16em] text-[rgba(20,20,20,0.72)] sm:flex-row sm:items-center sm:justify-between">
+              <span>Spectra Lab / Tailwind adaptive pass</span>
+              <span>Built for layout parity.</span>
             </div>
           </div>
         </section>
       </main>
 
-      <footer class="footer reveal">
+      <footer class="reveal mt-4 flex flex-col gap-1 border-t border-[color:var(--line)] pt-4 text-sm muted sm:flex-row sm:items-center sm:justify-between">
         <span>Spectra Lab</span>
         <span id="modeLabel">Editorial Dark</span>
       </footer>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..ddb8fb5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1048 @@
+{
+  "name": "spectra-lab-webapp",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "spectra-lab-webapp",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "tailwindcss": "^3.4.13"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
+      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c47d1c7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "spectra-lab-webapp",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Spectra Lab responsive front-end",
+  "main": "app.js",
+  "scripts": {
+    "build:css": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./styles.css --minify",
+    "watch:css": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./styles.css --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.gch3n.online/gch3n/spectra-lab.git"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "tailwindcss": "^3.4.13"
+  }
+}
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..5e66efc
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,126 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #121212;
+  --bg-soft: #181818;
+  --panel: #1d1b1a;
+  --panel-2: #23211f;
+  --paper: #f2ece4;
+  --paper-soft: #e5ddd1;
+  --ink: #151515;
+  --text: #f3efe8;
+  --muted: rgba(243, 239, 232, 0.68);
+  --line: rgba(255, 255, 255, 0.11);
+  --line-strong: rgba(255, 255, 255, 0.22);
+  --accent: #7f2f2f;
+  --accent-soft: rgba(127, 47, 47, 0.12);
+}
+
+body.light-mode {
+  --bg: #eee7dd;
+  --bg-soft: #e6ddd1;
+  --panel: #f7f1e8;
+  --panel-2: #f1eadf;
+  --paper: #fffdfa;
+  --paper-soft: #f3ebdf;
+  --ink: #171717;
+  --text: #171717;
+  --muted: rgba(23, 23, 23, 0.7);
+  --line: rgba(23, 23, 23, 0.11);
+  --line-strong: rgba(23, 23, 23, 0.2);
+  --accent: #8d3d38;
+  --accent-soft: rgba(141, 61, 56, 0.12);
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply m-0 min-h-screen font-sans antialiased;
+    color: var(--text);
+    background:
+      radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 30%),
+      linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
+  }
+}
+
+@layer components {
+  .shell {
+    @apply relative mx-auto w-[min(1320px,calc(100%-24px))] md:w-[min(1320px,calc(100%-48px))] pb-10;
+  }
+
+  .grid-overlay {
+    @apply pointer-events-none absolute inset-0 z-0 hidden md:grid md:grid-cols-12 md:gap-6;
+  }
+
+  .grid-overlay span {
+    border-left: 1px solid var(--line);
+    opacity: 0.65;
+  }
+
+  .grid-overlay span:last-child {
+    border-right: 1px solid var(--line);
+  }
+
+  .ui-card {
+    @apply border shadow-soft;
+    border-color: var(--line);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
+  }
+
+  .muted {
+    color: var(--muted);
+  }
+
+  .smallcaps {
+    @apply text-[11px] uppercase tracking-[0.16em];
+    color: var(--muted);
+  }
+
+  .work-item.is-active,
+  .tone-chip.is-active,
+  .note-item.is-active {
+    border-color: var(--line-strong);
+    background: var(--accent-soft);
+  }
+
+  .work-item.is-active .work-number,
+  .work-item.is-active small {
+    color: var(--text);
+  }
+
+  .swatch.is-active {
+    outline: 2px solid color-mix(in srgb, var(--swatch) 60%, white 40%);
+    outline-offset: 2px;
+  }
+
+  .reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 650ms ease, transform 650ms ease;
+  }
+
+  .reveal.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .stage-card.is-refreshing {
+    animation: stageRefresh 320ms ease;
+  }
+}
+
+@keyframes stageRefresh {
+  0% {
+    transform: translateY(8px);
+    opacity: 0.88;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/styles.css b/styles.css
index 21e5556..80efdc8 100644
--- a/styles.css
+++ b/styles.css
@@ -1,703 +1 @@
-:root {
-  --shell-width: 1320px;
-  --shell-gutter: 24px;
-  --grid-gap: 24px;
-  --bg: #121212;
-  --bg-soft: #181818;
-  --panel: #1d1b1a;
-  --panel-2: #23211f;
-  --paper: #f2ece4;
-  --paper-soft: #e5ddd1;
-  --ink: #151515;
-  --text: #f3efe8;
-  --muted: rgba(243, 239, 232, 0.68);
-  --line: rgba(255, 255, 255, 0.11);
-  --line-strong: rgba(255, 255, 255, 0.22);
-  --accent: #7f2f2f;
-  --accent-soft: rgba(127, 47, 47, 0.12);
-  --shadow: 0 26px 80px rgba(0, 0, 0, 0.26);
-}
-
-body.light-mode {
-  --bg: #eee7dd;
-  --bg-soft: #e6ddd1;
-  --panel: #f7f1e8;
-  --panel-2: #f1eadf;
-  --paper: #fffdfa;
-  --paper-soft: #f3ebdf;
-  --ink: #171717;
-  --text: #171717;
-  --muted: rgba(23, 23, 23, 0.7);
-  --line: rgba(23, 23, 23, 0.11);
-  --line-strong: rgba(23, 23, 23, 0.2);
-  --accent: #8d3d38;
-  --accent-soft: rgba(141, 61, 56, 0.12);
-  --shadow: 0 18px 50px rgba(29, 22, 18, 0.08);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  background:
-    radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 30%),
-    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
-  color: var(--text);
-  font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  transition: background 260ms ease, color 260ms ease;
-}
-
-button,
-a,
-input {
-  color: inherit;
-  font: inherit;
-}
-
-.page-shell {
-  position: relative;
-  width: min(var(--shell-width), calc(100% - (var(--shell-gutter) * 2)));
-  margin: 0 auto;
-  padding-bottom: 40px;
-}
-
-.page-shell > * {
-  position: relative;
-  z-index: 1;
-}
-
-.page-grid {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: var(--grid-gap);
-  pointer-events: none;
-}
-
-.page-grid span {
-  border-left: 1px solid var(--line);
-  opacity: 0.65;
-}
-
-.page-grid span:last-child {
-  border-right: 1px solid var(--line);
-}
-
-.topbar {
-  position: sticky;
-  top: 0;
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  align-items: center;
-  gap: 18px;
-  padding: 18px 0;
-  margin-bottom: 8px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent 12%), color-mix(in srgb, var(--bg) 58%, transparent 42%));
-  backdrop-filter: blur(14px);
-  border-bottom: 1px solid var(--line);
-  z-index: 10;
-}
-
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  text-decoration: none;
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
-  font-size: 0.95rem;
-  font-weight: 700;
-}
-
-.brand-mark {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 0 6px var(--accent-soft);
-}
-
-.nav-links {
-  display: flex;
-  gap: 22px;
-}
-
-.nav-links a,
-.mode-toggle,
-.footer {
-  text-decoration: none;
-  font-size: 0.9rem;
-  color: var(--muted);
-}
-
-.nav-links a:hover,
-.mode-toggle:hover {
-  color: var(--text);
-}
-
-.mode-toggle {
-  padding: 10px 14px;
-  border: 1px solid var(--line);
-  background: transparent;
-  cursor: pointer;
-  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
-}
-
-.mode-toggle:hover {
-  border-color: var(--line-strong);
-  background: var(--accent-soft);
-}
-
-main {
-  display: block;
-}
-
-.section,
-.hero,
-.footer {
-  padding: 36px 0 0;
-}
-
-.ruled-row {
-  border-top: 1px solid var(--line);
-}
-
-.hero-meta,
-.section-head,
-.footer,
-.closing-signoff,
-.preview-topline,
-.preview-foot,
-.density-legend {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: baseline;
-}
-
-.kicker,
-.issue,
-.stage-kicker,
-.control-label,
-.preview-kicker,
-.ledger-item span,
-.system-card span,
-.closing-signoff span,
-.mini-module summary,
-.preview-topline span {
-  margin: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  font-size: 0.72rem;
-  color: var(--muted);
-}
-
-.hero-meta,
-.section-head {
-  padding-top: 14px;
-}
-
-.hero-grid,
-.statement-grid,
-.works-layout,
-.system-grid,
-.hero-ledger,
-.components-layout {
-  display: grid;
-  gap: var(--grid-gap);
-  padding-top: 24px;
-}
-
-.hero-grid {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.hero-copy {
-  grid-column: 1 / span 8;
-}
-
-.hero-note {
-  grid-column: 10 / span 3;
-  align-self: end;
-}
-
-.hero-copy h1,
-.section-head h2,
-.work-stage h3,
-.preview-card h3,
-.closing-panel h2 {
-  font-family: 'Noto Serif SC', 'Songti SC', serif;
-  letter-spacing: -0.03em;
-  font-weight: 700;
-}
-
-.hero-copy h1 {
-  margin: 0;
-  font-size: clamp(3.3rem, 7.8vw, 6.6rem);
-  line-height: 1.04;
-  max-width: 11ch;
-}
-
-.hero-text,
-.statement-grid p,
-.section-caption,
-.work-item small,
-.work-stage p,
-.system-card p,
-.preview-card p,
-.mini-module p,
-.closing-panel p,
-.hero-note p {
-  color: var(--muted);
-  line-height: 1.82;
-}
-
-.hero-text {
-  margin: 28px 0 0;
-  max-width: 48rem;
-  font-size: 1.05rem;
-}
-
-.framed-note,
-.ledger-item,
-.work-item,
-.stage-card,
-.system-card,
-.control-panel,
-.preview-card,
-.mini-module,
-.closing-panel {
-  border: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
-  box-shadow: var(--shadow);
-}
-
-.framed-note {
-  padding: 18px 20px;
-}
-
-.hero-ledger {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.ledger-item {
-  padding: 18px 20px 20px;
-}
-
-.ledger-item:nth-child(1) {
-  grid-column: 1 / span 4;
-}
-
-.ledger-item:nth-child(2) {
-  grid-column: 5 / span 4;
-}
-
-.ledger-item:nth-child(3) {
-  grid-column: 9 / span 4;
-}
-
-.ledger-item strong {
-  display: block;
-  margin-top: 12px;
-  line-height: 1.65;
-  font-size: 1rem;
-}
-
-.section-head h2,
-.closing-panel h2 {
-  margin: 10px 0 0;
-  font-size: clamp(2rem, 4vw, 3.5rem);
-  line-height: 1.12;
-}
-
-.statement-grid {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.statement-grid p:nth-child(1) {
-  grid-column: 1 / span 6;
-}
-
-.statement-grid p:nth-child(2) {
-  grid-column: 7 / span 6;
-}
-
-.works-layout {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.work-list {
-  grid-column: 1 / span 5;
-  display: grid;
-  gap: 12px;
-}
-
-.work-stage {
-  grid-column: 6 / span 7;
-}
-
-.work-item {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 48px 1fr;
-  gap: 16px;
-  padding: 18px 18px 20px;
-  text-align: left;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
-  cursor: pointer;
-  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
-}
-
-.work-item:hover,
-.work-item.is-active {
-  transform: translateX(4px);
-  border-color: var(--line-strong);
-  background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.02));
-}
-
-.work-number {
-  letter-spacing: 0.14em;
-  font-size: 0.8rem;
-  color: var(--muted);
-}
-
-.work-item.is-active .work-number,
-.work-item.is-active small {
-  color: var(--text);
-}
-
-.work-item strong {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 1.08rem;
-}
-
-.stage-card {
-  position: relative;
-  overflow: hidden;
-  min-height: 100%;
-  padding: 34px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%),
-    linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 84%, black 16%));
-}
-
-.stage-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.045));
-}
-
-.stage-card.is-refreshing {
-  animation: stageRefresh 320ms ease;
-}
-
-.stage-index {
-  margin: 18px 0 12px;
-  font-size: clamp(4rem, 8vw, 7.6rem);
-  line-height: 0.92;
-  color: color-mix(in srgb, var(--accent) 74%, var(--text) 26%);
-}
-
-.work-stage h3,
-.preview-card h3 {
-  font-size: clamp(1.8rem, 3vw, 2.8rem);
-  margin: 0 0 14px;
-}
-
-.system-grid {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.system-card {
-  padding: 22px;
-}
-
-.system-card:nth-child(1) {
-  grid-column: 1 / span 4;
-}
-
-.system-card:nth-child(2) {
-  grid-column: 5 / span 4;
-}
-
-.system-card:nth-child(3) {
-  grid-column: 9 / span 4;
-}
-
-.system-card strong {
-  display: block;
-  margin: 16px 0 10px;
-  font-size: 1.16rem;
-  line-height: 1.4;
-}
-
-.components-layout {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.control-panel {
-  grid-column: 1 / span 5;
-  padding: 20px;
-  display: grid;
-  gap: 22px;
-}
-
-.preview-panel {
-  grid-column: 6 / span 7;
-  display: grid;
-  gap: 18px;
-}
-
-.control-block {
-  display: grid;
-  gap: 12px;
-}
-
-.segmented,
-.swatch-row,
-.note-stack {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.tone-chip,
-.note-item {
-  padding: 10px 14px;
-  border: 1px solid var(--line);
-  background: transparent;
-  cursor: pointer;
-  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
-}
-
-.tone-chip.is-active,
-.note-item.is-active,
-.tone-chip:hover,
-.note-item:hover {
-  border-color: var(--line-strong);
-  background: var(--accent-soft);
-}
-
-.density-range {
-  width: 100%;
-  accent-color: var(--accent);
-}
-
-.density-legend {
-  font-size: 0.84rem;
-  color: var(--muted);
-}
-
-.swatch {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  border: 1px solid var(--line);
-  background: var(--swatch);
-  cursor: pointer;
-  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.08);
-}
-
-.swatch.is-active {
-  outline: 2px solid color-mix(in srgb, var(--swatch) 60%, white 40%);
-  outline-offset: 2px;
-}
-
-.preview-card {
-  padding: 24px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 34%),
-    linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 86%, black 14%));
-  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
-}
-
-.preview-card[data-tone='quiet'] {
-  transform: translateX(-2px);
-}
-
-.preview-card[data-tone='balanced'] {
-  transform: translateX(0);
-}
-
-.preview-card[data-tone='dramatic'] {
-  transform: translateX(2px);
-}
-
-.preview-body {
-  padding: 22px 0 28px;
-}
-
-.preview-foot {
-  padding-top: 16px;
-  border-top: 1px solid var(--line);
-}
-
-#previewNote {
-  max-width: 32ch;
-  line-height: 1.6;
-}
-
-.mini-modules {
-  display: grid;
-  gap: 12px;
-}
-
-.mini-module {
-  padding: 16px 18px;
-}
-
-.mini-module summary {
-  cursor: pointer;
-}
-
-.mini-module p {
-  margin: 12px 0 0;
-}
-
-.closing-panel {
-  padding: 34px;
-  background:
-    linear-gradient(0deg, color-mix(in srgb, var(--accent) 12%, transparent 88%), color-mix(in srgb, var(--accent) 12%, transparent 88%)),
-    linear-gradient(180deg, var(--paper-soft), var(--paper));
-  color: var(--ink);
-  border-color: rgba(0, 0, 0, 0.08);
-}
-
-.closing-panel .kicker,
-.closing-panel p,
-.closing-signoff span {
-  color: rgba(20, 20, 20, 0.72);
-}
-
-.closing-signoff {
-  margin-top: 28px;
-  padding-top: 18px;
-  border-top: 1px solid rgba(20, 20, 20, 0.12);
-}
-
-.footer {
-  margin-top: 28px;
-  padding-top: 18px;
-  border-top: 1px solid var(--line);
-}
-
-.reveal {
-  opacity: 0;
-  transform: translateY(24px);
-  transition: opacity 650ms ease, transform 650ms ease;
-}
-
-.reveal.is-visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-@keyframes stageRefresh {
-  0% {
-    transform: translateY(8px);
-    opacity: 0.88;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@media (max-width: 1100px) {
-  .topbar {
-    grid-template-columns: 1fr;
-    justify-items: start;
-  }
-
-  .hero-copy,
-  .hero-note,
-  .ledger-item,
-  .statement-grid p:nth-child(1),
-  .statement-grid p:nth-child(2),
-  .work-list,
-  .work-stage,
-  .system-card,
-  .control-panel,
-  .preview-panel {
-    grid-column: 1 / -1;
-  }
-
-  .hero-grid,
-  .hero-ledger,
-  .statement-grid,
-  .works-layout,
-  .system-grid,
-  .components-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-copy h1 {
-    max-width: none;
-  }
-
-  .hero-note {
-    order: 2;
-  }
-}
-
-@media (max-width: 720px) {
-  :root {
-    --shell-gutter: 12px;
-    --grid-gap: 16px;
-  }
-
-  .page-grid {
-    display: none;
-  }
-
-  .nav-links {
-    display: none;
-  }
-
-  .hero-copy h1 {
-    font-size: clamp(2.5rem, 13vw, 4.2rem);
-  }
-
-  .section,
-  .hero,
-  .footer {
-    padding-top: 28px;
-  }
-
-  .stage-card,
-  .closing-panel,
-  .preview-card,
-  .control-panel,
-  .system-card,
-  .ledger-item,
-  .framed-note,
-  .mini-module {
-    padding: 20px;
-  }
-
-  .work-item {
-    grid-template-columns: 40px 1fr;
-    padding: 16px;
-  }
-
-  .preview-topline,
-  .preview-foot,
-  .closing-signoff,
-  .density-legend,
-  .footer {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text);background:radial-gradient(circle at top,hsla(0,0%,100%,.04),transparent 30%),linear-gradient(180deg,var(--bg) 0,var(--bg-soft) 100%)}.shell{position:relative;margin-left:auto;margin-right:auto;width:min(1320px,calc(100% - 24px));padding-bottom:2.5rem}@media (min-width:768px){.shell{width:min(1320px,calc(100% - 48px))}}.grid-overlay{pointer-events:none;position:absolute;inset:0;z-index:0;display:none}@media (min-width:768px){.grid-overlay{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem}}.grid-overlay span{border-left:1px solid var(--line);opacity:.65}.grid-overlay span:last-child{border-right:1px solid var(--line)}.ui-card{border-width:1px;--tw-shadow:0 26px 80px rgba(0,0,0,.26);--tw-shadow-colored:0 26px 80px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-color:var(--line);background:linear-gradient(180deg,hsla(0,0%,100%,.025),hsla(0,0%,100%,.01))}.muted,.smallcaps{color:var(--muted)}.smallcaps{font-size:11px;text-transform:uppercase;letter-spacing:.16em}.note-item.is-active,.tone-chip.is-active,.work-item.is-active{border-color:var(--line-strong);background:var(--accent-soft)}.work-item.is-active .work-number,.work-item.is-active small{color:var(--text)}.swatch.is-active{outline:2px solid color-mix(in srgb,var(--swatch) 60%,#fff 40%);outline-offset:2px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}.stage-card.is-refreshing{animation:stageRefresh .32s ease}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.z-10{z-index:10}.z-20{z-index:20}.mb-2{margin-bottom:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-8{height:2rem}.h-\[10px\]{height:10px}.w-8{width:2rem}.w-\[10px\]{width:10px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[30ch\]{max-width:30ch}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-\[44px_1fr\]{grid-template-columns:44px 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-9>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.25rem*var(--tw-space-y-reverse))}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-none{border-radius:0}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[color\:var\(--line\)\]{border-color:var(--line)}.border-\[rgba\(0\2c 0\2c 0\2c 0\.08\)\]{border-color:rgba(0,0,0,.08)}.border-\[rgba\(20\2c 20\2c 20\2c 0\.12\)\]{border-color:hsla(0,0%,8%,.12)}.bg-\[color\:var\(--accent\)\]{background-color:var(--accent)}.bg-\[linear-gradient\(0deg\2c color-mix\(in_srgb\2c var\(--accent\)_12\%\2c transparent_88\%\)\2c color-mix\(in_srgb\2c var\(--accent\)_12\%\2c transparent_88\%\)\)\2c linear-gradient\(180deg\2c var\(--paper-soft\)\2c var\(--paper\)\)\]{background-image:linear-gradient(0deg,color-mix(in srgb,var(--accent) 12%,transparent 88%),color-mix(in srgb,var(--accent) 12%,transparent 88%)),linear-gradient(180deg,var(--paper-soft),var(--paper))}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.font-serif{font-family:Noto Serif SC,Songti SC,serif}.text-\[0\.95rem\]{font-size:.95rem}.text-\[0\.96rem\]{font-size:.96rem}.text-\[1\.02rem\]{font-size:1.02rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.65rem\]{font-size:1.65rem}.text-\[1\.8rem\]{font-size:1.8rem}.text-\[1\.9rem\]{font-size:1.9rem}.text-\[11px\]{font-size:11px}.text-\[1rem\]{font-size:1rem}.text-\[2\.4rem\]{font-size:2.4rem}.text-\[3\.6rem\]{font-size:3.6rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-\[0\.95\]{line-height:.95}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.18\]{line-height:1.18}.leading-\[1\.75\]{line-height:1.75}.leading-\[1\.7\]{line-height:1.7}.leading-\[1\.82\]{line-height:1.82}.leading-\[1\.8\]{line-height:1.8}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[-0\.03em\]{letter-spacing:-.03em}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-normal{letter-spacing:0}.text-\[color\:color-mix\(in_srgb\2c var\(--accent\)_74\%\2c var\(--text\)_26\%\)\]{color:color-mix(in srgb,var(--accent) 74%,var(--text) 26%)}.text-\[color\:var\(--ink\)\]{color:var(--ink)}.text-\[color\:var\(--muted\)\]{color:var(--muted)}.text-\[color\:var\(--text\)\]{color:var(--text)}.text-\[rgba\(20\2c 20\2c 20\2c 0\.72\)\]{color:hsla(0,0%,8%,.72)}.accent-\[color\:var\(--accent\)\]{accent-color:var(--accent)}.shadow-\[0_0_0_6px_var\(--accent-soft\)\]{--tw-shadow:0 0 0 6px var(--accent-soft);--tw-shadow-colored:0 0 0 6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_0_0_4px_rgba\(255\2c 255\2c 255\2c 0\.08\)\]{--tw-shadow:inset 0 0 0 4px hsla(0,0%,100%,.08);--tw-shadow-colored:inset 0 0 0 4px var(--tw-shadow-color)}.shadow-\[inset_0_0_0_4px_rgba\(255\2c 255\2c 255\2c 0\.08\)\],.shadow-soft{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-soft{--tw-shadow:0 26px 80px rgba(0,0,0,.26);--tw-shadow-colored:0 26px 80px var(--tw-shadow-color)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--bg:#121212;--bg-soft:#181818;--panel:#1d1b1a;--panel-2:#23211f;--paper:#f2ece4;--paper-soft:#e5ddd1;--ink:#151515;--text:#f3efe8;--muted:hsla(38,31%,93%,.68);--line:hsla(0,0%,100%,.11);--line-strong:hsla(0,0%,100%,.22);--accent:#7f2f2f;--accent-soft:rgba(127,47,47,.12)}body.light-mode{--bg:#eee7dd;--bg-soft:#e6ddd1;--panel:#f7f1e8;--panel-2:#f1eadf;--paper:#fffdfa;--paper-soft:#f3ebdf;--ink:#171717;--text:#171717;--muted:hsla(0,0%,9%,.7);--line:hsla(0,0%,9%,.11);--line-strong:hsla(0,0%,9%,.2);--accent:#8d3d38;--accent-soft:rgba(141,61,56,.12)}@keyframes stageRefresh{0%{transform:translateY(8px);opacity:.88}to{transform:translateY(0);opacity:1}}.hover\:translate-x-1:hover{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-\[color\:var\(--line-strong\)\]:hover{border-color:var(--line-strong)}.hover\:bg-\[color\:var\(--accent-soft\)\]:hover{background-color:var(--accent-soft)}.hover\:text-\[color\:var\(--text\)\]:hover{color:var(--text)}@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:768px){.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:col-start-10{grid-column-start:10}.md\:flex{display:flex}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1fr_auto_auto\]{grid-template-columns:1fr auto auto}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-baseline{align-items:baseline}.md\:justify-between{justify-content:space-between}.md\:gap-6{gap:1.5rem}.md\:space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.md\:space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:p-9{padding:2.25rem}.md\:py-7{padding-top:1.75rem;padding-bottom:1.75rem}.md\:text-\[2\.1rem\]{font-size:2.1rem}.md\:text-\[2\.5rem\]{font-size:2.5rem}.md\:text-\[3rem\]{font-size:3rem}.md\:text-\[4\.3rem\]{font-size:4.3rem}.md\:text-\[6\.3rem\]{font-size:6.3rem}}@media (min-width:1024px){.lg\:text-\[5\.8rem\]{font-size:5.8rem}}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..3d3e4fc
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  content: ['./index.html', './app.js'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif'],
+        serif: ['Noto Serif SC', 'Songti SC', 'serif'],
+      },
+      colors: {
+        ink: '#151515',
+      },
+      boxShadow: {
+        soft: '0 26px 80px rgba(0,0,0,0.26)',
+      },
+    },
+  },
+  plugins: [],
+};
