stagecraft 0.1.0

package/themes/neon/components-business.css

@@ -0,0 +1,189 @@
+@import url('../phosphor/components-business.css');
+
+/* =============================================================================
+ * Neon — business components
+ * Featured pricing tier glows hard. Agenda rail dots radiate magenta.
+ * CTAs become electric. Callouts get glow per kind.
+ * Body text remains glow-free for readability.
+ * ===========================================================================*/
+
+:root[data-theme="neon"] {
+  --neon-biz-border: color-mix(in srgb, var(--accent) 28%, var(--dim-2));
+}
+
+/* ---------- Pricing ---------- */
+:root[data-theme="neon"] .pricing-tier {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .pricing-tier--featured {
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 60px -8px var(--accent-glow),
+    0 0 120px -30px var(--accent-glow);
+}
+:root[data-theme="neon"] .pricing-tier--featured .pricing-name {
+  text-shadow: 0 0 12px var(--accent-glow);
+}
+:root[data-theme="neon"] .pricing-tier--featured .pricing-price {
+  text-shadow:
+    0 0 26px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .pricing-badge {
+  box-shadow:
+    0 0 30px -2px var(--accent-glow),
+    0 0 60px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .pricing-check {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .pricing-tier--featured .pricing-cta {
+  box-shadow:
+    inset 0 0 0 1px var(--accent),
+    0 0 24px -6px var(--accent-glow);
+}
+
+/* ---------- Testimonial ---------- */
+:root[data-theme="neon"] .testimonial-photo-wrap {
+  border-color: var(--neon-biz-border);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
+    0 0 60px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .testimonial-mark {
+  text-shadow:
+    0 0 30px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+/* ---------- TeamGrid ---------- */
+:root[data-theme="neon"] .team-card {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .team-card:hover {
+  box-shadow: 0 0 30px -8px var(--accent-glow);
+}
+:root[data-theme="neon"] .team-photo-wrap {
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--dim-2));
+  box-shadow: 0 0 20px -6px var(--accent-glow);
+}
+:root[data-theme="neon"] .team-role {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+
+/* ---------- Agenda ---------- */
+:root[data-theme="neon"] .agenda-time {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .agenda-dot {
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 22px -2px var(--accent-glow);
+}
+:root[data-theme="neon"] .agenda-dot .material-symbols-outlined {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+
+/* ---------- Checklist ---------- */
+:root[data-theme="neon"] .checklist-item {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .checklist-item.is-done {
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--dim-2));
+  box-shadow: 0 0 24px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .checklist-item.is-done .checklist-box {
+  text-shadow:
+    0 0 14px var(--accent-glow),
+    0 0 28px color-mix(in srgb, var(--accent) 40%, transparent);
+}
+
+/* ---------- Steps ---------- */
+:root[data-theme="neon"] .step-card {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .step-card:hover {
+  box-shadow: 0 0 30px -8px var(--accent-glow);
+}
+:root[data-theme="neon"] .step-numeral {
+  text-shadow:
+    0 0 28px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* ---------- CTA ---------- */
+:root[data-theme="neon"] .cta {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .cta--accent {
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 80px -16px var(--accent-glow),
+    inset 0 0 80px -40px var(--accent-glow);
+}
+:root[data-theme="neon"] .cta-button {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
+    0 0 20px -4px var(--accent-glow);
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .cta--accent .cta-button {
+  text-shadow: none;
+  box-shadow:
+    0 0 30px -2px var(--accent-glow),
+    0 0 60px -10px var(--accent-glow);
+}
+
+/* ---------- Callout ---------- */
+:root[data-theme="neon"] .callout--info .callout-icon {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--blue) 70%, transparent);
+}
+:root[data-theme="neon"] .callout--tip .callout-icon,
+:root[data-theme="neon"] .callout--tip .callout-heading,
+:root[data-theme="neon"] .callout--success .callout-icon,
+:root[data-theme="neon"] .callout--success .callout-heading {
+  text-shadow: 0 0 14px var(--accent-glow);
+}
+:root[data-theme="neon"] .callout--warning .callout-icon {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--amber) 60%, transparent);
+}
+:root[data-theme="neon"] .callout--danger .callout-icon {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--red) 65%, transparent);
+}
+
+/* ---------- Tip ---------- */
+:root[data-theme="neon"] .tip {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .tip--tip .tip-icon,
+:root[data-theme="neon"] .tip--success .tip-icon {
+  text-shadow: 0 0 14px var(--accent-glow);
+}
+:root[data-theme="neon"] .tip--info .tip-icon {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--blue) 70%, transparent);
+}
+
+/* ---------- BeforeAfter ---------- */
+:root[data-theme="neon"] .ba-col {
+  border-color: var(--neon-biz-border);
+}
+:root[data-theme="neon"] .ba-col.ba-after {
+  border-color: var(--accent);
+  box-shadow: 0 0 36px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .ba-col-tag--accent {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .ba-arrow {
+  text-shadow:
+    0 0 22px var(--accent-glow),
+    0 0 44px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .ba-tag--accent {
+  box-shadow: 0 0 24px -4px var(--accent-glow);
+}
+:root[data-theme="neon"] .before-after--image .ba-divider {
+  box-shadow:
+    0 0 18px var(--accent-glow),
+    0 0 40px color-mix(in srgb, var(--accent) 40%, transparent);
+}

package/themes/neon/components-chart.css

@@ -0,0 +1,70 @@
+@import url('../phosphor/components-chart.css');
+
+/* =============================================================================
+ * Neon — chart components
+ * Bars and progress fills glow magenta. Process flow arrows pulse cyan.
+ * Quadrant active states use stronger magenta inset glow.
+ * Bars stay readable: explicit dark track + bright fill.
+ * ===========================================================================*/
+
+/* ---------- Matrix2x2 ---------- */
+:root[data-theme="neon"] .matrix2x2 .quadrant.active {
+  box-shadow:
+    inset 0 0 0 1px var(--q-color, var(--accent)),
+    inset 0 0 40px -10px color-mix(in srgb, var(--q-color, var(--accent)) 50%, transparent);
+}
+:root[data-theme="neon"] .matrix2x2 .quadrant.active .q-label {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--q-color, var(--accent)) 55%, transparent);
+}
+
+/* ---------- BarChart ---------- */
+:root[data-theme="neon"] .barchart .bar-track {
+  background: color-mix(in srgb, var(--accent) 6%, var(--dim-2));
+}
+:root[data-theme="neon"] .barchart .bar-fill {
+  box-shadow:
+    0 0 18px color-mix(in srgb, var(--bar-color) 70%, transparent),
+    inset 0 0 12px color-mix(in srgb, var(--bar-color) 30%, transparent);
+}
+:root[data-theme="neon"] .barchart .bar-value {
+  text-shadow: 0 0 10px color-mix(in srgb, var(--bar-color) 50%, transparent);
+}
+
+/* ---------- Progress ---------- */
+:root[data-theme="neon"] .progress-track {
+  background: color-mix(in srgb, var(--accent) 6%, var(--dim-2));
+}
+:root[data-theme="neon"] .progress-fill {
+  box-shadow:
+    0 0 14px color-mix(in srgb, var(--prog-color) 75%, transparent),
+    inset 0 0 10px color-mix(in srgb, var(--prog-color) 30%, transparent);
+}
+:root[data-theme="neon"] .progress-value {
+  text-shadow: 0 0 8px color-mix(in srgb, var(--prog-color) 50%, transparent);
+}
+
+/* ---------- ProcessFlow ---------- */
+:root[data-theme="neon"] .processflow .pf-step.accent {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
+    0 0 28px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .processflow .pf-step.blue {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--blue) 40%, transparent),
+    0 0 28px -10px color-mix(in srgb, var(--blue) 55%, transparent);
+}
+:root[data-theme="neon"] .processflow .pf-icon {
+  text-shadow: 0 0 14px color-mix(in srgb, var(--pf-color) 60%, transparent);
+}
+:root[data-theme="neon"] .processflow .pf-arrow {
+  text-shadow: 0 0 12px var(--accent-glow);
+}
+
+/* ---------- Venn ---------- */
+:root[data-theme="neon"] .venn .v-circle {
+  filter: drop-shadow(0 0 14px color-mix(in srgb, currentColor 45%, transparent));
+}
+:root[data-theme="neon"] .venn .v-label.set .name {
+  text-shadow: 0 0 10px color-mix(in srgb, var(--vl-color, var(--accent)) 55%, transparent);
+}

package/themes/neon/components-content.css

@@ -0,0 +1,112 @@
+@import url('../phosphor/components-content.css');
+
+/* =============================================================================
+ * Neon — content / typography components
+ * Single accent lines glow; full body paragraphs stay clean.
+ * Spotlight is the centerpiece — heavy multi-layer magenta halo.
+ * Marquee's italic accent row glows.
+ * ===========================================================================*/
+
+:root[data-theme="neon"] {
+  --neon-content-border: color-mix(in srgb, var(--accent) 28%, var(--dim-2));
+}
+
+/* ---------- Statement ---------- */
+:root[data-theme="neon"] .statement .st-em {
+  text-shadow:
+    0 0 24px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .statement .st-em--blue {
+  text-shadow:
+    0 0 22px color-mix(in srgb, var(--blue) 70%, transparent),
+    0 0 50px color-mix(in srgb, var(--blue) 30%, transparent);
+}
+:root[data-theme="neon"] .statement .st-em--amber {
+  text-shadow:
+    0 0 20px color-mix(in srgb, var(--amber) 55%, transparent),
+    0 0 44px color-mix(in srgb, var(--amber) 25%, transparent);
+}
+
+/* ---------- QandA ---------- */
+:root[data-theme="neon"] .qa-q {
+  text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 35%, transparent);
+}
+:root[data-theme="neon"] .qa-a {
+  text-shadow:
+    0 0 36px var(--accent-glow),
+    0 0 80px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* ---------- Manifesto ---------- */
+:root[data-theme="neon"] .mf-num {
+  text-shadow:
+    0 0 18px var(--accent-glow),
+    0 0 40px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .mf-text .mf-em {
+  text-shadow: 0 0 14px var(--accent-glow);
+}
+:root[data-theme="neon"] .mf-item.in {
+  border-color: color-mix(in srgb, var(--accent) 22%, var(--dim-2));
+}
+
+/* ---------- Punchline ---------- */
+:root[data-theme="neon"] .pl-payoff {
+  text-shadow:
+    0 0 40px var(--accent-glow),
+    0 0 90px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+/* ---------- Definition ---------- */
+:root[data-theme="neon"] .df-head {
+  border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--dim-2));
+}
+:root[data-theme="neon"] .df-def::before {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .df-mark {
+  text-shadow: 0 0 10px var(--accent-glow);
+  box-shadow: 0 0 16px -4px var(--accent-glow);
+}
+
+/* ---------- ImageGrid ---------- */
+:root[data-theme="neon"] .ig-frame {
+  border-color: var(--neon-content-border);
+}
+:root[data-theme="neon"] .ig-frame::after {
+  box-shadow:
+    inset 0 0 0 1px rgba(0,0,0,0.5),
+    0 0 50px -20px var(--accent-glow),
+    0 20px 50px -20px rgba(0,0,0,0.8);
+}
+
+/* ---------- Spotlight ---------- */
+:root[data-theme="neon"] .sp-focus {
+  border-color: var(--accent);
+  box-shadow:
+    0 0 0 1px var(--accent-soft),
+    0 0 80px -8px var(--accent-glow),
+    0 0 160px -40px var(--accent-glow),
+    0 30px 80px -30px rgba(0,0,0,0.8);
+}
+:root[data-theme="neon"] .sp-icon {
+  text-shadow:
+    0 0 30px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+:root[data-theme="neon"] .sp-heading {
+  text-shadow:
+    0 0 24px var(--accent-glow),
+    0 0 50px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* ---------- Marquee ---------- */
+:root[data-theme="neon"] .mq-track {
+  border-block-color: color-mix(in srgb, var(--accent) 25%, var(--dim-2));
+}
+:root[data-theme="neon"] .mq-track--b .mq-item {
+  text-shadow:
+    0 0 28px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 30%, transparent);
+}

package/themes/neon/components-data.css

@@ -0,0 +1,160 @@
+@import url('../phosphor/components-data.css');
+
+/* =============================================================================
+ * Neon — data-viz components
+ * SVG paths get drop-shadow glow. KPI/SparkLine cards get magenta border tint.
+ * Heatmap intensifies its glow via box-shadow on lit cells.
+ * CodeBlock/CodeDiff keep mono font; file headers get faint magenta glow.
+ * Roadmap bars glow along the lane color.
+ * ===========================================================================*/
+
+:root[data-theme="neon"] {
+  --neon-data-border: color-mix(in srgb, var(--accent) 30%, var(--dim-2));
+}
+
+/* ---------- KPI ---------- */
+:root[data-theme="neon"] .kpi {
+  border-color: var(--neon-data-border);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--data-color) 5%, transparent), transparent 55%),
+    var(--bg-elevated);
+}
+:root[data-theme="neon"] .kpi.in {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--data-color) 35%, transparent),
+    0 0 60px color-mix(in srgb, var(--data-color) 22%, transparent);
+}
+:root[data-theme="neon"] .kpi-num {
+  text-shadow:
+    0 0 22px color-mix(in srgb, var(--data-color) 60%, transparent),
+    0 0 50px color-mix(in srgb, var(--data-color) 30%, transparent);
+}
+:root[data-theme="neon"] .kpi-icon {
+  text-shadow: 0 0 14px color-mix(in srgb, var(--data-color) 60%, transparent);
+}
+
+/* ---------- DonutChart ---------- */
+:root[data-theme="neon"] .donut-arc {
+  filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 70%, transparent));
+}
+:root[data-theme="neon"] .donut-dot {
+  box-shadow:
+    0 0 12px color-mix(in srgb, var(--dc-color, var(--accent)) 85%, transparent);
+}
+
+/* ---------- LineChart ---------- */
+:root[data-theme="neon"] .lc-line {
+  filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 70%, transparent));
+}
+:root[data-theme="neon"] .lc-area {
+  filter: drop-shadow(0 0 12px color-mix(in srgb, currentColor 35%, transparent));
+}
+:root[data-theme="neon"] .lc-dot {
+  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 80%, transparent));
+}
+:root[data-theme="neon"] .lc-dot-leg {
+  box-shadow: 0 0 12px color-mix(in srgb, var(--lc-color, var(--accent)) 85%, transparent);
+}
+
+/* ---------- Gauge ---------- */
+:root[data-theme="neon"] .g-fill {
+  filter:
+    drop-shadow(0 0 14px color-mix(in srgb, var(--data-color) 75%, transparent))
+    drop-shadow(0 0 28px color-mix(in srgb, var(--data-color) 30%, transparent));
+}
+:root[data-theme="neon"] .g-num {
+  text-shadow:
+    0 0 18px color-mix(in srgb, var(--data-color) 60%, transparent),
+    0 0 42px color-mix(in srgb, var(--data-color) 30%, transparent);
+}
+
+/* ---------- SparkLine ---------- */
+:root[data-theme="neon"] .sparkline {
+  border-color: var(--neon-data-border);
+}
+:root[data-theme="neon"] .sl-num {
+  text-shadow:
+    0 0 22px color-mix(in srgb, var(--data-color) 60%, transparent),
+    0 0 44px color-mix(in srgb, var(--data-color) 28%, transparent);
+}
+:root[data-theme="neon"] .sl-line {
+  filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 75%, transparent));
+}
+:root[data-theme="neon"] .sl-area {
+  filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 35%, transparent));
+}
+:root[data-theme="neon"] .sl-tip {
+  filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 90%, transparent));
+}
+
+/* ---------- Heatmap ---------- */
+:root[data-theme="neon"] .hm-cell {
+  box-shadow:
+    0 0 calc(var(--hm-intensity) * 14px)
+    color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 75%), transparent);
+}
+
+/* ---------- Roadmap ---------- */
+:root[data-theme="neon"] .rm-bar {
+  box-shadow:
+    inset 3px 0 0 var(--rm-bar-color),
+    0 0 24px color-mix(in srgb, var(--rm-bar-color) 35%, transparent);
+}
+:root[data-theme="neon"] .rm-lane-label {
+  text-shadow: 0 0 10px color-mix(in srgb, var(--rm-color) 40%, transparent);
+}
+
+/* ---------- SWOT ---------- */
+:root[data-theme="neon"] .swot-cell.in {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 60%, var(--dim-2)),
+    inset 0 0 50px -10px color-mix(in srgb, var(--swot-color) 30%, transparent);
+}
+:root[data-theme="neon"] .swot-letter {
+  text-shadow:
+    0 0 22px color-mix(in srgb, var(--swot-color) 70%, transparent),
+    0 0 44px color-mix(in srgb, var(--swot-color) 30%, transparent);
+}
+
+/* ---------- CodeBlock ---------- */
+:root[data-theme="neon"] .codeblock {
+  border-color: var(--neon-data-border);
+  box-shadow: 0 0 40px -16px var(--accent-glow);
+}
+:root[data-theme="neon"] .cb-head {
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, var(--dim-2));
+}
+:root[data-theme="neon"] .cb-file {
+  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+:root[data-theme="neon"] .cb-lang {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .cb-line--highlight {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 22px -8px var(--accent-glow);
+}
+:root[data-theme="neon"] .cb-line--highlight .cb-line-num {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+
+/* ---------- CodeDiff ---------- */
+:root[data-theme="neon"] .codediff {
+  border-color: var(--neon-data-border);
+  box-shadow: 0 0 40px -16px var(--accent-glow);
+}
+:root[data-theme="neon"] .cd-head {
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, var(--dim-2));
+}
+:root[data-theme="neon"] .cd-file {
+  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+:root[data-theme="neon"] .cd-lang {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .cd-line--add {
+  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 22px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .cd-line--add .cd-marker {
+  text-shadow: 0 0 8px var(--accent-glow);
+}

package/themes/neon/components-diagram.css

@@ -0,0 +1,109 @@
+@import url('../phosphor/components-diagram.css');
+
+/* =============================================================================
+ * Neon — diagram components
+ * Pillar icons glow. Cycle arc/arrows glow cyan-or-magenta. Funnel & Pyramid
+ * accent stages get inner magenta wash + glow border.
+ * ===========================================================================*/
+
+:root[data-theme="neon"] {
+  --diag-card-bg: color-mix(in srgb, var(--accent) 3%, transparent);
+  --diag-card-border: color-mix(in srgb, var(--accent) 25%, var(--dim-2));
+}
+
+/* ---------- Pillars ---------- */
+:root[data-theme="neon"] .pillar-icon {
+  filter: drop-shadow(0 0 12px var(--accent-glow));
+}
+:root[data-theme="neon"] .pillar.pc-blue .pillar-icon {
+  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--blue) 60%, transparent));
+}
+:root[data-theme="neon"] .pillar.pc-amber .pillar-icon {
+  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--amber) 50%, transparent));
+}
+:root[data-theme="neon"] .pillar.pc-red .pillar-icon {
+  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--red) 55%, transparent));
+}
+
+/* ---------- Timeline ---------- */
+:root[data-theme="neon"] .tl-event.active .tl-dot {
+  box-shadow:
+    0 0 0 4px var(--accent-soft),
+    0 0 18px var(--accent-glow);
+}
+:root[data-theme="neon"] .tl-event.tc-blue.active .tl-dot {
+  box-shadow:
+    0 0 0 4px rgba(0, 224, 255, 0.20),
+    0 0 18px color-mix(in srgb, var(--blue) 70%, transparent);
+}
+:root[data-theme="neon"] .tl-event.tc-amber.active .tl-dot {
+  box-shadow:
+    0 0 0 4px rgba(255, 233, 74, 0.18),
+    0 0 14px color-mix(in srgb, var(--amber) 55%, transparent);
+}
+
+/* ---------- Pyramid ---------- */
+:root[data-theme="neon"] .pyr-layer.pyc-accent .pyr-shape {
+  box-shadow:
+    inset 0 0 0 1px var(--accent),
+    0 0 30px -8px var(--accent-glow);
+}
+:root[data-theme="neon"] .pyr-layer.pyc-accent .pyr-label {
+  text-shadow: 0 0 14px var(--accent-glow);
+}
+:root[data-theme="neon"] .pyr-layer.pyc-blue .pyr-shape {
+  box-shadow:
+    inset 0 0 0 1px var(--blue),
+    0 0 26px -8px color-mix(in srgb, var(--blue) 55%, transparent);
+}
+:root[data-theme="neon"] .pyr-layer.pyc-blue .pyr-label {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--blue) 55%, transparent);
+}
+
+/* ---------- Cycle ---------- */
+:root[data-theme="neon"] .cyc-arc {
+  filter: drop-shadow(0 0 6px var(--accent-glow));
+}
+:root[data-theme="neon"] .cyc-arrow {
+  /* cyan arrows give Neon its dual-tone signature */
+  stroke: var(--blue);
+  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blue) 70%, transparent));
+}
+:root[data-theme="neon"] .cyc-item {
+  border-color: var(--neon-card-border, color-mix(in srgb, var(--accent) 25%, var(--dim-2)));
+  background: color-mix(in srgb, var(--bg) 92%, var(--accent) 4%);
+}
+:root[data-theme="neon"] .cyc-item.cyc-accent {
+  border-color: var(--accent);
+  box-shadow: 0 0 20px -4px var(--accent-glow);
+}
+:root[data-theme="neon"] .cyc-item.cyc-accent .cyc-icon {
+  text-shadow: 0 0 14px var(--accent-glow);
+}
+:root[data-theme="neon"] .cyc-item.cyc-blue {
+  border-color: var(--blue);
+  box-shadow: 0 0 20px -4px color-mix(in srgb, var(--blue) 60%, transparent);
+}
+:root[data-theme="neon"] .cyc-item.cyc-blue .cyc-icon {
+  text-shadow: 0 0 14px color-mix(in srgb, var(--blue) 60%, transparent);
+}
+
+/* ---------- Funnel ---------- */
+:root[data-theme="neon"] .fn-stage.fnc-accent .fn-shape {
+  box-shadow:
+    inset 0 0 0 1px var(--accent),
+    0 0 30px -10px var(--accent-glow);
+}
+:root[data-theme="neon"] .fn-stage.fnc-accent .fn-value,
+:root[data-theme="neon"] .fn-stage.fnc-accent .fn-label {
+  text-shadow: 0 0 14px var(--accent-glow);
+}
+:root[data-theme="neon"] .fn-stage.fnc-blue .fn-shape {
+  box-shadow:
+    inset 0 0 0 1px var(--blue),
+    0 0 28px -10px color-mix(in srgb, var(--blue) 55%, transparent);
+}
+:root[data-theme="neon"] .fn-stage.fnc-blue .fn-value,
+:root[data-theme="neon"] .fn-stage.fnc-blue .fn-label {
+  text-shadow: 0 0 12px color-mix(in srgb, var(--blue) 55%, transparent);
+}