.ab-root {
  --notch: 10px;
  --hatch-pitch: 7px;
  --line: rgba(255, 255, 255, 0.22);
  --line-soft: rgba(255, 255, 255, 0.1);
}

.ab-cut {
  clip-path: polygon(
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%,
    0 var(--notch)
  );
}

.ab-hatch {
  background-image: repeating-linear-gradient(
    135deg,
    var(--line) 0 1px,
    transparent 1px var(--hatch-pitch)
  );
}

.ab-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.5;
}

.ab-cross::before,
.ab-cross::after {
  content: '';
  position: absolute;
  background: var(--instr-soft);
}

.ab-cross::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  translate: -50% 0;
}

.ab-cross::after {
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  translate: 0 -50%;
}

.ab-cross-1 { top: calc(18 * var(--vh, 1vh)); left: calc(var(--gutter) + var(--nav-w) - 34px); }
.ab-cross-2 { top: calc(18 * var(--vh, 1vh)); right: calc(var(--gutter) + var(--rail-w) - 34px); }
.ab-cross-3 { bottom: calc(18 * var(--vh, 1vh)); left: calc(var(--gutter) + var(--nav-w) - 34px); }
.ab-cross-4 { bottom: calc(18 * var(--vh, 1vh)); right: calc(var(--gutter) + var(--rail-w) - 34px); }

.ab-chapter-index {
  grid-row: 1 / 3;
  align-self: start;
  padding: 5px 9px 4px;
  background: var(--instr);
  color: #05090f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  opacity: calc(0.5 + var(--hud) * 0.5);
  transform: skewX(-14deg) translateY(-0.1em);
}

.ab-chapter-index > span {
  display: block;
  transform: skewX(14deg);
}

.ab-chapter-tag {
  position: relative;
  padding-left: 16px;
}

.ab-chapter-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  translate: 0 -50%;
  background: var(--instr);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ab-chapter-rule {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  opacity: var(--hud);
  transition: opacity 700ms var(--ease-standard);
}

.ab-chapter-rule i {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, var(--line), transparent 78%);
}

.ab-chapter-rule b {
  width: 74px;
  height: 9px;
  opacity: 0.55;
}

.ab-readout {
  padding: 7px 14px 6px;
  border: 1px solid var(--instr-faint);
  background: rgba(4, 9, 19, 0.5);
  backdrop-filter: var(--blur-sm);
}

.ab-readout::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--instr);
  opacity: 0.65;
}

.ab-rail-line::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-soft) 0 1px,
    transparent 1px 11px
  );
}

.ab-panel-close,
.ab-panel-data li,
.ab-exits a {
  --notch: 7px;
  clip-path: polygon(
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%,
    0 var(--notch)
  );
}

.ab-exits a {
  padding: 9px 18px 8px 16px;
  border: 1px solid var(--instr-faint);
  background: rgba(4, 9, 19, 0.42);
  transition: border-color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}

.ab-exits a::after {
  display: none;
}

.ab-exits a:hover {
  border-color: var(--edge);
  background: rgba(140, 186, 250, 0.12);
  color: var(--ink);
}

.ab-field-hint {
  padding: 7px 16px 6px;
  border: 1px solid var(--instr-faint);
  background: rgba(4, 9, 19, 0.226);
}

@media (max-width: 860px) {
  .ab-cross {
    display: none;
  }
}

.ab-panel::before {
  content: '';
  position: absolute;
  left: clamp(14px, calc(2 * var(--vw, 1vw)), 26px);
  top: clamp(26px, calc(5 * var(--vh, 1vh)), 60px);
  bottom: clamp(26px, calc(5 * var(--vh, 1vh)), 60px);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 14%, var(--line) 86%, transparent);
  opacity: 0.55;
}

.ab-panel-head::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -14px;
  width: 42%;
  height: 1px;
  background: linear-gradient(to left, var(--line), transparent);
}

.ab-panel-head {
  position: relative;
}