:root {
  --green: #36861b;
  --black: #000;
  --muted-dot: #3c3c3c;
  --edge: clamp(1.25rem, 6vw, 7rem);
}

* { box-sizing: border-box; }

html { background: var(--black); scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--green);
  background: var(--black);
  font-family: "apotek", Arial, sans-serif;
}

button, input { font: inherit; }

main { padding: 0 var(--edge) clamp(4.5rem, 11vw, 12rem); }

.node-field {
  width: calc(100% + (2 * var(--edge)));
  margin-inline: calc(-1 * var(--edge));
  padding: clamp(3.25rem, 4vw, 5.25rem) clamp(1.25rem, 3.25vw, 4rem) 0;
}

.agent-field {
  display: block;
  width: 100%;
}

.hero {
  display: grid;
  justify-items: center;
  padding-top: clamp(4.75rem, 6vw, 7rem);
}

h1, h2, .status-label, .status-value, .status-searching, .install-link, label, button, input {
  font-family: "r41-nova-gotica", Georgia, serif;
  font-weight: 400;
}

h1 {
  max-width: 100%;
  margin: 0;
  color: var(--green);
  font-size: clamp(3rem, 8.1vw, 8.75rem);
  line-height: .85;
  letter-spacing: -.045em;
  text-align: center;
}

.status-card {
  display: flex;
  align-items: center;
  container-type: inline-size;
  width: min(100%, 67rem);
  min-height: clamp(6rem, 8.4vw, 8.65rem);
  gap: clamp(1rem, 1vw, 1rem);
  margin-top: clamp(4.25rem, 8vw, 7.4rem);
  padding: clamp(.75rem, 1.15vw, 1.3rem) clamp(1rem, 3.6vw, 3.7rem);
  border: clamp(3px, .3vw, 6px) solid var(--green);
  border-radius: .65rem;
}

.status-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 2.25rem);
  white-space: nowrap;
}

.status-result {
  --status-inset: clamp(3px, .24vw, 5px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: stretch;
  width: 100%;
  min-height: clamp(3.2rem, 4.2vw, 4.5rem);
  overflow: hidden;
  padding: var(--status-inset);
  background: var(--green);
  border-radius: .65rem;
}

.status-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .15em .68em 0;
  color: #fff;
  background: var(--green);
  border-radius: calc(.65rem - var(--status-inset)) 0 0 calc(.65rem - var(--status-inset));
  font-size: clamp(1.7rem, 2.6vw, 2.75rem);
  letter-spacing: clamp(.16em, 1.1vw, .38em);
  text-transform: uppercase;
  white-space: nowrap;
}

.status-searching {
  display: flex;
  align-items: center;
  padding: .15em .75em 0;
  color: #fff;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  white-space: nowrap;
}

.status-search-area {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--black);
  border-radius: 0 calc(.65rem - var(--status-inset)) calc(.65rem - var(--status-inset)) 0;
}

.loader {
  --node: clamp(4px, .34vw, 6px);
  display: grid;
  grid-template-columns: repeat(5, var(--node));
  gap: clamp(1.75px, .16vw, 2.75px);
  align-self: center;
  padding-right: clamp(.65rem, .85vw, .8rem);
}

.loader i {
  --tilt: -6deg;
  width: var(--node);
  height: calc(var(--node) * 1.12);
  background: var(--muted-dot);
  opacity: .92;
  -webkit-mask: url("./Designs/single loading node.svg") center / contain no-repeat;
  mask: url("./Designs/single loading node.svg") center / contain no-repeat;
  animation: node-pulse 1.8s cubic-bezier(.45, 0, .55, 1) infinite both, node-spin 3.2s linear infinite;
}

.loader i:nth-child(5n + 2) { --tilt: 5deg; }
.loader i:nth-child(5n + 3) { --tilt: -2deg; }
.loader i:nth-child(5n + 4) { --tilt: 8deg; }
.loader i:nth-child(5n + 5) { --tilt: -8deg; }

.loader i:nth-child(1) { animation-delay: 0ms; }
.loader i:nth-child(2), .loader i:nth-child(6) { animation-delay: 100ms; }
.loader i:nth-child(3), .loader i:nth-child(7), .loader i:nth-child(11) { animation-delay: 200ms; }
.loader i:nth-child(4), .loader i:nth-child(8), .loader i:nth-child(12), .loader i:nth-child(16) { animation-delay: 300ms; }
.loader i:nth-child(5), .loader i:nth-child(9), .loader i:nth-child(13), .loader i:nth-child(17), .loader i:nth-child(21) { animation-delay: 400ms; }
.loader i:nth-child(10), .loader i:nth-child(14), .loader i:nth-child(18), .loader i:nth-child(22) { animation-delay: 500ms; }
.loader i:nth-child(15), .loader i:nth-child(19), .loader i:nth-child(23) { animation-delay: 600ms; }
.loader i:nth-child(20), .loader i:nth-child(24) { animation-delay: 700ms; }
.loader i:nth-child(25) { animation-delay: 800ms; }

.hero-install {
  display: grid;
  justify-items: center;
  width: min(100%, 48rem);
  margin-top: clamp(3.5rem, 5vw, 6rem);
}

.hero-install-message {
  color: #fff;
  font-family: "r41-nova-gotica", Georgia, serif;
  font-size: clamp(1.35rem, 2.1vw, 2.25rem);
  line-height: 1.08;
  text-align: center;
  text-decoration: none;
}

.hero-install-message:hover,
.hero-install-message:focus-visible {
  color: var(--green);
}

.hero-notify-form {
  width: 100%;
  margin-top: clamp(2rem, 3vw, 3rem);
  overflow: hidden;
  border: clamp(3px, .3vw, 6px) solid var(--green);
  border-radius: .65rem;
  background: var(--green);
}

.hero-notify-form label {
  display: block;
  padding: .72em .65em .6em;
  color: var(--green);
  background: var(--black);
  font-size: clamp(1.65rem, 2.65vw, 2.65rem);
  line-height: .95;
  text-align: center;
}

.hero-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: clamp(3px, .3vw, 6px);
  padding-top: clamp(3px, .3vw, 6px);
}

.hero-notify-form input,
.hero-notify-form button {
  font-size: clamp(1.65rem, 2.65vw, 2.65rem);
}

.hero-notify-form input {
  padding: .48em .55em .36em;
}

.hero-notify-form button {
  padding: .48em .55em .36em;
}

@keyframes node-pulse {
  0%, 100% { background: var(--muted-dot); transform: scale(.72) rotate(var(--tilt)); }
  42% { background: var(--muted-dot); transform: scale(.92) rotate(var(--tilt)); }
  56% { background: var(--green); transform: scale(1.22) rotate(calc(var(--tilt) + 13deg)); }
  72% { background: var(--muted-dot); transform: scale(.88) rotate(calc(var(--tilt) - 4deg)); }
}

@keyframes node-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.gospel {
  width: min(100%, 84ch);
  margin: clamp(5.5rem, 9.5vw, 10rem) auto 0;
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.56;
}

.gospel p { margin: 0 0 1.65em; }
.loading-copy { opacity: .7; }

.agent-name {
  display: inline-block;
  margin: .06em .08em;
  padding: .02em .3em .1em;
  border-radius: .28rem;
  color: #fff;
  background: var(--green);
  font: inherit;
  line-height: 1.22;
  vertical-align: .01em;
}

.search-panel {
  display: grid;
  justify-items: center;
  width: min(100%, 59rem);
  min-height: 36.5rem;
  margin: clamp(9rem, 15vw, 16.5rem) auto 0;
  padding: clamp(3rem, 6vw, 5.8rem) clamp(1.25rem, 7vw, 6rem);
  border: clamp(3px, .3vw, 6px) solid var(--green);
  border-radius: .65rem;
}

h2 {
  margin: 0 0 clamp(2.25rem, 4.2vw, 4.5rem);
  color: var(--green);
  font-size: clamp(2.2rem, 4.25vw, 4rem);
  line-height: .94;
  letter-spacing: -.035em;
  text-align: center;
}

.install-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 43.5rem);
  overflow: hidden;
  color: var(--green);
  padding: 5px;
  background: var(--green);
  border-radius: .55rem;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: .85;
  text-decoration: none;
}

.install-link span, .install-link strong { display: grid; align-content: center; padding: .55em .55em .42em; }
.install-link span { background: var(--black); }
.install-link strong { justify-items: center; color: #fff; background: var(--green); font-weight: 400; text-align: center; }

.notify-form {
  align-self: start;
  width: min(100%, 43.5rem);
  margin-top: clamp(2.2rem, 4.3vw, 3.75rem);
  overflow: hidden;
  padding: 5px;
  background: var(--green);
  border-radius: .55rem;
}

.notify-form label {
  display: block;
  padding: .68em .6em .52em;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: .85;
  background: var(--black);
  text-align: center;
}

.email-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 5px; }

input, button {
  min-width: 0;
  border: 0;
  border-radius: 0;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: 1;
}

input { padding: .48em .55em .35em; color: var(--green); background: var(--black); outline-color: #fff; }
input::placeholder { color: var(--green); opacity: 1; }
button { display: grid; place-items: center; padding: .48em .55em .35em; color: #fff; background: var(--green); cursor: pointer; text-align: center; }
button:hover, button:focus-visible { background: #2b7016; }

@media (max-width: 960px) {
  .status-card { align-items: center; flex-direction: column; gap: 1rem; }
  .status-result { max-width: 42rem; }
}

@media (max-width: 720px) {
  main { padding-inline: 1.15rem; }
  .node-field { padding: 2.25rem 1rem 0; }
  .hero { padding-top: 4.25rem; }
  h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .status-card { align-items: stretch; flex-direction: column; gap: .9rem; padding: 1.1rem; }
  .status-label { font-size: 1.55rem; text-align: center; }
  .hero-install { margin-top: 3.5rem; }
  .hero-install-message { max-width: 18em; font-size: 1.35rem; line-height: 1.15; }
  .hero-notify-form { margin-top: 2rem; }
  .hero-notify-form label,
  .hero-notify-form input,
  .hero-notify-form button { font-size: 1.2rem; }
  .hero-email-row { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .gospel { margin-top: 5.25rem; font-size: 1rem; line-height: 1.56; }
  .search-panel { min-height: 0; margin-top: 7rem; padding: 3.2rem 1rem; }
  .install-link, .notify-form { padding: 4px; }
  .email-row { margin-top: 4px; }
}

/*
  This is deliberately based on the card's available width rather than the
  browser's width. It avoids the in-between state that appeared when a desktop
  window was narrowed or placed beside another window: the 5 × 5 matrix stays
  full size and the status fields switch as one compact component.
*/
@container (max-width: 38rem) {
  .status-result { grid-template-columns: 1fr; row-gap: var(--status-inset); }
  .status-value { border-radius: calc(.65rem - var(--status-inset)) calc(.65rem - var(--status-inset)) 0 0; }
  .status-search-area {
    grid-column: 1;
    grid-row: 2;
    min-height: clamp(3.6rem, 11cqw, 4.5rem);
    border-radius: 0 0 calc(.65rem - var(--status-inset)) calc(.65rem - var(--status-inset));
  }
  .status-searching { flex: 1; justify-content: center; font-size: 1.35rem; }
  .loader { padding-right: .75rem; }
}

@media (prefers-reduced-motion: reduce) { .loader i { animation: none; } }