:root {
  --bg: #09090a;
  --panel: #0d0d0f;
  --line: #29292d;
  --line-soft: #1b1b1e;
  --text: #eeeeea;
  --muted: #85858b;
  --muted2: #5e5e64;
  --bone: #e7e4dc;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-shell {
  flex: 1;
  min-height: calc(100vh - 46px);
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(420px, .75fr);
}

.identity {
  position: relative;
  padding: 44px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.ward-wordmark {
  font-size: 11px;
  letter-spacing: .34em;
  font-weight: 650;
  color: #a0a0a5;
}

.identity-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-bottom: 46px;
}

.eyebrow {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .24em;
  margin-bottom: 20px;
}

.identity h1 {
  margin: 0;
  font-weight: 520;
  font-size: clamp(72px, 9vw, 150px);
  line-height: .82;
  letter-spacing: -.055em;
}

.identity h2 {
  margin:
    30px
    0
    9px;
  font-size: 19px;
  font-weight: 430;
  letter-spacing: .025em;
}

.identity p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .055em;
}

.mark {
  position: absolute;
  right: -70px;
  top: 50%;
  width: 440px;
  height: 440px;
  transform: translateY(-50%);
  opacity: .24;
}

.mark span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%);
  font-size: 19px;
  letter-spacing: .25em;
}

.trace {
  position: absolute;
  border: 1px solid #77777c;
  transform-origin: center;
}

.trace-a {
  width: 320px;
  height: 1px;
  top: 185px;
  left: 32px;
  transform: rotate(31deg);
}

.trace-b {
  width: 300px;
  height: 1px;
  top: 235px;
  left: 70px;
  transform: rotate(-37deg);
}

.trace-c {
  width: 1px;
  height: 310px;
  top: 55px;
  left: 220px;
  transform: rotate(11deg);
}

.auth-panel {
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px;
}

.auth-inner {
  width: 100%;
  max-width: 390px;
}

.status-line {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 58px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bone);
}

.auth-panel h3 {
  margin: 0;
  font-weight: 450;
  font-size: 31px;
  letter-spacing: -.025em;
}

.instruction {
  margin:
    10px
    0
    36px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

label {
  display: block;
  margin:
    19px
    0
    8px;
  color: #85858a;
  font-size: 9px;
  letter-spacing: .18em;
}

input {
  width: 100%;
  height: 48px;
  border: 1px solid #343438;
  outline: none;
  background: #0a0a0c;
  color: var(--text);
  padding: 0 14px;
  font-size: 14px;
}

input:focus {
  border-color: #727278;
}

button {
  width: 100%;
  height: 49px;
  margin-top: 28px;
  background: var(--bone);
  color: #09090a;
  border: none;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 700;
}

button:hover {
  background: #f5f3ed;
}

.auth-error {
  border-left: 1px solid #aaa;
  margin-bottom: 22px;
  padding: 8px 11px;
  color: #b5b5b9;
  font-size: 11px;
}

.security-note {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  margin-top: 33px;
  display: flex;
  justify-content: space-between;
  color: var(--muted2);
  font-size: 8px;
  letter-spacing: .12em;
}

footer {
  height: 46px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  color: #55555a;
  font-size: 8px;
  letter-spacing: .18em;
}

@media (
  max-width: 850px
) {

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .identity {
    min-height: 280px;
    border-right: none;
    border-bottom:
      1px solid var(--line);
  }

  .identity h1 {
    font-size: 72px;
  }

  .mark {
    width: 300px;
    height: 300px;
    right: -100px;
  }

  .auth-panel {
    padding: 42px 28px;
  }
}