.under-construction-cathedral {
      --bg: #ca2f2a;
      --fg: #191919;
      --countdown-red: #a92824;
      --pixel: 4px;
    }

.under-construction-cathedral {
      width: 100%;
      padding: 0;
      color: var(--fg);
      font: inherit;
      line-height: 1.55;
    }

    .under-construction-cathedral * {
      box-sizing: border-box;
    }


    .under-construction-cathedral button {
      appearance: none;
      border: 2px solid currentColor;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      min-height: 30px;
      padding: 5px 8px;
      text-transform: uppercase;
    }

    .under-construction-cathedral input {
      border: 2px solid currentColor;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      min-height: 30px;
      padding: 4px 6px;
    }


    .project-dates,
    .blueprint,
    .placed-layer,
    .construction-field {
      width: 100%;
      font: inherit;
      letter-spacing: 0;
    }

    .project-dates {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: grid;
      place-items: center;
      margin: 0;
      color: var(--countdown-red);
      font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
      font-size: clamp(16px, 4vw, 52px);
      font-weight: 800;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }

    .construction-field {
      aspect-ratio: 4 / 1;
      max-height: min(25vw, calc(100vh - 190px));
      min-height: 0;
      position: relative;
      overflow: hidden;
    }

    .blueprint {
      position: relative;
      z-index: 1;
      color: transparent;
      margin: 0;
      overflow-wrap: anywhere;
      pointer-events: none;
      user-select: none;
    }

    .blueprint-char {
      white-space: pre;
    }

    .placed-layer {
      position: absolute;
      z-index: 2;
      inset: 0 auto auto 0;
      min-height: 180px;
      pointer-events: none;
    }

    .placed-char {
      position: absolute;
      display: inline-block;
      font: inherit;
      line-height: 1;
    }

    .placed-char.is-removing {
      animation: remove-char 320ms steps(2, end) forwards;
    }

    @keyframes place {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes remove-char {
      0% {
        opacity: 1;
      }

      45% {
        opacity: 0;
      }

      65% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    .worker,
    .visitor,
    .saboteur {
      --x: 0px;
      --y: 0px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 5;
      width: calc(var(--pixel) * 12);
      height: calc(var(--pixel) * 12);
      pointer-events: none;
      transform: translate(var(--x), var(--y));
      transform-origin: 50% 100%;
      transition: transform 3600ms steps(36, end), opacity 140ms steps(2, end);
    }

    .rain {
      position: absolute;
      inset: 0;
      z-index: 7;
      display: none;
      overflow: hidden;
      pointer-events: none;
    }

    .rain.is-active {
      display: block;
    }

    .drop {
      position: absolute;
      top: -24px;
      width: 2px;
      height: 18px;
      background: var(--fg);
      opacity: 0.68;
      animation: rain-fall var(--d) linear infinite;
      animation-delay: var(--delay);
    }

    @keyframes rain-fall {
      to {
        transform: translateY(82vh);
      }
    }

    .worker i,
    .worker b,
    .visitor i,
    .visitor b,
    .saboteur i,
    .saboteur b {
      position: absolute;
      display: block;
      background: var(--fg);
    }

    .sprite-grid {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(12, var(--pixel));
      grid-template-rows: repeat(12, var(--pixel));
      width: calc(var(--pixel) * 12);
      height: calc(var(--pixel) * 12);
    }

    .sprite-grid span {
      width: var(--pixel);
      height: var(--pixel);
      background: transparent;
    }

    .sprite-grid span.is-on {
      background: var(--fg);
    }

    .uses-sprite i {
      display: none;
    }

    .uses-sprite.worker.is-eating::before,
    .uses-sprite.worker.is-eating::after {
      display: none;
    }

    .head,
    .v-head,
    .s-head {
      left: calc(var(--pixel) * 3);
      top: 0;
      width: calc(var(--pixel) * 2);
      height: calc(var(--pixel) * 2);
    }

    .body,
    .v-body,
    .s-body {
      left: calc(var(--pixel) * 2);
      top: calc(var(--pixel) * 2);
      width: calc(var(--pixel) * 4);
      height: calc(var(--pixel) * 3);
    }

    .arm-a {
      left: calc(var(--pixel) * 5);
      top: calc(var(--pixel) * 3);
      width: calc(var(--pixel) * 3);
      height: var(--pixel);
      animation: arm 520ms steps(2, end) infinite;
    }

    .arm-b {
      left: var(--pixel);
      top: calc(var(--pixel) * 3);
      width: calc(var(--pixel) * 2);
      height: var(--pixel);
    }

    .leg-a,
    .leg-b,
    .v-leg-a,
    .v-leg-b,
    .s-leg-a,
    .s-leg-b {
      top: calc(var(--pixel) * 5);
      width: var(--pixel);
      height: calc(var(--pixel) * 3);
      animation: walk 420ms steps(2, end) infinite;
    }

    .leg-a,
    .v-leg-a,
    .s-leg-a {
      left: calc(var(--pixel) * 2);
    }

    .leg-b,
    .v-leg-b,
    .s-leg-b {
      left: calc(var(--pixel) * 5);
      animation-delay: 210ms;
    }

    .parcel {
      z-index: 3;
      left: calc(var(--pixel) * 8);
      top: calc(var(--pixel) * 1);
      min-width: calc(var(--pixel) * 4);
      height: calc(var(--pixel) * 5);
      display: grid;
      place-items: center;
      padding: 0 var(--pixel);
      background: transparent !important;
      color: var(--fg);
      font-family: Georgia, "Times New Roman", serif;
      font-size: calc(var(--pixel) * 5);
      font-style: normal;
      font-weight: 800;
      line-height: 1;
    }

    .worker.is-resting .arm-a,
    .worker.is-resting .leg-a,
    .worker.is-resting .leg-b {
      animation-play-state: paused;
    }

    .worker.is-resting .body {
      transform: translateY(var(--pixel));
    }

    .worker::after {
      content: "";
      position: absolute;
      left: calc(var(--pixel) * 8);
      top: calc(var(--pixel) * -4);
      color: var(--fg);
      font-family: "Courier New", Courier, monospace;
      font-size: calc(var(--pixel) * 3);
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .worker.is-resting::after {
      content: "Zzz";
      animation: sleep-blink 1.3s steps(2, end) infinite;
    }

    .worker.is-eating .arm-a,
    .worker.is-eating .arm-b {
      display: none;
    }

    .worker.is-eating::after {
      content: "";
    }

    .worker.is-eating::before {
      content: "";
      position: absolute;
      left: calc(var(--pixel) * 9);
      top: calc(var(--pixel) * 2);
      width: calc(var(--pixel) * 2);
      height: calc(var(--pixel) * 2);
      background: var(--fg);
      animation: lunch-bite 980ms steps(4, end) infinite;
    }

    .worker.is-eating .head {
      left: var(--pixel);
      top: 0;
      width: calc(var(--pixel) * 6);
      height: calc(var(--pixel) * 6);
      animation: lunch-mouth 980ms steps(2, end) infinite;
    }

    .worker.is-eating .head::after {
      content: "";
      position: absolute;
      right: 0;
      top: calc(var(--pixel) * 2);
      width: 0;
      height: 0;
      border-top: calc(var(--pixel) * 1.5) solid transparent;
      border-bottom: calc(var(--pixel) * 1.5) solid transparent;
      border-right: calc(var(--pixel) * 3) solid var(--bg);
    }

    .worker.is-eating .body {
      left: calc(var(--pixel) * 3);
      top: calc(var(--pixel) * 6);
      width: calc(var(--pixel) * 2);
      height: var(--pixel);
      animation: none;
    }

    .worker.is-eating .body::after {
      content: none;
    }

    .worker.is-playing .body,
    .worker.is-playing .arm-a {
      animation: play-hop 640ms steps(2, end) infinite;
    }

    .worker.is-playing::after {
      content: "";
    }

    .worker.is-playing::before {
      content: "";
      position: absolute;
      left: calc(var(--pixel) * 9);
      top: calc(var(--pixel) * 7);
      width: calc(var(--pixel) * 2);
      height: calc(var(--pixel) * 2);
      background: var(--fg);
      animation: toy-hop 640ms steps(2, end) infinite;
    }

    .worker.is-smoking .arm-a,
    .worker.is-smoking .leg-a,
    .worker.is-smoking .leg-b {
      animation-play-state: paused;
    }

    .worker.is-smoking::after {
      content: "";
    }

    .worker.is-smoking::before {
      content: "";
      position: absolute;
      left: calc(var(--pixel) * 7);
      top: calc(var(--pixel) * 3);
      width: calc(var(--pixel) * 4);
      height: var(--pixel);
      background: var(--fg);
    }

    .smoke-letters {
      position: absolute;
      left: calc(var(--pixel) * 8);
      top: calc(var(--pixel) * -1);
      display: none;
      background: transparent !important;
      color: var(--fg);
      font-family: "Courier New", Courier, monospace;
      font-size: calc(var(--pixel) * 2);
      font-weight: 800;
      line-height: 1;
    }

    .smoke-letters span {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      background: transparent !important;
      opacity: 0;
      animation: smoke-letter 6s steps(5, end) infinite;
      animation-delay: calc(var(--i) * 260ms);
    }

    .worker.is-smoking .smoke-letters {
      display: block;
    }

    .mosaic-block {
      position: absolute;
      left: calc(var(--pixel) * -3);
      top: calc(var(--pixel) * -2);
      display: none;
      width: calc(var(--pixel) * 16);
      height: calc(var(--pixel) * 13);
      background: transparent !important;
    }

    .worker.is-mosaic .mosaic-block {
      display: block;
    }

    .mosaic-block span {
      position: absolute;
      left: calc(var(--x) * var(--pixel));
      top: calc(var(--y) * var(--pixel));
      width: calc(var(--pixel) * 2);
      height: calc(var(--pixel) * 2);
      background: var(--c1);
      animation: mosaic-dot var(--d) steps(1, end) infinite;
      animation-delay: var(--delay);
    }

    .worker.is-mosaic .head,
    .worker.is-mosaic .body,
    .worker.is-mosaic .arm-a,
    .worker.is-mosaic .arm-b,
    .worker.is-mosaic .leg-a,
    .worker.is-mosaic .leg-b,
    .worker.is-mosaic .sprite-grid {
      opacity: 0;
    }

    @keyframes sleep-blink {
      50% {
        opacity: 0.2;
      }
    }

    @keyframes play-hop {
      50% {
        transform: translateY(calc(var(--pixel) * -1));
      }
    }

    @keyframes toy-hop {
      50% {
        transform: translate(calc(var(--pixel) * 2), calc(var(--pixel) * -3));
      }
    }

    @keyframes lunch-mouth {
      50% {
        transform: scaleX(0.86);
      }
    }

    @keyframes lunch-bite {
      0% {
        opacity: 1;
        transform: translateX(0);
      }

      70% {
        opacity: 1;
        transform: translateX(calc(var(--pixel) * -5));
      }

      100% {
        opacity: 0;
        transform: translateX(calc(var(--pixel) * -6));
      }
    }

    @keyframes mosaic-dot {
      0% {
        background: var(--c1);
      }

      25% {
        background: var(--c2);
      }

      50% {
        background: var(--c3);
      }

      75% {
        background: var(--c4);
      }
    }

    @keyframes smoke-letter {
      0% {
        opacity: 0;
        transform: translateY(0);
      }

      20% {
        opacity: 1;
      }

      42% {
        opacity: 0.65;
      }

      58% {
        opacity: 0;
        transform: translateY(calc(var(--pixel) * -7));
      }

      100% {
        opacity: 0;
        transform: translateY(calc(var(--pixel) * -7));
      }
    }

    @keyframes talk-arm {
      50% {
        transform: translateY(calc(var(--pixel) * -1));
      }
    }

    .worker.is-talking-worker .arm-a {
      animation: talk-arm 620ms steps(2, end) infinite;
    }

    .worker.is-talking-worker::after {
      content: "...";
      left: calc(var(--pixel) * 8);
      top: calc(var(--pixel) * -4);
      display: grid;
      min-width: calc(var(--pixel) * 7);
      height: calc(var(--pixel) * 4);
      place-items: center;
      border: 2px solid var(--fg);
      background: var(--bg);
      animation: talk-bubble 2.8s steps(2, end) infinite;
    }

    @keyframes talk-bubble {
      0%, 72% {
        opacity: 1;
      }

      73%, 100% {
        opacity: 0;
      }
    }

    .visitor,
    .saboteur {
      opacity: 0;
      z-index: 4;
    }

    .visitor.is-active,
    .saboteur.is-active {
      opacity: 1;
    }

    .v-hair {
      left: calc(var(--pixel) * 2);
      top: 0;
      width: calc(var(--pixel) * 4);
      height: calc(var(--pixel) * 2);
    }

    .v-head {
      top: var(--pixel);
    }

    .v-body {
      top: calc(var(--pixel) * 3);
      height: calc(var(--pixel) * 2);
    }

    .v-skirt {
      left: var(--pixel);
      top: calc(var(--pixel) * 5);
      width: calc(var(--pixel) * 6);
      height: var(--pixel);
    }

    .speech {
      z-index: 3;
      left: calc(var(--pixel) * 8);
      top: calc(var(--pixel) * -4);
      min-width: calc(var(--pixel) * 7);
      height: calc(var(--pixel) * 4);
      display: none !important;
      place-items: center;
      border: 2px solid var(--fg);
      background: var(--bg) !important;
      color: var(--fg);
      font-family: "Courier New", Courier, monospace;
      font-size: calc(var(--pixel) * 3);
      font-style: normal;
      font-weight: 800;
      line-height: 1;
    }

    .visitor.is-talking .speech {
      display: none !important;
    }

    .s-hat {
      left: calc(var(--pixel) * 2);
      top: calc(var(--pixel) * -1);
      width: calc(var(--pixel) * 4);
      height: var(--pixel);
    }

    .s-tool {
      left: calc(var(--pixel) * 7);
      top: calc(var(--pixel) * 2);
      width: var(--pixel);
      height: calc(var(--pixel) * 5);
    }

    .quake {
      animation: quake 260ms steps(2, end) 1;
    }

    @keyframes quake {
      0%, 100% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(-6px, 2px);
      }

      50% {
        transform: translate(7px, -2px);
      }

      75% {
        transform: translate(-3px, -1px);
      }
    }

    @keyframes walk {
      50% {
        transform: translateY(calc(var(--pixel) * -1));
      }
    }

    @keyframes arm {
      50% {
        transform: translateY(var(--pixel));
      }
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      border-top: 2px solid currentColor;
      margin-top: 0;
      padding-top: 0;
    }

    .controls.is-hidden {
      display: none;
    }

    .meter {
      width: 180px;
      height: 30px;
      border: 2px solid currentColor;
      padding: 4px;
    }

    .meter-fill {
      width: var(--progress, 0%);
      height: 100%;
      background: var(--fg);
    }

    .stat {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      font-family: "Courier New", Courier, monospace;
      font-size: 12px;
      font-weight: 800;
    }

    .debug-time {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    @media (max-width: 620px) {
      .under-construction-cathedral {
        --pixel: 3px;
      }

      .under-construction-cathedral {
        padding-top: 0;
      }

      .construction-field {
        aspect-ratio: auto;
        height: calc(100svh - 96px);
        min-height: 280px;
        max-height: none;
      }

      .project-dates {
        padding: 0 8px;
        font-size: clamp(14px, 4vw, 22px);
        line-height: 0.95;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .blueprint,
      .placed-layer {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .blueprint-char {
        white-space: pre-wrap;
      }
    }