/* Both screens inherit the carousel card's tilt as one composition. */
.card[data-card-index="2"] .weiguang-showcase {
    position: absolute;
    left: 208px;
    top: 78px;
    display: grid;
    grid-template-columns: repeat(2, 230px);
    gap: 62px;
    height: 470px;
    z-index: 2;
    pointer-events: none;
}
.weiguang-showcase img {
    display: block;
    width: 230px;
    height: 470px;
    object-fit: contain;
}
/* Compensate for the parent's 6deg skew to move horizontally on screen. */
.weiguang-showcase img:first-child {
    transform: translate(63px, -6.622px);
}
.weiguang-showcase img:last-child {
    transform: translate(11px, -1.156px);
}
weiguang-notes { position: absolute; left: 0; top: 0; width: 760px; height: 626px; pointer-events: none; }
.wg-note-leaders { position: absolute; inset: 0; width: 760px; height: 626px; z-index: 1; overflow: visible; }
.wg-flow-stack, .wg-tool-stack { position: absolute; margin: 0; padding: 0; list-style: none; z-index: 3; }
.wg-flow-stack { left: 16px; top: 114px; width: 242px; height: 181px; transform: rotate(-3deg) scale(1.19); transform-origin: left top; }
.wg-flow-pill, .wg-tool-pill {
    position: absolute;
    left: calc(var(--depth) * 8px);
    top: calc(var(--row) * 43px);
    z-index: calc(4 - var(--depth));
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 250, 231, .65);
    border-radius: 30px;
    background: rgba(255, 250, 238, var(--paper));
    box-shadow: 0 5px 12px rgba(28, 62, 82, .08);
    color: #304e5b;
    transform-origin: left center;
    transform: rotate(calc(-2deg - var(--depth) * 3deg));
}
.wg-flow-pill { left: calc(var(--depth) * 6px); top: calc(var(--row) * 30px + var(--lift)); width: calc(210px - var(--depth) * 8px); height: 36px; padding: 5px 10px; gap: 6px; font: 400 calc(12px - var(--depth) * .6px)/1.2 'Microsoft YaHei', 'Segoe UI', sans-serif; transform: rotate(calc(-2deg - var(--depth) * 3deg)) scale(calc(1 - var(--depth) * .08)); }
.wg-flow-pill { background: transparent; box-shadow: none; border-color: transparent; }
/* Draw the rounded edge and overlap cutouts in one surface, avoiding a second CSS mask rasterization. */
.wg-flow-pill::before { content: ''; position: absolute; inset: -1px; z-index: -1; box-sizing: border-box; border-radius: inherit; background: var(--layer-paper, linear-gradient(#fffdf7, #fffdf7)) center / 100% 100% no-repeat; opacity: var(--paper); border: 0; }
.wg-flow-pill span { text-rendering: optimizeLegibility; -webkit-font-smoothing: auto; white-space: nowrap; color: #10232d; opacity: 1; }
.wg-note-icon { shape-rendering: geometricPrecision; flex: 0 0 20px; width: 20px; height: 24px; stroke: #111; opacity: calc(1 - var(--depth) * .03); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wg-tool-stack { left: 68px; top: 297.478px; width: 218px; height: 266px; }
.wg-tool-stack::before { content: ''; position: absolute; left: -68px; top: -24px; width: 248px; height: 314px; z-index: -1; pointer-events: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: .65; mask-image: radial-gradient(ellipse 102px 157px at 146px 157px, #000 20%, rgba(0, 0, 0, .8) 45%, transparent 74%), radial-gradient(ellipse 204px 157px at right center, #000 20%, rgba(0, 0, 0, .8) 45%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse 102px 157px at 146px 157px, #000 20%, rgba(0, 0, 0, .8) 45%, transparent 74%), radial-gradient(ellipse 204px 157px at right center, #000 20%, rgba(0, 0, 0, .8) 45%, transparent 74%); mask-size: 248px 314px, 146px 314px; mask-position: left top; mask-repeat: no-repeat; -webkit-mask-size: 248px 314px, 146px 314px; -webkit-mask-position: left top; -webkit-mask-repeat: no-repeat; }
.wg-tool-pill, .wg-tool-more { position: absolute; left: 0; display: flex; align-items: center; gap: 14px; width: 218px; height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font: 400 16px/1.2 Arial, sans-serif; white-space: nowrap; transform: none; }
.wg-tool-pill { top: calc(var(--row) * 72px); height: 50px; font-size: 16px; }
.wg-tool-pill svg { width: 48px; height: 48px; flex: 0 0 48px; filter: brightness(0) invert(1); }
.wg-tool-more { top: 216px; }
.wg-more-dots { display: flex; justify-content: center; align-items: center; gap: 3px; width: 48px; flex: 0 0 48px; }
.wg-more-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.wg-more-dots i:nth-child(2) { opacity: .6; }
.wg-more-dots i:nth-child(3) { opacity: .3; }