.ritual { position: relative; overflow: hidden; display: block; }
.ritual .r-inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.ritual .r-sub { color: var(--muted); font-style: italic; margin: 0 0 28px; font-size: clamp(15px, 2.2vw, 17px); }

.ritual .r-rail { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; justify-content: center; margin: 0 0 28px; }
.ritual .r-stage {
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; letter-spacing: .06em;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--shadow);
  padding: 5px 10px; border-radius: 2px; white-space: nowrap;
  transition: color .35s, border-color .35s, background .35s, box-shadow .35s;
}
.ritual .r-stage.lit { color: var(--bg); background: var(--gold); border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(197,162,83,.35); }
.ritual .r-stage.done { color: var(--gold); background: var(--panel-2); border-color: var(--gold); }
.ritual .r-arrow { color: var(--shadow); font-size: 12px; transition: color .35s; }
.ritual .r-arrow.lit { color: var(--gold); }

.ritual .r-belt { position: relative; min-height: 320px; transition: min-height .4s cubic-bezier(.5,0,.25,1); }
.ritual .r-belt-panel {
  position: absolute; top: 0;
  background: var(--panel); border: 1px solid var(--shadow); padding: 18px 18px 20px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: left .45s cubic-bezier(.5,0,.25,1), top .45s cubic-bezier(.5,0,.25,1), width .45s cubic-bezier(.5,0,.25,1), opacity .35s, transform .45s cubic-bezier(.5,0,.25,1), filter .35s;
  overflow: auto;
}
/* upcoming panels recede up-and-right (vanishing-line depth); negative top is intentional */
.ritual .pos-big    { left: 2%;   top: 40px;  width: 62%; opacity: 1; transform: none; z-index: 3; box-shadow: 0 18px 46px rgba(0,0,0,.5); }
.ritual .pos-small  { left: 52%;  top: 0;     width: 46%; opacity: .42; transform: scale(.84); transform-origin: top right; z-index: 1; filter: saturate(.6) brightness(.85); }
.ritual .pos-out    { left: -68%; top: 60px;  width: 62%; opacity: 0; transform: scale(1.02); z-index: 0; pointer-events: none; }
.ritual .pos-wait   { left: 86%;  top: -28px; width: 40%; opacity: 0; transform: scale(.7); transform-origin: top right; z-index: 0; pointer-events: none; }
.ritual .pos-center { left: 14%;  top: 24px;  width: 72%; opacity: 1; transform: none; z-index: 3; box-shadow: 0 18px 46px rgba(0,0,0,.5); }
.ritual .r-panel { background: var(--panel); border: 1px solid var(--shadow); padding: 18px; }
.ritual .r-view-title {
  font-family: "Cinzel Decorative","Cardo",serif; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.ritual .r-view-body { font-family: "JetBrains Mono", Consolas, monospace; }

.ritual pre { margin: 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; line-height: 1.42; white-space: pre; overflow-x: auto; }
.ritual pre code { background: none; border: 0; padding: 0; box-shadow: none; white-space: pre; color: inherit; font-size: inherit; }
.ritual .r-line { display: block; position: relative; border-radius: 2px; padding: 0 6px; margin: 0 -6px; transition: background .25s, text-shadow .25s, padding-left .35s cubic-bezier(.5,0,.3,1), opacity .28s, transform .28s; }

.ritual .r-node, .ritual .r-call { transition: border-color .3s, box-shadow .3s, background .3s, opacity .35s, transform .35s; }
.ritual .r-pending { opacity: 0; transform: translateY(5px); pointer-events: none; }

/* correspondence highlights — same gold pulse on whichever side is active */
.ritual .r-cast .r-line.reading,
.ritual .r-trace .r-line.emit { background: rgba(197,162,83,.16); box-shadow: inset 2px 0 0 var(--gold); text-shadow: 0 0 10px rgba(224,191,109,.5); }
.ritual .r-trace .r-line[data-indent="1"].indented { padding-left: 2em; }

/* syntax tint */
.ritual .k, .ritual .kw { color: var(--rubric); }
.ritual .n { color: var(--gold-bright); }
.ritual .s { color: #9fb38a; }
.ritual .p { color: var(--muted); }
.ritual .num { color: #d8b86a; }
.ritual .fn { color: #c9b070; }
.ritual .ench { color: #8f7fb0; }

/* DsTree node graph */
.ritual .r-tree { font-size: 12.5px; }
.ritual .r-node {
  display: inline-flex; align-items: center; gap: 7px; margin: 3px 0;
  padding: 4px 9px; border: 1px solid var(--shadow); border-radius: 3px;
  background: var(--panel-2); color: var(--fg);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.ritual .r-node.visiting { border-color: var(--gold-bright); background: rgba(197,162,83,.12); box-shadow: 0 0 14px rgba(224,191,109,.34); }
.ritual .r-node .badge { font-size: 10px; letter-spacing: .05em; padding: 1px 6px; border-radius: 2px; background: var(--shadow); color: var(--gold-bright); }
.ritual .r-node.v-iter .badge, .ritual .r-node.v-if .badge { background: #3a1f18; color: #e0a18d; }
.ritual .r-node .field-badge { font-size: 9.5px; padding: 1px 5px; border-radius: 2px; background: #2a2340; color: #b3a3d6; }
.ritual .r-children { margin-left: 20px; border-left: 1px solid var(--shadow); padding-left: 12px; }

/* inscribe_* call list */
.ritual .r-calls { font-size: 13px; line-height: 1.5; }
.ritual .r-call {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 3px 0;
  border: 1px solid var(--shadow); border-radius: 3px; background: var(--panel-2);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.ritual .r-call .arrow { color: var(--shadow); }
.ritual .r-call .sig { color: var(--fg); }
.ritual .r-call.firing { border-color: var(--gold-bright); background: rgba(197,162,83,.12); box-shadow: 0 0 14px rgba(224,191,109,.34); }
.ritual .r-call.firing .arrow { color: var(--gold-bright); }

/* drop sink — enchants vanish, shown as a labeled empty target */
.ritual .r-sink {
  margin-top: 14px; padding: 8px 12px; font-size: 12px; color: #b3a3d6;
  border: 1px dashed #4a3f63; border-radius: 3px; background: rgba(42,35,64,.25);
  font-family: "JetBrains Mono", monospace;
}

/* seal */
.ritual .r-seal { margin: 26px auto 0; text-align: center; }
.ritual .r-seal .badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: .06em;
  color: var(--bg); background: var(--gold); border: 1px solid var(--gold-bright);
  padding: 10px 22px; border-radius: 3px; opacity: 0; transform: scale(.92);
  transition: opacity .5s, transform .5s, box-shadow .5s;
}
.ritual .r-seal.sealed .badge { opacity: 1; transform: none; box-shadow: 0 0 26px rgba(224,191,109,.45); }
.ritual .r-seal .glyph { font-family: "Cinzel Decorative", serif; font-weight: 700; }

.ritual .r-motes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ritual .mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0; animation: r-mote 7s ease-in-out infinite; }
@keyframes r-flow { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes r-mote { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 20% { opacity: .5; } 80% { opacity: .3; } 100% { opacity: 0; transform: translateY(-40px) scale(1); } }

@media (max-width: 700px) {
  .ritual .r-belt { min-height: 760px; }
  .ritual .pos-big { left: 0; width: 100%; min-height: 420px; max-height: 720px; }
  .ritual .pos-small { left: 8%; width: 84%; opacity: 0; transform: scale(.88); }
  .ritual .pos-out { left: -100%; width: 100%; }
  .ritual .pos-wait { left: 100%; width: 84%; }
}
@media (max-width: 480px) {
  .ritual pre, .ritual .r-tree, .ritual .r-calls { font-size: 12px; }
  .ritual .r-rail { gap: 6px 4px; }
  .ritual .r-stage { font-size: 10px; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ritual .r-belt-panel { transition: none; }
  .ritual .mote { animation: none; }
  .ritual .r-seal .badge { opacity: 1; transform: none; }
}