/* ============================================================
 *  午夜展廊 · Midnight Gallery v2
 *  深曜石黑 × 余烬橙 · 纯展示横向展廊
 * ============================================================ */

:root {
  --ink:        #0b0b0e;            /* 曜石黑底 */
  --ink-2:      #101014;
  --paper:      #eae6dd;            /* 暖沙白文字 */
  --paper-dim:  #8a877f;
  --paper-faint:#4a4944;
  --ember:      hsl(24, 100%, 55%); /* 余烬橙 */
  --ember-soft: hsla(24, 100%, 55%, .14);
  --live:       #4ade80;            /* 运营中·绿 */
  --line:       rgba(234, 230, 221, .09);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Noto Sans SC", sans-serif;
  --gutter: clamp(20px, 4.5vw, 96px);  /* 响应式左右留白:大屏自动加宽 */
  --glow-hue: 24;                      /* 背景极光色相,JS 跟随选中项目切换 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: var(--paper-faint) var(--ink); }

/* 全局禁止选中/拖拽复制(拖动展廊时不会误选文字)*/
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img, svg { -webkit-user-drag: none; pointer-events: none; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;                     /* 桌面端用自定义光标 */
}
@media (hover: none), (max-width: 720px) {
  body { cursor: auto; }
  .cursor, .cursor-dot { display: none; }
}

::selection { background: var(--ember); color: var(--ink); }

/* ── 开场遮罩:双门左右开启 ─────────────────── */
.boot {
  position: fixed; inset: 0; z-index: 999;
  overflow: hidden;
  /* 注意:boot 本体必须透明,开门时才能露出下面的页面 */
  pointer-events: none;
}
/* 左右两扇门(各多 1px 重叠,防亚像素缝;门缝仍在正中)*/
.boot__door {
  position: absolute; top: 0; bottom: 0; width: calc(50% + 1px);
  background:
    radial-gradient(140% 100% at 50% 50%, #101014, var(--ink) 70%);
  will-change: transform;
}
.boot__door--l { left: 0; }
.boot__door--r { right: 0; }

/* 门缝:异形分段光线,正中避开印章区,两端渐隐,断口处缀菱形 */
.boot__seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-.5px);
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    hsla(24,100%,58%,.85) 0 12px,
    hsla(24,100%,58%,.15) 12px 16px,
    transparent 16px 24px
  );
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 10%, #000 30%, transparent 37%,
    transparent 63%, #000 70%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 10%, #000 30%, transparent 37%,
    transparent 63%, #000 70%, #000 90%, transparent 100%);
  filter: drop-shadow(0 0 6px hsla(24,100%,55%,.55));
}
.boot__seam i {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  font-style: normal; font-size: 9px; color: var(--ember);
  filter: none;
}
.boot__seam i:first-child { top: calc(37% - 14px); }
.boot__seam i:last-child  { bottom: calc(37% - 14px); }

.boot__center {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  text-align: center;
}
/* 公司全称:宋体细字,大字距,更庄重 */
.boot__co {
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 15px; font-weight: 400;
  letter-spacing: .58em; text-indent: .58em;
  color: var(--paper);
  margin-top: 30px;
}
/* 书屿云启 · 大印章(2×2)*/
.boot__seal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 108px; height: 108px;
  border: 2.5px solid var(--ember);
  border-radius: 14px;
  color: var(--ember);
  font-size: 34px; font-weight: 700; line-height: 1;
  transform: rotate(-4deg);
  box-shadow: 0 0 60px -12px hsla(24,100%,55%,.6),
              inset 0 0 24px -10px hsla(24,100%,55%,.5);
}
.boot__seal:empty { display: none; }
.boot__seal i { display: grid; place-items: center; font-style: normal; }
.boot__label {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .5em; text-indent: .5em;
  color: var(--paper-faint);
  margin: 12px 0 22px;
}
.boot__num {
  font-family: var(--mono);
  font-size: 30px; font-weight: 200;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 14px;
}
.boot__bar {
  width: 190px; height: 1px;
  background: var(--line); position: relative; overflow: hidden;
}
.boot__bar i {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: var(--ember); display: block;
}

/* ── 背景层 ──────────────────────────────── */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}

.bg__glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  will-change: transform;
}
.bg__glow--a {
  width: 52vw; height: 52vw; left: -14vw; top: -22vw;
  background: radial-gradient(circle, hsla(24,100%,50%,.20), transparent 65%);
}
.bg__glow--b {
  width: 44vw; height: 44vw; right: -12vw; bottom: -18vw;
  background: radial-gradient(circle, hsla(200,80%,45%,.10), transparent 65%);
}

/* 顶部极光:颜色跟随当前选中项目的主题色(--glow-hue 由 JS 驱动)*/
.bg__aurora {
  position: absolute; left: 50%; top: -34vh;
  width: 115vw; height: 85vh;
  transform: translateX(-50%);
  background: radial-gradient(52% 62% at 50% 32%,
    hsla(var(--glow-hue, 24), 95%, 55%, .14), transparent 72%);
  filter: blur(44px);
  will-change: transform, opacity;
}

/* 斜向流光:一道极淡的光带缓慢扫过全屏 */
.bg__beam {
  position: absolute; top: -32%; left: 0;
  width: 60vw; height: 165vh;
  transform: rotate(16deg);
  background: linear-gradient(90deg,
    transparent, rgba(255, 208, 150, .05) 48%, rgba(255, 208, 150, .02) 52%, transparent);
  filter: blur(10px);
  will-change: transform;
}

/* 浮尘粒子(JS 生成)*/
.bg__dust i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 130, .95), transparent 70%);
  will-change: transform, opacity;
}

/* 四周暗角:把视线收向中心 */
.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(125% 95% at 50% 42%,
    transparent 52%, rgba(0, 0, 0, .42) 100%);
}

.bg__scan {
  position: absolute; left: 0; right: 0; top: -10%;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, hsla(24,100%,55%,.035), transparent);
}

.bg__grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05;
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) } 20% { transform: translate(-4%,3%) }
  40% { transform: translate(3%,-5%) } 60% { transform: translate(-5%,-2%) }
  80% { transform: translate(4%,4%) }
}

/* ── 自定义光标 ──────────────────────────── */
.cursor {
  position: fixed; z-index: 998; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(234,230,221,.5);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  transition: width .25s, height .25s, border-color .25s, background .25s;
}
.cursor__label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--ember); opacity: 0; transition: opacity .2s;
  text-indent: .2em;
}
.cursor.is-link {
  width: 62px; height: 62px;
  border-color: var(--ember);
  background: hsla(24,100%,55%,.08);
}
.cursor.is-drag {
  width: 72px; height: 72px;
  border-color: var(--ember);
  background: rgba(11,11,14,.55);
  backdrop-filter: blur(2px);
}
.cursor.is-drag .cursor__label { opacity: 1; }
.cursor-dot {
  position: fixed; z-index: 998; pointer-events: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ember);
  transform: translate(-50%, -50%);
}

/* ── 页面结构:全屏三段式 ───────────────────── */
.page {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
/* 全宽布局:跟随屏幕伸展,只留响应式 gutter */
.top, .rail__head, .rail__progress, .foot {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 顶栏 */
.top {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; padding-bottom: 20px;
}
.top__brand { display: flex; align-items: center; gap: 12px; }

/* 书屿云启 · 方形印章(2×2)*/
.seal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 34px; height: 34px;
  border: 1.5px solid var(--ember);
  border-radius: 6px;
  color: var(--ember);
  font-size: 11px; font-weight: 700; line-height: 1;
  transform: rotate(-4deg);
  box-shadow: 0 0 18px -6px hsla(24,100%,55%,.5), inset 0 0 8px -4px hsla(24,100%,55%,.4);
  transition: transform .35s;
  user-select: none;
}
.seal:empty { display: none; }
.seal i { display: grid; place-items: center; font-style: normal; }
.top__brand:hover .seal { transform: rotate(0deg) scale(1.06); }

.top__name {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: .3em;
}
/* MM:SS 的冒号像时钟一样闪烁 */
.top__name .colon { color: var(--ember); animation: caret 1s steps(1) infinite; }

.top__name:empty { display: none; }
.top__sub {
  font-size: 11px; letter-spacing: .3em;
  color: var(--paper-dim);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
/* 没有主品牌时,工作室名升格为主标识 */
.top__name:empty + .top__sub {
  border-left: none; padding-left: 0;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .34em;
  color: var(--paper);
}
.top__sub:empty { display: none; }
@media (max-width: 640px) {
  .top__name:empty + .top__sub {
    font-size: 12px; letter-spacing: .18em;
  }
  .top__name:not(:empty) + .top__sub { display: none; }
}
.top__meta {
  display: flex; align-items: center; gap: 22px;
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim);
  letter-spacing: .12em;
}
.top__status { display: flex; align-items: center; gap: 8px; }
.top__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); display: inline-block;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55) }
  70% { box-shadow: 0 0 0 9px rgba(74,222,128,0) }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0) }
}
.top__clock { font-variant-numeric: tabular-nums; color: var(--paper); }
@media (max-width: 560px) { .top__status { display: none; } }

/* ══ 聚光舞台:当前项目大简介 ══════════════════ */
.stage {
  /* 舞台比顶栏收窄一小档(每侧约 3vw),既有层次又不脱节 */
  width: 100%;
  max-width: calc(100% - 6vw);
  margin: 0 auto;
  padding: clamp(18px, 3.5vh, 44px) var(--gutter) clamp(8px, 1.5vh, 18px);
  display: flex; align-items: flex-start; gap: 40px;
  position: relative;
}
.stage__info {
  max-width: min(720px, 46vw);
  /* 固定最小高度:切换项目时文字长短不同,页面不上下跳动 */
  min-height: 348px;
}
@media (max-width: 1080px) { .stage__info { min-height: 0; } }

.stage__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .45em;
  color: var(--ember);
  margin-bottom: 18px;
}
.stage__eline {
  width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent);
}

.stage__name {
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 900; letter-spacing: .03em; line-height: 1.1;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--paper) 55%, #9d968a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stage__domain {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  font-weight: 400;
  color: var(--paper-faint);
  -webkit-text-fill-color: var(--paper-faint);
}
.stage__slogan {
  margin-top: 10px;
  font-size: clamp(14px, 1.5vw, 17px); letter-spacing: .2em;
  color: var(--ember);
}
.stage__desc {
  margin-top: 14px;
  font-size: clamp(13px, 1.3vw, 15px); line-height: 1.9;
  color: var(--paper-dim);
  max-width: 58ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.stage__chips {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.stage__chips span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  background: rgba(234,230,221,.03);
  padding: 5px 12px; border-radius: 8px;
}
.stage__cta {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  text-indent: .1em;
  color: var(--ink);
  background: linear-gradient(120deg, hsl(24,100%,58%), hsl(38,100%,55%));
  padding: 13px 26px; border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px hsla(24,100%,55%,.5);
  transition: transform .3s, box-shadow .3s, filter .3s;
}
.stage__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px hsla(24,100%,55%,.65);
  filter: brightness(1.06);
}
.stage__cta .arr { transition: transform .3s; }
.stage__cta:hover .arr { transform: translateX(5px); }
.stage__cta.is-soon {
  background: transparent;
  color: var(--paper-faint);
  border: 1px dashed var(--paper-faint);
  box-shadow: none; pointer-events: none;
}

/* 右侧:终端挂件 + 巨型幽灵序号 */
.stage__side {
  margin-left: auto;
  position: relative;
  flex: none;
  align-self: center;
  padding: 26px 10px 0 0;
}
.stage__num {
  position: absolute; right: -22px; top: -38px;
  font-family: var(--mono); font-weight: 200;
  font-size: clamp(120px, 13vw, 210px); line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(234,230,221,.09);
  user-select: none;
  pointer-events: none;
}

/* 终端窗口 */
.term {
  position: relative;
  width: clamp(360px, 27vw, 560px);
  background: rgba(14, 14, 18, .72);
  border: 1px solid rgba(234,230,221,.12);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8),
              0 0 50px -30px hsla(24,100%,55%,.25);
  overflow: hidden;
}
.term__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(234,230,221,.08);
  background: rgba(234,230,221,.025);
}
.term__bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(234,230,221,.12);
}
.term__bar i:nth-child(1) { background: #ff5f57; }
.term__bar i:nth-child(2) { background: #febc2e; }
.term__bar i:nth-child(3) { background: #28c840; }
.term__title {
  margin-left: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--paper-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term__body {
  padding: 15px 17px 17px;
  font-family: var(--mono); font-size: 11.5px; line-height: 2;
  min-height: 176px;
}
.term__line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term__line--cmd  { color: var(--paper); }
.term__line--cmd::before { content: "$ "; color: var(--ember); }
.term__line--ok   { color: #6ee7a0; }
.term__line--ok::before { content: "✓ "; }
.term__line--err  { color: #f87171; }
.term__line--err::before { content: "✗ "; }
.term__line--dim  { color: var(--paper-dim); }
.term__caret {
  display: inline-block;
  width: 8px; height: 14px;
  vertical-align: -2px;
  background: var(--ember);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 0%,100% { opacity: 1 } 50% { opacity: 0 } }

@media (max-width: 1080px) {
  .stage__side { display: none; }
  .stage { padding-top: 14px; }
}

/* ══ 横向展廊(页面主体)══════════════════════ */
.rail {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 0;
  padding: 8px 0 4px;
}

.rail__head {
  display: flex; align-items: center;
  padding-bottom: 16px;
}
.rail__counter {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}
.rail__counter b { color: var(--ember); font-size: 22px; font-weight: 400; }
.rail__slash { margin: 0 6px; }
.rail__nav { display: flex; gap: 8px; margin-left: auto; }
.rail__btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 16px;
  cursor: none;
  transition: border-color .3s, color .3s, background .3s, transform .2s;
}
@media (hover: none), (max-width: 720px) { .rail__btn { cursor: pointer; } }
.rail__btn:hover {
  border-color: var(--ember); color: var(--ember);
  background: hsla(24,100%,55%,.07);
}
.rail__btn:active { transform: scale(.92); }

/* 视口:溢出横滚,隐藏滚动条 */
.rail__viewport {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 顶部留足空间,hover 卡片上浮 10px 时顶边框不被裁掉 */
  padding: 22px 0 14px;
}
.rail__viewport::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex; gap: clamp(16px, 2vw, 28px);
  width: max-content;
  /* 首尾卡片与顶栏内容对齐 */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── 展品卡片 v2 ──────────────────────────── */
.pcard {
  --hue: 24;
  position: relative;
  flex: none;
  width: clamp(290px, 30vw, 440px);
  height: clamp(320px, 40vh, 420px);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: linear-gradient(165deg, var(--ink-2), #0c0c10 55%);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  will-change: transform;
  opacity: .5;                       /* 未选中的卡片压暗 */
  transition: border-color .4s, transform .45s cubic-bezier(.2,.8,.25,1),
              box-shadow .45s, opacity .5s;
}
.pcard.is-active, .pcard:hover { opacity: 1; }
.pcard.is-active {
  border-color: hsla(var(--hue), 90%, 60%, .4);
  box-shadow: 0 0 0 1px hsla(var(--hue), 90%, 60%, .1),
              0 0 60px -18px hsla(var(--hue), 95%, 55%, .35);
}
@media (max-width: 720px) { .pcard { width: 76vw; height: 372px; } }

.pcard:hover {
  border-color: hsla(var(--hue), 90%, 60%, .5);
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7),
              0 0 0 1px hsla(var(--hue), 90%, 60%, .12),
              0 0 80px -30px hsla(var(--hue), 90%, 55%, .35);
}

/* 运营中卡片:光晕呼吸 */
.pcard--live {
  animation: cardBreathe 4.5s ease-in-out infinite;
}
@keyframes cardBreathe {
  0%, 100% {
    box-shadow: 0 0 0 0 transparent,
                0 0 34px -14px hsla(var(--hue), 95%, 55%, .18);
    border-color: rgba(234,230,221,.12);
  }
  50% {
    box-shadow: 0 0 0 1px hsla(var(--hue), 90%, 60%, .14),
                0 0 60px -12px hsla(var(--hue), 95%, 55%, .42);
    border-color: hsla(var(--hue), 90%, 60%, .38);
  }
}
.pcard--live:hover { animation-play-state: paused; }

/* 上半:艺术区 */
.pcard__art {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, hsla(var(--hue), 90%, 50%, .22), transparent 55%),
    radial-gradient(80% 80% at 10% 110%, hsla(var(--hue), 70%, 40%, .12), transparent 60%);
  border-bottom: 1px solid var(--line);
}
/* AI 生成的卡片背景图(gpt-image-2)*/
.pcard__art-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .5s, transform .8s cubic-bezier(.2,.8,.25,1);
  pointer-events: none !important;
}
.pcard:hover .pcard__art-img,
.pcard.is-active .pcard__art-img { opacity: .72; }
.pcard:hover .pcard__art-img { transform: scale(1.05); }
/* 图片上压一层暗角,保证状态标签/图标可读 */
.pcard__art-img + .pcard__bignum { z-index: 2; }
.pcard__art .pcard__status, .pcard__art .pcard__icon { z-index: 2; }
.pcard__art::before, .pcard__art::after { z-index: 1; }

.pcard__art::before {           /* 细栅格 */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(234,230,221,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,230,221,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 70% 20%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 30%, transparent 80%);
}
.pcard__art::after {            /* 对角光带 */
  content: "";
  position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 42%, hsla(var(--hue), 95%, 65%, .07) 50%, transparent 58%);
  transform: translateX(-30%);
  transition: transform 1s cubic-bezier(.2,.8,.25,1);
}
.pcard:hover .pcard__art::after { transform: translateX(30%); }

.pcard__bignum {
  position: absolute; right: 16px; top: 2px;
  font-family: var(--mono); font-weight: 200;
  font-size: clamp(84px, 8.5vw, 120px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px hsla(var(--hue), 60%, 70%, .16);
  transition: -webkit-text-stroke-color .5s, transform .6s cubic-bezier(.2,.8,.25,1);
  pointer-events: none;
}
.pcard:hover .pcard__bignum {
  -webkit-text-stroke-color: hsla(var(--hue), 90%, 62%, .45);
  transform: translate(-6px, 6px);
}

.pcard__icon {
  position: absolute; left: 22px; bottom: 18px;
  width: 50px; height: 50px; border-radius: 13px;
  display: grid; place-items: center;
  font-size: 22px;
  background: rgba(11,11,14,.5);
  border: 1px solid hsla(var(--hue), 90%, 60%, .3);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -8px hsla(var(--hue), 90%, 40%, .5);
  transition: transform .45s cubic-bezier(.2,.8,.25,1);
}
.pcard:hover .pcard__icon { transform: rotate(-8deg) scale(1.1) translateY(-4px); }

/* 状态标签:运营中 = 绿色呼吸灯 */
.pcard__status {
  position: absolute; left: 22px; top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  padding: 6px 13px; border-radius: 99px;
  background: rgba(11,11,14,.5);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.pcard__status--live {
  color: var(--live);
  border: 1px solid rgba(74,222,128,.35);
}
.pcard__status--live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: pulse 2s infinite;
}
.pcard__status--soon {
  color: var(--paper-dim);
  border: 1px solid var(--line);
}
.pcard__status--soon i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper-faint);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

/* 下半:信息区(固定高度,所有卡片上下对齐)*/
.pcard__body {
  flex: none;
  height: 148px;
  padding: 16px 24px 18px;
  display: flex; flex-direction: column;
}
.pcard__name {
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 800; letter-spacing: .04em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.pcard__domain {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--paper-faint); font-weight: 400;
}
.pcard__slogan {
  margin-top: 5px;
  font-size: 13px; letter-spacing: .14em;
  color: hsl(var(--hue), 70%, 68%);
}
.pcard__desc {
  margin-top: 8px;
  font-size: 12.5px; line-height: 1.7;
  color: var(--paper-dim);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
}
.pcard__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--paper-faint);
  transition: color .3s;
}
.pcard__go .arr { transition: transform .35s; }
.pcard:hover .pcard__go { color: hsl(var(--hue), 85%, 65%); }
.pcard:hover .pcard__go .arr { transform: translateX(6px); }
.pcard__key {
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-faint);
  border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 8px;
}
@media (hover: none) { .pcard__key { display: none; } }

/* 占位卡(敬请期待) */
.pcard--soon {
  border-style: dashed;
  border-color: rgba(234,230,221,.13);
  opacity: .7;
}
.pcard--soon .pcard__art { filter: saturate(.35); }
.pcard--soon:hover { transform: none; box-shadow: none; border-color: rgba(234,230,221,.22); }

/* 进度线:虚线基线 + 每卡刻度 + 辉光光轨 + 菱形游标 */
.rail__progress {
  margin-top: 10px;
  height: 12px;
  position: relative;
}
.rail__progress::before {         /* 虚线基线 */
  content: "";
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(234,230,221,.14) 0 5px, transparent 5px 11px);
}
.rail__lane {                     /* 刻度与光轨的定位容器(扣掉左右留白)*/
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: 0; bottom: 0;
}
.rail__ticks {                    /* 每张卡一个刻度 */
  position: absolute; inset: 0;
  pointer-events: none;
}
.rail__ticks i {
  position: absolute; top: 50%;
  width: 1px; height: 7px;
  transform: translateY(-50%);
  background: rgba(234,230,221,.22);
}
.rail__fill {                     /* 已走过的光轨 */
  position: absolute; left: 0;
  top: 50%; height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, var(--ember) 40%);
  box-shadow: 0 0 10px hsla(24,100%,55%,.6);
}
.rail__fill::after {              /* 菱形游标 */
  content: "◆";
  position: absolute; right: -4px; top: 50%;
  transform: translate(50%, -50%) rotate(0deg);
  font-size: 8px; line-height: 1;
  color: var(--ember);
  text-shadow: 0 0 8px hsla(24,100%,55%,.9);
}

/* 页脚 */
.foot {
  padding-top: 18px; padding-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--paper-faint);
}
.foot__hint b { color: var(--ember); font-weight: 700; }
/* 触屏设备没有键盘/拖拽,隐藏操作提示 */
@media (hover: none) { .foot__hint { display: none; } }
.foot__icp { margin-left: -4px; }
.foot__icp:empty { display: none; }
.foot__icp a {
  color: var(--paper-faint); text-decoration: none;
  border-bottom: 1px dotted var(--paper-faint);
  transition: color .3s;
}
.foot__icp a:hover { color: var(--ember); }
@media (max-width: 560px) { .foot { flex-direction: column; gap: 8px; } }

/* 键盘选中态 */
.pcard:focus-visible, .rail__btn:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* ── 移动端:精简舞台 + 居中轮播(放在文件末尾保证优先级)── */
@media (max-width: 720px) {
  .top { padding-top: 18px; padding-bottom: 14px; }

  /* 精简舞台:只留「项目序号 + 名字 + 定位语 + 进入按钮」,
     长介绍/徽章在卡片上,不重复占屏 */
  .stage { max-width: 100%; padding-top: 10px; padding-bottom: 0; }
  .stage__info { min-height: 0; max-width: 100%; }
  .stage__eyebrow { margin-bottom: 10px; letter-spacing: .3em; }
  .stage__name { font-size: 34px; gap: 10px; }
  .stage__slogan { margin-top: 6px; font-size: 13px; letter-spacing: .14em; }
  /* 项目描述保留:铺满一屏宽,两行截断 */
  .stage__desc {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    margin-top: 10px;
    font-size: 13px; line-height: 1.8;
  }
  .stage__chips { display: none; }
  .stage__cta { margin-top: 14px; padding: 10px 22px; font-size: 11px; }

  .rail { justify-content: center; }
  .rail__head { padding-bottom: 8px; }

  /* 居中式轮播:当前卡居中,两侧对称露出相邻卡 */
  .rail__track {
    padding-left: 12vw;
    padding-right: 12vw;
  }
  .pcard__body { height: 150px; padding: 14px 20px 16px; }
  .pcard__desc { -webkit-line-clamp: 2; }   /* 移动端介绍给两行 */
  .pcard__icon { width: 44px; height: 44px; font-size: 19px; left: 18px; bottom: 14px; }
  .pcard__status { left: 18px; top: 14px; }
  .pcard__bignum { font-size: 72px; }
}

/* 减少动态偏好:关闭装饰动画 */
@media (prefers-reduced-motion: reduce) {
  .bg__grain, .top__pulse, .pcard--live,
  .pcard__status--live i, .pcard__status--soon i { animation: none; }
  * { transition-duration: .01ms !important; }
}