/* 90s "under construction": a yellow and black tape under the header (all pages with this header) and, on the
   landing page only, a digger that moves word chunks (HTML, CSS, Python) from a truck into a pit (header taller there).
   Loaded only with UNDER_CONSTRUCTION on. */
.site-header.uc-on { height: 84px; }
.uc-wrap { display: flex; align-items: center; gap: 12px; margin: 0 auto 0 22px; flex: none; align-self: flex-end; zoom: 1.2; }  /* on the tape */
.uc { position: relative; width: 380px; height: 64px; overflow: hidden; flex: none; font-family: "Courier New", Courier, monospace; }
.uc-sign { align-self: center; padding: 5px 9px; border: 2px solid #1c1c1a; border-radius: 3px; background: #f2c200; color: #1c1c1a;
  font: 700 12px/1.15 "Courier New", Courier, monospace; letter-spacing: 0.06em; text-align: center;
  box-shadow: inset 0 0 0 2px #f2c200, inset 0 0 0 3px #1c1c1a; }
.uc-hole { position: absolute; left: 6px; bottom: 0; width: 46px; height: 14px; border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  background: radial-gradient(ellipse at 50% 100%, #2b2117 0 55%, #5a4630 75%, transparent 76%); }
.uc-digger { position: absolute; left: 70px; bottom: 0; width: 90px; height: 50px; }
.uc-tracks { position: absolute; left: 4px; bottom: 0; width: 70px; height: 11px; border-radius: 6px; background: #3a3a36;
  display: flex; justify-content: space-around; align-items: center; }
.uc-tracks i, .uc-wheels i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #8d8d86; border: 1px solid #1c1c1a; }
.uc-cab { position: absolute; left: 14px; bottom: 11px; width: 44px; height: 26px; border-radius: 4px 9px 2px 2px;
  background: #f2c200; border: 1px solid #b58f00; }
.uc-window { position: absolute; right: 4px; top: 4px; width: 13px; height: 10px; border-radius: 2px; background: #bfe3f2; border: 1px solid #6a8a99; }
.uc-arm { position: absolute; left: 50px; bottom: 34px; width: 100px; height: 6px; border-radius: 3px; background: #f2c200;
  border: 1px solid #b58f00; transform-origin: 3px 50%; transform: rotate(-35deg); transition: transform 0.9s ease-in-out; }
.uc-bucket { position: absolute; right: -6px; top: -4px; width: 14px; height: 12px; border-radius: 0 0 6px 6px;
  background: #6b6b64; border: 1px solid #3a3a36; }
.uc-truck { position: absolute; left: 186px; bottom: 0; width: 186px; height: 34px; transition: transform 1.6s ease-in-out; }
.uc-truck.is-away { transform: translateX(220px); }
.uc-bed { position: absolute; left: 0; bottom: 9px; width: 144px; height: 13px; border-radius: 2px; background: #c0392b; border: 1px solid #7d2219;
  display: flex; gap: 2px; align-items: flex-end; padding: 0 2px; }
.uc-truck-cab { position: absolute; left: 146px; bottom: 9px; width: 34px; height: 24px; border-radius: 3px 8px 2px 2px; background: #2a5db0; border: 1px solid #1a3c75; }
.uc-wheels { position: absolute; left: 6px; bottom: 0; width: 170px; height: 10px; display: flex; justify-content: space-between; }
.uc-wheels i { width: 10px; height: 10px; }
.uc-chip { position: relative; bottom: 11px; display: inline-block; padding: 1px 3px; border-radius: 3px; font-size: 10px; font-weight: 700;
  line-height: 1.2; white-space: nowrap; color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.uc-chip.is-html { background: #e3632b; }
.uc-chip.is-css { background: #2965f1; }
.uc-chip.is-py { background: #2f8f4e; }
.uc-chip.is-flying { position: absolute; bottom: auto; z-index: 3; transition: left 0.45s ease-in, top 0.45s ease-in; }
.uc-bucket .uc-chip { position: absolute; left: -8px; top: -12px; bottom: auto; transition: transform 0.9s ease-in-out; }
.uc-chip.is-falling { position: absolute; bottom: auto; z-index: 1; transition: transform 1s ease-in, opacity 1s ease-in;
  transform: translateY(34px) scale(0.7); opacity: 0; }
/* Tape under the header on every page with this header (landing and researcher pages), also where the scene has no room */
.site-header.uc-tape::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #f2c200 0 8px, #1c1c1a 8px 16px); }
/* the menu must never wrap: with less room first the sign goes, then the scene gets smaller, then it goes */
@media (max-width: 1640px) { .uc-sign { display: none; } }
@media (max-width: 1480px) { .uc-wrap { zoom: 0.9; } .site-header.uc-on { height: 72px; } }
@media (max-width: 1350px) { .uc-wrap { zoom: 0.66; } .site-header.uc-on { height: 60px; } }
@media (max-width: 1250px) { .uc-wrap { display: none; } .site-header.uc-on { height: 56px; } }
@media (prefers-reduced-motion: reduce) { .uc-arm, .uc-truck, .uc-chip { transition: none !important; } }