:root {
  --bg: #eef4e9;
  --panel: rgba(253, 255, 250, .9);
  --panel-2: rgba(239, 247, 235, .9);
  --green: #7fbd37;
  --mint: #d7f6a6;
  --white: #15271a;
  --muted: #728076;
  --line: rgba(39, 86, 48, .16);
  --dark: #102116;
}

html,
body {
  background-color: #e9f1e5;
}

body {
  color: #15271a;
  background-image:
    linear-gradient(rgba(244, 248, 241, .78), rgba(244, 248, 241, .78)),
    repeating-linear-gradient(90deg, #a9c99a 0 9vw, #bdd7af 9vw 18vw);
  background-attachment: fixed;
}

.noise {
  opacity: .06;
}

.screen,
.hero,
.quiz,
.result,
.share {
  color: #15271a;
  background: transparent;
}

.topbar {
  color: #15271a;
  border-bottom-color: rgba(39, 86, 48, .14);
  background: rgba(247, 250, 244, .9);
  box-shadow: 0 8px 30px rgba(45, 76, 50, .08);
}

.brand,
.top-tag {
  color: #15271a;
}

.theme-toggle {
  color: #4f7f29;
  border-color: rgba(79, 127, 41, .25);
  background: rgba(127, 189, 55, .08);
}

.theme-toggle:hover {
  background: rgba(127, 189, 55, .15);
}

.hero::before,
.quiz::before,
.result::before,
.share::before {
  opacity: .35;
  background:
    linear-gradient(115deg, transparent 0 72%, rgba(79, 141, 50, .06) 72.1% 72.35%, transparent 72.45%),
    radial-gradient(circle at 85% 18%, rgba(127, 189, 55, .13), transparent 28%);
}

.match-status,
.option,
.result-hero,
.profile-card,
.detail-card,
.relationship-grid > div,
.dim-card,
.poster,
.poster-center,
.poster-profile,
.poster-match > div,
.poster-relations > div {
  color: #15271a;
  border-color: rgba(39, 86, 48, .15);
  background: linear-gradient(145deg, rgba(255, 255, 253, .94), rgba(235, 244, 231, .92));
  box-shadow: inset 0 1px 0 #fff, 0 12px 34px rgba(41, 75, 47, .055);
}

.match-status {
  background: rgba(250, 253, 247, .76);
}

.match-status i,
.meta,
.disclaimer,
.quiz-foot,
.top-tag {
  color: #76837a;
}

.hero h1,
.question-wrap h2,
.share-copy h2,
.result .section-title h3,
.chinese-name {
  color: #15271a;
}

.hero h1 em,
.eyebrow,
.q-kicker,
.section-title span,
.detail-card dt,
.relationship-grid span,
.dim-code {
  color: #609b2f;
}

.intro,
.section-lead,
.share-copy > p:not(.eyebrow),
.method-note {
  color: #59685e !important;
}

.primary {
  color: #102116;
  background: #9bdf45;
  box-shadow: 0 10px 28px rgba(104, 160, 48, .14);
}

.secondary,
.share-copy .secondary,
.result .secondary {
  color: #223328;
  border-color: rgba(39, 86, 48, .22);
  background: rgba(255, 255, 255, .48);
}

.option {
  color: #34443a;
}

.option:hover {
  color: #17291c;
  border-color: #7fbd37;
  background: rgba(127, 189, 55, .11);
}

.option strong {
  color: #15271a;
}

.option .letter {
  color: #609b2f;
  border-color: rgba(96, 155, 47, .45);
}

.progress-track,
.dim-card .scale {
  background: rgba(39, 86, 48, .12);
}

.progress-track i,
.dim-card .scale i {
  background: #7fbd37;
}

.result-hero {
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 30%, rgba(127, 189, 55, .13), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 253, .96), rgba(232, 242, 228, .95));
}

.result-hero .code,
.poster-code {
  color: #718077;
  border-color: rgba(39, 86, 48, .17);
  background: rgba(127, 189, 55, .06);
}

.english-name,
.poster-center b {
  color: #609b2f !important;
}

.english-note {
  color: #405047;
  border-left-color: #7fbd37;
}

.character-frame {
  border-color: rgba(39, 86, 48, .15);
  background:
    linear-gradient(rgba(79, 141, 50, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 141, 50, .025) 1px, transparent 1px),
    linear-gradient(155deg, rgba(255, 255, 255, .83), rgba(214, 231, 208, .69));
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: inset 0 0 70px rgba(62, 102, 69, .055);
}

.character-art,
.poster-character {
  filter: drop-shadow(0 16px 18px rgba(49, 75, 53, .15));
}

.hero-catchphrase {
  color: #35443a;
  border-color: rgba(39, 86, 48, .13);
  border-left-color: #7fbd37;
  background: rgba(252, 254, 249, .86);
}

.hero-catchphrase small {
  color: #609b2f;
}

.profile-card p,
.detail-card dd,
.relationship-grid strong,
.dim-card p {
  color: #3f4f45 !important;
}

.card-head {
  border-bottom-color: rgba(39, 86, 48, .13);
}

.card-index {
  color: #fff;
  background: #7fbd37;
}

.card-label,
.dim-card small {
  color: #728076;
}

.detail-card dl {
  background: rgba(39, 86, 48, .12);
}

.detail-card dl > div {
  background: rgba(252, 254, 249, .94);
}

.share-copy .eyebrow {
  color: #609b2f;
}

.poster {
  color: #15271a;
  border-color: rgba(39, 86, 48, .19);
  background:
    linear-gradient(rgba(249, 252, 246, .84), rgba(244, 249, 241, .9)),
    repeating-linear-gradient(90deg, #a9c99a 0 44px, #bdd7af 44px 88px);
  box-shadow: 0 28px 80px rgba(45, 79, 51, .16);
}

.poster::before,
.poster::after {
  border-color: rgba(79, 141, 50, .11);
}

.poster-score,
.poster-top,
.poster-center blockquote,
.poster-bottom {
  border-color: rgba(39, 86, 48, .14);
}

.poster-score,
.poster-top small,
.poster-bottom small {
  color: #728076;
}

.poster-score b {
  color: #102116;
  background: #9bdf45;
}

.poster-top span,
.poster-bottom > span,
.poster-center > p:first-child,
.poster-profile small,
.poster-match small,
.poster-relations small {
  color: #609b2f;
}

.poster-center,
.poster-profile,
.poster-match > div,
.poster-relations > div {
  background: rgba(255, 255, 253, .85);
}

.poster-center h3 {
  color: #15271a;
}

.poster-center blockquote,
.poster-profile p,
.poster-match strong,
.poster-relations strong {
  color: #3f4f45;
}

.poster-english-note {
  color: #718077 !important;
}

@media (max-width: 760px) {
  body {
    background-attachment: scroll;
    background-image:
      linear-gradient(rgba(244, 248, 241, .78), rgba(244, 248, 241, .8)),
      repeating-linear-gradient(90deg, #a9c99a 0 72px, #bdd7af 72px 144px);
  }
}