.art-slot {
  min-height: 1px;
}

/* Offset Foundry */

.variant--offset-foundry .login-shell {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.variant--offset-foundry .art-stage {
  position: relative;
  isolation: isolate;
  align-content: start;
  min-height: 100dvh;
  overflow: visible;
  border-inline-end: 0;
  background: var(--c-rear);
  padding: clamp(5.5rem, 10vh, 7rem) clamp(2rem, 3vw, 4rem) clamp(2rem, 4vw, 4rem);
}

.variant--offset-foundry .brand-mark,
.variant--offset-foundry .art-name,
.variant--offset-foundry .art-lead {
  position: relative;
  z-index: 2;
}

.variant--offset-foundry .brand-mark {
  width: 40px;
  height: 40px;
  margin-block-end: clamp(4rem, 13vh, 8rem);
}

.variant--offset-foundry .art-name {
  width: 8rem;
  border-block-start: 1px solid var(--line-strong);
  padding-block-start: var(--space-2);
}

.variant--offset-foundry .art-lead {
  width: 18ch;
}

.variant--offset-foundry .art-slot--offset-foundry {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.foundry-word {
  position: absolute;
  inset: auto auto -0.13em -0.075em;
  color: var(--c-plane);
  font-size: clamp(12rem, 29vw, 30rem);
  font-weight: 800;
  letter-spacing: -0.105em;
  line-height: 0.68;
  white-space: nowrap;
}

.foundry-meta {
  position: absolute;
  z-index: 2;
  right: clamp(6.5rem, 8vw, 8rem);
  bottom: clamp(2rem, 5vh, 3.5rem);
  width: 16ch;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.65;
}

.foundry-route {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 5rem;
  display: grid;
  gap: clamp(2.75rem, 8vh, 4.75rem);
  transform: translate(50%, -50%);
}

.foundry-route i {
  position: relative;
  display: block;
  width: 8rem;
  height: 2px;
  background: currentcolor;
  color: var(--c-graphite);
}

.foundry-route i::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid currentcolor;
  background: var(--c-rear);
  content: "";
  transform: translate(-50%, -50%);
}

html[data-auth-state="email-active"] .variant--offset-foundry .foundry-route i:first-child {
  color: var(--c-signal);
}

html[data-auth-state="password-active"] .variant--offset-foundry .foundry-route i:first-child,
html[data-auth-state="success"] .variant--offset-foundry .foundry-route i:nth-child(-n + 2) {
  color: var(--c-text);
}

html[data-auth-state="password-active"] .variant--offset-foundry .foundry-route i:nth-child(2),
html[data-auth-state="busy"] .variant--offset-foundry .foundry-route i:nth-child(3),
html[data-auth-state="success"] .variant--offset-foundry .foundry-route i:nth-child(3) {
  color: var(--c-signal);
}

.variant--offset-foundry .auth-stage {
  position: relative;
  z-index: 3;
  margin-inline-start: -5rem;
  border-inline-start: 1px solid var(--line);
  background: var(--c-plane);
  padding-inline: clamp(6rem, 10vw, 11rem) clamp(2rem, 5vw, 5rem);
}

.variant--offset-foundry .auth-form,
.variant--offset-foundry .recovery-form,
.variant--offset-foundry .success-view,
.variant--offset-foundry .form-status:not(:empty) {
  margin-inline: 0 auto;
}

.variant--offset-foundry .field input,
.variant--offset-foundry .check-control input {
  background: var(--c-rear);
}

/* Type Index */

.variant--type-index .login-shell {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.variant--type-index .art-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: auto 1fr auto / 5rem minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  min-height: 100dvh;
  overflow: hidden;
  border-inline-end: 0;
  background: var(--c-base);
  padding: 0;
}

.variant--type-index .art-stage::before {
  grid-area: 1 / 1 / -1 / 2;
  border-inline-end: 1px solid var(--line);
  background: var(--c-rear);
  content: "";
}

.variant--type-index .brand-mark {
  z-index: 2;
  grid-area: 1 / 1;
  width: 32px;
  height: 32px;
  margin: 5.75rem auto 0;
}

.variant--type-index .art-name {
  z-index: 2;
  grid-area: 2 / 1;
  place-self: center;
  color: var(--c-muted);
  writing-mode: vertical-rl;
}

.variant--type-index .art-lead {
  z-index: 2;
  grid-area: 3 / 2;
  width: min(25ch, 50%);
  margin: 0 0 clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-2);
}

.variant--type-index .art-slot--type-index {
  z-index: 1;
  grid-area: 1 / 2 / -1 / -1;
  display: grid;
  min-width: 0;
  align-items: center;
  overflow: hidden;
}

.type-index {
  display: grid;
  justify-items: end;
  min-width: 0;
  padding: clamp(4.5rem, 8vh, 6rem) 0 clamp(6.5rem, 13vh, 8.5rem) clamp(1rem, 2vw, 2rem);
}

.type-index__word {
  position: relative;
  display: block;
  max-width: 100%;
  color: var(--c-graphite);
  font-size: clamp(7rem, 15vw, 13.5rem);
  font-weight: 800;
  letter-spacing: -0.09em;
  line-height: 0.76;
  opacity: 0.58;
  white-space: nowrap;
  transition: opacity 180ms ease, transform 180ms ease;
}

.type-index__word::after {
  position: absolute;
  right: 0.02em;
  bottom: 0.04em;
  left: 0.08em;
  height: 0.035em;
  background: var(--c-signal);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.type-index__word[data-word="match"] {
  margin-inline-start: clamp(1rem, 4vw, 4.5rem);
}

.type-index__word[data-word="box"] {
  margin-inline-start: clamp(4rem, 9vw, 9rem);
}

html:is([data-auth-state="initial"], [data-auth-state="email-active"]) .variant--type-index [data-word="happy"],
html[data-auth-state="password-active"] .variant--type-index [data-word="match"],
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--type-index [data-word="box"] {
  color: var(--c-text);
  opacity: 1;
  transform: translateX(0.045em);
}

html:is([data-auth-state="initial"], [data-auth-state="email-active"]) .variant--type-index [data-word="happy"]::after,
html[data-auth-state="password-active"] .variant--type-index [data-word="match"]::after,
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--type-index [data-word="box"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.variant--type-index .auth-stage {
  position: relative;
  z-index: 3;
  margin-inline-start: -4rem;
  border-inline-start: 1px solid var(--line-strong);
  background: var(--c-rear);
  padding-inline: clamp(3rem, 5vw, 5rem);
}

.variant--type-index .auth-form,
.variant--type-index .recovery-form,
.variant--type-index .success-view,
.variant--type-index .form-status:not(:empty) {
  margin-inline: 0 auto;
}

@media (max-width: 767px) {
  .variant--offset-foundry .login-shell,
  .variant--type-index .login-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .variant--offset-foundry .art-stage,
  .variant--type-index .art-stage {
    min-height: 12.5rem;
    overflow: hidden;
  }

  .variant--offset-foundry .art-stage {
    padding: 4.75rem var(--space-3) var(--space-3);
  }

  .variant--offset-foundry .brand-mark {
    width: 32px;
    height: 32px;
    margin-block-end: var(--space-3);
  }

  .variant--offset-foundry .art-name {
    width: auto;
    max-width: 9rem;
  }

  .variant--offset-foundry .art-lead {
    display: none;
  }

  .foundry-word {
    inset: auto auto -0.09em -0.04em;
    font-size: clamp(8.5rem, 49vw, 10rem);
  }

  .foundry-meta {
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .foundry-route {
    top: auto;
    right: var(--space-3);
    bottom: 4.5rem;
    display: flex;
    gap: var(--space-2);
    transform: none;
  }

  .foundry-route i {
    width: 2rem;
  }

  .variant--offset-foundry .auth-stage,
  .variant--type-index .auth-stage {
    margin-inline-start: 0;
    border-inline-start: 0;
    padding: var(--space-4) var(--space-3);
  }

  .variant--type-index .auth-stage {
    padding-block: 1.25rem;
  }

  .variant--type-index .art-stage {
    grid-template: 1fr / 3.5rem minmax(0, 1fr);
  }

  .variant--type-index .brand-mark {
    grid-area: 1 / 1;
    width: 28px;
    height: 28px;
    margin: 4.75rem auto 0;
  }

  .variant--type-index .art-name {
    display: none;
  }

  .variant--type-index .art-lead {
    z-index: 3;
    grid-area: 1 / 2;
    place-self: end start;
    width: 22ch;
    margin: 0 0 var(--space-3) var(--space-3);
  }

  .variant--type-index .art-slot--type-index {
    grid-area: 1 / 2;
  }

  .type-index {
    align-content: center;
    justify-items: start;
    padding: 4.25rem 0 3.75rem var(--space-3);
  }

  .type-index__word {
    font-size: clamp(3.65rem, 19vw, 4.5rem);
    line-height: 0.72;
  }

  .type-index__word[data-word="match"],
  .type-index__word[data-word="box"] {
    margin-inline-start: 0;
  }
}

/* Cubist Lock */

.variant--cubist-lock .login-shell {
  grid-template-columns: minmax(0, 7fr) minmax(28rem, 5fr);
}

.variant--cubist-lock .art-stage {
  position: relative;
  isolation: isolate;
  align-content: start;
  min-height: 100dvh;
  overflow: hidden;
  border-inline-end: 0;
  background: var(--c-base);
  padding: clamp(5.5rem, 9vh, 7rem) clamp(2rem, 4vw, 4rem);
}

.variant--cubist-lock .brand-mark,
.variant--cubist-lock .art-name,
.variant--cubist-lock .art-lead {
  position: relative;
  z-index: 5;
}

.variant--cubist-lock .brand-mark {
  width: 36px;
  height: 36px;
  margin-block-end: clamp(2.5rem, 7vh, 5rem);
}

.variant--cubist-lock .art-name {
  width: 9rem;
  border-block-start: 1px solid var(--line-strong);
  padding-block-start: var(--space-2);
}

.variant--cubist-lock .art-lead {
  width: 20ch;
}

.variant--cubist-lock .art-slot--cubist-lock {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-width: 0;
}

.cubist-stack {
  position: absolute;
  inset: 12% 4% 5% 10%;
}

.cubist-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(18rem, 34vw, 31rem);
  height: clamp(11rem, 21vw, 19rem);
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--c-graphite);
  font-size: clamp(9rem, 18vw, 17rem);
  font-weight: 800;
  letter-spacing: -0.12em;
  line-height: 0.62;
  padding-inline: 0.04em;
  opacity: 0.82;
  transition: opacity 180ms ease;
}

.cubist-plane--h {
  z-index: 1;
  background: var(--c-rear);
  transform: translate(-74%, -90%);
}

.cubist-plane--m {
  z-index: 2;
  background: var(--c-plane);
  transform: translate(-56%, -53%);
}

.cubist-plane--b {
  z-index: 3;
  background: var(--c-base);
  transform: translate(-38%, -16%);
}

html[data-auth-state="email-active"] .variant--cubist-lock .cubist-plane--h {
  color: var(--c-signal);
  opacity: 1;
  transform: translate(-70%, -90%) scale(1.025);
}

html[data-auth-state="password-active"] .variant--cubist-lock .cubist-plane--h,
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--cubist-lock .cubist-plane--h,
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--cubist-lock .cubist-plane--m {
  color: var(--c-text);
  opacity: 1;
}

html[data-auth-state="password-active"] .variant--cubist-lock .cubist-plane--m {
  color: var(--c-signal);
  opacity: 1;
  transform: translate(-52%, -53%) scale(1.025);
}

html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--cubist-lock .cubist-plane--b {
  color: var(--c-signal);
  opacity: 1;
  transform: translate(-34%, -16%) scale(1.025);
}

.variant--cubist-lock .auth-stage {
  position: relative;
  z-index: 6;
  border-inline-start: 1px solid var(--line-strong);
  background: var(--c-rear);
  padding-inline: clamp(2rem, 4vw, 4rem);
}

.variant--cubist-lock .field input,
.variant--cubist-lock .check-control input {
  background: var(--c-base);
}

/* Wireframe Core */

.variant--wireframe-core .login-shell {
  grid-template-areas: "auth art";
  grid-template-columns: minmax(22rem, 4fr) minmax(0, 8fr);
}

.variant--wireframe-core .art-stage {
  position: relative;
  isolation: isolate;
  grid-area: art;
  display: block;
  min-height: 100dvh;
  overflow: hidden;
  border-inline-end: 0;
  background: var(--c-base);
  padding: clamp(5.5rem, 9vh, 7rem) clamp(2rem, 4vw, 4rem);
}

.variant--wireframe-core .art-stage::before {
  position: absolute;
  inset: clamp(4rem, 8vw, 8rem);
  border: 1px solid var(--line);
  content: "";
  opacity: 0.45;
  transform: translate(1.5rem, -1.5rem);
}

.variant--wireframe-core .brand-mark,
.variant--wireframe-core .art-name,
.variant--wireframe-core .art-lead {
  position: relative;
  z-index: 4;
}

.variant--wireframe-core .brand-mark {
  width: 36px;
  height: 36px;
}

.variant--wireframe-core .art-name {
  position: absolute;
  top: clamp(5.5rem, 9vh, 7rem);
  right: clamp(2rem, 4vw, 4rem);
  width: 9rem;
  border-block-start: 1px solid var(--line-strong);
  padding-block-start: var(--space-2);
  text-align: end;
}

.variant--wireframe-core .art-lead {
  position: absolute;
  right: clamp(2rem, 4vw, 4rem);
  bottom: clamp(2rem, 4vw, 4rem);
  width: 24ch;
  text-align: end;
}

.variant--wireframe-core .art-slot--wireframe-core {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.wireframe-core {
  position: absolute;
  top: 51%;
  left: 50%;
  width: clamp(23rem, 37vw, 36rem);
  aspect-ratio: 1;
  color: var(--c-graphite);
  transform: translate(-50%, -50%);
}

.core-edge {
  position: absolute;
  z-index: 1;
  display: block;
  height: 2px;
  background: currentcolor;
  color: var(--c-graphite);
  opacity: 0.62;
  transform-origin: left center;
  transition: opacity 180ms ease;
}

.core-edge--front-top {
  top: 26%;
  left: 18%;
  width: 44%;
}

.core-edge--front-right {
  top: 26%;
  left: 62%;
  width: 46%;
  transform: rotate(90deg);
}

.core-edge--front-bottom {
  top: 72%;
  left: 18%;
  width: 44%;
}

.core-edge--front-left {
  top: 26%;
  left: 18%;
  width: 46%;
  transform: rotate(90deg);
}

.core-edge--depth-left,
.core-edge--depth-right,
.core-edge--depth-entry {
  width: 27.2%;
  transform: rotate(-36deg);
}

.core-edge--depth-left {
  top: 26%;
  left: 18%;
}

.core-edge--depth-right {
  top: 26%;
  left: 62%;
}

.core-edge--depth-entry {
  top: 72%;
  left: 62%;
}

.core-edge--back-top {
  top: 10%;
  left: 40%;
  width: 44%;
}

.core-edge--back-right {
  top: 10%;
  left: 84%;
  width: 46%;
  transform: rotate(90deg);
}

.core-node {
  position: absolute;
  z-index: 3;
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentcolor;
  background: var(--c-base);
  color: var(--c-graphite);
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.core-node::after {
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  color: currentcolor;
  content: attr(data-node-label);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.core-node--identity {
  top: 26%;
  left: 18%;
}

.core-node--credential {
  top: 26%;
  left: 62%;
}

.core-node--entry {
  top: 56%;
  left: 84%;
}

html[data-auth-state="email-active"] .variant--wireframe-core .core-node--identity,
html[data-auth-state="password-active"] .variant--wireframe-core .core-node--credential,
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--wireframe-core .core-node--entry {
  color: var(--c-signal);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
}

html[data-auth-state="password-active"] .variant--wireframe-core .core-node--identity,
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--wireframe-core .core-node:is(.core-node--identity, .core-node--credential) {
  color: var(--c-text);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

html[data-auth-state="email-active"] .variant--wireframe-core .core-edge:is(.core-edge--front-left, .core-edge--depth-left),
html[data-auth-state="password-active"] .variant--wireframe-core .core-edge:is(.core-edge--front-top, .core-edge--depth-right),
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--wireframe-core .core-edge:is(.core-edge--depth-entry, .core-edge--back-right) {
  color: var(--c-signal);
  opacity: 1;
}

html[data-auth-state="password-active"] .variant--wireframe-core .core-edge:is(.core-edge--front-left, .core-edge--depth-left),
html:is([data-auth-state="busy"], [data-auth-state="success"]) .variant--wireframe-core .core-edge:not(.core-edge--depth-entry, .core-edge--back-right) {
  color: var(--c-text);
  opacity: 0.9;
}

.variant--wireframe-core .auth-stage {
  grid-area: auth;
  border-inline-end: 1px solid var(--line-strong);
  background: var(--c-rear);
  padding-inline: clamp(2rem, 4vw, 4rem);
}

.variant--wireframe-core .field input,
.variant--wireframe-core .check-control input {
  background: var(--c-base);
}

@media (max-width: 767px) {
  .variant--cubist-lock .login-shell,
  .variant--wireframe-core .login-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .variant--cubist-lock .art-stage {
    min-height: 17rem;
    padding: 4.75rem var(--space-3) var(--space-3);
  }

  .variant--cubist-lock .brand-mark {
    width: 28px;
    height: 28px;
    margin-block-end: var(--space-2);
  }

  .variant--cubist-lock .art-name {
    width: auto;
  }

  .variant--cubist-lock .art-lead {
    display: none;
  }

  .cubist-stack {
    inset: 8.5rem var(--space-3) var(--space-3);
    display: grid;
    align-content: start;
    gap: 0.375rem;
  }

  .cubist-plane {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 3.25rem;
    align-items: center;
    font-size: 2.75rem;
    line-height: 1;
    padding-inline: var(--space-2);
  }

  .cubist-plane--h {
    transform: translateX(0);
  }

  .cubist-plane--m {
    width: calc(100% - 0.75rem);
    transform: translateX(0.75rem);
  }

  .cubist-plane--b {
    width: calc(100% - 1.5rem);
    transform: translateX(1.5rem);
  }

  html[data-auth-state] .variant--cubist-lock .cubist-plane--h {
    transform: translateX(0);
  }

  html[data-auth-state] .variant--cubist-lock .cubist-plane--m {
    transform: translateX(0.75rem);
  }

  html[data-auth-state] .variant--cubist-lock .cubist-plane--b {
    transform: translateX(1.5rem);
  }

  .variant--cubist-lock .auth-stage,
  .variant--wireframe-core .auth-stage {
    padding: var(--space-4) var(--space-3);
  }

  .variant--wireframe-core .login-shell {
    grid-template-areas:
      "art"
      "auth";
  }

  .variant--wireframe-core .art-stage {
    min-height: 17.5rem;
    padding: 4.75rem var(--space-3) var(--space-3);
  }

  .variant--wireframe-core .art-stage::before {
    inset: 4rem var(--space-3) var(--space-3);
    transform: translate(0.5rem, -0.5rem);
  }

  .variant--wireframe-core .brand-mark {
    width: 28px;
    height: 28px;
  }

  .variant--wireframe-core .art-name {
    top: 4.75rem;
    right: var(--space-3);
    width: 8rem;
  }

  .variant--wireframe-core .art-lead {
    display: none;
  }

  .wireframe-core {
    top: 58%;
    left: 48%;
    width: min(82vw, 19rem);
  }

  .core-node::after {
    font-size: 0.5rem;
  }
}

/* Instrument Bay */

.instrument-layout {
  grid-template-areas:
    "top top top"
    "modes object help";
  grid-template-columns: minmax(11rem, 1fr) minmax(0, 4fr) minmax(8rem, 0.75fr);
  grid-template-rows: 5.25rem minmax(0, 1fr);
  background: var(--c-base);
}

.instrument-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block-end: 1px solid var(--line-strong);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0 clamp(1rem, 3vw, 3rem) 0 clamp(9rem, 11vw, 10rem);
}

.instrument-top span {
  color: var(--c-signal);
}

.instrument-modes {
  grid-area: modes;
  display: grid;
  align-content: center;
  gap: 0;
  border-inline-end: 1px solid var(--line);
  color: var(--c-graphite);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.instrument-modes > * {
  display: block;
  border-block-end: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 3rem);
}

.instrument-modes b {
  border-block-start: 1px solid var(--line);
  color: var(--c-text);
}

.instrument-object {
  position: relative;
  grid-area: object;
  min-height: 0;
  border-inline-end: 1px solid var(--line);
  background: var(--c-rear);
  padding: clamp(2rem, 5vw, 5rem);
}

.instrument-object::before,
.instrument-object::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.instrument-object::before {
  inset: clamp(1rem, 2vw, 2rem);
  border: 1px solid var(--line);
}

.instrument-object::after {
  top: 50%;
  right: clamp(1rem, 2vw, 2rem);
  left: clamp(1rem, 2vw, 2rem);
  height: 1px;
  background: var(--line);
}

.instrument-object .auth-form,
.instrument-object .recovery-form,
.instrument-object .success-view,
.instrument-object .form-status:not(:empty) {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.instrument-object .field input,
.instrument-object .check-control input {
  background: var(--c-base);
}

.instrument-axis {
  position: absolute;
  z-index: 1;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  color: var(--c-graphite);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.instrument-help {
  grid-area: help;
  align-self: stretch;
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 2.2;
  padding: clamp(1rem, 3vw, 3rem) var(--space-3);
  writing-mode: vertical-rl;
}

/* Overprint Monolith */

.monolith-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 2fr) minmax(22.5rem, 1fr);
  height: 100dvh;
  min-height: 0;
  background: var(--c-base);
}

.monolith-word {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: end;
  overflow: hidden;
  border-block-end: 1px solid var(--line-strong);
  background: var(--c-rear);
  color: var(--c-graphite);
  font-size: clamp(18rem, 41vw, 42rem);
  font-weight: 800;
  letter-spacing: -0.11em;
  line-height: 0.58;
  white-space: nowrap;
}

.monolith-band {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: stretch;
  background: var(--c-base);
  padding: var(--space-3) clamp(1rem, 6vw, 8rem);
}

.monolith-band .auth-form,
.monolith-band .recovery-form,
.monolith-band .success-view,
.monolith-band .form-status:not(:empty) {
  width: min(100%, 45rem);
  margin-inline: auto;
}

.monolith-band .auth-form,
.monolith-band .recovery-form {
  gap: 0.375rem;
}

.monolith-band .auth-form h1,
.monolith-band .recovery-form h2,
.monolith-band .success-view h2 {
  max-width: none;
  font-size: clamp(1.75rem, 2.65vw, 2.5rem);
}

.monolith-band .field-heading .text-action {
  min-height: auto;
}

.monolith-band .field-help {
  display: none;
}

.monolith-band .field input,
.monolith-band .check-control input {
  background: var(--c-rear);
}

@media (max-width: 767px) {
  .instrument-layout {
    grid-template-areas:
      "top"
      "modes"
      "object"
      "help";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 4.25rem auto minmax(0, 1fr) auto;
  }

  .instrument-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-end: 1px solid var(--line);
    border-inline-end: 0;
  }

  .instrument-modes > * {
    border-block: 0;
    border-inline-end: 1px solid var(--line);
    font-size: 0.5625rem;
    padding: var(--space-2);
  }

  .instrument-modes > :last-child {
    border-inline-end: 0;
  }

  .instrument-object {
    min-height: 36rem;
    border-inline-end: 0;
    padding: var(--space-4) var(--space-3);
  }

  .instrument-help {
    min-height: 3rem;
    border-block-start: 1px solid var(--line);
    font-size: 0.5625rem;
    padding: var(--space-2) var(--space-3);
    writing-mode: horizontal-tb;
  }

  .monolith-layout {
    grid-template-rows: minmax(15rem, 0.9fr) auto;
  }

  .monolith-word {
    font-size: clamp(9rem, 54vw, 14rem);
    line-height: 0.62;
  }

  .monolith-band {
    min-height: 31rem;
    align-content: start;
    padding: var(--space-4) var(--space-3);
  }

  .monolith-band .auth-form,
  .monolith-band .recovery-form {
    gap: var(--space-3);
  }

  .monolith-band .field-help {
    display: block;
  }
}

/* Portal Frame */

.portal-layout {
  grid-template-columns: minmax(0, 7fr) minmax(22rem, 5fr);
  background: var(--c-base);
}

.portal-stage {
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  border-inline-end: 1px solid var(--line-strong);
  background: var(--c-rear);
  padding: clamp(2rem, 7vw, 7rem);
}

.portal-stage::before {
  position: absolute;
  inset: clamp(1rem, 3vw, 3rem);
  border: 1px solid var(--line);
  content: "";
}

.portal-frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(72%, 34rem);
  aspect-ratio: 5 / 6;
  place-items: center;
  border: 2px solid var(--c-text);
  background: var(--c-base);
  transform: scale(1);
  transition: transform 180ms ease;
}

.portal-frame::before {
  position: absolute;
  inset: clamp(1rem, 4vw, 3rem);
  border: 1px solid var(--line-strong);
  content: "";
}

.portal-glyph {
  position: relative;
  z-index: 1;
  color: var(--c-signal);
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.14em;
}

.portal-caption {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 3rem);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

html[data-auth-state="busy"] .portal-frame {
  transform: scale(0.97);
}

.variant--portal-frame .auth-stage,
.variant--node-route .auth-stage {
  background: var(--c-base);
}

.variant--portal-frame .field input,
.variant--portal-frame .check-control input,
.variant--node-route .field input,
.variant--node-route .check-control input {
  background: var(--c-rear);
}

/* Node Route */

.node-layout {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 1fr);
  background: var(--c-base);
}

.node-stage {
  display: grid;
  min-height: 100dvh;
  align-items: center;
  border-inline-end: 1px solid var(--line-strong);
  background: var(--c-rear);
  padding: clamp(2rem, 7vw, 7rem);
}

.node-route {
  display: grid;
  width: min(100%, 32rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-node {
  position: relative;
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 1.15vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.13em;
}

.route-node::before {
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-end: clamp(1rem, 2vw, 1.75rem);
  border: 2px solid currentcolor;
  background: var(--c-rear);
  content: "";
}

.route-node:not(:last-child)::after {
  position: absolute;
  top: calc(50% + 0.45rem);
  left: 0.4rem;
  width: 2px;
  height: calc(50% + 1.95rem);
  background: var(--line-strong);
  content: "";
}

.route-error {
  display: none;
  margin-inline-start: auto;
  color: var(--c-text);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

.route-error::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.5rem;
  background: var(--c-signal);
  content: "";
}

html:is([data-auth-state="initial"], [data-auth-state="email-active"]) .variant--node-route .route-node--identity::before,
html[data-auth-state="password-active"] .variant--node-route .route-node--password::before,
html[data-auth-state="busy"] .variant--node-route .route-node--validation::before,
html[data-auth-state="success"] .variant--node-route .route-node--entry::before,
html[data-auth-state="error"] .variant--node-route .route-node--validation::before {
  border-color: var(--c-signal);
}

html[data-auth-state="password-active"] .variant--node-route .route-node--identity,
html[data-auth-state="busy"] .variant--node-route :is(.route-node--identity, .route-node--password),
html[data-auth-state="success"] .variant--node-route :is(.route-node--identity, .route-node--password, .route-node--validation),
html[data-auth-state="error"] .variant--node-route :is(.route-node--identity, .route-node--password) {
  color: var(--c-text);
}

html:is([data-auth-state="initial"], [data-auth-state="email-active"]) .variant--node-route .route-node--identity::after,
html[data-auth-state="password-active"] .variant--node-route .route-node--identity::after,
html[data-auth-state="busy"] .variant--node-route :is(.route-node--identity, .route-node--password)::after,
html[data-auth-state="success"] .variant--node-route :is(.route-node--identity, .route-node--password, .route-node--validation)::after {
  background: var(--c-signal);
}

html[data-auth-state="error"] .variant--node-route .route-node--validation::after {
  background: var(--c-signal);
}

html[data-auth-state="error"] .variant--node-route .route-error {
  display: inline;
}

@media (max-width: 767px) {
  .portal-layout,
  .node-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-stage,
  .node-stage {
    min-height: 15rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--line-strong);
    padding: var(--space-4) var(--space-3);
  }

  .portal-frame {
    width: min(52%, 11rem);
  }

  .portal-caption {
    display: none;
  }

  .node-route {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .route-node {
    min-width: 0;
    min-height: 6.5rem;
    align-items: end;
    font-size: 0.5rem;
    letter-spacing: 0.07em;
    padding-block-end: var(--space-2);
    writing-mode: vertical-rl;
  }

  .route-node::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.625rem;
    height: 0.625rem;
    margin: 0;
  }

  .route-node:not(:last-child)::after {
    top: 0.25rem;
    left: 0.625rem;
    width: calc(100% - 0.625rem);
    height: 2px;
  }

  .route-error {
    position: absolute;
    top: 1rem;
    right: 0;
    font-size: 0.5rem;
  }
}