.cdli-ruta-ctx {
  --cdli-ctx-bg: rgba(30, 30, 30, 0.7);
  --cdli-ctx-ink: #f3f3f3;
  --cdli-ctx-muted: #c2c2c2;
  --cdli-ctx-line: rgba(200, 200, 200, 0.75);
  --cdli-ctx-accent: #ffffff;
  --cdli-ctx-handle: #1b1b1b;
  --cdli-ctx-highlight: rgba(196, 196, 196, 0.5);
  --cdli-ctx-ox: 4%;
  --cdli-ctx-oy: 4%;
  --cdli-ctx-width: 22rem;
  --cdli-ctx-heading-font: var(--cdli-mono);
  --cdli-ctx-body-font: var(--cdli-mono);
  --cdli-ctx-heading-size: 0.9rem;
  --cdli-ctx-body-size: 0.75rem;
  position: static;
  z-index: auto;
  pointer-events: none;
}

.cdli-ruta-ctx__edit {
  min-height: 6rem;
}

body > .cdli-ruta-ctx {
  position: static;
}

.cdli-ruta-ctx__window {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(var(--cdli-ctx-width), calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: visible;
  color: var(--cdli-ctx-ink);
  pointer-events: auto;
  isolation: isolate;
  border: 1px solid var(--cdli-ctx-line);
  border-radius: 5px;
  background: var(--cdli-ctx-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: none;
  font-family: var(--cdli-ctx-body-font);
  font-size: var(--cdli-ctx-body-size);
  text-transform: uppercase;
}

.cdli-ruta-ctx--top-left .cdli-ruta-ctx__window {
  top: var(--cdli-ctx-oy);
  left: var(--cdli-ctx-ox);
}

.cdli-ruta-ctx--top-center .cdli-ruta-ctx__window {
  top: var(--cdli-ctx-oy);
  left: 50%;
  transform: translateX(-50%);
}

.cdli-ruta-ctx--top-right .cdli-ruta-ctx__window {
  top: var(--cdli-ctx-oy);
  right: var(--cdli-ctx-ox);
}

.cdli-ruta-ctx--middle-left .cdli-ruta-ctx__window {
  top: 50%;
  left: var(--cdli-ctx-ox);
  transform: translateY(-50%);
}

.cdli-ruta-ctx--middle-center .cdli-ruta-ctx__window {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cdli-ruta-ctx--middle-right .cdli-ruta-ctx__window {
  top: 50%;
  right: var(--cdli-ctx-ox);
  transform: translateY(-50%);
}

.cdli-ruta-ctx--bottom-left .cdli-ruta-ctx__window {
  bottom: var(--cdli-ctx-oy);
  left: var(--cdli-ctx-ox);
}

.cdli-ruta-ctx--bottom-center .cdli-ruta-ctx__window {
  bottom: var(--cdli-ctx-oy);
  left: 50%;
  transform: translateX(-50%);
}

.cdli-ruta-ctx--bottom-right .cdli-ruta-ctx__window {
  bottom: var(--cdli-ctx-oy);
  right: var(--cdli-ctx-ox);
}

.cdli-ruta-ctx__window.is-free {
  right: auto;
  bottom: auto;
  transform: none;
}

html.ccm-toolbar-visible .cdli-ruta-ctx--top-left .cdli-ruta-ctx__window,
html.ccm-toolbar-visible .cdli-ruta-ctx--top-center .cdli-ruta-ctx__window,
html.ccm-toolbar-visible .cdli-ruta-ctx--top-right .cdli-ruta-ctx__window {
  top: calc(var(--ccm-toolbar-height, 48px) + var(--cdli-ctx-oy));
}

.cdli-ruta-ctx.is-closed {
  display: none;
}

.cdli-ruta-ctx__window.is-shifting {
  transition: left 0.22s ease, top 0.22s ease;
}

.cdli-ruta-ctx__header,
.cdli-ruta-ctx__logo-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-height: 1.75rem;
  padding: 0.15rem 0.15rem 0.15rem 0.5rem;
  /*padding: 0.45rem 0.55rem 0.45rem 0.85rem;*/
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--cdli-ctx-handle);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.cdli-ruta-ctx.is-dragging .cdli-ruta-ctx__header,
.cdli-ruta-ctx.is-dragging .cdli-ruta-ctx__logo-bar {
  cursor: grabbing;
}

.cdli-ruta-ctx--logo .cdli-ruta-ctx__logo-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  opacity: 0;
}

.cdli-ruta-ctx--logo .cdli-ruta-ctx__window:hover .cdli-ruta-ctx__logo-bar,
.cdli-ruta-ctx--logo .cdli-ruta-ctx__window:focus-within .cdli-ruta-ctx__logo-bar {
  opacity: 1;
}

.cdli-ruta-ctx__grip {
  width: 14px;
  height: 10px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 4px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 8px / 100% 2px no-repeat;
  color: #9a9a94;
  opacity: 0.7;
}

.cdli-ruta-ctx__title {
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  color: var(--cdli-ctx-accent);
  font-family: var(--cdli-ctx-heading-font);
  font-size: var(--cdli-ctx-heading-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cdli-ruta-ctx__handle {
  flex: 0 0 auto;
  color: var(--cdli-ctx-accent);
  font-size: 0.95rem;
  letter-spacing: -0.12em;
  line-height: 1;
  cursor: grab;
}

.cdli-ruta-ctx__actions {
  display: flex;
  gap: 0.28rem;
  margin-left: 0.15rem;
}

.cdli-ruta-ctx__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.cdli-ruta-ctx__btn:hover,
.cdli-ruta-ctx__btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.cdli-ruta-ctx__body {
  overflow: auto;
  padding: 0.94rem;
  border-radius: 0 0 5px 5px;
}

.cdli-ruta-ctx__window.is-minimized .cdli-ruta-ctx__body,
.cdli-ruta-ctx__window.is-minimized .cdli-ruta-ctx__footer,
.cdli-ruta-ctx__window.is-minimized .cdli-ruta-ctx__resizers {
  display: none;
}

.cdli-ruta-ctx--logo .cdli-ruta-ctx__window,
.cdli-ruta-ctx--compass .cdli-ruta-ctx__window {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: grab;
  overflow: visible;
  max-height: none;
}

.cdli-ruta-ctx--compass .cdli-ruta-ctx__body,
.cdli-ruta-ctx--logo .cdli-ruta-ctx__body {
  padding: 0;
  overflow: visible;
  background: transparent;
}

.cdli-ruta-ctx--compass .cdli-ruta-ctx__footer,
.cdli-ruta-ctx--logo .cdli-ruta-ctx__footer {
  display: none !important;
}

.cdli-ruta-ctx--compass .cdli-ruta-ctx__logo-bar,
.cdli-ruta-ctx--logo .cdli-ruta-ctx__logo-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  opacity: 0;
}

.cdli-ruta-ctx--compass .cdli-ruta-ctx__window:hover .cdli-ruta-ctx__logo-bar,
.cdli-ruta-ctx--compass .cdli-ruta-ctx__window:focus-within .cdli-ruta-ctx__logo-bar,
.cdli-ruta-ctx--logo .cdli-ruta-ctx__window:hover .cdli-ruta-ctx__logo-bar,
.cdli-ruta-ctx--logo .cdli-ruta-ctx__window:focus-within .cdli-ruta-ctx__logo-bar {
  opacity: 1;
}

.cdli-ruta-ctx__ghost-coords {
  margin-right: 0.35rem;
  color: #1b1b1b;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: none;
  text-shadow: 0 0 4px #fff, 0 0 8px #fff;
}

.cdli-ruta-ctx__copy {
  color: var(--cdli-ctx-ink);
  font-family: var(--cdli-ctx-body-font);
  font-size: var(--cdli-ctx-body-size);
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: none;
}

.cdli-ruta-ctx__copy > *:first-child {
  margin-top: 0;
}

.cdli-ruta-ctx__copy > *:last-child {
  margin-bottom: 0;
}

.cdli-ruta-ctx__copy a {
  color: inherit;
}

.cdli-ruta-ctx--book .cdli-ruta-ctx__window:not(.is-minimized) {
  height: min(28rem, 72vh);
  min-height: 16rem;
}

.cdli-ruta-ctx--book .cdli-ruta-ctx__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}

.cdli-ruta-ctx__book {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 16rem;
}

.cdli-ruta-ctx__book-embed {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 16rem;
  height: 100%;
  border: 0;
  background: transparent;
}

.cdli-ruta-ctx__book .cdli-ruta-ctx__copy {
  flex: 0 0 auto;
  padding: 0.6rem 0.85rem;
}

.cdli-ruta-ctx__logo {
  display: block;
  width: 100%;
  height: auto;
}

.cdli-ruta-ctx__phrase {
  margin: 0;
  min-height: 4.5rem;
  font-family: var(--cdli-ctx-body-font);
  font-size: var(--cdli-ctx-body-size);
  line-height: 1.4;
  text-transform: none;
}

.cdli-ruta-ctx__compass {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #1b1b1b;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.cdli-ruta-ctx__compass svg {
  width: 100%;
  max-width: none;
  height: auto;
}

.cdli-ruta-ctx__compass text {
  fill: #171717;
  font-family: var(--cdli-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cdli-ruta-ctx__compass [data-cdli-ctx-needle] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.08s linear;
}

.cdli-ruta-ctx__mandos {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cdli-ruta-ctx__slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--cdli-ctx-muted);
  font-family: var(--cdli-ctx-body-font);
  font-size: var(--cdli-ctx-body-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cdli-ruta-ctx__slider output {
  color: var(--cdli-ctx-ink);
}

.cdli-ruta-ctx__slider input {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  margin: 0.45rem 0 0;
  appearance: none;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.cdli-ruta-ctx__slider input::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--cdli-ctx-accent);
  cursor: pointer;
}

.cdli-ruta-ctx__slider input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--cdli-ctx-accent);
  cursor: pointer;
}

.cdli-ruta-ctx__mandos-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.35rem;
}

.cdli-ruta-ctx__mandos-actions button {
  flex: 1;
  min-height: 1.25rem;
  padding: 0.15rem 0;
  border: 1px solid var(--cdli-ctx-line);
  border-radius: 3px;
  background: var(--cdli-ctx-highlight);
  color: var(--cdli-ctx-accent);
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.cdli-ruta-ctx__mandos-actions button:hover,
.cdli-ruta-ctx__mandos-actions button:focus-visible {
  background: var(--cdli-ctx-line);
}

.cdli-ruta-ctx__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  color: var(--cdli-ctx-muted);
  font-family: var(--cdli-ctx-body-font);
  font-size: var(--cdli-ctx-body-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cdli-ruta-ctx__field select {
  width: 100%;
  min-height: 1.8rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--cdli-ctx-line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--cdli-ctx-ink);
  font: inherit;
  text-transform: none;
}

.cdli-ruta-ctx__footer {
  padding: 0.45rem 0.85rem 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #9a9a94;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cdli-ruta-ctx__footer--admin {
  color: #cfcfcf;
  text-transform: none;
  letter-spacing: 0.06em;
}

.cdli-ruta-ctx__resizers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.cdli-ruta-ctx__resize {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}

.cdli-ruta-ctx__resize--n,
.cdli-ruta-ctx__resize--s {
  left: 10px;
  right: 10px;
  height: 14px;
}

.cdli-ruta-ctx__resize--e,
.cdli-ruta-ctx__resize--w {
  top: 10px;
  bottom: 10px;
  width: 14px;
}

.cdli-ruta-ctx__resize--n { top: -7px; cursor: ns-resize; }
.cdli-ruta-ctx__resize--s { bottom: -7px; cursor: ns-resize; }
.cdli-ruta-ctx__resize--e { right: -7px; cursor: ew-resize; }
.cdli-ruta-ctx__resize--w { left: -7px; cursor: ew-resize; }

.cdli-ruta-ctx__resize--ne,
.cdli-ruta-ctx__resize--nw,
.cdli-ruta-ctx__resize--se,
.cdli-ruta-ctx__resize--sw {
  width: 22px;
  height: 22px;
}

.cdli-ruta-ctx__resize--ne { top: -8px; right: -8px; cursor: nesw-resize; }
.cdli-ruta-ctx__resize--nw { top: -8px; left: -8px; cursor: nwse-resize; }
.cdli-ruta-ctx__resize--se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.cdli-ruta-ctx__resize--sw { bottom: -8px; left: -8px; cursor: nesw-resize; }

.cdli-ruta-ctx__resize--se::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #9a9a94;
  border-bottom: 2px solid #9a9a94;
  opacity: 0.75;
}

.cdli-ruta-ctx__window.is-resizing,
.cdli-ruta-ctx.is-dragging .cdli-ruta-ctx__window {
  user-select: none;
}

.cdli-ruta-ctx__phrase {
  position: relative;
}

.cdli-ruta-ctx__phrase.is-fade {
  animation: cdli-ctx-fade 0.55s ease;
}

.cdli-ruta-ctx__phrase.is-rotate {
  animation: cdli-ctx-rotate 0.7s ease;
}

.cdli-ruta-ctx__phrase.is-jitter {
  animation: cdli-ctx-jitter 0.55s steps(4, end);
}

.cdli-ruta-ctx__phrase.is-glitch {
  animation: cdli-ctx-glitch 0.7s steps(2, end);
}

.cdli-ruta-ctx__phrase.is-blink {
  animation: cdli-ctx-blink 0.9s step-end;
}

.cdli-ruta-ctx__phrase.is-wave span {
  display: inline-block;
  animation: cdli-ctx-wave 0.9s ease both;
}

.cdli-ruta-ctx__phrase.is-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.cdli-ruta-ctx__phrase.is-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: cdli-ctx-marquee 9s linear infinite;
}

@keyframes cdli-ctx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cdli-ctx-rotate {
  from { transform: rotateX(-90deg); opacity: 0.2; }
  to { transform: rotateX(0); opacity: 1; }
}

@keyframes cdli-ctx-jitter {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 0); }
}

@keyframes cdli-ctx-glitch {
  0%, 100% { transform: none; text-shadow: none; }
  20% { transform: translate(-2px, 0); text-shadow: 2px 0 #ff4d4d, -2px 0 #4df; }
  40% { transform: translate(2px, 0); text-shadow: -2px 0 #ff4d4d, 2px 0 #4df; }
  60% { clip-path: inset(20% 0 40% 0); }
}

@keyframes cdli-ctx-blink {
  0%, 40%, 80% { opacity: 1; }
  20%, 60% { opacity: 0; }
}

@keyframes cdli-ctx-wave {
  0% { transform: translateY(0.4em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes cdli-ctx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

html.cdli-ruta-ctx-has-page-bg .theme-cdli,
html.cdli-ruta-ctx-has-page-bg div.theme-cdli {
  background: transparent !important;
  background-color: transparent !important;
}

html.cdli-ruta-ctx-has-page-bg .theme-cdli::before {
  display: none;
}

body.cdli-ruta-ctx-bg--1 {
  background-size: 0.693rem 0.693rem !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, rgba(255, 255, 255, 0.9) 1px) !important;
}

body.cdli-ruta-ctx-bg--2 {
  background-color: #ffffff;
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

body.cdli-ruta-ctx-bg--3 {
  background-color: #eaeaea;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, #808080 19px, #808080 20px, transparent 20px, transparent 39px, #808080 39px, #808080 40px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, #808080 19px, #808080 20px, transparent 20px, transparent 39px, #808080 39px, #808080 40px),
    radial-gradient(circle at 20px 20px, #808080 1.6px, transparent 2.1px),
    radial-gradient(circle at 0px 0px, #808080 1.2px, transparent 1.7px),
    radial-gradient(circle at 40px 0px, #808080 1.2px, transparent 1.7px),
    radial-gradient(circle at 0px 40px, #808080 1.2px, transparent 1.7px),
    radial-gradient(circle at 40px 40px, #808080 1.2px, transparent 1.7px);
  background-size: 40px 40px;
}

body.cdli-ruta-ctx-bg--4 {
  background-color: #eaeaea;
  background-image: radial-gradient(#808080 1.5px, transparent 1.5px), radial-gradient(#808080 1.5px, #eaeaea 1.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

body.cdli-ruta-ctx-bg--5 {
  background-color: #eaeaea;
  background-image: linear-gradient(#808080 2px, transparent 2px), linear-gradient(90deg, #808080 2px, transparent 2px), linear-gradient(#808080 1px, transparent 1px), linear-gradient(90deg, #808080 1px, #eaeaea 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

body.cdli-ruta-ctx-bg--6 {
  background-color: #eaeaea;
  background-image:
    linear-gradient(#808080 1px, transparent 1px),
    linear-gradient(90deg, #808080 1px, transparent 1px),
    linear-gradient(#808080 0.5px, transparent 0.5px),
    linear-gradient(90deg, #808080 0.5px, #eaeaea 0.5px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -1px -1px, -1px -1px, -0.5px -0.5px, -0.5px -0.5px;
}

body.cdli-ruta-ctx-bg--7 {
  background-color: #eaeaea;
  background-image: radial-gradient(circle, #808080 0.8px, transparent 0.8px), radial-gradient(circle, #808080 0.8px, transparent 0.8px);
  background-size: 4px 16px, 16px 4px;
  background-position: -2px -8px, -8px -2px;
}

body.cdli-ruta-ctx-bg--8 {
  background-color: #eaeaea;
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 4px, #c0c0c0 4px, #c0c0c0 5px, transparent 5px, transparent 10px);
  background-size: 100% calc(100% * 1);
}

@media (prefers-reduced-motion: reduce) {
  .cdli-ruta-ctx__book img {
    transform: none;
  }

  .cdli-ruta-ctx__window.is-shifting {
    transition: none;
  }

  .cdli-ruta-ctx__phrase.is-fade,
  .cdli-ruta-ctx__phrase.is-rotate,
  .cdli-ruta-ctx__phrase.is-jitter,
  .cdli-ruta-ctx__phrase.is-glitch,
  .cdli-ruta-ctx__phrase.is-blink,
  .cdli-ruta-ctx__phrase.is-wave span,
  .cdli-ruta-ctx__phrase.is-marquee span {
    animation: none;
  }
}