/* OPC 资料库 —— 墨黑底 + 品牌橙；字体：Unbounded（标题）/ Space Grotesk（正文）/ Space Mono（规格） */
@font-face { font-family: "Unbounded"; src: url(/fonts/unbounded-wght-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/spacegrotesk-500.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(/fonts/spacemono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #111111;
  --bg-2: #181716;
  --fg: #F4EFE6;
  --muted: #B9B1A6;
  --faint: #7D766D;
  --line: rgba(244, 239, 230, .12);
  --surf: rgba(244, 239, 230, .04);
  --raised: rgba(244, 239, 230, .08);
  --or: #F25A1A;
  --or-l: #FF7A3D;
  --cream: #F4EFE6;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --sans: "Space Grotesk", var(--cjk);
  --display: "Unbounded", var(--cjk);
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3.4vw, 56px);
  --max: 1400px;
  --bar-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 24px); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
:lang(zh-CN) body { line-height: 1.75; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--or-l); outline-offset: 3px; border-radius: 6px; }
.spec { font: 700 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--faint); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.i { width: 16px; height: 16px; flex: none; }

/* ---------- 顶栏 ---------- */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); background: rgba(17, 17, 17, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 28px; width: auto; }
.brand-sub { font-size: 14px; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line); }
.langs { display: flex; gap: 8px; }
.lang { font: 700 12px/1 var(--mono); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transition: .2s; }
.lang:hover { color: var(--fg); border-color: var(--muted); }
.lang.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surf); font-size: 13.5px; font-weight: 600; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.btn:hover { background: var(--raised); border-color: var(--muted); }
.btn .spec { color: var(--faint); }
.btn-p { background: var(--or); border-color: var(--or); color: #fff; }
.btn-p:hover { background: var(--or-l); border-color: var(--or-l); transform: translateY(-1px); }
.btn-p .spec { color: rgba(255, 255, 255, .75); }

/* ---------- 首屏 ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; min-height: min(78vh, 680px); padding: 48px 0 56px; }
.eyebrow { font: 700 13px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--or); }
h1 { font: 800 clamp(44px, 6.4vw, 92px)/1.02 var(--display); letter-spacing: -.01em; margin-top: 22px; }
.lead { font-size: 18px; color: var(--muted); margin-top: 22px; max-width: 34em; }
.tagline { font: 700 13px/1.5 var(--mono); letter-spacing: .08em; color: var(--or-l); margin-top: 14px; }
.hero-cta { margin-top: 34px; }
.hero-cta .btn { height: 52px; padding: 0 24px; font-size: 15.5px; }
.hero-t > .spec { margin-top: 18px; display: block; }

.stack { position: relative; aspect-ratio: 1 / .82; }
.stack img { position: absolute; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); opacity: 0; }
.stack .c1 { width: 82%; right: 0; top: 4%; transform: rotate(4deg) translateY(24px); }
.stack .c2 { width: 74%; left: 0; bottom: 14%; transform: rotate(-5deg) translateY(24px); }
.stack .c3 { width: 26%; right: 8%; bottom: 2%; border-radius: 50%; transform: rotate(6deg) translateY(24px); border: 4px solid var(--bg); }
.ready .stack img { opacity: 1; }
.ready .stack .c1 { transform: rotate(4deg); }
.ready .stack .c2 { transform: rotate(-5deg); transition-delay: .08s; }
.ready .stack .c3 { transform: rotate(6deg); transition-delay: .16s; }

/* ---------- 目录 + 栏目 ---------- */
.shelf { display: grid; grid-template-columns: 200px 1fr; gap: 56px; padding-bottom: 80px; }
.toc { position: sticky; top: calc(var(--bar-h) + 28px); align-self: start; }
.toc-h { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 0 0 14px 14px; }
.toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc a { padding: 9px 14px; font-size: 14.5px; color: var(--muted); margin-left: -1px; border-left: 2px solid transparent; transition: .2s; }
.toc a:hover { color: var(--fg); }
.toc a.on { color: var(--fg); border-left-color: var(--or); }

.sec { padding: 8px 0 64px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.sec:last-child { border-bottom: 0; margin-bottom: 0; }
.sec h2 { font: 800 clamp(28px, 3vw, 40px)/1.15 var(--display); }
.sec-d { color: var(--muted); margin-top: 10px; max-width: 46em; font-size: 15px; }
.grid { display: grid; gap: 18px; margin-top: 28px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.card-b { padding: 18px 20px 20px; }
.card-b h3 { font-size: 17px; font-weight: 600; }
.card-b .muted { font-size: 13.5px; margin-top: 4px; }
.card-b.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* 标志 */
.g-logos { grid-template-columns: repeat(3, 1fr); }
.logo-horizontal { grid-column: span 2; }
.pv { display: grid; grid-template-columns: 1fr 1fr; height: 190px; }
.logo-horizontal .pv { height: 230px; }
.pv-l, .pv-d { display: flex; align-items: center; justify-content: center; padding: 28px; }
.pv-l { background: var(--cream); }
.pv-d { background: #0B0B0B; }
.pv .lg { width: 100%; height: 100%; max-height: 120px; }
.logo-mark .lg, .logo-stacked .lg { max-height: 110px; }
.logo-fav .pv { grid-template-columns: 1fr; }
.fav { gap: 26px; }
.fav img:first-child { border-radius: 16px; }

/* 规范 */
.guide { display: grid; grid-template-columns: 1.35fr 1fr; }
.guide-cover { display: block; background: var(--cream); }
.guide-cover img { width: 100%; height: 100%; object-fit: cover; }
.guide .card-b { padding: 26px 28px; display: flex; flex-direction: column; }
.guide h3 { font-size: 22px; }
.guide .spec { margin-top: 10px; }
.guide .muted { margin-top: 12px; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; padding-top: 22px; }
.th { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease); }
.th:hover { border-color: var(--or); transform: translateY(-2px); }

/* 色彩 */
.g-colors { grid-template-columns: repeat(4, 1fr); }
.sw { text-align: left; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); transition: transform .2s var(--ease), border-color .2s; }
.sw:hover { transform: translateY(-3px); border-color: var(--muted); }
.sw-c { display: flex; align-items: flex-end; height: 150px; padding: 18px; background: var(--c); color: var(--f); }
.sw-n { font-size: 20px; font-weight: 600; }
.sw-b { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; position: relative; }
.sw-b b { font: 700 16px/1 var(--mono); letter-spacing: .04em; }
.ok { position: absolute; right: 18px; top: 16px; color: var(--or-l); }
.sw.done .ok::after { content: attr(data-ok); }

/* 社媒 */
.g-avatar { grid-template-columns: repeat(3, 1fr); }
.soc-avatar .soc-pv { padding: 34px; display: flex; justify-content: center; background: var(--surf); }
.soc-avatar .soc-pv img { width: 72%; border-radius: 50%; border: 1px solid var(--line); }
.g-banner { grid-template-columns: 1fr; }
.soc-banner .soc-pv img { width: 100%; }

/* 即将上线 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { padding: 9px 16px; border-radius: 999px; border: 1px dashed var(--line); color: var(--faint); font-size: 14px; }

/* 页脚 */
.ft { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px; display: flex; justify-content: space-between; color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); }

/* 大图查看 */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(1280px, 94vw); }
.viewer::backdrop { background: rgba(0, 0, 0, .86); }
.viewer img { border-radius: 10px; width: 100%; }
.viewer .x { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--raised); font-size: 26px; line-height: 1; }

/* 404 */
.nf main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .stack { max-width: 560px; }
  .shelf { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .g-logos { grid-template-columns: 1fr 1fr; }
  .guide { grid-template-columns: 1fr; }
  .g-colors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .brand-sub { display: none; }
  .g-logos, .g-avatar { grid-template-columns: 1fr; }
  .logo-horizontal { grid-column: auto; }
  .pv, .logo-horizontal .pv { height: 150px; }
  .lead { font-size: 16px; }
  .ft { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stack img { transition: none; }
}

/* 图片占位，懒加载前不塌陷 */
.th img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.soc-avatar .soc-pv img { aspect-ratio: 1; }
.soc-banner .soc-pv img { aspect-ratio: 3 / 1; }
.btn > span { display: inline-flex; align-items: center; line-height: 1; }
.btn .spec { padding-top: 1px; }