:root {
  --n-dw1: #F2CB3A;
  --n-dw2: #EE8A2A;
  --n-dw3: #D9342B;
  --n-dw4: #8A1F6E;
}

:root[data-theme="dark"] {
  --n-dw1: #E2BE45;
  --n-dw2: #F29A3A;
  --n-dw3: #FF6359;
  --n-dw4: #C26AD0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-dw1: #E2BE45;
    --n-dw2: #F29A3A;
    --n-dw3: #FF6359;
    --n-dw4: #C26AD0;
  }
}

.n-wg {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.n-wg-calm {
  margin: 0;
  font: 500 17px/24px Onest, sans-serif;
  color: var(--n-t2);
}

.n-wg-map {
  display: block;
  width: 100%;
  height: auto;
}

.n-wg-ks {
  stroke: var(--n-c);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.n-wg-n {
  fill: var(--n-base);
}

.n-wg-ks > .n-wg-1,
.n-wg-d.n-wg-1 {
  fill: var(--n-dw1);
  background: var(--n-dw1);
}

.n-wg-ks > .n-wg-2,
.n-wg-d.n-wg-2,
.n-wg-d.n-wg-p1 {
  fill: var(--n-dw2);
  background: var(--n-dw2);
}

.n-wg-ks > .n-wg-3,
.n-wg-d.n-wg-3,
.n-wg-d.n-wg-p2 {
  fill: var(--n-dw3);
  background: var(--n-dw3);
}

.n-wg-ks > .n-wg-4,
.n-wg-d.n-wg-4 {
  fill: var(--n-dw4);
  background: var(--n-dw4);
}

.n-wg-me {
  fill: var(--n-t1);
  stroke: var(--n-c);
  stroke-width: 5;
}

.n-wg-src {
  margin: 0;
  font: 400 12px/16px Onest, sans-serif;
  color: var(--n-t3);
}

.n-wg-src a {
  color: inherit;
}

.n-wg-lands {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.n-wg-land {
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--n-rule);
  font: 600 15px/22px Onest, sans-serif;
  color: var(--n-t1);
}

.n-wg-mine {
  padding: 16px 0;
  border-top: 1px solid var(--n-rule);
  border-bottom: 1px solid var(--n-rule);
}

.n-wg-none {
  margin: 0;
  padding: 8px 0;
  font: 400 14px/20px Onest, sans-serif;
  color: var(--n-t2);
}

.n-wg-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.n-wg-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--n-rule);
  color: var(--n-t1);
  text-decoration: none;
}

.n-wg-rows > li:last-child > .n-wg-row {
  border-bottom: 0;
}

.n-wg-d {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--n-base);
  transform: translateY(1px);
}

.n-wg-rl {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.n-wg-k {
  font: 500 15px/20px Onest, sans-serif;
}

.n-wg-s {
  font: 400 13px/18px Onest, sans-serif;
  color: var(--n-t2);
  overflow-wrap: anywhere;
}

.n-wg-kl {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 2px;
  font: 400 13px/20px Onest, sans-serif;
}

.n-wg-kl > a {
  color: var(--n-t2);
}

.n-wg-kl > a[aria-current] {
  font-weight: 600;
  color: var(--n-t1);
}

.n-wg-v {
  flex: none;
  font: 500 14px/20px Onest, sans-serif;
  color: var(--n-t2);
}

@media (max-width: 760px) {
  .n-wg {
    max-width: none;
  }
}