/* Accepted D flow, scoped to the SOURCE footer. */
#source-footer #fluid-stage {
  position: relative;
  height: clamp(150px, 25vw, 360px);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
#source-footer .colophon-word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
}
#source-footer .colophon-word > span { background: none; }
#source-footer #fluid-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
#source-footer .fluid-panel { margin-top: 20px; }
#source-footer .fluid-panel summary {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  color: #a3afb5;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
}
#source-footer summary::-webkit-details-marker { display: none; }
#source-footer summary:hover { color: #f8fafc; }
#source-footer summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }
#source-footer .fluid-panel[open] > summary svg { transform: rotate(180deg); }
#source-footer .fluid-panel-body {
  max-width: 960px;
  margin: 14px auto 0;
  padding: 26px clamp(16px, 3vw, 32px);
  border: 1px solid #ffffff12;
  background: #080b0de8;
}
#source-footer .fluid-sliders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
#source-footer .fluid-sliders label { display: block; font-size: 11px; color: #c2cbd0; }
#source-footer .fluid-sliders label > span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 15px; }
#source-footer .fluid-sliders output { color: #58cce0; font-variant-numeric: tabular-nums; }
#source-footer .fluid-sliders input { display: block; width: 100%; height: 4px; margin: 0 0 14px; accent-color: #58cce0; cursor: pointer; }
#source-footer .fluid-sliders small { display: block; color: #77848c; font-size: 10px; line-height: 1.5; }
#source-footer .fluid-advanced { margin-top: 20px; border-top: 1px solid #ffffff10; }
#source-footer .fluid-advanced summary { margin: 8px 0; font-size: 10px; letter-spacing: .06em; }
#source-footer .fluid-advanced .fluid-sliders { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0 12px; }
#source-footer .fluid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
#source-footer .fluid-actions button { padding: 8px 13px; border: 1px solid #ffffff1c; border-radius: 2px; background: transparent; color: #a3afb5; font: inherit; font-size: 10px; cursor: pointer; }
#source-footer .fluid-actions button:hover { color: #fff; border-color: #58cce060; }
#source-footer #settings-message { font-size: 10px; color: #58cce0; }
#source-footer .fluid-panel :focus-visible { outline: 1px solid #58cce0; outline-offset: 5px; }
@media (max-width: 650px) {
  #source-footer .fluid-sliders,
  #source-footer .fluid-advanced .fluid-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
}