/* 十系统 systems.html（设计书第五章）；几何由 pages/systems.js 按视口计算 */

.tz-0 { left: 6vw; top: 11vh; width: 80vw; opacity: 1; }
.tz-0 .hero { font: 800 96px/1.08 var(--f-cn); letter-spacing: -.03em; }
.tz-0 p.desc { margin-top: 12px; font-size: 24px; line-height: 1.5; color: var(--ink-2); }
.tz-1, .tz-2, .tz-3 { left: 6vw; top: 11vh; width: 76vw; }

.intro-layer { left: 0; top: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; overflow: visible; opacity: 0; }

/* 系统方块（DOM；正面是方块，背面是三问卡，同一元素翻面） */
.yt { left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.yt-f, .yt-r { position: absolute; left: 0; top: 0; }
.yt-r { transform-style: preserve-3d; pointer-events: none; }
.yt .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: auto; color: var(--ink); }
.yt .front {
  width: 150px; height: 150px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  background: linear-gradient(155deg, color-mix(in oklch, var(--c) 24%, rgba(255,255,255,.9)), color-mix(in oklch, var(--c) 12%, rgba(255,255,255,.7)));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c) 78%, white), inset 0 1px 0 rgba(255,255,255,.95), var(--sh-2);
}
.yt .front .ic { width: 58px; height: 58px; margin-bottom: 4px; object-fit: cover; object-view-box: inset(15% 23.3% 31.7% 23.3%); }
.yt .front b { font: 800 26px/1.05 var(--f-en); letter-spacing: -.01em; }
.yt .front span { font: 500 17px/1.3 var(--f-cn); color: var(--ink-2); }
.yt .back {
  left: 0; top: 0; border-radius: 26px; padding: 22px 22px 20px; display: grid; gap: 12px; align-content: start; transform: rotateY(180deg);
  background: linear-gradient(160deg, color-mix(in oklch, var(--c) 12%, rgba(255,255,255,.97)), rgba(255,255,255,.93));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c) 60%, white), inset 0 1px 0 #fff, var(--sh-3);
}
.yt .back header { display: flex; align-items: center; gap: 12px; }
.yt .back header img { width: 48px; height: 48px; flex: none; object-fit: cover; object-view-box: inset(15% 23.3% 31.7% 23.3%); }
.yt .back header b { display: block; font: 800 22px/1.1 var(--f-en); }
.yt .back header span { font: 500 16px/1.3 var(--f-cn); color: var(--ink-2); }
.yt .back dl { margin: 0; display: grid; gap: 10px; }
.yt .back dt { font: 700 14px/1.3 var(--f-cn); color: var(--c-ink, var(--ink)); letter-spacing: .04em; }
.yt .back dd { margin: 2px 0 0; font: 400 15px/1.55 var(--f-cn); color: var(--ink-2); }
.yt .back { align-content: space-between; }
.yt .back .go { justify-self: start; font: 600 15px/1.2 var(--f-cn); color: var(--c-ink, var(--ink)); }
.yt .back.wide { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 32px; padding: 28px 32px; }
.yt .back.wide header { grid-row: 1 / 3; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
.yt .back.wide header img { width: 200px; height: 200px; object-view-box: none; }
.yt .back.wide header b { font-size: 30px; }
.yt .back.wide header span { font-size: 18px; }
.yt .back.wide dl { gap: 18px; align-content: center; }
.yt .back.wide dd { font-size: 17px; }

.seg-h { font: 600 16px/1.2 var(--f-cn); color: var(--ink-2); white-space: nowrap; }
.aegis-tag { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border-radius: 16px; font: 700 15px/1.2 var(--f-cn); color: #3E4A5C; white-space: nowrap;
  background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1.5px #52627A, var(--sh-1); }
.aegis-tag i { width: 8px; height: 8px; border-radius: 50%; background: #52627A; }
.band-l { font: 700 17px/1 var(--f-cn); color: var(--ink); white-space: nowrap; pointer-events: auto; }
.band-l b { font-family: var(--f-en); margin-right: 8px; }

/* Y-2 工件路线标签 */
.rl { padding: 4px 8px; border-radius: 10px; font: 500 14px/1.3 var(--f-cn); color: var(--ink); text-align: center; text-wrap: balance;
  background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--c) 45%, white), 0 4px 10px -6px rgba(90,60,20,.3);
  opacity: 0; visibility: hidden; transition: filter .25s; }
.routes path, .routes circle { transition: opacity .25s; }
.routes.is-focus .rt:not(.on) { opacity: .1; }
.overlay.is-focus .rl:not(.on) { filter: opacity(.15); }

/* Y-3 尾帧卡片 */
.wc { display: flex; align-items: center; gap: 16px; padding: 0 20px; color: var(--ink); opacity: 0; visibility: hidden; cursor: pointer;
  background: linear-gradient(155deg, color-mix(in oklch, var(--c) 16%, rgba(255,255,255,.9)), rgba(255,255,255,.72));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c) 60%, white), inset 0 1px 0 rgba(255,255,255,.95), var(--sh-2); }
.wc img { width: 72px; height: 72px; flex: none; }
.wc .t { display: grid; gap: 4px; min-width: 0; }
.wc b { font: 800 22px/1.1 var(--f-en); }
.wc b em { font: 600 16px/1.2 var(--f-cn); font-style: normal; color: var(--ink-2); margin-left: 8px; }
.wc span { font: 500 15px/1.45 var(--f-cn); color: var(--ink-2); }

/* 正文区：卡片墙 */
.sys-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; perspective: 1400px; }
.scard, .yt .back, .wc { overflow-wrap: anywhere; }
.scard { --c: var(--c-med); display: grid; gap: 14px; align-content: start; padding: 26px 26px 24px; border-radius: 28px; color: var(--ink-2); cursor: pointer; }
.scard .sc-top { display: flex; align-items: center; gap: 16px; }
.scard .sc-top img { width: 84px; height: 84px; flex: none; }
.scard h3 { font: 800 28px/1.1 var(--f-en); letter-spacing: -.01em; }
.scard h3 small { display: block; margin-top: 6px; font: 600 18px/1.2 var(--f-cn); color: var(--ink-2); letter-spacing: 0; }
.scard .tag { font: 600 17px/1.45 var(--f-cn); color: var(--ink); }
.scard dl { margin: 0; display: grid; gap: 10px; }
.scard dt { font: 700 14px/1.3 var(--f-cn); color: var(--c-ink, var(--ink)); }
.scard dd { margin: 2px 0 0; font-size: 15px; line-height: 1.6; }
.scard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.scard .meta .n { font: 600 15px/1.2 var(--f-cn); color: var(--ink); margin-right: 6px; }
.scard .meta i { font: 700 13px/1 var(--f-en); font-style: normal; color: #fff; padding: 5px 9px; border-radius: 10px; background: var(--fc, var(--c)); }
@media (max-width: 1100px) { .sys-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }