:root {
  --vault-ink: #2c241d;
  --vault-soil: #6e5c4f;
  --vault-clay: #8c7b6a;
  --vault-ash: #c2b8a3;
  --vault-mist: #f7f2e9;
  --vault-paper: #fffaf4;
  --vault-font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --vault-font-sans: 'Manrope', 'Inter', system-ui, sans-serif;
  --vault-font-mono: 'Source Code Pro', 'SFMono-Regular', Consolas, monospace;
  --vault-echo: rgba(255, 255, 255, 0.78);
  --vault-shadow: rgba(32, 25, 20, 0.18);
  --vault-ring: rgba(140, 123, 106, 0.24);
  --vault-glyph: #efe4d4;
  --vault-glyph-alt: #d9cdb8;
  --vault-drift-duration: 26s;
  --vault-pulse-duration: 3.8s;
  --vault-breathe-duration: 8s;
  --vault-reveal-duration: 520ms;
  --vault-texture-opacity: 0.14;
  --vault-letter-spacing: 0.02em;
  --vault-chamber-bg: #1e2733;
  --vault-chamber-surface: #2b394a;
  --vault-chamber-accent: #c9c4d9;
  --vault-chamber-structural: #d9d5e7;
  --vault-chamber-body: #ffffff;
  --vault-chamber-breathe: 11s;
  --vault-chamber-drift: 22s;
  --vault-chamber-pulse: 4s;
}

body[data-vault-room],
.vault-substrate {
  color: var(--vault-ink);
}

body[data-vault-room][data-vault-chamber] {
  --vault-drift-duration: var(--vault-chamber-drift);
  --vault-breathe-duration: var(--vault-chamber-breathe);
  --vault-pulse-duration: var(--vault-chamber-pulse);
}

.vault-chamber-surface {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--vault-chamber-surface) 88%, black), color-mix(in srgb, var(--vault-chamber-bg) 86%, black));
  border-color: color-mix(in srgb, var(--vault-chamber-accent) 42%, transparent);
}

.vault-chamber-structural {
  color: var(--vault-chamber-structural);
}

.vault-chamber-body {
  color: var(--vault-chamber-body);
}

.vault-chamber-accent {
  color: var(--vault-chamber-accent);
}

.vault-chamber-border {
  border-color: color-mix(in srgb, var(--vault-chamber-accent) 44%, transparent);
}

.vault-chamber-glow {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vault-chamber-accent) 36%, transparent), 0 16px 36px -26px color-mix(in srgb, var(--vault-chamber-accent) 52%, transparent);
}

body[data-vault-text-law="white-breath-moss-root"] .vault-law-structural {
  color: var(--vault-chamber-structural);
}

body[data-vault-text-law="white-breath-moss-root"] .vault-law-body {
  color: var(--vault-chamber-body);
}

body[data-vault-chamber="soil"] .vault-chamber-marker,
body[data-vault-chamber="root"] .vault-chamber-marker {
  color: var(--vault-chamber-accent);
}

body[data-vault-chamber="shimmer"] .vault-chamber-marker {
  color: color-mix(in srgb, var(--vault-chamber-accent) 90%, #f7ecc7 10%);
}

.vault-audit-overlay {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  width: min(420px, calc(100vw - 2rem));
  max-height: 52vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(201, 196, 217, 0.36);
  background: rgba(20, 24, 28, 0.92);
  color: #f7f7f7;
  box-shadow: 0 16px 42px -24px rgba(0, 0, 0, 0.7);
  font-family: var(--vault-font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 0.68rem 0.74rem;
}

.vault-audit-overlay strong {
  color: #c9c4d9;
}

.vault-audit-overlay ul {
  margin: 0.55rem 0 0;
  padding: 0 0 0 1rem;
}

.vault-audit-overlay li {
  margin: 0.25rem 0;
}

.vault-audit-mismatch {
  outline: 2px dashed rgba(227, 106, 106, 0.74);
  outline-offset: 2px;
}

.vault-frame {
  position: relative;
  isolation: isolate;
}

.vault-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 242, 233, 0.88));
  border: 1px solid var(--vault-ring);
  border-radius: 18px;
  box-shadow: 0 24px 60px -44px var(--vault-shadow);
}

.vault-ring {
  position: relative;
}

.vault-ring::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border-radius: inherit;
  border: 1px solid var(--vault-ring);
  opacity: 0.55;
  pointer-events: none;
}

.vault-glyph {
  color: var(--vault-soil);
  letter-spacing: var(--vault-letter-spacing);
  text-transform: uppercase;
}

.vault-texture-grain,
.vault-texture-grid,
.vault-texture-rings,
.vault-texture-drift {
  position: relative;
}

.vault-texture-grain::after,
.vault-texture-grid::after,
.vault-texture-rings::after,
.vault-texture-drift::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--vault-texture-opacity);
  mix-blend-mode: multiply;
}

.vault-texture-grain::after {
  background-image: radial-gradient(circle at 20% 20%, rgba(44, 36, 29, 0.16) 0 1px, transparent 1px 100%), radial-gradient(circle at 80% 75%, rgba(44, 36, 29, 0.16) 0 1px, transparent 1px 100%);
  background-size: 11px 11px, 13px 13px;
}

.vault-texture-grid::after {
  background-image: linear-gradient(rgba(44, 36, 29, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 36, 29, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.vault-texture-rings::after {
  background-image: radial-gradient(circle at center, transparent 0 38%, rgba(44, 36, 29, 0.09) 39% 40%, transparent 41% 100%);
  background-size: 210px 210px;
}

.vault-texture-drift::after {
  background-image: repeating-linear-gradient(120deg, transparent 0 14px, rgba(44, 36, 29, 0.06) 14px 15px, transparent 15px 30px);
}

.vault-motion-breathe {
  animation: vaultBreathe var(--vault-breathe-duration) ease-in-out infinite;
}

.vault-motion-drift {
  animation: vaultDrift var(--vault-drift-duration) linear infinite;
}

.vault-motion-pulse {
  animation: vaultPulse var(--vault-pulse-duration) ease-in-out infinite;
}

.vault-motion-reveal {
  animation: vaultReveal var(--vault-reveal-duration) ease both;
}

.vault-motion-shimmer {
  animation: vaultShimmer 4.5s ease-in-out infinite;
}

.vault-typography-accent {
  font-family: var(--vault-font-serif);
  letter-spacing: 0.01em;
}

.vault-typography-sans {
  font-family: var(--vault-font-sans);
}

.vault-typography-mono {
  font-family: var(--vault-font-mono);
}

.vault-echo {
  color: rgba(44, 36, 29, 0.7);
}

.vault-turbulence {
  position: relative;
  isolation: isolate;
}

.vault-turbulence::before,
.vault-turbulence::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vault-turbulence::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(163, 71, 60, 0.12), transparent 24%),
    radial-gradient(circle at 74% 16%, rgba(90, 111, 168, 0.12), transparent 22%),
    repeating-linear-gradient(118deg, rgba(44, 36, 29, 0.05) 0 1px, transparent 1px 18px);
  opacity: 0.8;
  mix-blend-mode: multiply;
}

.vault-turbulence::after {
  background:
    radial-gradient(circle at 50% 38%, rgba(228, 199, 127, 0.08), transparent 32%),
    radial-gradient(circle at 50% 38%, rgba(44, 36, 29, 0.02), transparent 58%);
  opacity: calc(0.22 + (var(--vault-turbulence-pressure, 0) * 0.58));
  animation: vaultTurbulenceShift calc(10s - (var(--vault-turbulence-pressure, 0) * 4s)) ease-in-out infinite;
}

.vault-turbulence-band {
  position: relative;
}

.vault-turbulence-band::after {
  content: attr(data-turbulence-band);
  display: inline-block;
  margin-left: 0.6rem;
  color: rgba(44, 36, 29, 0.68);
  font-family: var(--vault-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vault-serenity {
  position: relative;
  isolation: isolate;
}

.vault-serenity::before,
.vault-serenity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vault-serenity::before {
  background:
    radial-gradient(circle at 20% 24%, rgba(90, 111, 168, 0.16), transparent 22%),
    radial-gradient(circle at 76% 20%, rgba(228, 199, 127, 0.14), transparent 20%),
    radial-gradient(circle at 52% 68%, rgba(194, 184, 163, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(44, 36, 29, 0.01));
  opacity: 0.86;
}

.vault-serenity::after {
  background:
    radial-gradient(circle at 50% 38%, rgba(224, 233, 249, 0.18), transparent 28%),
    repeating-linear-gradient(135deg, rgba(44, 36, 29, 0.015) 0 1px, transparent 1px 20px);
  opacity: calc(0.26 + (var(--vault-serenity-coherence, 0) * 0.42));
  animation: vaultSerenityBreath calc(12s - (var(--vault-serenity-coherence, 0) * 5s)) ease-in-out infinite;
}

.vault-serenity-band {
  position: relative;
}

.vault-serenity-band::after {
  content: attr(data-serenity-band);
  display: inline-block;
  margin-left: 0.6rem;
  color: rgba(44, 36, 29, 0.66);
  font-family: var(--vault-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes vaultSerenityBreath {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0px);
  }
  50% {
    transform: translate3d(0, -2px, 0) scale(1.008);
    filter: blur(0.2px);
  }
}

@keyframes vaultTurbulenceShift {
  0%, 100% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
  50% {
    transform: translate3d(0, -4px, 0) skewX(-1.5deg);
  }
}

@keyframes vaultBreathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes vaultDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vaultPulse {
  0%, 100% {
    opacity: 0.92;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes vaultReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vaultShimmer {
  0%, 100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.06) brightness(1.04);
  }
}