:root {
  --gold: #d8b45f;
  --gold-soft: #ffe6a3;
  --gold-bright: #fff0bd;
  --violet: #7f4bd8;
  --cyan: #4ec7d5;
  --text: #eee2f8;
  --muted: #b9acc6;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #030406;
  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans SC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: var(--text);
}


body {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
}

.page {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background-image: var(--bg-image);
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

.page-6button {
  --bg-image: url("../image/bg-base-6button.jpg");
  --content-left: 7.1%;
  --content-right: 7.1%;
  --content-top: 7.0%;
  --content-bottom: 23.2%;
}

.page-8button {
  --bg-image: url("../image/bg-original-8button.jpg");
  --content-left: 7.0%;
  --content-right: 7.0%;
  --content-top: 7.0%;
  --content-bottom: 23.2%;
}

.page-0button {
  --bg-image: url("../image/bg-base-0button.jpg");
  --content-left: 7.3%;
  --content-right: 7.3%;
  --content-top: 7.2%;
  --content-bottom: 7.3%;
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 22%, rgba(185, 115, 255, .045), transparent 32%),
    radial-gradient(circle at 48% 72%, rgba(195, 90, 255, .035), transparent 30%);
}

.content-wrap {
  position: absolute;
  z-index: 2;
  left: var(--content-left);
  right: var(--content-right);
  top: var(--content-top);
  bottom: var(--content-bottom);
  padding: clamp(9px, 2.6vw, 18px);
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.lh-star-layer {
  position: absolute;
  inset: clamp(9px, 2.6vw, 18px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  border-radius: 16px;
  contain: layout paint style;
}

.lh-star-node {
  position: absolute;
  display: block;
  width: var(--size, 4px);
  height: var(--size, 4px);
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.lh-star-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: .22;
  transform: scale(.86);
  will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255, 244, 205, .98) 0%, rgba(255, 230, 163, .92) 34%, rgba(138, 216, 255, .42) 72%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 8px rgba(255, 232, 168, .26);
  animation: lhStarTwinkle var(--twinkle, 4.8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.lh-star-cyan .lh-star-dot {
  background: radial-gradient(circle, rgba(209, 245, 255, .98) 0%, rgba(126, 214, 255, .84) 38%, rgba(126, 214, 255, .18) 74%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 8px rgba(92, 196, 255, .22);
}

.lh-star-violet .lh-star-dot {
  background: radial-gradient(circle, rgba(241, 226, 255, .98) 0%, rgba(192, 154, 255, .82) 38%, rgba(192, 154, 255, .18) 74%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 8px rgba(172, 132, 255, .18);
}

.lh-drift-1 {
  animation: lhStarDrift1 var(--drift, 12s) cubic-bezier(.37, .02, .35, 1) infinite alternate;
  animation-delay: var(--delay, 0s);
}

.lh-drift-2 {
  animation: lhStarDrift2 var(--drift, 14s) cubic-bezier(.22, .61, .36, 1) infinite alternate;
  animation-delay: var(--delay, 0s);
}

.lh-drift-3 {
  animation: lhStarDrift3 var(--drift, 16s) cubic-bezier(.48, .01, .28, .99) infinite alternate;
  animation-delay: var(--delay, 0s);
}

.lh-drift-4 {
  animation: lhStarDrift4 var(--drift, 18s) cubic-bezier(.17, .84, .44, 1) infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes lhStarDrift1 {
  0% { transform: translate3d(0, 0, 0); }
  19% { transform: translate3d(var(--dx1, 7px), var(--dy1, -5px), 0); }
  43% { transform: translate3d(var(--dx2, -9px), var(--dy2, 8px), 0); }
  71% { transform: translate3d(var(--dx3, 5px), var(--dy3, 11px), 0); }
  100% { transform: translate3d(var(--dx4, -6px), var(--dy4, -7px), 0); }
}

@keyframes lhStarDrift2 {
  0% { transform: translate3d(0, 0, 0); }
  27% { transform: translate3d(var(--dx2, -8px), var(--dy1, 6px), 0); }
  52% { transform: translate3d(var(--dx3, 10px), var(--dy3, -8px), 0); }
  83% { transform: translate3d(var(--dx1, 4px), var(--dy4, 10px), 0); }
  100% { transform: translate3d(var(--dx4, -10px), var(--dy2, -4px), 0); }
}

@keyframes lhStarDrift3 {
  0% { transform: translate3d(0, 0, 0); }
  21% { transform: translate3d(var(--dx3, 6px), var(--dy2, 9px), 0); }
  46% { transform: translate3d(var(--dx1, -6px), var(--dy4, -11px), 0); }
  69% { transform: translate3d(var(--dx4, 11px), var(--dy1, 4px), 0); }
  100% { transform: translate3d(var(--dx2, -8px), var(--dy3, 7px), 0); }
}

@keyframes lhStarDrift4 {
  0% { transform: translate3d(0, 0, 0); }
  16% { transform: translate3d(var(--dx4, -5px), var(--dy3, -7px), 0); }
  39% { transform: translate3d(var(--dx1, 10px), var(--dy2, 5px), 0); }
  64% { transform: translate3d(var(--dx2, -6px), var(--dy4, 12px), 0); }
  100% { transform: translate3d(var(--dx3, 8px), var(--dy1, -9px), 0); }
}

@keyframes lhStarTwinkle {
  0%, 100% {
    opacity: .14;
    transform: scale(.78);
  }
  18% {
    opacity: .32;
    transform: scale(1.00);
  }
  37% {
    opacity: .78;
    transform: scale(1.28);
  }
  58% {
    opacity: .28;
    transform: scale(.88);
  }
  79% {
    opacity: .62;
    transform: scale(1.13);
  }
}

.content-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  padding: clamp(12px, 3.2vw, 24px);
  line-height: 1.78;
  font-size: clamp(14px, 3.45vw, 19px);
  letter-spacing: .035em;
  color: var(--text);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .92),
    0 0 12px rgba(143, 75, 255, .24);
  border: none;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
}


.content-scroll h1,
.content-scroll h2,
.content-scroll h3 {
  margin: 0 0 .55em;
  line-height: 1.25;
  color: #f7d88d;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .92),
    0 0 16px rgba(215, 174, 97, .22);
}

.content-scroll h1 {
  font-size: clamp(20px, 5.2vw, 30px);
  text-align: center;
  letter-spacing: .12em;
}

.content-scroll h2 {
  font-size: clamp(18px, 4.6vw, 25px);
}

.content-scroll h3 {
  font-size: clamp(16px, 4vw, 22px);
}

.content-scroll p {
  margin: 0 0 .85em;
}

.content-scroll a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  max-width: 100%;
  margin: 1px 1px;
  padding: .03em .34em .05em;
  border-radius: 8px;
  color: var(--gold-soft);
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(216, 180, 95, .14), rgba(127, 75, 216, .07));
  border: 1px solid rgba(216, 180, 95, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.content-scroll a:hover,
.content-scroll a:active,
.content-scroll a.lh-press-pop {
  color: #ffffff;
  border-color: rgba(255, 230, 163, .58);
  background: linear-gradient(180deg, rgba(216, 180, 95, .25), rgba(127, 75, 216, .14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 14px rgba(216, 180, 95, .16);
}

.content-scroll img,
.content-scroll a > img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin: .28em .32em;
  border-radius: 12px;
  border: 1px solid rgba(216, 180, 95, .30);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .34),
    0 0 18px rgba(127, 75, 216, .16);
}

.content-scroll a.image-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.content-scroll a.image-link > img {
  margin: 8px auto;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease;
}

.content-scroll a.image-link:active > img,
.content-scroll a.image-link.lh-press-pop > img {
  transform: scale(.985);
  filter: brightness(1.1);
  box-shadow:
    0 7px 18px rgba(0, 0, 0, .38),
    0 0 24px rgba(216, 180, 95, .24);
}

.content-scroll input,
.content-scroll textarea,
.content-scroll select {
  width: 100%;
  max-width: 100%;
  min-height: 2.55em;
  margin: .35em 0 .75em;
  padding: .45em .72em;
  border-radius: 10px;
  border: 1px solid rgba(216, 180, 95, .42);
  outline: none;
  color: var(--gold-soft);
  font: inherit;
  letter-spacing: .025em;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .26)),
    radial-gradient(circle at 20% 0%, rgba(127, 75, 216, .16), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 14px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(0, 0, 0, .16);
}

.content-scroll input::placeholder,
.content-scroll textarea::placeholder {
  color: rgba(238, 226, 248, .48);
}

.content-scroll input:focus,
.content-scroll textarea:focus,
.content-scroll select:focus {
  border-color: rgba(255, 230, 163, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 14px rgba(0, 0, 0, .32),
    0 0 16px rgba(216, 180, 95, .18),
    0 0 0 1px rgba(255, 230, 163, .12);
}

.content-scroll textarea {
  min-height: 6.5em;
  resize: vertical;
}

.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"] {
  display: inline-flex;
  width: auto;
  min-width: 6.5em;
  min-height: 2.4em;
  align-items: center;
  justify-content: center;
  margin: .35em .35em .7em 0;
  padding: .42em .95em;
  border-radius: 10px;
  border: 1px solid rgba(216, 180, 95, .50);
  color: #ffe9a8;
  font: inherit;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 235, 169, .16), transparent 46%),
    linear-gradient(180deg, rgba(71, 54, 28, .88), rgba(20, 14, 9, .84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -5px 12px rgba(0, 0, 0, .28),
    0 5px 14px rgba(0, 0, 0, .26);
  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.content-scroll button:active,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active {
  transform: translateY(2px) scale(.98);
  filter: brightness(1.12);
  border-color: rgba(255, 230, 163, .72);
}

.content-scroll label {
  display: block;
  margin: .45em 0 .12em;
  color: rgba(255, 230, 163, .86);
}

.content-scroll .form-row {
  display: grid;
  gap: .4em;
  margin: .35em 0 .65em;
}

.content-scroll .lh-divider {
  display: block;
  width: min(64%, 520px);
  height: 1px;
  margin: 9px auto;
  padding: 0;
  line-height: 0;
  font-size: 0;
  clear: none;
  position: relative;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 95, .72), rgba(126, 214, 255, .30), transparent);
  box-shadow: 0 0 7px rgba(216, 180, 95, .14);
}

.content-scroll .lh-divider + br {
  display: none;
}

.button-layer {
  position: absolute;
  z-index: 3;
  display: grid;
  pointer-events: none;
}

.button-layer-6 {
  left: 11.6%;
  right: 11.7%;
  bottom: 3.9%;
  height: 15.8%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 3.9%;
  row-gap: 13.8%;
}

.button-layer-8 {
  left: 11.6%;
  right: 11.6%;
  bottom: 4.1%;
  height: 15.4%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 2.2%;
  row-gap: 13.8%;
}

.button-hit {
  position: relative;
  display: block;
  border-radius: 10px;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform .12s cubic-bezier(.2, .75, .2, 1),
    filter .12s ease,
    box-shadow .12s ease;
  touch-action: manipulation;
}

.button-hit::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 233, 156, .25), transparent 55%),
    linear-gradient(180deg, rgba(255, 224, 142, .16), rgba(87, 54, 18, .12));
  border: 1px solid rgba(255, 221, 139, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 188, .5),
    inset 0 -5px 12px rgba(40, 24, 8, .48),
    0 0 16px rgba(218, 165, 75, .28);
  transition: opacity .12s ease;
}

.button-hit::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 8px;
  height: 2px;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 160, .95), transparent);
  box-shadow: 0 0 10px rgba(250, 218, 128, .8);
  transition: opacity .12s ease;
}

.button-hit:active,
.button-hit.is-pressing {
  transform: translate3d(0, 3px, 0) scale(.974);
  filter: brightness(1.13) saturate(1.04);
}

.button-hit:active::before,
.button-hit:active::after,
.button-hit.is-pressing::before,
.button-hit.is-pressing::after {
  opacity: 1;
}

.button-hit:focus-visible {
  outline: 2px solid rgba(255, 232, 160, .9);
  outline-offset: 3px;
}

.lh-press-pop {
  animation: lhPressPop 260ms cubic-bezier(.22, 1.28, .36, 1) both;
}

@keyframes lhPressPop {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(2px) scale(.94); }
  72% { transform: translateY(-2px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@media (hover: hover) {
  .button-hit:hover::before {
    opacity: .55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lh-star-node,
  .lh-star-dot,
  .lh-press-pop {
    animation: none;
  }

  .button-hit {
    transition: none;
  }
}

@media (max-width: 420px) {
  .content-wrap {
    padding: 8px;
  }

  .lh-star-layer {
    inset: 8px;
  }

  .content-scroll {
    padding: 12px;
    border-radius: 12px;
  }

  .button-hit {
    border-radius: 8px;
  }
}

@supports not (height: 100dvh) {
  html,
  body,
  .page {
    height: 100vh;
    min-height: 100vh;
  }
}


.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-width: auto;
  min-height: 2.12em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: .18em .28em;
  padding: .22em .78em .26em;
  border-radius: 10px;
  border: 1px solid rgba(216, 180, 95, .46);
  color: #ffe9a8;
  font: inherit;
  line-height: 1.32;
  letter-spacing: .05em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(90deg, rgba(255, 232, 158, .06), transparent 16%, transparent 84%, rgba(255, 232, 158, .06)),
    repeating-linear-gradient(135deg, rgba(255, 230, 163, .055) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 50% 12%, rgba(255, 235, 169, .18), transparent 45%),
    linear-gradient(180deg, rgba(59, 47, 28, .90), rgba(16, 13, 10, .88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -4px 10px rgba(0, 0, 0, .32),
    0 4px 12px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .92), 0 0 10px rgba(216, 180, 95, .20);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before {
  content: "";
  position: absolute;
  left: .45em;
  right: .45em;
  top: .22em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 169, .48), transparent);
  pointer-events: none;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop {
  transform: translateY(2px) scale(.985);
  filter: brightness(1.13);
  color: #ffffff;
  border-color: rgba(255, 230, 163, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -4px 10px rgba(0, 0, 0, .26),
    0 0 16px rgba(216, 180, 95, .24);
}


/* 中间内容区文字按键：图片背景 + 立体渐变底纹，自适应文字长度 */
.content-scroll .lh-anchor-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  max-width: 100%;
  margin: .16em .24em;
  padding: 0;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-width: auto;
  min-height: 2.12em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: .16em .24em;
  padding: .24em .82em .28em;
  border-radius: 10px;
  border: 1px solid rgba(216, 180, 95, .50);
  color: #ffe9a8;
  font: inherit;
  line-height: 1.32;
  letter-spacing: .05em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background-image:
    linear-gradient(180deg, rgba(255, 236, 172, .18) 0%, rgba(120, 88, 44, .18) 38%, rgba(12, 10, 8, .30) 100%),
    url("../image/button-text-gold.png");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -5px 10px rgba(0, 0, 0, .34),
    0 4px 12px rgba(0, 0, 0, .28),
    0 0 10px rgba(216, 180, 95, .10);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .96),
    0 0 10px rgba(216, 180, 95, .24);
  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before {
  content: "";
  position: absolute;
  left: .52em;
  right: .52em;
  top: .25em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 179, .62), transparent);
  pointer-events: none;
}

.content-scroll a:not(.image-link)::after,
.content-scroll button::after,
.content-scroll .lh-anchor-submit::after {
  content: "";
  position: absolute;
  left: .58em;
  right: .58em;
  bottom: .26em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .46), transparent);
  pointer-events: none;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop {
  transform: translateY(2px) scale(.985);
  filter: brightness(1.12) saturate(1.04);
  color: #ffffff;
  border-color: rgba(255, 230, 163, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -4px 9px rgba(0, 0, 0, .26),
    0 0 16px rgba(216, 180, 95, .25);
}


/* 滑条：参考右侧金色竖条；默认隐藏，滚动时显示 */
.content-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.content-scroll.is-scrolling {
  scrollbar-color: rgba(226, 190, 101, .92) transparent;
}

.content-scroll::-webkit-scrollbar {
  width: 12px;
}

.content-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.content-scroll::-webkit-scrollbar-thumb {
  min-height: 54px;
  border-radius: 999px;
  border: 3px solid transparent;
  background: transparent;
  background-clip: padding-box;
  box-shadow: none;
}

.content-scroll.is-scrolling::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background:
    linear-gradient(90deg,
      rgba(79, 52, 17, .12) 0%,
      rgba(244, 211, 119, .96) 34%,
      rgba(180, 124, 44, .98) 55%,
      rgba(96, 62, 20, .92) 100%);
  background-clip: padding-box;
  box-shadow:
    inset 1px 0 0 rgba(255, 239, 166, .72),
    inset -1px 0 0 rgba(63, 37, 12, .76),
    0 0 8px rgba(230, 185, 80, .22);
}

.content-scroll.is-scrolling::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(90deg,
      rgba(92, 61, 20, .16) 0%,
      rgba(255, 226, 137, 1) 34%,
      rgba(200, 140, 50, 1) 55%,
      rgba(105, 69, 24, .98) 100%);
  background-clip: padding-box;
}


/* 中间内容区文字按键：精致金属图片背景 + 立体渐变底纹，自适应文字长度 */
.content-scroll .lh-anchor-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  max-width: 100%;
  margin: .14em .22em;
  padding: 0;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-width: auto;
  min-height: 2.18em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: .14em .22em;
  padding: .26em .88em .30em;
  border-radius: 11px;
  border: 1px solid rgba(223, 183, 88, .58);
  color: #ffe9a8;
  font: inherit;
  line-height: 1.32;
  letter-spacing: .055em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background-image:
    linear-gradient(180deg,
      rgba(255, 246, 194, .22) 0%,
      rgba(226, 178, 88, .12) 23%,
      rgba(37, 28, 17, .10) 56%,
      rgba(0, 0, 0, .26) 100%),
    url("../image/button-text-gold.png");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -6px 11px rgba(0, 0, 0, .36),
    0 4px 12px rgba(0, 0, 0, .30),
    0 0 12px rgba(216, 180, 95, .12);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 10px rgba(216, 180, 95, .26);
  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before {
  content: "";
  position: absolute;
  left: .56em;
  right: .56em;
  top: .26em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 178, .74), transparent);
  pointer-events: none;
}

.content-scroll a:not(.image-link)::after,
.content-scroll button::after,
.content-scroll .lh-anchor-submit::after {
  content: "";
  position: absolute;
  left: .62em;
  right: .62em;
  bottom: .27em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop {
  transform: translateY(2px) scale(.985);
  filter: brightness(1.13) saturate(1.06);
  color: #ffffff;
  border-color: rgba(255, 230, 163, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 -4px 9px rgba(0, 0, 0, .28),
    0 0 17px rgba(216, 180, 95, .28);
}


/* 最终覆盖：去掉页面中所有图片、文字按键、表单按键、底部热区按压层的外围边框 */
.content-scroll img,
.content-scroll a > img,
.content-scroll a.image-link > img {
  border: 0 !important;
  outline: 0 !important;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit,
.content-scroll .lh-anchor-form button {
  border: 0 !important;
  outline: 0 !important;
}

.content-scroll input[type="image"] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;
}

.button-hit,
.button-hit::before,
.button-hit::after {
  border: 0 !important;
  outline: 0 !important;
}



/* ===== Revised original theme: aligned bottom buttons, gothic button skin, arcane fog animation ===== */
.page::before {
  content: "";
  position: absolute;
  inset: 5.5% 6.5% 4.8%;
  z-index: 0;
  pointer-events: none;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(82, 140, 255, .18), transparent 24%),
    radial-gradient(ellipse at 24% 34%, rgba(66, 108, 205, .10), transparent 26%),
    radial-gradient(ellipse at 78% 42%, rgba(126, 82, 232, .10), transparent 24%),
    linear-gradient(180deg, rgba(132, 176, 255, .06), rgba(40, 58, 110, .03) 44%, rgba(0, 0, 0, 0) 100%);
  filter: blur(12px) saturate(115%);
  animation: lhFogDrift 26s ease-in-out infinite alternate;
}

.page::after {
  background:
    radial-gradient(circle at 50% 20%, rgba(120, 170, 255, .09), transparent 22%),
    radial-gradient(circle at 48% 72%, rgba(132, 86, 255, .05), transparent 22%),
    radial-gradient(circle at 52% 110%, rgba(16, 10, 32, .48), transparent 36%);
  animation: lhPulseGlow 9s ease-in-out infinite;
}

.content-wrap::before,
.content-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.content-wrap::before {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(88, 158, 255, .07), transparent 30%),
    radial-gradient(ellipse at 50% 78%, rgba(110, 76, 214, .05), transparent 26%);
  filter: blur(18px);
  animation: lhVeilDrift 18s ease-in-out infinite alternate;
}

.content-wrap::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 82%, rgba(255,255,255,.02) 100%);
  opacity: .9;
}

.lh-star-layer {
  inset: 0;
  z-index: 1;
  border-radius: 18px;
  mix-blend-mode: screen;
}

.lh-mist-band {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(24px);
  opacity: .26;
}

.lh-mist-1 {
  left: -6%;
  top: 12%;
  width: 58%;
  height: 18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(76, 144, 255, .26), rgba(76, 144, 255, .08) 54%, rgba(76, 144, 255, 0) 100%);
  animation: lhMistMove1 19s ease-in-out infinite alternate;
}

.lh-mist-2 {
  right: -8%;
  top: 36%;
  width: 52%;
  height: 18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(112, 80, 232, .20), rgba(112, 80, 232, .08) 56%, rgba(112, 80, 232, 0) 100%);
  animation: lhMistMove2 24s ease-in-out infinite alternate;
}

.lh-mist-3 {
  left: 16%;
  bottom: 10%;
  width: 68%;
  height: 16%;
  background: radial-gradient(ellipse at 50% 50%, rgba(90, 126, 255, .14), rgba(90, 126, 255, .04) 52%, rgba(90, 126, 255, 0) 100%);
  animation: lhMistMove3 21s ease-in-out infinite alternate;
}

.lh-star-node {
  opacity: .92;
}

.lh-star-dot {
  border-radius: 50%;
  opacity: .20;
  transform: scale(.82);
  background: radial-gradient(circle, rgba(225, 240, 255, .96) 0%, rgba(110, 184, 255, .78) 30%, rgba(110, 184, 255, .12) 72%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 10px rgba(102, 166, 255, .22), 0 0 18px rgba(121, 88, 255, .10);
  animation: lhStarTwinkle var(--twinkle, 7.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.lh-star-cyan .lh-star-dot {
  background: radial-gradient(circle, rgba(225, 247, 255, .98) 0%, rgba(96, 198, 255, .84) 34%, rgba(96, 198, 255, .12) 72%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 10px rgba(94, 190, 255, .26), 0 0 20px rgba(94, 190, 255, .12);
}

.lh-star-violet .lh-star-dot {
  background: radial-gradient(circle, rgba(244, 234, 255, .98) 0%, rgba(162, 118, 255, .80) 34%, rgba(162, 118, 255, .12) 72%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 10px rgba(162, 118, 255, .22), 0 0 22px rgba(162, 118, 255, .12);
}

.lh-star-large .lh-star-dot {
  opacity: .28;
  filter: blur(.2px);
}

@keyframes lhFogDrift {
  0% { transform: translate3d(-1.2%, -1%, 0) scale(1); opacity: .95; }
  100% { transform: translate3d(1.2%, 1.4%, 0) scale(1.06); opacity: 1; }
}

@keyframes lhPulseGlow {
  0%, 100% { opacity: .92; }
  50% { opacity: 1; }
}

@keyframes lhVeilDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, 1.5%, 0) scale(1.04); }
}

@keyframes lhMistMove1 {
  0% { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(6%, 4%, 0) scale(1.08); }
}

@keyframes lhMistMove2 {
  0% { transform: translate3d(2%, -1%, 0) scale(1); }
  100% { transform: translate3d(-7%, 6%, 0) scale(1.12); }
}

@keyframes lhMistMove3 {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .18; }
  100% { transform: translate3d(3%, -6%, 0) scale(1.08); opacity: .28; }
}

@keyframes lhStarTwinkle {
  0%, 100% { opacity: .16; transform: scale(.72); }
  32% { opacity: .48; transform: scale(1.08); }
  52% { opacity: .74; transform: scale(1.26); }
  78% { opacity: .28; transform: scale(.88); }
}

/* More accurate 8-button hit areas aligned to bg-original-8button.jpg */
.button-layer {
  z-index: 4;
}

.button-layer-8 {
  left: 7.9%;
  right: 7.9%;
  bottom: 3.4%;
  height: 22.4%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 1.5%;
  row-gap: 6.8%;
}

.button-hit {
  border-radius: 18px;
}

.button-hit::before {
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 220, 136, .18), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(112, 82, 255, .16), transparent 54%),
    linear-gradient(180deg, rgba(116, 174, 255, .10), rgba(255, 201, 104, .05));
  border: 1px solid rgba(255, 224, 158, .34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 186, .24),
    inset 0 0 16px rgba(94, 146, 255, .14),
    0 0 18px rgba(83, 132, 255, .12),
    0 0 14px rgba(255, 192, 88, .10);
  transition: opacity .14s ease;
}

.button-hit::after {
  left: 9%;
  right: 9%;
  bottom: 10px;
  height: 3px;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 164, .98), transparent);
  box-shadow: 0 0 12px rgba(255, 218, 124, .72);
  transition: opacity .14s ease;
}

.button-hit:active,
.button-hit.is-pressing {
  transform: translate3d(0, 2px, 0) scale(.986);
  filter: brightness(1.12) saturate(1.06);
}

@media (hover: hover) {
  .button-hit:hover::before,
  .button-hit:hover::after {
    opacity: .5;
  }
}

/* Shared original-style content buttons used by 0button_original and text buttons on this page */
.content-scroll .lh-anchor-form {
  margin: .18em .24em;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit {
  min-width: 5.8em;
  min-height: 2.42em;
  margin: .16em .22em;
  padding: .34em 1.05em .44em;
  border: none;
  border-radius: 16px;
  color: #f6ddaa;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.18;
  white-space: nowrap;
  background: transparent url("../image/button-original-gothic.png") center / 100% 100% no-repeat;
  box-shadow: none;
  text-shadow: 0 2px 2px rgba(0,0,0,.92), 0 0 16px rgba(255, 224, 148, .14);
  overflow: hidden;
  transition: transform .14s ease, filter .14s ease, color .14s ease;
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before {
  content: none;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop {
  transform: translateY(2px) scale(.98);
  filter: brightness(1.14) saturate(1.06) drop-shadow(0 0 12px rgba(255, 214, 128, .18));
  color: #fff3c6;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .page::before,
  .page::after,
  .content-wrap::before,
  .lh-mist-band,
  .lh-star-node,
  .lh-star-dot,
  .lh-press-pop {
    animation: none !important;
  }
}


/* ===== 2026-05 original series button simplification =====
   目标：
   1. 文字按键改得更简洁，去掉两侧过宽花纹占位
   2. 保留 original 系列的暗金 / 蓝紫气质
   3. 让按钮更适合手机屏幕，不再横向占用过多空间 */

.content-scroll .lh-anchor-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  max-width: 100%;
  margin: .12em .16em;
  padding: 0;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit,
.content-scroll .lh-anchor-form button {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-width: 4.65em;
  min-height: 2.04em;
  align-items: center;
  justify-content: center;
  margin: .12em .16em;
  padding: .24em .72em .30em;
  border-radius: 12px;
  border: 1px solid rgba(215, 177, 90, .56) !important;
  outline: 0 !important;
  color: #f6dfad;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .055em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(255, 246, 201, .14) 0%,
      rgba(226, 184, 98, .08) 28%,
      rgba(41, 31, 19, .72) 62%,
      rgba(13, 10, 8, .90) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -4px 8px rgba(0, 0, 0, .30),
    0 2px 8px rgba(0, 0, 0, .22),
    0 0 10px rgba(96, 134, 255, .06);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .96),
    0 0 8px rgba(216, 180, 95, .18);
  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before,
.content-scroll .lh-anchor-form button::before {
  content: "";
  position: absolute;
  left: .42em;
  right: .42em;
  top: .20em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 166, .62), transparent);
  pointer-events: none;
}

.content-scroll a:not(.image-link)::after,
.content-scroll button::after,
.content-scroll .lh-anchor-submit::after,
.content-scroll .lh-anchor-form button::after {
  content: "";
  position: absolute;
  left: .50em;
  right: .50em;
  bottom: .22em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(90, 131, 255, .42), rgba(28, 20, 10, .42), transparent);
  opacity: .78;
  pointer-events: none;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop,
.content-scroll .lh-anchor-form button:active,
.content-scroll .lh-anchor-form button.lh-press-pop {
  transform: translateY(2px) scale(.985);
  filter: brightness(1.12) saturate(1.04);
  color: #fff4ce;
  border-color: rgba(255, 226, 154, .80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -4px 8px rgba(0, 0, 0, .24),
    0 0 14px rgba(216, 180, 95, .18),
    0 0 12px rgba(102, 147, 255, .10);
}

@media (max-width: 420px) {
  .content-scroll .lh-anchor-form {
    margin: .10em .12em;
  }

  .content-scroll a:not(.image-link),
  .content-scroll button,
  .content-scroll input[type="button"],
  .content-scroll input[type="submit"],
  .content-scroll input[type="reset"],
  .content-scroll .lh-anchor-submit,
  .content-scroll .lh-anchor-form button {
    min-height: 1.96em;
    min-width: 4.20em;
    margin: .10em .12em;
    padding: .22em .64em .28em;
    border-radius: 11px;
    letter-spacing: .045em;
  }
}


/* ===== 2026-05: shrink 8button_original top content area inside frame ===== */
.page-8button {
  --content-left: 10.2%;
  --content-right: 10.2%;
  --content-top: 8.1%;
  --content-bottom: 29.1%;
}

.page-8button .content-wrap {
  padding: clamp(8px, 2.2vw, 14px);
}

.page-8button .content-scroll {
  padding: clamp(8px, 2.3vw, 14px);
}


/* ===== 2026-05 original buttons: keep small ornament, narrow side decoration ===== */
.content-scroll .lh-anchor-form {
  margin: .12em .14em;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit,
.content-scroll .lh-anchor-form button {
  min-width: 4.75em;
  min-height: 2.06em;
  margin: .12em .14em;
  padding: .24em .70em .30em;
  border-radius: 12px;
  border: 1px solid rgba(219, 182, 96, .58) !important;
  color: #f7dfab;
  font-weight: 700;
  letter-spacing: .05em;
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 222, 142, .14) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 50%, rgba(136, 102, 255, .12) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(255,246,205,.16) 0%, rgba(213,170,92,.08) 26%, rgba(45,33,20,.74) 60%, rgba(14,11,9,.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -4px 8px rgba(0,0,0,.30),
    0 2px 8px rgba(0,0,0,.22),
    0 0 10px rgba(88,126,255,.06);
  text-shadow: 0 1px 2px rgba(0,0,0,.96), 0 0 8px rgba(216,180,95,.18);
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before,
.content-scroll .lh-anchor-form button::before {
  content: "";
  position: absolute;
  left: .46em;
  right: .46em;
  top: .22em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,236,172,.68), transparent);
}

.content-scroll a:not(.image-link)::after,
.content-scroll button::after,
.content-scroll .lh-anchor-submit::after,
.content-scroll .lh-anchor-form button::after {
  content: "";
  position: absolute;
  left: .58em;
  right: .58em;
  bottom: .22em;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(76,118,255,.38), rgba(20,14,8,.48), transparent);
  opacity: .82;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop,
.content-scroll .lh-anchor-form button:active,
.content-scroll .lh-anchor-form button.lh-press-pop {
  transform: translateY(2px) scale(.985);
  filter: brightness(1.12) saturate(1.04);
  color: #fff4ce;
  border-color: rgba(255,229,157,.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -4px 8px rgba(0,0,0,.24),
    0 0 14px rgba(216,180,95,.18),
    0 0 12px rgba(102,147,255,.10);
}


/* ===== 2026-05 final override: original系列文字按键进一步收窄，去掉左右宽花纹 =====
   目标：
   1. 去掉左右占宽过大的装饰
   2. 只保留上下 / 四角少量花边
   3. 更突出立体感，同时减少横向空间占用
*/
.content-scroll .lh-anchor-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  max-width: 100%;
  margin: .10em .12em;
  padding: 0;
}

.content-scroll a:not(.image-link),
.content-scroll button,
.content-scroll input[type="button"],
.content-scroll input[type="submit"],
.content-scroll input[type="reset"],
.content-scroll .lh-anchor-submit,
.content-scroll .lh-anchor-form button {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-width: 4.05em;
  min-height: 1.98em;
  align-items: center;
  justify-content: center;
  margin: .10em .12em;
  padding: .20em .54em .26em;
  border-radius: 12px;
  border: 1px solid rgba(218, 181, 94, .60) !important;
  outline: 0 !important;
  overflow: hidden;
  color: #f7dfab;
  font: inherit;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .045em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(180deg,
      rgba(255, 247, 210, .18) 0%,
      rgba(228, 185, 94, .08) 22%,
      rgba(48, 35, 22, .76) 56%,
      rgba(14, 11, 9, .94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -4px 8px rgba(0,0,0,.32),
    0 2px 8px rgba(0,0,0,.24),
    0 0 10px rgba(96, 136, 255, .06);
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 8px rgba(216,180,95,.16);
  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}

.content-scroll a:not(.image-link)::before,
.content-scroll button::before,
.content-scroll .lh-anchor-submit::before,
.content-scroll .lh-anchor-form button::before {
  content: "";
  position: absolute;
  left: .24em;
  right: .24em;
  top: .18em;
  bottom: auto;
  height: .56em;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, rgba(255, 233, 162, .68) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 100% 50%, rgba(255, 233, 162, .68) 0 1.5px, transparent 2.2px),
    linear-gradient(90deg, rgba(255, 233, 162, .72), rgba(255, 233, 162, .18) 16%, rgba(255, 233, 162, .18) 84%, rgba(255, 233, 162, .72));
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px, calc(100% - 10px) 1px;
  background-position: left center, right center, center center;
  opacity: .96;
}

.content-scroll a:not(.image-link)::after,
.content-scroll button::after,
.content-scroll .lh-anchor-submit::after,
.content-scroll .lh-anchor-form button::after {
  content: "";
  position: absolute;
  left: .24em;
  right: .24em;
  bottom: .18em;
  height: .56em;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, rgba(104, 138, 255, .54) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 100% 50%, rgba(104, 138, 255, .54) 0 1.5px, transparent 2.2px),
    linear-gradient(90deg, rgba(78, 118, 255, .50), rgba(54, 39, 21, .20) 18%, rgba(54, 39, 21, .20) 82%, rgba(78, 118, 255, .50));
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px, calc(100% - 10px) 1px;
  background-position: left center, right center, center center;
  opacity: .88;
}

.content-scroll a:not(.image-link):active,
.content-scroll a:not(.image-link).lh-press-pop,
.content-scroll button:active,
.content-scroll button.lh-press-pop,
.content-scroll input[type="button"]:active,
.content-scroll input[type="submit"]:active,
.content-scroll input[type="reset"]:active,
.content-scroll .lh-anchor-submit:active,
.content-scroll .lh-anchor-submit.lh-press-pop,
.content-scroll .lh-anchor-form button:active,
.content-scroll .lh-anchor-form button.lh-press-pop {
  transform: translateY(2px) scale(.985);
  filter: brightness(1.12) saturate(1.04);
  color: #fff4ce;
  border-color: rgba(255, 230, 158, .82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -4px 8px rgba(0,0,0,.24),
    0 0 14px rgba(216,180,95,.18),
    0 0 12px rgba(102,147,255,.08);
}

@media (max-width: 420px) {
  .content-scroll .lh-anchor-form {
    margin: .08em .10em;
  }

  .content-scroll a:not(.image-link),
  .content-scroll button,
  .content-scroll input[type="button"],
  .content-scroll input[type="submit"],
  .content-scroll input[type="reset"],
  .content-scroll .lh-anchor-submit,
  .content-scroll .lh-anchor-form button {
    min-width: 3.92em;
    min-height: 1.90em;
    margin: .08em .10em;
    padding: .18em .48em .24em;
    border-radius: 11px;
    letter-spacing: .04em;
  }
}