:root {
  --bg-page: #0a0a0f;
  --bg-block: #141420;
  --text-block: #e8e4d9;
  --accent-main: #e8d48b;
  --accent-dark: #8a6d2b;
  --accent-muted: #a09882;
  --border-muted: #2a2a3a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* GLOBAL THEME ROOTS */
.theme-aristaios-caim {
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --bg-deep: #0a0804;
  --bg-section: #100e08;
  --bg-card: #16140c;
  --text-primary: #e4dcd0;
  --text-secondary: #a0946a;
  --border: #28221a;
  --honey: #b8922a;
  --honey-light: #d4b44a;
  --honey-bright: #e8d48b;
  --water: #2a5a7a;
  --water-light: #4a8aaa;
  --bee: #8a7a2a;
  --bee-light: #baa83a;
  --restore: #4a6a9a;
}

.theme-artemis-lerajie {
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --gold-dark: #8a6d2b;
  --bg-deep: #06060a;
  --bg-section: #0a0a14;
  --bg-card: #0e0e1a;
  --text-primary: #e8e4d9;
  --text-secondary: #a09882;
  --border: #1e1e30;
  --moon: #8a8aaa;
  --moon-light: #b0b0d0;
  --silver: #c0c0d8;
  --restore: #4a6a9a;
  --hunt: #6a3a3a;
}

.theme-belial-mithra-shamash {
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --gold-dark: #8a6d2b;
  --bg-deep: #0c0804;
  --bg-section: #120e08;
  --bg-card: #18140c;
  --text-primary: #e8e0d0;
  --text-secondary: #a09470;
  --border: #2a2210;
  --solar: #c49a2a;
  --solar-light: #e8c44a;
  --solar-bright: #f0d860;
  --flame: #a06020;
  --flame-light: #c08030;
  --dawn: #8a5a2a;
  --restore: #4a6a9a;
}

/* GLOBAL THEME ROOTS (27 Themes) */

/* 1. Default (Indigo) */
/* GLOBAL THEME ROOTS (27 Themes) */

/* 1. Default (Indigo) */
.theme-castor-orobas {
  --bg-page: #0a0a0f;
  --bg-block: #141420;
  --text-block: #e8e4d9;
  --accent-main: #e8d48b;
  --accent-dark: #8a6d2b;
  --accent-muted: #a09882;
  --border-muted: #2a2a3a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 2. Purple */
.theme-orpheus-amdusias {
  --bg-page: #08060a;
  --bg-block: #120e16;
  --text-block: #dcd8e0;
  --accent-main: #9a7aca;
  --accent-dark: #7a5aaa;
  --accent-muted: #9482a0;
  --border-muted: #221a2a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-amethyst-plume {
  --bg-page: #0a060e;
  --bg-block: #140e1a;
  --text-block: #dfd8e8;
  --accent-main: #c49ae8;
  --accent-dark: #8a4ac0;
  --accent-muted: #9e8ea6;
  --border-muted: #2a1a36;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-violet-crown {
  --bg-page: #09050b;
  --bg-block: #130d17;
  --text-block: #ded6e6;
  --accent-main: #cca3f0;
  --accent-dark: #904ad0;
  --accent-muted: #9c8da4;
  --border-muted: #281a32;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 3. Indigo (Default is 1, so need 2 more) */
.theme-mystic-depths {
  --bg-page: #08080d;
  --bg-block: #12121d;
  --text-block: #e4e2e8;
  --accent-main: #d0c8e0;
  --accent-dark: #6e5a9a;
  --accent-muted: #9894a0;
  --border-muted: #282838;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-astral-void {
  --bg-page: #06060b;
  --bg-block: #10101a;
  --text-block: #e0dce4;
  --accent-main: #c0b8d8;
  --accent-dark: #5e4a8a;
  --accent-muted: #94909a;
  --border-muted: #242434;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 4. Blue */
.theme-polydeukes-marbas {
  --bg-page: #0a0a0f;
  --bg-block: #141420;
  --text-block: #e8e4d9;
  --accent-main: #e8d48b;
  --accent-dark: #4a6a9a;
  --accent-muted: #8c9cb0;
  --border-muted: #2a2a3a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-oannes-forneus {
  --bg-page: #060a0c;
  --bg-block: #0e1218;
  --text-block: #dae0e8;
  --accent-main: #4a8a9a;
  --accent-dark: #2a5a6a;
  --accent-muted: #7a949e;
  --border-muted: #1a2430;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-azure-flow {
  --bg-page: #05080b;
  --bg-block: #0b1016;
  --text-block: #d6e2e6;
  --accent-main: #90cce0;
  --accent-dark: #3a7a9a;
  --accent-muted: #86969c;
  --border-muted: #1a2830;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 5. Green */
.theme-kheiron-buer {
  --bg-page: #080806;
  --bg-block: #141410;
  --text-block: #e0dcd2;
  --accent-main: #6a9a4a;
  --accent-dark: #4a6a3a;
  --accent-muted: #8a9e7a;
  --border-muted: #24241a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-ningishzida-volac {
  --bg-page: #060608;
  --bg-block: #111119;
  --text-block: #e8e4d9;
  --accent-main: #5a9a6a;
  --accent-dark: #3a6a4a;
  --accent-muted: #829e8c;
  --border-muted: #222233;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-silvanus-barbatos {
  --bg-page: #080a06;
  --bg-block: #12160e;
  --text-block: #dce0d4;
  --accent-main: #5a8a3a;
  --accent-dark: #3a5a2a;
  --accent-muted: #8c9e7a;
  --border-muted: #222a1a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 6. Yellow */
.theme-hathor-uval {
  --bg-page: #0a0806;
  --bg-block: #16140e;
  --text-block: #e8e0d2;
  --accent-main: #d4b870;
  --accent-dark: #b89a50;
  --accent-muted: #a89a72;
  --border-muted: #2a2618;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-renenutet-bune {
  --bg-page: #080a04;
  --bg-block: #12140e;
  --text-block: #e0dcd0;
  --accent-main: #baa83a;
  --accent-dark: #8a7a2a;
  --accent-muted: #9c9462;
  --border-muted: #22241a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-aristaios-caim {
  --bg-page: #0a0804;
  --bg-block: #16140c;
  --text-block: #e4dcd0;
  --accent-main: #e8d48b;
  --accent-dark: #b8922a;
  --accent-muted: #a0946a;
  --border-muted: #28221a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 7. Orange */
.theme-belial-mithra-shamash {
  --bg-page: #0c0804;
  --bg-block: #18140c;
  --text-block: #e8e0d0;
  --accent-main: #f0d860;
  --accent-dark: #8a5a2a;
  --accent-muted: #9e8262;
  --border-muted: #2a2210;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-ember-glow {
  --bg-page: #0a0604;
  --bg-block: #160a06;
  --text-block: #ecdbd3;
  --accent-main: #ec8a40;
  --accent-dark: #9a4a1a;
  --accent-muted: #a69085;
  --border-muted: #30140c;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-sunset-mirage {
  --bg-page: #090403;
  --bg-block: #120806;
  --text-block: #e4d8d3;
  --accent-main: #d88040;
  --accent-dark: #a05a2a;
  --accent-muted: #9e908a;
  --border-muted: #26120e;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 8. Brown */
.theme-ninurta-orias {
  --bg-page: #08080a;
  --bg-block: #121216;
  --text-block: #e8e4d9;
  --accent-main: #c09a5a;
  --accent-dark: #8a6a3a;
  --accent-muted: #9e8c72;
  --border-muted: #222230;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-earthen-root {
  --bg-page: #070503;
  --bg-block: #0e0906;
  --text-block: #e0d8cf;
  --accent-main: #a68456;
  --accent-dark: #6e5030;
  --accent-muted: #9a9085;
  --border-muted: #1e120a;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-copper-forge {
  --bg-page: #0a0504;
  --bg-block: #140b08;
  --text-block: #e6dfdb;
  --accent-main: #c08050;
  --accent-dark: #8a502a;
  --accent-muted: #a29892;
  --border-muted: #281610;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 9. Pink */
.theme-eros-zepar {
  --bg-page: #0a0608;
  --bg-block: #160e12;
  --text-block: #e8e0d6;
  --accent-main: #c06a7a;
  --accent-dark: #8a3a4a;
  --accent-muted: #a07c86;
  --border-muted: #2a1e24;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-rose-quartz {
  --bg-page: #0c0508;
  --bg-block: #160a10;
  --text-block: #eed8df;
  --accent-main: #ea8eaa;
  --accent-dark: #a04a6a;
  --accent-muted: #a8949a;
  --border-muted: #30141e;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-lotus-blossom {
  --bg-page: #090306;
  --bg-block: #12060c;
  --text-block: #dfced4;
  --accent-main: #ca6690;
  --accent-dark: #803a5a;
  --accent-muted: #9c8e93;
  --border-muted: #240c16;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* 10. Red */
.theme-artemis-lerajie {
  --bg-page: #06060a;
  --bg-block: #0e0e1a;
  --text-block: #e8e4d9;
  --accent-main: #b0b0d0;
  --accent-dark: #6a3a3a;
  --accent-muted: #9a8282;
  --border-muted: #1e1e30;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-nemesis-naamah {
  --bg-page: #060406;
  --bg-block: #100e10;
  --text-block: #d8d0d0;
  --accent-main: #9a4a4a;
  --accent-dark: #6a2a2a;
  --accent-muted: #a08282;
  --border-muted: #241a20;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

.theme-crimson-tide {
  --bg-page: #070101;
  --bg-block: #0c0202;
  --text-block: #d8cece;
  --accent-main: #b83333;
  --accent-dark: #802020;
  --accent-muted: #948282;
  --border-muted: #200404;
  --card-border: color-mix(in srgb, var(--accent-dark) 40%, transparent);
  --card-bg: color-mix(in srgb, var(--accent-dark) 5%, transparent);
}

/* Base Block UI elements */

.step {
  background: var(--bg-block);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 28px;
  margin-bottom: 22px;
}

.step-type {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-type::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-muted);
}

.rune-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin: 16px 0;
  flex-wrap: wrap;
}

/* Unified Vibration Card structure */
.vibration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 18px 20px 12px 20px;
  min-width: 100px;
  margin-bottom: 6px;
  position: relative;
  transition: all 0.2s ease;
}

.vibration-card.is-mantra {
  padding-top: 26px;
}

.vibration-glyph {
  margin: 0 auto 8px;
}

.vibration-title {
  font-family: "Cinzel", serif;
  font-size: 14px;
  color: var(--accent-main);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.vibration-count {
  font-family: sans-serif;
  font-size: 13px;
  color: var(--accent-muted);
}

.x-mark {
  text-transform: lowercase;
  opacity: 0.6;
  margin: 0 2px;
  font-size: 0.9em;
}

/* Audio Playback Overlays */
.audio-icon {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--accent-muted);
  font-size: 14px;
  opacity: 0.6;
}

.audio-progress-bar {
  position: absolute;
  bottom: 0;
  left: 3px;
  height: 2px;
  background: var(--accent-muted);
  border-radius: 2px;
  transition: width 0.05s linear;
  max-width: calc(100% - 6px);
}

.affirm-text {
  font-size: 0.815em;
  line-height: 1.85;
  padding: 8px 0;
}

.affirm-text strong {
  color: var(--accent-main);
  font-weight: 600;
}

.mantra-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.mantra-item {
  font-family: "Cinzel", serif;
  font-size: 1.05em;
  color: var(--accent-main);
  font-weight: 700;
  letter-spacing: 2px;
}

/* Core Text Area and Inputs */
.block-textarea {
width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.815em;
  color: var(--text-block);
  resize: vertical;
  min-height: 120px;
  line-height: 1.8;
  padding: 12px 0;
}

/* Dynamic Accent Styling using color-mix for automatic transparency */
.step.colored-step,
.composer-vibe-block.colored-step {
  border-color: var(--accent, var(--border-muted)) !important;
}

.step.colored-step .accent-hl,
.composer-vibe-block.colored-step .accent-hl {
  border-left: 3px solid var(--accent, var(--border-muted));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 12%, transparent) 0%,
    color-mix(in srgb, var(--accent) 3%, transparent) 100%
  );
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.hero-aspect,
.composer-vibe-block.hero-aspect {
  border: 1px solid var(--border-muted) !important;
  border-left-color: var(--accent, var(--border-muted)) !important;
  border-left-width: 4px !important;
  background: var(--bg-block) !important;
}

.block-textarea:focus {
  outline: none;
}

/* Block Specific Styles */
.step.solar-honey {
  border-color: var(--accent-dark);
  background: linear-gradient(135deg, #0c0a04 0%, #14100a 50%, #0c0a04 100%);
}

.solar-honey::before {
  content: "🐝";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.honey-hl {
  background: linear-gradient(
    135deg,
    rgba(184, 146, 42, 0.1) 0%,
    rgba(184, 146, 42, 0.02) 100%
  );
  border-left: 3px solid var(--accent-dark);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.hydro {
  border-color: var(--water);
  background: linear-gradient(135deg, #060a0e 0%, #0a1018 50%, #060a0e 100%);
}

.hydro::before {
  content: "〰";
  display: block;
  text-align: center;
  color: var(--water);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.water-hl {
  background: linear-gradient(
    135deg,
    rgba(42, 90, 122, 0.1) 0%,
    rgba(42, 90, 122, 0.02) 100%
  );
  border-left: 3px solid var(--water);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.golden {
  border-color: var(--accent-main);
  background: linear-gradient(135deg, #0e0c06 0%, #16140c 50%, #0e0c06 100%);
}

.golden::before {
  content: "☀";
  display: block;
  text-align: center;
  color: var(--accent-main);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.golden-hl {
  background: linear-gradient(
    135deg,
    rgba(232, 204, 96, 0.08) 0%,
    rgba(232, 204, 96, 0.02) 100%
  );
  border-left: 3px solid var(--accent-main);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.restoration {
  border-color: var(--restore);
  background: linear-gradient(135deg, #0c0f1a 0%, #0f1220 50%, #0c0f1a 100%);
}

.restoration::before {
  content: "★";
  display: block;
  text-align: center;
  color: var(--restore);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.restore-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 106, 154, 0.12) 0%,
    rgba(74, 106, 154, 0.03) 100%
  );
  border-left: 3px solid var(--restore);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.moon-glory {
  border-color: var(--moon);
  background: linear-gradient(135deg, #0a0a16 0%, #0e0e20 50%, #0a0a16 100%);
}

.moon-glory::before {
  content: "☽";
  display: block;
  text-align: center;
  color: var(--moon);
  font-size: 18px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.moon-hl {
  background: linear-gradient(
    135deg,
    rgba(138, 138, 170, 0.1) 0%,
    rgba(138, 138, 170, 0.02) 100%
  );
  border-left: 3px solid var(--moon);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.hunt-strike {
  border-color: var(--hunt);
  background: linear-gradient(135deg, #120a0a 0%, #180e0e 50%, #120a0a 100%);
}

.hunt-strike::before {
  content: "➶";
  display: block;
  text-align: center;
  color: var(--hunt);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.hunt-hl {
  background: linear-gradient(
    135deg,
    rgba(106, 58, 58, 0.12) 0%,
    rgba(106, 58, 58, 0.03) 100%
  );
  border-left: 3px solid var(--hunt);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.solar {
  border-color: var(--solar);
  background: linear-gradient(135deg, #0e0a04 0%, #161008 50%, #0e0a04 100%);
}

.solar::before {
  content: "☀";
  display: block;
  text-align: center;
  color: var(--solar);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.solar-hl {
  background: linear-gradient(
    135deg,
    rgba(196, 154, 42, 0.1) 0%,
    rgba(196, 154, 42, 0.02) 100%
  );
  border-left: 3px solid var(--solar);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.flame {
  border-color: var(--flame);
  background: linear-gradient(135deg, #0c0804 0%, #120c06 50%, #0c0804 100%);
}

.flame::before {
  content: "🔥";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.flame-hl {
  background: linear-gradient(
    135deg,
    rgba(160, 96, 32, 0.1) 0%,
    rgba(160, 96, 32, 0.02) 100%
  );
  border-left: 3px solid var(--flame);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.dawn {
  border-color: var(--dawn);
  background: linear-gradient(135deg, #0a0604 0%, #100a06 50%, #0a0604 100%);
}

.dawn-hl {
  background: linear-gradient(
    135deg,
    rgba(138, 90, 42, 0.1) 0%,
    rgba(138, 90, 42, 0.02) 100%
  );
  border-left: 3px solid var(--dawn);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.twin-revelation::before {
  content: "★ ★";
  display: block;
  text-align: center;
  color: var(--twin-glow);
  letter-spacing: 20px;
  font-size: 14px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.ashvin-revelation::before {
  content: "☽ ☽";
  display: block;
  text-align: center;
  color: var(--ashvin-glow);
  letter-spacing: 20px;
  font-size: 14px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.step.cosmic-eros {
  border-color: var(--cosmic);
  background: linear-gradient(135deg, #0e0a14 0%, #120e1a 50%, #0e0a14 100%);
}

.cosmic-eros::before {
  content: "✦";
  display: block;
  text-align: center;
  color: var(--cosmic);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.cosmic-hl {
  background: linear-gradient(
    135deg,
    rgba(106, 90, 138, 0.12) 0%,
    rgba(106, 90, 138, 0.03) 100%
  );
  border-left: 3px solid var(--cosmic);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.aphrodite-passage {
  border-color: var(--aphrodite);
  background: linear-gradient(135deg, #120a10 0%, #180e16 50%, #120a10 100%);
}

.aphrodite-passage::before {
  content: "♀";
  display: block;
  text-align: center;
  color: var(--aphrodite);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.aphrodite-hl {
  background: linear-gradient(
    135deg,
    rgba(122, 74, 106, 0.12) 0%,
    rgba(122, 74, 106, 0.03) 100%
  );
  border-left: 3px solid var(--aphrodite);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.flame-eros {
  border-color: var(--flame);
  background: linear-gradient(135deg, #120c08 0%, #1a1008 50%, #120c08 100%);
}

.flame-eros::before {
  content: "🜂";
  display: block;
  text-align: center;
  color: var(--flame);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.flame-hl {
  background: linear-gradient(
    135deg,
    rgba(196, 112, 48, 0.1) 0%,
    rgba(196, 112, 48, 0.02) 100%
  );
  border-left: 3px solid var(--flame);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.sky-mother {
  border-color: var(--sky);
  background: linear-gradient(135deg, #0a0c14 0%, #0e1018 50%, #0a0c14 100%);
}

.sky-mother::before {
  content: "𓇳";
  display: block;
  text-align: center;
  color: var(--sky);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.sky-hl {
  background: linear-gradient(
    135deg,
    rgba(90, 106, 138, 0.1) 0%,
    rgba(90, 106, 138, 0.02) 100%
  );
  border-left: 3px solid var(--sky);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.west-lady {
  border-color: var(--west);
  background: linear-gradient(135deg, #100a0e 0%, #140e12 50%, #100a0e 100%);
}

.west-lady::before {
  content: "𓋹";
  display: block;
  text-align: center;
  color: var(--west);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.west-hl {
  background: linear-gradient(
    135deg,
    rgba(106, 74, 90, 0.1) 0%,
    rgba(106, 74, 90, 0.02) 100%
  );
  border-left: 3px solid var(--west);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.joy-dance {
  border-color: var(--joy);
  background: linear-gradient(135deg, #12100a 0%, #18160c 50%, #12100a 100%);
}

.joy-dance::before {
  content: "𓏏";
  display: block;
  text-align: center;
  color: var(--joy);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.joy-hl {
  background: linear-gradient(
    135deg,
    rgba(138, 122, 58, 0.1) 0%,
    rgba(138, 122, 58, 0.02) 100%
  );
  border-left: 3px solid var(--joy);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.healing {
  border-color: var(--heal);
  background: linear-gradient(135deg, #060a08 0%, #0a100c 50%, #060a08 100%);
}

.healing::before {
  content: "✤";
  display: block;
  text-align: center;
  color: var(--heal);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.heal-hl {
  background: linear-gradient(
    135deg,
    rgba(58, 106, 90, 0.12) 0%,
    rgba(58, 106, 90, 0.03) 100%
  );
  border-left: 3px solid var(--heal);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.teaching {
  border-color: var(--sage);
  background: linear-gradient(135deg, #080a06 0%, #0c100a 50%, #080a06 100%);
}

.teaching::before {
  content: "⊕";
  display: block;
  text-align: center;
  color: var(--sage);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.teach-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 106, 58, 0.12) 0%,
    rgba(74, 106, 58, 0.03) 100%
  );
  border-left: 3px solid var(--sage);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.justice {
  border-color: var(--wrath);
  background: linear-gradient(135deg, #0a0606 0%, #100a0a 50%, #0a0606 100%);
}

.justice::before {
  content: "⚖";
  display: block;
  text-align: center;
  color: var(--wrath);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.justice-hl {
  background: linear-gradient(
    135deg,
    rgba(106, 42, 42, 0.12) 0%,
    rgba(106, 42, 42, 0.03) 100%
  );
  border-left: 3px solid var(--wrath);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.night-born {
  border-color: var(--night);
  background: linear-gradient(135deg, #08060a 0%, #0c0a10 50%, #08060a 100%);
}

.night-born::before {
  content: "☾";
  display: block;
  text-align: center;
  color: var(--night);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.night-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 58, 90, 0.12) 0%,
    rgba(74, 58, 90, 0.03) 100%
  );
  border-left: 3px solid var(--night);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.balance {
  border-color: var(--scale);
  background: linear-gradient(135deg, #0a0a06 0%, #10100a 50%, #0a0a06 100%);
}

.balance::before {
  content: "☷";
  display: block;
  text-align: center;
  color: var(--scale);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.scale-hl {
  background: linear-gradient(
    135deg,
    rgba(90, 90, 58, 0.12) 0%,
    rgba(90, 90, 58, 0.03) 100%
  );
  border-left: 3px solid var(--scale);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.shield-faithful {
  border-color: var(--shield);
  background: linear-gradient(135deg, #060a0c 0%, #0a0e12 50%, #060a0c 100%);
}

.shield-hl {
  background: linear-gradient(
    135deg,
    rgba(58, 74, 90, 0.12) 0%,
    rgba(58, 74, 90, 0.03) 100%
  );
  border-left: 3px solid var(--shield);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.serpent-blessing {
  border-color: var(--serpent);
  background: linear-gradient(135deg, #0a120c 0%, #0e160f 50%, #0a120c 100%);
}

.serpent-blessing::before {
  content: "🜔 🜔";
  display: block;
  text-align: center;
  color: var(--serpent);
  letter-spacing: 20px;
  font-size: 13px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.serpent-hl {
  background: linear-gradient(
    135deg,
    rgba(58, 106, 74, 0.12) 0%,
    rgba(58, 106, 74, 0.03) 100%
  );
  border-left: 3px solid var(--serpent);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.deep-ocean {
  border-color: var(--ocean);
  background: linear-gradient(135deg, #060c12 0%, #0a1218 50%, #060c12 100%);
}

.deep-ocean::before {
  content: "〰";
  display: block;
  text-align: center;
  color: var(--ocean);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.ocean-hl {
  background: linear-gradient(
    135deg,
    rgba(42, 90, 106, 0.12) 0%,
    rgba(42, 90, 106, 0.03) 100%
  );
  border-left: 3px solid var(--ocean);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.rising {
  border-color: var(--foam);
  background: linear-gradient(135deg, #080e14 0%, #0c141a 50%, #080e14 100%);
}

.rising::before {
  content: "△";
  display: block;
  text-align: center;
  color: var(--foam);
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.rising-hl {
  background: linear-gradient(
    135deg,
    rgba(160, 200, 208, 0.08) 0%,
    rgba(160, 200, 208, 0.02) 100%
  );
  border-left: 3px solid var(--foam);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.music {
  border-color: var(--lyre);
  background: linear-gradient(135deg, #0a080e 0%, #0e0c14 50%, #0a080e 100%);
}

.music::before {
  content: "♪";
  display: block;
  text-align: center;
  color: var(--lyre);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.5;
}

.music-hl {
  background: linear-gradient(
    135deg,
    rgba(122, 90, 170, 0.1) 0%,
    rgba(122, 90, 170, 0.02) 100%
  );
  border-left: 3px solid var(--lyre);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.mystery-deep {
  border-color: var(--mystery);
  background: linear-gradient(135deg, #0a060c 0%, #100a14 50%, #0a060c 100%);
}

.mystery-deep::before {
  content: "⊛";
  display: block;
  text-align: center;
  color: var(--mystery);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.mystery-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 42, 90, 0.12) 0%,
    rgba(74, 42, 90, 0.03) 100%
  );
  border-left: 3px solid var(--mystery);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.nature-song {
  border-color: var(--forest);
  background: linear-gradient(135deg, #080a06 0%, #0c100a 50%, #080a06 100%);
}

.nature-song::before {
  content: "🌿";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.nature-hl {
  background: linear-gradient(
    135deg,
    rgba(58, 90, 42, 0.1) 0%,
    rgba(58, 90, 42, 0.02) 100%
  );
  border-left: 3px solid var(--forest);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.hero-aspect {
  border-left-width: 3px;
}

.step.nordic {
  border-left-color: #4a7a8a;
}

.nordic .hero-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 122, 138, 0.1) 0%,
    rgba(74, 122, 138, 0.02) 100%
  );
  border-left: 3px solid #4a7a8a;
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.vedic {
  border-left-color: #8a6a3a;
}

.vedic .hero-hl {
  background: linear-gradient(
    135deg,
    rgba(138, 106, 58, 0.1) 0%,
    rgba(138, 106, 58, 0.02) 100%
  );
  border-left: 3px solid #8a6a3a;
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.harvest {
  border-color: var(--harvest);
  background: linear-gradient(135deg, #0a0c06 0%, #10120a 50%, #0a0c06 100%);
}

.harvest::before {
  content: "𓆗";
  display: block;
  text-align: center;
  color: var(--harvest);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.harvest-hl {
  background: linear-gradient(
    135deg,
    rgba(138, 122, 42, 0.1) 0%,
    rgba(138, 122, 42, 0.02) 100%
  );
  border-left: 3px solid var(--harvest);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.serpent {
  border-color: var(--serpent);
  background: linear-gradient(135deg, #060a06 0%, #0a100a 50%, #060a06 100%);
}

.serpent::before {
  content: "🐍";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.serpent-hl {
  background: linear-gradient(
    135deg,
    rgba(42, 106, 58, 0.12) 0%,
    rgba(42, 106, 58, 0.03) 100%
  );
  border-left: 3px solid var(--serpent);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.vulture {
  border-color: var(--vulture);
  background: linear-gradient(135deg, #0a0806 0%, #100e0a 50%, #0a0806 100%);
}

.vulture-hl {
  background: linear-gradient(
    135deg,
    rgba(106, 90, 58, 0.1) 0%,
    rgba(106, 90, 58, 0.02) 100%
  );
  border-left: 3px solid var(--vulture);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.nile {
  border-color: var(--nile);
  background: linear-gradient(135deg, #060a08 0%, #0a100c 50%, #060a08 100%);
}

.nile-hl {
  background: linear-gradient(
    135deg,
    rgba(42, 90, 74, 0.1) 0%,
    rgba(42, 90, 74, 0.02) 100%
  );
  border-left: 3px solid var(--nile);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.dead-realm {
  border-color: var(--dead);
  background: linear-gradient(135deg, #08060a 0%, #0c0a10 50%, #08060a 100%);
}

.dead-realm::before {
  content: "𓋹";
  display: block;
  text-align: center;
  color: var(--dead);
  font-size: 16px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.dead-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 58, 90, 0.1) 0%,
    rgba(74, 58, 90, 0.02) 100%
  );
  border-left: 3px solid var(--dead);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.grove {
  border-color: var(--forest);
  background: linear-gradient(135deg, #080c06 0%, #0c120a 50%, #080c06 100%);
}

.grove::before {
  content: "🌿";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.grove-hl {
  background: linear-gradient(
    135deg,
    rgba(58, 90, 42, 0.12) 0%,
    rgba(58, 90, 42, 0.03) 100%
  );
  border-left: 3px solid var(--forest);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

.step.earth-deep {
  border-color: var(--earth);
  background: linear-gradient(135deg, #0a0806 0%, #100c08 50%, #0a0806 100%);
}

.earth-deep::before {
  content: "⛰";
  display: block;
  text-align: center;
  font-size: 14px;
  margin-bottom: 14px;
  opacity: 0.3;
}

.earth-hl {
  background: linear-gradient(
    135deg,
    rgba(74, 58, 42, 0.12) 0%,
    rgba(74, 58, 42, 0.03) 100%
  );
  border-left: 3px solid var(--earth);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 4px 4px 0;
}

/* Composer specific UI helpers */
.composer-block-preview {
  transition: all 0.3s ease;
}

/* SVG Gradients via Mask for Rendered output */
.rune-svg-rendered {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--accent-main) 0%,
    var(--accent-dark) 100%
  );
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

/* Ending & Final Steps */
.ending-box {
  text-align: center;
  padding: 20px;
}

.ending-box .hail {
  font-family: "Cinzel", serif;
  font-size: 1.5em;
  color: var(--accent-main);
  font-weight: 700;
  letter-spacing: 3px;
}

.final-step {
  text-align: center;
  padding: 40px 20px;
  border-top: 1px solid var(--border-muted);
  margin-top: 40px;
}

.final-step p {
  font-size: 0.925em;
}

.final-step h2 {
  font-family: "Cinzel", serif;
  color: var(--accent-main);
  font-size: 1.2em;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.ritual-notes {
  background: var(--bg-block);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 30px;
  margin-top: 30px;
  font-size: 0.9em;
  color: var(--accent-muted);
  text-align: left;
}

.ritual-notes h2 {
  font-family: "Cinzel", serif;
  color: var(--accent-main);
  font-size: 1em;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.focus-instruction {
  display: block;
  text-align: center;
  font-style: italic;
  color: var(--accent-muted);
  margin-top: 12px;
  font-size: 0.9em;
}

/* Insert Row Styling */
.insert-row {
  margin: 12px 0;
}

.insert-cell {
  position: relative;
}

.insert-divider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.insert-divider-wrapper:hover,
.insert-divider-wrapper:focus-within {
  opacity: 1;
}

.insert-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed var(--accent-dark);
  z-index: 1;
}

.insert-btn {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dash-bg, #131025);
  border: 1px dashed var(--accent-dark);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.insert-btn:hover {
  background: rgba(201, 168, 76, 0.1);
  border-style: solid;
}

.insert-actions {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dash-bg, #181430);
  border: 1px solid var(--accent-dark);
  padding: 8px;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-top: 8px;
}

.insert-action-btn {
  background: transparent;
  border: 1px dashed rgba(201, 168, 76, 0.3);
  color: var(--text-block);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.insert-action-btn:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--accent-dark);
  color: #fff;
}

.label-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: all 0.2s;
}

.label-toggle-btn.remove {
  color: #cc5555;
}

.label-toggle-btn.remove:hover {
  background: rgba(204, 85, 85, 0.1);
  color: #cc5555;
}

.label-toggle-btn.add {
  color: #4a9a6a;
}

.label-toggle-btn.add:hover {
  background: rgba(74, 154, 106, 0.1);
  color: #5aca7a;
}

/* Sigil Modal */
.sigil-preview-icon:hover {
  opacity: 1 !important;
}
.sigil-modal-scrim {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}
.sigil-modal-scrim.is-fullscreen {
  background: rgba(0, 0, 0, 1);
}
.sigil-modal-scrim.is-fullscreen .sigil-modal-content {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.sigil-modal-content {
  width: 80vmin;
  height: 80vmin;
  max-width: 600px;
  max-height: 600px;
  background: var(--bg-page);
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.sigil-modal-icon {
  width: 100%;
  height: 100%;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color 0.3s ease;
}
.sm-btn {
  position: absolute;
  top: 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  transition: all 0.2s ease;
}
.sm-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}
.sm-close { right: 20px; font-weight: bold; }
.sm-fullscreen { left: 20px; }

.sigil-toolbar {
  position: absolute;
  bottom: 30px;
  display: flex;
  gap: 15px;
}
.sigil-toolbar button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sigil-toolbar button:hover {
  background: rgba(255,255,255,0.3);
}
.sigil-toolbar button.active {
  background: rgba(255,255,255,0.5);
  border-color: #fff;
}