:root {
  --cm-black: #000;
  --cm-deep: #020002;
  --cm-green: #39ff14;
  --cm-green-soft: #8aff76;
  --cm-magenta: #ff00ff;
  --cm-magenta-dim: #65005f;
  --cm-red: #ff3030;
  --cm-red-soft: #ff6a61;
  --cm-line: rgba(57, 255, 20, .25);
  --cm-mono: "OCR A Extended", "Lucida Console", Monaco, Consolas, monospace;
  --cm-sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--cm-black);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body.cm-gateway-theme {
  min-width: 300px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cm-black);
  color: var(--cm-green-soft);
  font-family: var(--cm-mono);
}

body.cm-gateway-theme.cm-entered {
  overflow-x: hidden;
  overflow-y: auto;
}

button,
a {
  font: inherit;
}

button {
  border-radius: 0;
}

a {
  color: inherit;
}

::selection {
  color: var(--cm-black);
  background: var(--cm-green);
}

.cm-screen-reader-text,
.cm-skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cm-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99999;
  padding: 12px 15px;
  border: 1px solid var(--cm-green);
  color: var(--cm-green);
  background: var(--cm-black);
  font-size: 12px;
  text-decoration: none;
}

.cm-entry-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--cm-black);
}

.admin-bar .cm-entry-gate {
  top: var(--wp-admin--admin-bar--height, 32px);
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

.cm-entry-gate.is-leaving {
  pointer-events: none;
  animation: cm-gate-leave 380ms cubic-bezier(.76, 0, .24, 1) forwards;
}

.cm-entry-gate.is-hidden {
  display: none;
}

.cm-code-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cm-black);
  pointer-events: none;
}

.cm-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 47%, transparent 0 25%, rgba(0, 0, 0, .14) 50%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .02), transparent 16% 73%, rgba(0, 0, 0, .78));
  pointer-events: none;
}

.cm-entry-content {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  justify-items: center;
  margin-top: -1.5vh;
  padding: max(28px, env(safe-area-inset-top)) 2vw max(98px, env(safe-area-inset-bottom));
  text-align: center;
}

.cm-wordmark {
  display: block;
  width: min(97vw, 1680px);
  max-height: 32vh;
  overflow: visible;
}

.cm-wordmark text {
  fill: none;
  stroke: var(--cm-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-family: var(--cm-sans);
  font-size: 208px;
  font-stretch: condensed;
  font-weight: 300;
  letter-spacing: -8px;
  paint-order: stroke;
  transform: scaleX(1.33);
  transform-box: fill-box;
  transform-origin: center;
  filter:
    drop-shadow(0 0 2px rgba(57, 255, 20, .78))
    drop-shadow(0 0 8px rgba(57, 255, 20, .15));
  opacity: .12;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
}

.cm-entry-gate.is-tracing .cm-wordmark text {
  animation: cm-trace-word 3100ms linear forwards;
}

.cm-entry-gate.is-complete .cm-wordmark text {
  opacity: 1;
  stroke-dashoffset: 0;
}

.cm-tagline {
  margin: clamp(-4px, -.2vh, 0px) 0 0;
  color: var(--cm-green);
  font-size: clamp(15px, 1.85vw, 32px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.2;
  opacity: 0;
  text-shadow: 0 0 6px rgba(57, 255, 20, .26);
  transform: translateY(4px);
}

.cm-entry-gate.is-tracing .cm-tagline {
  animation: cm-copy-in 680ms ease-out 1900ms forwards;
}

.cm-entry-gate.is-complete .cm-tagline {
  opacity: 1;
  transform: none;
}

.cm-enter {
  position: relative;
  display: grid;
  min-width: 156px;
  min-height: 52px;
  margin-top: clamp(30px, 5vh, 58px);
  padding: 0 29px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 48, 48, .7);
  color: var(--cm-red-soft);
  background: rgba(0, 0, 0, .86);
  box-shadow:
    inset 0 0 18px rgba(255, 48, 48, .04),
    0 0 11px rgba(255, 48, 48, .08);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  opacity: .38;
  text-indent: .34em;
  transform: translateY(5px);
  transition:
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 260ms ease,
    transform 260ms ease;
}

.cm-enter::before,
.cm-enter::after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  pointer-events: none;
}

.cm-enter::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cm-red);
  border-left: 2px solid var(--cm-red);
}

.cm-enter::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--cm-red);
  border-bottom: 2px solid var(--cm-red);
}

.cm-enter i {
  position: absolute;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cm-red);
  box-shadow: 0 0 7px var(--cm-red);
}

.cm-entry-gate.is-ready .cm-enter,
.cm-entry-gate.is-complete .cm-enter {
  opacity: 1;
  transform: none;
}

.cm-enter:hover,
.cm-enter:focus-visible {
  border-color: var(--cm-red);
  color: #fff0ef;
  box-shadow:
    inset 0 0 20px rgba(255, 48, 48, .1),
    0 0 17px rgba(255, 48, 48, .22);
  outline: none;
}

.cm-enter:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.cm-enter:active {
  color: var(--cm-black);
  background: var(--cm-red);
}

.cm-gateway-footer {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(17px, env(safe-area-inset-bottom));
  left: max(22px, env(safe-area-inset-left));
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  color: var(--cm-green);
  font-size: clamp(8px, .72vw, 12px);
  letter-spacing: .02em;
  pointer-events: none;
  text-align: center;
}

.cm-gateway-footer p {
  grid-column: 2;
  margin: 0;
  opacity: .95;
}

.cm-motion-toggle {
  grid-column: 3;
  justify-self: end;
  min-height: 34px;
  padding: 7px 0 7px 12px;
  border: 0;
  color: rgba(57, 255, 20, .56);
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: .13em;
  pointer-events: auto;
}

.cm-motion-toggle:hover,
.cm-motion-toggle:focus-visible {
  color: var(--cm-green);
  outline: none;
}

.cm-motion-toggle:focus-visible {
  outline: 1px solid var(--cm-green);
  outline-offset: 3px;
}

.cm-project-shell,
.cm-record-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 14%, rgba(255, 0, 255, .025), transparent 32rem),
    var(--cm-black);
}

.cm-project-shell[hidden] {
  display: none;
}

.cm-project-shell.is-active {
  display: block;
  animation: cm-projects-in 420ms ease-out both;
}

.cm-code-rain-projects {
  position: fixed;
  opacity: .18;
}

.cm-project-header {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 68px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(18px, 3.5vw, 62px);
  border-bottom: 1px solid var(--cm-line);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(9px);
  color: var(--cm-green);
  font-size: 9px;
  letter-spacing: .16em;
}

.cm-project-header > span {
  justify-self: center;
  color: rgba(57, 255, 20, .55);
}

.cm-project-header > :last-child {
  justify-self: end;
}

.cm-project-brand,
.cm-project-header button,
.cm-project-header > a:last-child {
  border: 0;
  color: var(--cm-green);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .12em;
  text-decoration: none;
}

.cm-project-brand {
  text-shadow: 0 0 5px rgba(57, 255, 20, .23);
}

.cm-project-header button,
.cm-project-header > a:last-child {
  color: var(--cm-red-soft);
}

.cm-project-header a:hover,
.cm-project-header button:hover,
.cm-project-header a:focus-visible,
.cm-project-header button:focus-visible {
  color: #fff;
  outline: none;
}

.cm-project-header a:focus-visible,
.cm-project-header button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

.cm-project-main {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100svh - 130px);
  margin: 0 auto;
  padding: clamp(76px, 12vh, 150px) 0 95px;
  outline: none;
}

.cm-project-main:focus-visible {
  outline: 1px solid transparent;
}

.cm-project-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 390px);
  align-items: end;
  gap: 24px 60px;
  padding-bottom: clamp(38px, 6vh, 70px);
  border-bottom: 1px solid var(--cm-line);
}

.cm-project-intro p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(57, 255, 20, .62);
  font-size: 9px;
  letter-spacing: .19em;
}

.cm-project-intro h2 {
  margin: 0;
  color: transparent;
  font-family: var(--cm-sans);
  font-size: clamp(70px, 12vw, 170px);
  font-weight: 300;
  letter-spacing: -.07em;
  line-height: .75;
  -webkit-text-stroke: 1px var(--cm-green);
  text-shadow: 0 0 8px rgba(57, 255, 20, .12);
}

.cm-project-intro > span {
  align-self: end;
  color: rgba(138, 255, 118, .62);
  font-size: 11px;
  line-height: 1.75;
}

.cm-project-list {
  border-left: 1px solid var(--cm-line);
}

.cm-project-row {
  display: grid;
  min-height: 112px;
  grid-template-columns: 74px minmax(0, 1fr) 130px 110px;
  align-items: center;
  border-right: 1px solid var(--cm-line);
  border-bottom: 1px solid var(--cm-line);
  color: var(--cm-green-soft);
  background: rgba(0, 0, 0, .72);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.cm-project-row > * {
  padding: 20px;
}

.cm-project-row code {
  color: var(--cm-green);
  font-size: 22px;
  text-align: center;
}

.cm-project-row > span {
  display: grid;
  gap: 9px;
  border-left: 1px solid var(--cm-line);
  border-right: 1px solid var(--cm-line);
}

.cm-project-row strong {
  color: var(--cm-green-soft);
  font-family: var(--cm-sans);
  font-size: 25px;
  font-weight: 400;
}

.cm-project-row small {
  color: rgba(138, 255, 118, .5);
  font-size: 9px;
  line-height: 1.5;
}

.cm-project-row em,
.cm-project-row time {
  color: rgba(57, 255, 20, .62);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .12em;
  text-align: center;
}

.cm-project-row em {
  color: var(--cm-red-soft);
}

.cm-project-row:hover,
.cm-project-row:focus-visible {
  border-color: rgba(57, 255, 20, .55);
  background: rgba(57, 255, 20, .04);
  outline: none;
}

.cm-project-empty {
  display: grid;
  min-height: 220px;
  grid-template-columns: 120px minmax(220px, .7fr) minmax(260px, 1fr);
  align-items: center;
  border-right: 1px solid var(--cm-line);
  border-bottom: 1px solid var(--cm-line);
  border-left: 1px solid var(--cm-line);
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(57, 255, 20, .018) 80px),
    rgba(0, 0, 0, .72);
}

.cm-project-empty > * {
  padding: 28px;
}

.cm-project-empty code {
  color: rgba(57, 255, 20, .26);
  font-size: 45px;
  text-align: center;
}

.cm-project-empty > div {
  display: grid;
  align-self: stretch;
  align-content: center;
  gap: 10px;
  border-right: 1px solid var(--cm-line);
  border-left: 1px solid var(--cm-line);
}

.cm-project-empty strong {
  color: var(--cm-green);
  font-size: 14px;
  letter-spacing: .13em;
}

.cm-project-empty span {
  color: var(--cm-red-soft);
  font-size: 9px;
  letter-spacing: .18em;
}

.cm-project-empty p {
  max-width: 430px;
  margin: 0;
  color: rgba(138, 255, 118, .5);
  font-size: 10px;
  line-height: 1.7;
}

.cm-automation-reserve {
  display: grid;
  width: min(480px, 100%);
  grid-template-columns: 1fr auto;
  gap: 8px 30px;
  margin: clamp(50px, 9vh, 110px) 0 0 auto;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 48, 48, .32);
  text-align: right;
}

.cm-automation-reserve > span,
.cm-automation-reserve > strong {
  font-size: 9px;
  letter-spacing: .16em;
}

.cm-automation-reserve > span {
  color: rgba(138, 255, 118, .5);
}

.cm-automation-reserve > strong {
  color: var(--cm-red-soft);
}

.cm-automation-reserve p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(138, 255, 118, .38);
  font-size: 9px;
  line-height: 1.6;
}

.cm-project-footer {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 3.5vw, 62px);
  border-top: 1px solid rgba(57, 255, 20, .16);
  color: rgba(57, 255, 20, .38);
  font-size: 8px;
  letter-spacing: .12em;
}

.cm-project-footer p {
  margin: 0;
}

/* Post-entry holding screen. This intentionally contains no project or agent UI. */
.cm-coming-soon .cm-code-rain-projects {
  opacity: .13;
}

.cm-coming-soon .cm-project-main {
  display: grid;
  width: 100%;
  min-height: calc(100svh - 130px);
  margin: 0;
  padding: clamp(54px, 8vh, 90px) 20px;
  place-items: center;
}

.cm-coming-mark {
  display: grid;
  width: min(1500px, 100%);
  justify-items: center;
  text-align: center;
}

.cm-coming-mark p {
  margin: 0 0 clamp(24px, 4vh, 44px);
  color: rgba(57, 255, 20, .54);
  font-size: 9px;
  letter-spacing: .22em;
}

.cm-coming-mark h2 {
  margin: 0;
  color: transparent;
  font-family: var(--cm-sans);
  font-size: clamp(76px, 11vw, 184px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .82;
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--cm-green);
  text-shadow: 0 0 9px rgba(57, 255, 20, .14);
}

.cm-coming-mark h2 span {
  -webkit-text-stroke-color: var(--cm-red);
  text-shadow: 0 0 9px rgba(255, 48, 48, .11);
}

.cm-coming-mark > i {
  position: relative;
  display: block;
  width: min(520px, 66vw);
  height: 1px;
  margin: clamp(34px, 6vh, 64px) 0 25px;
  background: linear-gradient(90deg, transparent, rgba(57, 255, 20, .45), transparent);
}

.cm-coming-mark > i::after {
  position: absolute;
  top: -2px;
  left: calc(50% - 2px);
  width: 5px;
  height: 5px;
  background: var(--cm-red);
  box-shadow: 0 0 7px rgba(255, 48, 48, .65);
  content: "";
}

.cm-coming-mark small {
  color: rgba(138, 255, 118, .58);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .2em;
}

.cm-record-main {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(80px, 13vh, 150px) 0 100px;
}

.cm-record-main article > p {
  color: rgba(57, 255, 20, .58);
  font-size: 9px;
  letter-spacing: .18em;
}

.cm-record-main h1 {
  margin: 30px 0 55px;
  color: transparent;
  font-family: var(--cm-sans);
  font-size: clamp(58px, 10vw, 130px);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .86;
  -webkit-text-stroke: 1px var(--cm-green);
}

.cm-record-content {
  color: rgba(138, 255, 118, .73);
  font-family: var(--cm-sans);
  font-size: 18px;
  line-height: 1.75;
}

.cm-record-content :is(h2, h3, h4) {
  color: var(--cm-green);
  font-weight: 400;
}

.cm-record-content a {
  color: var(--cm-red-soft);
}

@keyframes cm-trace-word {
  0% {
    opacity: .18;
    stroke-dashoffset: 1800;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes cm-copy-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cm-gate-leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.018);
  }
}

@keyframes cm-projects-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 800px) {
  .cm-entry-content {
    margin-top: -4vh;
    padding-right: 0;
    padding-left: 0;
  }

  .cm-wordmark {
    width: 104vw;
    max-width: none;
  }

  .cm-wordmark text {
    stroke-width: 2.6;
    transform: scaleX(1.27);
  }

  .cm-tagline {
    margin-top: -3px;
    font-size: clamp(13px, 3.8vw, 20px);
  }

  .cm-enter {
    min-width: 148px;
    min-height: 50px;
    margin-top: 38px;
  }

  .cm-gateway-footer {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cm-gateway-footer p {
    grid-column: 1;
    font-size: 8px;
  }

  .cm-motion-toggle {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(9px, env(safe-area-inset-bottom));
    grid-column: 1;
  }

  .cm-project-header {
    grid-template-columns: 1fr auto;
    padding: 0 18px;
  }

  .cm-project-header > span {
    display: none;
  }

  .cm-project-main {
    width: min(100% - 28px, 1180px);
    padding-top: 80px;
  }

  .cm-project-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cm-project-intro h2 {
    font-size: clamp(68px, 24vw, 120px);
  }

  .cm-project-intro > span {
    max-width: 440px;
  }

  .cm-project-empty {
    grid-template-columns: 72px 1fr;
  }

  .cm-project-empty > div {
    border-right: 0;
  }

  .cm-project-empty > p {
    grid-column: 1 / -1;
    max-width: none;
    border-top: 1px solid var(--cm-line);
  }

  .cm-project-row {
    grid-template-columns: 58px 1fr 96px;
  }

  .cm-project-row time {
    display: none;
  }

  .cm-project-row > * {
    padding: 16px 12px;
  }

  .cm-project-row strong {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .cm-entry-content {
    margin-top: -7vh;
  }

  .cm-wordmark {
    width: 104vw;
  }

  .cm-tagline {
    margin-top: -9px;
  }

  .cm-enter {
    margin-top: 34px;
  }

  .cm-project-intro p {
    line-height: 1.5;
  }

  .cm-project-empty {
    grid-template-columns: 1fr;
  }

  .cm-project-empty code {
    display: none;
  }

  .cm-project-empty > div {
    border-left: 0;
  }

  .cm-project-empty > p {
    grid-column: 1;
  }

  .cm-project-row {
    grid-template-columns: 48px 1fr;
  }

  .cm-project-row em {
    grid-column: 2;
    padding-top: 0;
    text-align: left;
  }

  .cm-project-row > span {
    border-right: 0;
  }

  .cm-automation-reserve {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .cm-automation-reserve p {
    grid-column: 1;
  }

  .cm-project-footer {
    gap: 20px;
  }

  .cm-coming-soon .cm-project-main {
    min-height: calc(100svh - 130px);
    padding: 50px 18px;
  }

  .cm-coming-mark h2 {
    display: grid;
    gap: 8px;
    font-size: clamp(70px, 21vw, 92px);
    line-height: .78;
    white-space: normal;
  }
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
}

.reduce-motion .cm-wordmark text {
  opacity: 1;
  stroke-dashoffset: 0;
}

.reduce-motion .cm-tagline,
.reduce-motion .cm-enter {
  opacity: 1;
  transform: none;
}

.reduce-motion .cm-code-rain {
  opacity: .34;
}

.reduce-motion .cm-code-rain-projects {
  opacity: .1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .cm-wordmark text {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .cm-tagline,
  .cm-enter {
    opacity: 1;
    transform: none;
  }

  .cm-code-rain {
    opacity: .34;
  }

  .cm-code-rain-projects {
    opacity: .1;
  }
}