@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --muted: #3A4F5C;
  --line: rgba(44, 74, 53, 0.22);
  --panel: #ffffff;
  --soft: #ebe7da;
  --accent-dark: #2C4A35;
  --focus: rgba(139, 158, 110, 0.34);
}

body {
  line-height: 1.55;
}

.centered {
  padding-top: 122px;
  background:
    linear-gradient(100deg, rgba(247, 246, 241, 0.96), rgba(247, 246, 241, 0.78) 58%, rgba(44, 74, 53, 0.09)),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(44, 74, 53, 0.07) 73px 74px),
    linear-gradient(135deg, #f8f7f2, #d9ddcf);
}

.centered::before {
  top: 28px;
  width: min(360px, calc(100vw - 48px));
  height: 72px;
}

.panel,
.sign-panel,
.viewer {
  border-color: rgba(44, 74, 53, 0.22);
}

.panel {
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #2C4A35 0 50%, #8B9E6E 50% 76%, #3A4F5C 76%);
}

.eyebrow {
  color: #3A4F5C;
  font-weight: 700;
  letter-spacing: 0.12em;
}

h1,
h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  line-height: 1.08;
}

h1 {
  max-width: 14ch;
}

input {
  border-color: rgba(44, 74, 53, 0.3);
}

button,
.button-link {
  min-height: 48px;
  border-color: #2C4A35;
  background: #2C4A35;
}

button:hover,
.button-link:hover {
  border-color: #3A4F5C;
  background: #3A4F5C;
}

.topbar {
  min-height: 104px;
  background-size: 230px auto;
  box-shadow: 0 8px 26px rgba(23, 32, 25, 0.08);
}

.topbar > div {
  padding-left: 264px;
}

.viewer {
  background: #172019;
}

.sign-panel {
  border-top: 5px solid #8B9E6E;
}

canvas {
  border-color: rgba(44, 74, 53, 0.3);
}

@media (max-width: 760px) {
  .topbar {
    padding-top: 92px;
    background-position: 18px 20px;
    background-size: min(300px, calc(100vw - 36px)) auto;
  }

  .topbar > div {
    padding-left: 0;
  }
}