@font-face {
  font-family: "Inmoke Serif SC";
  src: url("../fonts/H4cyBXePl9DZ0Xe7gG9cyOj7uK2-n-D2rd4FY7SCqyWv.ttf.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inmoke Serif SC";
  src: url("../fonts/H4cyBXePl9DZ0Xe7gG9cyOj7uK2-n-D2rd4FY7RlrCWv.ttf.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --imk-bg: #07090d;
  --imk-bg-deep: #05070a;
  --imk-bg-blue: #0c121a;
  --imk-panel: rgba(13, 17, 24, 0.82);
  --imk-panel-strong: rgba(11, 14, 20, 0.94);
  --imk-line: rgba(214, 168, 79, 0.24);
  --imk-line-strong: rgba(240, 209, 141, 0.5);
  --imk-gold: #d6a84f;
  --imk-gold-soft: #f0d18d;
  --imk-text: #f7f1e6;
  --imk-muted: rgba(247, 241, 230, 0.68);
  --imk-dim: rgba(247, 241, 230, 0.46);
  --imk-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", Arial, sans-serif;
  --imk-serif: "Inmoke Serif SC", "Songti SC", "SimSun", serif;
}

html {
  background: var(--imk-bg);
}

body {
  min-width: 320px;
  color: var(--imk-text);
  background:
    linear-gradient(135deg, rgba(240, 209, 141, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(18, 24, 34, 0.92), rgba(5, 7, 10, 0.98) 74%),
    linear-gradient(110deg, #080b10, #0b1119 44%, #05070a 100%) !important;
  background-size: auto, auto, auto;
  font-family: var(--imk-sans) !important;
  line-height: 1.82;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 209, 141, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 209, 141, 0.04) 1px, transparent 1px),
    linear-gradient(30deg, transparent 0 47%, rgba(240, 209, 141, 0.08) 48%, transparent 49% 100%),
    linear-gradient(150deg, transparent 0 56%, rgba(120, 136, 158, 0.08) 57%, transparent 58% 100%);
  background-size: 56px 56px, 56px 56px, 420px 420px, 360px 360px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 52%, transparent 86%);
  opacity: 0.72;
}

body:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(240, 209, 141, 0.09) 43%, transparent 51% 100%),
    radial-gradient(ellipse 86% 48% at 50% 4%, rgba(97, 112, 132, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%, transparent 78%, rgba(214, 168, 79, 0.075));
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: inmoke-page-sweep 12s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

body > .fixed.inset-0.z-\[-1\] {
  background:
    radial-gradient(ellipse 120% 62% at 50% -8%, rgba(76, 91, 112, 0.44), transparent 60%),
    linear-gradient(155deg, rgba(214, 168, 79, 0.115), transparent 30%),
    linear-gradient(180deg, #0b1018 0%, #070a0f 48%, #040609 100%) !important;
}

body > .fixed.inset-0.z-\[-1\] video {
  opacity: 0.66 !important;
  filter: saturate(0.66) contrast(1.12) brightness(0.82) !important;
  mix-blend-mode: screen;
}

body > .fixed.inset-0.z-\[-1\] > .absolute.inset-0 {
  background:
    linear-gradient(180deg, rgba(5, 7, 10, 0.5), rgba(5, 7, 10, 0.12) 38%, rgba(5, 7, 10, 0.78)) !important;
}

body > .fixed.inset-0.z-\[-1\]:before,
body > .fixed.inset-0.z-\[-1\]:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body > .fixed.inset-0.z-\[-1\]:before {
  background-image:
    linear-gradient(rgba(240, 209, 141, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 209, 141, 0.04) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 34%, rgba(240, 209, 141, 0.105) 34.2%, transparent 34.8% 100%),
    linear-gradient(60deg, transparent 0 63%, rgba(113, 131, 154, 0.09) 63.2%, transparent 63.8% 100%);
  background-size: 72px 72px, 72px 72px, 520px 520px, 460px 460px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  opacity: 0.86;
}

body > .fixed.inset-0.z-\[-1\]:after {
  background:
    linear-gradient(90deg, transparent, rgba(240, 209, 141, 0.1), transparent),
    linear-gradient(180deg, transparent 0%, rgba(214, 168, 79, 0.08) 50%, transparent 100%);
  transform: translateX(-18%) skewX(-12deg);
  opacity: 0.42;
  animation: inmoke-bg-drift 18s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

video {
  filter: saturate(0.72) contrast(1.08) brightness(0.72);
}

header.fixed {
  padding: 18px clamp(18px, 4vw, 48px) 14px !important;
  background: linear-gradient(180deg, rgba(7, 9, 13, 0.9), rgba(7, 9, 13, 0.48)) !important;
  border-bottom: 1px solid rgba(214, 168, 79, 0.16);
  backdrop-filter: blur(14px);
}

header.fixed img {
  height: 38px !important;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.38)) !important;
}

header.fixed nav {
  align-items: center;
  gap: 26px !important;
}

header.fixed nav a {
  position: relative;
  color: rgba(247, 241, 230, 0.72) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: color 0.25s ease;
}

header.fixed nav a:hover,
header.fixed nav a[aria-current="page"],
header.fixed nav a.border-b {
  color: var(--imk-gold-soft) !important;
  border-color: var(--imk-gold-soft) !important;
  filter: none !important;
  text-shadow: none !important;
}

header.fixed nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--imk-gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

header.fixed nav a:hover:after,
header.fixed nav a.border-b:after {
  transform: scaleX(1);
}

main {
  padding-top: 128px !important;
}

main > a.inline-flex:first-child {
  color: rgba(247, 241, 230, 0.78) !important;
  border: 1px solid rgba(214, 168, 79, 0.2);
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(7, 9, 13, 0.42);
}

main > a.inline-flex:first-child:hover {
  color: var(--imk-gold-soft) !important;
  border-color: var(--imk-line-strong);
}

main > .text-center:first-child,
main .text-center.mb-16 {
  margin-bottom: clamp(44px, 6vw, 76px) !important;
}

h1,
h2 {
  font-family: var(--imk-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

h1 {
  color: var(--imk-text) !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: 1.1 !important;
}

h2 {
  color: var(--imk-text) !important;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.2 !important;
}

h3 {
  color: var(--imk-text) !important;
  letter-spacing: 0 !important;
  line-height: 1.42 !important;
}

h4 {
  color: rgba(247, 241, 230, 0.94) !important;
  text-wrap: balance;
}

p {
  color: var(--imk-muted) !important;
  line-height: 1.9 !important;
  text-wrap: pretty;
}

strong,
b {
  color: var(--imk-gold-soft) !important;
}

.glitch-effect {
  text-shadow: 0 0 34px rgba(214, 168, 79, 0.16) !important;
}

.glitch-effect:before,
.glitch-effect:after {
  display: none !important;
}

.scanline {
  background: rgba(240, 209, 141, 0.34) !important;
  box-shadow: 0 0 16px rgba(240, 209, 141, 0.52) !important;
}

@keyframes inmoke-page-sweep {
  0% {
    transform: translateX(-18%) skewX(-8deg);
    opacity: 0.22;
  }

  42%,
  100% {
    transform: translateX(18%) skewX(-8deg);
    opacity: 0.62;
  }
}

@keyframes inmoke-bg-drift {
  0% {
    transform: translateX(-24%) skewX(-12deg);
    opacity: 0.22;
  }

  44% {
    opacity: 0.46;
  }

  100% {
    transform: translateX(24%) skewX(-12deg);
    opacity: 0.22;
  }
}

@keyframes inmoke-card-line {
  0% {
    transform: translateX(-115%);
  }

  100% {
    transform: translateX(115%);
  }
}

@keyframes inmoke-cursor {
  0%,
  44% {
    opacity: 1;
  }

  45%,
  100% {
    opacity: 0.16;
  }
}

.text-cyan-400,
.text-pink-400,
.text-purple-400,
.text-green-400,
.text-blue-400,
.text-violet-400,
.text-teal-400,
.text-orange-400,
.text-rose-400,
.text-indigo-400,
.text-amber-400,
.text-emerald-400 {
  color: var(--imk-gold-soft) !important;
}

.border-cyan-400,
.border-cyan-400\/50,
.border-pink-400,
.border-pink-400\/50,
.border-purple-400,
.border-purple-400\/50,
.border-green-400,
.border-green-400\/50,
.border-blue-400,
.border-blue-400\/50,
.border-violet-400,
.border-violet-400\/50,
.border-teal-400,
.border-teal-400\/50,
.border-orange-400,
.border-orange-400\/50,
.border-rose-400,
.border-rose-400\/50,
.border-indigo-400,
.border-indigo-400\/50,
.border-amber-400,
.border-amber-400\/50,
.border-emerald-400 {
  border-color: var(--imk-line-strong) !important;
}

.bg-cyan-400,
.bg-pink-400,
.bg-purple-400,
.bg-green-400,
.bg-blue-400,
.bg-violet-400,
.bg-teal-400,
.bg-orange-400,
.bg-rose-400,
.bg-indigo-400,
.bg-amber-400,
.bg-emerald-400,
.bg-cyan-500,
.bg-pink-500,
.bg-purple-500,
.bg-green-500,
.bg-blue-500,
.bg-violet-500,
.bg-teal-500,
.bg-orange-500,
.bg-rose-500,
.bg-indigo-500,
.bg-amber-500,
.bg-emerald-500 {
  background-color: var(--imk-gold) !important;
}

.rounded-\[2rem\],
.rounded-2xl,
.rounded-xl {
  border-radius: 14px !important;
}

.border-white\/10,
.border-white\/5,
.border-cyan-500\/30,
.border-pink-500\/30,
.border-purple-500\/30 {
  border-color: var(--imk-line) !important;
}

.bg-white\/5,
.bg-\[\#080808\]\/80,
.bg-\[\#0a0a0a\]\/80,
.bg-black\/30,
.bg-black\/50,
.bg-\[\#050505\] {
  background: var(--imk-panel) !important;
}

.bg-cyan-500\/20,
.bg-pink-500\/20,
.bg-purple-500\/20,
.bg-green-500\/20,
.bg-blue-500\/20,
.bg-violet-500\/20,
.bg-teal-500\/20,
.bg-orange-500\/20,
.bg-rose-500\/20,
.bg-indigo-500\/20,
.bg-amber-500\/20,
.bg-emerald-500\/20 {
  background: rgba(214, 168, 79, 0.13) !important;
}

.from-cyan-400,
.from-cyan-500,
.from-blue-600\/80,
.from-purple-500,
.from-pink-400,
.via-pink-400,
.via-purple-500,
.to-purple-500,
.to-cyan-600\/80,
.to-transparent {
  --tw-gradient-from: rgba(214, 168, 79, 0.82) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(214, 168, 79, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.shadow-\[0_0_30px_rgba\(0\2c 255\2c 249\2c 0\.15\)\],
.shadow-\[0_0_15px_rgba\(0\2c 255\2c 249\2c 0\.2\)\],
.shadow-\[0_0_15px_rgba\(255\2c 0\2c 193\2c 0\.2\)\],
.shadow-\[0_0_15px_rgba\(168\2c 85\2c 247\2c 0\.2\)\] {
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28) !important;
}

main a.block.group,
main .backdrop-blur-xl,
main .backdrop-blur-md,
main .backdrop-blur-2xl {
  position: relative;
  border: 1px solid var(--imk-line) !important;
  background: var(--imk-panel) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
  transition:
    border-color 0.36s ease,
    box-shadow 0.36s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.36s ease !important;
}

main a.block.group:before,
main .backdrop-blur-xl:before,
main .backdrop-blur-md:before,
main .backdrop-blur-2xl:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(240, 209, 141, 0.16), transparent 44%);
  transition: opacity 0.28s ease;
}

main a.block.group:after,
main .backdrop-blur-xl:after,
main .backdrop-blur-md:after,
main .backdrop-blur-2xl:after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240, 209, 141, 0.9), transparent);
  opacity: 0;
  transform: translateX(-115%);
}

main a.block.group:hover,
main .backdrop-blur-xl:hover,
main .backdrop-blur-md:hover {
  border-color: var(--imk-line-strong) !important;
  transform: translateY(-4px);
  box-shadow: 0 32px 92px rgba(0, 0, 0, 0.38) !important;
}

main a.block.group:hover:before,
main .backdrop-blur-xl:hover:before,
main .backdrop-blur-md:hover:before {
  opacity: 1;
}

main a.block.group:hover:after,
main .backdrop-blur-xl:hover:after,
main .backdrop-blur-md:hover:after {
  opacity: 1;
  animation: inmoke-card-line 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

main a.block.group > :not(.absolute),
main .backdrop-blur-xl > :not(.absolute),
main .backdrop-blur-md > :not(.absolute),
main .backdrop-blur-2xl > :not(.absolute) {
  position: relative;
  z-index: 1;
}

main .backdrop-blur-xl > .absolute,
main .backdrop-blur-md > .absolute,
main .backdrop-blur-2xl > .absolute,
main a.block.group > .absolute {
  position: absolute !important;
  z-index: 0;
}

main svg {
  stroke: currentColor;
}

main img {
  filter: saturate(0.86) contrast(1.04);
}

main .grid {
  min-width: 0;
}

main [class*="w-10"][class*="h-10"] {
  border: 1px solid rgba(240, 209, 141, 0.22);
  box-shadow: inset 0 0 22px rgba(214, 168, 79, 0.08);
}

main [class*="font-mono"] {
  overflow-wrap: anywhere;
}

main .border-r-2,
.inmoke-cursor {
  width: 10px !important;
  min-width: 10px !important;
  height: 1.05em !important;
  border-right-width: 2px !important;
  border-color: var(--imk-gold-soft) !important;
  animation: inmoke-cursor 1.05s steps(1, end) infinite !important;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  letter-spacing: 0.02em !important;
}

.tracking-\[0\.2em\],
.tracking-\[0\.3em\],
.tracking-\[0\.4em\],
.tracking-\[0\.5em\],
.tracking-widest,
.tracking-wider {
  letter-spacing: 0.04em !important;
}

.text-gray-400,
.text-white\/60,
.text-white\/50,
.text-white\/40,
.text-white\/70,
.text-white\/80 {
  color: var(--imk-muted) !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(8, 11, 16, 0.94), rgba(5, 7, 10, 0.98)) !important;
  border-top: 1px solid var(--imk-line) !important;
  color: rgba(247, 241, 230, 0.62) !important;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

footer > div {
  width: 100%;
  gap: 18px !important;
}

footer a {
  color: var(--imk-gold-soft) !important;
}

footer .flex.space-x-6 {
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
}

footer span:empty {
  display: none !important;
}

@media (max-width: 767px) {
  header.fixed {
    position: sticky !important;
    top: 0;
  }

  header.fixed nav {
    display: flex !important;
    max-width: calc(100vw - 112px);
    overflow-x: auto;
    gap: 18px !important;
    padding-bottom: 4px;
  }

  header.fixed nav::-webkit-scrollbar {
    display: none;
  }

  main {
    padding-top: 72px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body:before {
    background-size: 44px 44px, 44px 44px, 320px 320px, 300px 300px;
    opacity: 0.46;
  }

  body:after {
    opacity: 0.5;
  }

  body > .fixed.inset-0.z-\[-1\]:before {
    background-size: 54px 54px, 54px 54px, 360px 360px, 340px 340px;
    opacity: 0.48;
  }

  body > .fixed.inset-0.z-\[-1\]:after {
    opacity: 0.28;
  }

  h1 {
    font-size: 32px !important;
  }

  h2 {
    font-size: 26px !important;
  }

  main .grid {
    gap: 20px !important;
  }

  main a.block.group,
  main .backdrop-blur-xl,
  main .backdrop-blur-md,
  main .backdrop-blur-2xl {
    padding: 24px !important;
    transform: none !important;
  }

  main [class*="h-[450px]"],
  main [class*="h-[550px]"] {
    height: 360px !important;
  }

  .px-10 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  footer > div {
    align-items: center !important;
    text-align: center !important;
  }

  footer .flex.space-x-6 {
    gap: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}