:root {
  color-scheme: dark;
  --ink: #0b0e0b;
  --paper: #f0f2eb;
  --muted: #a2a89c;
  --signal: #a9ee00;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--ink); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
}

.backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 48%, rgba(73, 94, 36, .15), transparent 40%),
    linear-gradient(112deg, #0b0e0b 4%, #0e120e 52%, #0c100c 100%);
}

.backdrop__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 73% 42%, rgba(154, 195, 64, .085), transparent 30%);
}

.backdrop__scene {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: min(87vw, 1500px);
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  opacity: .88;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 17%, #000 52%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 17%, #000 52%);
}

.backdrop__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,14,11,.92) 0%, rgba(11,14,11,.64) 42%, rgba(11,14,11,.08) 82%),
    linear-gradient(0deg, rgba(11,14,11,.92) 0%, transparent 30%, rgba(11,14,11,.32) 100%);
}

.backdrop__contours {
  position: absolute;
  inset: 0;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='420' viewBox='0 0 620 420'%3E%3Cg fill='none' stroke='%2399a487' stroke-opacity='.34' stroke-width='.75'%3E%3Cpath d='M-30 76C54 25 89 28 151 54s94 31 145-1 100-33 160 1 106 23 189-12'/%3E%3Cpath d='M-30 91C53 40 91 43 149 69s96 31 149-1 98-32 157 1 107 24 189-12'/%3E%3Cpath d='M-30 107C51 56 93 58 148 84s98 32 153 0 96-31 154 1 108 24 189-12'/%3E%3Cpath d='M-20 282c66-42 129-49 186-20s93 44 148 20 102-59 159-32 83 44 167 21'/%3E%3Cpath d='M-19 298c67-43 130-51 187-22s93 44 148 20 102-59 159-32 83 44 167 21'/%3E%3Cpath d='M-18 315c68-44 131-53 188-24s94 44 149 20 101-58 158-31 83 43 167 20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 920px 620px;
  -webkit-mask-image: linear-gradient(90deg, transparent 24%, rgba(0,0,0,.35) 56%, #000 92%);
  mask-image: linear-gradient(90deg, transparent 24%, rgba(0,0,0,.35) 56%, #000 92%);
  mix-blend-mode: soft-light;
}

.page-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100% - 112px, 1480px);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  border-bottom: 1px solid rgba(222, 231, 211, .14);
  color: rgba(239, 242, 235, .74);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2em;
}

.topbar__mark {
  width: 8px;
  height: 8px;
  background: var(--signal);
  box-shadow: 0 0 14px rgba(169, 238, 0, .42);
  transform: rotate(45deg);
}

.topbar__descriptor { color: rgba(221, 227, 214, .52); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(440px, 620px) 1fr;
  align-items: center;
  flex: 1;
  min-height: 610px;
  padding-block: 52px 66px;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding-bottom: 12px;
}

.hero__logo {
  display: block;
  width: min(100%, 540px);
  height: auto;
  margin: 0 0 18px -7px;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.22));
}

.hero__tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .38em;
  margin: 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.8;
}

.hero__tagline span:not(:last-child)::after {
  content: "/";
  margin-left: .38em;
  color: var(--signal);
  opacity: .9;
}

.hero__rule {
  width: 47px;
  height: 2px;
  margin: 23px 0 20px;
  background: var(--signal);
  box-shadow: 0 0 16px rgba(169, 238, 0, .2);
}

.hero__description {
  max-width: 525px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: .008em;
}

.hero__question {
  margin: 7px 0 0;
  color: var(--paper);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .015em;
}

.status {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  min-height: 54px;
  margin-top: 36px;
  padding: 0 17px;
  border: 1px solid rgba(195, 208, 178, .24);
  background: linear-gradient(100deg, rgba(25, 32, 22, .66), rgba(18, 23, 17, .28));
  box-shadow: 0 10px 35px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(8px);
}

.status__light {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(169, 238, 0, .75), 0 0 22px rgba(169, 238, 0, .25);
}

.status__label {
  color: #e5e9df;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border-top: 1px solid rgba(222, 231, 211, .12);
  color: rgba(216, 222, 207, .48);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .055em;
}

.footer__signature {
  color: rgba(216, 222, 207, .32);
  font-size: 8px;
  letter-spacing: .16em;
}

@media (min-width: 1500px) {
  .hero { grid-template-columns: minmax(520px, 660px) 1fr; }
}

@media (max-width: 900px) {
  .page-shell { width: min(100% - 64px, 1480px); }
  .hero { grid-template-columns: minmax(380px, 1fr) .45fr; }
  .backdrop__scene { right: -18%; width: 105vw; opacity: .76; }
  .backdrop__shade {
    background:
      linear-gradient(90deg, rgba(11,14,11,.9), rgba(11,14,11,.55) 70%, rgba(11,14,11,.18)),
      linear-gradient(0deg, rgba(11,14,11,.96), transparent 50%, rgba(11,14,11,.26));
  }
}

@media (max-width: 620px) {
  .page-shell { width: calc(100% - 42px); }
  .topbar { height: 64px; font-size: 9px; }
  .topbar__descriptor { font-size: 8px; letter-spacing: .1em; }
  .hero {
    display: flex;
    align-items: center;
    min-height: 0;
    padding-block: 56px 64px;
  }
  .hero__copy { max-width: 100%; padding: 8px 0 0; }
  .hero__logo { width: min(100%, 500px); margin: 0 0 18px -5px; }
  .hero__tagline { gap: 0 .3em; font-size: clamp(11px, 3.3vw, 14px); letter-spacing: .09em; }
  .hero__tagline span:not(:last-child)::after { margin-left: .3em; }
  .hero__rule { margin: 20px 0 16px; }
  .hero__description { font-size: 16px; line-height: 1.72; }
  .hero__question { font-size: 16px; }
  .status { min-width: 0; width: 100%; max-width: 330px; margin-top: 29px; padding-inline: 14px; gap: 11px; }
  .status__label { font-size: 9px; letter-spacing: .1em; }
  .backdrop__scene { right: -76%; width: 160vw; opacity: .6; }
  .backdrop__shade {
    background:
      linear-gradient(90deg, rgba(11,14,11,.82), rgba(11,14,11,.34)),
      linear-gradient(0deg, rgba(11,14,11,.98) 0%, rgba(11,14,11,.58) 40%, rgba(11,14,11,.46) 100%);
  }
  .backdrop__contours { opacity: .065; }
  .footer { min-height: 55px; font-size: 8px; }
  .footer__signature { display: none; }
}

@media (max-width: 360px) {
  .page-shell { width: calc(100% - 34px); }
  .status { gap: 9px; }
  .status__label { font-size: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .status__light { animation: signal-pulse 3.4s ease-in-out infinite; }
  @keyframes signal-pulse {
    0%, 100% { opacity: .78; box-shadow: 0 0 8px rgba(169, 238, 0, .52); }
    50% { opacity: 1; box-shadow: 0 0 12px rgba(169, 238, 0, .88), 0 0 24px rgba(169, 238, 0, .28); }
  }
}