.tx {
  --mow-a: var(--page-ground);
  --mow-b: #112818;
  --mow-h: 128px;
  --chalk-line: color-mix(in oklab, var(--cream), transparent 87%);
  --chalk-mark: color-mix(in oklab, var(--cream), transparent 68%);
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(12px, 2.8vw, 48px);
  --gap: clamp(28px, 4.4vw, 72px);

  --bk-out: clamp(7px, 0.9vw, 12px);
  --bk-arm: clamp(16px, 1.8vw, 26px);

  --box-w: min(62vw, 620px);
  --box-h: clamp(72px, 9vw, 132px);
  --arc: clamp(44px, 5vw, 76px);
}

html:has(body.tx) { background: var(--mow-a); scrollbar-color: var(--pale) var(--mow-a); }

body.tx {
  background-color: var(--mow-a);

  background-image: none;
}

.tx .sec--deep { background: transparent; }

.tx .sec:not(.sec--deep) {
  margin-inline: var(--fg);
  border-radius: var(--panel-r);
}
.tx .sec:not(.sec--deep) + .sec:not(.sec--deep) { margin-top: var(--gap); }

.tx .sec:not(.sec--deep) .plate { border-radius: 12px; }

.tx .sec:not(.sec--deep)::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--bk-out));
  z-index: 0;
  pointer-events: none;
  --c: linear-gradient(var(--chalk-mark) 0 0);
  background:
    var(--c) left top / var(--bk-arm) 2px no-repeat,
    var(--c) left top / 2px var(--bk-arm) no-repeat,
    var(--c) right top / var(--bk-arm) 2px no-repeat,
    var(--c) right top / 2px var(--bk-arm) no-repeat,
    var(--c) left bottom / var(--bk-arm) 2px no-repeat,
    var(--c) left bottom / 2px var(--bk-arm) no-repeat,
    var(--c) right bottom / var(--bk-arm) 2px no-repeat,
    var(--c) right bottom / 2px var(--bk-arm) no-repeat;
}
.tx .sec:not(.sec--deep) > * { position: relative; z-index: 1; }

.tx .closing {
  margin-top: var(--gap);
  padding-top: calc(var(--box-h) + var(--arc) + clamp(28px, 3.4vw, 52px));
  background-image: linear-gradient(var(--chalk-line) 0 0);
  background-size: 100% 2px;
  background-position: top;
  background-repeat: no-repeat;
}
.tx .closing::before,
.tx .closing::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}
.tx .closing::before {
  top: 0;
  width: var(--box-w);
  height: var(--box-h);
  border: 2px solid var(--chalk-line);
  border-top: 0;
}
.tx .closing::after {
  top: var(--box-h);
  width: calc(2 * var(--arc));
  height: var(--arc);
  border: 2px solid var(--chalk-line);
  border-top: 0;
  border-radius: 0 0 var(--arc) var(--arc);
}
.tx .closing .sec__in { position: relative; z-index: 1; }

.tx .foot {
  position: relative;
  background: transparent;
  border-top: 0;
}
.tx .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--fg);
  right: var(--fg);
  height: 2px;
  background: var(--chalk-line);
}

@media (max-width: 600px) {
  .tx { --mow-h: 96px; --panel-r: 16px; --box-w: 72vw; }
}