:root {
  --ink: #111114;
  --paper: #f3efe4;
  --paper-deep: #e9e2d3;
  --tan: #e7bd80;
  --green: #63c174;
  --blue: #2f70c9;
  --cyan: #55c8d7;
  --line: rgba(17, 17, 20, 0.18);
  --page: min(1380px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 1180px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

a { color: inherit; text-decoration: none; }
button, iframe { font: inherit; }

.page-noise {
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(17,17,20,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,20,.07) 1px, transparent 1px);
  background-size: 38px 38px;
}

.site-header {
  position: relative;
  z-index: 30;
  height: 68px;
  display: grid;
  grid-template-columns: 330px 1fr 190px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  border-right: 1px solid var(--line);
}

.brand-mark { width: 38px; height: 38px; flex: none; }
.brand span { display: grid; gap: 2px; }
.brand b { font-size: 16px; letter-spacing: -.04em; }
.brand small { font: 9px/1.2 "Courier New", monospace; letter-spacing: .12em; }

.main-nav { display: flex; justify-content: flex-end; }
.main-nav a {
  min-width: 118px;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  font: 700 12px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
  transition: background .2s, color .2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--paper); background: var(--ink); }

.header-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: var(--paper);
  background: var(--green);
  border-left: 1px solid var(--ink);
  font: 700 12px/1 "Courier New", monospace;
  letter-spacing: .1em;
}
.header-cta span { font-size: 20px; }
.header-cta:hover span { transform: translate(4px, -4px); }
.header-cta span { transition: transform .25s ease; }

.ticker {
  height: 30px;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  font: 700 10px/30px "Courier New", monospace;
  letter-spacing: .16em;
}
.ticker-track {
  width: max-content;
  display: flex;
  gap: 28px;
  animation: ticker 26s linear infinite;
}
.ticker-track i { color: var(--green); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.hero {
  width: 100%;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 36%;
  border-bottom: 1px solid var(--ink);
}

.hero-copy { padding: 76px 56px 48px max(48px, calc((100vw - 1380px) / 2)); }
.eyebrow, .section-kicker {
  margin: 0;
  font: 700 11px/1.2 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 14px; color: rgba(17,17,20,.62); }
.eyebrow span { width: 8px; height: 8px; background: var(--green); }

.hero h1 { margin: 42px 0 40px; font-family: Arial Black, Impact, sans-serif; font-size: clamp(82px, 8.2vw, 142px); line-height: .79; letter-spacing: -.085em; }
.hero h1 span { display: block; width: max-content; max-width: 100%; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); text-stroke: 2px var(--ink); }
.hero h1 .accent { color: var(--green); font-size: .58em; letter-spacing: -.07em; margin-top: .16em; }

.hero-bottom { display: grid; grid-template-columns: minmax(330px, 520px) 1fr; gap: 48px; align-items: end; }
.hero-intro { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.8; }
.hero-stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.hero-stats div { padding: 14px 8px 0; border-right: 1px solid var(--line); }
.hero-stats dt { font: 10px/1.2 "Courier New", monospace; letter-spacing: .08em; }
.hero-stats dd { margin: 7px 0 0; font: 900 27px/1 Arial Black, sans-serif; }

.hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 56px 38px 36px;
  color: var(--paper);
  background:
    radial-gradient(circle at var(--spot-x, 80%) var(--spot-y, 20%), rgba(99,193,116,.24), transparent 34%),
    linear-gradient(rgba(85,200,215,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,200,215,.08) 1px, transparent 1px),
    #0b1118;
  background-size: auto, 30px 30px, 30px 30px, auto;
  border-left: 1px solid var(--ink);
}
.hero-visual::before { content: ""; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(85,200,215,.25); border-radius: 50%; right: -190px; top: 74px; box-shadow: 0 0 0 70px rgba(85,200,215,.035), 0 0 0 140px rgba(99,193,116,.025); }
.hero-visual::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; height: 110px; top: -130px; pointer-events: none; background: linear-gradient(transparent, rgba(85,200,215,.16), transparent); animation: scanBeam 5.8s linear infinite; }
.terminal-art { position: relative; z-index: 2; width: 100%; height: 640px; display: block; filter: drop-shadow(20px 24px 0 rgba(0,0,0,.22)); transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) rotate(var(--parallax-r, 0deg)); transition: transform .18s ease-out; }
.figure-label { position: absolute; z-index: 3; font: 700 10px/1 "Courier New", monospace; letter-spacing: .12em; color: var(--cyan); }
.figure-label.top { top: 30px; right: 34px; }
.figure-label.bottom { left: 34px; bottom: 24px; display: flex; align-items: center; gap: 8px; color: var(--green); }
.live-dot { width: 8px; height: 8px; display: inline-block; background: var(--green); box-shadow: 0 0 0 4px rgba(99,193,116,.16); }
.figure-label.bottom .live-dot { animation: livePulse 1.8s ease-in-out infinite; }

@keyframes scanBeam { to { transform: translateY(980px); } }
@keyframes livePulse { 50% { opacity: .45; box-shadow: 0 0 0 9px rgba(99,193,116,0); } }

.section { padding: 92px max(48px, calc((100vw - 1380px) / 2)); }
.section-header { display: flex; align-items: end; justify-content: space-between; padding-bottom: 34px; border-bottom: 2px solid var(--ink); }
.section-header h2, .partner-heading h2 { margin: 9px 0 0; font: 900 clamp(45px, 4vw, 72px)/.95 Arial Black, sans-serif; letter-spacing: -.07em; }
.section-header h2, .partner-heading h2, .about-statement h2 { transform: translate3d(var(--drift-x, 0), 0, 0); will-change: transform; }
.section-header > p { margin: 0; font-size: 14px; line-height: 1.7; text-align: right; }
.section-kicker { color: var(--blue); }

.events-section { padding-bottom: 110px; }
.event-list { border-bottom: 1px solid var(--ink); }
.event-row { min-height: 152px; display: grid; grid-template-columns: 70px 1.45fr 1fr 150px 46px; align-items: center; gap: 24px; border-top: 1px solid var(--ink); transition: background .22s, color .22s; }
.event-row:hover, .event-row.is-featured:hover { color: var(--paper); background: var(--ink); }
.event-row.is-featured { background: rgba(99,193,116,.13); }
.event-no { align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--line); font: 700 13px "Courier New", monospace; }
.event-name h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.05em; }
.event-name p { margin: 0; font-size: 13px; opacity: .65; }
.event-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.event-tags span { padding: 5px 7px; border: 1px solid currentColor; font: 10px/1 "Courier New", monospace; letter-spacing: .08em; }
.event-state { display: grid; gap: 7px; }
.event-state b { color: var(--green); font-size: 14px; }
.event-row:hover .event-state b { color: var(--green); }
.event-state span { font: 11px "Courier New", monospace; opacity: .6; }
.event-arrow { font-size: 27px; }

.cross-ticker { overflow: hidden; height: 112px; display: flex; align-items: center; color: var(--paper); background: var(--blue); border-top: 8px solid var(--ink); border-bottom: 8px solid var(--ink); }
.cross-ticker div { width: max-content; white-space: nowrap; font: 900 58px/1 Arial Black, sans-serif; letter-spacing: -.04em; animation: tickerReverse 34s linear infinite; }
@keyframes tickerReverse { from { transform: translateX(-42%); } to { transform: translateX(0); } }

.archive-section { color: var(--paper); background: var(--ink); }
.section-header.light { border-color: var(--paper); }
.section-header.light .section-kicker { color: var(--green); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.archive-card { min-width: 0; padding-bottom: 24px; border-bottom: 1px solid rgba(243,239,228,.34); }
.archive-art { position: relative; overflow: hidden; height: 420px; margin-bottom: 20px; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift-y, 0)); transition: transform .25s ease, clip-path .8s cubic-bezier(.22,1,.36,1); will-change: transform; }
.archive-card:hover .archive-art { --lift-y: -8px; }
.poster-one .archive-art { display: grid; place-items: center; color: var(--ink); background: var(--tan); }
.poster-one .archive-art::before { content: "YUNPAI / 72H"; position: absolute; left: 20px; top: 20px; font: 700 11px "Courier New", monospace; letter-spacing: .1em; }
.poster-one .archive-art b { position: absolute; bottom: 26px; left: 28px; font: 900 42px Arial Black, sans-serif; }
.orbit { position: absolute; border: 3px solid var(--ink); border-radius: 50%; }
.orbit-a { width: 310px; height: 310px; right: -90px; top: 30px; }
.orbit-b { width: 210px; height: 210px; right: -40px; top: 80px; border-style: dashed; }
.pixel-cup { position: relative; width: 124px; height: 104px; border: 10px solid var(--ink); border-top-width: 20px; transform: translateY(-20px); }
.pixel-cup::before { content: ""; position: absolute; width: 42px; height: 54px; right: -50px; top: 10px; border: 10px solid var(--ink); }
.pixel-cup span { position: absolute; width: 15px; height: 56px; left: 20px; top: -92px; background: var(--green); box-shadow: 38px -24px 0 var(--blue), 72px 3px 0 var(--green); }
.poster-two .archive-art { color: var(--paper); background: var(--blue); }
.poster-two svg { width: 100%; height: 100%; padding: 36px; }
.poster-three .archive-art { color: var(--paper); background: #17232d; }
.node-field i { position: absolute; width: 17px; height: 17px; background: var(--green); box-shadow: 0 0 0 8px rgba(99,193,116,.08); }
.node-field i:nth-child(1){left:14%;top:20%}.node-field i:nth-child(2){left:72%;top:14%;background:var(--blue)}.node-field i:nth-child(3){left:48%;top:42%;background:var(--tan)}.node-field i:nth-child(4){left:19%;top:73%;background:var(--cyan)}.node-field i:nth-child(5){left:79%;top:69%}.node-field i:nth-child(6){left:54%;top:82%;background:var(--blue)}
.node-field::before { content: ""; position: absolute; inset: 32px; background: linear-gradient(27deg, transparent 48%, rgba(243,239,228,.4) 49%, rgba(243,239,228,.4) 50%, transparent 51%), linear-gradient(-22deg, transparent 48%, rgba(243,239,228,.35) 49%, rgba(243,239,228,.35) 50%, transparent 51%); }
.node-field span { position: absolute; left: 30px; bottom: 28px; font: 900 46px/.85 Arial Black, sans-serif; }
.archive-meta { display: flex; justify-content: space-between; color: var(--cyan); font: 10px "Courier New", monospace; letter-spacing: .1em; }
.archive-card h3 { margin: 16px 0 10px; font-size: 30px; line-height: 1.06; letter-spacing: -.06em; }
.archive-card p { margin: 0; font-size: 13px; opacity: .62; }

.tools-section { padding-top: 108px; padding-bottom: 120px; }
.tool-layout { display: grid; grid-template-columns: 360px 1fr; gap: 22px; margin-top: 34px; }
.tool-index { border-top: 1px solid var(--ink); }
.tool-item { width: 100%; min-height: 88px; display: grid; grid-template-columns: 42px 1fr 24px; align-items: center; gap: 14px; padding: 14px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); text-align: left; cursor: pointer; transition: .2s; }
.tool-item > span { font: 700 11px "Courier New", monospace; }
.tool-item div { display: grid; gap: 7px; }
.tool-item b { font: 900 17px Arial Black, sans-serif; letter-spacing: -.02em; }
.tool-item small { font-size: 11px; opacity: .62; }
.tool-item i { font-style: normal; font-size: 20px; }
.tool-item:hover, .tool-item.active { color: var(--paper); background: var(--ink); }
.tool-item.active > span { color: var(--green); }
.tool-note { margin-top: 26px; padding: 20px; color: var(--paper); background: var(--blue); }
.tool-note span { font: 10px "Courier New", monospace; letter-spacing: .12em; }
.tool-note b { display: block; margin-top: 18px; font: 900 22px Arial Black, sans-serif; }
.tool-note p { margin: 7px 0 0; font-size: 12px; opacity: .8; }

.coder-panel { min-width: 0; border: 2px solid var(--ink); background: var(--ink); box-shadow: 10px 10px 0 var(--green); }
.coder-panel-bar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: var(--paper); border-bottom: 1px solid rgba(243,239,228,.25); }
.coder-panel-bar > div { display: flex; align-items: center; gap: 10px; }
.coder-panel-bar b { font: 700 12px "Courier New", monospace; letter-spacing: .09em; }
.coder-panel-bar small { color: rgba(243,239,228,.55); font-size: 11px; }
.coder-panel-bar a { padding: 9px 12px; color: var(--ink); background: var(--green); font-size: 12px; font-weight: 700; }
.coder-panel iframe { display: block; width: 100%; height: 650px; border: 0; background: white; }
.iframe-help { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: rgba(243,239,228,.55); font: 10px "Courier New", monospace; letter-spacing: .06em; }

.partners-section { display: grid; grid-template-columns: 340px 1fr; padding: 76px max(48px, calc((100vw - 1380px) / 2)); color: var(--paper); background: var(--blue); border-top: 8px solid var(--ink); border-bottom: 8px solid var(--ink); }
.partner-heading span { color: var(--green); font: 700 11px "Courier New", monospace; letter-spacing: .13em; }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; border-top: 1px solid rgba(243,239,228,.5); border-left: 1px solid rgba(243,239,228,.5); }
.partner-logo { min-height: 96px; display: grid; place-items: center; border-right: 1px solid rgba(243,239,228,.5); border-bottom: 1px solid rgba(243,239,228,.5); font-weight: 700; letter-spacing: .08em; }
.partner-logo.strong { font: 900 24px Arial Black, sans-serif; }
.partner-logo.invite { color: var(--ink); background: var(--green); }

.about-section { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px 90px; padding: 120px max(48px, calc((100vw - 1380px) / 2)); }
.about-statement h2 { margin: 25px 0 0; font: 900 clamp(58px, 6.5vw, 110px)/.92 Arial Black, sans-serif; letter-spacing: -.08em; }
.about-statement h2 span { color: var(--green); }
.about-position { width: max-content; margin: 30px 0 0; padding: 10px 14px; color: var(--paper); background: var(--blue); font: 700 12px "Courier New", monospace; letter-spacing: .1em; }
.about-copy { align-self: end; }
.about-copy > p { margin: 0 0 36px; font-size: 20px; line-height: 1.75; }
.about-copy dl { margin: 0; border-top: 1px solid var(--ink); }
.about-copy dl div { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--ink); }
.about-copy dt { font: 700 11px "Courier New", monospace; color: var(--blue); }
.about-copy dd { margin: 0; font-size: 13px; }
.company-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); border-left: 1px solid var(--ink); }
.company-metrics article { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgba(243,239,228,.78); }
.company-metrics strong { font: 900 clamp(34px, 3.3vw, 56px)/1 Arial Black, sans-serif; letter-spacing: -.07em; }
.company-metrics article:nth-child(2) strong, .company-metrics article:nth-child(4) strong { color: var(--blue); }
.company-metrics article:nth-child(3) strong, .company-metrics article:nth-child(5) strong { color: var(--green); }
.company-metrics span { font-size: 12px; line-height: 1.4; }
.company-manifesto { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; gap: 70px; align-items: start; padding: 34px 0 0; border-top: 1px solid var(--ink); }
.company-manifesto span { color: var(--blue); font: 700 11px "Courier New", monospace; letter-spacing: .12em; }
.company-manifesto p { margin: 0; max-width: 880px; font-size: 28px; font-weight: 700; line-height: 1.45; letter-spacing: -.035em; }

.site-footer { height: 110px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 32px; color: var(--paper); background: var(--ink); }
.footer-brand { font-weight: 800; }
.footer-brand span { margin-left: 10px; color: var(--green); font: 10px "Courier New", monospace; letter-spacing: .1em; }
.site-footer p { margin: 0; text-align: center; font: 10px "Courier New", monospace; letter-spacing: .12em; }
.site-footer > a { text-align: right; font: 11px "Courier New", monospace; }

.reveal { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 24% 0); transition: opacity .72s ease, transform .72s cubic-bezier(.22,1,.36,1), clip-path .72s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.visible { clip-path: inset(0 0 0 0); }

.motion-ready .hero .eyebrow,
.motion-ready .hero-intro,
.motion-ready .hero-stats,
.motion-ready .hero-visual { opacity: 0; transform: translateY(24px); }
.motion-ready .hero h1 span { opacity: 0; transform: translateY(105%); clip-path: inset(0 0 100% 0); }
.motion-ready.is-loaded .hero .eyebrow,
.motion-ready.is-loaded .hero-intro,
.motion-ready.is-loaded .hero-stats,
.motion-ready.is-loaded .hero-visual { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.motion-ready.is-loaded .hero h1 span { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); transition: opacity .45s ease, transform .95s cubic-bezier(.22,1,.36,1), clip-path .95s cubic-bezier(.22,1,.36,1); }
.motion-ready.is-loaded .hero h1 span:nth-child(1) { transition-delay: .08s; }
.motion-ready.is-loaded .hero h1 span:nth-child(2) { transition-delay: .18s; }
.motion-ready.is-loaded .hero h1 span:nth-child(3) { transition-delay: .3s; }
.motion-ready.is-loaded .hero-intro { transition-delay: .38s; }
.motion-ready.is-loaded .hero-stats { transition-delay: .46s; }
.motion-ready.is-loaded .hero-visual { transition-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .cross-ticker div, .hero-visual::after, .figure-label.bottom .live-dot { animation: none; }
  .reveal, .motion-ready .hero .eyebrow, .motion-ready .hero-intro, .motion-ready .hero-stats, .motion-ready .hero-visual, .motion-ready .hero h1 span { opacity: 1; transform: none; clip-path: none; transition: none; }
  .terminal-art, .archive-art, .section-header h2, .partner-heading h2, .about-statement h2 { transform: none !important; transition: none; }
}