[data-ob-theme="shadow-spectrum"] body {
  background:
    radial-gradient(circle at 12% 28%, color-mix(in srgb, var(--ob-color-link) 20%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--ob-color-accent) 16%, transparent), transparent 30rem),
    radial-gradient(circle at 55% 76%, color-mix(in srgb, var(--ob-color-glow) 44%, transparent), transparent 34rem),
    var(--ob-color-page);
}

[data-ob-theme="shadow-spectrum"] {
  --mnix-brand-hue: 105;
  --ss-panel-border: color-mix(in srgb, var(--ob-color-text) 18%, transparent);
  --ss-panel-shadow: 0 25px 70px color-mix(in srgb, var(--ob-color-text) 18%, transparent);
  --ss-panel: color-mix(in srgb, var(--ob-color-surface) 86%, transparent);
  --ss-panel-raised: color-mix(in srgb, var(--ob-color-surface-raised) 78%, transparent);
  --ss-panel-gradient: linear-gradient(135deg, var(--ss-panel-raised), var(--ss-panel));
  --ss-mint-panel: color-mix(in srgb, var(--ob-color-surface) 82%, var(--ob-color-accent) 18%);
  --ss-pink-panel: color-mix(in srgb, var(--ob-color-surface) 82%, var(--ob-color-link) 18%);
  --ss-blue-panel: color-mix(in srgb, var(--ob-color-surface) 84%, var(--ob-color-callout-note) 16%);
}

.cw-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(22rem, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 42rem; padding-block: 3rem; }
.cw-kicker { color: var(--ob-color-accent-soft); font: 700 .72rem/1.6 var(--ob-font-mono); letter-spacing: .18em; }
.cw-title-slot .ob-title { max-width: none; background: linear-gradient(120deg, var(--ob-color-text) 20%, var(--ob-color-accent-soft) 55%, var(--ob-color-link)); background-clip: text; color: transparent; font-size: clamp(2.9rem, 4.3vw, 4rem); overflow-wrap: normal; text-wrap: balance; }
.cw-lede { max-width: 36rem; color: var(--ob-color-muted); font-size: clamp(1.2rem, 2.1vw, 1.65rem); }
.cw-spectrum { position: relative; min-height: 34rem; isolation: isolate; }
.cw-spectrum::before, .cw-spectrum::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
.cw-spectrum::before { inset: 2rem 1rem 7rem 7rem; border: 1px solid color-mix(in srgb, var(--ob-color-accent) 55%, transparent); box-shadow: inset 0 0 80px color-mix(in srgb, var(--ob-color-accent) 8%, transparent), 0 0 60px color-mix(in srgb, var(--ob-color-accent) 12%, transparent); }
.cw-spectrum::after { inset: 7rem 7rem 2rem 1rem; border: 1px solid color-mix(in srgb, var(--ob-color-link) 50%, transparent); box-shadow: inset 0 0 80px color-mix(in srgb, var(--ob-color-link) 8%, transparent), 0 0 60px color-mix(in srgb, var(--ob-color-link) 10%, transparent); }
.cw-plane { position: absolute; z-index: 1; width: min(75%, 28rem); padding: 1.2rem 1.4rem; border: 1px solid var(--ss-panel-border); border-radius: 1.5rem; backdrop-filter: blur(18px); box-shadow: var(--ss-panel-shadow); transform: rotate(-4deg); }
.cw-plane span { display: block; margin-bottom: .8rem; font: .65rem/1.2 var(--ob-font-mono); letter-spacing: .14em; }
.cw-plane strong { font: 700 1rem/1.5 var(--ob-font-mono); }
.cw-light { top: 3rem; left: 0; background: var(--ss-mint-panel); color: var(--ob-color-accent-soft); }
.cw-shadow { top: 11rem; right: 0; z-index: 2; background: var(--ss-pink-panel); color: var(--ob-color-link); transform: rotate(3deg); }
.cw-contract { left: 3rem; bottom: 3rem; z-index: 3; background: var(--ss-blue-panel); color: var(--ob-color-callout-note); transform: rotate(-1deg); }
.cw-spectrum > p { position: absolute; z-index: 4; right: 0; bottom: 0; color: var(--ob-color-subtle); font: .64rem/1.4 var(--ob-font-mono); letter-spacing: .12em; }

.wc-journey-nav { display: flex; gap: .65rem; margin-top: 2.5rem; }
.wc-journey-nav a { flex: 1; min-width: 0; padding: .85rem; border: 1px solid var(--ss-panel-border); border-radius: 999px; background: var(--ss-panel); color: var(--ob-color-muted); text-align: center; text-decoration: none; font: .68rem/1.3 var(--ob-font-mono); backdrop-filter: blur(16px); }
.wc-journey-nav a:hover, .wc-journey-nav a:focus-visible { border-color: var(--ob-color-link); color: var(--ob-color-text); box-shadow: 0 0 24px color-mix(in srgb, var(--ob-color-link) 22%, transparent); }
.wc-journey-nav a[aria-current="page"] { border-color: var(--ob-color-accent-soft); color: var(--ob-color-accent-soft); box-shadow: 0 0 28px color-mix(in srgb, var(--ob-color-accent) 16%, transparent); }
.wc-journey-nav span { display: block; font-size: 1rem; }

.cw-checkpoint, .cw-goals, .cw-roadmap { margin-block: 6rem; }
.cw-checkpoint { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid color-mix(in srgb, var(--ob-color-accent) 35%, transparent); border-radius: 3rem 1rem 3rem 1rem; background: var(--ss-panel-gradient); box-shadow: var(--ss-panel-shadow); }
.cw-checkpoint h2 { margin-top: 0; }
.cw-goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.cw-goal-grid article { min-height: 9rem; padding: 1.4rem; border: 1px solid var(--ss-panel-border); border-radius: 2rem; background: var(--ss-panel-gradient); backdrop-filter: blur(14px); }
.cw-goal-grid article:nth-child(3n + 2) { border-color: color-mix(in srgb, var(--ob-color-link) 38%, transparent); transform: translateY(1rem); }
.cw-goal-grid span, .cw-goal-grid small { display: block; color: var(--ob-color-subtle); font: .66rem/1.4 var(--ob-font-mono); }
.cw-goal-grid p { color: var(--ob-color-text); }
.cw-roadmap ol { display: flex; align-items: center; justify-content: center; gap: 0; padding: 3rem 0; list-style: none; }
.cw-roadmap li { width: 34%; margin-inline: -1.5%; }
.cw-roadmap a { display: grid; place-content: center; aspect-ratio: 1; padding: 2rem; border: 1px solid var(--ss-panel-border); border-radius: 50%; background: var(--ss-panel); color: var(--ob-color-text); text-align: center; text-decoration: none; box-shadow: inset 0 0 70px color-mix(in srgb, var(--ob-color-glow) 28%, transparent); }
.cw-roadmap li:nth-child(2) a { border-color: color-mix(in srgb, var(--ob-color-accent) 50%, transparent); transform: scale(1.08); }
.cw-roadmap li:nth-child(3) a { border-color: color-mix(in srgb, var(--ob-color-link) 50%, transparent); }
.cw-roadmap span { color: var(--ob-color-accent-soft); font: .68rem/1.4 var(--ob-font-mono); }
.cw-roadmap strong { display: block; margin-block: .65rem; font-size: 1.15rem; }
.cw-roadmap p { margin: 0; color: var(--ob-color-muted); font-size: .88rem; }

[data-ob-theme="shadow-spectrum"] .ob-series-stage-label { margin-top: 3.5rem; color: var(--ob-color-accent-soft); font: 700 .9rem/1.5 var(--ob-font-mono); letter-spacing: .08em; text-transform: uppercase; }
[data-ob-theme="shadow-spectrum"] .ob-series-parts-full { gap: .85rem; }
[data-ob-theme="shadow-spectrum"] .ob-part { border: 1px solid var(--ss-panel-border); border-radius: 1.5rem; background: var(--ss-panel-gradient); backdrop-filter: blur(12px); }
[data-ob-theme="shadow-spectrum"] .ob-part:hover { border-color: var(--ob-color-accent-soft); box-shadow: 0 0 40px color-mix(in srgb, var(--ob-color-accent) 12%, transparent); transform: translateY(-2px); }
[data-ob-theme="shadow-spectrum"] .ob-part-number { color: var(--ob-color-link); font-family: var(--ob-font-mono); }
[data-ob-theme="shadow-spectrum"] .ob-prose h2 { margin-top: 4rem; background: linear-gradient(90deg, var(--ob-color-accent-soft), var(--ob-color-link)); background-clip: text; color: transparent; }
[data-ob-theme="shadow-spectrum"] .ob-prose h2::after { content: ""; display: block; width: min(12rem, 45%); height: 1px; margin-top: .75rem; background: linear-gradient(90deg, var(--ob-color-accent-soft), transparent); }
[data-ob-theme="shadow-spectrum"] .ob-prose blockquote { border: 1px solid color-mix(in srgb, var(--ob-color-link) 35%, transparent); border-radius: 0 1.5rem 1.5rem 0; background: color-mix(in srgb, var(--ob-color-glow) 20%, transparent); }

@media (max-width: 850px) { .cw-hero { grid-template-columns: 1fr; min-height: auto; } .cw-spectrum { max-width: 36rem; } .cw-roadmap ol { flex-direction: column; } .cw-roadmap li { width: min(23rem, 90%); margin-block: -1rem; } }
@media (max-width: 560px) { .wc-journey-nav { flex-direction: column; } .cw-goal-grid { grid-template-columns: 1fr; } .cw-goal-grid article:nth-child(3n + 2) { transform: none; } .cw-spectrum { min-height: 27rem; } .cw-plane { width: 83%; } .cw-shadow { top: 9rem; } }
@media print { [data-ob-theme="shadow-spectrum"] body { background: #fff; color: #111; } .cw-plane, .cw-checkpoint, .cw-goal-grid article, [data-ob-theme="shadow-spectrum"] .ob-part { box-shadow: none; backdrop-filter: none; } }