.positional-encoding-topic .study-layout {
  grid-template-columns: minmax(175px, 210px) minmax(0, 1040px);
  gap: clamp(2rem, 4vw, 4.5rem);
}

.positional-encoding-topic .study-article {
  max-width: 1040px;
}

.pe-source-video {
  margin: 1.6rem 0 2.35rem;
  border: 1px solid color-mix(in srgb, var(--study-accent) 38%, var(--study-line));
  border-radius: 18px;
  background: var(--study-card);
  padding: clamp(.8rem, 2vw, 1.15rem);
  box-shadow: 0 18px 42px rgba(24, 34, 45, .07);
  overflow: hidden;
}

.pe-source-video figcaption {
  margin: 0 0 .85rem;
  color: var(--study-ink);
  font: 820 clamp(.78rem, 1.45vw, .98rem)/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pe-source-video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 760px);
  border: 1px solid var(--study-line);
  border-radius: 12px;
  background: var(--study-panel);
  object-fit: contain;
}

.pe-source-video small {
  display: block;
  margin-top: .65rem;
  color: var(--study-muted);
  font: 650 .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pe-yarn {
  margin: 1.55rem 0 1.35rem;
  padding: clamp(.85rem, 2vw, 1.3rem);
  border: 1px solid color-mix(in srgb, var(--study-accent) 44%, var(--study-line));
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--study-accent) 8%, transparent), transparent 42%),
    var(--study-card);
  box-shadow: 0 18px 42px rgba(24, 34, 45, .07);
}

.pe-yarn figcaption {
  margin: 0 0 1rem;
  color: var(--study-ink);
  font: 820 clamp(.82rem, 1.5vw, 1rem)/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pe-yarn-stage {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: .9rem;
  border: 1px solid var(--study-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--study-panel) 92%, transparent);
}

.pe-yarn-stage > span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: var(--study-accent);
  color: white;
  font: 850 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pe-yarn-stage strong,
.pe-yarn-stage code,
.pe-yarn-stage p {
  display: block;
}

.pe-yarn-stage strong {
  color: var(--study-ink);
  font-size: .9rem;
}

.pe-yarn-stage code {
  margin-top: .42rem;
  color: var(--study-accent);
  font-size: clamp(.68rem, 1.4vw, .8rem);
  white-space: normal;
}

.pe-yarn-stage p {
  margin: .38rem 0 0;
  color: var(--study-muted);
  font-size: .75rem;
  line-height: 1.48;
}

.pe-yarn-arrow {
  display: block;
  margin: .18rem 0;
  color: var(--study-accent);
  text-align: center;
  font: 850 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pe-yarn-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: .7rem 0 .55rem;
}

.pe-yarn-band-grid section {
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--study-line);
  border-radius: 10px;
  background: var(--study-card);
}

.pe-yarn-band-grid small,
.pe-yarn-band-grid b {
  display: block;
}

.pe-yarn-band-grid small {
  color: var(--study-muted);
  font: 760 .58rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
}

.pe-yarn-band-grid b {
  margin-top: .24rem;
  color: var(--study-ink);
  font-size: .84rem;
}

.pe-yarn-band-grid .is-local { border-top: 3px solid #ef8354; }
.pe-yarn-band-grid .is-blend { border-top: 3px solid #d5a021; }
.pe-yarn-band-grid .is-global { border-top: 3px solid var(--study-accent); }

.pe-yarn-output {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: 13px;
  background: var(--study-ink);
  color: var(--study-card);
}

.pe-yarn-output strong {
  margin-right: auto;
  font-size: .88rem;
}

.pe-yarn-output span {
  padding: .28rem .5rem;
  border: 1px solid color-mix(in srgb, var(--study-card) 34%, transparent);
  border-radius: 999px;
  font: 700 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.positional-encoding-topic .study-article table {
  min-width: 680px;
}

.positional-encoding-topic .study-article pre code {
  tab-size: 4;
}

@media (max-width: 820px) {
  .positional-encoding-topic .study-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .pe-source-video {
    margin: 1.25rem 0 1.8rem;
    border-radius: 13px;
    padding: .6rem;
  }

  .pe-source-video video {
    border-radius: 9px;
  }

  .pe-yarn {
    border-radius: 13px;
    padding: .65rem;
  }

  .pe-yarn-stage {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: .6rem;
    padding: .7rem;
  }

  .pe-yarn-stage > span {
    width: 1.8rem;
    height: 1.8rem;
  }

  .pe-yarn-band-grid {
    grid-template-columns: 1fr;
  }

  .pe-yarn-output {
    align-items: flex-start;
    flex-direction: column;
  }
}