/* Slide 22: aggregate values and residual connection. */

#attn19-op-q-path-cat,
  #attn19-op-k-path-cat,
  #attn19-op-out-path-cat,
  #attn22-op-q-path-cat,
  #attn22-op-k-path-cat,
  #attn22-op-out-path-cat {
    stroke-width: 1.45;

}

.attn19-vector-wrap-q #attn19-q-sat,
  .attn19-vector-wrap-q #attn22-q-sat {
    width: var(--attn19-q-vector-w);

}

.slide.attn19-show-q #attn19-q-callout,
  .slide.attn19-show-q #attn22-q-callout {
    opacity: 1;
    visibility: visible;

}

.slide.attn19-show-q #attn19-q-group,
  .slide.attn19-show-q #attn22-q-group {
    opacity: 1;
    visibility: visible;

}

.slide.attn19-show-compare #attn19-compare-group,
  .slide.attn19-show-compare #attn22-compare-group {
    opacity: 1;

}

#slide-22 {
    --attn22-lane-label-w: var(--attn19-vector-label-col);
    --attn22-lane-gap: 0.34rem;

}

#slide-22 .attn19-takeaway {
    margin-top: 0.36rem;

}

#slide-22 .attn19-vector-values {
    font-size: 0.52rem;
    padding: 0 0.08rem;

}

#slide-22 #attn22-q-group,
  #slide-22 #attn22-compare-group {
    display: none;

}

#slide-22 .attn19-score-op-wrap {
    display: block;
    width: 100%;

}

#slide-22 .attn19-score-pill {
    width: calc(100% - var(--attn22-lane-label-w) - var(--attn22-lane-gap));
    margin-left: calc(var(--attn22-lane-label-w) + var(--attn22-lane-gap));
    transition: opacity 0.16s ease, visibility 0.16s ease;

}

#slide-22 .attn19-vector-wrap-v {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;

}

#slide-22 .attn19-vector-wrap-v .attn19-vector {
    display: block;
    width: calc(100% - var(--attn22-lane-label-w) - var(--attn22-lane-gap));
    min-width: 0;
    margin-left: calc(var(--attn22-lane-label-w) + var(--attn22-lane-gap));

}

#slide-22 .attn19-vector-wrap-v .attn19-vector-label {
    position: absolute;
    left: calc(var(--attn22-lane-label-w) + var(--attn22-lane-gap));
    top: calc(100% + 0.08rem);
    text-align: left;
    z-index: 3;
    pointer-events: none;

}

#slide-22 .attn22-col {
    position: relative;

}

#slide-22 .attn19-chip-wrap,
  #slide-22 .attn19-vector-wrap-x,
  #slide-22 .attn19-score-op-wrap,
  #slide-22 .attn19-vector-wrap-k,
  #slide-22 .attn19-vector-wrap-v {
    grid-column: 1;

}

#slide-22 .attn22-fly-pill {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 5;
    min-width: 2.1rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--attn19-focus-rgb), 0.95);
    background: rgba(var(--attn19-focus-rgb), 0.28);
    color: rgba(10,20,80,1);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-2xs);
    line-height: 1;
    text-align: center;
    padding: 0.16rem 0.32rem;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.34), 0 0 0.68rem rgba(var(--attn19-focus-rgb), 0.24);
    transform: translate(-50%, -50%);
    transition: none;

}

#slide-22 .attn19-score-op-wrap,
  #slide-22 .attn19-vector-wrap-v {
    z-index: 2;

}

#slide-22 .attn22-merge-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: visible;

}

#slide-22 .attn22-merge-ghost {
    position: absolute;
    margin: 0;
    pointer-events: none;
    opacity: 1;
    border-color: rgba(var(--attn19-focus-rgb), 0.82);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.22), 0 0 0.62rem rgba(var(--attn19-focus-rgb), 0.26);
    background: rgba(var(--attn19-focus-rgb), 0.14);
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    will-change: transform, opacity;
    transition:
      transform 760ms cubic-bezier(0.2, 0.75, 0.3, 1),
      opacity 180ms ease;

}

#slide-22 .attn22-merge-ghost .attn19-vector-values {
    color: rgba(10,20,80,1);

}

#slide-22 .attn22-col.is-merged-out .attn19-vector-wrap-v {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.12rem);

}

#slide-22 .attn22-col.is-merge-target .attn19-vector-wrap-v .attn19-vector-label {
    color: rgba(10,20,80,1);
    text-shadow: 0 0 0.34rem rgba(var(--attn19-focus-rgb), 0.44);

}

#slide-22 .attn22-col.is-merge-target .attn19-vector-wrap-v .attn19-vector {
    border-color: rgba(var(--attn19-focus-rgb), 0.86);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.26), 0 0 0.64rem rgba(var(--attn19-focus-rgb), 0.28);
    background: rgba(var(--attn19-focus-rgb), 0.16);

}

#slide-22.attn22-show-merged #attn22-col-sat .attn19-vector-wrap-v .attn19-vector {
    border-color: rgba(var(--attn19-focus-rgb), 0.9);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.28), 0 0 0.72rem rgba(var(--attn19-focus-rgb), 0.3);

}

#slide-22.attn22-show-merged #attn22-col-sat .attn19-vector-wrap-v .attn19-vector-label {
    color: rgba(10,20,80,1);

}

#slide-22 .attn22-residual-ghost {
    position: absolute;
    margin: 0;
    pointer-events: none;
    opacity: 1;
    border-color: rgba(var(--attn19-focus-rgb), 0.88);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.24), 0 0 0.66rem rgba(var(--attn19-focus-rgb), 0.28);
    background: rgba(var(--attn19-focus-rgb), 0.18);
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    will-change: transform, opacity;
    transition:
      transform 860ms cubic-bezier(0.2, 0.75, 0.3, 1),
      opacity 180ms ease;

}

#slide-22 .attn22-residual-ghost .attn19-vector-values {
    color: rgba(10,20,80,1);

}

#slide-22 .attn22-col.is-residual-target .attn19-vector-wrap-x .attn19-vector-label {
    color: rgba(10,20,80,1);
    text-shadow: 0 0 0.34rem rgba(var(--attn19-focus-rgb), 0.44);

}

#slide-22 .attn22-col.is-residual-target .attn19-vector-wrap-x .attn19-vector {
    border-color: rgba(var(--attn19-focus-rgb), 0.86);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.24), 0 0 0.66rem rgba(var(--attn19-focus-rgb), 0.28);
    background: rgba(var(--attn19-focus-rgb), 0.15);

}

#slide-22 .attn22-col.is-residual-consumed .attn19-vector-wrap-v {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.12rem);

}

#slide-22.attn22-show-pairing .attn22-col.is-flying .attn19-score-pill,
  #slide-22.attn22-show-pairing .attn22-col.is-paired .attn19-score-pill {
    opacity: 0;
    visibility: hidden;

}

#slide-22.attn22-show-pairing .attn22-col.is-pairing .attn19-score-pill {
    border-color: rgba(var(--attn19-focus-rgb), 0.95);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.38), 0 0 0.58rem rgba(var(--attn19-focus-rgb), 0.34);
    background: rgba(var(--attn19-focus-rgb), 0.2);

}

#slide-22.attn22-show-pairing .attn22-col.is-pairing .attn19-vector-wrap-v .attn19-vector-label {
    color: rgba(10,20,80,1);
    text-shadow: 0 0 0.35rem rgba(var(--attn19-focus-rgb), 0.48);

}

#slide-22.attn22-show-pairing .attn22-col.is-pairing .attn19-vector-wrap-v .attn19-vector {
    border-color: rgba(var(--attn19-focus-rgb), 0.84);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.24), 0 0 0.6rem rgba(var(--attn19-focus-rgb), 0.24);
    background: rgba(var(--attn19-focus-rgb), 0.14);

}

#slide-22.attn22-show-pairing .attn22-col.is-paired .attn19-score-pill {
    border-color: rgba(var(--attn19-focus-rgb), 0.78);
    background: rgba(var(--attn19-focus-rgb), 0.18);

}

#slide-22.attn22-show-pairing .attn22-col.is-paired .attn19-vector-wrap-v .attn19-vector-label {
    color: rgba(10,20,80,1);

}

#slide-22.attn22-show-pairing .attn22-col.is-paired .attn19-vector-wrap-v .attn19-vector {
    border-color: rgba(var(--attn19-focus-rgb), 0.62);
    background: rgba(var(--attn19-focus-rgb), 0.11);

}

#slide-22 .attn22-agg-wrap {
    --attn22-agg-collapse-ms: 240ms;
    margin-top: 0.42rem;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    background: var(--accent-bg);
    padding: 0.48rem 0.56rem;
    display: grid;
    gap: 0.36rem;
    opacity: 0;
    transform: translateY(0.2rem);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease;

}

#slide-22.attn22-show-aggregate .attn22-agg-wrap {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;

}

#slide-22 .attn22-agg-formula {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    min-height: 1.45rem;
    transition: opacity var(--attn22-agg-collapse-ms, 240ms) ease;

}

#slide-22 .attn22-agg-formula-residual {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-2xs);
    color: rgba(10,20,80,1);
    letter-spacing: 0.01em;

}

#slide-22 .attn22-agg-term {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-2xs);
    color: rgba(10,20,80,1);
    border: 1px solid rgba(var(--attn19-focus-rgb), 0.35);
    background: rgba(var(--attn19-focus-rgb), 0.13);
    border-radius: 999px;
    padding: 0.14rem 0.28rem;
    opacity: 0;
    transform: translateY(0.16rem);
    transition: opacity 0.22s ease, transform 0.22s ease;

}

#slide-22 .attn22-agg-term.is-visible {
    opacity: 1;
    transform: translateY(0);

}

#slide-22 .attn22-agg-output {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    gap: 0.3rem;
    opacity: 1;
    transform: scale(0.97);
    transition: opacity var(--attn22-agg-collapse-ms, 240ms) ease, transform var(--attn22-agg-collapse-ms, 240ms) ease;

}

#slide-22 .attn22-agg-output-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-2xs);
    color: rgba(10,20,80,1);
    white-space: nowrap;

}

#slide-22 .attn22-agg-output-vector {
    border: 1px solid rgba(var(--attn19-focus-rgb), 0.44);
    border-radius: var(--radius-sm);
    background: rgba(var(--attn19-focus-rgb), 0.1);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-width: 9.4rem;
    overflow: hidden;

}

#slide-22 .attn22-agg-out-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.56rem;
    font-variant-numeric: tabular-nums;
    color: rgba(10,20,80,1);
    text-align: center;
    padding: 0.18rem 0.08rem;
    border-right: 1px solid rgba(var(--attn19-focus-rgb), 0.22);

}

#slide-22 .attn22-agg-out-val:last-child {
    border-right: 0;

}

#slide-22 .attn22-agg-wrap.is-collapsed .attn22-agg-formula {
    opacity: 1;

}

#slide-22 .attn22-agg-wrap.is-collapsed .attn22-agg-output {
    opacity: 1;
    transform: scale(1);

}

#slide-22 .attn22-agg-wrap.attn22-agg-mode-residual .attn22-agg-formula {
    display: none;

}

#slide-22 .attn22-agg-wrap.attn22-agg-mode-residual .attn22-agg-formula-residual {
    display: flex;

}

#slide-22 .attn22-agg-wrap.attn22-agg-mode-residual .attn22-agg-output {
    opacity: 1;
    transform: scale(1);

}

#slide-22.attn22-show-residual .attn22-agg-wrap.attn22-agg-mode-residual .attn22-agg-output-vector {
    border-color: rgba(var(--attn19-focus-rgb), 0.68);
    box-shadow: 0 0 0 0.08rem rgba(var(--attn19-focus-rgb), 0.22);
    background: rgba(var(--attn19-focus-rgb), 0.16);

}