.orn-layer,
.orn-frame-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
  --orn-shift: 0;
  --orn-size: var(--orn-size-m);
}

.orn-inside > .orn-layer {
  --orn-shift: var(--orn-offset);
}

.orn-outside > .orn-layer {
  --orn-shift: calc(var(--orn-offset) * -1);
}

.orn-s > .orn-layer {
  --orn-size: var(--orn-size-s);
}

.orn-m > .orn-layer {
  --orn-size: var(--orn-size-m);
}

.orn-l > .orn-layer {
  --orn-size: var(--orn-size-l);
}

.orn-mark,
.orn-bracket {
  position: absolute;
  width: var(--orn-size);
  height: var(--orn-size);
  overflow: visible;
  color: var(--orn-color);
  pointer-events: none;
}

.orn-mark * {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--orn-stroke);
  stroke-linecap: square;
}

.orn-mark[data-fill="1"] * {
  fill: currentColor;
  stroke: none;
}

.orn-mark[data-at="tl"] {
  top: calc(var(--orn-shift) - var(--orn-size) / 2);
  left: calc(var(--orn-shift) - var(--orn-size) / 2);
}
.orn-mark[data-at="tr"] {
  top: calc(var(--orn-shift) - var(--orn-size) / 2);
  right: calc(var(--orn-shift) - var(--orn-size) / 2);
}
.orn-mark[data-at="bl"] {
  bottom: calc(var(--orn-shift) - var(--orn-size) / 2);
  left: calc(var(--orn-shift) - var(--orn-size) / 2);
}
.orn-mark[data-at="br"] {
  bottom: calc(var(--orn-shift) - var(--orn-size) / 2);
  right: calc(var(--orn-shift) - var(--orn-size) / 2);
}
.orn-mark[data-at="t"] {
  top: calc(var(--orn-shift) - var(--orn-size) / 2);
  left: calc(50% - var(--orn-size) / 2);
}
.orn-mark[data-at="b"] {
  bottom: calc(var(--orn-shift) - var(--orn-size) / 2);
  left: calc(50% - var(--orn-size) / 2);
}
.orn-mark[data-at="l"] {
  left: calc(var(--orn-shift) - var(--orn-size) / 2);
  top: calc(50% - var(--orn-size) / 2);
}
.orn-mark[data-at="r"] {
  right: calc(var(--orn-shift) - var(--orn-size) / 2);
  top: calc(50% - var(--orn-size) / 2);
}

.orn-bracket {
  box-sizing: border-box;
  border-style: solid;
  border-color: currentColor;
  border-width: 0;
}

.orn-bracket[data-at="tl"] {
  top: 0;
  left: 0;
  border-top-width: var(--orn-stroke);
  border-left-width: var(--orn-stroke);
  transform: translate(var(--orn-shift), var(--orn-shift));
}

.orn-bracket[data-at="tr"] {
  top: 0;
  right: 0;
  border-top-width: var(--orn-stroke);
  border-right-width: var(--orn-stroke);
  transform: translate(calc(var(--orn-shift) * -1), var(--orn-shift));
}

.orn-bracket[data-at="bl"] {
  bottom: 0;
  left: 0;
  border-bottom-width: var(--orn-stroke);
  border-left-width: var(--orn-stroke);
  transform: translate(var(--orn-shift), calc(var(--orn-shift) * -1));
}

.orn-bracket[data-at="br"] {
  bottom: 0;
  right: 0;
  border-bottom-width: var(--orn-stroke);
  border-right-width: var(--orn-stroke);
  transform: translate(calc(var(--orn-shift) * -1), calc(var(--orn-shift) * -1));
}

.orn-layer > .orn-ticks-x,
.orn-layer > .orn-ticks-y,
#orn-page-frame > .orn-ticks-x,
#orn-page-frame > .orn-ticks-y {
  position: absolute;
  color: var(--orn-color);
  pointer-events: none;
}

.orn-layer > .orn-ticks-x,
#orn-page-frame > .orn-ticks-x {
  left: 0;
  right: 0;
  height: var(--orn-tick-length);
  background: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px var(--orn-tick-spacing));
}

.orn-layer > .orn-ticks-y,
#orn-page-frame > .orn-ticks-y {
  top: 0;
  bottom: 0;
  width: var(--orn-tick-length);
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px var(--orn-tick-spacing));
}

.orn-layer .orn-ticks-x[data-at="t"] { top: 0; transform: translateY(var(--orn-shift)); }
.orn-layer .orn-ticks-x[data-at="b"] { bottom: 0; transform: translateY(calc(var(--orn-shift) * -1)); }
.orn-layer .orn-ticks-y[data-at="l"] { left: 0; transform: translateX(var(--orn-shift)); }
.orn-layer .orn-ticks-y[data-at="r"] { right: 0; transform: translateX(calc(var(--orn-shift) * -1)); }

.grid {
  position: relative;
  counter-reset: orn;
}

.orn-mark[data-at="radial"],
.orn-radial-item {
  top: calc(50% + sin(calc(360deg * var(--orn-radial-i) / var(--orn-radial-n))) * 50% - var(--orn-size) / 2);
  left: calc(50% + cos(calc(360deg * var(--orn-radial-i) / var(--orn-radial-n))) * 50% - var(--orn-size) / 2);
}

.orn-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 6;
  color: var(--orn-color);
}

.orn-wire,
.orn-wire-fx {
  stroke: currentColor;
  stroke-width: var(--orn-stroke);
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
}

.orn-path[data-line="dashed"] .orn-wire {
  stroke-dasharray: 7 5;
}

.orn-path[data-line="dotted"] .orn-wire {
  stroke-dasharray: 1.5 5;
  stroke-linecap: round;
}

.orn-wire-fx {
  opacity: 0;
  pointer-events: none;
}

.orn-wire-end {
  fill: currentColor;
}

.orn-signal {
  fill: currentColor;
  opacity: 0;
  offset-distance: 0%;
  offset-rotate: 0deg;
}

.orn-path[data-anim="travel"][data-active="1"] .orn-signal {
  opacity: 1;
  animation: orn-travel 1.4s linear infinite;
}

.orn-path[data-anim="travel"][data-trigger="view"][data-active="1"] .orn-signal {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.orn-path[data-anim="dash"][data-line="solid"][data-active="1"] .orn-wire {
  stroke-dasharray: 7 5;
}

.orn-path[data-anim="dash"][data-active="1"] .orn-wire {
  animation: orn-dash 1.2s linear infinite;
}

.orn-path[data-anim="draw"] .orn-wire-fx {
  stroke-dasharray: var(--orn-len, 1);
  stroke-dashoffset: var(--orn-len, 1);
}

.orn-path[data-anim="draw"][data-active="1"] .orn-wire-fx {
  opacity: 1;
  animation: orn-draw 1.1s ease forwards;
}

.orn-path[data-anim="draw"][data-trigger="loop"][data-active="1"] .orn-wire-fx {
  animation: orn-draw 1.4s ease infinite;
}

.orn-path[data-anim="pulse"][data-active="1"] .orn-wire,
.orn-path[data-anim="pulse"][data-active="1"] .orn-wire-end {
  animation: orn-pulse 1.1s ease-in-out infinite;
}

@keyframes orn-travel {
  to {
    offset-distance: 100%;
  }
}

@keyframes orn-dash {
  to {
    stroke-dashoffset: -14;
  }
}

@keyframes orn-draw {
  from {
    stroke-dashoffset: var(--orn-len, 1);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes orn-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orn-path[data-active="1"] .orn-signal,
  .orn-path[data-active="1"] .orn-wire,
  .orn-path[data-active="1"] .orn-wire-fx,
  .orn-path[data-active="1"] .orn-wire-end {
    animation: none !important;
  }
  .orn-path[data-anim="travel"][data-active="1"] .orn-signal {
    opacity: 1;
    offset-distance: 100%;
  }
  .orn-path[data-anim="draw"][data-active="1"] .orn-wire-fx {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

.orn-label {
  position: absolute;
  color: var(--orn-color);
  font-size: calc(var(--orn-size) * 0.85);
  line-height: 1.15;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  counter-increment: orn;
  white-space: nowrap;
}

.orn-label[data-orn-text] {
  white-space: normal;
  max-width: 14em;
}

.orn-label-text {
  display: block;
  margin-top: 0.3em;
  opacity: 0.85;
  font-size: 0.92em;
  letter-spacing: 0;
}

.orn-label[data-at="tl"] { top: 0; left: 0; transform: translate(calc(-100% - 6px), calc(-100% - 6px)); }
.orn-label[data-at="tr"] { top: 0; right: 0; transform: translate(calc(100% + 6px), calc(-100% - 6px)); }
.orn-label[data-at="bl"] { bottom: 0; left: 0; transform: translate(calc(-100% - 6px), calc(100% + 6px)); }
.orn-label[data-at="br"] { right: 0; bottom: 0; transform: translate(calc(100% + 6px), calc(100% + 6px)); }

#orn-page-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  color: var(--orn-color);
}

.orn-frame-box {
  inset: var(--orn-frame-inset);
}

.orn-frame-line {
  position: absolute;
  inset: 0;
  border: var(--orn-stroke) solid var(--orn-color);
}

.orn-frame-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--orn-cols), minmax(0, 1fr));
  column-gap: var(--orn-gutter);
}

.orn-frame-grid span {
  border-left: 1px solid var(--orn-color);
  opacity: 0.35;
}

.orn-frame-grid span:last-child {
  border-right: 1px solid var(--orn-color);
}

#orn-page-frame > .orn-ticks-x[data-at="t"] { top: 0; }
#orn-page-frame > .orn-ticks-x[data-at="b"] { bottom: 0; }
#orn-page-frame > .orn-ticks-y[data-at="l"] { left: 0; }
#orn-page-frame > .orn-ticks-y[data-at="r"] { right: 0; }

.orn-helper {
  margin-top: 12px;
  padding: 10px 12px 12px;
  border: 1px solid #ddd;
}

.orn-helper legend {
  font-weight: 600;
  padding: 0 4px;
}

.orn-helper-row,
.orn-field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 6px 0;
}

.orn-helper select {
  margin-left: 4px;
}