/* Zeta's detail scene: two quiet, moving print studies around the notes. */
dialog.network-project { background: rgb(245 244 239 / 64%); }
.network-project .zeta-study {
  position: absolute;
  top: 50%;
  width: clamp(224px, calc((100vw - 790px) / 2), 320px);
  height: 492px;
  margin-top: -246px;
  perspective: 1100px;
}
.network-project .zeta-study-left { right: calc(50% + 363px); transform: rotate(-7deg); }
.network-project .zeta-study-right { left: calc(50% + 363px); transform: rotate(7deg); }
.network-project .zeta-study-float { height: 100%; animation: zeta-study-float 18s ease-in-out infinite; }
.network-project .zeta-study-right .zeta-study-float { animation-delay: -9s; }
.network-project .zeta-study-sheet {
  position: relative;
  height: 100%;
  padding: 24px;
  background: var(--panel);
  border: 1px solid #20272c12;
  box-shadow: 1px 2px 0 #fffefb, 2px 3px 0 #20272c10, 0 18px 38px #20272c0c;
}
.network-project .zeta-study-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 8px/1.5 var(--mono); letter-spacing: .9px; }
.network-project .zeta-letter-art { position: absolute; inset: 59px 17px 100px; }
.network-project .zeta-letter-plate { position: absolute; left: 32%; top: 23%; width: 66%; height: 65%; background: var(--exhibition-blue); transform: rotate(-9deg); animation: zeta-plate-drift 20s ease-in-out infinite; }
.network-project .zeta-letter-plate::after { content: ""; position: absolute; inset: 7px -6px -7px 6px; border: 1px solid #819bb835; }
.network-project .zeta-letter-glyph { position: absolute; width: 80%; height: 100%; left: -2%; top: -3%; transform: rotate(-12deg); overflow: visible; }
.network-project .zeta-letter-ink { fill: var(--ink); }
.network-project .zeta-letter-blue { fill: var(--accent); transform: translate(2px, -1px); animation: zeta-letter-register 16s ease-in-out infinite; }
.network-project .zeta-study-footer { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 15px; }
.network-project .zeta-study-footer > span:first-child { font: 30px/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.8px; }
.network-project .zeta-study-footer > span:last-child { padding-bottom: 3px; text-align: right; color: var(--muted); font: 8px/1.6 var(--mono); letter-spacing: .7px; }
.network-project .zeta-ribbon-art { position: absolute; inset: 36px 2px 103px; }
.network-project .zeta-ribbon { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; animation: zeta-ribbon-turn 22s ease-in-out infinite; }
.network-project .zeta-ribbon-lines { stroke: var(--ink); stroke-width: .7; stroke-linejoin: round; opacity: .65; }
.network-project .zeta-ribbon-blue { stroke: var(--accent); stroke-width: 2.2; opacity: .88; }
.network-project .zeta-ribbon-rule { position: absolute; left: 16%; right: 16%; bottom: 14%; height: 1px; background: var(--line); transform: rotate(-15deg); opacity: .6; }
.network-project .project-atmosphere.is-paused .scene-motion { animation-play-state: paused; }
.network-project .ambient-motion:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@keyframes zeta-study-float { 0%, 100% { transform: translateY(-7px) rotateY(-3deg); } 50% { transform: translateY(7px) rotateY(3deg); } }
@keyframes zeta-plate-drift { 0%, 100% { transform: translate(0, 0) rotate(-9deg); } 50% { transform: translate(7px, -5px) rotate(-6deg); } }
@keyframes zeta-letter-register { 0%, 100% { transform: translate(2px, -1px); } 50% { transform: translate(-1px, 1.3px); } }
@keyframes zeta-ribbon-turn { 0%, 100% { transform: rotate(-6deg) translateY(3px); } 50% { transform: rotate(7deg) translateY(-3px); } }
@media (max-width: 1240px) {
  dialog.network-project { overflow-y: auto; }
  .network-project .project-atmosphere { position: relative; height: 350px; }
  .network-project .project-notes { margin: 0 auto 24px; max-height: none; }
  .network-project .zeta-study { top: 25px; width: 240px; height: 295px; margin: 0; }
  .network-project .zeta-study-left { right: calc(50% + 18px); }
  .network-project .zeta-study-right { left: calc(50% + 18px); }
  .network-project .zeta-study-sheet { padding: 17px; }
  .network-project .zeta-study-heading { font-size: 7px; letter-spacing: .5px; }
  .network-project .zeta-letter-art { inset: 36px 21px 73px; }
  .network-project .zeta-ribbon-art { inset: 26px 19px 64px; }
  .network-project .zeta-study-footer { left: 17px; right: 17px; bottom: 15px; padding-top: 10px; }
  .network-project .zeta-study-footer > span:first-child { font-size: 23px; }
  .network-project .zeta-study-footer > span:last-child { font-size: 7px; }
  .network-project .zeta-ribbon-rule { bottom: 9%; }
  .network-project .ambient-caption { font-size: 7px; letter-spacing: .5px; }
}
@media (max-width: 600px) {
  .network-project .project-atmosphere { height: 283px; }
  .network-project .zeta-study { top: 22px; width: 42%; height: 225px; }
  .network-project .zeta-study-left { right: calc(50% + 9px); transform: rotate(-6deg); }
  .network-project .zeta-study-right { left: calc(50% + 9px); transform: rotate(6deg); }
  .network-project .zeta-study-sheet { padding: 13px; }
  .network-project .zeta-study-heading { font-size: 5px; letter-spacing: .1px; }
  .network-project .zeta-letter-art { inset: 33px 8px 61px; }
  .network-project .zeta-ribbon-art { inset: 20px 0 51px; }
  .network-project .zeta-study-footer { left: 13px; right: 13px; bottom: 12px; padding-top: 9px; gap: 4px; }
  .network-project .zeta-study-footer > span:first-child { font-size: 17px; letter-spacing: -.5px; }
  .network-project .zeta-study-footer > span:last-child { font-size: 5px; letter-spacing: .1px; }
  .network-project .ambient-caption { left: 16px; font-size: 6px; letter-spacing: .15px; }
}
@media (prefers-reduced-motion: reduce) {
  .network-project .scene-motion { animation: none; }
}