/* Scene-specific decorative layers. They never receive input or size content. */
.scene-host { position: relative; isolation: isolate; }
.penger-scene {
  --scene-size: 180px;
  --scene-opacity: .34;
  position: absolute;
  z-index: -1;
  display: block;
  width: var(--scene-size);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--scene-opacity);
  background: var(--scene-paper, var(--bg-main));
}
.penger-scene picture { mix-blend-mode: var(--scene-blend, multiply); filter: var(--scene-filter, none); }
.penger-scene picture, .penger-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
.page-about .penger-scene { --scene-paper: var(--about-paper); }
.scene-dark > .penger-scene { --scene-filter: invert(1); --scene-blend: screen; --scene-paper: var(--about-ink); }

/* The Protocol: one imprint above the copy, one quiet rehearsal gesture below. */
#how-it-works { scroll-margin-top: calc(var(--header-h) + 12px); }
.penger-scene--protocol-primary {
  --scene-size: 176px;
  --scene-opacity: .42;
  top: -170px;
  left: -24px;
}
.penger-scene--protocol-echo {
  --scene-size: 120px;
  --scene-opacity: .3;
  bottom: -6px;
  left: clamp(220px, 22vw, 320px);
}
@media (max-width: 1100px) {
  .penger-scene--protocol-primary { --scene-size: 120px; top: -130px; left: 0; }
  .penger-scene--protocol-echo { display: none; }
}
@media (max-width: 768px) {
  .penger-scene--protocol-primary { --scene-size: 76px; top: -40px; left: auto; right: 0; --scene-opacity: .34; }
}

/* An index becomes a durable pattern; keep the working example unobstructed. */
#encoding-guide { scroll-margin-top: calc(var(--header-h) + 12px); }
.penger-scene--encoding {
  --scene-size: clamp(220px, 23vw, 300px);
  --scene-opacity: .42;
  top: 34px;
  right: max(28px, calc((100% - 1100px) / 2));
}
.penger-scene--encoding-echo {
  --scene-size: 106px;
  --scene-opacity: .34;
  left: max(10px, calc((100% - 1170px) / 2));
  top: 520px;
}
.lp-encoding-title-row { grid-template-columns: minmax(0, 1fr); }
.lp-guide-callout-tile.scene-host { overflow: hidden; }
.penger-scene--callout {
  --scene-size: 110px;
  --scene-opacity: .42;
  top: -12px;
  left: 18px;
}
.lp-guide-callout-tile:first-child > .penger-scene,
.lp-guide-callout-tile:not(:first-child):is(:hover, :focus-visible) > .penger-scene { --scene-filter: invert(1); --scene-blend: screen; --scene-paper: var(--text-accent); }
.lp-guide-callout-tile:first-child:is(:hover, :focus-visible) > .penger-scene { --scene-filter: none; --scene-blend: multiply; --scene-paper: var(--bg-main); }

/* Each Education tool has a separate visual verb in its empty upper half. */
.penger-scene--education-card {
  --scene-size: clamp(180px, 20vw, 280px);
  --scene-opacity: .38;
  top: -12px;
  right: 24px;
}
.edu-lab-card:nth-child(1) > .penger-scene,
.edu-lab-card:nth-child(4) > .penger-scene,
.edu-lab-card:is(:hover, :focus-visible) > .penger-scene { --scene-filter: invert(1); --scene-blend: screen; --scene-paper: var(--edu-ink); }
.edu-lab-card:nth-child(1):is(:hover, :focus-visible) > .penger-scene,
.edu-lab-card:nth-child(4):is(:hover, :focus-visible) > .penger-scene { --scene-filter: none; --scene-blend: multiply; --scene-paper: #fff; }

/* About Us: artwork belongs to the argument of the individual section. */
.penger-scene--origin {
  --scene-size: clamp(220px, 22vw, 320px);
  --scene-opacity: .47;
  top: 125px;
  left: -24px;
}
.penger-scene--ambition {
  --scene-size: clamp(120px, 13vw, 180px);
  --scene-opacity: .32;
  left: 0;
  bottom: 64px;
}
.penger-scene--system {
  --scene-size: clamp(110px, 12vw, 160px);
  --scene-opacity: .36;
  left: 0;
  top: 56px;
}
.penger-scene--learning {
  --scene-size: clamp(160px, 16vw, 210px);
  --scene-opacity: .36;
  bottom: 64px;
  left: -20px;
}
.penger-scene--partner {
  --scene-size: clamp(130px, 14vw, 180px);
  --scene-opacity: .28;
  right: -12px;
  bottom: -125px;
}
.about-v2-partner__intro.scene-host { position: sticky; }

@media (max-width: 1100px) {
  .penger-scene--encoding-echo { display: none; }
  .penger-scene--origin { --scene-size: 200px; left: -16px; }
  .penger-scene--learning { --scene-size: 140px; left: 0; }
  .penger-scene--partner { --scene-size: 140px; bottom: -112px; }
}
@media (max-width: 820px) {
  .penger-scene--origin { --scene-size: 112px; top: -28px; right: 0; left: auto; }
  .penger-scene--ambition { --scene-size: 96px; right: 0; left: auto; top: -25px; bottom: auto; }
  .penger-scene--system { --scene-size: 100px; right: 0; left: auto; top: -22px; }
  .penger-scene--learning { --scene-size: 110px; top: -28px; bottom: auto; right: 0; left: auto; }
  .penger-scene--partner { display: none; }
  .about-v2-partner__intro.scene-host { position: relative; }
}
@media (max-width: 768px) {
  .penger-scene--encoding { --scene-size: 138px; top: 0; right: 12px; --scene-opacity: .34; }
  .penger-scene--callout { --scene-size: 76px; top: -8px; left: 10px; }
}
@media (max-width: 620px) {
  .penger-scene--education-card { --scene-size: clamp(88px, 25vw, 145px); top: 14px; right: 2px; --scene-opacity: .34; }
  .penger-scene--encoding { --scene-size: 92px; top: -6px; right: 10px; }
  .penger-scene--origin, .penger-scene--ambition,
  .penger-scene--system, .penger-scene--learning { --scene-size: 82px; top: -20px; }
}
@media (max-height: 700px) and (min-width: 621px) {
  .penger-scene--education-card { --scene-size: 160px; }
}
@media (max-height: 650px) and (max-width: 620px) {
  .penger-scene--education-card { --scene-size: 72px; top: 5px; }
}
@media (forced-colors: active), print { .penger-scene { display: none !important; } }